body #page {
    // Heading.
    h1:not([class^="display-"]),
    .h1,
    h2:not([class^="display-"]),
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        color: $gray-700;
        border: none;
        line-height: 1.5rem;
        font-family: $hx-font-family;
    }

    h1:not([class^="display-"]),
    .h1,
    .page-header-headings h1.h2 {
        font-family: $h1-font-family;
        line-height: 2rem;
        font-weight: 600;
        color: choose-contrast-color($body-bg-color);
    }

    h2:not([class^="display-"]),
    .h2 {
        font-size: $h2;
        line-height: 2rem;
        font-weight: normal;
    }

    h3,
    .h3 {
        font-size: $h3;
        font-weight: 600;
    }

    h4,
    .h4 {
        font-size: $h4;
        font-weight: 600;
    }

    h5,
    .h5 {
        font-size: $h5;
        line-height: normal;
        font-weight: normal;
    }

    h6,
    .h6 {
        font-size: $h6;
        line-height: normal;
        font-weight: normal;
    }

    // Blockquote.
    blockquote {
        border-left: solid 4px rgba(144, 144, 144, 0.35);
        font-style: italic;
        margin: 0 0 2em 0;
        padding: 0.5em 0 0.5em 2em;
    }
    // Coding.
    pre {
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        code {
            display: block;
            line-height: 1.75em;
            padding: 1em 1.5em;
            overflow-x: auto;
        }
    }
    code {
        background: rgba(144, 144, 144, 0.075);
        border: solid 1px rgba(144, 144, 144, 0.35);
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        margin: 0 0.25em;
        padding: 0.25em 0.65em;
    }

    .dropdown-item.active,
    .dropdown-item:active {
        color: choose-contrast-color($primary);
        background-color: lighten($primary, 20%);
    }

    .dropdown-item.text-danger:hover,
    .dropdown-item:hover,
    .dropdown-item:focus,
    .dropdown-item:focus-within {
        background-color: $primary;
        color: choose-contrast-color($primary) !important;
    }

    // Lists.
    ul.alt {
        list-style: none;
        padding-left: 0;
        li {
            border-top: solid 1px rgba(144, 144, 144, 0.35);
            padding: 0.5em 0;
            &:first-child {
                border-top: 0;
                padding-top: 0;
            }
        }
    }

    // Buttons.
    ul.actions {
        display: flex;
        cursor: default;
        list-style: none;
        margin-left: -1em;
        padding-left: 0;

        li {
            padding: 0 0 0 1em;
            vertical-align: middle;
        }
    }

    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        appearance: none;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: $gray-800;
        border-radius: $softness;
        border: 0;
        color: $white;
        cursor: pointer;
        display: inline-block;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.08rem;
        min-height: 1.9rem;
        padding: 4px 0.9rem;
        text-align: center;
        text-decoration: none;
        text-transform: $text-transform;

        &:hover:not([data-for="sectiontoggler"]) {
            background-color: rgba($gray-800, 0.8);
            color: $white;
            text-decoration: none;
        }

        &.small {
            font-size: 0.8em;
        }

        &.large {
            font-size: 1.35em;
        }

        &.fit {
            width: 100%;
        }
    }

    .btn.btn-icon {
        border-radius: $softness;
    }

    .btn.btn-icon.icon-size-3 {
        width: 44px !important;
    }

    .btn.btn-icon:not([data-for="sectiontoggler"]),
    .btn.btn-link:not(.activity-add, .activity-icon) {
        background-color: transparent;
        border-radius: $softness;
        border: 0;
        color: $black;
        cursor: pointer;
        display: inline-block;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.08rem;
        min-height: 1.9rem;
        margin: 0.5rem;
        padding: 0 0.9rem;
        text-align: center;
        text-decoration: none;
        text-transform: $text-transform;
    }

    ul.actions.fit li {
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;

        > * {
            width: 100%;
        }
    }

    .btn,
    .btn.small {
        line-height: 1.9rem;
        border-radius: $softness;
    }

    .btn {
        padding: 0.2rem 0.75rem;
    }
    .btn-sm {
        padding: 0 0.6rem;
    }
    .btn-lg {
        padding: 0.375rem 0.9rem;
    }

    button {
        &.search-icon {
            line-height: 1.3rem;
        }
        &.text-primary {
            background-color: choose-contrast-color($primary) !important;
            color: $primary !important;
        }
    }

    // Correct the alignment of the help icon with popover.
    a.btn[data-toggle="popover"] {
        line-height: 1.5;
    }

    .btn-link:not(.activity-add, .activity-icon) {
        color: $primary;
        background: none;

        &:hover:not(.activity-add, .activity-icon) {
            background: none;
            color: darken($primary, 30%);
        }
    }

    .simplesearchform {
        input[type="text"] {
            width: 10%;
            color: choose-contrast-color($white);
            background-color: $white;
        }

        button[type="submit"] {
            margin: 0;
            background-color: $primary;
            color: choose-contrast-color($primary);
        }
    }

    input[type="submit"].btn-primary,
    input[type="reset"].btn-primary,
    input[type="button"].btn-primary,
    button.btn-primary,
    .btn.btn-primary,
    .messaging-area-container .send-button-container button {
        background-color: $primary;
        color: choose-contrast-color($primary);

        &:hover {
            background-color: darken($primary, 30%);
            color: choose-contrast-color(darken($primary, 30%));
        }
    }

    input[type="submit"].btn-secondary,
    input[type="reset"].btn-secondary,
    input[type="button"].btn-secondary,
    button.btn-secondary,
    .btn.btn-secondary {
        background-color: $white;
        border: 1px solid rgba(144, 144, 144, 0.35);
        box-shadow: inset 0 0 0 1px;
        color: $black;
        &:hover {
            color: $black;
            background-color: rgba(144, 144, 144, 0.075);
        }
    }

    input[type="submit"].fa:before,
    input[type="reset"].fa:before,
    input[type="button"].fa:before,
    .btn.fa:before {
        margin-right: 0.5em;
    }

    .filemanager-container,
    .filepicker-filelist {
        @extend .border;
    }

    // Form.
    form {
        input[type="text"],
        input[type="password"],
        input[type="email"],
        select,
        textarea {
            appearance: none;
            border-radius: $softness;
            border: solid 1px rgba(144, 144, 144, 0.35);
            color: inherit;
            text-decoration: none;
        }
        textarea {
            width: 100%;
        }

        .btn-link {
            background: none;
            border: none;
            border-radius: unset;
            padding: 0;
            &:hover {
                background: none;
            }
        }
    }

    .mform {
        .btn.btn-icon {
            margin: 0;
            padding-left: 0.12rem;
            text-align: center;
            line-height: 1;
            height: auto;
            &:hover {
                text-decoration: none;
            }
        }
        h3 {
            margin-left: .25rem;
        }
    }

    .form-group {
        margin-bottom: 0.8rem;
    }

    select:not('.dataTable-selector') {
        background-image: url([[pix:theme|select]]);
        background-size: 1rem;
        background-repeat: no-repeat;
        padding-right: 2.5rem;
        background-position: right .75rem center;
    }

    select[multiple],
    .userselector select {
        height: auto;
        background-image: none;
    }

    form .form-inline {
        input[type="text"] {
            display: inline-block;
        }
        .sr-only + select {
            display: inline-block;
            width: 70%;
            background-position: 98%;
            padding-right: 3rem;
        }
    }

    // Style for search with down-arrow.
    .form-autocomplete-suggestions {
        width: 97%;
        padding: 0.5rem 1rem;
    }

    .page-item.active .page-link {
        color: choose-contrast-color($primary);
    }

    #coursesearch {
        #coursesearchbox {
            width: auto;
            display: inline;
        }
    }

    ul.nav-tabs {
        border: none;

        li.nav-item {
            border: none;
            border-bottom: 1px solid $primary;

            a.nav-link {
                border: none;
                text-decoration: none;
                color: fix-color-contrast($primary);

                &.active {
                    color: fix-color-contrast($primary);
                    border: none;
                    border-bottom: 3px solid $primary;
                    font-weight: bolder;
                }

                &:hover {
                    border-bottom: 3px solid $dark;
                    background-color: #f8f9fa;
                }
            }
        }
    }

    ul.nav-pills {
        border: none;

        li.nav-item {
            border: none;

            a.nav-link {
                border: 1px solid $primary;
                border-right: none;
                background-color: $white;
                color: $primary;
                border-radius: $softness;

                &.active {
                    color: $white;
                    background-color: $primary;

                    &:hover {
                        background-color: $primary;
                    }
                }

                &:hover {
                    background-color: rgba($primary, 0.1);
                    text-decoration: none;
                }
            }

            &:first-child a {
                border-top-left-radius: 0.25rem;
                border-bottom-left-radius: 0.25rem;
            }

            &:last-child a {
                border: 1px solid $primary;
                border-top-right-radius: 0.25rem;
                border-bottom-right-radius: 0.25rem;
            }
        }
    }

    .messaging-area-container {
        .tabs .tab .tabimage {
            height: auto;
            line-height: 1.4rem;
        }
        .send-button-container button {
            @extend .btn-primary;
            height: auto;
        }

        .message-text-container textarea {
            padding: .8rem 0.5rem;
        }
    }
}

.modal-backdrop {
    z-index: 1040;
}

.modal.course-summary-modal {

    .modal-content {
        @extend %border-frequency;
        &:before {
            content: none;
        }
    }
    .modal-body {
        max-height: 50vh;
        overflow-y: auto;
    }

    .modal-footer {
        justify-content: flex-start;
    }
}

.modal-dialog {
    margin-top: 5.75rem;

}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 5.75rem auto;
    }
}

body.path-mod-quiz {
    .maxgrade .invisiblefieldset {
        #inputmaxgrade {
            display: inline;
            width: auto;
        }
    }
    #mod_quiz_navblock h3.mod_quiz-section-heading {
        padding: .7em 0 0.4em;
    }
}

@if ($softness != 0) {
    .drawer-toggles .drawer-left-toggle .btn,
    .input-group > .input-group-append > .btn,
    .input-group > .input-group-append > .input-group-text,
    .input-group > .input-group-prepend:not(:first-child) > .btn,
    .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
    .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
    .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    body #page form .input-group input[type="text"],
    .drawer-toggles .drawer-right-toggle .btn {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .secondary-navigation .navigation {
        border-top-left-radius: .5rem !important;
        border-top-right-radius: .5rem !important;
    }
    .dashboard-card .dashboard-card-img {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }
    .card-footer.border-0,
    .card-deck .card {
        border-radius: 0.5rem;
    }
    .badge,
    [class^="badge-"] {
        border-radius: 0.2rem;
    }
}

.badge-pill,
.badge-pill [class^="badge-"] {
    border-radius: 1.5rem;
}

// For "Hidden from Student" badge (Moodle 4.4+).
// For "Parent category" when creating a course category.
.bg-secondary.text-dark {
    color: white !important;
}

// Make popup calendar appear above other elements.
// This is a temporary workaround  for the calendar popup appearing behind the page nav
// until the issue is resolved in Moodle core. See https://tracker.moodle.org/browse/MDL-74422
div#dateselector-calendar-panel {
    z-index: 3100 !important;
}
