@charset "UTF-8";
/* Volume controls for the RITA FM live player. */
.hero-livebar {
    grid-template-columns: auto minmax(180px, .45fr) minmax(60px, 1fr) auto;
    gap: 18px;
}
.radio-volume {
    display: grid;
    grid-template-columns: auto minmax(100px, 145px) 44px;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    color: #ffffff;
}
.radio-volume-label {
    grid-column: 2 / 4;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.radio-volume-mute {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 84px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.radio-volume-mute:hover { background: rgba(255, 255, 255, .16); }
.radio-volume-mute[aria-pressed="true"] { border-color: #75ecf7; }
.radio-volume-slider {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    height: 28px;
    margin: 0;
    accent-color: #75ecf7;
    cursor: pointer;
}
.radio-volume-value {
    grid-column: 3;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.radio-volume-mute:focus-visible, .radio-volume-slider:focus-visible {
    outline: 3px solid #75ecf7;
    outline-offset: 3px;
}
@media (max-width: 1050px) {
    .hero-livebar { grid-template-columns: auto minmax(160px, 1fr) auto; }
    .hero-livebar .waveform { display: none; }
}
@media (max-width: 760px) {
    .hero-livebar {
        grid-template-columns: auto minmax(0, 1fr);
        height: auto;
        min-height: 152px;
        gap: 8px 14px;
    }
    .radio-volume {
        grid-column: 1 / -1;
        grid-template-columns: 84px minmax(0, 1fr) 44px;
        width: 100%;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
}