/** 4.4 Dropdown Menu */

.field-option-checked-light {
    color: var(--green) !important;
    background: var(--alpha-light-2) !important;
}

.field-option-checked {
    color: var(--green) !important;
    background: var(--grey-light-1) !important;
}

.field-option-icon-checked {
    opacity: 1 !important;
}

.menu--dropdown .menu-header [data-menu-option], .menu--dropdown-search .menu-header [data-menu-option] {
    max-height: 2.75em !important;
}

.field-menu .menu-header > span, .menu .menu-header > span {
    white-space: pre-line !important;
}

/** 13.4 Tile Class Item */
.tile--class-item.focus.open .tile-extra .btn {
    pointer-events: none;
}

/** 13.# Loader Spinner */

.loader-container {
    z-index: 0 !important;
    min-height: 64px;
}

    .loader-container .loader .loader-spinner {
        max-width: 100px !important;
    }

    .loader-container .loader .loader-spinner--mini {
        max-width: 50px !important;
    }

.spinner-profile-height {
    height: 202.78px !important;
}

.spinner-administrator-profile-height {
    height: 202.98px !important;
}

.spinner-slider-height {
    height: 276px !important;
}

.spinner-class-item-dialog {
    border-color: #ffffff !important;
    background: #ffffff !important;
}

    .spinner-class-item-dialog .loader-spinner .loader-spinner-circles span::before,
    .spinner-class-item-dialog .loader-spinner .loader-spinner-effect span::before {
        background: var(--grey-3) !important;
    }

.spinner-app-loading {
    border-radius: 0 !important;
}

    .spinner-app-loading .loader .loader-spinner--mini {
        max-width: 100px !important;
    }

.spinner-class-header.loader-container,
.spinner-classitem-header.loader-container {
    min-height: 37.34px !important;
}

    .spinner-class-header.loader-container .loader > *,
    .spinner-classitem-header.loader-container .loader > * {
        max-width: 48px !important;
        left: 24px !important;
    }

.spinner-class-header.card {
    border: none !important;
}

.spinner-classitem-header.card {
    border: none !important;
    background: var(--grey-light-2) !important;
}

.spinner-term-picker-container {
    width: 69.18px;
    height: 28.67px;
}

.spinner-term-picker.loader-container {
    min-height: 0 !important;
}

    .spinner-term-picker.loader-container .loader > * {
        max-width: 32% !important;
    }

/** 13.# Checklist */

.checklist-checkbox-checkmarks .checkmark {
    position: initial !important;
    -webkit-transform: none !important;
    transform: none !important;
}

    .checklist-checkbox-checkmarks .checkmark .icon .check {
        stroke-dashoffset: 0 !important;
    }

/** 13.9 Slider */

.slider-panel-body {
    max-height: 276px;
    overflow: hidden;
}

/** Classes page */

.classes-spinner-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 288px;
    right: 0;
}

/** TeacherEvaluate page */

.container.gutter.page-evaluate {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.page-evaluate .main {
    padding: 0 10px;
}

.page-evaluate .dashboard-main-body {
    margin-bottom: -2px;
}

/** ActivityView */

.activity-question .activity-question-workspaces > * {
    display: block !important;
}

/** TeacherMultiChoiceAnswer */

.field-group.mca-correct .checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    border: 2px solid var(--green);
}

.field-group.mca-incorrect .checkmark {
    background: var(--red) !important;
    border-color: var(--red) !important;
}

/** TeacherQuestionControl */

.evaluate-result-container {
    min-height: 30px !important;
    display: flex !important;
}

.evaluate-result-label {
    display: block !important;
}

.evaluate-result {
    display: inline-block !important;
    position: relative;
    padding-right: 1.5em;
}

.evaluate-result-icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    max-height: 0.875em;
    display: inline-block;
}

.mark-success {
    background-color: var(--green) !important;
    color: white !important;
}

.mark-error {
    background-color: var(--red) !important;
    color: white !important;
}

/** StudentSingleChoiceAnswer */

.lettermark-selected {
    color: white !important;
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

/** TeacherSingleChoiceAnswer */

.lettermark-correct::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    border-radius: inherit;
    border: 2px solid var(--green);
}

.lettermark-incorrect {
    color: white !important;
    background-color: var(--red) !important;
    border-color: var(--red) !important;
}

/** TeacherFillInTheBlanksAnswer */

.fib-correct {
    border: 2px solid var(--green) !important;
}

.fib-incorrect {
    border: 2px solid var(--red) !important;
}

/** Visibility */

.remove {
    display: none !important;
}

/** Page Open Class */

.page-open-class .dashboard-main .dashboard-main-body {
    background: transparent;
    border-color: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
}

    .page-open-class .dashboard-main .dashboard-main-body > .flex {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .page-open-class .dashboard-main .dashboard-main-body .topbar {
        margin-bottom: 20px;
    }

        .page-open-class .dashboard-main .dashboard-main-body .topbar > .card {
            padding: 0 10px;
            border-radius: 0 0 4px 4px;
            background: var(--grey-light-2);
        }

        .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-headline {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }

            .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-headline .room {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                margin-right: 10px;
            }

        .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta {
            -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
        }

            .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .card--meta {
                white-space: nowrap;
            }

            .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group {
                margin: 4px 0;
                padding: 0 20px;
            }

                .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group:first-child {
                    padding-left: 0;
                    border: none;
                }

                    .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group:first-child::before {
                        content: none;
                    }

                .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group:last-child {
                    padding-right: 0;
                }

                .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group .user {
                    top: 0.1em;
                }

    .page-open-class .dashboard-main .dashboard-main-body .main .card,
    .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar .card {
        border-radius: 4px;
    }

    .page-open-class .dashboard-main .dashboard-main-body .main {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

        .page-open-class .dashboard-main .dashboard-main-body .main.main--window .window {
            display: block;
        }

        .page-open-class .dashboard-main .dashboard-main-body .main.main--window .class-actions {
            /*position: absolute;
                        width: 100%;
                        height: 100%;*/
            display: none;
        }

        .page-open-class .dashboard-main .dashboard-main-body .main .window {
            display: none;
        }

        .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar {
            width: 240px;
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }

            .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar > *:not(:last-child) {
                margin-bottom: 20px;
            }

            .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar .card {
                background: var(--grey-light-2);
            }

/** Main */

.main .main-header .menu--dropdown {
    min-width: 226px !important;
}

/** 2.1.6 Field Renge*/

.field-range .range-inputs .range-input {
    width: 64px !important;
}

/** Checkbox */

.layout--dark .field-check input[type=checkbox]:disabled ~ .checkmark {
    border-color: var(--grey-light-4) !important;
    background: var(--alpha-dark-1) !important;
    color: var(--alpha-dark-2) !important;
}

/** ClassViewerTableView */

.spinner-override {
    min-height: 324px;
}

.layout--dark .dialog--class-item h1, .layout--dark .dialog--class-item h2, .layout--dark .dialog--class-item h3, .layout--dark .dialog--class-item h4, .layout--dark .dialog--class-item h5, .layout--dark .dialog--class-item h6 {
    color: var(--grey-dark-3) !important;
}

.table--classes-viewer td {
    background: transparent !important;
}

/** Class Item Dialog Details from dashboard */
.dialog--class-item.dialog.dialog--arrow::before {
    top: 0 !important;
}

.date-picker .date-picker-body .dates .date--selected {
    pointer-events: all !important;
}

/** Progress button */

.btn-progress.state--loading {
    pointer-events: none;
}

    .btn-progress.state--loading.btn--rounded .loader-spinner {
        margin-right: -10px;
    }

    .btn-progress.state--loading .loader-spinner {
        width: 1em;
        opacity: 1;
        margin-left: 10px;
    }

.btn-progress .loader-spinner {
    width: 0;
    height: 1em;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: all var(--transition-duration) ease 0s;
}

    .btn-progress .loader-spinner .loader-spinner-circles {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .btn-progress .loader-spinner .loader-spinner-circles span::before {
            width: 20%;
            height: 20%;
            background: currentColor;
            opacity: calc(0.2 * var(--spinner-i));
        }

.layout--dark .btn-progress .loader-spinner .loader-spinner-circles span::before {
    background: currentColor;
}

/** AdministratorSchoolAssetsPage */

@media all and (min-height: 768px) {
    .page-school-assets.dashboard.dashboard--sidebar .dashboard-main {
        height: 100vh;
    }
}

.page-school-assets .dashboard-main-builder {
    min-height: initial;
    height: 100%;
}

.page-school-assets .school-assets-builder {
    margin: 0 auto;
    max-width: 1556px;
}