/* A-MIXER 4.6.5 — unified range alignment */

/*
 * The fill gradient is painted on the input itself by mixer.js.
 * Keep an 18px interaction area, but draw that gradient as a 4px line
 * exactly through the vertical centre of the thumb.
 */
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-size: 100% 4px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    vertical-align: middle;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 0 !important;
    border: 2px solid #dbeafe !important;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12), 0 0 10px rgba(59, 130, 246, .45) !important;
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, .18), 0 0 12px rgba(59, 130, 246, .55) !important;
}

/* Firefox */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(86, 135, 157, .36);
}

input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: #3b82f6;
}

input[type="range"]::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #dbeafe !important;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12), 0 0 10px rgba(59, 130, 246, .45) !important;
    cursor: grab;
}

input[type="range"]:focus-visible {
    outline: 2px solid rgba(96, 165, 250, .65) !important;
    outline-offset: 4px;
}