/* Layout */


:root {
    --background-color: #f5f5f5;
    --sidebar-menu-color: #ffff;
    --sidebar-submenu-color: #f5f5f5;
    --sidebar-border-color: #DADADA;;
    --sidebar-open-width: 18em;
    --sidebar-closed-width: 5em;
    --navbar-height: 75px;
    --loading-bar-height: 5px;
    /*--sidebar-submenu-text-color: #2185d0;*/
    --primary-color: #595959;
    --header-color: #dbdada;
    --text-color: #707070;
    --border-color: rgba(203, 213, 224, 0.6);
    --active-color: #5a00fc;
    --user-menu-width: 21em;
    --user-menu-height: 16em;
    --menu-item-height: 37px;
    --menu-main-color: #282929;
    --menu-background-color: var(--gray_3);
    --menu-border-color: var(--gray_8);

    --pseudo-color: var(--sidebar-submenu-color);
    --menu-active-color: var(--sidebar-submenu-color);

    /*--System design colors--*/
    --soft_purple: #D5D3F0;
    --medium_purple: #beb9fe;
    --gray: #ecedec;
    --gray_2: #e0e1e2;
    --gray_3: #cacbcd;
    --gray_4: #bababd;
    --gray_5: #a2a3a3;
    --gray_8: #242524;
    --gray_9: #282828;
    --red: #dd4a27;
    --orange: #ea6e23;
    --yellow: #f4bd12;
    --green: #b4cc19;
    --teal: #5cb6ac;
    --blue: #3185d0;
    --violet: #6a58c9;
    --purple: #a961c9;
    --pink: #e25e96;
    --brown: #a4663f;
    --soft_blue: #D3E5EF;
    --soft_blue_type: #334D5C;
    --soft_teal: #D4EFEB;
    --soft_teal_type: #335C58;
    --soft_yellow: #FCECC8;
    --soft_yellow_type: #5C5733;
    --soft_orange: #fcd5c8;
    --soft_orange_type: #8c4f4f;
    --soft_green: #DBEEDB;
    --soft_green_type: #335C57;
    --soft_red: #FCD5C8;
    --soft_red_type: #8C4F4F;
    --soft_purple_type: #3B335C;





    --loading-bar-height: 5px;

    --animation-duration: 0s;
    --animation-easing: cubic-bezier(.5, 0, .5, 1);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

main {
    min-height: 100%;
    background: #f3f3f5;
}

/* *Commonly needed classes */

.dont-preload-animations {
    animation: none !important;
}

.full-width {
    width: 100%;
    min-width: 100%;
}

.full-width .divider {
    width: 100%;
    min-width: 100%;
}

.full-height {
    height: 100%;
}

.full-vh {
    height: 100vh;
}

.full-hw {
    width: 100%;
    min-width: 100%;
    height: 100%;

}

/* Forms */
.form-user {
    max-width: 600px;
    min-width: 250px;
    width: 60%;
    margin: 0 auto !important;
}

/* Responsive Video */
.videoResponsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0px;
    height: 0;
}

.videoResponsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Chat */
.chatResponsive {
    position: relative;
    padding-top: 0;
    height: 500px;
    width: 100%;
}

.chatResponsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Menu */
#navbar.network.menu {
    height: var(--navbar-height);
    z-index: 99;
    border-bottom: 1px solid var(--sidebar-border-color);
    font-size: 1em;
}

#navbar.network.menu .item {
    font-weight: bold;
}

/* Forum questions */
a.no-decoration-a {
    color: inherit;
}

a.no-decoration-a:hover {
    color: inherit;
}

div[role=application] {
    width: auto !important;
}

.django-ckeditor-widget {
    display: block !important;
}

.dt-table {
    overflow-x: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

.invisible {
    display: none !important;
}

.student-course-grade {
    height: 100px !important;
    width: 100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
}

.fake-disabled {
    cursor: default !important;
    opacity: .45;
}

.fake-disabled:active {
    pointer-events: none;
    touch-action: none;
}

[v-cloak] {
    display: none;
}

.cc-segment {
    height: 100%;
}

/* Main Page css*/

.pusher {
    height: 100%;
    background: var(--background-color);
}

.sidebar-menu {
    position: fixed;
    z-index: 1000;
    background: var(--background-color);
    height: calc(100% - var(--navbar-height));
    width: var(--sidebar-open-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sidebar-border-color);
    margin-top: var(--navbar-height);
}

.sidebar-menu #sidebar-content{
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-menu.closed {
    width: var(--sidebar-closed-width);
}

.sidebar-menu.student-menu {
    display: none!important;
}

.sidebar-menu.closed:not(.dont-preload-animations){
    animation-name: slide-left;
    will-change: width;
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--animation-easing);
}

.sidebar-menu:not(.closed){
    animation-name: slide-out;
    will-change: width;
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--animation-easing);
}

.sidebar-menu.closed .sidebar-toggle-button i {
    transform: rotate(-180deg);
}
.sidebar-menu .sidebar-toggle-button i {
    transition: transform var(--animation-duration);
}

.dropdown.icon {
    transition: all calc(var(--animation-duration) / 2);
}

.sidebar-menu .expandable-menu-base-item.active > .dropdown.icon {
    transform: rotate(-90deg);
}

.is-screen-h {
    height: 100%;
}

.user-menu-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.user-menu-wrapper.purple{
    background-color: var(--menu-main-color);
}

*.red-label {
    position: relative;
}

*.red-label::after {
    content: "";
    position: absolute;
    background-color: red;
    top: 0;
    right: 5px;
    bottom: 0;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.dropdown.red-label::after {
    top: 1em;
    right: 1em;
    bottom: 0;
    height: 10px;
    width: 10px;
}

#level-icon-container .mindz-icon-level-progression.icon{
    font-size: 3em;
}


@media only screen and (max-height: 845px) {
    .is-flex.is-screen-h.flex-col.justify-content-space-between  {
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 0.2em;
    }
}

.sidebar-submenu {
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: var(--sidebar-submenu-color);
    width: 245px;
    position: relative;
    transition: width 1s;
    flex-shrink: 0;
    overflow-y: auto;
}

.sidebar-background {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
}

.custom-header {
    background: var(--background-color);
    width: 100%;
    margin-top: 32px;
    margin-bottom: 8px;
}

.custom-header .mb-10 {
    margin-bottom: 8px!important;
}

.custom-header#course-cover {
    min-height: auto;
}

.custom-header-buttons {
    display: flex;
    flex-wrap: wrap;
}

.custom-header-buttons > * {
    margin-left: 0px !important;
    margin-right: 5px !important;
    margin-top: -5px !important;
    max-height: 36px;
}

#custom-header-logo {
    height: 50px;
    width: auto;
}



.icon-active {
    display: block;
}

#navbar .ui.container .item a h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    width: 10em;
}

.main-content {
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow-y: scroll;
    border-bottom: 1px solid var(--sidebar-border-color);
}

#navbar ~ #wrapper #main-content {
    margin-top: var(--navbar-height);
}

#main-sidebar.closed ~ .pusher.is-flex .main-content:not(.student-content) {
    margin-left: var(--sidebar-closed-width);
}

.sidebar-menu.htmx-changed {
    --animation-duration: 0s;
}

#main-container {
    margin-bottom: 3rem;
}

#logo-container {
    margin-top: auto;
    margin-bottom: 10px;
    align-self: center;
    width: 110px;
    position: relative;
}

.menu-icon {
    z-index: 1;
    font-size: 1rem !important;
    color: var(--menu-main-color);
}

.menu-item a:hover {
    color: black;
}

.menu-item.active.has-submenu .menu-icon{
    align-self: flex-start;
    margin-top: .7rem;
}

.menu-item .menu-icon {
    display: flex;
    align-self: center;
    align-items: center;
    position: relative;
    font-size: 1.5em !important;
    margin-left: .5em;
    min-width: 1.5em;
    height: 1em;
}

.menu-item .menu-icon.fa-light {
    margin-left: .8em!important;
    font-size: 1.2em !important;
}

#course-menu-header{
    cursor: pointer;
}
.menu-item .menu-icon:before {
    position: absolute;
    left: .25em;
}

.menu-item .menu-item .ui.accordion {
    margin: 0;
}

.menu-icon.back-icon {
    font-size: 1.5rem !important;
}

.menu-item {
    z-index: 1;
    margin: 0 0 0 1.5em;
    border: 1px solid transparent;
    border-right: 0;
    display: flex;
    width: 100%;
}

.menu-item.disabled {
    opacity: .45;
    color: rgba(40,40,40,.3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.menu-item:not(:has(.title.active, .menu-link.active), .active):hover,
.menu-item.aditional-link-span:hover {
    border-right: 0;
    border-radius: 4px;
    background: var(--gray_2);
}

.accordion .title:hover span:first-of-type:not(.ui.label),
.accordion .title:hover a{
    text-decoration: underline;
}


.sidebar-menu .menu-item > *
{
    min-height: var(--menu-item-height);
}

.sidebar-menu .menu-item.popup-element .title {
    height: var(--menu-item-height);
}


.sidebar-menu .menu-item.popup-element .title span.fa-light {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sidebar-menu.closed .menu-item.has-submenu.active {
    animation-name: disintegrate-item;
    animation-duration: var(--animation-duration);
}

@keyframes disintegrate-item {
    0% {
        height: 100%;
    }
    100% {
        height: var(--menu-item-height);
    }
}


.menu-item .menu-item {
    padding: 0;
}

.menu-active {
    z-index: 0;
}

.menu-avatar {
    margin-bottom: 10px;
    height: 36px;
    width: 36px;
}

.is-section {
    height: 100%;
    width: 100%;
}

.is-logo {
    height: 36px !important;
    width: 36px !important;
}

.platform-logo {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.platform-logo img {
    width: 100px;
}

.is-hidden {
    visibility: hidden;
}

.is-visible {
    visibility: visible;
}

.is-display-none {
    display: none!important;
}

.is-flex {
    display: flex;
}

.is-grid {
    display: grid;
}

.is-fit-content-h {
    height: fit-content !important;
}

.is-fit-content-w {
    width: fit-content !important;
}

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

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

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

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

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

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

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

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

.justify-content-start {
    justify-content: start !important;
}

.justify-content-end {
    justify-content: end !important;
}

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

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

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

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

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

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

.sidebar-menu .tooltip-items {
    justify-content: flex-start;
    align-items: flex-start;
}

.sidebar-menu .tooltip-items i.fa-light{
    font-size: 15px;
    align-self: center;
    color: var(--menu-main-color);
    margin-left: 1rem!important;
    margin-right: 7px;
}

.sidebar-menu.closed .tooltip-items {
    animation-duration: 1s;
    transition: all 1s linear;
}

.sidebar-menu.closed .menu-item .ui.accordion.menu-accordion{
    animation: disintegrate var(--animation-duration);
    opacity: 0;
    height: 0;
}

.sidebar-menu.closed .menu-item.has-submenu.active .ui.accordion.menu-accordion {
    animation: disintegrate-with-height var(--animation-duration);
}

.sidebar-menu .menu-item .ui.accordion.menu-accordion {
    opacity: 1;
    animation: appear var(--animation-duration);
}

@keyframes disintegrate {
    from {
        opacity: 1;
        width: 100%;
        height: 100%;
    }
    to {
        opacity: 0;
        width: 0;
        height: 100%;
    }
}

@keyframes disintegrate-with-height {
    from {
        opacity: 1;
        width: inherit;
        height: 100%;
    }
    to {
        opacity: 0;
        width: 0;
        height: 0;
    }
}

@keyframes disintegrate-with-width {
    from {
        opacity: 1;
        width: 100%;
    }
    to {
        opacity: 0;
        width: 0;
    }
}


@keyframes appear {
    from {
        opacity: 0;
        display: none;
    }
    to {
        opacity: 1;
        display: inherit;
    }
}

@keyframes appear-with-width {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
        width: 100%;
    }
}

@keyframes appear-with-height {
    from {
        opacity: 0;
        height: 0;
    }
    to {
        opacity: 1;
        height: 100%;
    }
}

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

.no-side-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pt-1 {
    padding-top: 1rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mt-1-px {
    margin-top: 1px !important;
}


.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-2 {
    margin-top: 2px !important;
}

.mt-3 {
    margin-top: 3px !important;
}

.mt-4 {
    margin-top: 4px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-7 {
    margin-top: 7px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-9 {
    margin-top: 9px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-23 {
    margin-top: 23px !important;
}

.mt-30 {
    margin-top: 30px !important;;
}

.mt-40 {
    margin-top: 40px !important;;
}

.mt-50 {
    margin-top: 50px !important;;
}

.mt-80 {
    margin-top: 80px !important;;
}

.mb-7 {
    margin-bottom: 7px !important;;
}

.mb-0 {
     margin-bottom: 0 !important;
}

.mb-3 {
    margin-bottom: 3px !important;;
}

.mb-6 {
    margin-bottom: 5px !important;;
}

.mb-8 {
    margin-bottom: 8px !important;;
}

.mb-10 {
    margin-bottom: 10px !important;;
}

.mb-20 {
    margin-bottom: 20px !important;;
}

.mb-50 {
    margin-bottom: 50px !important;;
}

.mr-2 {
    margin-right: 2px !important;
}

.mr-3 {
    margin-right: 3px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.cursor-pointer {
    cursor: pointer;
}

.mr-3 {
    margin-right: 3px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-1r {
    margin-left: 1rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-5 > * + * {
    margin-top: 1.5rem;
}

.sub-menu {
    width: 210px;
}

.sub-menu > a:first-child, .options-container:first-child > a:first-child {
    margin-top: 7.41px;
}

.sub-menu a, .expandable-menu-base-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    white-space: nowrap;
    text-align: left;
    width: 100%;
    color: var(--primary-color);
}

.sub-menu a:hover, .expandable-menu-base-item:hover {
    color: var(--active-color);
}

.sub-menu .expandable-menu-base-item {
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sub-sub-menu {
    display: flex;
    flex-wrap: wrap;
    height: 0;
    margin-left: 20px;
    width: 100%;
    overflow: hidden;
}

a.sidebar-toggle-button {
    position: absolute;
    align-items: center;
    display: flex;
    color: #595959;
    width: 1.5em;
    height: 2.3em;
}

.sidebar-menu:not(.closed) .sidebar-toggle-button{
    right: 1em;
}

.sidebar-menu.closed .sidebar-toggle-button{
    animation-name: slide-toggle-button;
    animation-duration: var(--animation-duration);
}

@keyframes slide-toggle-button {
    from {
        right: 1em;
    }
    to {
        right: calc(var(--sidebar-closed-width) / 4);
    }
}

.sidebar-toggle-button i {
    margin-left: .2em;
}

.sidebar-toggle-button:hover {
    color: black;
    cursor: pointer;
}

.sidebar-back-button {
    cursor: pointer;
    transition: color var(--animation-duration);
}

.sidebar-back-button .back-button{
    display: flex;
    align-items: center;
}

/* Sidebar accordions */
.sidebar-menu.closed .menu-item .accordion {
    width: 0;
}

.sidebar-menu .menu-item .ui.accordion.menu-accordion {
    max-width: calc(var(--sidebar-open-width) - 1.3em - 2.4em);
    display: flex;
    justify-content: space-between;
    align-self: center;
    flex-direction: column;
    overflow: hidden;
}


.sidebar-menu.product-sidebar .menu-item .ui.accordion.menu-accordion {
    max-width: calc(var(--sidebar-open-width) - 1.3em - 1.1em);
}

.sidebar-menu .menu-item .ui.accordion.menu-accordion .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 5px 0 0px 5px;
    font-weight: 400;
    color: var(--menu-main-color);
}

.sidebar-menu .menu-item .ui.accordion.menu-accordion .title.active {
    font-weight: bold;
}


.sidebar-menu .menu-item .ui.accordion.menu-accordion .title a {
    color: var(--menu-main-color);
}

.sidebar-menu .menu-item.active:not(.has-submenu) {
    color: var(--menu-main-color);
    background: var(--menu-background-color);
    border-right: 0;
    border-radius: 4px;

}

.sidebar-menu.product-sidebar .ui.accordion.menu-accordion .title.active>.dropdown.icon {
    margin-left: .5em;
}


.sidebar-menu .menu-item .accordion .content {
    padding: .5em 0 0 0;
}

/* Sidebar links */
.sidebar-menu .menu-item .menu-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0.5em 1em;
    text-align: left;
    white-space: nowrap;
    border: 1px solid transparent;
    color: var(--menu-main-color);
    border-right: 0;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.sidebar-menu .menu-item .menu-link.active {
    font-weight: bold;
}

.sidebar-menu .menu-item .menu-link span {
    white-space: break-spaces;
    line-height: 1.2em;
}

.sidebar-menu .menu-item .menu-link:not(.expandable-menu-base-item):hover {
    background: var(--gray_2);
    text-decoration: underline;
}

.sidebar-menu .menu-item .menu-link:hover > span {
    text-decoration: underline;
}

.sidebar-menu .menu-link:not(.active):hover + .menu-link.active {
    border-top: 1px solid transparent;
}

.sidebar-menu .menu-link.active:has(+ .menu-link:not(.active):hover) {
    border-bottom: 1px solid transparent;
}
.sidebar-menu .menu-item .menu-link.active:not(.expandable-menu-base-item) {
    color: var(--menu-main-color);
    background: var(--menu-background-color);
}


/* User gretting */
.user-greeting {
    font-size: 17.1px;
    font-weight: 700;
    line-height: 20.52px;
    color: #000000;
    white-space: nowrap;
    height: 3.5em;
    border-bottom: 1px solid rgba(34,36,38,.15);
    margin-bottom: .5em;

    padding: .5em .5em .5em 0;
}

.sidebar-menu.closed .user-greeting{
    justify-content: center;
    padding: .5em 0;
}

.user-greeting-name {
    padding-left: 1em;
    animation-name: appear;
    animation-duration: var(--animation-duration);
    width: calc(100% - 2em);
    opacity: 1;
    overflow: hidden;
    transition: all var(--animation-duration);
    text-overflow: ellipsis;
}

.sidebar-menu.closed .user-greeting-name,
.sidebar-menu.closed .sidebar-navigation .left.side,
.sidebar-menu.closed #gurupay-user-selector .content
{
    transition: all var(--animation-duration);
    overflow: hidden;
}



.sidebar-menu.closed .user-greeting-name{
    width: 0;
    position: absolute;
    left: 0;
    padding: 0;
}

.sidebar-menu.closed .ui.accordion.menu-accordion .title>.dropdown.icon{
    display: none;
}
/* Profile menu */

#navbar-content .right.item {
    --animation-duration: 0.3s
}

.ui.basic.segment.user-profile-segment {
    visibility: hidden;
    opacity: 0;
    width: var(--user-menu-width);
    min-height: var(--user-menu-height);
    max-height: fit-content;
    position: absolute;
    background-color: #FFFFFF;
    top: 5em;
    right: 2em;
    z-index: 1003;
    border-radius: 15px;
    filter: drop-shadow(0px 4px 7.2px rgba(0, 0, 0, 0.25));
    transition: all var(--animation-duration) ease-in-out;
}

.ui.basic.segment.user-profile-segment.active{
    visibility: visible;
    opacity: 1;
}

.ui.segment.notification-menu {
    visibility: hidden;
    opacity: 0;
    width: 356px;
    height: fit-content;
    position: absolute;
    background-color: #FFFFFF;
    top: 5em;
    right: 2em;
    z-index: 1003;
    border-radius: 4px;
    padding: 0;
    filter: drop-shadow(0px 4px 7.2px rgba(0, 0, 0, 0.25));
    transition: all var(--animation-duration) ease-in-out;
}

.ui.segment.notification-menu.active {
    visibility: visible;
    opacity: 1;
}

.ui.segment.notification-menu .header.title {
    display: flex;
    justify-content: space-between;
}

.notification-list .description[style*="text-align: center"] {
    text-align: center;
    color: #999;
}

.notification-list .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ui.right.top.pointing.dropdown.notification-icon {
    margin-right: 16px;
}

.notification-count {
    display: none;
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #db2828;
    color: white;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    font-size: 11px;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.notification-count.active {
    display: flex;
}

.ui.list .notification-item.item {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ui.list .notification-item.item:hover {
    background-color: var(--gray);
}

.ui.list .notification-item.item .notification-close {
    cursor: pointer;
}


.notification-list .notification-item > i.fa-light {
    padding: 6px;
    width: fit-content;
    height: fit-content;
    border-radius: 6px;
    font-size: 16px;
}

.notification-list .notification-item > i.notification-icon-base.fa-light {
    padding: 6px;
    width: fit-content;
    height: fit-content;
    border-radius: 6px;
    font-size: 16px;
}

.ui.list .notification-item.item.loading {
    content: '';
    width: 100%;
    height: 100%;
    transition: filter calc(var(--animation-duration) / 2);
}

.ui.list .notification-item.item.loading *:not(.icon.loading.spinner) {
    filter: blur(5px);
}

.ui.list .notification-item.item .icon.loading.spinner {
    display: none;
}

.ui.list .notification-item.item.loading .icon.loading.spinner  {
    display: block;
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
}

.notification-item.item .content {
    width: 100%;
}

.notification-item.item .content .meta {
    margin-top: 8px;
}
.notification-item.item .content .meta a {
    font-weight: 700;
    cursor: pointer;
}
.notification-item.item .content .meta > span {
    font-size: 12px;
}


.notification-item.item:hover .content .meta a,
.notification-item.item:hover .title span{
    text-decoration: underline;
}
.notification-item.item .content .meta .column {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}



.notification-list .notification-item > i.soft_green.fa-light {
    background-color: var(--soft_green);
    color: var(--soft_green_type);
}

.notification-list .notification-item > i.soft_blue.fa-light {
    background-color: var(--soft_blue);
    color: var(--soft_blue_type);
}

.notification-list .notification-item > i.soft_red.fa-light {
    background-color: var(--soft_red);
    color: var(--soft_red_type);
}

.notification-list .notification-item > i.soft_teal.fa-light {
    background-color: var(--soft_teal);
    color: var(--soft_teal_type);
}

.notification-list .notification-item > i.soft_yellow.fa-light {
    background-color: var(--soft_yellow);
    color: var(--soft_yellow_type);
}

.notification-list .notification-item > i.soft_purple.fa-light {
    background-color: var(--soft_purple);
    color: var(--soft_purple_type);
}

.ui.basic.segment.user-profile-segment .user-menu-header {
    padding: .7em;
}

.user-profile-segment .user-menu-header .purple-empty-box{
    width: 2em;
}

.user-menu-header .top-label {
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 16.8px;
    text-align: left;

}

.user-menu-header .bottom-label {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    margin-top: .1em;
    color: grey;

}


.user-menu-items {
    display: flex;
    flex-wrap: wrap;
}

.items-disabled {
    opacity: .45;
}

.user-menu-items .user-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: calc((var(--user-menu-width) / 3) - 10px);
    text-align: center;
    font-weight: 400;
    color: var(--menu-main-color);
    border-radius: 5px;
    margin-bottom: .5em;
    padding: 0.5em;
    border: 1px solid transparent;
}

.user-menu-items .user-menu-item i{
    font-size: 2.3em;
    margin: 0;
}

.user-menu-items .user-menu-item:hover{
    background: #f5f5f5;
}

.sidebar-menu .menu-item:not(.active):hover + .menu-item.active{
    border-top: 1px solid transparent;
}

.sidebar-menu .menu-item.active:has(+ .menu-item:not(.active):hover) {
    border-bottom: 1px solid transparent;
}


/* Tooltip container */

.tooltip {
    position: relative;
}

.sidebar-menu.closed .tooltip .tooltiptext {
    display: none;
}

.tooltip .tooltiptext {
    line-height: 1.4285em;
    font-weight: bold;
    font-style: normal;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    transition: all .3s ease;
}

.sidebar-menu #system-privilege {
    max-height: 6em;
    padding-top: .5em;
    padding-bottom: .5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background-color: var(--menu-main-color);
}

.sidebar-menu #system-privilege .plan-name {
    font-family: Gabarito;
    font-size: 12px;
}

#level-icon-container .mindz-icon-level-progression,
.sidebar-menu #system-privilege .plan-name  {
    color: #FFFFFF;
}

.header-divider {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.divider.fitted.divider {
    margin-top: 0px;
    margin-bottom: .5em;
}

#navbar {
    position: fixed !important;
    width: 100% !important;
    background: var(--background-color);
    margin: 0 0 50px 0;
    padding-left: 1em;
    display: block;
}

#navbar.menu #navbar-content {
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
#navbar.menu #navbar-content .right.item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    margin-right: 0;
}

#navbar.menu #navbar-content #user-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--navbar-height);
    width: 5em;
    border-left: 1px solid var(--sidebar-border-color);
    padding: .78571429em .92857143em;
    transition: background-color 0.3s ease-in-out;
}

#navbar.menu #navbar-content #user-menu-button:hover,
.user-profile-segment.active + #user-menu-button {
    background-color: var(--menu-main-color);
}

#navbar.menu #navbar-content .navbar-info-segment{
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: fit-content;
    gap: .5em;
    cursor: pointer;
}
#navbar.menu #navbar-content .navbar-info-segment .user-credit{
    font-size: 16px;
    font-weight: 700;
}
#navbar.menu #navbar-content .navbar-info-segment img {
    height: 1.75em;
    margin-top: -.375em;
    margin-bottom: -.375em;
}

#navbar.menu #navbar-content .button {
    margin-right: 16px;
}


#navbar.network.menu .item.logo-placeholder {
    width: var(--sidebar-open-width);
    height: var(--navbar-height);
    padding: 0;
    margin: 0;
    font-size: 14px;
}

#navbar.network.menu.closed .item.logo-placeholder{
    width: var(--sidebar-closed-width);
}

.ead-logo, #navbar.network.menu .item.logo-placeholder img{
    float: left !important;
    padding: 0 !important;
    max-width: var(--sidebar-open-width);
    max-height: calc(var(--navbar-height) - 2em);
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.ead-logo {
    display: flex;
    align-items: center;
}

.ead-logo .logo {
    background-image: var(--logo-url);
    height: 100%;
    width: 100%;
    object-fit: contain;
    background-position: 1em;
    background-size: contain;
    background-repeat: no-repeat;
}


.logo-wrapper, #navbar.network.menu .item.logo-placeholder a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--sidebar-open-width);
    height: var(--navbar-height);
    min-height: var(--navbar-height);
    text-wrap: nowrap;
}

.sidebar-menu.closed .level-footer-banner {
    display: none;
}

#navbar .ui.avatar.image {
    margin: 0 !important;
}
#configs_handler {
    padding-bottom: 1em;
}
#configs_handler .menu-avatar {
    margin-top: 8px;
}

#top-right-menu {
    flex-wrap: wrap;
    flex-direction: column !important;
}

#top-right-menu a {
    display: flex;
    width: 100%;
}

#user_avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto !important;
    /*background: red;*/
}

.padless.column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Media Query for Mobile Devices */
@media only screen and (max-width: 767px) {
    :root {
        --sidebar-closed-width: 0;
    }

    .ui.column .column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .header-divider {
        display: none;
    }

    .logo-wrapper{
        justify-content: flex-start;
    }

    #sidebar-toggle-button {
        display: none!important;
    }

    .ead-logo .logo {
        background-image: var(--favicon-url);
        background-position: .5em;
    }

    .column .search-container {
        width: 100%;
        margin-bottom: 2em;
    }

    #main-sidebar.closed ~ .pusher.is-flex .main-content:not(.student-content):before {
        display: block;
    }

    .sidebar-menu .course-menu-header .course-search-segment {
        position: absolute;
        left: 10vw;
        top: 5em;
        width: 80vw;
        min-width: 80vw;
        min-height: fit-content;
        display: none;
        z-index: 10;
        overflow: hidden;
    }

    .right.item .navbar-info-segment span {
        display: none;
    }

    .logo-wrapper, #navbar.network.menu .item.logo-placeholder a {
        text-wrap: wrap;
    }
}

/* Media Query for all larger than Mobile Devices */
@media only screen and (min-width: 768px) {
    .logo-wrapper i {
        display: none;
    }
    #main-sidebar:not(.closed, .student-menu) ~ .pusher.is-flex .main-content {
        margin-left: var(--sidebar-open-width);
    }
    #main-sidebar:not(.closed, .student-menu) ~ #wrapper.pusher.is-flex .main-content {
        animation-name: move-left;
        will-change: margin-left;
        animation-duration: var(--animation-duration);
        animation-timing-function: var(--animation-easing);
    }
    #main-sidebar.closed ~ #wrapper.pusher.is-flex .main-content {
        animation-name: move-right;
        will-change: margin-left;
        animation-duration: var(--animation-duration);
        animation-timing-function: var(--animation-easing);
    }

}

/* Media Query for all small than Ipads portrait mode and Mobile devices */
@media only screen and
(max-width: 1024px) {
    .sidebar-menu.is-active {
        display: block;
        position: fixed;
        z-index: 1000;
        overflow: hidden;
    }

    .sidebar-submenu.is-active {
        display: flex;
        left: 80px;
        position: fixed;
        z-index: 1000;
        margin-top: 50px;
        overflow: auto;
    }

    .sidebar-menu #system-privilege {
        height: 6em;
    }

    .menu-config-item:only-child {
        height: 56px;
    }

    .user-menu-wrapper {
        display: none;
    }

}

/* Media Query for Tablets Ipads portrait mode */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-user-avatar {
        display: none !important;
    }
}

/* Media Query for Laptops and Desktops */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
}

/* Media Query for Large screens */
@media only screen and (min-width: 1281px) {

}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.input-verification-code {
    text-align: center !important;
    width: 40px !important;
}

#new-feature-label {
    margin-left: 1rem;
    text-align: right;
}

#tooltip-user-enroll[data-tooltip]:after, #tooltip-enroll[data-tooltip]:after {
    white-space: normal;
    width: 220px;
}

@media only screen and (max-width: 300px) {
    #tooltip-user-enroll[data-tooltip]:after, #tooltip-enroll[data-tooltip]:after {
        white-space: normal;
        width: 120px;
    }
}

#student-name {
    display: block;
    margin: 0 0 0.28571429rem 0;
}

#payment-header, #payment-header-enroll {
    margin-top: 10px;
}

.field.prices {
    margin-bottom: 0 !important;
}

#table-enroll-price, #table-user-enroll-price {
    margin-top: 15px;
}

#select-user-div {
    margin-bottom: 0px;
}

#page-header {
    margin-bottom: -5px;
}

@media only screen and (min-width: 768px) {
    .filters.row {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

}

.filters.row > .column > .dropdown > .menu {
    max-width: 100%;
}

.no-padding-v {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.no-padding-t {
    padding-top: 0 !important;
}

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

.ui.new-label {
    height: 2em;
    display: flex;
    padding: 0 1em 0 1em;
    align-items: center;
    font-size: .6em;
    background-color: var(--menu-main-color);
    color: #FFFFFF;
    border-radius: 2px;
}

.sidebar-menu.closed .ui.new-label{
    display: none;
}

a.menu-item.tooltip div.label.new-label,
a.menu-link .label
{
    text-decoration: none!important; /* To stop the user agent styles */
}

.p-1 {
    padding: 1em;
}

.p-2 {
    padding: 2em;
}

.p-3 {
    padding: 3em;
}

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

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.m-1 {
    margin: 1em;
}

.m-2 {
    margin: 2em;
}

.m-3 {
    margin: 3em;
}

.gap-1 {
    gap: 1em;
}

.gap-2 {
    gap: 2em;
}

.gap-3 {
    gap: 3em;
}

/* Martor Editor */

.tab-martor-menu{
    display: flex;
    flex-wrap: wrap;
}

.section-martor .ui.secondary.pointing.menu .item.martor-toolbar {
    padding: 0;
}


.section-martor .ui.secondary.pointing.menu .item.martor-toolbar div.button{
    min-height: 36px;
    min-width: 33px;
}

.section-martor .martor-preview{
    height: 278px;
}

.form .ace_text-input.ace_composition{
    opacity: 0;
}

/* Poggers bar */

.af-progress-header.active {
    display: block;
    position: absolute;
    height: var(--loading-bar-height);
    width: 100%;
    z-index: 1001;
}

.af-progress-header .indeterminate {
    background-color: var(--menu-main-color);
}

.af-progress-header .indeterminate:before {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.af-progress-header .indeterminate:after {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.af-progress-header {
    display: none;
}

/* Animations */
@keyframes move-left {
    0% {
        margin-left: var(--sidebar-closed-width);
    }
    100% {
        margin-left: var(--sidebar-open-width);
    }
}

@keyframes move-right {
    0% {
        margin-left: var(--sidebar-open-width);
    }
    100% {
        margin-left: var(--sidebar-closed-width);
    }
}

@keyframes slide-left {
    0% {
        width: var(--sidebar-open-width);
    }
    100% {
        width: var(--sidebar-closed-width);
    }
}

@keyframes slide-out {
    0% {
        width: var(--sidebar-closed-width);
    }
    100% {
        width: var(--sidebar-open-width);
    }
}

/* Animations */
@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.flex-center-xy {
    align-items: center;
    display: flex;
    justify-content: center;
}

.flex-center-x {
    display: flex;
    justify-content: center;
}


.color-gray-1 {
    color: #595959 !important;
}

.color-gray-2 {
    color: #8A8D99 !important;
}

.color-gray-3 {
    color: #716B6B !important;
}

.m-auto {
    margin: auto;
}

.flex-center-y {
    display: flex;
    align-items: center;
}

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

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

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

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

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

.fs-40 {
    font-size: 40px !important;
}

.fs-50 {
    font-size: 50px !important;
}

.fs-60 {
    font-size: 60px !important;
}

.fs-65 {
    font-size: 65px !important;
}

.icon.purple-menu {
    color: var(--menu-main-color) !important;
}

.pt-6 {
    padding-top: 6px !important;
}

.pt-7 {
    padding-top: 7px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-9 {
    padding-top: 9px !important;
}


.ml-20 {
    margin-left: 20px !important;
}

.m-0 {
    margin: 0 !important;
}

.color-red {
    color: red !important;
}

.ui.toggle.checkbox.toggle-purple input:checked ~ label::before {
  background-color: var(--menu-main-color) !important;
  transition: background-color 0s ease-in-out;
}

.ui.toggle.checkbox.toggle-purple input:not(:checked) ~ label::before {
  background-color: #E6E6E6;
  transition: background-color 0s ease-in-out;
}

.none {
    display: none;
}



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

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

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

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

.fs-40 {
    font-size: 40px !important;
}

.fs-50 {
    font-size: 50px !important;
}

.fs-60 {
    font-size: 60px !important;
}

.fs-65 {
    font-size: 65px !important;
}

.icon.purple-menu {
    color: var(--menu-main-color) !important;
}

.pt-6 {
    padding-top: 6px !important;
}

.pt-7 {
    padding-top: 7px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-9 {
    padding-top: 9px !important;
}


.ml-20 {
    margin-left: 20px !important;
}

.m-0 {
    margin: 0 !important;
}

.color-red {
    color: red !important;
}

.ui.toggle.checkbox.toggle-purple input:checked ~ label::before {
  background-color: var(--menu-main-color) !important;
  transition: background-color 0s ease-in-out;
}

.ui.toggle.checkbox.toggle-purple input:not(:checked) ~ label::before {
  background-color: #E6E6E6;
  transition: background-color 0s ease-in-out;
}

.none {
    display: none;
}

.cursor-text {
    cursor: text;
}

.position-static {
    position: static !important;
}
.cursor-text {
    cursor: text;
}

.position-static {
    position: static !important;
}

.icon-dividing-header {
    display: flex;
    align-items: center;
    gap: .5em;
}

a:not(.button) > i {
    color: var(--primary-color);
}