:root {
    --buffered-witdth: 10%;
    --seek-before-width: 100%;
}


.chapter_border {
    border-left: 0.75rem solid;
}

.chapter_title {
    font-weight: bolder;
    font-size: 1.8rem;
    line-height: 1;

}

.chapter_description {
    font-weight: 500;
    line-height: 1.1rem;
    font-size: 0.9rem;
    /* letter-spacing: 1px; */
}

.chapters {
    & .chapter_title {
        font-size: 2.2rem;
        padding: 0.5rem 1.5rem;
    }
}

.chevron-anker {
    width: 34px;
    margin-top: -8px;
}

.audiofile_title_with_number {
    font-size: 1.1rem;
}

.audiofile_sub_title {
    font-size: 0.9rem;
    font-weight: 700;
    /* letter-spacing: 0px; */
}

.audioguide-chapter-append,
.audioguide-chapter-prepend {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 1rem 2rem;

    & table {
        /* overflow: ; */
    }

    & img {
        max-width: 100vw;
    }
}

.audiofile_container {
    background-color: white;
    border-radius: 28px;
}


.audio-icon {
    font-size: 8px;
    width: 22px;
    height: 22px;
    text-align: center;
    /* margin-left: 2px; */
}

.audio-icon svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

.play-icon {
    margin-left: 1px;
}
/* .pause-icon { } */

.attachment-icons {
    font-size: 8px;
    width: 16px;
}

.file-icon {
    font-size: 16px;
    width: 24px;
}

.audiocontrol {
    width: 36px;
    height: 36px;
    color: #fff; 
    border: none;
    background-color: rgb(240, 187, 45);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.attachment-round-icons {
    color: white;
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    padding: 2px;
    border: solid 1px white;
    background-color: rgb(240, 187, 45);
    border-radius: 100%;
}

.audiofile-attachments-link-url {
    font-size: 0.75rem;
    font-weight: bold;
}

.audiofile-attachment-file-name {
    font-size: 0.75rem;
    /* letter-spacing: 0.1rem; */
}

.audio_title_number {
    letter-spacing: -1px;
    line-height: 90%;
    font-weight: 600;
    font-size: 2.25rem;
    font-stretch: 50%;
    font-width: 50%;
    /* causes trouble with z-index and stacking context! */
    /* transform: scale(1, 1.2); */
}

.audiofile_container .currentTime,
.audiofile_container .completeTime {
    font-size: 0.6rem;
}


/* https://freefrontend.com/css-range-sliders/ */

.progressbar input[type="range"] {
    color: #757575;
    --thumb-height: 1.0em;
    --track-height: 0.4em;
    --track-color: rgba(53, 53, 53, 0.2);
    --brightness-hover: 180%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}


/* @media (prefers-color-scheme: dark) {
    html {
        background-color: #000;
    }

    html::before {
        background: radial-gradient(circle at center, #101112, #000);
    }

    .progressbar input[type="range"] {
        color: #f07167;
        --track-color: rgba(255, 255, 255, 0.1);
    }

    .progressbar input[type="range"].win10-thumb {
        color: #3a86ff;
    }
} */

/* === range commons === */
.progressbar input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

.progressbar input[type="range"]:active {
    cursor: grabbing;
}

.progressbar input[type="range"]:disabled {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

/* === WebKit specific styles === */
.progressbar input[type="range"],
.progressbar input[type="range"]::-webkit-slider-runnable-track,
.progressbar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

.progressbar input[type="range"]::-webkit-slider-runnable-track,
.progressbar input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

.progressbar input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(100% -1px,
            var(--clip-edges) -1px,
            0 var(--clip-top),
            -100vmax var(--clip-top),
            -100vmax var(--clip-bottom),
            0 var(--clip-bottom),
            var(--clip-edges) 100%,
            var(--clip-further) var(--clip-further));
}

.progressbar input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

.progressbar input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

.progressbar input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

.progressbar input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
.progressbar input[type="range"],
.progressbar input[type="range"]::-moz-range-track,
.progressbar input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

.progressbar input[type="range"]::-moz-range-track,
.progressbar input[type="range"]::-moz-range-thumb,
.progressbar input[type="range"]::-moz-range-progress {
    background: #fff0;
}

.progressbar input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

.progressbar input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

.progressbar input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

.progressbar input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

.progressbar input[type="range"]::-moz-range-track,
.progressbar input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

.progressbar input[type="range"]::-moz-range-thumb,
.progressbar input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

.progressbar input[type="range"]:hover::-moz-range-thumb,
.progressbar input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

.progressbar input[type="range"]:active::-moz-range-thumb,
.progressbar input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

.progressbar input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}