.clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .customizer-hidden { visibility: hidden; opacity: 0; height: 0; position: absolute; clip: rect(0, 0, 0, 0); left: -1000px; } .customize-control-info p { margin: 0; } .mce-floatpanel, .mce-tooltip { z-index: 9999999!important; } .business-shuffle-drag-spinner { display: none; float: right; } /*Customizer Tabs*/ .customizer-tabs { background: #FFF; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px 6px 0; border-bottom: 3px solid #0075ae; } .customizer-tabs a { padding: 10px; text-decoration: none; text-transform: uppercase; font-weight: bold; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; text-align: center; display: block; white-space: nowrap; } .customizer-tabs a.active { background: #0073aa; color: #FFF; } /* General Control CSS */ .customize-control-radio { padding: 0; } .customize-control select { width: 98%; } .business-shuffle-accordion-section-title { color: #0073aa; padding: 0 10px; border-left: 12px solid #0073aa; margin: 10px 0 0; text-transform: uppercase; } .customize-control-heading .customize-control-description { margin: 5px 0 0; } .ht-implink { background: #0073aa; padding: 5px 10px; color: #FFF !important; text-align: center; display: block; margin-top: 5px; line-height: 1.2; -webkit-box-shadow: none; box-shadow: none; font-style: normal; text-decoration: none; } .ht-implink:hover { background: #000; } .customize-control-separator p{ margin: 5px 0; } .customize-control-separator span { display: block; border-top: 1px solid #dadada; border-bottom: 1px solid #f9f9f9; } /*SWITCH CONTROL*/ .customize-control-switch .customize-control-title { display: inline-block; vertical-align: top; margin-top: 4px; margin-bottom: 0; width: 65%; } .onoffswitch { position: relative; float: right; width: 60px; overflow: hidden; cursor: pointer; } .onoffswitch-inner { width: 200%; margin-left: -100%; -webkit-transition: margin .3s ease-in 0s; transition: margin .3s ease-in 0s } .onoffswitch-inner>div { float: left; position: relative; width: 50%; height: 30px; padding: 0; color: #fff; font-weight: normal; -webkit-box-sizing: border-box; box-sizing: border-box } .onoffswitch-inner .onoffswitch-active { background-color: #FFF; color: #FFF } .onoffswitch-inner .onoffswitch-inactive { background-color: #FFF; color: #FFF; text-align: right } .business-shuffle-repeater-fields .onoffswitch-inner .onoffswitch-active, .business-shuffle-repeater-fields .onoffswitch-inner .onoffswitch-inactive { background: #EEE; } .onoffswitch-switch { width: 30px; text-align: center; position: absolute; top: 0; bottom: 0; margin: 3px; font-size: 12px; line-height: 24px; } .onoffswitch-active .onoffswitch-switch { background: #3caf0e; left: 0 } .onoffswitch-inactive .onoffswitch-switch { background: #7D7D7D; right: 0 } .switch-on .onoffswitch-inner { margin-left: 0 } .customize-control-switch[id^="customize-control-business_shuffle_"][id$="_disable"] { background: #e0e0e0; padding: 8px 20px; border-radius: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; } .business-shuffle-fields.business-shuffle-type-switch { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 14px; } .business-shuffle-fields.business-shuffle-type-switch .customize-control-repeater-title { margin: 0; } /*GALLERY CONTROL*/ .gallery-screenshot { margin-bottom: 10px; margin-left: -5px; margin-right: -5px; } .gallery-screenshot .screen-thumb { width: 50%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; float: left; } .gallery-screenshot .screen-thumb:nth-child(2n+1) { clear: both; } .gallery-screenshot .screen-thumb img { border: 1px solid #EEE; vertical-align: middle; } #clear-gallery { float: right; } /*CHOSEN*/ .chosen-container-single .chosen-single { border-radius: 0px; height: 28px; background: #FFF; border-color: #DDDDDD; line-height: 28px; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06); } .chosen-container-single .chosen-single div b { background-position: 0px 4px; } .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 4px; } .chosen-container-multi .chosen-choices li { float: none; } /*FontAwesome Icon Styles*/ .business-shuffle-customizer-icon-box .business-shuffle-icon-box { display: none; } .business-shuffle-customizer-icon-box .business-shuffle-type-icon { overflow: hidden; } .business-shuffle-customizer-icon-box .business-shuffle-selected-icon { background: #F6F6F6; height: 45px; line-height: 45px; text-align: center; border: 1px solid #EEE; position: relative; margin-right: 44px; cursor: pointer; font-size: 22px; width: 60px; } .business-shuffle-customizer-icon-box .business-shuffle-selected-icon span i { display: block; line-height: 45px; } .business-shuffle-customizer-icon-box .business-shuffle-selected-icon span { position: absolute; background: #F6F6F6; right: -45px; top: -1px; height: 45px; width: 45px; border: 1px solid #EEE; font-size: 16px; } .business-shuffle-customizer-icon-box .business-shuffle-icon-search { padding: 10px; background: #f7f7f7; border: 1px solid #EEE; border-top: 0; } .business-shuffle-customizer-icon-box .business-shuffle-icon-search select { margin-bottom: 10px; } .business-shuffle-customizer-icon-box .business-shuffle-icon-list { height: 215px; overflow-y: scroll; font-size: 18px; border: 1px solid #EEE; background: #FFF; border-right: 0; border-top: 0; padding-bottom: 4%; display: none; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .business-shuffle-customizer-icon-box .business-shuffle-icon-list:first-of-type { display: block; } .business-shuffle-customizer-icon-box .business-shuffle-icon-list li { float: left; height: 40px; width: 40px; text-align: center; line-height: 40px; border: 1px solid #EEE; border-radius: 3px; font-size: 18px; margin: 4px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .business-shuffle-customizer-icon-box .business-shuffle-icon-list li:hover { background: #333; border: 1px solid #333; color: #FFF; -webkit-transform: scale(1.15); transform: scale(1.15); } .business-shuffle-customizer-icon-box .business-shuffle-icon-list li.icon-active { background: #0073aa; border: 1px solid #0073aa; color: #FFF; } /*Repeater Styles*/ .business-shuffle-repeater-field-control { background: #FFF; margin-bottom: 12px; display: block; } .business-shuffle-repeater-footer { margin-top: 15px; text-align: right; } .business-shuffle-repeater-field-control:first-child .business-shuffle-repeater-footer { display: none; } .business-shuffle-repeater-field-title { padding: 13px 15px; line-height: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; font-size: 1em; border: 1px solid #e5e5e5; cursor: move; position: relative; border-bottom: 0; } .business-shuffle-repeater-field-title:after { content: "\f142"; font: 400 20px/1 dashicons; position: absolute; right: 0; top: 0; padding: 1px 2px 1px 0; margin-top: 10px; margin-right: 10px; border-radius: 50%; cursor: pointer; } .business-shuffle-repeater-field-control.expanded .business-shuffle-repeater-field-title:after { content: "\f140"; } .business-shuffle-repeater-fields { padding: 0 10px 10px; border-top: none; line-height: 16px; border: 1px solid #e5e5e5; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); display: none; } .business-shuffle-repeater-fields .customize-control-repeater-title { display: block; font-size: 14px; line-height: 24px; font-weight: 600; margin-bottom: 4px; margin-top: 10px; } .business-shuffle-repeater-field-control.expanded .business-shuffle-repeater-fields { display: block; } .business-shuffle-add-control-field { float: right; } .business-shuffle-add-control-field:before { content: "\f132"; display: inline-block; position: relative; left: -2px; top: -1px; font: 400 18px/1 dashicons; vertical-align: middle; } .business-shuffle-fields textarea { width: 100%; min-height: 100px; } .business-shuffle-fields select { width: 100%; } .business-shuffle-fields .attachment-media-view { background: none; } .business-shuffle-type-checkbox { margin-top: 10px; } .business-shuffle-type-checkbox label { line-height: 20px; display: block; margin-left: 24px; padding-top: 6px; } .business-shuffle-type-checkbox input[type=checkbox] { margin-right: 8px; margin-left: -24px; } .selector-labels label { display: inline-block; padding: 0 10px 10px 0; position: relative; max-width: 50%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .selector-labels.ht-full-width label { display: block; max-width: 100%; margin-bottom: 10px; padding: 0; } .selector-labels.ht-half-width label { max-width: 50%; padding: 0 20px 20px 0; } .selector-labels.ht-one-third-width label { max-width: 33.33%; padding: 0 10px 10px 0; } .selector-labels.ht-one-forth-width label { max-width: 25%; padding: 0 10px 10px 0; } .selector-labels label img { vertical-align: middle; } .selector-labels label.selector-selected:after { content: ""; height: 25px; width: 25px; right: 0; top: 0; position: absolute; background: url(images/selected.png) no-repeat right top; } .business-shuffle-type-radio .radio-labels label { display: block; padding: 5px 0; } /*Old Range Slider*/ .business-shuffle-range-slider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } .business-shuffle-range-slider .range-input { height: 4px; position: relative; background: #d4d4d4; margin: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .business-shuffle-range-slider .range-input-selector { width: 48px !important; text-align: center; height: 28px; float: right; border-radius: 4px; margin-left: 10px !important; } .business-shuffle-range-slider .ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; background: #0073aa; } .business-shuffle-range-slider .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; left: 0; } .business-shuffle-range-slider .ui-slider .ui-slider-handle { position: absolute; background: #FFF; top: 0; z-index: 2; width: 16px; height: 16px; cursor: pointer; border-radius: 50%; margin-top: -6px; margin-left: -8px; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); } .business-shuffle-range-slider .unit { margin-left: 10px; } .business-shuffle-type-icon { overflow: hidden; } .select-image-wrap { margin-top: 20px; } /* Alpha Color Picker CSS*/ .customize-control-alpha-color .wp-color-result span { background: #f7f7f7; } .customize-control .wp-picker-container input[type="text"].wp-color-picker { width: 65px !important; height: 28px !important } .customize-control .wp-picker-container .wp-color-result.button { padding: 0 0 0 32px !important; line-height: 28px !important; height: 28px !important; box-shadow: none !important; border-radius: 0 !important; border: 1px solid #ddd !important; } .customize-control .wp-picker-container .color-alpha{ height: 26px !important; width: 32px !important; } .customize-control .wp-picker-container .wp-color-result-text { line-height: 26px !important; border-radius: 0 !important; border-left: 1px solid #ddd !important; } .wp-customizer .wp-picker-input-wrap .button{ height: 28px !important; line-height: 28px !important; } /*Regular checkbox*/ .customize-control-checkbox label { margin-left: 0; } .customize-control-checkbox input[type="checkbox"], .customize-control-checkbox-multiple input[type="checkbox"] { width: 20px; height: 20px; background: #fff; -webkit-box-shadow: 0 0 1px #bcbcbc inset; box-shadow: 0 0 1px #bcbcbc inset; border: 0; position: relative; -webkit-transition: all 150ms ease-in; transition: all 150ms ease-in; } .customize-control-checkbox input[type="checkbox"]:checked, .customize-control-checkbox-multiple input[type="checkbox"]:checked { -webkit-box-shadow: 0 0 1px transparent inset; box-shadow: 0 0 1px transparent inset; } .customize-control-checkbox input[type="checkbox"]:checked:before, .customize-control-checkbox-multiple input[type="checkbox"]:checked:before { position: absolute; left: 12px; top: 7px; width: 3px; height: 8px; border: solid #333; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; } /*Toggle - On/Off switch buttons*/ .onoff-switch-title { display: inline-block; vertical-align: top; margin-right: 21px; margin-top: -1px; width: 70%; } .customize-control-checkbox-toggle p { margin-bottom: 0; margin-top: 5px; } .onoff-switch { position: relative; width: 52px; display: inline-block; float: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .onoff-switch-checkbox { display: none !important; } .customize-control-checkbox-toggle .onoff-switch-label { display: block; overflow: hidden; cursor: pointer; height: 22px; padding: 0; line-height: 19px !important; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; border-radius: 30px; background-color: #c4c4c4; -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .11); box-shadow: inset 0 2px 1px rgba(0, 0, 0, .11); } .onoff-switch-label:before { content: ""; display: block; width: 18px; height: 18px; margin: 0; position: absolute; top: 2px; bottom: 0; right: 32px; background-color: #fff; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1); box-shadow: 0 0 3px rgba(0, 0, 0, .1); border-radius: 10px; -webkit-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s; } .onoff-switch-label:after { content: "OFF"; display: block; color: #FFF; position: absolute; top: 2px; bottom: 2px; right: 6px; font-size: 11px; font-family: 'Arial'; } .onoff-switch-checkbox:checked+.onoff-switch-label { background-color: #3caf0e; } .onoff-switch-checkbox:checked+.onoff-switch-label, .onoff-switch-checkbox:checked+.onoff-switch-label:before { border-color: #3caf0e; } .onoff-switch-checkbox:checked+.onoff-switch-label:before { right: 2px; } .onoff-switch-checkbox:checked+.onoff-switch-label:after { content: "ON"; display: block; color: #FFF; position: absolute; top: 2px; bottom: 2px; right: 27px; font-size: 11px; font-family: 'Arial'; } /*Home Sections Icons*/ .customize-pane-parent .control-section .accordion-section-title:before, #sub-accordion-panel-business_shuffle_home_panel .control-section .accordion-section-title:before { font-family: dashicons; content: "\f103"; font-size: 16px; margin-right: 5px; vertical-align: middle; font-weight: normal; } #sub-accordion-panel-business_shuffle_home_panel #accordion-section-business_shuffle_slider_section.control-section .accordion-section-title:before { content: "\f160"; } #accordion-panel-business_shuffle_general_settings_panel .accordion-section-title:before { content: "\f111"; } #accordion-panel-typography .accordion-section-title:before { content: "\f464"; } #accordion-section-colors .accordion-section-title:before { content: "\f309"; } #accordion-panel-business_shuffle_header_settings_panel .accordion-section-title:before { content: "\f212"; } #accordion-panel-business_shuffle_home_panel .accordion-section-title:before { content: "\f102"; } #accordion-section-business_shuffle_blog_options_section .accordion-section-title:before { content: "\f119"; } #accordion-section-business_shuffle_footer_section .accordion-section-title:before { content: "\f212"; } #accordion-panel-nav_menus .accordion-section-title:before { content: "\f333"; } #accordion-panel-widgets .accordion-section-title:before { content: "\f116"; } #accordion-section-business_shuffle_social_section .accordion-section-title:before { content: "\f237"; } #accordion-section-custom_css .accordion-section-title:before { content: "\f499"; } #accordion-section-business_shuffle_maintenance_section .accordion-section-title:before { content: "\f321"; } #accordion-section-business_shuffle_gdpr_section .accordion-section-title:before { content: "\f332"; } #sub-accordion-panel-business_shuffle_home_panel .control-section .accordion-section-title:before { content: "\f545"; color: #AAA; } #accordion-section-business_shuffle_layout_options_section .accordion-section-title:before { content: "\f135"; } /*Gradient Control*/ .colorpicker, .gradient-box .gradient-picker { z-index: 999999; } .gradient-box { border: 1px solid #d6d6d6; padding: 10px; } .gradient-box .gradient-row { margin-bottom: 10px; } .gradient-box .gradient-label { display: block; font-size: 13px; line-height: 24px; font-weight: 600; margin-bottom: 4px; } .gradient-box .gradient-description { display: block; font-style: italic; line-height: 18px; margin-top: 0; margin-bottom: 5px; } .customize-control .gradient-box .gradient-spread { width: 45px; } .gradient-box .ClassyGradient { width: 238px; margin-left: auto; margin-right: auto; } .gradient-box .ClassyGradient .info { width: 180px; } .gradient-box .ClassyGradient .info.rightindent .arrow { margin-right: 10px; margin-left: 0; left: auto; right: 0 } .gradient-preview { height: 100px; width: 100%; } .gradient-box .ui-widget-content { position: relative; background: #CCC; border: 0; border-radius: 0; height: 4px; } .gradient-box .ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; background: #0073aa; top: 0; height: 100%; left: 0; } .gradient-box .ui-slider-horizontal .ui-slider-handle { border: 0; height: 18px; width: 18px; top: -7px; margin-left: -9px; border-radius: 50%; cursor: pointer; background: #EEE; border: 2px solid #0073aa; position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index: 2; } .gradient-box .gradient-angle-slider { margin: 12px 10px 30px; background: #CCC } .gradient-box .ui-slider-horizontal .ui-slider-handle span { position: absolute; top: 100%; width: 70px; text-align: center; margin-left: -35px; left: 7px; font-size: 13px; } /*Background Control*/ .customize-control-background-image .background-image-fields { margin-top: 12px; } .customize-control-background-image .background-image-fields li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .customize-control-background-image .background-image-fields li span { width: 40%; } .customize-control-background-image .background-image-fields li select { width: 60%; } /* Toggle Section Control*/ #sub-accordion-panel-business_shuffle_home_panel .customize-info .customize-panel-description { display: block !important; } .control-section-toggle-section .business-shuffle-toggle-section, .control-section-sidebar .business-shuffle-toggle-section { text-decoration: none; margin-right: 10px; vertical-align: middle; } .control-section-toggle-section .business-shuffle-toggle-section .dashicons, .control-section-sidebar .business-shuffle-toggle-section .dashicons { font-size: 16px; vertical-align: middle; } .business-shuffle-section-visible .business-shuffle-toggle-section { color: #929292; } #customize-theme-controls .accordion-section-title.business-shuffle-section-hidden, .business-shuffle-section-hidden .business-shuffle-toggle-section, #sub-accordion-panel-business_shuffle_home_panel .control-section .business-shuffle-section-hidden.accordion-section-title:before { color: #dcdcdc; } .business-shuffle-toggle-section { float: right } /*Dimension Control*/ .customize-control-dimensions>ul { display: inline-block; width: 100%; } .customize-control-dimensions .dimension-wrap { float: left; width: 20%; margin: 0; } .customize-control-dimensions .dimension-wrap input, .customize-control-dimensions .dimension-wrap button { display: block; font-size: 12px; padding: 4px 0; width: 100%; height: 28px; border: 1px solid; border-color: #a4afb7; border-left-width: 0; border-radius: 0; text-align: center; } .customize-control-dimensions .dimension-wrap:first-child input { border-left-width: 1px; border-radius: 3px 0 0 3px; } .customize-control-dimensions .dimension-wrap .dimension-label { display: block; color: #949698; font-size: 10px; padding-top: 5px; font-style: normal; text-transform: uppercase; text-align: center; } .customize-control-dimensions .dimension-wrap input:focus+.dimension-label { color: #42474a; } .customize-control-dimensions .dimension-wrap .link-dimensions { background-color: #fff; border: 1px solid #a4afb7; border-left-width: 0; padding: 0; outline: none; border-radius: 0 3px 3px 0; cursor: pointer; } .customize-control-dimensions .dimension-wrap .link-dimensions span { display: block; width: 100%; height: 26px; line-height: 26px; font-size: 16px; } .customize-control-dimensions .dimension-wrap .link-dimensions .business-shuffle-linked { background-color: #a4afb7; color: #fff; } .customize-control-dimensions .dimension-wrap .link-dimensions.unlinked .business-shuffle-unlinked { display: none; } .customize-control-dimensions .dimension-wrap .link-dimensions.unlinked .business-shuffle-linked { display: block; } .customize-control-dimensions .dimension-wrap .link-dimensions .business-shuffle-linked { display: none; } .customize-control.has-switchers .customize-control-title { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; margin-bottom: 10px } .customize-control.has-switchers .customize-control-title span { line-height: 20px; width: 70%; } .customize-control .responsive-switchers { margin-left: 5px; width: auto } .customize-control .responsive-switchers li:not(.desktop) { display: none } .customize-control.responsive-switchers-open .responsive-switchers li { display: block } .customize-control .responsive-switchers li { float: left; margin: 0 } .customize-control .responsive-switchers li button { display: inline-block; height: 20px; width: 20px; background-color: #a4afb7; position: relative; margin-left: 5px; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; padding: 0; border: 0; outline: 0; -webkit-transition: background-color .5s; transition: background-color .5s; cursor: pointer } .customize-control .responsive-switchers li button:hover { background-color: #c2cbd2 } .customize-control .responsive-switchers li:not(.desktop) button.active { background-color: #13aff0 } .customize-control .responsive-switchers li button i { width: auto; height: auto; font-size: inherit; line-height: 18px } .customize-control.has-switchers>.control-wrap:not(.active) { display: none; width: 100% } /*Range Control*/ .customize-control-range-slider .control-wrap { display: inline-block; width: 100%; } .customize-control-range-slider .business-shuffle-slider { display: inline-block; position: relative; width: 67%; height: 4px; margin-top: 12px; background-color: rgba(0, 0, 0, .15); border-radius: 5px; cursor: pointer; -webkit-transition: background .5s; transition: background .5s; } .customize-control-range-slider .business-shuffle-slider:hover { background-color: rgba(0, 0, 0, .2); } .customize-control-range-slider .business-shuffle-slider .ui-slider-range { display: inline-block; position: absolute; top: 0; height: 100%; background-color: #13a1dc; } .customize-control-range-slider .business-shuffle-slider .ui-slider-handle { height: 16px; width: 16px; background-color: #fff; display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%) translateX(-4px); transform: translateY(-50%) translateX(-4px); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); border-radius: 50%; cursor: pointer; } .customize-control-range-slider .business-shuffle-slider-input { float: right; width: 33%; } .customize-control-range-slider input.slider-input { float: right; width: 80%; height: 28px; text-align: center; border-radius: 4px; padding: 3px; font-size: 12px; font-weight: 600; color: #555; } /*Sortable Control*/ .customize-control-sortable ul li { padding: 8px 10px; line-height: 20px; border: 1px solid #ccc; background: #fff; } .customize-control-sortable ul li .dashicons.dashicons-menu { float: right; } .customize-control-sortable ul li .dashicons.visibility { color: #49aed8; margin-right: 10px; } .customize-control-sortable ul li.invisible { color: #aaa; border: 1px dashed #aaa; } .customize-control-sortable ul li.invisible .dashicons.visibility { color: #aaa; } /*Range Control*/ .customize-control-range .slider-reset { float: right; cursor: pointer; font-size: 14px; color: #999; } .customize-control-range .control-wrap { width: 100%; } .customize-control-range .business-shuffle-slider { display: inline-block; position: relative; width: 67%; height: 4px; margin: 12px 0; background-color: rgba(0, 0, 0, .15); border-radius: 5px; cursor: pointer; -webkit-transition: background .5s; transition: background .5s; } .customize-control-range .business-shuffle-slider:hover { background-color: rgba(0, 0, 0, .2); } .customize-control-range .ui-slider-range { display: inline-block; position: absolute; top: 0; height: 100%; background-color: #13a1dc; } .customize-control-range .ui-slider-handle { height: 16px; width: 16px; background-color: #fff; display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%) translateX(-4px); transform: translateY(-50%) translateX(-4px); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); border-radius: 50%; cursor: pointer; } .customize-control-range .business-shuffle-slider-input { float: right; width: 33%; } .customize-control-range input.slider-input { float: right; width: 80%; height: 28px; text-align: center; border-radius: 4px; padding: 3px; font-size: 12px; font-weight: 600; color: #555; } /*Color Tab*/ .customize-control-color-tab .customize-control-title{ display: flex; justify-content: space-between; align-items: center; } .customize-control-color-tab .color-tab-toggle{ color: #555; border: 1px solid #ccc; background: #f7f7f7; box-shadow: 0 1px 0 #ccc; vertical-align: middle; width: 40px; text-align: center; border-radius: 3px; cursor: pointer; margin-left: 10px; } .customize-control-color-tab .color-tab-toggle .dashicons{ line-height: 30px; height: 30px; } .customize-control-color-tab .color-tab-wrap{ position: relative; background: #FFF; padding: 10px; margin-top: 18px; } .customize-control-color-tab .color-tab-wrap:before{ content:""; position: absolute; bottom: 100%; right: 10px; border-style: solid; border-color: transparent transparent #FFF; border-width: 14px; } .customize-control-color-tab .color-tab-switchers li{ display: inline-block; margin: 0 0 -1px; padding: 10px 20px; font-weight: 600; text-align: center; color: #AAA; border: 1px solid transparent; cursor: pointer; } .customize-control-color-tab .color-tab-switchers li.active{ color: #0af; border: 1px solid #DDD; border-top: 2px solid #0af; border-bottom: 1px solid #fff; } .customize-control-color-tab .color-tab-contents{ border-top: 1px solid #DDD; padding: 10px 0 0; } .customize-control-color-tab .color-content-wrap{ margin-bottom: 10px; } .customize-control-color-tab .color-tab-label{ display: block; margin-bottom: 6px; } /*Description Popup*/ /* .customize-control{ position: relative; } #customize-controls .description{ background: #232323; color: #fff; cursor: auto; font-size: 13px; font-style: italic; margin-bottom: 0; padding: 7px; position: absolute; right: 30px; top: -4px; visibility: hidden; width: 230px; z-index: 999; } #customize-controls .checkbox_switch .description{ width: 214px; } #customize-controls .description a{ box-shadow: none; color: #00a0d2; outline: 0; } #customize-controls .description a:hover, #customize-controls .description a:active, #customize-controls .description a:focus{ box-shadow: none; color: #00a0d2; outline: 0; } #customize-controls .description:hover{ visibility: visible; } #customize-controls .description:before{ color: #9e9e9e; content: "\f348"; cursor: pointer; font-family: 'dashicons'; font-size: 16px; font-style: normal; position: absolute; right: -30px; top: 6px; visibility: visible; } #customize-controls .description:hover:before{ color: #232323; } #customize-controls .description:after{ border-bottom: 6px solid transparent; border-left: 6px solid #232323; border-top: 6px solid transparent; content: ''; display: inline-block; height: 0; position: absolute; right: -6px; top: 8px; width: 0; } */