/*!
 * Project   : OceanWP WordPress Theme
 * Purpose   : Customizer Tweaks
 * Author    : Nick
 */

/* Margin checkbox */
#customize-control-ocean_top_bar,
#customize-control-ocean_top_bar_full_width,
#customize-control-ocean_top_bar_social,
#customize-control-ocean_has_header_border_bottom,
#customize-control-ocean_medium_header_hidden_menu,
#customize-control-ocean_medium_header_stick_menu,
#customize-control-ocean_vertical_header_shadow,
#customize-control-ocean_vertical_header_closed,
#customize-control-ocean_menu_arrow_side,
#customize-control-ocean_menu_dropdown_top_border,
#customize-control-ocean_menu_social,
#customize-control-ocean_mobile_menu_close_btn,
#customize-control-ocean_footer_bottom,
#customize-control-ocean_footer_widgets,
#customize-control-ocean_scroll_top,
#customize-control-ocean_woo_menu_icon_hide_if_empty,
#customize-control-ocean_woo_shop_result_count,
#customize-control-ocean_woo_product_ajax_add_to_cart,
#customize-control-ocean_woo_add_mobile_mini_cart,
#customize-control-ocean_woo_multi_step_checkout,
#customize-control-osh_has_sticky_mobile,
#customize-control-osh_has_full_width_header,
#customize-control-osh_no_shadow,
#customize-control-osh_sticky_choose .customize-control-title,
#customize-control-osp_side_panel_displace,
#customize-control-osp_side_panel_overlay,
#customize-control-ocean_breadcrumb_show_title { margin-top: 0; }

/* General tweaks */
.wp-full-overlay-sidebar-content::-webkit-scrollbar, .accordion-section-content::-webkit-scrollbar { width: 5px !important; }
.wp-full-overlay-sidebar-content::-webkit-scrollbar-track, .accordion-section-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.3) !important;  width: 20px !important; }
.wp-full-overlay-sidebar-content::-webkit-scrollbar-thumb, .accordion-section-content::-webkit-scrollbar-thumb { -webkit-border-radius: 0 !important; border-radius: 0 !important; background-color: #d8d8d8 !important; }
.wp-full-overlay-sidebar-content::-webkit-thumb:window-inactive, .accordion-section-content::-webkit-scrollbar-thumb:window-inactive { background-color: #fff !important; }
.clr:after { content: ''; display: block; visibility: hidden; clear: both; zoom: 1; height: 0; }
.customize-control { margin-bottom: 0; }
.customize-control-title { margin-top: 15px; }
.customize-control-select select { min-width: 100% }
.customize-control .thumbnail-image img { width: auto; }

/* Social widgets */
.oceanwp-social-widget-services-list { padding-top: 10px; }
.oceanwp-social-widget-services-list li { background-color: #fafafa; padding: 10px; border: 1px solid #e5e5e5; margin-bottom: 10px; }
.oceanwp-social-widget-services-list li p { margin: 0 }
.oceanwp-social-widget-services-list li label { margin-bottom: 3px; display: block; color: #222; }
.oceanwp-social-widget-services-list li label span.fa { margin-right: 10px }

/* Inputs */
.customize-control input[type=tel], .customize-control input[type=url], .customize-control input[type=text],
.customize-control input[type=password], .customize-control input[type=email], .customize-control input[type=number],
.customize-control input[type=search] { width: 100%; height: 33px; }
.wp-picker-container input[type=text].wp-color-picker { height: auto; padding: 3px 5px; }
input[type=number] { height: 33px; }
input[type=text], input[type=search], input[type=radio], input[type=tel], input[type=time], input[type=url],
input[type=week], input[type=password], input[type=checkbox], input[type=color], input[type=date], input[type=datetime],
input[type=datetime-local], input[type=email], input[type=month], input[type=number], select, textarea, input[type=text]:focus,
input[type=search]:focus, input[type=radio]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus,
input[type=week]:focus, input[type=password]:focus, input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus,
input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus,
input[type=number]:focus, select:focus, textarea:focus { -webkit-box-shadow: none; box-shadow: none; }
input, select { margin: 0; padding: 5px 10px; }
.customize-control select { height: 33px; line-height: 1; }

/* Checkbox */
.customize-control.customize-control-checkbox .customize-inside-control-row { margin-left: 0; padding-top: 0; padding-bottom: 0; }
.customize-control-checkbox { position: relative; border: 1px solid #ccc; font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 8px 10px; border-radius: 2px; margin-top:  20px; margin-bottom: -1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.customize-control-checkbox label { padding: 0; margin: 0; }
.customize-control-checkbox input[type=checkbox] { position: relative; width: 20px; height: 20px; margin: 0 6px 0 0; vertical-align: top; }
.customize-control-ocean-multi-check input[type="checkbox"] { position: relative; margin: 0 5px 4px 0; border-color: #c8c8c8; width: 18px; height: 18px; cursor: pointer; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: none !important; box-shadow: none !important; }
.customize-control-checkbox input[type="checkbox"]:before,
.customize-control-ocean-multi-check input[type="checkbox"]:before { content: ''; position: absolute; left: 0; z-index: 1; width: 100%; height: 100%; margin: -4px 0 0 -3px; border: none; }
.customize-control-checkbox input[type="checkbox"]:checked:before,
.customize-control-ocean-multi-check input[type="checkbox"]:checked:before { content: '\f147'; font-family: dashicons; font-size: 20px; line-height: 1; left: 0; top: 2px; }
.customize-control-checkbox input[type=checkbox]:checked:before { font-size: 22px; }

/* Select */
.select2-container { z-index: 999999; }

/* Responsive buttons switchers */
.customize-control.has-switchers .customize-control-title { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; margin-top: 20px; margin-bottom: 10px; }
.customize-control.has-switchers .customize-control-title span { line-height: 20px; }

.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; cursor: pointer; position: relative; margin-left: 5px; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; padding: 0; border: 0; outline: none; -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%; }

/* Height Custom CSS textarea */
.customize-control-code_editor .CodeMirror { height: calc(100vh - 185px); }

/* RTL */
body.rtl .customize-control-checkbox input[type=checkbox] { margin: 0 0 0 6px; }
body.rtl .customize-control-checkbox input[type="checkbox"]:checked:before,
body.rtl .customize-control-ocean-multi-check input[type="checkbox"]:checked:before { right: 0; left: auto; }
body.rtl .customize-control .responsive-switchers,
body.rtl .customize-control .responsive-switchers li button { margin-right: 5px; margin-left: 0; }
body.rtl .customize-control .responsive-switchers li { float: right; }

/* Responsive */
@media screen and ( max-width: 768px ) {
	body .customize-control .responsive-switchers { display: none; }
	body .customize-control.has-switchers > .control-wrap:not(.active) { display: inline-block; }
}

@media screen and (min-width: 481px) and (max-width: 768px) { 
	body .customize-control.has-switchers > .control-wrap { display: inline-block; }
	body .customize-control.has-switchers > .control-wrap:not(.tablet) { display: none; }
}

@media screen and ( max-width: 480px ) {
	body .customize-control.has-switchers > .control-wrap { display: inline-block; }
	body .customize-control.has-switchers > .control-wrap:not(.mobile) { display: none; }
}