.bottom_frame {
    --reduced_time_value: '0%';
}
.timer_frame {
    position: relative;
    height: 100%;
    transition: opacity 2s ease-out;
    opacity: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: left;
    color: lightgray;
    z-index: 5;
}

.timer_frame div {
    display: none;
    /*margin-left: 4px;*/
    opacity: 0;
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

.timer_frame div.show{
    opacity: 1;
    display: flex;
}


.timer_frame .moreMargin {
    margin-left: 15px;
}


.bottom_frame div .timer_frame_a {
    font-family: 'RobotoMedium', sans-serif;
}

.bottom_frame div .b {
    font-family: 'RobotoLight', sans-serif;
    margin-left: 4px;
    margin-right: 20px;
}

.bottom_frame div .viewerCount {
    font-family: 'RobotoBlack', sans-serif;
    margin-left: 20px;
}

.bottom_frame div .d {
    font-family: 'RobotoLight', sans-serif;
    margin-left: 4px;
}

.d_icon {
    opacity: 0;
}

.d_icon.show{
    opacity: 1;
}
/*
.bottom_frame div .e {
    color: gray;
    font-family: 'RobotoLight', sans-serif;
}
/*
.e_left {
    color: gray;
    font-family: 'RobotoLight', sans-serif;
}
*/
.e_time {
    font-family: 'RobotoMedium', sans-serif;
}
.e_right {
    font-family: 'RobotoLight', sans-serif;
    margin-left: 4px;
}

@media only screen and (max-width: 409px) {
    .e_time.e_time, .e_left.e_left, .bottom_frame div .timer_frame_a {
        font-size: calc(16px * var(--window_scale));
    }
}
/*
@media only screen and (max-width: 599px) {
    .bottom_frame div .viewerCount, .bottom_frame div .d {
        display: none !important;
    }
}
*/

@media only screen and (max-width: 820px) {
    .bottom_frame div .d {
        display: none;
    }
    .bottom_frame div .d_icon {
        display: block;
    } 
}
@media only screen and (min-width: 821px) {
    .bottom_frame div .d {
        display: block;
    }
    .bottom_frame div .d_icon {
        display: none;
    }
}

@media only screen and (max-width: 820px) {
    .bottom_frame div .b {
        display: none;
    }

    .bottom_frame div .b_icon {
        display: block;
    }
}
@media only screen and (min-width: 821px) {
    .bottom_frame div .b {
        display: block;
    }

    .bottom_frame div .b_icon {
        display: none;
    }
}

@media only screen and (max-width: 820px) {
    div .e_right.e_right {
        display: none;
    }
}
@media only screen and (max-width: 475px) {
    div .e_time.e_time, .bottom_frame div .b_icon {
        display: none;
    }
}



.bold {
    font-weight: bold;
    color: var(--text_color);
}

.timer_frame.show 
{
    opacity: 1;
}

.timer_coloring {
    position: absolute;
    height: 100%;
    left: 0;
    width: var(--played_time_value);
    opacity: 0.2;
    background-color: #95c11f;
    pointer-events: none;
    transition: width 1s linear;
    z-index: 4;
}


.timer_timeLine {

    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    bottom: var(--bottom_frame_height);
    background-color: dimgrey;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.timer_timeLine .playing_time {
    position: absolute;
    background-color: #95c11f;
    left: 0;
    height: 100%;
    width: var(--played_time_value);
    transition: width 1s linear;
}

.no_time_instruction_frame {
    --padding_value: 30px;
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 2s ease-out;
    opacity: 0;
    background-color: #1c1d1f;
    color: white;
    max-width: 600px;
    z-index: 10;
    pointer-events: auto;
}

.no_time_instruction_frame.show {
    opacity: 1;
}


.instruction_top {
    display: block;
    padding: var(--padding_value);
    
}
    .instruction_top .topic {
        font-size: 50px;
        font-family: 'RobotoMedium', sans-serif;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    }
.instruction_top .info {
    font-size: 20px;
    font-family: 'RobotoLight', sans-serif;
}

.instruction_supplier {
    padding: 0 var(--padding_value);
}
.instruction_supplier .logo {
    background-image: url(/images/logo_eopus.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 60px;
    width: auto;
    margin-bottom: 10px;
}

.instruction_supplier .contact {
    display: flex;
    font-size: 16px;
    font-family: 'RobotoLight', sans-serif;
    margin-bottom: 10px;
}
.instruction_supplier .contact .telefon { 
    width: 33%; 
}
.instruction_supplier .contact .mail {
    width: 33%;
}
.instruction_supplier .contact .page {
    width: 33%;
}

.instruction_supplier .qr_holder {
    height: 100px;
    width: 100px;
    background-color: white;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr_holder .qr_code {
    background-image: url(/images/qr_code.png);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 1/1;
    width: 90%;
}

.instruction_customer {
    display: block;
    padding: var(--padding_value);
}
.instruction_customer .topic {
    font-size: 16px;
    font-family: 'RobotoMedium', sans-serif;
    margin-bottom: 10px;
}
.instruction_customer .info {
    font-size: 16px;
    font-family: 'RobotoLight', sans-serif;
}