/* Common class element styles */

@font-face {
    font-family: 'Poppins';
    src: url("../fonts/Poppins-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url("../fonts/Poppins-Medium.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic A1';
    src: url("../fonts/GothicA1-Medium.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body,
.page-wrapper {
    background-image: none !important;
    height: 100% !important;
    font-family: 'Gothic A1', sans-serif;
}

div[role="main"] {
    height: 100% !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
}
.aalink.focus, #page-footer a:not([class]).focus, .arrow_link.focus, a:not([class]).focus, .activityinstance>a.focus, .aalink:focus, #page-footer a:not([class]):focus, .arrow_link:focus, a:not([class]):focus, .activityinstance>a:focus {
    outline:none;
    color: #006BB6;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow:none;
}

input[type="text"] {
    max-width: 100%;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

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

.justify-content-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: flex-end;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-start {
    align-items: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.f-14 {
    font-size: 14px;
}

.f-15 {
    font-size: 15px;
}

.f-16 {
    font-size: 16px;
}

.f-27 {
    font-size: 27px;
}

.b-400 {
    font-weight: 400 !important;
}

.b-500 {
    font-weight: 500 !important;
}

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

.b-700 {
    font-weight: 700 !important;
}

.b-800 {
    font-weight: 800 !important;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-gothic {
    font-family: 'Gothic A1', sans-serif;
}
.color-black {
    color: #000;
}
.color-707070 {
    color: #707070;
}

.color-AAA {
    color: #AAAAAA;
}

.color-006BB6 {
    color: #006BB6;
}

.color-fff {
    color: #fff;
}

.color-000 {
    color: #000;
}

.color-9747FF {
    color: #9747FF;
}

.color-5FBEF0 {
    color: #5FBEF0;
}

.bg-006BB6 {
    background: #006BB6;
}

.bg-E1E2FD {
    background-color: #E1E2FD;
}

.bg-D2EDFB {
    background-color: #D2EDFB;
}

.bg-light-green {
    background: #E8FBE4;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.border-radius-16 {
    border-radius: 16px;
}

.bg-white {
    background: #fff;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.p-40 {
    padding: 40px;
}

.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.f-26 {
    font-size: 26px;
}

.f-28 {
    font-size: 28px;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.lh-16 {
    line-height: 16px;
}

.lh-18 {
    line-height: 18px;
}

.lh-24 {
    line-height: 24px;
}

.lh-28 {
    line-height: 28px;
}

.lh-32 {
    line-height: 32px;
}

.lh-36 {
    line-height: 36px;
}

.text-underline {
    text-decoration: underline !important;
}

.border-1-solid {
    border-width: 1px;
    border-style: solid;
}

.br-color-light-blue {
    border-color: #D2EDFB;
}

/*========== Icons ===============*/
.ic-guage-solid {
    -webkit-mask-image: url("../pix/guage-solid.svg");
    mask-image: url("../pix/guage-solid.svg");
}

.ic-lines-leaning-solid {
    -webkit-mask-image: url("../pix/lines-leaning-solid.svg");
    mask-image: url("../pix/lines-leaning-solid.svg");
}

.ic-user-solid {
    -webkit-mask-image: url("../pix/user-solid.svg");
    mask-image: url("../pix/user-solid.svg");
}
.ic-card {
    -webkit-mask-image: url("../pix/score-card.svg");
    mask-image: url("../pix/score-card.svg");
}

.file-solid {
    -webkit-mask-image: url("../pix/file-solid.svg");
    mask-image: url("../pix/file-solid.svg");
}

.ic-circle-question-solid {
    -webkit-mask-image: url("../pix/circle-question-solid.svg");
    mask-image: url("../pix/circle-question-solid.svg");
}

.ic-arrow-right-from-bracket-solid {
    -webkit-mask-image: url("../pix/arrow-right-from-bracket-solid1.svg");
    mask-image: url("../pix/arrow-right-from-bracket-solid1.svg");
}

.ic-popover {
    -webkit-mask-image: url("../pix/Popover.svg");
    mask-image: url("../pix/Popover.svg");
}

.ic-flag-solid {
    -webkit-mask-image: url("../pix/flag-solid.svg");
    mask-image: url("../pix/flag-solid.svg");
}

.ic-star-solid {
    -webkit-mask-image: url("../pix/star-solid.svg");
    mask-image: url("../pix/star-solid.svg");
}

.ic-user-tie-solid {
    -webkit-mask-image: url("../pix/user-tie-solid.svg");
    mask-image: url("../pix/user-tie-solid.svg");
}

.ic-book-open-reader-solid {
    -webkit-mask-image: url("../pix/book-open-reader-solid.svg");
    mask-image: url("../pix/book-open-reader-solid.svg");
}

.ic-paper-plane-solid {
    -webkit-mask-image: url("../pix/paper-plane-solid.svg");
    mask-image: url("../pix/paper-plane-solid.svg");
}
.ic-cubes-stacked-solid {
    -webkit-mask-image: url("../pix/cubes-stacked-solid.svg");
    mask-image: url("../pix/cubes-stacked-solid.svg");
}

.ic-user-graduate-solid {
    -webkit-mask-image: url("../pix/user-graduate-solid.svg");
    mask-image: url("../pix/user-graduate-solid.svg");
}

.ic-map-pin-solid {
    -webkit-mask-image: url("../pix/map-pin-solid.svg");
    mask-image: url("../pix/map-pin-solid.svg");
}

.ic-download-solid {
    -webkit-mask-image: url("../pix/download-solid.svg");
    mask-image: url("../pix/download-solid.svg");
}
.ic-trash-solid {
    -webkit-mask-image: url("../pix/trash-solid.svg");
    mask-image: url("../pix/trash-solid.svg");
}
.ic-calendar-solid {
    -webkit-mask-image: url("../pix/batch_calendar.svg");
    mask-image: url("../pix/batch_calendar.svg");
}
.ic-user-1-solid {
    -webkit-mask-image: url("../pix/user-1.svg");
    mask-image: url("../pix/user-1.svg");
}
.ic-bubble-chat {
    -webkit-mask-image: url("../pix/bubble-chat.svg");
    mask-image: url("../pix/bubble-chat.svg");
}
.ic-feedback {
    -webkit-mask-image: url("../pix/feedback-icon.svg");
    mask-image: url("../pix/feedback-icon.svg");
}
/*=============== text colors ===================*/
.text-green {
    color: #1EBF28;
}

.text-blue {
    color: #006BB6;
}

.text-grey-49 {
    color: #494949;
}

.text-light-red {
    color: #F45432;
}

/*Custom css*/
html,
body,
.page-wrapper {
    height: 100%;
}

img {
    max-width: 100%;
}

a {
    color: #5FBEF0;
    text-decoration: none !important;
}

a:hover {
    color: #006BB6
}

/*====================== Dashboard page styles ======================= */
.left-sidebar {
    padding: 23px 23px;
    min-height: 100vh;
    background: #F2F2F2;
    border-right: 1px solid #AAAAAA;
}

.side-bar-logo {
    width: 133px;
    margin: 0px auto;
    margin-bottom: 45px;
    margin-top: 20px;
}

#dashboard-nav-menu {
    list-style: none;
    margin-top: 33px;
    padding: 0px;
}

#dashboard-nav-menu li a {
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: #006BB6;
    display: flex;
    align-items: center;
    padding: 15px 16px;

    transition: all .3s ease;
}

#dashboard-nav-menu li {
    margin-bottom: 10px;
    border-radius: 25px;
    overflow: hidden;
}

#dashboard-nav-menu li.active-menu-item a {
    color: #fff;
}

#dashboard-nav-menu li.active-menu-item,
#dashboard-nav-menu li:focus {
    background: #006BB6;
}

#dashboard-nav-menu li a:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}

#dashboard-nav-menu li:hover {
    color: #006BB6;
    background: rgba(0, 107, 182, 0.15);
}

#dashboard-nav-menu li:hover a {
    color: #006BB6;
}

#dashboard-nav-menu li .vector-icon {
    width: 20px;
    height: 20px;
    display: block;
    background-color: #006bb6;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 10px;
}
#dashboard-nav-menu li:hover .vector-icon {
    background-color: #006bb6!important;
}
#dashboard-nav-menu a:hover .vector-icon{
    background-color: #006bb6!important;
}
#dashboard-nav-menu li.active-menu-item .vector-icon {
    background-color: #fff !important;
}
#dashboard-nav-menu li.active-menu-item:hover {
    background-color: #006bb6!important;
    color: #fff!important;
}
#dashboard-nav-menu li.active-menu-item:hover a {
    color: #fff!important;
}

#dashboard-nav-menu .has-sub-menu a {
    position: relative;
}

#dashboard-nav-menu .has-sub-menu>a::after {
    content: "\f078";
    font-family: FontAwesome;
    left: auto;
    position: absolute;
    top: -5px;
    right: 10px;
    bottom: 0px;
    margin: auto;
    width: 20px;
    height: 20px;
}

#dashboard-nav-menu .has-sub-menu.menu-expanded>a::after {
    content: "\f077";
}

.dashboard-submenu {
    list-style: none;
    padding: 0px;
    margin: 0px;
    background: #006BB6;
    display: none;
}

.dashboard-submenu li {
    border-radius: 0px !important;
    margin: 0px !important;
}

.dashboard-submenu li a {
    color: #fff !important;
}

.dashboard-submenu li:hover,
.dashboard-submenu li.active-submenu-item {
    background-color: #01558F !important;
}

.dashboard-submenu li a .vector-icon {
    background-color: #fff !important;
}

.chat-bot {
    box-shadow: 3px 4px 12px rgba(170, 170, 170, 0.2);
    margin-top: 200px;
}

.jordy-im-2 {
    display: none;
}

.chat-bot-contents h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 18px;
    color: #006BB6;
}

.chat-bot-contents button {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: #FFFFFF;
    background: #006BB6;
    border-radius: 20px;
}

.chat-bot-contents button:hover {
    color: #fff;
}

.chat-bot-contents button:focus {
    outline: none;
    box-shadow: none;
}

.jordy-img img {
    height: 186px;
    margin-top: -130px;
}

.chat-bot:hover .jordy-im-1 {
    display: none;
}

.chat-bot:hover .jordy-im-2 {
    display: block;
    cursor: pointer;
}

.badge-wrapper {
    width: 59px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.badge-wrapper::before {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    background-image: url("../pix/badge-outline.png");
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.badge-wrapper {
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.badge-wrapper.badge-5 {
    background-image: url("../pix/5.svg");
}

.badge-wrapper.badge-10 {
    background-image: url("../pix/10.svg");
}

.badge-wrapper.badge-15 {
    background-image: url("../pix/15.svg");
}

.badge-wrapper.badge-20 {
    background-image: url("../pix/20.svg");
}

.badge-wrapper.badge-25 {
    background-image: url("../pix/25.svg");
}

.badge-wrapper.badge-30 {
    background-image: url("../pix/30.svg");
}

.badge-wrapper.badge-35 {
    background-image: url("../pix/35.svg");
}

.badge-wrapper.badge-40 {
    background-image: url("../pix/40.svg");
}

.badge-wrapper.badge-45 {
    background-image: url("../pix/45.svg");
}

.badge-wrapper.badge-50 {
    background-image: url("../pix/50.svg");
}

.badge-wrapper.badge-55 {
    background-image: url("../pix/55.svg");
}

.badge-wrapper.badge-60 {
    background-image: url("../pix/60.svg");
}

.badge-wrapper.badge-65 {
    background-image: url("../pix/65.svg");
}

.badge-wrapper.badge-70 {
    background-image: url("../pix/70.svg");
}

.badge-wrapper.badge-75 {
    background-image: url("../pix/75.svg");
}

.badge-wrapper.badge-80 {
    background-image: url("../pix/80.svg");
}

.badge-wrapper.badge-85 {
    background-image: url("../pix/85.svg");
}

.badge-wrapper.badge-90 {
    background-image: url("../pix/90.svg");
}

.badge-wrapper.badge-95 {
    background-image: url("../pix/95.svg");
}

.badge-wrapper.badge-100 {
    background-image: url("../pix/100.svg");
}

.badge-count {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    margin-top: -16px;
    color: #9C8EF1;
}
.badge-count .batch-percentage {
    font-size: 7px;
}

.user-title-wrapper h4 {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    color: #494949;
}

.user-title-wrapper h3 {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 19px;
    color: #006BB6;
    margin-top: 10px;

}

.user-title-wrapper h3 span.text-green {
    position: absolute;
    margin-left: 10px;
}

.announcements {
    height: 40px;
    display: flex;
    align-items: center;
    margin-top: 15px;
    background: #D2EDFB;
    border-radius: 8px;
    padding: 5px 10px 0px;
}

.announcements p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #707070;
    margin: 15px;
    width: 100%;
}

.user-details-wrapper ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
}

.user-details-wrapper {
    border: 2px solid #5FBEF0;
    border-radius: 25px;
    padding-left: 30px;
    margin-top: 10px;
}

.user-details-wrapper ul li {
    list-style: none;
}

.user-details-wrapper .vector-icon {
    width: 20px;
    height: 20px;
    display: block;
    background-color: #5FBEF0;
    mask-size: cover;
    mask-size: 100% 100%;
    margin-right: 20px;
}

.user-face {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 100%;
}

.icon-bell {
    width: 20px;
    height: 20px;
    margin-right: 25px;
}

.jordy-img-small {
    width: 31px;
    margin-right: 10px;
}

.vector-icon {
    width: 14px;
    height: 14px;
    display: block;
    mask-size: cover;
    mask-size: 100% 100%!important;
    -webkit-mask-size: 100% 100%!important;
}

.trainer-graduate-icon {
    width: 19px;
    height: 19px;
}

.trainer-position-icon {
    width: 14px;
    height: 19px;
}

.trainer-experience-icon {
    width: 19px;
    height: 16px;
}

.icon-color-black {
    background-color: #000;
}

.icon-color-light-blue {
    background-color: #5FBEF0;
}

.box-list-item {
    display: flex;
    justify-content: space-between;
}

.box-list-item .box-list-item-left {
    width: 80%;
}

.box-list-item .box-list-item-right {
    width: 20%;
    text-align: right;
}

.box-list-item p {
    font-family: 'Gothic A1', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    color: #000000;
    margin: 0px;
    margin-top: 15px;
    word-wrap: break-word;
}

.box-list-item p span {
    display: block;
    font-weight: 400;
    font-size: 10px;
    line-height: 17px;
    color: #707070;
    margin-top: 5px;
}

.box-list-item-right h6 {
    font-weight: 600;
    font-size: 13px;
    text-align: right;
    color: #000000;
    margin-top: 10px;
}

.box-list-item-right h6 span {
    font-size: 9px;
}

.box-lists {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-left: 0px;
}

.gradient-bg-1 {
    background: url("../pix/gradient-bg-1.png");
    background-size: 100%;
    position: relative;
}

.gradient-bg-2 {
    background: url("../pix/gradient-bg-2.png");
    background-size: 100%;
    position: relative;
}

.gradient-bg-3 {
    background: url("../pix/gradient-bg-3.png");
    background-size: 100%;
    position: relative;
}

.gradient-bg-4 {
    background: url("../pix/gradient-bg-4.png");
    background-size: 100%;
    position: relative;
}

.gradient-bg-5 {
    background: url("../pix/gradient-bg-5.png");
    background-size: 100%;
    position: relative;
}

.gradient-bg-6 {
    background: url("../pix/gradient-bg-6.png");
    background-size: 100%;
    position: relative;
}

.pie-chart-list li p {
    font-size: 14px;
    margin: 0px;
}

.pie-chart-list li h6 {
    margin: 0px;
}

.pie-chart-list li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.pie-chart-list li::before {
    position: absolute;
    width: 9px;
    height: 9px;
    content: "";
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 100%;
}

.dot-bg-1::before {
    background: #6BC3F1;
    box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.25);
}

.dot-bg-2::before {
    background: linear-gradient(134.19deg, #006BB6 17.15%, #006BB6 17.15%, #FFFFFF 167.6%);
}

.attendance-bar {
    background: #FFFFFF;
    box-shadow: 0px 1px 4px rgba(128, 147, 156, 0.28);
    border-radius: 14px;
    height: 6px;
}

.attendance-bar .progress-bar {
    background: #5FBEF0;
    border-radius: 14px;
    position: relative;
}

.progress-bar-wrapper {
    position: relative;
}

.progress-bar-wrapper .vector-icon {
    position: absolute;
    left: 75%;
    top: 5px;
}

.card-box {
    border-radius: 16px;
    border: 1px solid #D2EDFB;
    padding: 20px;
    height: 100%;
    background-size: cover !important;
}

.card-box-head {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
    background-size: cover !important;
}

.leads-img {
    width: 43px;
    height: 43px;
    border-radius: 100%;
    position: relative;
}

.leads-img img {
    width: 43px;
    height: 43px;
    border-radius: 100%;
    object-fit: cover;
}

/*.leads-img::after {*/
/*    background: #1EBF28;*/
/*    border: 2px solid #FFFFFF;*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    position: absolute;*/
/*    right: -2px;*/
/*    top: 0px;*/
/*    content: "";*/
/*    border-radius: 100%; */
/*}*/
.leads-header {
    display: flex;
    align-items: center;
}

.leads-header .leads-content {
    padding-left: 10px;
}

.leads-header .leads-content h5 {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    font-family: 'Gothic A1', sans-serif;
    margin-bottom: 5px;
}

.leads-header .leads-content button {
    font-size: 10px;
    padding: 5px 13px;
    background: #87CC7E;
    border-radius: 18px;
    color: #fff;
    border: none;
    font-family: 'Poppins', sans-serif;
}

.leads-carousel-item p {
    font-family: 'Gothic A1', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #494949;
    margin-top: 10px;
    margin-bottom: 0px;
}

.slick-dots {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}

.slick-dots li {
    background: #AAAAAA;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    margin: 0px 3px;
    cursor: pointer;
}

.slick-dots li.slick-active {
    background: #494949;
}

.slick-dots li button {
    opacity: 0;
    visibility: hidden;
}

.leads-carousel {
    position: relative;
    padding-bottom: 10px;
}

.leads-carousel-item {
    position: relative;
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.leads-main-content {
    margin-bottom: 40px; /* spacing above arrows */
}

.custom-arrow {
    position: absolute;
    bottom: 10px;
    background: #e8fbe4;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #000;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
    transition: all 0.3s ease;
}

.slick-prev.custom-arrow {
    left: 10%;
}

.slick-next.custom-arrow {
    right: 10%;
}

.custom-arrow:hover {
    background: #87CC7E;
    color: #fff;
}


.course-box {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #D2EDFB;
    border-radius: 16px;
    overflow: hidden;
    background: url(../pix/gradient-bg-2.png);
    background-size: cover !important;
}

.course-box .course-contents {
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.course-box .course-contents .fa-chevron-right {
    margin-top: 3px;
}

.course-box .course-contents .course-star i {
    color: #FAC02B;
    font-size: 22px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#course-tab-carousel .slick-slide {
    margin: 0 4px;
}

/* the parent */
#course-tab-carousel .slick-list {
    margin: 0 -7px;
}

#course-tab-carousel-ongoing .slick-slide {
    margin: 0 4px;
}

/* the parent */
#course-tab-carousel-ongoing .slick-list {
    margin: 0 -7px;
}

#course-tab-carousel-upcoming .slick-slide {
    margin: 0 4px;
}

/* the parent */
#course-tab-carousel-upcoming .slick-list {
    margin: 0 -7px;
}
#course-tab-carousel .slick-track {
    margin-left: 5px;
}
.course-box .course-contents h5 {
    font-family: 'Gothic A1', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
    width: 90%;
    position: relative;
    margin-bottom: 0px;
}

.course-box .course-contents .course-status {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: auto;
    height: 6px;
    background: #1EBF28;
}

#course-tab-content {
    padding: 20px 0 0 0;
}

#course-tab-content .tab-pane {
    display: block;
    height: 0px;
    overflow: hidden;
}

#course-tab-content .active {
    height: auto;
}

.ongoing-box {
    padding: 17px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.ongoing-box h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: #000000;
    margin: 0px 0px 10px;
    padding: 0px;
}

.ongoing-box p {
    font-family: 'Gothic A1', sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-decoration-line: underline;
    color: #000000;
    margin: 0px;
    padding: 0px;
}

#course-tabs {
    background: #fff;
    border-bottom: 4px solid #DBDBDB !important;
}

#course-tabs li,
#course-tabs li a {
    margin-right: 0px;
}

#course-tabs .nav-link.active,
.nav-pills .show>.nav-link {
    color: #000000 !important;
    background-color: transparent;
    position: relative;
}

#course-tabs .nav-link.active::after {
    width: 100%;
    height: 4px;
    background: #006BB6;
    border-radius: 2px;
    position: absolute;
    bottom: -5px;
    content: "";
    left: 0px;
    right: 0px;
    margin: auto;
}

#course-tabs a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #000000;
    background: #fff;
}

#course-tabs a.active {
    font-weight: 500;
}

.mobile-menu-button {
    background: none;
    border: none;
    width: 30px;
    height: 25px;
    margin-top: 26px;
    margin-left: 10px;
    display: none;
}

.mobile-menu-button span {
    width: 100%;
    height: 3px;
    background: #006bb6;
    margin-bottom: 3px;
    display: block;
    border-radius: 3px;
    transition: all .25s ease;
    outline: none;
}

.mobile-menu-button:focus,
.mobile-menu-button:active {
    outline: none;
}

.show-sidebar {
    position: fixed;
    left: 0px !important;
    top: 0px;
    bottom: 0px;
    margin: auto;
    display: block !important;
    background: #F2F2F2;
    z-index: 100;
    width: 260px;
    overflow-y: scroll;
    padding-bottom: 30px;
}

.left-sidebar-col {
    transition: all .25s ease;
}

.close-button {}

.close-button span:nth-child(1) {
    transform: rotate(45deg);
}

.close-button span:nth-child(2) {
    display: none;
}

.close-button span:nth-child(3) {
    transform: rotate(-45deg);
    margin-top: -6px;
}

/*============== Core page styles ===============*/
.corse-progress-wrapper {
    position: relative;
    margin-bottom: 30px;
    margin-top: 80px;
}

.corse-progress-wrapper .progress-bar {
    background: #DBDBDB;
    border-radius: 7px;
    height: 7px;
}

.progress-steps .step {
    width: 22px;
    height: 22px;
    background: #DBDBDB;
    margin: 0px auto;
    border-radius: 100%;
}

.progress-steps .active .step {
    background: #5FBEF0 !important;
}

.progress-steps {
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -15px 0px 0px 0px;
    padding: 0px;

}

.progress-steps {
    position: relative;
}

.progress-steps li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.progress-steps .active::before {
    width: 50%;
    height: 7px;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    background: #5fbef0;

}

.progress-steps .active:first-child::before {
    border-radius: 7px 0px 0px 7px;
}

.progress-steps .active:last-child::before {
    border-radius: 0px 7px 7px 0px;
}

.progress-steps .completed::after {
    content: "\f00c";
    font-family: FontAwesome;
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1EBF28;
    box-shadow: 1px 1px 10px #00000024;
}

.progress-steps .completed::before {
    width: 100% !important;
}

.breadcrumbs-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.breadcrumbs-wrapper ul {
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.breadcrumbs-wrapper ul li,
.breadcrumbs-wrapper ul li a {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    color: #000;
    font-weight: 600;
}

.breadcrumbs-wrapper ul li a {
    padding-right: 30px;
    display: block;
    position: relative;
    margin-right: 10px;
}

.breadcrumbs-wrapper ul li a::after {
    content: "\f054";
    font-family: FontAwesome;
    width: 20px;
    height: 15px;
    background: #fff;
    position: absolute;
    left: auto;
    right: 0px;
    top: 2px;
    bottom: 0px;
    margin: auto;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content-section h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 10px;
}

#content-section h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #000;
    font-weight: 500;
    margin-bottom: 15px;
    margin-top: 10px;
}

#content-section p {
    font-family: 'Gothic A1', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    margin-bottom: 30px;
}

.tech-content-box h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    line-height: 21px;
    margin-bottom: 0px;
}

.tech-content-box a {
    color: #000;
}

.author-list-item {
    display: flex;
}

.author-list-item span {
    background-color: #006bb6;
    margin-right: 10px;
}

.author-section h5 {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Gothic A1', sans-serif;
    margin-bottom: 20px;
}
.author-section .col-10 {
    padding-left: 30px;
}
.author-section .author-image  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.inactive-box::after {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background: #00000061;
    content: "";
}

.list-style-blue-circle {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.list-style-blue-circle li {
    position: relative;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #000000;
    margin: 5px 0px;
    padding-left: 35px;
}

.list-style-blue-circle li::before {
    background: #FFFFFF;
    border: 2px solid #5FBEF0;
    position: absolute;
    width: 10px;
    height: 10px;
    content: "";
    border-radius: 100%;
    top: 6px;
    left: 10px;
}

.video-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.video-wrapper::before {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    content: "";
    background: #0000008a;
}

.video-control-button {
    position: absolute;
    width: 67px;
    top: 20px;
    left: 20px;
}

.list-downloads {
    margin-top: 50px;

}

.list-downloads li {
    font-family: 'Gothic A1', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #000000;
    margin: 8px 0px;
}

.list-downloads li div {
    display: flex;
    justify-content: space-between;
}

.list-downloads li span {
    background-color: #006bb6;
}

.game-box {
    border: 1px solid #000;
    padding: 20px 30px;
}

.game-box h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: #006BB6;
    text-align: center;
}

.game-box button {
    width: 43px;
    height: 25px;
    border: none;
    background: url("../img/click-icon-1.svg");
    transition: all .3s ease-in;
    display: block;
    margin: 0px auto;
}

.game-box button:hover {
    width: 43px;
    height: 25px;
    border: none;
    cursor: pointer;
    background: url("../img/click-icon-2.svg");
}

#custom-form-type-1 label {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #006BB6;
}

#custom-form-type-1 .form-control {
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #006BB6;
    padding: 10px 20px 10px 0px;
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #494949;
}

#custom-form-type-1 .form-control:focus,
#custom-form-type-1 .form-control:active {
    outline: none;
    box-shadow: none;
}

.accordian-item {}

.accordian-head {
    background: #F5F5F5;
    border-radius: 5px;
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    padding: 25px 30px 20px 60px;
    position: relative;
    cursor: pointer;
}

.accordian-head::before {
    content: "Q.";
    position: absolute;
    left: 10px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 18px;
    color: #5FBEF0;
    width: 30px;
    height: 34px;
    display: flex;
    align-items: center;
}

.accordian-content::before {
    content: "A.";
    position: absolute;
    left: 10px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 18px;
    color: #AAAAAA;
    width: 30px;
    height: 34px;
    display: flex;
}

.accordian-head.collapsed {
    background: #fff;
    border-bottom: 1px solid #aaa;
    border-radius: 0px;
}

.accordian-head.collapsed::after {
    content: "\f107";
    font-family: FontAwesome;
    left: auto;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0px;
    margin: auto;
    width: 20px;
    height: 20px;
    color: #aaa;
}

.accordian-head::after {
    content: "\f106";
    font-family: FontAwesome;
    left: auto;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0px;
    margin: auto;
    width: 20px;
    height: 20px;
    color: #aaa;
}

.accordian-content {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    position: relative;
    color: #707070;
}

.accordian-content div {
    padding: 20px 30px 30px 60px;
}

#maincontent {
    display: block;
    height: auto;
    overflow: hidden;
}

#region-main {
    border: 0 !important;
}

#page-content.blocks-pre .columnleft,
.leftsidebar-region-inactive #page-content.blocks-pre.blocks-post .region-main {
    /*max-width: 317px;*/
}

[data-region="blocks-column"] {
    width: auto;
    float: none;
}

.container-fluid {
    max-width: 100%;
}

.card-box-todo {
    height: auto !important;
    margin-bottom: 30px;
}

.card-box-todo p {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 10px !important;
}

.card-box-todo .todo-date {
    font-family: 'Gothic A1', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #AAAAAA;
    margin-top: 10px;
}

.card-box-todo h4 {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #000;
}

.card-box-todo .list-style-blue-circle li::before {
    left: 0;
}

.card-box-todo .list-style-blue-circle li {
    padding-left: 20px;
}
.todo-item.completed p {
    text-decoration: line-through;
}
.card-box-todo .delete-todo {
    border: none;
    background: none;
    width: 12px;
    color: #F45432;
}
.card-box-todo .delete-todo:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.delete-todo span {
    background-color: #F5222D;
}
.todo-actions {
    display: flex;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity .3s ease;
}
.todo-item:hover .todo-actions {
    opacity: 1;
}
.todo-item a, .todo-item p {
    color: #000;
    text-decoration: underline!important;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
}
.todo-item p  {
    font-size: 14px;
    text-decoration: none!important;
}
.todo-item a i {
    color: #5FBEF0;
    margin-left: 5px;
    font-size: 14px;
}
.task-priority  {
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    color: #FFFFFF;
    padding: 2px 8px;
    display: inline-block;
}
.task-priority.priority-high {
    background: #F45432;
}
.task-priority.priority-medium {
    background: #FAC02B;
}
.task-priority.priority-low {
    background: #87CC7E;
}
.filter-dropdown-wrapper {
    position: relative;
    width: 170px;
    max-width: 170px;
    padding-bottom: 50px;
    margin-right: 20px;
    z-index: 10;
}
.filter-dropdown {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    border-radius: 19px;
    min-width: 170px;
    padding: 10px 16px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000;
}
.filter-dropdown button {
    width: 100%;
    height: auto;
    background: #fff;
    text-align: left;
    border: none;
    color: #000;
    padding: 0px;
    padding: 0px 0px;
    position: relative;
}
.filter-dropdown button::after {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    content: "\f078";
    font-family: FontAwesome;
    color: #5FBEF0;
}
.filter-dropdown button:focus,
.filter-dropdown button:active {
    outline: none;
    box-shadow: none;
}
.filter-dropdown ul {
    list-style: none;
    padding: 0px;
    margin: 5px 0px 0px;
    display: none;
}
.filter-dropdown ul li {
    padding: 5px 0px;

}
.filter-dropdown ul li:hover {
    cursor: pointer;
    color: #5FBEF0;
}
/* The container */
.todo-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    right: -20px;
    top: -10px;
}

/* Hide the browser's default checkbox */
.todo-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.todo-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    box-shadow: inset 0px 2px 6px rgba(0, 107, 182, 0.45);
    border-radius: 100%;
}

/* On mouse-over, add a grey background color */
.todo-checkbox:hover input~.checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.todo-checkbox input:checked~.checkmark {
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0px 2px 4px rgba(95, 190, 240, 0.27);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.todo-checkbox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.todo-checkbox .checkmark:after {
    left: 9px;
    top: 4px;
    width: 7px;
    height: 13px;
    border: solid #1EBF28;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.todo-filters {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.filter-dropdown-wrapper label {
    font-size: 12px!important;
}
.add-task-button {
    background: #5FBEF0;
    border-radius: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    border: none;
    padding: 12px 10px;
}

.todo-filters {
    margin-bottom: 40px;
}

 .radio-task-type {
    display: flex;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .radio-task-type input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .radio-task-type .checkmark {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    margin-right: 20px;
    border-radius: 16px;
    overflow: hidden;
    width: 100px;
    height: 28px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .radio-task-type input:checked ~ .checkmark {
    background: #D2EDFB;
  }

  .radio-priority {
    display: flex;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .radio-priority input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .radio-priority .checkmark {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    margin-right: 20px;
    border-radius: 16px;
    overflow: hidden;
    height: 28px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 0px 15px;
  }
  .green-cl .checkmark {
    border: 1px solid #87CC7E;
  }
  .orange-cl .checkmark {
    border: 1px solid #FAC02B;
  }
  .red-cl .checkmark {
    border: 1px solid #F45432;
  }
  .radio-priority.green-cl input:checked ~ .checkmark {
    border: 1px solid #87CC7E;
    background: #87CC7E;
    color: #fff;
  }
  .radio-priority.orange-cl input:checked ~ .checkmark {
    border: 1px solid #FAC02B;
    background: #FAC02B;
    color: #fff;
  }
  .radio-priority.red-cl input:checked ~ .checkmark {
    border: 1px solid #F45432;
    background: #F45432;
    color: #fff;
  }
  .todo-save {
    background: #5FBEF0;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    color: #FFFFFF;
    border: none;
    display: block;
    padding: 5px 16px;
    margin: 20px auto;

  }
  #addtask-modal .modal-header, #edittask-modal .modal-header {
    border: none;
  }
  #addtask-modal .modal-footer, #edittask-modal .modal-footer {
    border: none;
  }
  #addtask-modal .modal-content, #edittask-modal .modal-content {
    background: #FFFFFF;
    box-shadow: 0px 2px 13px rgba(170, 170, 170, 0.27);
    border-radius: 16px;
    border: none;
  }
  #addtask-modal .modal-content, #edittask-modal .modal-content {
    padding: 20px 30px;
  }
.course-status {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: auto;
    height: 6px;
    background: #1EBF28;
}

.course-star i {
    color: #FAC02B;
    font-size: 22px;
    margin-top: 50px;
    margin-bottom: 10px;
}

.course-content {
    min-height: 95px;
}

.course-content-dashboard-widget {
    min-height: 65px;
}

.slick-track {
    margin-left: 5px;
}

.performance-chart-heading span {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.performance-chart-heading span::before {
    position: absolute;
    width: 9px;
    height: 9px;
    content: "";
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 100%;
}


.technical_content_ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding: 0px !important;
    margin-bottom: 30px !important;
}

.technical_content_ul .modtype_scorm,
.section .modtype_resource,
.technical_content_ul .modtype_lti {
    width: 33.33%;
    /*height: 100%;*/
    padding: 0px 10px !important;
    margin-bottom: 20px !important;
}

.technical_content_ul .modtype_scorm>div,
.section .modtype_resource>div,
.technical_content_ul .modtype_lti>div {
    border-radius: 16px;
    border: 1px solid #D2EDFB;
    padding: 20px !important;
    height: 100%;
    position: relative;
    background: url(../pix/gradient-bg-2.png);
    background-size: cover !important;
    transition: all .3s ease;
}
.technical_content_ul .modtype_scorm>div:hover,
.section .modtype_resource>div:hover,
.technical_content_ul .modtype_lti>div:hover {
    background: url(../pix/gradient-bg-3.png);
    box-shadow: 0px 1px 10px rgba(210, 237, 251, 0.8);
    border: 1px solid #5FBEF0;
    cursor: pointer;
}

.technical_content_ul .instancename {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    line-height: 21px;
    margin-bottom: 0px;
    margin-top: 4px;
    display: block;
}

.technical_content_ul .modtype_scorm .activityicon,
.section .modtype_resource .activityicon,
.technical_content_ul .modtype_lti .activityicon {
    /* display: none; */
}

.technical_content_ul .modtype_scorm.activity .actions,
.section .modtype_resource.activity .actions {
    display: flex;
    bottom: 0px;
    margin: auto;
    align-items: center;
}

.technical_content_ul .modtype_scorm.activity .aalink,
.technical_content_ul .modtype_scorm.activity .aalink:focus,
.technical_content_ul .modtype_scorm.activity .aalink:active,
.section .modtype_resource.activity .aalink,
.section .modtype_resource.activity .aalink:focus,
.section .modtype_resource.activity .aalink:active {
    box-shadow: none;
    background-color: transparent !important;
    color: #000;
    outline: none;
}

.technical_content_ul .default-activity {
    width: 33.33%;
    display: flex;
    align-items: center;
    margin-bottom: 20px !important;
}
.technical_content_ul .default-activity > div {
    width: 100%;
}
.technical_content_ul .default-activity .activityinstance {
    display: block;
}
.technical_content_ul .default-activity .activityinstance {
    display: block;
}
.technical_content_ul .default-activity .aalink {
    display: flex!important;
    padding-left: 0px!important;
    text-indent: 0px!Important;
}

.do-i-know-ul {
    display: none;
}

.do-i-know-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.do-i-know-wrapper ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 50%;
}


.do-i-know-wrapper ul li {
    padding-bottom: 10px !important;
}

.do-i-know-wrapper ul img {
    display: none;
}
.do-i-know-wrapper .modtype_quiz img.icon {
    display: block;
    margin-right: 20px;
}

.do-i-know-wrapper ul.other-ul {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.do-i-know-wrapper ul.other-ul li {
    width: 50%;
}

.do-i-know-wrapper ul .aalink {
    font-family: 'Gothic A1', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0px;
    color: #5FBEF0;
    text-decoration: none;
    transition: all .3s ease-in;
}

.do-i-know-wrapper ul .aalink:hover {
    color: #006BB6;
    text-decoration: underline !important;
}

.do-i-know-wrapper ul .aalink:active,
.do-i-know-wrapper ul .aalink:focus {
    box-shadow: none;
    background-color: transparent !important;
    color: #5FBEF0;
    outline: none;
}

.do-i-know-wrapper ul.game-ul .aalink:hover {
    background: linear-gradient(90.08deg, #FAA02C -19.9%, #9747FF 22.94%, #37C0DE 66.04%, #F3CF56 107.42%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-decoration: underline !important;
}

.do-i-know-wrapper .modtype_game {
    position: relative;
}

.do-i-know-wrapper .modtype_game::after {
    width: 20px;
    height: 12px;
    position: absolute;
    content: "";
    top: 8px;
    right: 20px;
    bottom: 0px;
    background: url(../pix/click-icon-1.svg);
    background-size: cover;
    transition: all .3s ease-in;
}

.do-i-know-wrapper .modtype_game:hover::after {
    width: 27px;
    height: 16px;
    background: url(../pix/click-icon-2.svg);
    background-size: cover;
}

.do-i-know-wrapper .modtype_game:hover .aalink {
    background: linear-gradient(90.08deg, #FAA02C -19.9%, #9747FF 22.94%, #37C0DE 66.04%, #F3CF56 107.42%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-decoration: underline !important;
}

.do-i-know-wrapper .modtype_game:hover {
    cursor: pointer;
}

.do-i-know-wrapper .activity img.icon {
    display: block;
    margin-right: 20px;
}

.course-content-dashboard {
    min-height: 65px;
}

.chat-bot-app-iframe {
    min-height: 650px;
}

.right-sidebar-container {
    background: #FFFAE7;
    border-radius: 16px 0px 0px 16px;
    padding: 20px;
    margin-right: -31px;
}


/* .quiz-progress .progress-steps {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0px 40px;
}
.quiz-progress .progress-steps .owl-prev,
.quiz-progress .progress-steps .owl-next {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    border: none;
    background: #aaa;
    width: 25px;
    height: 30px;
    font-size: 30px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #aaa!important;;
}
.quiz-progress .progress-steps .owl-next {
    left: auto;
    right: 0px;
}
.quiz-progress .progress-steps .owl-next:focus,
.quiz-progress .progress-steps .owl-next:active,
.quiz-progress .progress-steps .owl-prev:focus,
.quiz-progress .progress-steps .owl-prev:active {
    outline: none;
    border: none;
}

.quiz-progress .progress-steps li {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
    display: flex!important;
}

.quiz-progress .progress-steps .step {
    background: #FFFFFF!important;
    border: 5px solid #FFFFFF;
    box-shadow: 0px 2px 7px #DBDBDB;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
    color: #AAAAAA;
    z-index: 1;
}

.quiz-progress .progress-steps .item-done .step {
    color: #006BB6;
    border: 2px solid #006bb6;
}

.quiz-progress .progress-steps li::before {
    width: 100%;
    height: 6px;
    background: #D2EDFB;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    content: "";
}

.quiz-progress .progress-steps .owl-item:first-child li::before {
    border-radius: 7px 0px 0px 7px;
}

.quiz-progress .progress-steps .owl-item:last-child li::before {
    border-radius: 0px 7px 7px 0px;
}
.quiz-progress .progress-steps .active::before {
    display: none!important;
} */
/* .quiz-items .quiz-item,
.quiz-items .quiz-item h3 {
    font-family: 'Gothic A1', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #000000;
}

.quiz-items .quiz-item .radio-type-1 {
    display: block;
    margin: 20px 0px;
}

.quiz-items .quiz-item {
    margin-bottom: 40px;
} */
/* .quiz-progress .page-link {
    padding: 0!important;
    margin-left: 0!important;
    line-height: 20px!important;
    color: #fff!important;
    background-color: #fff!important;
    border: none!important;
}

.quiz-progress  .page-link:hover,
.quiz-progress  .page-link:focus {
    background-color: #fff!important;
    border-color: #fff!important;
    color: #fff!important;
    box-shadow: none!important;
} */

.quiz-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 1rem;
}
/* Quiz Timer */
#quiz-timer-wrapper{
    flex-wrap: wrap !important;
    flex-direction: column-reverse !important;
    align-content: flex-start !important;
    position: unset !important;
    white-space: nowrap;
    margin-right: 2rem;
}
/* #quiz-timer-wrapper #quiz-timer {
    border: 1px solid #0f6fc5 !important;
    background-color: #0f6fc5 !important;
    color: white;
} */

/*==============================
  QUIZ PROGRESS NAVIGATION
==============================*/

.quiz-progress {
    position: relative;
    padding: 0 40px; /* Space on both sides for arrows */
    margin-bottom: 1rem;
}

.quiz-nav-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

/* Owl Carousel container */
.quiz-nav-wrapper .qn_buttons.owl-carousel {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each nav item wrapper */
.quiz-navigation .nav-item {
    margin-right: 10px !important;
    padding: 5px;
}

.quiz-navigation .nav-item:last-child {
    margin-right: 0 !important;
}

/* Ensure nav items are interactive */
.quiz-navigation .owl-item {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
    /* width: 85px !important; */
}


/*==============================
  QUESTION BUTTON STYLES
==============================*/

.quiz-progress .qnbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    cursor: pointer;
}

.quiz-progress .qnbutton:hover,
.quiz-progress .qnbutton:focus {
    background-color: #e2e6ea;
}

.quiz-progress .qnbutton.answersaved {
    background-color: #D3D3D3 !important;
    color: #000 !important;
}

.quiz-progress .qnbutton.notyetanswered {
    background-color: #ffffff !important;
    color: #000 !important;
}

.quiz-progress .qnbutton.flagged {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 1px #ffc107;
}

.quiz-progress .qnbutton.thispage {
    background-color: #D2EDFB !important;
    color: #000 !important;
}

/*==============================
  NAVIGATION ARROWS (OWL)
==============================*/

.quiz-nav-wrapper .owl-nav {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Allow clicks through to nav items */
    z-index: 2;
}

.quiz-nav-wrapper .owl-nav button {
    pointer-events: all;
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.quiz-nav-wrapper .owl-nav button:hover {
    background-color: #f0f0f0;
    color: #000;
}

.quiz-nav-wrapper .owl-nav .owl-prev {
    margin-left: -40px; /* Adjust arrow alignment */
}

.quiz-nav-wrapper .owl-nav .owl-next {
    /* margin-right: -40px; Adjust arrow alignment */
}

.quiz-nav-wrapper .owl-nav button:focus {
    outline: none;
}

.mod_quiz-next-nav{
    margin-left: 300px !important;
}
.mod_quiz-prev-nav{
    margin-left: 200px !important;
}
.mod_quiz-next-nav, .mod_quiz-prev-nav  {
    border-radius: 30px;
    color: #fff!important;
    background-color: #0f6fc5!important;
    border-color: #0f6fc5!important;
}

.singlebutton button, .continuebutton button {
    font-family: 'Poppins', sans-serif;
    border-radius: 50rem!important;
    padding: 8px 20px;
}
.activity-navigation {
    display: none!important;
}
.generaltable {
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    border-radius: 16px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}
.generaltable thead {
    background: #D2EDFB;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
}

.generaltable td {
    padding: 10px 20px;
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
.generaltable thead th {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    padding: 10px 20px;
}
.generaltable tbody tr:nth-of-type(odd) {
    background-color: #fff;
}
.quiz-table {
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    border-radius: 16px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}
.quiz-table .quiz-table-head {
    background: #D2EDFB;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
}
.quiz-table .col-td {
    padding: 10px 20px;
}
.quiz-table .quiz-body-row .col-td  {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
.quiz-table .quiz-table-head .col-td {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
}
.btn:focus {
    border: none;
    box-shadow: none;
    outline: none;
}
/* The container */
.radio-type-1 {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-type-1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radio-type-1 .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border: 1px solid #AAAAAA;
    border-radius: 50%;
}

/* When the radio button is checked, add a blue background */
.radio-type-1 input:checked~.checkmark {
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-type-1 .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-type-1 input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-type-1 .checkmark:after {
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5FBEF0;
    right: 0;
    bottom: 0px;
    margin: auto;
}

.next-button {
    width: 54px;
    height: 54px;
    background: #FFFFFF;
    border: 3px solid #000000;
    border-radius: 100%;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.next-button i {
    margin-left: 2px;
}

.next-button,
.next-button:focus {
    outline: none;
    box-shadow: none;
}

.upload-container {
    background: #FFFFFF;
    border: 1px dashed #707070;
    border-radius: 16px;
    width: 200px;
    position: relative;
}

.upload-container h5 {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    color: #707070;
    padding: 80px 20px 20px;
}

.upload-container h5 span {
    display: block;
    color: #5FBEF0 !important;
}

.upload-container #file {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
}

.user-profile-title {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 21px;
    color: #000 !important;
}

.dropzone-wrapper {
    border: 2px dashed #91b0b3;
    color: #92b0b3;
    position: relative;
    height: 150px;
}

.dropzone-desc {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    top: 0;
    font-size: 16px;
}

.dropzone,
.dropzone:focus {
    position: absolute;
    outline: none !important;
    width: 100%;
    height: 150px;
    cursor: pointer;
    opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
    background: #ecf0f5;
}

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

.preview-zone .box {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

.box-body {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

.box-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-body p {
    display: none;
}

.box-header,
.box-tools {
    display: none;
}

#custom-form-type-1 .form-control:disabled,
#custom-form-type-1 .form-control[readonly] {
    background: #fff !important;
}

.course-content .title {
    background: transparent!important;
    font-family: 'Poppins', sans-serif!important;
    font-size: 25px;
    color: #000!important;
    font-weight: 600;
}
.course-content .units {
    margin-left: 0px;
    padding-left: 0px;
}
.course-content .units .section.main {
    margin-left: 0px!important;
    padding-left: 0px!important;
}
.course-content .units .section.main .content-wrapper  {
    margin-left: 0px!important;
    margin-right: 0px!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
}
.course-content .units .section.main .content-wrapper .summary {
    margin-left: 0px!important;
    margin-right: 0px!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
}
.course-content .units .sectionname {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 10px;
}
.course-content .units .summary p {
    /*font-family: 'Gothic A1', sans-serif;*/
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    margin-bottom: 30px;
}
.course-content .units h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #000;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 10px;
}
.course-widget-pill {
    background: #1EBF28 !important;
}

/*======== Todo Page ============*/
#addtask-modal .formgroup label,
#edittask-modal .formgroup label {
    font-family: 'Gothic A1', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
#addtask-modal .formgroup .form-control,
#edittask-modal .formgroup .form-control{
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    border-radius: 8px;
    height: 40px;
    margin-bottom: 20px;
    padding: 0px 10px 0px 10px;
}
#addtask-modal .formgroup textarea.form-control,
#edittask-modal .formgroup textarea.form-control {
    height: 87px;
}
#addtask-modal .formgroup .form-control:focus,
#edittask-modal .formgroup .form-control:focus {
    border: 1px solid #5FBEF0!important;
}
#responseform .que {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
#responseform .que .info {
    background-color: rgba(234, 248, 255, 0.45);
    border: 1px solid #D2EDFB;
    backdrop-filter: blur(30px);
    border-radius: 16px;
    float: none;
    width: 20%;
    padding: 20px;
    background-image: url(../pix/gradient-bg-2.png);
    background-size: cover !important;
}
#responseform .que .info h3.no {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #000;
}
#responseform .que .info h3.no .qno {
    font-weight: 600;
    font-size: 16px;
    color: #000;
}
#responseform .que .info .state {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    margin-top: 25px;
}
#responseform .que .info .grade {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
#responseform .que .info .questionflag {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #494949;
    margin-top: 51px;
}
#responseform .que .content {
    margin: 0 0 0 20px;
    position: relative;
    max-width: 700px !important;
}
#responseform .que .content .formulation {
    background-color: #ffffff;
    border: none;
    padding: 0px;
}
#responseform .que .content .formulation {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
}
#responseform .que .content .formulation input:focus {
    outline: none;
    box-shadow: none;
}
#responseform .answer input[type="radio"]{
    position: relative;
    margin-right: 20px!important;
    padding-right: 10px;
}
#responseform .answer input[type="radio"]::after {
    background: #FFFFFF;
    border: 1px solid #AAAAAA;
    position: absolute;
    top:0px;
    right: 0px;
    bottom:0px;
    left: 0px;
    margin: auto;
    content:"";
    border-radius: 100%;
    width: 18px;
    height: 18px;
    transition: all .3s ease;
    background: #FFFFFF;
    cursor: pointer;
    content: "\f111";
    font-family: FontAwesome;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 16.5px;
}
#responseform .answer input[type="radio"]:checked::after {
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    cursor: pointer;
    content: "\f111";
    font-family: FontAwesome;
    color: #5FBEF0;
    font-size: 10px;
    text-align: center;
    line-height: 16.5px;
}
#responseform .answer input[type="radio"]:hover::after {
    background: #FFFFFF;
    border: 1px solid #5FBEF0;
    box-shadow: inset 0px 2px 5px rgba(95, 190, 240, 0.85);
    cursor: pointer;
}
#responseform .answer > div {
    margin-bottom: 20px
}
#responseform .answer  {
    margin-top: 25px
}
.button-type-gradient-1 {
    background: linear-gradient(277.04deg, #5FBEF0 -23.15%, #9CCFF6 25.2%, #E1E2FD 98.05%);
    border-radius: 26px;
    width: 100%;
    padding: 15px 30px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #006BB6;
    transition: all .3s ease;
    border-radius: 30px;
    position: relative;
    border: 2px solid #5FBEF0;
    display: block;
    text-align: center;
}
.button-type-gradient-1:hover {
    background: linear-gradient(277.04deg, #006BB6 -23.15%, #8CAAEF 44.65%, #7479FF 92.11%);
    box-shadow: 0px 1px 20px rgba(95, 190, 240, 0.45);
    color: #fff;
    border: 2px solid #006BB6;
}
#login-button {
    padding: 10px 20px!important;
    border: none!important;
    box-shadow: none!important;
}
.skip-custom, .skip-custom:focus {
    border: 2px solid #000;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
}
.alert-info {
    margin-top:20px;
}
.tooltip-inner {
    max-width: 100% !important;
    font-size: 12px;
    padding: 5px 15px 5px 20px;
    background: #FFFFFF;
    color: #000;
    border: 1px solid #000;
    text-align: left;
}

#user-notifications {
    margin-top: 0px;
}

@media only screen and (max-width: 1439px) {
    .left-sidebar {
        padding: 23px 10px!important;
    }

    #dashboard-nav-menu li a {
        font-size: 13px;
        padding: 13px 16px;
    }

    .jordy-img img {
        height: auto;
        margin-top: -80px;
    }

    .user-title-wrapper h3 {
        font-size: 16px;
    }

    .user-title-wrapper h4 {
        font-size: 13px;
    }

    .box-list-item p {}
}

.badge-inprogress {
    background-color: #6BC3F1;
}
.primary-title {
    font-size: 15px;
    color: #006BB6;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif;
}
.font-weight-500 {
    font-weight: 500 !important;
}

@media only screen and (max-width: 1199px) {
    .announcements {
        display: none;
    }
    .technical_content_ul .modtype_scorm {
        width: 50%;
    }
    .section .modtype_resource {
        width: 50%;
    }
    .technical_content_ul .default-activity {
        width: 50%;
    }


}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #responseform .que .info {
        width: 40%;
    }
}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 991px) {
    /* .left-sidebar-col {
        display: none;
        left: -500px;
    } */
    .user-details-wrapper {
        display: none;
    }
    .right-sidebar-container {
        margin-top: -60px;
        margin-right: 0px;
        border-radius: 16px 16px 16px 16px;
    }
}

@media only screen and (max-width: 767px) {
    /* .left-sidebar-col {
        display: none;
        left: -500px;
    } */

    .mobile-menu-button {
        display: block;
    }

    .chat-bot {
        margin-top: 150px;
    }
}

.custom-breadcrumbs {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 600;
}
.custom-breadcrumbs a{
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 600;
}

.jordyiframe {
    width: 600px;
}

.section .activity .contentwithoutlink>a, .section .activity .activityinstance>a {
    display: inline-block;
    text-indent: 0px;
    padding-left: 0px;
}

@media only screen and (max-width: 576px) {
    .user-details-wrapper {
        padding-left: 0px;
        position: absolute;
        top: 0px;
        right: 50px;
        z-index: 1;
        background: #fff;
    }

    .user-details-wrapper ul {
        flex-direction: column-reverse;

    }

    .user-details-wrapper ul li {
        display: none;
        padding-bottom: 15px;
    }

    .user-details-wrapper ul li:last-child {
        display: block;
        padding-bottom: 0px;
    }

    .user-details-wrapper ul:hover li {
        display: block;
    }

    .icon-bell {
        margin-right: 0px
    }

    .user-details-wrapper .vector-icon {
        margin-right: 0px;
    }

    .chat-bot {
        margin-top: 130px;
    }
    #responseform .que .info {
        width: 100%;
        margin-bottom: 25px;
    }
    #responseform .que .content {
        width: 100%;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 480px) {
    .badge-wrapper {
        width: 45px;
        height: 60px;
        margin-right: 10px;
    }

    .badge-count {
        font-size: 8px;
        margin-top: -13px;
    }

    .user-title-wrapper h3 {
        margin-bottom: 3px;
    }

    .user-title-wrapper h4 {
        font-size: 12px;
    }

    #course-tab-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .chat-bot {
        margin-top: 100px;
        height: 140px;
    }

}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .custom-col-9 {
        flex: 0 0 70%;
        max-width: 70%;
    }
    .custom-col-3 {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .custom-col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
#custom-sidebar-toggle {
    display: none;
    position: fixed;
    top: 5px;
    left: 10px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    background-color: #e0e0e0; /* Light cement */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bars {
    position: absolute;
    height: 4px;
    background-color: #0f6cbf;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center center;
    left: 5px;
  }

  /* Hamburger bars: asymmetric lengths, left-aligned */
  .top-bar {
    width: 16px;
    top: 10px;
  }

  .middle-bar {
    width: 28px;
    top: 17px;
  }

  .bottom-bar {
    width: 22px;
    top: 25px;
  }

  /* When toggled: reset all to same width, center them, and rotate */
  #custom-sidebar-toggle.active .top-bar {
    top: 22px;
    left: 5px;
    width: 28px;
    transform: rotate(45deg);
  }

  #custom-sidebar-toggle.active .middle-bar {
    opacity: 0;
  }

  #custom-sidebar-toggle.active .bottom-bar {
    top: 22px;
    left: 5px;
    width: 28px;
    transform: rotate(-45deg);
  }

  @media screen and (max-width: 768px) {
    #custom-sidebar-toggle {
      display: flex;
    }

    .left-sidebar {
      position: fixed;
      top: 0;
      left: -280px;
      width: 260px;
      height: 100%;
      background: #fff;
      box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
      transition: left 0.3s ease;
      z-index: 9998;
      overflow-y: auto;
      max-height: 100vh;

    }

    .left-sidebar.open {
      left: 0;
    }

    #region-main {
      margin-left: 0 !important;
    }
  }
/* === Mobile Top Row Styles === */
.mobile-top-row {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1050;
}

.mobile-top-row img {
    height: 30px;
    max-width: 100%;
}

.sidebar-toggle i {
    font-size: 20px;
}

@media only screen and (max-width: 990px) {
    .mobile-user {
        position: absolute;
        top: 0;
        right: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background-color: #fff;
        border: 2px solid #5FBEF0;
        border-radius: 25px;
        z-index: 10;
    }

    .mobile-dropdown {
        position: absolute;
        top: 30px;
        right: 0;
        background: #fff;
        border: 2px solid #5FBEF0; /* same as icon border */
        border-radius: 25%;
        padding: 2px 4px;
        width: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    .mobile-dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-dropdown ul li {
        margin: 3px 0;
    }

    .mobile-dropdown ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 2px solid #5FBEF0;
        border-radius: 50%;
        transition: border-color 0.2s ease;
    }

    .mobile-dropdown ul li a:hover {
        border-color: #006BB6;
    }

    .mobile-dropdown ul li a .vector-icon {
        width: 22px;
        height: 22px;
        background-color: #5FBEF0;
        -webkit-mask-size: cover;
        mask-size: cover;
    }
}



#page-wrapper #page #page-content {
    display: block;
}
.course-tab-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.course-tab-navigation .slick-arrow {
    border:none;
    font-weight:700;
    cursor: pointer;
    padding: 5px 5px;
    background: #fff;
    color: #999;
    transition: all .25s ease;
}
.course-tab-navigation .slick-arrow:hover {
    color: #333;
}
.course-tab-navigation .slick-arrow:focus {
    border:none;
    outline:none;
}

  #footer-course-widget {
    position: relative;
    border-top: 2px solid #5FBEF0;
  }
  #footer-course-widget .navigate-part {
    background-color: white;
    padding: 16px 20px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    margin: 0px 10px;
    border: 1px solid #006BB6;
    border-radius: 16px;

    height: 100%;
  }
  #footer-course-widget .navigate-part.disabled-course {
    position: relative;
  }
  #footer-course-widget .navigate-part a {
    font-family: 'Gothic A1';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
  }
  #footer-course-widget .navigate-part .course-status {
    position: absolute;
    height: 6px;
    background: #D9D9D9;
    border-radius: 4px;
    bottom: 8px;
    left: 20px;
    right: 20px;
  }
  #footer-course-widget .navigate-part .course-status span {
    background: #1EBF28;
    border-radius: 4px;
    height: 6px;
    display: block;
    width: 0px;
  }
  #footer-course-widget .slick-dots li {
    background: #999;
  }
  #footer-course-widget .slick-dots li.slick-active {
    background: #111;
  }
  #footer-course-widget-navigator {
    width: 130px;
    height: 40px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    margin-top: -40px;
    background: #006bb6;
    text-align: center;
    border-radius: 30px 30px 0px 0px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
  }
  #footer-course-widget {
    margin-top: 30px;
  }
#footer-course-widget .container {
    background: #D2EDFB;
    border-radius: 24px;
    padding: 28px 64px;
  }

  .bottom-0 {
    bottom: 0px!important;
  }
  .click-active i {
    transform: rotate(180deg);
  }
  #footer-course-widget .slick-arrow {
    background: transparent;
    font-size: 20px;
    color: #333;
    position: absolute;
    left: -30px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    width: 25px;
    padding: 0px;
    outline: none;
    height: 25px;
    border-radius: 100%;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #footer-course-widget .slick-arrow.slick-disabled {
    border: 1px solid #ccc;
    color: #CCC;
  }
  #footer-course-widget .slick-arrow.slick-next {
    left: auto;
    right: -30px;
  }
  #footer-course-widget-navigator::before {
    content: "Navigate Topics";
    position: absolute;
    left: 0px;
    right: 0px;
    top: -30px;
    width: 120px;
    height: 20px;
    font-size: 15px;
    text-align: center;
    margin: auto;
    color: #000;
  }
  #footer-course-widget h2 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    color: #006BB6;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /*======== modtype_equella Start ============*/
  .technical_content_ul .default-activity{
    width: 33.33%;
    height: 100%;
    padding: 0px 10px !important;
    margin-bottom: 20px !important;
}
.technical_content_ul .default-activity>div {
    border-radius: 16px;
    border: 1px solid #D2EDFB;
    padding: 20px !important;
    height: 100%;
    position: relative;
    background: url(../pix/gradient-bg-2.png);
    background-size: cover !important;
    transition: all .3s ease;
}
.technical_content_ul .default-activity>div:hover{
    background: url(../pix/gradient-bg-3.png);
    box-shadow: 0px 1px 10px rgba(210, 237, 251, 0.8);
    border: 1px solid #5FBEF0;
    cursor: pointer;
}
#resourceobject {
    width: 872px;
    height: 644px;
    border: none;
  }
  .technical_content_ul .default-activity .activityicon {
    /* display: none; */
}
.technical_content_ul .default-activity.activity .actions {
    display: flex;
    bottom: 0px;
    margin: auto;
    align-items: center;
}
.technical_content_ul .default-activity.activity .aalink,
.technical_content_ul .default-activity.activity .aalink:focus,
.technical_content_ul .default-activity.activity .aalink:active {
    box-shadow: none;
    background-color: transparent !important;
    color: #000;
    outline: none;
}
@media only screen and (max-width: 1199px) {
    .technical_content_ul .default-activity {
        width: 50%;
    }
}

/*======== modtype_equella End ============*/

.campus-logo-top {
    width: 100px;
    margin-top: 12px;
    margin-left: 10px;
}

.campus-logo-loading {
    width: 100px!important;
}
#course-tab-carousel .slick-arrow  {
    width: 36px;
    height: 24px;
    border: 1px solid #006BB6;
    border-radius: 50px;
    background: #fff;
    color: #006BB6;
    position: absolute;
    bottom: -8px;
    left: 15%;
}
#course-tab-carousel .slick-arrow.slick-next {
    left: auto;
    right: 15%;
}
#course-tab-carousel .slick-arrow.slick-disabled {
    color: #B3B3B3;
    border: 1px solid #B3B3B3;
}
#course-tab-carousel .slick-dots {
    margin-top: 25px;
}
.step-completed {
    position: relative;
    width: 30px;
    height: 30px;
    margin-left: 10px;
}
.step-completed::after {
    content: "\f00c";
    font-family: FontAwesome;
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1EBF28;
    box-shadow: 1px 1px 10px #00000024;
}
.message-app {
    border: 1px solid #D2EDFB!important;
    border-radius: 16px;
    background: #fff!important;
    overflow: hidden;
    height: 600px !important;
}
.message-app .panel-header-container .input-group .form-control {
    background: #FFFFFF;
    border-color:  #CCCCCC!important;
    border-radius: 8px 0px 0px 8px;
    height: 40px;
}
.message-app .panel-header-container .input-group .search-box {
    border-radius: 0px 8px 8px 0px;
    padding-left: 0px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #A6A6A6;
}
.message-app .panel-header-container .input-group .input-group-text  {
    border-color:  #CCCCCC!important;
    border-radius: 8px 0px 0px 8px;
}
.message-app .panel-body-container .view-overview-body .card-header {
    background: #E8F6FD;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #B9E3F8;
    border-radius: 0px !important;
}
.message-app .panel-header-container  .border-bottom , .message-app .panel-body-container .border-bottom{
    border: none!important;
}
.message-app .panel-body-container .view-overview-body .card-header .btn,
.message-app .panel-body-container .view-overview-body .card-header .btn:hover,
.message-app .panel-body-container .view-overview-body .card-header .btn:active,
.message-app .panel-body-container .view-overview-body .card-header .btn:focus {
    border: none!important;
    outline: none!important;
    box-shadow: none!important;
    background: transparent!important;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #006BB6;

}
.message-app .panel-body-container .view-overview-body .card-header .btn span.font-weight-bold {
    font-weight: 400!important;
}
.message-app .panel-body-container .view-overview-body .card-header .btn .collapsed-icon-container, .message-app .panel-body-container .view-overview-body .card-header .btn .expanded-icon-container {
    padding-right: 5px;
}
.message-app .panel-body-container .list-group {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 21px;
    color: #494949;
}
.message-app .panel-body-container .list-group strong {
    font-weight: 500;
    font-size: 14px;
    color: #494949;
}
.message-app .panel-body-container .dir-rtl-hide {
    color: #006BB6;
    font-size: 12px;
}
.message-app .panel-body-container .dir-rtl-hide i {
    font-size: 10px;
}
.message-app .header-container  .message-app-header-container  {
    background: #D2EDFB;
    border-bottom: 1px solid #A2D9F6;
    padding: 10px 20px !important;
}
.message-app .header-container  .message-app-header-container  .icon-back-in-app i {
    width: 16px;
    height: 16px;
    border: 1px solid #006BB6;
    border-radius: 100%;
    line-height: 15px;
    text-align: center;
    font-size: 10px;
    color: #006BB6;
    margin-right: 10px;
}
.message-app .message-app-header-container  img.rounded-circle {
    width: 38px!important;
    height: 32px!important;
    object-fit: cover;
    display: block;
}
.message-app .content-message-container {
    font-family: 'Poppins';
    font-size: 12px;
}
.message-app .content-message-container .message {
    background-color: #F2F2F2!important;
    border-radius: 4px 4px 0px 4px!important;
}
.message-app .content-message-container .message:hover {
    box-shadow: none!important;
    filter: none!important;
}
.message-app .message.send .tail {
    border-bottom-color: #f2f2f2!important;
}
.write-message-wrapper {
    width: 100%;
    position: relative;
}
.write-message-wrapper .emoji-picker-button  {
    position: absolute;
    right: 5px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}
.write-message-wrapper textarea, .write-message-wrapper textarea:focus, .write-message-wrapper textarea:active{
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 9px 16px 5px;
    font-family: 'Poppins';
    font-style: normal;
}
.msg-send-icon-container {
    color: #006BB6;
}
.message-app .message.send .send-message-content {
    margin-top: -10px;
    padding-right: 30px;
}
.message-app .message.received .tail {
    border-bottom-color: #f2f2f2;
}
.message-app .message p {
    font-size: 12px;
    color: #494949;
}
.message-app .message, .message-app .message:focus, .message-app .message:hover {
    outline: none;
    border: none;
}
.received-full-name {
    font-size: 12px;
    font-weight: 600!important;
}
.header-settings-area-wrapper {
    padding: 20px;
}
.settings-area-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.settings-area-wrapper a {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #5FBEF0;
}
.search-box-prepend {
    color: #A6A6A6;
}
.message-app .panel-header-container .input-group-append .btn {
    border: 1px solid #CCCCCC !important;
}
.message-read-icon {
    margin-top: 18px;
}
.converstion-link:focus, .converstion-link:hover {
    border-radius: 0px;
    outline: none;
    background: #fff;
}
#conversation-actions-menu-button i {
    color: #006BB6;
}
.chat-user-details {
    font-family: 'Poppins';
}
.chat-user-details .chat-user-name {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #494949;
}
.chat-user-details p {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #808080;
}
.message-app-header-container .fa-ellipsis-h {
    color: #006BB6;
}
.chat-date-display {
    font-size: 12px;
}
.border-blue {
    border-color: #D2EDFB!important;
}

/* bosch code */

.left-content-wrapper h3 {
    margin-top: 90px!important;
    line-height: 30px!important;
    font-size: 20px!important;
}
.section-header .hcl-logo {
    width: 130px!important;
}
.next-right {
    margin-top: 0px!important;
}
.side-bar-logo {
    margin-top: 0px!important;
}
.top-copyright img {
    width: 145px;
    margin-left: 10px;
}
.top-copyright {
    font-size: 14px;
    color: #000;
}
.custom-col-3 {
    padding-bottom: 80px;
    min-height: 100vh;
}
.continuebutton .btn-secondary {
    background: #006bb6!important;
    color: #fff!important;
}
.edit-todo {
    background: transparent;
    border: none;
    font-size: 17px;
    color: #fd885a;
    padding: 0;
}
.cards-tabs-wrapper {
    display: flex;
    width: 100%;
}
.cards-tabs-wrapper .tab-item {
    width: max-content;
    color: #006bb6;
    border-radius: 16px 16px 0px 0px;
    padding: 0px!important;
    background: #eef0f2;
}
.cards-tabs-wrapper .tab-item.active {
    background: #d1ecff;

}
.cards-tabs-wrapper .tab-item span {
    padding: 0.8rem 2.8rem!important;
    display: block;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin: 0px!important;
}
.quiz-navigation {
    display: none;
}
#navbar-main {
    border: 1px solid #d1ecff;
    border-radius: 30px;
    padding: 15px 10px 0px !important;
    background: #fff;
    margin-bottom: 15px;
}
.select-heading-1 span {
    font-weight: 600;
    font-size: 12px;
    color: #666;
}
.custom-selection-1 {
    position: relative;
    background-color: white;
    border-radius: 228px;
}
.custom-selection-1 select {
    border: none;
    padding-left: 10px !important;
    padding: 7px;
    height: 44px;
    width: 100%;
    margin: 8px 0px!important;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    z-index: 2;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    color: #006BB6;
    background-color: transparent;
    border: 1px solid #006bb6;
    border-radius: 30px;
}
.dot-text-1 select {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.custom-selection-1::after {
    content: url("../pix/t_down_arrow_blue.svg")!important;
    position: absolute;
    top: 0!important;
    padding: 0px;
    right: 7px!important;
    bottom: 0;
    margin: auto;
    height: 25px;
}
.applied-btn-1 {
    font-size: 14px;
    font-weight: 500;
    background-color: #006bb6;
    border: 2px solid #ffffff;
    border-radius: 25px;
    margin-bottom: 1.1rem;
}
/* Alert styles starts*/

.alert-body {
    background: #FEF7F5;
    border: 2px solid #F7866E;
    border-radius: 16px;
    display: flex;
    flex: 100%;
    padding: 15px 15px 8px;
    justify-content: space-around;
}

.alert-message {
    flex: 80%;
}

.alert-message p{
    font-weight: 500;
    font-size: 16px;
    color: #F45432;
    margin-bottom: 0.25rem;
}

.alert-img {
    align-self: flex-end;
    flex: 20%;
}

.alert-message ul {
    margin-bottom: 0.5rem;
}

.alert-message ul li {
    font-size: 14px;
}
/* Alert styles ends */