/* dropTools */
.pstmnu{
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;    
    opacity: 0.85;
}
.pstmnu:hover, .pstmnu.openedMenu{
    color: var(--primary);
    opacity: 1;
}
.pstmnu span{
    position: absolute;
    left: 0px;
    top: 16px;

    display: none;
    min-width: 25px;
    min-height: 25px;
    background: var(--lightGray) url(../../../img/loading/blue-dots.gif) center no-repeat;
    background-size: auto 120px;

    z-index: 100;

    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .33);

    font-family: var(--font-family);
    font-size: 13px;

    border-radius: var(--radius);
    z-index: 200;
}
.pstmnu ul{
    display: block;
    width: 250px;
    border-radius: var(--radius);
}
.pstmnu ul::before {
	bottom: 100%;
	left: 5px;
    border: solid transparent;
    border-bottom-color: var(--lightGray);
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 7px;
	margin-right: -7px;
}
.pstmnu li a{
    display: block;
    padding: 10px 15px;
    background-color: var(--lightGray);
    border-bottom: 1px solid rgba(0,0,0, 0.1);
}
.pstmnu li:first-child a{
    border-radius: var(--radius) var(--radius) 0px 0px;
}
.pstmnu li:last-child a{
    border-bottom: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}
.pstmnu li:hover a{
    background-color: var(--gray);
}
.pstmnu li:hover a i{
    color: var(--primary) !important;
}

.pstmnu ul i{
    font-size: 16px;
    width: 30px;
    color: unset !important;
}


/** Picture **/
.post picture, .post .picture{
    display: block;
    max-width: 100%;
    margin: 0 auto 15px;
}
.fullPost picture, .fullPost .picture{
    max-width: 95%;
}
.post .linkPreview picture, .post .linkPreview .picture {
    max-width: 100%;
}

/** LinkPreview **/
.linkPreview{    
    display: block;
    margin-bottom: 35px;
    color: rgba(255,255,255, .9);
    background-color: var(--primary);
    padding: 10px;    
    border-radius: var(--radius2);
    text-decoration: none !important;
    overflow: hidden;
}
.linkPreview:hover{
    color: #fff;
    border-color: var(--primary) !important;
}

@media all and (max-width: 600px) {
    .linkPreview .s{
        display: none;
    }
}

@media all and (min-width: 500px) {
    .linkPreview picture, .linkPreview .picture, .linkPreview img{
        float: right;
        width: 150px;
        height: auto;
        max-height: 150px;
        margin: 0;
        border-radius: var(--radius2);
        transform: scale(1);
        transition: all 225ms ease-in-out;
    }
    .linkPreview p{
        float: left;
        width: calc(100% - 160px);
        padding-top: 10px;
    }
}
@media all and (min-width: 600px) {
    .linkPreview picture, .linkPreview .picture, .linkPreview img{
        width: 200px;
    }
    .linkPreview p{
        width: calc(100% - 210px);
    }
}


.linkPreview::after{
    display: block;
    clear: both;
    content: " ";
}

/*.post .linkPreview picture, .post .linkPreview .picture, .post .linkPreview img,
.post .linkPreview p{
    float: none;
    width: 100%;
}*/
.post .linkPreview:hover{
    color: #fff;
}


/* video link */
.linkPreview.video{
    position: relative;
    padding: 0;
    background: none;
}

.linkPreview.video picture, 
.linkPreview.video .picture, 
.linkPreview.video img{
    float: none;
    width: auto;
    display: block;
    max-width: 100%;
    max-height: unset;
    margin: auto;
}
.linkPreview.video:not(.yt){
    min-height: 300px;
    background: none;
}
.linkPreview.video:not(.yt) :is(picture, .picture, img){
    position: relative;
    z-index: 1;
}
.linkPreview.video:not(.yt)::before{
    content: "";
    width: 100px;
    height: 100px;
    display: inline-block;
    background: url(../img/play-yt.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: calc(50% - 50px);
    right: calc(50% - 50px);
    z-index: 2;
}
.linkPreview.video:not(.yt) video{
    display: block;
    margin: 0;
}
.plyr--video{
    z-index: 100 !important;
}


.linkPreview.video iframe{
    display: block; /* to remove space under it (like magrgin but not) */
}

.linkPreview.video p{
    display: none !important;
    float: none;
    width: 100%;
    padding: 0;
}
.linkPreview.video .t{
    padding: 10px;
    margin: 0;
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}
.linkPreview.video .s, .linkPreview.video .d{
    display: none;
}
.linkPreview .play{
    position: absolute;
    top: 50%;
    margin-top: -40px;
    right: calc(50% - 40px);

    width: 80px;
    height: 80px;
    background: url(../img/play.png) center no-repeat;
    background-size: 100% 100%;
    opacity: 0.85;

    z-index: 100;
}
.linkPreview:hover .play{
    opacity: 1;
}
.linkPreview.yt .play{
    background-image: url(../img/play-yt.png);
}

.linkPreview .play.loading{
    background-image: url(../../../img/loading/blue-dots.gif);
    background-size: auto 100%;
    opacity: 1;
    background-color: rgba(0,0,0, .5);
    border-radius: 50px;
}

/* link title, desc, domain */
.linkPreview p{
    display: block;
}
.linkPreview p span{
    display: block;
}
.linkPreview .t{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.linkPreview .s{
    margin-bottom: 5px;
}
.linkPreview .d{    
    display: block;

    font-family: Arial;
    font-size: 13px;
    color: rgba(0,0,0,.5);
    text-align: left; /*keep*/
    direction: ltr; /*keep*/
}


/** Album **/
.albumPreview{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    align-items:flex-start;
    align-content:flex-start;

    margin: 25px 0;
}
.albumPreview > div{
    display: inline-block;

    /* width: 33.33%;
    width: -moz-calc(33.33% - 3px);
    width: -webkit-calc(33.33% - 3px);
    width: calc(33.33% - 3px); */
    width: 130px;

    /* height: 220px; */
    height: 80px;
    aspect-ratio: 16 / 9;

    box-shadow: inset 0 0 5px rgba(0,0,0, .25);

    background: url(../img/blankImg.png) center no-repeat;
    background-size: 100% 100%;

    margin-bottom: 5px;
    margin-left: 5px;
    transition: all .5s;
    cursor: pointer;
}
/* .comment .albumPreview > div{
    height: 70px;
    aspect-ratio: 16/9;
} */
.albumPreview > div:hover{
    background-size: 103% 103%;
}

.albumPreview img{
    opacity: 0;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 100%;
}

/* span (+count) */
.albumPreview span{
    display: block;
    width: 100%;
    height: 100%;

    text-align: center;
    padding-top: 85px;

    color: #fff;
    font-size: 28px;
    font-weight: bold;
    background-color: rgba(0,0,0, .5);
}

/* desc */
/* i2 
.albumPreview.desc.i2 > div,
.albumPreview[data-images="2"] > div{
    width: 49.5%;
    width: -moz-calc(50% - 3px);
    width: -webkit-calc(50% - 3px);
    width: calc(50% - 3px);
}

/* i3 */

/* i4 
.albumPreview.desc.i4 > div,
.albumPreview[data-images="4"] > div{
    
}
.albumPreview.desc.i4 > div:first-child,
.albumPreview[data-images="4"] > div:first-child{
    width: 100%;
}

@media only screen and (max-width: 900px) {
    .albumPreview > div{
        height: 100px;        
    }
    .albumPreview span {
        padding-top: 45px;
    }
}
@media only screen and (max-width: 600px) {
    .albumPreview > div{
        width: 50%;
        width: -moz-calc(50% - 3px);
        width: -webkit-calc(50% - 3px);
        width: calc(50% - 3px);

        height: 150px;       
    }

    .albumPreview.desc.i3 > div:first-child,
    .albumPreview[data-images="3"] > div:first-child{
        width: 100%;
    }

    .albumPreview.desc.i4 > div:last-child,
    .albumPreview[data-images="4"] > div:last-child{
        width: 100%;
    }

    .albumPreview span{
        padding-top: 65px;
    }
}
@media only screen and (max-width: 400px) {
    .albumPreview > div{
        width: 100%;     
    }
}*/


/** Downloads */
.downloads{
    direction: ltr; /*keep*/
    text-align: left; /*keep*/
    padding-top: 15px;
}
.post .downloads{
    position: relative;
    float: right;
    padding: 10px;
    padding-top: 20px;
    width: 100%;
    max-width: 400px;
    background-color: #edf0f3;
    margin-top: 50px;
    border-radius: var(--radius2);
}
.post .downloads::after{
    display: block;
    content: " ";
    clear: both;
}
.post .downloads::before{
    content: "الملفات المساعدة";
    left: auto;
    right: 25px;    
}
.downloads > a{
    display: block;
    direction: ltr; /*keep*/    
    max-width: 400px;
    padding-top: 6px;
    padding-left: 32px; /*keep*/
    border-radius: var(--radius2);
    background-color: #fff;
    background-position: center left 10px; /*keep*/
    background-size: 16px 16px;
    background-repeat: no-repeat;
    margin-top: 3px;
}
.downloads > a:hover{
    color: var(--primary);
}
/* .post .downloads > a{
    color: var(--light);
}
.post .downloads > a:hover{
    color: #fff;
} */
.downloads a b:first-child{
    display: inline-block;
    width: calc(100% - 75px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.downloads a b:last-child{
    float: right; /*keep*/
}

.downloads [data-ext="rar"]{
    background-image: url(../../../img/fileExt/rar.svg);
}
.downloads [data-ext="pdf"]{
    background-image: url(../../../img/fileExt/pdf.svg);
}
.downloads [data-ext="zip"]{
    background-image: url(../../../img/fileExt/zip.svg);
}


.courseInfo li{
    display: block;
    padding: 10px 0;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0, .06);
}
.courseInfo::after{
    display: block;
    content: "";
    clear: both;
}
.courseInfo li:last-child{
    border-bottom: 0;
}
.courseInfo span{
    float: var(--align2);
    font-weight: normal;
    direction: ltr !important;
}
.courseInfo span:not(.rating) > i{
    width: 20px;
    text-align: left;
    color: var(--secondary);
    /* text-shadow: none; */
    font-size: 1.1rem;
}
.coursePrice{
    font-size: var(--h3);
    position: relative;
    top: 10px;
}

.lecturesTable .section{
    margin: 0;
}
.lecThumb{
    position: relative;
    min-height: 60px;
    display: block;
    padding-inline-start: 100px;
    padding-inline-end: 40px;
    font-size: 1.35rem;
    line-height: 2;
    margin-bottom: 10px;
}
.lecThumb:last-child{
    margin-bottom: 0;
}

.lectures .lecThumb{
    font-size: 1.15rem;
    line-height: 1.5;
}

.lecThumb img, .lecThumb .locked{
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    height: 60px;
    background-color: rgba(0,0,0, .65);
    border-radius: var(--radius);
}
.lecThumb .locked{
    background: rgba(0,0,0, .65) url(../../../img/lock.svg) center no-repeat;
    background-size: auto 50%;
    z-index: 2;
}
.lecThumb span{
    /*position: absolute;
    height: 20px;
    top: 57px;
    right: 74px;*/
    width: 46px;
    text-align: center;
    padding: 0 5px;
    font-size: 11px;
    color: #fff;
    background-color: rgba(0,0,0, .65);
    line-height: 1.5;
    display: block;
    border-radius: 50px;
}
/* #mCSB_3_container .lecThumb span{
    left: 165px;
} */
.lecThumb.active {
    background-color: var(--third);
    color: #fff;
    border-radius: var(--radius2);
    margin-left: 0;
}

.lecThumb i{
    position: absolute;
    left: 10px;
    top: 13px;
    width: 26px;
    height: 26px;
    background: url(../img/completion-n.svg) center no-repeat;
    background-size: 100% 100%;
    margin-top: 8px;
}
.lecThumb i.watched{
    background-image: url(../img/completion-y.svg);
}

.courseHiddenInfo{
    display: none;
    padding-top: 25px;
}
.enrollInfo{
    border: 3px solid var(--primary)
}

@media all and (max-width: 900px) {
    .lecture{
        width: calc(100% - 275px);
    }
    .lectures{
        width: 260px;
    }
    .lecThumb{
        font-size: 14px;
    }
    .lecThumb span{
        left: 140px;
    }
}
@media all and (max-width: 760px) {
    .lecture{
        width: 100%;
    }
    .lectures{
        width: 100%;
    }
    
    .courseHiddenInfo{
        display: block;
    }

    .lectures .instructorInfo,
    .lectures .enrollInfo{
        display: none;
    }
}
@media all and (max-width: 580px) {
    .instructorInfo,
    .enrollInfo{
        width: 100%;
    }
}

/** Rating **/
.postRating{
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 15px;
}
.postRating::before, .postRating::after{
    display: inline-block;
    content: "";
    height: 20px;
    background: url(../img/star.svg);
    background-size: auto 100%;    
    vertical-align: baseline;
}
.postRating::after{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.postRating.v1::before{ width: 20px; } .postRating.v1::after{ width: 80px; }
.postRating.v2::before{ width: 40px; } .postRating.v2::after{ width: 60px; }
.postRating.v3::before{ width: 60px; } .postRating.v3::after{ width: 40px; }
.postRating.v4::before{ width: 80px; } .postRating.v4::after{ width: 20px; }
.postRating.v5::before{ width: 100px; } .postRating.v5::after{ width: 0; }

.comment .postRating{
    margin-right: 15px;
}

.btn.telegram{
    background: #249dd8;
    border-color: #249dd8;
    margin-inline-end: 10px;
}
.btn-show-quizzes{
    height: auto !important;
}