Proyectos de Subversion Moodle

Rev

Autoría | Ultima modificación | Ver Log | 

//---- Layout
//---- monocolor Moodle Theme
.main-content {
    margin-bottom: $page-padding-global;

    .embedded-main & {
        margin: 0;
    }
}

.layout {
    &.fullscreen {
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        transition: 350ms;
        width: 100vw;
        margin: 0;
        opacity: 1;
        background-color: $modal-content-bg;

        .theme-dark & {
            background-color: $dm-modal-content-bg;
        }

        >div {
            height: 100%;
            width: 100%;
        }

        .loading-icon {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            display: inline-block;
            width: 100%;
            top: 40%;
            position: fixed;

            .icon {
                width: 1em;
                height: 1em;
                font-size: 4em;
            }
        }
    }
}

#page-report {
    margin: $page-padding-global 60px;
    width: calc(100% - 120px);
    border-radius: $btn-border-radius;
}

#page {
    position: relative;
    margin: $navbar-height 0 0 0;

    @include media-breakpoint-between(xs, sm) {
        overflow-y: auto!important;
    }
}

.rui-page-popup #page {
    padding: 20px;
    background-color: $container-bg;
    border-radius: $btn-border-radius;

    .theme-dark & {
        background-color: $dm-container-bg;
    }

    .closewindow {
        margin: 1rem 0;

        .btn {
            width: 100%;
        }
    }
}

.wrapper-xl,
.wrapper-lg,
.wrapper-md,
.wrapper-sm {
    margin-left: auto;
    margin-right: auto;
}


.wrapper-lg {
    width: $wrapper-lg;

    @include media-breakpoint-between(xs, md) {
        width: 85%;
    }
}

.wrapper-md {
    width: $wrapper-md;
    max-width: 100%;

    @include media-breakpoint-between(xs, md) {
        width: 100%;
    }

    .wrapper-md {
        width: 100%;
    }
}

.wrapper-sm {
    width: 600px;

    @include media-breakpoint-between(xs, md) {
        width: 100%;
    }
}

.wrapper-blocks {
    width: 100%;
    margin: 0 auto;
}

.wrapper-page {
    margin-left: auto;
    margin-right: auto;

    @include media-breakpoint-up(lg) {
        max-width: $page-main-container-width;
        width: 100%;
    }
}

.wrapper-page-withblocks {
    width: 100%;
    max-width: 100%;
}

.rui-btn-show-hide {
    position: fixed;
    top: 100px;
    right: 10px;
    z-index: $zindex-fixed;
}

.wrapper--margin {
    margin-top: 60px;
    margin-bottom: 60px;
}

.wrapper-xl {
    max-width: $wrapper-xl;
    width: 100%;

    @include media-breakpoint-between(md, lg) {
        max-width: calc(100vw - 80px);
    }

    @include media-breakpoint-between(xs, sm) {
        max-width: 100%;
    }

    .path-report & {
        max-width: 100%;
    }
}

.wrapper-xxl {
    width: 100%;
}

.rui-blocks-wrapper {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wrapper--with-margin {
    @media (min-width: 1441px) {
        width: calc(100% - 250px);

        .show-drawer-left &,
        .show-drawer-right & {
            width: calc(100% - 90px);
        }
    }

    @media (max-width: 1440px) {
        width: calc(100% - 150px);

        .show-drawer-left &,
        .show-drawer-right & {
            width: calc(100% - 90px);
        }
    }

    @media (min-width: 761px) and (max-width: 1000px) {
        width: calc(100% - 120px);

        .show-drawer-left &,
        .show-drawer-right & {
            width: calc(100% - 90px);
        }
    }

    @media (min-width: 320px) and (max-width: 760px) {
        width: 100%;
    }
}

.wrapper-fw {
    width: 100%;
}

.wrapper-bg {
    padding: 20px;
    background-color: $container-bg;
    border-radius: $btn-border-radius;

    .alert {
        margin-top: 0;
    }
}

.region-main-content {
    position: relative;
}

.rui-title-container {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;

    .rui-icon {
        .path-mod & {
            display: none;
        }
    }

    &+.singlebutton,
    &+.rui-nav-tabs {
        margin-top: 20px;
    }

    &:first-of-type,
    #page .rui-course-card-content & {
        margin-top: 0;
    }

    .rui-page-title--icon & {
        margin-bottom: 0;
    }

    //Remove activity icon inside the title
    .rui-main-content-title {

        .rui-icon-container {
            display: none;
        }
    }

    #page-mod-quiz-summary & {
        margin-top: 0;
    }
}

.rui-title-container+form,
.mform+div {
    margin-top: $page-padding-global;
}



//---- UI elements
.sep--left {
    position: relative;

    &:before {
        content: '';
        background-color: $border-color;
        width: 1px;
        height: 30px;

        position: absolute;
        top: calc(50% - 15px);
        left: -5px;

        .theme-dark & {
            background-color: $dm-border-color;
        }
    }
}


#page-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    #page {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;

        @include media-breakpoint-between(xs, sm) {
            padding: 7px 16px;
        }

        #page-content {
            flex: 1 0 auto;
        }
    }
}

//---- Footer
.rui-page-footer {
    margin: 0 auto;
    flex-shrink: 0;

    background-color: $footer-bg;
    border-radius: $btn-border-radius-lg;
    color: $footer-text-color;

    @include media-breakpoint-up(md) {
        padding: 60px;
    }

    @include media-breakpoint-between(xs, sm) {
        padding: 30px;
    }

    hr {
        border-color: $footer-border;

        .theme-dark & {
            border-color: $dm-border-color;
        }
    }

    .theme-dark & {
        background-color: $dm-black;
        color: $dm-body-color-secondary;
    }
}

.rui-footer--contact,
.rui-footer--social {

    @include media-breakpoint-up(md) {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
    }

    @include media-breakpoint-between(xs, sm) {
        display: block;
        text-align: center;
    }

    list-style: none;

    padding: 0;
    font-size: $font-size-xs;
    color: $footer-text-color;

    li {
        display: inline-flex;
        align-items: center;

        margin-top: .35rem;
        margin-right: 1rem;
        margin-bottom: .35rem;

        &:last-of-type {
            margin-right: 0;
        }
    }

    .theme-dark & {
        color: $dm-body-color-light;
    }

    a {
        color: $footer-text-color;

        .theme-dark & {
            color: $dm-body-color-light;
        }

        &:hover {
            opacity: .6;
        }

    }
}

.rui-footer-buttons-wrapper {
    flex-wrap: wrap;

    @include media-breakpoint-up(md) {
        padding: 30px 60px;
    }

    @include media-breakpoint-between(xs, sm) {
        padding: 20px;
    }

}

.rui-social-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;

    list-style: none;

    padding: 0;
    font-size: $font-size-xs;
    color: $footer-text-color;

    li {
        display: inline-flex;
        align-items: center;

        margin-top: .35rem;
        margin-right: 1rem;
        margin-bottom: .35rem;

        &:last-of-type {
            margin-right: 0;
        }
    }

    .theme-dark & {
        color: $dm-body-color-light;
    }

    a {
        color: $body-color;

        .theme-dark & {
            color: $dm-body-color-light;
        }

        &:hover {
            opacity: .6;
        }

    }
}

.rui-topbar-wrapper {
    padding: 10px;
    margin: 0;

    width: 100%;
    height: $navbar-height;
    position: fixed;
    top: 0;
    left: 0;
    z-index: $zindex-fixed + 200;

    display: flex;
    align-items: center;

    background-color: $topbar-bg;
    border-bottom: 1px solid $border-color;

    font-size: 0.875rem; //14px
    color: $topbar-text;

    .theme-dark & {
        background-color: $dm-body-bg;
        color: $dm-topbar-text;
        border-color: $dm-border-color;
    }
}

.rui-topbar {
    position: relative;
    display: flex;
    align-items: center;

    .navbar-nav {
        font-size: 0.875rem; //14px
        font-weight: $font-weight-medium;
        justify-content: space-between;

        .nav-link {
            color: $topbar-text;
            border-radius: $btn-border-radius;

            .theme-dark & {
                color: $dm-topbar-text;
            }

            &.active {
                color: $nav-tabs-link-active-color;
                background-color: $nav-tabs-link-active-bg;

                .theme-dark & {
                    color: $dm-topbar-btn-hover-text;
                    background-color: $dm-topbar-btn-hover;
                }
            }

            &[aria-expanded="true"],
            &:hover {
                color: $nav-tabs-link-hover-color;
                background-color: $nav-tabs-link-hover-bg;

                .theme-dark & {
                    color: $dm-topbar-btn-hover-text;
                    background-color: $dm-topbar-btn-hover;
                }
            }
        }
    }

    .site-name {
        width: max-content;
        max-width: 260px;
        font-size: 0.875rem; //14px

        @if variable-exists(fontheadings) {
            font-family: $fontheadings;
        }

        font-weight: $headings-font-weight;
        color: $topbar-text;

        .theme-dark & {
            color: $dm-topbar-text;
        }
    }

}

//---- TODO: sidebar button, variables
.sidebar-btn {
    padding: 0;
    margin-right: 10px;
    margin-left: -1rem;

    width: 60px;
    height: 60px;
    line-height: 1;

    border: 0;
    color: $topbar-text;

    background-color: transparent;
    border-right: 1px solid rgba($topbar-text, .15);
    border-radius: $border-radius 0 0 0;

    &:hover {
        background-color: $topbar-btn-hover;
    }
}


//---- Moodle Pages mods */
.addtagcoll {
    margin-bottom: 40px;
}




//---- TODO: Course Index Page
.course-hero {
    width: 95%;
    margin-top: 60px;
    margin-bottom: $page-padding-global;

    img {
        border-radius: 5px;
    }
}

.course-teachers-box {
    max-width: $page-main-container-width;
    margin-bottom: 0;

    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    overflow-x: auto;

    .course-contact-title-item {
        margin-right: .5rem;
        display: flex;

        .rui-course-list-wrapper & {
            margin-right: 20px;
            margin-bottom: 20px;
            width: calc(50% - 20px);
        }
    }

    .course-contact-title {
        margin-left: .5rem;
        margin-right: .5rem;
        margin-bottom: 0;

        font-size: $font-size-md;
        font-weight: $font-weight-medium;
        color: $body-color-secondary;

        .theme-dark & {
            color: $dm-body-color-secondary;
        }
    }

    .course-contact {
        display: flex;
        align-items: center;

        &:hover {
            text-decoration: none;
        }

        .course-teacher-avatar {
            width: 60px;
            height: 60px;
            border-radius: $btn-border-radius;
            position: relative;

            @include media-breakpoint-between(xs, sm) {
                width: 40px;
                height: 40px;
            }
        }

        .course-teacher-content {
            margin: 0 20px;

            .course-teacher-name {
                line-height: 1.3;
            }

            .rui-course-list-wrapper & {
                margin: 0 10px;
            }
        }

        .course-teacher-name {
            margin: 0;
            font-weight: $font-weight-medium;
            font-size: $btn-font-size-lg;
        }

        .course-teacher-role {
            font-size: $font-size-md;
            color: $body-color-secondary;

            .theme-dark & {
                color: $dm-body-color-secondary;
            }
        }
    }
}

.course-hero-img {
    border-radius: $btn-border-radius-lg;
    width: 100%;
    max-width: 100%;
}

.course-progressbar-wrapper {
    padding: 0;
    position: relative;

    .rui-progress {
        margin: 10px 0 20px;
        width: 100%;
        height: 4px;
        border-radius: 4px;
    }

}


@include media-breakpoint-down(sm) {
    .header-button-group {
        width: 100%;

        .btn {
            width: 100%;
        }
    }
}

.page-header-content,
.header-content {
    &:empty {
        display: none;
    }

    .rui-page-title {
        margin-bottom: 20px;
    }

    @include media-breakpoint-down(sm) {
        width: 100%;

        .btn {
            width: 100%;
            border-radius: $border-radius-md !important;

            &+.btn {
                margin-top: 5px;
            }
        }
    }
}


.page-header-content {
    margin: 30px 0;
    width: 100%;
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    @include media-breakpoint-down(sm) {
        margin: 10px 0;
    }

    .rui-page-title--icon {
        .path-mod & {
            margin-left: 0;
            margin-right: 0;
        }
    }

    .rui-main-content-title {

        .path-mod &,
        .path-course & {

            @include media-breakpoint-up(md) {
                font-size: 4vw;
            }

            max-width: 900px;
            line-height: 1.1;

            @include media-breakpoint-between(xs, sm) {
                margin-top: 10px;
                font-size: 2rem;
            }
        }
    }

    .rui-course-header &,
    .rui-title-container,
    .rui-page-title {
        margin-bottom: 0;

        font-size: 3rem;

        .path-mod &,
        .path-course & {
            max-width: 900px;
            line-height: 1.1;

            @include media-breakpoint-up(md) {
                font-size: 6vw;
            }

            @include media-breakpoint-between(xs, sm) {
                font-size: 2rem;
            }
        }

        @include media-breakpoint-between(xs, sm) {
            font-size: 1.875rem;
        }
    }
}

/** Navbar logo. */
.rui-logo img {
    height: 35px;
}

.rui-logo-ml {
    margin-left: 10px;
}

.rui-logo-box {
    padding: 4px;
    border-radius: $btn-border-radius;
    background-color: $white;

    .theme-dark & {
        background-color: $black;
    }
}

.rui-navbar-nav {
    .nav-item {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;

        .nav-link {
            position: relative;
            width: max-content;

            margin-right: .5rem;
            padding: 0 1rem;

            display: flex;
            align-items: center;
            justify-content: center;

            min-width: 40px;
            height: 40px;
            border-radius: $btn-border-radius;

            color: $topbar-btn-text;
            line-height: 1.8;

            .theme-dark & {
                color: $dm-topbar-text;
            }

            @include media-breakpoint-down(sm) {
                margin-right: 0;
                width: 100%;
            }

            &[aria-expanded="true"],
            &:hover {
                background-color: $topbar-btn-hover;

                .theme-dark & {
                    color: $dm-topbar-btn-hover;
                }
            }
        }

    }
}

@include media-breakpoint-up(md) {
    .rui-navbar-nav--sep {
        position: relative;

        &:before {
            content: '';
            background-color: rgba($black, .15);
            width: 1px;
            height: 16px;

            position: absolute;
            top: calc(50% - 8px);
            left: -6px;
        }
    }
}

.popover-region-notifications:not(.collapsed) {
    .nav-link {
        background-color: $gray-700;
    }
}

.rui-topbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    width: max-content;
    min-height: 40px;

    border: none;
    border-radius: $btn-border-radius;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: $topbar-btn-text;

    &[aria-expanded="true"],
    &:hover {
        color: $topbar-btn-hover-text;
        background-color: $topbar-btn-hover;
        text-decoration: none;
    }
}

#mobileNav {
    background-color: $primary-color-600;
    color: $primary-color-100;
}

.nav-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    width: max-content;
    min-height: 40px;

    border: none;
    border-radius: $btn-border-radius;

    background-color: $topbar-btn;
    color: $topbar-btn-text;

    &[aria-expanded="true"],
    &:hover {
        color: $topbar-btn-hover-text;
        background-color: $topbar-btn-hover;

        .theme-dark & {
            background-color: $primary-color-600;
            color: $primary-color-100;
        }
    }

    &[aria-expanded="true"] {
        .nav-drawer-btn--opened {
            display: flex;
        }

        .nav-drawer-btn--closed {
            display: none;
        }
    }

    &[aria-expanded="false"] {
        .nav-drawer-btn--closed {
            display: flex;
        }

        .nav-drawer-btn--opened {
            display: none;
        }
    }
}

.rui-signup-btn {
    padding: 0 1rem;
    color: $topbar-btn-text;
    //background-color: $nav-tabs-link-active-bg;

    &:hover {
        color: $nav-tabs-link-hover-color;
        background-color: $nav-tabs-link-hover-bg;
    }
}

.rui-login-btn {
    padding: 0 1rem;
    color: $nav-tabs-link-hover-color;
    background-color: $nav-tabs-link-hover-bg;

    &:hover {
        color: $nav-tabs-link-active-color;
        background-color: $nav-tabs-link-active-bg;
    }
}


.rui-icon-menu {
    padding: 0;
    margin: 0;
    display: inline-flex;

    position: relative;
    list-style: none;

    @include media-breakpoint-down(sm) {
        margin: 0 0 0 auto;
    }

    li {
        margin: 0 2px;
    }

    li,
    .popover-region {
        display: inline-flex;
    }

    .popover-region {
        margin-right: 2px;
    }

}

.rui-icon-menu--sep {
    &:before {
        content: '';
        background-color: $border-color;

        position: absolute;
        top: -14px;
        left: calc(50% - 10px);

        width: 20px;
        height: 1px;

        .theme-dark & {
            background-color: $dm-border-color;
        }
    }
}

.nav-editswitch {
    width: max-content;
}

.mobile-nav--open #topBar:before {
    @include media-breakpoint-between(xs, sm) {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba($container-bg, .8);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        width: 100%;
        height: 100vh;
    }
}

.rui-icon-menu--horizontal {
    display: inline-flex;
    align-items: center;

    li {
        display: inline-flex;
        margin-bottom: 0;
        margin-left: .4rem;
    }
}

.local-mail .nav-link,
.rui-topbar-special-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: transparent;
    font-size: $font-size-xs;
    color: $topbar-btn-text;
    border-radius: $btn-border-radius;

    @include media-breakpoint-down(sm) {
        padding: 8px;
    }

    &.active {
        background-color: $topbar-btn-hover;
        color: $topbar-btn-hover-text;

        .theme-dark & {
            background-color: $dm-topbar-btn-hover;
            color: $dm-topbar-btn-text;
        }
    }

    .theme-dark & {
        background: transparent;
        color: $dm-topbar-btn-text;
    }

    &:hover {
        background: $topbar-btn-hover;
        color: $topbar-btn-hover-text;

        .theme-dark & {
            background: $dm-topbar-btn-hover;
            color: $dm-topbar-btn-hover-text;
        }
    }
}

.rui-nav-tabs+* {
    margin-top: $page-padding-global;
}


.rui-navbar-brand,
body:not(#rui-lang-btn).rui-navbar-lang {
    position: relative;

    @include media-breakpoint-down(sm) {
        margin-left: 0;
        margin-right: 0;
    }
}

.rui-navbar-brand {
    margin-left: 20px;
}

.rui-navbar-brand--img {
    margin-left: 0;
}

.rui-navbar-brand:hover {
    text-decoration: none;
    opacity: .6;
}

@include media-breakpoint-between(xs, md) {
    .rui-navbar-collapse {
        padding: 20px;

        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;

        background-color: $primary-color-700;

        border-radius:  0 0 $btn-border-radius $btn-border-radius;

        display: inline-flex;
        flex-wrap: wrap;

        @include media-breakpoint-down(sm) {
            top: 95px;
        }
    }
}

.rui-custom-logo {
    display: inline-flex;

    .theme-dark & {
        display: none;
    }
}

.rui-custom-dmlogo {
    display: none;

    .theme-dark & {
        display: inline-flex;
    }
}


.rui-topbar-customfield {
    position: relative;

    width: auto;
    max-width: 280px;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    font-size: $font-size-xs;

    @include media-breakpoint-down(md) {
        max-width: 210px;
        margin: 0 50px 0 0;
    }

    &::before {
        content: '';
        background-color: $border-color;
        width: 1px;
        height: 16px;

        position: absolute;
        top: calc(50% - 8px);
        left: -6px;
    }

    &:after {
        content: '';
        background-color: $border-color;
        width: 1px;
        height: 16px;

        position: absolute;
        top: calc(50% - 8px);
        right: -6px;
    }


    p {
        margin-bottom: 0;
    }

    a {
        color: $topbar-link;

        &:hover {
            color: $topbar-link-hover;
        }
    }
}

/* Footer */
.rui-footer-content {
    font-size: $font-size-xs;

    div {
        gap: 10px;
    }

    a {
        color: $footer-link-color;

        &:hover {
            color: $footer-link-color-hover;
            text-decoration: underline;
        }
    }
}

.rui-footer-copy {
    p {
        margin-bottom: .25rem;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

.rui-page-footer .rui-footer-nav-title {
    font-size: $font-size-sm;
    color: $footer-text-color;
    opacity: .7;

    .theme-dark & {
        color: $dm-body-color;
    }
}

.rui-page-footer .rui-footer-nav-items {
    font-size: $font-size-md;
    color: rgba($footer-text-color, .6);

    .theme-dark & {
        color: $dm-body-color-secondary;
    }

    li {
        margin: .65rem 0;

        a {
            color: $footer-link-color;

            &:after {
                background-color: $footer-link-color-hover;
            }

            .theme-dark & {
                color: $dm-body-color-secondary;
            }

            &:hover {
                text-decoration: none;
                color: $footer-link-color-hover;
            }
        }
    }
}

.rui-page-footer {
    a:not(.btn) {
        opacity: .7;

        &:after {
            background-color: $footer-link-color-hover;
        }

        &:hover {
            opacity: 1;
            color: $footer-link-color-hover;
            text-decoration: none;
        }
    }
}

.rui-footer-block--3 {
    font-size: $font-size-sm;
    color: $body-color-light;

    .theme-dark & {
        color: $dm-body-color-light;
    }
}

/* Enroll Page */
.theme-dark#page-enrol-index .main-content {
    .info {
        background-color: $black;
    }

    .box:not(.info) {
        border: 1px solid $dm-border-color;
    }
}

#page-enrol-index .main-content {

    .col-md-3,
    .col-md-9 {
        padding: 0;
        text-align: left !important;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-md-3 {
        margin-top: .5rem;
    }

    .info {
        margin-top: $page-padding-global;
        background-color: $gray-100;
        border-radius: $btn-border-radius-lg;

        .rui-course-card {
            max-width: 320px;
            margin: 30px auto;
        }

        .rui-course-card-body {
            margin-top: 0;
        }

        .rui-title-container {
            width: auto;
            margin-bottom: $page-padding-global;
        }
    }


    .mform .form-inline .form-control {
        width: 100%;
    }

    a.fheader {
        margin-bottom: 0;
    }

    .fcontainer,
    .btn,
    [type="submit"] {
        width: 300px;
        margin: 0 auto;
    }

    .box:not(.info) {
        padding: 20px !important;
        border-radius: $btn-border-radius-lg;
    }

}

body#page-enrol-index #region-main .generalbox:last-of-type {
    width: 100% !important;
    float: none !important;
    margin-top: 20px !important;
    box-shadow: none !important;
}

.generalbox {
    &:empty {
        display: none;
    }
}

// Dark mode.
.theme-dark .rui-dark-mode-status--on {
    display: block;
}

body:not(.theme-dark) .rui-dark-mode-status--on,
.theme-dark .rui-dark-mode-status--off {
    display: none;
}

// Not logged in users
.notloggedin,
.moodle-guest-user {
    .hidefornotloggedin {
        display: none !important;
    }
}

body:not(.moodle-guest-user):not(#page-admin-setting-themesettingmonocolor) 
body:not(.notloggedin):not(#page-admin-setting-themesettingmonocolor),
body:not(.moodle-guest-user):not(#page-admin-setting-themesettingmonocolorchild) 
body:not(.notloggedin):not(#page-admin-setting-themesettingmonocolorchild) {
    .hideforloggedin {
        display: none !important;
    }
}

.theme-dark {
    .hide-on-darkmode {
        display: none;
    }
}

body:not(.theme-dark) {
    .hide-on-lightmode {
        display: none;
    }
}

.rui-custom-alert {
    padding: 14px 60px 14px 24px;

    @include media-breakpoint-between(xs, sm) {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        left: 10px;
        margin: 0;
        bottom: 7px;    
    }

    @include media-breakpoint-up(md) {
        max-width: 600px;
        width: 600px;
        left: calc(50% - 300px);
        bottom: 0;
    }

    display: inline-flex;
    justify-content: flex-start;
    align-content: flex-start;

    position: fixed;
    z-index: 9999;

    background-color: $black;
    color: $dm-body-color-secondary;
    font-weight: $font-weight-normal;
    box-shadow: $box-shadow-lg;

    &.fade:not(.show) {
        z-index: -1;
    }

    .theme-dark & {
        background-color: $dm-gray-300;
        color: $dm-body-color-secondary;
    }

    .rui-custom-alert-close {
        position: absolute;
        top: 5px;
        right: 5px;

        padding: 10px;

        display: flex;
        justify-content: center;
        align-content: center;

        background-color: transparent;
        border: none;
        border-radius: $btn-border-radius-xl;

        background-color: $gray-100;
        color: $gray-600;

        width: 38px;
        height: 38px;

        transition: $transition-base;

        .theme-dark & {
            background-color: $dm-gray-100;
            color: $dm-gray-600;
        }

        &:hover {
            background-color: $red-100;
            color: $red-600;
        }
    }
}


.rui-main-nav {
    .nav-item {
        font-size: 1rem;
    }
}

.rui-main-nav {
    padding: 0;
    margin: 0;

    .nav-item {
        position: relative;
        font-weight: $font-weight-medium;
        list-style: none;

        .nav-link {
            width: 100%;
            display: flex;
            align-items: center;

            padding: .35rem 1.25rem;
            margin: 9px 0;

            border-radius: $btn-border-radius;
            color: $body-color;

            z-index: 1;

            &:hover {
                &:before {
                    background-color: $white;
                }
            }

            &.active {
                &:before {
                    background-color: $white;
                    color: $body-color-light;
                }
            }

            &:before {
                content: '';

                position: absolute;

                width: 100%;
                top: -3px;
                bottom: -3px;
                left: 0;

                border-radius: $btn-border-radius;

                z-index: -1;
            }

            .nav-link-icon {
                opacity: .6;
            }
        }
    }
}

.wrapper-course {
    width: 100%;
    transition: $transition-base;
}

#blocks-dashboardonecol {
    .block-region {
        margin-bottom: 1.25rem;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

$fixed-header-y: $navbar-height;


#page.drawers {

    #page-site-index & {
        padding-top: 0;
    }

    .main-inner {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        flex: 1 0 auto;
    }

    .activity-header {
        margin: 0;
        width: 100%;
    }

    @include media-breakpoint-up(lg) {
        padding-top: 15px;
    }

    position: relative;
    @include transition(350ms);
    //height: calc(100vh - #{$navbar-height});
    left: 0;
    right: 0;

    //overflow-y: auto;

    @include media-breakpoint-between(xs,sm) {
        touch-action: auto!important;
    }
    
    @include media-breakpoint-up(lg) {
        &.show-drawer-right {
            margin-left: 0;
            margin-right: $drawer-right-width;
        }

        &.show-drawer-left {
            margin-left: $drawer-right-width;
            margin-right: 0;
        }

        &.show-drawer-left.show-drawer-right {
            margin-left: $drawer-right-width;
            margin-right: $drawer-right-width;
        }
    }
}

@include media-breakpoint-down(sm) {

    //the scroll to top button
    .drawer-toggles {
        z-index: 100;

        .drawer-right-toggle,
        .drawer-left-toggle {
            top: calc(99vh - (#{$navbar-height} * 2.5));
        }
    }

    #page.drawers.scroll-down {
        .drawer-right-toggle {
            transform: translateX(150%);
            pointer-events: auto;
            visibility: hidden;
        }

        .drawer-left-toggle {
            transform: translateX(-150%);
            pointer-events: auto;
            visibility: hidden;
        }
    }
}

@include media-breakpoint-up(lg) {

    .drawer-left,
    .drawer-right {
        // top: $navbar-height + 10px;
        height: calc(100% - 62px);
    }
}

.drawercontent {
    padding: 0 10px 0 0;
    margin-right: 4px;
    height: calc(100% - 70px);

    position: relative;
    z-index: -1;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;

    .drawer-right & {
        margin: 0;
        padding: 0 20px 80px 20px;

        @include media-breakpoint-between(xs, sm) {
        padding-bottom: 100px;
        }
    }

    .dropdown-menu .dropdown-item {
        width: 220px;
        white-space: normal;
    }
}


// Dashboard  
@include media-breakpoint-up(lg) {
    .rui-blocks-area--sm {
        flex: 0 0 320px;
        max-width: 320px;
    }
}

// Scrollbar
#page.drawers,
.drawercontent,
.filemanager .fp-content,
.rui-card-course-contacts,
.cb-toolbar-container .dropdown-scrollable,
.rui-column-mh,
.rui-nav--admin,
.rui-content-message-container,
.rui-course-card-text,
#sidepre-blocks .rui-sidebar-blocks-wrapper,
.table-dynamic div:first-of-type,
.course-teachers-box,
.notification-area .control-area,
.gradeparent {
    @include thin-scrolls($scroll-bg-track);

    .theme-dark & {
        @include thin-scrolls($dm-drawer-scroll-bg-track);
    }
}

// Grid layout
.rui-grid-layout {
    display: grid;
    flex-direction: column;
    align-items: stretch;

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}


// RWD
.rui-mobile-nav {
    @include media-breakpoint-up(md) {
        display: none;
        z-index: -2;
    }

    @include media-breakpoint-between(xs, sm) {
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: $navbar-height;
        z-index: 1;
    }
}



@include media-breakpoint-between(xs, sm) {

    .rui-mobile-nav-btn-close,
    .rui-mobile-nav-btn {
        position: absolute;
        top: calc(50% - 20px);
        right: 10px;
        z-index: $zindex-fixed;
    }

    .rui-mobile-nav-btn-close {
        display: none;
        opacity: 0;
        right: 0;

        .opened & {
            position: absolute;
            opacity: 1;
            z-index: 4;
            display: flex;
        }
    }

    .rui-topbar {

        .moremenu,
        .rui-icon-menu {
            z-index: -1;
            display: none;
            opacity: 0;

            .opened & {
                background-color: $topbar-bg;
                position: absolute;
                left: 0;
                opacity: 1;
                z-index: 3;
                display: flex;

                .theme-dark & {
                    background-color: $dm-topbar-bg;
                }
            }

            .rui-icon-menu {
                .opened & {
                    padding-left: 30px;
                }
            }

        }

        .moremenu.navigation {
            .opened & {
                @include media-breakpoint-between(xs, sm) {
                    padding: 10px;
                    width: calc(100% + 20px);
                    left: -10px;
                    border-radius: $btn-border-radius-md;
                    box-shadow: $box-shadow-lg;
                }
            }
        }

        .rui-icon-menu {
            .opened & {
                //top: 0;
                right: 50px;

                @include media-breakpoint-up(md) {
                    width: max-content;
                }

                @include media-breakpoint-between(xs, sm) {
                    align-items: center;
                    justify-content: flex-end;
                }
            }
        }
    }

    .moremenu .nav-link {
        margin: 0;
    }

    .more-nav {
        a {
            margin: 0;
        }

        .dropdown-menu {
            width: 100%;
            max-width: calc(100% - 7px);
            left: 2px !important;
        }
    }

    #topbarLeft {
        z-index: 3;
    }
}


// Fix some unnecessary layout gaps
.box:empty {
    display: none;
}

#page-login-change_password {
    background-image: none;
}

// H5P
.h5p-question-content {
    margin: 0;
}

.rui-editmode--top .editmode-switch-form {

        @include media-breakpoint-up(lg) {
            margin-left: 20px;
            position: relative;
            padding: 5px 10px;
            background-color: $container-bg;
            border: none;
            border-radius: $btn-border-radius;

            &:before {
                content: '';
                background-color: rgba($black, .15);
                width: 1px;
                height: 16px;

                position: absolute;
                top: calc(50% - 8px);
                left: -10px;
            }

            .dir-rtl & {
                margin-right: 20px;
                margin-left: 0;
            }
        }

        @include media-breakpoint-down(md) {
            padding: 5px 10px;
            background-color: $container-bg;
            border: none;
            border-radius: $btn-border-radius;

            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .26), 0 14px 44px 0 rgba(0, 0, 0, .2);
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: $zindex-tooltip;

            .theme-dark & {
                background-color: $black;
            }
        }
}

.rui-editmode--footer .editmode-switch-form {
    padding: 5px;
    background-color: $container-bg;
    border: none;
    border-radius: $btn-border-radius;

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .26), 0 14px 44px 0 rgba(0, 0, 0, .2);
    position: fixed;
    right: 20px;
    bottom: 13px;
    z-index: $zindex-tooltip;

    transition: $transition-base;
}

@include media-breakpoint-up(lg) {
.rui-editmode--footer.scrolled.back-to-top-on .editmode-switch-form {
    right: 70px;
}
}

.theme-dark.rui-editmode--footer .editmode-switch-form {
    background-color: $dm-gray-100;
}

#back-to-top {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 8px;

    z-index: 9999;
    transition: $transition-base;

    box-shadow: $box-shadow;
    background-color: $gray-900;
    color: $gray-100;
    border: 0;
    border-radius: $btn-border-radius-xl;

    .theme-dark & {
        background-color: $dm-gray-100;
        color: $dm-gray-900;
    }

    @include media-breakpoint-between(xs,md) {
        display: none!important;
    }

    .scrolled & {
        display: flex;

        @include media-breakpoint-between(xs,md) {
            display: none!important;
        }
    }
}