@charset "UTF-8";
@import 'fields';




//------------------------------------*\
//    VARIABLES
//------------------------------------*/
$accent 				: #3677bd;
$dark 					: #232527;
$gray 					: #303235;
$light 					: #cbcfd4;
$lighter 				: #3b3f45; // borders
$descriptions			: #4d7b90;

$borders                :#e0e8ef;

$unit 					: 24px;
$popup 					: 275px;
$container-spacing		: 17px;

$blue-dark				: #416B7E;
$blue-darker			: #2A3B44;

$fields_height 			: 44px;
$fields_spacing 		: 24px;
$fields_border-radius	: 4px;
$fields_border-color	: #B8DAEB;

$background-hover 	: #f5fcff;





//------------------------------------*\
//    RESETS
//------------------------------------*/
.wp-full-overlay-sidebar {
	*, *:before, *:after {
		box-sizing: border-box;
	}
}

.iris-picker,
.iris-picker * {
	box-sizing: content-box;
}

@mixin clearfix {
	&:after {
		content: " ";
		display: table;
		clear: both;
	}
}

// Change sections overflow
.wp-full-overlay-sidebar-content .accordion-section-content {
	overflow: visible;
}

.control-section:not(.control-section-themes) .customize-control {
	padding: 0;
    width: 100%;
	min-height: initial;
}


// Header – Close + Save Controls
#customize-header-actions {
	// border-bottom: 0;
	#customize-save-button-wrapper {
		margin-top: 7px;
	}
}

// Footer
.wp-full-overlay-footer {
	.devices {
		button {
			float: left;
			border-radius: 0;
		}
	}
}

// Temporary Fix to Make "Close" button align with the "Back"
.customize-controls-close {
	width: 48px;
    height: 44px;
	color: #7da9c3;
	background: #ffffff;
	border-top: none;
	border-right-color: $borders;

	&:focus, &:hover {
		background: $background-hover;
	}

	// "X" Icon
	&:before {
		top: 0px;
	}
}

// Remove Accordion Section Title Margin
#customize-controls .customize-info {
	// margin-bottom: 0;
	border-bottom-color: $borders;
}

.customize-panel-back, .customize-section-back {
	height: 74px;
	color: #7da9c3;
	border-right-color: $borders;

	&:hover, &:focus {
		border-left-color: $background-hover;
		background: $background-hover;
	}
}


#customize-theme-controls {
	.theme * {
		box-sizing: content-box;
	}

	.accordion-section-content {
		padding: $container-spacing;
	}

	.customize-section-title {
		margin-top: -$container-spacing;
		margin-right: -$container-spacing;
	}

	#accordion-section-add_menu {
		border-bottom: none;

		.add-menu-toggle {
		 	float: none;
		}
	}

	.customize-pane-child.open {
		height: 100%;
	}
}

#customize-controls .description {
    // margin-bottom: 9px;

	font-size: 12px;
	font-weight: 300;
    font-style: normal;
	line-height: 1.6;
	color: $descriptions;
    text-indent: 0;
}

.customize-control-description {
    margin-top: 6px;
}

.customize-control {
	margin-bottom: $fields-spacing;
}

// Active Themes Section
#accordion-section-themes {
		+.control-section {
			border-top: none;
		}
}

// Subsection Info Title
#customize-controls {
	.panel-meta.customize-info {
		 .accordion-section-title {
		 	border-top: none;
		 	height: 74px;
		 }
	}
}

.button-controls {
	@include clearfix();
}





//------------------------------------*\
//    GENERAL FIELDS
//------------------------------------*/



// GENERAL Buttons

.wp-core-ui {

	// Primary & Secondary Buttons
	 .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result),
	 .button-primary,
	 .button-secondary {
	 	width: auto;
	 	// padding: 6px 20px;
	 	padding-left: 15px;
	 	padding-right: 15px;

	 	// font-size: 13px;
	 	font-weight: 400;
		color: #F5FCFF;
		// line-height: 1.4;
		text-shadow: none;
		border: none;
		background: #AED2E5;
		box-shadow: 0px 2px 0px 0px #8DBED7;
		border-radius: $fields_border-radius;

		&:hover {
			color: white;
			text-shadow: none;
			background: #98C6DD;
			box-shadow: 0px 2px 0px 0px #74A7C2;
		}
	 }

	 #customize-header-actions {
		 .button-primary {
			background: #73C5EE;
			box-shadow: 0px 2px 0px 0px #57ABD5;

			&:hover {
				background: #58B0DD;
				box-shadow: 0px 2px 0px 0px #3F8AAF;
			}

			&.save {

			}

			&.has-next-sibling {
				border-right: 1px solid #57ABD5;
			}

			&:disabled {
				color: white !important;
				background: #AED2E5 !important;
				opacity: 0.7;
				box-shadow: 0px 2px 0px 0px #8db5ca !important;

				&.has-next-sibling {
					border-right: none;
				}
			}
		 }
	 }


	 // Reset Buttons
	.reset_section,
	.reset_panel {
	    width: 100%;
	    height: 4em;
	    display: block;
	    margin: 0px 0 25px;
	}

	.reset_panel {
		margin-top: 10px;
	}
}



// Separators Titles

%fields-label {
	display: block;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    // margin-bottom: 5px;
}

.customize-control-title {
	color: $blue-darker;
}

%section-background {
	content: "";

	position: absolute;
	top: 0;
	bottom: 0;
	left: -$container-spacing - 1;
	right: -$container-spacing - 1;
	z-index: -1;
}

.separator {
	&.label {
		@extend %fields-label;
		@extend .customize-control-title;
		//margin-bottom: -3px;
		//margin-bottom: -$fields-spacing/2 - 3px;

	    font-weight: 500;
	}

	&.large {
		margin-top: $fields-spacing/2;
		font-size: 16px;
		color: #39474D;
	}

	&.section {
		position: relative;
		padding: 14px 0;
		margin-bottom: 0;
		background: none;
		border: none;

		&[id*="layout"] {
			margin-top: 0;

			&:before {
				border: none;
			}
		}

		&:before {
			@extend %section-background;

			border: 1px solid $borders;
			background-color: #ffffff;
			box-shadow: 0px 1px 0px 0px #DFE8EF;
		}
	}

	&.sub-section {
		position: relative;
		padding: 12px 0;

		&:before {
			@extend %section-background;

			border-top: 1px solid $borders;
			border-bottom: 1px solid $borders;
			background-color: #f6fbff;
		}

		+ span {
			margin-top: 20px;
			font-style: normal;
		}
	}
}

// h2.separator {
// 	margin-bottom: -20px;
//     margin-top: 30px;
// }



// Section tabs

.section-navigation-wrapper {
	position: relative;

	height: 43px;
	margin: -15px -12px 0 -12px;
	margin-right: -$container-spacing;
	margin-left: -$container-spacing;
}

.section-navigation {
	display: flex;
	margin-top: -1px;

	clear: both;

	border-top: 1px solid $borders;

	a {
		flex: 1 1 auto;
		display: block;
		padding: 12px 0;

		color: #3b484e;
		background-color: #ffffff;

		border-bottom: 1px solid $borders;
		border-right: 1px solid $borders;

		text-align: center;
		text-decoration: none;

		transition: background-color .15s ease-in-out;

		&:last-child {
			border-right: 0;
		}
	}
}

#customize-controls .customize-info,
#customize-controls .customize-section-title {
	&.is-sticky.is-sticky {
		top: 40px;
	}

	&.is-in-view.is-in-view {
		box-shadow: none;
	}
}

#customize-controls .has-nav .customize-info,
#customize-controls .has-nav .customize-section-title {
	margin-right: -12px;
}

#customize-controls .customize-section-title.customize-section-title {
	border-bottom: 0;
}

.customize-section-description-container.section-meta.has-nav {
	margin-bottom: 0;
}

	// Extended typography field

.font-options__wrapper {
		position: relative;

		//&:hover .font-options__options-list {
		//	opacity: 1;
		//	pointer-events: auto;
		//}

		&:after {
			content: "";
			position: absolute;
			top: 90%;
			left: 0;
			right: 0;
			z-index: 0;

			display: block;
			height: 30px;
		}
}
	.font-options__head {
		@extend %input;
		@extend %select;

		display: flex;
		justify-content: space-between;

		&.font-options__head {
			-webkit-appearance: none;

		    text-overflow: ellipsis;
		    // overflow: hidden;
		    white-space: nowrap;
		}
	}
		.font-options__font-title {
			margin-right: 26px;
			margin-left: 10px;

			font-size: 12px;
			line-height: 20px;
			font-weight: 300;

			color: #98c6dd;

		    text-overflow: ellipsis;
		    overflow: hidden;
		    white-space: nowrap;
		}

	.font-options__options-list {
		position: absolute;
		top: calc(100% + 6px);
		left: -6px;
		right: -6px;
		z-index: 2;

		display: block;
		padding: 10px;

		border: 1px solid #dfe8ef;
		border-radius: 5px;

		background-color: #ffffff;

		opacity: 0;
		display: none;
		//pointer-events: none;
		transition: opacity .15s linear;

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

		&:before,
		&:after {
			content: "";

			position: absolute;
			top: -20px;
			right: 25px;

			height: 0;
			width: 0;

			border: solid transparent;

			z-index: 10;
		}

		&:before {
			border-bottom-color: white;
			border-width: 10px;
			z-index: 11;
		}

		&:after {
			border-bottom-color: rgba(0, 0, 0, 0.075);
			border-width: 12px;
			top: -24px;
			right: 23px;
		}
	}





//------------------------------------*\
//    OBJECTS
//------------------------------------*/
%top-arrow {
	&:after {
        content: "";
        position: absolute;
        bottom:100%;
        right: 12px;
        border-collapse: separate;
        width: 0;
        height: 0;

        border-width: 0 9px 9px 9px;;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
    }
}

%box-bg {
	position 	: absolute;
	top 		: 60px;
	right 		: -6px;
	z-index 	: 100000;
	width 		: $popup !important;
	padding 	: 12px;
	display 	: none;
	background 		: #fff;
	border-radius 	: 3px;
	@extend %top-arrow;

	&.active {
		display:block;
	}

	&:after {
		right 			: 58px;
		border-color 	: transparent transparent #fff transparent;
	}
}

%icon-btn {
	position 	: absolute;
	top 		: -36px;
	right 		: 45px;
	display 	: block;
	height 		: 30px;
	width 		: 30px;
	margin 		: 0;
	padding 	: 0;
	border 		: none;
	background 	: #1d1e20;
	color 		: #5f6369;
	border-radius : (100px);
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 0px inset;
	line-height : 30px;
	text-align 	: center;
	cursor 		: pointer;
	outline 	: none;

	&:before {
		font-family: 'Elusive-Icons';
		content: "\e669";
	}

	&:hover, &.active {
		background 	: $lighter;
	}

	&.active {
		box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px;
	}
}



//------------------------------------*\
//    $INPUT FIELDS
//------------------------------------*/

%input {
	width: 100%;
	height: $fields_height;
	padding: 10px 14px;

	background: #FFFFFF;
	border: 2px solid $fields_border-color;
	border-radius: 4px;

	font-size: 14px;
	line-height: 1.5;
	color: $blue-dark;
	outline: 0;

	&:focus {
		border-color: #73C5EE;
		box-shadow: none;
		// box-shadow: 0 0 0 2px #73C5EE;
	}
}

%select {
	width: 100%;
	-webkit-appearance: button; // hide default arrow in WebKit/Blink
	-moz-appearance: none; // hide default arrow in Gecko

	font-weight: 600;

	background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
	background-position: right 16px top 16px;

	&[multiple] {
		background: white;
	}
}

.wp-full-overlay-sidebar-content .customize-control {

	input[type=text]:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
	input[type=checkbox],
	input[type=password],
	input[type=color],
	input[type=date],
	input[type=datetime],
	input[type=datetime-local],
	input[type=email],
	input[type=month],
	input[type=number],
	input[type=radio],
	input[type=tel],
	input[type=time],
	input[type=url],
	input[type=week],
	input[type=search],
	select,
	textarea,
	input[type="number"].range-value {
		@extend %input;
	}

	input[type=text],
	textarea {
		font-size: 13px;
	}

	input[type=text] {

	}

	// Textarea
	textarea {
		height: auto;
	}

	// Checkbox
	input[type=checkbox],
	input[type=radio] {
		width: $fields_height/2;
		height: $fields_height/2;

		&:checked {
			background: #73C5EE;
			border-color: #5AB9E8;

			&:before {
				color: white;
				margin: -1px 0 0 -2px;
			}
		}
	}

    .awesome_preset input[type=radio]:checked {
      background: transparent;
    }

	&.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control),
	&.customize-control-radio {

		// Split into two columns only when
		// there is more than one label
		label:not(:only-of-type),
		// WordPress 4.9 Class
		> .customize-inside-control-row:not(:only-of-type) {
			margin-left: 30px;
			padding-top: 0;
			padding-bottom: 0;
			display: inline-block;

			width: calc(49% - 30px);

			text-indent: -6px;

		}

		label {
			color: $blue-dark;

		}

        // Except the dividers titles
        [id*="divider"] + & {
            margin-top: 0;
        }
	}

	// Radios
	input[type=radio] {
		border-radius: 50%;

		&:checked:before {
			content: none;
		}
	}

    &.customize-control-checkbox {
      // Select HTML Labels followed by a Checkbox field
      .customize-control-html + & {
        margin-top: -24px;
      }
    }

	&.customize-control-radio {
		label,
		// WordPress 4.9 Class
		.customize-inside-control-row {
			margin-top: $fields-spacing/2;

		}

		// New WP 4.9 Changesets options
		&#customize-control-changeset_status .customize-inside-control-row {
			margin-top: 0;
		    text-indent: 0;
		}
	}

	// Select
	select {
		@extend %select;
	}


	// Range Field
	input[type="range"] {
		width: 65%;
	}

	$input-size: calc(100% - 55px);
	$input-height: 6px;
	$thumb-height: 22px;

	input[type="range"] {
	  position: relative;
	  -webkit-appearance: none;
	  width: $input-size;
	  height: $thumb-height;
	  overflow: hidden;
	  outline: none;
	  background: none;

	  &:before {
	    content: " ";
	    position: absolute;
	    top: 8px;
	    left: 0;
	    height: $input-height;
	    width: 100%;
	    background: #DFE8EF;
	    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.30);
	    border-radius: 10px;
	  }

	  &::-webkit-slider-thumb {
	    -webkit-appearance: none;
	    width: $thumb-height;
	    height: $thumb-height;
	    background: #27ae60;
	    position: relative;
	    z-index: 3;

	    background: #FFFFFF;
	    border: 2px solid #B8DAEB;
	    border-radius: 4px;

	    &:before {
	      content: "..";
	      position: absolute;
	      left: 5px;
	      top: -5px;
	      color: #B8DAEB;
	      font-size: 1em;
	      letter-spacing: 1px;
	    }

	    &:after {
	      content: " ";
	      width: $input-size;
	      height: $input-height;
	      position: absolute;
	      z-index: 1;
	      right: $thumb-height - 2px;
	      top: $input-height;
	      background: #73C5EE;
	    }
	  }
	}


	input[type="number"].range-value {
		min-width: 40px;
		max-width: 80px;
		width: auto;
	    height: 30px;
	    top: -5px;
	    float: right;
	    padding: 4px 0px 5px 0px;
	    margin-left: 10px;
	    font-size: 13px;
	    line-height: 1;
	    text-align: center;
	}

	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	  -webkit-appearance: none;
	  margin: 0;
	}
}





//------------------------------------*\
//    Color Picker
//------------------------------------*/

.customize-control-color {
	display: block;

	.customize-control-title {
		float:left;
	}
	.customize-control-content {

	}

	.wp-picker-container {
		position 	: relative;
		float 		: right;
		top 		: -3px;


		.wp-picker-holder {
			position: relative;
		}

        .wp-color-result,
        .wp-color-result.button {
          top 		: 0;
          height 		: 30px;
          width 		: 40px;
          margin 		: 0;
          padding 	: 0;

          border-radius: $fields_border-radius;
          background: #2ECC71;
          border: 2px solid #B8DAEB;
          box-shadow: none;

          &:after,
          .wp-color-result-text {
            display:none;
          }
        }

		.iris-picker {
			position 	: absolute;
			top 		: 40px;
			right 		: 0;
			z-index 	: 1000;
			width 		: $popup !important;
			border-top 	: none;
			border-color: #DFDFDE;
			border-radius: 0 0 3px 3px;
			border 		: none;
			background 	: white;

			&, * {
				box-sizing: content-box;
			}

			.iris-picker-inner {

			}
			.iris-square {
				width 			: 215px !important;
				height 			: 173px !important;
				margin-right 	: 0;
			}
			.iris-strip {
				float 	: right;
				box-shadow: rgba(0,0,0,0.4) 0 1px 1px inset;
				.ui-slider-handle {
					border-color 	: #aaa !important;
					opacity 		: 1;
					box-shadow: none;
				}
			}
			.iris-palette {
				width : 24px !important;
				height : 24px !important;
				border-radius: 50px;
				box-shadow: rgba(0,0,0,0.4) 0 1px 1px inset;
			}
		}

		.wp-picker-open+.wp-picker-input-wrap {
			position 	: absolute;
			z-index 	: 1000;
			top 		: 35px;
			right 		: 0;
			width 		: $popup;
			padding 	: 9px 12px;
			background 	: white;
			border 		: none;
			border-radius: 3px 3px 0 0;
			@extend %top-arrow;

			input {

				&.wp-color-picker {
					float:left;
					width: 100px;
				    font-size: 13px;
				    text-align: left;
				    margin: 0;
			        padding: 6px 12px;
				    height: auto;
				}

				&.button {
					float:right;
					padding: 4px 12px;
				    height: 30px;
				}
			}
		}
	}
}




//------------------------------------*\
//    Font Selector
//------------------------------------*/

.customize-control-font {

	// Add extra bottom spacing to better view the modal
	&:last-child {
		margin-bottom: 150px;
	}
}



//------------------------------------*\
//    CSS Editor Customizer
//------------------------------------*/

// Panel
#accordion-panel-live_css_edit_panel {

}

// Section
#accordion-section-live_css_edit_section {

	// Add the default border to title
	.customize-section-title {
		margin-top: -13px;
	    border-bottom: 1px solid #ddd;
	}
	// Ace Editor
	#css_editor {
		top: 70px;
		border-top: 10px solid white;
		overflow: visible;

		&:before {
			content: "";
			width: 48px;
			height: 10px;
			display: block;
			background: #e8e8e8;
			top: -10px;
			position: absolute;
			z-index: 10000000;
			left: 0;
		}
	}

	// Add Some Extra Spacing Around the Editor Content
	.ace_scroller {
		padding-left: 10px;
	}
}

// Increase the Customizer width when Editor is opened
.wp-full-overlay.editor_opened {

	margin-left: 500px;

	#customize-controls {
		width: 500px;
	}

	// Go back when the Customizer is collapsed
	&.collapsed #customize-controls {
		width: 300px;
	}
}





//------------------------------------*\
//    Media Uploader (Logo)
//------------------------------------*/

.customize-control-media,
.customize-control-site_icon,
li#customize-control-site_logo {
	.current {
		margin-bottom: 10px;
		min-height: $fields_height;
		background: #F5FCFF;
		border: 2px solid $fields_border-color;
		border-radius: $fields_border-radius;

		.container, span {
			border: none;
		}
	}


	.inner, .current span {
		font-size: 13px;
		color: #98C6DD;
	}

	.inner {
		line-height: 1.4;
	}

	.thumbnail-image {
		padding: 14px;
		text-align: center;

		img {
			width: auto;
		}
	}

	.actions {
		margin-bottom: 0;
	}
}





//------------------------------------*\
//    TYPOGRAPHY
//------------------------------------*/

.customize-control-typography, .customize-control-typography {

	// Font, Weight and Subsets selectors
	select {
		margin-bottom: 10px;
	}

	.description {
		margin-top: -3px;
	}

	&:not(:first-child) .customize-control-title {
		// margin-top: 15px;
	}

	ul li {
		width: 100%;
		margin: 0;
		// display: inline-table;

		&:nth-child(2n+1) {
			// width: 45%;
			// margin-right: 5%;
		}

		label {
			// width: 100%;
			// display: block;

			// margin-top: 10px;
			// margin-bottom: 5px;
		}

		select {
			// width: 100%;
		}
	}

	.customify_typography_font_weight {

	}

	.customify_typography_font_subsets {
		// height: 28px;
	}
}

	.customize-control select[multiple].customify_typography_font_subsets {
		// height: 48px;
	}





//------------------------------------*\
//    PRESETS
//------------------------------------*/

.customize-control-title {
  // margin-bottom: 20px;
}

.default-preset-button {
  background-color: #F5F6F6;
  float: right;
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid #CBCBCB;
  margin-right: 4px;
  font-family: "Open Sans",sans-serif;
  font-size: 13px;

}

.customize-control-preset {
	.description {
		margin-right: 5px;
		font-style: normal;
	}
}

.customify_preset {
  &.radio_buttons {

    .customify_radio_button {
        border: none;
        display: inline-block;
        padding: 2px;
        margin: 3px;
        position: relative;
        overflow: hidden;
        height: auto;

        input[type="radio"] {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9999;

            &:checked{

                &+label {
                    background-color: #ebebeb;
                    &:before {
                        content: '>';
                        color: inherit;
                    }
                    &:after {
                        content: '<';
                        color: inherit;
                    }
                }

                &:before {
                    opacity: 0;
                }
            }
        }

        label{
            position: relative;
            z-index: 999;
            border-left: 4px solid;

        }
    }

  }

  .awesome_preset {
    width: 45%;
    // height: 122px;
    position: relative;
    display: inline-block;
    text-align: center;
    color: white;

    margin-top: 5px;
	margin-bottom: 25px;

	transition: all 0.2s;

	&:hover {
		opacity: 0.9;
	}

    &:before {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1px;

      border: 1px solid #FFF;
      background: transparent;
      opacity: .5;
      border-radius: 4px;
      z-index: 5
    }

    .preset-wrap {
      // height: 110px;

      .preset-color {
        height: 128px;
        border-radius: 4px 4px 0 0;
        padding: 17px 0 27px;

        .first-font {
          display: inline-block;
          width: 100%;
          font-size: 55px;
          line-height: 1;
          // padding-top: 23px;
        }
        .secondary-font {
          display: inline-block;
          width: 100%;
          font-size: 20px;
          line-height: 1;
          margin-top: 8px;
        }
      }

      .preset-name {
        position: relative;
        font-size: 11px;
        text-transform: UPPERCASE;
        border-radius: 0 0 4px 4px;
        padding: 1px;

        &:before {
          content: '';
          position: absolute;
          border-color: inherit;
          border: 10px solid;
          border-left-color: transparent;
          border-right-color: transparent;
          border-top: transparent;
          top: -10px;
          border-bottom-color: inherit;
          left: 40%;

        }
      }
    }

    &:nth-child(odd) {
      margin-right: 7%
    }

    input[type=radio] {
      height: 100%;
      width: 100%;
      position: absolute;
      border: 0;
      box-shadow: none;
      color: #006505;
      background-color: transparent;
      border-radius: 0;
      margin: 0;
      display: inline-block;
      top:0;
      left:0;
      z-index:10;

      &:checked {

        &:before {
          position: absolute;
          height: 25px;
          width: 25px;
          top: -13px;
          right: -14px;
          background: #FFF;
          z-index: 1;
        }

        &:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    filter: alpha(opacity=0);
		    content: '';
		    position: absolute;
		    width: 26px;
		    height: 26px;
		    border-radius: 50%;
		    top: -5px;
		    right: -5px;
		    z-index: 10;

			background: #73C5EE url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
	    	background-position: center center;
        }
      }
    }

  }
}

.customify_radio_image {
	display: inline-block;
	label {
		display: block;
		float: left;
		margin-right: 10px;
		position: relative;

		input[type=radio] {
			position: absolute;
			top:0;bottom: 0;
			left: 0;right: 0;
			width: 100%;
			height: 100%;

			visibility: hidden;

			img {
				cursor:pointer;
				border:2px solid transparent;
			}

			&:checked + img{
				border: 3px solid #73C5EE;
			}
		}
	}
}

.customify_ace_editor {
	display: block;
	min-height: 200px;
	border: 1px solid #ddd;
}

.customize-control-custom_background {
	.hide {
		display: none;
	}

	.upload_button_div {
		margin: 10px 0;

		& > * {
			margin-right: 10px;
		}
	}

	.preview_screenshot {
		text-align: center;
		margin: 10px 0;
		img {
			border: 2px solid #ccc;
		}
	}
}

#customify_import_demo_data_button {
	width: 70%;
	text-align: center;
	padding: 10px;
	display: inline-block;
	height: auto;
	margin: 0 15% 10% 15%;
}

.import_step_note {
	margin: 5px;
	width: 100%;
	display: inline-block;


	&:before {
		content: "\1F449";
	}

	&.success:before {
		content: "\1F44D";
	}

	&.failed:before {
		content: "\274C";
	}
}

@import 'theme';
@import 'balloon';
@import 'feedback-modal';





//------------------------------------*\
//    FONT Field
//------------------------------------*/

.font-options__wrapper {

	.font-options__options-list {
		border-color: #B8DAEB;
		box-shadow: 0 10px 20px 0 rgba(0,0,0,0.15);
	}

	.font-options__option {
		margin-bottom: 12px;
		label {
			display: block;
			margin-bottom: 6px;
		}
	}

	[type=checkbox]:checked ~ .font-options__options-list {
		opacity: 1;
		display: block;
	}
}

input.customify_font_tooltip {
	display: none;
}

.font-options__option select,
.font-options__option input,
.select2-container {
	// width: 100% !important; // am pus important pentru ca exista un inline de 100px
}

ul.font-options__options-list {
	.font-options__option {

	}

	.select2-container {
		width: 100% !important;
		 .select2-selection--single {
		 	@extend %input;
		 	@extend %select;
		 	-webkit-appearance: initial;

		 	.select2-selection__arrow {
		 		display: none;
		 	}
		 }
	}

	.select2-container--default
		.select2-selection--single
			.select2-selection__rendered {
			    color: inherit;
			    line-height: initial;
	}

}

//------------------------------------*\
//    SELECT2
//------------------------------------*/


.select2-container.select2-container--open {
	z-index: 99999999;
}

#customize-theme-controls .select2-container {
	width: 100% !important;

	.select2-selection--multiple {
	 	@extend %input;
	 	@extend %select;
	 	-webkit-appearance: initial;

		padding: 4px 8px 4px;
	 	height: auto;
	 	background: none;

	 	.select2-selection__arrow {
	 		display: none;
	 	}

	 	.select2-selection__rendered {
	 		padding: 0;
			display: flex;

			.select2-search--inline {
				flex: 1;

				.select2-search__field[class] {
					min-width: 100%;
					border-width: 0;
					margin-top: 3px !important;
				}
			}

	 		.select2-selection__choice {
	 			padding: 3px 7px;
	 			margin-right: 6px;
	 			margin-top: 0px;

	 			border-color: $borders;
	 			background-color: #f6fbff;
	 		}
	 	}

	}
 	.select2-search--inline {

	 	.select2-search__field {
	 		height: 29px;
            min-width: 9em;
            margin-top: 0;
	 	}
 	}

}

.select2-container--default .select2-results__option[aria-selected=true][class] {
	background: transparent;
	opacity: 0.3;
	pointer-events: none;
}

.select2-container {
	.select2-dropdown {
		border-color: $borders;
	}
}





//------------------------------------*\
//    Widgets Options Accordion System
//------------------------------------*/
.pixelgrade-widget-title {

}

#customize-theme-controls .widget-content {
	.accordion-container {

		// Stick the container to the margins
		margin-left: -10px;
		margin-right: -10px;

	    margin-top: 20px;
	    margin-bottom: 10px;

		.accordion-section {

			.accordion-section-content {
				position: relative;
				left: 0;

				max-height: 0;
				padding-top: 0;
				padding-bottom: 0;

				overflow: hidden;
			    transition: all .4s ease;

			    color: $blue-dark;

			    p {
			    	&:first-child {
			    		margin-top: 0;
			    	}

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

			}

			.accordion-section-title {
				color: #39474D;

				&:after {
					content: "\f142"; // Change arrow style to be more consistent
				    transform: rotate(180deg);

				}
			}

			&.closed {
				.accordion-section-content {

				}
			}

			&.open {
				border-bottom: none;

				.accordion-section-content {
					max-height: 100%;
					padding-top: 17px; //default
					padding-bottom: 17px; //default
				}

				.accordion-section-title {
					border-bottom: 1px solid;

					&:after {
					    transform: rotate(0deg);
					}
				}
			}
		}

		label.customize-control-title {
			cursor: default;
		}
	}
}

.widget {
	.widget-content {
			> p {
				input[type=checkbox],
				input[type=radio] {
				    margin-bottom: 3px;
				    margin-top: 3px;
				}
			}

		small {
		    margin-top: 5px;
		    display: block;
		}
	}
}


// Widgets Icons
#available-widgets {
	[class*=pixelgrade],
	[class*=featured-posts],
	[class*=categories-image-grid] {
		 .widget .widget-title:before {
		    content: "\f538";
		    color: #9660c6; // Branding Icons
		}
	}

	// Slideshow
	[class*=pixelgrade-featured-posts-slideshow] .widget .widget-title:before {
		 content: "\f233"; // images-alt2
	}

	// Carousel
	[class*=pixelgrade-featured-posts-carousel] .widget .widget-title:before {
		 content: "\f169";
	}

	// Grid Posts
	[class*=featured-posts-grid] .widget .widget-title:before {
		 content: "\f180";
	}

	// List Posts
	[class*=featured-posts-list] .widget .widget-title:before {
		 content: "\f164";
	}

	// Categories Image
	[class*=categories-image-grid] .widget .widget-title:before {
		 content: "\f163"; // list-view
	}

	// Promo Box
	[class*=pixelgrade-promo-box] .widget .widget-title:before {
		 content: "\f488"; // Megaphone
	}

}

.ui-tooltip {
	z-index: 999999;
}






//------------------------------------*\
//    Jetpack Widget Visibility
//------------------------------------*/

.wp-customizer .widget-conditional {
	.condition-control { @include clearfix(); }

	.selection {
		padding-right: 50px;
		padding-left: 28px;
		padding-bottom: 19px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 10px;
		border-bottom: 1px solid $light;
	}

	.condition:last-child .selection {
		border: 0;
	}

	select {
		max-width: 100%;
		width: 170px;
	}

	.condition-top select {
		width: 130px;
	}
}



//------------------------------------*\
//    STYLE MANAGER
//------------------------------------*/

// COLOR PALETTES SECTION //

$palette_box_shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
$palette_box_shadow_stronger: inset 0 0 3px 0 rgba(0,0,0,0.4);

.pix_customizer_setting {

	.customize-inside-control-row {
		position: relative;
		width: 100% !important;
		margin-left: 0 !important;
		text-indent: 0 !important;
		background-size: cover;
		background-position: 50% 50%;
		height: 64px;
		border-radius: 5px;
		overflow: hidden;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			pointer-events: none;

			box-shadow: $palette_box_shadow;
		}

		// Color Palette Hover
		&:hover {

			&:before {
				// Increase the inner shadow strongness
				box-shadow: $palette_box_shadow_stronger;
			}

				.palette__item {
					transform: translateY(0%);
				}

			label {
				left: 10px;
			}
		}

		input {
			opacity: 0;
		}

		input:checked + label {
			.preview__letter--checked {
				display: inline-block;
				vertical-align: middle;
			}
			.preview__letter {
				display: none;
			}
		}

		label {
			position: absolute;
			display: flex;
			z-index: 2;

			width: 100%;
			height: 100%;
			top: 0;
			left: 0;

			padding: 0 10px;
			margin-top: 0 !important;
			align-items: center;

			transition: all .3s ease;
		}

		.palette {
			position: absolute;
			display: flex;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;

			transition: all .2s ease;
		}

        // Colors Bars
		.palette__item {
			flex: 1;
			transform: translateY(100%);

			transition: all .3s ease;

			// Assume maximum 10 colors
			@for $i from 1 through 10 {
			  &:nth-child(#{$i}) {
				transition-delay: 0s + $i/20 - 1/20;
			  }
			}
		}

		.preview__letter,
		.preview__letter--checked {
			display: inline-block;
			padding: 3px;
			border-radius: 2px;
			color: white;
			margin-right: 5px;
			min-height: 26px;
			min-width: 26px;
			text-align: center;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 15px 15px;
			font-style: normal;
			vertical-align: baseline;
		}

		.preview__letter--checked {
			display: none;
		}
	}
}

[id*="sm_current_color_palette_control"] {
	.customize-inside-control-row .palette__item[class] {
		transform: none;
	}

	.variation-control {
		display: flex;
	}

	.variation-control-item {
		&.active {

		}
	}
}

/// ------------------

$palette_height: 64px;
$palette_border-radius: 5px;

.label__inner {
	color: #000000;
	background: #F5F6F1;

	padding: 7px 12px 7px 7px;
	z-index: 2;
	border-radius: 3px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.picker {
	position: relative;
	top: 0;
	left: 50%;

	width: 80%;
	max-width: 3em;
	margin-top: auto;
	margin-bottom: auto;

	border-radius: 50%;
	overflow: hidden;
	transform: translate3d(-50%,0,0);
}

.colors .picker > i {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: $palette_box_shadow;
	border-radius: 50%;
	pointer-events: none;
	z-index: 20;
}

.picker:before,
.picker:after {
	content: "";
	display: block;
	background: currentColor;
	border-radius: 50%;
}

.picker:before {
	padding-top: 100%;
}

.picker:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fill {
	overflow: hidden;
}

.color:first-child .fill {
	border-top-left-radius: $palette_border-radius;
	border-bottom-left-radius: $palette_border-radius;
}

.color:last-child .fill {
	border-top-right-radius: $palette_border-radius;
	border-bottom-right-radius: $palette_border-radius;
}

.label {
	margin-right: auto;
}

#customize-theme-controls [id*="sm_current_color_palette_control"] {
	display: block;
	width: auto;

	.color-palette-container {
		background: white;

		.description {
			margin-bottom: 15px;
		}
	}

	.description.c-color-palette__notification {
		padding-top: 19px;
		margin-bottom: 0;
		font-size: inherit;
		font-weight: bold;
	}
}

.c-color-palette__fields {
	position: relative;
}

.c-color-palette .iris-picker {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;

	margin-top: 1em;
	border: 0;

	box-shadow: black 0 3px 12px -4px;

	.iris-square-handle {
		border-color: transparent;
		left: -6px;
		top: -6px;

		&:after {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			top: 0;
			border: 2px solid white;
		}
	}

	.iris-square-value {
		box-shadow: none !important;
	}
}

.colors {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height: 3em;
}

.color {
	display: flex;
	flex-direction: column;

	flex: 1 1 0;
	overflow: hidden;
	transition: flex-grow .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

	&.hidden {
		display: flex;
		flex-grow: 0;
		transition: flex-grow .3s cubic-bezier(0.6, -1.00, 0.74, 0.05); // easeBackInMega

		.picker {
			opacity: 0;
			transition: opacity .2s ease-out;
		}
	}

	.picker {
		transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
		cursor: pointer;
	}

	&.inactive .picker {
		opacity: 0.2;
	}

	&.inactive .picker:hover {
		opacity: 1;
	}
}

input.c-color-palette__input[class] {
	margin-top: 1em;
}

#customize-control-sm_toggle_advanced_settings_control {
	margin-bottom: 0;
	opacity: 0;

	button {
		width: 100%;
	}
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

// SECTIONS AND PANELS WITH ICONS
// ========================================

@mixin section_icon($icon) {
	h3.accordion-section-title:before {
        position: relative;
        float: right;
        content: $icon;
        color: #aed2e5;
        font-family: dashicons;
        padding: 1px;
        margin-right: 28px;
        font-size: 17px;
        -webkit-font-smoothing: antialiased;
	}
}

#customize-theme-controls {

    #sub-accordion-panel-style_manager_panel,
    #sub-accordion-panel-theme_options_panel {
      .customize-panel-description {
        display: block;
      }
    }

	// Style Manager Section
	// ----------------------------------------
	li#accordion-panel-style_manager_panel {
		@include section_icon("\f155");

		h3.accordion-section-title:before {
		font-size: 18px;
		color: #f8bc30; // Yellow color
		}
	}

		// Style Manager → Colors / Fonts Panels
		li#accordion-section-sm_color_palettes_section {
			@include section_icon("\f100");
			h3.accordion-section-title {
				border-top: none;
			}
		}

		li#accordion-section-sm_font_palettes_section {
			@include section_icon("\f122");
		}

		li#accordion-section-sm_color_palettes_section,
		li#accordion-section-sm_font_palettes_section {
			h3.accordion-section-title {

				&:before {
				    padding: 3px;
				    margin-right: 5px;
				    margin-top: -2px;
				}
			}
		}


	// Theme Options Section
	// ----------------------------------------
	li#accordion-panel-theme_options_panel {
		@include section_icon("\f538");

		h3.accordion-section-title {
		  border-bottom: 1px solid #ddd;
		  border-left: none;
		  border-right: none;
		  margin: 0 0 15px 0;
		}
	}
}

.color .disc {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 15;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease-in-out;

	&:after {
	    content: "";
	    filter: blur(6px) saturate(.7) brightness(1.1);

	    display: block;
	    width: 200%;
	    height: 200%;
	    padding-top: 100%;

	    position: absolute;
	    top: -50%;
	    left: -50%;
	    transform: scale(1);
	    background-image:
	        linear-gradient(330deg, transparent 50%, #ff8100 0),
	        linear-gradient(300deg, transparent 50%, #ff5800 0),
	        linear-gradient(270deg, transparent 50%, #c92323 0),
	        linear-gradient(240deg, transparent 50%, #cc42a2 0),
	        linear-gradient(210deg, transparent 50%, #9f49ac 0),
	        linear-gradient(180deg, transparent 50%, #306cd3 0),
	        linear-gradient(150deg, transparent 50%, #179067 0),
	        linear-gradient(120deg, transparent 50%, #0eb5d6 0),
	        linear-gradient(90deg, transparent 50%, #50b517 0),
	        linear-gradient(60deg, transparent 50%, #ede604 0),
	        linear-gradient(30deg, transparent 50%, #fc0 0),
	        linear-gradient(0deg, transparent 50%, #feac00 0);
	    background-clip: content-box,content-box,content-box,content-box,content-box,content-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;
	}
}

.color.altered .disc {
	opacity: 1;
}

.customize-control-color .wp-picker-container .iris-picker {

	.iris-palette-container {
		display: flex;
		width: 215px;
	}

	.iris-palette {
		width: auto !important;
		height: auto !important;
		flex: 1 1 0;
		float: none;

		&:after {
			content: "";
			display: block;
			padding-top: 100%;
		}
	}
}

.c-color-palette {
	padding: 30px 20px 18px;
}

[id="customize-control-sm_current_color_palette_control"][id] {
	margin-bottom: 0;

	~ .customize-control {
		background-color: #FFFFFF;
		margin-bottom: 0;
		padding: 24px 20px 0;
	}
}

// hide the matrix control
#customize-control-sm_dark_color_primary_slider_control,
#customize-control-sm_dark_color_secondary_slider_control,
#customize-control-sm_dark_color_tertiary_slider_control {
	display: none !important;
}

.sm_color_matrix {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;

	> * {
		display: grid;
		grid-auto-rows: 2px;
		grid-auto-columns: 2px;

		flex: 0 0 percentage(1/3);
		padding-top: 15px;
		padding-left: 15px;

		> * {
			background-color: currentColor;
			border-radius: 50%;
			border: 1px solid #ccc;
			animation-duration: 0.75s;
			animation-name: bounceIn;
		}

		> :nth-child(1) { grid-area: 16 / 12 / span 12 / span 12; }
		> :nth-child(2) { grid-area: 26 / 24 / span 4 / span 4; }
		> :nth-child(3) { grid-area: 13 / 24 / span 4 / span 4; }
		> :nth-child(4) { grid-area: 8 / 8 / span 8 / span 8; }
		> :nth-child(5) { grid-area: 32 / 8 / span 4 / span 4; }
		> :nth-child(6) { grid-area: 30 / 16 / span 8 / span 8; }
		> :nth-child(7) { grid-area: 4 / 20 / span 8 / span 8; }
		> :nth-child(8) { grid-area: 17 / 26 / span 8 / span 8; }
		> :nth-child(9) { grid-area: 22 / 2 / span 8 / span 8; }
		> :nth-child(10) { grid-area: 28 / 11 / span 2 / span 2; }
		> :nth-child(11) { grid-area: 9 / 31 / span 6 / span 6; }
		> :nth-child(11) { grid-area: 26 / 30 / span 9 / span 9; }
		> :nth-child(12) { grid-area: 17 / 7 / span 4 / span 4; }
		> :nth-child(13) { grid-area: 19 / 36 / span 6 / span 6; }
		> :nth-child(14) { grid-area: 12 / 18 / span 2 / span 2; }
		> :nth-child(n+15) { display: none; }
	}
}


.sm-tabs {
	display: flex;
	justify-content: space-between;
	padding: 0 16px;
	text-align: center;

	border-bottom: 1px solid #DFE8EF;

	&__item {
		padding: 12px 0;
		margin-bottom: -1px;
		// flex-grow: 1;
		flex-basis: 31%;

		font-size: 14px;
		// font-weight: 500;
		color: $blue-dark;
		opacity: 0.7;

		border-bottom: 3px solid transparent;
		cursor: pointer;

		transition: all 0.2s ease;

		&:not(&--active):hover {
			color: $blue-darker;
			border-bottom-color: #E2E4E7;
			opacity: 1;
		}
	}

	&__item--active {
		color: $blue-darker;
		border-bottom-color: #57ABD5;
		opacity: 1;
	}
}

[id="sub-accordion-section-sm_color_palettes_section"] {
	display: flex !important;
	flex-direction: column;
	padding: 12px 0 0 !important;
	overflow: hidden;

	#customize-control-sm_color_palette_control {
		flex-shrink: 0;
		flex-grow: 1;
		overflow-y: scroll;
		margin-bottom: 0;
		padding-top: 12px;
	}

	> * {
		flex-grow: 0;
		padding: 0 12px;
	}

	[id="customize-control-sm_current_color_palette_control"] ~ * {


		display: none !important;
	}

	[id="customize-control-sm_palettes_description_control"],
	[id="customize-control-sm_filters_description_control"],
	[id="customize-control-sm_customize_description_control"] {
		span {
			margin: 0;
		}
	}

	&.sm-view-palettes {
		[id="customize-control-sm_palettes_description_control"],
		[id="customize-control-sm_color_palette_control"] {
			display: block !important;
		}
	}

	&.sm-view-filters {
		[id="customize-control-sm_filters_description_control"],
		[id="customize-control-sm_palette_filter_control"] {
			display: block !important;
		}
	}

	&.sm-view-customize {
		[id="customize-control-sm_customize_description_control"],
		[id="customize-control-sm_coloration_level_control"],
		[id="customize-control-sm_color_diversity_control"],
		[id="customize-control-sm_shuffle_colors_control"],
		[id="customize-control-sm_dark_mode_control"] {
			display: block !important;
		}
	}

	[id="customize-control-sm_spacing_bottom_control"][id] {
		display: block !important;
		min-height: 24px;
		flex-grow: 1;
	}
}

[id="customize-control-sm_color_palette_control"] {
	.customize-control-title,
	.customize-control-description {
		display: none;
	}
}

// display each palette filter on its own row
.customize-control-radio[class][id="customize-control-sm_palette_filter_control"] > .customize-inside-control-row:not(:only-of-type) {
	display: block;
	width: auto;
}

.color {
	&[class*="sm_color"][class*="_connected"],
	&[class*="sm_dark"][class*="_connected"],
	&[class*="sm_light"][class*="_connected"] {
		display: none;
	}
}

.c-color-palette__colors {
	position: relative;
}

.c-color-palette {
	canvas, svg {
		max-width: 100%;
		height: auto;
	}
}

.c-color-palette__fields {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
}

[id="sub-accordion-section-sm_color_palettes_section"] > .customize-section-description-container {
	margin-bottom: 0;
	border-bottom: 1px solid #DFE8EF;
}

.sm-palette-filter {

	.colors {
		width: auto;
		height: auto;

		padding: 10px 10px;
		border-radius: 999em;
	}

	.picker:after {
		box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
	}

	> label {
		position: relative;
		display: block;
		margin: 0 0 10px;

		&:hover .filter-label {
			opacity: 1;
		}
	}

	> input {
		display: none;
	}

	.filter-label {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;

		width: 100%;
		height: 100%;

		display: flex;
		align-items: center;
		justify-content: center;

		opacity: 0;
		transition: opacity .2s ease-out;

		span {
			position: relative;
			z-index: 20;
		}

		&:after {
			content: "";
			display: block;

			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;

			width: 100%;
			height: 100%;

			background-color: #ffffff;
			box-shadow: #d6e0e5 0 0 0 1px;
			border-radius: 999em;
		}
	}

	> input:checked + label {

		.filter-label:after {
			background-color: #f7f9fa;
			box-shadow: none;
		}

		.colors {
			background-color: #f7f9fa;
			box-shadow: #57ABD5 0 0 0 2px;
		}
	}
}

.customize-control-sm_palette_filter .customize-control-title {
	display: none;
}

// FONT PALETTES OVERWRITES
#customize-control-sm_font_palette_control ~ .customize-control {
	display: none !important;
}

.pix_customizer_setting .font_palette[class][class] .customize-inside-control-row {
	height: auto;
	padding-top: 52%;
	background-color: white;
	border-radius: 6px;
	overflow: hidden;

	&:before {
		border: 1px solid #DFE8EF;
		border-radius: 6px;
	}

	&:before,
	&:hover:before {
		box-shadow: 0 1px 0 0 #B8DAEB;
	}

	input {
		display: none;
	}

	label {
		border-radius: 6px;
		left: 0;
	}

	input + label {
		border: 2px solid transparent;
	}

	input:checked + label {
		border-color: #57ABD5;
	}

	.label__inner {
		display: none;
	}
}

// remove ugly top border top
#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
	border-top: 0;
}