.exercise-audio-player {
    width: 100%;
}

.exercise-audio-player.has-open-audio-settings {
    position: relative;
    z-index: 2;
}

.has-open-audio-settings-overflow {
    overflow: visible !important;
}

.exercise-audio-player.is-fixed {
    display: none;
}

.exercise-audio-player .audio-player {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3.75rem;
    padding: .5rem;
    background: var(--gray-15);
    border: .0625rem solid #e3e3e5;
    border-radius: 62.4375rem;
}

.exercise-audio-player .audio-player.is-playing .play-btn [alt="play"] {
    display: none;
}

.exercise-audio-player .audio-player.is-playing .play-btn [alt="stop"] {
    display: block;
}

.exercise-audio-player .audio-player.is_mute .volume-btn [alt="mute"] {
    display: block;
}

.exercise-audio-player .audio-player.is_mute .volume-btn [alt="unmute"] {
    display: none;
}

.exercise-audio-player .audio-player.is-repeat .repeat-btn [alt="norepeat"] {
    display: none;
}

.exercise-audio-player .audio-player.is-repeat .repeat-btn [alt="repeat"] {
    display: block;
}

.exercise-audio-player .audio-player .play-btn {
    margin-right: .5rem;
}

.exercise-audio-player .audio-player .play-btn [alt="play"],
.exercise-audio-player .audio-player .volume-btn [alt="unmute"],
.exercise-audio-player .audio-player .repeat-btn [alt="norepeat"] {
    display: block;
}

.exercise-audio-player .audio-player .play-btn [alt="stop"],
.exercise-audio-player .audio-player .volume-btn [alt="mute"],
.exercise-audio-player .audio-player .repeat-btn [alt="repeat"] {
    display: none;
}

.exercise-audio-player .audio-player .player-btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    border: none;
    border-radius: 50%;
    border: .0625rem solid var(--gray-25);
    background: var(--gray-0);
    color: #F85628;
    cursor: pointer;
    padding: .625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.75rem;
    transition-property: border, color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.exercise-audio-player .audio-player .player-btn:hover {
    border-color: #C7360D;
    color: #C7360D;
}

.exercise-audio-player .audio-player .player-btn img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

.exercise-audio-player .audio-player .speed-btn {
    font-size: .75rem;
    font-weight: 600;
    font-family: var(--font-onest);
    line-height: 1;
    color: #242526;
    margin: 0 .5rem;
}

.exercise-audio-player .audio-player .player-settings,
.exercise-audio-player .audio-player .player-settings-menu {
    display: contents;
}

.exercise-audio-player .audio-player .settings-btn {
    display: none;
}

.exercise-audio-player .audio-player .player-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 5.625rem;
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 500;
    color: #242526;
    white-space: nowrap;
    margin-right: .875rem;
}

.exercise-audio-player .audio-player .player-progress {
    position: relative;
    flex: 1 1 auto;
    height: 1.25rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: .5rem;
}

.exercise-audio-player .audio-player .player-progress::before {
    content: "";
    width: 100%;
    height: 1rem;
    background: var(--gray-0);
    border: .0625rem solid var(--gray-25);
    border-radius: 62.4375rem;
    display: block;
}

.exercise-audio-player .audio-player .player-progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1rem;
    transform: translateY(-50%);
    width: 0%;
    border-radius: 62.4375rem;
    background: var(--gray-25);
}

.exercise-audio-player .audio-player .player-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    background: #ff5a1f;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .exercise-audio-player.is-fixed {
        max-width: none !important;
        width: 100% !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 16px 12px !important;
        background: var(--bg) !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #EBEDEF;
        display: block;
        z-index: 15 !important;
        transform: translateY(-200%);
        transition: transform .4s ease;
    }

    .exercise-audio-player.is-fixed.show {
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {
    .exercise-audio-player .audio-player .player-settings {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 2.75rem;
        isolation: isolate;
    }

    .exercise-audio-player .audio-player .player-settings.is-open::before {
        content: "";
        position: absolute;
        inset: -.375rem;
        z-index: -1;
        border: .0625rem solid #e3e3e5;
        border-top: 0;
        border-radius: 0 0 62.4375rem 62.4375rem;
        background: var(--gray-0);
    }

    .exercise-audio-player .audio-player .player-settings.is-open.opens-down::before {
        border-top: .0625rem solid #e3e3e5;
        border-bottom: 0;
        border-radius: 62.4375rem 62.4375rem 0 0;
    }

    .exercise-audio-player .audio-player .player-settings-menu {
        position: absolute;
        right: -.375rem;
        bottom: calc(100% + .375rem);
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: .375rem;
        padding: .375rem .3125rem;
        visibility: hidden;
        opacity: 0;
        transform: translateY(.375rem);
        border: .0625rem solid #e3e3e5;
        border-bottom: 0;
        border-radius: 62.4375rem 62.4375rem 0 0;
        background: var(--gray-0);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .exercise-audio-player .audio-player .player-settings.opens-down .player-settings-menu {
        top: calc(100% + .375rem);
        bottom: auto;
        border-top: 0;
        border-bottom: .0625rem solid #e3e3e5;
        border-radius: 0 0 62.4375rem 62.4375rem;
        transform: translateY(-.375rem);
    }

    .exercise-audio-player .audio-player .player-settings.is-open .player-settings-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .exercise-audio-player .audio-player .player-settings-menu .speed-btn {
        margin: 0;
    }

    .exercise-audio-player .audio-player .settings-btn {
        display: inline-flex;
    }
}

.exercises-option .task-wrapper .exercise-audio-player {
    width: 100%;
}

.exercises-option .task-wrapper .writing-example-card:not(.writing-example-card--side) .exercise-example-audio,
.exercises-option .task-wrapper .speaking-example-card:not(.speaking-example-card--side) .exercise-example-audio {
    width: 100%;
    max-width: 35.0625rem;
}

.exercises-option[data-template="option_15"] .task-wrapper .answer > .exercise-audio-player,
.exercises-option[data-template="option_16"] .task-wrapper .answer > .exercise-audio-player {
    position: absolute;
    padding: 1.5rem;
    padding-bottom: 0;
    border-bottom-left-radius: 5.5rem;
    border-bottom-right-radius: 5.5rem;
    backdrop-filter: blur(.0938rem);
    top: 0;
    left: 0;
}

.exercises-option[data-template="option_15"] .task-wrapper .answer > .exercise-audio-player .audio-player,
.exercises-option[data-template="option_16"] .task-wrapper .answer > .exercise-audio-player .audio-player {
    max-width: none;
}

@media (max-width: 64rem) {
    .exercises-option[data-template="option_1"] .task-wrapper .exercise-audio-player,
    .exercises-option[data-template="option_2"] .task-wrapper .exercise-audio-player,
    .exercises-option[data-template="option_3"] .task-wrapper .exercise-audio-player {
        position: static;
        padding: 0;
        border-bottom-left-radius: 3rem;
        border-bottom-right-radius: 3rem;
        backdrop-filter: unset;
    }

    .exercises-option[data-template="option_15"] .task-wrapper .answer > .exercise-audio-player,
    .exercises-option[data-template="option_16"] .task-wrapper .answer > .exercise-audio-player {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 64.0625rem) {
    .exercises-option .scroll-container > .exercise-audio-player:not(.is-fixed) {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0;
        padding: 0 0 .75rem;
        background: rgb(255 255 255 / 82%);
        -webkit-backdrop-filter: blur(.0938rem);
        backdrop-filter: blur(.0938rem);
    }

    .exercises-option .speaking-example.scroll-container > .exercise-audio-player:not(.is-fixed) {
        top: -.5rem;
    }
}