/*=======================================
 * Settings: Look -> Site branding
 ======================================*/

/*---------------------------------------
 * Setting: Compact logo
 --------------------------------------*/

/* Add an explicit height to the logo in the navbar.
   This is necessary to render SVG logos properly as their size is calculated different than pixel-based images.
   Please note that these values might be overridden by the maxlogowidth setting. */
.navbar-brand,
.navbar-brand .logo {
    height: 100%;
    width: auto;
}

/*---------------------------------------
 * Setting: Navbar color
 --------------------------------------*/

/* Moodle core already presents the light navbar with dark font color (.navbar-light.bg-white) perfectly.
   There is nothing to change here. */

/* Tweak the dark navbar with light font color
   and the primary color navbar with light font color. */
.navbar.navbar-dark.bg-dark,
.navbar.navbar-dark.bg-primary {
    /* Remove the white border at the bottom of the navbar as it looks odd with a dark navbar. */
    border-bottom: none;

    /* Change the color of the site name in the navbar to white. */
    .navbar-brand {
        color: $white;
    }

    /* Change the color of the navigation items in the navbar to white
       and to black when hovered (as Moodle core will then show a white background).
       This has to use !important as Moodle core already uses !important for some of its hover states. */
    .nav-link {
        color: $white;
    }
    .nav-link.active {
        border-bottom-color: $white;
    }
    .nav-link:hover,
    .nav-link:focus {
        color: $black !important; /* stylelint-disable-line declaration-no-important */

        .icon {
            color: $black !important; /* stylelint-disable-line declaration-no-important */
        }
    }

    /* Change the background color and colors of open custom menu parent navigation items in the navbar
       as they are built differently from single navigation items. */
    .nav-item.dropdown.show .nav-link.dropdown-toggle {
        background-color: #f8f9fa;
        color: $black;
    }

    /* Change the color of the icons in the navbar as well as the toggle icon in the usermenu
       to white.
       This has to use !important as Moodle core already uses !important for the icon colors. */
    .nav-link .icon,
    .nav-link a .icon,
    .usermenu .dropdown-toggle {
        color: $white !important; /* stylelint-disable-line declaration-no-important */
    }

    /* Change the color of the icons in the dropdown menu to a dark grey and to white when hovered.
       This has to use !important as Moodle core already uses !important for the icon colors. */
    .dropdown-menu .dropdown-item .icon {
        color: #1d2125 !important; /* stylelint-disable-line declaration-no-important */
    }
    .dropdown-menu .dropdown-item:hover .icon {
        color: $white !important; /* stylelint-disable-line declaration-no-important */
    }

    /* Revert color of the close icon in the search panel in the navbar as this icon is still dark on white
       within the input form. */
    #searchform-navbar .btn-close .icon {
        color: #6a737b !important; /* stylelint-disable-line declaration-no-important */
    }

    /* Change the color of the edit switch label in the navbar to white.
       This has to use !important as Moodle core would change the color to text-primary as soon as editing is on. */
    .editmode-switch-form,
    .editmode-switch-form label {
        color: $white !important; /* stylelint-disable-line declaration-no-important */
    }

    /* Adapt the color of the edit switch widget to fit onto the dark background. */
    .custom-control-input:checked ~ .custom-control-label::before {
        background-color: $white;
        border-color: #c8c8c8;
    }
    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
        background-color: #8f959e;
    }

    /* Change the color of the offcanvas button to fit onto the dark background. */
    #theme_boost_union-offcanvas-btn {
        color: #c8c8c8;
    }
    #theme_boost_union-offcanvas-btn:hover {
        color: #fff;
    }

    /* Change the color of the login link in the navbar to white. */
    .login,
    .login a {
        color: $white;
    }

    /* Change the color of the notification action buttons to dark grey.
       This has to use !important as Moodle core already uses !important for the icon colors. */
    .popover-region-container a .icon {
        color: #343a40 !important; /* stylelint-disable-line declaration-no-important */
    }

    /* Change the color of the language selector link in the navbar to white. */
    .langmenu .dropdown .dropdown-toggle {
        color: $white;
    }
}

/* Tweak the dark navbar with light font color a little bit more. */
.navbar.navbar-dark.bg-dark {
    /* If we are showing the search form, we need to show the border again as dark border
       as otherwise the active node's bottom bar might peek through. */
    &:has(#searchform-navbar.show) {
        border-bottom: 1px solid #343a40;
    }

    /* Change the background color of the custom child menu and user menu navigation items in the navbar
       to dark grey when hovered and focused (especially during keyboard navigation) */
    .nav-item.dropdown.show,
    #user-action-menu.show {
        a.dropdown-item {
            background-color: inherit;
        }
        a.dropdown-item:hover,
        a.dropdown-item:focus {
            background-color: #343a40;
            color: $white;
        }
    }

    /* Change the background color of the search panel in the navbar. */
    #searchform-navbar {
        background-color: #343a40;
    }

    /* Change the color of the language selector drop down items when hovered, focused and active to dark grey
       as this would be presented in the primary color otherwise. */
    .langmenu {
        .dropdown-item:active,
        .dropdown-item:hover,
        .dropdown-item:focus,
        .dropdown-item:focus-within {
            background-color: $dark;
        }
    }
}

/* Tweak the primary color navbar with light font color a little bit more. */
.navbar.navbar-dark.bg-primary {
    /* If we are showing the search form, we need to show the border again as dark border
       as otherwise the active node's bottom bar might peek through. */
    &:has(#searchform-navbar.show) {
        border-bottom: 1px solid $primary;
    }

    /* Change the background color of the custom child menu and user menu navigation items in the navbar
       to dark grey when hovered and focused (especially during keyboard navigation) */
    .nav-item.dropdown.show,
    #user-action-menu.show {
        a.dropdown-item {
            background-color: inherit;
        }
        a.dropdown-item:hover,
        a.dropdown-item:focus {
            background-color: $primary;
            color: $white;
        }
    }

    /* Change the background color of the search panel in the navbar. */
    #searchform-navbar {
        background-color: $primary;
    }

    /* Change the color of the active nav items's bottom border to white as this would be presented in the
   primary color otherwise. */
    .nav-link.active {
        border-bottom-color: $white;
    }

    /* Change the color of the language selector icon to a light grey as well.
        This has to use !important as Moodle core already uses !important for the icon colors. */
    .langmenu .icon {
        color: #c8c8c8 !important; /* stylelint-disable-line declaration-no-important */
    }
}

/* Tweak the primary color navbar with dark font color. */
.navbar.navbar-light.bg-primary {
    /* Change the color of the active nav items's bottom border to dark grey as this would be presented in the
       primary color as well otherwise. */
    .nav-link.active {
        border-bottom-color: rgba($black, .6);
    }

    /* Change the background color and colors of open custom menu parent navigation items in the navbar
   as they are built differently from single navigation items. */
    .nav-item.dropdown.show .nav-link.dropdown-toggle {
        background-color: #f8f9fa;
        color: $black;
    }

    /* Change the color of the edit switch label in the navbar to dark grey.
       This has to use !important as Moodle core wants to use the color text-primary as soon as editing is on. */
    .editmode-switch-form,
    .editmode-switch-form label {
        color: rgba($black, .6) !important; /* stylelint-disable-line declaration-no-important */
    }
    .editmode-switch-form label:hover {
        color: rgba($black, .9) !important; /* stylelint-disable-line declaration-no-important */
    }

    /* Adapt the color of the edit switch widget to fit onto the dark background. */
    .custom-control-input:checked ~ .custom-control-label::before {
        background-color: $white;
        border-color: #c8c8c8;
    }
    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
        background-color: #8f959e;
    }

    /* Change the background color of the search panel in the navbar. */
    #searchform-navbar {
        background-color: $primary;
    }

    /* Change the color of the login link in the navbar to dark grey and to darker grey when hovered. */
    .login,
    .login a {
        color: rgba($black, .6);
        &:hover {
            color: rgba($black, .9);
        }
    }

    /* Change the color of the divider to dark grey.
       This has to use !important as Moodle core already uses !important for the border-left color.*/
    .divider {
        border-left: 1px solid rgba($black, .6) !important; /* stylelint-disable-line declaration-no-important */
    }
}

/*=======================================
 * Settings: Look -> Login page
 ======================================*/

/*---------------------------------------
 * Setting: Login form position
 --------------------------------------*/

/* Move the login window to the side based on the theme settings.
   While the classes login-wrapper-left and login-wrapper-right are set here,
   the class login-wrapper-center is not set here as the login form is already centered by Moodle core. */
.login-wrapper.login-wrapper-left {
    justify-content: left;
}
.login-wrapper.login-wrapper-right {
    justify-content: right;
}

/*---------------------------------------
 * Setting: Login form transparency
 --------------------------------------*/

/* Make background of login panel slightly transparent. */
.login-container.login-container-80t {
    background-color: rgba(255, 255, 255, 0.8);
}

/*=======================================
 * Settings: Look -> Category index / site home
 ======================================*/

/*---------------------------------------
 * Setting:  Course listing presentation
 --------------------------------------*/

/* Only on site home and the category index pages - and on the course search page. */
.pagelayout-frontpage,
.pagelayout-coursecategory,
#page-course-search {

    /* In the Boost Union course listing. */
    .theme_boost_union-courselisting {
        /* For the card view only. */
        &.theme_boost_union-courselisting-card {
            /* Revert the gutter between the cards to align the card deck with the category summary. */
            margin-left: -0.25rem;
            margin-right: -0.25rem;
        }

        /* For the course list only. */
        &.theme_boost_union-courselisting-list {
            /* The course image. */
            .list-image {
                height: 5rem;
                background-position: center;
                background-size: cover;
            }
        }

        /* The course contact section.
           There are some things which can't be set with Bootstrap classes in Mustache. */
        .coursecontacts {
            /* Push the contacts over the course image. */
            margin-top: -18px;

            /* Make sure that the concact images are small enough even though the avatar file is bigger. */
            .contact img {
                width: 35px;
                height: 35px;
            }
        }

        /* The custom fields section.
           We can't use Bootstrap classes in Mustache here as these elements are output by a renderer which we do not influence. */
        .customfields {
            /* Use a smaller font and some space for each custom fields. */
            .customfield {
                font-size: 80%;
                @extend small;
                @extend .mb-2;
            }
            .customfield:last-of-type {
                @extend .mb-0;
            }

            /* Highlight the field name. */
            .customfieldname,
            .customfieldseparator {
                @extend strong;
            }
        }

        /* The enrolment icons section. */
        .enrolmenticons {
            .enrolmenticon {
                /* Make the icon grey instead of black. */
                color: $gray-600;

                /* Add some padding to the container. */
                margin-right: 0.5rem;

                /* But not to the last one. */
                &:last-child {
                    margin-right: 0;
                }

                /* And not to the icon itself. */
                .icon {
                    margin-right: 0;
                }
            }
        }

        /* The progress section. */
        .progress {
            height: 0.5rem;
        }
        .progress-text {
            color: $gray-600;
        }
    }

    /* For the course details modal. */
    .theme_boost_union-courselisting-modal {
        /* The contact card */
        .contact {
            /* Control the width on multiple screen sizes. */
            width: 100%;
            @include media-breakpoint-up(sm) {
                width: 50%;
            }
            @include media-breakpoint-up(lg) {
                width: 25%;
            }
        }
    }

    /* The Boost Union course category info. */
    .theme_boost_union-coursecategoryinfo {
        /* Put the category info into a box. */
        @extend .border;
        @extend .rounded;
        @extend .p-3;
        @extend .mb-3;
        @extend .small;
    }

    /* The sticky category heading. */
    .theme_boost_union-stickycategory {
        top: $navbar-height;

        /* Make sure that the sticky category header does not cover the more menu. */
        z-index: 999;
    }
    &.theme_boost_union-courselisting-card .theme_boost_union-stickycategory {
        width: calc(100% - 0.5rem);
    }

    /* The goto button. */
    .dimmed_category .gotobutton {
        /* Make sure that a dimmed category (and thus dimmed links in the course cards / course list) do not affect
            the button label color. */
        color: #fff;
    }

    /* The Boost Union course category listing.
       We do not document each single rule here. It's just a fiddly attempt to improve the look of the tree. */
    .theme_boost_union-catlisting {
        > .collapsible-actions {
            @extend .border;
            @extend .border-bottom-0;
            @extend .rounded-top;
            @extend .px-3;
            @extend .py-2;
            @extend .pb-1;
            @extend .mb-0;

            a.collapseexpand {
                @extend .btn;
                @extend .btn-secondary;
                @extend .btn-sm;
            }
        }

        > .content > .subcategories {
            @extend .border;
            @extend .rounded-bottom;
            @extend .bg-light;
            @extend .mb-3;

            > .category {
                @extend .px-2;
                @extend .border-bottom;

                &:last-child {
                    @extend .pb-2;
                    @extend .rounded-bottom;
                    @extend .border-bottom-0;
                }

                &:not(.collapsed) {
                    @extend .border-bottom;
                }
                &:not(.collapsed):last-of-type {
                    @extend .border-bottom-0;
                }
            }

            .category {
                .theme_boost_union-courselisting {
                    width: calc(100% + 4rem);
                    margin-left: calc(-2rem - 8px);
                    @extend .border;
                    @extend .rounded;
                    @extend .shadow;
                    @extend .bg-white;
                    @extend .my-2;

                    &.theme_boost_union-courselisting-list {
                        @extend .px-3;
                    }
                }

                /* Support up to 8 subcategory levels,
                   from level 9 on the course listing would not be indented correctly anymore. */
                [data-depth="2"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 16px);
                    margin-left: calc(-2rem - 8px - 16px);
                }
                [data-depth="3"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 32px);
                    margin-left: calc(-2rem - 8px - 32px);
                }
                [data-depth="4"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 48px);
                    margin-left: calc(-2rem - 8px - 48px);
                }
                [data-depth="5"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 64px);
                    margin-left: calc(-2rem - 8px - 64px);
                }
                [data-depth="6"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 80px);
                    margin-left: calc(-2rem - 8px - 80px);
                }
                [data-depth="7"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 96px);
                    margin-left: calc(-2rem - 8px - 96px);
                }
                [data-depth="8"] .theme_boost_union-courselisting {
                    width: calc(100% + 4rem + 112px);
                    margin-left: calc(-2rem - 8px - 112px);
                }

                /* On small screens, we must not let the category listing exceed the container's width to avoid horizontal
                   scroll bars. */
                @include media-breakpoint-down(sm) {
                    .theme_boost_union-courselisting-wrapper {
                        width: calc(100% - 4rem);
                        margin-left: 2rem;
                    }
                }

                .categoryname .spinner {
                    margin-left: 0.5rem;
                }
            }
        }
    }

    /* The Boost Union course category listing with a course listing in it.
       Some of the rules above are already only applied to category listings with course listings in it.
       But some have to be checked explicitely. We do this here with .theme_boost_union-catlisting-cl as we do not want to use
       a :has(.theme_boost_union-courselisting) selector.
       We do not document each single rule here either. */
    .theme_boost_union-catlisting.theme_boost_union-catlisting-cl {
        > .content > .subcategories {
            .category {
                @extend .py-2;

                &:last-child {
                    @extend .pb-0;
                }

                &.with_children:not(.collapsed) {
                    > .content > .courses {
                        @extend .mt-4;
                    }
                }

                .theme_boost_union-courselisting-card {
                    @extend .px-2;
                }
            }

            > .category:last-child {
                @extend .py-2;
            }
        }
    }
}

/* The search page 'show all' button, if the search page has modified course listings. */
#page-course-search {
    .paging:has(+ .theme_boost_union-courselisting-wrapper),
    .theme_boost_union-courselisting-wrapper ~ .paging {
        @extend .text-end;

        a {
            @extend .btn;
            @extend .btn-secondary;
            @extend .btn-sm;
            @extend .mb-3;
        }
    }
}


/*=======================================
 * Settings: Look -> Course
 ======================================*/

/*---------------------------------------
 * Setting: Course header image.
 --------------------------------------*/
#courseheaderimage {
    background-size: cover;
    @include border-radius();
}
.courseheaderimage-dark {
    color: white;
    text-shadow: 0 0 5px black;
}
.courseheaderimage-light {
    color: black;
    text-shadow: 0 0 5px white;
}
/* If the header actions are placed _within_ the course header image element, i.e. the title is stacked on the image.*/
#courseheaderimage .header-action {
    /* Add a background color of white to the header actions to make sure that they can be read properly. */
    background-color: white;
    @include border-radius();
}

/*---------------------------------------
 * Setting: Course module icons in course index.
 --------------------------------------*/

/* If the admin configured the course index not to show course activity type icons. */
body.nocourseindexcmicons {
    /* Hide the course activity type icons and the completion info at the right of the line
       (which are both always added to the DOM regardless of the setting). */
    #courseindex {
        span.courseindex-cmicon-container,
        span.courseindex-cmicon-cpl-eol {
            display: none;
        }
    }
}

/* If the admin configured the course index to show course activity type icons. */
body.hascourseindexcmicons {
    #courseindex {
        /* Show the course activity type icons
           (which are always added to the DOM regardless of the setting). */
        span.courseindex-cmicon-container {
            display: block;
        }
    }

    /* If the admin configured the completion info to be shown as icon color. */
    &.hascourseindexcplicon {
        #courseindex {
            /* Hide the completion widget at the beginning of the line. */
            .courseindex-cmicon-cpl-sol {
                display: none;
            }

            /* And hide the completion info within the activity type icon container.
               (This element just serves as data source for the observer JS and would be shown by Moodle core JS). */
            .courseindex-cmicon-icon .completioninfo {
                display: none;
            }

            /* And move the section title in the course index slightly to the right to align it vertically with the
               activity title (which is now slightly more right as well) again. */
            .courseindex-chevron {
                padding-right: 12px;
            }
        }
    }

    /* If the admin configured the completion info to be shown at the end of the line. */
    &.hascourseindexcpleol {
        #courseindex {
            /* Hide the completion widget at the beginning of the line. */
            .courseindex-cmicon-cpl-sol {
                display: none;
            }

            /* And move the section title in the course index slightly to the right to align it vertically with the
               activity title (which is now slightly more right as well) again. */
            .courseindex-chevron {
                padding-right: 12px;
            }
        }
    }

    /* If the admin configured the completion info to be shown at the start of the line. */
    &.hascourseindexcplsol {
        #courseindex {
            /* Hide the completion widget at the end of the line. */
            .courseindex-cmicon-cpl-eol {
                display: none;
            }

            /* And move the activity icon slightly closer to the completion icon. */
            .courseindex-item .completioninfo {
                min-width: 20px;
            }
        }
    }

    /* If editing is enabled. */
    &.editing {
        #courseindex {
            /* Hide all completion info elements. */
            span.completioninfo {
                display: none;
            }
        }
    }

    /* Style the course index activity type icons / completion widget */
    #courseindex {
        /* Position of the course index activity type icon container. */
        .courseindex-cmicon-container {
            border-radius: 4px;
            margin-right: 6px;
            line-height: normal;
        }

        /* General style of the course index activity type icon. */
        .courseindex-cmicon {
            margin: 0.1rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            .icon {
                height: 20px;
                margin-right: unset;
                width: 20px;
            }
        }

        /* Gain back the vertical space which was given to the icon by reducing the vertical padding of each courseindex
           element by 0.1rem. */
        .courseindex-item {
            padding: .45rem 0 .45rem .5rem;
        }

        /* Overwrite activity type icon style for dimmed activities. */
        .courseindex-item.dimmed .courseindex-cmicon-icon {
            filter: invert(0.5);
        }

        /* Overwrite activity type icon style for incomplete activities. */
        .courseindex-cmicon-cpl-incomplete {
            background-color: $gray-600;
            .courseindex-cmicon-icon {
                filter: brightness(0) invert(1);
            }
        }

        /* Overwrite activity type icon style for complete activities. */
        .courseindex-cmicon-cpl-complete {
            background-color: $success;
            .courseindex-cmicon-icon {
                filter: brightness(0) invert(1);
            }
        }

        /* Overwrite activity type icon style for failed activities. */
        .courseindex-cmicon-cpl-fail {
            background-color: $danger;
            .courseindex-cmicon-icon {
                filter: brightness(0) invert(1);
            }
        }
    }
}


/*=======================================
 * Settings: Look -> Resources
 ======================================*/

/*---------------------------------------
 * Setting: Additional resources.
 --------------------------------------*/

/* Enlarge the icons in the settings file lists. */
.settings-additionalresources-filelist .icon,
.settings-customfonts-filelist .icon {
    height: 64px;
    width: 64px;
}


/*=======================================
 * Settings: Feel -> Navigation.
 ======================================*/

/*---------------------------------------
 * Setting: Show full name in the user menu.
 --------------------------------------*/

#user-action-menu .loggedinas {
    padding: .25rem 1.75rem .25rem .75rem;
}

/*---------------------------------------
 * Setting: Show starred courses popover in the navbar.
 --------------------------------------*/
.navbar #nav-popover-favourites-container {
    .popover-region-container {
        /* Make sure that the popover is only as high an necessary*/
        height: auto;

        /* Limit the width to some reasonable size to avoid that the popover menu is too wide. */
        min-width: 250px;
        max-width: 450px;
        width: auto;
    }

    .popover-region-header-container {
        /* Grant the popover header some more space.*/
        height: 35px;
        padding-left: 10px;
        padding-top: 5px;
    }

    .popover-region-content-container {
        /* Make sure that the popover is only as high an necessary.
           (Full browser height minus navbar height minus popover header height minus some space at the bottom. */
        height: auto;
        max-height: calc(100vh - #{$navbar-height} - 35px - 1em);

        /* Improve the course list items. */
        .dropdown-item {
            /* Fix the left padding of the dropdown item. */
            padding-left: 10px;

            /* Hide overflowing course names. */
            overflow-x: hidden;
            text-overflow: ellipsis;

            /* Keep dimmed courses white when hovered. */
            &.dimmed:hover {
                color: $white;
            }
        }
    }
}

/*---------------------------------------
 * Setting: Boost Union footer buttons (i.e. Back to top button and Accessibility button).
 --------------------------------------*/

/* Boost Union footer buttons container */
#boost-union-footer-buttons {
    /* Place the Boost Union footer buttons at a fixed place. */
    position: fixed;
    right: 2rem;
    /* As a start, the Boost Union footer buttons are shown in the bottom right corner. */
    bottom: 2rem;
    /* Make sure that the Boost Union footer buttons are not covered by anything else. */
    z-index: $zindex-dropdown;
    /* Animate position together with Moodle core footer button. */
    @include transition(0.2s);

    /* Add margin between the individual buttons. */
    .btn {
        display: block;
        margin-top: 0.75rem;
    }

    /* Style accessibility button. */
    #btn-accessibility-support {
        /* Use some clever CSS tricks to present the fa-universal-access icon without its border. */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        border: 6px solid $secondary;
        transition: 0.2s;

        .icon {
            width: 1.75rem;
            height: 1.75rem;
            max-width: none;
            max-height: none;
            font-size: 1.75rem;
            color: $secondary;
            transition: 0.2s;
        }

        &,
        &:hover,
        &:focus {
            background: #000 !important; /* stylelint-disable-line declaration-no-important */
        }

        &:hover,
        &:focus {
            border-color: #b1bbc4;

            .icon {
                color: #b1bbc4;
            }
        }
    }

    /* Style back to top button. */
    #back-to-top {
        /* Hide the back to top icon initially. It will be unhidden by JS only. */
        display: none;

        i::before {
            /* Move the caret icon slightly up for a nicer look. */
            vertical-align: 0.3rem;
        }
    }
}

/* If the sticky footer is shown by Moodle core, the Boost Union footer buttons have to have a higher starting position. */
body.hasstickyfooter #boost-union-footer-buttons {
    bottom: 7rem;
}

/* If we are on a small screen and the footer button is shown in the bottom right corner,
   the Boost Union footer buttons have to be shown above of the footer button. */
body.theme_boost-union-footerbuttonall.jsenabled,
body.theme_boost-union-footerbuttonmobile.jsenabled {
    @include media-breakpoint-down(xs) {
        #boost-union-footer-buttons {
            bottom: 5rem;
        }
    }
    /* And if the sticky footer is shown by Moodle core, move the Boost Union footer buttons more upwards. */
    &.hasstickyfooter {
        @include media-breakpoint-down(xs) {
            #boost-union-footer-buttons {
                bottom: calc(5rem + #{$stickyfooter-height} - 1rem);
            }
        }
    }
}
/* If we are on a larger screen and the footer button is shown in the bottom right corner,
   the Boost Union footer buttons have to be shown above of the footer button. */
body.theme_boost-union-footerbuttonall.jsenabled,
body.theme_boost-union-footerbuttondesktop.jsenabled {
    @include media-breakpoint-up(sm) {
        #boost-union-footer-buttons {
            bottom: 5rem;
        }
    }
    /* And if the sticky footer is shown by Moodle core, move the Boost Union footer buttons more upwards. */
    &.hasstickyfooter {
        @include media-breakpoint-up(sm) {
            #boost-union-footer-buttons {
                bottom: calc(5rem + #{$stickyfooter-height} - 1rem);
            }
        }
    }
}
/* If the communications button is shown, the Boost Union footer buttons have to be moved more upwards.
   To realize this, our footerbuttons JS has added a class to the body tag. */
body.theme-boost-union-commincourse {
    /* If we are on a small screen,
       we do not need to do anything (yet) as the communication button is not shown on small screens (yet). */

    /* If we are on a larger screen and the footer button is not shown in the bottom right corner. */
    &.theme_boost-union-footerbuttonnone.jsenabled,
    &.theme_boost-union-footerbuttonmobile.jsenabled {
        /* We have to move the Boost Union footer buttons more upwards.*/
        @include media-breakpoint-up(sm) {
            #boost-union-footer-buttons {
                bottom: 5rem;
            }
        }
        /* And if the sticky footer is shown by Moodle core, move the Boost Union footer buttons more upwards. */
        &.hasstickyfooter {
            @include media-breakpoint-up(sm) {
                #boost-union-footer-buttons {
                    bottom: calc(5rem + #{$stickyfooter-height} - 1rem);
                }
            }
        }
    }

    /* If we are on a larger screen and the footer button is shown in the bottom right corner. */
    &.theme_boost-union-footerbuttonall.jsenabled,
    &.theme_boost-union-footerbuttondesktop.jsenabled {
        /* We have to move the Boost Union footer buttons even more upwards.*/
        @include media-breakpoint-up(sm) {
            #boost-union-footer-buttons {
                bottom: 8rem;
            }
        }
        /* And if the sticky footer is shown by Moodle core, move the Boost Union footer buttons more upwards. */
        &.hasstickyfooter {
            @include media-breakpoint-up(sm) {
                #boost-union-footer-buttons {
                    bottom: calc(8rem + #{$stickyfooter-height} - 1rem);
                }
            }
        }
    }
}

/* If the right-hand drawer is opened. */
#page.drawers.show-drawer-right #boost-union-footer-buttons {
    /* On larger screens, the drawer opens near the main content.
       The Boost Union footer buttons can be moved nicely to the left. */
    @include media-breakpoint-up(lg) {
        /* Move the Boost Union footer buttons when right drawer is shown. */
        right: calc(#{$drawer-right-width} + 2rem);
    }
}


/*=======================================
 * Settings: Feel -> Blocks.
 ======================================*/

/*---------------------------------------
 * Settings: Additional block regions - General.
 --------------------------------------*/

/* To support additional block regions around the main content area, Boost Union introduced
   the main-inner-wrapper HTML element. Unfortunately, this breaks the Flexbox flow of Moodle core.
   To make it work again, we have to set the Flexbox flex attribute in the main-inner-wrapper element as well.
   In addition to that, we set the Flexbox attribute for the #page element as well as it turned out to be necessary. */
.main-inner-wrapper,
#page-wrapper #page {
    flex: 1 0 auto;
}


/*---------------------------------------
 * Settings: Additional block regions - The offcanvas region.
 --------------------------------------*/

/* The Offcanvas drawer (which is only used in non-editing mode). */
#theme_boost_union-drawers-offcanvas {
    /* Position and size (which takes effect as soon as the drawer is shown). */
    background-color: $gray-100;
    box-shadow: 2px 2px 4px $drawer-shadow-color;
    height: calc(100vh - 3rem);
    min-height: 300px;
    top: -100vh;
    width: 100vw;
    z-index: 1050; /* This z-index is equal to $zindex-modal and puts the drawer on top of
                      the whole page regardless what Moodle does for the .drawer class. */

    /* And show it as soon as the drawer is set to be shown. */
    &.show {
        top: 0;
        @include transition(0.2s);
    }

    /* The close icon to close the Offcanvas drawer. */
    .drawerheader {
        /* Position the icon. */
        .btn {
            margin-left: auto;
            margin-right: 10px;
        }

        /* Make the close icon more visible. */
        .icon {
            background: $black;
            color: $white;
            border-radius: 5px;
            padding: 4px;
        }
    }

    /* Do what we can to avoid horizontal scrollbars in the Offcanvas drawer's content. */
    .drawercontent {
        overflow-x: hidden;
        > .row {
            margin-left: 0;
            margin-right: 0;
        }
    }
}

/* The Offcanvas block region (which is only used in editing mode as we do not have a drawer then).
   Please note: #theme-block-region-offcanvas-editing is the outer element which is shown and hidden by Bootstrap
   Collapse. #theme-block-region-offcanvas-editing-inner is the inner element which we style here. */
#theme-block-region-offcanvas-editing-inner {
    /* Position and size (which takes effect as soon as the region is shown). */
    background-color: $gray-100;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 2px 2px 4px $drawer-shadow-color;
    margin: 0 -15px 30px -15px;
    padding: 15px 15px 0 15px;
}
/* Disable the Bootstrap collapse transition as it is not properly working with all the block regions. */
#theme-block-region-offcanvas-editing.collapsing {
    transition: none;
}

/* Navbar icon for opening the offcanvas drawer. */
.navbar-nav {
    .drawer-offcanvas-toggle {
        display: flex;
        align-items: center;
        .btn {
            color: rgba(0, 0, 0, .6);
            height: 40px;
            &:hover {
                color: rgba(0, 0, 0, .9);
            }
            i {
                font-size: 20px;
                line-height: 30px;
            }
        }
    }
}


/*---------------------------------------
 * Settings: Additional block regions - The outside-left and outside-right regions.
 --------------------------------------*/

/* On larger screens. */
@include media-breakpoint-up(md) {
    /* On Moodle pages with limited width (currently: The course main pages, the frontpage and the dashboard).
       Remember: Only on these pages, we offer the outside-left and outside-right region.
       We do not need to handle the full-width pages here. */
    body.limitedwidth {
        /* If we have a outside-left and / or a outside-right block region. */
        .main-inner-outside-left-right,
        .main-inner-outside-left,
        .main-inner-outside-right {
            /* Center the main region content to keep the page content in the middle of the page. */
            text-align: center;

            /* Change the block regions to show them properly as block columns. */
            #theme-block-region-outside-left,
            #theme-block-region-outside-right,
            .main-inner {
                /* Undo the text-align for the regions in each column to still show the content correctly. */
                text-align: initial;

                /* Display them as inline-block. */
                display: inline-block;

                /* And make sure that the columns are at the top of the page at all. */
                vertical-align: top;
            }
        }

        /* On pages where only the outside-left region is enabled:
           Reduce the size of the main column to make space for the outside-left column. */
        .main-inner-outside-left .main-inner {
            width: calc(98% - #{$blockregionoutsideleftwidth});
        }

        /* On pages where only the outside-right region is enabled:
           Reduce the size of the main column to make space for the outside-right column. */
        .main-inner-outside-right .main-inner {
            width: calc(98% - #{$blockregionoutsiderightwidth});
        }

        /* On pages where the outside-left and the outside-right region are enabled:
           Reduce the size of the main column to make space for the outside-left and outside-right columns. */
        .main-inner-outside-left-right .main-inner {
            width: calc(98% - #{$blockregionoutsiderightwidth} - #{$blockregionoutsideleftwidth});
        }

        /* Set the width and margin of the outside-left region. */
        #theme-block-region-outside-left {
            margin-right: 1rem;
            margin-top: 1.5rem;
            width: $blockregionoutsideleftwidth;
        }

        /* Set the width of the outside-right region. */
        #theme-block-region-outside-right {
            margin-left: 1rem;
            margin-top: 1.5rem;
            width: $blockregionoutsiderightwidth;
        }

        /* If the admin configured outside blocks to be shown next to the main content. */
        .main-inner-outside-nextmaincontent {
            #theme-block-region-outside-left,
            #theme-block-region-outside-right {
                /* Disable float (just to be sure). */
                float: none;
            }
        }

        /* If the admin configured outside blocks to be shown next to the main content. */
        .main-inner-outside-nearwindowedges {
            /* Float the outside-left block region to the left. */
            #theme-block-region-outside-left {
                float: left;
            }

            /* Float the outside-right block region to the right. */
            #theme-block-region-outside-right {
                float: right;
            }

            /* Clear the outside-bottom + footer regions so that they are shown correctly after the floated regions. */
            #theme-block-region-outside-bottom,
            #theme-block-region-footer {
                clear: both;
            }
        }
    }
}

/* And on smaller screens. */
@include media-breakpoint-down(sm) {
    /* Change the outside-left and outside-right blocks to full width (with some horizontal space). */
    #theme-block-region-outside-left,
    #theme-block-region-outside-right {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }
    /* And remove their floating. */
    .main-inner-outside-nearwindowedges {
        #theme-block-region-outside-left,
        #theme-block-region-outside-right {
            float: none;
        }
    }
}


/*---------------------------------------
 * Settings: Additional block regions - The outside-top, header and outside-bottom regions.
 --------------------------------------*/

/* Block regions: Outside top and outside bottom. */
#theme-block-region-outside-top,
#theme-block-region-outside-bottom,
#theme-block-region-footer {
    /* On larger screens. */
    @include media-breakpoint-up(md) {
        /* Position and size. */
        &.theme-block-region-outside-fullwidth,
        &.theme-block-region-outside-coursecontentwidth,
        &.theme-block-region-footer-fullwidth,
        &.theme-block-region-footer-coursecontentwidth {
            margin: 1rem auto;
            width: 100%;
        }
        &.theme-block-region-outside-herowidth,
        &.theme-block-region-footer-herowidth {
            margin: 0 -3rem 0 -3rem;
            /* We do not set any width at all.
               100% would be too small, 100vw would add horizontal scrollbars (for whatever reason). */
        }
    }

    /* And on smaller screens. */
    @include media-breakpoint-down(sm) {
        &.theme-block-region-outside-fullwidth,
        &.theme-block-region-outside-coursecontentwidth,
        &.theme-block-region-footer-fullwidth,
        &.theme-block-region-footer-coursecontentwidth {
            /* Just show the block full width with some horizontal space. */
            padding-left: 15px;
            padding-right: 15px;
            width: 100%;
        }
        &.theme-block-region-outside-herowidth,
        &.theme-block-region-footer-herowidth {
            /* Remove the margin. */
            margin: 0;
        }
    }
}

/* Additional styling for content width regions to limit the block region size on Moodle pages with limited width. */
body.limitedwidth .theme-block-region-outside-coursecontentwidth,
body.limitedwidth .theme-block-region-footer-coursecontentwidth {
    max-width: $course-content-maxwidth;
}

/* Additional styling for hero-width regions to remove some styling which is counterproductive. */
.theme-block-region-outside-herowidth,
.theme-block-region-footer-herowidth {
    .block {
        border-width: 0;
        border-radius: 0;
    }
}

/* Block region: Header. */
#theme-block-region-header {
    /* On larger screens. */
    @include media-breakpoint-up(md) {
        /* Position and size. */
        margin: 0 auto;
        max-width: $course-content-maxwidth;
        width: 100%;
    }

    /* And on smaller screens. */
    @include media-breakpoint-down(sm) {
        /* Just show the block full width with some horizontal space. */
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }

    /* Add margin-top to avoid that this block region is glued to the navbar if
       #theme-block-region-outside-top does not exist. */
    margin-top: 1rem;
}
/* Remove margin-top again if this block region is already preceded by the outside-top region. */
#theme-block-region-outside-top + #theme-block-region-header {
    margin-top: 0;
}


/*---------------------------------------
 * Settings: Additional block regions - The footer regions.
 --------------------------------------*/

/* Block region: Footer. */
#theme-block-region-footer {
    /* Position and size. */
    margin: 0 auto;
    width: 100%;
}

/* And on smaller screens. */
@include media-breakpoint-down(sm) {
    /* Add some horizontal space on the small screen. */
    #theme-block-region-footer {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/*---------------------------------------
 * Settings: Additional block regions - The content regions.
 --------------------------------------*/

/* Block region: Content-upper and Content-lower. */
#theme-block-region-content-upper,
#theme-block-region-content-lower {
    /* Position and size. */
    margin-left: 15px;
    margin-right: 15px;
}


/*=======================================
 * Settings: Content -> Footer.
 ======================================*/

/*---------------------------------------
 * Settings: Footnote.
 --------------------------------------*/

/* Static pages links dividers. */
#footnote {
    .theme_boost_union_footnote_link {
        border-right: 2px solid $nav-divider-color;
    }
    .theme_boost_union_footnote_link:last-of-type {
        border-right: none;
    }
}

/* The footnote styles are different on the login page and on all non-login pages.
   They are also different on larger and smaller screens.
   We will deal with the overall cases for all screen sizes first and will then overwrite the things which need
   to be different on the login page. */

/* On larger screens. */
@include media-breakpoint-up(md) {
    /* If there is a background image or a loginbackground image configured. */
    body.backgroundimage #footnote,
    body.loginbackgroundimage #footnote {
        /* Add horizontal padding to align the footnote with the main page content.
           The numbers are basically adopted from the main content areas of the Moodle page. */
        padding-left: calc(15px + .5rem);
        padding-right: calc(15px + .5rem);

        /* Add white background color, border radius and a small bottom margin
           to make the footnote work with background images. */
        @include border-radius();
        background-color: $white;
        margin-bottom: 1rem;
    }

    /* If there isn't a background image nor a loginbackground image configured. */
    body:not(.backgroundimage):not(.loginbackgroundimage) #footnote {
        /* Add horizontal margin to align the footnote with the main page content.
           The numbers are basically adopted from the main content areas of the Moodle page. */
        margin-left: calc(15px + .5rem);
        margin-right: calc(15px + .5rem);

        /* Add top border. */
        border-top: $border-width solid $border-color;
    }
}

/* And on smaller screens. */
@include media-breakpoint-only(sm) {
    #footnote {
        /* On smaller screens, there isn't any background image, so there's no need for a white background. */

        /* Add horizontal margin and padding to align the footnote with the main page content.
           The numbers are adopted from the main content areas of the Moodle page.
           Add another right padding as well to avoid that the content gets covered by the footer and Boost Union footer buttons. */
        margin-left: .5rem;
        padding-left: 15px;
        margin-right: .5rem;
        padding-right: 51px; /* The underlying calculation is 15px + 36px. */

        /* Add top border. */
        border-top: $border-width solid $border-color;
    }
}

/* And on really small screens. */
@include media-breakpoint-down(xs) {
    #footnote {
        /* On really small screens, there isn't any background image, so there's no need for a white background. */

        /* Add horizontal margin and padding to align the footnote with the main page content.
           The numbers are adopted from the main content areas of the Moodle page.
           Add another right padding as well to avoid that the content gets covered by the Boost Union footer buttons. */
        margin-left: 15px;
        padding-left: 1rem;
        margin-right: 15px;
        padding-right: calc(1rem + 36px);

        /* Add top border. */
        border-top: $border-width solid $border-color;
    }
}

/* As said, the login needs some more adjustments. */

/* On larger screens. */
@include media-breakpoint-up(sm) {
    /* If there is a loginbackground image configured. */
    body.pagelayout-login.loginbackgroundimage #footnote {
        /* Add a box shadow to the footnote to match the look of the login box. */
        box-shadow: $logincontainer-shadow;

        /* Add horizontal margin as the page does not have a margin itself. */
        margin-left: 15px;
        margin-right: 15px;

        /* Add another right padding as well to avoid that the content gets covered by the footer button. */
        padding-right: calc(.5rem + 51px); /* The underlying calculation is 15px + .5rem + 36px. */
    }
}

/* On smaller screens. */
@include media-breakpoint-only(sm) {
    /* If there is a loginbackground image configured. */
    body.pagelayout-login.loginbackgroundimage #footnote {
        /* Add white background color and a small bottom margin
           to make the footnote work with background images.
           This is necessary as this isn't covered by the normal background styles already
           (which are only applied to pages > 768px.
           Note that there isn't a border-radius added as the login box doesn't have a border radius as well
           on this screen size. */
        background-color: $white;
        margin-bottom: 1rem;
    }
}

/* And on really small screens. */
@include media-breakpoint-down(xs) {
    body.pagelayout-login.loginbackgroundimage {
        #footnote {
            /* Add white background color and a small bottom margin
            to make the footnote work with background images.
            This is necessary as this isn't covered by the normal background styles already
            (which are only applied to pages > 768px. */
            background-color: $white;

            /* Change horizontal margin and padding to
            make the footnote work with background images. */
            margin-left: 0;
            padding-left: calc(15px + 1rem);
            margin-right: 0;
        }

        /* If (and only if) the accessibility button is not shown on the login page,
           we do not need any additional right padding as there isn't a Boost Union footer button nor a footer button
           on the login page on this screen size. */
        &:not(.theme_boost-union-accessibilitybutton) #footnote {
            padding-right: calc(15px + 1rem);
        }
    }
}

/* On all screen sizes. */
/* If there isn't a loginbackground image configured. */
body.pagelayout-login:not(.loginbackgroundimage) #footnote {
    /* Remove the top border as there is the gradient in #page. */
    border-top: none;
}

/*---------------------------------------
 * Settings: Footer.
 --------------------------------------*/

/* If the admin decided to show the footer button on all screen sizes. */
body.theme_boost-union-footerbuttonall.jsenabled {
    /* Show the footer button on all screen sizes.
       This uses !important to make really sure that the element is shown regardless of other CSS rules. */
    .btn-footer-popover {
        display: block !important;  /* stylelint-disable-line declaration-no-important */
    }
    /* Do not do anything to the communications button as it is placed fine on larger screens anyway and
       not shown on mobile anyway. */
}

/* If the admin decided to show the footer button on desktop + tablet only. */
body.theme_boost-union-footerbuttondesktop.jsenabled {
    /* Do not do anything with the footer button as Boost core is taking care of everything already . */
    /* And do not do anything to the communications button as Boost core is taking care of this as well. */
}

/* If the admin decided to show the footer button on mobile only. */
body.theme_boost-union-footerbuttonmobile.jsenabled {
    /* On larger screens. */
    @include media-breakpoint-up(sm) {
        /* Hide the footer button.
           This uses !important to make really sure that the element is hidden regardless of other CSS rules. */
        .btn-footer-popover,
        #page-footer .footer-content-popover {
            display: none !important;  /* stylelint-disable-line declaration-no-important */
        }
        /* Move the communication button more downwards as there would be a gap otherwise. */
        .btn-footer-communication {
            bottom: 2rem;
        }
        /* If the sticky footer is shown by Moodle core, move the communication button more upwards. */
        &.hasstickyfooter {
            .btn-footer-communication {
                bottom: 7rem;
            }
        }
    }
    /* On smaller screens. */
    @include media-breakpoint-down(xs) {
        /* Show the footer button.
           This uses !important to make really sure that the element is shown regardless of other CSS rules. */
        .btn-footer-popover {
            display: block !important;  /* stylelint-disable-line declaration-no-important */
        }
        /* And do not do anything to the communications button as Boost core is not shown on mobile anyway. */
    }
}

/* If the admin decided not to show the footer button at all. */
body.theme_boost-union-footerbuttonnone.jsenabled {
    /* Do not do anything with the footer button as we covered this case in footer.mustache already. */

    /* However, move the communication button more downwards as there would be a gap otherwise. */
    .btn-footer-communication {
        bottom: 2rem;
    }
    /* If the sticky footer is shown by Moodle core, move the communication button more upwards. */
    &.hasstickyfooter {
        .btn-footer-communication {
            bottom: 7rem;
        }
    }
}

/* Make the reset-user-tours link a real footer section - as soon as the placeholder div is filled by JS.
   This is necessary due to restructurings of the footer popover content. */
.tool_usertours-resettourcontainer .usertour {
    @extend .footer-section;
    @extend .p-3;
    @extend .border-bottom;
}

/* Remove the bottom line from the last footer section. */
#page-footer .popover-body .footer-section:last-child {
    border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
}


/*=======================================
 * Settings: Content -> Info banner.
 ======================================*/

/* Adjust the margins of the info banners to align with the header and main content on larger screens. */
@include media-breakpoint-up(md) {
    .themeboostunioninfobanner {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* Remove margin after last paragraph for a nicer look. */
.themeboostunioninfobanner p:last-child {
    margin-bottom: 0;
}


/*=======================================
 * Settings: Content -> Advertisement tiles.
 ======================================*/

/* Style the advertisement tile cards. */
#themeboostunionadvtiles [class*="col-"] .card {
    background-size: cover;
    /* d-flex align-items-stretch align-self-stretch classes in mustache template require to set width to inherit
       (Otherwise width is flexible dependent on content). */
    width: inherit;
}

/* Classes for the content style of advertisement tiles. */
#themeboostunionadvtiles {
    .tile-dark {
        color: black;
    }
    .tile-light {
        color: white;
    }
    .tile-darkshadow {
        color: black;
        text-shadow: 0 0 5px white;
    }
    .tile-lightshadow {
        color: white;
        text-shadow: 0 0 5px black;
    }
}

/* Improve the advertisement tile card if a background image is used. */
.themeboostunionadvtilebg {
    /* Remove the 1px border which is added around the card by default and which looks strange
       with a background image. */
    border: none;

    /* Add a more solid background color so that the title remains readable. */
    .card-header {
        background-color: rgba(255, 255, 255, .8);
    }
    /* Remove the border-top from the footer. */
    .card-footer {
        border-top: none;
    }
}


/*=======================================
 * Settings: Content -> Slider.
 ======================================*/

/* Style the slider. */
#themeboostunionslider {
    /* Remove the link color and styling for links in the slider as, otherwise, the linked caption and content
       would be colored and styled which does not make much sense here. */
    a {
        color: inherit;
    }
    a:hover {
        text-decoration: inherit;
    }

    /* Remove the focus border which would appear around slider controls which have been clicked.
       These do not look nice within the slider. */
    a:focus {
        box-shadow: none;
    }

    /* Remove the font color from the caption to allow styling based on the slider settings. */
    .carousel-caption {
        color: inherit;
    }

    /* Add an unobtrusive shadow to the carousel controls to make them visible on all kinds of backgrounds. */
    .carousel-control-prev,
    .carousel-control-next {
        filter: drop-shadow(0 0 2px rgb(0, 0, 0));
    }
    .carousel-indicators {
        filter: drop-shadow(0 0 1px rgb(0, 0, 0));
    }
}

/* Classes for the content style of slides. */
#themeboostunionslider {
    .slide-dark {
        color: black;
    }
    .slide-light {
        color: white;
    }
    .slide-darkshadow {
        color: black;
        text-shadow: 0 0 5px white;
    }
    .slide-lightshadow {
        color: white;
        text-shadow: 0 0 5px black;
    }
}


/*=======================================
 * Settings: Content -> Advertisement tiles & Slider (Common settings for both features).
 ======================================*/

/* Remove horizontal paddings on the tile / slider container on smaller screens to align it with the main frontpage content. */
@include media-breakpoint-down(sm) {
    #themeboostunionadvtiles,
    #themeboostunionslider-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}


/*=======================================
 * Settings: Functionality -> Courses.
 ======================================*/

/*---------------------------------------
 * Setting: Course related hints.
 --------------------------------------*/

.course-hint-hidden,
.course-hint-guestaccess,
.course-hint-guestenrol,
.course-hint-selfenrol,
.course-hint-switchedrole {
    margin-left: 15px;
    margin-right: 15px;
}


/*=======================================
 * Settings: Smart menus.
 ======================================*/

/*---------------------------------------
 * Header menu
 --------------------------------------*/

/* Boost union header menu style when the smart menu is enabled */
.theme-boost-union-smartmenu {
    .navbar {
        &.fixed-top {
            /* Added height and background color for the top header,
            z-index is added to show the top header dropdown menu above the header block */
            &.boost-union-menubar { /* boost-union-menubar class is added for the top header */
                height: calc(#{$bu-smartmenu-menubar-height} + 2px);
                border-bottom: 0;
                background-color: #f8f9fa;
                z-index: 1031;
                /* The position of the message drawer has been adjusted slightly top to accommodate the top header. */
                ~ [data-region=right-hand-drawer].drawer {
                    top: calc(#{$navbar-height} + #{$bu-smartmenu-menubar-height});
                }
                /* The position of the side drawer has been adjusted slightly below to accommodate the top header. */
                ~ .drawer.drawer-left {
                    top: calc(#{$navbar-height} + #{$bu-smartmenu-menubar-height} + 1px);
                }
                ~ .drawer.drawer-right {
                    top: calc(#{$navbar-height} + #{$bu-smartmenu-menubar-height} + 1px);
                }
                .moremenu {
                    height: $bu-smartmenu-menubar-height;

                    .more-nav {
                        li {
                            /* The card dropdown menu link position is changed to static to show the card dropdown menu
                               in full width */
                            &.card-dropdown {
                                position: static;
                            }
                            &.nav-item {
                                &:first-child,
                                &:nth-child(2) {
                                    /* The position of the dropdown menu should not extend beyond the visible area of
                                       the screen */
                                    .dropdown-menu {
                                        left: 0;
                                        right: auto;
                                    }
                                }
                            }
                            a {
                                &:not(.active) {
                                    border-bottom: 0;
                                }
                                /* Background color added in the menubar menu link on hover */
                                &.nav-link:hover {
                                    background-color: #f4f4f4;
                                }
                            }
                            /* The positions of the dropdown menu added */
                            .dropdown-menu {
                                float: none;
                                left: auto;
                                right: 0;
                                li {
                                    width: 100%;
                                }
                            }
                            /* Removed the padding in the card dropdown overlay*/
                            &.dropdown.card-dropdown {
                                .card-block-wrapper .card-block a {
                                    padding: 0;
                                }
                            }
                        }
                    }
                }
                + .navbar {
                    /* Margin top has been added to the Header block to ensure that it does not conflict with the top
                       header. */
                    &.fixed-top {
                        margin-top: $bu-smartmenu-menubar-height;
                    }
                    /* The position of the card dropdown block has been set to static,
                    so it will always appear under the card menu link. */
                    .moremenu .dropdown.card-dropdown {
                        position: static;
                        .dropdown-menu {
                            overflow-y: auto;
                        }
                        &:not(.card-overflow-no-wrap) .dropdown-menu {
                            max-height: calc(100vh - 300px);
                        }
                    }
                }
            }
            /* The width is added to show the navigation drawer in full page and
                position of the navigation drawer has been adjusted to open the drawer from below. */
            ~ .drawer-bottom.drawer {
                width: 100%;
                top: 0;
                padding-bottom: calc(#{$bu-smartmenu-bottombar-height} + 1px);
                visibility: hidden;
                /* Visible on show when the drawer toggle "More" link is clicked */
                &.show {
                    visibility: visible;
                }
            }
            /* The position of the main page has been adjusted slightly below to accommodate the top header. */
            ~ #page.drawers {
                margin-top: calc(#{$navbar-height} + #{$bu-smartmenu-menubar-height});
            }
            .moremenu .more-nav li.card-dropdown {
                /* The position of the card dropdown block has been set to static,
                so it will always appear under the card menu link. */
                position: static;
                /* Card appearance - Card form style */
                /* Card form style - Square */
                &.card-form-square {
                    /* Minimun and maximum width is added when the Card size "Tiny" with card form "Square" */
                    &.card-size-tiny .dropdown-menu .card-block {
                        min-width: 90px;
                        max-width: 90px;
                    }
                    /* Minimun and maximum width is added when the Card size "Small" with card form "Square" */
                    &.card-size-small .dropdown-menu .card-block {
                        min-width: 140px;
                        max-width: 140px;
                    }
                    /* Minimun and maximum width is added when the Card size "Medium" with card form "Square" */
                    &.card-size-medium .dropdown-menu .card-block {
                        min-width: 190px;
                        max-width: 190px;
                    }
                    /* Minimun and maximum width is added when the Card size "Large" with card form "Square" */
                    &.card-size-large .dropdown-menu .card-block {
                        min-width: 240px;
                        max-width: 240px;
                    }
                }
                /* Card form style - Portrait */
                &.card-form-portrait {
                    /* Minimun and maximum width is added when the Card size "Tiny" with card form "portrait" */
                    &.card-size-tiny .dropdown-menu .card-block {
                        min-width: 60px;
                        max-width: 60px;
                    }
                    /* Minimun and maximum width is added when the Card size "Small" with card form "portrait" */
                    &.card-size-small .dropdown-menu .card-block {
                        min-width: 94px;
                        max-width: 94px;
                    }
                    /* Minimun and maximum width is added when the Card size "Medium" with card form "portrait" */
                    &.card-size-medium .dropdown-menu .card-block {
                        min-width: 127px;
                        max-width: 127px;
                    }
                    /* Minimun and maximum width is added when the Card size "Large" with card form "portrait" */
                    &.card-size-large .dropdown-menu .card-block {
                        min-width: 160px;
                        max-width: 160px;
                    }
                }
                /* Card form style - Landscape */
                &.card-form-landscape {
                    /* Minimun and maximum width is added when the Card size "Tiny" with card form "Landscape" */
                    &.card-size-tiny .dropdown-menu .card-block {
                        min-width: 135px;
                        max-width: 135px;
                    }
                    /* Minimun and maximum width is added when the Card size "Small" with card form "Landscape" */
                    &.card-size-small .dropdown-menu .card-block {
                        min-width: 210px;
                        max-width: 210px;
                    }
                    /* Minimun and maximum width is added when the Card size "Medium" with card form "Landscape" */
                    &.card-size-medium .dropdown-menu .card-block {
                        min-width: 285px;
                        max-width: 285px;
                    }
                    /* Minimun and maximum width is added when the Card size "Large" with card form "Landscape" */
                    &.card-size-large .dropdown-menu .card-block {
                        min-width: 360px;
                        max-width: 360px;
                    }
                }
                /* Card form style - Fullwidth */
                /* Full Width is added when the Card size "Tiny, Small, Medium and Large" with card form "Full width" */
                &.card-form-fullwidth {
                    &.card-size-tiny,
                    &.card-size-small,
                    &.card-size-medium,
                    &.card-size-large {
                        .dropdown-menu .card-block {
                            min-width: 100%;
                            width: 100%;
                        }
                    }
                    /* Card size "large" has margin right none because the size of the card is full width of the
                       screen */
                    &.card-overflow-wrap.card-size-large {
                        .dropdown-menu .card-block {
                            margin-right: 0;
                        }
                    }
                }
            }
            /* The icon tag aligned top at the usermenu link */
            .usermenu .dropdown-menu {
                .submenu {
                    /* Remove the padding on the User submenu header */
                    .header {
                        padding: 0;
                        /* Centered align the User submenu header, added padding and removed the underline for the link */
                        .carousel-navigation-link {
                            text-decoration: none;
                            padding: .1rem .75rem;
                            display: flex;
                            align-items: center;
                        }
                    }
                    .items a.dropdown-item {
                        align-items: baseline;
                    }
                }
                /* Usermenu dropdown item position relative for it's submenu */
                .dropdown-item {
                    position: relative;
                    /* Usermenu dropdown submenu arrow alignment */
                    &.carousel-navigation-link:after {
                        top: 8px;
                    }
                }
            }
            /* Dropdown more menu back button arrow margin */
            .boost-union-moremenu.dropdown-menu .carousel-navigation-link > * {
                pointer-events: none;
                img {
                    margin: 0;
                }
            }
        }
        .moremenu {
            .more-nav li.nav-item {
                /* Menu link icon aligned center */
                a {
                    display: flex;
                    align-items: center;
                    &.dimmed {
                        color: $text-muted;
                        &.dropdown-item:hover {
                            color: $white;
                            opacity: .7;
                        }
                    }
                    label {
                        margin-bottom: 0;
                    }
                }
                /* The style below added when the menu link is under the "More" option in the responsive alignment */
                /* The full width style is added for the menu link inside the "More" menu */
                &.dropdownmoremenu .dropdown-menu li.nav-item.dropdown {
                    width: 100%;
                    &.card-dropdown .dropdown-toggle:after {
                        content: '\f105';
                    }
                    .dropdown-toggle {
                        &:after {
                            font-size: 10px;
                            margin-top: 7px;
                            position: absolute;
                            right: 0.75rem;
                        }
                        /* Header dropdown toggle menu link color added */
                        &:hover,
                        &:focus,
                        &:active {
                            color: $white;
                        }
                    }
                    /* Header dropdown menu border added and position added not to conflict
                        with the screen in the responsive alignment */
                    .dropdown-menu {
                        max-height: none;
                        border-radius: 0;
                        overflow: visible;
                    }
                    &.card-dropdown {
                        /* Minimum width, maximum width and height, aligned center, and position
                        fixed of card dropdown menu below the nav header */
                        .dropdown-menu {
                            min-width: 220px;
                            max-width: 90%;
                            max-height: calc(100vh - 120px);
                            text-align: center;
                            padding: 5px;
                            overflow: auto;
                            position: fixed;
                            right: 0;
                            top: 100px;
                            left: 0;
                        }
                        &.card-form-fullwidth {
                            .dropdown-menu .card-block-wrapper {
                                padding: 0 15px;
                            }
                        }
                    }
                }
            }
            .dropdown {
                /* Minimum width , max-height added to display the dropdown menu items, Top margin removed
                and overlay y axis is auto to show the dropdowm menu with the scrollbar */
                .dropdown-menu {
                    min-width: 220px;
                    max-width: 260px;
                    max-height: calc(100vh - 200px);
                    overflow: auto;
                    margin-top: 0;
                    /* The more menu item with inline to display in full width */
                    .nav-item {
                        min-width: 100%;
                    }
                    /* Menu description font size, padding, border-radius and background color added */
                    .menu-description {
                        font-size: 12px;
                        padding: 0.25rem 1.5rem;
                        border-radius: 5px;
                        background-color: #eee;
                        /* Removed the margin bottom for the content to avoid unwanted space below the description */
                        p {
                            margin-bottom: 0;
                        }
                    }
                    /* Text aligned center and margin bottom added for the "help icon" in menu help icon */
                    .menu-helpicon {
                        text-align: center;
                        margin-bottom: 10px;
                        /* Margin removed in the menu description help icon in the menu */
                        i {
                            margin: 0;
                            /* color white is added in the menu description help icon in the menu */
                            &:before {
                                color: var(--info);
                            }
                        }
                    }
                    /* The font size and opacity reduced when the Menu link is selected as "Heading" option in the
                       settings */
                    .dropdown-item {
                        /* Dropdown menu link alignment at top, white-space is used to arrange the large text in the
                        next line*/
                        align-items: baseline;
                        white-space: normal;
                        /* The icon width, height and font size is changed to normal size when the
                        large size icon (class="iconsize-big") is used in the "i" tag */
                        i.icon {
                            width: auto;
                            height: auto;
                            font-size: 16px;
                        }
                        /* The "Tick" icon removed when the menu link is clicked */
                        &:before {
                            display: none;
                        }
                        &.menu-item-heading {
                            font-size: 14px;
                            opacity: .6;
                            /* Menu link icon font size when the menu link as "Heading" and "icon" option selected in
                               the settings */
                            i.icon {
                                font-size: 14px;
                            }
                        }
                    }
                    /* The below styles are header dropdown submenu  */
                    .dropdown-submenu {
                        /* Position relative submenu link to control the arrow icon when it has submenus */
                        > a.dropdown-item {
                            position: relative;
                            /* Header dropdown submenu */
                            &:before {
                                content: '';
                            }
                            /* The arrow icon and its postion at the right side is added when the header menu which has
                               dropdown */
                            &:after {
                                content: '\f105';
                                font-family: '#{$fa-style-family}';
                                font-weight: 900;
                                line-height: 10px;
                                position: absolute;
                                top: 40%;
                                right: 10px;
                            }
                        }
                        /* The submenu dropdown is hidden before the menu is clicked */
                        ul {
                            display: none;
                        }
                        /* The position relative is added for the dropdown menu */
                        &.show {
                            position: relative;
                            /* The dropdown submenu style is added for the header menu */
                            /* Height added to control the menu with scrollbard, border, border radius,
                               background color, padding and its position styles are added and display block
                               is added to show the submenu when the dropdown menu is clicked */
                            ul {
                                max-height: 250px;
                                list-style: none;
                                border: 1px solid $border-color;
                                border-radius: 0.5rem;
                                background-color: #fff;
                                padding: .5rem 0;
                                margin-left: 1px;
                                overflow-y: auto;
                                display: block;
                                position: absolute;
                                top: 0;
                                left: 100%;
                                /* The full width of the dropdown submenu link */
                                li {
                                    width: 100%;
                                    /* The height and padding is added for the header dropdown submenu links */
                                    a.nav-link {
                                        width: 100%;
                                        height: auto;
                                        padding: 0.1rem 1.5rem;
                                    }
                                }
                            }
                        }
                    }
                }
                /* The top padding is removed in the dropdown menu when menu description is added in the top */
                &.dropdown-description-above .dropdown-menu {
                    padding-top: 0;
                    /* When menu description is added in the top the menu description bottom border radius is removed */
                    .menu-description {
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
                /* The bottom padding is removed in the dropdown menu when menu description is added in the below */
                &.dropdown-description-below .dropdown-menu {
                    padding-bottom: 0;
                    /* When menu description is added in the bottom the menu description top border radius is removed */
                    .menu-description {
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                    }
                }
                /* Card layout - The below styles are header dropdown Card style menus */
                &.card-dropdown {
                    /* The header card dropdown menu width, padding, removed border radius and top margin, added
                    white background color and it's position styles, max-width as none to show the card dropdown to full width */
                    .dropdown-menu {
                        max-width: none;
                        width: 100%;
                        border-radius: 0;
                        background-color: #f0efef;
                        padding: 30px;
                        margin-top: 0;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        /* The header card dropdown menu items styles */
                        /* Aligned the card dropdown to center */
                        .card-block-wrapper {
                            text-align: center;
                            /* Margin added to the card block right & bottom and vertical align added to
                            align the card block center to each other */
                            .card-block {
                                margin-right: 15px;
                                margin-bottom: 15px;
                                display: inline-block;
                                vertical-align: top;
                                flex-direction: column;
                                /* The image parent div added for the card dropdown items */
                                .img-block {
                                    width: 100%;
                                    height: 200px;
                                    /* The image size added for the card dropdown items */
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                    > a {
                                        padding: 0;
                                        display: initial;
                                    }
                                }
                                /* The card dropdown items content block width, text aligned left padding, background color
                                and aligned center styles added */
                                .content-block {
                                    width: 100%;
                                    text-align: left;
                                    padding: 10px;
                                    background-color: rgba(0, 0, 0, 0.5);
                                    display: flex;
                                    align-items: center;
                                    /* The margin added to the heading in the content block for the card dropdown items */
                                    h5 {
                                        width: 100%;
                                        margin-bottom: 0;
                                        overflow: hidden;
                                        /* The font style, color, paddign added to the link of the heading
                                        in the content block for the card dropdown items. Background none is added when the
                                        background is not given in the settings for the menu items */
                                        a {
                                            font-size: 14px;
                                            color: $white;
                                            font-weight: bold;
                                            padding: 0;
                                            background: none;
                                            /* Background removed for the link of the heading on hover
                                            in the content block for the card dropdown items */
                                            &:hover,
                                            &:focus,
                                            &:active {
                                                background: none;
                                            }
                                            /* The icon color is intended to correspond with the text color specified in the menu
                                            item settings. However, the icon color in the card dropdown menu may be overridden by
                                            the color defined in the theme style for the navigation, particularly when using the
                                            "dark" and "bg primary" options in the header. To ensure the desired icon color is
                                            maintained, the icon color is set to "inherit" with the use of "!important".
                                            This ensures that the color specified in the text setting will be applied to the icon.
                                            */
                                            i {
                                                color: inherit !important; /* stylelint-disable-line declaration-no-important */
                                            }
                                        }
                                    }
                                    /* The line height added and "Go" button block aligned right side
                                    in the content block for the card dropdown items */
                                    .btn-block {
                                        width: auto;
                                        line-height: 10px;
                                        text-align: right;
                                        margin-left: 5px;
                                        a {
                                            /* The color and padding added for the "Go" button in
                                            the content block of the card dropdown items. Background none is added when the
                                            background is not given in the settings for the menu items */
                                            color: #fff;
                                            padding: 0;
                                            background: none;
                                            &:hover,
                                            &:focus,
                                            &:active {
                                                /* Background removed for the link of the button on
                                                hover in the content block for the card dropdown items */
                                                background: none;
                                            }
                                        }
                                    }
                                }
                                /* The below style is added when the Menu link as "Heading" in "card layout" Menu
                                settings */
                                &.menu-item-heading {
                                    /* The Card menu as "Heading" option content block style */
                                    .content-block {
                                        /* The Card menu content heading menu link font-size and opacity added */
                                        h5 a {
                                            font-size: 16px;
                                            opacity: .6;
                                        }
                                        /* The Card Menu as "Heading" option content block "Go" button link is hidden */
                                        .btn-block {
                                            display: none;
                                        }
                                    }
                                }
                                /* The "Text position" of the menu link is selected as "Top overlay"
                                or "Below overlay" in the "Card Appearance" settings */
                                &.card-text-overlay-top,
                                &.card-text-overlay-bottom {
                                    /* The position relative to the card dropdown  */
                                    position: relative;
                                    /* The border, background, box-shadow, outline are removed for the card overlay link and
                                    the width, height, position is added to redirect to course for the card top overlay &
                                    card bottom overlay */
                                    > a {
                                        width: 100%;
                                        height: 100%;
                                        border: 0;
                                        background: none;
                                        box-shadow: none;
                                        outline: none;
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        z-index: 1;
                                    }
                                    /* The width and position of the menu link at the top of the card block in the card
                                    dropdown menu */
                                    .content-block {
                                        width: 100%;
                                        height: 100%;
                                        align-items: flex-start;
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                    }
                                }
                                /* The "Text position" of the menu link bottom
                                of the card block in the "Below overlay" option */
                                &.card-text-overlay-bottom {
                                    .content-block {
                                        align-items: flex-end;
                                    }
                                }
                            }
                        }
                    }
                    /* Menu description aligned center and margin top & bottom added in the Card drowpdown menu */
                    &.dropdown-description-above,
                    &.dropdown-description-below {
                        .dropdown-menu .menu-description {
                            text-align: center;
                            margin: 10px 0;
                        }
                    }
                    /* Card appearance - Card size */
                    /* Height of the Card size - Tiny */
                    &.card-size-tiny .dropdown-menu .card-block .img-block {
                        height: 50px;
                    }
                    /* Height of the Card size - Small */
                    &.card-size-small .dropdown-menu .card-block .img-block {
                        height: 100px;
                    }
                    /* Height of the Card size - Medium */
                    &.card-size-medium .dropdown-menu .card-block .img-block {
                        height: 150px;
                    }
                    /* Height of the Card size - large */
                    &.card-size-large .dropdown-menu .card-block .img-block {
                        height: 200px;
                    }
                    /* Card Overflow behaviour - No Wrap */
                    /* Displayed the card menu as flex, nowrap and horizontal scroll bar to show the dropdown menu in a
                       single row */
                    &.card-overflow-no-wrap.show .dropdown-menu {
                        overflow-x: auto;
                        display: flex;
                        flex-wrap: nowrap;
                        flex-direction: column;
                        /* Scrollbar */
                        /* Width and height of the scrollbar */
                        ::-webkit-scrollbar {
                            width: 12px;
                            height: 10px;
                        }
                        /* Background color for the scrollbar on hover */
                        ::-webkit-scrollbar-thumb:hover {
                            background-color: #495057;
                        }
                        /* Border, border radius and background color for the bar in the scrollbar */
                        ::-webkit-scrollbar-thumb {
                            background-color: #6a737b;
                            border-radius: 20px;
                            border: 2px solid #f8f9fa;
                        }
                        /* Background for the scrollbar */
                        ::-webkit-scrollbar-track {
                            background: #f8f9fa;
                        }
                        /* End of Scrollbar */
                        .card-block-wrapper {
                            display: flex;
                            overflow-y: auto;
                        }
                    }
                    /* Card size - "Large" with the "Text positions" */
                    /* Increased the height of the card block in the "Text Position" when the card size Large */
                    &.card-size-large .dropdown-menu .card-block {
                        &.card-text-overlay-top,
                        &.card-text-overlay-bottom {
                            > a,
                            .img-block,
                            .content-block {
                                height: calc(200px + 39px);
                            }
                        }
                    }
                    /* Card size - "Medium" with the "Text positions" */
                    /* Increased the height of the card block in the "Text Position" when the card size Medium */
                    &.card-size-medium .dropdown-menu .card-block {
                        &.card-text-overlay-top,
                        &.card-text-overlay-bottom {
                            > a,
                            .img-block,
                            .content-block {
                                height: calc(150px + 39px);
                            }
                        }
                    }
                    /* Card size - "Small" with the "Text positions" */
                    /* Increased the height of the card block in the "Text Position" when the card size Small */
                    &.card-size-small .dropdown-menu .card-block {
                        &.card-text-overlay-top,
                        &.card-text-overlay-bottom {
                            > a,
                            .img-block,
                            .content-block {
                                height: calc(100px + 39px);
                            }
                        }
                    }
                    /* Card size - "Tiny" with the "Text positions" */
                    /* Increased the height of the card block in the "Text Position" when the card size Tiny */
                    &.card-size-tiny .dropdown-menu .card-block {
                        &.card-text-overlay-top,
                        &.card-text-overlay-bottom {
                            > a,
                            .img-block,
                            .content-block {
                                height: calc(50px + 39px);
                            }
                        }
                    }
                }
            }
        }
        .boost-union-moremenu.dropdown-menu {
            /* Minimum width for the dropdown submenu */
            .carousel .carousel-inner .carousel-item.submenu {
                min-width: 235px;
            }
            /* Added the arrow icon styles for the dropdown menus */
            .dropdown-item.carousel-navigation-link:after {
                content: '\f0da';
                font-family: '#{$fa-style-family}';
                font-weight: 900;
                font-size: 1rem;
                position: absolute;
                right: 0.7rem;
            }
            /* Added the arrow icon styles for the dropdown sub menu header */
            .submenu .header {
                font-size: .975rem;
                display: flex;
                align-items: center;
            }
        }
        /* Removed the margin for the carousel back button arrow */
        &.fixed-bottom .boost-union-moremenu.dropdown-menu .carousel-navigation-link > * {
            pointer-events: none;
            img {
                margin: 0;
            }
        }
    }
    /* Align the drawer content list group item in center*/
    .drawer-primary .drawercontent .list-group .list-group-item {
        align-items: center;
        /* The icon width, height and font size is changed to normal size when
        the large size icon (class="iconsize-big") is used in the "i" tag in the bottom menu */
        i.icon {
            width: auto;
            height: auto;
            font-size: 16px;
        }
    }
    /* Drop down more menu carousel item */
    .theme-boost-union-smartmenu-carousel {
        /* Drop down more menu carousel item header */
        .moremenu-carousel-item-header {
            display: none;
        }
        .carousel-navigation-link > * {
            pointer-events: none;
            /* Drop down more menu carousel item header image */
            img {
                margin: 0;
            }
        }
        /* Make the carousel navigation link to full width and cursor as pointor */
        .carousel-navigation-link {
            width: 100%;
            cursor: pointer;
            /* Removed the underline on hovering the link */
            &:hover {
                text-decoration: none;
            }
        }
    }
    /* Dropdown carousel more menu*/
    .dropdownmoremenu {
        /* Dropdown carousel more menu position */
        .boost-union-moremenu-carousel {
            position: absolute;
            /* Dropdown carousel dropdown more menu position to static to
            work on the carousel menu */
            .dropdown-menu {
                position: static;
            }
        }
        .theme-boost-union-smartmenu-carousel {
            /* Display dropdown carousel more menu header item*/
            .moremenu-carousel-item-header {
                display: block;
                /* Dropdown carousel more menu header title and arrow style*/
                .header {
                    font-size: .975rem;
                    padding: 0.25rem 0.75rem;
                    display: flex;
                    align-items: center;
                }
            }
            .items {
                /* Added the arrow icon styles for the carousel dropdown menus */
                .dropdown-item.carousel-navigation-link:after {
                    content: '\f0da';
                    font-family: '#{$fa-style-family}';
                    font-weight: 900;
                    font-size: 1rem;
                    position: absolute;
                    right: 0.7rem;
                }
            }
            /* Added the arrow icon styles for the dropdown sub menu header */
            .submenu {
                padding-top: 10px;
                .header {
                    font-size: .975rem;
                    padding: 0 0.75rem;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    /* Hide the ul dropdown menu list */
    .theme-boost-union-moremenu-carousel .dropdown-menu.hide-on-show {
        display: none;
    }
    /* Changed the transition time to 0.3 seconds when smart menus are enabled */
    .theme-boost-union-smartmenu-carousel,
    #usermenu-carousel {
        .carousel-inner .carousel-item {
            transition: transform 0.3s ease-in-out;
        }
    }
}

@include media-breakpoint-up(lg) {
    .theme-boost-union-smartmenu .navbar.fixed-top.boost-union-menubar.d-lg-none {
        /* Margin top has been added to the Header block to ensure that it does not conflict with the top header. */
        + .navbar.fixed-top {
            margin-top: 0;
        }
        ~ #page.drawers {
            /* The position has been adjusted to prevent the message drawer from being hidden behind the primary header. */
            margin-top: $bu-smartmenu-menubar-height;
        }
    }
}

@include media-breakpoint-only(md) {
    .theme-boost-union-smartmenu .navbar.fixed-top.boost-union-menubar.d-md-none {
        /* Margin top has been added to the Header block to ensure that it does not conflict with the top header. */
        + .navbar.fixed-top {
            margin-top: 0;
        }
        ~ #page.drawers {
            /* The position has been adjusted to prevent the message drawer from being hidden behind the primary header. */
            margin-top: $bu-smartmenu-menubar-height;
        }
    }
}

/* The nav drawer position to the top in the responsive alignment */
@include media-breakpoint-down(md) {
    .navbar.fixed-top.boost-union-menubar ~ .drawer {
        /* The position has been adjusted to prevent the message drawer from being hidden behind the primary header. */
        top: calc(#{$navbar-height} + #{$bu-smartmenu-menubar-height});
        &.drawer-right {
            top: 0;
        }
    }
}

/* The nav drawer position to the top in the responsive alignment */
@include media-breakpoint-up(md) {
    .navbar.fixed-top.boost-union-menubar ~ #page.drawers .drawer-toggles .drawer-toggler {
        top: calc(#{$navbar-height} + #{$bu-smartmenu-menubar-height} + 10px);
    }
}

@include media-breakpoint-down(sm) {
    .navbar.fixed-top {
        /* The header z-index is increased to show at top when the footer bottom menu is added */
        &.smartmenu-bottom-navigation {
            z-index: 1050;
        }
        /* The Header menubar z-index is increased to show at top in responsive */
        &.boost-union-menubar {
            &.smartmenu-bottom-navigation {
                z-index: 1051;
            }
            ~ .drawer.drawer-right {
                z-index: 1052;
            }
            /* When the menu in the footer bottom is clicked, its navigation drawer
            position appears below the header. */
            ~ .drawer-bottom.drawer {
                top: calc(#{$bu-smartmenu-bottombar-height} + 1px);
            }
        }
        /* When the menu in the footer bottom is clicked, its navigation drawer
            position appears below the header when the header menubar is disabled. */
        ~ .drawer-bottom.drawer {
            top: 61px;
            /* The nav drawer header(close button) is hidden is responsive */
            .drawerheader {
                display: none;
            }
            /* The nav drawer content font size, weight and padding is added*/
            .drawercontent .menu-title {
                font-size: 18px;
                font-weight: bold;
                padding: 15px;
            }
        }
        /* When the menu in the left adn right drawer toggle button is clicked, its navigation drawer
            position appears below the header when the header menubar is disabled. */
        ~ #theme_boost-drawers-primary,
        ~ #theme_boost-drawers-courseindex,
        ~ .drawer.drawer-left,
        ~ .drawer.drawer-right {
            max-width: 315px;
            padding-bottom: 0;
            top: 0;
        }
    }
    /* The card menu of the drodown item margin right is removed when the card dropdown menu is inside the "More" menu */
    .theme-boost-union-smartmenu .navbar {
        .moremenu .dropdown.card-dropdown .dropdown-menu .card-block-wrapper .card-block {
            margin-right: 0;
        }
        &.fixed-top.boost-union-menubar.d-none {
            /* Margin top has been added to the Header block to ensure that it does not conflict with the top header. */
            + .navbar.fixed-top {
                margin-top: 0;
            }
            ~ #page.drawers {
                /* The position has been adjusted to prevent the message drawer from being hidden behind the primary header. */
                margin-top: $bu-smartmenu-menubar-height;
            }
        }
    }
}


/*---------------------------------------
 * Footer menu
 --------------------------------------*/

/* Boost union footer bottom menu style when the smart menu is enabled */
.theme-boost-union-smartmenu #page-wrapper #page {
    #page-footer {
        .navbar {
            /* Footer bottom menu */
            /* Padding space removed around the bottom menu block, box-shadow and z-index
            to view the bottom menu at the top added*/
            &.boost-union-bottom-menu {
                padding: 0;
                box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
                z-index: 1050;

                .bottom-navigation {
                    .moremenu {
                        height: $bu-smartmenu-bottombar-height;
                    }

                    .more-nav {
                        /* Spread the menu items over the whole screen. */
                        justify-content: space-around;

                        > li {
                            /* The footer bottom dropdown menu icon and text are displayed in separate rows. */
                            &.dropdown > a {
                                flex-direction: column;
                                /* The footer bottom dropdown menu icon margin is removed. */
                                i {
                                    margin: 0 0 3px;
                                }
                            }
                            /* The footer bottom menu item border bottom is removed when it's not active. */
                            > a {
                                &.dropdown-toggle {
                                    padding-right: 25px;
                                    /* The footer bottom icon changes to an upward-facing angle
                                    when the bottom dropdown menu is visible outside the More menu. */
                                    &:not(.active):after {
                                        content: '\f106';
                                    }
                                }
                                &:not(.active) {
                                    border-bottom: 0;
                                    flex-wrap: wrap;
                                    flex-direction: column;
                                    justify-content: center;
                                    position: relative;
                                    i {
                                        margin: 0;
                                    }
                                    &:after {
                                        margin-left: 5px;
                                        position: absolute;
                                        right: 5px;
                                    }
                                }
                            }
                        }
                        li {
                            &:first-child,
                            &:nth-child(2),
                            &:nth-child(3) {
                                &.dropdown .dropdown-menu .dropdown-submenu ul {
                                    left: 100%;
                                    right: auto;
                                }
                            }
                            &.dropdown {
                                /* Footer bottom dropdown menu width, height and removed margin, position to stay the
                                dropup menu */
                                .dropdown-menu {
                                    width: auto;
                                    margin-top: 0;
                                    margin-bottom: 0;
                                    top: auto;
                                    bottom: 100%;
                                    left: auto;
                                    right: 0;
                                    /* The footer bottom dropdown submenu min-width, max-height, overflow and position
                                    to show the menus above the footer */
                                    .dropdown-submenu ul {
                                        min-width: 150px;
                                        max-height: calc(100vh - 300px);
                                        overflow: auto;
                                        left: auto;
                                        right: 100%;
                                        bottom: 0;
                                        top: auto;
                                    }
                                }
                                /* Footer bottom dropdown style when the menus are in the "More" option in the responsive
                                alignment */
                                &.dropdownmoremenu {
                                    display: flex;
                                    align-items: center;
                                    /* The footer bottom dropdown menu icon and text are displayed in separate rows. */
                                    > a.dropdown-toggle {
                                        flex-direction: column;
                                        /* Added ellipsis fontawesome icon, and diplay block to  for the dropdown more
                                        menu when the smart menus are not added in the Footer menu */
                                        &:before {
                                            content: '\f142';
                                            font-family: '#{$fa-style-family}';
                                            font-weight: 900;
                                        }
                                        /* The arrow icon after the More menu link text is hidden when the smart menus are
                                        not added */
                                        &:after {
                                            display: none;
                                        }
                                    }
                                    /* Footer bottom dropdown toggle button height, font-size, color, align center,
                                    removed border radius, padding and added margin left & right style */
                                    button.navbar-toggler {
                                        height: 100%;
                                        font-size: calc(0.90375rem + 0.045vw);
                                        color: $primary;
                                        text-align: center;
                                        border-radius: 0;
                                        padding-top: 0;
                                        padding-bottom: 0;
                                        margin: 0 10px;
                                        /* Footer bottom dropdown toggle button baclground added on hover  */
                                        &:hover {
                                            font-size: calc(0.90375rem + 0.045vw);
                                            background: #f8f9fa;
                                        }
                                        /* More menu toggle button icon margin remove in the mobile view */
                                        i {
                                            margin: -5px auto 5px;
                                            display: block;
                                        }
                                    }
                                }
                            }
                            /* Footer bottom menu card-dropdown */
                            /* The card dropdown Position is changed to static, so the dropdown menu will be in
                            fullscreen */
                            &.card-dropdown {
                                position: static;
                                /* Card appearance - Card form style */
                                /* Card form style - Square */
                                &.card-form-square {
                                    /* Minimun and maximum width is added when the Card size "Tiny" with card form
                                    "Square" */
                                    &.card-size-tiny .dropdown-menu .card-block {
                                        min-width: 90px;
                                        max-width: 90px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Small" with card form
                                    "Square" */
                                    &.card-size-small .dropdown-menu .card-block {
                                        min-width: 140px;
                                        max-width: 140px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Medium" with card form
                                    "Square" */
                                    &.card-size-medium .dropdown-menu .card-block {
                                        min-width: 190px;
                                        max-width: 190px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Large" with card form
                                    "Square" */
                                    &.card-size-large .dropdown-menu .card-block {
                                        min-width: 240px;
                                        max-width: 240px;
                                    }
                                }
                                /* Card form style - Portrait */
                                &.card-form-portrait {
                                    /* Minimun and maximum width is added when the Card size "Tiny" with card form
                                    "portrait" */
                                    &.card-size-tiny .dropdown-menu .card-block {
                                        min-width: 60px;
                                        max-width: 60px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Small" with card form
                                    "portrait" */
                                    &.card-size-small .dropdown-menu .card-block {
                                        min-width: 94px;
                                        max-width: 94px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Medium" with card form
                                    "portrait" */
                                    &.card-size-medium .dropdown-menu .card-block {
                                        min-width: 127px;
                                        max-width: 127px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Large" with card form
                                    "portrait" */
                                    &.card-size-large .dropdown-menu .card-block {
                                        min-width: 160px;
                                        max-width: 160px;
                                    }
                                }
                                /* Card form style - Landscape */
                                &.card-form-landscape {
                                    /* Minimun and maximum width is added when the Card size "Tiny" with card form
                                    "Landscape" */
                                    &.card-size-tiny .dropdown-menu .card-block {
                                        min-width: 135px;
                                        max-width: 135px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Small" with card form
                                    "Landscape" */
                                    &.card-size-small .dropdown-menu .card-block {
                                        min-width: 210px;
                                        max-width: 210px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Medium" with card form
                                    "Landscape" */
                                    &.card-size-medium .dropdown-menu .card-block {
                                        min-width: 285px;
                                        max-width: 285px;
                                    }
                                    /* Minimun and maximum width is added when the Card size "Large" with card form
                                    "Landscape" */
                                    &.card-size-large .dropdown-menu .card-block {
                                        min-width: 360px;
                                        max-width: 360px;
                                    }
                                }
                                /* Card form style - Fullwidth */
                                /* Full Width is added when the Card size "Tiny, Small, Medium and Large"
                                with card form "Full width" */
                                &.card-form-fullwidth {
                                    &.card-size-tiny,
                                    &.card-size-small,
                                    &.card-size-medium,
                                    &.card-size-large {
                                        .dropdown-menu .card-block {
                                            min-width: 100%;
                                            width: 100%;
                                        }
                                    }
                                    /* Card size "large" has margin right none because the size of the card is full
                                    width of the screen */
                                    &.card-overflow-wrap.card-size-large {
                                        .dropdown-menu .card-block {
                                            margin-right: 0;
                                        }
                                    }
                                }
                                /* The card dropdown menu width is 100%, so the dropdown menu will not overflow the
                                screen */
                                .dropdown-menu {
                                    width: 100%;
                                    max-height: calc(100vh - 300px);
                                    overflow-y: auto;
                                }
                            }
                            /* The position of the footer dropdown menu should not extend beyond the visible area of
                            the screen */
                            &:first-child.dropdown .dropdown-menu {
                                left: 0;
                                right: auto;
                            }
                        }
                    }
                }
            }
        }
    }
}
/* End of Footer Menu */

/* On small screens (where the bottom bar could be visible). */
@include media-breakpoint-down(xs) {
    /* If the bottom bar is shown. */
    body.theme-boost-union-bottombar {
        /* The Boost Union footer buttons have to be moved more upwards. */
        #boost-union-footer-buttons {
            bottom: calc(#{$bu-smartmenu-bottombar-height} + 1rem);
        }

        /* If the footer button is shown. */
        &.theme_boost-union-footerbuttonall.jsenabled,
        &.theme_boost-union-footerbuttonmobile.jsenabled {
            /* The footer button has to be moved more upwards. */
            .btn-footer-popover {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 1rem);
            }
            /* And the Boost Union footer buttons have to be moved even more upwards. */
            #boost-union-footer-buttons {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 4rem);
            }
        }
    }
}
/* On screens between xs and sm (where the bottom bar _and_ the communication button could be visible). */
@include media-breakpoint-only(sm) {
    /* If the bottom bar is shown. */
    body.theme-boost-union-bottombar {
        /* The Boost Union footer buttons have to be moved more upwards. */
        #boost-union-footer-buttons {
            bottom: calc(#{$bu-smartmenu-bottombar-height} + 1rem);
        }

        /* If the footer button is shown. */
        &.theme_boost-union-footerbuttonall.jsenabled,
        &.theme_boost-union-footerbuttondesktop.jsenabled {
            /* The footer button has to be moved more upwards. */
            .btn-footer-popover {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 1rem);
            }
            /* And the Boost Union footer buttons have to be moved even more upwards. */
            #boost-union-footer-buttons {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 4rem);
            }
        }
    }

    /* If the bottom bar is shown and if the communications button is shown. */
    body.theme-boost-union-bottombar.theme-boost-union-commincourse {
        /* The communication button has to be moved more upwards. */
        .btn-footer-communication {
            bottom: calc(#{$bu-smartmenu-bottombar-height} + 1rem);
        }
        /* The Boost Union footer buttons have to be moved even more upwards.
           This has to use !important as the selector above would be more specific otherwise. */
        #boost-union-footer-buttons {
            bottom: calc(#{$bu-smartmenu-bottombar-height} + 4rem) !important; /* stylelint-disable-line declaration-no-important */
        }

        /* If the footer button is shown. */
        &.theme_boost-union-footerbuttonall.jsenabled,
        &.theme_boost-union-footerbuttondesktop.jsenabled {
            /* The footer button has to be moved more upwards. */
            .btn-footer-popover {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 1rem);
            }
            /* The communication button has to be moved even more upwards. */
            .btn-footer-communication {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 4rem);
            }
            /* And the Boost Union footer buttons have to be moved even more upwards.
               This has to use !important as the selector above would be more specific otherwise. */
            #boost-union-footer-buttons {
                bottom: calc(#{$bu-smartmenu-bottombar-height} + 7rem) !important; /* stylelint-disable-line declaration-no-important,max-line-length */
            }
        }
    }
}

@include media-breakpoint-down(sm) {
    /* The padding for the footer to visible the footer bottom menu because it is in the position style */
    /* Boost union footer bottom menu style when the smart menu is enabled */
    body.theme-boost-union-bottombar #page-wrapper #page {
        padding-bottom: 75px;
    }
    /* The nav drawer width is extend to full screen in the mobile view when the boost union smart menu is enabled */
    body.theme-boost-union-smartmenu .drawer.show {
        max-width: none;
        width: 100%;
    }
    /* Drawer content list group when the boost union smart menu is enabled */
    body.theme-boost-union-smartmenu .drawer-primary .drawercontent .list-group .list-group-item {
        /* The padding left is added to the nav drawer menu dropdown menu in the mobile view */
        .list-group-item-action {
            padding-left: 32px;
            align-items: baseline;
        }
        /* The margin left is added to the dropdown submenu icon for the nav drawer menu in the mobile view */
        .list-group-item .list-group-item-action i {
            margin-left: 25px;
        }
    }
}


/*=======================================
 * General styling
 ======================================*/

/*---------------------------------------
 * Form element: Color picker
 --------------------------------------*/

/* Display the color picker box and the text field as column. */
.theme_boost_union-form-colour-picker .felement {
    flex-direction: column;
}

/*---------------------------------------
 * Form element: Icon autocomplete
 --------------------------------------*/

/* For now, this is only used on the smart menu items editing page. */
#page-theme-boost_union-smartmenus-edit_items #fitem_id_menuicon {

    /* Raise the min-width to make space for the badges. */
    .form-autocomplete-suggestions {
        min-width: 400px;
    }

    /* Wrap the icon names to avoid that they clash with the icon source badge. */
    .wrapiconwidth {
        hyphens: auto;
        max-width: 200px;
    }
}


/*---------------------------------------
 * Settings: Setting pages with item lists
 --------------------------------------*/

img.theme_boost_union-sortorderspacer {
    width: 1.25em;
}


/*=======================================
 * Goodies for designers
 ======================================*/

/*---------------------------------------
 * Mark external and mailto links (manually)
 --------------------------------------*/

/* Prepare mixin for external links to allow these styles to be use here as goody and in the
   theme_boost_union_get_scss_to_mark_external_links() function as well. */
@mixin externallink($dir) {
    font-family: "#{$fa-style-family}";
    content: "#{$fa-var-external-link}" !important; /* stylelint-disable-line declaration-no-important */
    font-weight: 900;
    @if $dir == 'rtl' {
        padding-right: 0.25rem;
    }
    @else {
        padding-left: 0.25rem;
    }
}

/* Prepare mixin for mailto links to allow these styles to be use here as goody and in the
   theme_boost_union_get_scss_to_mark_mailto_links() function as well. */
@mixin mailtolink($dir) {
    font-family: "#{$fa-style-family}";
    content: "\f003" !important; /* stylelint-disable-line declaration-no-important */
    font-weight: 400;
    @if $dir == 'rtl' {
        padding-left: 0.25rem;
    }
    @else {
        padding-right: 0.25rem;
    }
}

/* Provide the styles within a class which can be added to links. */
body.dir-ltr {
    a.externallink::after {
        @include externallink(ltr);
    }
    a.mailtolink::before {
        @include mailtolink(ltr);
    }
}
body.dir-rtl {
    a.externallink::before {
        @include externallink(rtl);
    }
    a.mailtolink::after {
        @include mailtolink(rtl);
    }
}

/*=======================================
 * Supporting third-party plugins
 ======================================*/

/*---------------------------------------
 * Learning Tools
 --------------------------------------*/

/* On smaller screens. */
@include media-breakpoint-down(sm) {
    /* Move the learning tools floating button up as soon as the bottom menu is shown. */
    body.theme-boost-union-bottombar .learningtools-action-info .floating-button {
        bottom: 4rem;
    }
}


/*---------------------------------------
 * Dash Pro
 --------------------------------------*/

/* Style Dash Pro dashboards. */
.path-local-dash-dashboard #page.drawers {
    /* Use flex if one of the block regions next to the main content is used. */
    .main-inner-outside-nextmaincontent {
        display: flex;
    }

    /* Remove the margin of a Dash block when used in the outside top region in hero width mode. */
    #theme-block-region-outside-top.theme-block-region-outside-herowidth .block_dash,
    #theme-block-region-outside-bottom.theme-block-region-outside-herowidth .block_dash,
    #theme-block-region-footer.theme-block-region-footer-herowidth .block_dash {
        margin: 0;
    }

    /* The page header makes alignment nearly impossible,
       so let's hide it when block regions next to main content are used. */
    .main-inner-outside-nextmaincontent #page-header {
        display: none;
    }

    /* Remove the spacing which was there for the header which we have hidden in the previous rule. */
    .main-inner-outside-nextmaincontent .main-inner {
        margin: 0;
        padding: 0;
    }

    /* 25-50-25 layout. */
    .main-inner-outside-left-right > .main-inner {
        width: 50%;
        max-width: 50%;
    }
    .main-inner-outside-left-right > section {
        width: 25%;
        max-width: 25%;
        margin-top: calc(0.5rem + 1px);
    }

    /* 33-67 or 67-33 layout. */
    .main-inner-outside-right > .main-inner,
    .main-inner-outside-left > .main-inner {
        width: 67%;
        max-width: 67%;
    }
    .main-inner-outside-left > section,
    .main-inner-outside-right > section {
        width: 33%;
        max-width: 33%;
        margin-top: calc(0.5rem + 1px);
    }

    /* On not-so-large screens. */
    @include media-breakpoint-down(lg) { /* This means less than 300px per outside block region. */
        /* Stack content vertically. */
        .main-inner-outside-nextmaincontent {
            display: flex;
            flex-direction: column;
        }

        /* Main content first, outside block regions later. */
        .main-inner-outside-nextmaincontent > .main-inner {
            order: -2;
        }
        .main-inner-outside-nextmaincontent > section,
        .main-inner-outside-nextmaincontent > .main-inner {
            width: 100%;
            max-width: 100%;
        }
    }
}
