/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearboth, .clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

.invisible {
	visibility: hidden;
}

.vamtam-config-page .disabled .button,
.vamtam-config-page .disabled .button-primary {
	opacity: .3;
}

/*
 *	tabs/ tab sections
 */

#vamtam-config-tabs {
	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0;
	}

	a {
		color: #555;
		border-color: #ccc;
		background: #e4e4e4;
	}

	a:hover,
	.ui-tabs-active a {
		color: #000;
		background: none;
		border-color: #ccc;
		border-bottom-color: #f1f1f1;
	}

	.ui-tabs-active a {
		border-width: 1px;
		color: #464646;
	}
}

h2.vamtam-config-no-tabs {
	padding-left: 1px;
	font-size: 30px;
}

/*
 * admin header
 */

#vamtam-config-title {
	display: none;
	width: 827px;
	margin-top: 30px;
	padding-top: 10px;
}

/*
 * helper links under header
 */

#vamtam-first-run,
#vamtam-config-title-links {
	background-color: #f0f0f0;
	padding: 5px 10px;

	border-top: 1px solid #fff;
}

#vamtam-first-run {
	border-bottom: 1px solid #dfdfdf;
	border-width: 1px 0;
	background-color: #ccf;
}

#vamtam-config-title-links * {
	-moz-transition: all 0.3s ease-out;
	  -o-transition: all 0.3s ease-out;
 -webkit-transition: all 0.3s ease-out;
	 -ms-transition: all 0.3s ease-out;
		 transition: all 0.3s ease-out;
}

#vamtam-config-title-links .button-primary {
	float: right;
	position: relative;
	top: 3px;
	margin-top: -3px;
	padding: 0 6px;
	margin-right: 10px;
}

#vamtam-config-title-links a {
	color: #666;
	text-decoration: none;
	margin: 0 5px;

	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;

	position: relative;
	top: 4px;
	float: left;
}

#vamtam-config-title-links a:hover {
	color: #21759b;
}

#vamtam-config-title-links a:first-child { margin-left: 0; }
#vamtam-config-title-links a:last-child { margin-right: 0; }

/*
 * title in admin header
 */

#vamtam-config-title h2 {
	color: #666;
	padding: 10px;
	font-style: normal;
	border-bottom: 1px solid #dfdfdf;
}

#vamtam-config-title p {
	margin: 0;
	padding: 10px 0;
}

#vamtam-config-title .message {
	margin: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	border: 0;
	background: #999BB9;
	color: #f0f0f0;
	text-align: center;
}

/*
 * config groups
 */

.vamtam-config-group {

	.config-info {
		padding: 15px 60px 15px 0;

		.info-wrapper {
			padding: 20px 18px;
			position: relative;
			background-color: #fff;
			border-left: 4px solid #0074a2;
			box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.1);

			.title {
				color: #B07320;
				font-weight: bold;
			}

			.desc {
				display: none;
				padding-top: 15px;
				color: #707070;

				&.visible {
					display: block;
				}
			}

			> a {
				position: absolute;
				right: 18px;
				top: 20px;
			}
		}
	}

	.config-separator {
		font-weight: bold;
		padding: 30px 0 16px 7px;
		line-height: 1;
		border-bottom: 1px solid #ccc;
		font-size: 1.17em;
	}
}

.vamtam-config-group.metabox {
	background: none;
	border: 0;

	&,
	input,
	select,
	textarea {
		font-family: sans-serif;
		font-family: 12px;
	}

	.ui-tabs-nav {
		background: none;
		padding: 0;
		border-bottom: 1px solid #ccc;
	}

	.vamtam-meta-tab {
		display: inline-block;
		border: 0;
		margin-bottom: -2px;
		padding-bottom: 1px;
		background: transparent;

		a {
			display: inline-block;
			text-decoration: none;
			padding: 14px 18px 10px 18px;
			line-height: 1;
			font-size: 14px;
			font-family: sans-serif;
			color: #21759b;

			&:hover {
				color: #d54e21;
			}
		}

		&.ui-tabs-active {
			margin-bottom: -2px;

			a {
				border: 1px solid #ccc;
				border-bottom-color: #fff;
				background: #fff;
				border-radius: 3px 3px 0 0;
				color: #464646;
			}
		}
	}

	.vamtam-meta-part {
		background: #fff;

		&.ui-tabs-panel {
			border-top-width: 1px;
			padding: 0 6px;
		}
	}
}

#vamtam-portfolio-formats-select {
	.vamtam-config-group.metabox .vamtam-meta-part {
		background: transparent;
		border: 0;
		padding: 0;
	}

	.rtitle {
		display: none;
	}

	.rcontent {
		margin-left: 0;
		padding-top: 0;

		.toggle-radio {
			display: block;
			padding: 4px 0;
		}
	}

	.vamtam-config-row {
		border: 0;
	}
}

.vamtam-config-group h4 {
	font-size: 15px;
	font-weight: normal;
	color: #464646;
	margin: 10px 0;
	padding: 7px 0;
	font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
}

.vamtam-config-row.autofill {
	&.no-box {
		.rcontent > div {
			background: transparent;
			border: 0;
		}
	}

	.rcontent > div {
		max-width: 648px;
		background: #fff;
		border: 1px solid #eee;

		.autofill-description {
			margin: 0;
			text-shadow: 0 1px 0 #fff;
			color: #555;
			background: #fff;
			border-bottom: 1px solid #eee;
			font: 400 14px/19px 'Open Sans', sans-serif;
			padding: 7px 12px;
		}

		.autofill-thumbs {
			padding: 8px;

			a {
				display: inline-block;
				margin: 11px;
				border: 1px solid #ddd;
				box-shadow: 0 1px 0 #fff;
				position: relative;
				z-index: 1;

				img {
					cursor: pointer;
					vertical-align: bottom;
				}

				&.selected,
				&:hover {
					box-shadow: 0 0 0 1px white, 0 0 0 5px #85CA47;

					&:before {
						content: "";
						display: block;
						position: absolute;
						background-image: url(../images/mark.png);
						background-repeat: no-repeat;
						height: 30px;
						width: 30px;
						top: -15px;
						right: -15px;
						z-index: 11;
					}
				}
			}
		}
	}
}

.vamtam-config-row {
	padding: 6px 20px;
	clear: both;
}

.vamtam-config-row {
	padding: 0 0 20px 0;
	border-bottom: 1px solid #e9e9e9;

	&.slim {
		border-bottom: 0;
		padding-bottom: 0;
	}

	&.short-border {
		border-bottom: 0;
		padding-bottom: 0;

		.rcontent {
			padding-bottom: 20px;
			border-bottom: 1px solid #e9e9e9;
		}
	}

	&.no-border {
		border-bottom: 0;
	}

	select {
		max-width: 100%;
	}

	.rtitle {
		float: left;
		width: 160px;
		padding: 27px 12px 0 12px;

		h4 {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			font-size: 12px;
		}
	}

	.rcontent {
		padding-top: 25px;
		margin-left: 184px;
	}
}

/*
 * footer
 */

.save-vamtam-config {
	width: 827px;
	margin: 0;
	padding: 20px 14px 25px 14px;
}

/*
 * portfolio gallery
 */

.imageItemWrap .hndle {
	vertical-align: middle;
	width: 10px;
}

.imageItemWrap .hndle div {
	width: 10px;
	height: 10px;
	background: #55f;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

#imagesSortable .sortItem-placeholder {
	background: #f0f0f0;
	border: 1px solid #ccc;
}

#credits_tbl {
	border: 1px solid #dfdfdf;
}

.vamtam_page_vamtam_help #vamtam-config,
.vamtam-help {
	padding: 10px 20px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.result {
	color: #FF4B33;
	display: block;
}

/* toggle */

.vamtam-config-row.toggle {
	.rcontent {
		img {
			margin-right: 10px;
			border: 1px solid #bbb;
		}

		.toggle-radio {
			display: inline-block;
			margin-right: 15px;
		}
	}
}

/* toggle */

/* radio */
.vamtam-config-row.radio {
	.toggle-radio {
		display: inline-block;
		margin-right: 15px;
	}
}
/* radio */

.vamtam-config-row .slide-type {
	margin-bottom: 5px;
}

.vamtam-config-row[data-slide-type="html"] .slide-types .image {
	display: none;
}

.vamtam-config-row .slide-types .html textarea {
	width: 100%;
}

.hidden_el {
	border-top: 1px solid #ccc;
	padding-top: 10px
}

.hidden_el:first-child {
	border-top: 0;
	padding: 0
}

.vamtam-config-row {
	select[multiple] {
		height: 6em;
	}

	label.checkbox-row {
		line-height: 1.8;
	}
}

/*** image upload ***/
.upload-basic-wrapper {
	.image-upload-controls {
		display: inline-block;
		vertical-align: bottom;
		width: 160px;
		height: 25px;
		padding-right: 10px;

		&.vamtam-video-upload-controls {
			width: auto;
		}
	}

	.image-upload-preview {
		display: none;
		vertical-align: bottom;
	}

	&.active {
		.image-upload-preview:not(.hidden) {
			display: inline-block;
		}
	}

	.button {
		display: inline-block;
		margin-right: 5px;
	}

	img {
		border: 1px solid #dfdfdf;
		max-width: 80px;
		max-height: 25px;
		min-width: 30px;
		vertical-align: bottom;
	}
}

.vamtam-upload-undo,
.vamtam-upload-clear {
	display: inline-block;
	margin-left: 1px;
}

.vamtam-upload-undo.hidden,
.vamtam-upload-clear.hidden {
	display: none;
}

/** backgrounds **/

.vamtam-config-row.background {
	.bg-block {
		margin-right: 15px;
		display: inline-block;

		&.bg-color,
		&.bg-image {
			width: 300px;
		}

		.ui-range-slider {
			width: 150px;
		}
	}

	.bg-position {
		width: 82px;
	}

	.hidden {
		display: none;
	}

	.toggle-radio {
		padding-right: 15px;
	}

	.bg-inner-row {
		padding-bottom: 25px;

		&:last-child {
			padding-bottom: 0;
		}
	}
}

/** text fields **/
.vamtam-config-row {
	&.text input,
	&.textarea textarea {
		width: 600px;
		max-width: 100%
	}
}

/** color rows **/

.color-row .single-color {
	float: left;
	padding-right: 5px;
}

.vamtam-config-row .single-desc {
	font-size: 9px;
	padding-bottom: 8px;
	color: #777;
}

.color-row .single-color input {
	font-size: 11px;
}

.vamtam-config-row .vamtam-colorpicker {
	width: 130px;
	border: 1px solid #dfdfdf;
	border-radius: 3px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAZCAYAAACLvRPfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJEMDQwNDAzMkM1RjExRTM4RDM4Q0M4NkZBRUE4Nzk0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJEMDQwNDA0MkM1RjExRTM4RDM4Q0M4NkZBRUE4Nzk0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkQwNDA0MDEyQzVGMTFFMzhEMzhDQzg2RkFFQTg3OTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkQwNDA0MDIyQzVGMTFFMzhEMzhDQzg2RkFFQTg3OTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5nbDNSAAABO0lEQVR42uzdPS4FUQAF4DtBIXRCtBQ24CesACFhC4SCHShEFDZAITbgtyRhd+NM5tnDvfF9yenf5CQnkzfz7uv6vi8V65K75KoA/15X+WD9uUzukymVgcFqwXHynMyqDQxWC3aSz2RBdWCwWrCW/CQr6gOD1YLl5CtZVyEYrBbMJx/JnhrBYLVgJnlKTlQJBquJa0huk2t1gsFqxXnyWLyrBQarEYfJazKnWjBYLdgq4xPERfWCwWrBbhnf1QIMVtU2J3dYS+oFg1Wzg+St+A4LDFblzsr4lHBarWCwqr2G5GYSwGBVa7ibGt50P1UlGKyaDb8lfE/21QgGq2bDaQ3DuVgbKgSDVbPhPKzvZFV9YLBqtl3Gd6ycOAoGq2pHyUtxpjsYrMpdJA/FSQxgsGr+fMX/EgITvwIMAJBNY7YggCv5AAAAAElFTkSuQmCC');
	background-position: -15px center;
	padding-left: 50px;
	color: #444 !important;
	font-size: 12px;
	background-size: cover;

	&.vamtam-state-transparent {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAZCAAAAACu1kwDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJEMDQwNDA3MkM1RjExRTM4RDM4Q0M4NkZBRUE4Nzk0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJEMDQwNDA4MkM1RjExRTM4RDM4Q0M4NkZBRUE4Nzk0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkQwNDA0MDUyQzVGMTFFMzhEMzhDQzg2RkFFQTg3OTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkQwNDA0MDYyQzVGMTFFMzhEMzhDQzg2RkFFQTg3OTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6IWNVXAAAAwklEQVRYw+3YrwvCYBDG8f3fN4PJaBSbiPHwR7M4DGJSbKLJ4sBkmuDU7QzDKDxmv0+7+oH37r1LrIk3+V4dgiQqlu8qsGQsHz3AkrGsfwNLxrLuFSwZyzr5f2NpSp9qegFLxvLxCSzXX2MG1g+ta1KBpff5YQmWPhR7BVgylg34Z8lmiztYKtbqyQ9exdrWrDsiVrpnN1SxWhsWaRWrfeTqIF8dzlwd1DE4LwIsESsrAywRa/0KsESsWR1gaVjpMsgbTfhCyWAv+vsAAAAASUVORK5CYII=')
	}
}

#vamtam-colorpicker {
	background: #fafafa;
	border: 1px solid #ccc;
	border-radius: 3px;
	z-index: 1000000;

	.transparent {
		display: block;
		text-align: center;
		border-top: 1px solid #ccc;
		margin-top: 10px;
		cursor: pointer;
		color: inherit;
		padding: 5px 0;
	}
}

/** select rows **/

.select-row,
.range-row  {
	.single-option {
		display: inline-block;
		padding-right: 5px;
	}
}

#front-static-pages label[for="page_for_posts"] {
	display: none;
}

body.toplevel_page_layerslider {
	#wpbody-content .screen-meta-toggle a {
		background: none;
	}
}

.rAds {
	display: none !important;
}

.vamtam-import-button.button {
	vertical-align: baseline;
	margin-right: 10px;

	+ .import-success {
		color: #46b450;
	}

	+ .import-fail {
		color: #dc3232;
	}
}

.form-table.vamtam-table th {
	width: 280px;
}

.vamtam-system-status {
	.dashicons-yes {
		color: #46b450;
	}

	.dashicons-warning {
		color: #ffb900;
	}
}

.vamtam-box-button {
	width: 200px;
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 15px;
	text-align: center;
	text-decoration: none;
	transition: all .3s ease;
	color: #000;
	font-weight: 600;
	font-size: 12px;

	&:hover {
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.07);

		.dashicons {
			color: #00a0d2;
		}
	}

	.dashicons {
		display: block;
		width: 100%;
		padding: 10px 0px;
		color: #0073AA;
		font-size: 30px;
		font-weight: normal;
		height: 60px;
		line-height: 60px;
	}

	span.label {
		width: 100%;
		display: block;
		background: #FAFAFA;
		padding: 10px 0px;
		border-top: 1px solid #E6E6E6;
	}
}

//Vamtam Theme Setup
.vamtam-ts {
	margin-left: -20px;
	margin-top: -15px;
	display: flex;

	#vamtam-ts-side {
		flex: 0 0 25%;
		background-color: white;
		min-width: 300px;
		min-height: 100%;
		position: fixed;
		top: 32px;
		z-index: 1;
		width: 300px;
	}

	#vamtam-ts-main {
		flex: 0 1 75%;
		background-color: #f1f1f1;
		margin-left: 300px;
		flex-basis: 100%;
	}

	#vamtam-ts-main {
		> .main-content {
			padding: 40px 35px;
			.vamtam-box-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;

				span.icon {
					color: #4270a4;
					font-size: 35px;
					margin-bottom: 30px;
					width: unset;
				}

				svg {
					fill: #4270a4;
					margin-bottom: 30px;
					width: 35px;
				}

				> a, a.vamtam-ts-button {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					padding: 10px 20px;
					font-weight: bold;
					min-height: 50px;
					text-align: center;
				}
			}

			.vamtam-box-wrap {
				box-sizing: border-box;
				border: 1px solid #e1e1e1;
				background-color: white;

				> header {
					padding: 10px 20px;
					background-color: #f8f8f8;
					h3 {
						font-weight: 500;
					}
				}

				> .content {
					padding: 20px;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					box-sizing: border-box;

					> a, a.vamtam-ts-button  {
						border-radius: 3px;
						padding: 10px 30px;
						min-height: auto;
						width: max-content;
					}

					p {
						&.vamtam-description {
						margin-top: 0;
						margin-bottom: 20px;
						font-size: 14px;
						color: #4b4b4b;

						&.warning {
							color: #f0c875;
						}
					}
						&:empty {
							display: none;
				}
			}
		}
			}
		}

		> #message {
			margin-top: 30px;
		}
	}

	&#vamtam-ts-homepage {
		#vamtam-check-license-disclaimer {
			position: absolute;
			bottom: 0;
			border-top: 1px solid #e5e5e5;
			margin-top: 100px;
			padding: 20px 20px 0 20px;
			font-size: 1.4em;
			color: #7b7d85;
			> h5 {
				color: black;
				margin: 0;
			}
		}

		#vamtam-envato-license-key {
			height: 60px;
			max-width: 60%;
			border: 1px solid #dedede;
			font-weight: bold;
			margin: 0;
			&::placeholder {
				color: #d2d2d2;
			}
		}

		#vamtam-check-license.unregister {
			cursor: pointer;
			display: flex !important;
			background-color: #c2321f;
			border-color: #c2321f;
			color: white;
			box-shadow: none;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			height: 60px;
			padding: 0 20px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: -5px;
			margin-bottom: 0;
			span.icon {
				font-size: 2em;
			}
			&.disabled {
				pointer-events: none;
			}
		}

		#vamtam-ts-main {
			position: fixed;
			right: 0;
			left: 35px;
			top: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		body:not(.vamtam-not-verified) & {
			.form-table {
				th {
					display: none;
				}
				td {
					margin-top: 25px;
				}
			}
		}
	}

	&#vamtam-ts-help {
		> #vamtam-ts-main {
			padding: 35px;
			> .main-content {

				> .vamtam-sd {
					> .content {
						padding: 20px 20px 0 20px;
						> span {
							display: block;
							font-size: 14px;
							margin-bottom: 20px;
						}

						> .cards-wrap {
							display: flex;
							flex-wrap: wrap;
							padding: 10px;

							> span {
								flex: 1 1 calc( 33% - 40px );
								margin: 20px;
							}
						}
					}
				}

				> .vamtam-hd-ss-wrap {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					margin-top: 40px;

					> .vamtam-hd {
						flex: 1;
						position: relative;
						margin-right: 15px;

						p.vamtam-description  {
							margin-bottom: 50px;
						}
					 }

					> .vamtam-ss {
						flex: 1;
						margin-left: 15px;

						table.form-table {
							&, td, tr, th {
								padding: 0;
								margin: 0;
							}

							td {
								> p.description {
									margin: 10px;
									color: #4b4b4b;
								}
								> label {
									margin: 10px;
								}
							}
						}

						th {
							display: none;
						}
					 }
				}
			}
		}
	}

	&#vamtam-ts-import-content {
		#vamtam-ts-main {
			> .main-content {
				display: flex;
				flex-wrap: wrap;
				> .vamtam-box-wrap {
					margin: 10px;
					&.import-fail > header {
						background-color: #fcf2f2;
					}
					#import-statuses {
						display: flex;
						flex-wrap: wrap;
						margin: 0;
						li {
							font-size: 14px;
							margin-bottom: 20px;
							margin-right: 20px;
						}
						span.import-status {
							width: 10px;
							height: 10px;
							display: inline-block;
							border-radius: 50%;
							margin-right: 10px;
							&.yes { background-color: #85c43d; }
							&.warning { background-color: #f0c875; }
							&.no { background-color: #d5d5d5; }
						}
					}
					.import-btn-wrap {
						display: flex;
						align-items: center;
						margin-top: 20px;

						a.vamtam-ts-button {
							display: flex;
							justify-content: center;
							margin-right: 10px;
						}

						.import-success {
							color: #46b450;
						}

						.import-fail {
							color: #b5321f;
							a {
								text-decoration: none;
								color: #4e7dad;
							}
						}
					}
				}

				> .vamtam-box-wrap:nth-child(1) {
					flex-basis: calc( 100% - 20px );
				}

				> .vamtam-box-wrap:not(:nth-child(1)) {
					flex-basis: calc( 50% - 20px );
				}
			}
		}
	}

	span.icon {
		font-family: 'theme';
		font-size: 3em;
	}

	.vamtam-ts-button {
		border: 1px solid #4474a6;
		border-bottom-width: 3px;
		background-color: #4b81b4;
		font-weight: 500;
		font-size: 15px;
		color: white;
		cursor: pointer;
		min-height: 50px;
		padding: 10px 35px;
		text-decoration: none;

		&:hover {
			background-color: #4b81b4;
			color: white;
			border-color: #4474a6;
		}

		&.disabled {
			pointer-events: none;
			background-color: #fbfbfb;
			color: #afafaf;
			border-color: #e5e5e5;
		}

		&.done {
			color: #565656;
			background-color: #f2f2f2;
			border: none;
			border-radius: 2px;
			&::before {
				font-family: "dashicons";
				content: "\f147";
				margin-right: 5px;
				margin-left: -5px;
				display: inline-block;
				vertical-align: bottom;
			}
		}
	}

	.input {
		margin-bottom: 20px;
		background-color: #fff;
		font-size: 17px;
		width: 100%;
		min-height: 50px;
		padding: 15px 15px;
		border-radius: 5px;
		border: none;
		text-align: center;
		transition: box-shadow 0.3s, transform 0.3s;
	}

	#vamtam-theme-title {
		position: relative;
		font-weight: bold;
		color: black;

		> span {
			display: block;
		}

		#vamtam-ts-greeter {
			font-size: 21px;
			margin-bottom: 8px;
			font-weight: 500;
		}
		#vamtam-ts-greeter-title {
			font-size: 32px;
			margin-bottom: 10px;
			line-height: 1;
		}
		#vamtam-ts-greeter-ver {
			display: inline-block;
			background-color: #f2f2f2;
			font-size: 12px;
			font-weight: normal;
			padding: 3px 7px;
			border-radius: 3px;
			color: #4b4b4b;
		}
		margin-bottom: 40px;
	}

	#vamtam-ts-dash-register,
	#vamtam-ts-import-content,
	#tgmpa-plugins {
		form#vamtam-register-form {
			padding-top: 50px;
			text-align: center;

			svg#vamtam-envato-logo {
				height: 30px;
				width: auto;
			}
		}
		.form-table {
			tbody {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-content: center;
			}

			th, td {
				display: block;
				width: 100%;
				text-align: center;
			}

			tr {
				display: flex;
				flex-direction: column;

				input[type="text"] {
					.input();
				}

				span button {
					.vamtam-ts-button();
				}
			}
		}
	}

	// Plugin page, filter tabs
	#vamtam-plugins-filters {
		 > ul {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			list-style: none;
			padding-left: 20px;
			margin: 0;

			> li {
				margin: 0;
				display: inline-flex;

				&:last-child {
					margin-left: 5px;
				}

				a {
					padding: 10px;
					font-size: 12px;
					font-weight: bold;
					max-height: 30px;
					text-decoration: none;
					background-color: #e4e4e4;
					color: #565656;
					border: 1px solid #d6d6d6;
					cursor: pointer;

					&.active {
						border-bottom: 1px solid #f1f1f1;
						background-color: transparent;
						color: black;
					}

					&:focus {
						box-shadow: none;
						outline: none;
					}
				}
			}
		}

		> hr {
			height: 1px;
			margin-top: -1px;
			border: 0;
			background-color: #d6d6d6;
		}
	}

	.submit {
		padding: 20px;
		input[type="submit"] {
			.vamtam-ts-button();
			text-shadow: unset;
		}
	}

	#vamtam-ts-nav-menu {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 40px 35px;
		box-sizing: border-box;

		.ts-icon {
			color: #4270a4;
			fill: #4270a4;
			margin-right: 20px;
			&.dashicons {
				font-size: 30px;
				line-height: unset;
			}
		}

		> ul {
			position: relative;
			margin-bottom: 0;

			> li {
				list-style: none;
				margin-bottom: 15px;
			a {
					&.disabled {
						opacity: 0.6;
						pointer-events: none;
					}

					span.vamtam-step-status {
						position: absolute;
						right: 15px;
						border-radius: 50%;
						display: inline-block;
						justify-self: flex-end;
						width: 5px;
						height: 5px;
						&.success {
							background-color: #85c43d;
						}
						&.error {
							background-color: #e15741;
						}
						&.warning {
							background-color: #f0c875;
						}
					}

				}

				&.is-active a {
					background-color: #e0eff7;
					border-color: #4b81b4;
				}
			}
		}

		> ul > li a,
		> a#vamtam-hs-btn {
			display: flex;
			align-items: center;
			padding: 20px;
			color: black;
			border: 1px solid #e5e5e5;
			background-color: white;
			border-radius: 5px;
			font-size: 1.1em;
			text-decoration: none;
			font-weight: bold;
			box-sizing: border-box;
			max-height: 62px;
		}

		> #vamtam-human-menu {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}

		> a#vamtam-hs-btn {
			position: absolute;
			bottom: 50px;
			z-index: 1;
			background: white;
			color: black;
			width: 230px;
			box-sizing: border-box;

			&.is-active {
				border: 1px solid #ff3d3b;
			}
			.ts-icon {
				fill: #ff3d3b;
			}
		}
	}

	#vamtam-ts-dash-register {
		.form-table {
			th:first-of-type {
				font-weight: normal;
				font-size: 1.3em;
				margin-top: 20px;
				margin-bottom: 10px;
			}

			td, th {
				padding: 0;
			}
		}

		p#vamtam-code-help {
			text-decoration: none;
			font-size: smaller;
			font-weight: bold;
			margin-bottom: 20px;
		}

		#vamtam-verified-code p {
			margin-bottom: -30px;
			padding: 0 20px;
			font-size: 20px;
			color: #1c1b17;
		}
	}

	#vamtam-check-license-result {
		margin: 20px;
		color: white;
		p.vamtam-check-license-response	span {
			display: block;
			padding: 20px;
			font-size: 18px;
			border-radius: 5px;
			margin-bottom: 20px;
			&#success {
				background-color: #85c43d;
			}
			&#fail, &.fail {
				background-color: #e15741;
			}
		}
	}

	.vamtam-licence-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 25px;

		#vamtam-license-result,
		#vamtam-license-result-wrap > span {
			box-sizing: border-box;
			height: 60px;
			padding: 20px;
			font-size: 15px;
			font-weight: bold;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			color: white;
			margin-right: -5px;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;

			svg {
				fill: currentColor;
				margin-right: 10px;
			}

			.dashicons {
				font-size: 30px;
				width: auto;
				height: auto;
			}

			&.valid {
				background-color: #85c43d;
			}
			&.invalid {
				background-color: #e15741;
			}
		}

		#vamtam-license-result-wrap {
			z-index: 1;
			> span {
				display: none;
			}
		}
	}

	#vamtam-post-result {
		> p {
			display: none;
			padding: 0 20px;
		}
	}

	// TGMPA Install Plugins Page
	&#vamtam-ts-tgmpa {
		#tgmpa-plugins{
			padding-top: 50px;

			table.wp-list-table {
				margin: 0 20px;
				width: calc( 100% - 40px );

				thead > tr {
					> td, > th {
						padding-top: 15px;
						padding-bottom: 15px;
					}
				}
			}

			th#description {
				width: 40%;
			}

			#bulk-action-selector-bottom {
				.input();
				font-size: 14px;
				min-height: 0;
				padding: 10px 15px;
				border-radius: 3px;
				border: initial;
				margin-bottom: 0;
				margin-right: 10px;
				font-weight: 500;
				height: 47px; //safari has a bug with min-height in flex containers.
			}

			.tablenav.bottom {
				> .bulkactions {
					display: flex;
					justify-content: center;
					align-items: center;
					float: none;
					padding: 20px;
					padding-bottom: 0;
					@media only screen and (max-width: 480px) {
						flex-direction: column;
						#bulk-action-selector-bottom {
							max-width: unset;
							margin-bottom: 10px;
						}
					}
				}
			}

			#the-list tr:nth-child(odd) {
				background-color: #f7f7f7;
			}

			.tablenav.top,
			tfoot {
				display: none;
			}

			#doaction2 {
				.vamtam-ts-button();
			}

			#vamtam-recommended-plugins-notice {
				display: none;
				background-color: #f8e9a3;
				color: #4c4834;
				padding: 20px;
				border-radius: 5px;
				border: 1px solid #f4d169;
				margin: 20px;
				align-items: center;
				svg {
					flex-shrink: 0;
					margin-right: 20px;
				}
			}
			#vamtam-required-plugins-notice {
				display: none;
				margin: 20px;
				color: #6e6e6e;

				strong {
					color: black;
				}

				> br {
					margin-bottom: 12px;
				}
			}

			&.no-row-actions {
				.row-actions.visible {
					display: none;
				}
			}

			//TGMPA logo
			.tablenav.bottom > p {
				display: none;
			}
		}
		.subsubsub {
			width: 100%;
			text-align: center;
			display: none;
		}
	}

	.vamtam-notice-wrap {
		flex-basis: 100%;
		min-height: 150px;
		background-color: white;
		display: flex;
		align-items: center;
		.vamtam-notice {
			border-left: 4px solid red;
			padding: 5px 20px;
			background-color: white;
		}
	}

	@media only screen and (max-width: 360px) {
		&#vamtam-ts-help {
			> #vamtam-ts-main > .main-content {
				.vamtam-box-btn {
					> a, a.vamtam-ts-button {
						word-wrap: break-word;
						white-space: normal;
					}
				}
			}
		}
	}

	@media only screen and (max-width: 768px) {
		flex-direction: column;

		&#vamtam-ts-homepage {
			#vamtam-ts-main {
				position: static;
			}
			#vamtam-check-license-disclaimer {
				position: static;
				margin-bottom: -90px;
			}

			#vamtam-ts-dash-register {
				padding: 20px;
			}
		}

		&#vamtam-ts-import-content {
			#vamtam-ts-main {
				.main-content > .vamtam-box-wrap:not(:nth-child(1)) {
					flex-basis: calc( 100% - 20px );
				}
			}
		}

		&#vamtam-ts-help {
			> #vamtam-ts-main {
				padding: 0;
			}
		}

		#vamtam-ts-side {
			min-height: auto;
			position: relative;
			width: auto;
		}

		#vamtam-ts-main {
			margin-left: 0;
			> .main-content {
				padding: 20px;
			}
		}

		#vamtam-ts-nav-menu {
			> a#vamtam-hs-btn {
				position: static;
				width: auto;
			}
		}
	}

	@media only screen and (max-width: 999px) {
		&#vamtam-ts-help {
			> #vamtam-ts-main > .main-content {
				 .vamtam-hd-ss-wrap {
					 flex-direction: column;
					> div {
						&:nth-child(1) {
							margin-right: 0px;
							margin-bottom: 15px;
						}
						&:nth-child(2) {
							margin-left: 0px;
							margin-top: 15px;
						}
					}
				}
			}
		}
	}

	@media only screen and (max-height: 560px) and (min-width: 768px) {
		&#vamtam-ts-homepage {
			#vamtam-ts-side,
			#vamtam-ts-main {
				position: absolute;
			}
		}
	}
}

body {
	// Hide footer on theme setup pages.
	&.vamtam_page_vamtam_theme_setup_plugin_manager,
	&.vamtam_page_tgmpa-install-plugins,
	&.vamtam_page_vamtam_theme_setup_import_content,
	&.toplevel_page_vamtam_theme_setup,
	&.vamtam_page_vamtam_theme_help {
		#wpfooter {
			display: none;
		}
	}

	&.toplevel_page_vamtam_theme_setup {
		#wpbody {
			position: static;

			> #wpbody-content {
				> #message {
					position: absolute;
					right: 0;
					margin: 10px;
				}
			}
		}

		&:not(.folded) {
			#vamtam-ts-homepage #vamtam-ts-main {
				left: 160px;
			}
		}

		@media only screen and (min-width: 783px ) and (max-width: 960px) {
			&.auto-fold {
				#vamtam-ts-homepage #vamtam-ts-main {
					left: 35px;
				}
			}
		}

		@media only screen and (min-width: 769px ) and (max-width: 782px) {
			&.auto-fold {
				#vamtam-ts-homepage #vamtam-ts-main {
					left: -10px;
				}
			}
		}
	}

	&.vamtam_page_tgmpa-install-plugins {
		#wpbody {
			> #wpbody-content {
				> #message {
					position: absolute;
					right: 0;
					margin: 10px;
				}
			}
		}
	}
}
