.customize-control-ast-responsive-slider .wrapper { position: relative; } .customize-control-ast-responsive-slider .input-field-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .customize-control-ast-responsive-slider input[type=range] { -webkit-appearance: none; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; background-color: rgba(0, 0, 0, 0.1); height: 5px; padding: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .customize-control-ast-responsive-slider input[type=range]:focus { box-shadow: none; outline: none; } .customize-control-ast-responsive-slider input[type=range]:hover, .customize-control-ast-responsive-slider input[type=range]:focus { background-color: rgba(0, 0, 0, 0.25); } .customize-control-ast-responsive-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; -webkit-border-radius: 50%; background-color: #3498D9; } .customize-control-ast-responsive-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border: none; border-radius: 50%; background-color: #3498D9; } .customize-control-ast-responsive-slider input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background-color: #3498D9; } .customize-control-ast-responsive-slider input[type=range]::-ms-thumb { width: 15px; height: 15px; border-radius: 50%; border: 0; background-color: #3498D9; } .customize-control-ast-responsive-slider input[type=range]::-moz-range-track { border: inherit; background: transparent; } .customize-control-ast-responsive-slider input[type=range]::-ms-track { border: inherit; color: transparent; background: transparent; } .customize-control-ast-responsive-slider input[type=range]::-ms-fill-lower, .customize-control-ast-responsive-slider input[type=range]::-ms-fill-upper { background: transparent; } .customize-control-ast-responsive-slider input[type=range]::-ms-tooltip { display: none; } .customize-control-ast-responsive-slider .astra_range_value { font-size: 14px; padding: 0 0 0 5px; font-weight: 400; position: relative; } .customize-control-ast-responsive-slider .ast-responsive-slider-reset { color: rgba(0, 0, 0, 0.2); position: absolute; top: -28px; right: 1.5em; display: inline-block; -webkit-transition: color 0.5s ease-in; -moz-transition: color 0.5s ease-in; -ms-transition: color 0.5s ease-in; -o-transition: color 0.5s ease-in; transition: color 0.5s ease-in; } .customize-control-ast-responsive-slider .ast-responsive-slider-reset span { font-size: 13px; line-height: 24px; } .customize-control-ast-responsive-slider .ast-responsive-slider-reset:hover, .customize-control-ast-responsive-slider .ast-responsive-slider-reset:focus { color: red; } .astra_range_value input.ast-responsive-range-value-input { width: 50px; height: 22px; font-size: 12px; padding: 3px; } .astra_range_value .ast-range-unit { margin-left: 5px; } .customize-control-ast-responsive-slider .input-field-wrapper { display: none; } .customize-control-ast-responsive-slider .input-field-wrapper.active { display: flex; } /** * Responsive Icons */ .ast-responsive-slider-btns, .customize-control-title { display: inline-block; } .ast-responsive-slider-btns { float: right; line-height: 1; margin-top: 5px; } .ast-responsive-slider-btns > li { margin-bottom: 0; display: none; } .ast-responsive-slider-btns > li.active { display: inline-block; } .ast-responsive-slider-btns button[type="button"] { padding: 0; cursor: pointer; background: none; border: none; opacity: .75; outline: none; } .ast-responsive-slider-btns button[type="button"] > i { width: 15px; height: 15px; font-size: 15px; }