@mixin pseudo-block( $place, $type, $opacity: 1, $top: false, $right: false, $bottom: false, $left: false ){
	&::#{$place}{
		content: '';
		display: block;
		position: absolute;
		opacity: $opacity;
		transition: opacity 100ms ease-in;


		@if $type == 'bg'{
			background-color: currentcolor;
		}
		@if $type == 'border'{
			border: 1px solid currentcolor;
		}
		@if $type == 'top'{
			border-top: 1px solid currentcolor;
		}
		@if $type == 'right'{
			border-right: 1px solid currentcolor;
		}
		@if $type == 'bottom'{
			border-bottom: 1px solid currentcolor;
		}
		@if $type == 'left'{
			border-left: 1px solid currentcolor;
		}
		@if $top{
			top: $top + px;
		}
		@if $right{
			right: $right + px;
		}
		@if $bottom{
			bottom: $bottom + px;
		}
		@if $left{
			left: $left + px;
		}
	}
}
[v-cloak]{
	opacity: 0;
}
.wcs-builder{
	position: relative;
	z-index: 0;

	.el-select{
		display: block;
		max-width: 600px;
	}

	.wcs-builder__shortcode{
		font-style: normal;
		line-height: 30px;
		margin-bottom: 0;
		overflow: hidden;
		display: block;
		background-color: rgba(255,255,255,0.45);
		padding: 4px 15px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 2px;
		opacity: 0.85;
		cursor: pointer;

		&.success{
			color: #27ae60;
			background-color: rgba(39, 174, 96, 0.1);
		}
	}

	.wcs-builder__title + :not(.wcs-builder__container){
		display: none !important;
		height: 0 !important;
	}

	h2{
		margin-top: 50px;
		margin-bottom: 5px;
	}
	h4{
		margin-bottom: 5px;
	}
	.clear-all{
		padding: 12px 7px 7px;
		text-decoration: underline;
	}
	&__container{
		margin-top: 10px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}
	&__content{
		position: relative;

		@media (min-width: 992px){
			width: calc(100% - 250px);
			margin-right: 20px;
		}

		@media (min-width: 1200px){
			width: calc(100% - 340px);
			margin-right: 50px;
		}

	}
	&__side{
		width: 100%;
		margin-top: 50px;

		@media (min-width: 992px){
			width: 230px;
			margin-top: -40px;
		}

		@media (min-width: 1200px){
			width: 280px;
			margin-top: -40px;
		}

		h2{
			margin-top: 32px;
			margin-bottom: 16px;
		}
		select{
			display: block;
			margin-bottom: 10px;
			width: 100%;
			height: 32px;
		}
		.wcs-labels{
			margin-bottom: 10px;

			label{
				flex: 1 0 30%;
			}
		}
		.wcs-labels__label--with-icon{
			padding: 17px 2px;
			i{
				margin-bottom: 5px;
			}
		}

	}
	&__description{
		margin-bottom: 10px;
		margin-top: 0;
		opacity: 0.75;
		font-size: 90%;
		max-width: 800px;
	}

	&__tabs-nav,
	&__tabs-data{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	&__tabs-data {
		padding: 20px;
		background-color: rgba(255,255,255,1);

		li:not(.active){
			display: none;
		}

	}
	&__tabs-data + &__description{
		margin-top: 10px;
	}
	&__tabs-nav{
		display: block;
		overflow: hidden;
		margin-top: 10px;

		a{
			text-decoration: none;
			display: block;
			padding: 10px 25px;
			color: inherit;
			opacity: 0.5;
			font-weight: bold;
			border-bottom: none !important;
			border-top-left-radius: 2px;
			border-top-right-radius: 2px;
			background-color: rgba(0,0,0,0.1);
			font-size: 15px;
			transform: translateY(3px);
			text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
			cursor: pointer;

			&:hover{
				transform: translateY(0);
				opacity: 0.75;
			}
		}
		li{
			display: inline-block;
			margin: 0 6px 0 0;
			position: relative;

			&.active{

				a{
					background-color: rgba(255,255,255,1);
					opacity: 1;
					transform: translateY(0);
				}

			}

		}


	}
	&__box{
		background-color: #fff;
		border-radius: 2px;
		padding: 18px 15px;
		overflow: hidden;
		h4{
			margin-top: 0;
		}
	}
	&__info-label{
		display: block;
		white-space: normal;
		margin-bottom: 5px;
		font-weight: bold;
	}
	&__color-field{
		margin: 10px;
		padding: 10px 0;
		display: inline-block;
		width: 100%;
		max-width: 270px;

		.wcs-builder__info-label{
			display: inline-block;
			margin-right: 20px;
			min-width: 120px;
		}
		.wp-color-result{
			margin-bottom: 0;
		}
		.wp-color-picker-field{
			min-width: 85px;
		}

	}
	.ti-size-xxl{
		font-size: 200%;
	}
	#title{
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 160%;
		text-indent: 10px;
	}
	#save{
		display: block;
		float: right;
	}

	#trash{
		color: #AA0000;
		float: left;
		line-height: 30px;
	}
	#preview{
		display: block;
		text-decoration: none;
		float: left;
	}

}

.wcs-labels{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin-left: -5px;
	margin-top: -5px;

	label{
		flex-grow: 1;
		box-sizing: border-box;
		flex: 1 0 180px;

		.wcs-builder__content &{
			@media(min-width: 992px){
				flex-basis: 33%;
			}
			@media(min-width: 1200px){
				flex-basis: 20%;
			}
		}

	}

	&__label{

		&--with-icon{
			text-align: center;
			padding: 50px 2px;
			font-weight: bold;
			position: relative;
			font-size: 90%;

			@include pseudo-block( 'before', 'bg', 0.06, 5,5,5,5 );

			&::before{
				transition: all 200ms ease;
				border-radius: 2px;
				z-index: -1;
				background-color: rgba(0,0,0,0.05);
				opacity: 1;
			}

			input{
				display: none;
			}
			i{
				display: block;
				margin-bottom: 10px;
				font-weight: normal;
			}

			&:hover::before, &.selected::before{
				background-color: rgba(255, 255, 255, 1);
			}
			&.selected{
				span{
					opacity: 0.65;
				}
			}
		}

	}

	&__columns{
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		margin-left: -4px;
		margin-top: -4px;

		input{
			margin-right: 8px;
		}

		label{
			display: block;
			flex-grow: 0;
			margin-left: 4px;
			margin-top: 4px;
			box-sizing: border-box;
			background-color: rgba(0,0,0,0.035);
			padding: 8px;
			border-radius: 2px;
			box-sizing: border-box;
			transition: all 200ms ease-in;
			text-overflow: ellipsis;
			font-size: 90%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			@media (min-width: 992px){
				flex-basis: calc(20% - 4px);
			}

			@media (min-width: 1400px){
				flex-basis: calc(12.5% - 4px);
			}

			@media (min-width: 1600px){
				flex-basis: calc(10% - 4px);
			}


			&:hover{
				background-color: rgba(0, 0, 0, 0.1);
			}
		}

	}

}

.wcs-cols{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-left: -20px;
	margin-top: -20px;

	&__col-2{

		margin-left: 20px;
		margin-top: 20px;
		box-sizing: border-box;
		flex-basis: calc(100% - 20px);

		@media(min-width: 768px){
			flex-basis: calc(50% - 20px);
		}
		@media(min-width: 1400px){
			flex-basis: calc(33.33% - 20px);
		}
		@media(min-width: 1600px){
			flex-basis: calc(20% - 20px);
		}

		label{
			display: block;
			font-weight: bold;
			line-height: 24px;
		}
		input{
			width: 100%;
			height: 34px;
			line-height: 34px;
		}
	}

}
.wcs-input-text{
	label{
		display: block;
		font-weight: bold;
		line-height: 24px;
	}
	input{
		width: 100%;
		height: 32px;
		line-height: 32px;
	}
	input + .wcs-builder__description{
		margin-top: 5px;
	}
}
.wcs-notice{
	margin: 20px 20px 20px 0 !important;
	padding: 15px 20px;
	background: #fff;
	border-left: 3px solid #26AE60;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);

	p{
		margin: 0;
	}

	&--error{
		border-left: 3px solid #E74C3B;
	}
}
@import 'builder-addons';
.quick-action{
	border-radius: 100%;
	height: 30px;
	line-height: 30px !important;
	width: 30px;
	color: #fff !important;
	display: inline-block;
	transition: background-color 200ms ease;
}
.quick-action.ti-trash{
	background-color: #E74C3C;
}
.quick-action.ti-trash:hover{
	background-color: #C0392C;
}
.quick-action.ti-layers{
	background-color: #F1C40E;
}
.quick-action.ti-layers:hover{
	background-color: #F39C12
}
.quick-action.ti-pencil-alt{
	background-color: #27AE60
}
.quick-action.ti-pencil-alt:hover{
	background-color: #2ECC71
}
td{
	vertical-align: middle !important;
}
.link-post{
	font-weight: 600;
}
tr th:first-child,
tr td:first-child{
	padding-left: 20px;
}
.wcs-import__show{
	display: block;
	max-width: 300px;
	line-height: 2;
}
.wcs-import{
	display: none;
	margin-right: 5px;
}
.wcs-import + .button{
	display: none;
}
#wcs-import__checkbox{
	display: none;
}
#wcs-import__checkbox:checked + .wcs-import,
#wcs-import__checkbox:checked + .wcs-import + .button{
	display: inline-block;
}

#ui-datepicker-div{
	display: none;
}
.wcs_datepicker,
.wcs-datepicker-pop{
	margin-top: 10px;
	margin-bottom: 10px;
	display: block !important;
	background-color: #fff;
	padding: 15px;

	.ui-datepicker{
		display: block !important;
	}
	*{
		border: none;
		margin: 0;
		padding: 0;
		background: none;
		float: none;
		width: auto;
		font-family: inherit;
		font-weight: inherit;
		text-align: inherit;
		color: inherit;
		vertical-align: inherit;
		opacity: inherit;
		line-height: inherit;
	}
	.ui-datepicker.ui-datepicker{
		background: transparent !important;
	}
	.ui-datepicker-prev,
	.ui-datepicker-next{
		display: none;
	}
	.ui-datepicker-month{
		width: 48%;
		display: inline-block !important;
		float: left;
	}
	.ui-datepicker-year{
		width: 48%;
		float: right;
		display: inline-block !important;
	}
	.ui-datepicker-calendar{
		width: 100%;
		clear: both;
		text-align: center;
		margin: 5px 0 0 0;
		border-spacing: 0;
		table-layout: fixed;

		thead th{
			border-bottom: 1px solid rgba(0,0,0, 0.05);
			font-weight: bold;
			padding: 5px 0;
		}

		td{
			line-height: 2em;
			border-bottom: 1px solid rgba(0,0,0, 0.025);
			padding: 0;
		}
		td:nth-child(2n - 1){
			background-color: rgba(0,0,0, 0.025);
		}
		.ui-state-default{
			display: inline-block;
			margin: 4px 2px;
		}
		.ui-datepicker-unselectable .ui-state-default{
			opacity: 0.5;
		}
		.ui-datepicker-current-day{
			a{
				color: white;
				border-radius: 300px;
				min-width: 2em;
			}
		}
		a.ui-state-default{
			text-decoration: none;
		}
	}
}
.ui-datepicker select{
	font-size: 12px;
	height: 24px;
	margin: 0 !important;
	border: 1px solid rgba(0,0,0, 0.15) !important;
	border-radius: 2px;
}


.wcs-datepicker{
	label{
		display: block;
		margin-bottom: 5px;
	}
	input[type=text]{
		opacity: 0.75;
	}
	input + a{
		color: #AA0000;
		display: inline-block;
		text-decoration: none;
		margin-right: 8px;
		font-size: 90%;
		float: right;
		margin-top: 5px;
	}
}

.wcs-table-admin{
	tr, td{
		transition: background-color 120ms ease;
	}
	tr:hover{
		background-color: transparent !important;
		td{
			background-color:  RGBA(0,0,0, 0.075);
		}
	}
}


.wcs-switcher.carousel_loop{
	display: none !important;
}