.videoplayer_section{

    display: block;
    width: 100%;
    height: auto;
    margin: 80px 0px;
    padding: 0px;
    position: relative;

}
.videoplayer_section__container{

    display: block;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    position: relative;

}
.videoplayer_section__header{

    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0px;
    margin: 0px;
    position: relative;

}
.videoplayer_section__btn_close{

    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    height: 100%;
    padding: 0px 20px;
    cursor: pointer;
    background-color: #ffffff;
    border: 0px;
    outline: none;

}
.videoplayer_section__btn_close__svg{

    display: block;
    width: 30px;
    height: auto;
    fill: var(--text-color);

}
.videoplayer_section__content{

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    position: relative;

}
.videoplayer_description{

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;

}
.videoplayer_description__title{

    display: block;
    width: 100%;
    height: auto;
    font-size: 32px;
    color: var(--black-color);

}
.videoplayer_popup .videoplayer_description__title{ font-size: 26px; }
.videoplayer_description__paragraph{

    display: block;
    width: 100%;
    height: auto;
    color: var(--gray-color);
    line-height: 1.6;

}
.videoplayer_description__btn_close{

    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: auto;
    min-width: fit-content;
    height: auto;
    background-color: #ffffff;
    border: 1px solid var(--blue-color);
    padding: 13px 18px;
    margin: 0px;
    cursor: pointer;

}
.videoplayer_description__btn_close__span{

    display: block;
    color: var(--blue-color);

}
.videoplayer_description__btn_close__svg{

    display: block;
    width: auto;
    height: 14px;
    margin-left: 10px;
    fill: var(--blue-color);

}
.videoplayer_popup_open{

    cursor: pointer;

}


/*------------- VIDEOPLAYER -------------*/
.videoplayer{

    display: none;
    position: relative;
    width: 100%;
    height: 0px;
    margin: 0px;
    padding: 0px;
    padding-top: 56.25%;
    overflow: hidden;
    border: 0px;
    background-color: #ffffff;
    
}
.videoplayer.active{

    display: block;

}
.videoplayer.loading{

    box-shadow: inset 0 0 0 1px #e0e0e0;
    background-color: #ffffff;

}
.videoplayer .media_loader{

    top: calc(50% - 20px - ((var(--videoplayer-btn-height) + var(--videoplayer-timeline-height)) / 2));
    z-index: 2;
    opacity: 0;

}
.videoplayer .media_loader.active{

    opacity: 1;

}
.videoplayer .media_loader.loading{

    opacity: 1;
    top: calc(50% - 20px);
    z-index: 999999;

}
.videoplayer__poster{

    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    object-fit: cover;
    object-position: center;
    z-index: 2;

}
.videoplayer__poster.active{

    display: block;

}
.videoplayer__poster.loading{

    display: none;

}
.videoplayer__video{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    border: var(--border-style);

}
.videoplayer__overlay{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 3;
    
}
.videoplayer__shortcut{

    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    flex: 1;
    cursor: pointer;
    background-color: transparent;
    border: 0px;
    outline: none;
    z-index: 3;
    opacity: 1;

}
.videoplayer__shortcut.loading{

    display: none;

}
.videoplayer__shortcut__play{

    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-height: calc(var(--videoplayer-btn-height) * 2);
    height: 30%;
    aspect-ratio: 1;
    background-color: var(--black-color);
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;

}
.videoplayer__shortcut__play.active{

    margin-bottom: calc(var(--videoplayer-btn-height) + var(--videoplayer-timeline-height));

}
.videoplayer_shortcut_svg{

    display: none;
    width: auto;
    height: 40%;
    min-height: 40%;
    max-height: 40%;
    fill: #ffffff;
    padding: 0px;
    margin: 0px;

}
.videoplayer_shortcut_svg.active{

    display: block;

}
.videoplayer__controls{

    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    /*overflow: hidden; show quality menu*/
    background-color: var(--black-color);
    z-index: 4;
    opacity: 1;

}
.videoplayer__controls__timeline{

    display: block;
    position: relative;
    width: 100%;
    height: var(--videoplayer-timeline-height);
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    background-color: var(--videoplayer-bar-track);

}
.videoplayer__controls__timeline__range{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    opacity: 1;
    cursor: pointer;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-color: transparent;

}
.videoplayer__controls__timeline__range::-webkit-slider-runnable-track{

    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0px;
}
.videoplayer__controls__timeline__range::-webkit-slider-thumb{
    
    -webkit-appearance: none;
    appearance: none;
    width: 0px;
    height: 0px;
    background: transparent;
    background-color: transparent;
    border-radius: 0%;
    cursor: pointer;

}
.videoplayer__controls__timeline__track{

    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--videoplayer-bar-track);
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
    z-index: 1;

}
.videoplayer__controls__timeline__track__value{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: var(--blue-color);;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
    z-index: 3;

}
.videoplayer__controls__timeline__track__buffer{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: var(--videoplayer-bar-buffer);
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
    z-index: 2;

}
.videoplayer__controls__container{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--videoplayer-btn-height);
    padding: 0px;
    margin: 0px;

}
.videoplayer_controls_label{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    border: 0px;

}
.videoplayer_controls_checkbox{

    display: none;
    width: 0px;
    height: 0px;
    opacity: 0;

}
.videoplayer_controls_svg{

    display: none;
    width: auto;
    height: 70%;
    min-height: 70%;
    max-height: 70%;
    fill: #ffffff;
    padding: 0px;
    margin: 0px;

}
.videoplayer_controls_svg.active{

    display: block;

}
.videoplayer__controls__soundBar{

    display: flex;
    align-items: center;
    position: relative;
    width: 60px;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

}
.videoplayer__controls__soundBar__range{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-color: transparent;

}
.videoplayer__controls__soundBar__range::-webkit-slider-runnable-track{

    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0px;
}
.videoplayer__controls__soundBar__range::-webkit-slider-thumb{
    
    -webkit-appearance: none;
    appearance: none;
    width: 0px;
    height: 0px;
    background: transparent;
    background-color: transparent;
    border-radius: 0%;
    cursor: pointer;

}
.videoplayer__controls__soundBar__track{

    display: block;
    position: relative;
    width: 100%;
    height: calc(var(--videoplayer-timeline-height) / 2);
    background-color: var(--videoplayer-bar-track);
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
    z-index: 1;

}
.videoplayer__controls__soundBar__track__value{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--blue-color);
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;

}
.videoplayer__controls__time_display{

    display: block;
    width: auto;
    height: auto;
    font-size: 14px;
    color: #ffffff;
    padding: 0px;
    margin: 0px;
    margin-left: 10px;

}
.videoplayer__controls__space{

    display: block;
    width: auto;
    height: auto;
    padding: 0px;
    margin: 0px;
    flex: 1;

}
.videoplayer__controls__quality{

    display: block;
    position: relative;
    width: auto;
    height: 100%;
    padding: 0px;
    margin: 0px;

}
.videoplayer__controls__quality__label{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    overflow: hidden;
    padding: 0px 10px;
    margin: 0px;
    cursor: pointer;
    border: 0px;

}
.videoplayer__controls__quality__label__checkbox{

    display: none;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
    opacity: 0;

}
.videoplayer__controls__quality__label__span{

    display: block;
    width: auto;
    height: auto;
    font-size: 14px;
    color: #ffffff;
    padding: 0px;
    margin: 0px;

}
.videoplayer__controls__quality__panel{

    display: none;
    position: absolute;
    bottom: calc(var(--videoplayer-btn-height) + var(--videoplayer-timeline-height));
    right: 0px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: auto;
    height: auto;
    opacity: 1;
    z-index: 4;
}
.videoplayer__controls__quality__panel.active{

    display: flex;

}
.videoplayer__controls__quality__panel__button{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--videoplayer-btn-height);
    padding: 0px 10px;
    margin: 0px;
    cursor: pointer;
    border: 0px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    background-color: rgba(22, 22, 22, 0.75);

}
.videoplayer__controls__quality__panel__button.active{

    color: rgba(255, 255, 255, 1);
    background-color: rgba(22, 22, 22, 1);

}
.fullscreen{

    background-color: #000000;
    padding-top: 0px;

}
.fullscreen .videoplayer__video{ 
    
    border: 0px;

}
@media screen and (max-width: 565px){

    .videoplayer__controls__volume, .videoplayer__controls__soundBar{ display: none; }

}
/*------------- VIDEOPLAYER -------------*/



/*------------- POPUP -------------*/
.videoplayer_popup{
    
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    z-index: 9999;
    overflow: auto;

}
.videoplayer_popup.active{

    display: block;

}
#root_body:has(.videoplayer_popup.active){ overflow: hidden; }
.videoplayer_popup .videoplayer_section__container{
    
    max-width: 1280px;
    height: auto;
    margin: 0px auto;
    overflow: hidden;
    background-color: #ffffff;

}
.videoplayer_popup .videoplayer_section__header{

    display: flex;

}
.videoplayer_popup .videoplayer_section__content{

    flex-direction: column-reverse;
    padding: 20px;
    padding-top: 0px;

}
.videoplayer_popup .videoplayer_description__btn_close{

    display: flex;

}
/*------------- POPUP -------------*/



/*------------- IFRAME YOUTUBE -------------*/
.iframe_yt_container{

    display: none;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 0px;
    margin: 0px;
    padding: 0px;
    padding-top: 56.25%;
    overflow: hidden;
    border: 0px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px #e0e0e0;

}
.iframe_yt_container.active{

    display: block;

}
.iframe_yt_videoplayer{

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    border: 0px;
    background-color: transparent;
    z-index: 1;

}
/*------------- IFRAME YOUTUBE -------------*/