@use "../abstract" as *;


.bd-class-main {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    height: 100%;
}
.bd-class-sidebar {
	width: 400px;
    background: $theme-bg;
    @media #{$xl} {
        width: 360px;
    }
    @media #{$lg} {
        width: 320px;
    }
    @media #{$md} {
        width: 300px;
    }
    @media #{$sm, $xs} {
        width: 100%;
        margin-bottom: 50px;
    }
}
.bd-class-content {
	width: calc(100% - 400px);
    padding: 0px 60px 0px 60px;
    @media #{$xl} {
        width: calc(100% - 360px);
    }
    @media #{$lg} {
        width: calc(100% - 320px);
    }
    @media #{$md} {
        width: calc(100% - 300px);
        padding: 0px 30px 0px 30px;
    }
    @media #{$sm,$xs} {
        width: 100%;
        padding: 0px 30px 0px 30px;
    }
}
.bd-class-sidebar-header {
	padding: 12px 20px 15px 20px;
    background: #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
        margin-bottom: 0px;
        color: $heading-color;
        font-size: 20px;
    }
    i {
        color: $heading-color;
    }
}
.bd-class-lessons {
	ul {
        li {
            padding: 12px 20px 12px 20px;
            border-bottom: 1px solid $border;
            font-size: 16px;
            color: $heading-color;
            font-weight: 600;
            &:last-child {
                border-bottom: 0px;
            }
            ul {
                border-bottom: 1px solid $border;
                &:last-child {
                    border-bottom: 0px;
                }
            }
        }
    }
}
.bd-class-sidebar-header.pt-0 {
	background: $theme-bg;
    padding-top: 10px !important;
    .quiz-setting .quiz-timer, .quiz-setting .quiz-time {
        color: $heading-color;
        margin-bottom: 5px;
    }
}

.bd-class-content-mcq-list {
    ul li {
        position: relative;
    }
    input {
        margin-right: 10px;
    }

    input[type="radio"]:checked+label,
    input[type="radio"]:not(:checked)+label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }
    input[type="radio"]:checked+label:before,
    input[type="radio"]:not(:checked)+label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 18px;
        height: 18px;
        border: 2px solid $theme-color;
        border-radius: 100%;
        background: #fff;
        opacity: .5;
    }
    input[type="radio"]:checked+label:after,
    input[type="radio"]:not(:checked)+label:after {
        content: '';
        width: 10px;
        height: 10px;
        background: $theme-color;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100%;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        opacity: 1;
    }
    input[type="radio"]:not(:checked)+label:after {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    input[type="radio"]:checked+label:after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    label {
        cursor: pointer;
    }
}

.bd-class-content-multiple-mcq-list {
    input[type=checkbox] {
        position: relative;
        border: 2px solid $theme-color;
        border-radius: 2px;
        background: none;
        cursor: pointer;
        line-height: 0;
        margin: 0 10px 0 0;
        outline: 0;
        padding: 0 !important;
        vertical-align: text-top;
        height: 18px;
        width: 18px;
        -webkit-appearance: none;
        opacity: .5;
        transform: translateY(1px);
    }
    input[type=checkbox]:hover {
        opacity: 1;
    }
    input[type=checkbox]:checked {
        background-color: $theme-color;
        opacity: 1;
    }
    input[type=checkbox]:before {
        content: '';
        position: absolute;
        right: 50%;
        top: 50%;
        width: 6px;
        height: 12px;
        border: solid #FFF;
        border-width: 0 2px 2px 0;
        margin: -1px -1px 0 -1px;
        transform: rotate(45deg) translate(-50%, -50%);
        z-index: 2;
    }
    label {
        cursor: pointer;
    }
}
.bd-class-content-fill-blank-list,
.bd-class-content-short-description {
    label {
        display: block;
        margin-bottom: 20px;
    }
    input, textarea {
        background: #f8f8f9;
        border: none;
        border-radius: 4px;
        outline: 0;
        padding: 0px 20px;
        width: 100%;
        height: 50px;
        color: $body-text;
        font-size: 16px;
        max-width: 800px;
    }
}
.bd-class-content-short-description {
    textarea {
        width: 100%;
        height: 250px;
        padding: 10px 20px 20px 20px;
        max-width: 800px;
        color: $body-text;
    }
}
.bd-class-content-btn {
	padding: 30px 0px;
	border-top: 1px solid $border;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
}
.bd-class-content-single-item {
    display: none;
}
.bd-class-content-single-item.active  {
    display: block;
}
.topic-quiz-wrap,
.bd-class-lesson-item-test {
    display: none;
}
.topic-quiz-wrap,
.bd-class-lesson-item-test {
    display: none;
}
.bd-class-lesson-item.active {
    .topic-quiz-wrap,
    .bd-class-lesson-item-test {
        display: block;
    }
    .circle-icon {
        color: $theme-color;
    }
    .right-arrow-up {
        opacity: 1;
        visibility: visible;
    }
    .right-arrow-down {
        opacity: 0;
        visibility: hidden;
    }
    span {
        color: $theme-color;
    }
    .bd-class-lesson-item-topics {
        li.active {
            color: $theme-color;
        }
    }
}

.bd-class-content-mcq {
    h4 {
        margin-bottom: 15px;
    }
}
.bd-class-lesson-item {
    .topic-quiz-wrap {
        padding: 0px !important;
    }
    .bd-class-lesson-item-topics li,
    .bd-class-lesson-item-test li {
        color: $body-text;
    }
    span {
        color: $heading-color;
        cursor: pointer;
        padding-right: 30px;
        display: block;
        position: relative;
    }
    .circle-icon,
    .ballot-icon {
        margin-right: 6px;
    }
    .right-arrow-down,
    .right-arrow-up {
        position: absolute;
        top: 5px;
        right: 0;
        transition: all linear 0.3s;
    }
    .right-arrow-up {
        opacity: 0;
        visibility: hidden;
    }
}
.bd-class-lessons .bd-class-lesson-item li {
    padding-left: 0px;
    padding-right: 0px;
    ul li {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.bd-class-lesson-item-test li:last-child {
    padding-bottom: 0px;
}
.bd-class-lessons a i {
    margin-right: 6px;
}
.bd-class-content-single-title {
    font-size: 18px;
    color: $heading-color;
    font-weight: 700;
}
.bd-class-content-single-item {
    .course-curriculum-info {
        h4 {
            font-size: 16px;
            color: $body-text;
            font-weight: 600;
            margin-left: 0px;
        }
        i {
            margin-right: 6px;
            transform: translateY(2px);
            display: inline-block;
        }
    }
}

.quiz-setting {
    padding-bottom: 15px;
    .quiz-timer,
    .quiz-time {
        color: $white;
        margin-bottom: 5px;
    }
}
.bd-class-sidebar-header {
	padding-top: 25px;
    padding-bottom: 22px;
}

//result styles

.result-message,
.explanation {
    height: 48px;
    width: 100%;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    background: #f1f1f1;
    margin-top: 40px;
    b {
        color: #666;
        margin: 0px 12px;
    }
    span {
        color: $body-text;
    }
    i {
        transform: translateY(1px);
        margin-right: 5px;
    }
    &.passed {
        background: #F5FDFA;
        i {
            color: #53B3B3;
        }
    }
    &.failed {
        background: #FDF5F5;
        i {
            color: #D61212;
        }
    }
}
.bd-class-content-mcq.quiz-question-header {
    width: 100%;
    padding: 12px 20px;
    border-radius: 5px;
    background: #f1f1f1;
    h4 {
        margin-bottom: 0px;
        display: block;
    }
    .explanation {
        margin-top: 5px;
        height: inherit;
        padding: 0px;
        border-radius: 0px;
        background: none;
    }
}

.bd-class-content {
    input {
        color: $body-text !important;
    }
}

.bd-class-sidebar.sticky {
    @media #{$sm,$xs} {
        position: fixed;
        top: 80px;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        z-index: 4;
        .duration,
        .marking {
            display: none;
        }
    }
    .bd-class-sidebar-header.pt-0 {
        padding-top: 0px;
    }
}

.bd-class-content-single-description {
	max-width: 960px;
    iframe {
        border: 0;
        width: 100%;
        height: 500px;
        margin-top: 15px;
    }
}