/* Courses css */

.it-course-author a img {
    border-radius: 100%;
}

.it-course-author a span {
    text-transform: capitalize;
}

.od-course-rating-icon span {
    color: var(--it-theme-2);
    font-size: 16px;
    margin-right: 2px;
}

.wishlist-btn i {
    color: #757c8e;
}

.layout_four_price {
    margin: 0 !important;
}

.layout_four_price span {
    margin: 0 !important;
}

.it-course-style-2.course_style_4 .it-course-meta span:first-child {
    padding-right: 10px;
}

.layout_four_price .list-item-price.tutor-item-price {
    display: flex;
    align-items: center;
}

.it-course-style-7 .it-course-price span {
    font-size: 16px;
}

.it-course-style-7 .it-course-price del {
    display: none;
}

.it-event-area .it-event-item .it-event-thumb img {
    height: 220px;
    object-fit: cover;
}

/* Start Courses css by Ibrahim */
.od-course-teacher {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0px;
    right: auto;
    text-align: center;
    z-index: 2;
}

.it-course-btn .it-btn-yellow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.it-course-btn .it-btn-yellow>span {
    flex: 0 1 auto;
}

.it-course-btn .it-btn-yellow i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    transform: translate(0px, 2px);
}

.it-course-btn .it-btn-yellow i svg {
    display: block;
    margin-left: 0;
}

.it-course-item .it-course-price-box del {
    font-weight: 500;
    font-size: 14px;
    margin-right: 0px;
}

.it-course-item .it-course-price-box span {
    font-size: 16px;
}

/* .it-shop-top-wrap p {
    font-size: 20px;
    color: var(--it-common-black);
    font-family: var(--it-ff-spartan-semibold);
    font-weight: 500;
} */

.it-shop-text span {
    color: var(--it-theme-1) !important;
    font-weight: 800;
}

.it-course-area .it-pagination ul > li:hover a,
.it-pagination ul > li:hover span {
    color: inherit;
    background-color: inherit;
    border: 1px solid rgba(121, 121, 121, 0.2);
}

.it-course-area .it-pagination ul li > .page-numbers:hover {
    color: var(--it-common-white);
    background-color: var(--it-theme-1);
    border: 1px solid var(--it-theme-1);
}

.it-course-area .it-pagination > .educeet-pagination-li {
    text-align: center !important;
}


.od-course-filter-top-tab,
.od-course-grid-sidebar-tab {
    height: 48px;
    border-radius: 100px;
    padding: 7px 6px 6px 6px;
    background: #F3F4F8;
    border: 1px solid #EEF2F9;
    margin-right: 15px !important;
}

.od-course-filter-top-tab .nav-tabs,
.od-course-grid-sidebar-tab .nav-tabs {
    padding: 0;
    margin: 0;
    border: 0;
}

.od-course-filter-top-tab .nav-tabs .nav-item .nav-link,
.od-course-grid-sidebar-tab .nav-tabs .nav-item .nav-link {
    font-weight: 400;
    font-size: 16px;
    color: #43444A;
    display: block;
    width: 60px;
    padding: 3px;
    padding-top: 6px;
}

.od-course-filter-top-tab .nav-tabs .nav-item .nav-link svg,
.od-course-grid-sidebar-tab .nav-tabs .nav-item .nav-link svg {
    margin-right: 5px;
    transform: translateY(-3px);
}

.od-course-filter-top-tab .nav-tabs .nav-item .nav-link.active,
.od-course-grid-sidebar-tab .nav-tabs .nav-item .nav-link.active {
    border-radius: 100px;
    box-shadow: 0 1px 2px 0 rgba(3, 11, 30, 0.14);
    background: #fff;
    color: #5169F1;
}

.it-course-btn .tutor-d-flex.tutor-align-center.tutor-justify-between {
    display: none !important;
}

.educeet-course-list-card-wrapper .it-course-thumb {
    width: 30%;
}

.educeet-course-list-card-wrapper .it-course-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.educeet-course-list-card-wrapper .it-course-content {
    padding: 40px 30px;
    padding-top: 30px;
    width: 70%;
}

.educeet-course-list-card-wrapper .it-course-meta span:first-child {
    padding-right: 20px;

}

/* sidebar course css */

.od-grid-widget-box {
    padding: 45px 37px;
    border-radius: 20px;
    background-color: var(--it-gray-1);
    border: 1px solid rgba(31, 36, 50, 0.1);
}

.od-grid-widget-item:not(:last-of-type) {
    padding-bottom: 25px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(3, 31, 66, 0.08);
}

.od-grid-widget-checkbox ul li label {
    font-size: 16px;
    transition: 0.3s;
    color: var(--it-text-body);
    font-weight: 400;
    position: relative;
}

.od-grid-widget-checkbox ul li label:hover {
    color: var(--it-theme-1);
}

.tutor-lms ul.tutor-list li label {
    padding-left: 0;
}

.tutor-course-filter input[type=checkbox] {
    padding: 0px 10px !important;
}

.it-course-archive-top .it-course-filter-dropdown-area.it-course-filter-dropdown-wrappers.it-course-filter-dropdown-style-2 ul li {
    display: inline-block;
}

.it-course-archive-top .it-course-filter-dropdown-area.it-course-filter-dropdown-wrapper.it-filter-dropdown-opened ul li {
    display: inline-block;
}

.it-course-archive-top ul li .form-check {
    padding-left: 0;
    margin-bottom: 0;
}

.it-course-archive-top ul li .form-check-input[type=radio] {
    display: none !important;
}

.it-course-archive-top ul li label {
    font-size: 14px;
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
    transition: 0.1s;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    display: inline-block;
    font-family: var(--it-ff-body);
    color: var(--it-text-body);
    transition: .3s;
}

.it-course-archive-top ul li label:hover,
.it-course-archive-top ul li label input[type="checkbox"]:checked {
    color: var(--it-common-white);
    background-color: var(--it-theme-1);
}

.it-course-archive-top ul li .form-check-input[type=radio]:checked+label {
    color: #5169f1;
}

.it-course-archive-top ul li .form-check-input[type=checkbox]:checked {
    color: #5169f1;
}

.it-shop-top-wrap {
    width: 100%;
}

/* Filter Offcanvas Overlay */

.od-filter-dropdown-wrapper-3 {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 450px;
    height: 100%;
    background: #fff;
    z-index: 9;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    border-radius: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -ms-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-delay: 0s;
    z-index: 99999;
    -webkit-transform: translateX(calc(100% + 80px));
    -moz-transform: translateX(calc(100% + 80px));
    -ms-transform: translateX(calc(100% + 80px));
    -o-transform: translateX(calc(100% + 80px));
    transform: translateX(calc(100% + 80px));
    padding: 0;
    border: 0;
}

body.educeet-filter-offcanvas-active {
    overflow: hidden;
}

.od-filter-dropdown-wrapper-3.filter-offcanvas-opened {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0.4s;
}

@media only screen and (max-width: 767px) {
    .od-filter-dropdown-wrapper-3 {
        width: calc(100% - 50px);
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .od-filter-dropdown-wrapper-3 {
        width: 350px;
    }
}

.od-filter-dropdown-wrapper-3.filter-dropdown-opened {
    visibility: visible;
    opacity: 1;
    -webkit-transform: perspective(300px) rotateX(0deg);
    -moz-transform: perspective(300px) rotateX(0deg);
    -ms-transform: perspective(300px) rotateX(0deg);
    -o-transform: perspective(300px) rotateX(0deg);
    transform: perspective(300px) rotateX(0deg);
}

.od-filter-offcanvas-close {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: var(--it-common-black);
    color: var(--it-common-white);
    font-size: 16px;
    padding: 12px 45px;
    gap: 6px;
}

.od-filter-offcanvas-close:hover {
    background-color: var(--it-common-black);
    color: var(--it-common-white);
}

.od-filter-offcanvas-close span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.od-filter-offcanvas-inner {
    padding: 20px 45px 45px;
}

.it-course-sidebar .course-info ul li span {
    text-transform: capitalize;
}

.it-course-style-4 .it-course-meta span:first-child {
    padding-right: 5px !important;
}

.it-course-style-4 .it-course-meta .it-price-10 span {
    display: inline-block;
    margin-bottom: 0 !important;
}

.it-course-style-4 .it-course-meta .it-price-10 {
    display: flex;
    align-items: center;
    gap: 5px;
}

.it-course-thumb .wishlist-btn {
    color: #757c8e;
}

.it-breadcrumb-list span {
    text-transform: capitalize !important;
}

.it-course-sidebar-thumb .plyr.plyr--full-ui.plyr--video.plyr--youtube.plyr--fullscreen-enabled.plyr--paused.plyr--stopped.plyr__poster-enabled {
    padding-right: 0;
    border-radius: 10px;
    /* display: inline-block; */
    border: 5px solid var(--it-common-white);
}

.it-course-sidebar-thumb .plyr.plyr--full-ui.plyr--video.plyr--youtube.plyr--fullscreen-enabled.plyr--paused.plyr--stopped.plyr__poster-enabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-color: rgba(31, 36, 50, 0.5);
    z-index: 1;
}

.it-breadcrumb-thumb-wrap .plyr.plyr--full-ui.plyr--video.plyr--youtube.plyr--fullscreen-enabled.plyr--paused.plyr--stopped.plyr__poster-enabled {
    padding-right: 0;
    border-radius: 10px;
    /* display: inline-block; */
    border: 5px solid var(--it-common-white);
}

.it-breadcrumb-thumb-wrap .plyr.plyr--full-ui.plyr--video.plyr--youtube.plyr--fullscreen-enabled.plyr--paused.plyr--stopped.plyr__poster-enabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-color: rgba(31, 36, 50, 0.5);
    z-index: 1;
}

.thumb-overlay::after {
    display: none !important;
}

@media (max-width: 776px) {
    .it-course-archive-top .it-shop-text span {
        font-size: 16px;
        display: inline-block;
        margin-top: 15px;
    }
}



.od-filter-offcanvas-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background-color: rgba(14, 11, 61, 0.7);
    backdrop-filter: blur(10px);
    -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -ms-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-delay: 0.3s;
    z-index: 999;
}

.od-filter-offcanvas-overlay.opened {
    width: 100%;
    transition-delay: 0s;
}

.od-filter-widget-title {
    font-size: 17px;
    font-weight: 500;
    color: #4f5158;
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(3, 31, 66, 0.08);
}

.od-filter-widget-content {
    margin-bottom: 30px;
}

.od-filter-widget-radio ul li {
    list-style: none;
}

.od-filter-widget-radio ul li:not(:last-of-type) {
    margin-bottom: 10px;
}

.od-filter-widget-radio ul li .form-check-input[type=radio] {
    width: 18px;
    height: 18px;
    box-shadow: none;
    margin-right: 6px;
    transform: translateY(0);
}

.od-filter-widget-radio ul li .form-check-input[type=radio]:checked+label {
    color: #5169f1;
}

.od-filter-widget-radio ul li .form-check-label {
    font-size: 15px;
    color: #57595f;
    font-weight: 400;
    cursor: pointer;
}

.od-filter-widget-checkbox {
    max-height: 240px;
    overflow-y: scroll;
    scrollbar-width: thin;
    overscroll-behavior-y: contain;
}

.od-filter-widget-checkbox ul li {
    list-style: none;
}

.od-filter-widget-checkbox ul li:not(:last-of-type) {
    margin-bottom: 10px;
}

.od-filter-widget-checkbox ul li label {
    font-size: 15px;
    color: #57595f;
    font-weight: 400;
    position: relative;
    padding-left: 26px;
    z-index: 1;
}

.od-filter-widget-checkbox ul li label a:hover {
    color: var(--it-theme-7);
}

.od-filter-widget-checkbox ul li label:hover {
    cursor: pointer;
}

.od-filter-widget-checkbox ul li label::after,
.od-filter-widget-checkbox ul li label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.od-filter-widget-checkbox ul li label::after {
    border-radius: 3px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
}

.od-filter-widget-checkbox ul li label::before {
    content: url("../img/live/check.svg");
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
}

.od-filter-widget-checkbox ul li label input {
    display: none;
}

.od-filter-widget-checkbox ul li label:has(input:checked)::after {
    background-color: var(--it-theme-7);
    border-color: var(--it-theme-7);
}

.od-filter-widget-checkbox ul li label:has(input:checked)::before {
    visibility: visible;
    opacity: 1;
}

/* Course Details */
.tutor-fs-7.tutor-color-muted {
    font-size: 14px;
    text-align: center;
    color: var(--it-theme-1);
}

.postbox-user-info .tutor-ratings-stars {
    display: inline-flex;
    margin-right: 5px;
}

.od-course-details2-main-title {
    font-weight: 700;
    font-size: 20px;
    color: var(--it-common-black);
    margin-bottom: 22px;
}

.it-course-details-left .tutor-write-review-form>span {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #5D5D63;
    margin-bottom: 10px !important;
    font-family: var(--od-ff-marcellus);
}

.od-contact-input-form textarea {
    height: 170px;
    resize: none;
    border-radius: 5px !important;
    background-color: var(--it-gray-1) !important;
    border: 1px solid rgba(98, 94, 88, 0.15) !important;
}

.od-contact-input-form textarea:focus {
    border: 1px solid var(--it-theme-1) !important;
}

button.educeet-course-btn.write-course-review-link-btn {
    transition: 0.3s;
    line-height: 1;
    display: inline-block;
    color: var(--it-theme-1);
}

.od-contact-input-form label {
    font-size: 15px;
    color: #1E1E1E;
    font-family: var(--od-ff-body);
    margin-bottom: 15px;
    display: inline-block;
    font-weight: 600;
}

.it-course-details-left .postbox-comment-user {
    gap: 25px !important;
}

.it-course-details-ratting-wrap .tutor-ratings {
    justify-content: center;
}

.it-course-details-ratting-wrap .tutor-ratings-lg .tutor-ratings-stars {
    font-size: 15px;
    text-align: center;
    display: inline-block;
}

.postbox-social a {
    background-color: inherit !important;
}

.postbox-social a:hover {
    color: var(--it-common-white) !important;
    background-color: var(--it-theme-1) !important;
}

.it-course-details-area .thumb-overlay::after {
    display: none !important;
}

/* breacdcrumb */
.it-breadcrumb-author {
    margin-right: 15px;
}

.it-breadcrumb-author-info>span>span {
    display: inline-block;
}

.it-breadcrumb-author-info span:last-child {
    margin-top: 0px !important;
    font-size: 14px !important;

}

.it-breadcrumb-author-info>span {
    margin-bottom: 8px !important;
}

.it-course-sidebar .social-section {
    margin-bottom: 0px !important;
    border-bottom: none !important;
}

.od-filter-dropdown-wrapper-3 .od-filter-offcanvas-inner .tutor-form-check-input.tutor-form-check-input[type=checkbox] {
    border-radius: 4px;
    padding: 0;
    display: none;
}

.od-filter-dropdown-wrapper-3 .od-filter-offcanvas-inner .od-filter-widget-checkbox ul li label {
    font-size: 15px;
    color: #57595f;
    font-weight: 400;
    position: relative;
    padding-left: 15px;
    z-index: 1;
}

.od-filter-dropdown-wrapper-3 .od-filter-offcanvas-inner .od-filter-widget-checkbox ul li label:hover {
    cursor: pointer;
    color: var(--it-common-white);
}


/* details */
.od-course-details2-list ul {
    display: inline-block;
    margin-bottom: 20px;
}

.od-course-details2-list ul li {
    list-style: none;
    font-size: 17px;
    font-weight: 400;
    color: var(--it-text-body);
    width: 50%;
    float: left;
    margin-bottom: 13px;
    position: relative;
    padding-left: 11px;
}

@media only screen and (max-width: 767px) {
    .od-course-details2-list ul li {
        width: 100%;
    }
}

.od-course-details2-list ul li::before {
    position: absolute;
    top: 11px;
    left: 0;
    content: "";
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
}

.od-course-details2-list p {
    font-size: 17px;
}

.od-course-details2-faq .accordion-item {
    border-radius: 6px;
    border: 1px solid #e6e8f0;
}

.od-course-details2-faq .accordion-item:not(:last-of-type) {
    margin-bottom: 16px;
}

.od-course-details2-faq .accordion-button {
    border-radius: 6px;
    padding: 19px 30px 19px 54px;
}

@media only screen and (max-width: 767px) {
    .od-course-details2-faq .accordion-button {
        padding: 18px 15px 18px 30px;
    }
}

.od-course-details2-faq .accordion-button .span {
    font-size: 18px;
    font-weight: 500;
    color: var(--it-heading-2);
}

.od-course-details2-faq .accordion-button .lesson {
    font-size: 15px;
    font-weight: 400;
    color: #57595f;
    border-radius: 34px;
    padding: 5px 20px;
    border: 1px solid #e6e8f0;
}

.od-course-details2-faq .accordion-button:not(.collapsed) {
    box-shadow: none;
    padding: 19px 30px 19px 54px;
    border-bottom: 1px solid #e6e8f0;
    background-color: var(--it-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

@media only screen and (max-width: 767px) {
    .od-course-details2-faq .accordion-button:not(.collapsed) {
        padding: 18px 15px 18px 30px;
    }
}

.od-course-details2-faq .accordion-button:not(.collapsed) .span {
    color: var(--it-dashboard-primary);
}

.od-course-details2-faq .accordion-button:not(.collapsed) .accordion-btn::before {
    background-color: var(--it-common-white);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}

.od-course-details2-faq .accordion-button:not(.collapsed) .accordion-btn::after {
    background-color: var(--it-dashboard-primary);
}

.od-course-details2-faq .accordion-button:focus {
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.od-course-details2-faq .accordion-button .accordion-btn {
    position: absolute;
    top: 50%;
    left: 30px;
    transition: 0.3s;
    display: inline-block;
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
    .od-course-details2-faq .accordion-button .accordion-btn {
        left: 15px;
    }
}

.od-course-details2-faq .accordion-button .accordion-btn::after,
.od-course-details2-faq .accordion-button .accordion-btn::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 2px;
    left: 50%;
    top: 50%;
    border-radius: 2px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #031f42;
}

.od-course-details2-faq .accordion-button .accordion-btn::before {
    background-color: #031f42;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

.od-course-details2-faq .accordion-button::after {
    content: none;
}

.od-course-details2-faq .accordion-body {
    padding: 18px 30px;
}

@media only screen and (max-width: 767px) {
    .od-course-details2-faq .accordion-body {
        padding: 15px 15px;
    }
}

.od-course-details2-faq-item:not(:last-of-type) {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f5fa;
}

.od-course-details2-faq-item .left span {
    font-size: 15px;
    color: #57595f;
    font-weight: 400;
}

.od-course-details2-faq-item .left span i {
    font-size: 16px;
    font-style: normal;
    color: var(--it-heading-primary);
}

.od-course-details2-faq-item .left span svg {
    transform: translateY(-2px);
    margin-right: 5px;
}

.od-course-details2-faq-item .right span {
    font-size: 14px;
    font-weight: 400;
    color: #697089;
}

.od-course-details2-faq-item .right span a {
    margin-left: 10px;
    display: inline-block;
    font-weight: 400;
    font-size: 15px;
    padding: 0px 11px;
    border-radius: 29px;
    background: rgba(81, 105, 241, 0.1);
    color: var(--it-dashboard-primary);
}

/* .it-course-faq .it-custom-accordion-2 .accordion-body .accordion-content ul li>span {
    position: inherit;
}

.it-course-faq .it-custom-accordion-2 .accordion-body .accordion-content ul li {
    padding-left: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 25px;
}

.it-course-faq .it-custom-accordion-2 .accordion-body .preview-box {
    display: inherit;
    align-items: inherit;
} */



/* login page css */
.od-login-input-eye {
    position: absolute;
    right: 26px;
    top: 50%;
    cursor: pointer;
    transform: translateY(-100%);
}

.od-login-input-eye .open-eye {
    display: none;
}

.tutor-form-check-input.tutor-form-check-input[type=checkbox] {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-top: 2px;
    border-radius: 5px;
    box-shadow: none;
    flex: 0 0 auto;
    border: 1px solid #797979;
}

.it-signup-wrap .form-check {
    gap: 10px;
}

.it-signup-title.od-signup-title {
    margin-bottom: 20px !important;
}



.it-course-item span.od-course-price-card {
    display: flex !important;
    align-items: center;
    gap: 5px;
}
.it-course-item span.od-course-price-card span.price,
.it-course-item span.od-course-price-card span.price span {
    margin-bottom: 3px !important;
}
.it-course-item span.od-course-price-card .list-item-price span {
    margin-bottom: 0;
}

.od-dashboard-title {
    margin: 33px;
}
.tutor-fs-6.tutor-color-secondary {
    margin-bottom: 20px;
}

/* End Courses css by Ibrahim */

/* Tutor dashboard mobile footer bar.

   tutor/dashboard.php prints #tutor-dashboard-footer-mobile - a three-link bar
   (My Courses / Q&A / Menu) that was only ever meant for small screens. Tutor
   used to style it, but Tutor 4 dropped those rules and no longer loads its
   legacy stylesheet on dashboard pages, so the bar had no CSS at all and spilled
   out at the bottom-left of the desktop layout as bare text. Hidden on desktop
   and restored as the fixed bottom bar it was intended to be. */

#tutor-dashboard-footer-mobile {
    display: none;
}

@media only screen and (max-width: 767px) {
    #tutor-dashboard-footer-mobile {
        display: block;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 99;
        padding: 8px 0;
        background-color: var(--it-common-white);
        box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.08);
    }

    #tutor-dashboard-footer-mobile .tutor-row {
        display: flex;
        margin: 0;
    }

    #tutor-dashboard-footer-mobile .tutor-col-4 {
        flex: 1 1 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 6px 4px;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
        color: var(--it-text-body);
    }

    #tutor-dashboard-footer-mobile .tutor-col-4 i {
        font-size: 18px;
        line-height: 1;
    }

    #tutor-dashboard-footer-mobile .tutor-col-4.active,
    #tutor-dashboard-footer-mobile .tutor-col-4:hover {
        color: var(--it-theme-1);
    }
}

/* Legacy Tutor modals must stay hidden until opened.

   tutor.min.css used to declare .tutor-modal { display: none } and reveal it
   through .tutor-is-active, but Tutor 4 does not load that stylesheet on
   dashboard pages and tutor-core.min.css declares .tutor-modal as a full-screen
   display:flex overlay instead - Tutor 4's own modals are hidden by Alpine's
   inline style, not by CSS. The dashboard templates here are the pre-4.0 markup
   with no Alpine binding, so every delete prompt on the page was permanently on
   screen, stacked; dismissing one simply revealed the identical one beneath it.

   Gated on aria-hidden, which is the state the legacy scripts already maintain:
   tutor.js sets aria-hidden="false" when it opens a modal and "true" when it
   closes one. Tutor 4's Alpine modals never carry the attribute, so they are
   untouched. */

.tutor-modal[aria-hidden="true"] {
    display: none !important;
}

/* Sign-up / login form design.
 *
 * These rules were filed under css/woocommerce/checkout.css during the shop
 * CSS consolidation, but the markup they style - it-signup-wrap and friends -
 * belongs to tutor/dashboard/registration.php, tutor/login.php and the
 * my-account forms. checkout.css only loads on WooCommerce pages, so the
 * student registration and login pages lost the card, the field styling and
 * the 20px agree-checkbox entirely. Moved here, which is enqueued globally,
 * so every page using this markup gets them. The --wc-* tokens they read come
 * from css/woocommerce/tokens.css, which is also loaded site-wide. */

/*----------------------------------------*/
/*  33. contact css start
/*----------------------------------------*/
.it-signup-area .contact__select .nice-select {
  width: 100%;
  position: relative;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-size: 16px;
  border-radius: 5px;
  background-color: var(--wc-gray-1);
  border: 1px solid color-mix(in srgb, var(--wc-heading) 10%, transparent);
}
.it-signup-title {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 20px;
  text-transform: capitalize;
  font-family: var(--wc-ff-semibold);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {

  .it-signup-title {
    font-size: 29px;
  }
}
@media (max-width: 767px) {

  .it-signup-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {

  .it-signup-title {
    font-size: 30px;
  }
}
.it-signup-continue-item {
  padding: 12px 30px;
  border-radius: 5px;
  background-color: var(--wc-gray-1);
  border: 1px solid color-mix(in srgb, var(--wc-heading) 10%, transparent);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {

  .it-signup-continue-item {
    padding: 12px 15px;
  }
}
@media (max-width: 767px) {

  .it-signup-continue-item {
    padding: 12px 15px;
    margin-bottom: 10px;
  }
}
@media (max-width: 767px) {

  .it-signup-continue-item img {
    width: 20px;
  }
}
.it-signup-continue-item span {
  display: inline-block;
  padding-left: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {

  .it-signup-continue-item span {
    font-size: 13px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .it-signup-text span {
    font-size: 15px;
  }
}
.it-signup-text span a {
  color: var(--wc-theme-1);
  text-decoration: underline;
}
.it-signup-border {
  margin-bottom: 35px;
  position: relative;
}
.it-signup-border span {
  display: block;
  position: relative;
  padding: 0 10px;
  z-index: 1;
  display: inline-block;
  background-color: var(--wc-white);
}
.it-signup-border::after {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
  background-color: color-mix(in srgb, var(--wc-text) 40%, transparent);
}
.it-signup-input {
  text-align: start;
}
.it-signup-input label {
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--wc-black);
  font-family: var(--wc-ff-semibold);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .it-signup-input label {
    font-size: 15px;
  }
}
.it-signup-input input {
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-size: 16px;
  border-radius: 5px;
  background-color: var(--wc-gray-1);
  border: 1px solid color-mix(in srgb, var(--wc-heading) 10%, transparent);
}
.it-signup-input input:focus {
  border-color: var(--wc-theme-1);
}
.it-signup-input-icon {
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
}
@media (max-width: 767px) {

  .it-signup-input-icon {
    left: 19px;
  }
}
@media (max-width: 767px) {

  .it-signup-input-icon svg {
    width: 15px;
  }
}
.it-signup-wrap {
  padding: 60px 50px;
  border-radius: 20px;
  text-align: center;
  margin: 0 20px;
  border: 1px solid color-mix(in srgb, var(--wc-theme-3) 20%, transparent);
  box-shadow: 0 20px 30px 0 color-mix(in srgb, var(--wc-heading) 10%, transparent);
}
@media (max-width: 767px) {

  .it-signup-wrap {
    margin: 0;
    padding: 60px 20px;
  }
}
.it-signup-wrap .form-check {
  display: flex;
  text-align: start;
}
.it-signup-wrap .it-contact-agree .form-check-input.form-check-input[type=checkbox] {
  width: 20px;
  height: 20px;
  padding: 0;
  margin-top: 2px;
  border-radius: 5px;
  box-shadow: none;
  flex: 0 0 auto;
  border: 1px solid var(--wc-text);
}
.it-signup-wrap .it-btn::after {
  height: 700px;
  width: 700px;
  transition: 0.5s;
}
.it-signup-text span a {
  display: inline-block;
  margin-left: 20px;
  color: var(--wc-theme-1);
  font-family: var(--wc-ff-semibold);
}
.it-signup-logo {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 45px;
  padding: 90px 20px;
  border-radius: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

  .it-signup-logo {
    margin-right: 20px;
    padding: 90px 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .it-signup-logo {
    margin-right: 0;
    padding: 50px 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {

  .it-signup-logo {
    padding: 80px 40px;
  }
}
.it-signup-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.it-signup-area .form-check label span {
  color: var(--wc-theme-1);
}
.it-signup-forget a {
  font-weight: 600;
  font-size: 14px;
  line-height: 171%;
  letter-spacing: 0.01em;
  color: var(--wc-theme-1);
  font-family: var(--wc-ff-heading);
}
.it-signup-agree label {
  color: var(--wc-white);
}
@media (max-width: 767px) {

  .it-signup-agree label {
    font-size: 14px;
  }
}
.it-signup-agree .form-check-input:checked {
  background-color: var(--wc-black);
  border-color: transparent;
}
.it-signup-agree .form-check-input:focus {
  box-shadow: none;
}
.it-signup-agree .form-check-input.form-check-input[type=checkbox] {
  border-radius: 2px;
  margin-top: 10px;
  height: 15px;
  width: 15px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid var(--wc-gray-2);
}
@media (max-width: 767px) {

  .it-signup-continue-wrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {

  .it-signup-continue-wrap {
    flex-wrap: nowrap;
  }
}
.it-signup-input-eye .eye-open {
  display: none;
}
.it-signup-input {
  position: relative;
}
.it-signup-input-eye {
  position: absolute;
  right: 26px;
  top: 50%;
  cursor: pointer;
  transform: translateY(20%);
}
.it-signup-wrap .it-contact-agree .form-check-input.form-check-input[type=checkbox] {
  width: 20px;
  height: 20px;
  padding: 0;
  margin-top: 2px;
  border-radius: 5px;
  box-shadow: none;
  flex: 0 0 auto;
  border: 1px solid var(--wc-text);
}
.it-signup-wrap .it-contact-agree .form-check {
  gap: 10px;
}

/* ============================================================
   Learning area - Udemy-style layout

   The lesson player at /courses/<course>/lessons/<lesson>/ is Tutor's own
   markup (plugins/tutor/templates/learning-area/). Everything here re-skins it
   from the theme, so a Tutor update replaces the plugin's stylesheet and never
   this file. Every rule is scoped under .tutor-learning-area so none of it can
   reach another page.

   Two things Tutor does that this has to work with rather than against:
   - the header's inner box carries its own --tutor-surface-l1 background, so
     the dark bar has to be set there too or a white strip sits on top of it;
   - Tutor already offsets the header and sidebar for the admin bar, so no
     `top` is set here - overriding it is what made the sidebar ride up under
     the header.
   ============================================================ */

.tutor-learning-area {
    --oit-la-sidebar-width: 340px;
    --oit-la-chrome: #1c1d1f;
    --oit-la-chrome-text: #ffffff;
    --oit-la-ink: #2d2f31;
    --oit-la-muted: #6a6f73;
    --oit-la-rail: #f7f9fa;
    --oit-la-line: #d1d7dc;
    --oit-la-hairline: #eceff1;
}

/* ---- 1. Sidebar on the right ---- */

.tutor-learning-area .tutor-learning-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: var(--oit-la-sidebar-width);
    gap: 0;
    padding: 0;
    background-color: #ffffff;
    border-inline-start: 1px solid var(--oit-la-line);
}

.tutor-learning-area .tutor-learning-area-body {
    padding-inline-start: 0;
    padding-inline-end: var(--oit-la-sidebar-width);
}

.tutor-learning-area .tutor-learning-sidebar-curriculum {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Udemy labels the panel; Tutor has no markup for it, so it is drawn here and
   pinned so it stays put while the curriculum scrolls. */
.tutor-learning-area .tutor-learning-sidebar-curriculum::before {
    content: "Course content";
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    padding: 16px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--oit-la-line);
    font-size: 15px;
    font-weight: 700;
    color: var(--oit-la-ink);
}

/* ---- 2. Top bar ---- */

.tutor-learning-area .tutor-learning-header,
.tutor-learning-area .tutor-learning-header-inner {
    background-color: var(--oit-la-chrome);
}

.tutor-learning-area .tutor-learning-header {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tutor-learning-area .tutor-learning-header-inner {
    border-radius: 0;
    width: 100%;
}

.tutor-learning-area .tutor-learning-header-title,
.tutor-learning-area .tutor-learning-header-title span,
.tutor-learning-area .tutor-learning-header .tutor-btn,
.tutor-learning-area .tutor-learning-header a,
.tutor-learning-area .tutor-learning-header button {
    color: var(--oit-la-chrome-text);
}

.tutor-learning-area .tutor-learning-header svg {
    stroke: currentColor;
}

.tutor-learning-area .tutor-learning-header-title {
    font-size: 15px;
    font-weight: 700;
}

.tutor-learning-area .tutor-learning-header .tutor-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ---- 3. Content column ---- */

/* No cap and no auto margin here. The body already reserves the sidebar's
   width, so centring a 1180px box inside what is left opened a dead band
   between the video and the sidebar. The column now fills its space and the
   reading measure is applied to the panels instead, where it belongs. */
.tutor-learning-area .tutor-learning-area-container {
    max-width: none;
    margin: 0;
}

/* The player sits on black and is height-capped, so a wide monitor does not
   turn the video into the whole page. */
/* Black belongs to the player box itself, never to the wrapper around it.
   Because .tutor-video-player is locked to 16/9 its width and height cannot be
   chosen independently, so capping it always leaves some of the column over -
   and a black wrapper turned that leftover into what looked like a gap. Left as
   the page surface it reads as ordinary margin instead. */
.tutor-learning-area .tutor-lesson-video-wrapper,
.tutor-learning-area .tutor-lesson-image-wrapper {
    background-color: transparent;
    max-width: none;
    border-radius: 0;
}

.tutor-learning-area .tutor-lesson-video,
.tutor-learning-area .tutor-video-player {
    background-color: #000000;
    max-width: none;
    border-radius: 0;
}

/* Full-bleed player: it fills the whole content column, so there is no leftover
   width to show as a band on either side.
   Tutor gives .tutor-video-player `aspect-ratio: 16/9`, which means its height
   follows from its width and the two cannot be set independently - so a
   full-width player is also a tall one, and the tabs below it start further
   down the page. Capping either axis is what previously left a strip over. */
.tutor-learning-area .tutor-video-player {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    overflow: hidden;
}

.tutor-learning-area .tutor-lesson-video video,
.tutor-learning-area .tutor-lesson-video iframe,
.tutor-learning-area .tutor-lesson-feature-image {
    display: block;
    width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* ---- 4. Tab row: underline, directly under the player ---- */

/* Sticky so the sections stay reachable once the comment thread is long, the
   way a course player keeps its chrome in view. */
.tutor-learning-area .tutor-tabs-nav,
.tutor-learning-area .oit-la-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: stretch;
    gap: 28px;
    margin: 0 0 8px;
    padding: 0 32px;
    background-color: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--oit-la-line);
    border-radius: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tutor-learning-area .tutor-tabs-nav::-webkit-scrollbar,
.tutor-learning-area .oit-la-tabs::-webkit-scrollbar {
    display: none;
}

.tutor-learning-area .tutor-tabs-nav button,
.tutor-learning-area .oit-la-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--oit-la-muted);
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease-in-out, border-color .2s ease-in-out;
}

.tutor-learning-area .tutor-tabs-nav button:hover,
.tutor-learning-area .oit-la-tab:hover,
.tutor-learning-area .oit-la-tab:focus-visible {
    color: var(--oit-la-ink);
    background: transparent;
    text-decoration: none;
}

.tutor-learning-area .tutor-tabs-nav button[aria-selected="true"],
.tutor-learning-area .tutor-tabs-nav .tutor-tabs-tab-active,
.tutor-learning-area .oit-la-tab.is-active {
    color: var(--oit-la-ink);
    border-bottom-color: var(--oit-la-brand, var(--oit-la-ink));
    background: transparent;
    font-weight: 700;
}

/* The reading measure. Body text stays comfortable on a wide monitor while the
   player and the tab underline still run the full width of the column. */
.tutor-learning-area .tutor-tab-panel > *,
.tutor-learning-area .tutor-learning-area-container > .tutor-lesson-content ~ * {
    max-width: 1040px;
    margin-inline: auto;
}

.tutor-learning-area .tutor-tab-panel .tutor-p-6 {
    padding: 32px;
}

/* ---- 5. Sidebar sections ---- */

.tutor-learning-area .tutor-learning-nav-topic {
    border-bottom: 1px solid var(--oit-la-line);
}

.tutor-learning-area .tutor-learning-nav-header {
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background-color: var(--oit-la-rail);
    border-radius: 0;
}

.tutor-learning-area .tutor-learning-nav-header-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--oit-la-ink);
}

.tutor-learning-area .tutor-learning-nav-header-summary,
.tutor-learning-area .tutor-learning-nav-header-progress {
    font-size: 12px;
    font-weight: 400;
    color: var(--oit-la-muted);
}

.tutor-learning-area .tutor-learning-nav-body {
    background-color: #ffffff;
}

/* ---- 6. Lesson rows ---- */

.tutor-learning-area .tutor-learning-nav-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border-bottom: 1px solid var(--oit-la-hairline);
    font-size: 14px;
    line-height: 1.45;
    color: var(--oit-la-ink);
    text-align: start;
}

.tutor-learning-area .tutor-learning-nav-item:hover {
    background-color: var(--oit-la-rail);
}

.tutor-learning-area .tutor-learning-nav-item.is-active,
.tutor-learning-area .tutor-learning-nav-item.active {
    background-color: #e8e9eb;
    font-weight: 700;
}

/* ---- 7. Progress block and footer ---- */

.tutor-learning-area .tutor-learning-progress {
    padding: 16px;
    border-bottom: 1px solid var(--oit-la-line);
}

.tutor-learning-area .tutor-learning-area-footer {
    padding: 12px 20px;
    background-color: #ffffff;
    border-top: 1px solid var(--oit-la-line);
}

/* ---- 8. Small screens: sidebar becomes an overlay again ---- */

@media (max-width: 1024px) {
    .tutor-learning-area .tutor-learning-area-body {
        padding-inline-end: 0;
    }

    .tutor-learning-area .tutor-learning-sidebar {
        z-index: 30;
        transform: translateX(100%);
    }

    .tutor-learning-area .tutor-learning-sidebar.is-open {
        transform: translateX(0);
    }

    .tutor-learning-area .tutor-tabs-nav,
    .tutor-learning-area .oit-la-tabs,
    .tutor-learning-area .tutor-tabs-content,
    .tutor-learning-area .tutor-tab-panel {
        padding-inline: 16px;
        gap: 18px;
    }
}

/* ---- 9. Top-bar buttons and progress ----
   Tutor's .tutor-btn-secondary paints itself with --tutor-text-primary, which
   is near-black - unreadable once the bar is dark, which is why "Retake this
   Course" all but disappeared. Both the ghost and secondary buttons are given
   the light-on-dark treatment here instead. */

.tutor-learning-area .tutor-learning-header .tutor-btn-secondary {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--oit-la-chrome-text);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

.tutor-learning-area .tutor-learning-header .tutor-btn-secondary:hover,
.tutor-learning-area .tutor-learning-header .tutor-btn-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.22);
    color: var(--oit-la-chrome-text);
    border-color: rgba(255, 255, 255, 0.45);
    --tutor-button-border-shadow: none;
    box-shadow: none;
}

.tutor-learning-area .tutor-learning-header .tutor-btn-secondary svg {
    stroke: currentColor;
}

/* The progress readout added by the theme's header override. */
.tutor-learning-area .oit-la-progress {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    padding-inline-end: 16px;
    white-space: nowrap;
}

.tutor-learning-area .oit-la-progress-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.tutor-learning-area .oit-la-progress-track {
    display: block;
    width: 140px;
    height: 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.tutor-learning-area .oit-la-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: #22c55e;
    transition: width .3s ease-in-out;
}

/* The buttons already sit at the end of the row, so the progress block gives up
   the auto margin when they are present. */
.tutor-learning-area .oit-la-progress + div {
    margin-inline-start: 0;
}

@media (max-width: 782px) {
    .tutor-learning-area .oit-la-progress-track {
        width: 84px;
    }

    .tutor-learning-area .oit-la-progress-label {
        display: none;
    }
}

/* ---- 10. Student-only chrome: video player and the lesson footer ----

   These two only render for an enrolled user, which is why they still looked
   untouched while the rest of the page was already themed - an admin who is not
   enrolled never sees them.

   The video is plyr wrapping a YouTube embed. Tutor ships plyr's stylesheet
   without setting an accent, so plyr falls back to its own #00b2ff and paints
   the big play button and the control bar bright blue. Pointing
   --plyr-color-main at the theme colour is enough; every plyr rule reads it.

   The footer's Mark as Complete uses --tutor-button-primary-soft, Tutor's pale
   lavender on its blue brand. It is repointed rather than the button rule
   overridden, so the loading, hover and disabled states Tutor already defines
   keep working. */

.tutor-learning-area {
    --oit-la-brand: var(--it-theme-1, #03594e);
    --oit-la-brand-soft: rgba(3, 89, 78, 0.10);
    --oit-la-brand-soft-hover: rgba(3, 89, 78, 0.18);
}

.tutor-learning-area .tutor-video-player,
.tutor-learning-area .plyr {
    --plyr-color-main: var(--oit-la-brand);
    --plyr-video-control-background-hover: var(--oit-la-brand);
}

.tutor-learning-area .tutor-learning-area-footer {
    --tutor-button-primary-soft: var(--oit-la-brand-soft);
    --tutor-button-primary-soft-hover: var(--oit-la-brand-soft-hover);
    --tutor-button-primary-soft-focused: var(--oit-la-brand-soft-hover);
    --tutor-text-brand: var(--oit-la-brand);
    --tutor-icon-brand: var(--oit-la-brand);
}

.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled) {
    background-color: var(--oit-la-brand);
    color: #ffffff;
}

.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled):hover,
.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled):focus {
    background-color: var(--oit-la-brand);
    color: #ffffff;
    filter: brightness(1.15);
}

.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled) svg {
    color: #ffffff;
}

/* The sidebar's own progress bar and the completed ticks read the same brand,
   so the whole student view stays on one colour. */
.tutor-learning-area .tutor-learning-progress .tutor-progress-bar-filled,
.tutor-learning-area .tutor-learning-sidebar .tutor-progress-bar span {
    background-color: var(--oit-la-brand);
}

/* ---- 11. Fullscreen ----

   Tutor hides the sidebar in fullscreen and cancels the space it reserved with
   `padding-inline-start: 0`. Because section 1 moves the sidebar to the end
   side, that rule cancels the wrong edge and a 340px band of empty page stayed
   next to the content. Cancelling the end padding is the whole fix; the
   selector matches Tutor's own so the two stay in step. */

.tutor-learning-area.is-fullscreen .tutor-learning-area-body {
    padding-inline-end: 0;
}

/* ---- 12. Comment panel ----

   Tutor's comment form is a bare textarea on the page background. Giving it a
   card and a real focus ring makes the panel read as a composed section rather
   than an unstyled form, and matches the sidebar's card treatment. */

.tutor-learning-area .tutor-comment-form .tutor-input,
.tutor-learning-area .tutor-comment-form .tutor-text-area {
    padding: 14px 16px;
    background-color: var(--oit-la-rail);
    border: 1px solid var(--oit-la-line);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--oit-la-ink);
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}

.tutor-learning-area .tutor-comment-form .tutor-input:focus,
.tutor-learning-area .tutor-comment-form .tutor-text-area:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--oit-la-brand);
    box-shadow: 0 0 0 3px var(--oit-la-brand-soft);
}

.tutor-learning-area .tutor-tab-panel .tutor-text-medium.tutor-font-semibold {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--oit-la-ink);
}

/* ---- 13. Footer ----

   The footer spans the column, so its buttons are pulled onto the same reading
   measure as the panel above them instead of drifting to the far edges. */

.tutor-learning-area .tutor-learning-area-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
}

/* The reading measure is applied as padding rather than as a max-width on each
   child, so Tutor's own `justify-content: space-between` keeps deciding the
   layout - putting it on the children gave every one of them an auto margin and
   took that decision away. */
.tutor-learning-area .tutor-learning-area-footer[data-lesson] {
    padding-inline: max(24px, (100% - 1040px) / 2);
}

/* Tutor's lesson footer sets `gap: 0` and relies entirely on space-between, so
   once an auto margin enters the row the buttons end up touching. An explicit
   gap keeps them apart whatever the child count. */
.tutor-learning-area .tutor-learning-area-footer[data-lesson] {
    gap: 12px;
}

/* Previous and the toggle stay left, Next stays right, and the auto margins on
   the form recentre the primary action between them. */
.tutor-learning-area .tutor-learning-area-footer[data-lesson] form {
    margin-inline: auto;
}

/* The fullscreen toggle rendered by the theme's footer override. */
.tutor-learning-area .oit-la-expand-btn {
    flex-shrink: 0;
    width: 38px;
    min-width: 38px;
    padding: 0;
    background-color: var(--oit-la-rail);
    border: 1px solid var(--oit-la-line);
    border-radius: 8px;
    color: var(--oit-la-ink);
    box-shadow: none;
}

.tutor-learning-area .oit-la-expand-btn:hover,
.tutor-learning-area .oit-la-expand-btn:focus-visible {
    background-color: #eceff1;
    border-color: #c3cbd1;
    color: var(--oit-la-ink);
    --tutor-button-border-shadow: none;
    box-shadow: none;
}

.tutor-learning-area .oit-la-expand-btn svg,
.tutor-learning-area .oit-la-expand-btn svg path {
    color: inherit;
    stroke: currentColor;
}

/* Tutor's floating corner button is hidden only where the footer copy exists,
   so quiz and sub-page views - which have no lesson footer - keep theirs. */
.tutor-learning-area:has(.tutor-learning-area-footer[data-lesson]) .tutor-expand-btn {
    display: none;
}

/* ---- 14. Buttons ----

   Tutor sets `color` on a button's icon separately from the button's own text
   colour (--tutor-icon-primary, a near-black). Every icon here is a <path
   stroke="currentColor">, so on the dark bar the icon resolved dark-on-dark and
   read as missing rather than as unstyled. Forcing the icon to inherit the
   button's colour is the fix, and it is why setting `stroke` alone did nothing:
   the path already had `stroke="currentColor"`. */

.tutor-learning-area .tutor-learning-header .tutor-btn svg,
.tutor-learning-area .tutor-learning-header .tutor-btn svg path {
    color: inherit;
    stroke: currentColor;
}

/* The bar's one real action, so it is a solid brand button rather than an
   outline that competes with the progress readout beside it. */
.tutor-learning-area .tutor-learning-header .tutor-btn-secondary {
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    background-color: var(--oit-la-brand);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--oit-la-chrome-text);
    box-shadow: none;
}

.tutor-learning-area .tutor-learning-header .tutor-btn-secondary:hover,
.tutor-learning-area .tutor-learning-header .tutor-btn-secondary:focus-visible {
    background-color: var(--oit-la-brand);
    border-color: transparent;
    color: var(--oit-la-chrome-text);
    filter: brightness(1.18);
    --tutor-button-border-shadow: none;
    box-shadow: none;
}

/* Previous / Next are ghost buttons on a white footer, so they read as plain
   text. A filled neutral pill gives them a hit area without pulling attention
   off Mark as Complete between them. */

.tutor-learning-area .tutor-learning-area-footer .tutor-btn-ghost {
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background-color: var(--oit-la-rail);
    border: 1px solid var(--oit-la-line);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--oit-la-ink);
    box-shadow: none;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.tutor-learning-area .tutor-learning-area-footer .tutor-btn-ghost:hover,
.tutor-learning-area .tutor-learning-area-footer .tutor-btn-ghost:focus-visible {
    background-color: #eceff1;
    border-color: #c3cbd1;
    color: var(--oit-la-ink);
    --tutor-button-border-shadow: none;
    box-shadow: none;
}

.tutor-learning-area .tutor-learning-area-footer .tutor-btn-ghost svg,
.tutor-learning-area .tutor-learning-area-footer .tutor-btn-ghost svg path {
    color: inherit;
    stroke: currentColor;
}

.tutor-learning-area .tutor-mark-as-complete-button {
    height: 44px;
    padding-inline: 26px;
    font-weight: 600;
    box-shadow: none;
}

/* ---- 15. Mark as Complete ----

   The lesson's primary action, so it is the one button on the page that carries
   weight: a full pill, a brand-tinted shadow rather than a grey one, and a
   press that actually moves. The check sits in its own translucent disc so the
   button reads as a single object instead of a label with an icon stuck on the
   end - Tutor lays it out with `justify-content: space-between`, which is what
   left the tick floating at the far edge.

   `completed` is set together with `disabled`, so the finished state is styled
   through the disabled selector; left to Tutor it fell back to a flat grey that
   read as broken rather than as done. */

.tutor-learning-area .tutor-mark-as-complete-button {
    gap: 12px;
    min-width: 208px;
    height: 46px;
    padding: 0 8px 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 1px 2px rgba(3, 89, 78, 0.20), 0 10px 24px -10px rgba(3, 89, 78, 0.55);
    transition: transform .15s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}

.tutor-learning-area .tutor-mark-as-complete-button svg {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.20);
}

.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(3, 89, 78, 0.24), 0 16px 30px -12px rgba(3, 89, 78, 0.65);
}

.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(3, 89, 78, 0.20);
}

.tutor-learning-area .tutor-mark-as-complete-button:not(:disabled):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--oit-la-brand);
}




/* Tutor's finished state is `.tutor-lesson-content button...completed`, which
   outweighs a two-class selector, and it pins the tick to the corner with
   `position: absolute` plus `padding-inline-end: 40px`. Styling the tick as a
   disc without undoing that left a circle hanging off the button's edge. These
   selectors carry the same weight, put the tick back in normal flow and keep
   the solid green - a finished lesson should still read as solid, just calmer
   than the action it replaces. */
.tutor-learning-area .tutor-learning-area-footer .tutor-mark-as-complete-button:disabled,
.tutor-learning-area .tutor-learning-area-footer .tutor-mark-as-complete-button.completed {
    padding: 0 8px 0 24px;
    background-color: #16a34a;
    color: #ffffff;
    box-shadow: none;
    cursor: default;
    opacity: 1;
}

.tutor-learning-area .tutor-learning-area-footer .tutor-mark-as-complete-button:disabled svg,
.tutor-learning-area .tutor-learning-area-footer .tutor-mark-as-complete-button.completed svg {
    position: static;
    inset: auto;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.22);
}

/* ---- 16. Footer clearance ----

   Nothing is reserved at the end of the content. Padding there sits *inside*
   the container, so a `bottom: 0` sticky footer settles above it and the
   reserved height shows as a blank strip once the page is scrolled to the end.
   The footer is sticky in Tutor's own stylesheet, so it lifts off the video as
   soon as the page scrolls and needs no clearance of its own. */


/* ---- Course archive sidebar, 992px-1199px ----

   Tutor's tutor-front.min.css turns .tutor-course-filter-container into an
   off-canvas drawer below 1200px (position: fixed; right: -100%). The theme's
   sidebar layout in tutor/archive-course-init.php puts it in a .col-lg-4, which
   is a visible column from 992px - so between 992px and 1199px the column took
   its space while Tutor slid its contents off screen, and the drawer's close
   button is hidden from 992px up, leaving a blank column.

   Scoped to the filter that sits directly in that column, and only to that
   width band: above 1199px Tutor's rule does not apply, and below 992px the
   column stacks and Tutor's drawer behaviour is left exactly as it was. */

@media (min-width: 992px) and (max-width: 1199px) {
    .col-lg-4 > .tutor-course-filter-container {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        z-index: auto;
        width: auto;
        padding: 0;
        background-color: transparent;
        overflow: visible;
        transition: none;
    }
}