#continue_span {

    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size--small-1);
    font-weight: 600;
    color: var(--white-100);

}

@media(max-width: 680px) {
    #continue_span {
        position: absolute;
        top: 16px;
    }
}

#container #source_span {

    opacity: 0;

    transition: all ease-in-out 250ms;

    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size--small-1);
    font-weight: 600;
    color: var(--white-100);

    position: absolute;
    bottom: 16px;

}

#container:hover #source_span {

    opacity: 1;

}

.progress_bar {

    border-radius: 23px;

    background-color: var(--black-25);
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 0;

    overflow: hidden;

}

.progress_bar>div {

    top: 0;
    left: 0;

    background: #38a935;

    width: 100%;
    height: 100%;

    transform-origin: 0 0;

}

/* MOVIE OPTIONS */
#movie_options_settings_container {

    position: absolute;

    margin-left: 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px 0;

}

@media(min-width: 600px) {

    #movie_options_settings_container {

        gap: 8px 0;

    }

}

#movie_options_settings_container label~p {

    color: var(--white-100);

}

#movie_options_settings_container label {

    max-width: 120px;

    font-size: var(--font-size--small-1);
    color: var(--white-100);

}

#movie_options_settings_container select {

    padding: 8px 8px;
    font-weight: 500;
    font-family: var(--font-family-sans-serif);

    border-radius: 4px;

    width: 100%;

    background-color: var(--black-75);
    color: var(--white-100);

}