button.btn-play svg {
    fill: #ffffff;
    width: 50px;
    height: 50px;
}
.branding-logo {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12%;
    height: auto;
    /* opacity: 0.7; */
    z-index: 1;
}
#skip-ad-button{bottom:60px}
#register-button{bottom:105px}
@media screen and (min-width: 992px){
    #skip-ad-button{bottom:100px}
    #register-button{bottom:145px}
}

#main-video-player #skip-ad-button[disabled]{background:#6c757d;color:#fff;opacity:1}
#main-video-player #player-container{background-color:#000}
#main-video-player.loading #player-container{display:none}
#main-video-player.loading #loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: #000;
    opacity: 1;
}
#main-video-player.loading #loader-wrapper::before {
    display: block;
    padding-top: 56.25%;
    content: "";
}
#main-video-player.loaded #loader-wrapper{display: none;}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
}
.loader::after{
    border-color: #FF3D00;
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 6px;
}

@keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* Buffering overlay */
.buffering-overlay {
    display: none; /* Hidden by default */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 100; /* Ensure it overlays above the player */
    justify-content: center;
    align-items: center;
}

/* Spinner for the overlay */
.buffering-overlay .spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-top: 5px solid #ff3d00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.plyr--video{height: 100% !important;}