/* Lesson Step One Start*/

.lession-detail-wrapper {
    padding-right: 30px;
}

.lession-detail-wrapper img {
    border-radius: 8px;
    object-fit: contain;
}

.lession-detail-wrapper.lesson-complete-certificate {
    padding-left: 12px;
}

.lession-subtitle-wrapper {
    padding-bottom: 6px;
}

.lession-title-wrapper h4 {
    font-size: 26px;
    line-height: 35px;
    font-weight: 600;
}

.lession-subtitle-wrapper h3{
    line-height: 34px;
    font-size: 20px;
    color: #434343;
    font-weight: 400;
}

.lesson-information {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 10px;
}

.lesson-information p {
    max-width: 744px;
    font-size: 16px;
    line-height: 30px;
    color: #434343;
}

.lesson-content-sidebar {
    border-left: 1px solid #E6E6E6;
}

.lesson-content-sidebar h3 {
    font-size: 20px;
    line-height: 27px;

}

.lesson-content {
    margin-bottom: 16px;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid #F4F4F4;
}

.lesson-section .lesson-topic {
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    padding: 12px 21px;
    gap: 13px;
    margin-bottom: 10px;
    border-left: 1px solid #E6E6E6;
    margin-left: -1px;
}

.lesson-topic.active-topic {
    /* border-left: 1px solid #578FBF;
    background-color: #F4FAFF;
    color: #FE5877; */
}

.lesson-section a.active i,
.lesson-section a i.hvr {
    display: none;
} 

.lesson-section a.active i.hvr {
    display: block;
}

.lesson-start-end {
    border-top: 1px solid #E6E6E6;
    width: 100%;
    vertical-align: middle;
    display: inline-block;
    padding: 30px 0 30px 0;
}

.start-lesson {
    float: right;
}

/* Lesson Step Three Start*/

.video-wrapper {
    position: relative;
}

#player-overlay  video {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

 #player-overlay {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    /* width: 98%; */
    overflow: hidden;
    border-radius: 8px;
} 

.pdf-lession-wrapper {
    gap: 50px;
    margin-bottom: -6px;
}

.pdf-viewer-link {
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
    color: #FE5877;
    position: relative;
}

.pdf-viewer-link:after {
    content: "";
    width: 100%;
    position: absolute;
    bottom: 3px;
    background: #FE5877;
    height: 1px;
    display: block;
}

.outerborder {
    border: 2px solid #578FBF;
    padding: 30px;
    max-width: 804px;
    margin-right: auto;
    margin-left: 0;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 20px;
}

.outerborder.quiz-page {
    margin-left: 0;
    margin-right: auto;
}

.completed-certificate {
    max-width: 744px;
    margin: 0 auto;
    border: 2px solid #CECCCC;
    padding: 30px;
    border-radius: 20px;
}

.completed-certificate img {
    max-width: 184px;
}

.completed-certificate h3 {
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 30px;
}

.completed-certificate h4 {
    padding: 8px 28px;
    background: #f4f4f4;
    border-radius: 10px;
}

.completed-certificate p {
    font-size: 17px;
    line-height: 34px;
    font-weight: 400;
    max-width: 616px;
    margin: 0 auto;
    text-align: centers;
}

.bottom-separator {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* custom audio 29/3/24 */


/*  */



/* Icons */
.icon-pdf-large::before { background: url(../images/icon_pdf_large.svg) no-repeat; width: 86px; height: 86px; }



/* *********************** */
/* Responsive Media Queris */
/* *********************** */

@media only screen and (max-width: 1400px) {
    .outerborder {
        max-width: 700px;
        margin-right: auto;
        margin-left: 0;
    }
}

@media only screen and (max-width: 991px) {

    /* Lesson Step One Start*/

    .lesson-content {
        margin-bottom: 0px;
        padding-left: 30px;
        border-bottom: 1px solid #F4F4F4;
    }

    .lesson-section .lesson-topic {
        padding-left: 30px;
        padding-right: 30px;
    }
    .lesson-content {
        position: relative;
    }
    
    /* .lesson-content:after {
        content: "";
        right: 16px;
        position: absolute;
        width: 24px;
        height: 24px;
        background-image: url(../images/Icon_down.svg);
    } */
    
    .lesson-content.active::after {
        background-image: url(../images/Icon_up.svg);
    }

    .lesson-start-end {
        padding: 20px 0 20px 0;
    }

    /* Lesson Step Two Start*/
}



@media only screen and (min-width: 1899px){

    /* Lesson Step One Start*/

    .lession-detail-wrapper img {
        width: 100%;
    }

    .lesson-information p {
        max-width: 100%;
    }

    /* Lesson Step Two Start */
}


@media only screen and (min-width: 1899px){
    .lession-title-wrapper h4 {
        font-size: 26px;
        line-height: 35px;
    }
}

@media only screen and (max-width: 1024px){
    .lession-detail-wrapper {
        padding-right: 0;
    }

    .lession-detail-wrapper.lesson-complete-certificate {
        padding-right: 12px;
    }
}

@media only screen and (max-width: 991px){
    .lesson-information {
        padding-right: 0;
    }
}



@media only screen and (max-width: 767px){
    .lession-title-wrapper h4 {
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 640px){
    .lession-title-wrapper h4 {
        font-size: 22px;
    }

    .lesson-section .lesson-topic {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 480px){
    .lession-title-wrapper h4 {
        font-size: 20px;
    }
}