#customize-controls #customize-info .accordion-section-title { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } #customize-controls #customize-theme-controls .accordion-section > .accordion-section-title { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } #customize-controls #customize-theme-controls .accordion-section > .accordion-section-title:after { border-color: transparent !important; border-color: transparent !important; } .hint, [data-hint] { position: relative; display: inline-block; } .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { position: absolute; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 998; pointer-events: none; transition: 0.3s ease; transition-delay: 250ms; } .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after { visibility: visible; opacity: 1; } .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after { transition-delay: 0; } .hint:before, [data-hint]:before { content: ''; position: absolute; background: transparent; border: none; z-index: 999; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #333; left: -5px; top: 5px; } .hint:after, [data-hint]:after { content: attr(data-hint); background: #333; color: white; padding: 5px 10px; font-size: 12px; line-height: 14px; height: auto; margin-bottom: -14px; width: 170px; max-width: 170px; display: block; white-space: normal; text-align: right; position: relative; top: -22px; left: -195px; } li.customize-control { position: relative; } li.customize-control a.tooltip.hint--left { display: block; position: absolute; top: 5px; right: -20px; border-radius: 50%; color: #999; border: none; line-height: 8px; width: 20px; height: 20px; } .customize-control-radio-image .image.ui-buttonset input[type=radio] { height: auto; } .customize-control-radio-image .image.ui-buttonset label { border: 1px solid transparent; display: inline-block; margin-right: 5px; margin-bottom: 5px; } .customize-control-radio-image .image.ui-buttonset label.ui-state-active { background: none; border-color: #333; } .customize-control-multicheck input[type="checkbox"] { position: relative; margin: 0 1rem 0 0; cursor: pointer; margin-bottom: 5px; width: 22px; height: 22px; } .customize-control-multicheck input[type="checkbox"]:before { content: ""; position: absolute; left: 0; z-index: 1; width: 100%; height: 100%; border: none; } .customize-control-multicheck input[type="checkbox"]:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; cursor: pointer; } .customize-control-multicheck input[type="checkbox"]:checked:before { border: 4px solid #4caf50; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 14px; height: 6px; top: 6px; left: 5px; border-top-style: none; border-right-style: none; } .customize-control-multicheck input[type="checkbox"]:checked:after { background: #f2f2f2; } .customize-control-checkbox input[type="checkbox"] { position: relative; margin: 0 1rem 0 0; cursor: pointer; margin-bottom: 5px; width: 22px; height: 22px; } .customize-control-checkbox input[type="checkbox"]:before { content: ""; position: absolute; left: 0; z-index: 1; width: 100%; height: 100%; border: none; } .customize-control-checkbox input[type="checkbox"]:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; cursor: pointer; } .customize-control-checkbox input[type="checkbox"]:checked:before { border: 4px solid #4caf50; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 14px; height: 6px; top: 6px; left: 5px; border-top-style: none; border-right-style: none; } .customize-control-checkbox input[type="checkbox"]:checked:after { background: #f2f2f2; } .customize-control-radio-buttonset label { padding: 5px 10px; background: #f7f7f7; border-left: 1px solid #dedede; } .customize-control-radio-buttonset label.ui-state-active { background: #dedede; } .customize-control-radio-buttonset label.ui-corner-left { border-radius: 3px 0 0 3px; border-left: 0; } .customize-control-radio-buttonset label.ui-corner-right { border-radius: 0 3px 3px 0; } .customize-control-switch .Switch, .customize-control-toggle .Switch { position: relative; display: inline-block; font-size: 16px; font-weight: bold; color: #aaa; height: 18px; line-height: 27px; padding: 6px; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); background: #f2f2f2; cursor: pointer; float: right; transition: all 0.15s ease-in-out; } .customize-control-switch .Switch .Toggle, .customize-control-toggle .Switch .Toggle { position: absolute; top: 1px; width: 37px; height: 25px; border: 1px solid #aaa; border: 1px solid rgba(0, 0, 0, 0.2); background: #fff; z-index: 989; transition: all 0.15s ease-in-out; } .customize-control-switch .Switch .On, .customize-control-switch .Switch .Off, .customize-control-toggle .Switch .On, .customize-control-toggle .Switch .Off { display: inline-block; width: 35px; position: relative; top: -5px; } .customize-control-switch .Switch .On, .customize-control-toggle .Switch .On { color: #333; } .customize-control-switch .Switch.On .Toggle, .customize-control-toggle .Switch.On .Toggle { left: 54%; } .customize-control-switch .Switch.Off .Toggle, .customize-control-toggle .Switch.Off .Toggle { left: 2%; } .customize-control-switch .Switch.Round, .customize-control-toggle .Switch.Round { padding: 0 20px; border-radius: 40px; margin-top: 5px; } .customize-control-switch .Switch.Round .Toggle, .customize-control-toggle .Switch.Round .Toggle { border-radius: 40px; width: 14px; height: 14px; } .customize-control-switch .Switch.Round.Off .Toggle, .customize-control-toggle .Switch.Round.Off .Toggle { left: 3%; } .customize-control-switch .Switch.Round.On, .customize-control-toggle .Switch.Round.On { color: #fff; background: #333; } .customize-control-switch .Switch.Round.On .Toggle, .customize-control-toggle .Switch.Round.On .Toggle { left: 58%; } body.IE7 .Switch { width: 78px; } body.IE7 .Switch.Round { width: 1px; } .customize-control-sortable ul.ui-sortable li { padding: 5px 10px; border: 1px solid #333; background: #fff; } .customize-control-sortable ul.ui-sortable li .dashicons.dashicons-menu { float: right; } .customize-control-sortable ul.ui-sortable li .dashicons.visibility { margin-right: 10px; } .customize-control-sortable ul.ui-sortable li.invisible { color: #aaa; border: 1px dashed #aaa; } .customize-control-sortable ul.ui-sortable li.invisible .dashicons.visibility { color: #aaa; } .customize-control-palette label.ui-button.ui-widget { width: 95%; background: none; padding: 0; } .customize-control-palette label.ui-button.ui-widget .ui-button-text { border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-bottom: 5px; display: flex; } .customize-control-palette label.ui-button.ui-widget .ui-button-text span { padding: 10px 0; flex-grow: 1; font-size: 0; line-height: 10px; color: transparent; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .customize-control-palette label.ui-button.ui-widget .ui-button-text span:hover { padding: 10px; flex-grow: 3; min-width: 60px; font-size: 10px; line-height: 10px; color: #000; } .customize-control-palette label.ui-state-active.ui-button.ui-widget span.ui-button-text { border: 3px solid #333; } .customize-control-slider input[type="text"] { border: none; text-align: center; padding: 0; margin: 0; font-size: 12px; box-shadow: none; color: #333; } .customize-control-slider .ui-slider { position: relative; text-align: left; height: 7px; border-radius: 3px; background: #f2f2f2; border: 1px solid #dedede; margin-top: 10px; margin-bottom: 20px; } .customize-control-slider .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 15px; height: 15px; top: -5px; border-radius: 50%; cursor: default; -ms-touch-action: none; touch-action: none; background: #333; border: 1px solid #333; } .customize-control-slider .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; background-position: 0 0; } .customize-control-color-alpha .kirki-alpha-container { box-sizing: padding-box; display: none; border: 1px solid #dfdfdf; border-top: none; background: #fff; padding: 0 11px 6px; } .customize-control-color-alpha .kirki-alpha-container .transparency { height: 24px; width: 100%; background-color: #fff; background-image: url("../images/transparency-grid.png"); box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 0; } .customize-control-color-alpha .kirki-alpha-container .ui-slider-handle { color: #777; background-color: #fff; text-shadow: 0 1px 0 #fff; text-decoration: none; position: absolute; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border: 1px solid #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0.9; margin-top: -2px; height: 20px; cursor: ew-resize; font-size: 12px; padding: 3px; } .customize-control-color-alpha .kirki-alpha-container .ui-slider { position: relative; text-align: center; width: 88%; } .customize-control-color-alpha .wp-picker-container a.wp-picker-open ~ div.kirki-alpha-container { display: block; } .customize-control-color-alpha .customize-control-alphacolor .wp-picker-container .iris-picker { border-bottom: none; } .customize-control-number .stepper { border-radius: 0px; margin: 0 0 10px 0; overflow: hidden; position: relative; width: 50%; } .customize-control-number .stepper .stepper-input { background: #F9F9F9; border: 1px solid #ccc; border-radius: 0px; color: #333; font-size: 13px; line-height: 1.2; margin: 0; overflow: hidden; padding: 9px 10px 10px; width: 100%; z-index: 49; -moz-appearance: textfield; } .customize-control-number .stepper .stepper-input::-webkit-inner-spin-button, .customize-control-number .stepper .stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .customize-control-number .stepper .stepper-input:focus { background-color: #fff; } .customize-control-number .stepper .stepper-arrow { background: #eee url("../images/jquery.fs.stepper-arrows.png") no-repeat; border: 1px solid #ccc; cursor: pointer; display: block; height: 50%; position: absolute; right: 0; text-indent: -99999px; width: 20px; z-index: 50; } .customize-control-number .stepper .stepper-arrow.up { background-position: center top; border-bottom: none; top: 0; } .customize-control-number .stepper .stepper-arrow.down { background-position: center bottom; bottom: 0; } .promo-box { text-align:center; } .promo-box a:hover, .promo-box a:link , .promo-box a:visited , .promo-box a:active { color: #fff; } .promoupgrade { background-color: #1d4467; border-color: #1d4467; color: #fff !important; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 13px 30px 14px 29px; text-transform: uppercase; width: 54%; } .promoupgrade:hover, .promoupgrade:visited { background-color: #1d4467; border-color: #1d4467 #1d4467 #1d4467; color: #fff; opacity: 0.9; } .promodemo { background-color: #1ec846; border-color: #1ec846; color: #fff !important; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 13px 30px 14px 29px; text-transform: uppercase; width: 54%; } .promodemo:hover, .promodemo:visited { background-color: #1ec846; border-color: #1ec846 #1ec846 #1ec846; color: #fff; opacity: 0.9; } .contactmess { clear: both; font-size: 13px; text-align: center; } .promocontact { background-color: #ef9c28; border-color: #ef9c28; color: #fff !important; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 13px 30px 14px 29px; text-transform: uppercase; width: 54%; } .promocontact:hover, .promocontact:visited { background-color: #ef9c28; color: #fff; opacity: 0.9; }