/****************************
YITH CUSTOMIZER STYLE
****************************/

#customize-controls {
	--yith-proteo-customizer-main-color: #009b9d;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#customize-controls .customize-section-title {
	z-index: 2;
}
#customize-controls .customize-control {
	position: relative;
	margin-bottom: 15px;
}
#customize-controls .customize-control .customize-control-title {
	padding-right: 20px;
}
#customize-controls .control-section .customize-control:last-of-type {
	margin-bottom: 0;
	padding-bottom: 20px;
	border-bottom: none;
}
#customize-theme-controls .customize-pane-child.accordion-section-content {
	border-bottom: none;
}
#customize-controls #menu-to-edit .customize-control:not(.customize-control-nav_menu_name) {
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
}

#customize-controls .customize-info {
	margin-bottom: 0;
}
li.customize-section-description-container.section-meta + li.customize-control[id*="group_title"] {
    margin-top: -16px
}
#customize-controls .control-section .accordion-section-title:focus, 
#customize-controls .control-section .accordion-section-title:hover, 
#customize-controls .control-section.open .accordion-section-title, 
#customize-controls .control-section:hover>.accordion-section-title,
.customize-panel-back:focus, .customize-panel-back:hover, 
.customize-section-back:focus, .customize-section-back:hover {
	color: var(--yith-proteo-customizer-main-color);
	border-left-color: var(--yith-proteo-customizer-main-color);
}
#customize-outer-theme-controls .control-section .accordion-section-title:focus:after, 
#customize-outer-theme-controls .control-section .accordion-section-title:hover:after, 
#customize-outer-theme-controls .control-section.open .accordion-section-title:after, 
#customize-outer-theme-controls .control-section:hover>.accordion-section-title:after, 
#customize-theme-controls .control-section .accordion-section-title:focus:after, 
#customize-theme-controls .control-section .accordion-section-title:hover:after, 
#customize-theme-controls .control-section.open .accordion-section-title:after, 
#customize-theme-controls .control-section:hover>.accordion-section-title:after, 
#customize-controls a {
	color: var(--yith-proteo-customizer-main-color);
}

.wp-core-ui #customize-controls  .button,
.wp-core-ui #customize-controls  .button-secondary {
	color: var(--yith-proteo-customizer-main-color);
	border-color: var(--yith-proteo-customizer-main-color);
}

.wp-core-ui #customize-controls .button-primary {
	background: var(--yith-proteo-customizer-main-color);
	border-color: var(--yith-proteo-customizer-main-color);
	color: #fff;
}

#customize-outer-theme-controls .accordion-section-content, 
#customize-theme-controls .accordion-section-content,
#customize-controls .description,
#customize-outer-theme-controls .accordion-section-title, 
#customize-theme-controls .accordion-section-title,
#customize-theme-controls .control-panel-themes > .accordion-section-title, 
#customize-theme-controls .control-panel-themes > .accordion-section-title:hover {
	color: #000;
}

/* Control description */
span.customize-control-description {
	clear: both;
}
span.description.customize-control-description:not(.customizer-control-description-expanded) {
	font-size: 0;
}
span.description.customize-control-description:before {
	content: '?';
	display: block;
	border: 1px solid #dddddd;
	color: #000;
	border-radius: 10px;
	padding: 0;
	text-align: center;
	width: 12px;
	height: 12px;
	background: #ffffff;
	line-height: 12px;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	position: absolute;
	right: 0;
	top: 5px;
	cursor: pointer;
}
#customize-control-site_icon span.description.customize-control-description:before {
	display: none;
}
span.description.customizer-control-description-expanded {
	margin-bottom: 10px;
}
/* RANGE INPUTS*/
.customize-control-range input[type="range"].range-slider {
	-webkit-appearance: none;
	width: 60%;
	padding: 10px 10px 10px 0;
	background: transparent;
	box-sizing: border-box;
	vertical-align: middle;
}
.customize-control-range input[type="range"].range-slider + input {
	width: 20%;
	margin: 0;
	box-sizing: border-box;
	vertical-align: middle;
}

.customize-control-range input[type="range"].range-slider:focus {
	outline: none;
}
.customize-control-range input[type="range"].range-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	box-shadow: none;
	background: #969696;
	border: none;
}
.customize-control-range input[type="range"].range-slider::-webkit-slider-thumb {
	box-shadow: none;
	border: none;
	height: 20px;
	width: 10px;
	border-radius: 27px;
	background: var(--yith-proteo-customizer-main-color);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8px;
}
.customize-control-range input[type="range"].range-slider:focus::-webkit-slider-runnable-track {
	background: #b7b7b7;
}
.customize-control-range input[type="range"].range-slider::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	box-shadow: none;
	background: #969696;
	border-radius: 0;
	border: none;
}
.customize-control-range input[type="range"].range-slider::-moz-range-thumb {
	box-shadow: none;
	border: none;
	height: 20px;
	width: 10px;
	border-radius: 27px;
	background: var(--yith-proteo-customizer-main-color);
	cursor: pointer;
}
.customize-control-range input[type="range"].range-slider::-ms-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
.customize-control-range input[type="range"].range-slider::-ms-fill-lower {
	background: #757575;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.customize-control-range input[type="range"].range-slider::-ms-fill-upper {
	background: #969696;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.customize-control-range input[type="range"].range-slider::-ms-thumb {
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	border: 0px solid rgba(0, 0, 0, 0);
	height: 20px;
	width: 10px;
	border-radius: 27px;
	background: var(--yith-proteo-customizer-main-color);
	cursor: pointer;
	height: 4px;
}
.customize-control-range input[type="range"].range-slider:focus::-ms-fill-lower {
	background: #969696;
}
.customize-control-range input[type="range"].range-slider:focus::-ms-fill-upper {
	background: #b7b7b7;
}
.customize-control-range .customize-control-unit {
    display: inline-block;
    position: static;
    top: 40px;
    right: 0px;
    font-size: 11px;
    font-weight: 500;
    line-height: 0px;
    padding: 2px 4px;
    border-radius: 2px;
    height: 5px;
}

/* Fix Select2 */
body .select2-container {
	z-index: 99999999;
	width: 100% !important;
	margin-bottom: 10px;
}
body .customize-control-select .select2-container {
	z-index: 1;
	width: 100% !important;
}
body .select2-container .select2-selection--single {
	height: 33px;
}
body .select2-container--default .select2-selection--single,
.customize-control select,
.customize-control input[type="date"],
.customize-control input[type="email"],
.customize-control input[type="number"],
.customize-control input[type="text"],
.customize-control input[type="url"],
.customize-control textarea {
	height: 33px;
	border-color: #ddd;
	border-radius: 0;
}
body .customize-control textarea {
	height: auto;
	line-height: normal;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered,
.customize-control select,
.customize-control input[type="date"],
.customize-control input[type="email"],
.customize-control input[type="number"],
.customize-control input[type="text"],
.customize-control input[type="url"],
.customize-control textarea {
	color: #32373c;
	line-height: 33px;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 30px;
}

/* GROUP SECTION MANAGEMENT */
#customize-controls .customize-control[id*="group_title"] {
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	margin-left: -12px;
	margin-right: -12px;
	width: calc(100% + 24px);
	color: var(--yith-proteo-customizer-main-color);
	background: #f3f3f5;
	border-top: 1px solid #ddd;
	transition: .15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out;
	padding: 8px 10px 7px 10px;
	line-height: 1.55;
	background: #f3f3f5;
	font-size: 14px;
	border-left: 4px solid #fff;
	border-bottom: 1px solid #eeeeee;
}
#customize-controls .customize-control[id*="group_title"].section-closed {
	background-color: #f3f3f5;
	color: #555d66;
	margin-bottom: 0;
}
#customize-controls .customize-control[id*="group_title"]:hover {
	color: var(--yith-proteo-customizer-main-color);
	background: #f3f3f5;
	border-left-color: var(--yith-proteo-customizer-main-color);
}
#customize-controls .customize-control[id*="group_title"]:hover::after {
	color: var(--yith-proteo-customizer-main-color);
}
#customize-controls .customize-control[id*="group_title"]:after {
	display: block;
	position: absolute;
	right: 5px;
	top: 14px;
	font-weight: bold;
	font-size: 1.2em;
	content: "\f345";
	color: var(--yith-proteo-customizer-main-color);
	font: normal 20px/1 dashicons;
	transform: rotate(-90deg);
}
#customize-controls .customize-control[id*="group_title"].section-closed:after {
	transform: rotate(90deg);
	color: #555d66;
}

#customize-controls .customize-control[id*="group_title"].section-closed .customize-control-description,
#customize-controls .customize-control[id*="group_title"].section-closed + .customize-control-description {
	display: none;
}

#customize-controls .customize-control[id*="group_title"] + .customize-control-description {
    margin-bottom: 10px;
}

/* RADIO IMAGE */
.customize-control-radio-image label {
	display: inline-block;
	max-width: 28%;
	font-size: inherit;
	line-height: inherit;
	height: auto;
	cursor: pointer;
	border-width: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: inherit;
	background: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	vertical-align: inherit;
	margin: 5px 10px 5px 0;
	vertical-align: top;
}
.customize-control-radio-image label .image-description {
	display: block;
	font-size: 0.9em;
	white-space: initial;
}
.customize-control-radio-image label:hover {
	background: none;
	border-color: inherit;
	color: inherit;
}

.customize-control-radio-image label:active {
	background: none;
	border-color: inherit;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.customize-control-radio-image img { 
	border: 2px solid #ddd;
	padding: 7px;
	border-radius: 5px;
}

.customize-control-radio-image .ui-state-active img {
	border-color: #5b9dd9;
	border-color: var(--yith-proteo-customizer-main-color);
}

.customize-control-radio-image .ui-state-active .image-description {
	color: var( --yith-proteo-customizer-main-color );
	font-weight: 500;
}

/* YES NO */
.customize-control-radio-yes-no label{
	background-color: #e7e7e7;
	color: #949494;
	font-weight: 500;
	text-transform: uppercase;
	padding: 6px 15px;
	display: inline-block;
	font-size: 0.7rem;
	margin-bottom: 10px;
}

.customize-control-radio-yes-no .ui-buttonset {
	font-size: 0;
}

.customize-control-radio-yes-no label.ui-corner-left {
	border-radius: 5px 0 0 5px;
}

.customize-control-radio-yes-no label.ui-corner-right {
	border-radius: 0 5px 5px 0;
}

.customize-control-radio-yes-no label.ui-state-active {
	background-color: var( --yith-proteo-customizer-main-color );
	color: #ffffff;
}

/* ON OFF */
.customize-control-radio-on-off label {
	background-color: #fff;
	color: #949494;
	font-weight: 500;
	text-transform: uppercase;
	padding: 6px 30px;
	display: inline-block;
	margin: 0 5px 0 0;
	border: 1px solid #949494;
	border-radius: 25px;
	position: relative;
}
.customize-control-radio-on-off label[for*="-no"] {
	padding-right: 15px;
}
.customize-control-radio-on-off label[for*="-yes"] {
	padding-left: 15px;
}
.customize-control-radio-on-off label[for*="-yes"]:after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	font-size: 0;
	border-radius: 20px;
	background-color: var( --yith-proteo-customizer-main-color );
	top: calc(50% - 7px);
	position: absolute;
	right: 10px;
}

.customize-control-radio-on-off label[for*="-yes"]:before {
	display: none;
}

.customize-control-radio-on-off label[for*="-no"]:before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	font-size: 0;
	border-radius: 20px;
	background-color: #949494;
	top: calc(50% - 7px);
	position: absolute;
	left: 10px;
}

.customize-control-radio-on-off label[for*="-no"]:after {
	display: none;
}

.customize-control-radio-on-off label[for*="-yes"] {
	color: var( --yith-proteo-customizer-main-color );
	border-color:var( --yith-proteo-customizer-main-color );
}

.customize-control-radio-on-off .ui-buttonset {
	height: 32px;
	position: relative;
}

.customize-control-radio-on-off .ui-buttonset label{
	position: absolute;
	z-index: 0;
}

.customize-control-radio-on-off .ui-buttonset label:not(.ui-state-active) {
	z-index: 2;
	opacity: 0;
}
.customize-control-radio-on-off .ui-buttonset label.ui-state-active {
	z-index: 1;
	opacity: 1;
}

/**********
BUTTONS
**********/
.yith-proteo-button-preview-box {
    background-color: #f5f5f5;
    text-align: center;
    padding: 30px;
    border: 1px solid #eeeeee;
	margin-top: 5px;
}
.yith-proteo-button-preview {
	border: 1px solid;
	line-height: normal;
	padding: 0.7em 1.5em 0.8em;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	transition: all ease 0.3s;
	font-family: inherit;
	font-weight: 600;
	border-radius: var(--proteo-buttons_border_radius, 50px);
	position: relative;
}
.customize-control-description + .yith-proteo-button-preview {
	margin-top: 15px;
}
.button-style-1 {
	border-color: var(--proteo-button_1_border_color, #448a85);
	background: var(--proteo-button_1_bg_color, #448a85);
	background-color: var(--proteo-button_1_bg_color, #448a85);
	color: var(--proteo-button_1_font_color, #ffffff);
}
.button-style-1:hover {
	border-color: var(--proteo-button_1_border_hover_color, #4ac4aa);
	background: var(--proteo-button_1_bg_hover_color, #1a4e43);
	background-color: var(--proteo-button_1_bg_hover_color, #1a4e43);
	color: var(--proteo-button_1_font_hover_color, #ffffff);
}
.button-style-2 {
	background: linear-gradient(180deg, var(--proteo-button_2_bg_color_1, #00a79c) 0%, var(--proteo-button_2_bg_color_2, #01af8d) 100%);
	color: var(--proteo-button_2_font_color, #ffffff);
	border: none;
}
.button-style-2:hover {
	color: var(--proteo-button_2_font_hover_color, #ffffff);
	background: linear-gradient(180deg, var(--proteo-button_2_bg_hover_color, #30615e) 0%, var(--proteo-button_2_bg_hover_color, #30615e) 100%);
}

/*************************
SPACING CONTROLS
*************************/
.customize-control-spacing_control ul.spacing-wrapper {
	position: relative;
	-js-display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	white-space: nowrap;
}	
.customize-control-spacing_control li {
	display: inline-block;
	text-align: center;
	-webkit-box-flex: 1;
	-ms-flex: auto;
	flex: auto;
}
.customize-control-spacing_control li span {
	display: block;
	font-size: 0.75em;
	text-align: left;
	text-transform: uppercase;
	padding-left: 8px;
	font-weight: 500;
}
.customize-control-spacing_control li input {
	text-align: left;
}

/************************
GFONT CONTOLS
*************************/
#customize-controls .customize-control.customize-control-google_fonts {
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}

/*****************************
Remove borders where needed
*****************************/
#customize-controls .customize-control-google_fonts + .customize-control-number {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 10px;
}

/*************************************
Options separation with a border
**************************************/
li#customize-control-yith_proteo_footer_sidebar_2_enable,
li#customize-control-yith_proteo_footer_sidebars_side_by_side,
li#customize-control-yith_proteo_cross_sell_max_number,
li#customize-control-yith_proteo_update_cart_button_style {
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
    margin-top: 10px;
}

li#customize-control-yith_proteo_cross_sell_max_number span.description.customize-control-description:before {
	top: 20px;
}

/***********************************
Font size
************************************/
li.customize-control[id*="_size"].customize-control-number input[type="number"] {
    width: calc(100% - 25px);
}
li.customize-control[id*="_size"].customize-control-number:after {
    content: 'px';
    display: block;
    position: absolute;
    top: 40px;
    right: 0px;
    font-size: 11px;
    font-weight: 500;
    line-height: 0px;
    padding: 2px 4px;
    border-radius: 2px;
    height: 5px;
}

/******************************************
Undo controls render
*******************************************/
.customize-control-reset {
	background: url( ../../img/panel-icons/undo.svg );
	background-size: contain;
	display: inline-block;
	height: 16px;
	margin-left: 5px;
	opacity: 0.5;
	vertical-align: text-bottom;
	width: 16px;
	font-size: 0;
	color: transparent;
	white-space: nowrap;
}
.customize-control-reset:hover {
	opacity: 1;
}