.themebg {
    background: rgb(62, 100, 222);
    color: rgb(255, 255, 255);
}

.themebg-hover:hover {
    background: rgb(255, 255, 255);
    color: rgb(62, 100, 222);
}

.themecolor {
    color: rgb(62, 100, 222);
}

.themecolor-hover:hover {
    color: rgb(255, 255, 255);
    background: rgb(62, 100, 222) !important;
}

html, body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background: rgb(250, 250, 250);
}

* {
    font-family: Poppins, sans-serif;
}

.m-0 {
    margin: 0px;
}

.p-0 {
    padding: 0px;
}

.text-end {
    text-align: end;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.headtheme {
    color: rgb(239, 180, 67);
}

.headtheme-hover:hover {
    color: rgb(239, 180, 67);
    border: 1px solid;
}

header h3 {
    font-size: 32px;
    font-weight: 800;
    font-variant: petite-caps;
}

[data-role="page"] {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    overflow: auto;
}

.active[data-role="page"], .active_page[data-role="page"] {
    display: block !important;
    height: calc(-70px + 100vh);
}

.white-round {
    background: rgb(255, 255, 255);
    padding: 8px 12px;
    border-radius: 50%;
}

.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.profile-round {
    font-weight: 700;
    border-radius: 50%;
    text-transform: uppercase;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
}

.profile-section .title {
    margin-left: 0px;
    font-size: 22px;
}

.profile-section .title1 {
    font-size: 25px;
    font-weight: 700;
}

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

.navbar-list .tutor-dashboard-menu-item {
    height: 40px;
    font-size: 17px;
    margin-bottom: 5px;
}

.navbar-list .tutor-dashboard-menu-item a {
    color: rgb(38, 38, 38);
    display: flex;
    align-items: center;
}

.navbar-list .tutor-dashboard-menu-item a .tutor-dashboard-menu-item-icon {
    font-size: 23px;
    padding: 6px;
    color: rgb(62, 100, 222);
}

.navbar-list .tutor-dashboard-menu-item a .tutor-dashboard-menu-item-text {
    padding-left: 8px;
}

.navbar-list .tutor-dashboard-menu-item.active {
    background: rgb(62, 100, 222);
    border-radius: 5px 0px 0px 5px;
    height: 43px;
}

.navbar-list .tutor-dashboard-menu-item.active a .tutor-dashboard-menu-item-text {
    color: rgb(255, 255, 255);
}

.navbar-list .tutor-dashboard-menu-item.active a .tutor-dashboard-menu-item-icon {
    color: rgb(255, 255, 255);
}

.navbar-list .tutor-dashboard-menu-item a:hover {
    text-decoration: none;
}

.navbar-list .tutor-dashboard-menu-item:not(.active):hover {
    background: rgb(231, 235, 248);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgb(241, 241, 241);
}

::-webkit-scrollbar-thumb {
    background: rgb(136, 136, 136);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(85, 85, 85);
}

#Profile-content {
    height: calc(-170px + 100vh);
    overflow: hidden auto;
    padding: 20px 0px 20px 30px;
}

#Profile-content .tutor-dashboard-content .tutor-fs-5 {
    margin: 15px 0px;
    font-size: 22px;
    font-weight: 600;
}

#Profile-content .tutor-dashboard-content .tutor-row {
    display: flex;
    height: 35px;
}

#Profile-content .tutor-dashboard-content .tutor-row .tutor-col-12 {
    width: 30%;
}

#Profile-content .tutor-dashboard-content .tutor-row .tutor-col-12 .tutor-fs-6 {
    font-size: 16px;
}

#Profile-content .tutor-dashboard-content .tutor-row .tutor-col-12 .tutor-fs-6.tutor-color-black {
    font-weight: 500;
}

#Profile-content .tutor-dashboard-content .tutor-row .tutor-col-12.tutor-col-lg-9 {
    width: 70%;
}

.pr-0 {
    padding-right: 0px;
}

.hide {
    display: none;
}

#main-content {
    padding: 20px 0px 0px 30px;
    height: calc(-70px + 100vh);
    overflow: hidden auto;
}

#main-content .tutor-dashboard-content .tutor-fs-5 {
    margin: 15px 0px;
    font-size: 22px;
    font-weight: 600;
}

.tutor-card {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    position: relative;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-width: 0px;
    overflow-wrap: break-word;
    height: 250px;
    justify-content: space-around;
}

.tutor-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 16px 20px;
    border-radius: 5px 5px 0px 0px;
}

.tutor-card-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
}

.tutor-card-body {
    flex: 1 1 auto;
    padding: 20px;
}

.tutor-card-footer {
    padding: 16px 20px;
    border-radius: 0px 0px 5px 5px;
}

.tutor-card-footer:not(.tutor-no-border) {
    border-top: 1px solid rgb(221, 221, 221);
}

.tutor-card .tutor-d-flex {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.tutor-card .tutor-d-flex .tutor-round-box {
    width: 60px;
    height: 60px;
    background: rgb(231, 235, 248);
    border-radius: 50%;
    font-size: 30px;
    color: rgb(62, 100, 222);
    flex: 1 1 0%;
    text-align: center;
    padding: 9px 4px;
}

.tutor-card .tutor-d-flex .tutor-fs-3 {
    font-size: 25px;
    font-weight: 500;
    padding-top: 15px;
}

.tutor-card .tutor-d-flex .tutor-fs-7 {
    font-size: 18px;
    padding-top: 10px;
}

.loader_Wrapper {
    display: block;
    position: absolute;
    z-index: 99999999;
    inset: 0px;
    background: rgba(0, 0, 0, 0.2);
}

.spinner {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    z-index: 1055;
}

.spinner > div {
    width: 22px;
    height: 22px;
    background-color: rgb(240, 78, 35);
    border-radius: 100%;
    display: inline-block;
    animation: 1.4s ease-in-out 0s infinite normal both running sk-bouncedelay;
}

.spinner .bounce1 {
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.tutor-course-progress-item.tutor-card.tutor-mb-20 img {
    width: 100%;
    height: 100%;
}

#inprogress-content {
    padding: 0px 25px;
}

#inprogress-content .tutor-card-image-left {
    width: 100%;
    border-radius: 10px;
    max-height: 175px;
}

#inprogress-content .tutor-card {
    height: 200px;
    margin-bottom: 20px;
}

#inprogress-content .tutor-col-lg-4 {
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#inprogress-content .tutor-col-lg-4 .tutor-ratio {
    padding: 10px 25px;
}

#inprogress-content .tutor-card .tutor-d-flex {
    flex-direction: row;
}

.tutor-color-muted {
    color: rgb(141, 141, 141);
}

#inprogress-content .tutor-card .tutor-d-flex span.tutor-color-muted {
    padding-right: 10px;
}

#Courses-content {
    padding: 20px 0px 0px 15px;
    height: calc(-70px + 100vh);
    overflow: hidden auto;
}

div#Courses-content .course-head {
    margin: 15px 0px;
    font-size: 22px;
    font-weight: 600;
}

.nav-tabs li a {
    border: none;
    background: transparent;
    color: rgb(22, 22, 22);
    font-size: 18px;
    font-weight: 500;
}

.nav-tabs li.active a {
    border-top: none;
    border-right: none;
    border-left: none;
    border-image: initial;
    border-bottom: 2px solid rgb(62, 100, 222);
    background: transparent;
    color: rgb(62, 100, 222);
    font-size: 18px;
    font-weight: 500;
}

#inprogress-content .tutor-card-body .tutor-row.tutor-align-center {
    display: flex;
    margin-top: 5px;
}

div#inprogress-content .progress {
    height: 10px;
    margin-top: 7px;
    margin-right: 10px;
}

#Courses-content .tutor-card img {
    height: 100%;
    width: 100%;
    border-radius: 5px 5px 0px 0px;
    max-height: 165px;
}

#Courses-content .tutor-card {
    height: auto;
    margin: 10px;
}

#Courses-content .tab-content {
    padding-top: 10px;
}

#Courses-content .tutor-course-name {
    height: 60px;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0px;
    display: flex;
    align-items: center;
}

#Courses-content .tutor-course-progress .tutor-d-flex {
    flex-direction: row;
    justify-content: space-between;
}

#Courses-content .progress {
    height: 10px;
    margin-top: 10px;
}

#Courses-content .list-item-button {
    display: flex;
    justify-content: center;
    border: 1px solid rgb(62, 100, 222);
    padding: 7px;
    border-radius: 5px;
    width: 80%;
}

#Courses-content .list-item-button a {
    color: rgb(62, 100, 222);
    font-size: 14px;
    font-weight: 500;
}

#Courses-content .list-item-button:hover {
    background: rgb(62, 100, 222);
}

#Courses-content .list-item-button:hover a {
    color: rgb(255, 255, 255);
}

#Courses-content .tutor-course-name a {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

#Courses-content .tutor-mt-24 {
    display: flex;
    justify-content: center;
    position: relative;
    top: -10px;
}

header.tutor-course-details-header {
    margin-top: 20px;
    margin-bottom: 30px;
}

header.tutor-course-details-header .tutor-course-details-title {
    font-size: 22px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 0px;
    border-bottom: 1px solid rgb(221, 221, 221);
}

#CourseView-content iframe, #CourseView-content .tutor-video-player img {
    width: 100%;
    height: 400px;
}

div#CourseView-content .tutor-card {
    display: block;
    background: rgb(244, 246, 249);
    height: 100%;
}

div#CourseView-content .tutor-card h3 {
    margin: 0px;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 0px;
}

div#CourseView-content .tutor-card .tutor-d-flex {
    flex-direction: row;
    justify-content: space-between;
}

div#CourseView-content .tutor-card .tutor-btn-block {
    padding: 8px;
    background: rgb(62, 100, 212);
    margin: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    border: 2px solid;
    font-weight: 500;
}

div#CourseView-content .tutor-card .tutor-btn-block:hover {
    background: rgb(255, 255, 255);
    border: 2px solid rgb(62, 100, 212);
    color: rgb(62, 100, 212);
    text-decoration: none;
}

div#CourseView-content .tutor-card .progress {
    height: 10px;
    margin: 10px 0px 30px;
}

div#CourseView-content .tutor-card .tutor-d-flex span.tutor-enrolled-info-date {
    font-size: 14px;
    font-weight: 600;
    color: green;
}

div#CourseView-content .tutor-card .tutor-d-flex.enrolment-expire-info {
    margin-top: 10px;
}

div#CourseView-content .tutor-card .tutor-d-flex.enrolment-expire-info {
    margin-top: 10px;
}

div#CourseView-content .tutor-card .tutor-card-footer {
    background: rgb(255, 255, 255);
}

div#CourseView-content .tutor-card .tutor-card-footer .tutor-d-flex {
    justify-content: flex-start;
}

div#CourseView-content .tutor-card .tutor-card-footer ul {
    padding: 0px;
}

div#CourseView-content .tutor-card .tutor-card-footer .tutor-d-flex .tutor-color-black {
    padding: 5px 10px 0px 0px;
}

.tutor-course-details-instructors {
    border: 1px solid rgb(221, 221, 221);
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}

.tutor-course-details-instructors h3 {
    margin: 0px;
    font-size: 18px;
    padding: 10px 0px;
}

.tutor-video-player {
    position: relative;
    height: 400px;
}

.youtube-blocker {
    height: 65px;
    width: 65px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 600;
    border: 1px solid rgb(221, 221, 221);
    position: absolute;
    top: 10px;
    right: 20px;
    color: rgb(239, 180, 67);
    /* display: none; */
}

ul.nav.nav-tabs li.active a {
    color: rgb(62, 100, 212);
    border-top: none;
    border-right: none;
    border-left: none;
    border-image: initial;
    border-bottom: 2px solid rgb(62, 100, 212);
    background: transparent;
}

h2.about-course {
    font-size: 20px;
    font-weight: 600;
}

.tutor-course-details-ratings {
    padding: 0px 20px;
}

span.backbutton {
    background: rgb(62, 100, 212);
    padding: 10px 30px;
    font-size: 18px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    text-transform: capitalize;
    border-radius: 5px;
}

#Lessons-content .header-content-accordian {
    height: calc(-71px + 100vh);
    overflow: auto;
    border-right: 1px solid rgb(221, 221, 221);
}

#Lessons-content .header-content {
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 500;
    justify-content: space-between;
    padding-right: 20px;
}

#Lessons-content .header-content-accordian .panel-heading {
    background: rgb(239, 241, 246);
    color: rgb(62, 100, 212);
    border-right: none rgb(239, 241, 246);
    border-left: none rgb(239, 241, 246);
    border-image: initial;
    border-top: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 20px 10px;
    border-radius: 0px !important;
}

#Lessons-content .header-content-accordian .panel-default {
    margin-top: 0px;
    background: rgb(239, 241, 246);
    border: none;
}

#Lessons-content .header-content-accordian .panel-body {
    background: rgb(255, 255, 255);
    border: none;
    padding: 0px;
}

.float-inline-end {
    float: inline-end;
}

#Lessons-content .header-content-accordian .topic-card {
    padding: 10px 30px;
    margin: 0px;
    font-weight: 555;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.area-header-actions {
    height: 50px;
    background: rgb(62, 100, 212);
}

#Lessons-content .header-content-accordian .panel-heading a {
    font-size: 16px;
    font-weight: 700;
}

#Lessons-content .header-content-accordian .topic-card.active {
    background: rgb(239, 241, 246);
    margin: 10px 0px;
    color: rgb(62, 100, 212);
    align-items: center;
}

#Lessons-content .header-content-accordian .topic-card span:last-child {
    border: 3px solid rgb(183, 183, 183);
    padding: 1px 6px;
    border-radius: 50%;
    height: 30px;
    margin-top: 10px;
}

#Lessons-content .header-content-accordian .topic-card.active span:last-child {
    border-color: rgb(62, 100, 212);
    background: rgb(62, 100, 222);
    color: rgb(255, 255, 255);
}

.area-header-actions .col-sm-6 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
}

.area-header-actions .col-sm-6:last-child {
    justify-content: end;
}

.area-header-actions .col-sm-6:first-child span {
    font-size: 20px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    text-transform: capitalize;
}

span.mark-close {
    background: transparent;
    padding: 7px 10px;
    border-radius: 5px;
    margin-right: 40px;
    border: 3px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    font-weight: 500;
}

span.mark-close span {
    border: 1px solid rgb(255, 255, 255);
    padding: 1px 5px;
    margin-right: 5px;
    border-radius: 50%;
}

span.back-close {
    background: rgb(255, 255, 255);
    padding: 7px 15px;
    font-weight: 600;
    border-radius: 5px;
}

#Lessons-content .header-content-accordian .topic-card span:last-child i.fa.addclasscheck {
    padding: 7px;
}

#Lessons-content .header-content-accordian .topic-card span:last-child i.fa.fa-check {
    padding: 0px;
}

.lesson-body .image-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.course-about {
    padding: 20px;
    border-top: 1px solid rgb(221, 221, 221);
    margin-top: 20px;
}

.course-about .head-about {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0px;
}

div.lesson-body, div.topic-body {
    overflow: hidden auto;
    height: calc(-180px + 100vh);
}

div.lesson-body:empty, div.topic-body:empty {
    height: 0px;
}

.quiz-master {
    width: 100%;
    height: 100%;
}

.quiz-master {
}

.quiz-master-head {
    height: 70px;
    padding: 20px 80px;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
}

.quiz-master-footer {
    height: 70px;
}

.quiz-master-body {
    height: calc(100% - 140px);
}

.panel-quiz {
    height: 100%;
}

.panel-quiz .panel-quiz-qus {
    padding: 20px 100px;
}

.panel-quiz .panel-quiz-ans-sec {
    padding: 20px 100px;
}

.panel-quiz .panel-quiz-footer {
    height: 15%;
    display: flex;
    justify-content: space-around;
    padding: 20px 100px;
}

.panel-quiz .panel-quiz-footer .prev-button, .panel-quiz .panel-quiz-footer .submit-button {
    background: red;
    padding: 10px;
    height: fit-content;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
}

.panel-quiz .panel-quiz-footer .submit-button {
    background: rgb(62, 100, 212);
    color: rgb(255, 255, 255);
}

.panel-quiz .panel-quiz-footer .prev-button {
    background: rgb(255, 255, 255);
    color: rgb(62, 100, 212);
    border: 1px solid rgb(62, 100, 212);
}

.submit-button.green-color {
    background: green !important;
}

.panel-quiz .panel-quiz-qus span {
    font-size: 22px;
    font-weight: 600;
}

.addmember {
    padding: 30px;
}

div#addMember-page .main-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.addmember .mb-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.addmember .mb-3 label {
    width: 30%;
}

.addmember .mb-3 .form-group {
    width: 70%;
}

#addMember-page .btn {
    float: inline-end;
}

.showpass {
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
    font-size: 18px;
}

.showpass span {
    padding: 2px 0px 2px 15px;
}

button.actionbtn {
    background: rgb(221, 221, 221);
    border: navajowhite;
    padding: 8px 13px;
    border-radius: 5px;
}

div#History-view {
    padding: 20px;
}

div#History-content {
    padding: 20px;
}

table.table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
    border: 1px solid rgb(221, 221, 221);
}

section.woocommerce-customer-details {
    border: 1px solid rgb(221, 221, 221);
    padding: 10px 30px;
}

button.back-blue {
    background: rgb(62, 100, 212);
    border: none;
    color: rgb(255, 255, 255);
    padding: 10px 15px;
    font-size: 20px;
    margin-bottom: 20px;
}

div#Members-view {
    padding: 20px;
}

div#Members-view .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-24 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(221, 221, 221);
    padding-bottom: 8px;
}

div#Members-view .tutor-row.tutor-mb-24 .tutot-col-12.tutor-col-sm-5 {
    width: 40%;
}

div#Members-view .tutor-row {
    display: flex;
    font-size: 16px;
    margin: 10px;
}

.tutor-col-12.tutor-col-sm-5.tutor-col-lg-3 {
    width: 40%;
    font-weight: 500;
}

.memberhead {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    justify-content: space-between;
    padding: 20px 0px;
}

.addmember-btn {
    padding: 6px;
    background: orange;
    font-weight: 500;
    font-size: 14px;
    margin-right: 5%;
    border-radius: 5px;
    text-align: center;
}

.addmember-btn:hover {
    background: rgb(255, 255, 255);
    border: 1px solid orange;
    color: orange;
}

.one-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

footer.footer-buttons {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 0px 0px 0px, rgba(14, 30, 37, 0.32) 12px 1px 10px 0px;
}

footer.footer-buttons button {
    padding: 5px;
    width: 100px;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: rgb(0, 0, 0);
}

.show-results {
    padding: 30px;
}

.quiz-head {
    font-size: 21px;
    font-weight: 600;
    margin: 20px 0px;
}

.quiz-answer .quiz-answer-head {
    font-size: 18px;
    font-weight: 500;
    color: rgb(255, 59, 59);
    margin: 10px 0px;
}

.quiz-answer-footer {
    font-size: 16px;
    font-weight: 500;
    color: green;
}

footer.footer-buttons button:first-child {
    background: lightsteelblue;
    margin-right: 20px;
}

footer.footer-buttons button:last-child {
    background: lightsteelblue;
    margin-left: 20px;
}

.actions-view {
    border: 1px solid rgb(221, 221, 221);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    align-items: center;
}

.actions-view button {
    font-weight: 400;
    font-size: 15px;
    background: rgb(225, 225, 225);
    border: 1px solid rgb(221, 221, 221);
    border-radius: 5px;
    line-height: 25px;
}

.actions-view:last-child button {
    background: rgb(62, 100, 212);
    color: rgb(255, 255, 255);
}

.actions-view div.last-child {
    width: 50%;
    font-weight: 500;
}

.actions-view div.first-child {
    width: 50%;
}

.actions-view div.last-child .progress {
    height: 10px;
    margin-bottom: 0px;
}

.selecttypediv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
}

.selecttypediv input {
    margin: 10px;
}

div#changepassword-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.changepass button {
    background: rgb(62, 100, 212);
    color: rgb(255, 255, 255);
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
}

div#members_wrapper {
    width: 97%;
}

.certificate-header {
    height: 70px;
    border-bottom: 1px solid rgb(221, 221, 221);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 80px;
}

.certificate-header div:first-child {
    font-size: 24px;
    font-weight: 500;
}

.certificate-header div:last-child span {
    background: rgb(62, 100, 212);
    color: rgb(255, 255, 255);
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
}

.certificate-header div:last-child span:first-child {
    margin-right: 20px;
}

.activity-feed {
    padding: 15px;
    list-style: none;
}

.activity-feed .feed-item {
    position: relative;
    padding-bottom: 20px;
    padding-left: 30px;
    border-left: 2px solid rgb(228, 232, 235);
}

.activity-feed .feed-item:last-child {
    border-color: transparent;
}

.activity-feed .feed-item::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(243, 113, 103);
}

.activity-feed .feed-item .date {
    display: block;
    position: relative;
    top: -5px;
    color: rgb(2, 68, 153);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
}

.activity-feed .feed-item .text {
    position: relative;
    top: -3px;
    font-weight: 500;
}

.activity-feed .feed-item:nth-child(2n)::after {
    background: rgb(196, 104, 104);
    border: none;
}

.activity-feed .feed-item:nth-child(2n+1)::after {
    background: rgb(112, 112, 255);
    border: none;
}

table.dataTable thead .sorting_asc::after {
    display: none !important;
}

table.dataTable thead .sorting::after {
    display: none !important;
}

.total-users {
    display: block;
}

.total-users div span:first-child {
    font-weight: 500;
}

span.updatemember-btn {
    padding: 6px;
    background: rgb(238, 216, 174);
    font-weight: 500;
    font-size: 14px;
    margin-right: 5%;
    border-radius: 5px;
    text-align: center;
}

span.import-btn {
    padding: 6px;
    background: rgb(190, 192, 255);
    font-weight: 500;
    font-size: 14px;
    margin-right: 5%;
    border-radius: 5px;
    text-align: center;
}

input#formFile {
    padding: 0px;
    margin-bottom: 10px;
}

input#formFile::file-selector-button {
    padding: 8px;
    background: rgb(209, 209, 209);
    border: none;
}

input#formFile:focus-visible {
    outline: none;
}

input#formFile:focus {
    outline: none;
}

.select-tag {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
}

.select-tag label {
    font-weight: 500;
}

.memberslist {
    border: 1px solid rgb(221, 221, 221);
    padding: 10px 20px;
    height: 65%;
    margin-bottom: 11px;
    overflow: auto;
}

.memberslist label {
    font-weight: 400;
}

div#share-content {
    width: 350px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 20px;
    margin: 0px auto;
    position: relative;
    top: 20%;
}

div#share-content p {
    font-size: 16px;
    font-weight: 600;
}

div#share-content .field {
    border: 1px solid rgb(221, 221, 221);
    padding: 5px;
}

div#share-content .field input {
    border: none;
    width: 74%;
}

div#share-content .field button {
    background: darkviolet;
    color: rgb(255, 255, 255);
    border: none;
    padding: 6px;
    border-radius: 5px;
}

div#share-content .field input:focus-visible {
    outline: navajowhite;
    user-select: text;
}

.course-title {
    font-size: 13px;
    font-weight: 500;
    margin-top: 10px;
}
.tutor-video-player, .tutor-video-player iframe{
    height: 400px;
    width: 100%;
}
.fullscreen_video{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100%  !important;
}
.fullscreen_video iframe{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100%  !important;
}

.fullscreen_icon {
    display: block !important;
    width: 50px;
    height: 50px !important;
    top: 15px;
    right: 20px;
    padding: 3px;
    text-align: center;
    font-size: 20px;
    color: #333;
    display: flex !important;
}
@media only screen and (max-width: 400px) {
    header#header-main .col-sm-2.col-xs-1.p-0{
        position: absolute;
        top: 41px;
        right: 0;
        text-align: end;
        z-index: 9999;
        margin-right: 10px;
    }
    header#header-main .col-sm-2.col-xs-1.p-0 span{
        background: #ddd;
        padding: 5px;
        font-size: 13px;
        border-radius: 5px;
        font-weight: 600;
    }    
    header#header-main .col-sm-4.col-xs-1.p-0 {
        position: absolute;
        left: 120px;
        top: 0;
    }
}
@media only screen and (max-width: 768px) {
    #inprogress-content .tutor-card {
        height: 420px;
    }

    #CourseView-content iframe, #CourseView-content .tutor-video-player img {
        height: 200px;
    }

    .tutor-video-player, .tutor-video-player iframe {
        height: 200px !important;
    }
    .tutor-video-player iframe{
        width: 100vw;
    }
    .remove-side.video-preview {
        height: 200px !important;
    }

    .col-lg-2.col-md-3.col-sm-4.col-xs-12 {
        height: 380px !important;
    }

    .col-lg-2.col-md-3.col-sm-4.col-xs-12 {
        height: 380px !important;
    }

    .active_page[data-role="page"] {
    }

    #main-content {
        padding: 0px;
    }

    #Profile-content {
        padding: 0px;
    }

    #inprogress-content {
        padding: 0px 20px 0px 0px;
    }

    #Courses-content {
        padding: 0px;
    }

    #Profile-content .tutor-dashboard-content .tutor-row .tutor-col-12 {
        width: 40%;
    }

    header h3 {
        font-size: 28px;
    }

    div#addMember-page .main-body .addmember {
        margin-top: 35px;
    }

    div#addMember-page .main-body span.backbutton {
        right: 0px !important;
        position: fixed !important;
        top: 80px !important;
    }

    div#attendance-modal {
        grid-template-columns: 1fr !important;
    }

    #main-page .tutor-card-body {
        padding: 0px;
    }

    #main-page .tutor-card-body .tutor-col {
        width: 60% !important;
    }

    header#header-main .col-sm-12 {
        padding: 0px;
    }

    header#header-main .col-sm-5.col-xs-6.p-0 {
        width: 120px !important;
    }

    header#header-main .col-sm-4.col-xs-1.p-0 {
        width: calc(100% - 120px) !important;
    }

    #main-page #main-content {
        padding-bottom: 50px;
    }

    #Courses-page .col-lg-12.col-md-12.col-sm-12.col-xs-12 {
        padding: 0px;
    }

    #Courses-page .col-lg-12.col-md-12.col-sm-12.col-xs-12 .tabcontent {
        height: auto !important;
        padding-bottom: 50px;
    }

    #Courses-page .tablinks {
        padding: 0px 5px;
        font-size: 12px;
        height: 42px;
        border-right: 1px solid rgb(221, 221, 221) !important;
    }

    #Courses-page span.themecolor.themecolor-hover.white-round {
        top: 0px !important;
    }

    div#CourseView-page header.tutor-course-details-header .tutor-course-details-title {
        flex-direction: column;
        padding: 0px 0px 10px;
    }

    div#CourseView-page header.tutor-course-details-header .tutor-course-details-title > div {
        width: 100% !important;
    }

    #Lessons-content .header-content-accordian {
        display: none;
    }

    .menubarclose {
        display: block !important;
    }

    .menubar-close {
        padding-right: 20px;
        color: rgb(255, 255, 255);
        padding-left: 8px;
        display: block !important;
        font-size: 18px !important;
    }

    div#Lessons-page {
        overflow: hidden;
    }

    div#Lessons-page .area-header-actions {
        height: 80px;
    }

    div#Lessons-page .area-header-actions .col-sm-12, div#Lessons-page .area-header-actions .col-sm-6 {
        padding: 0px;
    }

    div#Lessons-page .area-header-actions .col-sm-6 {
        justify-content: flex-start;
        font-size: 13px;
        height: auto;
        padding: 5px;
    }

    div#Lessons-page .area-header-actions .col-sm-6 span:first-child {
        font-size: 13px;
    }

    div#Lessons-page div.lesson-body, div#Lessons-page div.topic-body {
        height: calc(-270px + 100vh) !important;
    }

    .quiz-master-head {
        padding: 10px !important;
        height: auto !important;
    }

    #Courses-page .Courses-body .row.m-0 > .col-sm-12 {
        padding: 0px;
    }

    .quiz-master-body {
        height: auto !important;
    }

    .panel-quiz-qus {
        padding: 10px !important;
    }

    .panel-quiz-qus span {
        font-size: 17px !important;
    }

    .panel-quiz-ans-sec {
        padding: 20px !important;
        font-size: 12px !important;
    }

    .panel-quiz .panel-quiz-footer .submit-button, .panel-quiz .panel-quiz-footer .prev-button {
        padding: 7px;
        margin-bottom: 8px;
        font-size: 11px !important;
    }
    .panel-quiz .panel-quiz-footer .prev-button, 
    .panel-quiz .panel-quiz-footer .submit-button {
        height: 30px !important;
    }
    .panel-quiz .panel-quiz-footer{
        padding: 0 !important;
    }
}

.panel-quiz .panel-quiz-footer .prev-button, 
.panel-quiz .panel-quiz-footer .submit-button {
    height: 45px !important;
}

.menubarclose {
    display: none;
}

.youtube-blocker1 {
    height: 60px;
    width: 180px;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 600;
    border: 1px solid rgb(221, 221, 221);
    position: absolute;
    left: 0px;
    top: 340px;
    display: none;
    color: rgb(239, 180, 67);
    display: none;
}

span.share-btn-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 30px;
    width: 30px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    text-align: center;
    padding-top: 3px;
    font-size: 18px;
    padding-right: 3px;
    margin: 5px 5px 0px 0px;
}

.youtube-blocker2 {
    height: 50px;
    width: 130px;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 600;
    border: 1px solid rgb(221, 221, 221);
    position: absolute;
    bottom: 2px;
    right: 0px;
    color: rgb(239, 180, 67);
    /* display: none; */
}

.youtube-blocker2 img {
    height: 40px !important;
}

.tab {
    overflow: hidden;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: all 0.3s ease 0s;
    font-size: 17px;
}

.tab button:hover {
    background-color: rgb(221, 221, 221);
}

.tab button.active {
    background-color: rgb(62, 100, 222);
    color: rgb(255, 255, 255);
}
.modal-backdrop.fade.in {
    z-index: 999999;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-right: 1px solid rgb(204, 204, 204);
    border-bottom: 1px solid rgb(204, 204, 204);
    border-left: 1px solid rgb(204, 204, 204);
    border-image: initial;
    border-top: none;
    height: calc(-145px + 100vh);
    overflow: auto;
}

.notifications-card {
    min-height: 270px;
    border-radius: 10px;
    background: rgb(241, 241, 241);
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.notifications-card i {
    position: relative;
    top: -20px;
    left: 0px;
    font-size: 40px !important;
}

.notifications-card td {
    font-size: 15px;
    text-align: center;
    padding: 0px 25px;
}

.notifications-card table {
    margin: 0px auto;
}

.notifications-card table i {
    font-size: 23px !important;
    position: unset !important;
}

.notifications-card th {
    text-align: center;
    padding: 0px 25px;
}

div#attendance-modal {
    max-height: calc(-220px + 100vh);
    width: 100%;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 10px;
}

.carda {
    background: rgb(255, 255, 255);
    padding: 5px;
    margin: 5px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

div#takeAttendance-Modal .modal-body {
    background: rgb(241, 241, 241);
    border-radius: 0px 0px 10px 10px;
    padding: 0px;
}

span#welcometitle {
    font-size: 14px;
    font-weight: 600;
    color: rgb(70, 112, 16);
}

span#welcome {
    font-size: 12px;
}

div#attendance-modal table {
    background: rgb(255, 255, 255);
}

div#attendance-modal .header {
    display: flex;
    justify-content: flex-end;
    padding: 5px 10px;
    font-size: 14px;
    border-bottom: 1px solid rgb(221, 221, 221);
    background: rgb(255, 255, 255);
    font-weight: 600;
}

div#attendance-modal table tr td, div#attendance-modal table tr th {
    text-align: center;
    padding: 5px;
}

.header-content-accordian.active {
    display: block !important;
}

.menubar-close {
    display: none;
}

.tutor-video-player a {
    position: absolute;
    top: -30px;
    background: #3e64d4;
    color: #fff;
    padding: 5px;
    right: 0;
    border-radius: 5px;
}
div#attendance-modal.d-fleximportant{
    grid-template-columns: 1fr !important;
}
.col-sm-2.col-xs-1.p-0 span {
    background: #ddd;
    padding: 5px;
    border-radius: 5px;
    font-weight: 600;
}
@media screen and (max-width: 800px) {
	section.content-container.scroll-content{
		overflow: auto;
		width: 100%;
	}
    table.sidrespon {
      border: 0;
    }
  
    table.sidrespon caption {
      font-size: 1.3em;
    }
    
    table.sidrespon thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    table.sidrespon tbody{
		
	display: flex;
			
	column-gap: 10px;
	}
    table.sidrespon tr {
      border: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
      background: #f6f6f6;
      display: block !important;
      width: 300px;
    }
	.content-container .purchase-history tbody tr:nth-child(even){
		background: #f6f6f6;
	}
    
    table.sidrespon td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }
    
    table.sidrespon td::before {
      /*
      * aria-label has no advantage, it won't be read inside a table.sidrespon
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
    
    table.sidrespon td:last-child {
      border-bottom: 0;
    }
	span.next-prev0{
		text-align: center;
		display: block !important;
		background: #ddd;
		width: 35px;
		font-size: 25px;
		border-radius: 10px;
		margin-bottom: 10px;
		float: left;
		position: sticky;
		left: 0;
	}
	span.next-prev1{
		text-align: center;
		display: block !important;
		float: right;
		background: #ddd;
		width: 35px;
		font-size: 25px;
		border-radius: 10px;
		margin-bottom: 10px;
		position: absolute;
		left: 86vw;
	}

}
div#report .col-xs-12 > button {
    border: none !important;
}
span.next-prev.next-prev1 {
    display: none;
}

span.next-prev.next-prev0 {
    display: none;
}
.modal {
    z-index: 9999999 !important;
    top: 40px !important;
}
div#categoryScroll {
    height: calc(100vh - 270px);
    overflow: hidden auto;
    padding: 0px 20px;
}

div#categoryScroll .layout_card {
    border: 1px solid #ddd;
    padding: 10px;
}
.newcardstyle{
    background-color: #fff !important;
    margin: 0 0 3px -1px !important;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.47);
    border-radius: 3px;
    border-bottom: 1px hidden #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.newcardstyle p,.newcardstyle span {
    margin: 0;
    background: transparent !important;
    font-weight: 600;
}
.newcardstyle p{
    font-weight: 500;
}
[id*="Scroll"].modal-body {
    overflow: auto;
    height: calc(100vh - 270px);
    padding: 0px 20px;
}

[id*="Scroll"].modal-body .layout_card {
    border: 1px solid #ddd;
    padding: 5px 0px;
}
.col-sm-6.creatNameWidth {
    padding: 0;
}
[id*="Scroll"].modal-body .form-group.margin-0 {
    margin: 0;
}

[id*="Scroll"].modal-body .radio.text-center {
    margin: 0;
}
.modal-dialog span.font-16.color-theme.bold {
    font-weight: 600;
}
.row-c {
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #ddd;
}


.scroll-content .sidresponbtn1{
    display: none !important;
}
section.content-container.scroll-content {
    overflow: auto;
    height: calc(100vh - 180px);
}
@media screen and (max-width: 800px) {
    table.table.sidrespon1 tr th,table.table.sidrespon1 tr td {
        display: none;
    }
    table.table.sidrespon1 tr th:nth-child(2), table.table.sidrespon1 tr td:nth-child(2),
    table.table.sidrespon1 tr th:nth-child(3), table.table.sidrespon1 tr td:nth-child(3),
    table.table.sidrespon1 tr th:nth-child(5), table.table.sidrespon1 tr td:nth-child(5){
        display: table-cell;
    }
}
.htmlRowUI table {
    display: block;
}

.htmlRowUI table tr td {background: none;padding: 10px 0;font-size: 12px;}

.htmlRowUI table tr {
    background: none !important;
    border: none !important;
    max-width: 500px;
    width: -webkit-fill-available !important;
    margin: 0 auto;
}

.htmlRowUI {
    height: calc(100vh - 170px);
    overflow: auto;
    padding: 10px;
}

table.sidresponfull {
border: 0;
}

table.sidresponfull caption {
font-size: 1.3em;
}

table.sidresponfull thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.sidresponfull tbody{
    
display: flex;
        
column-gap: 10px;
}
table.sidresponfull tr {
border: 3px solid #ddd;
display: block;
margin-bottom: .625em;
background: #f6f6f6;
display: block !important;
width: 300px;
}
.content-container .purchase-history tbody tr:nth-child(even){
    background: #f6f6f6;
}

table.sidresponfull td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}

table.sidresponfull td::before {
/*
* aria-label has no advantage, it won't be read inside a table.sidresponfull
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}

table.sidresponfull td:last-child {
border-bottom: 0;
}
.dataTables_length {
    visibility: hidden;
    height: 10px;
}

.dataTables_filter {
    margin-top: 10px;
    margin-right: 10px;
}
.remove-side.video-preview {
    position: absolute;
    background: transparent;
    top: 0;
    height: 400px;
    width: 100%;
}
.dataTables_wrapper tr th {
    color: #586525;
}

.dataTables_wrapper .pagination>.active>a,
.pagination>.active>a:focus, .pagination>.active>a:hover, 
.pagination>.active>span, .pagination>.active>span:focus, 
.pagination>.active>span:hover {
	background: #586525;
	border-color: #586525;
	color: #fff !important;
}

.dataTables_wrapper .pagination>li>a, .dataTables_wrapper .pagination>li>span {
    color: #586525 !important;
}
.modal.in .modal-dialog {
    max-width: 90vw;
}
.Extension-item {
    padding: 10px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.Participant-item {
    padding: 10px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}

.Participant-item span:last-child {
    background: blue;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}
.Participant-item.Participant-item1 {
    flex-direction: column;
}
.Participant-item1 span:last-child {
    background: transparent;
    color: #333;
    padding: 0;
}

.modal .modal-body {
    max-height: 70vh;
    overflow: hidden auto;
}
.Participant-item1 span:last-child {
    background: transparent;
    color: #333;
    padding: 0;
}

.modal .modal-body {
    max-height: 70vh;
    overflow: hidden auto;
}
.customPDfViewer {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 65px);
    z-index: 99999999;
    background: #ffffff59;
}

.customPDfViewer iframe {height: calc(100% - 42px);}

.customPDfViewer1 {
    background: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    align-items: center;
}
span.viewerrowd {
    height: 40px;
    width: 40px;
    display: block;
    background: white;
    position: absolute;
    right: 10px;
    top: 56px;
}
span.timer {
    margin-right: 25px;
    font-weight: 600;
    font-size: 25px;
    color: #fff;
}
span.timer1 {
    color: #333;
}
span.complete-box , .player-box{
    margin-right: 20px;
    padding: 5px;
    border-radius: 5px;
    font-size: 18px;
    background: #ddd;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
span.player-box {
    color: #9C27B0;
    border: 1px solid #9C27B0;
    padding: 3px 10px;
    background: #fff;
    font-weight: 600;
}
span.player-box.player-box1 {
    color: red;
    border-color: red;
}
span.retake-btn {
    background: #F44336;
    color: #fff;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
}
.remove-side.video-preview {
    display: none;
}
.course-about p a {
    position: unset;
    color: revert;
    padding: unset;
    background: unset;
    border: unset;
    border-radius: unset;
    text-decoration: unset;
}

.course-about p a:hover {
    text-decoration: unset;
}