:root {
    /* ===== Colors ===== */
    --body-color: #F0EBE6;
    --sidebar-color:linear-gradient(134deg, #EC6106 -9.7%, #EB660B 106.16%);
    --sidebar-text-color: #fff;
    --sidebar-sl-bg: #EC6106;
    --primary-light: #ffebdf;
    --main-primary: #ec6106;
    /* ===== Color change in Dark Mode===== */
    --primary-color: #ec6106;
    --secondary-color: #EB5757;
    --secondary-color-rgb-op: rgb(235 87 87 / 10%);
    --primary-color-border: #8884FF;
    --primary-color-rgb-op: rgb(236 97 6 / 10%);
    --primary-color-rgb-crs: #fff;
    --btn_secondary: #ffebdf;
    --btn_third: #EB5757;
    --primary-color-light: #ffffff;
    --toggle-color: #DDD;
    --text-color: #707070;
    --text-color2: #000000;
    --text-color3: #fff;
    --white-grey: #fff;
    /* 14/02/2023  */
    --primary-white: #EC6106;
    /* 14/02/2023  */

    /* 20/03/2024 */
    --wrapper-bg:linear-gradient(93deg, #F3EAD8 -4.31%, #FEF3ED 25.84%, #FFF8F5 54.95%, #FFEFF0 103.18%);
    --table-bg:#fff;
    --course-bg:#fff;

    /* ===== Color not change in Dark Mode===== */
    --text-secondary: #006666;
    --tooltip-bg: #EB660B;
    --btn_card: #4E44BB;
    --collapse-icon: #fff;

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

body.dark {
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --main-primary: #ec6106;
    --primary-light: #cccccc8a;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
    --text-color2: #ccc;
    --text-secondary: #ccc;
    --sidebar-text-color: #ccc;
    --primary-color-rgb-op: #ec6106;
    --primary-color-rgb-crs: 242526;
    --btn_secondary: #ffebdf;
    --collapse-icon: #242526;
    --white-grey: #3a3b3c;
    /* 14/02/2023  */
    --primary-white: #ccc;
    /* 14/02/2023  */

    /* 20/03/2024 */
    --wrapper-bg:#242526;
    --table-bg:#242526;
    --course-bg:#242526;
}

@font-face {

    font-family: Lexend;

    src: url(../assets/fonts/static/Lexend-Regular.ttf);

}
/* 22/02/2023  */
@font-face { 

    font-family: Open-Sans;

    src: url(../assets/fonts/openSans/static/OpenSans/OpenSans-Regular.ttf);

}
/* 22/02/2023 end  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Lexend', sans-serif; */
    font-family: Open-sans;
    /* 22/02/2023  */
}

body {
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
}

::selection {
    background-color: var(--sidebar-sl-bg);
    color: #fff;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #EC6106 #DFE9EB;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    width: 1px;
    width: 1px;
}

*::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: #DFE9EB;
}

*::-webkit-scrollbar-track:hover {
    background-color: #B8C0C2;
}

*::-webkit-scrollbar-track:active {
    background-color: #B8C0C2;
}

*::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: var(--primary-color);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--sidebar-sl-bg);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--sidebar-text-color);
}

/* ===== Btns Colr */
.text_primary {
    color: var(--text-color);
}

/* 13/02/2023 */
.text_secondary {
    color: var(--text-secondary);
}

/* 15/02/2023 */
.text_orange {
    color: var(--secondary-color);
}

.text_clr_primary {
    color: var(--primary-color);
}

.bg_primary_org {
    background-color: var(--main-primary);
}

.bg_secondary_org {
    background-color: var(--btn_secondary);
}

.btn_primary_org {
    background-color: var(--main-primary);
    color: var(--text-color3);
    border: 3px solid var(--main-primary) !important;
}

.btn_primary_org:hover {
    border: 3px solid var(--primary-color-border) !important;
}

.btn_secondary_org {
    background-color: var(--btn_secondary);
    color: var(--main-primary);
    border: 3px solid var(--btn_secondary) !important;
}

.text_primary_org {
    color: var(--main-primary);
}

.text_black {
    color: var(--text-color2);
}

.text_black:focus {
    /* 20/02/2023  */
    color: var(--text-color2);
}

/* 15/02/2023  */
.text_primary_white {
    color: var(--primary-white);
}

.btn {
    padding: 10px 28px !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border: none;
    outline: none;
    border-radius: 9px;
}

.btn-third {
    color: var(--btn_third);
    background: transparent;
    border: 1px solid var(--btn_third);
    border-radius: 9px;
    box-shadow: none;
}

.btn-third:hover {
    color: var(--text-color3);
    background: var(--btn_third);
    border: 1px solid var(--btn_third);
    border-radius: 9px;
    box-shadow: none;
}

.btn_main {
    padding: 7px 34px;
    border: none;
    outline: none;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    transition: 0.3s;
    text-decoration: none;
    font-size: 14px;

}

.btn_main2 {
    padding: 7px 34px;
    outline: none;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.3s;
    white-space: nowrap;

}

.btn_main:hover {
    /* -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    transition: 0.3s; */

}

/* 21/02/2023 */
.btn_approve {

    text-align: center;
    font-size: 13px;
    padding: 7px 15px;
    border: none;
    outline: none;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
    transition: 0.3s;
    width: auto;
    text-decoration: none;
}

.btn_approve_primary {
    color: #000;
    background: #dcdaf1;
    transition: 0.3s;
}

.btn_approve_primary:hover,
.btn_approve_primary:focus,
.btn_approve_primary:active {
    color: #fff;
    background: var(--main-primary);
    transition: 0.3s;
}

.btn_approve_primary:hover .mdi,
.btn_approve_primary:focus .mdi,
.btn_approve_primary:active .mdi {
    color: #fff;
    transition: 0.3s;
}

button,
input,
optgroup,
select,
textarea {
    font-family: 'Open-sans' !important;
}

/* 21/02/2023  end*/

/* ==== Datatable responsive =====  */
table {
    width: 100%;
}

tr td:last-child {
    white-space: nowrap;
}

.panal_table {
    overflow-x: auto;
    width: 100%;
}

.panal_table table {
    margin-bottom: 2em;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 15px;
    padding: 10px;
    font-size: 12px;
    color: var(--text-color2);
    background: var(--table-bg);
    box-shadow: 0 0 10px 3px rgba(59, 124, 255, 0.05);
    width: 100%;
}

.panal_table th {
    font-weight: 500;
    /* font-size: 16px; */
    color: var(--text-color2);
}


.panal_table th {
    padding: 10px;
}

.panal_table td {
    padding: 6px 10px;
}

.panal_table table tr {
    transition: var(--tran-03);
}

.panal_table table tr:hover {
    background: var(--primary-color-rgb-op);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--tran-03);
}

.panal_table table tr:last-child td {
    border-bottom: none !important;
}

.panal_table table tr td:first-child {
    border-top-left-radius: 10px;
}

.panal_table table tr td:last-child {
    border-top-right-radius: 10px;
}

.panal_table table tr td:first-child {
    border-bottom-left-radius: 10px;
}

.panal_table table tr td:last-child {
    border-bottom-right-radius: 10px;
}

/* sweetalert popup design  */

.swal2-styled.swal2-confirm {
    border: none !important;
    outline: none !important;
    background-color: var(--main-primary) !important;
    color: var(--text-color3) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    padding: 10px 34px !important;
}

.swal2-styled.swal2-cancel {
    border: none !important;
    outline: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    padding: 10px 34px !important;
    background-color: var(--btn_secondary) !important;
    color: var(--main-primary) !important;
}

.swal2-styled.swal2-cancel a {
    text-decoration: none !important;
    font-size: 16px !important;
    color: var(--main-primary) !important;
}

.swal2-styled.swal2-confirm a {
    color: var(--text-color3) !important;
    text-decoration: none !important;
    font-size: 16px !important;
}


.swal2-icon.swal2-success [class^=swal2-success-line] {

    background-color: var(--main-primary) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border: 0.25em solid var(--main-primary) !important;
}

.swal2-title {
    color: var(--text-color2) !important;
    font-weight: 400 !important;
    font-size: 25px !important;
}

.swal2-html-container {
    font-size: 13px !important;
}

.dark .swal2-container.swal2-center>.swal2-popup {
    background: black !important;
}

.dark .swal2-icon.swal2-success [class^=swal2-success-circular-line] {
    background: black !important;
}

/* loading Animation  */

.dimmer {
    position: fixed;
    background: var(--body-color);
    /*  20/02/2023 */
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.dimmer.active {
    display: block;
}

.lds-hourglass {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid var(--primary-color);
    border-color: var(--primary-color) transparent var(--primary-color) transparent;
    animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

/* ========radio and Checkbox Style  */



input[type=checkbox],
input[type=radio] {
    --active: var(--main-primary);
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: var(--main-primary);
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

input[type=checkbox]:after,
input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
}

input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
}

input[type=checkbox]:disabled+label,
input[type=radio]:disabled+label {
    cursor: not-allowed;
}

input[type=checkbox]:hover:not(:checked):not(:disabled),
input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
}

input[type=checkbox]:focus,
input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
}

input[type=checkbox]:not(.switch),
input[type=radio]:not(.switch) {
    width: 21px;
}

input[type=checkbox]:not(.switch):after,
input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
}

input[type=checkbox]:not(.switch):checked,
input[type=radio]:not(.switch):checked {
    --o: 1;
}

input[type=checkbox]+label,
input[type=radio]+label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
}

input[type=checkbox]:not(.switch) {
    border-radius: 7px;
}

input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
}

input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
}

input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
}

input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
}

input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
}

input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
}

input[type=radio] {
    border-radius: 50%;
}

input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
}

input[type=radio]:checked {
    --s: .5;
}

.toggel_inputs {
    height: 40px;
    display: flex;
    gap: 2%;
    align-items: center;
}


/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    border-radius: 10px;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    width: 220px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 1035;
    /* changed 17/02/2023 */
    /* changed 13/02/2023 */
}

.sidebar.close {
    width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
    height: 32px;
    list-style: none;
    display: flex;
    align-items: center;
    position: relative;
    /* margin-top: 10px; */
}

.sidebar li:not(.active) {
    opacity: 0.8;

}

.sidebar header .image,
.sidebar .icon {
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon {
    min-width: 55px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.sidebar .text,
.sidebar .icon {
    color: var(--sidebar-text-color);
    transition: var(--tran-03);
}

.sidebar .text {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    letter-spacing: 0.3px;
    display: block;

}

.sidebar.close .text {
    /* opacity: 0; */
    display: none;
}

.sidebar.close .op_0 {
    display: none;
}

.sidebar.close .help_center {
    background-color: transparent;
}

/* =========================== */

.sidebar header {
    position: relative;
}

.sidebar header .image-text {
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.sidebar.close header .image-text {
    padding: 0;
}

.dark .sidebar header .logo-text {
    filter: brightness(1) invert(1);
}

.sidebar header .logo-text {
    display: flex;
    flex-direction: column;
    filter: brightness(1) invert(1);

}

header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .profession {
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img {
    width: 30px;
    border-radius: 6px;
}

.sidebar header .logo-text img {
    width: 80px;
    border-radius: 6px;
    margin-left: -10px;
}

.sidebar .toggle_icon {
    position: relative;
}

.sidebar .toggle_icon .hr_line {
    opacity: 1;
    width: 90%;
    transition: var(--tran-03);
}

.sidebar.close .toggle_icon .hr_line {
    opacity: 0;
    transition: var(--tran-03);
}

.sidebar .toggle_icon .toggle {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color-rgb-op);
    color: var(--primary-color);
    border-radius: 4px 0px 0px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar .toggle_icon .toggle {
    color: var(--text-color);
}

.sidebar.close .toggle {
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu {
    margin-top: 6px;
}

.sidebar li.search-box {
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}

.sidebar li a {
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0 18px;
    border-radius: 11px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar.close li a {
    margin: auto;
    transition: var(--tran-03);
}


/* .sidebar li a:hover, */
.sidebar li.active a {
    background-color: var(--primary-color-rgb-op);
}

.sidebar li a:hover .icon,
.sidebar li a:hover .text,
.sidebar li.active .icon,
.sidebar li.active .text {
    color: var(--sidebar-text-color);
    font-weight: 600;

}

.sidebar li:has(> a:hover) {
    opacity: 1;
}

.sidebar li .tooltip {
    position: absolute;
    top: -20px;
    left: calc(100% + 15px);
    z-index: 3;
    background: var(--tooltip-bg);
    color: var(--text-color3);
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); */
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 400;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: 0s;
}

.sidebar li .tooltip:after {
    content: '';
    position: absolute;
    left: -13px;
    top: 9px;
    transition: 0.4s;
    border-top: 8px solid transparent;
    border-right: 17px solid var(--tooltip-bg);
    border-bottom: 8px solid transparent;
}


.sidebar li:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
    top: 50%;
    transform: translateY(-50%);
}

.sidebar .help_center {
    background-color: var(--primary-color-rgb-op);
    border-radius: 16px;
}

.sidebar.open li .tooltip {
    display: none;
}

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
    color: var(--text-color);
}

.sidebar .menu-bar {
    height: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* overflow-y: scroll; */
}

.menu-bar::-webkit-scrollbar {
    display: none;
}

.sidebar .menu-bar .mode {
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.overlay_home {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #000 !important;
    filter: alpha(opacity=50) !important;
    -moz-opacity: 0.5 !important;
    -khtml-opacity: 0.5 !important;
    opacity: 0.5 !important;
    z-index: 1034 !important;
    /*changed 17/02/2023*/
    pointer-events: none !important;
}

.menu-bar .mode .sun-moon {
    height: 50px;
    width: 60px;
}

.mode .sun-moon i {
    position: absolute;
}

.mode .sun-moon i.sun {
    opacity: 0;
}

body.dark .mode .sun-moon i.sun {
    opacity: 1;
}

body.dark .mode .sun-moon i.moon {
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch {
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}


.home {
    position: absolute;
    top: 0;
    top: 0;
    left: 220px;
    height: 100vh;
    width: calc(100% - 220px);
    background-color: var(--body-color);
    transition: var(--tran-05);
}

.home .text {
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 60px;
}

.sidebar .help_text {
    white-space: pre-line;
}

.sidebar.close~.home {
    left: 88px;
    height: 100vh;
    width: calc(100% - 88px);
}

body.dark .home .text {
    color: var(--text-color);
}

.sidebar .help_center {
    position: relative;
    padding: 40px 22px 12px 22px;
    border-radius: 16px;
}

.sidebar .help_center .help_center_img {
    position: absolute;
    top: -9%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sidebar .help_center .help_center_img img {
    width: 100px;
}

.sidebar .help_center span {
    font-size: 12px;
}

.sidebar .help_center small {
    font-size: 8px;
    opacity: 0.3;
}

.sidebar .help_center button {
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 8px 0 !important;
}

.navbar_container {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    z-index: 999;
}

.navbar_container .title_header {
    padding: 13px 12px;
}

.navbar_container .title_header .main_title {
    font-weight: 600;
    font-size: 22px;
    line-height: 38px;
    white-space: nowrap;
    /* 22/02/2023*/
}

.navbar_container .search_box {
    width: 360px;
    height: 42px;
    background: var(--primary-color-light);
    border-radius: 34px;
}

.navbar_container .search_box .form-control,
.navbar_container .search_box .form-control:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.navbar_container .Notify_content {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: grid;
    justify-self: center;
    align-self: center !important;
}

.navbar_container .Notify_content .toggle-switch {
    cursor: pointer;
}

.navbar_container .user_details {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar_container .author_name {
    font-weight: 600;
    font-size: 16px;
}

.navbar_container .author_email {
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
}

.navbar_container .user_image {
    width: 50px;
}

.navbar_container .main_title a:hover .mdi-keyboard-backspace {
    color: var(--main-primary);
    transition: 0.3s;
}

.app-sidebar__toggle {
    z-index: 1;
    transition: padding-left 0.3s ease;
    padding: 9px;
    text-align: center;
    height: 2.5rem;
    font-size: 1.5rem;
    line-height: 1;
    position: relative;
    background: var(--sidebar-color);
    color: var(--text-color2) !important;
    border-radius: 50%;
    box-shadow: 0px 2px 3px rgb(4 4 7 / 10%);
}

.responsive-navbar.navbar {
    display: initial;
    flex-basis: inherit;
    flex-wrap: inherit;
}

.nav-link.icon {
    margin: 5px;
    padding: 12px;
    text-align: center;
    height: 2.5rem;
    font-size: 1.2rem;
    position: relative;
}

.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
    color: transparent;
}

.responsive-navbar .dropdown-menu {
    box-shadow: 0 10px 40px 0 rgb(104 113 123 / 30%);
    border: 1px solid #eaedf1;
}

/* Navbar fixed top 13/02/2023  */
.fixed-top {
    top: -40px;
    transform: translateY(40px);
    transition: transform .5s;
    background-color: var(--body-color);
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px;
    height: 60px;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

.fixed-top .navbar_container {
    height: -webkit-fill-available;
}

/* Navbar fixed top END  */

.sidebar.close~.home .fixed-top {
    left: 88px;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 0.9;
    color: #86909a;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #eaedf1;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 8;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    background-clip: padding-box;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a.icon {
    text-decoration: none;
    cursor: pointer;
}

.drop-heading {
    padding: 1rem 1rem;
    color: var(--text-color2);
}

.dropdown-menu {
    padding: 0;
    border: 0;
}

.notifications .dropdown-menu {
    min-width: 16rem;
}

.dropdown.message .dropdown-menu {
    min-width: 19rem;
}

.header-right-icons .nav-link.icon {
    margin: 5px;
    padding: 11px !important;
    text-align: center;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1.2rem;
    position: relative;
    line-height: 1;
    /* background: #fff; */
    border-radius: 50%;
    display: flex;
    /* box-shadow: 0px 2px 3px rgb(4 4 7 / 10%); */
    justify-content: center;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.125rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
}

.nav-link {
    min-width: 2rem;
    transition: 0.3s color;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    color: var(--primary-bg-color);
}

.navbar-collapse .d-flex.order-lg-2 {
    align-items: center;
}

.nav-link {
    display: block;
    /* padding: 0.2rem 0.9rem; */
}

/* .nav-link.icon i {
    color: #495584 !important;
    font-size: 20px;
} */

.dropdown {
    display: block;
}

.icon i {
    vertical-align: -1px;
}

.border-bottom {
    border-bottom: 1px solid #eaedf1 !important;
}

.drop-heading {
    padding: 1rem 1rem;
    color: #8f9daf;
}

.pulse-danger {
    display: block;
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ee335e;
}

.pulse-danger:before {
    content: "";
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    background: rgba(238, 51, 94, 0.8);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(238, 51, 94, 0.9);
    animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    8% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    15% {
        -webkit-transform: scale(0.1);
        opacity: 1;
    }

    30% {
        -webkit-transform: scale(0.5);
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

@-moz-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    8% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    15% {
        -webkit-transform: scale(0.1);
        opacity: 1;
    }

    30% {
        -webkit-transform: scale(0.5);
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

.pulse {
    display: block;
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c03c;
}

.pulse:before {
    content: "";
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    background: rgba(34, 192, 60, 0.6);
    cursor: pointer;
    box-shadow: 0 0 0 rgb(34 192 60 / 90%);
    animation: pulse 1s linear infinite;
}

.dropdown-menu-arrow.dropdown-menu-end:before,
.dropdown-menu-arrow.dropdown-menu-end:after {
    left: auto;
    right: 17px;
}

.dropdown-menu.show {
    display: block;
    margin: 0;
    z-index: 50;
    border: 1px solid #eaf2f6;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    background-clip: padding-box;
    border-radius: 5px;
    color: var(--text-color2);
    background-color: var(--primary-color-light);
    transition: 3s;
}

.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1.5rem !important;
    clear: both;
    font-weight: 400;
    color: #6e84a3;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.collapse:not(.show) {
    display: none;
    background: #fff;
}

.ms-auto,
.mx-auto {
    margin-left: auto !important;
}

.header-right-icons {
    align-items: center;
}

.dropdown .avatar.profile-user {
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.2rem;
}

.brround {
    border-radius: 50% !important;
}

.avatar {
    background: #e3e1f5 no-repeat center/cover;
}

.cover-image {
    background-size: cover !important;
}

.avatar {
    display: inline-block;
    position: relative;
    text-align: center;
    color: #fff;
    font-weight: 500;
    vertical-align: bottom;
    font-size: 0.875rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input::placeholder {
    color: var(--primary-color);
    opacity: 0.2;
    /* Firefox */
}


::-webkit-input-placeholder {
    color: red;
}

::-moz-placeholder {
    color: red;
}

::-ms-placeholder {
    color: red;
}

::placeholder {
    color: red;
}

.main .welcome_wrapper {
    background: var(--wrapper-bg);
    border-radius: 18px;
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 22px;
    z-index: 10;
    overflow: hidden;
    /* grid-template-columns: 2fr 1fr; */
}

.main .wrapper_second {
    background: var(--primary-color-light);
    border-radius: 16px;
    width: 100%;
    /* height: 100%; */
    filter: drop-shadow(-4px 0px 10px rgba(0, 0, 0, 0.05));
}

.main .wrapper_card {
    display: flex;
    align-items: center;
    background: var(--primary-color-light);
    border-radius: 12px;
    position: relative;
    padding: 10px;
    width: 100%;
    height: 100px;
    filter: drop-shadow(-4px 0px 10px rgba(0, 0, 0, 0.05));
}

.main .wrapper_card .circle_div {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    color: var(--text-color3);
    border: 0.5px solid #FFF;
    justify-content: center;
    backdrop-filter: blur(3.1666667461395264px);
    background: linear-gradient(116deg, rgba(255, 232, 157, 0.50) 1.56%, rgba(255, 255, 255, 0.50) 106.49%);
    z-index: 10;
    font-size: 28px;
}
.main .wrapper_card .circle_div2 {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F77A27;
    top: 10px;
    right: -20px;
    z-index: -1;
}
.main .wrapper_card .circle_div3 {
    position: relative;
}

.main .wrapper_card .total_ {
    white-space: nowrap;
    line-height: 1;
}

.main .wrapper_card .card_img {
    position: absolute;
    top: 0px;
    right: 5px;
    opacity: 0.1;
}

body.dark .main .wrapper_card .card_img {
    opacity: 0.1;
    filter: brightness(0) invert(1);
}

.main .student_insight {
    background: var(--primary-color-light);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    width: 100%;
    overflow: hidden;
    height: auto;
}

/* 13/02/2023 START */
.main .published_courses {
    background: var(--primary-color-light);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    width: 100%;
    height: 100%;
    /*changed*/
}

.main .published_courses .tb_row {
    border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.main .published_courses .tb_row .activity-img {
    width: 35px;
    height: 35px;
    background: #FFF2E4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFB359;
    margin-right: 7px;
}

/* END */

.main .teachers_list {
    background: var(--primary-color-light);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 18px;
    width: 100%;
    position: relative;
    z-index: 10;
    /* height: 100%; */
}

.lists_teachers .nav-tabs:not(:last-child) {
    border-bottom: 2px solid var(--sidebar-sl-bg);
}

.lists_teachers .nav-tabs .nav-link.active,
.lists_teachers .nav-tabs .nav-link.active:hover {
    border-color: transparent;
    background: transparent;
    border-bottom: 2px solid var(--main-primary);
    color: var(--text-color2);
    font-weight: 600;
}

.lists_teachers .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--text-color2);
}

.lists_teachers .nav-tabs .nav-link {
    border-color: transparent;
    color: var(--text-color);
    padding: 8px 1px;
    margin-right: 10px;
    font-size: 12px;
}

.lists_teachers .primary_btn {
    background: var(--main-primary);
    border-radius: 9px;
    transition: 0.3s;
    text-decoration: none;
}

.lists_teachers .primary_btn:hover {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    transition: 0.3s;
}

.lists_teachers .card_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
}

.lists_teachers .card_wrapper a.card_anchor {
    text-decoration: none;
    margin-right: -9px;

}

.lists_teachers .card_wrapper a.card_anchor:hover .card {
    text-decoration: none;
    border-color: var(--main-primary);
    background-color: var(--primary-color-rgb-op);
    transition: var(--tran-03);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;


}

.lists_teachers .card_wrapper .card {
    background: var(--course-bg);
    /* opacity: 0.1; */
    border: 2px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    transition: var(--tran-03);
}

.lists_teachers .card_wrapper .card .card-img-top {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.lists_teachers .card_wrapper .card .subject_blur {
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    width: 100%;
    /* Note: backdrop-filter has minimal browser support */
}

.lists_teachers .card_wrapper .card-body {
    color: var(--text-color2);
}

.lists_teachers .card_wrapper .card-body .card-title {
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.lists_teachers .card_wrapper .card-body .card_body_text {
    display: flex;
    align-items: center;
    gap: 3px;
}

.lists_teachers .card_wrapper .card-body .card_body_text .primary_btn {
    background: var(--tooltip-bg);
    border-radius: 6px;
}

.lists_teachers .circle_div {
    background-color: var(--primary-light);
    color: var(--main-primary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper_second .content_items {
    /* border: 1px solid var(--primary-light);
    ; */
    border-radius: 10px;
    /* height: 250px; */
    max-height: 800px;
    min-height: 100px;
    overflow-y: scroll;
}

.wrapper_second .content_items .items_list {
    /* border-bottom: 1px solid var(--primary-light); */
}

.wrapper_second .activity-blog {
    display: flex;
    position: relative;
    min-height: 105px;
}

.wrapper_second .activity-blog:before {
    content: "";
    position: absolute;
    top: 50px;
    bottom: 10px;
    left: 20px;
    border-left: 1px solid #e0e9f1;
}

.wrapper_second .timeline_content {
    max-height: 400px;
    min-height: 350px;
    overflow-y: scroll;
}
.wrapper_second .timeline_content .activity-img {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color-rgb-op);
    border-radius: 6px;
    color: var(--secondary-color);
}

.wrapper_second .timeline_content .activity-details {
    margin-left: 15px;
    /* width: 80%; */
}

.wrapper_second .content_items .item_text,
.wrapper_second .content_items .item_sub {
    line-height: 1;
}

/* ------------------------------ PAGINTION BEGIN ------------------------------ */
.pager {
    margin: 0;
    font-size: 0;
    /* text-align: center; */
}

.pager__item {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    font-weight: bold;
    margin: 0 2px;
}

.pager__item.active .pager__link {
    background-color: var(--main-primary);
    border-color: var(--main-primary);
    color: #fff;
    text-decoration: none;
}

.pager__item--prev svg,
.pager__item--next svg {
    width: 8px;
    height: 12px;
}

.pager__item--next .pager__link svg {
    transform: rotate(180deg);
    transform-origin: center center;
}

.pager__link {
    position: relative;
    border-radius: 6px;
    /* padding: 12px; */
    display: block;
    text-align: center;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-left: -1px;
    color: var(--text-color2);
    text-decoration: none;
    transition: 0.3s;
}

.pager__link:hover,
.pager__link:focus,
.pager__link:active {
    background-color: var(--main-primary);
    border-color: var(--main-primary);
    color: #fff;
    text-decoration: none;
}

.pager .pager__item:not(.active) {
    opacity: 0.5;
}

.pager__link:hover svg path,
.pager__link:focus svg path,
.pager__link:active svg path {
    fill: #fff;
}

.pager .pager__item.active+.pager__item .pager__link,
.pager .pager__item:hover+.pager__item .pager__link {
    border-left-color: var(--main-primary);
}

@media screen and (max-width: 576px) {
    .pager__item {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .pager__item.active,
    .pager__item:first-of-type,
    .pager__item:last-of-type,
    .pager__item:nth-of-type(2),
    .pager__item:nth-last-of-type(2) {
        position: initial;
        top: initial;
        left: initial;
    }

    .pager__item.active+li {
        position: initial;
        top: initial;
        left: initial;
    }
}

/* ------------------------------ PAGINTION END ------------------------------ */

/* ------------------------------ Image Upload START ------------------------------ */
.upload {
    --background: #E4E4FF;
    --text-drop: #CAC8CA;
    --text-upload: #2D2C2F;
    --progress-color: #E7E5E7;
    --check-color: var(--text-upload);
    --border-radius: 10px;
    /* width: 170px; */
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--background);
    border-radius: var(--border-radius);
    transition: all 0.3s ease-out;
    box-shadow: var(--shadow-x, 0px) var(--shadow-y, 1px) var(--shadow-blur, 3px) rgba(0, 0, 0, 0.1);
    transform: scale(var(--scale, 1));
}

.upload .drop-here {
    position: absolute;
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: var(--border-radius);
    opacity: var(--opacity, 0);
    overflow: hidden;
    cursor: pointer;
    text-indent: -9999px;
    z-index: 1;
}

.upload .text {
    position: absolute;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

.upload .text.text-drop {
    color: var(--text-drop);
    opacity: var(--opacity, 1);
    transition: opacity 0.15s ease-out 0.15s;
}

.upload .text.text-upload {
    color: var(--text-upload);
    opacity: var(--opacity, 0);
    transition: opacity 0.15s ease-out;
}

.upload .progress-wrapper {
    position: absolute;
}

.upload .progress-wrapper .progress {
    fill: none;
    stroke: var(--progress-color);
    stroke-width: 3;
    stroke-dasharray: 722;
    stroke-dashoffset: 722;
}

.upload .check-wrapper {
    position: absolute;
    opacity: var(--opacity, 0);
    transform: scale(var(--scale, 0.9)) rotate(var(--rotate, 3deg));
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in;
}

.upload .check-wrapper .check {
    width: 100px;
    width: 100px;
    fill: none;
    stroke: var(--check-color);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100 0;
    stroke-dashoffset: 100;
}

.upload .shadow {
    opacity: var(--opacity, 0);
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius);
    filter: blur(25px);
    z-index: -1;
    transition: all 0.5s ease;
}

.upload .shadow::before {
    content: "";
    position: absolute;
    top: -25%;
    left: -25%;
    height: 150%;
    width: 150%;
    background: conic-gradient(#4b82d4, #6a29e9, #4b82d4, #6a29e9, #c58357, #FFC940, #4b82d4);
    -webkit-animation: shadow-animate 5s linear infinite;
    animation: shadow-animate 5s linear infinite;
}

.upload.drag {
    --scale: 1.03;
    --shadow-y: 5px;
    --shadow-blur: 20px;
}

.upload.drop .text.text-drop {
    --opacity: 0;
    transition: opacity 0.15s ease-out;
}

.upload.drop .text.text-upload {
    --opacity: 1;
    transition: opacity 0.15s ease-out 0.15s;
}

.upload.drop .shadow {
    --opacity: 1;
}

.upload.drop .progress-wrapper {
    opacity: var(--opacity, 1);
    transform: scale(var(--scale, 1)) rotate(var(--rotate, -90deg));
}

.upload.drop .progress-wrapper .progress {
    -webkit-animation: progress-animate 3s ease 0.3s forwards;
    animation: progress-animate 3s ease 0.3s forwards;

}

.upload.done {
    --opacity: 0;
}

.upload.done .text.text-upload {
    --opacity: 0;
}

.upload.done .shadow {
    --opacity: 0;
}

.upload.done .progress-wrapper {
    --scale: .95;
    transition: transform 0.3s, opacity 0.3s;
}

.upload.done .check-wrapper {
    --opacity: 1;
    --scale: 1;
    z-index: 12;
    --rotate: 0deg;
    transition: transform 0.5s ease-in-out 0.3s, opacity 0.5s ease-in 0.3s;
}

.upload.done .check-wrapper .check {
    -webkit-animation: check-animate 0.5s ease-in-out 0.3s forwards;
    animation: check-animate 0.5s ease-in-out 0.3s forwards;
}

@-webkit-keyframes shadow-animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes shadow-animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes progress-animate {
    0% {
        stroke-dashoffset: 722;
    }

    20% {
        stroke-dashoffset: 500;
    }

    50% {
        stroke-dashoffset: 322;
    }

    55% {
        stroke-dashoffset: 300;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes progress-animate {
    0% {
        stroke-dashoffset: 722;
    }

    20% {
        stroke-dashoffset: 500;
    }

    50% {
        stroke-dashoffset: 322;
    }

    55% {
        stroke-dashoffset: 300;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes check-animate {
    0% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 100 0;
        stroke-dashoffset: 100;
    }
}

@keyframes check-animate {
    0% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 100 0;
        stroke-dashoffset: 100;
    }
}

.main input[type=text] {
    border: 2px solid var(--primary-light);
    border-radius: 11px;
    background: #fff;
}

.main input[type=text]:focus {
    color: var(--text-color2);
    background: #fff;
    border-color: var(--main-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--primary-color-rgb-op);
}

.lists_teachers .pro_pic_text {
    white-space: pre-line;
    font-size: 12px;
    opacity: 0.4;
    text-align: center;
    color: var(--text-color);
}

/*
* Custom Animations
*/
@-webkit-keyframes fadeUp {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);

        opacity: 1;
    }
}

@keyframes fadeUp {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);

        opacity: 1;
    }
}

.animate.fadeUp {
    -webkit-animation: fadeUp;
    animation: fadeUp;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeLeft {
    0% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);

        opacity: 1;
    }
}

@keyframes fadeLeft {
    0% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);

        opacity: 1;
    }
}

.animate.fadeLeft {
    -webkit-animation: fadeLeft;
    animation: fadeLeft;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeRight {
    0% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);

        opacity: 1;
    }
}

@keyframes fadeRight {
    0% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);

        opacity: 1;
    }
}

.animate.fadeRight {
    -webkit-animation: fadeRight;
    animation: fadeRight;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animation-fast {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.animation-slow {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.delay-1 {
    -webkit-animation-delay: 0.3s !important;
    animation-delay: 0.3s !important;
}

.delay-2 {
    -webkit-animation-delay: 0.4s !important;
    animation-delay: 0.4s !important;
}

.delay-3 {
    -webkit-animation-delay: 0.5s !important;
    animation-delay: 0.5s !important;
}

.delay-4 {
    -webkit-animation-delay: 0.6s !important;
    animation-delay: 0.6s !important;
}

.delay-5 {
    -webkit-animation-delay: 0.7s !important;
    animation-delay: 0.7s !important;
}

/* Read More  */

.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
    display: none;
    transition: 0.5s;
}

.addReadMore.showmorecontent .readMore {
    display: none;
    transition: 0.5s;
}

.addReadMore .readMore,
.addReadMore .readLess {
    font-weight: bold;
    margin-left: 2px;
    color: var(--main-primary);
    cursor: pointer;
}

.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
    transition: 0.5s;
}




/* ============================LOGIN PAGE CSS START==============================  */

.main_container {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: middle;
    overflow: hidden;

}

.login_img {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--sidebar-color);
}

.left_container {
    padding-left: 90px;
    padding-right: 90px;
}

.login_img img {
    max-width: 300px;
}

.login_container {
    width: 350px;
    display: flex;
    align-items: center;
    text-align: center;
}

.main_container .main_ {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-gap: 7rem; */
    /* padding: 0 2rem; */
    background-color: #fff;
}

.main_div {
    background: #fff;
    padding: 20px;
    border-radius: 5px;

}

.main_div .logo {
    width: 40px;
}

.main_div .logo_text {
    color: #EB660B;
    
}

.form_ {
    width: 300px;
}

.title-h {
    text-align: left;
    color: #000;
}

.title-h h1 {
    font-size: 20px;
    font-weight: 300;
}

.title-h h2 {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 24px;
}

.login_container .input-div {
    position: relative;
    display: grid;
    grid-template-columns: 12% 88%;
    margin: 25px 0;
    background: #FAFCFE;
    /* opacity: 0.5; */
    border: 1px solid #CECECE;
    border-radius: 8px;

}

.i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
}

.i i {
    color: #d9d9d9;
}

.login_container .input-div.focus {
    border: 1px solid #EB660B !important;
    background-color: #fff !important;
}

.login_container .input-div.focus .i i {
    color: #EB660B;
    transition: .3s;
}

.login_container .input-div.focus div h5 {
    top: -11px;
    color: #EB660B;
    font-size: 12px;
    padding: 4px;
    background: #fff;
    transition: .1s;
}

.login_container .input-div>div {
    position: relative;
    height: 42px;

}

.login_container .input-div>div h5 {
    font-weight: 400;
    color: #BCB9B9;
    position: absolute;
    /* left: 40px; */
    font-size: 14px;
    top: 29%;
    /* transform: translate(-50%); */
    transition: 0.3s;

}

.login_container .input-div input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
    left: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0.5rem 0rem;
    font-size: 1rem;

    color: #555;
}

.login_container .input-div input:-webkit-autofill,
.login_container .input-div input:-webkit-autofill:hover,
.login_container .input-div input:-webkit-autofill:focus,
.login_container .input-div input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;

}

.p-viewer {
    z-index: 9999;
    position: absolute;
    top: 24%;
    right: 14px;
}

.p-viewer .fa-eye {
    color: #BCB9B9;
    transition: 0.3s;
    cursor: pointer;
}

.p-viewer .fa-eye-slash {
    color: #BCB9B9;
    transition: 0.3s;
    cursor: pointer;
}

.login_container .input-div.focus .p-viewer .fa-eye,
.login_container .input-div.focus .p-viewer .fa-eye-slash {
    color: #EB660B;
}

.btn_form {
    display: block;
    width: 100%;
    height: 37px;
    border-radius: 6px;
    margin: 1rem 0;
    font-size: 1rem;
    outline: none;
    border: none;
    cursor: pointer;

    transition: 0.3s;
    box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -7px rgb(0 0 0 / 20%);
    ;
}

.btn_form_google {
    display: block;
    width: 100%;
    height: 37px;
    border-radius: 3px;
    margin: 1rem 0;
    font-size: 1rem;
    outline: none;
    border: none;
    cursor: pointer;

    transition: 0.3s;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
}

.btn_blue {
    background: var(--sidebar-color);
    color: #fff;
}

.btn_google {
    color: #999;

}

.btn_form:hover {
    box-shadow: 0 3px 3px 0 rgb(0 0 0 / 14%), 0 1px 7px 0 rgb(0 0 0 / 12%), 0 3px 1px -1px rgb(0 0 0 / 20%);
    transition: .3s;
}



.login_container a {
    text-align: center;
    font-weight: 600;
    display: block;
    text-decoration: none;
    color: #555;
    font-size: 0.8rem;
    transition: .3s;
}

.login_container a:hover {
    text-align: center;
    display: block;
    text-decoration: none;
    color: #065AD8;
    font-size: 0.8rem;
    transition: .3s;
}

.login_container span:before {
    background: #555;
    background: linear-gradient(right, #555 0, #fff 100%);
    left: 0;
}

.login_container span:after {
    background: #555;
    background: linear-gradient(right, #555 0, #fff 100%);
    right: 0;
}

.remember_me {
    align-items: center;
}

.remember_me input {
    margin-right: 9px;
    margin-left: 5px;
}

.or {
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #A3A3A3;
}

.or span {
    background-color: #fff;
    position: absolute;
    transform: translate(-45px, -8px);
    padding: 0 12px;
    margin: 0 -20px;
    color: #A3A3A3;
}

/* Google Button  */
.login-with-google-btn {
    transition: background-color 0.3s, box-shadow 0.3s;
    padding: 12px 18px 12px 34px;
    color: #757575;
    font-size: 15px;
    height: 50px;
    line-height: 2px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 27px 15px;
    border: 1px solid #E1EDFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 10%);
    border-radius: 8px;

}

.login-with-google-btn:hover {
    transition: background-color 0.3s, box-shadow 0.3s;
    font-size: 15px;
    line-height: 12px;
    background-image: url("../assets/images/googlew.png");
    background-repeat: no-repeat;
    background-position: 27px 15px;
    background-size: 18px;

}

.login-with-google-btn:focus {
    outline: none;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}

/* Microsoft Button  */
.login-with-microfoft-btn {
    transition: background-color 0.3s, box-shadow 0.3s;
    padding: 12px 8px 12px 34px;
    color: #757575;
    font-size: 15px;
    height: 50px;
    line-height: 2px;
    background-image: url("../assets/images/microsoft.png");
    background-color: white;
    background-repeat: no-repeat;
    background-position: 20px 15px;
    border: 1px solid #E1EDFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 10%);
    border-radius: 8px;
    background-size: 18px;

}

.login-with-microfoft-btn:hover {
    transition: background-color 0.3s, box-shadow 0.3s;
    font-size: 15px;
    line-height: 12px;
    background-image: url("../assets/images/mocrosoftw.png");
    background-repeat: no-repeat;
    background-position: 20px 15px;
    background-size: 18px;

}

.login-with-microfoft-btn:focus {
    outline: none;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}

.btn_form_google:hover {
    background-color: #065AD8;
    color: #fff;
    /* box-shadow: 0 3px 3px 0 rgb(0 0 0 / 14%), 0 1px 7px 0 rgb(0 0 0 / 12%), 0 3px 1px -1px rgb(0 0 0 / 20%); */
    transition: .3s;
}

/* Media Query CSS  */
@media screen and (max-width: 1050px) {
    .main_container .main_ {
        /* grid-gap: 5rem; */
    }

}

@media screen and (max-width: 1000px) {
    .form_ {
        width: 300px;
    }

    .form_ h2 {
        font-size: 2.4rem;
        margin: 8px 0;
    }

    .login_img img {
        width: 100%;
    }

}

@media screen and (max-width: 900px) {
    .login_img {
        display: none;
    }

    .main_container .main_ {
        grid-template-columns: 1fr;
    }

    .login_container {
        width: auto;
        justify-content: center;
    }

}

@media screen and (max-width: 500px) {
    .form_ {
        width: 260px;
    }

    .login-with-google-btn {
        background-position: 22px 14px;
    }

    .login-with-microfoft-btn {
        background-position: 14px 14px;
    }
}

/* 13/02/2023 */
/* APEX CHART DESIGN START*/

.dark tspan {
    fill: var(--text-color2) !important;
}

.dark .apexcharts-legend-text {
    color: var(--text-color2) !important;
}

/* APEX CHART DESIGN END*/
.progress_bar_section .progress {
    height: 6px;
}

 .wrapper_second .enrolled_Courses .items_list {
    /* border: 1px solid var(--primary-light);
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05));
    border-radius: 12px; */
}

/* 14/02/2023  */
.top_section_course {
    height: 150px;
    background-image: url("../images/bg_top_all_course.svg");
    background-position: right;
    background-position-y: inherit;
    border-radius: 18px;
    overflow: hidden;
}

.top_section_course .top_textarea {
    background: linear-gradient(89.45deg, #011046 27.73%, rgba(0, 0, 0, 0) 90.82%);
    height: 100%;
    color: var(--text-color3);
    display: flex;
    padding-left: 22px;
    align-items: center;
}


/* ====Owl Carousel==== */

.owl-nav {
    display: none;
}

.owl-dots {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--main-primary);
}


.corousel_area {
    height: 50px;
}

.corousel_area .item {
    padding: 4px 24px;
    background: var(--white-grey);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.corousel_area .corousel_tabs {
    color: var(--primary-white) !important;
}
.lists_teachers .card_wrapper_carousel .card {
    background: var(--course-bg);
    /* opacity: 0.1; */
    border: 2px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    transition: var(--tran-03);
}
.lists_teachers .card_wrapper_carousel .card .card-img-top {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.lists_teachers .card_wrapper_carousel .card-body .card_body_text {
    display: flex;
    align-items: center;
    gap: 3px;
}
.lists_teachers .card_wrapper_carousel .card .subject_blur {
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    width: 100%;
}
.card_wrapper_carousel .item {
    width: 250px;
}

/* 15/02/2023 */
.no-border {
    border: 0 !important;
}

.course_wrapper .play_course .play_course_btn {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--btn_secondary);
    border-radius: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
    flex-direction: column;
    transform: 0.3s;
    cursor: pointer;
}

.course_wrapper .play_course .play_course_btn:hover {
    background: var(--main-primary);
    color: var(--text-color3);
    transition: 0.3s;
}

.course_wrapper .play_course .play_course_btn:hover span {
    color: #fff !important;
}

.courses_items {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    min-height: 100px;
    margin-bottom: 18px;
}

.courses_items:hover {
    border: 2px solid rgba(235, 102, 11, 1) !important;
    box-shadow: 0px 7px 25px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

.courses_items .image_text_course {
    flex: 1 0 100px;
}

.courses_items .image_text_course .text_course {
    flex: 1 0;
}

/* Play Button  */

@-webkit-keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.stroke-dotted {
    opacity: 0;
    stroke-dasharray: 4, 5;
    stroke-width: 1px;
    transform-origin: 50% 50%;
    -webkit-animation: spin 4s infinite linear;
    animation: spin 4s infinite linear;
    transition: opacity 1s ease, stroke-width 1s ease;
}

.stroke-solid {
    stroke-dashoffset: 0;
    stroke-dashArray: 300;
    stroke-width: 8px;
    transition: stroke-dashoffset 1s ease, opacity 1s ease;
}

.icon {
    transform-origin: 50% 50%;
    transition: transform 200ms ease-out;
}

.course_wrapper .play_course .play_course_btn:hover .stroke-dotted,
.course_wrapper .play_course .play_course_btn:hover .stroke-solid {
    stroke: var(--text-color3);
}

.course_wrapper .play_course .play_course_btn:hover .icon {

    fill: var(--text-color3);
}

#play:hover .stroke-dotted {
    stroke-width: 4px;
    opacity: 1;
}

#play:hover .stroke-solid {
    opacity: 0;
    stroke-dashoffset: 300;
}

#play:hover .icon {
    transform: scale(1.05);
}


#play {
    cursor: pointer;
}

.course_last_dots {
    position: absolute;
    top: 0;
    right: 0;
}

.mycourse .enrolled_course {}

.mycourse .enrolled_course .item_content {
    border: 1px solid #E1EDFF;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05));
    border-radius: 12px;
    margin-bottom: 18px;

}

.mycourse .enrolled_course .item_content .items_list {
    position: relative;

}

/* 20/02/2023  */
/* ============Video Player CSS========== */
.video-featured {
    border-radius: 10px;
    overflow: hidden;
}

.flex-video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56%;
    position: relative;
}

.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}

.courses .wrapper_second .content_items {
    border: none;
    border-radius: 0;
    overflow-y: auto;
}
 

.container_accordian .wrapper {
    margin-bottom: 20px;
    padding: 0px 22px;
    border-radius: 10px;
    /* border: 1px solid var(--primary-light); */
    box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
}

.container_accordian .wrapper .toggle_acco {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #111130;
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
}

.container_accordian .wrapper .content_playlist {
    position: relative;
    font-size: 14px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: hidden;
    transition: all .3s;
}

.container_accordian .wrapper i.icon_ {
    padding: 10px;
    background-color: var(--btn_secondary);
    color: #ec6106;
    border-radius: 50%;
    transition: 0.3s;
}

.video-list {
    list-style: none;
    padding-left: 7px;
    padding-right: 7px;
}

.video-list li {
    cursor: pointer;
}


.play_small_btn {
    border: none;
    outline: none;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    color: var(--main-primary);
    background-color: var(--btn_secondary);
    transition: .3s;
}

.video-list li:hover .play_small_btn {
    color: var(--text-color3);
    background-color: var(--main-primary);
    transition: .3s;
}

.video-list li.completed .play_small_btn {
    background: var(--main-primary) !important;
    color: var(--white-grey);
}

.video-list li.completed span {
    opacity: 0.5 !important;
}

.courses .details_about.fa_ul ul {
    --icon-space: 1.3em;
    list-style: none;
    padding: 0;
}


.courses .details_about.fa_ul ul li {
    padding-left: var(--icon-space);
}

.courses .details_about.fa_ul ul li:before {
    content: "\f560";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    color: var(--main-primary);
    margin-left: calc(var(--icon-space) * -1);
    width: var(--icon-space);
}

.text-overflow {
    height: 95px;
    display: block;
    overflow: hidden;
    word-break: break-word;
    word-wrap: break-word;
}

.btn-overflow {
    cursor: pointer;
    display: none;
    text-decoration: none;
}

.download_files {
    padding: 10px;
}

.download_files .activity-img {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.primary_ac {
    background: var(--primary-color-rgb-op);
    color: var(--main-primary);
}

.secondary_ac {
    background: var(--secondary-color-rgb-op);
    color: var(--secondary-color);
}

.third_ac {
    background: #FFF2E4;
    color: #FFB359;
}

/* 21/02/2023 */
.fixed_content_items {
    background: var(--sidebar-color);
    border-radius: 10px;
    border: 1px solid var(--primary-light);
}

.teacher .enroll_req .content_items {
    border: none !important;
    border-radius: 10px;
    /* height: 250px; */
    max-height: 400px;
    min-height: 75px;
    overflow-y: scroll;
}

.enroll_sec_1 {

    border-bottom: 1px solid var(--primary-light);
}
.wrapper_second .enrolled_Courses_req .items_list {
    border: 1px solid var(--primary-light);
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05));
    border-radius: 18px;
}
.approve_btns_sure {
    transition: 0.3s;
}
.teacher .top_section_course {
    height: 150px;
    background-image: url("../images/cover.png");
    background-position: right;
    background-position-y: inherit;
    border-radius: 18px;
    overflow: hidden;
}

.teacher .top_section_course .top_textarea {
    background: linear-gradient(270deg, rgba(84, 65, 163, 0) -48.05%, #542145 101.63%);
    height: 100%;
    color: var(--text-color3);
    display: flex;
    padding-left: 22px;
    align-items: center;
}

/* 27/02/2023 */

.teacher .teachers_list .nav-tabs .nav-link.active,
.teacher .teachers_list .nav-tabs .nav-link.active:hover {
    border-color: transparent;
    background: transparent;
    border-top: 4px solid var(--main-primary);
    color: var(--text-color2);
    font-weight: 600;
    border-radius: 0 !important;
}

.teacher .teachers_list .nav-tabs .nav-link:not(.active),
.teacher .teachers_list .nav-tabs .nav-link:not(.active):hover {
    border-top: 4px solid var(--main-primary);
    opacity: 0.2;
}

.teacher .teachers_list .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--text-color2);
}

.teacher .teachers_list .nav-tabs .nav-link {
    border-color: transparent;
    border-radius: 0 !important;
    font-weight: 600;
    border: 0 solid transparent;
    color: var(--text-color);
    padding: 8px 1px;
    font-size: 14px;
}

.teacher .teachers_list .nav-tabs {

    border: 0 !important;
}

.teacher .teachers_list .upload {
    height: 140px;
}

.teacher .addcourse form .input_field .reload_code {
    position: absolute;
    right: 4px;
    top: 28px;
    padding: 12px;

}

.col-ting {
    width: 16em;
}

.file-upload .image-box {

    height: 10em;
    width: 16em;
    background: #ffebdf;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
}
.dark .file-upload .image-box {
    background: #535353;
}

.file-upload .image-box img {
    height: 100%;
    display: none;
}

.file-upload .image-box p {
    position: relative;
    top: 30%;
    color: #fff;
}

.editor_section {
    min-height: 290px;
    border: 2px solid var(--primary-light);
    border-radius: 11px;
    background: var(--sidebar-color);
}


/* ============ select2 select =========== */
.select2-container { 
    font-size: 14px;
}
.select2.select2-container {
    width: 100% !important;
}

.select2.select2-container .select2-selection {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    height: 40px;
    margin-bottom: 15px;
    outline: none;
    transition: all 0.15s ease-in-out;
    border: 2px solid var(--primary-light);
    border-radius: 11px;
    background: #fff;
}

.select2.select2-container .select2-selection:focus {

    color: var(--text-color2);
    background: #fff;
    border-color: var(--main-primary);
}

.select2.select2-container .select2-selection .select2-selection__rendered {
    color: var(--text-color2);
    line-height: 35px;
    padding-right: 33px;
}

.select2.select2-container .select2-selection .select2-selection__arrow {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    height: 38px;
    width: 33px;
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
    border: 1px solid var(--main-primary);
}


.select2.select2-container .select2-selection--multiple {
    height: auto;
    min-height: 34px;
}

.select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0;
    height: 32px;
}

.select2.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0 4px;
    line-height: 29px;
}

.select2.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 4px 4px 0 0;
    padding: 0 6px 0 22px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    position: relative;
}

.select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    margin: 0;
    text-align: center;
    color: #e74c3c;
    font-weight: bold;
    font-size: 16px;
}

.select2-container .select2-dropdown {
    background: transparent;
    border: none;
    margin-top: -10px;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
}

.select2-container .select2-dropdown .select2-search {
    padding: 0;
}

.select2-container .select2-dropdown .select2-search input {
    outline: none;
    border: 1px solid var(--main-primary);
    border-bottom: none;
    padding: 4px 6px;
}

.select2-container .select2-dropdown .select2-results {
    padding: 0;
}

.select2-container .select2-dropdown .select2-results ul {
    background-color: var(--primary-color-light);
    border: 1px solid var(--primary-light);
}

.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
    background-color: var(--main-primary);
}

.big-drop {
    width: 600px !important;
}

.dark .select2-results__option[aria-selected] {
    cursor: pointer;
    color: #fff;
}

.dark .select2-dropdown {

    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--main-primary);
}

.dark .select2-container .select2-dropdown .select2-search input {
    background: var(--sidebar-color);
    color: #fff;
}

.dark .select2-results__option {
    color: #fff;
}

.btn_add_lesson:hover,
.btn_add_lesson:focus {
    background: var(--main-primary);
    color: #fff;

}

.container_accordian .wrapper .toggle_acco_lesson {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #111130;
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
}

.container_accordian .wrapper .content_playlist_lesson {
    position: relative;
    font-size: 14px;
    text-align: justify;
    line-height: 30px;
    height: auto;
    overflow: hidden;
    transition: all .3s;
}

.container_accordian .wrapper .toggle_acco_parts {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #111130;
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
}

.container_accordian .wrapper .content_playlist_parts {
    position: relative;
    font-size: 14px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: hidden;
    transition: all .3s;
}

.toggle_acco_lesson .toggle_acco_icons a:hover,
.toggle_acco_parts .toggle_acco_icons a:hover {
    opacity: 1;
    transition: 0.3s;
}

.subacco_start {
    background-color: var(--body-color);
    margin-left: -22px;
    margin-right: -22px;
    border-radius: 12px;
}

.sub_accordian_section .wrapper {
    background-color: var(--sidebar-color);
}
.container_accordian .wrapper i.icon_parts {
    padding: 10px;
    background-color: var(--btn_secondary);
    color: var(--main-primary);
    border-radius: 50%;
    transition: 0.3s;
}
.trans_btn {
    border: 1px solid var(--main-primary);
    border-radius: 10px;
    background: transparent;
    transition: 0.3s;
    color: var(--main-primary);
}

.trans_btn:hover {
    background: #fff;
    color: #000;
    transition: 0.3s;
}




/* .file {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
} */

.file > input[type='file'] {
    display: none
  }

.file>label {
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    outline: 0;
    user-select: none;
    border-radius: 10px;
    background: transparent;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
}


.file>label>span {
    padding-right: 5px;
}

.file--upload>label {
    color: var(--main-primary);
    border: 1px solid var(--main-primary);
}

.file--upload>label:hover {
    color: #fff;
    border-color: var(--main-primary);
    background-color: var(--main-primary);
}

.file--upload>label:active {
    color: #fff;
    background-color: var(--main-primary);
}
/* 27/02/2023 end  */



.teachingView-content-text{
    overflow:hidden;
}



.mdi--users-group {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9A3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42c-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3a3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3a3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9c-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65c2.56.34 4.45 1.51 4.45 2.9z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .multiple-input-list__btn,.multiple-input-list__btn{
    cursor: pointer;
  }