$vc_accent: #0473aa;

/*------------------------------------------------------------------
[# Backend Editor Tweaks]
-------------------------------------------------------------------*/

// Toggles.
.wpb_vcex_toggle {
	.wpb_element_title {
		cursor: pointer;
	}
	&:not(.wpb_vcex_toggle--active) {
		.wpb_element_title {
			display: flex;
			align-items: center;
		}
		.vc_admin_label.admin_label_content {
			display: none !important;
		}
	}
}

/*------------------------------------------------------------------
[# Setting Toggle]
-------------------------------------------------------------------*/
.vcex-param-preset-textfield,
.vcex-param-font-size {

	&__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 34px;
		padding: 0;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #7e8993;
		background: #eee;
		color: #32373c;
		cursor: pointer;
		margin-left: 8px;
		flex-shrink: 0;
		&:hover {
			color: #0473aa;
		}
		&[aria-pressed="true"] {
			background: #0473aa;
			color: #fff;
			border-color: transparent;
		}
	}

	.rtl &__toggle {
		margin-left: 0;
		margin-right: 8px;
	}

}

/*------------------------------------------------------------------
[# Textfield with Presets]
-------------------------------------------------------------------*/
.vcex-param-preset-textfield {
	display: flex;

	&__fields {
		flex-grow: 1;
	}

}

/*------------------------------------------------------------------
[# Responsive Fields]
-------------------------------------------------------------------*/
.vcex-param-responsive-fields,
.vcex-param-trbl,
.vcex-param-font-size__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
	gap: 12px;
}

.vcex-param-responsive-fields,
.vcex-param-font-size,
.vcex-param-trbl {
	&__item {
		display: flex;
		flex-grow: 1;
		align-items: center;
		height: 34px;
	}
	input[type="text"] {
		border: 1px solid #8c8f94;
		border-left-width: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		height: 100%;
		text-align: center;
		padding: 8px 6px;
	}
	&__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		flex-shrink: 0;
		background: #eee;
		height: 100%;
		border: 1px solid #8c8f94;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		box-sizing: border-box;
	}
	.dashicons {
		font-size: 15px;
		height: 15px;
		width: 15px;
		&--flip {
			transform: rotate( 90deg );
		}
	}
}

.vcex-param-font-size {
	display: flex;
	.vcex-param-font-size__list {
		flex-grow: 1;
	}
	&--single {
		display: flex;
		gap: 0;
		.vcex-param-font-size__item:first-child {
			max-width: none;
			input[type="text"] {
				border-left-width: 1px;
				border-radius: 4px;
				text-align: initial;
			}
			.vcex-param-font-size__icon {
				display: none;
			}
		}
		.vcex-param-font-size__item:not(:first-child) {
			display: none;
		}
	}
	&__item {
		min-width: 85px;
	}
}

/*------------------------------------------------------------------
[# Min Max]
-------------------------------------------------------------------*/
.vcex-param-min-max {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	&__item {
		display: flex;
		align-items: center;
	}
	label {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 12px;
		flex-shrink: 0;
		background: #eee;
		height: 100%;
		border: 1px solid #8c8f94;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		box-sizing: border-box;
	}
	input[type="text"] {
		border: 1px solid #8c8f94;
		border-left-width: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		height: 100%;
		text-align: center;
		padding: 8px 6px;
	}
}

/*------------------------------------------------------------------
[# Chosen Select]
-------------------------------------------------------------------*/
.vcex-chosen {

	+.chosen-container-single {
		font-size: inherit;
		.chosen-single {
			height: 34px;
			line-height: 33px;
			background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
			background-size: 16px 16px;
			border-color: #8c8f94;
			box-shadow: none;
			border-radius: 3px;
			div {
				display: none;
			}
		}
		.chosen-drop {
			border-color: #8c8f94;
			box-shadow: none;
			border-radius: 0 0 3px;
			margin-top: -2px;
		}
		.chosen-search-input[type=text] {
			background-image: none !important;
		}
	}

}

// older styles
.vcex-chosen,
.vc-chosen,
.vcex-chosen-alt {

	.chosen-results {
		max-height: 160px;
	}

	&.chosen-container{
		width: 100% !important;

		ul.chosen-results li.highlighted {
			background: $vc_accent;
		}

		/* Static positioning for chosen dropdowns.
		.chosen-drop {
			position: static;
			z-index: 1;
			margin: 0;
			clip: none;
			display: none;
			border-radius: 4px;
			border: 1px solid #7e8993;
			border-color: #d2d2d2;
		}

		&.chosen-with-drop .chosen-drop {
			display: block;
		}*/

	}

	/*
	&.chosen-container-single {

		.chosen-single {
			color: #32373c;
			font-size: 14px;
			height: 36px;
			line-height: 36px;
			padding-left: 10px;
			background: #fff;
			border-color: #ddd;
			background: #dcdcdc;
			box-shadow: none;
			@include border-radius( 3px );

			div {
				color: #000;
				top: 7px;
				right: 2px;
			}

		}

	}

	*/

}

/*------------------------------------------------------------------
[# Abstracts]
-------------------------------------------------------------------*/
.clr::after,
.wpex-clr::after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	zoom: 1;
}

.vcex-clear {
	clear: both;
}

.vcex-t-exclusive {
	color:#9d8967;
	border: 1px solid #ffeccc;
	background-color:#fff4e2;
	padding:0.6em;
}

.vcex-noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

/*------------------------------------------------------------------
[# Backend Views]
-------------------------------------------------------------------*/
.vcex-backend-view-images {
	display: flex;
	flex-wrap: wrap;

	img {
		display: block;
		width: auto;
		height: 75px;
		margin-right: 10px;
		margin-top: 10px;
	}

}

.vcex-backend-view-ba {
	display: flex;
	flex-wrap: nowrap;

	div {
		margin-right: 10px;
		margin-top: 10px;
	}

	img {
		display: block;
		width: auto;
		height: 75px;
	}

}

.vcex_wpb_image_holder {

	img {
		max-height: 75px;
	}

}

/*------------------------------------------------------------------
[# Custom Params]
-------------------------------------------------------------------*/

/* Responsive columns */
.vcex-responsive-columns-param {
	padding: 10px 0;
	background: #f9f9f9;
	border: 1px solid #eee;

	.vc_col-sm-6 {
		padding-top: 5px;
		padding-bottom: 5px;
	}

}


/* On/Off switch */
.vcex-ofswitch {
	float: left;
	width: 100px;
	margin: 6px 0 10px;
	border-radius: 3px;

	.rtl & {
	   float: right;
	}

}

.vcex-ofswitch .vcex-btn {
	display: block;
	float: left;
	text-transform: uppercase;
	background: #dcdcdc;
	color: #5e5e5e;
	font-size: 11px;
	font-weight: 600;
	width: 50%;
	text-align: center;
	cursor: pointer;
	transition: 0.25s all ease-in-out;
	line-height: 34px;
	padding: 0 8px;
	border: 0;
	letter-spacing: .5px;

	.rtl & {
	   float: right;
	}

	&:hover {
		outline: none;
	}

	&.vcex-on {
		border-radius: 3px 0 0 3px;
		.rtl & {
			border-radius: 0 3px 3px 0;
		}
	}

	&.vcex-off {
		border-radius: 0 3px 3px 0;
		.rtl & {
			border-radius: 3px 0 0 3px;
		}

	}

	&.vcex-active {
		background: #666;
		color: #fff;
		outline: none;

		&.vcex-on {
			background: #6dab3c;
			color: #fff;
		}

	}

}

/* Custom Selects */
.vcex-select-buttons-param {
	padding-top: 6px;
	font-size: 13px;

	.vcex-opt {
		display: inline-block;
		padding: 0 12px;
		line-height: 34px;
		text-align: center;
		margin-right: 6px;
		margin-bottom: 4px;
		cursor: pointer;
		color: #32373c;
		border: 1px solid #7e8993;
		box-shadow: none;
		border-radius: 3px;
		background: none;

		.rtl & {
			float: right;
			margin-right: initial;
			margin-left: 6px;
		}


		.dashicons {
			line-height: inherit;
		}
		&:hover {
			background: #efefef;
			outline: none;
		}
		&.vcex-active {
			background: $vc_accent;
			color: #fff;
			border-color: transparent;
			cursor: default;
			outline: 0;
			box-shadow: none;
			-webkit-appearance: none;
		}
	}

	&.vcex-no-active-bg .vcex-opt {
		border-width: 2px;
		&:hover,
		&.vcex-active {
			background: none;
			border-color: $vc_accent;
		}
	}

	.vcex-opt-italic {
		font-style: italic;
	}

	 .vcex-opt-oblique {
		font-style: oblique;
	}

	.vcex-opt-underline {
		text-decoration: underline;
	}

	.vcex-opt-overline {
		text-decoration: overline;
	}

	.vcex-opt-line-through {
		text-decoration: line-through;
	}

}

/* Sorter */
.vcex-sorter-param {

	li {
		cursor: move;
		background: #fafafa;
		color: #23282d;
		padding: 0 12px;
		line-height: 36px;
		font-size: 13px;
		font-weight: 600;
		border: 1px solid #ccd0d4;
		box-shadow: 0 1px 1px rgba(0,0,0,.04);
		overflow: hidden;
		white-space: nowrap;
		&:hover {
			border-color: #999;
			box-shadow: 0 1px 2px rgba(0,0,0,.1);
		}

		> a {
			float: right;
			font-size: 21px;
			color: #5cb85c;

			.rtl & {
				float: left;
			}

		}

		&.vcex-disabled {

			> a {
				color: #72777c;
			}

		}

	}

}

/* Custom Alignments */
.vcex-alignments-param {
	padding-top: 6px;

	.vcex-alignment-opt {
		width: 50px;
		line-height: 34px;
		height: 34px;
		padding: 0;
		float: left;
		border-radius: 3px;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #7e8993;
		background-color: #fff;
		color: #32373c;
		margin-right: 6px;
		cursor: pointer;

		.rtl & {
			float: right;
			margin-right: 0;
			margin-left: 6px;
		}

		.dashicons {
			line-height: inherit;
		}
		&.vcex-default {
			padding: 0 10px;
			width: auto;
		}
		&:hover {
			background: #eee;
			outline: 0;
		}
		&.vcex-active {
			outline: 0;
			color: #fff;
			background: $vc_accent;
			border-color: transparent;
		}
	}

}

/* Attach Images */
.wpb_el_type_vcex_attach_images,
.wpb_el_type_vcex_attach_image {

	// Add new image square button.
	.gallery_widget_add_images {
		margin-top: 0;
		display: block;
		float: left;
		height: 80px;
		width: 80px;
		background: #f5f5f5;
		border: 1px solid #dfdfdf;
		font-size: 0;
		color: #F5F5F5;
		position: relative;

		&:hover {
		  color: #c8c8c8;
		  border-color: #c8c8c8;
		  text-decoration: none;
		}

		&:focus {
		  box-shadow: none;
		}

		.rtl & {
			float: right;
		}

	}

	.vc-composer-icon {
	  font-size: 18px;
	  color: #87D148;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}

	.vc_icon-remove {
		display: block;
		position: absolute;
		background: red;
		height: 15px;
		width: 15px;
		top: auto;
		left: auto;
		bottom: 0;
		right: 0;

		&:hover {
			background: #000;
		}

		.vc-composer-icon {
			font-size: 14px;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.rtl & {
			left: 0;
			right: auto;
		}

	}

}

/* Colorpicker */
.vcex-color-param {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	min-height: 36px;

	.vcex-color-param__select,
	.vcex-color-param__picker {
		width: auto;
	}

	.vcex-color-param__select {
		min-width: 25%;
	}

	.vc_color-picker {
		margin-left: 10px;
	}

	&__preview {
		height: 34px;
		width: 50px;
		border-radius: 4px;
		margin-left: 10px;
		box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
		border: 1px solid transparent;
		box-sizing: border-box;
	}

	.wp-color-result-text {
		height: 32px;
		line-height: 32px;
	}

	.wp-color-result.button {
		padding-left: 34px;
	}

	input.wp-color-picker[type=text] {
		min-height: 34px;
		line-height: 34px;
	}

	.button.wp-picker-clear {
		min-height: 32px;
		line-height: 32px;
	}

}

.vcex-color-param:not(.vcex-color-param--custom) {
	.vc_color-picker {
		display: none;
	}
}

.vcex-color-param--custom,
.vcex-color-param--hide-preview {
	.vcex-color-param__preview {
		display: none;
	}
}

/* Subheading */
.wpb_el_type_vcex_subheading .edit_form_line > div {
	background: #0473aa;
	color: #fff;
	margin-top: 20px;
	padding: 10px;
}

/* Textfield Unit */
.vcex-textfield-unit-param {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: start;
	flex-wrap: wrap;
}

.vcex-textfield-unit-param input[type="text"] {
	width: 200px;
	max-width: 100%;
	margin-right: 5px;
}

.vcex-textfield-unit-param select {
	width: auto;
}



.vcex_wpb_image_holder {
	margin: 0;
	padding-top: 10px;
	clear: both;
}

/* Colors @deprecated in 4.9.6
.vcex-colors-select-param {
	padding-top: 6px;
	.vcex-opt {
		width: 28px;
		height: 28px;
		line-height: 28px;
		float: left;
		margin-right: 4px;
		padding: 0;
		border: 1px solid #7e8993;
		border-radius: 3px;
		cursor: pointer;
		text-align: center;
		font-size: 14px;
		padding: 0;
		color: #32373c;
		transition: border-color 0.2s ease;
		&:hover,
		&.vcex-active {
			outline: 0;
			box-shadow: none;
			border-color: $vc_accent;
		}

		.rtl & {
			float: right;
			margin-left: initial
			margin-left: 4px;
		}

	}
}*/

/*------------------------------------------------------------------
[# Element Icons]
-------------------------------------------------------------------*/
@import "icons";