/*=========================================
 *======= 	  Frontend edit	   ============
 *=======================================*/
.btn.jmodedit {

	background-color:fade(@major_color, 87%);
	background-image:none;
	box-shadow:0 1px 5px rgba(0,0,0,.3);
	min-height:32px;
	text-align:center;
    top: 1px;
    right: 1px;
	overflow:hidden;

	&::before {
		font-family: 'peIcon7';
		content: "\e62c";
		color:#fff;
		text-shadow:1px 1px 1px rgba(0,0,0,.2);
		font-size:22px;
		line-height:25px;
		right:16px;
		text-align:center;
		vertical-align:middle;
		display: block;
		position:absolute;
		top:1px;
	}
}


.layout-edit {
	
	//Edit
	select.inputbox,
	select {
		width: 250px;
		max-width: 100%;
	}

	.btn-toolbar {
		margin-bottom: 20px;
		
		.btn {
			.fa, .fas {
				margin-right:3px;
				margin-left:-3px;
				
				&.fa-archive {
					margin-right:6px;
				}
			}
		}
	}

	.tab-content {
		padding-top: 20px;
	}

	#editor-xtd-buttons,
	.toggle-editor {
		margin-top: 20px;
	}

	.btn-group input[type="radio"] {
		display: none;
	}

}

/*======================================
 *======= 	 Media   ============
 *=====================================*/

iframe, svg {
	max-width: 100%;
}

#sbox-content > iframe {
	height: 100%;
}

.alert.alert-message {
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #468847;
	h4 {
		color: #468847;
	}
}

.manager.thumbnails {
  
  list-style: none;
  padding: 0;
  margin: 0 0 0 -20px;

	li {
		text-align: center;
		display: block;
		float: left;
		width: 80px;
		height: 80px;
		line-height: 18px;
		border: 1px solid #ddd;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.055);
		box-shadow: 0 1px 3px rgba(0,0,0,0.055);
		position: relative;

		[class^="icon-"],
		[class*=" icon-"] {
			font-size: 14px;
			line-height: 14px;
			color: #08c;
			display: inline-block;
			margin-top: 6px;
		}

		.height-50 {
			margin-top: 4px;
			height: 50px;
			margin-bottom: 4px;
		}

		a {
			text-decoration: none;
			color: #08c;
			font-size: 13px;
		}

		&:hover {
			background: #f7fcff;
			border-color: rgba(82,168,236,0.8);
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
			-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
			-webkit-transition: all 400ms;
			transition: all 400ms;
		}
	}
}

#mailto-window {
	margin: 20px;
	>h2 {
		font-size: 18px;
		margin-top: 0;
	}
	input[type="text"] {
		height: auto !important;
	}
}

//Choosen
.chzn-container.chzn-container-multi {
	input[type="text"] {
		min-height: 30px;
	}
}

// SP Post Formats
#sppostformats{
	
	.sp-image-upload-wrapper {
		width:300px;
		margin:0 0 20px 0;
		
		img {
			width:300px;
			margin:0;
			padding:0;
			position:relative;
			object-fit: cover;
		}
	}
	
	.post-formats {
		padding:0!important;
		border-radius: 4px;
		margin:0 0 10px;
		label {
			border:1px solid #bbb;
			padding:7px 12px;
			margin:0 0 10px -1px;
		}	
		
	}
	.controls {
		input {
			min-width:460px;
		}
	}
	
	textarea{
		min-width: 460px;
		width:99%;
		min-height: 120px;
	}
	.sp-gallery-field {
		ul.sp-gallery-items {
			li {
				height:100px;
				width:180px;
				a.btn-remove-image {
					padding:5px 12px;
				}
				
				img {
					width:180px;
					margin:0;
					padding:0;
					object-fit: cover;

				}
				
			}
		}
		.btn-sp-gallery-item-upload {
			border:1px solid fade(black, 15%);
			background-color: lighten(@major_color, 10%);
			color:#fff;
			text-shadow:1px 1px 1px rgba(0,0,0,0.3);
			
			&:hover {
				background-color: @major_color;
			}
		}
	}
}

.flex-edit {
	.fa-archive {
		margin-right:7px;
	}
}

div#images {
	overflow:hidden;
}

.sppb_article_edit {
	margin:0 auto 25px;
 	> a {
		border:1px solid lighten(@major_color, 5%);
		background:darken(gray, 8%);
		padding:11px 25px;
		border-radius:4px;
		color:#fff;
		text-shadow:1px 1px 2px rgba(0,0,0,.2);
		
		&:hover {
			border:1px solid darken(@major_color, 5%);
			background:darken(gray, 15%);
		}
	}
}

.edit-article {
	margin:0;
	float:right;
	display:inline-block;
	position:relative;
	width:100px;
	z-index:2;
}
.btn.dropdown-toggle {
	border:1px solid lighten(@major_color, 5%);
	background:transparent;
	padding:5px;
	color:#777;
	
	&:before {
		font-family: 'peIcon7';
		content: "\e62c";
		font-size:21px;
		line-height:24px;
		margin:0 7px 0 10px;
		
	}
	&:hover {
		border:1px solid darken(@major_color, 5%);
		color:#444;
	}
	.icon-cog {
		display:none;
	}
	.caret {
		margin:12px 8px 0 0;
		vertical-align:top;
	}
}
.media-preview.add-on {
		height:34px;
		margin-left:1px;
		background:#f9f9f9;
		width:42px;

	> .hasTipPreview {
		line-height:26px;
		
		&:before {
			font-family:'Font Awesome 5 Free';
			font-weight:900;
			content:"\f06e";
			font-style:normal;
		}
	}
}

.controls .input-append a.modal.btn,
a.modal.btn{
	position:relative!important;
    background:lighten(@major_color, 5%);
	line-height:16px;
	color:#fff;
	z-index:1;
	&:hover {
		background:darken(@major_color, 5%);
	}
}
a.btn.hasTooltip {
	position:absolute;
    line-height:16px;
	padding-left:4px;
	padding-right:4px;
	display:inline-block;
	background:#eee;
	border:1px solid #ccc;
	text-align:center;

}
.icon-remove {
	background-image:none;
	font-style:normal;
	padding-left:12px;
	padding-right:12px;
	&:before {
		font-family:'Font Awesome 5 Free';
		font-weight:900;
		content:"\f00d";
		font-style:normal;
	}
}
.calendar {
	table {
		width:100%;	
		background: #e0e0e0;
		
		.button {/* "<<", "<", ">", ">>" buttons have this class */
			border-radius:0;
			background:#999;
			border:1px solid rgba(0,0,0,0.2);
			display:table-cell;
			&:hover {
				background: #333;
				color:#fff;
			}
		}
		tbody td {
			text-align:center!important;
		}
	}
}
	
.input-append button[id^="jform_publish"] {
	background:lighten(@major_color, 5%);
	line-height:1;
	padding-left:16px;
	padding-right:15px;
	//color:#fff;
	&:hover {
		background:darken(@major_color, 5%);
	}
}

textarea#jform_metadesc {
	min-width:470px;
	min-height:150px;
}

/* Bootstrap (new) Calendar */
.js-calendar {
	min-width:264px;
	width:auto;
	padding:8px!important;
	background:rgba(255,255,255,0.9);
	border-radius:5px!important;
	.buttons-wrapper {
		.btn-exit, .btn-today, .btn-clear {
			margin:3px;
			padding:5px 18px;
			border-radius:4px!important;
			text-align:center;
			border:1px solid #ddd;
		}
	}
}