23s2s

✏️ Editing: customizer-ui.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
:root {
  /* Typography */
  --sol-customizer--font-family: "Poppins", sans-serif;
  --sol-customizer--font-family-secondary: "Poppins", sans-serif;
  --sol-customizer--font-weight-section: 400;
  --sol-customizer--font-size-section: 16px;
  --sol-customizer--font-weight-panel: 700;
  --sol-customizer--font-size-panel: 18px;
  /* Colors */
  --sol-customizer-bg-color: inherit;
  --sol-customizer-panel-bg-color: inherit;
  --sol-customizer-text-color: inherit;
  --sol-customizer-icon-color: inherit;
  --sol-customizer-border-color: inherit;
  --sol-customizer-contrast-color: inherit;
}

:root .sol-dark-mode {
  --sol-customizer-bg-color: #001644;
  --sol-customizer-panel-bg-color: #0f2e5f;
  --sol-customizer-text-color: #FFFFFF;
  --sol-customizer-link-color: #FA9002;
  --sol-customizer-icon-color: #FA9002;
  --sol-customizer-border-color: #072251;
  --sol-customizer-line-color: #0E305F;
  --sol-customizer-contrast-color: #ffffff;
  --sol-customizer-button-color: #FA9002;
  --sol-customizer-button-color-darker: darken(#FA9002, 10%);
  --sol-builder-row-tab-color: #476698;
  --sol-builder-active-color: #FD9507;
  --sol-builder-bg-color: #0F2E5F;
  --sol-builder-header-bg-color: #0F3877;
  --sol-builder-element-color: #0F2E5F;
}

:root .sol-light-mode {
  --sol-customizer-bg-color: #f8f8f8;
  --sol-customizer-panel-bg-color: #f8f8f8;
  --sol-customizer-text-color: #001B44;
  --sol-customizer-link-color: #FA9002;
  --sol-customizer-icon-color: #FA9002;
  --sol-customizer-border-color: #f8f8f8;
  --sol-customizer-line-color: #f8f8f8;
  --sol-customizer-contrast-color: #000000;
  --sol-customizer-button-color: #FA9002;
  --sol-customizer-button-color-darker: darken(#FA9002, 10%);
  --sol-builder-row-tab-color: #476698;
  --sol-builder-active-color: #FD9507;
  --sol-builder-bg-color: #0F2E5F;
  --sol-builder-header-bg-color: #0F3877;
  --sol-builder-element-color: #0F2E5F;
}

/* Colors */
.wp-customizer:not(.modal-open) {
  color: var(--sol-customizer-text-color);
}

.wp-customizer:not(.modal-open) a {
  color: var(--sol-customizer-link-color);
}

.wp-full-overlay {
  background: var(--sol-color-background);
}

.wp-full-overlay-sidebar {
  background-color: var(--sol-customizer-bg-color);
  color: var(--sol-customizer-text-color);
  border-color: var(--sol-customizer-border-color);
}

.wp-full-overlay-sidebar .wp-full-overlay-header,
.wp-full-overlay-sidebar .wp-full-overlay-footer,
.wp-full-overlay-sidebar .customize-control-notifications-container {
  background-color: var(--sol-customizer-panel-bg-color);
  border-color: var(--sol-customizer-border-color);
}

.wp-full-overlay-footer .devices {
  background: transparent;
  box-shadow: none;
}

.wp-full-overlay-footer .devices button::before {
  color: var(--sol-customizer-icon-color);
}

.wp-full-overlay-footer .devices button.active {
  border-bottom-color: var(--sol-customizer-icon-color);
}

.wp-full-overlay-footer .devices button.active::before {
  color: var(--sol-customizer-icon-color);
}

.wp-core-ui .wp-full-overlay .collapse-sidebar {
  color: var(--sol-customizer-icon-color);
}

#customize-header-actions {
  border-color: var(--sol-customizer-border-color);
}

#customize-controls .customize-info {
  border-color: var(--sol-customizer-border-color);
}

#customize-controls .customize-info .preview-notice {
  color: var(--sol-customizer-text-color);
}

#customize-controls .customize-info .accordion-section-title {
  background: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
}

#customize-controls .cannot-expand:hover .accordion-section-title,
#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
  background: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
}

#customize-controls #customize-notifications-area {
  border: none;
}

#customize-theme-controls .accordion-section-title {
  background-color: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
}

#customize-theme-controls .accordion-section-content,
#customize-theme-controls .woocommerce-thank-you-page-add-row-title {
  color: var(--sol-customizer-text-color);
}

#customize-theme-controls .customize-section-title {
  background-color: var(--sol-customizer-bg-color);
}

#customize-theme-controls .customize-section-title h3 {
  background-color: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
}

#customize-theme-controls .control-panel-themes > .accordion-section-title,
#customize-theme-controls .control-panel-themes > .accordion-section-title:hover {
  background-color: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
  border-color: var(--sol-customizer-border-color);
}

.outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
  background-color: var(--sol-customizer-bg-color);
}

#customize-sidebar-outer-content,
#customize-outer-theme-controls .accordion-section-content,
#customize-controls .description {
  background-color: var(--sol-customizer-bg-color);
  color: var(--sol-customizer-text-color);
  border-color: var(--sol-customizer-border-color);
}

#customize-control-changeset_status .customize-inside-control-row {
  background-color: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
  border-color: var(--sol-customizer-border-color);
}

.customize-copy-preview-link:after,
.customize-copy-preview-link:before {
  background: none;
}

#customize-control-changeset_preview_link input {
  background-color: var(--sol-customizer-bg-color);
  color: var(--sol-customizer-text-color);
  border-color: transparent;
}

.wp-customizer .notice {
  background: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
  border-color: var(--sol-customizer-border-color);
}

#solace-customize-search-field span.accordion-section {
  background-color: var(--sol-customizer-panel-bg-color);
}

.customize-controls-close {
  background: transparent;
  border: none;
  color: var(--sol-customizer-icon-color);
}

.customize-controls-close::before {
  top: 0;
}

.wp-customizer .notice-dismiss:before,
.color-array-wrap button.reset-palette {
  color: var(--sol-customizer-icon-color);
}

.wp-customizer .notice-dismiss:before:hover,
.color-array-wrap button.reset-palette:hover {
  color: var(--sol-customizer-contrast-color);
}

.customize-panel-back,
.customize-section-back,
.customize-panel-back:focus,
.customize-section-back:focus {
  color: var(--sol-customizer-icon-color);
  background: var(--sol-customizer-panel-bg-color);
  border-left-color: var(--sol-customizer-panel-bg-color);
  border-right-color: var(--sol-customizer-panel-bg-color);
}

.customize-panel-back:hover,
.customize-section-back:hover {
  background: var(--sol-customizer-contrast-color);
  border-left-color: var(--sol-customizer-icon-color);
  border-right-color: var(--sol-customizer-icon-color);
}

#customize-controls .customize-info .customize-panel-description,
#customize-controls .customize-info .customize-section-description,
#customize-controls .no-widget-areas-rendered-notice,
#customize-outer-theme-controls .customize-info .customize-section-description {
  color: var(--sol-customizer-text-color);
  background: var(--sol-customizer-panel-bg-color);
}

#customize-controls .customize-info .customize-help-toggle,
#customize-controls .customize-info .customize-help-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:hover,
#customize-controls .customize-info.open .customize-help-toggle {
  color: var(--sol-customizer-icon-color);
}

.wp-customizer .menu-item-settings {
  background: var(--sol-customizer-bg-color);
}

#available-menu-items .item-add:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before,
.customize-screen-options-toggle:focus:before,
.menu-delete:focus,
.menu-item-bar .item-delete:focus:before,
.wp-customizer .menu-item .submitbox .submitdelete:focus,
.wp-customizer button:focus .toggle-indicator:before {
  box-shadow: 0 0 0 1px var(--sol-customizer-icon-color), 0 0 2px 1px var(--sol-customizer-icon-color);
}

#customize-controls .customize-info .customize-help-toggle {
  right: 13px;
  right: 29px;
}

div.color-array-wrap {
  background: var(--sol-customizer-bg-color);
}

div.solace-white-background-control {
  background: var(--sol-customizer-panel-bg-color);
}

div.solace-responsive-control-bar button .dashicon,
div.solace-responsive-control-bar button svg {
  color: var(--sol-customizer-icon-color);
}

.preview-desktop .solace-responsive-control-bar button.desktop span.dashicon,
.preview-mobile .solace-responsive-control-bar button.mobile span.dashicon,
.preview-tablet .solace-responsive-control-bar button.tablet span.dashicon,
.wp-customizer .components-button svg {
  color: var(--wp-admin-theme-color);
}

div.solace-responsive-sizing label,
div.solace-units button.components-button {
  color: var(--sol-customizer-text-color);
}

div.solace-responsive-sizing label.active,
div.solace-units button.components-button.active {
  background: var(--sol-customizer-link-color);
}

div.solace-responsive-sizing label.active.alone,
div.solace-units button.components-button.active.alone {
  background: var(--sol-customizer-link-color);
}

div.solace-responsive-sizing label.active.alone:disabled,
div.solace-units button.components-button.active.alone:disabled {
  opacity: .9;
}

div.solace-responsive-sizing button.reset .dashicon,
div.solace-responsive-sizing button.reset svg {
  color: var(--sol-customizer-icon-color);
}

.components-button.is-secondary,
.components-button.is-tertiary {
  color: var(--sol-customizer-text-color);
  box-shadow: inset 0 0 0 1px var(--sol-customizer-text-color);
}

.components-button.is-secondary:hover:not(:disabled),
.components-button.is-tertiary:hover:not(:disabled) {
  color: var(--sol-customizer-link-color);
  box-shadow: none;
  box-shadow: inset 0 0 0 1px var(--sol-customizer-link-color);
}

.builder-instructions {
  color: var(--wp-admin-theme-color);
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item {
  background-color: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-contrast-color);
  border: none;
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item::after,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item::after {
  color: var(--sol-customizer-contrast-color);
}

.customize-control {
  border-bottom: 1px solid var(--sol-customizer-line-color);
  margin-bottom: 0;
  padding: 13px 0;
}

.customize-control > div:not(.solace-tabs-control) {
  padding-bottom: unset;
}

.customize-control > div:not(.solace-tabs-control) .solace-control-header {
  margin-bottom: 0;
}

.customize-control.customize-control-interface-tabs {
  padding: 13px 0 0;
  display: none !important;
}

.customize-control > div.solace-tabs-control {
  margin: 0;
}

.solace-background-control div.control--body {
  position: relative;
  background-color: transparent;
  border: 1px solid var(--sol-customizer-panel-bg-color);
}

.solace-background-control div.control--body .components-placeholder__fieldset .components-button {
  background: var(--sol-customizer-button-color);
  box-shadow: none;
  border-radius: 18px;
}

.solace-background-control div.control--body .components-placeholder__fieldset .components-button:hover {
  opacity: 0.9;
  color: var(--sol-customizer-text-color);
}

.solace-background-control div.control--body .components-input-control__container {
  border-radius: 18px;
  padding-right: 6px;
}

.solace-background-control div.control--body .components-base-control__label {
  text-transform: capitalize;
  font-size: 16px;
  line-height: 1.75;
  font-weight: var(--sol-customizer--font-weight-section);
  font-family: var(--sol-customizer--font-family);
}

.solace-background-control div.control--body .tooltip-alternative-color {
  display: none;
  background: var(--sol-customizer-panel-bg-color);
  border-radius: 2px;
  padding: 17px 15px;
  position: absolute;
  z-index: 1;
  left: 0;
  top: -75px;
}

.solace-background-control div.control--body .tooltip-alternative-color::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 15px;
  border-width: 10px;
  border-style: solid;
  border-color: var(--sol-customizer-panel-bg-color) transparent transparent transparent;
}

.solace-background-control div.control--body .components-toggle-control:hover + .tooltip-alternative-color {
  display: block;
}

.solace-background-control .solace-background-type-control button {
  border-color: var(--sol-customizer-panel-bg-color) !important;
  border-bottom: 0px solid transparent !important;
  margin-left: 0;
}

.solace-background-control .solace-background-type-control button.is-primary {
  background-color: var(--sol-customizer-panel-bg-color) !important;
  border-color: transparent !important;
}

.wp-core-ui .button:disabled,
.wp-core-ui .button[disabled] {
  color: #2271b1 !important;
}

.customize-control-widget_form .widget-top {
  background: var(--sol-customizer-panel-bg-color);
  border: none;
  color: var(--sol-customizer-text-color);
}

.customize-control-widget_form .widget-top h3 {
  color: inherit;
}

.customize-control-widget_form .widget-top h3 .in-widget-title {
  color: var(--sol-customizer-link-color);
}

.customize-control-widget_form .widget-top .widget-action .toggle-indicator {
  color: var(--sol-customizer-icon-color);
}

.customize-control-widget_form .widget-top .widget-action:focus .toggle-indicator:before {
  box-shadow: 0 0 0 1px var(--sol-customizer-icon-color), 0 0 2px 1px var(--sol-customizer-icon-color);
}

.customize-control-widget_form .widget-inside {
  background-color: var(--sol-customizer-panel-bg-color);
  border: none;
  border-top: 1px solid var(--sol-customizer-text-color);
}

.customize-control-widget_form .widget-inside .button-link {
  text-decoration: none;
}

.customize-control-widget_form .attachment-media-view .button-add-media {
  background-color: var(--sol-customizer-button-color);
  color: var(--sol-customizer-contrast-color);
  border: none;
}

.customize-control-widget_form .attachment-media-view .button-add-media:hover {
  background-color: var(--sol-customizer-button-color);
  color: var(--sol-customizer-contrast-color);
  opacity: 0.9;
}

.customize-control-sidebar_widgets .button-link {
  text-decoration: none;
}

#available-widgets-filter {
  background: var(--sol-customizer-panel-bg-color);
}

#available-widgets {
  border-right: 1px solid var(--sol-customizer-border-color);
}

#available-widgets-list {
  border-top: 1px solid var(--sol-customizer-border-color);
}

#available-widgets .widget-tpl {
  background: var(--sol-customizer-bg-color);
  border-color: var(--sol-customizer-border-color);
}

#available-widgets .widget-tpl.selected, #available-widgets .widget-tpl:hover {
  background: var(--sol-customizer-panel-bg-color);
  border-bottom-color: var(--sol-customizer-border-color);
  border-left-color: var(--sol-customizer-link-color);
}

#available-widgets .widget-tpl .widget-title h3 {
  color: var(--sol-customizer-text-color);
}

#available-widgets .widget-tpl .widget-title:before {
  color: var(--sol-customizer-text-color);
}

#available-widgets .widget-tpl .widget-description {
  color: var(--sol-customizer-text-color);
}

#customize-theme-controls .widget-reorder-nav {
  background-color: var(--sol-customizer-panel-bg-color);
}

#customize-theme-controls .widget-reorder-nav span {
  color: var(--sol-customizer-icon-color);
}

#customize-theme-controls .widget-reorder-nav span:hover, #customize-theme-controls .widget-reorder-nav span:focus {
  background: var(--sol-customizer-bg-color);
}

#customize-theme-controls .first-widget .move-widget-up,
#customize-theme-controls .last-widget .move-widget-down {
  background-color: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-icon-color);
  opacity: 0.3;
}

#customize-theme-controls .move-widget-area {
  background: var(--sol-customizer-panel-bg-color);
  border: 1px solid var(--sol-customizer-border-color);
}

#customize-theme-controls .widget-area-select li {
  color: var(--sol-customizer-text-color);
  border-top: 1px solid var(--sol-customizer-border-color);
}

#customize-theme-controls .widget-area-select li:last-child {
  border-bottom: 1px solid var(--sol-customizer-border-color);
}

#customize-theme-controls .widget-area-select li.selected {
  background: var(--sol-customizer-button-color);
}

div.solace-tabs-control {
  margin: 18px 0 0;
  display: flex;
  width: auto;
}

div.solace-tabs-control div.solace-customizer-tab {
  border: none;
  margin: 0 3px;
  flex-grow: 3;
}

div.solace-tabs-control div.solace-customizer-tab:first-child {
  margin: 0 3px 0 0;
}

div.solace-tabs-control div.solace-customizer-tab:last-child {
  margin: 0 0 0 3px;
}

div.solace-tabs-control div.solace-customizer-tab label {
  border: 1px solid var(--sol-customizer-border-color);
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: var(--sol-customizer-text-color);
  background-color: var(--sol-customizer-bg-color);
  box-shadow: none;
  font-weight: 400;
  text-align: center;
  display: block;
}

div.solace-tabs-control div.solace-customizer-tab label i {
  display: none;
}

div.solace-tabs-control div.solace-customizer-tab.active label {
  color: var(--sol-customizer-text-color);
  background-color: var(--sol-customizer-panel-bg-color);
  box-shadow: none;
  font-weight: 600;
}

.only-label-toggle-wrap {
  margin-top: 16px;
}

.only-label-toggle-wrap label {
  font-size: 18px;
  font-weight: 700;
}

li.customize-control-interface-tabs-custom {
  border: none;
  padding: 0;
  margin: 18px 0;
  margin-bottom: 0;
}

li.customize-control-interface-tabs-custom .solace-tabs-custom-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #102c5f;
}

li.customize-control-interface-tabs-custom .solace-tabs-custom-control .solace-customizer-tab {
  border: 1px solid #102c5f;
  background: #001644;
  padding: 13px;
  margin: 0;
  cursor: pointer;
  width: calc(50% - 32px);
  border-radius: 8px 8px 0 0;
}

li.customize-control-interface-tabs-custom .solace-tabs-custom-control .solace-customizer-tab label {
  background-color: var(--sol-customizer-bg-color);
  color: var(--sol-customizer-text-color);
  font-family: Poppins;
  font-size: 18px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  display: block;
  border: none;
  cursor: pointer;
}

li.customize-control-interface-tabs-custom .solace-tabs-custom-control .solace-customizer-tab label i {
  display: none;
}

li.customize-control-interface-tabs-custom .solace-tabs-custom-control .solace-customizer-tab.active {
  background: var(--sol-customizer-panel-bg-color);
}

li.customize-control-interface-tabs-custom .solace-tabs-custom-control .solace-customizer-tab.active label {
  color: var(--sol-customizer-text-color);
  font-weight: 600;
  background: transparent;
}

/* Typography */
.wp-full-overlay-sidebar {
  font-family: var(--sol-customizer--font-family);
  font-weight: var(--sol-customizer--font-weight-section);
  font-size: var(--sol-customizer--font-size-section);
  -webkit-font-smoothing: antialiased;
}

#customize-theme-controls .customize-pane-parent > .control-panel .accordion-section-title,
#customize-theme-controls .customize-pane-parent > .control-section .accordion-section-title {
  font-family: var(--sol-customizer--font-family);
  font-weight: var(--sol-customizer--font-weight-panel);
  font-size: var(--sol-customizer--font-size-panel);
  -webkit-font-smoothing: antialiased;
}

#customize-theme-controls .customize-pane-child > .control-section .accordion-section-title {
  font-family: var(--sol-customizer--font-family);
  font-weight: var(--sol-customizer--font-weight-section);
  font-size: var(--sol-customizer--font-size-section);
  -webkit-font-smoothing: antialiased;
}

#customize-theme-controls .customize-pane-child .customize-section-title {
  font-family: var(--sol-customizer--font-family);
  font-weight: var(--sol-customizer--font-weight-section);
  font-size: var(--sol-customizer--font-size-section);
  -webkit-font-smoothing: antialiased;
}

.customize-control-title {
  font-weight: var(--sol-customizer--font-weight-section);
  font-size: 16px;
}

.solace-hfg-builder .solace-builder-sidebar-content .customize-control-title {
  font-size: 14px;
  text-align: center;
  color: #37527E;
}

/* Layout & Spacing */
#customize-theme-controls .customize-pane-parent > .control-section .accordion-section-title {
  border: none;
  border-radius: 6px;
  margin: 12px;
  padding: 12px 60px;
}

#customize-theme-controls .customize-pane-parent > .control-panel .accordion-section-title {
  border: none;
  border-radius: 6px;
  margin: 12px;
  padding: 12px 60px;
}

#customize-theme-controls .accordion-section-title,
#customize-theme-controls .control-section.open,
.customize-section-title,
#accordion-section-themes + .control-section {
  border: none;
}

.customize-panel-back,
.customize-section-back {
  height: 73px;
}

#customize-control-solace_global_colors .solace-color-component {
  margin-bottom: 14px;
}

#customize-control-solace_global_colors .solace-color-component .components-dropdown > .components-button {
  border-radius: 100%;
  width: 38px;
  height: 38px;
  border: 0px solid var(--sol-customizer-contrast-color) !important;
}

#customize-control-solace_global_colors .solace-color-component .components-dropdown > .components-button .color,
#customize-control-solace_global_colors .solace-color-component .components-dropdown > .components-button .gradient {
  border-radius: 100%;
  width: 35px;
  height: 35px;
}

div.solace-color-control {
  padding-top: unset;
}

div.solace-color-control .solace-color-component .customize-control-title {
  flex-grow: 1;
}

div.solace-color-component > div > button,
div.solace-color-component.allows-global > div > button {
  width: 38px !important;
  height: 38px !important;
  border: 0px solid #ccc !important;
  border-radius: 100%;
}

div.solace-color-component > div > button .color,
div.solace-color-component > div > button .gradient,
div.solace-color-component.allows-global > div > button .color,
div.solace-color-component.allows-global > div > button .gradient {
  border-radius: 100%;
  border: 3px solid var(--sol-customizer-contrast-color);
}

div.solace-color-component > div > button:hover .color,
div.solace-color-component > div > button:hover .gradient,
div.solace-color-component.allows-global > div > button:hover .color,
div.solace-color-component.allows-global > div > button:hover .gradient {
  border: 3px solid var(--sol-customizer-link-color);
}

div.solace-color-component.allows-global .components-dropdown:has(.global-color-picker) {
  order: 2;
}

div.solace-color-component.allows-global .components-dropdown:has(.global-color-picker) .global-color-picker:focus:not(:disabled) {
  box-shadow: none;
}

div.solace-color-component.allows-global .components-dropdown:has(.global-color-picker) .global-color-picker:after {
  content: url("../img/customizer/color-wheel.svg");
  position: absolute;
  top: -1px;
}

div.solace-color-component.allows-global .components-dropdown:has(.global-color-picker) .global-color-picker {
  margin-left: 5px;
}

div.solace-color-component.allows-global .components-dropdown:has(.global-color-picker) .global-color-picker svg {
  display: none;
}

div.solace-color-component .components-button {
  box-shadow: none;
}

div.solace-color-component .components-button:hover, div.solace-color-component .components-button.is-secondary:hover:not(:disabled), div.solace-color-component .components-button.is-tertiary:hover:not(:disabled) {
  box-shadow: none;
}

div.solace-color-component .components-button:focus:not(:disabled) {
  box-shadow: none;
}

.components-form-toggle.is-checked .components-form-toggle__track {
  background-color: #fff;
}

.components-form-toggle.is-checked .components-form-toggle__thumb {
  background-color: #ff9400;
  border: 1px solid #000;
}

#customize-control-header_account_toggle_icon .solace-radio-icons .components-button.has-icon,
#customize-control-footer_account_toggle_icon .solace-radio-icons .components-button.has-icon {
  border-radius: 6px;
  border: none;
  margin: 0 12px 0 0;
  background: #fff;
}

#customize-control-header_account_toggle_icon .solace-radio-icons .components-button.has-icon.active, #customize-control-header_account_toggle_icon .solace-radio-icons .components-button.has-icon:hover,
#customize-control-footer_account_toggle_icon .solace-radio-icons .components-button.has-icon.active,
#customize-control-footer_account_toggle_icon .solace-radio-icons .components-button.has-icon:hover {
  background-color: var(--sol-customizer-icon-color) !important;
}

#customize-control-header_account_toggle_icon .solace-radio-icons .components-button.has-icon.active svg, #customize-control-header_account_toggle_icon .solace-radio-icons .components-button.has-icon:hover svg,
#customize-control-footer_account_toggle_icon .solace-radio-icons .components-button.has-icon.active svg,
#customize-control-footer_account_toggle_icon .solace-radio-icons .components-button.has-icon:hover svg {
  color: #fff;
}

#customize-control-header_account_toggle_icon .solace-radio-icons .components-button.has-icon svg,
#customize-control-footer_account_toggle_icon .solace-radio-icons .components-button.has-icon svg {
  color: #000;
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item {
  padding: 12px 24px;
  min-height: 45px;
  border-radius: 9px;
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item svg,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item svg {
  display: block;
  position: absolute;
  right: 24px;
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item span,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item span {
  overflow: unset;
  margin-left: 8px;
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder .sidebar-items div.droppable,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder .sidebar-items div.droppable {
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 18px;
}

/* Range Control */
.solace-range-control .components-range-control {
  margin-top: 6px;
}

.solace-range-control .components-flex {
  border-radius: 18px;
}

.solace-range-control .components-range-control__track {
  background: none;
}

.solace-range-control .components-range-control__thumb-wrapper {
  background-color: var(--sol-customizer-link-color);
  border: 2px solid var(--sol-customizer-bg-color);
  width: 14px;
  height: 14px;
}

.solace-range-control .components-range-control__thumb-wrapper span {
  background-color: var(--sol-customizer-link-color);
}

.solace-range-control .components-range-control__thumb-wrapper span::before {
  width: 18px;
  height: 18px;
}

.solace-range-control button.components-range-control__reset {
  background: var(--sol-customizer-button-color);
  box-shadow: none;
  border-radius: 18px;
}

.solace-range-control button.components-range-control__reset.is-small {
  min-height: 25px;
  height: 30px;
  padding: 0 12px;
}

.solace-range-control button.components-range-control__reset:hover {
  opacity: .9;
  color: var(--sol-customizer-text-color) !important;
}

/* Input Control */
.customize-control-text input[type=text] {
  border: 1px solid var(--sol-customizer-contrast-color);
  background-color: var(--sol-customizer-bg-color);
  color: white;
  border-radius: 2em;
  line-height: 1.5em;
  padding: 1em;
}

.customize-control-text input[type=text]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

#_customize-input-blogname {
  margin-top: 15px;
  border: 1px solid var(--sol-customizer-contrast-color);
  background-color: var(--sol-customizer-bg-color);
  color: white;
  border-radius: 2em;
  line-height: 1.5em;
  padding: 1em;
}

#_customize-input-blogname::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Button Appearance Control */
.customize-control-solace_button_appearance .components-panel {
  background: transparent;
  border: none;
}

.customize-control-solace_button_appearance .components-panel .components-panel__body {
  border: none;
}

.customize-control-solace_button_appearance .components-panel .components-panel__body-title:hover {
  background: var(--sol-customizer-panel-bg-color);
}

.customize-control-solace_button_appearance .components-panel .components-panel__body-title:hover:hover {
  background: var(--sol-customizer-panel-bg-color);
}

.customize-control-solace_button_appearance .components-panel .components-panel__body-toggle.components-button {
  background: var(--sol-customizer-panel-bg-color);
  color: var(--sol-customizer-text-color);
  font-size: var(--sol-customizer--font-size-section);
  font-weight: var(--sol-customizer--font-weight-section);
}

.customize-control-solace_button_appearance .components-panel .components-panel__body-toggle.components-button:focus {
  box-shadow: none;
}

.customize-control-solace_button_appearance .components-panel .components-panel__body-toggle.components-button .components-panel__arrow {
  color: var(--sol-customizer-text-color);
}

.customize-control-solace_button_appearance .solace-button-appearance-control .solace-radio-icons button {
  height: 45px;
  border-radius: 3px;
  box-shadow: 0px 0px 0 9px var(--sol-customizer-panel-bg-color) !important;
  max-width: 112px;
  margin: 10px;
  border: none;
  background-color: transparent !important;
}

.customize-control-solace_button_appearance .solace-button-appearance-control .solace-radio-icons button.active {
  box-shadow: 0px 0px 0 9px var(--sol-customizer-link-color) !important;
}

.customize-control-solace_button_appearance .solace-button-appearance-control .solace-radio-icons button:hover {
  background-color: transparent !important;
}

.customize-control-solace_button_appearance .solace-button-appearance-control .solace-radio-icons button:first-child {
  margin-right: 20px;
}

.customize-control-solace_button_appearance .solace-button-appearance-control .solace-radio-icons button:last-child {
  border: 1px solid var(--sol-customizer-contrast-color) !important;
}

.customize-control-solace_button_appearance .solace-button-appearance-control > .customize-control-title,
.customize-control-solace_button_appearance .solace-button-appearance-control > .solace-white-background-control > .customize-control-title:nth-child(3),
.customize-control-solace_button_appearance .solace-button-appearance-control > .solace-white-background-control > .customize-control-title:nth-child(5),
.customize-control-solace_button_appearance .solace-button-appearance-control > .solace-white-background-control > .solace-responsive-sizing,
.customize-control-solace_button_appearance .solace-button-appearance-control > .solace-white-background-control > .components-panel > .components-panel__body > hr:nth-child(4),
.customize-control-solace_button_appearance .solace-button-appearance-control > .solace-white-background-control > .components-panel > .components-panel__body > div:nth-child(5) {
  display: none;
}

#sub-accordion-section-header_button .solace-has-dynamic-tag-selector div.solace-dynamic-tag-selector,
#sub-accordion-section-footer_button .solace-has-dynamic-tag-selector div.solace-dynamic-tag-selector {
  display: none;
  bottom: 10px;
}

/* Element Logo */
#customize-control-logo_display .solace-radio-icons {
  display: flex;
  justify-content: flex-start;
}

#customize-control-logo_display .solace-radio-icons span {
  flex-direction: column;
  flex: unset;
}

#customize-control-logo_display .solace-radio-icons.large-buttons span:first-child button svg {
  width: 67px;
  height: 45px;
}

#customize-control-logo_display .solace-radio-icons.large-buttons span:last-child {
  margin-left: 5px;
}

#customize-control-logo_display .solace-radio-icons.large-buttons span:last-child button svg {
  width: 107px;
  height: 45px;
}

/* Element Logo Footer*/
#customize-control-logo-footer_display .solace-radio-icons {
  display: flex;
  justify-content: flex-start;
}

#customize-control-logo-footer_display .solace-radio-icons span {
  flex-direction: column;
  flex: unset;
}

#customize-control-logo-footer_display .solace-radio-icons.large-buttons span:first-child button svg {
  width: 67px;
  height: 45px;
}

#customize-control-logo-footer_display .solace-radio-icons.large-buttons span:last-child {
  margin-left: 5px;
}

#customize-control-logo-footer_display .solace-radio-icons.large-buttons span:last-child button svg {
  width: 107px;
  height: 45px;
}

/* Icons */
#customize-theme-controls {
  min-width: 300px;
}

#customize-theme-controls .customize-pane-parent > .control-panel .accordion-section-title::before,
#customize-theme-controls .customize-pane-parent > .control-section .accordion-section-title::before {
  content: url("../img/customizer/sol-icon-general-options.svg");
  position: absolute;
  top: 12px;
  left: 18px;
}

#customize-theme-controls .customize-pane-parent > #accordion-panel-hfg_header .accordion-section-title::before {
  content: url("../img/customizer/sol-icon-header-builder.svg");
}

#customize-theme-controls .customize-pane-parent > #accordion-panel-hfg_footer .accordion-section-title::before {
  content: url("../img/customizer/sol-icon-footer-builder.svg");
}

#customize-theme-controls .customize-pane-parent > #accordion-panel-solace_layout .accordion-section-title::before {
  content: url("../img/customizer/sol-icon-page-settings.svg");
}

#customize-theme-controls .customize-pane-parent > #accordion-section-solace_features .accordion-section-title::before {
  content: url("../img/customizer/sol-icon-features.svg");
}

#customize-theme-controls .customize-pane-parent > #accordion-panel-solace_wc_custom .accordion-section-title::before {
  content: url("../img/customizer/sol-icon-cart.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item::before {
  content: url("../img/customizer/elements/widget.svg");
  margin-top: 4px;
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="logo"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="logo-footer"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="logo"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="logo-footer"]::before {
  content: url("../img/customizer/elements/logo.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="button_base"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="button_base2"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="button_base3"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="button_base4"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="button_base"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="button_base2"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="button_base3"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="button_base4"]::before {
  content: url("../img/customizer/elements/button.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="header_cart_icon"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="footer_cart_icon"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="header_cart_icon"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="footer_cart_icon"]::before {
  content: url("../img/customizer/elements/cart.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="nav-icon"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="secondary-menu"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="primary-menu"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="footer-menu"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="nav-icon"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="secondary-menu"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="primary-menu"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="footer-menu"]::before {
  content: url("../img/customizer/elements/menu.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="header_account"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="footer_account"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="header_account"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="footer_account"]::before {
  content: url("../img/customizer/elements/account.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="header_contact"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="footer_contact"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="header_contact"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="footer_contact"]::before {
  content: url("../img/customizer/elements/contact.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="header_search"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="header_search_responsive"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="footer_search"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="header_search"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="header_search_responsive"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="footer_search"]::before {
  content: url("../img/customizer/elements/search.svg");
}

#accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="header_social"]::before, #accordion-section-hfg_header_layout_section .solace-hfg-builder div.builder-item[data-id="footer_social"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="header_social"]::before,
#accordion-section-hfg_footer_layout_section .solace-hfg-builder div.builder-item[data-id="footer_social"]::before {
  content: url("../img/customizer/elements/social_icons.svg");
}

.popup-list-elements span.name::before {
  content: url("../img/customizer/elements/widget.svg");
  margin-top: 4px;
  margin-right: 10px;
}

.popup-list-elements span.name[data-id="logo"]::before,
.popup-list-elements span.name[data-id="logo-footer"]::before {
  content: url("../img/customizer/elements/logo.svg");
}

.popup-list-elements span.name[data-id="button_base"]::before,
.popup-list-elements span.name[data-id="button_base2"]::before,
.popup-list-elements span.name[data-id="button_base3"]::before,
.popup-list-elements span.name[data-id="button_base4"]::before {
  content: url("../img/customizer/elements/button.svg");
}

.popup-list-elements span.name[data-id="header_cart_icon"]::before,
.popup-list-elements span.name[data-id="footer_cart_icon"]::before {
  content: url("../img/customizer/elements/cart.svg");
}

.popup-list-elements span.name[data-id="nav-icon"]::before,
.popup-list-elements span.name[data-id="secondary-menu"]::before,
.popup-list-elements span.name[data-id="primary-menu"]::before,
.popup-list-elements span.name[data-id="footer-menu"]::before {
  content: url("../img/customizer/elements/menu.svg");
}

.popup-list-elements span.name[data-id="header_account"]::before,
.popup-list-elements span.name[data-id="footer_account"]::before {
  content: url("../img/customizer/elements/account.svg");
}

.popup-list-elements span.name[data-id="header_contact"]::before,
.popup-list-elements span.name[data-id="footer_contact"]::before {
  content: url("../img/customizer/elements/contact.svg");
}

.popup-list-elements span.name[data-id="header_search"]::before,
.popup-list-elements span.name[data-id="header_search_responsive"]::before,
.popup-list-elements span.name[data-id="footer_search"]::before {
  content: url("../img/customizer/elements/search.svg");
}

.popup-list-elements span.name[data-id="header_social"]::before,
.popup-list-elements span.name[data-id="footer_social"]::before {
  content: url("../img/customizer/elements/social_icons.svg");
}

div.builder-item {
  position: relative;
}

div.builder-item::before {
  content: url("../img/customizer/elements/widget-white.svg");
  margin-top: 4px;
  margin-left: 12px;
  margin-right: 12px;
}

div.builder-item > svg {
  display: none;
}

div.builder-item .name {
  font-size: 15px;
  padding: 9px 0;
  position: relative;
  display: block;
  width: 100%;
}

div.builder-item[component-id="button_base"]::before,
div.builder-item[component-id="button_base2"]::before,
div.builder-item[component-id="button_base3"]::before,
div.builder-item[component-id="button_base4"]::before {
  content: url("../img/customizer/elements/button-white.svg");
}

div.builder-item[component-id="primary-menu"]::before,
div.builder-item[component-id="nav-icon"]::before,
div.builder-item[component-id="secondary-menu"]::before,
div.builder-item[component-id="footer-menu"]::before {
  content: url("../img/customizer/elements/menu-white.svg");
}

div.builder-item[component-id="header_account"]::before,
div.builder-item[component-id="footer_account"]::before {
  content: url("../img/customizer/elements/account-white.svg");
}

div.builder-item[component-id="header_cart_icon"]::before,
div.builder-item[component-id="footer_cart_icon"]::before {
  content: url("../img/customizer/elements/cart-white.svg");
}

div.builder-item[component-id="header_contact"]::before,
div.builder-item[component-id="footer_contact"]::before {
  content: url("../img/customizer/elements/contact-white.svg");
}

div.builder-item[component-id="header_search"]::before,
div.builder-item[component-id="header_search_responsive"]::before,
div.builder-item[component-id="footer_search"]::before {
  content: url("../img/customizer/elements/search-white.svg");
}

div.builder-item[component-id="header_social"]::before,
div.builder-item[component-id="footer_social"]::before {
  content: url("../img/customizer/elements/social_icons-white.svg");
}

div.builder-item[component-id="logo"]::before,
div.builder-item[component-id="logo-footer"]::before {
  content: url("../img/customizer/elements/logo-white.svg");
}

/* Logo */
#customize-info.customize-info::before,
.panel-meta.customize-info::before,
.section-meta.customize-info .customize-section-title::before,
.customize-section-description-container:not(.customize-info) .customize-section-title::before {
  display: block;
  padding: 6px 54px;
}

.section-meta.customize-info .customize-section-title {
  position: relative;
}

#customize-info::before,
.panel-meta.customize-info::before,
.section-meta.customize-info .customize-section-title::before,
.customize-section-description-container:not(.customize-info) .customize-section-title::before {
  content: url("../img/customizer/logo-light-solace.png");
}

.sol-dark-mode #customize-info::before,
.sol-dark-mode .panel-meta.customize-info::before,
.sol-dark-mode .section-meta.customize-info .customize-section-title::before,
.sol-dark-mode .customize-section-description-container:not(.customize-info) .customize-section-title::before {
  content: url("../img/customizer/logo-dark-solace.png");
}

/* Hide Panel & Section */
#accordion-panel-solace_typography,
#accordion-section-solace_buttons_section,
#accordion-section-solace_form_fields_section,
#accordion-section-typography_font_pair_section,
#accordion-section-solace_typography_blog,
#accordion-section-solace_typography_general,
#customize-control-background_image,
#customize-control-solace_global_custom_colors,
#customize-control-footer_account_component_align,
#accordion-section-solace_style_section {
  display: none !important;
}

/*# sourceMappingURL=customizer-ui.css.map */

Sid Gifari From Gifari Industries - BD Cyber Security Team