:root{
    --bgClr : #fff;
    --blackOp1 : #000000a2;
    --blackOp2 : #00000081;
    --blackOp3 : #00000042;
    --blackOp4 : #00000018;
    --blackClr3 : #333;
    --blackClr5 : #555;
    --blackClr7 : #777;
    --blackClrA : #aaa;
    --blackClrE : #eee;
    --primaryBlueClr:rgb(47, 115, 184);
    --secendartBlueClr :#1e88e5;
    --greyClr : #bec0b6;
    --greyClr2 : #a2a6a7;
    --whiteClr1 : rgb(248, 248, 248);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    background-color: var(--bgClr);
    box-sizing: border-box;
}
button{
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
/* general styles */
.rtl{
    direction: rtl;
}
.container{
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    max-width: 100vw;
    overflow-x: hidden;
}
.flex{
    display: -webkit-flex;
    display: flex;
}
.flexCol{
    flex-direction: column;
}
.flexCenter{
    justify-content: center;
    align-items: center;
}
.alignCenter{
    align-items: center;
}
.justifyBetween{
    justify-content: space-between;
    align-items: center;
}
.gap5{
    gap: 5px;
}
.gap10{
    gap: 10px;
}
.textIcon{
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: left 5px center;
    padding-left: 35px;
}
.hidden{
    opacity: 0 ;
    pointer-events: none;
}
.faFont{
    font-family: 'Pinar ds4', sans-serif;
    font-weight: 500 !important;
}
.textSize1{
    font-size: 1.1em;
}
.textSize2{
    font-size: .95em;
}
.textClr3{
    color: var(--blackClr3);
}
.textClr5{
    color: var(--blackClr5);
}
.rel{
    position: relative;
}
.iconBtn{
    background-repeat: no-repeat;
    background-position: center;
    height: 35px;
    width: 35px;
}
.hideText{
    font-size: 0;
    color: transparent;
    height: 40px;
    width: 40px;
}
.hoverText{
    position: absolute;
    background-color: var(--bgClr);
    padding: 5px 10px;
    border-radius: 5px;
    left: 50%;
    top: 0;
    transform: translate(-50%,-100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s;
    box-shadow: 0 0 7px var(--blackOp3);
    white-space: nowrap;
}
/* customVideo */
.customVideo{
    display: block;
    border-radius: 9px;
    max-height: 100dvh;
}
.fullCustomVideo{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}
.playBtnDiv{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.minForwardBtn,.minBackwardBtn{
    background-image: url("../images/player/next.svg");
    background-size: 18px;
}
.minBackwardBtn{
    background-image: url("../images/player/backward.svg");
}
/*.minBackwardDiv,.minForwardDiv{
    display: none;
}*/
.playBtn{
    width: 45px;
    height: 45px;
    background-color: var(--blackOp3);
    border-radius: 50%;
    background-position: center;
    background-size: 22px;
    background-repeat: no-repeat;
    transition: opacity .4s;
    display: none;
    background-image: url("../images/player/play.svg");
}
.show{
    display: block !important;
}
.pause{
    background-image: url("../images/player/pause.svg") !important;
}
.opacity1{
    opacity: 1 !important;
}
.playerSection{
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* footerDiv */
.playerFooterDiv{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
    padding: 10px ;
    background-image: linear-gradient(to top , var(--blackOp1) , var(--blackOp3) ,transparent);
    border-radius: 0 0 9px 9px;
}

/* mobileMuteBtn */
.mobileMuteBtn{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
    background-color: var(--blackOp3);
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    background-image: url("/rc/volume3.svg");
    opacity: 0;
    pointer-events: none;
}
.mobileMuteBtn.mute{
    background-image: url("../images/player/volume0.svg");
}
.volume3{
    background-image: url("../images/player/volume3.svg");
}
.volume0{
    background-image: url("../images/player/volume0.svg");
}
.volume1{
    background-image: url("../images/player/volume1.svg");
}
.volume2{
    background-image: url("../images/player/volume2.svg");
}
.active{
    opacity: 1;
    pointer-events: unset;
}
/* footerplay */
.footerPlayBtn{
   background-image: url("../images/player/play.svg");
    background-size: 16px;
}

/* timeDiv */
.timeDiv p{
    color: var(--bgClr);
}
/* progressDiv */
.progressDiv{
    width: 100%;
    height: 4px;
    background-color: var(--greyClr2);
    border-radius: 2px;
    transition: height .4s;
    cursor: pointer;
}
.progressDiv:hover{
    height: 7px;
}
.hoverTime{
    position: absolute;
    background-color: var(--bgClr);
    padding: 3px 10px;
    color: var(--blackClr7);
    border-radius: 4px;
    box-shadow: 0 0 5px var(--blackOp1);
    top: 0;
    left: 0;
    transform: translate(-50%,-35px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s;
    white-space: nowrap;
}
.bufferDiv{
    background-color: var(--greyClr);
    height: 100%;
    position: absolute;
    left: 0;
    pointer-events: none;
}
.progressBarInput{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    height: 100%;
    outline: none;
    border-radius: 7px;
    accent-color: var(--secendartBlueClr);
}

.progressDiv:hover > .hoverTime{
    opacity: 1;
}
/* footerVolumeDiv */
.footerVolumeDiv{
    display: none;
    margin-right: 7px;
}
.footerMuteBtn{
    background-size: 19px;
}
.volumeInput{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    width: 70px;
    outline: none;
    border-radius: 7px;
    accent-color: var(--blackClrE);
    display: none;
}
.footerVolumeDiv:hover > .volumeInput {
    display: flex;
}
/* skip btns */
.skipForwardBtn{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 25%;
    background-color: var(--blackOp3);
    border-radius: 100% 0 0 100%;
    color: var(--bgClr);
    opacity: 0;
}
.skipBackwardBtn{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 25%;
    background-color: var(--blackOp3);
    border-radius:  0 100% 100% 0 ;
    color: var(--bgClr);
    opacity: 0;
}
.skipAnimation{
    animation: blink .6s linear forwards;
}
/* speedDiv*/
.speedBtn{
    background-image: url("../images/player/speed.svg");
    
    background-size: 20px;
}
.speedListCloser,.qualityListCloser{
    display: none;
    pointer-events: none;
    opacity: 0;
}
.speedListCloserActive,.qualityListCloserActive{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--blackOp3);
    height: 100vh;
    width: 100vw;
    z-index: 998;
    pointer-events: unset;
    cursor: pointer;
    opacity: 1;
}
.speedList,.qualityList{
    position: fixed;
    background-color: var(--bgClr);
    padding: 10px 15px 30px;
    border-radius: 7px 7px 0 0;
    width: 100vw;
    left: 0;
    bottom: 0;
    white-space: nowrap;
    display: none;
    z-index: 999;
}
.speedListActive,.qualityListActive{
    display: -webkit-flex;
    display: flex;
}
.speedListTitle{
    padding-right: 35px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20px;
    background-image: url("../images/player/speedBlack.svg");
    margin: 0 5px 10px;
    border-bottom: 1px solid var(--blackOp3);
    padding: 10px 30px 10px 0;
}
.speedLabel,.qualityLabel{
    padding: 7px ;
    cursor: pointer;
}
.speedInput,.qualityInput{
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 50%;
    transform: translate(10px,-50%);
    appearance: none;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    width: 17px;
    height: 17px;
}
.speedInput:checked,.qualityInput:checked{
    background-image: url("../images/player/checked.svg");
}
.playBtnDivTitle{
    top: 50%;
    transform: translate(-70px,-50px);
    opacity: 0;
}
/* qualityDiv */
.qualityBtn{
    background-size: 21px;
    background-image: url("../images/player/setting.svg");
    width: 35px;
    height: 35px;
}
.frameBtn{
    background-size: 18px;
    background-image: url("../images/player/frameIn.svg");
    width: 35px;
    height: 35px;
}
.fullScreenBtn{
    background-size: 18px;
    background-image: url("../images/player/fullScreen.svg");
    width: 35px;
    height: 35px;
}
/* loader */
.loaderDiv{
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.loaderDivActive{
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loadingDiv{
    width: 59px;
    height: 59px;
    border-top: 7px solid var(--blackClrE);
    border-right: 7px solid var(--blackClrE);
    border-left: 7px solid var(--blackClrE);
    border-bottom: 7px solid var(--primaryBlueClr);
    border-radius: 50%;
    animation: rotate 1s linear infinite reverse;
}
@media screen and (min-width : 649px){
    .mobileMuteBtn{
        display: none;
    }
    .playBtn{
        height: 90px;
        width: 90px;
        background-size: 30px;
        animation: fade .4s linear forwards;
        pointer-events: none;
    }
    .loadingDiv{
        width: 140px;
        height: 140px;
        border-top: 16px solid var(--blackClrE);
        border-right: 16px solid var(--blackClrE);
        border-left: 16px solid var(--blackClrE);
        border-bottom: 16px solid var(--primaryBlueClr);
    }
    .footerVolumeDiv{
        display: -webkit-flex;
        display: flex;
    }
    .speedList,.qualityList{
        position: absolute;
        background-color: var(--bgClr);
        box-shadow: 0 0 7px var(--blackOp3);
        padding: 0;
        border-radius: 5px;
        left: 50%;
        top: 0;
        transform: translate(-50% ,-105%);
        white-space: nowrap;
        width: 110px;
        height: fit-content;
    }
    .speedLabel,.qualityLabel{
        padding: 5px 10px;
        margin: 0 ;
        background-color: transparent;
        transition: background-color .6s;
    }
    .speedLabel:hover,.qualityLabel:hover{
        background-color: var(--secendartBlueClr);
        color: var(--bgClr);
    }
    .speedListTitle,.qualityListTitle{
        margin-top: 0;
        background-image: none;
        text-align: center;
        padding: 5px 0;
    }
    .speedInput,.qualityInput{
        transform: translate(7px,-50%);
    }
    .speedListCloser,.qualityListCloser{
        background-color: transparent;
        cursor: default;
    }
    .speedBtn:hover + .hoverText,
    .footerPlayBtn:hover + .hoverText,
    .opacity1:hover + .hoverText,
    .qualityBtn:hover + .hoverText,
    .frameBtn:hover + .hoverText,
    .fullScreenBtn:hover + .hoverText,
    .minForwardBtn:hover + .hoverText,
    .minBackwardBtn:hover + .hoverText
    {
        opacity: 1;
    }
    .playBtnDivFirstHover:hover > .hoverText{
        opacity: 1;
    }
}
@media screen and (min-width:769px) {
    .minBackwardDiv,.minForwardDiv{
        display: -webkit-flex;
        display: flex;
    }
}
@keyframes fade {
    from{
        opacity: 1;
        transform: scale(1);
    }
    to{
        opacity: 0;
        transform: scale(1.4);
    }
}

@keyframes blink {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes rotate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
/* player list */
.pointer{
    cursor: pointer;
}
.playListSection{
    width: 96%;
    margin: 20px auto 0;
}
.playList{
    margin: 20px 5px 0;
    background-color: var(--whiteClr1);
    border-radius: 7px;
    padding: 5px 15px;
    box-shadow: 0 0 10px var(--blackOp3);
}
.playListItem{
    border-bottom: 1px solid var(--blackOp4);
    padding: 7px 0 ;
}
.playListItem:last-child{
    border-bottom: none;
}
.playListInput{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}
.playListInput:checked{
    background-image: url("../images/player/checked.svg");
}
/* waterMarkText */
.waterMarkText{
    position: absolute;
    opacity: 0.4;
    left: 45%;
    top: 45%;
    z-index: 700;
    -webkit-text-stroke: 2px #00000015;
    color: #ffffff44;
    font-size: 2em;
    pointer-events: none;
}
.video-controls{
    overflow: hidden;
}
@media screen and (min-width:769px){
    .waterMarkText{
        font-size: 1em;
    }
}
@media screen and (min-width:968px){
    .waterMarkText{
        font-size: 1em;
    }
}
/* adsVideo */
.adsSection{
    border-radius: 7px;
    overflow: hidden;
    display: none;
}
.adsVideo{
    width: 100%;
}
.skipAdsBtn{
    position: absolute;
    right: 0;
    bottom: 20px;
    padding: 5px 15px;
    background-color: var(--blackOp1);
    color: var(--bgClr);
}


@media screen and (max-width : 400px){
    .hideText{
        width: 30px!important;
        height: 30px!important;
    }
    .textSize2{
        font-size: .85em!important;
    }
}