/***************************************************************************
* Player
****************************************************************************/
.typo_video_player {
    position: fixed;
    top: 0; left: 0;
    z-index: 2000;
    width: 100svw;
    height: 100svh;
    overflow: hidden;
    background-color: #000000;
}
.typo_video_player:after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(#000 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 80%,#000 100%); pointer-events: none;
    z-index: 1; opacity: 0.5;
}

.typo_video_player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-playlist_css*="no_progress_bar"] .typo_video_player:after {
    background: linear-gradient(#000 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 80%,rgba(0,0,0,0) 100%); pointer-events: none;
}


@media screen and (min-width:40em){
    .typo_video_player video {
        object-fit: contain;
    }
}

/***************************************************************************
* Titel
****************************************************************************/
.typo_video_player .title_wrapper {
    position: absolute;
    bottom: 4rem; left: 1rem;
    width: calc(100svw - 5.5rem); z-index: 200;
    font-size: 1rem; overflow: hidden;
    pointer-events: none;
}
.typo_video_player .title_wrapper_inner {
    position: relative; 
    padding: 2rem; border-radius: 1.5rem;
    overflow: hidden; color: #FFFFFF;
    font-size: 1.375rem;
}
.typo_video_player .title_wrapper_inner:after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%;
    height: 100%; background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.typo_video_player .title_wrapper_inner > * {
    position: relative;
    z-index: 20;
    margin-bottom: 0.5rem;
}
.typo_video_player .title_wrapper_inner > *:last-child {
    margin-bottom: 0;
}

.typo_video_player .title_wrapper .description {
    font-size: 1.125em;
}

.typo_video_player .title_wrapper .title {
    font-size: 1.625em;
}
.typo_video_player .title_wrapper .subtitle {
    font-size: 1.0625em;
    position: relative;
    padding-left: 1em;
}
.typo_video_player .title_wrapper .subtitle:before {
    content: ''; position: absolute;
    top: 0.3125em; left: 0; width: 0.375em; height: 0.375em;
    border: 0.125em solid currentColor;
    border-bottom: none; border-left: none;
    transform: rotate(45deg);
}


/***************************************************************************
* Logo
****************************************************************************/
.typo_video_player .logo {
    position: fixed; top: 1rem;
    left: 5rem; height: 3rem; width: calc(100svw - 15rem);
    z-index: 20;
}


/***************************************************************************
* Progress Bar
****************************************************************************/
.progress_bar {
    position: fixed; left: 1.5rem;
    right: 1.5rem; bottom: 1rem;
    display: flex; z-index: 20;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.progress_bar > * {
    flex: 0 0 auto;
}
.progress_bar > .bar_logo {
    color: #FFFFFF;
    text-transform: uppercase;
    margin-left: 1rem;
    font-size: 0.875rem;
}
.progress_bar > .bar {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.progress_bar > .bar > .dot {
    position: relative;
    flex: 1 1 0; height: 0.25rem;
}
.progress_bar > .bar > .dot:after {
    content: '';
    position: absolute; top: 50%;
    left: 0.25rem; right: 0.25rem;
    width: auto; height: 0.0625rem;
    transform: translate(0,-50%);
    background-color: #FFFFFF;
    border-radius: 0.25rem;
}
.progress_bar > .bar > .dot.active:after {
    height: 0.3125rem;
}

[data-playlist_css*="no_progress_bar"] .progress_bar {
    display: none;
}

/***************************************************************************
* Controls
****************************************************************************/
.controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.typo_video_player.start_screen .button  {
    opacity: 0;
    pointer-events: none;
}
.typo_video_player.start_screen  #playPauseBtn {
    pointer-events: all;
    opacity: 1;
}

.typo_video_player .button {
    background-color: transparent;
    position: relative; z-index: 10;
    border-radius: 50%;
    cursor: pointer; overflow: hidden;
    color: #fff; border: none;
    width: 2.5rem; height: 2.5rem;
    padding: 0; margin: 0;
}
.typo_video_player .button:after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; 
    background: none;
    /*background-color: rgba(255,255,255,0.7);
    filter: blur(1.5rem);
    -webkit-filter: blur(1.5rem);*/
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.typo_video_player .button:hover,
.typo_video_player .button:visited {
    background-color: transparent;
}

.typo_video_player .button svg {
    width: 1.5rem; height: 1.5rem; pointer-events: none;
    -webkit-filter: drop-shadow( 0 0 0.25rem rgba(0,0,0,.7));
    filter: drop-shadow( 0 0 0.25rem rgba(0,0,0,.7));
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}
.typo_video_player .button svg path {
    fill: #FFFFFF;
}

.typo_video_player #playPauseBtn {
    position: fixed; z-index: 1;
    top: 0; left: 0; width: 100svw; height: 100svh;
    background-color: transparent; 
    font-size: 0; opacity: 0;
    padding: 0; margin: 0;
    border-radius: 0;
}
.typo_video_player #playPauseBtn:after {
    content: none;
}
.typo_video_player #playPauseBtn .inner {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 5rem; height: 5rem;
    padding: 0; margin: 0; pointer-events: none;
    border-radius: 50%; overflow: hidden;
}
.typo_video_player #playPauseBtn .inner:after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%;
    height: 100%; background-color: rgba(255,255,255,0.7);
    filter: blur(3rem);
    -webkit-filter: blur(3rem);
}
.typo_video_player #playPauseBtn.paused {
    background-color: rgba(0,0,0,0.5);
    opacity: 1;
}
.typo_video_player #playPauseBtn svg {
    width: 3rem; height: 3rem;
    position: absolute; top: 50%;
    left: 50%; transform: translate(-42%,-50%);
}

.typo_video_player #nextBtn {
    position: fixed;
    top: 50svh; right: 1rem;
    transform: translate(0,-50%);
}
.typo_video_player #prevBtn {
    position: fixed;
    top: 50svh; left: 1rem;
    transform: translate(0,-50%);
}
.typo_video_player #muteBtn {
    position: fixed;
    bottom: 4rem; right: 1rem;
}
.typo_video_player #refreshBtn {
    position: fixed;
    bottom: 7rem; right: 1rem;
}
.typo_video_player #backBtn {
    position: fixed;
    top: 1.5rem; left: 1rem;
}


#qr_vimeo_player.pause .conrols .conrol_next,
#qr_vimeo_player.pause .conrols .conrol_prev { 
    display: none;
}

.just_one_video #prevBtn,
.just_one_video #nextBtn {
    display: none;
}

/***************************************************************************
* Circular Timer
****************************************************************************/
.typo_video_player .timer-container {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 100px;
    height: 100px;
    display: none;
    z-index: 20;
}
.typo_video_player.start_screen .timer-container {
    opacity: 0;
    pointer-events: none;
}

.typo_video_player .progress-ring {
    transform: rotate(-90deg);
    overflow: visible;
}

.typo_video_player .progress-ring circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.typo_video_player .progress-ring .bg-circle {
    stroke: rgba(255, 255, 255, 0.2);
}

.typo_video_player .progress-ring .progress-circle {
    stroke: #FFFFFF;
    stroke-dasharray: 314; /* 2 * π * r, for r = 50 */
    stroke-dashoffset: 314; /* Full circle hidden */
    transition: stroke-dashoffset 0.1s linear;
}

/* Timer text in the center */
.typo_video_player .timer-text {
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.75rem;
    color: #fff;
}

[data-playlist_css*="no_time"] .typo_video_player .timer-text {
    display: none;
}

/***************************************************************************
* Change Side
****************************************************************************/
.change_side {
    position: absolute;
    top: 0; left: 0; width: 100svw; height: 100svh;
    color: var(--typo-main-color); z-index: 200;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.change_side > * {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    text-align: center;
    font-size: 2.5em;
    font-weight: 600;
    padding: 2rem;
    color: #FFFFFF;
}