:root {
    --crt-bg: #EFF6FF;
}

.crt-bg {
    background: var(--crt-bg);
}

.text-link {
    color: var(--bs-text-primary) !important;
    cursor: pointer;
}

.dashed-border-bottom {
    border-bottom: var(--bs-text-primary) thin dashed;
}

.dashed-border-bottom-gray {
    border-bottom: var(--bs-text-gray-500) thin dashed;
}

.crt-bg-img {
    background: url(../images/bg1.png) no-repeat bottom right var(--crt-bg);
}

.crt-card {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(30, 10, 58, .1);
}


/*=== Login Page CSS ===*/

.unlock-your-potential {
    margin-top: 30%;
}

    .unlock-your-potential ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .unlock-your-potential ul li {
            position: relative;
            padding-left: 50px;
            display: inline-flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 2.3rem;
        }

            .unlock-your-potential ul li h4 {
                font-size: 1.5rem;
                font-weight: 500;
            }

            .unlock-your-potential ul li p {
                font-size: 1.38rem;
                color: #4B5675;
                margin-bottom: 0;
            }


            .unlock-your-potential ul li img {
                position: absolute;
                left: 0;
                top: 10px;
            }

/*======*/

.inner-header {
    position: absolute;
    top: 0;
    width: 100%;
}

.inner-data {
    width: 100%;
    display: flex;
    align-items: center;
    height: 100vh;
    overflow-y: auto;
}

.fw-600 {
    font-weight: 600 !important;
}

.stepper.stepper-pills .stepper-item.completed .stepper-icon {
    transition: color 0.2s ease;
    background-color: var(--bs-stepper-icon-bg-color-current);
    border: var(--bs-stepper-icon-border-current);
}

.stepper.stepper-pills .stepper-item.pending .stepper-icon {
    transition: color 0.2s ease;
    background-color: var(--bs-text-gray-300);
    border: var(--bs-text-gray-300);
}

.stepper.stepper-pills .stepper-item .stepper-icon {
    transition: color 0.2s ease;
    background-color: var(--bs-text-gray-300);
    border: var(--bs-text-gray-300);
}

.input-radio .form-check-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.975rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-gray-700);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-300);
    appearance: none;
    border-radius: 0.475rem;
    box-shadow: false;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-radio {
    position: relative;
    overflow: hidden;
}

    .input-radio .form-check-input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 44px;
        cursor: pointer;
        border-radius: 0;
    }

        .input-radio .form-check-input:checked {
            opacity: 0;
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

            .input-radio .form-check-input:checked + .form-check-label {
                border: 1px solid var(--bs-primary);
                background-color: #EFF6FF;
            }

        .input-radio .form-check-input:hover + .form-check-label {
            border: 1px solid var(--bs-primary);
            cursor: pointer;
            background-color: #EFF6FF;
        }

        .input-radio .form-check-input:checked[type="radio"] + .form-check-label {
            content: "";
            border-color: var(--bs-primary);
            padding-right: calc(1.5em + 1.55rem);
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJ8SURBVHgBvZU/bNNAFMa/O8cMIKIsSEUlksXcoWszBSY2hogyUv50JpBuKCWlMFaIGUHLiFQJxIJgaSdgI0v3SA2IMQQxJfbxPSfnuI7jukjwpLPPvrvf++7duzvgH5rKapzbNFVH4SqrVRaPpcTSY2lL8Yd49qOlOieCz7WM5xSwHUINukbhvVY4sO0mQIWvCkdfYNnxB9hIczIFn39iFgncY/WX0qg7Bp8xw3xgmY7WoDGkg0tJBypF8Vf+/chB665GH8eYb1AOgJdK4UzSgbaVUsuUHBd7BvhSAOp5wGJck0POtGYMflPYm3hbBD/t4i47OY6DdZzQRAhBt+jg4vnHpj4FZ3xWOLUtHaCbkykhqQSaizqeARnPCbxxBC4pR9UeF/BTXvAwQIMh3PV9PIoEOuH4xXOSFBbOR5UdD+KqBwarUmaBOdUGq4fxMEpmMTT9Uz5CeEEeBHuaP4/kjsESw3SFoGJBYysNrB3UpsLI8JjRhpvEnBvlZ7wPN81D2UACCoF5wCF7wrFhkS1djncKF0ihFjkw2D0OHIo0WKDQ3kS5Ds+K8oAhmOkA4ZbPBMuGYv8iY9+O4O4AbyXwVHY9OcA6MJJmGeCRbCxRdafbVPsRvNNSPcbqHcudtDHiwOUaZIFFNQWssc8r+y9aUOZrk6+zTL8N/IUx1g3DA2zoY2cKLgcOO9yn+lWbHXltnEXLVH0z9eAS+95U20qUj7Ljqd3as0xCMc6i2wK2sbaWelnMb5rLnOILOvL4+Zoz+gDJFIV+YFDkAi/w+xpGGbRPyr1vD1Q7ycm85nhxrDAD5CCqJprCq05mmVSbGx43jxeJrXcy7s3/Zn8ACZsNhsZlg5cAAAAASUVORK5CYII=");
            background-repeat: no-repeat;
            background-position: right calc(.375em + .3875rem) center;
            background-size: calc(.75em + .775rem) calc(.75em + .775rem);
        }

.crt-card-1 {
    border-radius: 8px;
    min-height: 150px;
    padding: 20px;
    background-color: var(--bs-success-light) !important;
    box-shadow: 0 8px 24px rgba(30, 10, 58, .1);
}

.crt-card-2 {
    border-radius: 8px;
    min-height: 150px;
    padding: 20px;
    background-color: var(--bs-danger-light) !important;
    box-shadow: 0 8px 24px rgba(30, 10, 58, .1);
}
.crt-card-3 {
    border-radius: 8px;
    min-height: 150px;
    padding: 20px;
    background-color: var(--bs-info-light) !important;
    box-shadow: 0 8px 24px rgba(30, 10, 58, .1);
}

.explore-course-h {
    display: block;
    padding: 80px 0;
    text-align: center;
}

    .explore-course-h ul {
        padding: 0;
        text-align: center;
        margin: 0;
        display: flex;
        gap: 16px;
    }

        .explore-course-h ul li {
            display: inline-flex;
            width: 20%;
            border-radius: 8px;
            padding: 10px;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
            box-shadow: 0 8px 24px rgba(30, 10, 58, .1);
        }

            .explore-course-h ul li:hover {
                box-shadow: 0 8px 24px rgba(30, 10, 58, .2);
            }

            .explore-course-h ul li img {
                margin: 20px auto;
            }

            .explore-course-h ul li a {
                display: block;
                height: 100%;
            }

.assessment-card {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: var(--bs-gray-200) thin solid;
    background: url(../images/bg-02.png) no-repeat top right #f7f8fd;
    padding: 24px;
}

    .assessment-card:hover {
        box-shadow: 0 8px 24px rgba(30, 10, 58, .1);
    }

.assessment-d {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--bs-gray-600);
    margin-top: 30px;
}

    .assessment-d i {
        font-size: 14px;
        margin-right: 5px;
    }

    .assessment-d span {
        display: flex;
        align-items: center;
    }

.rot-card {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: var(--bs-gray-200) thin solid;
    padding: 30px;
    display: flex;
    justify-content: space-between;
}

.crt-breadcrum {
    width: 100%;
    display: block;
}

    .crt-breadcrum ul {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }

        .crt-breadcrum ul li {
            display: inline-block;
        }

            .crt-breadcrum ul li a {
                position: relative;
                padding-right: 20px;
                display: flex;
                align-items: center;
            }

                .crt-breadcrum ul li a:after {
                    content: "";
                    background: url(../images/right-arrow.png) no-repeat;
                    width: 16px;
                    display: block;
                    height: 16px;
                    position: absolute;
                    right: 0;
                    top: 3px;
                    background-size: 80%;
                }

.search-box {
    position: relative;
    width: 100%;
    max-width: 500px;
}

    .search-box i {
        position: absolute;
        top: 10px;
        left: 10px;
    }

.sticky-div {
    position: -webkit-sticky;
    position: sticky;
    top: 187px;
    z-index: 1;
}

.text-gradient {
    background: -webkit-linear-gradient(#5558FF, #00C0FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.border-card {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: var(--bs-gray-200) thin solid;
    padding: 30px;
}

.icon-list {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: var(--bs-gray-900);
    margin-top: 15px;
    flex-direction: column;
}

    .icon-list span i {
        font-size: 18px;
        color: var(--bs-gray-700);
    }

    .icon-list span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.chapter-list-side {
    padding: 0;
    margin: 0;
}

    .chapter-list-side li {
        list-style: none;
        margin-bottom: 15px;
    }

        .chapter-list-side li a {
            font-size: 1.3rem;
            color: var(--bs-gray-700);
        }

        .chapter-list-side li.active a,
        .chapter-list-side li:hover a {
            color: var(--bs-primary);
        }

#fixed-this
{
    display:none;
}

.fixed-div {
    position: fixed;
    top: 165px;
    left: 0;
    width: 100%;
    display: flex !important;
    background-color: var(--bs-gray-100);
    padding: 10px 20px;
    transition: background-color 0.3s ease;
    z-index: 1;
}

.chapter-hover:hover,
.chapter-hover.active {
    cursor: pointer;
    background-color: #dfefff;
}

    .chapter-hover:hover i,
    .chapter-hover.active i {
        color: var(--bs-text-primary);
    }

    .chapter-hover:hover h2,
    .chapter-hover.active h2 {
        color: var(--bs-text-primary) !important;
    }

.course-video-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.disclaimer-list {
    list-style: auto;
}

    .disclaimer-list li {
        margin-bottom: 10px;
    }

.complete-step {
    padding: 0;
    list-style: none;
    margin: 20px 0 0 0;
}

    .complete-step li {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 500;
        display: flex;
        margin-bottom: 16px;
        align-items: center;
        gap: 10px;
    }

        .complete-step li span {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: block;
            position: relative;           
            background-color: #fff;
        }

            .complete-step li span i {
                display: none;
            }

        .complete-step li.active span i {
            font-size: 25px;
            color: var(--bs-text-success);
            display: block;
        }

.filter-tag {
    border: var(--bs-gray-300) thin solid;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    align-items: center;
    display: flex;
    cursor: pointer;
    gap: 5px;
    color: var(--bs-text-gray-600);
}

    .filter-tag b {
        font-weight: 400;
        color: var(--bs-text-gray-800);
    }

    .filter-tag i {
        font-size: 16px;
        color: var(--bs-text-gray-900);
    }

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    white-space: nowrap;
}

.if-locked {
    position: relative;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 450px;
    justify-content: center;
    text-align: center;
    background: url(../images/video-bg.png) no-repeat center center;
    background-size: cover;
}

.lock-icon {
    background: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
}


.question-numbers {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 7px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    justify-content: center;
    max-height: calc(100vh - 370px);
    overflow-y: auto;
}

    .question-numbers button {
        text-align: center;
        border: none;
        padding: 0;
        background: transparent;
    }

        .question-numbers button span {
            background: #7239EA33;
            color: var(--bs-gray-900);
            border-radius: 4px;
            height: 35px;
            width: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: 12px;
        }
        


            .question-numbers button.active span {
                background: #7239EA33;
                border-radius: 4px;
            }

        .question-numbers button.complete span {
            background: var(--bs-text-success);
            border-radius: 50%;
            color: #fff;
        }

        .question-numbers button.review span {
            background: var(--bs-text-warning);
            color: #fff;
            border-radius:50%;
        }

        .question-numbers button.skip span {
            width: 35px;
            height: 35px;
            color: #fff;
            background-color: var(--bs-text-danger);
            clip-path: none;
            border-radius: 50%;
        }
        .question-numbers button.active span {
            box-shadow: rgb(255 255 255) 0px 0px 0px 2px, rgb(255, 155, 85) 0px 0px 0px 4px;
        }

.q-status {
    width: 100%;
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

    .q-status div {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .q-status .complete span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--bs-text-success);
    }

    .q-status .review span {
        width: 12px;
        height: 12px;        
        background: var(--bs-text-warning);
        border-radius:50%;
    }

    .q-status .skip span {
        width: 12px;
        height: 12px;
        background-color: var(--bs-text-danger);
        border-radius:50%;
    }

    .q-status .incomplete span {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        background: #7239EA33;
    }

.give-rating {
    width: 100%;
    display: flex;
    gap: 5px;
}

    .give-rating span {
        width: 40px;
        height: 40px;
        border: var(--bs-gray-300) thin solid;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        background: #fff;
        justify-content: center;
    }

        .give-rating span i {
            font-size: 22px;
            color: var(--bs-text-gray-500);
        }

        .give-rating span:hover,
        .give-rating span.active {
            border: var(--bs-warning) thin solid;
            background: var(--bs-warning-light);
            cursor: pointer;
        }

            .give-rating span:hover i,
            .give-rating span.active i {
                color: var(--bs-text-warning);
            }

.footer-light {
    background-color: #fff;
}

    .footer-light ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-light ul li a {
            font-size: 1rem;
            color: var(--bs-text-gray-700);
            margin-bottom: 15px;
            display: block;
            font-weight: 500;
        }

            .footer-light ul li a:hover {
                color: var(--bs-text-primary);
            }

    .footer-light .copyright-text {
        color: var(--bs-gray-500);
    }

    .footer-light .border-top {
        border-color: var(--bs-gray-300) !important;
    }

.social-links {
    display: flex;
    gap: 10px;
}

    .social-links a {
        border: var(--bs-gray-300) thin solid;
        background: #fff;
        width: 40px;
        height: 40px;
        padding: 8px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .social-links a img {
            max-width: 100%;
        }


.footer-dark {
    background-color: var(--bs-gray-800);
}

    .footer-dark h3,
    .footer-dark h4 {
        color: var(--bs-gray-100);
    }

    .footer-dark p {
        color: var(--bs-gray-400) !important;
    }

    .footer-dark ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-dark ul li a {
            font-size: 1rem;
            color: var(--bs-gray-400);
            margin-bottom: 15px;
            display: block;
            font-weight: 500;
        }

            .footer-dark ul li a:hover {
                color: var(--bs-text-primary);
            }

    .footer-dark .copyright-text {
        color: var(--bs-gray-500);
    }

    .footer-dark .border-top {
        border-color: var(--bs-gray-700) !important;
    }
.interview-step .stepper-icon {
    transition: color 0.2s ease;
    background-color: var(--bs-text-gray-100) !important;
    border: var(--bs-text-gray-300) thin solid !important;
    border-radius: 50% !important;
}

    .interview-step .stepper-icon img {
        max-width: 100%;
        width: 26px;
    }

.set-interview-check {
    position: relative;
    padding-left: 5px;
}

.form-check.set-interview-check .form-check-input {
    position: absolute;
    right: 5px;
    top: 8px;
    margin: 0 !important;
}
.row-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

    .row-grid .col {
        min-width: 0;
    }

@media (min-width: 640px) {
    .row-grid:has(> :nth-child(3)) {
        grid-template-columns: 6fr 3fr 3fr;
    }

    .row-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
        grid-template-columns: 6fr 6fr;
    }

    .row-grid:has(> :only-child) {
        grid-template-columns: 12fr;
    }
}

#QuestionTypeID5 {
    max-height: calc(100vh - 560px);
    overflow: auto;
    padding:10px;
    margin-bottom: 0px !important;
    
}

.skeleton-line {
    width: 100%;
    height: 16px;
    background-color: #f0f0f0;
    background-image: linear-gradient( to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100% );
    background-size: 400% 400%;
    animation: loading-line 1s ease infinite;
}

.bg-dark, .footer-dark {
    background-color: var(--bs-primary-active) !important;
}

@keyframes loading-line {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradient-text {
    background: -webkit-linear-gradient(#525cff 12%, #3e74ff 52%, #107eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-circle {
    background-color: var(--bs-primary-light) !important;
    border-radius: 50%;
}

.blockui .blockui-message {
    flex-direction: column !important;
    border-radius: 1rem !important;
    padding: 2rem 2.75rem !important;
    background: #ffffff !important;
}

.blockui .blockui-overlay {
    background-color: rgb(0 0 0 / 20%) !important;
    z-index: 2 !important
}

.form-check-input {
    background-color: #ffffff !important;
}

    .form-check-input:checked {
        background-color: var(--bs-primary) !important;
    }

.filter.form-check:hover span {
    color: var(--bs-primary) !important;
    cursor: pointer;
}

.resume-dropzone {
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.475rem;
    display: block;
    padding: 2rem 1rem;
    width: 100%;
    height: 120px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    cursor: pointer;
}

.browse {
    color: #007bff;
}

.file-icon {
    color: #999;
}

.position-sticky.page-bg {
    top: 73px;
    z-index: 2;
}
.profile-drawer {
    border-radius: 20px 0 0 20px;
}
.profile-drawer-button {
    bottom: 20px;
    right: 25px;
}
.dropzone-item {
    word-break: break-all;
    display: none
}
.dropzone-items {
    word-break: break-all;
}
.web-vid-div {
    text-align: center;
    padding: 0;
    margin-top: 10px;
}
.question-select {
    margin-top: -18px;
}
#divResume {
    max-height: 1024px;
    border: 1px solid var(--bs-text-gray-300);
    overflow: hidden;
}
.div-resume {
    display: none;
}
.interview-filters {
    top: 72px;
    z-index: 1;
}
.div-jd {
    height: calc(100vh - 250px);
    overflow-y: auto;
}
.min-h-96vh {
    min-height: 96vh;
}
.slider-prev {
    left: 0 !important;
    position: absolute;
    top: 40%;
}
.slider-next {
    right: 0 !important;
    position: absolute;
    top: 40%;
}

.skeleton-line {
    margin: 20px auto;
    width: 32px;
    height: 32px;
}

.crt-card-1 {
    background: url(/content/images/icon-01.png) no-repeat bottom right;
}
.crt-card-2 {
    background: url(/content/images/icon-02.png) no-repeat bottom right;
}
.crt-card-3 {
    background: url(/content/images/icon-03.png) no-repeat bottom right;
}
.top-slider {
    background: linear-gradient(0deg, rgba(10, 208, 244, .12) 7.19%, rgba(255, 255, 255, 0) 104.33%);
}
.top-100px {
    top: 100px;
}
.top-240px {
    top: 240px;
}
.assessment-declaration {
    max-width: 70%;
    align-items: center;
    flex-direction: column;
}
.assessment-details {
    height: calc(100vh - 350px);
    overflow-y: auto;
}

@media (max-width: 767px) {
    .mob-css-h .bg-dark.h-45px {height:0px !important;}


    .explore-course-h ul {
        flex-direction: column;
    }
    .explore-course-h ul li {
            width: 100%;
    }

    .explore-course-h {
          padding: 30px 0;
    }
    .footer-dark .border-top {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .mob-css-h .img-responsive.h-100px {height:70px!important;
    }

    .mob-css-h .app-sidebar-logo-default.h-20px {
        height: 40px !important;
        margin-bottom: 10px;
    }
    .m-set-img {
        width: 100%;
        justify-content: space-between;
    }
    .mob-css-h .menu-sub.menu-sub-dropdown {
        transform: translate3d(-15px, 55px, 0px) !important;
    }
    div#kt_app_header_container {
        background: #f2f2f2;
    }

    .fixed-div {
        top: 136px !important;
      }

        .fixed-div .app-container.container-xxl.d-flex {
            flex-direction: column;
            justify-content: start !important;
            align-items: start !important;
            gap: 10px;
        }

    .course-content .col-md-9.c-content {
        order: 2;
    }
    .course-content .col-md-3.toc {
        order: 1;
        margin-bottom: 20px;
    }
    .div-preview-course { justify-content:start !important; margin-top:10px;
    }
    .chapter-header{ flex-direction:column !important;}
    .crt-breadcrum ul {
        padding: 8px 0 0 10px;
        margin: 0;
        display: inline-block;
    }
    #divCourseMaterial {
        margin-bottom:30px;
    }

    #divCeritificate .text-end { text-align:left !important; margin-top:20px;
    }
    .after-login-view .nav-line-tabs .nav-item .nav-link {
        padding: 0 8px !important;
        margin: 0 !important;
    }
    #RecentCourses .rec-course {
        flex-direction: column;
        gap: 10px;
        align-items: start !important;
    }

    .div-lesson-title {
        flex-direction: column;
        justify-content: center !important;
        text-align: center;
    }
    .assessment-test-title-m {
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    }
    #QuestionTypeID5 {
        max-height: inherit;
    }
    .question-bottom { padding-bottom:100px !important;
    }
    .position-sticky.page-bg {
        top: 138px;
        z-index: 2;
    }
    .flex-direction-mob{ flex-direction:column !important}

    }