@import '_content/Blazor.UI/Blazor.UI.cftmigc9b5.bundle.scp.css';

/* /Components/AdministratorProfile/AdministratorProfile.razor.rz.scp.css */
.loading-spinner-mini-container[administrator-profile-component]  .loader-spinner.loader-spinner--mini {
    max-width: 40px !important;
}

.avatar-container[administrator-profile-component] {
    display: flex;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

    .avatar-container[administrator-profile-component] .menu--more .menu-header::before {
        display: none;
    }

.selected-school[administrator-profile-component],
.organization[administrator-profile-component] {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 12px;
    position: relative;
    height: auto;
    min-height: 32px;
    padding: 8px 12px 6px;
    border-radius: 4px;
    background: var(--grey-dark-4);
    overflow: visible;
}

    .selected-school[administrator-profile-component]::after,
    .organization[administrator-profile-component]::after {
        content: "";
        width: 16px;
        height: 16px;
    }

    .selected-school .selected-school-icon[administrator-profile-component],
    .organization .organization-icon[administrator-profile-component] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 16px;
        aspect-ratio: 1/1;
    }

.selected-school .selected-school-icon[administrator-profile-component]  > svg,
.organization .organization-icon[administrator-profile-component]  > svg {
    width: 16px;
    height: 16px;
}

    .selected-school .selected-school-icon[administrator-profile-component]  > svg > path,
    .organization .organization-icon[administrator-profile-component]  > svg > path {
        fill: var(--grey-1);
    }

    .selected-school .selected-school-title[administrator-profile-component],
    .organization .organization-title[administrator-profile-component] {
        position: static;
        display: block;
        width: 100%;
        min-width: 0;
        max-height: none;
        overflow: visible;
        transform: none;
        -webkit-line-clamp: unset;
        color: var(--grey-1);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 14px;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

[administrator-profile-component] .school-dropdown {
    width: 100%;
    container-type: inline-size;
}

[administrator-profile-component] .school-dropdown .field-menu {
    width: 100%;
}

    [administrator-profile-component] .school-dropdown .menu-header {
        display: flex;
        align-items: center;
        height: auto;
        min-height: 32px;
        min-width: 0;
        padding: 8px 12px;
        gap: 12px;
        overflow: visible;
        color: var(--grey-1);
        background: var(--grey-dark-4);
        border-radius: 4px;
    }

    [administrator-profile-component] .school-dropdown .menu-header > span:first-child {
        display: flex;
        flex: 0 0 16px;
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 16px;
    }

    [administrator-profile-component] .school-dropdown .menu-header > span:first-child > svg {
        width: 16px;
        height: 16px;
    }

    [administrator-profile-component] .school-dropdown .menu-header > span:first-child > svg > path {
        fill: var(--grey-1);
    }

    [administrator-profile-component] .school-dropdown .menu-header > .text-overflow {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: unset;
        color: var(--grey-1);
        line-height: 14px;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    [administrator-profile-component] .school-dropdown .menu-header > .icon {
        flex: 0 0 12px;
        width: 12px;
        height: 7px;
        margin-left: auto;
    }

    [administrator-profile-component] .school-dropdown .menu-list {
        width: max-content !important;
        min-width: 100cqw !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
        text-align: left;
    }

    [administrator-profile-component] .school-dropdown .menu-list > li,
    [administrator-profile-component] .school-dropdown .menu-list .field-option {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        box-sizing: border-box;
    }

    [administrator-profile-component] .school-dropdown .menu-list .field-option {
        display: block;
        overflow: visible;
        text-align: left;
    }
    
    [administrator-profile-component] .school-dropdown .option {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        min-height: 32px;
        padding: 8px 12px;
        box-sizing: border-box;
        overflow: visible;
        text-align: left;
        white-space: normal;
    }
    
    [administrator-profile-component] .school-dropdown .option > svg:first-child {
        flex: 0 0 14px;
        width: 14px;
        height: 15px;
    }

    [administrator-profile-component] .school-dropdown .option > span:nth-child(2) {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: unset;
        color: var(--grey-dark-3);
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    [administrator-profile-component] .school-dropdown .option > .icon {
        flex: 0 0 22px;
        width: 22px;
        margin-left: 12px;
    }
/* /Components/EditRoomDialog/EditRoomDialog.razor.rz.scp.css */
[b-h7inihynbr] .loader-container {
    background: transparent !important;
    border: none;
    min-height: 64px !important;
    height: 104px !important;
}

.card[b-h7inihynbr] {
    background-color: white !important;
}
/* /Components/EditRoomDialog/Views/Building/Building.razor.rz.scp.css */
/** 13.# Grid Blocks */
.grid-blocks[schedule-building-rooms-view] {
    display: grid;
    grid-gap: 10px;
    justify-content: space-between;
    align-content: center;
    padding: 10px;
}

    .grid-blocks.grid--left[schedule-building-rooms-view] {
        justify-content: start;
    }

    .grid-blocks.grid--col-schedule-build-block[schedule-building-rooms-view] {
        grid-template-columns: repeat(auto-fit, 43px);
    }

    .grid-blocks .grid-item[schedule-building-rooms-view] {
        aspect-ratio: 1/1;
    }
/* /Components/Header/AdministratorHeader.razor.rz.scp.css */
.administrator-header[administrator-header-component] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.cleo-button[administrator-header-component] {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    background-color: var(--grey-3);
    border: none;
    border-radius: 32px;
    outline: none;
}

.cleo[administrator-header-component] {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px !important;
}

    .cleo[administrator-header-component]  svg {
        width: 24px;
        height: 24px;
        color: white;
    }

    .cleo img[administrator-header-component] {
        width: 48px;
        height: 48px;
    }

.cleo-button:hover[administrator-header-component],
.cleo-button.active[administrator-header-component] {
    background-color: var(--grey-light-2);
}

    .cleo-button:hover .cleo[administrator-header-component],
    .cleo-button.active .cleo[administrator-header-component] {
        background-color: var(--green);
        padding: 6px;
    }

        .cleo-button:hover .cleo[administrator-header-component]  svg,
        .cleo-button.active .cleo[administrator-header-component]  svg {
            width: 18px;
            height: 18px;
            color: white;
        }

[administrator-header-component] .inactive {
    color: var(--grey-1);
    background: transparent;
}
/* /Components/NavigationSidebar/NavigationSidebar.razor.rz.scp.css */
.nav-sidebar-container[administrator-nav-sidebar-component]  .icon {
    left: 22px !important;
}
/* /Components/SchoolSelectorGate/SchoolSelectorGate.razor.rz.scp.css */
/* /Components/SchoolYears/SchoolYears.razor.rz.scp.css */
/* /Layouts/AdministratorDashboard.razor.rz.scp.css */
.dashboard-container[administrator-dashboard-layout] {
    display: flex;
    flex-flow: row;
    overflow: hidden;
    height: 100vh;
}

.dashboard-main[administrator-dashboard-layout] {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}


.dashboard-header[administrator-dashboard-layout] {
    position: static !important;
    width: 100% !important;
}

.content[administrator-dashboard-layout] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 15px 15px 16px 15px;
    overflow: auto;
}

.body[administrator-dashboard-layout] {
    display: flex;
    flex: 1 1 auto;
    flex-flow: row;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

[administrator-dashboard-layout] .ai-container {
    min-width: 350px;
    width: 350px;
    display: flex;
    flex-flow: row;
    position: absolute;
    top: 63px;
    bottom: 0;
    background-color: white;
    right: -350px;
    z-index: 9999;
    justify-content: center;
}

    [administrator-dashboard-layout] .ai-container.show {
        animation-name: show-ai-window-administrator-dashboard-layout;
        animation-duration: 300ms;
        animation-fill-mode: forwards;
    }

    [administrator-dashboard-layout] .ai-container.hide {
        animation-name: hide-ai-window-administrator-dashboard-layout;
        animation-duration: 200ms;
        animation-fill-mode: forwards;
    }

[administrator-dashboard-layout] .pin-to-sidebar {
    height: 100% !important;
    right: 0;
    position: relative;
    top: initial;
    bottom: initial;
}

[administrator-dashboard-layout] .immersive {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background: rgba(82, 88, 96, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 999999;
}

    [administrator-dashboard-layout] .immersive .ai-dialog {
        position: absolute;
        width: 60%;
        height: 80%;
        padding-left: 16px;
        padding-right: 16px;
    }

        [administrator-dashboard-layout] .immersive .ai-dialog .header {
            padding: 0;
        }

[administrator-dashboard-layout] .floating {
    position: fixed;
    top: 200px;
    right: 200px;
    min-height: 400px;
    height: 540px;
    max-height: 920px;
    background-color: transparent;
    resize: vertical;
    overflow: auto;
}

    [administrator-dashboard-layout] .immersive .ai-dialog,
    [administrator-dashboard-layout] .floating .ai-dialog {
        border: none;
        border-radius: 4px;
        background: white;
        box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.12);
    }

    [administrator-dashboard-layout] .floating .icon-drag {
        display: block;
    }

[administrator-dashboard-layout] .icon-drag {
    display: none;
    position: absolute;
    color: var(--grey-light-3);
    width: 26px;
    cursor: grab;
}

.acs-chat-container[administrator-dashboard-layout] {
    flex: 0 0 350px;
    min-width: 350px;
    width: 350px;
    display: flex;
    flex-flow: row;
    position: absolute;
    top: 63px;
    bottom: 0;
    right: -350px;
    background-color: white;
    z-index: 888;
    justify-content: center;
}

    .acs-chat-container.show[administrator-dashboard-layout] {
        animation-name: show-chat-window-administrator-dashboard-layout;
        animation-duration: 300ms;
        animation-fill-mode: forwards;
    }

    .acs-chat-container.hide[administrator-dashboard-layout] {
        animation-name: hide-chat-window-administrator-dashboard-layout;
        animation-duration: 200ms;
        animation-fill-mode: forwards;
    }

.notifications-container[administrator-dashboard-layout] {
    display: none;
    position: fixed;
    top: 52px;
    right: 60px;
    width: 450px;
    max-width: 450px;
    max-height: 605px;
    z-index: 9999;
}

    .notifications-container.show[administrator-dashboard-layout] {
        display: flex;
    }

    .notifications-container.hide[administrator-dashboard-layout] {
        display: none;
    }

@keyframes show-chat-window-administrator-dashboard-layout {
    from {
        right: -350px;
    }

    to {
        right: 0;
        position: relative;
        top: initial;
        bottom: initial;
    }
}

@keyframes hide-chat-window-administrator-dashboard-layout {
    from {
        right: 0;
        position: relative;
        top: initial;
        bottom: initial;
    }

    to {
        right: -350px;
        position: absolute;
        top: 63px;
        bottom: 0;
    }
}

@keyframes show-ai-window-administrator-dashboard-layout {
    from {
        right: -350px;
    }

    to {
        right: 0;
        position: relative;
        top: initial;
        bottom: initial;
    }
}

@keyframes hide-ai-window-administrator-dashboard-layout {
    from {
        right: 0;
        position: relative;
        top: initial;
        bottom: initial;
    }

    to {
        right: -350px;
        position: absolute;
        top: 63px;
        bottom: 0;
    }
}
/* /Pages/Admin/ActivityLog/ActivityLog.razor.rz.scp.css */
.header-container[activity-log-component] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* /Pages/Admin/ActivityLog/ActivityLogFilter/ActivityLogFilter.razor.rz.scp.css */
.activity-log-filter-container[activity-log-filter-component] {
    display: flex;
    gap: 10px;
}

[activity-log-filter-component] .filter-dropdown {
    height: 40px;
}

[activity-log-filter-component] .menu--dropdown .menu-header > .text-overflow {
    max-height: 40px !important;
}

[activity-log-filter-component] .date-range-input {
    width: 280px;
}

[activity-log-filter-component] .filter-activity-type {
    width: 16rem;
}
/* /Pages/Admin/ActivityLog/ActivityLogTable/ActivityLogTable.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1 General */

.header-wrapper[activity-log-table-component] {
    padding-block-end: 3px;
    display: grid;
    grid-template-columns: 15% 1fr 7.3rem;
    gap: 10px;
    grid-template-areas: "search filters export"
}

.filter-wrapper[activity-log-table-component] {
    grid-area: filters;
    justify-self: end;
    gap: 25px
}

.export-wrapper[activity-log-table-component] {
    grid-area: export;
    align-items: end;
    height: 100%;
}

[activity-log-table-component] .export-button {
    height: 38px;
}

[activity-log-table-component] .th--sticky{
    text-transform:capitalize;
}

.table[activity-log-table-component] {
    width: 100%;
    font-size: 0.875rem;
}

    .table th[activity-log-table-component], .table td[activity-log-table-component] {
        position: relative;
        vertical-align: inherit;
    }

    .table th[activity-log-table-component] {
        background: var(--alpha-dark-1);
    }

    .table [rowspan][activity-log-table-component] {
        vertical-align: top;
    }

    .table .tr--highlight th[activity-log-table-component] {
        background: var(--alpha-dark-2);
    }

    .table .tr--highlight td[activity-log-table-component] {
        background: var(--alpha-dark-1);
    }

    .table .tr--thin > *[activity-log-table-component] {
        padding-top: 4px;
        padding-bottom: 4px;
        height: auto;
    }

    .table .tr--layout[activity-log-table-component] {
        padding: 0;
        height: 0;
    }

        .table .tr--layout th[activity-log-table-component], .table .tr--layout td[activity-log-table-component] {
            padding: 0;
            height: 0;
            border: 0;
        }

    .table .tr--link[activity-log-table-component],
    .table .td--link[activity-log-table-component] {
        cursor: pointer;
        transition: all var(--transition-duration) ease 0s;
    }

        .table .tr--link:hover[activity-log-table-component], .table .tr--link:focus[activity-log-table-component], .table .tr--link:active[activity-log-table-component],
        .table .td--link:hover[activity-log-table-component],
        .table .td--link:focus[activity-log-table-component],
        .table .td--link:active[activity-log-table-component] {
            background-color: var(--alpha-dark-1);
        }


    .table .th--sticky[activity-log-table-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }



        .table .th--sticky[activity-log-table-component]::before, .table .th--sticky[activity-log-table-component]::after {
            content: "";
            position: absolute;
            display: block;
        }

        .table .th--sticky.th--sticky-top[activity-log-table-component] {
            top: 0;
        }

            .table .th--sticky.th--sticky-top[activity-log-table-component]::before, .table .th--sticky.th--sticky-top[activity-log-table-component]::after {
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom-width: inherit;
                border-bottom-style: inherit;
                border-bottom-color: inherit;
            }

            .table .th--sticky.th--sticky-top[activity-log-table-component]::before {
                height: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-top[activity-log-table-component]::after {
                height: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-left[activity-log-table-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-left[activity-log-table-component]::before, .table .th--sticky.th--sticky-left[activity-log-table-component]::after {
                right: -1px;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-left[activity-log-table-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-left[activity-log-table-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-right[activity-log-table-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-right[activity-log-table-component]::before, .table .th--sticky.th--sticky-right[activity-log-table-component]::after {
                left: 0;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-right[activity-log-table-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-right[activity-log-table-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-top-left[activity-log-table-component], .table .th--sticky.th--sticky-top-right[activity-log-table-component] {
            top: 0;
            z-index: 4;
        }

            .table .th--sticky.th--sticky-top-left > *[activity-log-table-component], .table .th--sticky.th--sticky-top-right > *[activity-log-table-component] {
                position: relative;
                z-index: 1;
            }

            .table .th--sticky.th--sticky-top-left[activity-log-table-component]::before, .table .th--sticky.th--sticky-top-left[activity-log-table-component]::after, .table .th--sticky.th--sticky-top-right[activity-log-table-component]::before, .table .th--sticky.th--sticky-top-right[activity-log-table-component]::after {
                filter: blur(1px);
                background: rgba(0, 0, 0, 0.15);
            }

            .table .th--sticky.th--sticky-top-left[activity-log-table-component]::before, .table .th--sticky.th--sticky-top-right[activity-log-table-component]::before {
                top: 0;
                height: 100%;
                width: 1px;
            }

            .table .th--sticky.th--sticky-top-left[activity-log-table-component]::after, .table .th--sticky.th--sticky-top-right[activity-log-table-component]::after {
                bottom: -2px;
                left: 0;
                height: 1px;
                width: 100%;
            }

        .table .th--sticky.th--sticky-top-left[activity-log-table-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-top-left[activity-log-table-component]::before {
                left: 100%;
            }

        .table .th--sticky.th--sticky-top-right[activity-log-table-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-top-right[activity-log-table-component]::before {
                right: 100%;
            }

    .table .th--scroll-border-fix[activity-log-table-component] {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + (2 * 1px));
        height: calc(100% + (2 * 1px));
        border: inherit;
    }

    .table .th--highlight[activity-log-table-component] {
        color: var(--green);
        background: #f4fcf9;
        border: 1px solid #a8d7c4;
        z-index: 2;
    }

        .table .th--highlight > *[activity-log-table-component] {
            color: inherit !important;
        }

    .table .th--clean[activity-log-table-component] {
        padding: 0;
        border: none;
        background: transparent;
    }

        .table .th--clean.th--sticky[activity-log-table-component]::before, .table .th--clean.th--sticky[activity-log-table-component]::after {
            content: none;
        }

    .table .td--sticky[activity-log-table-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

        .table .td--sticky.td--sticky-left[activity-log-table-component] {
            left: 0;
        }

        .table .td--sticky.td--sticky-right[activity-log-table-component] {
            right: 0;
        }

    .table .td--pseudo-border[activity-log-table-component] {
        position: relative;
    }

        .table .td--pseudo-border[activity-log-table-component]::before, .table .td--pseudo-border[activity-log-table-component]::after {
            position: absolute;
            content: "";
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

        .table .td--pseudo-border[activity-log-table-component]::before {
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }

        .table .td--pseudo-border[activity-log-table-component]::after {
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
        }

    .table .table--cell-spacer[activity-log-table-component] {
        width: 100%;
        background: transparent;
        border: none;
    }

        .table .table--cell-spacer[activity-log-table-component]::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

    .table .table--cell-pattern[activity-log-table-component] {
        position: relative;
    }

        .table .table--cell-pattern.th--sticky[activity-log-table-component] {
            position: -webkit-sticky;
            position: sticky;
            background: transparent !important;
        }

            .table .table--cell-pattern.th--sticky .pattern[activity-log-table-component] {
                left: 0;
                width: 100%;
                height: 100%;
            }

            .table .table--cell-pattern.th--sticky[activity-log-table-component]::before, .table .table--cell-pattern.th--sticky[activity-log-table-component]::after {
                content: none;
            }

        .table .table--cell-pattern .pattern[activity-log-table-component] {
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + (2 * 1px));
            height: calc(100% + (2 * 1px));
            background-repeat: repeat;
            background-size: 45px;
            background-color: #ffffff;
        }

    .table .th--weekend[activity-log-table-component] {
        background: var(--grey-light-1) !important;
    }

    .table .td--weekend[activity-log-table-component] {
        background: rgba(0, 0, 0, 0.025) !important;
    }

        .table .td--weekend .pattern[activity-log-table-component] {
            background-color: #ffffff;
        }

    .table .tr--weekend th .pattern[activity-log-table-component], .table .tr--weekend td .pattern[activity-log-table-component] {
        background-color: var(--alpha-dark-1);
    }

    .table .tr--weekend th[activity-log-table-component] {
        background: #efefef !important;
    }

    .table .tr--weekend td[activity-log-table-component] {
        background-color: rgba(0, 0, 0, 0.025) !important;
    }

.layout--light .table th[activity-log-table-component] {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover[activity-log-table-component], .layout--dark .table .tr--link:focus[activity-log-table-component], .layout--dark .table .tr--link:active[activity-log-table-component],
.layout--dark .table .td--link:hover[activity-log-table-component],
.layout--dark .table .td--link:focus[activity-log-table-component],
.layout--dark .table .td--link:active[activity-log-table-component] {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky[activity-log-table-component] {
    background: var(--grey-dark-3);
}

    .layout--dark .table .th--sticky.th--sticky-top[activity-log-table-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .layout--dark .table .th--sticky.th--sticky-top-left[activity-log-table-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

.layout--dark .table .th--highlight[activity-log-table-component] {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend[activity-log-table-component] {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend[activity-log-table-component] {
    background: rgba(255, 255, 255, 0.015) !important;
}

    .layout--dark .table .td--weekend .pattern[activity-log-table-component] {
        background-color: #212121;
    }

.layout--dark .table .td--pseudo-border[activity-log-table-component]::before, .layout--dark .table .td--pseudo-border[activity-log-table-component]::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer[activity-log-table-component]::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern[activity-log-table-component] {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern[activity-log-table-component], .layout--dark .tr--weekend td .pattern[activity-log-table-component] {
    background-color: #212121;
}

.layout--dark .tr--weekend th[activity-log-table-component] {
    background: #363636 !important;
}

.layout--dark .tr--weekend td[activity-log-table-component] {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */

.table-wrapper.table-wrapper--flex[activity-log-table-component] {
    display: flex;
    flex-direction: column;
}

    .table-wrapper.table-wrapper--flex .table-wrapper-body[activity-log-table-component] {
        flex: 0 1 auto;
        min-height: 0;
    }

.table-wrapper.table-wrapper--card .table-wrapper-card[activity-log-table-component] {
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    background: rgba(0, 0, 0, 0.025);
    border-radius: 4px;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .card[activity-log-table-component] {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.025);
    border: none;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .scroll[activity-log-table-component] {
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.table-wrapper .table-wrapper-header > *[activity-log-table-component] {
    margin-bottom: 10px;
}

.table-wrapper .table-wrapper-header[data-view] .context-options[activity-log-table-component] {
    display: none;
}

.table-wrapper .table-wrapper-header[data-view=context-options] .context-options[activity-log-table-component] {
    display: block;
}

    .table-wrapper .table-wrapper-header[data-view=context-options] .context-options + *[activity-log-table-component] {
        margin-left: 10px;
    }

.table-wrapper .table-wrapper-header .row[activity-log-table-component] {
    align-items: center;
}

    .table-wrapper .table-wrapper-header .row > *[activity-log-table-component] {
        width: auto;
        flex: 1 1 auto;
    }

.table-wrapper .table-wrapper-header .field-menu[activity-log-table-component] {
    min-width: 160px;
}

.table-wrapper .table-wrapper-header .search[activity-log-table-component] {
    max-width: 100%;
    width: 320px;
}

.table-wrapper .table-wrapper-body[data-view] .table-empty[activity-log-table-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td[activity-log-table-component],
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th[activity-log-table-component] {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top[activity-log-table-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left[activity-log-table-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right[activity-log-table-component]::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty[activity-log-table-component] {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer[activity-log-table-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .card[activity-log-table-component] {
    height: auto;
}

.table-wrapper .table-wrapper-body .card[activity-log-table-component],
.table-wrapper .table-wrapper-body .scroll[activity-log-table-component] {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .table-wrapper-body .card[activity-log-table-component] {
    background: #ffffff;
    height: 100%;
}

.table-wrapper .table-wrapper-footer > *[activity-log-table-component] {
    padding: 10px 0 0;
}

.table-wrapper .table thead tr[activity-log-table-component] {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th[activity-log-table-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.table-wrapper .table tbody tr:last-child th[activity-log-table-component],
.table-wrapper .table tbody tr:last-child td[activity-log-table-component] {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky[activity-log-table-component] {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child[activity-log-table-component], .table-wrapper .table tr > *:last-child[activity-log-table-component] {
    min-width: 40px;
}

.table-wrapper .table th[activity-log-table-component],
.table-wrapper .table td[activity-log-table-component] {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th[activity-log-table-component] {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table .tr--nowrap > *[activity-log-table-component] {
    white-space: nowrap;
}

.table-wrapper .table .tr--link td[activity-log-table-component] {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky[activity-log-table-component] {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top[activity-log-table-component], .table-wrapper .table .th--sticky.th--sticky-top-left[activity-log-table-component], .table-wrapper .table .th--sticky.th--sticky-top-right[activity-log-table-component] {
    border-bottom: none;
}

    .table-wrapper .table .th--sticky.th--sticky-top[activity-log-table-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-left[activity-log-table-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-right[activity-log-table-component]::before {
        content: none;
    }

    .table-wrapper .table .th--sticky.th--sticky-top[activity-log-table-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-left[activity-log-table-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-right[activity-log-table-component]::after {
        height: 1px;
        bottom: 0px;
        background: var(--grey-light-3);
        filter: none;
        box-shadow: none;
    }

.table-wrapper .table .th--sticky.th--sticky-top[activity-log-table-component] {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left[activity-log-table-component], .table-wrapper .table .th--sticky.th--sticky-top-right[activity-log-table-component] {
    z-index: 5;
}

.table-wrapper .table .th--highlight[activity-log-table-component] {
    color: var(--green);
    background: #f4fcf9;
    border: none;
}

    .table-wrapper .table .th--highlight[activity-log-table-component]::before {
        width: 100%;
        height: 100%;
        background: transparent;
    }

.table-wrapper .table .th--active[activity-log-table-component] {
    color: var(--green);
}

    .table-wrapper .table .th--active.th--sort .sort[activity-log-table-component] {
        opacity: 1;
    }

.table-wrapper .table .th--sort[activity-log-table-component] {
    padding: 5px 20px 5px 12px;
    cursor: pointer;
}

    .table-wrapper .table .th--sort:hover[activity-log-table-component] {
        background: #f0f0f0;
    }

        .table-wrapper .table .th--sort:hover .sort[activity-log-table-component] {
            opacity: 1;
        }

    .table-wrapper .table .th--sort.sort--top .icon .sort-bottom[activity-log-table-component] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort.sort--bottom .icon .sort-top[activity-log-table-component] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort .sort[activity-log-table-component] {
        position: absolute;
        width: 6px;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

.table-wrapper .table .th--check[activity-log-table-component] {
    cursor: pointer;
}

    .table-wrapper .table .th--check:hover[activity-log-table-component] {
        background: #f0f0f0;
    }

.table-wrapper .table .td--sticky[activity-log-table-component] {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu[activity-log-table-component] {
    position: absolute;
    top: 10px;
    right: 4px;
}

    .table-wrapper .table .td--row-menu .menu .btn .icon[activity-log-table-component] {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.table-wrapper .table .field-check[activity-log-table-component] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .table-wrapper .table .field-check .checkmark[activity-log-table-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.table-wrapper .table-empty[activity-log-table-component] {
    padding: 30px;
    text-align: center;
}

.layout--dark .table-wrapper[activity-log-table-component] {
    border-color: var(--alpha-light-2);
}

    .layout--dark .table-wrapper.table-wrapper--card .card[activity-log-table-component] {
        background: rgba(255, 255, 255, 0.025);
    }

    .layout--dark .table-wrapper.table-wrapper--card .scroll[activity-log-table-component] {
        background: var(--grey-dark-4);
        border-color: var(--alpha-light-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    .layout--dark .table-wrapper .table thead th:hover[activity-log-table-component] {
        background: #383838;
    }

    .layout--dark .table-wrapper .table th[activity-log-table-component],
    .layout--dark .table-wrapper .table td[activity-log-table-component] {
        border-bottom-color: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .tr--link:hover .td--sticky[activity-log-table-component] {
        background: #2c2c2c;
    }

    .layout--dark .table-wrapper .table .th--sticky.th--sticky-top[activity-log-table-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left[activity-log-table-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right[activity-log-table-component]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .td--sticky[activity-log-table-component] {
        background: var(--grey-dark-4);
    }

    .layout--dark .table-wrapper .card[activity-log-table-component] {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-4);
    }

.layout--dark .card[activity-log-table-component] {
    background: var(--grey-dark-4);
}
/*# sourceMappingURL=theme.css.map */

.search-wrapper[activity-log-table-component] {
    grid-area: search;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .search-wrapper[activity-log-table-component]  .search--small {
        max-width: 100%;
        width: 320px;
        padding: 0 0 6px 0;
    }

        .search-wrapper[activity-log-table-component]  .search--small .search-field input {
            height: 40px;
            background: #fff;
            border: 1px solid var(--grey-light-3);
        }

    .search-wrapper[activity-log-table-component]  .btn {
        height: 36px;
    }

[activity-log-table-component] .card--profile {
    height: 100% !important;
}

.spinner-wrapper[activity-log-table-component] {
    height: 100vh !important;
    border: none;
}

.spinner-container[activity-log-table-component] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Admin/Calendar/Components/BlockDetailsDialog/BlockDetailsDialog.razor.rz.scp.css */
.block-details-dialog[schedule-block-event-dialog-component]  .dialog {
    border: 1px solid var(--grey-light-3);
}

.block-details-dialog[schedule-block-event-dialog-component]  .dialog-footer {
    gap: 10px;
    justify-content: flex-start !important;
}

.block-details-dialog[schedule-block-event-dialog-component]  .dialog-body {
   background-color: white;
}

.headline[schedule-block-event-dialog-component] {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.subtitle[schedule-block-event-dialog-component] {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    color: var(--grey-2);
}

.dropdown-button-content[schedule-block-event-dialog-component] {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
}

    .dropdown-button-content[schedule-block-event-dialog-component] .icon{
        width: 16px;
        height: 16px;
    }

.block-details-body[schedule-block-event-dialog-component] {
    display: flex;
    max-height: 340px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.block-info-container[schedule-block-event-dialog-component] {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-self: stretch;
}

.block-info[schedule-block-event-dialog-component] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.block-title[schedule-block-event-dialog-component] {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.6px;
}

.block-details[schedule-block-event-dialog-component] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .block-details .schedule-date[schedule-block-event-dialog-component] {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 0.75;
    }

.series-indicator[schedule-block-event-dialog-component] {
    display: flex;
    padding: 3px 15px 3px 10px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 20px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
    .series-indicator[schedule-block-event-dialog-component] .icon {
        width: 16px !important;
        height: 17px !important;
    }

.block-time-container[schedule-block-event-dialog-component] {
    display: flex;
    padding: 4px 15px;
    align-items: center;
    gap: 9px;
    background-color: var(--grey-light-2);
    border-radius: 50px 8px 8px 50px;
    margin: 5px 0 5px 0;
}

    .block-time-container[schedule-block-event-dialog-component] .icon {
        width: 20px !important;
        height: 21px !important;
    }

.time-container[schedule-block-event-dialog-component] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    .time-container .time[schedule-block-event-dialog-component] {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.25;
    }

    .time-container .duration[schedule-block-event-dialog-component] {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25;
    }

.courses-count[schedule-block-event-dialog-component] {
    display: flex;
    height: 40px;
    padding: 8px 0px;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--grey-light-3);
    text-transform: uppercase;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

/* /Pages/Admin/Calendar/Components/BlockDetailsDialog/Views/CoursesList/CoursesList.razor.rz.scp.css */
.course-item[courses-list-view] {
    margin: 8px 0;
    width: 100%;
}

    .course-item :first-child[courses-list-view], :last-child[courses-list-view] {
        margin: 0;
    }

.course-info-container[courses-list-view] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.course-info[courses-list-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
    .course-info .course-title[courses-list-view] {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .course-info .course-details[courses-list-view] {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--grey-3);
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.course-location[courses-list-view] {
    display: flex;
    width: 97px;
    height: 51px;
    padding: 4px 15px;
    align-items: center;
    gap: 9px;
    border-radius: 50px 8px 8px 50px;
    border: 1px solid var(--grey-light-3);
}
    .course-location[courses-list-view] .icon {
        height: 21px !important;
        width: 20px !important;
    }

    .course-location .virtual-room-indicator[courses-list-view] {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.5rem;
        margin: 0;
    }

.room-container[courses-list-view] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    .room-container .room-name[courses-list-view] {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.5rem;
        margin: 0;
    }

    .room-container .room-indicator[courses-list-view] {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25rem;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        margin: 0;
    }
/* /Pages/Admin/Calendar/Components/EditBlockDetailsDialogComponent/EditBlockDetailsDialog.razor.rz.scp.css */
.edit-block-details-dialog[edit-block-details-dialog-component] .dialog-body{
    padding: 0 !important;
}

.headline[edit-block-details-dialog-component] {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.edit-block-details-body[edit-block-details-dialog-component] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    padding: 0 0 0 5px;
}
/* /Pages/Admin/Calendar/Components/EditBlockDetailsDialogComponent/Views/AssignedCoursesList/AssignedCoursesList.razor.rz.scp.css */
.assigned-courses-list-container[assigned-course-list-view] {
    display: flex;
    padding: 10px 15px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    background-color: var(--grey-light-3);
    min-width: 365px;
    height: 450px;
}

    .assigned-courses-list-container[assigned-course-list-view] .assigned-courses-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        align-self: stretch;
        background-color: white;
        height: 100%;
    }

.filter-container[assigned-course-list-view] {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    background-color: var(--grey-light-1);
    padding: 10px;
    gap: 10px;
}

.filter[assigned-course-list-view] {
    width: 100%;
    max-height: 40px;
}

    .filter[assigned-course-list-view] .search {
        background-color: white;
        height: 40px;
        padding: 4px;
    }

.add-course-button[assigned-course-list-view] .btn {
    width: 40px;
    height: 40px;
}

.add-course-button[assigned-course-list-view] .icon {
    width: 16px;
    height: 16px;
}

[assigned-course-list-view] .drop-down .drop-down-body {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translate(0, 10px);
    display: inline-block;
    list-style: none;
    padding-left: 0px;
    min-width: 180px;
    width: auto;
    max-width: 300px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-duration) ease 0s;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    line-height: var(--line-height);
    z-index: 99;
    max-height: 50vh;
    scrollbar-color: var(--alpha-dark-2) transparent;
    scrollbar-width: thin;
}
/* /Pages/Admin/Calendar/Components/EditBlockDetailsDialogComponent/Views/CourseListItem/CourseListItem.razor.rz.scp.css */
.course-item-container[assigned-course-item-view] {
    display: flex;
    padding: 7px 10px 7px 10px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
    .course-item-container:hover[assigned-course-item-view] {
        background-color: var(--alpha-green-1);
    }

.course-info-container[assigned-course-item-view] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.room-info[assigned-course-item-view] {
    display: flex;
    width: 42px;
    height: 42px;
    justify-content: center;
    align-items: center;
    gap: 9px;
    border-radius: 4px;
    border: 1px solid var(--grey-light-1);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 25.6px
}

.course-info[assigned-course-item-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .course-info .course-title[assigned-course-item-view] {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22.4px;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 230px;
    }

    .course-info .course-details[assigned-course-item-view] {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--grey-3);
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 230px;
    }

.course-options[assigned-course-item-view] .btn {
    padding: 12px 0px 12px 10px;
}

.course-options[assigned-course-item-view] .icon {
    transform: translate(-50%, -50%) rotate(90deg);
}
/* /Pages/Admin/Calendar/Components/EditBlockDetailsDialogComponent/Views/EditBlockDetailsForm/EditBlockDetailsForm.razor.rz.scp.css */

/* /Pages/Admin/Calendar/Components/EditBlockDetailsDialogComponent/Views/WeekSelection/WeekSelection.razor.rz.scp.css */

.week-selection[week-selection-view] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
}

.header[week-selection-view] {
	font-size: 0.875rem;
}

.field-weeks[week-selection-view] {
	display: flex;
	overflow: hidden;
}
	.field-weeks .field-body[week-selection-view] {
		display: flex;
		align-items: flex-start;
		gap: 17px;
	}

	.field-weeks .week[week-selection-view] {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		font-size: 0.75em;
		font-weight: var(--font-weight);
		gap: 2px;
	}

		[week-selection-view].field-weeks .week .field-check {
			padding: 0;
		}

			[week-selection-view].field-weeks .week .field-check .checkmark {
				position: relative;
				display: block;
				top: 0;
				transform: none;
			}

/* /Pages/Admin/Calendar/Page/AdministratorCalendar.razor.rz.scp.css */
.page-content[b-ts3agtlu2n] {
    height: calc(100vh - 100px);
}
/* /Pages/Admin/Calendar/Views/BlockEvent/BlockEvent.razor.rz.scp.css */
.block-event-content[b-6pfdjm8iqt] {
    height: 100%;
    padding: 4px 10px 4px 10px;
    container-type: inline-size;
}

.block-event-duration[b-6pfdjm8iqt] {
    color: var(--grey-3)
}

.block-event-title[b-6pfdjm8iqt] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: 16px;
    color: var(--event-color);
    display: flex;
    margin-right: 3px;
}

.block-event-title span[b-6pfdjm8iqt] {
    display: block;
}

.block-event-prefix[b-6pfdjm8iqt] {
    margin-right: 4px;
}

.block-event-time[b-6pfdjm8iqt],
.block-event-additional-data[b-6pfdjm8iqt] {
    font-weight: 400;
    line-height: 16px;
    font-size: 0.75rem;
}

.block-event-title[b-6pfdjm8iqt],
.block-event-time[b-6pfdjm8iqt] {
    margin-bottom: 2px;
}

.short > .block-event-title[b-6pfdjm8iqt],
.short > .block-event-time[b-6pfdjm8iqt] {
    margin-bottom: 0;
}

.event-icon[b-6pfdjm8iqt] {
    display: flex;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.event-icon[b-6pfdjm8iqt] .icon {
    width: 11px;
    height: 11px;
}

.block-event-content.short > .event-icon[b-6pfdjm8iqt] {
    position: static;
    transform: scale(0.8);
}

.block-event-content.short[b-6pfdjm8iqt] {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.block-event-additional-data[b-6pfdjm8iqt],
.block-event-duration[b-6pfdjm8iqt],
.block-event-time[b-6pfdjm8iqt] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@container (max-width: 80px) {
    .block-event-content .block-event-additional-data[b-6pfdjm8iqt] {
        display: none;
    }
    .block-event-content .block-event-prefix[b-6pfdjm8iqt] {
        display: none;
    }
    .block-event-content .block-canceled-prefix[b-6pfdjm8iqt] {
        display: none;
    }
    .block-event-content .block-event-title[b-6pfdjm8iqt],
    .block-event-content .block-event-time[b-6pfdjm8iqt] {
        margin-bottom: 0;
    }
}

@container (max-width: 140px) {
    .block-event-content .block-event-additional-data[b-6pfdjm8iqt] {
        display: none;
    }
}

.block-event-content.short .block-event-additional-data[b-6pfdjm8iqt] {
    display: none;
}

.block-event-content.short .block-event-prefix[b-6pfdjm8iqt] {
    display: none;
}

.block-event-content.short .block-canceled-prefix[b-6pfdjm8iqt] {
    display: none;
}

.block-event-content.short .event-duration[b-6pfdjm8iqt] {
    margin-left: 4px;
}

.past[b-6pfdjm8iqt] {
    border: 0;
    background-color: var(--event-color-with-opacity);
}

.present[b-6pfdjm8iqt] {
    background-color: var(--event-color);
    color: white;
}
    .present[b-6pfdjm8iqt]::before {
        content: '';
        width: 4px;
        background: rgba(255, 255, 255, 0.35);
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
    }

.present .block-event-title[b-6pfdjm8iqt],
.present .block-event-duration[b-6pfdjm8iqt] {
    color: white;
}

.future[b-6pfdjm8iqt] {
    background-color: var(--event-color-with-opacity);
    border: 1px solid var(--event-color);
}
    .future[b-6pfdjm8iqt]::before {
        content: '';
        width: 4px;
        background: var(--event-color);
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
    }

.event-canceled[b-6pfdjm8iqt] {
    border-left: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--event-color);
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: var(--event-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--event-color);
    background-color: white;
    padding: 4px 10px 4px 10px;
}
    .event-canceled[b-6pfdjm8iqt]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        border: 1px solid var(--event-color);
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

.event-canceled .block-event-title[b-6pfdjm8iqt] {
    text-decoration: line-through;
    text-decoration-color: var(--event-color);
}

.block-canceled-prefix[b-6pfdjm8iqt] {
    text-transform: none;
}

.event-overridden[b-6pfdjm8iqt] {
    padding: 4px 10px 4px 6px;
    border-left: 4px solid var(--event-color);
    border-right: 1px solid var(--event-color);
    border-bottom: 1px solid var(--event-color);
    border-top: 1px solid var(--event-color);
}

.block-overridden-prefix[b-6pfdjm8iqt] {
    color: white;
    border-radius: 30px;
    padding: 0 5px 0 5px;
    background-color: var(--event-color);
    margin-right: 4px;
}

.present[b-6pfdjm8iqt]  .event-icon,
.present[b-6pfdjm8iqt]  .event-duration {
    filter: brightness(150%);
}
/* /Pages/Admin/Curriculum/Components/Curriculum/AdministratorCurriculum.razor.rz.scp.css */
[administrator-curriculum-component] .subject-table-header {
    display: flex;
    justify-content: space-between;
}

.subject-search[administrator-curriculum-component] .search--small {
    background: white !important;
    border: 1px solid var(--grey-light-2);
}

.subject-actions[administrator-curriculum-component]  .subject-button {
    padding: 15px;
}

.subject-actions[administrator-curriculum-component]  .import-button {
    height: 40px;
    color: var(--green);
}

    .subject-actions::deep .import-button:hover[administrator-curriculum-component] {
        color: white;
    }

[administrator-curriculum-component] .curriculum-tabs > .tabs-header {
    background: white !important;
    z-index: 1;
    padding: 0 20px;
    border: 1px solid var(--grey-light-3);
}

.hide[administrator-curriculum-component] {
    display: none;
}

.display[administrator-curriculum-component] {
    height: 100%;
    display: initial;
}

.courses-container.hide[administrator-curriculum-component] {
    display: none;
}

.courses-container.display[administrator-curriculum-component] {
    height: 100%;
    display: grid;
}

.standards-container.hide[administrator-curriculum-component] {
    display: none;
}

.standards-container.display[administrator-curriculum-component] {
    height: 100%;
    display: grid;
}

.standards-container[administrator-curriculum-component] {
    display: flex;
    background: inherit;
    width: 100%;
}

.courses-container[administrator-curriculum-component] {
    display: flex;
    background: inherit;
    width: 100%;
}

.courses-header-item[administrator-curriculum-component] {
    display: flex;
    align-items: center;
}

[administrator-curriculum-component] .table-wrapper--card.courses {
    padding-top: 30px;
}

.courses-table-header[administrator-curriculum-component] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[administrator-curriculum-component] .btn--circle svg {
    fill: var(--grey-dark-1);
}
[administrator-curriculum-component] .btn--circle:hover svg {
    fill: white;
}

.separator[administrator-curriculum-component] {
    border: solid;
    border-width: 0.1px;
    border-color: var(--grey-light-4);
    margin: 0 15px;
    height: 25px;
}  

.item.info[administrator-curriculum-component] {
    font-weight: 600;
    font-size: 18px;
    line-height: 17px;
}
/* /Pages/Admin/Curriculum/Components/Curriculum/Components/CoursesHeader/CoursesHeader.razor.rz.scp.css */
.course-table-filter-container[b-xozs4xjamn] {
    display: flex;
    align-items: center;
}

.course-table-filter-delete[b-xozs4xjamn] {
    color: var(--grey-3);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.course-table-filter-delete[b-xozs4xjamn]::after {
    content: '';
    display: block;
    width: 1px;
    height: 1rem;
    background: var(--grey-light-3);
    margin: 0 0.5rem;
}

.delete-text[b-xozs4xjamn] {
    margin-left: 0.5rem;
}

[b-xozs4xjamn] .btn,
[b-xozs4xjamn] .search--small .search-field input,
.filter-container[b-xozs4xjamn] {
    height: 38.5px;
}

[b-xozs4xjamn] .btn {
    max-height: none !important;
}

[b-xozs4xjamn] .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.course-table-filter[b-xozs4xjamn] {
    margin-right: 0.5rem;
}

.filter-container[b-xozs4xjamn] {
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
}

.course-table-filter-container .course-table-filter-delete[b-xozs4xjamn]  .icon {
    height: 16px !important;
}

.filter-container[b-xozs4xjamn]  .btn-filter .btn:hover {
    color: var(--green);
    background: transparent;
}

[b-xozs4xjamn] .subjects-drop-down .menu-list {
    transform: translate(-154px, 0) !important;
    min-width: 190px;
    max-width: 190px;
}

[b-xozs4xjamn] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[b-xozs4xjamn] .loader-spinner {
    height: 32px !important;
}


[b-xozs4xjamn] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/Admin/Curriculum/Components/Curriculum/Components/CoursesTableContent/CoursesTableContent.razor.rz.scp.css */
[b-qnnty76bim] .course-group {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    justify-content: space-between;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.course-name-container[b-qnnty76bim] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.label .label--course-icon[b-qnnty76bim] {
    margin-right: 10px;
}

.course-color-indicator[b-qnnty76bim] {
    display: block;
    height: 35px;
    width: 6px;
    transform: translateX(-13px);
}

.subject-label[b-qnnty76bim] {
    padding: 8px 12px;
    border-radius: 3px;
    font-weight: 400;
    line-height: 22.4px;
}

.dialog-alert-container[b-qnnty76bim]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-qnnty76bim]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}
/* /Pages/Admin/Curriculum/Components/Curriculum/Components/SchoolStudyProgramsTable/SchoolStudyProgramsTable.razor.rz.scp.css */
.programs-table[administrator-curriculum-component] {
    width: 100%;
    height: 100%;
}

.programs-table[administrator-curriculum-component]  .spinner-profile-height {
    height: 100% !important;
}

.programs-table[administrator-curriculum-component]  .table {
    background: #ffffff;
    height: auto;
    border: 1px solid var(--grey-light-3);
}

.programs-table[administrator-curriculum-component] .tr--expanded {
    position: relative;
    border-bottom: 0;
}

.programs-table[administrator-curriculum-component] .tr--expanded td {
    background: var(--alpha-dark-1);
}

.programs-table[administrator-curriculum-component] .tr--expanded td::before {
    content: none;
}

.programs-table[administrator-curriculum-component] .tr--expanded td::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    left: 0;
    height: 3px;
    bottom: 0;
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.programs-table[administrator-curriculum-component]  .no-records-td {
    background: var(--grey-light-2) !important;
}

.programs-table[administrator-curriculum-component]  .action-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

.programs-table[administrator-curriculum-component]  .action-container button {
    border: none;
}

.programs-table[administrator-curriculum-component]  .action-container button:not(:hover) {
    background-color: inherit;
}

.programs-table[administrator-curriculum-component]  .action-container button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.programs-table[administrator-curriculum-component]  .action-container button svg {
    width: 10px;
    height: 10px;
    color: #888888;
}
.programs-table[administrator-curriculum-component]  .action-container button:hover svg {
    color: #888888;
}
/* /Pages/Admin/Curriculum/Components/Curriculum/Views/CoursesTable/CoursesTable.razor.rz.scp.css */
[b-9cdzwi4qcs] .table-header {
    display: flex;
    justify-content: space-between;
}

.subject-search[b-9cdzwi4qcs] .search--small {
    background: white !important;
    border: 1px solid var(--grey-light-2);
}

.subject-button[b-9cdzwi4qcs] .btn {
    padding: 15px;
}

[b-9cdzwi4qcs] .curriculum-tabs > .tabs-header {
    background: white !important;
    z-index: 1;
    padding: 0 20px;
    border: 1px solid var(--grey-light-3);
}

.dialog-alert-container[b-9cdzwi4qcs]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-9cdzwi4qcs]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.hide[b-9cdzwi4qcs] {
    display: none;
}

.display[b-9cdzwi4qcs] {
    height: 100%;
    display: initial;
}

.courses-container.hide[b-9cdzwi4qcs] {
    display: none;
}

.courses-container.display[b-9cdzwi4qcs] {
    height: 100%;
    display: initial;
}

.courses-container[b-9cdzwi4qcs] {
    display: flex;
    background: inherit;
    width: 100%;
}

.courses-header-item[b-9cdzwi4qcs] {
    display: flex;
    align-items: center;
}

[b-9cdzwi4qcs] .btn--circle svg {
    fill: var(--grey-dark-1);
}
[b-9cdzwi4qcs] .btn--circle:hover svg {
    fill: white;
}

[b-9cdzwi4qcs] .btn.btn--primary {
    padding: 12px !important;
}

[b-9cdzwi4qcs] .import-button {
    height: 40px;
    color: var(--green);
}

    [b-9cdzwi4qcs] .import-button:hover {
        color: white;
    }

.separator[b-9cdzwi4qcs] {
    border: solid;
    border-width: 0.1px;
    border-color: var(--grey-light-4);
    margin: 0 15px;
    height: 40px;
}

.item.info[b-9cdzwi4qcs] {
    font-weight: 600;
    font-size: 18px;
    line-height: 17px;
}

.courses-table-header[b-9cdzwi4qcs]  .search {
    margin-right: auto;
}
/* /Pages/Admin/Curriculum/Components/Curriculum/Views/SchoolProgramsTab/SchoolProgramsTab.razor.rz.scp.css */
.programs-tab[b-wnqa5calrd] {
    display: flex;
    flex-flow: column;
}

.programs-tab .header[b-wnqa5calrd] {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.programs-tab .header[b-wnqa5calrd]  .icon {
    min-width: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

.programs-tab .header[b-wnqa5calrd]  .btn {
    height: 40px;
}

.programs-tab .table-filter-container[b-wnqa5calrd] {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.programs-tab[b-wnqa5calrd]  .btn--primary,
.programs-tab[b-wnqa5calrd]  .search--small .search-field input {
    height: 38.5px;
}

.programs-tab[b-wnqa5calrd]  .btn {
    max-height: none !important;
}

.programs-tab[b-wnqa5calrd]  .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

[b-wnqa5calrd] .filter-drop-down {
    min-width: 190px;
}

.hide[b-wnqa5calrd] {
    display: none;
}

.display[b-wnqa5calrd] {
    height: 100%;
    display: initial;
}
/* /Pages/Admin/Curriculum/Components/SubjectsTab/SubjectsTab.razor.rz.scp.css */
.subjects-tab[subjects-tab-component] {
    display: flex;
    width: 100%;
    height: 100%;
}

.subjects-tab-content[subjects-tab-component] {
    width: 100%;
}

.subjects-tab-content--hidden[subjects-tab-component] {
    display: none;
}

    .subjects-tab[subjects-tab-component]  .new-subject-button {
        height: 40px;
    }

    .subjects-tab[subjects-tab-component]  .import-button {
        height: 40px;
        color: var(--green);
    }

        .subjects-tab[subjects-tab-component]  .import-button:hover {
            color: white;
        }

    .subjects-tab[subjects-tab-component]  .table-wrapper {
        width: 100%;
    }
    
.subject-table-header[subjects-tab-component] {
    display: flex !important;
    justify-content: space-between !important;
}

.dialog-alert-container[subjects-tab-component]  button:empty {
    display: none !important;
}

.dialog-alert-container[subjects-tab-component]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.subject-search[subjects-tab-component]  .search--small {
    padding: 4px 8px !important;
    background-color: white !important;
}
/* /Pages/Admin/Curriculum/Page/AdministratorCurriculum.razor.rz.scp.css */
/* /Pages/Admin/Curriculum/Views/SubjectTable/SubjectsTable.razor.rz.scp.css */
[b-ktxkzg4uu8] .subject-group {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    justify-content: space-between;
}

.subject-name-container[b-ktxkzg4uu8] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.label .label--subject-icon[b-ktxkzg4uu8] {
    margin-right: 10px;
}

.actions-container[b-ktxkzg4uu8] {
    display: flex;
    justify-content: right;
}

.actions-container[b-ktxkzg4uu8] > .btn--circle {
    border: none;
    background: none;
}
/* /Pages/Admin/Dashboard/Components/Dashboard/AdministratorDashboard.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.dashboard-overview > .card[administrator-dashboard-component] {
    padding: 5px;
}

    .dashboard-overview > .card.layout--light[administrator-dashboard-component] {
        background: rgba(0, 0, 0, 0.025);
        border: none;
    }

.dashboard-overview .list-tile-users-summary[administrator-dashboard-component] {
   margin: -0.625rem;
}
/* /Pages/Admin/Dashboard/Components/Dashboard/Views/NoSchoolYearView/NoSchoolYear.razor.rz.scp.css */
/* /Pages/Admin/Dashboard/Components/Dashboard/Views/SchoolYearSummaryView/SchoolYearSummary.razor.rz.scp.css */
.school-year-edit[administrator-dashboard-component]  .school-year-edit-icon {
    background: transparent;
    border-color: white;
}
    .school-year-edit[administrator-dashboard-component]  .school-year-edit-icon:hover {
        border-color: white;  
    }
/* /Pages/Admin/Dashboard/Components/Dashboard/Views/SchoolYearTileView/SchoolYearTile.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.tile-school-year-summary[administrator-dashboard-component] {
    overflow: hidden;
    line-height: 1.25;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    background: #ffffff;
    border-radius: 4px;
}

    .tile-school-year-summary .school-year-summary[administrator-dashboard-component] {
        position: relative;
    }

        .tile-school-year-summary .school-year-summary .summary-headline[administrator-dashboard-component] {
            padding: 20px;
            color: #ffffff;
            background: linear-gradient(225deg, #27BF81 0%, #1BA16A 100%);
        }

            .tile-school-year-summary .school-year-summary .summary-headline .label[administrator-dashboard-component] {
                opacity: 0.75;
            }

            .tile-school-year-summary .school-year-summary .summary-headline *[administrator-dashboard-component] {
                color: inherit;
            }

        .tile-school-year-summary .school-year-summary .summary-meta[administrator-dashboard-component] {
            display: flex;
            padding: 10px 15px;
        }

            .tile-school-year-summary .school-year-summary .summary-meta > *[administrator-dashboard-component] {
                overflow: hidden;
                width: 50%;
            }

            .tile-school-year-summary .school-year-summary .summary-meta .v-sep[administrator-dashboard-component] {
                flex: 0 0 1px;
                margin: 0 10px;
                background: var(--alpha-dark-2);
            }

        .tile-school-year-summary .school-year-summary .summary-grades[administrator-dashboard-component] {
            display: flex;
            align-items: center;
        }

            .tile-school-year-summary .school-year-summary .summary-grades .icons[administrator-dashboard-component] {
                flex: 0 0 auto;
                margin-right: 10px;
            }

            .tile-school-year-summary .school-year-summary .summary-grades .grades[administrator-dashboard-component] {
                overflow: hidden;
            }

            .tile-school-year-summary .school-year-summary .summary-grades .label--meta[administrator-dashboard-component] {
                margin-bottom: 3px;
            }

        .tile-school-year-summary .school-year-summary .btn[administrator-dashboard-component] {
            position: absolute;
            top: 15px;
            right: 15px;
        }

    .tile-school-year-summary .no-school-year[administrator-dashboard-component] {
        display: flex;
        min-height: 174px;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        text-align: center;
    }

    .tile-school-year-summary h2[administrator-dashboard-component] {
        font-size: 1.625rem;
    }

.layout--light.tile-school-year-summary[administrator-dashboard-component] {
    background: white;
}

.layout--dark.tile-school-year-summary[administrator-dashboard-component] {
    background: var(--alpha-light-1);
}

    .layout--dark.tile-school-year-summary .school-year-summary[administrator-dashboard-component] {
        position: relative;
    }

        .layout--dark.tile-school-year-summary .school-year-summary .summary-headline *[administrator-dashboard-component] {
            color: inherit;
        }

        .layout--dark.tile-school-year-summary .school-year-summary .summary-meta .v-sep[administrator-dashboard-component] {
            background: var(--alpha-light-2);
        }
/* /Pages/Admin/Dashboard/Components/Dashboard/Views/UsersSummaryTileView/UsersSummaryTile.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.tile-users-summary[administrator-dashboard-component] {
    display: flex;
    line-height: 1.4;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
    height: 77px;
    cursor: pointer;
}

    .tile-users-summary.summary--all[administrator-dashboard-component] {
        color: #ffffff;
        background-color: var(--green);
        box-shadow: 0 3px 6px rgba(39, 191, 129, 0.06);
    }

        .tile-users-summary.summary--all .summary-meta .label[administrator-dashboard-component],
        .tile-users-summary.summary--all .summary-label .label[administrator-dashboard-component] {
            opacity: 0.75;
        }

        .tile-users-summary.summary--all .summary-meta *[administrator-dashboard-component],
        .tile-users-summary.summary--all .summary-label *[administrator-dashboard-component] {
            color: inherit;
        }

        .tile-users-summary.summary--all .summary-label[administrator-dashboard-component] {
            padding: 10px 15px;
        }

    .tile-users-summary .summary-meta[administrator-dashboard-component],
    .tile-users-summary .summary-label[administrator-dashboard-component] {
        transition: all var(--transition-duration) ease 0s;
    }

    .tile-users-summary .summary-meta[administrator-dashboard-component] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        width: 68px;
        background: var(--alpha-dark-2);
    }

    .tile-users-summary .summary-label[administrator-dashboard-component] {
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
        padding: 15px;
    }

        .tile-users-summary .summary-label .btn[administrator-dashboard-component] {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(100%, -50%);
        }

    .tile-users-summary .summary-icon[administrator-dashboard-component] {
        position: relative;
        width: 43px;
        height: 43px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        border-radius: 50%;
    }

        .tile-users-summary .summary-icon .icon[administrator-dashboard-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            fill: var(--green);
        }

    .tile-users-summary .summary-count[administrator-dashboard-component] {
        font-size: 1.625rem;
        font-weight: 600;
    }

.layout--light.tile-users-summary[administrator-dashboard-component] {
    background: white;
}

    .layout--light.tile-users-summary.summary--all[administrator-dashboard-component] {
        background-color: var(--green);
    }    

    .layout--light.tile-users-summary .summary-meta[administrator-dashboard-component] {
        background: var(--alpha-dark-1);
    }

.layout--dark.tile-users-summary[administrator-dashboard-component] {
    background: var(--alpha-light-1);
}

    .layout--dark.tile-users-summary.summary--all[administrator-dashboard-component] {
        background-color: var(--green);
    }

        .layout--dark.tile-users-summary.summary--all .summary-meta .label[administrator-dashboard-component],
        .layout--dark.tile-users-summary.summary--all .summary-label .label[administrator-dashboard-component] {
            opacity: 0.75;
        }

        .layout--dark.tile-users-summary.summary--all .summary-meta *[administrator-dashboard-component],
        .layout--dark.tile-users-summary.summary--all .summary-label *[administrator-dashboard-component] {
            color: inherit;
        }

        .layout--dark.tile-users-summary.summary--all .summary-meta[administrator-dashboard-component] {
            background: var(--alpha-dark-2);
        }    

    .layout--dark.tile-users-summary .summary-meta[administrator-dashboard-component] {
        background: var(--alpha-light-1);
    }

    .layout--dark.tile-users-summary .summary-count[administrator-dashboard-component] {
        color: var(--grey-1);
    }
/* /Pages/Admin/Dashboard/Components/Dashboard/Views/UserSummaryTileView/UserSummaryTile.razor.rz.scp.css */
.tile-users-summary[administrator-dashboard-component] {
    cursor: pointer !important;
}
/* /Pages/Admin/Dashboard/Page/AdministratorDashboard.razor.rz.scp.css */
/* /Pages/Admin/SchoolAssets/Components/AddPremisesDialog/View/AddPremisesDialog.razor.rz.scp.css */
.title[add-premises-dialog-component] {
    width: 100%;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

h1[add-premises-dialog-component] {
    color: var(--grey-dark-2);
    font-family: var(--font-family);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.6px;
}
/* /Pages/Admin/SchoolAssets/Components/AddRoomDialog/View/AddRoomDialog.razor.rz.scp.css */
[add-room-dialog-component] .checkbox-group:first-child .items {
    border-radius: initial;
    border: initial;
}

    [add-room-dialog-component] .checkbox-group:first-child .items .item {
        width: fit-content;
        padding: 4px 0;
        border-bottom: initial;
        background: transparent;
    }

[add-room-dialog-component] .checkbox-group:first-child .selected-count {
    display: none;
}
/* /Pages/Admin/SchoolAssets/Components/EditPremises/View/EditPremises.razor.rz.scp.css */
.show-control-buttons[edit-premises-component] {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
/* /Pages/Admin/SchoolAssets/Components/EditRoomDialog/View/EditRoomDialog.razor.rz.scp.css */
[edit-room-dialog-component] .checkbox-group:first-child .items {
    border-radius: initial;
    border: initial;
}

    [edit-room-dialog-component] .checkbox-group:first-child .items .item {
        width: fit-content;
        padding: 4px 0;
        border-bottom: initial;
        background: transparent;
    }

[edit-room-dialog-component] .checkbox-group:first-child .selected-count {
    display: none;
}
/* /Pages/Admin/SchoolAssets/Components/Premises/View/NewPremisesCardView/NewPremisesCard.razor.rz.scp.css */
/* /Pages/Admin/SchoolAssets/Components/Premises/View/Premises.razor.rz.scp.css */
.tab-learning-premises:has(.builder-footer) .builder-main[premises-component] {
    max-height: initial;
}

.tab-learning-premises .view-2:has(.builder-footer) .builder-main[premises-component] {
    max-height: calc(100% - 64px);
}

@media all and (min-width: 1200px) {
    .tab-learning-premises .builder-main > .container[premises-component] {
        max-width: 1200px;
    }
}

.school-assets-builder .builder .builder-main .container[premises-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.school-assets-builder .builder .builder-main-body[premises-component] {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.panel-learning-premises[premises-component] {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

    .panel-learning-premises .panel-body[premises-component] {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px;
        border-radius: 4px;
        background: var(--alpha-dark-1);
    }

    .panel-learning-premises .panel-card[premises-component] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60vh;
        min-height: 550px;
        border-radius: 4px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    }

        .panel-learning-premises .panel-card.type--placeholder[premises-component] {
            border: 1px dashed var(--alpha-dark-2);
            box-shadow: none;
        }

@media all and (max-width: 992px) {
    .panel-learning-premises .panel-card.type--placeholder[premises-component] {
        height: initial;
        min-height: auto;
    }
}

.layout--dark .panel-learning-premises .panel-body[premises-component] {
    background: var(--alpha-dark-2);
}

.layout--dark .panel-learning-premises .panel-card.type--placeholder[premises-component] {
    border-color: var(--alpha-light-2);
}
/* /Pages/Admin/SchoolAssets/Components/Premises/View/PremisesTileView/View/PremisesTile.razor.rz.scp.css */
.learning-premises-list-rooms[premises-tile-component] {
    display: flex;
    flex-wrap: wrap;
    container-type: inline-size;
}

    .learning-premises-list-rooms .item-room[premises-tile-component] {
        padding: 5px;
        width: 100%;
        min-height: 120px;
        min-width: 120px;
        max-width: 100%;
        flex: 1 1 auto;
        aspect-ratio: 1/1;
    }

@container (min-width: 320px ) {
    .learning-premises-list-rooms .item-room[premises-tile-component] {
        width: 50%;
        max-width: 50%;
    }
}

@container (min-width: 400px ) {
    .learning-premises-list-rooms .item-room[premises-tile-component] {
        width: 33.3333333%;
        max-width: 33.3333333%;
    }
}

@container (min-width: 480px ) {
    .learning-premises-list-rooms .item-room[premises-tile-component] {
        width: 25%;
        max-width: 25%;
    }
}

@supports not (container-type: inline-size) {
    @media all and (min-width: 442px) {
        .learning-premises-list-rooms .item-room[premises-tile-component] {
            width: 50%;
            max-width: 50%;
        }
    }

    @media all and (min-width: 576px) {
        .learning-premises-list-rooms .item-room[premises-tile-component] {
            width: 33.3333333%;
            max-width: 33.3333333%;
        }
    }

    @media all and (min-width: 1200px) {
        .learning-premises-list-rooms .item-room[premises-tile-component] {
            padding: 10px;
            width: 25%;
            max-width: 25%;
        }
    }
}

.learning-premises-list-rooms .btn-room[premises-tile-component],
.learning-premises-list-rooms .btn-tile[premises-tile-component] {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.learning-premises-list-rooms .btn-room[premises-tile-component] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border-color: transparent;
    padding: 0;
}

    .learning-premises-list-rooms .btn-room:hover[premises-tile-component] {
        color: var(--green);
        border-color: var(--green);
        background: #ffffff;
    }

    .learning-premises-list-rooms .btn-room .title[premises-tile-component],
    .learning-premises-list-rooms .btn-room .label[premises-tile-component] {
        padding: 0 6px;
    }

    .learning-premises-list-rooms .btn-room .title[premises-tile-component] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        margin-top: 10%;
        margin-bottom: 0;
    }

    .learning-premises-list-rooms .btn-room .label[premises-tile-component] {
        min-height: 32px;
        max-width: 100%;
        line-height: 1.2;
        margin-bottom: 10px;
        overflow-wrap: break-word;
    }

.learning-premises-list-rooms .btn-tile[premises-tile-component] {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    border: none;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--green);
}

    .learning-premises-list-rooms .btn-tile .icon-wrapper[premises-tile-component] {
        position: relative;
        margin-top: 10px;
        width: 30px;
        height: 30px;
        background: currentColor;
        border-radius: 50%;
    }

        .learning-premises-list-rooms .btn-tile .icon-wrapper .icon[premises-tile-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--green);
        }

    .learning-premises-list-rooms .btn-tile:hover[premises-tile-component] {
        opacity: 0.9;
    }

.layout--dark .learning-premises-list-rooms .btn-room:hover[premises-tile-component] {
    background: var(--alpha-light-1);
}

.card-learning-premises[premises-tile-component] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border-radius: inherit;
    border: none;
}

    .card-learning-premises .btn-tile[premises-tile-component] {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        border: none;
        text-transform: uppercase;
        color: #ffffff;
        background: var(--green);
    }

        .card-learning-premises .btn-tile .icon-wrapper[premises-tile-component] {
            position: relative;
            margin-top: 10px;
            width: 30px;
            height: 30px;
            background: currentColor;
            border-radius: 50%;
        }

            .card-learning-premises .btn-tile .icon-wrapper .icon[premises-tile-component] {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--green);
            }

        .card-learning-premises .btn-tile:hover[premises-tile-component] {
            opacity: 0.9;
        }

.layout--light .card-learning-premises[premises-tile-component] {
    background: #ffffff;
}

.layout--dark .card-learning-premises[premises-tile-component] {
    background: var(--alpha-light-1);
}

.card-learning-premises.type--new[premises-tile-component] {
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 340px;
    margin: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

    .card-learning-premises.type--new .card-body[premises-tile-component] {
        padding: 10px;
    }

    .card-learning-premises.type--new .desc[premises-tile-component] {
        color: var(--grey-3);
    }

    .card-learning-premises.type--new .btn-tile[premises-tile-component] {
        width: 100%;
        min-height: 120px;
    }

.card-learning-premises.type--edit[premises-tile-component] {
    height: 100%;
}

    .card-learning-premises.type--edit .card-body[premises-tile-component] {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        background: var(--grey-light-1);
    }

    .card-learning-premises.type--edit .card-body-header[premises-tile-component] {
        padding: 14px 14px 4px;
    }

    .card-learning-premises.type--edit .scroll[premises-tile-component] {
        flex: 1 1 auto;
        min-height: 0;
    }

.layout--dark .card-learning-premises.type--edit .card-body[premises-tile-component] {
    background: var(--alpha-light-1);
}

.btn-tile[premises-tile-component] {
    text-wrap: wrap;
}
/* /Pages/Admin/SchoolAssets/Components/Premises/View/RoomTileView/View/RoomTile.razor.rz.scp.css */
/* /Pages/Admin/SchoolAssets/Components/RoomsTable/View/RoomsTable.razor.rz.scp.css */
.container[rooms-table-component] {
    width: 100%;
    height: 100%;
}

[rooms-table-component] .no-records-tr td {
    background: rgba(0, 0, 0, 0.08) !important;
}
/* /Pages/Admin/SchoolAssets/Page/AdministratorSchoolAssets.razor.rz.scp.css */
/* /Pages/Admin/SchoolAssets/Views/EditPremises/EditPremises.razor.rz.scp.css */
@media all and (min-width: 1200px) {
    .tab-learning-premises .builder-main > .container[edit-premises-component] {
        max-width: 1200px;
    }
}

.school-assets-builder .builder .builder-main .container[edit-premises-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.school-assets-builder .builder .builder-main-body[edit-premises-component] {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tab-learning-premises:has(.builder-footer) .builder-main[edit-premises-component] {
    max-height: initial;
}

.tab-learning-premises .view-2:has(.builder-footer) .builder-main[edit-premises-component] {
    max-height: calc(100% - 64px);
}

@media all and (min-width: 1200px) {
    .tab-learning-premises .builder-main > .container[edit-premises-component] {
        max-width: 1200px;
    }
}
/* /Pages/Admin/SchoolYears/Common/Views/AllCourses/AllCourses.razor.rz.scp.css */
.panel.panel-select-classes .panel-header[all-classes-view] {
    margin-bottom: 0;
}

.panel-select-classes[all-classes-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .panel-select-classes > .card[all-classes-view],
    .panel-select-classes .tabs--alt[all-classes-view],
    .panel-select-classes .tabs-body[all-classes-view],
    .panel-select-classes .tabs-content[all-classes-view],
    .panel-select-classes .panel-body[all-classes-view],
    .panel-select-classes .list-select-classes[all-classes-view] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .panel-select-classes .panel-body-header[all-classes-view] {
        margin-bottom: 16px;
    }

    .panel-select-classes .tabs--alt > .tabs-header[all-classes-view] {
        margin-bottom: 0;
    }

    .panel-select-classes .list-select-classes .list-main[all-classes-view] {
        height: 100%;
    }

.layout--dark .panel-select-classes > .card[all-classes-view] {
    border-color: var(--alpha-light-2);
}

.course-container[all-classes-view] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    width: 100%;
    border: 1px solid var(--grey-light-3);
    border-radius: 8px;
}

.separator[all-classes-view] {
    margin: 10px 0;
}

.tabs-footer[all-classes-view]  .btn {
    height: 40px;
}
/* /Pages/Admin/SchoolYears/Common/Views/AssignedCourses/AssignedCourses.razor.rz.scp.css */
.panel.panel-select-classes .panel-header[assigned-classes-view] {
    margin-bottom: 0;
}

.panel-select-classes[assigned-classes-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .panel-select-classes > .card[assigned-classes-view],
    .panel-select-classes .tabs--alt[assigned-classes-view],
    .panel-select-classes .tabs-body[assigned-classes-view],
    .panel-select-classes .tabs-content[assigned-classes-view],
    .panel-select-classes .panel-body[assigned-classes-view],
    .panel-select-classes .list-select-classes[assigned-classes-view] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .panel-select-classes .panel-body-header[assigned-classes-view] {
        margin-bottom: 16px;
    }

    .panel-select-classes .tabs--alt > .tabs-header[assigned-classes-view] {
        margin-bottom: 0;
    }

    .panel-select-classes .list-select-classes .list-main[assigned-classes-view] {
        height: 100%;
    }

.layout--dark .panel-select-classes > .card[assigned-classes-view] {
    border-color: var(--alpha-light-2);
}

.course-container[assigned-classes-view] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    width: 100%;
    border: 1px solid var(--grey-light-3);
    border-radius: 8px;
}

.separator[assigned-classes-view] {
    margin: 10px 0;
}

.panel-footer[assigned-classes-view]  .btn {
    height: 40px;
}
/* /Pages/Admin/SchoolYears/Common/Views/CourseItem/CourseItem.razor.rz.scp.css */
.item[class-list-item-view] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

    .item:not(:last-of-type)[class-list-item-view] {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

.room-container[class-list-item-view] {
    display: flex;
    gap: 5px;
    align-items: center;
}

.item-class[class-list-item-view] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-duration) ease 0s;
}

    .item-class .field-check[class-list-item-view] {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .item-class.state--disabled[class-list-item-view] {
        pointer-events: none;
    }

        .item-class.state--disabled .checkmark[class-list-item-view] {
            opacity: 0;
        }

    .item-class:hover[class-list-item-view], .item-class:focus[class-list-item-view] {
        background: var(--alpha-dark-1);
    }

    .item-class .field-check .checkmark[class-list-item-view] {
        top: 0.2em;
        transform: none;
    }


.layout--light .list-select-classes .list-main-header[class-list-item-view] {
    background: var(--grey-light-1);
}

.layout--dark .list-select-classes .list-main[class-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .list-select-classes .list-main-header[class-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .item-class:hover[class-list-item-view], .layout--dark .item-class:focus[class-list-item-view] {
    background: var(--alpha-light-1);
}
/* /Pages/Admin/SchoolYears/Common/Views/CoursesList/CoursesList.razor.rz.scp.css */
.list-select-classes[class-list-view] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .list-select-classes.state--empty .list-main[class-list-view] {
        background: transparent;
    }

    .list-select-classes.state--empty .list[class-list-view] {
        display: none;
    }

    .list-select-classes.state--empty .list-empty[class-list-view] {
        display: flex;
    }

    .list-select-classes .list-main[class-list-view] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        overflow: hidden;
    }

    .list-select-classes .list-empty[class-list-view] {
        flex: 1 1 auto;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 30px;
    }

    .list-select-classes[class-list-view] .list-main-header ::deep.field-check,
    .list-select-classes[class-list-view] .item-class ::deep.field-check {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .list-select-classes[class-list-view] .list-main-header {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--alpha-dark-1);
        border-bottom: 1px solid var(--grey-light-3);
    }

        .list-select-classes[class-list-view] .list-main-header ::deep.btn {
            margin-right: -8px;
        }

    .list-select-classes .list[class-list-view] {
        flex: 1 1 auto;
        padding: 0 8px;
    }

    .list-select-classes .list-footer > *[class-list-view] {
        margin-top: 4px;
    }

    .list-select-classes .schedule-build-block[class-list-view] {
        flex-shrink: 0;
    }

.list-header[class-list-view]  .course-list-filter-container {
    border-bottom: none !important;
}

.list-main[class-list-view]  .list-main-header {
    height: 40px !important;
}
/* /Pages/Admin/SchoolYears/Common/Views/CoursesListFilter/CoursesListFilter.razor.rz.scp.css */
.course-list-filter-container[b-5x9wn3eqzu] {
    display: grid;
    grid-template-columns: 1fr  1fr 0.1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
    border-bottom: 1px solid var(--grey-light-3);
    padding-bottom: 10px;
    overflow: hidden;
    width: 100%;
}

.course-search[b-5x9wn3eqzu] {
    grid-row: 1/1;
    grid-column: 1/ span 3;
    padding: 0;
    width: auto;
}

    .course-search[b-5x9wn3eqzu] .search--small {
        padding: 0;
        z-index: unset !important;
    }

.course-filter-school-level[b-5x9wn3eqzu] {
    margin-right: 0.5rem;
    grid-row: 2/2;
    grid-column: 1/1;
}

.course-filter-grade-level[b-5x9wn3eqzu] {
    margin-right: 0.5rem;
    grid-row: 2/2;
    grid-column: 2/2;
}

.course-filter-subject[b-5x9wn3eqzu] {
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
    height: 38.5px;
    grid-row: 2/2;
    grid-column: 3/3;
}

    .course-filter-subject::deep .icon[b-5x9wn3eqzu] {
        height: 16px !important;
    }

    .course-filter-subject[b-5x9wn3eqzu]  .btn-filter .btn:hover {
        color: var(--green);
        background: transparent;
    }

[b-5x9wn3eqzu] .subjects-drop-down .menu-list {
    transform: translate(-113px, 0) !important;
}

[b-5x9wn3eqzu] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[b-5x9wn3eqzu] .loader-spinner {
    height: 32px !important;
}

[b-5x9wn3eqzu] .filter-drop-down {
    min-width: 190px;
}

[b-5x9wn3eqzu] .btn,
[b-5x9wn3eqzu] .search--small .search-field input {
    height: 38.5px;
}

[b-5x9wn3eqzu] .btn {
    max-height: none !important;
}

[b-5x9wn3eqzu] .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.course-list-filter-container[b-5x9wn3eqzu] .filter-drop-down {
    min-width: auto !important;
}
/* /Pages/Admin/SchoolYears/Common/Views/RoomConflictIndicator/RoomConflictIndicator.razor.rz.scp.css */
.tooltip-header-container[b-d2of027wh5] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}

.tooltip-header[b-d2of027wh5] {
    display: flex;
}

.tooltip-body[b-d2of027wh5] {
    width: fit-content;
    max-width: 20rem;
    height: fit-content;
    max-height: 10rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem;
    border: none;
    border-radius: 0.25rem;
    text-align: left;
    white-space: normal;
    background-color: var(--grey-dark-3);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

.tooltip-body-header[b-d2of027wh5] {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
}

.tooltip-body-message[b-d2of027wh5] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-light-2);
}

.conflict-counter[b-d2of027wh5] {
    font-size: 0.75rem;
    font-weight: 400;
    color: orange;
}
/* /Pages/Admin/SchoolYears/Components/AcademicSearchFilter/AcademicSearchFilter.razor.rz.scp.css */
.academic-search-filter[academic-search-filter-component] {
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.search-input-wrapper[academic-search-filter-component]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: 0 !important;
}

    .search-input-wrapper[academic-search-filter-component]  .search--small .search-field input {
        height: 39px;
        background: #fff;
        border: 1px solid var(--grey-light-3);
    }

.search-input-wrapper[academic-search-filter-component]  .btn {
    height: 36px;
}

.filter-wrapper[academic-search-filter-component] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-left: auto;
}

[academic-search-filter-component] .filter-drop-down {
    min-width: 190px;
}

[academic-search-filter-component] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[academic-search-filter-component] .loader-spinner {
    height: 32px !important;
}
/* /Pages/Admin/SchoolYears/Components/AddClassDialog/AddClassDialog.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* -----------
# ABSTRACT
----------- */
/* 1. MIXINS  */
/* 2. FUNCTIONS */
/** //////////////////////// Component Specific Styles ///////////////////////////////// */
/* ---------
# VIEWS
--------- */
/* 1. BUTTONS  */
/** 1.1 Base */
button[administrator-add-class-dialog-component],
input[type=submit][administrator-add-class-dialog-component],
input[type=button][administrator-add-class-dialog-component],
.btn[administrator-add-class-dialog-component] {
    font-size: 0.875rem;
    color: var(--grey-3);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1;
}

    button:hover[administrator-add-class-dialog-component], button.active[administrator-add-class-dialog-component],
    input[type=submit]:hover[administrator-add-class-dialog-component],
    input[type=submit].active[administrator-add-class-dialog-component],
    input[type=button]:hover[administrator-add-class-dialog-component],
    input[type=button].active[administrator-add-class-dialog-component],
    .btn:hover[administrator-add-class-dialog-component],
    .btn.active[administrator-add-class-dialog-component] {
        color: #ffffff;
        background: var(--green);
        border-color: transparent;
        outline: none;
    }

        button:hover .icon[administrator-add-class-dialog-component], button.active .icon[administrator-add-class-dialog-component],
        input[type=submit]:hover .icon[administrator-add-class-dialog-component],
        input[type=submit].active .icon[administrator-add-class-dialog-component],
        input[type=button]:hover .icon[administrator-add-class-dialog-component],
        input[type=button].active .icon[administrator-add-class-dialog-component],
        .btn:hover .icon[administrator-add-class-dialog-component],
        .btn.active .icon[administrator-add-class-dialog-component] {
            border-color: var(--green);
        }

    button.primary-color:hover[administrator-add-class-dialog-component], button.primary-color.active[administrator-add-class-dialog-component],
    input[type=submit].primary-color:hover[administrator-add-class-dialog-component],
    input[type=submit].primary-color.active[administrator-add-class-dialog-component],
    input[type=button].primary-color:hover[administrator-add-class-dialog-component],
    input[type=button].primary-color.active[administrator-add-class-dialog-component],
    .btn.primary-color:hover[administrator-add-class-dialog-component],
    .btn.primary-color.active[administrator-add-class-dialog-component] {
        color: #ffffff !important;
    }

    button .icon[administrator-add-class-dialog-component],
    input[type=submit] .icon[administrator-add-class-dialog-component],
    input[type=button] .icon[administrator-add-class-dialog-component],
    .btn .icon[administrator-add-class-dialog-component] {
        position: relative;
        top: 0;
        left: -0.25em;
        margin-right: 4px;
        display: inline-block;
        height: 1em;
        width: 1em;
        fill: currentColor;
        border-color: var(--grey-3);
        pointer-events: none;
    }

.layout--light button[administrator-add-class-dialog-component],
.layout--light input[type=submit][administrator-add-class-dialog-component],
.layout--light input[type=button][administrator-add-class-dialog-component], .layout--light.btn[administrator-add-class-dialog-component],
.layout--light .btn[administrator-add-class-dialog-component] {
    border-color: var(--grey-light-4);
    background: #ffffff;
}

    .layout--light button:hover[administrator-add-class-dialog-component], .layout--light button.active[administrator-add-class-dialog-component],
    .layout--light input[type=submit]:hover[administrator-add-class-dialog-component],
    .layout--light input[type=submit].active[administrator-add-class-dialog-component],
    .layout--light input[type=button]:hover[administrator-add-class-dialog-component],
    .layout--light input[type=button].active[administrator-add-class-dialog-component], .layout--light.btn:hover[administrator-add-class-dialog-component], .layout--light.btn.active[administrator-add-class-dialog-component],
    .layout--light .btn:hover[administrator-add-class-dialog-component],
    .layout--light .btn.active[administrator-add-class-dialog-component] {
        border-color: transparent;
        background: var(--green);
    }

.layout--light .btn--primary[administrator-add-class-dialog-component] {
    border-color: transparent;
    background: var(--green);
}

.layout--light .btn--notify[administrator-add-class-dialog-component]:before {
    border-color: var(--grey-light-1);
}

.layout--light .btn--link[administrator-add-class-dialog-component],
.layout--light .btn--text[administrator-add-class-dialog-component] {
    border-color: transparent;
    background: transparent;
}

    .layout--light .btn--text:hover[administrator-add-class-dialog-component], .layout--light .btn--text.active[administrator-add-class-dialog-component] {
        background: var(--alpha-dark-1);
    }

.layout--light .btn--light[administrator-add-class-dialog-component] {
    background: var(--grey-light-1);
}

.layout--light .btn--outline[administrator-add-class-dialog-component] {
    border-color: var(--green);
    background: transparent;
}

.layout--light .btn--disabled[administrator-add-class-dialog-component],
.layout--light .btn[disabled][administrator-add-class-dialog-component] {
    background: transparent;
    border-color: var(--grey-light-3);
}

    .layout--light .btn--disabled:hover[administrator-add-class-dialog-component],
    .layout--light .btn[disabled]:hover[administrator-add-class-dialog-component] {
        background: transparent;
        border-color: var(--grey-light-3);
    }

.layout--dark button[administrator-add-class-dialog-component],
.layout--dark input[type=submit][administrator-add-class-dialog-component],
.layout--dark input[type=button][administrator-add-class-dialog-component], .layout--dark.btn[administrator-add-class-dialog-component],
.layout--dark .btn[administrator-add-class-dialog-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark button:hover[administrator-add-class-dialog-component], .layout--dark button.active[administrator-add-class-dialog-component],
    .layout--dark input[type=submit]:hover[administrator-add-class-dialog-component],
    .layout--dark input[type=submit].active[administrator-add-class-dialog-component],
    .layout--dark input[type=button]:hover[administrator-add-class-dialog-component],
    .layout--dark input[type=button].active[administrator-add-class-dialog-component], .layout--dark.btn:hover[administrator-add-class-dialog-component], .layout--dark.btn.active[administrator-add-class-dialog-component],
    .layout--dark .btn:hover[administrator-add-class-dialog-component],
    .layout--dark .btn.active[administrator-add-class-dialog-component] {
        border-color: transparent;
        background: var(--green);
    }

        .layout--dark button:hover .icon[administrator-add-class-dialog-component], .layout--dark button.active .icon[administrator-add-class-dialog-component],
        .layout--dark input[type=submit]:hover .icon[administrator-add-class-dialog-component],
        .layout--dark input[type=submit].active .icon[administrator-add-class-dialog-component],
        .layout--dark input[type=button]:hover .icon[administrator-add-class-dialog-component],
        .layout--dark input[type=button].active .icon[administrator-add-class-dialog-component], .layout--dark.btn:hover .icon[administrator-add-class-dialog-component], .layout--dark.btn.active .icon[administrator-add-class-dialog-component],
        .layout--dark .btn:hover .icon[administrator-add-class-dialog-component],
        .layout--dark .btn.active .icon[administrator-add-class-dialog-component] {
            border-color: var(--green);
        }

    .layout--dark button .icon[administrator-add-class-dialog-component],
    .layout--dark input[type=submit] .icon[administrator-add-class-dialog-component],
    .layout--dark input[type=button] .icon[administrator-add-class-dialog-component], .layout--dark.btn .icon[administrator-add-class-dialog-component],
    .layout--dark .btn .icon[administrator-add-class-dialog-component] {
        border-color: var(--grey-3);
    }

.layout--dark .btn--primary[administrator-add-class-dialog-component] {
    border-color: transparent;
    background: var(--green);
}

.layout--dark .btn--notify[administrator-add-class-dialog-component]:before {
    border-color: var(--grey-dark-3);
}

.layout--dark .btn--link[administrator-add-class-dialog-component],
.layout--dark .btn--text[administrator-add-class-dialog-component] {
    border-color: transparent;
    background: transparent;
}

    .layout--dark .btn--text:hover[administrator-add-class-dialog-component], .layout--dark .btn--text.active[administrator-add-class-dialog-component] {
        background: var(--alpha-light-1);
    }

.layout--dark .btn--outline[administrator-add-class-dialog-component] {
    border-color: var(--green);
    background: transparent;
}

.layout--dark .btn--disabled[administrator-add-class-dialog-component],
.layout--dark .btn[disabled][administrator-add-class-dialog-component] {
    color: var(--grey-dark-2);
    background: transparent;
    border-color: var(--grey-dark-2);
}

    .layout--dark .btn--disabled:hover[administrator-add-class-dialog-component],
    .layout--dark .btn[disabled]:hover[administrator-add-class-dialog-component] {
        color: var(--grey-dark-2);
        background: transparent;
        border-color: var(--grey-dark-2);
    }

/** 1.1.1 Primary */
.btn--primary[administrator-add-class-dialog-component] {
    padding: 8px 12px;
    color: #ffffff;
    border-color: transparent;
    background: var(--green);
}

    .btn--primary:hover[administrator-add-class-dialog-component], .btn--primary.active[administrator-add-class-dialog-component] {
        opacity: 0.9;
    }

/** 1.1.2 Secondary */
.btn--secondary[administrator-add-class-dialog-component] {
    padding: 8px 12px;
    background: #ffffff;
}

    .btn--secondary.btn--link[administrator-add-class-dialog-component] {
        color: var(--grey-3);
    }

        .btn--secondary.btn--link:hover[administrator-add-class-dialog-component] {
            background: var(--alpha-dark-1);
        }

        .btn--secondary.btn--link[disabled][administrator-add-class-dialog-component] {
            border: none;
        }

.layout--dark .btn--secondary.btn--link:hover[administrator-add-class-dialog-component] {
    background: var(--alpha-light-1);
}

/** 1.1.3 Ternary */
.btn--ternary[administrator-add-class-dialog-component] {
    background: var(--alpha-dark-1);
}

    .btn--ternary:hover[administrator-add-class-dialog-component], .btn--ternary:focus[administrator-add-class-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .btn--ternary.active[administrator-add-class-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--light .btn--ternary[administrator-add-class-dialog-component] {
    background: var(--alpha-dark-1);
}

    .layout--light .btn--ternary:hover[administrator-add-class-dialog-component], .layout--light .btn--ternary:focus[administrator-add-class-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .layout--light .btn--ternary.active[administrator-add-class-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--dark .btn--ternary[administrator-add-class-dialog-component] {
    background: var(--grey-dark-2);
}

    .layout--dark .btn--ternary:hover[administrator-add-class-dialog-component] {
        color: var(--grey-light-4);
        background: var(--grey-dark-1);
    }

    .layout--dark .btn--ternary.active[administrator-add-class-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-4);
    }

/** 1.1.4 Modifiers */
.btn--notify[administrator-add-class-dialog-component] {
    position: relative;
}

    .btn--notify[administrator-add-class-dialog-component]:before {
        position: absolute;
        top: 4px;
        right: 4px;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background: var(--green);
        z-index: 1;
    }

.btn--light[administrator-add-class-dialog-component] {
    background: var(--grey-light-1);
    border-color: var(--grey-light-4);
}

.btn--dark[administrator-add-class-dialog-component] {
    background: var(--grey-dark-2);
    border-color: var(--grey-dark-1);
}

.btn--outline[administrator-add-class-dialog-component] {
    color: var(--green);
    background: transparent;
    border-color: var(--green);
}

.btn--rounded[administrator-add-class-dialog-component] {
    padding: 8px 25px;
    border-radius: 30px;
}

.btn--link[administrator-add-class-dialog-component] {
    color: var(--green);
    background: transparent;
    border-color: transparent;
}

.btn--text[administrator-add-class-dialog-component] {
    color: var(--grey-3);
    background: transparent;
    border-color: transparent;
}

    .btn--text:hover[administrator-add-class-dialog-component], .btn--text.active[administrator-add-class-dialog-component] {
        color: var(--green);
        background: var(--alpha-dark-1);
    }

    .btn--text[disabled][administrator-add-class-dialog-component] {
        border: none;
    }

.btn--circle[administrator-add-class-dialog-component],
.btn--square[administrator-add-class-dialog-component] {
    position: relative;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

    .btn--circle .icon[administrator-add-class-dialog-component],
    .btn--square .icon[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.btn--circle[administrator-add-class-dialog-component] {
    border-radius: 50%;
}

.btn--square[administrator-add-class-dialog-component] {
    border-radius: 4px;
}

.btn--disabled[administrator-add-class-dialog-component],
.btn[disabled][administrator-add-class-dialog-component] {
    color: var(--grey-light-4);
    background: transparent;
    border-color: var(--grey-light-3);
    cursor: not-allowed;
}

    .btn--disabled:hover[administrator-add-class-dialog-component],
    .btn[disabled]:hover[administrator-add-class-dialog-component] {
        color: var(--grey-light-4);
        background: transparent;
        border-color: var(--grey-light-3);
    }

.btn-inner[administrator-add-class-dialog-component] {
    display: inline-block;
    padding: 3px;
    background: var(--grey-light-3);
    line-height: 0;
}

    .btn-inner.btn-inner--circle[administrator-add-class-dialog-component] {
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

        .btn-inner.btn-inner--circle .btn[administrator-add-class-dialog-component] {
            width: 24px;
            height: 24px;
        }

    .btn-inner .btn[administrator-add-class-dialog-component] {
        border: none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

.btn--success[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--success:hover[administrator-add-class-dialog-component], .btn--success.active[administrator-add-class-dialog-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--error[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--error:hover[administrator-add-class-dialog-component], .btn--error.active[administrator-add-class-dialog-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--activity[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-3) !important;
}

    .btn--activity:hover[administrator-add-class-dialog-component], .btn--activity.active[administrator-add-class-dialog-component] {
        background: var(--grey-3) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lesson[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--lesson:hover[administrator-add-class-dialog-component], .btn--lesson.active[administrator-add-class-dialog-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--test[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--test:hover[administrator-add-class-dialog-component], .btn--test.active[administrator-add-class-dialog-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--quiz[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--quiz:hover[administrator-add-class-dialog-component], .btn--quiz.active[administrator-add-class-dialog-component] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--project[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--project:hover[administrator-add-class-dialog-component], .btn--project.active[administrator-add-class-dialog-component] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--supplementary[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green-yellow) !important;
}

    .btn--supplementary:hover[administrator-add-class-dialog-component], .btn--supplementary.active[administrator-add-class-dialog-component] {
        background: var(--green-yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--field-trip[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--field-trip:hover[administrator-add-class-dialog-component], .btn--field-trip.active[administrator-add-class-dialog-component] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lab[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--lab:hover[administrator-add-class-dialog-component], .btn--lab.active[administrator-add-class-dialog-component] {
        background: var(--yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--student[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--student:hover[administrator-add-class-dialog-component], .btn--student.active[administrator-add-class-dialog-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--teacher[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--teacher:hover[administrator-add-class-dialog-component], .btn--teacher.active[administrator-add-class-dialog-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--parent[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--parent:hover[administrator-add-class-dialog-component], .btn--parent.active[administrator-add-class-dialog-component] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--admin[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--admin:hover[administrator-add-class-dialog-component], .btn--admin.active[administrator-add-class-dialog-component] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--audit[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--audit:hover[administrator-add-class-dialog-component], .btn--audit.active[administrator-add-class-dialog-component] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--meta[administrator-add-class-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-1) !important;
}

    .btn--meta:hover[administrator-add-class-dialog-component], .btn--meta.active[administrator-add-class-dialog-component] {
        background: var(--grey-1) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

/* 2. FORM */
/** 2.1 General */
.form .card[administrator-add-class-dialog-component] {
    padding: 0.3125rem 0.625rem;
}

.form .container.gutter .row > *[administrator-add-class-dialog-component] {
    padding: 0.3125rem 0.625rem;
}

/*input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='search'],
input[type='number']*/
[contenteditable][administrator-add-class-dialog-component]::-moz-selection, input[administrator-add-class-dialog-component]::-moz-selection {
    color: #ffffff;
    background: var(--green);
}

[contenteditable][administrator-add-class-dialog-component]::selection,
input[administrator-add-class-dialog-component]::selection {
    color: #ffffff;
    background: var(--green);
}

input[type=text].correct[administrator-add-class-dialog-component] {
    border: 2px solid var(--green);
}

input[type=text].incorrect[administrator-add-class-dialog-component] {
    border: 2px solid var(--red);
}

textarea[administrator-add-class-dialog-component] {
    line-height: var(--line-height);
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
}

    textarea[administrator-add-class-dialog-component]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    textarea[administrator-add-class-dialog-component]::-webkit-scrollbar-track {
        background: transparent;
    }

    textarea[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        textarea[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    textarea[administrator-add-class-dialog-component]::-webkit-scrollbar-corner {
        background: transparent;
    }

.field[administrator-add-class-dialog-component] {
    color: var(--grey-dark-3);
    padding: 12px 12px 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    width: 100%;
    font-size: 0.875em;
}

    .field:focus[administrator-add-class-dialog-component]::-moz-placeholder {
        color: transparent;
    }

    .field:focus:-ms-input-placeholder[administrator-add-class-dialog-component] {
        color: transparent;
    }

    .field:focus[administrator-add-class-dialog-component]::placeholder {
        color: transparent;
    }

    .field:disabled[administrator-add-class-dialog-component] {
        background-color: transparent;
        opacity: 0.5;
    }

        .field:disabled ~ .btn[administrator-add-class-dialog-component] {
            border-color: transparent;
            background: transparent;
            color: var(--grey-light-4);
            cursor: default;
        }

    .field.field--blank[administrator-add-class-dialog-component] {
        width: auto;
    }

    .field[administrator-add-class-dialog-component]::-moz-placeholder {
        -moz-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field:-ms-input-placeholder[administrator-add-class-dialog-component] {
        -ms-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field[administrator-add-class-dialog-component]::placeholder {
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

.field-group.valid .required[administrator-add-class-dialog-component]::after {
    color: var(--green);
}

.field-group.valid .field[administrator-add-class-dialog-component] {
    border-bottom-width: 2px;
    border-bottom-color: var(--green);
}

.field-group.invalid .required[administrator-add-class-dialog-component]::after {
    color: var(--red);
}

.field-group.invalid .field[administrator-add-class-dialog-component] {
    border-bottom-width: 2px;
    border-bottom-color: var(--red);
}

.field-group.invalid .response[administrator-add-class-dialog-component] {
    margin: 4px 0 0 8px;
    height: auto;
    opacity: 1;
}

.field-group label[administrator-add-class-dialog-component] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

    .field-group label.field-file[administrator-add-class-dialog-component] {
        display: inline-block;
    }

.field-group .required[administrator-add-class-dialog-component]::after {
    margin-left: 0.2em;
    content: "*";
    color: var(--green);
}

.field-group .response[administrator-add-class-dialog-component] {
    color: var(--red);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.125em;
    opacity: 0;
    height: 0;
    transition: all var(--transition-duration) ease 0s;
}

.layout--dark .field[administrator-add-class-dialog-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background-color: var(--grey-dark-4);
}

    .layout--dark .field:focus[administrator-add-class-dialog-component]::-moz-placeholder {
        color: transparent;
    }

    .layout--dark .field:focus:-ms-input-placeholder[administrator-add-class-dialog-component] {
        color: transparent;
    }

    .layout--dark .field:focus[administrator-add-class-dialog-component]::placeholder {
        color: transparent;
    }

    .layout--dark .field:disabled[administrator-add-class-dialog-component] {
        opacity: 0.3;
    }

        .layout--dark .field:disabled ~ .btn[administrator-add-class-dialog-component] {
            color: var(--grey-dark-3);
        }
    
    .layout--dark .field[administrator-add-class-dialog-component]::-moz-placeholder {
        color: var(--grey-dark-1);
    }

    .layout--dark .field:-ms-input-placeholder[administrator-add-class-dialog-component] {
        color: var(--grey-dark-1);
    }

    .layout--dark .field[administrator-add-class-dialog-component]::placeholder {
        color: var(--grey-dark-1);
    }

/** 2.1.1 Radio, Checkbox, File, Switch */
.field-check[administrator-add-class-dialog-component],
.field-file[administrator-add-class-dialog-component] {
    position: relative;
}

    .field-check input[type=radio][administrator-add-class-dialog-component],
    .field-check input[type=checkbox][administrator-add-class-dialog-component],
    .field-check input[type=file][administrator-add-class-dialog-component],
    .field-file input[type=radio][administrator-add-class-dialog-component],
    .field-file input[type=checkbox][administrator-add-class-dialog-component],
    .field-file input[type=file][administrator-add-class-dialog-component] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.field-check[administrator-add-class-dialog-component] {
    padding-left: calc(1em + 12px);
    font-weight: var(--font-weight);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-check input[type=radio][administrator-add-class-dialog-component],
    .field-check input[type=checkbox][administrator-add-class-dialog-component] {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
    }

        .field-check input[type=radio]:checked ~ .radiomark[administrator-add-class-dialog-component] {
            border-color: var(--green);
        }

            .field-check input[type=radio]:checked ~ .radiomark[administrator-add-class-dialog-component]::before {
                opacity: 1;
            }

        .field-check input[type=checkbox]:checked ~ .checkmark[administrator-add-class-dialog-component] {
            border-color: var(--green);
            background: var(--green);
        }

            .field-check input[type=checkbox]:checked ~ .checkmark .icon[administrator-add-class-dialog-component] {
                opacity: 1;
            }

        .field-check input[type=checkbox]:disabled ~ .checkmark[administrator-add-class-dialog-component] {
            border-color: var(--grey-light-4);
            background: var(--alpha-dark-1);
            color: var(--alpha-dark-2);
        }

    .field-check .radiomark[administrator-add-class-dialog-component],
    .field-check .checkmark[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
        pointer-events: none;
    }

    .field-check .radiomark[administrator-add-class-dialog-component] {
        border-radius: 50%;
    }

        .field-check .radiomark[administrator-add-class-dialog-component]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            display: block;
            width: 0.725em;
            height: 0.725em;
            border-radius: inherit;
            background: var(--green);
            opacity: 0;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-check .checkmark[administrator-add-class-dialog-component] {
        border-radius: 4px;
        color: #ffffff;
    }

        .field-check .checkmark .icon[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-height: 9px;
            height: 0.6em;
            opacity: 0;
        }

.success .field-check input[type=checkbox]:checked ~ .checkmark[administrator-add-class-dialog-component] {
    border-color: var(--green);
    background: var(--green);
}

.error .field-check input[type=checkbox]:checked ~ .checkmark[administrator-add-class-dialog-component] {
    border-color: var(--red);
    background: var(--red);
}

.layout--dark .field-check input[type=checkbox]:disabled ~ .checkmark[administrator-add-class-dialog-component] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
    color: var(--alpha-light-2);
}

.layout--dark .field-check .radiomark[administrator-add-class-dialog-component],
.layout--dark .field-check .checkmark[administrator-add-class-dialog-component] {
    background: transparent;
    border-color: var(--grey-dark-1);
}

.layout--dark .field-check .checkmark[administrator-add-class-dialog-component] {
    color: var(--grey-dark-6);
}

/** 2.1.2 Field Checkbox */
.field-checkbox[administrator-add-class-dialog-component] {
    position: relative;
    display: inline-block;
    font-size: 0.675rem;
    font-weight: var(--font-weight);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

    .field-checkbox input[type=radio][administrator-add-class-dialog-component] {
        position: absolute;
        opacity: 0;
    }

        .field-checkbox input[type=radio]:checked ~ .checkmark .icon .check[administrator-add-class-dialog-component] {
            stroke-dashoffset: 0;
        }

    .field-checkbox .checkmark .icon[administrator-add-class-dialog-component],
    .field-checkbox .checkmark-readonly .icon[administrator-add-class-dialog-component] {
        min-height: 9px;
        height: 0.6em;
    }

        .field-checkbox .checkmark .icon .check[administrator-add-class-dialog-component],
        .field-checkbox .checkmark-readonly .icon .check[administrator-add-class-dialog-component] {
            transition: all var(--transition-duration) ease 0s;
            fill: none;
            stroke: currentColor;
            stroke-miterlimit: 10;
            stroke-dasharray: 25;
            stroke-width: 1.8;
        }

        .field-checkbox .checkmark .icon .check[administrator-add-class-dialog-component] {
            stroke-dashoffset: 25;
        }

        .field-checkbox .checkmark-readonly .icon .check[administrator-add-class-dialog-component] {
            stroke-dashoffset: 0;
        }

    .field-checkbox > .checkmark[administrator-add-class-dialog-component] {
        position: relative;
        display: block;
        width: 27px;
        height: 27px;
        border-radius: 4px;
        color: var(--green);
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
    }

        .field-checkbox > .checkmark .icon[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .field-checkbox > .checkmark .icon .check[administrator-add-class-dialog-component] {
                stroke-dashoffset: 25;
            }

/** 2.1.3 Field File */
.field-file[administrator-add-class-dialog-component] {
    display: inline-block;
}

    .field-file input[type=file][administrator-add-class-dialog-component] {
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

        .field-file input[type=file]:hover ~ .btn[administrator-add-class-dialog-component], .field-file input[type=file]:focus ~ .btn[administrator-add-class-dialog-component] {
            color: #ffffff !important;
            background: var(--green);
            border-color: var(--green);
        }

        .field-file input[type=file]:disabled[administrator-add-class-dialog-component] {
            display: none;
        }

            .field-file input[type=file]:disabled ~ .btn[administrator-add-class-dialog-component] {
                color: var(--grey-light-4) !important;
                background: transparent;
                border-color: var(--grey-light-3);
                cursor: not-allowed;
            }

.layout--dark .field-file input[type=file]:disabled ~ .btn[administrator-add-class-dialog-component] {
    opacity: 0.125;
}

.browse-file ul li[administrator-add-class-dialog-component] {
    margin-bottom: 6px;
}

/** 2.1.4 Date, Time */
.field-date[administrator-add-class-dialog-component],
.field-time[administrator-add-class-dialog-component],
.field-url[administrator-add-class-dialog-component] {
    position: relative;
}

    .field-date .field[administrator-add-class-dialog-component],
    .field-time .field[administrator-add-class-dialog-component],
    .field-url .field[administrator-add-class-dialog-component] {
        letter-spacing: 0.025em;
    }

        .field-date .field:focus ~ .btn[administrator-add-class-dialog-component],
        .field-time .field:focus ~ .btn[administrator-add-class-dialog-component],
        .field-url .field:focus ~ .btn[administrator-add-class-dialog-component] {
            color: #ffffff;
            background: var(--green) !important;
        }

    .field-date .btn[administrator-add-class-dialog-component],
    .field-time .btn[administrator-add-class-dialog-component],
    .field-url .btn[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
    }

.layout--dark .field-date[administrator-add-class-dialog-component],
.layout--dark .field-time[administrator-add-class-dialog-component],
.layout--dark .field-url[administrator-add-class-dialog-component] {
    position: relative;
}

    .layout--dark .field-date .field:focus[administrator-add-class-dialog-component],
    .layout--dark .field-time .field:focus[administrator-add-class-dialog-component],
    .layout--dark .field-url .field:focus[administrator-add-class-dialog-component] {
        border-bottom-width: 1px;
        border-bottom-color: var(--grey-dark-1);
    }

/** 2.1.5 Field Readonly  */
.field-readonly[administrator-add-class-dialog-component] {
    display: inline-block;
    font-size: 0.875em;
}

    .field-readonly label[administrator-add-class-dialog-component] {
        font-weight: 600;
    }

    .field-readonly input[administrator-add-class-dialog-component] {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        min-width: 36px;
        width: 100%;
        max-width: 60px;
        text-align: center;
    }

.layout--dark .field-readonly input[administrator-add-class-dialog-component] {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

/** 2.1.6 Field Renge*/
.field-range.range--drag .range-slider .range-slider-track .range-slider-track-value[administrator-add-class-dialog-component] {
    transition: none;
}

.field-range label[administrator-add-class-dialog-component] {
    font-size: 0.875rem;
}

.field-range .range[administrator-add-class-dialog-component] {
    margin-top: -4px;
    display: flex;
    align-items: center;
}

    .field-range .range:hover .range-inputs .range-input[administrator-add-class-dialog-component], .field-range .range:focus .range-inputs .range-input[administrator-add-class-dialog-component] {
        border-color: var(--green);
    }

.field-range .range-inputs[administrator-add-class-dialog-component] {
    margin-left: 10px;
}

    .field-range .range-inputs .range-input[administrator-add-class-dialog-component] {
        padding: 4px;
        width: 44px;
        color: var(--grey-3);
        font-size: 0.875rem;
        text-align: center;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-range .range-inputs .range-input:focus[administrator-add-class-dialog-component] {
            border-color: var(--green);
        }

    .field-range .range-inputs [type=range][administrator-add-class-dialog-component] {
        display: none;
    }

.field-range .range-slider[administrator-add-class-dialog-component] {
    position: relative;
    height: 30px;
    min-width: 100px;
    width: 100%;
    flex: 1 1 100px;
    cursor: pointer;
}

    .field-range .range-slider .range-slider-track[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1px;
        width: 100%;
        background: var(--alpha-dark-2);
    }

        .field-range .range-slider .range-slider-track .range-slider-track-value[administrator-add-class-dialog-component] {
            position: relative;
            height: 100%;
            width: 30%;
            background: var(--green);
            transition: all var(--transition-duration) ease 0s;
        }

    .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 26px;
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
    }

        .field-range .range-slider .range-slider-btn:hover[administrator-add-class-dialog-component]::before, .field-range .range-slider .range-slider-btn:focus[administrator-add-class-dialog-component]::before {
            transform: translate(-50%, -50%) scale(1.2);
        }

        .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component]::before, .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
            border: 2px solid var(--green);
            border-radius: inherit;
            transition: all var(--transition-duration) ease 0s;
        }

        .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component]::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--green);
            border-radius: inherit;
        }

        .field-range .range-slider .range-slider-btn.range-slider-btn--max[administrator-add-class-dialog-component] {
            left: initial;
            right: 0;
            transform: translate(50%, -50%);
        }

.layout--light .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component] {
    background: var(--grey-light-1);
}

.layout--dark .field-range .range-inputs .range-input[administrator-add-class-dialog-component] {
    color: var(--grey-1);
    border-color: var(--alpha-light-2);
    background: transparent;
}

    .layout--dark .field-range .range-inputs .range-input:focus[administrator-add-class-dialog-component] {
        border-color: var(--green);
    }

.layout--dark .field-range .range-slider .range-slider-track[administrator-add-class-dialog-component] {
    background: var(--alpha-light-2);
}

.layout--dark .field-range .range-slider .range-slider-btn[administrator-add-class-dialog-component] {
    background: var(--grey-dark-4);
}

/** 2.1.7 Field Letter */
.field-letter[administrator-add-class-dialog-component] {
    position: relative;
    padding-left: 2.25rem;
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
    cursor: default;
}

    .field-letter .lettermark[administrator-add-class-dialog-component],
    .field-letter input[administrator-add-class-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .field-letter input[administrator-add-class-dialog-component] {
        opacity: 0;
        z-index: 1;
    }

        .field-letter input:not([disabled])[administrator-add-class-dialog-component] {
            cursor: pointer;
        }

        .field-letter input:hover:not([disabled]) ~ .lettermark[administrator-add-class-dialog-component], .field-letter input:focus:not([disabled]) ~ .lettermark[administrator-add-class-dialog-component] {
            color: var(--green);
            border-color: var(--green);
        }

        .field-letter input:hover:not([disabled]):checked ~ .lettermark[administrator-add-class-dialog-component], .field-letter input:focus:not([disabled]):checked ~ .lettermark[administrator-add-class-dialog-component] {
            color: #ffffff;
        }

        .field-letter input:checked:hover ~ .lettermark[administrator-add-class-dialog-component], .field-letter input:checked:focus ~ .lettermark[administrator-add-class-dialog-component], .field-letter input.checked:hover ~ .lettermark[administrator-add-class-dialog-component], .field-letter input.checked:focus ~ .lettermark[administrator-add-class-dialog-component] {
            color: #ffffff;
        }

        .field-letter input:checked ~ .lettermark[administrator-add-class-dialog-component], .field-letter input.checked ~ .lettermark[administrator-add-class-dialog-component] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-letter .lettermark[administrator-add-class-dialog-component] {
        font-weight: 600;
        border: 1px solid var(--grey-1);
        transition: all var(--transition-duration) ease 0s;
    }

        .field-letter .lettermark > *[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

.error .field-letter input:hover:not([disabled]) ~ .lettermark[administrator-add-class-dialog-component], .error .field-letter input:focus:not([disabled]) ~ .lettermark[administrator-add-class-dialog-component] {
    color: var(--red);
    border-color: var(--red);
}

.error .field-letter input:checked:hover ~ .lettermark[administrator-add-class-dialog-component], .error .field-letter input:checked:focus ~ .lettermark[administrator-add-class-dialog-component], .error .field-letter input.checked:hover ~ .lettermark[administrator-add-class-dialog-component], .error .field-letter input.checked:focus ~ .lettermark[administrator-add-class-dialog-component] {
    color: #ffffff;
}

.error .field-letter input:checked ~ .lettermark[administrator-add-class-dialog-component], .error .field-letter input.checked ~ .lettermark[administrator-add-class-dialog-component] {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

.success .field-letter input:hover:not([disabled]) ~ .lettermark[administrator-add-class-dialog-component], .success .field-letter input:focus:not([disabled]) ~ .lettermark[administrator-add-class-dialog-component] {
    color: var(--green);
    border-color: var(--green);
}

.success .field-letter input:checked:hover ~ .lettermark[administrator-add-class-dialog-component], .success .field-letter input:checked:focus ~ .lettermark[administrator-add-class-dialog-component], .success .field-letter input.checked:hover ~ .lettermark[administrator-add-class-dialog-component], .success .field-letter input.checked:focus ~ .lettermark[administrator-add-class-dialog-component] {
    color: #ffffff;
}

.success .field-letter input:checked ~ .lettermark[administrator-add-class-dialog-component], .success .field-letter input.checked ~ .lettermark[administrator-add-class-dialog-component] {
    color: #ffffff;
    background: var(--green);
    border-color: var(--green);
}

/** 2.1.8 Field True False */
.field-true-false[administrator-add-class-dialog-component] {
    display: flex;
    align-items: center;
}

    .field-true-false .slash-sep[administrator-add-class-dialog-component] {
        font-size: 1.25em;
        margin: 4px;
    }

    .field-true-false .field-letter[administrator-add-class-dialog-component] {
        padding: 0;
    }

        .field-true-false .field-letter .lettermark[administrator-add-class-dialog-component] {
            position: relative;
            display: block;
        }

/** 2.1.9 Field Evaluate */
.field-evaluate[administrator-add-class-dialog-component] {
    position: relative;
    padding-left: 0.25rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: default;
    margin-bottom: 0;
    line-height: 0;
}

    .field-evaluate.success-color input:hover:not([disabled]) ~ .mark[administrator-add-class-dialog-component], .field-evaluate.success-color input:focus:not([disabled]) ~ .mark[administrator-add-class-dialog-component] {
        border-color: var(--green);
    }

    .field-evaluate.success-color input:checked ~ .mark[administrator-add-class-dialog-component] {
        color: #ffffff;
        background: var(--green);
        border-color: var(--green);
    }

    .field-evaluate.error-color input:hover:not([disabled]) ~ .mark[administrator-add-class-dialog-component], .field-evaluate.error-color input:focus:not([disabled]) ~ .mark[administrator-add-class-dialog-component] {
        border-color: var(--red);
    }

    .field-evaluate.error-color input:checked ~ .mark[administrator-add-class-dialog-component] {
        color: #ffffff;
        background: var(--red);
        border-color: var(--red);
    }

    .field-evaluate .mark[administrator-add-class-dialog-component],
    .field-evaluate input[administrator-add-class-dialog-component] {
        border-radius: 50%;
    }

    .field-evaluate input[administrator-add-class-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

        .field-evaluate input:checked ~ .mark[administrator-add-class-dialog-component] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-evaluate .mark[administrator-add-class-dialog-component] {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-evaluate .mark > *[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

/** 2.1.10 Input Blank */
.input-blank[administrator-add-class-dialog-component] {
    display: inline-block;
    padding: 0 4px;
    color: var(--green);
    background: transparent;
    border-bottom: 1px solid var(--green);
    outline: 0;
}

/** 2.3 Field Switch */
.field-switch[administrator-add-class-dialog-component],
.field-switch-small[administrator-add-class-dialog-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-switch label[administrator-add-class-dialog-component],
    .field-switch-small label[administrator-add-class-dialog-component] {
        display: inline-block;
        margin-right: 4px;
    }

    .field-switch input[type=checkbox][administrator-add-class-dialog-component],
    .field-switch-small input[type=checkbox][administrator-add-class-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .field-switch .switch-wrap[administrator-add-class-dialog-component],
    .field-switch-small .switch-wrap[administrator-add-class-dialog-component] {
        position: relative;
        display: inline-block;
    }

    .field-switch .switch[administrator-add-class-dialog-component],
    .field-switch-small .switch[administrator-add-class-dialog-component] {
        display: block;
    }

        .field-switch .switch .knob[administrator-add-class-dialog-component],
        .field-switch-small .switch .knob[administrator-add-class-dialog-component] {
            position: absolute;
            display: block;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
        }

        .field-switch .switch .state[administrator-add-class-dialog-component],
        .field-switch-small .switch .state[administrator-add-class-dialog-component] {
            display: block;
        }

.field-switch[administrator-add-class-dialog-component] {
    position: relative;
    line-height: var(--line-height);
}

    .field-switch hr[administrator-add-class-dialog-component] {
        margin: 4px 0 12px;
    }

    .field-switch .switch-wrap[administrator-add-class-dialog-component] {
        width: 64px;
    }

    .field-switch input[type=checkbox]:checked ~ .switch .knob[administrator-add-class-dialog-component] {
        left: calc(100% - 34px);
    }

        .field-switch input[type=checkbox]:checked ~ .switch .knob[administrator-add-class-dialog-component]::before {
            background: var(--green);
        }

    .field-switch input[type=checkbox]:checked ~ .switch .state[administrator-add-class-dialog-component] {
        color: #ffffff;
        background-color: var(--green);
    }

        .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(1)[administrator-add-class-dialog-component] {
            opacity: 1;
        }

        .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(2)[administrator-add-class-dialog-component] {
            opacity: 0;
        }

    .field-switch .switch .knob[administrator-add-class-dialog-component] {
        width: 34px;
        height: 34px;
        border: 1px solid var(--grey-light-3);
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        z-index: 1;
    }

        .field-switch .switch .knob[administrator-add-class-dialog-component]:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            width: 35%;
            height: 35%;
            border-radius: 50%;
            background: var(--grey-3);
        }

    .field-switch .switch .state[administrator-add-class-dialog-component] {
        width: 62px;
        padding: 2px 6px;
        color: var(--grey-3);
        font-size: 0.75rem;
        text-transform: uppercase;
        border: 1px solid var(--grey-light-3);
        border-radius: 30px;
        background-color: #ffffff;
    }

        .field-switch .switch .state[administrator-add-class-dialog-component]::after {
            display: table;
            content: "";
            clear: both;
        }

        .field-switch .switch .state *:nth-child(1)[administrator-add-class-dialog-component] {
            opacity: 0;
            float: left;
        }

        .field-switch .switch .state *:nth-child(2)[administrator-add-class-dialog-component] {
            opacity: 1;
            float: right;
        }

.field-switch-small .switch-wrap[administrator-add-class-dialog-component] {
    top: 0.2em;
}

.field-switch-small input[type=checkbox]:checked ~ .switch[administrator-add-class-dialog-component] {
    border-color: var(--green);
    background: var(--green);
}

    .field-switch-small input[type=checkbox]:checked ~ .switch .knob[administrator-add-class-dialog-component] {
        left: calc(100% - 14px);
        background: #ffffff;
    }

.field-switch-small .switch[administrator-add-class-dialog-component] {
    width: 32px;
    height: 16px;
    border-radius: 32px;
    border: 1px solid var(--grey-3);
}

    .field-switch-small .switch .knob[administrator-add-class-dialog-component] {
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--grey-3);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

.layout--dark .field-switch hr[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-3);
}

.layout--dark .field-switch .switch .knob[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .field-switch .switch .state[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .field-switch-small .switch[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-1);
}

/** 2.2 Dropdown Menu */
.field-menu[administrator-add-class-dialog-component],
.menu[administrator-add-class-dialog-component] {
    position: relative;
    display: inline-block;
    font-weight: 400;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-menu.open > .menu-header > .icon[administrator-add-class-dialog-component],
    .menu.open > .menu-header > .icon[administrator-add-class-dialog-component] {
        transform: rotate(90deg);
    }

    .field-menu.open > .menu-list[administrator-add-class-dialog-component],
    .menu.open > .menu-list[administrator-add-class-dialog-component] {
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
    }

    .field-menu.menu--headline > .menu-header [data-menu-option][administrator-add-class-dialog-component],
    .menu.menu--headline > .menu-header [data-menu-option][administrator-add-class-dialog-component] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--grey-dark-3);
    }

    .field-menu.menu--headline > .menu-header > .icon[administrator-add-class-dialog-component],
    .menu.menu--headline > .menu-header > .icon[administrator-add-class-dialog-component] {
        top: -0.25em;
    }

    .field-menu.menu--list-top .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-top .menu-list[administrator-add-class-dialog-component] {
        top: 0;
        transform: translate(0, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.open > .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-top.open > .menu-list[administrator-add-class-dialog-component] {
        transform: translate(0, calc(-100% - 8px));
    }

    .field-menu.menu--list-right .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-right .menu-list[administrator-add-class-dialog-component] {
        left: 100%;
        transform: translate(-100%, 10px);
    }

    .field-menu.menu--list-right.open > .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-right.open > .menu-list[administrator-add-class-dialog-component] {
        transform: translate(-100%, 0);
    }

    .field-menu.menu--list-top.menu--list-right .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-top.menu--list-right .menu-list[administrator-add-class-dialog-component] {
        top: 0;
        left: 100%;
        transform: translate(-100%, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.menu--list-right.open > .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-top.menu--list-right.open > .menu-list[administrator-add-class-dialog-component] {
        transform: translate(-100%, calc(-100% - 8px));
    }

    .field-menu.menu--list-ycenter .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-ycenter .menu-list[administrator-add-class-dialog-component] {
        top: calc(50% + 14px);
        transform: translate(0, -50%);
    }

    .field-menu.menu--list-ycenter.open > .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-ycenter.open > .menu-list[administrator-add-class-dialog-component] {
        top: calc(50% + 4px);
    }

    .field-menu.menu--list-xcenter .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-xcenter .menu-list[administrator-add-class-dialog-component] {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
    }

    .field-menu.menu--list-xcenter.open > .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-xcenter.open > .menu-list[administrator-add-class-dialog-component] {
        transform: translate(-50%, 0);
    }

    .field-menu.menu--list-center .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-center .menu-list[administrator-add-class-dialog-component] {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--list-center.open > .menu-list[administrator-add-class-dialog-component],
    .menu.menu--list-center.open > .menu-list[administrator-add-class-dialog-component] {
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--dark[administrator-add-class-dialog-component],
    .menu.menu--dark[administrator-add-class-dialog-component] {
        color: var(--grey-1);
    }

        .field-menu.menu--dark .menu-list[administrator-add-class-dialog-component],
        .menu.menu--dark .menu-list[administrator-add-class-dialog-component] {
            color: var(--grey-3);
            background: var(--grey-dark-4);
        }

        .field-menu.menu--dark .option:hover[administrator-add-class-dialog-component],
        .menu.menu--dark .option:hover[administrator-add-class-dialog-component] {
            color: var(--grey-1);
            background: var(--alpha-light-2);
        }

        .field-menu.menu--dark .option.option--checked[administrator-add-class-dialog-component],
        .menu.menu--dark .option.option--checked[administrator-add-class-dialog-component] {
            background: var(--alpha-light-1);
        }

    .field-menu label[administrator-add-class-dialog-component],
    .menu label[administrator-add-class-dialog-component] {
        margin-bottom: 0;
    }

    .field-menu .menu-header[administrator-add-class-dialog-component],
    .menu .menu-header[administrator-add-class-dialog-component] {
        display: inline-block;
        cursor: pointer;
        color: var(--grey-3);
        font-size: 0.875em;
    }

        .field-menu .menu-header:hover > .icon[administrator-add-class-dialog-component],
        .menu .menu-header:hover > .icon[administrator-add-class-dialog-component] {
            fill: var(--green);
        }

        .field-menu .menu-header > .icon[administrator-add-class-dialog-component],
        .menu .menu-header > .icon[administrator-add-class-dialog-component] {
            position: relative;
            top: -0.1em;
            height: 0.4em;
            margin-left: 0.125em;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-menu .menu-list[administrator-add-class-dialog-component],
    .menu .menu-list[administrator-add-class-dialog-component] {
        position: absolute;
        top: 100%;
        left: 0;
        transform: translate(0, 10px);
        display: inline-block;
        list-style: none;
        margin-top: 4px;
        padding-left: 0px;
        min-width: 150px;
        width: auto;
        max-width: 300px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        line-height: var(--line-height);
        z-index: 99;
        max-height: 50vh;
        
        scrollbar-color: var(--alpha-dark-1) transparent;
        
    }

        .field-menu .menu-list.scroll[administrator-add-class-dialog-component],
        .menu .menu-list.scroll[administrator-add-class-dialog-component] {
            padding: 0;
            height: auto;
            max-height: 200px;
            overflow-y: auto;
        }

        .field-menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar,
        .menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        .field-menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-track,
        .menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-track {
            background: transparent;
        }

        .field-menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb,
        .menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb {
            background: var(--alpha-dark-2);
        }

            .field-menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb:hover,
            .menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb:hover {
                background: var(--green);
            }

        .field-menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-corner,
        .menu .menu-list[administrator-add-class-dialog-component]::-webkit-scrollbar-corner {
            background: transparent;
        }

    .field-menu .field-check[administrator-add-class-dialog-component],
    .field-menu .option[administrator-add-class-dialog-component],
    .menu .field-check[administrator-add-class-dialog-component],
    .menu .option[administrator-add-class-dialog-component] {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: all var(--transition-duration) ease 0s;
    }

    .field-menu .option[administrator-add-class-dialog-component],
    .menu .option[administrator-add-class-dialog-component] {
        position: relative;
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-3);
        cursor: pointer;
    }

        .field-menu .option[class*=prefix][administrator-add-class-dialog-component],
        .menu .option[class*=prefix][administrator-add-class-dialog-component] {
            padding-left: 22px !important;
        }

            .field-menu .option[class*=prefix][administrator-add-class-dialog-component]::before,
            .menu .option[class*=prefix][administrator-add-class-dialog-component]::before {
                left: 8px;
            }

        .field-menu .option:hover[administrator-add-class-dialog-component],
        .menu .option:hover[administrator-add-class-dialog-component] {
            background-color: var(--grey-light-2);
        }

        .field-menu .option .icon[administrator-add-class-dialog-component],
        .menu .option .icon[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            right: 8px;
            height: 0.6em;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
            fill: var(--green);
            opacity: 0;
            pointer-events: none;
        }

        .field-menu .option.option--icon[administrator-add-class-dialog-component],
        .menu .option.option--icon[administrator-add-class-dialog-component] {
            padding: 8px 8px 8px 30px;
        }

            .field-menu .option.option--icon .icon[administrator-add-class-dialog-component],
            .menu .option.option--icon .icon[administrator-add-class-dialog-component] {
                right: initial;
                left: 8px;
                height: 1em;
                max-width: 1.125em;
                opacity: 1;
                fill: currentColor;
            }

        .field-menu .option.option--checked[administrator-add-class-dialog-component],
        .menu .option.option--checked[administrator-add-class-dialog-component] {
            color: var(--green);
            background: var(--grey-light-1);
        }

            .field-menu .option.option--checked .icon[administrator-add-class-dialog-component],
            .menu .option.option--checked .icon[administrator-add-class-dialog-component] {
                opacity: 1;
            }

    .field-menu.menu--dark .field-option input[type=radio]:checked ~ .option[administrator-add-class-dialog-component] {
        background: var(--alpha-light-1);
    }

    .field-menu .field-option[administrator-add-class-dialog-component] {
        position: relative;
        font-weight: var(--font-weight);
    }

        .field-menu .field-option input[type=radio][administrator-add-class-dialog-component] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

            .field-menu .field-option input[type=radio]:checked ~ .option[administrator-add-class-dialog-component] {
                color: var(--green);
                background: var(--grey-light-1);
            }

                .field-menu .field-option input[type=radio]:checked ~ .option .icon[administrator-add-class-dialog-component] {
                    opacity: 1;
                }

    .field-menu .field-check[administrator-add-class-dialog-component] {
        padding: 8px 8px 8px 30px;
    }

        .field-menu .field-check:hover[administrator-add-class-dialog-component] {
            background-color: var(--grey-light-2);
        }

        .field-menu .field-check .checkmark[administrator-add-class-dialog-component] {
            left: 8px;
        }

.field-option-checked[administrator-add-class-dialog-component] {
    color: var(--green) !important;
    background: var(--grey-light-1) !important;
}

.field-option-icon-checked[administrator-add-class-dialog-component] {
    opacity: 1 !important;
}

.layout--dark .field-menu .menu-header[administrator-add-class-dialog-component],
.layout--dark menu .menu-header[administrator-add-class-dialog-component] {
    color: var(--grey-1);
}

/** 2.2.1 More Options */
.menu--more.open .btn[administrator-add-class-dialog-component] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--more hr[administrator-add-class-dialog-component] {
    margin: 0;
}

.menu--more .menu-header[administrator-add-class-dialog-component] {
    position: relative;
}

    .menu--more .menu-header [data-menu-option][administrator-add-class-dialog-component] {
        visibility: hidden;
        display: block;
        width: 30px;
    }

    .menu--more .menu-header .btn[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(90deg);
    }

.layout--dark .menu--more.open .btn[administrator-add-class-dialog-component] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--more hr[administrator-add-class-dialog-component] {
    border-color: var(--grey-light-3);
}

/** 2.2.2 Select Options */
.menu--dropdown[administrator-add-class-dialog-component],
.menu--dropdown-search[administrator-add-class-dialog-component] {
    display: block;
}

    .menu--dropdown .menu-header[administrator-add-class-dialog-component],
    .menu--dropdown-search .menu-header[administrator-add-class-dialog-component] {
        position: relative;
        display: block;
    }

        .menu--dropdown .menu-header [data-menu-option][administrator-add-class-dialog-component],
        .menu--dropdown-search .menu-header [data-menu-option][administrator-add-class-dialog-component] {
            display: block;
            color: var(--grey-dark-3);
            background: #ffffff;
            padding: 8px 52px 8px 12px;
            border-radius: 4px;
            border: 1px solid var(--grey-light-3);
            max-height: 2.8em;
        }

        .menu--dropdown .menu-header .btn[administrator-add-class-dialog-component],
        .menu--dropdown-search .menu-header .btn[administrator-add-class-dialog-component] {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 40px;
            border-radius: 0 4px 4px 0;
            background: var(--grey-light-1);
        }

            .menu--dropdown .menu-header .btn .icon[administrator-add-class-dialog-component],
            .menu--dropdown-search .menu-header .btn .icon[administrator-add-class-dialog-component] {
                width: 0.8em;
                height: 0.8em;
            }

            .menu--dropdown .menu-header .btn:hover[administrator-add-class-dialog-component],
            .menu--dropdown-search .menu-header .btn:hover[administrator-add-class-dialog-component] {
                background: var(--green);
            }

            .menu--dropdown .menu-header .btn.btn--square .icon[administrator-add-class-dialog-component],
            .menu--dropdown-search .menu-header .btn.btn--square .icon[administrator-add-class-dialog-component] {
                width: auto;
                height: 0.3em;
            }

    .menu--dropdown .menu-list[administrator-add-class-dialog-component],
    .menu--dropdown-search .menu-list[administrator-add-class-dialog-component] {
        display: block;
        width: 100%;
        min-width: initial;
        max-width: initial;
    }

    .menu--dropdown-search .menu-list[administrator-add-class-dialog-component] {
        max-height: initial;
        overflow: hidden;
    }

.layout--dark .menu--dropdown .menu-header [data-menu-option][administrator-add-class-dialog-component],
.layout--dark .menu--dropdown-search .menu-header [data-menu-option][administrator-add-class-dialog-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .menu--dropdown .btn[administrator-add-class-dialog-component],
.layout--dark .menu--dropdown-search .btn[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .menu--dropdown-search .search-field .field[administrator-add-class-dialog-component] {
    color: var(--grey-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

/** 2.2.3 Filter Options */
.menu--filter.open .btn[administrator-add-class-dialog-component] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--filter .field-check[administrator-add-class-dialog-component] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.layout--dark .menu--filter.open .btn[administrator-add-class-dialog-component] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--filter .field-check .checkmark[administrator-add-class-dialog-component] {
    background: #ffffff;
    border-color: var(--grey-light-3);
    color: #ffffff;
}

/** 2.2.4 Calendar Options */
.menu--calendar .menu-header[administrator-add-class-dialog-component] {
    font-weight: 600;
}

    .menu--calendar .menu-header [data-menu-option][administrator-add-class-dialog-component] {
        color: var(--grey-dark-4);
    }

.layout--dark .menu--calendar .menu-header [data-menu-option][administrator-add-class-dialog-component] {
    color: var(--grey-1);
}

/** 2.2.5 Date Picker */
.menu--date-picker > .menu-header[administrator-add-class-dialog-component] {
    text-align: center;
    min-width: 178px;
}

    .menu--date-picker > .menu-header [data-menu-option][administrator-add-class-dialog-component] {
        color: var(--grey-dark-4);
    }

.menu--date-picker .menu-header[administrator-add-class-dialog-component] {
    font-weight: 600;
}

.menu--date-picker > .menu-list[administrator-add-class-dialog-component] {
    width: 100%;
    max-width: 300px !important;
    border-color: var(--grey-light-3);
    background: var(--grey-light-1);
    overflow: initial;
}

    .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[administrator-add-class-dialog-component] {
        color: var(--green);
        background: #ffffff;
    }

.menu--date-picker .field-calendar[administrator-add-class-dialog-component] {
    padding: 8px;
}

.menu--date-picker hr[administrator-add-class-dialog-component] {
    margin: 0 8px;
}

.layout--dark .menu--date-picker > .menu-list[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-2);
    background: var(--grey-dark-4);
}

    .layout--dark .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[administrator-add-class-dialog-component] {
        background: var(--alpha-light-2);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option:hover[administrator-add-class-dialog-component] {
        color: var(--grey-1);
        background: var(--alpha-light-1);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option.option--checked[administrator-add-class-dialog-component] {
        color: var(--green);
        background: var(--alpha-light-2);
    }

.layout--dark .menu--date-picker > .menu-header [data-menu-option][administrator-add-class-dialog-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-2);
    background: transparent;
}

/** 2.2.6 Menu Dropdown Small */
.menu--dropdown-small.open .menu-btn .icon[administrator-add-class-dialog-component] {
    transform: translateY(-50%) rotate(90deg);
}

.menu--dropdown-small .menu-btn[administrator-add-class-dialog-component] {
    padding: 8px 24px 8px 8px;
    font-size: 0.875rem;
    color: var(--grey-3);
    line-height: 1;
    background: var(--grey-light-1);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
}

    .menu--dropdown-small .menu-btn:hover[administrator-add-class-dialog-component], .menu--dropdown-small .menu-btn.active[administrator-add-class-dialog-component] {
        background: var(--alpha-dark-2);
    }

    .menu--dropdown-small .menu-btn .icon[administrator-add-class-dialog-component] {
        position: absolute;
        top: 50%;
        right: 8px;
        left: initial;
        transform: translateY(-50%);
        width: 12px;
        height: 6px;
        transition: all var(--transition-duration) ease 0s;
    }

.menu--dropdown-small hr[administrator-add-class-dialog-component] {
    margin: 0;
}

.layout--light .menu--dropdown-small .menu-btn[administrator-add-class-dialog-component] {
    background: #ffffff;
}

    .layout--light .menu--dropdown-small .menu-btn:hover[administrator-add-class-dialog-component], .layout--light .menu--dropdown-small .menu-btn.active[administrator-add-class-dialog-component] {
        background: var(--alpha-dark-1);
    }

.layout--dark .menu--dropdown-small .menu-btn[administrator-add-class-dialog-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .menu--dropdown-small .menu-btn:hover[administrator-add-class-dialog-component], .layout--dark .menu--dropdown-small .menu-btn.active[administrator-add-class-dialog-component] {
        background: var(--alpha-light-2);
    }

.layout--dark .menu--dropdown-small hr[administrator-add-class-dialog-component] {
    border-color: var(--grey-light-3);
}

/** 2.4 Search */
.search[administrator-add-class-dialog-component] {
    font-size: 1rem;
}

    .search .search-results[administrator-add-class-dialog-component] {
        display: none;
    }

/** 2.4.1 Search Small */
.search--small[administrator-add-class-dialog-component] {
    position: relative;
    padding: 6px 8px;
    background: var(--grey-light-2);
    z-index: 99;
}

    .search--small .search-field[administrator-add-class-dialog-component] {
        position: relative;
    }

        .search--small .search-field input[administrator-add-class-dialog-component] {
            padding: 8px 28px 6px;
            border-color: transparent;
            background: transparent;
            cursor: pointer;
        }

            .search--small .search-field input:focus[administrator-add-class-dialog-component] {
                border-width: 1px;
                border-color: transparent;
                cursor: initial;
                background: #ffffff;
            }

        .search--small .search-field .search-icon[administrator-add-class-dialog-component],
        .search--small .search-field .field-menu[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .search--small .search-field .search-icon[administrator-add-class-dialog-component] {
            left: 8px;
            width: 0.875em;
            line-height: 0;
            pointer-events: none;
        }

        .search--small .search-field .field-menu[administrator-add-class-dialog-component] {
            right: 0;
        }

            .search--small .search-field .field-menu.open .menu-list[administrator-add-class-dialog-component] {
                top: 70%;
            }

            .search--small .search-field .field-menu .menu-header .icon[administrator-add-class-dialog-component] {
                height: 0.4em;
            }

.layout--dark .search--small[administrator-add-class-dialog-component] {
    background: var(--grey-dark-4);
}

    .layout--dark .search--small .search-field[administrator-add-class-dialog-component] {
        border-color: var(--grey-dark-1);
        background-color: var(--grey-dark-4);
    }

        .layout--dark .search--small .search-field input:focus[administrator-add-class-dialog-component] {
            background: var(--grey-dark-5);
        }

/** 2.4.2 Search Filed Live */
.search--live[administrator-add-class-dialog-component] {
    position: relative;
}

    .search--live[data-view=search-results] .search-field[administrator-add-class-dialog-component] {
        z-index: 10;
    }

        .search--live[data-view=search-results] .search-field input[administrator-add-class-dialog-component] {
            border-radius: 4px 0 0 0;
        }

        .search--live[data-view=search-results] .search-field .btn[administrator-add-class-dialog-component] {
            border-radius: 0 4px 0 0;
        }

    .search--live[data-view=search-results] .search-results[administrator-add-class-dialog-component] {
        top: calc(100% - 1px);
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }

    .search--live .search-field[administrator-add-class-dialog-component] {
        position: relative;
        display: flex;
        z-index: 1;
    }

        .search--live .search-field input[administrator-add-class-dialog-component] {
            border-radius: 4px 0 0 4px;
        }

        .search--live .search-field .btn[administrator-add-class-dialog-component] {
            margin-left: -1px;
            width: 40px;
            height: 40px;
            font-size: 1em;
            border-radius: 0 4px 4px 0;
        }

    .search--live .search-results[administrator-add-class-dialog-component] {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 0 0 2px 2px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
    }

        .search--live .search-results .search-results-item[administrator-add-class-dialog-component] {
            display: flex;
            align-items: center;
            font-size: 0.875em;
            transition: all var(--transition-duration) ease 0s;
            padding: 5px 10px;
        }

            .search--live .search-results .search-results-item:not(:last-child)[administrator-add-class-dialog-component] {
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            .search--live .search-results .search-results-item.item--found[administrator-add-class-dialog-component] {
                cursor: pointer;
            }

                .search--live .search-results .search-results-item.item--found:hover[administrator-add-class-dialog-component], .search--live .search-results .search-results-item.item--found:focus[administrator-add-class-dialog-component] {
                    background: rgba(0, 0, 0, 0.025);
                }

                    .search--live .search-results .search-results-item.item--found:hover .result *[administrator-add-class-dialog-component], .search--live .search-results .search-results-item.item--found:focus .result *[administrator-add-class-dialog-component] {
                        color: var(--green);
                    }

            .search--live .search-results .search-results-item.item--no-result[administrator-add-class-dialog-component] {
                color: var(--grey-1);
            }

            .search--live .search-results .search-results-item .icon[administrator-add-class-dialog-component] {
                margin-right: 10px;
                height: 0.875em;
                color: var(--alpha-dark-2);
            }

            .search--live .search-results .search-results-item .result[administrator-add-class-dialog-component] {
                color: var(--grey-1);
            }

                .search--live .search-results .search-results-item .result *[administrator-add-class-dialog-component] {
                    transition: all var(--transition-duration) ease 0s;
                }

                .search--live .search-results .search-results-item .result > span[administrator-add-class-dialog-component] {
                    color: var(--grey-3);
                }

                .search--live .search-results .search-results-item .result strong[administrator-add-class-dialog-component] {
                    color: var(--grey-dark-4);
                }

.layout--dark .search--live .search-field .btn[administrator-add-class-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-3);
}

    .layout--dark .search--live .search-field .btn:hover[administrator-add-class-dialog-component], .layout--dark .search--live .search-field .btn:focus[administrator-add-class-dialog-component] {
        background: var(--green);
    }

/** 2.4.3 Search Filed Dropdown */
.search--dropdown .search-field[administrator-add-class-dialog-component] {
    padding: 0.625rem;
    background-color: var(--grey-light-1);
    border-bottom: 1px solid var(--grey-light-3);
}

.search--dropdown .search-results[administrator-add-class-dialog-component] {
    display: block;
}

    .search--dropdown .search-results.scroll[administrator-add-class-dialog-component] {
        padding: 0px;
        max-height: calc(50vh - 61px);
    }

    .search--dropdown .search-results .no-result[administrator-add-class-dialog-component] {
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-1);
    }

/* 13. MISC */
/** 13.11 Scroll */
.scroll[administrator-add-class-dialog-component] {
    width: 100%;
    height: 100%;
    padding: 0 4px;
    overflow: auto;
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
    /* Hide scrollbar but allow scrolling */
}

    .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-corner {
        background: transparent;
    }

    .scroll.scroll--hidden[administrator-add-class-dialog-component] {
        padding: 0;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

        .scroll.scroll--hidden[administrator-add-class-dialog-component]::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }

.layout--dark .scroll[administrator-add-class-dialog-component] {
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .layout--dark .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-light-2);
    }

        .layout--dark .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

/** Modifiers */
.shadow-edge-left[administrator-add-class-dialog-component],
.shadow-edge-right[administrator-add-class-dialog-component] {
    position: relative;
    overflow: hidden;
}

    .shadow-edge-left[administrator-add-class-dialog-component]::before, .shadow-edge-left[administrator-add-class-dialog-component]::after,
    .shadow-edge-right[administrator-add-class-dialog-component]::before,
    .shadow-edge-right[administrator-add-class-dialog-component]::after {
        position: absolute;
        top: 0;
        height: 100%;
        width: 1px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    }

    .shadow-edge-left[administrator-add-class-dialog-component]::before {
        content: "";
        left: -1px;
    }

    .shadow-edge-right[administrator-add-class-dialog-component]::after {
        content: "";
        right: -1px;
    }

/** 13.2 Label */
.label[administrator-add-class-dialog-component] {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
}

    .label.label--title[administrator-add-class-dialog-component], .label.label--meta[administrator-add-class-dialog-component], .label.label--status[administrator-add-class-dialog-component] {
        text-transform: uppercase;
        letter-spacing: 0.125em;
    }

    .label.label--meta[administrator-add-class-dialog-component], .label.label--status[administrator-add-class-dialog-component] {
        font-size: 0.75rem;
        color: var(--grey-1);
    }

    .label.label--icon[administrator-add-class-dialog-component] {
        position: relative;
        padding-left: 1.6em;
    }

        .label.label--icon .icon[administrator-add-class-dialog-component] {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-width: 1.25em;
            max-height: 1.25em;
        }

            .label.label--icon .icon.icon--sm[administrator-add-class-dialog-component] {
                max-width: 0.875em;
                max-height: 0.875em;
            }

    .label.label--menu[administrator-add-class-dialog-component] {
        font-weight: 600;
    }

        .label.label--menu[administrator-add-class-dialog-component]::after {
            content: "|";
            color: var(--grey-light-3);
            display: inline-block;
            margin: 0 0.375em 0 0.5em;
        }

    .label.label--status .label-value[administrator-add-class-dialog-component] {
        text-transform: none;
        letter-spacing: var(--letter-spacing);
    }

    .label.label--color[administrator-add-class-dialog-component] {
        position: relative;
        padding-bottom: 6px;
    }

        .label.label--color .label-color[administrator-add-class-dialog-component] {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            max-width: 50px;
            height: 4px;
            border-radius: 2px;
        }

/** Layout Theme */
.layout--dark .label.label--title[administrator-add-class-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .label.label--meta[administrator-add-class-dialog-component] {
    color: #616161;
}

.layout--dark .label.label--menu[administrator-add-class-dialog-component]::after {
    color: var(--alpha-light-2);
}

/** 13.8 Modal */
.modal[administrator-add-class-dialog-component] {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    direction: column;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    padding: 60px;
    z-index: 9999;
}

    .modal.open[administrator-add-class-dialog-component] {
        display: flex;
    }

    .modal.modal--lg .modal-body[administrator-add-class-dialog-component] {
        max-width: 1320px;
    }

    .modal.modal--md .modal-body[administrator-add-class-dialog-component] {
        max-width: 888px;
    }

    .modal.modal--sm .modal-body[administrator-add-class-dialog-component] {
        max-width: 696px;
    }

    .modal .modal-body[administrator-add-class-dialog-component] {
        position: relative;
        display: flex;
        padding: 0 60px;
        direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        z-index: 1;
        width: 100%;
    }

    .modal .modal-backdrop[administrator-add-class-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(82, 88, 96, 0.45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

/** 13.5 Dialog */
.dialog[administrator-add-class-dialog-component] {
    position: relative;
    transition: all var(--transition-duration) ease 0s;
}

    .dialog.dialog--arrow[administrator-add-class-dialog-component]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, 0) rotate(45deg);
        width: 12px;
        height: 12px;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-right: none;
        background: var(--grey-light-1);
    }

    .dialog.dialog--arrow.dialog--bottom[administrator-add-class-dialog-component]::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .dialog.dialog--arrow.dialog--top[administrator-add-class-dialog-component]::before {
        top: auto;
        bottom: 0;
        left: 50%;
        background: #ffffff;
        transform: translate(-50%, 50%) rotate(315deg);
    }

/** 13.5.1 Dialog Class Item */
.dialog--class-item[administrator-add-class-dialog-component] {
    width: 100%;
    max-width: 325px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

    .dialog--class-item.dialog--arrow[administrator-add-class-dialog-component]::before {
        top: 20px;
    }

    .dialog--class-item .dialog-header[administrator-add-class-dialog-component] {
        padding: 15px;
        border-bottom: 1px solid var(--grey-light-3);
        border-radius: 4px 4px 0 0;
        background: var(--grey-light-1);
    }

        .dialog--class-item .dialog-header .label--title[administrator-add-class-dialog-component] {
            margin-bottom: 8px;
        }

        .dialog--class-item .dialog-header .menu[administrator-add-class-dialog-component] {
            top: -4px;
            right: -6px;
        }

        .dialog--class-item .dialog-header .meta[administrator-add-class-dialog-component] {
            font-size: 0.75rem;
        }

    .dialog--class-item .dialog-body[administrator-add-class-dialog-component] {
        padding: 0 15px 7px;
    }

        .dialog--class-item .dialog-body > *[administrator-add-class-dialog-component] {
            margin: 8px 0;
        }

        .dialog--class-item .dialog-body ul li[administrator-add-class-dialog-component] {
            margin: 0.25rem 0;
        }

    .dialog--class-item .label[administrator-add-class-dialog-component] {
        font-size: 0.875rem;
    }

        .dialog--class-item .label.label--meta[administrator-add-class-dialog-component] {
            font-size: 0.75rem;
        }

    .dialog--class-item ul .label--icon[administrator-add-class-dialog-component] {
        font-size: 0.875rem;
    }

    .dialog--class-item ul label[administrator-add-class-dialog-component],
    .dialog--class-item ul .link[administrator-add-class-dialog-component] {
        font-size: 0.75rem;
    }

    .dialog--class-item ul label[administrator-add-class-dialog-component] {
        margin: 0.5em 0;
    }

.layout--dark .dialog--class-item h1[administrator-add-class-dialog-component], .layout--dark .dialog--class-item h2[administrator-add-class-dialog-component], .layout--dark .dialog--class-item h3[administrator-add-class-dialog-component], .layout--dark .dialog--class-item h4[administrator-add-class-dialog-component], .layout--dark .dialog--class-item h5[administrator-add-class-dialog-component], .layout--dark .dialog--class-item h6[administrator-add-class-dialog-component] {
    color: var(--grey-dark-3);
}

.layout--dark .dialog--class-item hr[administrator-add-class-dialog-component] {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta-group[administrator-add-class-dialog-component]:before {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta[administrator-add-class-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .label.label--title[administrator-add-class-dialog-component] {
    color: var(--grey-3);
}

.layout--dark .dialog--class-item .label.label--meta[administrator-add-class-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .field-check .radiomark[administrator-add-class-dialog-component],
.layout--dark .dialog--class-item .field-check .checkmark[administrator-add-class-dialog-component] {
    background: #ffffff;
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .field-check .checkmark[administrator-add-class-dialog-component] {
    color: #ffffff;
}

.layout--dark .dialog--class-item a.btn[administrator-add-class-dialog-component] {
    border-color: var(--grey-light-3);
    background: #ffffff;
}

    .layout--dark .dialog--class-item a.btn:hover[administrator-add-class-dialog-component], .layout--dark .dialog--class-item a.btn:focus[administrator-add-class-dialog-component], .layout--dark .dialog--class-item a.btn.active[administrator-add-class-dialog-component] {
        border-color: transparent;
        background: var(--green);
    }

.layout--dark .dialog--class-item .btn--text:hover[administrator-add-class-dialog-component], .layout--dark .dialog--class-item .btn--text:focus[administrator-add-class-dialog-component], .layout--dark .dialog--class-item .btn--text.active[administrator-add-class-dialog-component] {
    background: var(--alpha-dark-1);
}

.layout--dark .dialog--class-item .user .user-meta > *[administrator-add-class-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .avatar[administrator-add-class-dialog-component] {
    background: var(--grey-light-3);
}

    .layout--dark .dialog--class-item .avatar > .icon[administrator-add-class-dialog-component] {
        fill: var(--grey-1);
    }

/** 13.5.2 Dialog Standard */
.dialog--standard[administrator-add-class-dialog-component] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: var(--grey-light-2);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

    .dialog--standard .dialog-header[administrator-add-class-dialog-component],
    .dialog--standard .dialog-footer[administrator-add-class-dialog-component] {
        padding: 15px;
        min-height: 64px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dialog--standard .dialog-body[administrator-add-class-dialog-component] {
        flex: 1 1 auto;
        padding: 10px;
        height: 100%;
        overflow: hidden;
        border-top: 1px solid var(--grey-light-3);
        border-bottom: 1px solid var(--grey-light-3);
    }

        .dialog--standard .dialog-body .container.gutter[administrator-add-class-dialog-component] {
            padding: 0.625rem;
        }

        .dialog--standard .dialog-body .title[administrator-add-class-dialog-component] {
            margin: 0.625rem 0.875rem 0;
        }

        .dialog--standard .dialog-body .scroll[administrator-add-class-dialog-component] {
            flex: 1 1 auto;
            min-height: 0;
        }

.layout--dark .dialog--standard[administrator-add-class-dialog-component] {
    background: var(--grey-dark-4);
}

    .layout--dark .dialog--standard .dialog-body[administrator-add-class-dialog-component] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .dialog--standard .dialog-header[administrator-add-class-dialog-component],
    .layout--dark .dialog--standard .dialog-footer[administrator-add-class-dialog-component] {
        background: var(--alpha-light-1);
    }

/** 13.5.2 Dialog Class */
.dialog--class[administrator-add-class-dialog-component] {
    position: relative;
    width: 100%;
    max-width: 400px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

    .dialog--class.dialog--bottom[administrator-add-class-dialog-component], .dialog--class.dialog--top[administrator-add-class-dialog-component], .dialog--class.dialog--center[administrator-add-class-dialog-component] {
        position: relative;
        left: 50%;
    }

    .dialog--class.dialog--bottom[administrator-add-class-dialog-component] {
        transform: translate(-50%, 30px);
    }

    .dialog--class.dialog--top[administrator-add-class-dialog-component] {
        transform: translate(-50%, calc(-100% - 66px));
    }

    .dialog--class.dialog--center[administrator-add-class-dialog-component] {
        transform: translate(-50%, -50%);
    }

        .dialog--class.dialog--center.dialog--arrow[administrator-add-class-dialog-component]::before {
            content: none;
        }

    .dialog--class.dialog--arrow[administrator-add-class-dialog-component]::before {
        background: #f2f2f2;
    }

    .dialog--class .dialog-body[administrator-add-class-dialog-component] {
        height: 100%;
    }

        .dialog--class .dialog-body .summary-class-table[administrator-add-class-dialog-component] {
            height: 100%;
            margin: 0;
            border: none;
            border-radius: 4px 4px 0 0;
        }

            .dialog--class .dialog-body .summary-class-table .summary-class-table-header[administrator-add-class-dialog-component] {
                border-color: var(--grey-light-3);
                background: var(--alpha-dark-1);
            }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text:hover[administrator-add-class-dialog-component], .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text.active[administrator-add-class-dialog-component] {
                    background: var(--alpha-dark-1);
                }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .label[administrator-add-class-dialog-component] {
                    font-weight: 600;
                    color: var(--grey-dark-4);
                }

            .dialog--class .dialog-body .summary-class-table .meta[administrator-add-class-dialog-component] {
                color: var(--grey-3);
            }

        .dialog--class .dialog-body .table--summary .label[administrator-add-class-dialog-component] {
            color: var(--grey-1);
        }

        .dialog--class .dialog-body .table--summary td[administrator-add-class-dialog-component] {
            color: var(--grey-dark-4);
        }

        .dialog--class .dialog-body .table--summary th[administrator-add-class-dialog-component] {
            color: var(--grey-1);
            background: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table--summary tr:not(:last-child)[administrator-add-class-dialog-component] {
            border-color: #ffffff;
        }

        .dialog--class .dialog-body .table .th--highlight[administrator-add-class-dialog-component] {
            color: var(--green);
            background: #f4fcf9;
            border-color: #a8d7c4;
        }

        .dialog--class .dialog-body .table .td--link:hover[administrator-add-class-dialog-component] {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table .tr--highlight th[administrator-add-class-dialog-component] {
            background-color: var(--alpha-dark-2);
        }

        .dialog--class .dialog-body .table .tr--highlight td[administrator-add-class-dialog-component] {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .scroll[administrator-add-class-dialog-component] {
            scrollbar-color: var(--alpha-dark-1) transparent;
            padding: 1px 1px 1px 0;
        }

            .dialog--class .dialog-body .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb {
                background: var(--alpha-dark-2);
            }

                .dialog--class .dialog-body .scroll[administrator-add-class-dialog-component]::-webkit-scrollbar-thumb:hover {
                    background: var(--green);
                }
/*# sourceMappingURL=theme.css.map */
/* /Pages/Admin/SchoolYears/Components/AddClassDialog/Views/ClassDetails/ClassDetails.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/AddClassDialog/Views/ClassSchedule/ClassSchedule.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/AddClassDialog/Views/ClassStudentsList/ClassStudentsList.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/AddClassroomDialog/AddClassroomDialog.razor.rz.scp.css */
[preferred-classroom-dialog-view] .table-wrapper .table-wrapper-card {
    height: 70vh;
}
/* /Pages/Admin/SchoolYears/Components/AddNoSchoolDayDialog/AddNoSchoolDayDialog.razor.rz.scp.css */
[add-no-school-day-dialog] .dropdown-body {
    transform: none !important;
    position: fixed !important;
    top: 552px !important;
    left: 500px !important;
    z-index: 9999 !important;
}

[add-no-school-day-dialog] .no-school-day {
    overflow: hidden !important;
}
/* /Pages/Admin/SchoolYears/Components/AddNoSchoolDayDialog/Views/NoSchoolDay/NoSchoolDay.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/AddSchoolProgramsDialog/AddSchoolProgramsDialog.razor.rz.scp.css */
.body-content[add-school-programs-dialog-component] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
}

.add-program-dialog[add-school-programs-dialog-component] .modal-body {
    max-width: 768px !important;
}

.add-program-dialog[add-school-programs-dialog-component] .dialog-body {
    background: var(--grey-light-1);
}
/* /Pages/Admin/SchoolYears/Components/AddSchoolProgramsDialog/Views/Programs/Programs.razor.rz.scp.css */
.programs-container[programs-view] {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}
    .programs-container .programs-list-container[programs-view] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }
        .programs-container .programs-list-container .programs-list-info[programs-view] {
            display: flex;
            flex-direction: row;
            align-items: center;
            overflow: hidden;
            gap: 0.5rem;
        }
            .programs-container .programs-list-container .programs-list-info .info-title[programs-view] {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                word-wrap: break-word;
            }
            .programs-container .programs-list-container .programs-list-info .info-text-container[programs-view] {
                display: flex;
                gap: 0.25rem;
            }
                .programs-container .programs-list-container .programs-list-info .info-text-container .info-text[programs-view] {
                    font-weight: 400;
                    font-size: 0.75rem;
                    line-height: 0.75rem;
                    text-align: right;
                    color: var(--grey-1);
                }
/* /Pages/Admin/SchoolYears/Components/AddSchoolProgramsDialog/Views/ProgramsList/ProgramsList.razor.rz.scp.css */
.programs-list[programs-list-view] {
    display: flex;
    flex-direction: column;
    height: 36rem;
    padding: 0.625rem;
    gap: 0.625rem;
    background: var(--grey-light-1);
    border: 1px solid var(--grey-light-4);
    border-radius: 0.25rem;
}
    .programs-list .programs-list-search-container[programs-list-view] {
        width: 100%;
    }
        .programs-list .programs-list-search-container[programs-list-view]  .search--small {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.25rem;
            height: 2.5rem;
            padding: 0;
            background: white;
            border: 1px solid var(--grey-light-4);
            border-radius: 0.25rem;
            z-index: 0;
        }
            .programs-list .programs-list-search-container[programs-list-view]  .search--small .search-field {
                width: 100%;
            }
                .programs-list .programs-list-search-container[programs-list-view]  .search--small .search-field input {
                    padding: 0.5rem 0.5rem 0.5rem 1.75rem;
                }

    .programs-list .programs-list-filter-container[programs-list-view] {
        width: 100%;
    }

    .programs-list .programs-list-items-empty-container[programs-list-view] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .programs-list .programs-list-items-container[programs-list-view] {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: white;
        border: 1px solid var(--grey-light-4);
        border-radius: 0.25rem;
    }
        .programs-list .programs-list-items-container[programs-list-view]  .list-main-header {
            display: flex;
            align-items: center;
            justify-content: normal;
            height: 2.5rem;
            background: var(--grey-light-2);
            border-bottom: 1px solid var(--grey-light-4);
        }
            .programs-list .programs-list-items-container[programs-list-view]  .list-main-header .field-check {
                width: 100%;
                font-size: 0.875rem;
            }
            .programs-list .programs-list-items-container .programs-list-items[programs-list-view] {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                padding: 0.5rem;
            }
/* /Pages/Admin/SchoolYears/Components/AddSchoolProgramsDialog/Views/ProgramsListItem/ProgramsListItem.razor.rz.scp.css */
.programs-list-item[programs-list-item-view] {
    display: flex;
    align-items: center;
    width: 100%;
}
    .programs-list-item:not(:last-of-type)[programs-list-item-view] {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

    .programs-list-item .program-container[programs-list-item-view] {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        transition: all var(--transition-duration) ease 0s;
    }
        .programs-list-item .program-container:hover[programs-list-item-view] {
            background: var(--alpha-dark-1);
        }
        .programs-list-item .program-container[programs-list-item-view]  .field-check {
            padding-left: calc(1em + 1rem);
            margin-bottom: 0;
        }

.metadata-separator[programs-list-item-view] {
    width: 1px;
    height: 0.75rem;
    background-color: var(--grey-light-3);
}
/* /Pages/Admin/SchoolYears/Components/AddStudentGroupDialog/AddStudentGroupDialog.razor.rz.scp.css */
.add-student-group-dialog[add-teacher-dialog-component]  .dialog {
    height: 40vh !important;
}
/* /Pages/Admin/SchoolYears/Components/AddStudentGroupDialog/Views/StudentGroupSearchBar/StudentGroupSearchBar.razor.rz.scp.css */
.search-wrapper[teacher-search-bar-view] {
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .search-wrapper[teacher-search-bar-view]  .search--small {
        max-width: 100%;
        width: 320px;
        padding: 0 0 6px 0;
    }

        .search-wrapper[teacher-search-bar-view]  .search--small .search-field input {
            height: 36px;
            background: #fff;
            border: 1px solid var(--grey-light-3);
        }

    .search-wrapper[teacher-search-bar-view]  .btn {
        height: 36px;
    }

.filter-wrapper[teacher-search-bar-view] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-left: auto;
}

.filter-drop-down[teacher-search-bar-view] {
    min-width: 190px;
}
/* /Pages/Admin/SchoolYears/Components/AddStudentGroupDialog/Views/StudentGroupTable/StudentGroupTable.razor.rz.scp.css */
.spinner-wrapper[teachers-table-view] {
    height: 100vh !important;
    border: none;
}

.spinner-container[teachers-table-view] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[teachers-table-view] tr {
    cursor: default !important;
}

[teachers-table-view] .students-count-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

    [teachers-table-view] .students-count-cell button {
        margin-left: auto;
    }
/* /Pages/Admin/SchoolYears/Components/AddTeacherDialog/AddTeacherDialog.razor.rz.scp.css */
.add-teacher-dialog[add-teacher-dialog-component]  .dialog {
    height: 40vh !important;
}
/* /Pages/Admin/SchoolYears/Components/AddTeacherDialog/Views/TeachersSearchBar/TeachersSearchBar.razor.rz.scp.css */
.search-wrapper[teacher-search-bar-view] {
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .search-wrapper[teacher-search-bar-view]  .search--small {
        max-width: 100%;
        width: 320px;
        padding: 0 0 6px 0;
    }

        .search-wrapper[teacher-search-bar-view]  .search--small .search-field input {
            height: 36px;
            background: #fff;
            border: 1px solid var(--grey-light-3);
        }

    .search-wrapper[teacher-search-bar-view]  .btn {
        height: 36px;
    }

.filter-wrapper[teacher-search-bar-view] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-left: auto;
}
/* /Pages/Admin/SchoolYears/Components/AddTeacherDialog/Views/TeachersTable/TeachersTable.razor.rz.scp.css */
.spinner-wrapper[teachers-table-view] {
    height: 100vh !important;
    border: none;
}

.spinner-container[teachers-table-view] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[teachers-table-view] tr {
    cursor: default !important;
}
/* /Pages/Admin/SchoolYears/Components/AddTermDialog/AddTermDialog.razor.rz.scp.css */
[administrator-add-term-dialog-component] .dropdown-body {
    transform: none !important;
    position: fixed !important;
    top: 552px !important;
    left: 500px !important;
    z-index: 9999 !important;
}


[administrator-add-term-dialog-component] .scroll {
    overflow: hidden !important;
}
/* /Pages/Admin/SchoolYears/Components/AddTermDialog/Views/Term/Term.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/AddTimeScheduleDialog/AddTimeScheduleDialog.razor.rz.scp.css */
[ad-time-schedule-dialog] .dropdown-body {
    transform: none !important;
    position: fixed !important;
    top: 552px !important;
    left: 500px !important;
    z-index: 9999 !important;
}
/* /Pages/Admin/SchoolYears/Components/AddTimeScheduleDialog/Views/TimeSchedule/TimeSchedule.razor.rz.scp.css */
[b-x1bktaotda] .icon-container {
    border: none;
    color: var(--grey-light-3);
    cursor: default;
}

.start-time-input[b-x1bktaotda] .icon-container {
    visibility: hidden;
}
/* /Pages/Admin/SchoolYears/Components/AlterCalendarBlockDialog/Views/AlterBlockIcon.razor.rz.scp.css */
.alter-block-icon[alter-block-icon-view] {
    margin: auto;
    position: relative;
    background: transparent;
    width: 36px;
    border-radius: 4px;
}

.icon-container[alter-block-icon-view] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: inherit;
    border: 1px solid currentColor;
    line-height: 1.2;
    overflow: hidden;
}

.block-name-container[alter-block-icon-view] {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.alter-label[alter-block-icon-view] {
    display: flex;
    padding: 1px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: white;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    text-transform: uppercase;
    width: 100%;
}

.icon-label[alter-block-icon-view] {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    z-index: 1;
}

    .icon-label.index[alter-block-icon-view] {
        font-size: 16px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 22px !important;
    }
/* /Pages/Admin/SchoolYears/Components/AlterCalendarBlockDialog/Views/AlterCalendarBlockDialog.razor.rz.scp.css */
.alter-calendar-block-dialog[alter-calendar-block-dialog-view] .dialog-body {
    flex: 1 1 0 !important;
}

.header-icon-container[alter-calendar-block-dialog-view] {
    display: flex;
    gap: 18px;
}

.calendar-day[alter-calendar-block-dialog-view] {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px;
    color: black;
}

.builder-main-header[alter-calendar-block-dialog-view] {
    margin: 0 15px 10px 15px
}

.builder-main-body[alter-calendar-block-dialog-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0px;
    flex: 0 1 auto;
}

.container[alter-calendar-block-dialog-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.header-container[alter-calendar-block-dialog-view] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.builder-main-body[alter-calendar-block-dialog-view] > .scroll .row {
    height: 100%;
    margin: 0;
}

.schedule-build-builder-block[alter-calendar-block-dialog-view]  .scroll {
    height: 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/BellScheduleOverviewDialog/BellScheduleOverviewDialog.razor.rz.scp.css */
.sidepanel-navigation-container[bell-schedule-overview-component] {
    display: block;
    padding: 20px;
    background: white;
}

.calendar-container[bell-schedule-overview-component] {
    height: 100%;
    width: 100%;
}

.calendar-container[bell-schedule-overview-component]  .weekly-schedule-container {
    height: 100% !important;
}

.no-button-border[bell-schedule-overview-component]  .btn {
    border: none !important;
}
.schedule-overview-dialog[bell-schedule-overview-component]  .dialog-body {
    height: 85vh !important;
    padding: 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/BellScheduleOverviewDialog/Views/BellScheduleEvent/BellScheduleEvent.razor.rz.scp.css */
.bell-schedule-event-container[bell-schedule-event-view] {
    width: 100%;
    height: 100%;
    background: white;
}

.bell-schedule-event[bell-schedule-event-view] {
    display: flex;
    height: 100%;
    padding: 0 0 0 10px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

    .bell-schedule-event.size-l[bell-schedule-event-view] {
        justify-content: unset;
        padding: 2px 2px 2px 10px;
    }

.period[bell-schedule-event-view] {
    background: linear-gradient(0deg, rgba(39, 191, 129, 0.05) 0%, rgba(39, 191, 129, 0.05) 100%, white);
    border-radius: 2px;
    border-top: 1px solid var(--green);
    border-right: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
    border-left: 4px solid var(--green);
    color: var(--green);
}

.break[bell-schedule-event-view] {
    background: linear-gradient(0deg, rgba(0, 162, 255, 0.05) 0%, rgba(0, 162, 255, 0.05) 100%, white);
    border-radius: 2px;
    border-top: 1px solid rgba(0, 162, 255, 1);
    border-right: 1px solid rgba(0, 162, 255, 1);
    border-bottom: 1px solid rgba(0, 162, 255, 1);
    border-left: 4px solid rgba(0, 162, 255, 1);
    color: rgba(0, 162, 255, 1);
}

.event-title[bell-schedule-event-view] {
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.event-time[bell-schedule-event-view] {
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-dark-3);
}

.event-duration[bell-schedule-event-view] {
    color: var(--grey-3)
}

.event-duration[bell-schedule-event-view],
.event-time[bell-schedule-event-view] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.size-l > .event-title[bell-schedule-event-view],
.size-l > .event-duration[bell-schedule-event-view],
.size-l > .event-time[bell-schedule-event-view] {
    font-size: 12px;
}

.size-m > .event-title[bell-schedule-event-view],
.size-m > .event-duration[bell-schedule-event-view],
.size-m > .event-time[bell-schedule-event-view] {
    font-size: 8px;
}

.size-s > .event-title[bell-schedule-event-view] {
    font-size: 8px;
}


.size-xs > .event-title[bell-schedule-event-view],
.size-xs > .event-time[bell-schedule-event-view] {
    display: none;
}

.size-s .event-time[bell-schedule-event-view] {
    display: none;
}

.bell-schedule-event.period.size-xs[bell-schedule-event-view] {
    background: var(--green);
}

.bell-schedule-event.break.size-xs[bell-schedule-event-view] {
    background: rgba(0, 162, 255, 1);
}
/* /Pages/Admin/SchoolYears/Components/BellScheduleOverviewDialog/Views/BellScheduleEventDetailsDialog/BellScheduleEventDetailsDialog.razor.rz.scp.css */
.bell-schedule-event-details-dialog[bell-schedule-event-details-dialog-view]  .dialog--standard {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.22) !important;
}

.bell-schedule-event-details-dialog[bell-schedule-event-details-dialog-view]  .btn--circle {
    border: none !important;
}

.bell-schedule-item-details[bell-schedule-event-details-dialog-view] {
    display: flex;
    padding: 14px 14px 4px 14px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
}

.close-action[bell-schedule-event-details-dialog-view] {
    position: absolute;
    right: 0px;
    top: 0px;
}

.row-container[bell-schedule-event-details-dialog-view] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    padding-bottom: 12px;
}

.bold-text[bell-schedule-event-details-dialog-view] {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.text-duration[bell-schedule-event-details-dialog-view] {
    color: var(--grey-3);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
/* /Pages/Admin/SchoolYears/Components/BellScheduleOverviewDialog/Views/BellScheduleToolbar/BellScheduleToolbar.razor.rz.scp.css */
.bell-schedule-toolbar[bell-schedule-toolbar-view] {
    display: flex;
    align-items: center;
}

.bell-schedule-toolbar-container[bell-schedule-toolbar-view] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .bell-schedule-toolbar-container[bell-schedule-toolbar-view] .btn--simple {
        width: 100px;
        height: 38px;
        border-radius: 4px;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
    }

.data-range-text[bell-schedule-toolbar-view] {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px;
}

.text-clamp[bell-schedule-toolbar-view] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/CalendarBuildTab.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/Views/CalendarProperties/CalendarProperties.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/Views/CalendarSchoolDayList/CalendarSchoolDay/CalendarSchoolDay.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/Views/CalendarSchoolDayList/CalendarSchoolDayList.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/Views/CalendarTermList/CalendarTerm/CalendarTerm.razor.rz.scp.css */
.tile-calendar-build[calendar-term-view] {
	padding: 0 0.25rem 0.625rem 0.625rem !important;
}

.tile-calendar-build.disabled[calendar-term-view] {
	background: var(--grey-light-1);
	cursor: default;
}
	.tile-calendar-build.disabled:hover[calendar-term-view] {
		background: var(--grey-light-1);
	}

.term-actions[calendar-term-view] {
	margin-bottom: 0.250rem;
}
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/Views/CalendarTermList/CalendarTermList.razor.rz.scp.css */
.term-list-container[calendar-term-list-view] {
	display: flex;
	flex-direction: column;
	margin-top: 0.625rem;
}

.manual-activation-container[calendar-term-list-view] {
	display: flex;
	justify-content: space-between;
	margin: 0.125rem 0 0.625rem 0;
}

.switch-label[calendar-term-list-view] {
	display: flex;
	align-items: center;
	margin-right: 4px;
	font-size: 0.875rem;
	margin-bottom: 2px;
	font-weight: 600;
	color: var(--grey-3);
}

.information-container[calendar-term-list-view] {
	display: flex;
	align-items: center;
	margin-left: 0.375rem;
}

	.information-container[calendar-term-list-view]  .tooltip-header svg {
		width: 0.875rem;
		height: 0.875rem;
	}

		.information-container[calendar-term-list-view]  .tooltip-header svg path {
			fill: rgba(136, 136, 136, 1);
		}

.tooltip-header[calendar-term-list-view] {
	display: flex;
	flex-flow: row;
	margin-bottom: 0.25rem;
}

.tooltip-body[calendar-term-list-view] {
	width: fit-content;
	max-width: 20rem;
	height: fit-content;
	max-height: 10rem;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.625rem;
	border: none;
	border-radius: 0.25rem;
	text-align: left;
	white-space: normal;
	background-color: var(--grey-dark-3);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

.tooltip-body-description[calendar-term-list-view] {
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(188, 188, 188, 1);
}
/* /Pages/Admin/SchoolYears/Components/CalendarBuildTab/Views/CalendarTermList/TermStateTag/TermStateTag.razor.rz.scp.css */
.term-tag-container[b-w7vejkrgg6] {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: stretch;
}

.term-tag[b-w7vejkrgg6] {
    display: flex;
    padding: 0.125rem 0.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.125rem;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.05);
    margin: 0.625rem 0 0.5rem 0;
}

.term-tag-title[b-w7vejkrgg6] {
    color: var(--grey-3);
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 0.625rem;
}
/* /Pages/Admin/SchoolYears/Components/ClassBuildTable/ClassBuildTable.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1 General */
.table[administrator-class-build-tab-component] {
    width: 100%;
    font-size: 0.875rem;
}

    .table th[administrator-class-build-tab-component], .table td[administrator-class-build-tab-component] {
        position: relative;
        vertical-align: inherit;
    }

    .table th[administrator-class-build-tab-component] {
        background: var(--alpha-dark-1);
    }

    .table [rowspan][administrator-class-build-tab-component] {
        vertical-align: top;
    }

    .table .tr--highlight th[administrator-class-build-tab-component] {
        background: var(--alpha-dark-2);
    }

    .table .tr--highlight td[administrator-class-build-tab-component] {
        background: var(--alpha-dark-1);
    }

    .table .tr--thin > *[administrator-class-build-tab-component] {
        padding-top: 4px;
        padding-bottom: 4px;
        height: auto;
    }

    .table .tr--layout[administrator-class-build-tab-component] {
        padding: 0;
        height: 0;
    }

        .table .tr--layout th[administrator-class-build-tab-component], .table .tr--layout td[administrator-class-build-tab-component] {
            padding: 0;
            height: 0;
            border: 0;
        }

    .table .tr--link[administrator-class-build-tab-component],
    .table .td--link[administrator-class-build-tab-component] {
        cursor: pointer;
        transition: all var(--transition-duration) ease 0s;
    }

        .table .tr--link:hover[administrator-class-build-tab-component], .table .tr--link:focus[administrator-class-build-tab-component], .table .tr--link:active[administrator-class-build-tab-component],
        .table .td--link:hover[administrator-class-build-tab-component],
        .table .td--link:focus[administrator-class-build-tab-component],
        .table .td--link:active[administrator-class-build-tab-component] {
            background-color: var(--alpha-dark-1);
        }

    .table .th--sticky[administrator-class-build-tab-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

        .table .th--sticky[administrator-class-build-tab-component]::before, .table .th--sticky[administrator-class-build-tab-component]::after {
            content: "";
            position: absolute;
            display: block;
        }

        .table .th--sticky.th--sticky-top[administrator-class-build-tab-component] {
            top: 0;
        }

            .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after {
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom-width: inherit;
                border-bottom-style: inherit;
                border-bottom-color: inherit;
            }

            .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before {
                height: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after {
                height: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-left[administrator-class-build-tab-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::after {
                right: -1px;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-right[administrator-class-build-tab-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::after {
                left: 0;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component], .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
            top: 0;
            z-index: 4;
        }

            .table .th--sticky.th--sticky-top-left > *[administrator-class-build-tab-component], .table .th--sticky.th--sticky-top-right > *[administrator-class-build-tab-component] {
                position: relative;
                z-index: 1;
            }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
                filter: blur(1px);
                background: rgba(0, 0, 0, 0.15);
            }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before {
                top: 0;
                height: 100%;
                width: 1px;
            }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
                bottom: -2px;
                left: 0;
                height: 1px;
                width: 100%;
            }

        .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before {
                left: 100%;
            }

        .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before {
                right: 100%;
            }

    .table .th--scroll-border-fix[administrator-class-build-tab-component] {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + (2 * 1px));
        height: calc(100% + (2 * 1px));
        border: inherit;
    }

    .table .th--highlight[administrator-class-build-tab-component] {
        color: var(--green);
        background: #f4fcf9;
        border: 1px solid #a8d7c4;
        z-index: 2;
    }

        .table .th--highlight > *[administrator-class-build-tab-component] {
            color: inherit !important;
        }

    .table .th--clean[administrator-class-build-tab-component] {
        padding: 0;
        border: none;
        background: transparent;
    }

        .table .th--clean.th--sticky[administrator-class-build-tab-component]::before, .table .th--clean.th--sticky[administrator-class-build-tab-component]::after {
            content: none;
        }

    .table .td--sticky[administrator-class-build-tab-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

        .table .td--sticky.td--sticky-left[administrator-class-build-tab-component] {
            left: 0;
        }

        .table .td--sticky.td--sticky-right[administrator-class-build-tab-component] {
            right: 0;
        }

    .table .td--pseudo-border[administrator-class-build-tab-component] {
        position: relative;
    }

        .table .td--pseudo-border[administrator-class-build-tab-component]::before, .table .td--pseudo-border[administrator-class-build-tab-component]::after {
            position: absolute;
            content: "";
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

        .table .td--pseudo-border[administrator-class-build-tab-component]::before {
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }

        .table .td--pseudo-border[administrator-class-build-tab-component]::after {
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
        }

    .table .table--cell-spacer[administrator-class-build-tab-component] {
        width: 100%;
        background: transparent;
        border: none;
    }

        .table .table--cell-spacer[administrator-class-build-tab-component]::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

    .table .table--cell-pattern[administrator-class-build-tab-component] {
        position: relative;
    }

        .table .table--cell-pattern.th--sticky[administrator-class-build-tab-component] {
            position: -webkit-sticky;
            position: sticky;
            background: transparent !important;
        }

            .table .table--cell-pattern.th--sticky .pattern[administrator-class-build-tab-component] {
                left: 0;
                width: 100%;
                height: 100%;
            }

            .table .table--cell-pattern.th--sticky[administrator-class-build-tab-component]::before, .table .table--cell-pattern.th--sticky[administrator-class-build-tab-component]::after {
                content: none;
            }

        .table .table--cell-pattern .pattern[administrator-class-build-tab-component] {
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + (2 * 1px));
            height: calc(100% + (2 * 1px));
            background-repeat: repeat;
            background-size: 45px;
            background-color: #ffffff;
        }

    .table .th--weekend[administrator-class-build-tab-component] {
        background: var(--grey-light-1) !important;
    }

    .table .td--weekend[administrator-class-build-tab-component] {
        background: rgba(0, 0, 0, 0.025) !important;
    }

        .table .td--weekend .pattern[administrator-class-build-tab-component] {
            background-color: #ffffff;
        }

    .table .tr--weekend th .pattern[administrator-class-build-tab-component], .table .tr--weekend td .pattern[administrator-class-build-tab-component] {
        background-color: var(--alpha-dark-1);
    }

    .table .tr--weekend th[administrator-class-build-tab-component] {
        background: #efefef !important;
    }

    .table .tr--weekend td[administrator-class-build-tab-component] {
        background-color: rgba(0, 0, 0, 0.025) !important;
    }

.layout--light .table th[administrator-class-build-tab-component] {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover[administrator-class-build-tab-component], .layout--dark .table .tr--link:focus[administrator-class-build-tab-component], .layout--dark .table .tr--link:active[administrator-class-build-tab-component],
.layout--dark .table .td--link:hover[administrator-class-build-tab-component],
.layout--dark .table .td--link:focus[administrator-class-build-tab-component],
.layout--dark .table .td--link:active[administrator-class-build-tab-component] {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky[administrator-class-build-tab-component] {
    background: var(--grey-dark-3);
}

    .layout--dark .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .layout--dark .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

.layout--dark .table .th--highlight[administrator-class-build-tab-component] {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend[administrator-class-build-tab-component] {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.015) !important;
}

    .layout--dark .table .td--weekend .pattern[administrator-class-build-tab-component] {
        background-color: #212121;
    }

.layout--dark .table .td--pseudo-border[administrator-class-build-tab-component]::before, .layout--dark .table .td--pseudo-border[administrator-class-build-tab-component]::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer[administrator-class-build-tab-component]::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern[administrator-class-build-tab-component] {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern[administrator-class-build-tab-component], .layout--dark .tr--weekend td .pattern[administrator-class-build-tab-component] {
    background-color: #212121;
}

.layout--dark .tr--weekend th[administrator-class-build-tab-component] {
    background: #363636 !important;
}

.layout--dark .tr--weekend td[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */

.table-wrapper.table-wrapper--flex[administrator-class-build-tab-component] {
    display: flex;
    flex-direction: column;
}

    .table-wrapper.table-wrapper--flex .table-wrapper-body[administrator-class-build-tab-component] {
        flex: 0 1 auto;
        min-height: 0;
    }

.table-wrapper.table-wrapper--card .table-wrapper-card[administrator-class-build-tab-component] {
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    background: rgba(0, 0, 0, 0.025);
    border-radius: 4px;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .card[administrator-class-build-tab-component] {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.025);
    border: none;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .scroll[administrator-class-build-tab-component] {
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.table-wrapper .table-wrapper-header > *[administrator-class-build-tab-component] {
    margin-bottom: 10px;
}

.table-wrapper .table-wrapper-header[data-view] .context-options[administrator-class-build-tab-component] {
    display: none;
}

.table-wrapper .table-wrapper-header[data-view=context-options] .context-options[administrator-class-build-tab-component] {
    display: block;
}

    .table-wrapper .table-wrapper-header[data-view=context-options] .context-options + *[administrator-class-build-tab-component] {
        margin-left: 10px;
    }

.table-wrapper .table-wrapper-header .row[administrator-class-build-tab-component] {
    align-items: center;
}

    .table-wrapper .table-wrapper-header .row > *[administrator-class-build-tab-component] {
        width: auto;
        flex: 1 1 auto;
    }

.table-wrapper .table-wrapper-header .field-menu[administrator-class-build-tab-component] {
    min-width: 160px;
}

.table-wrapper .table-wrapper-header .search[administrator-class-build-tab-component] {
    max-width: 100%;
    width: 320px;
}

.table-wrapper .table-wrapper-body[data-view] .table-empty[administrator-class-build-tab-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td[administrator-class-build-tab-component],
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th[administrator-class-build-tab-component] {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty[administrator-class-build-tab-component] {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer[administrator-class-build-tab-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .card[administrator-class-build-tab-component] {
    height: auto;
}

.table-wrapper .table-wrapper-body .card[administrator-class-build-tab-component],
.table-wrapper .table-wrapper-body .scroll[administrator-class-build-tab-component] {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .table-wrapper-body .card[administrator-class-build-tab-component] {
    background: #ffffff;
    height: 100%;
}

.table-wrapper .table-wrapper-footer > *[administrator-class-build-tab-component] {
    padding: 10px 0 0;
}

.table-wrapper .table thead tr[administrator-class-build-tab-component] {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th[administrator-class-build-tab-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.table-wrapper .table tbody tr:last-child th[administrator-class-build-tab-component],
.table-wrapper .table tbody tr:last-child td[administrator-class-build-tab-component] {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky[administrator-class-build-tab-component] {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child[administrator-class-build-tab-component], .table-wrapper .table tr > *:last-child[administrator-class-build-tab-component] {
    min-width: 40px;
}

.table-wrapper .table th[administrator-class-build-tab-component],
.table-wrapper .table td[administrator-class-build-tab-component] {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th[administrator-class-build-tab-component] {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table .tr--nowrap > *[administrator-class-build-tab-component] {
    white-space: nowrap;
}

.table-wrapper .table .tr--link td[administrator-class-build-tab-component] {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky[administrator-class-build-tab-component] {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component], .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component], .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
    border-bottom: none;
}

    .table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before {
        content: none;
    }

    .table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
        height: 1px;
        bottom: 0px;
        background: var(--grey-light-3);
        filter: none;
        box-shadow: none;
    }

.table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component] {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component], .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
    z-index: 5;
}

.table-wrapper .table .th--highlight[administrator-class-build-tab-component] {
    color: var(--green);
    background: #f4fcf9;
    border: none;
}

    .table-wrapper .table .th--highlight[administrator-class-build-tab-component]::before {
        width: 100%;
        height: 100%;
        background: transparent;
    }

.table-wrapper .table .th--active[administrator-class-build-tab-component] {
    color: var(--green);
}

    .table-wrapper .table .th--active.th--sort .sort[administrator-class-build-tab-component] {
        opacity: 1;
    }

.table-wrapper .table .th--sort[administrator-class-build-tab-component] {
    padding: 5px 20px 5px 12px;
    cursor: pointer;
}

    .table-wrapper .table .th--sort:hover[administrator-class-build-tab-component] {
        background: #f0f0f0;
    }

        .table-wrapper .table .th--sort:hover .sort[administrator-class-build-tab-component] {
            opacity: 1;
        }

    .table-wrapper .table .th--sort.sort--top .icon .sort-bottom[administrator-class-build-tab-component] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort.sort--bottom .icon .sort-top[administrator-class-build-tab-component] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort .sort[administrator-class-build-tab-component] {
        position: absolute;
        width: 6px;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

.table-wrapper .table .th--check[administrator-class-build-tab-component] {
    cursor: pointer;
}

    .table-wrapper .table .th--check:hover[administrator-class-build-tab-component] {
        background: #f0f0f0;
    }

.table-wrapper .table .td--sticky[administrator-class-build-tab-component] {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu[administrator-class-build-tab-component] {
    position: absolute;
    top: 10px;
    right: 4px;
}

    .table-wrapper .table .td--row-menu .menu .btn .icon[administrator-class-build-tab-component] {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.table-wrapper .table .field-check[administrator-class-build-tab-component] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .table-wrapper .table .field-check .checkmark[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.table-wrapper .table-empty[administrator-class-build-tab-component] {
    padding: 30px;
    text-align: center;
}

.layout--dark .table-wrapper[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
}

    .layout--dark .table-wrapper.table-wrapper--card .card[administrator-class-build-tab-component] {
        background: rgba(255, 255, 255, 0.025);
    }

    .layout--dark .table-wrapper.table-wrapper--card .scroll[administrator-class-build-tab-component] {
        background: var(--grey-dark-4);
        border-color: var(--alpha-light-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    .layout--dark .table-wrapper .table thead th:hover[administrator-class-build-tab-component] {
        background: #383838;
    }

    .layout--dark .table-wrapper .table th[administrator-class-build-tab-component],
    .layout--dark .table-wrapper .table td[administrator-class-build-tab-component] {
        border-bottom-color: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .tr--link:hover .td--sticky[administrator-class-build-tab-component] {
        background: #2c2c2c;
    }

    .layout--dark .table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .td--sticky[administrator-class-build-tab-component] {
        background: var(--grey-dark-4);
    }

    .layout--dark .table-wrapper .card[administrator-class-build-tab-component] {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-4);
    }

.layout--dark .card[administrator-class-build-tab-component] {
    background: var(--grey-dark-4);
}
/*# sourceMappingURL=theme.css.map */
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CopyCourseEnrollmentDialog/CopyCourseEnrollmentDialog.razor.rz.scp.css */
.copy-course-enrollment-dialog[copy-course-enrollment-dialog-component]  .dialog {
    height: 60vh !important;
}

.copy-course-enrollment-dialog .body-container[copy-course-enrollment-dialog-component] {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items:flex-start;
    align-self: stretch;
    gap: 30px;
    padding: 20px;
}

    .copy-course-enrollment-dialog .body-container .body-header[copy-course-enrollment-dialog-component],
    .copy-course-enrollment-dialog .body-container .body-content[copy-course-enrollment-dialog-component] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 10px;
    }

    .copy-course-enrollment-dialog .body-container .body-content[copy-course-enrollment-dialog-component] {
        height: 100%;
        min-height: 0;
    }

.copy-course-enrollment-dialog .dialog-alert-container[copy-course-enrollment-dialog-component]  button:not(:empty) {
    border-color: transparent;
    background: var(--green);
    color: white;
    width: 104px;
}

.copy-course-enrollment-dialog .dialog-alert-container[copy-course-enrollment-dialog-component]  button:empty {
    display: none !important;
}

.copy-error-message[copy-course-enrollment-dialog-component] {
    color: var(--red);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 13.2px; /* 110% */
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverview/CourseEnrollmentOverview.razor.rz.scp.css */
.course-enrollment-overview-container[course-enrollment-overview-component] {
    display: flex;
    justify-content: flex-start;
    height: fit-content;
    width: 100%;
    min-height: 0;
    gap: 16px;
}

.left-side-content[course-enrollment-overview-component] {
    display: flex;
    flex: 2;
    width: 100%;
    height: 100%;
}

.right-side-content[course-enrollment-overview-component] {
    display: flex;
    flex: 2.5;
    padding: 10px;
    width: 100%;
    height: fit-content;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
    min-width: 0;
}

.right-side-content[course-enrollment-overview-component]  .table-wrapper {
    width: 100% !important;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverview/Views/EnrollmentStatus/EnrollmentStatus.razor.rz.scp.css */
.enrollment-status[enrollment-status-view] {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
}

    .enrollment-status .stats-header[enrollment-status-view] {
        display: flex;
        gap: 8px;
        align-items: center;
        align-self: stretch;
        justify-content: flex-start;
    }

        .enrollment-status .stats-header.padding-top[enrollment-status-view] {
            padding-top: 8px;
        }

        .enrollment-status .stats-header .stats-header-icon[enrollment-status-view] {
            display: flex;
            height: 16px;
            width: 16px;
        }

    .enrollment-status .stats-body[enrollment-status-view] {
        display: flex;
        padding: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid var(--grey-light-3);
        background: var(--grey-light-2);
    }
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverview/Views/EnrollmentSummaryTile/EnrollmentSummaryTile.razor.rz.scp.css */
.enrollment-summary-tile[enrollment-summary-tile-view] {
    display: flex;
    height: 48px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background-color: white;
    transition: filter 0.2s ease;
    cursor: pointer;
}

    .enrollment-summary-tile.disabled[enrollment-summary-tile-view] {
        pointer-events: none;
        cursor: default;
    }

    .enrollment-summary-tile:hover[enrollment-summary-tile-view] {
        filter: brightness(1.05);
    }

    .enrollment-summary-tile .icon-container[enrollment-summary-tile-view] {
        display: flex;
        width: 60px;
        justify-content: center;
        align-items: center;
        align-self: stretch;
    }

        .enrollment-summary-tile .icon-container .icon[enrollment-summary-tile-view] {
           height: 16px;
           width: 16px;
        }

    .enrollment-summary-tile .counter-container[enrollment-summary-tile-view] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .enrollment-summary-tile .counter-container .counter-title[enrollment-summary-tile-view] {
            color: #616161;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
            .enrollment-summary-tile .counter-container .counter-title.disabled[enrollment-summary-tile-view] {
                color: var(--grey-2);
            }

        .enrollment-summary-tile .counter-container .counter-value[enrollment-summary-tile-view] {
            color: #616161;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
        }

            .enrollment-summary-tile .counter-container .counter-value.disabled[enrollment-summary-tile-view] {
                color: var(--grey-2);
            }
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverview/Views/ProgramStatusTable/ProgramStatusTable.razor.rz.scp.css */
.program-status-table[program-status-view] {
    display: flex;
    width: 100%;
}

    .program-status-table[program-status-view]  .table {
        background: #ffffff;
        height: auto;
        border: 1px solid var(--grey-light-3);
    }

    .program-status-table .cell-content[program-status-view] {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content:flex-start;
        width: 100%;
        height: 100%;
    }

        .program-status-table .cell-content .warning-indicator-icon[program-status-view] {
            display: flex;
        }

        .program-status-table .cell-content .cell-content-value[program-status-view] {
            display: flex;
            color: #616161;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverviewDialog/CourseEnrollmentOverviewDialog.razor.rz.scp.css */
.course-enrollment-overview-dialog[course-enrollment-overview-dialog-component]  .dialog {
    height: 77vh;
}

.course-enrollment-overview-dialog[course-enrollment-overview-dialog-component]  .modal-body {
    max-width: 1720px !important;
}

.course-enrollment-overview-dialog-header[course-enrollment-overview-dialog-component] {
    display: flex;
    gap: 18px;
    align-items: center;
}

    .course-enrollment-overview-dialog-header[course-enrollment-overview-dialog-component]  .btn {
        height: 40px !important;
        width: 40px !important;
    }

.course-enrollment-overview-dialog-body[course-enrollment-overview-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 14px;
    gap: 8px;
}

.course-enrollment-overview-dialog-body-content[course-enrollment-overview-dialog-component] {
    display: flex;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.course-enrollment-overview-dialog-body-sidepanel[course-enrollment-overview-dialog-component] {
    height: 100%;
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
}

    .course-enrollment-overview-dialog-body-sidepanel[course-enrollment-overview-dialog-component]  .tabs-header {
        display: flex;
    }

    .course-enrollment-overview-dialog-body-sidepanel[course-enrollment-overview-dialog-component]  .tabs-btn {
        width: 100%;
        height: 32px;
        margin-right: 0 !important;
    }

.course-enrollment-overview-dialog-body-details[course-enrollment-overview-dialog-component] {
    height: 100%;
    width: 100%;
    min-width: 0;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverviewDialog/Views/CourseEnrollmentDetails/CourseEnrollmentDetails.razor.rz.scp.css */
[course-enrollment-details-view] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[course-enrollment-details-view] .loader-spinner {
    height: 32px !important;
}

.course-enrollment-details[course-enrollment-details-view] {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background-color: white;
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--grey-light-3);
    border-left: none;
}

.course-enrollment-details-header[course-enrollment-details-view] {
    display: flex;
    flex-direction: column;
    height: 80px;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.course-enrollment-details-header-headline[course-enrollment-details-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.course-enrollment-details-header-headline-icon[course-enrollment-details-view] {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
}

.course-enrollment-details-header-tags[course-enrollment-details-view] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.course-enrollment-details-body[course-enrollment-details-view] {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
    min-height: 0;
}

.no-records-selected-content[course-enrollment-details-view] {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: stretch;
}

.no-records-selected-title[course-enrollment-details-view] {
    color: var(--grey-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

.no-records-selected-message[course-enrollment-details-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverviewDialog/Views/CourseEnrollmentDetails/Views/TeacherNode/TeacherNode.razor.rz.scp.css */
.teacher-node[teacher-node-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    user-select: none;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentOverviewDialog/Views/CourseEnrollmentTabs/CourseEnrollmentTabs.razor.rz.scp.css */

.enrolled-courses-tab[course-enrollment-tabs-view],
.not-enrolled-courses-tab[course-enrollment-tabs-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-2);
    border-top: hidden;
    width: 420px;
    max-width: 420px;
}

.card-subject-icon[course-enrollment-tabs-view] {
    width: 26px;
    height: 26px;
    aspect-ratio: 1/1;
}

.card-course-title[course-enrollment-tabs-view] {
    color: #616161;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-course-tag[course-enrollment-tabs-view] {
    color: var(--grey-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    top: 1px;
}

.courses-counter-container[course-enrollment-tabs-view] {
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
}

[course-enrollment-tabs-view] .tabs-header {
    display: flex;
}

[course-enrollment-tabs-view] .tabs-btn {
    width: 100%;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentsTable/CourseEnrollmentsTable.razor.rz.scp.css */
.course-enrollments-table[course-enrollments-table-component] {
    width: 100%;
    height: 100%;
}

.drop-down-content[course-enrollments-table-component] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 6px;
}

    .drop-down-content.collapsed[course-enrollments-table-component]  .icon {
        width: 14px;
        height: 14px;
    }

        .drop-down-content.collapsed[course-enrollments-table-component]  .icon:first-child {
            transform: rotate(-90deg)
        }

    .drop-down-content.expanded[course-enrollments-table-component]  .icon {
        width: 14px;
        height: 14px;
    }

.course-enrollments-table[course-enrollments-table-component]  .mini-spinner {
    height: 100% !important;
    min-height: 80px !important;
}

.course-enrollments-table[course-enrollments-table-component]  .table {
    background: #ffffff;
    height: auto;
    border: 1px solid var(--grey-light-3);
}

.course-enrollments-table[course-enrollments-table-component]  .tr--expanded {
    position: relative;
    border-bottom: 0;
}

    .course-enrollments-table[course-enrollments-table-component]  .tr--expanded td {
        background: var(--grey-light-1);
    }

        .course-enrollments-table[course-enrollments-table-component]  .tr--expanded td::before {
            content: none;
        }

        .course-enrollments-table[course-enrollments-table-component]  .tr--expanded td::after {
            box-sizing: border-box;
            content: "";
            position: absolute;
            left: 0;
            height: 3px;
            bottom: 0;
            width: 100%;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        }

.course-enrollments-table[course-enrollments-table-component]  .no-records-td {
    background: var(--grey-light-2) !important;
}

.information[course-enrollments-table-component] {
    flex-flow: row;
    align-items: center;
    gap: 5px;
    width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

[course-enrollments-table-component] .information svg {
    width: 14px;
    height: 14px;
}

.tooltip[course-enrollments-table-component] {
    border-radius: 4px;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: var(--grey-dark-3);
}

.tooltip .title[course-enrollments-table-component] {
    color: white;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
}

.tooltip .item[course-enrollments-table-component] {
    color: var(--grey-light-2);
    font-weight: 400;
    font-size: 12px;
    line-height: 16.34px;
}

.subject-cell[course-enrollments-table-component] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

    .subject-cell .subject-tag[course-enrollments-table-component] {
        display: flex;
        width: auto;
        height: 100%;
        padding: 2px 8px;
        align-items: center;
        border-radius: 4px;
        background: rgba(0, 162, 255, 0.05);
    }

        .subject-cell .subject-tag .subject-tag-text[course-enrollments-table-component] {
            color: currentColor;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22.4px;
}

.class-name-text[course-enrollments-table-component] {
    color: var(--grey-dark-4);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.course-name-cell[course-enrollments-table-component] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

    .course-name-cell .subject-color-indicator[course-enrollments-table-component] {
        height: 100%;
        width: 4px;
        background-color: currentColor;
        display: inline-block;
    }

.actions-cell[course-enrollments-table-component] {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    gap: 10px;
}

    .actions-cell .add-dropdown-button-content[course-enrollments-table-component] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

        .actions-cell .add-dropdown-button-content[course-enrollments-table-component]  .icon {
            width: 16px !important;
            height: 16px !important;
            flex: none !important;
            left: 0 !important;
        }

        .actions-cell .add-dropdown-button-content[course-enrollments-table-component]  path {
            fill: white !important;
        }

        .actions-cell .add-dropdown-button-content[course-enrollments-table-component]  .btn {
            height: 36px !important;
        }

    .actions-cell[course-enrollments-table-component]  .menu-list {
        min-width: 170px !important;
    }

        .actions-cell[course-enrollments-table-component]  .menu-list > hr {
            display: none;
        }

    .actions-cell .context-menu[course-enrollments-table-component]  .btn {
        transform: translateY(-50%) rotate(0deg) !important;
    }
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentsTableFilter/CoursesEnrollmentsTableFilter.razor.rz.scp.css */
.course-table-filter-container[courses-table-filter] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-table-filter-delete[courses-table-filter] {
    color: var(--grey-3);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .course-table-filter-delete[courses-table-filter]::after {
        content: '';
        display: block;
        width: 1px;
        height: 1rem;
        background: var(--grey-light-3);
        margin: 0 0.5rem;
    }

.delete-text[courses-table-filter] {
    margin-left: 0.5rem;
}

[courses-table-filter] .btn,
[courses-table-filter] .search--small .search-field input,
.filter-container[courses-table-filter] {
    height: 38.5px;
}

[courses-table-filter] .btn {
    max-height: none !important;
}

[courses-table-filter] .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.course-table-filter[courses-table-filter] {
    margin-right: 0.5rem;
}

.filter-container[courses-table-filter] {
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
}

.course-table-filter-container .course-table-filter-delete[courses-table-filter]  .icon {
    height: 16px !important;
}

.filter-container[courses-table-filter]  .btn-filter .btn:hover {
    color: var(--green);
    background: transparent;
}

[courses-table-filter] .subjects-drop-down .menu-list {
    transform: translate(-154px, 0) !important;
    min-width: 190px;
    max-width: 190px;
}

[courses-table-filter] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[courses-table-filter] .loader-spinner {
    height: 32px !important;
}


[courses-table-filter] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseEnrollmentWizardDialog/CourseEnrollmentWizardDialog.razor.rz.scp.css */
.course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .dialog-header {
    border-bottom: none !important;
    min-height: auto !important;
}

.course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .dialog-body {
    height: 53vh;
    padding: 0 !important;
}

.course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-body {
    height: 100% !important;
}

.course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-content {
    height: 100% !important;
}

.course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-header {
    background: white;
}

.course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-btn {
    height: 40px;
    pointer-events: none !important;
}

    .course-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-btn:first-child {
       margin-left: 16px;
    }

.course-enrollment-wizard-dialog-body-content[course-enrollment-wizard-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
    .course-enrollment-wizard-dialog-body-content[course-enrollment-wizard-dialog-component]  .tabs {
        display: flex;
        flex-direction: column;
        height: 100%
    }

.course-enrollment-wizard-dialog-body-header[course-enrollment-wizard-dialog-component] {
    display: flex;
    height: 40px;
    padding: 10px 10px 18px 10px;
    align-items: center;
    gap: 4px;
    background: white;
}

.body-header-subject-icon[course-enrollment-wizard-dialog-component] {
    width: 26px;
    height: 26px;
    aspect-ratio: 1/1;
    margin-left: 16px;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseSectionEditorDialog/CourseSectionEditorDialog.razor.rz.scp.css */
.course-section-dialog[course-section-editor-dialog-component] {
    display: flex;
}

    .course-section-dialog[course-section-editor-dialog-component] .dialog {
        height: 90vh;
    }

    .course-section-dialog[course-section-editor-dialog-component] .dialog-body {
        padding: 0;
    }

.course-section-dialog-content[course-section-editor-dialog-component] {
    display: flex;
    align-items: flex-start;
    flex: 1 1 0;
    align-self: stretch;
    min-height: 0;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/CourseSectionsTable/CourseSectionsTable.razor.rz.scp.css */
.course-sections-table[b-9rbfdc362u] {
    display: flex;
    flex: 1 1 auto;
}

    .course-sections-table[b-9rbfdc362u]  .spinner-profile-height {
        height: 100% !important;
    }

    .course-sections-table[b-9rbfdc362u]  .table {
        background: var(--grey-light-1);
        height: auto;
        border: hidden;
    }

        .course-sections-table[b-9rbfdc362u]  .table td {
            border-bottom: none !important;
            padding: 0px 0 !important;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), var(--grey-light-2);
        }

.course-section-cell[b-9rbfdc362u] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

    .course-section-cell .course-section-name[b-9rbfdc362u] {
        display: flex;
        align-items: center;
        margin-left: 50px;
    }

    .course-section-cell .course-section-details[b-9rbfdc362u] {
        display: flex;
        flex-direction: row;
        gap: 135px;
    }

    .course-section-cell .course-section-actions[b-9rbfdc362u] {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }



.course-section-detail[b-9rbfdc362u] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .course-section-detail .detail-title[b-9rbfdc362u] {
        font-size: 0.625rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--grey-1)
    }

    .course-section-detail .detail-value[b-9rbfdc362u] {
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--grey-dark-1);
    }

    .course-section-detail .section-name[b-9rbfdc362u] {
        color: #616161;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        min-width: 250px;
    }

    .course-section-detail .section-tag[b-9rbfdc362u] {
        display: flex;
        min-width: 14px;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.05);
    }

        .course-section-detail .section-tag.student-group .section-tag-text[b-9rbfdc362u] {
            color: var(--green);
        }

    .course-section-detail .section-tag-text[b-9rbfdc362u] {
        color: var(--grey-3);
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

.course-section-actions[b-9rbfdc362u] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.add-teacher-dropdown[b-9rbfdc362u] {
    display: flex;
    align-items: center;
    min-width: 200px;
    justify-content: flex-end
}

    .add-teacher-dropdown .add-dropdown-button-content[b-9rbfdc362u] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

        .add-teacher-dropdown .add-dropdown-button-content[b-9rbfdc362u] .icon {
            width: 16px !important;
            height: 16px !important;
            flex: none !important;
            left: 0 !important;
        }

        .add-teacher-dropdown .add-dropdown-button-content[b-9rbfdc362u]  .btn {
            height: 36px !important;
        }

.course-section-actions[b-9rbfdc362u]  .remove-button {
    background-color: transparent;
    border: none;
    font-size: 1rem;
    color: var(--grey-1);
}

.spinner-container[b-9rbfdc362u] {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
}

    .spinner-container[b-9rbfdc362u]  .loader-spinner {
        width: 0;
        height: 1em;
        aspect-ratio: 1/1;
        opacity: 1;
        transition: all var(--transition-duration) ease 0s;
    }

        .spinner-container[b-9rbfdc362u]  .loader-spinner .loader-spinner-circles {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

            .spinner-container[b-9rbfdc362u]  .loader-spinner .loader-spinner-circles span::before {
                width: 20%;
                height: 20%;
                background: currentColor;
                opacity: calc(0.2 * var(--spinner-i));
            }
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/MoveCourseEnrollmentDialog/MoveCourseEnrollmentDialog.razor.rz.scp.css */
.move-course-enrollment-dialog[move-course-enrollment-dialog-component]  .dialog {
    height: 60vh !important;
}

.move-course-enrollment-dialog .body-container[move-course-enrollment-dialog-component] {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 30px;
    padding: 20px;
}

    .move-course-enrollment-dialog .body-container .body-header[move-course-enrollment-dialog-component],
    .move-course-enrollment-dialog .body-container .body-content[move-course-enrollment-dialog-component] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 10px;
    }

    .move-course-enrollment-dialog .body-container .body-content[move-course-enrollment-dialog-component] {
        height: 100%;
        min-height: 0;
    }

.move-course-enrollment-dialog .dialog-alert-container[move-course-enrollment-dialog-component]  button:not(:empty) {
    border-color: transparent;
    background: var(--green);
    color: white;
    width: 104px;
}

.move-course-enrollment-dialog .dialog-alert-container[move-course-enrollment-dialog-component]  button:empty {
    display: none !important;
}

.move-error-message[move-course-enrollment-dialog-component] {
    color: var(--red);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 13.2px; /* 110% */
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/NewEnrollmentWizardDialog/NewEnrollmentWizardDialog.razor.rz.scp.css */
.new-enrollment-dialog[new-enrollment-wizard-dialog-component]  .dialog-header {
    border-bottom: none !important;
}

.new-enrollment-dialog[new-enrollment-wizard-dialog-component]  .dialog-body {
    height: 53vh;
    padding: 0 !important;
}

.new-enrollment-dialog[new-enrollment-wizard-dialog-component]  .tabs-body {
    height: 100% !important;
}

.new-enrollment-dialog[new-enrollment-wizard-dialog-component]  .tabs-content {
    height: 100% !important;
}

.new-enrollment-dialog[new-enrollment-wizard-dialog-component]  .tabs-header {
    background: white;
}

.new-enrollment-dialog[new-enrollment-wizard-dialog-component]  .tabs-btn {
    height: 40px;
    pointer-events: none !important;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/ProgramEnrollmentStatusDialog/ProgramEnrollmentStatusDialog.razor.rz.scp.css */
.program-enrollment-details-dialog[program-enrollment-status-dialog-view]  .dialog {
    height: 77vh;
}

.program-enrollment-details-dialog[program-enrollment-status-dialog-view]  .modal-body {
    max-width: 1720px !important;
}

.program-enrollment-details-dialog[program-enrollment-status-dialog-view]  .dialog-body {
    padding: 24px !important;
}

.program-enrollment-details-dialog-header[program-enrollment-status-dialog-view] {
    display: flex;
    gap: 18px;
    align-items: center;
}

.program-enrollment-details-dialog-header[program-enrollment-status-dialog-view]  .btn {
    height: 40px !important;
    width: 40px !important;
}

.program-enrollment-details-dialog-body[program-enrollment-status-dialog-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 24px 8px;
    background: #F6F6F6;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    gap: 8px;
    max-height: 94%;
}

.program-enrollment-details-dialog-body-content[program-enrollment-status-dialog-view] {
    display: flex;
    height: 100%;
    width: 100%;
    gap: 16px;
    min-height: 0;
}

.program-enrollment-details-left[program-enrollment-status-dialog-view] {
    width: 50%;
    height: 100%;
    min-height: 0;
    padding: 8px;
}

.program-enrollment-details-right[program-enrollment-status-dialog-view] {
    width: 50%;
    height: 100%;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
}

.program-enrollment-details-dialog-body-details[program-enrollment-status-dialog-view] {
    height: 100%;
    width: 100%;
    min-width: 0;
}

.school-program-headline[program-enrollment-status-dialog-view] {
    margin-bottom: 20px;
}

.enrollment-status-count[program-enrollment-status-dialog-view] {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #616161;
    transform: translateY(-10px);
    margin-bottom: 10px;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentEnrollmentOverviewDialog/StudentEnrollmentOverviewDialog.razor.rz.scp.css */
.student-enrollment-overview-dialog[student-enrollment-overview-dialog-component]  .dialog {
    height: 77vh;
}

.student-enrollment-overview-dialog[student-enrollment-overview-dialog-component]  .modal-body {
    max-width: 1720px !important;
}

.student-enrollment-overview-dialog-header[student-enrollment-overview-dialog-component] {
    display: flex;
    gap: 18px;
    align-items: center;
}

    .student-enrollment-overview-dialog-header[student-enrollment-overview-dialog-component]  .btn {
        height: 40px !important;
        width: 40px !important;
    }

.student-enrollment-overview-dialog-body[student-enrollment-overview-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 14px;
    gap: 8px;
}

.student-enrollment-overview-dialog-body-content[student-enrollment-overview-dialog-component] {
    display: flex;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.student-enrollment-overview-dialog-body-sidepanel[student-enrollment-overview-dialog-component] {
    height: 100%;
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
}

    .student-enrollment-overview-dialog-body-sidepanel[student-enrollment-overview-dialog-component]  .tabs-header {
        display: flex;
    }

    .student-enrollment-overview-dialog-body-sidepanel[student-enrollment-overview-dialog-component]  .tabs-btn {
        width: 100%;
        height: 32px;
        margin-right: 0 !important;
    }

.student-enrollment-overview-dialog-body-details[student-enrollment-overview-dialog-component] {
    height: 100%;
    width: 100%;
    min-width: 0;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentEnrollmentOverviewDialog/Views/StudentEnrollmentDetails/StudentEnrollmentDetails.razor.rz.scp.css */
[student-enrollment-details-view] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[student-enrollment-details-view] .loader-spinner {
    height: 32px !important;
}

.student-enrollment-details[student-enrollment-details-view] {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background-color: white;
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--grey-light-3);
    border-left: none;
}

.student-enrollment-details-header[student-enrollment-details-view] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: auto;
}

.student-enrollment-details-body[student-enrollment-details-view] {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
    min-width: 0;
    min-height: 0;
}

.no-records-selected-content[student-enrollment-details-view] {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: stretch;
}

.no-records-selected-title[student-enrollment-details-view] {
    color: var(--grey-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

.no-records-selected-message[student-enrollment-details-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentEnrollmentOverviewDialog/Views/StudentEnrollmentDetails/Views/SectionDetailsHeader/SectionDetailsHeader.razor.rz.scp.css */
.student-enrollment-details-header-headline[teacher-course-node-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.student-enrollment-details-header-tags[teacher-course-node-view] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.card-subject-icon[teacher-course-node-view] {
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentEnrollmentOverviewDialog/Views/StudentEnrollmentDetails/Views/StudentGroupDetailsHeader/StudentGroupDetailsHeader.razor.rz.scp.css */
.student-enrollment-details-header-headline[teacher-course-node-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.student-enrollment-details-header-tags[teacher-course-node-view] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentEnrollmentOverviewDialog/Views/StudentEnrollmentDetails/Views/TeacherNode/TeacherNode.razor.rz.scp.css */
.section-node[teacher-course-node-view] {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
    gap: 10px;
    border-left: 2px solid var(--grey-light-3);
    padding: 0 0 0 8px;
}

.cell-content[teacher-course-node-view] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    width: 100%;
    min-width: 40px;
}

.cell-label[teacher-course-node-view] {
    color: var(--grey-3);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-height: 14px;
}

.cell-value[teacher-course-node-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.section-node span[teacher-course-node-view] {
    display: inline-block;
    vertical-align: middle;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentEnrollmentOverviewDialog/Views/StudentEnrollmentTabs/StudentEnrollmentTabs.razor.rz.scp.css */

.enrolled-students-tab[student-enrollment-tabs-view],
.not-enrolled-students-tab[student-enrollment-tabs-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-2);
    border-top: hidden;
    width: 420px;
    max-width: 420px;
}

.card-subject-icon[student-enrollment-tabs-view] {
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
    display: flex;
}

.card-course-title[student-enrollment-tabs-view] {
    color: #616161;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-grade-tag[student-enrollment-tabs-view] {
    color: var(--grey-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    top: 1px;
}

.courses-counter-container[student-enrollment-tabs-view] {
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
}

.not-enrolled-students-tab-counter-container[student-enrollment-tabs-view] {
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: flex-start;
    margin: 5px 0 0 10px;
}

.not-enrolled-students-tab-counter[student-enrollment-tabs-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

[student-enrollment-tabs-view] .tabs-header {
    display: flex;
}

[student-enrollment-tabs-view] .tabs-btn {
    width: 100%;
}

.avatar-container[student-enrollment-tabs-view]  .avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

[student-enrollment-tabs-view] .dropdown-header {
    height: 32px;
    margin-left: 10px;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentGroupEnrollmentWizardDialog/StudentGroupEnrollmentWizardDialog.razor.rz.scp.css */
.student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .dialog-header {
    border-bottom: none !important;
    min-height: auto !important;
}

.student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .dialog-body {
    height: 53vh;
    padding: 0 !important;
}

.student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .tabs-body {
    height: 100% !important;
}

.student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .tabs-content {
    height: 100% !important;
}

.student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .tabs-header {
    background: white;
}

.student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .tabs-btn {
    height: 40px;
    pointer-events: none !important;
}

    .student-group-enrollment-wizard-dialog[student-group-enrollment-wizard-dialog-component]  .tabs-btn:first-child {
        margin-left: 16px;
    }

.student-group-enrollment-wizard-dialog-body-content[student-group-enrollment-wizard-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
    .student-group-enrollment-wizard-dialog-body-content[student-group-enrollment-wizard-dialog-component]  .tabs {
        display: flex;
        flex-direction: column;
        height: 100%
    }

.student-group-enrollment-wizard-dialog-body-header[student-group-enrollment-wizard-dialog-component] {
    display: flex;
    min-height: 40px;
    padding: 10px 10px 18px 15px;
    align-items: center;
    gap: 8px;
    background: white;
}

.student-group-enrollment-wizard-dialog-body-header-tags[student-group-enrollment-wizard-dialog-component] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/StudentSectionEnrollmentWizardDialog/StudentSectionEnrollmentWizardDialog.razor.rz.scp.css */
.student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .dialog-header {
    border-bottom: none !important;
    min-height: auto !important;
}

.student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .dialog-body {
    height: 53vh;
    padding: 0 !important;
}

.student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .tabs-body {
    height: 100% !important;
}

.student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .tabs-content {
    height: 100% !important;
}

.student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .tabs-header {
    background: white;
}

.student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .tabs-btn {
    height: 40px;
    pointer-events: none !important;
}

    .student-section-enrollment-wizard-dialog[student-section-enrollment-wizard-dialog-component]  .tabs-btn:first-child {
        margin-left: 16px;
    }

.student-section-enrollment-wizard-dialog-body-content[student-section-enrollment-wizard-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
    .student-section-enrollment-wizard-dialog-body-content[student-section-enrollment-wizard-dialog-component]  .tabs {
        display: flex;
        flex-direction: column;
        height: 100%
    }

.student-section-enrollment-wizard-dialog-body-header[student-section-enrollment-wizard-dialog-component] {
    display: flex;
    min-height: 40px;
    padding: 10px 10px 18px 15px;
    align-items: center;
    gap: 8px;
    background: white;
}

.student-section-enrollment-wizard-dialog-body-header-tags[student-section-enrollment-wizard-dialog-component] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/TeacherCourseTable/TeacherCourseTable.razor.rz.scp.css */
.teacher-course-table[teacher-course-table-component] {
    width: 100%;
    height: 100%;
}

.drop-down-icon-container[teacher-course-table-component] {
    display: flex;
    align-items: center;
}

    .drop-down-icon-container.collapsed[teacher-course-table-component] .icon {
        width: 14px;
        height: 14px;
        transform: rotate(-90deg)
    }

    .drop-down-icon-container.expanded[teacher-course-table-component] .icon {
        width: 14px;
        height: 14px;
    }

.teacher-course-table[teacher-course-table-component]  .mini-spinner {
    height: 100% !important;
    min-height: 80px !important;
}

.teacher-course-table[teacher-course-table-component]  .table {
    background: #ffffff;
    height: auto;
    border: none;
}

.teacher-course-table[teacher-course-table-component]  td {
    background: var(--alpha-dark-1);
}

.teacher-course-table[teacher-course-table-component] .tr--expanded {
    position: relative;
    border-bottom: 0;
}

    .teacher-course-table[teacher-course-table-component] .tr--expanded td {
        background: var(--grey-light-2);
    }

        .teacher-course-table[teacher-course-table-component] .tr--expanded td::before {
            content: none;
        }

        .teacher-course-table[teacher-course-table-component] .tr--expanded td::after {
            box-sizing: border-box;
            content: "";
            position: absolute;
            left: 0;
            height: 3px;
            bottom: 0;
            width: 100%;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        }

.teacher-course-table[teacher-course-table-component]  .no-records-td {
    background: var(--grey-light-2) !important;
}

.teacher-course-cell[teacher-course-table-component] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    height: 100%;
    width: 100%;
}

.teacher-tag[teacher-course-table-component] {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    justify-content: space-between;
}

    .teacher-tag:hover .label[teacher-course-table-component] {
        color: #616161 !important;
    }

    .teacher-tag .teacher-name-container[teacher-course-table-component] {
        max-width: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;
        padding-left: 10px;
    }

    .teacher-tag[teacher-course-table-component]  .remove-teacher-button {
        border: 0;
        background-color: transparent !important;
    }

        .teacher-tag[teacher-course-table-component]  .remove-teacher-button .icon {
            height: 12px;
            width: 12px;
        }

.teacher-info-content[teacher-course-table-component] {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-left: 24px;
}

.action-content[teacher-course-table-component] {
    display: flex;
    align-items: center;
    margin-right: 51px;
}

    .action-content .add-dropdown-button-content[teacher-course-table-component] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

        .action-content .add-dropdown-button-content[teacher-course-table-component] .icon {
            width: 16px !important;
            height: 16px !important;
            flex: none !important;
            left: 0 !important;
        }

        .action-content .add-dropdown-button-content[teacher-course-table-component]  .btn {
            height: 36px !important;
        }

    .action-content .context-menu[teacher-course-table-component]  .btn {
        transform: translateY(-50%) rotate(0deg) !important;
    }

.unassigned-teacher-content[teacher-course-table-component], .assigned-teacher-content[teacher-course-table-component] {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 8px;
}

    .unassigned-teacher-content .unassigned-teacher-label[teacher-course-table-component] {
        color: #616161;
        font-size: 14px;
        font-style: italic;
        font-weight: 400;
        line-height: 14px;
    }

.remove-teacher-button-container[teacher-course-table-component] {
    display: flex;
    align-items: center;
    justify-items: center;
    min-width: 6px;
}

.spinner-container[teacher-course-table-component] {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
}

    .spinner-container[teacher-course-table-component]  .loader-spinner {
        width: 0;
        height: 1em;
        aspect-ratio: 1/1;
        opacity: 1;
        transition: all var(--transition-duration) ease 0s;
    }

        .spinner-container[teacher-course-table-component]  .loader-spinner .loader-spinner-circles {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

            .spinner-container[teacher-course-table-component]  .loader-spinner .loader-spinner-circles span::before {
                width: 20%;
                height: 20%;
                background: currentColor;
                opacity: calc(0.2 * var(--spinner-i));
            }
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/TeacherEnrollmentOverviewDialog/TeacherEnrollmentOverviewDialog.razor.rz.scp.css */
.teacher-enrollment-overview-dialog[teacher-enrollment-overview-dialog-component]  .dialog {
    height: 77vh;
}

.teacher-enrollment-overview-dialog[teacher-enrollment-overview-dialog-component]  .modal-body {
    max-width: 1720px !important;
}

.teacher-enrollment-overview-dialog-header[teacher-enrollment-overview-dialog-component] {
    display: flex;
    gap: 18px;
    align-items: center;
}

    .teacher-enrollment-overview-dialog-header[teacher-enrollment-overview-dialog-component]  .btn {
        height: 40px !important;
        width: 40px !important;
    }

.teacher-enrollment-overview-dialog-body[teacher-enrollment-overview-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 14px;
    gap: 8px;
}

.teacher-enrollment-overview-dialog-body-content[teacher-enrollment-overview-dialog-component] {
    display: flex;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.teacher-enrollment-overview-dialog-body-sidepanel[teacher-enrollment-overview-dialog-component] {
    height: 100%;
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
}

    .teacher-enrollment-overview-dialog-body-sidepanel[teacher-enrollment-overview-dialog-component]  .tabs-header {
        display: flex;
    }

    .teacher-enrollment-overview-dialog-body-sidepanel[teacher-enrollment-overview-dialog-component]  .tabs-btn {
        width: 100%;
        height: 32px;
        margin-right: 0 !important;
    }

.teacher-enrollment-overview-dialog-body-details[teacher-enrollment-overview-dialog-component] {
    height: 100%;
    width: 100%;
    min-width: 0;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/TeacherEnrollmentOverviewDialog/Views/CourseEnrollmentTabs/TeacherEnrollmentTabs.razor.rz.scp.css */

.enrolled-courses-tab[teacher-enrollment-tabs-view],
.not-enrolled-courses-tab[teacher-enrollment-tabs-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-2);
    border-top: hidden;
    width: 420px;
    max-width: 420px;
}

.card-subject-icon[teacher-enrollment-tabs-view] {
    width: 26px;
    height: 26px;
    aspect-ratio: 1/1;
}

.card-course-title[teacher-enrollment-tabs-view] {
    color: #616161;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-course-tag[teacher-enrollment-tabs-view] {
    color: var(--grey-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    top: 1px;
}

.courses-counter-container[teacher-enrollment-tabs-view] {
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
}

[teacher-enrollment-tabs-view] .tabs-header {
    display: flex;
}

[teacher-enrollment-tabs-view] .tabs-btn {
    width: 100%;
}

.avatar-container[teacher-enrollment-tabs-view]  .avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/TeacherEnrollmentOverviewDialog/Views/TeacherEnrollmentDetails/TeacherEnrollmentDetails.razor.rz.scp.css */
[teacher-enrollment-details-view] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[teacher-enrollment-details-view] .loader-spinner {
    height: 32px !important;
}

.teacher-enrollment-details[teacher-enrollment-details-view] {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background-color: white;
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--grey-light-3);
    border-left: none;
}

.teacher-enrollment-details-header[teacher-enrollment-details-view] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: auto;
}

.teacher-enrollment-details-header-headline[teacher-enrollment-details-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.teacher-enrollment-details-header-headline-icon[teacher-enrollment-details-view]  .avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.teacher-enrollment-details-header-tags[teacher-enrollment-details-view] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.teacher-enrollment-details-body[teacher-enrollment-details-view] {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
    min-width: 0;
    min-height: 0;
}

.no-records-selected-content[teacher-enrollment-details-view] {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: stretch;
}

.no-records-selected-title[teacher-enrollment-details-view] {
    color: var(--grey-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

.no-records-selected-message[teacher-enrollment-details-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/TeacherEnrollmentWizardDialog/TeacherEnrollmentWizardDialog.razor.rz.scp.css */
.teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .dialog-header {
    border-bottom: none !important;
    min-height: auto !important;
}

.teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .dialog-body {
    height: 53vh;
    padding: 0 !important;
}

.teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-body {
    height: 100% !important;
}

.teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-content {
    height: 100% !important;
}

.teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-header {
    background: white;
}

.teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-btn {
    height: 40px;
    pointer-events: none !important;
}

    .teacher-enrollment-wizard-dialog[course-enrollment-wizard-dialog-component]  .tabs-btn:first-child {
        margin-left: 16px;
    }

.teacher-enrollment-wizard-dialog-body-content[course-enrollment-wizard-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
    .teacher-enrollment-wizard-dialog-body-content[course-enrollment-wizard-dialog-component]  .tabs {
        display: flex;
        flex-direction: column;
        height: 100%
    }

.teacher-enrollment-wizard-dialog-body-header[course-enrollment-wizard-dialog-component] {
    display: flex;
    min-height: 40px;
    padding: 10px 10px 18px 10px;
    align-items: center;
    gap: 4px;
    background: white;
}

.teacher-enrollment-wizard-dialog-body-header-avatar[course-enrollment-wizard-dialog-component] {
    margin-left: 14px;
    flex: 0 0 auto;
}

    .teacher-enrollment-wizard-dialog-body-header-avatar[course-enrollment-wizard-dialog-component]  .avatar {
        display: flex;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
    }

.teacher-enrollment-wizard-dialog-body-header-tags[course-enrollment-wizard-dialog-component] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    flex: 1 1 auto
}

.teacher-name[course-enrollment-wizard-dialog-component] {
    flex: 0 0 auto;
}
/* /Pages/Admin/SchoolYears/Components/CourseEnrollments/TermNavigation/TermNavigation.razor.rz.scp.css */
.term-navigation[term-navigation-component] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.term-navigation-tabs[term-navigation-component] {
    display: flex;
}

[term-navigation-component] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[term-navigation-component] .loader-spinner {
    height: 32px !important;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/CreateWeeklyScheduleDialog.razor.rz.scp.css */
[create-weekly-schedule-dialog-component] .footer-button {
    max-height: 32px !important;
}

.button-container[create-weekly-schedule-dialog-component] {
    max-height: 32px !important;
}

[create-weekly-schedule-dialog-component] .dialog-body {
    height: 85vh !important;
}

.no-button-border[create-weekly-schedule-dialog-component]  .btn {
    border: none !important;
}

.create-weekly-schedule-dialog[create-weekly-schedule-dialog-component]  .dialog-body {
    padding: 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/CourseSection/CourseSection.razor.rz.scp.css */
.course-section[course-section-view] {
    display: flex;
    padding: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-2);
}

.course-section-header[course-section-view] {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
}

.course-section-title[course-section-view] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-dark-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-right: 10px;
}

.course-section-enrolled-students-indicator[course-section-view] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.enrolled-students-count-label[course-section-view] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-3);
}

.course-section-tags[course-section-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

    .course-section-tags[course-section-view] .header {
        overflow: hidden;
    }

.users-icon[course-section-view] {
    width: 12px;
    height: 12px;
    aspect-ratio: 1/1;
    display: flex;
}

.course-section:hover .course-section-options[course-section-view] {
    display:flex;
}

.course-section:has(.course-section-options):hover .course-section-enrolled-students-indicator[course-section-view] {
    margin-right: 15px;
}

.course-section-options[course-section-view] {
    display: none;
    position: absolute;
    top: -3px;
    right: -9px;
}

    .course-section-options[course-section-view]  .btn {
        transform: translateY(-50%) rotate(0deg) !important;
        background: none !important;
    }

    .course-section-options[course-section-view]  .menu .option.option--icon {
        padding: 8px 8px 8px 10px !important;
    }
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/CourseSectionFilter/CourseSectionFilter.razor.rz.scp.css */
.course-section-filters-container[teacher-search-bar-view] {
    width: 100%;
}

    .course-section-filters-container[teacher-search-bar-view]  .header-content {
        width: 100% !important;
    }

.filter-header-content[teacher-search-bar-view] {
    display: flex;
    align-self: stretch;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 18px;
    padding-bottom: 2px;
}

.applied-filters-count-text[teacher-search-bar-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.reset-button[teacher-search-bar-view] {
    display: flex;
    height: 100%;
}

.reset-icon[teacher-search-bar-view] {
    height: 14px;
    width: 14px;
    aspect-ratio: 1/1;
}

.course-section-filters[teacher-search-bar-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/CourseSectionList/CourseSectionList.razor.rz.scp.css */
.course-section-list-container[course-section-list-view] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .course-section-list-container[course-section-list-view]  .dd-container {
        overflow: visible !important;
    }

.course-section-list-search-no-results[course-section-list-view] {
        display: flex;
        padding: 30px 0px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
    }

.search-no-results-icon[course-section-list-view] {
    height: 32px;
    width: 32px;
}

.search-no-results-label[course-section-list-view] {
    color: var(--grey-1);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.course-section-list-empty[course-section-list-view] {
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
}

.list-empty-label[course-section-list-view] {
    color: var(--grey-1);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px; /* 137.143% */
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.enrollments-label[course-section-list-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 4px;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/CourseSectionTag/CourseSectionTag.razor.rz.scp.css */
.course-section-tag[course-section-tag-view] {
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.10);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
    color: var(--grey-3);
}

    .course-section-tag.conflict[course-section-tag-view] {
        color: orange;
        background: rgba(235, 141, 42, 0.05);
    }

.course-section-tag-tooltip[course-section-tag-view] {
    display: inline-flex;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-light-2);
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/ScheduleBuilderSidePanel/ScheduleBuilderSidePanel.razor.rz.scp.css */
.schedule-builder-side-panel[schedule-builder-sidepanel-view] {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-right: var(--grey-light-3);
    background: white;
    max-width: 260px;
}


.schedule-builder-side-panel-header[schedule-builder-sidepanel-view] {
    display: flex;
    padding: 8px 8px 0 8px;
}

    .schedule-builder-side-panel-header[schedule-builder-sidepanel-view]  .search--small {
        background: white !important;
        border-radius: 4px !important;
        border: 1px solid var(--grey-light-3) !important;
    }

.schedule-builder-side-panel-body-filter[schedule-builder-sidepanel-view] {
    display: flex;
    width: 100%;
    padding: 0 8px;
}

.schedule-builder-side-panel-body[schedule-builder-sidepanel-view] {
    display: flex;
    width: 100%;
    height: fit-content;
    padding: 0 8px 8px 8px;
    overflow: hidden;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/ScheduleBuilderToolbar/ScheduleBuilderToolbar.razor.rz.scp.css */
.schedule-builder-toolbar[course-section-view] {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.schedule-builder-toolbar-navigation[course-section-view] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-content[course-section-view] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.unsaved-changes-icon[course-section-view] {
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
}

.unsaved-changes-tooltip[course-section-view] {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-light-2);
}

.reset-icon-disabled[course-section-view]  path {
    fill:var(--grey-light-2);
}

.schedule-builder-toolbar-actions[course-section-view]  .btn {
    height: 39px !important;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/ScheduleConflictIndicator/ScheduleConflictIndicator.razor.rz.scp.css */
.schedule-conflict-indicator[b-77l3o6t12z] {
    margin-left: auto;
}

.tooltip-header-container[b-77l3o6t12z] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}

.tooltip-header[b-77l3o6t12z] {
    display: flex;
}

.tooltip-body[b-77l3o6t12z] {
    width: fit-content;
    max-width: 20rem;
    height: fit-content;
    max-height: 10rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem;
    border: none;
    border-radius: 0.25rem;
    text-align: left;
    white-space: normal;
    background-color: var(--grey-dark-3);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

.tooltip-body-header[b-77l3o6t12z] {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
}

.tooltip-body-message[b-77l3o6t12z] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-light-2);
}

.conflict-counter[b-77l3o6t12z] {
    font-size: 0.75rem;
    font-weight: 400;
    color: orange;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/ScheduleManagementTable/ScheduleManagementTable.razor.rz.scp.css */
.master-schedule-table[schedule-management-table-view] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.table[schedule-management-table-view] {
    width: 100%;
    height: 100%;
    font-size: 0.875rem;
    table-layout: fixed;
}

    .table th[schedule-management-table-view], .table td[schedule-management-table-view] {
        position: relative;
        vertical-align: inherit;
    }

    .table td[schedule-management-table-view] {
        border-right: 1px solid var(--grey-light-3);
        text-align: left;
        height: 44px;
        background: #FFFFFF;
    }

        .table td:last-child[schedule-management-table-view] {
            border-right: none;
        }

    .table th[schedule-management-table-view] {
        color: var(--grey-3);
        background: var(--grey-light-1);
        height: 44px;
        padding: 5px 12px;
        text-align: left;
    }

    .table .th--sticky[schedule-management-table-view] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

    .table [rowspan][schedule-management-table-view] {
        vertical-align: top;
    }

    .table .td--sticky[schedule-management-table-view] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

    .table .th--sticky.th--sticky-top-left[schedule-management-table-view] {
        left: -5px;
        top: 0;
    }

    .table .th--sticky.th--sticky-top-right[schedule-management-table-view] {
        right: -5px;
        top: 0;
    }

    .table .th--sticky.th--sticky-left[schedule-management-table-view],
    .table .td--sticky.td--sticky-left[schedule-management-table-view] {
        left: -5px;
    }

    .table .th--sticky.th--sticky-right[schedule-management-table-view],
    .table .td--sticky.td--sticky-right[schedule-management-table-view] {
        right: -5px;
    }

    .table .th--sticky-top[schedule-management-table-view] {
        top: 0;
    }

    .table .th--sticky[schedule-management-table-view]::before, .table .th--sticky[schedule-management-table-view]::after,
    .table .th--sticky[courses-table-component][schedule-management-table-view]::after {
        content: none;
        position: absolute;
        display: block;
    }

.td--sticky-right[schedule-management-table-view] {
    background-color: transparent !important;
}

tr[schedule-management-table-view] {
    background-color: white;
}

[schedule-management-table-view] .spinner-profile-height {
    height: 100% !important;
}

[schedule-management-table-view] .scroll {
    padding: 0 !important;
}

[schedule-management-table-view] .field-menu.menu--headline {
    border-radius: 3px;
    min-width: 74px;
    display: flex;
    padding: 5px 0;
}

    [schedule-management-table-view] .field-menu.menu--headline > .menu-header > .text-overflow {
        font-size: 14px;
        font-weight: normal;
    }

.row-container[schedule-management-table-view] {
    height: 100%;
}

.no-bell-schedule-container[schedule-management-table-view] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: var(--grey-light-2);
}

.no-bell-schedule[schedule-management-table-view] {
    max-width: 808px;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

    .no-bell-schedule span[schedule-management-table-view] {
        color: var(--grey-dark-1);
        text-align: center;
    }
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/ScheduleManagementTableBodyCell/ScheduleManagementTableBodyCell.razor.rz.scp.css */
.row-cell-container[schedule-management-table-body-cell-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    gap: 8px;
}

    .row-cell-container[schedule-management-table-body-cell-view]  .dd-item-container {
        padding: 4px 8px !important;
    }

    .row-cell-container[schedule-management-table-body-cell-view]  .dd-item-container:first-of-type {
        padding: 8px 8px 4px 8px !important;
    }

.drag-overlay-container[schedule-management-table-body-cell-view] {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    background: rgba(50, 50, 50, 0.75);
}

.drag-overlay[schedule-management-table-body-cell-view] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    gap: 10px;
}

.drop-down-icon[schedule-management-table-body-cell-view] {
    width: 13px;
    height: 13px;
    aspect-ratio: 1/1;
}

.drop-down-text[schedule-management-table-body-cell-view] {
    color: var(--grey-light-4);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* /Pages/Admin/SchoolYears/Components/CreateWeeklyScheduleDialog/Views/ScheduleManagementTableHeaderCell/ScheduleManagementTableHeaderCell.razor.rz.scp.css */
.header-item-label[schedule-management-table-header-cell-view] {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--grey-3);
    white-space: nowrap;
    overflow: hidden;
}

.day-name-title[schedule-management-table-header-cell-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* /Pages/Admin/SchoolYears/Components/EditScheduleBlockDialog/EditScheduleBlockDialog.razor.rz.scp.css */
.edit-schedule-block-dialog[edit-schedule-block-dialog-component] .dialog-body {
    flex: 1 1 0 !important;
}

.builder-main-body[edit-schedule-block-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0px;
    flex: 0 1 auto;
}

.builder-main-header[edit-schedule-block-dialog-component] {
    margin: 0 15px 10px 15px
}

.container[edit-schedule-block-dialog-component] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.builder-main-body[edit-schedule-block-dialog-component] > .scroll .row {
    height: 100%;
    margin: 0;
}

.schedule-build-builder-block[edit-schedule-block-dialog-component]  .scroll {
    height: 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/EditScheduleBlockDialog/Views/ScheduleBlockIconView/ScheduleBlockIcon.razor.rz.scp.css */
.schedule-build-block[schedule-block-icon-view] {
    position: relative;
    background: transparent;
    width: 36px;
    border-radius: 4px;
}

    .schedule-build-block.size--lg[schedule-block-icon-view] {
        width: 43px;
    }

    .schedule-build-block .block-icon[schedule-block-icon-view] {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: inherit;
        border: 1px solid currentColor;
        line-height: 1.2;
        overflow: hidden;
    }

        .schedule-build-block .block-icon[schedule-block-icon-view]::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            background: currentColor;
            transition: all var(--transition-duration) ease 0s;
            opacity: 0.1;
        }

        .schedule-build-block .block-icon .btn-label[schedule-block-icon-view] {
            flex: 1 1 auto;
            position: relative;
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 20px;
            z-index: 1;
        }

    .schedule-build-block .block-tag[schedule-block-icon-view] {
        width: 100%;
        height: 11px;
        font-size: 10px;
        text-align: center;
        line-height: 1;
        background: currentColor;
        z-index: 1;
    }

        .schedule-build-block .block-tag span[schedule-block-icon-view] {
            color: #ffffff;
            text-transform: uppercase;
        }

.layout--dark .schedule-build-block[schedule-block-icon-view] {
    color: var(--grey-light-1);
}

    .layout--dark .schedule-build-block .block-tag span[schedule-block-icon-view] {
        color: var(--grey-dark-4);
    }
/* /Pages/Admin/SchoolYears/Components/EditScheduleBlockDialog/Views/ScheduleBlockSelectorView/ScheduleBlockSelector.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/EditTimeScheduleDialog.razor.rz.scp.css */
.time-schedule-builder[b-j8b006jye0] .time-schedule-inputs {
    min-height: 0px;
    flex: 0 1 auto;
    border-radius: 0px 0px 4px 4px;
}

.time-schedule-builder[b-j8b006jye0] .time-schedule-graph {
    border-radius: 4px 4px 0 0;
}

.builder-main-body[b-j8b006jye0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0px;
    flex: 0 1 auto;
}

.container[b-j8b006jye0] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[b-j8b006jye0] .dialog.dialog--builder {
    height: 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TermWeeks/TermWeeks.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TimeScheduleGraph/TimeScheduleGraph.razor.rz.scp.css */
.time-schedule-graph[time-schedule-graph-view] {
    padding: 10px;
    background: #ffffff;
    border-radius: 4px;
}

    .time-schedule-graph .graph[time-schedule-graph-view] {
        position: relative;
        height: 130px;
        padding: inherit;
        background: var(--alpha-dark-1);
        border-radius: inherit;
    }

    .time-schedule-graph[time-schedule-graph-view]  .graph-svg.graph-svg--axis .graph-axis {
        fill: #000000;
    }

        .time-schedule-graph[time-schedule-graph-view]  .graph-svg.graph-svg--axis .graph-axis .graph-tick-line,
        .time-schedule-graph[time-schedule-graph-view]  .graph-svg.graph-svg--axis .graph-axis .graph-tick {
            opacity: 0.125;
        }

        .time-schedule-graph[time-schedule-graph-view]  .graph-svg.graph-svg--axis .graph-axis .graph-tick-label {
            opacity: 0.375;
        }

    .time-schedule-graph[time-schedule-graph-view]  .graph-html {
        position: relative;
    }

        .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots {
            color: #000000;
        }

            .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot {
                top: 50% !important;
                transform: translateY(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 600;
            }

                .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot span {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                    .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot span.position--top {
                        position: absolute;
                        bottom: 100%;
                    }

                .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot.slot--class {
                    height: 29px;
                    padding: 2px 4px;
                    background: var(--alpha-green-2);
                    border: 2px solid var(--green);
                }

                    .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot.slot--class:first-child {
                        border-radius: 30px 0 0 30px;
                    }

                    .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot.slot--class:last-child {
                        border-radius: 0 30px 30px 0;
                    }

                    .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot.slot--class:only-child {
                        border-radius: 30px;
                    }

                .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots .graph-slot.slot--break {
                    height: 38px;
                    padding: 8px 0;
                    background: var(--alpha-red-2);
                    outline: 2px solid var(--red);
                    z-index: 1;
                    border-radius: 8px;
                }

        .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder {
            position: absolute;
            top: 50%;
            width: 100%;
            height: 20px;
            font-size: 14px;
            color: var(--green);
            text-align: center;
            border-left: 1px solid var(--green);
            border-right: 1px solid var(--green);
        }

            .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder .graph-line {
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                border-bottom: 1px dotted var(--green);
                opacity: 0.75;
            }

                .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder .graph-line::before, .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder .graph-line::after {
                    content: '';
                    position: absolute;
                    transform: translateY(-50%) rotate(45deg);
                    width: 8px;
                    aspect-ratio: 1;
                    border-color: var(--green);
                    border-width: 1px;
                }

                .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder .graph-line::before {
                    left: 2px;
                    border-left-style: solid;
                    border-bottom-style: solid;
                }

                .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder .graph-line::after {
                    right: 2px;
                    border-top-style: solid;
                    border-right-style: solid;
                }

            .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--remainder .graph-remainder .graph-label {
                position: absolute;
                left: 50%;
                transform: translate(-50%, -75%);
            }

.layout--light .time-schedule-graph[time-schedule-graph-view],
.layout--light.time-schedule-graph[time-schedule-graph-view] {
    background: var(--grey-light-1);
}

    .layout--light .time-schedule-graph .graph[time-schedule-graph-view],
    .layout--light.time-schedule-graph .graph[time-schedule-graph-view] {
        background: #ffffff;
    }

.layout--dark .time-schedule-graph[time-schedule-graph-view] ,
.layout--dark.time-schedule-graph[time-schedule-graph-view]  {
    background: var(--grey-dark-4);
}

.layout--dark .time-schedule-graph .graph[time-schedule-graph-view],
.layout--dark.time-schedule-graph .graph[time-schedule-graph-view] {
    background: var(--alpha-light-1);
}

.layout--dark .time-schedule-graph[time-schedule-graph-view]  .graph-svg.graph-svg--axis .graph-axis,
.layout--dark.time-schedule-graph[time-schedule-graph-view]  .graph-svg.graph-svg--axis .graph-axis {
    fill: #ffffff;
}

.layout--dark .time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots,
.layout--dark.time-schedule-graph[time-schedule-graph-view]  .graph-html.graph-html--slots {
    color: #ffffff;
}
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TimeScheduleProperties/TimeScheduleProperties.razor.rz.scp.css */
.start-time-input[b-1k3hujtdk0] .icon-container {
	visibility:hidden;
}

.separator[b-1k3hujtdk0] {
	margin: 10px 0 0 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TimeSchedulePropertiesFooter/TimeSchedulePropertiesFooter.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TimeScheduleSlot/TimeScheduleSlot.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TimeScheduleSlots/TimeScheduleSlots.razor.rz.scp.css */
.time-schedule-inputs[b-lasf7f4vwa] {
    padding: 10px 5px;
    background-color: rgb(255,255,255);
}
/* /Pages/Admin/SchoolYears/Components/EditTimeScheduleDialog/Views/TimeSlotItem/TimeSlotItem.razor.rz.scp.css */
.tile-time-slot[time-schedule-graph-view] {
    display: flex;
    line-height: 1.4;
    background: var(--alpha-dark-1);
    border-radius: 4px;
    overflow: hidden;
    min-height: 61px;
}

    .tile-time-slot.type--class .slot-id[time-schedule-graph-view] {
        background: var(--green);
    }

    .tile-time-slot.type--break .slot-id[time-schedule-graph-view] {
        background: var(--red);
    }

    .tile-time-slot .tile-body[time-schedule-graph-view] {
        width: 100%;
        grid-template-columns: 1fr min-content;
        display: grid;
        padding: 8px 15px;
        gap: 10px;
        min-width: 0;
    }

    .tile-time-slot .slot-id[time-schedule-graph-view] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        width: 64px;
        font-size: 20px;
        color: #ffffff;
        font-weight: 600;
        height: 100%;
    }

    .tile-time-slot .slot-label[time-schedule-graph-view] {
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
    }

        .tile-time-slot .slot-label [contenteditable][time-schedule-graph-view] {
            outline: none;
        }

            .tile-time-slot .slot-label [contenteditable]:focus[time-schedule-graph-view] {
                background: #ffffff;
                text-overflow: initial;
            }

    .tile-time-slot .slot-lunch[time-schedule-graph-view] {
        align-self: center;
    }

    .tile-time-slot .slot-input[time-schedule-graph-view] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .tile-time-slot .slot-input > .label[time-schedule-graph-view] {
            position: relative;
            top: 1px;
        }

        .tile-time-slot .slot-input[time-schedule-graph-view]  .field {
            width: 132px;
        }

        .tile-time-slot .slot-input .sep[time-schedule-graph-view] {
            color: var(--grey-1);
        }

    .tile-time-slot[time-schedule-graph-view]  .field-time .icon-container {
        border-width: inherit;
        background-color: transparent;
    }

        .tile-time-slot[time-schedule-graph-view]  .field-time .icon-container .icon {
            width: 14px;
            height: 14px;
            fill: var(--grey-light-4);
        }

    .tile-time-slot[time-schedule-graph-view]  .type--readonly {
        width: 40px;
    }

    .tile-time-slot[time-schedule-graph-view]  .type--readonly .field-time .field,
    .tile-time-slot[time-schedule-graph-view]  .type--readonly.field-time .field {
        display: inline;
        padding: 0;
        width: 40px;
        background: none;
        border: none;
        color: var(--grey-1);
    }

    .tile-time-slot[time-schedule-graph-view]  .type--readonly .field-time .icon-container,
    .tile-time-slot[time-schedule-graph-view]  .type--readonly.field-time .icon-container {
        display: none;
    }

.layout--dark .tile-time-slot[time-schedule-graph-view] {
    background: var(--alpha-light-1);
}

    .layout--dark .tile-time-slot .slot-label [contenteditable]:focus[time-schedule-graph-view] {
        background: var(--dark-background-color);
    }

    .layout--dark .tile-time-slot .slot-input .sep[time-schedule-graph-view] {
        color: #616161;
    }

    .layout--dark .tile-time-slot[time-schedule-graph-view]  .type--readonly .field-time .field,
    .layout--dark .tile-time-slot[time-schedule-graph-view]  .type--readonly.field-time .field {
        color: #616161;
    }

    .layout--dark .tile-time-slot[time-schedule-graph-view]  .field-time .icon-container .icon {
        fill: var(--grey-dark-2);
    }
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/MasterScheduleTab.razor.rz.scp.css */
.sidepanel-navigation-container[master-schedule-overview-component] {
    display: block;
    padding: 20px;
    background: white;
}

.master-schedule-table-container[master-schedule-overview-component] {
    width: 100%;
    height: 100%;
    background: var(--grey-light-2);
}

.warning-card-container[master-schedule-overview-component] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: var(--grey-light-2);
}

.warning-card[master-schedule-overview-component] {
    max-width: 808px;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

    .warning-card span[master-schedule-overview-component] {
        color: var(--grey-dark-1);
        text-align: center;
    }
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/Views/CourseSectionTag/CourseSectionTag.razor.rz.scp.css */
.course-section-tag[master-course-section-tag-view] {
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.10);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
    color: var(--grey-3);
}

.course-section-tag-tooltip[master-course-section-tag-view] {
    display: inline-flex;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-light-2);
}
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/Views/MasterScheduleTable/MasterScheduleTable.razor.rz.scp.css */
.master-schedule-table[master-schedule-table-view] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.table[master-schedule-table-view] {
    width: 100%;
    height: 1px; 
    font-size: 0.875rem;
    border: 1px solid var(--grey-light-3);
}

    .table th[master-schedule-table-view], .table td[master-schedule-table-view] {
        position: relative;
        vertical-align: inherit;
    }

    .table td[master-schedule-table-view] {
        border-bottom: 1px solid var(--grey-light-3);
        text-align: left;
        padding: 4px 12px;
        background: #FFFFFF;
    }

    .table th[master-schedule-table-view] {
        color: var(--grey-3);
        background: var(--grey-light-1);
        height: 44px;
        padding: 5px 12px;
        text-align: left;
    }

    .table .th--sticky[master-schedule-table-view] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

    .table [rowspan][master-schedule-table-view] {
        vertical-align: top;
    }

    .table .td--sticky[master-schedule-table-view] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

    .table .th--sticky.th--sticky-top-left[master-schedule-table-view] {
        left: -5px;
        top: 0;
    }

    .table .th--sticky.th--sticky-top-right[master-schedule-table-view] {
        right: -5px;
        top: 0;
    }

    .table .th--sticky.th--sticky-left[master-schedule-table-view],
    .table .td--sticky.td--sticky-left[master-schedule-table-view] {
        left: -5px;
    }

    .table .th--sticky.th--sticky-right[master-schedule-table-view],
    .table .td--sticky.td--sticky-right[master-schedule-table-view] {
        right: -5px;
    }

    .table .th--sticky-top[master-schedule-table-view] {
        top: 0;
    }

    .table .th--sticky[master-schedule-table-view]::before, .table .th--sticky[master-schedule-table-view]::after,
    .table .th--sticky[courses-table-component][master-schedule-table-view]::after {
        content: none;
        position: absolute;
        display: block;
    }

.td--sticky-right[master-schedule-table-view] {
    background-color: transparent !important;
}

tr[master-schedule-table-view] {
    background-color: white;
}

[master-schedule-table-view] .spinner-profile-height {
    height: 100% !important;
}

[master-schedule-table-view] .scroll {
    padding: 0 !important;
}

[master-schedule-table-view] .field-menu.menu--headline {
    border-radius: 3px;
    min-width: 74px;
    display: flex;
    padding: 5px 0;
}

    [master-schedule-table-view] .field-menu.menu--headline > .menu-header > .text-overflow {
        font-size: 14px;
        font-weight: normal;
    }

.master-schedule-table[master-schedule-table-view]  .table {
    border: none !important;
}

.header-item-container[master-schedule-table-view] {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/Views/MasterScheduleTable/Views/MasterScheduleTableRow/MasterScheduleTableRow.razor.rz.scp.css */
td[b-3mzy3e7z94] {
    position: relative;
    vertical-align: inherit;
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    padding: 4px 12px;
    background: #FFFFFF;
}

.td--sticky[b-3mzy3e7z94] {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
}

.td--sticky.td--sticky-left[b-3mzy3e7z94] {
    left: -5px;
}

.td--sticky.td--sticky-right[b-3mzy3e7z94] {
    right: -5px;
}

.td--sticky-right[b-3mzy3e7z94] {
    background-color: transparent !important;
}

tr[b-3mzy3e7z94] {
    background-color: white;
}

.row-container[b-3mzy3e7z94] {
    height: auto;
}

.teacher-cell-container[b-3mzy3e7z94] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    padding: 4px 0;
}

.teacher-cell[b-3mzy3e7z94] {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    height: fit-content;
}

    .teacher-cell[b-3mzy3e7z94]  .avatar {
        width: 20px !important;
        height: 20px !important;
    }

.teacher-name-label[b-3mzy3e7z94] {
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-3);
}

tr:hover[b-3mzy3e7z94]  .free-slot {
    display: flex
}
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/Views/MasterScheduleTable/Views/MasterScheduleTableRowCell/MasterScheduleTableRowCell.razor.rz.scp.css */
.row-cell-container[b-jnj5jlhw0p] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
}

.free-slot[b-jnj5jlhw0p] {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 16px;
}

    .free-slot[b-jnj5jlhw0p]  .btn {
        width: 100% !important;
        height: 100% !important;
    }
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/Views/MasterScheduleToolbar/MasterScheduleToolbar.razor.rz.scp.css */
.master-schedule-toolbar[master-schedule-toolbar-view] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.master-schedule-toolbar-container[master-schedule-toolbar-view] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .master-schedule-toolbar-container[master-schedule-toolbar-view] .btn--simple {
        width: 100px;
        height: 39px;
        border-radius: 4px;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
    }

.data-range-text[master-schedule-toolbar-view] {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px;
}

.text-clamp[master-schedule-toolbar-view] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.master-schedule-toolbar-actions[master-schedule-toolbar-view] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .master-schedule-toolbar-actions[master-schedule-toolbar-view]  .btn {
        height: 39px;
    }

    .master-schedule-toolbar-actions[master-schedule-toolbar-view]  .btn-overview {
        background-color: var(--grey-light-1);
    }

    .master-schedule-toolbar-actions[master-schedule-toolbar-view]  .field-menu .option {
        padding: 8px;
    }

.dropdown-button-content[master-schedule-toolbar-view] {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
}

    .dropdown-button-content[master-schedule-toolbar-view] .icon {
        width: 16px !important;
        height: 16px !important;
        flex: none !important;
        left: 0 !important;
    }

    .dropdown-button-content[master-schedule-toolbar-view]  path {
        fill: white !important;
    }
/* /Pages/Admin/SchoolYears/Components/MasterScheduleTab/Views/ScheduledCourseSection/ScheduledCourseSection.razor.rz.scp.css */
.course-section[master-course-section-view] {
    display: flex;
    padding: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid white;
}

    .course-section:hover[master-course-section-view] {
        border-color: var(--grey-light-3);
        background: var(--grey-light-2);
    }

        .course-section:hover .course-section-options[master-course-section-view] {
            display: flex;
        }

.course-section-header[master-course-section-view] {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
}

.course-section-title[master-course-section-view] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-dark-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-right: 10px;
}

.course-section-tags[master-course-section-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

    .course-section-tags[master-course-section-view] .header {
        overflow: hidden;
    }

.course-section-options[master-course-section-view] {
    display: none;
    position: absolute;
    top: -3px;
    right: -9px;
}

    .course-section-options[master-course-section-view]  .btn {
        transform: translateY(-50%) rotate(0deg) !important;
        background: none !important;
    }

    .course-section-options[master-course-section-view]  .menu .option.option--icon {
        padding: 8px 8px 8px 10px !important;
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/BlockPickerView/View/BlockPicker.razor.rz.scp.css */
.grid-blocks[block-picker-view] {
    display: grid;
    grid-gap: 10px;
    justify-content: space-between;
    align-content: center;
    padding: 10px;
}

    .grid-blocks.grid--col-schedule-build-block[block-picker-view] {
        grid-template-columns: repeat(auto-fit, 43px);
    }

    .grid-blocks .grid-item[block-picker-view] {
        aspect-ratio: 1/1;
    }

.tabs-conatainer[block-picker-view] {
    display: flex;
    flex-direction: row;
    margin: 20px 15px 20px 15px;
}

.tab-item[block-picker-view] {
    width: 100%;
}

    .tab-item[block-picker-view]  .btn {
        width: 100%;
        border-radius: 0;
    }

    .tab-item:first-child[block-picker-view] .btn {
        border-right: 0;
        border-radius: 4px 0 0 4px;
    }

    .tab-item:last-child[block-picker-view] .btn {
        border-radius: 0 4px 4px 0;
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/BlocksListView/View/BlocksList.razor.rz.scp.css */
.blocks-list[blocks-list-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 6px 0 3px;
    width: 64px;
    border-right: 1px solid var(--grey-light-3);
    background: rgba(255, 255, 255, 0.3);
}

.blocks-list-header[blocks-list-view] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 3px;
}

.blocks-list-body[blocks-list-view] {
    margin-top: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

    .blocks-list-body .scroll[blocks-list-view] {
        padding: 0 6px 6px;
    }

.blocks-container[blocks-list-view] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

    .blocks-container .item-block:not(:last-child)[blocks-list-view] {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--grey-light-3);
    }

[blocks-list-view] .loader-spinner--mini {
    margin: 0 !important;
}
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/BlockView/View/Block.razor.rz.scp.css */
/* CSS override */

.block-name-container[block-view] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.alter-label[block-view] {
    display: flex;
    padding: 1px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: white;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    text-transform: uppercase;
    width: 100%;
    z-index: 1;
}

.btn-label.index[block-view] {
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 22px !important;
}

[block-view] .progress {
    margin-top: 6px;
    display: block;
}

[block-view] .progress-bar {
    position: absolute !important;
    width: 100% !important;
    background: transparent !important;
}

    [block-view] .progress-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.2;
        background: currentColor;
    }

[block-view] .progress-percent {
    display: none !important;
}

[block-view] .bar {
    position: relative !important;
    background: currentColor !important;
    z-index: 1 !important;
}

.schedule-build-block[block-view] {
    margin: auto;
    position: relative;
    background: transparent;
    width: 36px;
    border-radius: 4px;
}

    /* Original CSS */

    .schedule-build-block.size--lg[block-view] {
        width: 43px;
    }

    .schedule-build-block .block-btn[block-view] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: inherit;
        border: 1px solid currentColor;
        line-height: 1.2;
        cursor: pointer;
        overflow: hidden;
        gap: 2px;
    }

        .schedule-build-block .block-btn.type--select[block-view] {
            border-color: var(--grey-light-3);
        }

            .schedule-build-block .block-btn.type--select[block-view]::before {
                opacity: 0;
            }

        .schedule-build-block .block-btn.state--active[block-view]::before, .schedule-build-block .block-btn:hover[block-view]::before {
            opacity: 1;
        }

        .schedule-build-block .block-btn.state--active .btn-label[block-view],
        .schedule-build-block .block-btn:hover .btn-label[block-view] {
            color: #ffffff;
        }

        .schedule-build-block .block-btn:hover .alter-label[block-view] {
            color: currentColor;
            background-color: white !important;
        }

        .schedule-build-block .block-btn.state--capacity[block-view], .schedule-build-block .block-btn.state--selected[block-view], .schedule-build-block .block-btn.state--used[block-view] {
            border-color: currentColor;
            pointer-events: none;
        }

            .schedule-build-block .block-btn.state--capacity[block-view]::before, .schedule-build-block .block-btn.state--selected[block-view]::before, .schedule-build-block .block-btn.state--used[block-view]::before {
                opacity: 1;
            }

            .schedule-build-block .block-btn.state--capacity .btn-label[block-view], .schedule-build-block .block-btn.state--selected .btn-label[block-view], .schedule-build-block .block-btn.state--used .btn-label[block-view] {
                color: #ffffff;
            }

        .schedule-build-block .block-btn.state--capacity[block-view] {
            color: var(--orange);
        }

        .schedule-build-block .block-btn.state--selected[block-view] {
            color: var(--green);
        }

        .schedule-build-block .block-btn.state--used[block-view] {
            color: var(--red);
        }

        .schedule-build-block .block-btn.state--disabled[block-view] {
            opacity: 0.5;
            border: none;
            color: var(--grey-3);
            pointer-events: none;
        }

            .schedule-build-block .block-btn.state--disabled[block-view]::before {
                content: none;
            }

        .schedule-build-block .block-btn[block-view]::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            background: currentColor;
            transition: all var(--transition-duration) ease 0s;
            opacity: 0.1;
        }

        .schedule-build-block .block-btn .btn-label[block-view] {
            flex: 1 1 auto;
            position: relative;
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 20px;
            z-index: 1;
        }

    .schedule-build-block .block-tag[block-view] {
        width: 100%;
        height: 11px;
        font-size: 10px;
        text-align: center;
        line-height: 1;
        background: currentColor;
        z-index: 1;
    }

        .schedule-build-block .block-tag span[block-view] {
            color: #ffffff;
            text-transform: uppercase;
        }

    .schedule-build-block .progress[block-view] {
        margin-top: 6px;
        display: block;
    }

        .schedule-build-block .progress .progress-bar[block-view] {
            position: absolute;
            width: 100%;
            background: transparent;
        }

            .schedule-build-block .progress .progress-bar[block-view]::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0.2;
                background: currentColor;
            }

            .schedule-build-block .progress .progress-bar .bar[block-view] {
                position: relative;
                background: currentColor;
                z-index: 1;
            }

        .schedule-build-block .progress .progress-percent[block-view] {
            display: none;
        }

.layout--dark .schedule-build-block[block-view] {
    color: var(--grey-light-1);
}

    .layout--dark .schedule-build-block .block-btn.type--select[block-view] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .schedule-build-block .block-btn.state--active .btn-label[block-view], .layout--dark .schedule-build-block .block-btn:hover .btn-label[block-view] {
        color: var(--grey-dark-4);
    }

    .layout--dark .schedule-build-block .block-btn.state--capacity[block-view], .layout--dark .schedule-build-block .block-btn.state--selected[block-view], .layout--dark .schedule-build-block .block-btn.state--used[block-view] {
        border-color: currentColor;
    }

        .layout--dark .schedule-build-block .block-btn.state--capacity .btn-label[block-view], .layout--dark .schedule-build-block .block-btn.state--selected .btn-label[block-view], .layout--dark .schedule-build-block .block-btn.state--used .btn-label[block-view] {
            color: var(--grey-dark-4);
        }

    .layout--dark .schedule-build-block .block-tag span[block-view] {
        color: var(--grey-dark-4);
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/CalendarViews/RotationalScheduleView/View/RotationalSchedule.razor.rz.scp.css */
/** CSS override */

.controls[b-bt8960b72o] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/** Original CSS */

.schedule-build-calendar[b-bt8960b72o],
.schedule-build-calendar-rotations[b-bt8960b72o],
.schedule-build-calendar-week[b-bt8960b72o] {
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    overflow: hidden;
    min-width: 168px;
    background: #ffffff;
}

    .schedule-build-calendar.type--shadow[b-bt8960b72o],
    .schedule-build-calendar-rotations.type--shadow[b-bt8960b72o],
    .schedule-build-calendar-week.type--shadow[b-bt8960b72o] {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    }

    .schedule-build-calendar[b-bt8960b72o]::after,
    .schedule-build-calendar-rotations[b-bt8960b72o]::after,
    .schedule-build-calendar-week[b-bt8960b72o]::after {
        flex: 1 1 auto;
        background: var(--grey-light-3);
    }

    .schedule-build-calendar .calendar-header[b-bt8960b72o],
    .schedule-build-calendar-rotations .calendar-header[b-bt8960b72o],
    .schedule-build-calendar-week .calendar-header[b-bt8960b72o] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 6px 8px 10px;
        background: var(--alpha-dark-1);
    }

        .schedule-build-calendar .calendar-header .headline[b-bt8960b72o],
        .schedule-build-calendar-rotations .calendar-header .headline[b-bt8960b72o],
        .schedule-build-calendar-week .calendar-header .headline[b-bt8960b72o] {
            line-height: 1.25;
        }

            .schedule-build-calendar .calendar-header .headline .label[b-bt8960b72o],
            .schedule-build-calendar .calendar-header .headline .meta[b-bt8960b72o],
            .schedule-build-calendar-rotations .calendar-header .headline .label[b-bt8960b72o],
            .schedule-build-calendar-rotations .calendar-header .headline .meta[b-bt8960b72o],
            .schedule-build-calendar-week .calendar-header .headline .label[b-bt8960b72o],
            .schedule-build-calendar-week .calendar-header .headline .meta[b-bt8960b72o] {
                display: block;
            }

        .schedule-build-calendar .calendar-header .controls[b-bt8960b72o],
        .schedule-build-calendar-rotations .calendar-header .controls[b-bt8960b72o],
        .schedule-build-calendar-week .calendar-header .controls[b-bt8960b72o] {
            line-height: 0;
        }

    .schedule-build-calendar .calendar-body .scroll[b-bt8960b72o],
    .schedule-build-calendar-rotations .calendar-body .scroll[b-bt8960b72o],
    .schedule-build-calendar-week .calendar-body .scroll[b-bt8960b72o] {
        padding: 0;
    }

    .schedule-build-calendar .table[b-bt8960b72o],
    .schedule-build-calendar-rotations .table[b-bt8960b72o],
    .schedule-build-calendar-week .table[b-bt8960b72o] {
        table-layout: fixed;
    }

        .schedule-build-calendar .table [rowspan][b-bt8960b72o],
        .schedule-build-calendar-rotations .table [rowspan][b-bt8960b72o],
        .schedule-build-calendar-week .table [rowspan][b-bt8960b72o] {
            padding: 6px 4px 2px;
        }

        .schedule-build-calendar .table .label.label--meta[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .label.label--meta[b-bt8960b72o],
        .schedule-build-calendar-week .table .label.label--meta[b-bt8960b72o] {
            letter-spacing: 0;
        }

        .schedule-build-calendar .table .time-start[b-bt8960b72o],
        .schedule-build-calendar .table .time-end[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .time-start[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .time-end[b-bt8960b72o],
        .schedule-build-calendar-week .table .time-start[b-bt8960b72o],
        .schedule-build-calendar-week .table .time-end[b-bt8960b72o] {
            display: block;
        }

        .schedule-build-calendar .table .time-start[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .time-start[b-bt8960b72o],
        .schedule-build-calendar-week .table .time-start[b-bt8960b72o] {
            margin-top: 2px;
        }

        .schedule-build-calendar .table .time-end[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .time-end[b-bt8960b72o],
        .schedule-build-calendar-week .table .time-end[b-bt8960b72o] {
            opacity: 0.75;
        }

        .schedule-build-calendar .table .btn[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .btn[b-bt8960b72o],
        .schedule-build-calendar-week .table .btn[b-bt8960b72o] {
            margin-top: 3px;
            color: var(--grey-1);
        }

            .schedule-build-calendar .table .btn .icon[b-bt8960b72o],
            .schedule-build-calendar-rotations .table .btn .icon[b-bt8960b72o],
            .schedule-build-calendar-week .table .btn .icon[b-bt8960b72o] {
                width: 0.75em;
                height: initial;
            }

        .schedule-build-calendar .table .schedule-build-block[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .schedule-build-block[b-bt8960b72o],
        .schedule-build-calendar-week .table .schedule-build-block[b-bt8960b72o] {
            display: inline-block;
            margin-top: 0;
        }

        .schedule-build-calendar .table .table--cell-spacer[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .table--cell-spacer[b-bt8960b72o],
        .schedule-build-calendar-week .table .table--cell-spacer[b-bt8960b72o] {
            width: initial;
            border-width: 0;
            background: transparent;
        }

            .schedule-build-calendar .table .table--cell-spacer[b-bt8960b72o]::after,
            .schedule-build-calendar-rotations .table .table--cell-spacer[b-bt8960b72o]::after,
            .schedule-build-calendar-week .table .table--cell-spacer[b-bt8960b72o]::after {
                content: none;
            }

        .schedule-build-calendar .table .table--cell-pattern[b-bt8960b72o],
        .schedule-build-calendar-rotations .table .table--cell-pattern[b-bt8960b72o],
        .schedule-build-calendar-week .table .table--cell-pattern[b-bt8960b72o] {
            border-right-width: 1px;
            border-left-width: 1px;
        }

            .schedule-build-calendar .table .table--cell-pattern .pattern[b-bt8960b72o],
            .schedule-build-calendar-rotations .table .table--cell-pattern .pattern[b-bt8960b72o],
            .schedule-build-calendar-week .table .table--cell-pattern .pattern[b-bt8960b72o] {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-size: 42px;
                background-color: var(--alpha-dark-1);
            }

        .schedule-build-calendar .table thead tr[b-bt8960b72o],
        .schedule-build-calendar-rotations .table thead tr[b-bt8960b72o],
        .schedule-build-calendar-week .table thead tr[b-bt8960b72o] {
            border-top: 1px solid var(--grey-light-3);
        }

        .schedule-build-calendar .table th[b-bt8960b72o],
        .schedule-build-calendar .table td[b-bt8960b72o],
        .schedule-build-calendar-rotations .table th[b-bt8960b72o],
        .schedule-build-calendar-rotations .table td[b-bt8960b72o],
        .schedule-build-calendar-week .table th[b-bt8960b72o],
        .schedule-build-calendar-week .table td[b-bt8960b72o] {
            width: 42px;
            height: 42px;
            color: var(--grey-3);
            font-size: 12px;
            font-weight: 600;
            border: 1px solid var(--grey-light-3);
            line-height: 1.2;
            vertical-align: middle;
            text-align: center;
        }

            .schedule-build-calendar .table th:first-child[b-bt8960b72o],
            .schedule-build-calendar .table td:first-child[b-bt8960b72o],
            .schedule-build-calendar-rotations .table th:first-child[b-bt8960b72o],
            .schedule-build-calendar-rotations .table td:first-child[b-bt8960b72o],
            .schedule-build-calendar-week .table th:first-child[b-bt8960b72o],
            .schedule-build-calendar-week .table td:first-child[b-bt8960b72o] {
                border-left-width: 0;
            }

            .schedule-build-calendar .table th:last-child[b-bt8960b72o],
            .schedule-build-calendar .table td:last-child[b-bt8960b72o],
            .schedule-build-calendar-rotations .table th:last-child[b-bt8960b72o],
            .schedule-build-calendar-rotations .table td:last-child[b-bt8960b72o],
            .schedule-build-calendar-week .table th:last-child[b-bt8960b72o],
            .schedule-build-calendar-week .table td:last-child[b-bt8960b72o] {
                border-right-width: 0;
            }

        .schedule-build-calendar .table tbody tr:last-child td[b-bt8960b72o], .schedule-build-calendar .table tbody tr:last-child th[b-bt8960b72o],
        .schedule-build-calendar-rotations .table tbody tr:last-child td[b-bt8960b72o],
        .schedule-build-calendar-rotations .table tbody tr:last-child th[b-bt8960b72o],
        .schedule-build-calendar-week .table tbody tr:last-child td[b-bt8960b72o],
        .schedule-build-calendar-week .table tbody tr:last-child th[b-bt8960b72o] {
            border-bottom-width: 0;
        }

    .schedule-build-calendar-rotations .calendar-header .controls[b-bt8960b72o] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.layout--light .schedule-build-calendar[b-bt8960b72o],
.layout--light .schedule-build-calendar-rotations[b-bt8960b72o],
.layout--light .schedule-build-calendar-week[b-bt8960b72o] {
    background: #ffffff;
}

    .layout--light .schedule-build-calendar .table .table--cell-spacer[b-bt8960b72o],
    .layout--light .schedule-build-calendar-rotations .table .table--cell-spacer[b-bt8960b72o],
    .layout--light .schedule-build-calendar-week .table .table--cell-spacer[b-bt8960b72o] {
        background: transparent;
    }

    .layout--light .schedule-build-calendar .table th[b-bt8960b72o],
    .layout--light .schedule-build-calendar-rotations .table th[b-bt8960b72o],
    .layout--light .schedule-build-calendar-week .table th[b-bt8960b72o] {
        background: var(--alpha-dark-1);
    }

.layout--dark .schedule-build-calendar[b-bt8960b72o],
.layout--dark .schedule-build-calendar-rotations[b-bt8960b72o],
.layout--dark .schedule-build-calendar-week[b-bt8960b72o] {
    background: var(--grey-dark-4);
    border-color: var(--alpha-light-2);
}

    .layout--dark .schedule-build-calendar[b-bt8960b72o]::after,
    .layout--dark .schedule-build-calendar-rotations[b-bt8960b72o]::after,
    .layout--dark .schedule-build-calendar-week[b-bt8960b72o]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .schedule-build-calendar .calendar-header[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .calendar-header[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .calendar-header[b-bt8960b72o] {
        background: var(--alpha-light-1);
    }

    .layout--dark .schedule-build-calendar .table .table--cell-spacer[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .table .table--cell-spacer[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .table .table--cell-spacer[b-bt8960b72o] {
        background: transparent;
    }

    .layout--dark .schedule-build-calendar .table .btn[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .table .btn[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .table .btn[b-bt8960b72o] {
        color: var(--grey-dark-1);
    }

    .layout--dark .schedule-build-calendar .table thead tr[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .table thead tr[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .table thead tr[b-bt8960b72o] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .schedule-build-calendar .table th[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .table th[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .table th[b-bt8960b72o] {
        background: var(--alpha-light-1);
    }

    .layout--dark .schedule-build-calendar .table th[b-bt8960b72o],
    .layout--dark .schedule-build-calendar .table td[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .table th[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-rotations .table td[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .table th[b-bt8960b72o],
    .layout--dark .schedule-build-calendar-week .table td[b-bt8960b72o] {
        border-color: var(--alpha-light-2);
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/CalendarViews/TimeScheduleView/View/TimeSchedule.razor.rz.scp.css */
/** CSS override */

.scroll[time-schedule-matrix-view] {
    overflow: hidden;
}

.free-slot[time-schedule-matrix-view] {
    display: none;
}
/** Original CSS */

.schedule-build-calendar[time-schedule-matrix-view],
.schedule-build-calendar-rotations[time-schedule-matrix-view],
.schedule-build-calendar-week[time-schedule-matrix-view] {
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    overflow: hidden;
    min-width: 168px;
    background: #ffffff;
}

    .schedule-build-calendar.type--shadow[time-schedule-matrix-view],
    .schedule-build-calendar-rotations.type--shadow[time-schedule-matrix-view],
    .schedule-build-calendar-week.type--shadow[time-schedule-matrix-view] {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    }

    .schedule-build-calendar[time-schedule-matrix-view]::after,
    .schedule-build-calendar-rotations[time-schedule-matrix-view]::after,
    .schedule-build-calendar-week[time-schedule-matrix-view]::after {
        flex: 1 1 auto;
        background: var(--grey-light-3);
    }

    .schedule-build-calendar .calendar-header[time-schedule-matrix-view],
    .schedule-build-calendar-rotations .calendar-header[time-schedule-matrix-view],
    .schedule-build-calendar-week .calendar-header[time-schedule-matrix-view] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 6px 8px 10px;
        background: var(--alpha-dark-1);
    }

        .schedule-build-calendar .calendar-header .headline[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .calendar-header .headline[time-schedule-matrix-view],
        .schedule-build-calendar-week .calendar-header .headline[time-schedule-matrix-view] {
            line-height: 1.25;
        }

            .schedule-build-calendar .calendar-header .headline .label[time-schedule-matrix-view],
            .schedule-build-calendar .calendar-header .headline .meta[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .calendar-header .headline .label[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .calendar-header .headline .meta[time-schedule-matrix-view],
            .schedule-build-calendar-week .calendar-header .headline .label[time-schedule-matrix-view],
            .schedule-build-calendar-week .calendar-header .headline .meta[time-schedule-matrix-view] {
                display: block;
            }

        .schedule-build-calendar .calendar-header .controls[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .calendar-header .controls[time-schedule-matrix-view],
        .schedule-build-calendar-week .calendar-header .controls[time-schedule-matrix-view] {
            line-height: 0;
        }

    .schedule-build-calendar .calendar-body .scroll[time-schedule-matrix-view],
    .schedule-build-calendar-rotations .calendar-body .scroll[time-schedule-matrix-view],
    .schedule-build-calendar-week .calendar-body .scroll[time-schedule-matrix-view] {
        padding: 0;
    }

    .schedule-build-calendar .table[time-schedule-matrix-view],
    .schedule-build-calendar-rotations .table[time-schedule-matrix-view],
    .schedule-build-calendar-week .table[time-schedule-matrix-view] {
        table-layout: fixed;
    }

        .schedule-build-calendar .table [rowspan][time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table [rowspan][time-schedule-matrix-view],
        .schedule-build-calendar-week .table [rowspan][time-schedule-matrix-view] {
            padding: 6px 4px 2px;
        }

        .schedule-build-calendar .table .label.label--meta[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .label.label--meta[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .label.label--meta[time-schedule-matrix-view] {
            letter-spacing: 0;
        }

        .schedule-build-calendar .table .time-start[time-schedule-matrix-view],
        .schedule-build-calendar .table .time-end[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .time-start[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .time-end[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .time-start[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .time-end[time-schedule-matrix-view] {
            display: block;
        }

        .schedule-build-calendar .table .time-start[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .time-start[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .time-start[time-schedule-matrix-view] {
            margin-top: 2px;
        }

        .schedule-build-calendar .table .time-end[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .time-end[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .time-end[time-schedule-matrix-view] {
            opacity: 0.75;
        }

        .schedule-build-calendar .table .btn[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .btn[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .btn[time-schedule-matrix-view] {
            margin-top: 3px;
            color: var(--grey-1);
        }

            .schedule-build-calendar .table .btn .icon[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .table .btn .icon[time-schedule-matrix-view],
            .schedule-build-calendar-week .table .btn .icon[time-schedule-matrix-view] {
                width: 0.75em;
                height: initial;
            }

        .schedule-build-calendar .table .schedule-build-block[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .schedule-build-block[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .schedule-build-block[time-schedule-matrix-view] {
            display: inline-block;
            margin-top: 0;
        }

        .schedule-build-calendar .table .table--cell-spacer[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .table--cell-spacer[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .table--cell-spacer[time-schedule-matrix-view] {
            width: initial;
            border-width: 0;
            background: transparent;
        }

            .schedule-build-calendar .table .table--cell-spacer[time-schedule-matrix-view]::after,
            .schedule-build-calendar-rotations .table .table--cell-spacer[time-schedule-matrix-view]::after,
            .schedule-build-calendar-week .table .table--cell-spacer[time-schedule-matrix-view]::after {
                content: none;
            }

        .schedule-build-calendar .table .table--cell-pattern[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table .table--cell-pattern[time-schedule-matrix-view],
        .schedule-build-calendar-week .table .table--cell-pattern[time-schedule-matrix-view] {
            border-right-width: 1px;
            border-left-width: 1px;
        }

            .schedule-build-calendar .table .table--cell-pattern .pattern[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .table .table--cell-pattern .pattern[time-schedule-matrix-view],
            .schedule-build-calendar-week .table .table--cell-pattern .pattern[time-schedule-matrix-view] {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-size: 42px;
                background-color: var(--alpha-dark-1);
            }

        .schedule-build-calendar .table thead tr[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table thead tr[time-schedule-matrix-view],
        .schedule-build-calendar-week .table thead tr[time-schedule-matrix-view] {
            border-top: 1px solid var(--grey-light-3);
        }

        .schedule-build-calendar .table th[time-schedule-matrix-view],
        .schedule-build-calendar .table td[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table th[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table td[time-schedule-matrix-view],
        .schedule-build-calendar-week .table th[time-schedule-matrix-view],
        .schedule-build-calendar-week .table td[time-schedule-matrix-view] {
            width: 42px;
            height: 42px;
            color: var(--grey-3);
            font-size: 12px;
            font-weight: 600;
            border: 1px solid var(--grey-light-3);
            line-height: 1.2;
            vertical-align: middle;
            text-align: center;
        }

            .schedule-build-calendar-week .table td:hover .free-slot[time-schedule-matrix-view] {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: center;
            }

            .schedule-build-calendar .table th:first-child[time-schedule-matrix-view],
            .schedule-build-calendar .table td:first-child[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .table th:first-child[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .table td:first-child[time-schedule-matrix-view],
            .schedule-build-calendar-week .table th:first-child[time-schedule-matrix-view],
            .schedule-build-calendar-week .table td:first-child[time-schedule-matrix-view] {
                border-left-width: 0;
            }

            .schedule-build-calendar .table th:last-child[time-schedule-matrix-view],
            .schedule-build-calendar .table td:last-child[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .table th:last-child[time-schedule-matrix-view],
            .schedule-build-calendar-rotations .table td:last-child[time-schedule-matrix-view],
            .schedule-build-calendar-week .table th:last-child[time-schedule-matrix-view],
            .schedule-build-calendar-week .table td:last-child[time-schedule-matrix-view] {
                border-right-width: 0;
            }

        .schedule-build-calendar .table tbody tr:last-child td[time-schedule-matrix-view], .schedule-build-calendar .table tbody tr:last-child th[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table tbody tr:last-child td[time-schedule-matrix-view],
        .schedule-build-calendar-rotations .table tbody tr:last-child th[time-schedule-matrix-view],
        .schedule-build-calendar-week .table tbody tr:last-child td[time-schedule-matrix-view],
        .schedule-build-calendar-week .table tbody tr:last-child th[time-schedule-matrix-view] {
            border-bottom-width: 0;
        }

    .schedule-build-calendar-rotations .calendar-header .controls[time-schedule-matrix-view] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.layout--light .schedule-build-calendar[time-schedule-matrix-view],
.layout--light .schedule-build-calendar-rotations[time-schedule-matrix-view],
.layout--light .schedule-build-calendar-week[time-schedule-matrix-view] {
    background: #ffffff;
}

    .layout--light .schedule-build-calendar .table .table--cell-spacer[time-schedule-matrix-view],
    .layout--light .schedule-build-calendar-rotations .table .table--cell-spacer[time-schedule-matrix-view],
    .layout--light .schedule-build-calendar-week .table .table--cell-spacer[time-schedule-matrix-view] {
        background: transparent;
    }

    .layout--light .schedule-build-calendar .table th[time-schedule-matrix-view],
    .layout--light .schedule-build-calendar-rotations .table th[time-schedule-matrix-view],
    .layout--light .schedule-build-calendar-week .table th[time-schedule-matrix-view] {
        background: var(--alpha-dark-1);
    }

.layout--dark .schedule-build-calendar[time-schedule-matrix-view],
.layout--dark .schedule-build-calendar-rotations[time-schedule-matrix-view],
.layout--dark .schedule-build-calendar-week[time-schedule-matrix-view] {
    background: var(--grey-dark-4);
    border-color: var(--alpha-light-2);
}

    .layout--dark .schedule-build-calendar[time-schedule-matrix-view]::after,
    .layout--dark .schedule-build-calendar-rotations[time-schedule-matrix-view]::after,
    .layout--dark .schedule-build-calendar-week[time-schedule-matrix-view]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .schedule-build-calendar .calendar-header[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .calendar-header[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .calendar-header[time-schedule-matrix-view] {
        background: var(--alpha-light-1);
    }

    .layout--dark .schedule-build-calendar .table .table--cell-spacer[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .table .table--cell-spacer[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .table .table--cell-spacer[time-schedule-matrix-view] {
        background: transparent;
    }

    .layout--dark .schedule-build-calendar .table .btn[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .table .btn[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .table .btn[time-schedule-matrix-view] {
        color: var(--grey-dark-1);
    }

    .layout--dark .schedule-build-calendar .table thead tr[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .table thead tr[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .table thead tr[time-schedule-matrix-view] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .schedule-build-calendar .table th[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .table th[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .table th[time-schedule-matrix-view] {
        background: var(--alpha-light-1);
    }

    .layout--dark .schedule-build-calendar .table th[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar .table td[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .table th[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-rotations .table td[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .table th[time-schedule-matrix-view],
    .layout--dark .schedule-build-calendar-week .table td[time-schedule-matrix-view] {
        border-color: var(--alpha-light-2);
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/CalendarViews/WeeklyTimeScheduleView/View/WeeklyTimeSchedule.razor.rz.scp.css */
.tile-schedule-build-calendar[time-schedule-matrix-view] {
    display: inline-block;
    position: relative;
    max-height: 100%;
    border-top-width: 4px;
    border-top-style: solid;
    padding: 10px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    writing-mode: vertical-rl;
    transform: scale(-1);
}

.layout--dark .tile-schedule-build-calendar[time-schedule-matrix-view] {
    background: var(--alpha-light-1);
}
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/MatrixPanelView/View/MatrixPanel.razor.rz.scp.css */
.matrix-panel[matrix-panel-view] {
    margin-bottom: 52px;
    width: 350px;
}

.matrix-panel-footer[matrix-panel-view] {
    position: absolute;
    padding: 10px;
    bottom: 0;
    transform: translateY(100%);
    opacity: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--grey-light-3);
    background: #ffffff;
    transition: all var(--transition-duration) ease 0s;
    z-index: 1;
}

    .matrix-panel-footer.show-footer[matrix-panel-view] {
        transform: translateY(0);
        opacity: 1;
    }

.scroll[matrix-panel-view] {
    padding: 10px !important;
}
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/ScheduleBuild.razor.rz.scp.css */
[schedule-build-component] .loading-button {
    max-height: 32px !important;
}

.loading-button-container[schedule-build-component] {
    max-height: 32px !important;
    float: right;
}

.term-menu-items[schedule-build-component] {
    display: flex;
    width: auto;
}

.generate-term-actions[schedule-build-component] {
    display: flex;
}

    .generate-term-actions[schedule-build-component]  .btn {
        height: 38px;
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/TermScheduleView/TermScheduleView/View/TermSchedule.razor.rz.scp.css */
.term-schedule-header[term-schedule-view] {
    margin-bottom: 10px;
}

.term-schedule-body[term-schedule-view] {
    flex: 1 1 auto;
    min-height: 0;
}

    .term-schedule-body[term-schedule-view]  .schedule-build-calendar-week {
        box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.06);
    }
/* /Pages/Admin/SchoolYears/Components/ScheduleBuild/View/TermScheduleView/TermsView/View/Terms.razor.rz.scp.css */
.container[terms-view] {
    height: 100%;
}

[terms-view] .tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[terms-view] .tabs-body {
    flex: 1 1 auto;
    min-height: 0;
}

[terms-view] .tabs-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* /Pages/Admin/SchoolYears/Components/ScheduleCourseSectionDialog/ScheduleCourseSectionDialog.razor.rz.scp.css */
.schedule-course-section-dialog[schedule-course-section-dialog-component]  .dialog-header {
    padding: 7px 15px 7px 18px !important;
}

.body-content[schedule-course-section-dialog-component] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.header-container[schedule-course-section-dialog-component] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-subtitle[schedule-course-section-dialog-component] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* /Pages/Admin/SchoolYears/Components/ScheduleCourseSectionDialog/Views/CourseSectionItem/CourseSectionItem.razor.rz.scp.css */
.course-section-item-container[course-section-item-view] {
    display: flex;
    height: 40px;
    align-items: center;
    align-self: stretch;
    padding: 0 10px;
}

    .course-section-item-container:hover[course-section-item-view] {
        background-color: rgba(0, 0, 0, 0.05);
    }

.course-section-item[course-section-item-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

.course-section-item-header-title[course-section-item-view] {
    overflow: hidden;
    color: var(--grey-dark-3);
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
}

.course-section-item-body-text-title[course-section-item-view] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    color: var(--grey-3);
}

.course-section-item-body-text[course-section-item-view] {
    overflow: hidden;
    color: #616161;
    text-overflow: ellipsis;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}
/* /Pages/Admin/SchoolYears/Components/ScheduleCourseSectionDialog/Views/CourseSectionList/CourseSectionList.razor.rz.scp.css */
.course-section-list[course-section-list-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    min-height: 305px;
    padding: 10px 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: white;
}

    .course-section-list:has(.loader)[course-section-list-view] {
        justify-content: center;
    }

    .course-list .scroll[course-section-list-view] {
        padding: 0;
    }

.course-section-list[course-section-list-view]  .card{
    border: none !important;
    background-color: white !important;
}
/* /Pages/Admin/SchoolYears/Components/SchoolProgramsTable/SchoolProgramsTable.razor.rz.scp.css */
.programs-table[school-programs-table-component] {
    width: 100%;
    height: 100%;
}

.programs-table[school-programs-table-component]  .spinner-profile-height {
    height: 100% !important;
}

.programs-table[school-programs-table-component]  .table {
    background: #ffffff;
    height: auto;
    border: 1px solid var(--grey-light-3);
}

.programs-table[school-programs-table-component] .tr--expanded {
    position: relative;
    border-bottom: 0;
}

    .programs-table[school-programs-table-component] .tr--expanded td {
        background: var(--alpha-dark-1);
    }

        .programs-table[school-programs-table-component] .tr--expanded td::before {
            content: none;
        }

        .programs-table[school-programs-table-component] .tr--expanded td::after {
            box-sizing: border-box;
            content: "";
            position: absolute;
            left: 0;
            height: 3px;
            bottom: 0;
            width: 100%;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        }

.programs-table[school-programs-table-component]  .no-records-td {
    background: var(--grey-light-2) !important;
}

.programs-table[school-programs-table-component]  .action-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

.programs-table[school-programs-table-component]  .action-container button {
    border: none;
}

.programs-table[school-programs-table-component]  .action-container button:not(:hover) {
    background-color: inherit;
}

.programs-table[school-programs-table-component]  .action-container button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.programs-table[school-programs-table-component]  .action-container button svg {
    width: 10px;
    height: 10px;
    color: #888888;
}
.programs-table[school-programs-table-component]  .action-container button:hover svg {
    color: #888888;
}

.tooltip[school-programs-table-component] {
    border-radius: 4px;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: var(--grey-dark-3);
}

.tooltip .item[school-programs-table-component] {
    color: var(--grey-light-2);
    font-weight: 400;
    font-size: 12px;
    line-height: 16.34px;
}
/* /Pages/Admin/SchoolYears/Components/SchoolYearCreator/SchoolYearCreator.razor.rz.scp.css */
[b-jy3udre1pk] .btn-override {
    height: 32px !important;
}

.table-school-year-header[b-jy3udre1pk] {
    display: flex;
    justify-content: space-between;
}
[b-jy3udre1pk] .school-year-filter-drop-down {
    height: 100%;
    width: 13.5rem;
}
    [b-jy3udre1pk] .school-year-filter-drop-down .text-overflow {
        white-space: nowrap !important;
        max-width: 13.5rem;
    }
/* /Pages/Admin/SchoolYears/Components/SchoolYearTable/SchoolYearTable.razor.rz.scp.css */
.state-selection-dropdown-container[b-pfedq4xidt] {
    width: 120px;
    height: 32px;
    display: flex;
    align-items: center;
}

.state-selection-dropdown-container[b-pfedq4xidt] .field-menu .menu-header {
    width: 120px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--grey-light-3);
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
}

.action-container[b-pfedq4xidt] {
    display: flex;
}
.action-container[b-pfedq4xidt]  .menu--more .menu-header .btn {
    transform: translateY(-50%) rotate(0deg);
}
.action-container[b-pfedq4xidt]  .btn:not(:hover) .icon {
    color: var(--grey-1);
}
/* /Pages/Admin/SchoolYears/Components/TimeScheduleTable/TimeScheduleTable.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1 General */
.table[time-schedule-table-component] {
    width: 100%;
    font-size: 0.875rem;
}

    .table th[time-schedule-table-component], .table td[time-schedule-table-component] {
        position: relative;
        vertical-align: inherit;
    }

    .table th[time-schedule-table-component] {
        background: var(--alpha-dark-1);
    }

    .table [rowspan][time-schedule-table-component] {
        vertical-align: top;
    }

    .table .tr--highlight th[time-schedule-table-component] {
        background: var(--alpha-dark-2);
    }

    .table .tr--highlight td[time-schedule-table-component] {
        background: var(--alpha-dark-1);
    }

    .table .tr--thin > *[time-schedule-table-component] {
        padding-top: 4px;
        padding-bottom: 4px;
        height: auto;
    }

    .table .tr--layout[time-schedule-table-component] {
        padding: 0;
        height: 0;
    }

        .table .tr--layout th[time-schedule-table-component], .table .tr--layout td[time-schedule-table-component] {
            padding: 0;
            height: 0;
            border: 0;
        }

    .table .tr--link[time-schedule-table-component],
    .table .td--link[time-schedule-table-component] {
        cursor: pointer;
        transition: all var(--transition-duration) ease 0s;
    }

        .table .tr--link:hover[time-schedule-table-component], .table .tr--link:focus[time-schedule-table-component], .table .tr--link:active[time-schedule-table-component],
        .table .td--link:hover[time-schedule-table-component],
        .table .td--link:focus[time-schedule-table-component],
        .table .td--link:active[time-schedule-table-component] {
            background-color: var(--alpha-dark-1);
        }

    .table .th--sticky[time-schedule-table-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

        .table .th--sticky[time-schedule-table-component]::before, .table .th--sticky[time-schedule-table-component]::after {
            content: "";
            position: absolute;
            display: block;
        }

        .table .th--sticky.th--sticky-top[time-schedule-table-component] {
            top: 0;
        }

            .table .th--sticky.th--sticky-top[time-schedule-table-component]::before, .table .th--sticky.th--sticky-top[time-schedule-table-component]::after {
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom-width: inherit;
                border-bottom-style: inherit;
                border-bottom-color: inherit;
            }

            .table .th--sticky.th--sticky-top[time-schedule-table-component]::before {
                height: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-top[time-schedule-table-component]::after {
                height: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-left[time-schedule-table-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-left[time-schedule-table-component]::before, .table .th--sticky.th--sticky-left[time-schedule-table-component]::after {
                right: -1px;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-left[time-schedule-table-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-left[time-schedule-table-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-right[time-schedule-table-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-right[time-schedule-table-component]::before, .table .th--sticky.th--sticky-right[time-schedule-table-component]::after {
                left: 0;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-right[time-schedule-table-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-right[time-schedule-table-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-top-left[time-schedule-table-component], .table .th--sticky.th--sticky-top-right[time-schedule-table-component] {
            top: 0;
            z-index: 4;
        }

            .table .th--sticky.th--sticky-top-left > *[time-schedule-table-component], .table .th--sticky.th--sticky-top-right > *[time-schedule-table-component] {
                position: relative;
                z-index: 1;
            }

            .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::before, .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::after, .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::before, .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::after {
                filter: blur(1px);
                background: rgba(0, 0, 0, 0.15);
            }

            .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::before, .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::before {
                top: 0;
                height: 100%;
                width: 1px;
            }

            .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::after, .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::after {
                bottom: -2px;
                left: 0;
                height: 1px;
                width: 100%;
            }

        .table .th--sticky.th--sticky-top-left[time-schedule-table-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::before {
                left: 100%;
            }

        .table .th--sticky.th--sticky-top-right[time-schedule-table-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::before {
                right: 100%;
            }

    .table .th--scroll-border-fix[time-schedule-table-component] {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + (2 * 1px));
        height: calc(100% + (2 * 1px));
        border: inherit;
    }

    .table .th--highlight[time-schedule-table-component] {
        color: var(--green);
        background: #f4fcf9;
        border: 1px solid #a8d7c4;
        z-index: 2;
    }

        .table .th--highlight > *[time-schedule-table-component] {
            color: inherit !important;
        }

    .table .th--clean[time-schedule-table-component] {
        padding: 0;
        border: none;
        background: transparent;
    }

        .table .th--clean.th--sticky[time-schedule-table-component]::before, .table .th--clean.th--sticky[time-schedule-table-component]::after {
            content: none;
        }

    .table .td--sticky[time-schedule-table-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

        .table .td--sticky.td--sticky-left[time-schedule-table-component] {
            left: 0;
        }

        .table .td--sticky.td--sticky-right[time-schedule-table-component] {
            right: 0;
        }

    .table .td--pseudo-border[time-schedule-table-component] {
        position: relative;
    }

        .table .td--pseudo-border[time-schedule-table-component]::before, .table .td--pseudo-border[time-schedule-table-component]::after {
            position: absolute;
            content: "";
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

        .table .td--pseudo-border[time-schedule-table-component]::before {
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }

        .table .td--pseudo-border[time-schedule-table-component]::after {
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
        }

    .table .table--cell-spacer[time-schedule-table-component] {
        width: 100%;
        background: transparent;
        border: none;
    }

        .table .table--cell-spacer[time-schedule-table-component]::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

    .table .table--cell-pattern[time-schedule-table-component] {
        position: relative;
    }

        .table .table--cell-pattern.th--sticky[time-schedule-table-component] {
            position: -webkit-sticky;
            position: sticky;
            background: transparent !important;
        }

            .table .table--cell-pattern.th--sticky .pattern[time-schedule-table-component] {
                left: 0;
                width: 100%;
                height: 100%;
            }

            .table .table--cell-pattern.th--sticky[time-schedule-table-component]::before, .table .table--cell-pattern.th--sticky[time-schedule-table-component]::after {
                content: none;
            }

        .table .table--cell-pattern .pattern[time-schedule-table-component] {
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + (2 * 1px));
            height: calc(100% + (2 * 1px));
            background-repeat: repeat;
            background-size: 45px;
            background-color: #ffffff;
        }

    .table .th--weekend[time-schedule-table-component] {
        background: var(--grey-light-1) !important;
    }

    .table .td--weekend[time-schedule-table-component] {
        background: rgba(0, 0, 0, 0.025) !important;
    }

        .table .td--weekend .pattern[time-schedule-table-component] {
            background-color: #ffffff;
        }

    .table .tr--weekend th .pattern[time-schedule-table-component], .table .tr--weekend td .pattern[time-schedule-table-component] {
        background-color: var(--alpha-dark-1);
    }

    .table .tr--weekend th[time-schedule-table-component] {
        background: #efefef !important;
    }

    .table .tr--weekend td[time-schedule-table-component] {
        background-color: rgba(0, 0, 0, 0.025) !important;
    }

.layout--light .table th[time-schedule-table-component] {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover[time-schedule-table-component], .layout--dark .table .tr--link:focus[time-schedule-table-component], .layout--dark .table .tr--link:active[time-schedule-table-component],
.layout--dark .table .td--link:hover[time-schedule-table-component],
.layout--dark .table .td--link:focus[time-schedule-table-component],
.layout--dark .table .td--link:active[time-schedule-table-component] {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky[time-schedule-table-component] {
    background: var(--grey-dark-3);
}

    .layout--dark .table .th--sticky.th--sticky-top[time-schedule-table-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .layout--dark .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

.layout--dark .table .th--highlight[time-schedule-table-component] {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend[time-schedule-table-component] {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend[time-schedule-table-component] {
    background: rgba(255, 255, 255, 0.015) !important;
}

    .layout--dark .table .td--weekend .pattern[time-schedule-table-component] {
        background-color: #212121;
    }

.layout--dark .table .td--pseudo-border[time-schedule-table-component]::before, .layout--dark .table .td--pseudo-border[time-schedule-table-component]::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer[time-schedule-table-component]::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern[time-schedule-table-component] {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern[time-schedule-table-component], .layout--dark .tr--weekend td .pattern[time-schedule-table-component] {
    background-color: #212121;
}

.layout--dark .tr--weekend th[time-schedule-table-component] {
    background: #363636 !important;
}

.layout--dark .tr--weekend td[time-schedule-table-component] {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */

.table-wrapper.table-wrapper--flex[time-schedule-table-component] {
    display: flex;
    flex-direction: column;
}

    .table-wrapper.table-wrapper--flex .table-wrapper-body[time-schedule-table-component] {
        flex: 0 1 auto;
        min-height: 0;
    }

.table-wrapper.table-wrapper--card .table-wrapper-card[time-schedule-table-component] {
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    background: rgba(0, 0, 0, 0.025);
    border-radius: 4px;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .card[time-schedule-table-component] {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.025);
    border: none;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .scroll[time-schedule-table-component] {
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.table-wrapper .table-wrapper-header > *[time-schedule-table-component] {
    margin-bottom: 10px;
}

.table-wrapper .table-wrapper-header[data-view] .context-options[time-schedule-table-component] {
    display: none;
}

.table-wrapper .table-wrapper-header[data-view=context-options] .context-options[time-schedule-table-component] {
    display: block;
}

    .table-wrapper .table-wrapper-header[data-view=context-options] .context-options + *[time-schedule-table-component] {
        margin-left: 10px;
    }

.table-wrapper .table-wrapper-header .row[time-schedule-table-component] {
    align-items: center;
}

    .table-wrapper .table-wrapper-header .row > *[time-schedule-table-component] {
        width: auto;
        flex: 1 1 auto;
    }

.table-wrapper .table-wrapper-header .field-menu[time-schedule-table-component] {
    min-width: 160px;
}

.table-wrapper .table-wrapper-header .search[time-schedule-table-component] {
    max-width: 100%;
    width: 320px;
}

.table-wrapper .table-wrapper-body[data-view] .table-empty[time-schedule-table-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td[time-schedule-table-component],
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th[time-schedule-table-component] {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top[time-schedule-table-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left[time-schedule-table-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right[time-schedule-table-component]::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty[time-schedule-table-component] {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer[time-schedule-table-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .card[time-schedule-table-component] {
    height: auto;
}

.table-wrapper .table-wrapper-body .card[time-schedule-table-component],
.table-wrapper .table-wrapper-body .scroll[time-schedule-table-component] {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .table-wrapper-body .card[time-schedule-table-component] {
    background: #ffffff;
    height: 100%;
}

.table-wrapper .table-wrapper-footer > *[time-schedule-table-component] {
    padding: 10px 0 0;
}

.table-wrapper .table thead tr[time-schedule-table-component] {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th[time-schedule-table-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}

.table-wrapper .table tbody tr:last-child th[time-schedule-table-component],
.table-wrapper .table tbody tr:last-child td[time-schedule-table-component] {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky[time-schedule-table-component] {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child[time-schedule-table-component], .table-wrapper .table tr > *:last-child[time-schedule-table-component] {
    min-width: 40px;
}

.table-wrapper .table th[time-schedule-table-component],
.table-wrapper .table td[time-schedule-table-component] {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th[time-schedule-table-component] {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table .tr--nowrap > *[time-schedule-table-component] {
    white-space: nowrap;
}

.table-wrapper .table .tr--link td[time-schedule-table-component] {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky[time-schedule-table-component] {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top[time-schedule-table-component], .table-wrapper .table .th--sticky.th--sticky-top-left[time-schedule-table-component], .table-wrapper .table .th--sticky.th--sticky-top-right[time-schedule-table-component] {
    border-bottom: none;
}

    .table-wrapper .table .th--sticky.th--sticky-top[time-schedule-table-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::before {
        content: none;
    }

    .table-wrapper .table .th--sticky.th--sticky-top[time-schedule-table-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::after {
        height: 1px;
        bottom: 0px;
        background: var(--grey-light-3);
        filter: none;
        box-shadow: none;
    }

.table-wrapper .table .th--sticky.th--sticky-top[time-schedule-table-component] {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left[time-schedule-table-component], .table-wrapper .table .th--sticky.th--sticky-top-right[time-schedule-table-component] {
    z-index: 5;
}

.table-wrapper .table .th--highlight[time-schedule-table-component] {
    color: var(--green);
    background: #f4fcf9;
    border: none;
}

    .table-wrapper .table .th--highlight[time-schedule-table-component]::before {
        width: 100%;
        height: 100%;
        background: transparent;
    }

.table-wrapper .table .th--active[time-schedule-table-component] {
    color: var(--green);
}

    .table-wrapper .table .th--active.th--sort .sort[time-schedule-table-component] {
        opacity: 1;
    }

.table-wrapper .table .th--sort[time-schedule-table-component] {
    padding: 5px 20px 5px 12px;
    cursor: pointer;
}

    .table-wrapper .table .th--sort:hover[time-schedule-table-component] {
        background: #f0f0f0;
    }

        .table-wrapper .table .th--sort:hover .sort[time-schedule-table-component] {
            opacity: 1;
        }

    .table-wrapper .table .th--sort.sort--top .icon .sort-bottom[time-schedule-table-component] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort.sort--bottom .icon .sort-top[time-schedule-table-component] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort .sort[time-schedule-table-component] {
        position: absolute;
        width: 6px;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

.table-wrapper .table .th--check[time-schedule-table-component] {
    cursor: pointer;
}

    .table-wrapper .table .th--check:hover[time-schedule-table-component] {
        background: #f0f0f0;
    }

.table-wrapper .table .td--sticky[time-schedule-table-component] {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu[time-schedule-table-component] {
    position: absolute;
    top: 10px;
    right: 4px;
}

    .table-wrapper .table .td--row-menu .menu .btn .icon[time-schedule-table-component] {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.table-wrapper .table .field-check[time-schedule-table-component] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .table-wrapper .table .field-check .checkmark[time-schedule-table-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.table-wrapper .table-empty[time-schedule-table-component] {
    padding: 30px;
    text-align: center;
}

.layout--dark .table-wrapper[time-schedule-table-component] {
    border-color: var(--alpha-light-2);
}

    .layout--dark .table-wrapper.table-wrapper--card .card[time-schedule-table-component] {
        background: rgba(255, 255, 255, 0.025);
    }

    .layout--dark .table-wrapper.table-wrapper--card .scroll[time-schedule-table-component] {
        background: var(--grey-dark-4);
        border-color: var(--alpha-light-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    .layout--dark .table-wrapper .table thead th:hover[time-schedule-table-component] {
        background: #383838;
    }

    .layout--dark .table-wrapper .table th[time-schedule-table-component],
    .layout--dark .table-wrapper .table td[time-schedule-table-component] {
        border-bottom-color: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .tr--link:hover .td--sticky[time-schedule-table-component] {
        background: #2c2c2c;
    }

    .layout--dark .table-wrapper .table .th--sticky.th--sticky-top[time-schedule-table-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left[time-schedule-table-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right[time-schedule-table-component]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .td--sticky[time-schedule-table-component] {
        background: var(--grey-dark-4);
    }

    .layout--dark .table-wrapper .card[time-schedule-table-component] {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-4);
    }

.layout--dark .card[time-schedule-table-component] {
    background: var(--grey-dark-4);
}
/*# sourceMappingURL=theme.css.map */
/* /Pages/Admin/SchoolYears/Components/ViewSchoolYearProgramDialog/Views/CoursesTable/CoursesTable.razor.rz.scp.css */
.program-courses-table[school-year-program-courses-table-component] {
    width: 100%;
    height: 100%;
}

.program-courses-table[school-year-program-courses-table-component]  .table {
    background: #ffffff;
    height: auto;
    border: 1px solid var(--grey-light-3);
}

.program-courses-table[school-year-program-courses-table-component]  .no-records-td {
    background: var(--grey-light-2) !important;
}
/* /Pages/Admin/SchoolYears/Components/ViewSchoolYearProgramDialog/ViewSchoolYearProgramDialog.razor.rz.scp.css */
.body-content[view-school-year-program-dialog-component] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-program-dialog[view-school-year-program-dialog-component] .dialog-body {
    background: var(--grey-light-1);
}

.body-content[view-school-year-program-dialog-component]  .grade-levels-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.body-content[view-school-year-program-dialog-component]  .grade-levels-container-empty {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body-content[view-school-year-program-dialog-component]  .spinner-profile-height {
    height: 100% !important;
    min-height: 50vh;
}

.header[view-school-year-program-dialog-component] {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
}

.table-filter-container[view-school-year-program-dialog-component] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 1rem 1rem 2rem 1rem;
}
    .table-filter-container .table-filter-container-left[view-school-year-program-dialog-component] {
        width: 100%;
        min-width: 0;
        max-width: 320px;

        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .table-filter-container .table-filter-container-right[view-school-year-program-dialog-component] {
        min-width: 0;

        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

[view-school-year-program-dialog-component] .search--small {
    background: unset;
    padding: 0;
    width: 100%;
}
[view-school-year-program-dialog-component] .search--small .search-field input {
    height: 38.5px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

[view-school-year-program-dialog-component] .filter-drop-down {
    min-width: 0;
    width: 240px;
}

[view-school-year-program-dialog-component] .expandable-card.expanded .body .empty-value {
    font-size: 14px;
}

@media (max-width: 1108px) {
    .table-filter-container[view-school-year-program-dialog-component] {
        flex-direction: column;
        align-items: flex-start;
    }
        .table-filter-container .table-filter-container-left[view-school-year-program-dialog-component] {
            width: 100%;
            max-width: unset;
        }
        .table-filter-container .table-filter-container-right[view-school-year-program-dialog-component] {
            width: 100%;
            flex-direction: column;
            align-items: flex-start;
        }

        [view-school-year-program-dialog-component] .filter-drop-down {
            min-width: 0;
            width: 100%;
        }
}
/* /Pages/Admin/SchoolYears/Page/AdministratorSchoolYears.razor.rz.scp.css */
.school-years-page-container[administrator-school-builder-page] {
    height: 100%;
}

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

[administrator-school-builder-page] .window-navigation {
    height: 100%;
}

    [administrator-school-builder-page] .window-navigation .navigation-page {
        min-height: 600px;
        height: calc(100vh - 100px);
    }

        [administrator-school-builder-page].window-navigation .navigation-page.view-quick-start {
            padding-top: 10px;
            margin: 0 auto;
            max-width: 1200px;
        }

        [administrator-school-builder-page] .window-navigation .navigation-page.view-builder {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            max-width: 1556px;
        }

        [administrator-school-builder-page] .window-navigation .navigation-page .navigation-page-body {
            height: 100%;
        }

            [administrator-school-builder-page] .window-navigation .navigation-page .navigation-page-body > .container {
                height: 100%;
            }

[administrator-school-builder-page] .tabs--builder .tabs-body {
    flex: 1 1 0;
}

    [administrator-school-builder-page] .tabs--builder .tabs-body > .card {
        border-radius: 0;
    }

[administrator-school-builder-page] .quick-start {
    height: 100%;
}

    [administrator-school-builder-page] .quick-start > .card {
        height: 100%;
    }
/* /Pages/Admin/SchoolYears/Page/Views/QuickStart/QuickStart.razor.rz.scp.css */

/* /Pages/Admin/SchoolYears/Page/Views/SchoolYearBuilder/SchoolYearBuilder.razor.rz.scp.css */
/** CSS override */

[administrator-school-year-builder-view] .modal .modal-body {
    overflow: visible !important
}

.dashboard-main-builder[administrator-school-year-builder-view] {
    min-height: initial;
    height: 100%;
}

.navigation-page-body[administrator-school-year-builder-view] {
    flex: 1 1 auto;
    min-height: 0;
}

    .navigation-page-body > .container[administrator-school-year-builder-view] {
        display: flex;
        flex-direction: column;
    }


/* /Pages/Admin/SchoolYears/Page/Views/SchoolYearBuilder/Views/Footer/SchoolYearBuilderFooter.razor.rz.scp.css */
.navigation-page-footer[administrator-school-year-builder-footer-view] {
    padding: 0 10px;
}

.navigation-page-footer > .flex[administrator-school-year-builder-footer-view] {
    padding: 8px 10px;
    border-radius: 0 0 4px 4px;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-top: 0;
}
/* /Pages/Admin/SchoolYears/Views/BuilderLayout/BuilderLayout.razor.rz.scp.css */
.loader-container[builder-layout-view] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.builder-template[builder-layout-view] {
    display: flex;
    height: 100%;
    width: 100%;
}

    .builder-template:has(.builder-template-sidebar-container.visible) .builder-template-body[builder-layout-view] {
        flex: 1 1 0;
    }

.builder-template-sidebar-container[builder-layout-view] {
    display: flex;
    height: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    border-right: 1px solid var(--grey-light-3);
}

.builder-template-body-toolbar-container[builder-layout-view] {
        position: absolute;
        height: 64px;
        width: 100%;
        align-items: center;
        display: flex;
        background: white;
        padding: 12px;
        border-bottom: 1px solid var(--grey-light-3);
    }

    .builder-template-body-toolbar-container .sidebar-actions[builder-layout-view] {
        width: auto;
    }

    .builder-template-body-toolbar-container .toolbar-container[builder-layout-view] {
        width: 100%;
        padding: 0 8px 0 8px;
    }

    .builder-template-body-toolbar-container .toobar-actions[builder-layout-view] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: auto;
    }

.builder-template-body[builder-layout-view] {
    position: relative;
    height: 100%;
    background: white;
}

.builder-template-body-container[builder-layout-view] {
    position: absolute;
    top: 64px;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 64px);
}

.builder-template-footer-container[builder-layout-view] {
    position: relative;
    width: 100%;
    padding: 15px;
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid var(--grey-light-3);
    z-index: 1;
}

.drop-down-container[builder-layout-view] {
    width: 190px;
}

.no-button-border[builder-layout-view]  .btn {
    border: none !important;
}
/* /Pages/Admin/SchoolYears/Views/ClassBuildTab/ClassBuildTab.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* -----------
# ABSTRACT
----------- */
/* 1. MIXINS  */
/* 2. FUNCTIONS */
/** //////////////////////// Component Specific Styles ///////////////////////////////// */
/* -----------
# LAYOUTS
----------- */
/* 7. TABLE  */
/** 7.1 General */
.table[administrator-class-build-tab-component] {
    width: 100%;
    font-size: 0.875rem;
}

    .table th[administrator-class-build-tab-component], .table td[administrator-class-build-tab-component] {
        position: relative;
        vertical-align: inherit;
    }

    .table th[administrator-class-build-tab-component] {
        background: var(--alpha-dark-1);
    }

    .table [rowspan][administrator-class-build-tab-component] {
        vertical-align: top;
    }

    .table .tr--highlight th[administrator-class-build-tab-component] {
        background: var(--alpha-dark-2);
    }

    .table .tr--highlight td[administrator-class-build-tab-component] {
        background: var(--alpha-dark-1);
    }

    .table .tr--thin > *[administrator-class-build-tab-component] {
        padding-top: 4px;
        padding-bottom: 4px;
        height: auto;
    }

    .table .tr--layout[administrator-class-build-tab-component] {
        padding: 0;
        height: 0;
    }

        .table .tr--layout th[administrator-class-build-tab-component], .table .tr--layout td[administrator-class-build-tab-component] {
            padding: 0;
            height: 0;
            border: 0;
        }

    .table .tr--link[administrator-class-build-tab-component],
    .table .td--link[administrator-class-build-tab-component] {
        cursor: pointer;
        transition: all var(--transition-duration) ease 0s;
    }

        .table .tr--link:hover[administrator-class-build-tab-component], .table .tr--link:focus[administrator-class-build-tab-component], .table .tr--link:active[administrator-class-build-tab-component],
        .table .td--link:hover[administrator-class-build-tab-component],
        .table .td--link:focus[administrator-class-build-tab-component],
        .table .td--link:active[administrator-class-build-tab-component] {
            background-color: var(--alpha-dark-1);
        }

    .table .th--sticky[administrator-class-build-tab-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

        .table .th--sticky[administrator-class-build-tab-component]::before, .table .th--sticky[administrator-class-build-tab-component]::after {
            content: "";
            position: absolute;
            display: block;
        }

        .table .th--sticky.th--sticky-top[administrator-class-build-tab-component] {
            top: 0;
        }

            .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after {
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom-width: inherit;
                border-bottom-style: inherit;
                border-bottom-color: inherit;
            }

            .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before {
                height: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after {
                height: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-left[administrator-class-build-tab-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::after {
                right: -1px;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-left[administrator-class-build-tab-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-right[administrator-class-build-tab-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::after {
                left: 0;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-right[administrator-class-build-tab-component]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component], .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
            top: 0;
            z-index: 4;
        }

            .table .th--sticky.th--sticky-top-left > *[administrator-class-build-tab-component], .table .th--sticky.th--sticky-top-right > *[administrator-class-build-tab-component] {
                position: relative;
                z-index: 1;
            }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
                filter: blur(1px);
                background: rgba(0, 0, 0, 0.15);
            }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before {
                top: 0;
                height: 100%;
                width: 1px;
            }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
                bottom: -2px;
                left: 0;
                height: 1px;
                width: 100%;
            }

        .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component] {
            left: 0;
        }

            .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before {
                left: 100%;
            }

        .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
            right: 0;
        }

            .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before {
                right: 100%;
            }

    .table .th--scroll-border-fix[administrator-class-build-tab-component] {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + (2 * 1px));
        height: calc(100% + (2 * 1px));
        border: inherit;
    }

    .table .th--highlight[administrator-class-build-tab-component] {
        color: var(--green);
        background: #f4fcf9;
        border: 1px solid #a8d7c4;
        z-index: 2;
    }

        .table .th--highlight > *[administrator-class-build-tab-component] {
            color: inherit !important;
        }

    .table .th--clean[administrator-class-build-tab-component] {
        padding: 0;
        border: none;
        background: transparent;
    }

        .table .th--clean.th--sticky[administrator-class-build-tab-component]::before, .table .th--clean.th--sticky[administrator-class-build-tab-component]::after {
            content: none;
        }

    .table .td--sticky[administrator-class-build-tab-component] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

        .table .td--sticky.td--sticky-left[administrator-class-build-tab-component] {
            left: 0;
        }

        .table .td--sticky.td--sticky-right[administrator-class-build-tab-component] {
            right: 0;
        }

    .table .td--pseudo-border[administrator-class-build-tab-component] {
        position: relative;
    }

        .table .td--pseudo-border[administrator-class-build-tab-component]::before, .table .td--pseudo-border[administrator-class-build-tab-component]::after {
            position: absolute;
            content: "";
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

        .table .td--pseudo-border[administrator-class-build-tab-component]::before {
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }

        .table .td--pseudo-border[administrator-class-build-tab-component]::after {
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
        }

    .table .table--cell-spacer[administrator-class-build-tab-component] {
        width: 100%;
        background: transparent;
        border: none;
    }

        .table .table--cell-spacer[administrator-class-build-tab-component]::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

    .table .table--cell-pattern[administrator-class-build-tab-component] {
        position: relative;
    }

        .table .table--cell-pattern.th--sticky[administrator-class-build-tab-component] {
            position: -webkit-sticky;
            position: sticky;
            background: transparent !important;
        }

            .table .table--cell-pattern.th--sticky .pattern[administrator-class-build-tab-component] {
                left: 0;
                width: 100%;
                height: 100%;
            }

            .table .table--cell-pattern.th--sticky[administrator-class-build-tab-component]::before, .table .table--cell-pattern.th--sticky[administrator-class-build-tab-component]::after {
                content: none;
            }

        .table .table--cell-pattern .pattern[administrator-class-build-tab-component] {
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + (2 * 1px));
            height: calc(100% + (2 * 1px));
            background-repeat: repeat;
            background-size: 45px;
            background-color: #ffffff;
        }

    .table .th--weekend[administrator-class-build-tab-component] {
        background: var(--grey-light-1) !important;
    }

    .table .td--weekend[administrator-class-build-tab-component] {
        background: rgba(0, 0, 0, 0.025) !important;
    }

        .table .td--weekend .pattern[administrator-class-build-tab-component] {
            background-color: #ffffff;
        }

    .table .tr--weekend th .pattern[administrator-class-build-tab-component], .table .tr--weekend td .pattern[administrator-class-build-tab-component] {
        background-color: var(--alpha-dark-1);
    }

    .table .tr--weekend th[administrator-class-build-tab-component] {
        background: #efefef !important;
    }

    .table .tr--weekend td[administrator-class-build-tab-component] {
        background-color: rgba(0, 0, 0, 0.025) !important;
    }

.layout--light .table th[administrator-class-build-tab-component] {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover[administrator-class-build-tab-component], .layout--dark .table .tr--link:focus[administrator-class-build-tab-component], .layout--dark .table .tr--link:active[administrator-class-build-tab-component],
.layout--dark .table .td--link:hover[administrator-class-build-tab-component],
.layout--dark .table .td--link:focus[administrator-class-build-tab-component],
.layout--dark .table .td--link:active[administrator-class-build-tab-component] {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky[administrator-class-build-tab-component] {
    background: var(--grey-dark-3);
}

    .layout--dark .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .layout--dark .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

.layout--dark .table .th--highlight[administrator-class-build-tab-component] {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend[administrator-class-build-tab-component] {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.015) !important;
}

    .layout--dark .table .td--weekend .pattern[administrator-class-build-tab-component] {
        background-color: #212121;
    }

.layout--dark .table .td--pseudo-border[administrator-class-build-tab-component]::before, .layout--dark .table .td--pseudo-border[administrator-class-build-tab-component]::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer[administrator-class-build-tab-component]::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern[administrator-class-build-tab-component] {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern[administrator-class-build-tab-component], .layout--dark .tr--weekend td .pattern[administrator-class-build-tab-component] {
    background-color: #212121;
}

.layout--dark .tr--weekend th[administrator-class-build-tab-component] {
    background: #363636 !important;
}

.layout--dark .tr--weekend td[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */

.table-wrapper .table-wrapper-header[administrator-class-build-tab-component] {
    margin-bottom: 1rem;
}

    .table-wrapper .table-wrapper-header[data-view] .context-options[administrator-class-build-tab-component] {
        margin-right: 10px;
        display: none;
    }

    .table-wrapper .table-wrapper-header[data-view=context-options] .context-options[administrator-class-build-tab-component] {
        display: block;
    }

    .table-wrapper .table-wrapper-header .row[administrator-class-build-tab-component] {
        align-items: center;
    }

        .table-wrapper .table-wrapper-header .row > *[administrator-class-build-tab-component] {
            width: auto;
            flex: 1 1 auto;
        }

    .table-wrapper .table-wrapper-header .field-menu[administrator-class-build-tab-component] {
        min-width: 160px;
    }

    .table-wrapper .table-wrapper-header .search[administrator-class-build-tab-component] {
        max-width: 100%;
        width: 320px;
    }

.table-wrapper .table-wrapper-body[data-view] .table-empty[administrator-class-build-tab-component] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td[administrator-class-build-tab-component],
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th[administrator-class-build-tab-component] {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty[administrator-class-build-tab-component] {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer[administrator-class-build-tab-component] {
    display: none;
}

.table-wrapper .table-wrapper-footer[administrator-class-build-tab-component] {
    padding: 10px 0;
}

.table-wrapper .table thead tr[administrator-class-build-tab-component] {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th[administrator-class-build-tab-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

    .table-wrapper .table thead th:hover[administrator-class-build-tab-component] {
        background: #f0f0f0;
    }

.table-wrapper .table tbody tr:last-child th[administrator-class-build-tab-component],
.table-wrapper .table tbody tr:last-child td[administrator-class-build-tab-component] {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky[administrator-class-build-tab-component] {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child[administrator-class-build-tab-component], .table-wrapper .table tr > *:last-child[administrator-class-build-tab-component] {
    min-width: 40px;
}

.table-wrapper .table th[administrator-class-build-tab-component],
.table-wrapper .table td[administrator-class-build-tab-component] {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th[administrator-class-build-tab-component] {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table .tr--nowrap > *[administrator-class-build-tab-component] {
    white-space: nowrap;
}

.table-wrapper .table .tr--link td[administrator-class-build-tab-component] {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky[administrator-class-build-tab-component] {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component], .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component], .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
    border-bottom: none;
}

    .table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::before, .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::before {
        content: none;
    }

    .table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
        height: 1px;
        bottom: 0px;
        background: var(--grey-light-3);
        filter: none;
        box-shadow: none;
    }

.table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component] {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component], .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component] {
    z-index: 5;
}

.table-wrapper .table .td--sticky[administrator-class-build-tab-component] {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu[administrator-class-build-tab-component] {
    position: absolute;
    top: 10px;
    right: 4px;
}

    .table-wrapper .table .td--row-menu .menu .btn .icon[administrator-class-build-tab-component] {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.table-wrapper .table .field-check[administrator-class-build-tab-component] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .table-wrapper .table .field-check .checkmark[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.table-wrapper .table-empty[administrator-class-build-tab-component] {
    padding: 30px;
    text-align: center;
}

.table-wrapper .card[administrator-class-build-tab-component],
.table-wrapper .scroll[administrator-class-build-tab-component] {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .card[administrator-class-build-tab-component] {
    background: #ffffff;
}

.layout--dark .table-wrapper[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
}

    .layout--dark .table-wrapper .table thead th:hover[administrator-class-build-tab-component] {
        background: #383838;
    }

    .layout--dark .table-wrapper .table th[administrator-class-build-tab-component],
    .layout--dark .table-wrapper .table td[administrator-class-build-tab-component] {
        border-bottom-color: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .tr--link:hover .td--sticky[administrator-class-build-tab-component] {
        background: #2c2c2c;
    }

    .layout--dark .table-wrapper .table .th--sticky.th--sticky-top[administrator-class-build-tab-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-class-build-tab-component]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-class-build-tab-component]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .td--sticky[administrator-class-build-tab-component] {
        background: var(--grey-dark-4);
    }

    .layout--dark .table-wrapper .card[administrator-class-build-tab-component] {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-4);
    }

.layout--dark .card[administrator-class-build-tab-component] {
    background: var(--grey-dark-4);
}

/* 9. MISC */
/** 9.3 Builder */
.builder[administrator-class-build-tab-component] {
    display: flex;
    height: 100%;
}

    .builder[data-view] > .view1[administrator-class-build-tab-component],
    .builder[data-view] > .view2[administrator-class-build-tab-component] {
        display: none;
        width: 100%;
    }

    .builder[data-view=view1] > .view1[administrator-class-build-tab-component] {
        display: flex;
    }

    .builder[data-view=view2] > .view2[administrator-class-build-tab-component] {
        display: flex;
    }

.builder-sidebar[administrator-class-build-tab-component] {
    position: relative;
    padding: 10px 6px 10px 10px;
    width: 288px;
    height: 100%;
    background: rgba(0, 0, 0, 0.02);
}

    .builder-sidebar.sidebar--left[administrator-class-build-tab-component] {
        border-right: 1px solid var(--grey-light-3);
    }

    .builder-sidebar.sidebar--update .scroll[administrator-class-build-tab-component] {
        padding: 0px 8px 42px 6px;
    }

    .builder-sidebar.sidebar--update .builder-sidebar-footer[administrator-class-build-tab-component] {
        transform: translateY(0);
        opacity: 1;
    }

    .builder-sidebar .sidebar-row[administrator-class-build-tab-component] {
        display: flex;
    }

        .builder-sidebar .sidebar-row > *:first-child[administrator-class-build-tab-component] {
            padding-right: 10px;
        }

        .builder-sidebar .sidebar-row > *:last-child[administrator-class-build-tab-component] {
            padding-left: 10px;
        }

    .builder-sidebar .builder-options[administrator-class-build-tab-component] {
        margin-bottom: 20px;
    }

    .builder-sidebar .builder-sidebar-footer[administrator-class-build-tab-component] {
        position: absolute;
        padding: 10px;
        bottom: 0;
        transform: translateY(100%);
        opacity: 0;
        left: 0;
        width: 100%;
        border-top: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
    }

    .builder-sidebar .scroll[administrator-class-build-tab-component] {
        padding: 0px 8px 0 6px;
    }

    .builder-sidebar .flex.flex--gutter[administrator-class-build-tab-component] {
        margin-left: 0;
        margin-right: 0;
    }

        .builder-sidebar .flex.flex--gutter > *[administrator-class-build-tab-component] {
            margin-left: 0;
            margin-right: 0;
        }

    .builder-sidebar hr[administrator-class-build-tab-component] {
        margin: 10px 0;
    }

.builder-main[administrator-class-build-tab-component] {
    height: 100%;
    padding: 20px;
    flex: 1 1 auto;
    min-width: 0;
}

    .builder-main[data-view=main-update] .builder-main-header .header-options[administrator-class-build-tab-component] {
        transform: translateX(100%);
        transition-delay: 0s;
    }

    .builder-main[data-view=main-update] .builder-main-header .main-update[administrator-class-build-tab-component] {
        transform: translateX(0);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .builder-main .builder-main-header .header-right[administrator-class-build-tab-component] {
        min-width: 160px;
        position: relative;
        overflow: hidden;
    }

    .builder-main .builder-main-header .header-options[administrator-class-build-tab-component] {
        position: relative;
        float: right;
        transition: all var(--transition-duration) ease 0s;
        transition-delay: 0.3s;
    }

    .builder-main .builder-main-header .main-update[administrator-class-build-tab-component] {
        position: relative;
        top: 0;
        right: 0;
        transform: translateX(100%);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

    .builder-main .container[administrator-class-build-tab-component] {
        max-width: 992px;
    }

    .builder-main > .scroll[administrator-class-build-tab-component] {
        padding: 0 10px;
    }

    .builder-main .card-inner[administrator-class-build-tab-component] {
        background: var(--grey-light-1);
        border: 1px solid var(--alpha-dark-2);
    }

.layout--light .builder-sidebar[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.3);
}

.layout--light .builder-main .card-inner[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.3);
}

.layout--dark .builder-sidebar[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .builder-sidebar .builder-sidebar-footer[administrator-class-build-tab-component] {
        border-color: var(--alpha-light-2);
        background: var(--alpha-light-1);
    }

.layout--dark .builder-main .card-inner[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

/* ---------
# VIEWS
--------- */
/* 1. BUTTONS  */
/** 1.1 Base */
button[administrator-class-build-tab-component],
input[type=submit][administrator-class-build-tab-component],
input[type=button][administrator-class-build-tab-component],
.btn[administrator-class-build-tab-component] {
    font-size: 0.875rem;
    color: var(--grey-3);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1;
}

    button:hover[administrator-class-build-tab-component], button.active[administrator-class-build-tab-component],
    input[type=submit]:hover[administrator-class-build-tab-component],
    input[type=submit].active[administrator-class-build-tab-component],
    input[type=button]:hover[administrator-class-build-tab-component],
    input[type=button].active[administrator-class-build-tab-component],
    .btn:hover[administrator-class-build-tab-component],
    .btn.active[administrator-class-build-tab-component] {
        color: #ffffff;
        background: var(--green);
        border-color: transparent;
        outline: none;
    }

        button:hover .icon[administrator-class-build-tab-component], button.active .icon[administrator-class-build-tab-component],
        input[type=submit]:hover .icon[administrator-class-build-tab-component],
        input[type=submit].active .icon[administrator-class-build-tab-component],
        input[type=button]:hover .icon[administrator-class-build-tab-component],
        input[type=button].active .icon[administrator-class-build-tab-component],
        .btn:hover .icon[administrator-class-build-tab-component],
        .btn.active .icon[administrator-class-build-tab-component] {
            border-color: var(--green);
        }

    button.primary-color:hover[administrator-class-build-tab-component], button.primary-color.active[administrator-class-build-tab-component],
    input[type=submit].primary-color:hover[administrator-class-build-tab-component],
    input[type=submit].primary-color.active[administrator-class-build-tab-component],
    input[type=button].primary-color:hover[administrator-class-build-tab-component],
    input[type=button].primary-color.active[administrator-class-build-tab-component],
    .btn.primary-color:hover[administrator-class-build-tab-component],
    .btn.primary-color.active[administrator-class-build-tab-component] {
        color: #ffffff !important;
    }

    button .icon[administrator-class-build-tab-component],
    input[type=submit] .icon[administrator-class-build-tab-component],
    input[type=button] .icon[administrator-class-build-tab-component],
    .btn .icon[administrator-class-build-tab-component] {
        position: relative;
        top: 0;
        left: -0.25em;
        margin-right: 4px;
        display: inline-block;
        height: 1em;
        width: 1em;
        fill: currentColor;
        border-color: var(--grey-3);
        pointer-events: none;
    }

.layout--light button[administrator-class-build-tab-component],
.layout--light input[type=submit][administrator-class-build-tab-component],
.layout--light input[type=button][administrator-class-build-tab-component], .layout--light.btn[administrator-class-build-tab-component],
.layout--light .btn[administrator-class-build-tab-component] {
    border-color: var(--grey-light-4);
    background: #ffffff;
}

    .layout--light button:hover[administrator-class-build-tab-component], .layout--light button.active[administrator-class-build-tab-component],
    .layout--light input[type=submit]:hover[administrator-class-build-tab-component],
    .layout--light input[type=submit].active[administrator-class-build-tab-component],
    .layout--light input[type=button]:hover[administrator-class-build-tab-component],
    .layout--light input[type=button].active[administrator-class-build-tab-component], .layout--light.btn:hover[administrator-class-build-tab-component], .layout--light.btn.active[administrator-class-build-tab-component],
    .layout--light .btn:hover[administrator-class-build-tab-component],
    .layout--light .btn.active[administrator-class-build-tab-component] {
        border-color: transparent;
        background: var(--green);
    }

.layout--light .btn--primary[administrator-class-build-tab-component] {
    border-color: transparent;
    background: var(--green);
}

.layout--light .btn--notify[administrator-class-build-tab-component]:before {
    border-color: var(--grey-light-1);
}

.layout--light .btn--link[administrator-class-build-tab-component],
.layout--light .btn--text[administrator-class-build-tab-component] {
    border-color: transparent;
    background: transparent;
}

    .layout--light .btn--text:hover[administrator-class-build-tab-component], .layout--light .btn--text.active[administrator-class-build-tab-component] {
        background: var(--alpha-dark-1);
    }

.layout--light .btn--light[administrator-class-build-tab-component] {
    background: var(--grey-light-1);
}

.layout--light .btn--outline[administrator-class-build-tab-component] {
    border-color: var(--green);
    background: transparent;
}

.layout--light .btn--disabled[administrator-class-build-tab-component],
.layout--light .btn[disabled][administrator-class-build-tab-component] {
    background: transparent;
    border-color: var(--grey-light-3);
}

    .layout--light .btn--disabled:hover[administrator-class-build-tab-component],
    .layout--light .btn[disabled]:hover[administrator-class-build-tab-component] {
        background: transparent;
        border-color: var(--grey-light-3);
    }

.layout--dark button[administrator-class-build-tab-component],
.layout--dark input[type=submit][administrator-class-build-tab-component],
.layout--dark input[type=button][administrator-class-build-tab-component], .layout--dark.btn[administrator-class-build-tab-component],
.layout--dark .btn[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark button:hover[administrator-class-build-tab-component], .layout--dark button.active[administrator-class-build-tab-component],
    .layout--dark input[type=submit]:hover[administrator-class-build-tab-component],
    .layout--dark input[type=submit].active[administrator-class-build-tab-component],
    .layout--dark input[type=button]:hover[administrator-class-build-tab-component],
    .layout--dark input[type=button].active[administrator-class-build-tab-component], .layout--dark.btn:hover[administrator-class-build-tab-component], .layout--dark.btn.active[administrator-class-build-tab-component],
    .layout--dark .btn:hover[administrator-class-build-tab-component],
    .layout--dark .btn.active[administrator-class-build-tab-component] {
        border-color: transparent;
        background: var(--green);
    }

        .layout--dark button:hover .icon[administrator-class-build-tab-component], .layout--dark button.active .icon[administrator-class-build-tab-component],
        .layout--dark input[type=submit]:hover .icon[administrator-class-build-tab-component],
        .layout--dark input[type=submit].active .icon[administrator-class-build-tab-component],
        .layout--dark input[type=button]:hover .icon[administrator-class-build-tab-component],
        .layout--dark input[type=button].active .icon[administrator-class-build-tab-component], .layout--dark.btn:hover .icon[administrator-class-build-tab-component], .layout--dark.btn.active .icon[administrator-class-build-tab-component],
        .layout--dark .btn:hover .icon[administrator-class-build-tab-component],
        .layout--dark .btn.active .icon[administrator-class-build-tab-component] {
            border-color: var(--green);
        }

    .layout--dark button .icon[administrator-class-build-tab-component],
    .layout--dark input[type=submit] .icon[administrator-class-build-tab-component],
    .layout--dark input[type=button] .icon[administrator-class-build-tab-component], .layout--dark.btn .icon[administrator-class-build-tab-component],
    .layout--dark .btn .icon[administrator-class-build-tab-component] {
        border-color: var(--grey-3);
    }

.layout--dark .btn--primary[administrator-class-build-tab-component] {
    border-color: transparent;
    background: var(--green);
}

.layout--dark .btn--notify[administrator-class-build-tab-component]:before {
    border-color: var(--grey-dark-3);
}

.layout--dark .btn--link[administrator-class-build-tab-component],
.layout--dark .btn--text[administrator-class-build-tab-component] {
    border-color: transparent;
    background: transparent;
}

    .layout--dark .btn--text:hover[administrator-class-build-tab-component], .layout--dark .btn--text.active[administrator-class-build-tab-component] {
        background: var(--alpha-light-1);
    }

.layout--dark .btn--outline[administrator-class-build-tab-component] {
    border-color: var(--green);
    background: transparent;
}

.layout--dark .btn--disabled[administrator-class-build-tab-component],
.layout--dark .btn[disabled][administrator-class-build-tab-component] {
    color: var(--grey-dark-2);
    background: transparent;
    border-color: var(--grey-dark-2);
}

    .layout--dark .btn--disabled:hover[administrator-class-build-tab-component],
    .layout--dark .btn[disabled]:hover[administrator-class-build-tab-component] {
        color: var(--grey-dark-2);
        background: transparent;
        border-color: var(--grey-dark-2);
    }

/** 1.1.1 Primary */
.btn--primary[administrator-class-build-tab-component] {
    padding: 8px 12px;
    color: #ffffff;
    border-color: transparent;
    background: var(--green);
}

    .btn--primary:hover[administrator-class-build-tab-component], .btn--primary.active[administrator-class-build-tab-component] {
        opacity: 0.9;
    }

/** 1.1.2 Secondary */
.btn--secondary[administrator-class-build-tab-component] {
    padding: 8px 12px;
    background: #ffffff;
}

    .btn--secondary.btn--link[administrator-class-build-tab-component] {
        color: var(--grey-3);
    }

        .btn--secondary.btn--link:hover[administrator-class-build-tab-component] {
            background: var(--alpha-dark-1);
        }

        .btn--secondary.btn--link[disabled][administrator-class-build-tab-component] {
            border: none;
        }

.layout--dark .btn--secondary.btn--link:hover[administrator-class-build-tab-component] {
    background: var(--alpha-light-1);
}

/** 1.1.3 Ternary */
.btn--ternary[administrator-class-build-tab-component] {
    background: var(--alpha-dark-1);
}

    .btn--ternary:hover[administrator-class-build-tab-component], .btn--ternary:focus[administrator-class-build-tab-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .btn--ternary.active[administrator-class-build-tab-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--light .btn--ternary[administrator-class-build-tab-component] {
    background: var(--alpha-dark-1);
}

    .layout--light .btn--ternary:hover[administrator-class-build-tab-component], .layout--light .btn--ternary:focus[administrator-class-build-tab-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .layout--light .btn--ternary.active[administrator-class-build-tab-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--dark .btn--ternary[administrator-class-build-tab-component] {
    background: var(--grey-dark-2);
}

    .layout--dark .btn--ternary:hover[administrator-class-build-tab-component] {
        color: var(--grey-light-4);
        background: var(--grey-dark-1);
    }

    .layout--dark .btn--ternary.active[administrator-class-build-tab-component] {
        color: var(--grey-3);
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-4);
    }

/** 1.1.4 Modifiers */
.btn--notify[administrator-class-build-tab-component] {
    position: relative;
}

    .btn--notify[administrator-class-build-tab-component]:before {
        position: absolute;
        top: 4px;
        right: 4px;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background: var(--green);
        z-index: 1;
    }

.btn--light[administrator-class-build-tab-component] {
    background: var(--grey-light-1);
    border-color: var(--grey-light-4);
}

.btn--dark[administrator-class-build-tab-component] {
    background: var(--grey-dark-2);
    border-color: var(--grey-dark-1);
}

.btn--outline[administrator-class-build-tab-component] {
    color: var(--green);
    background: transparent;
    border-color: var(--green);
}

.btn--rounded[administrator-class-build-tab-component] {
    padding: 8px 25px;
    border-radius: 30px;
}

.btn--link[administrator-class-build-tab-component] {
    color: var(--green);
    background: transparent;
    border-color: transparent;
}

.btn--text[administrator-class-build-tab-component] {
    color: var(--grey-3);
    background: transparent;
    border-color: transparent;
}

    .btn--text:hover[administrator-class-build-tab-component], .btn--text.active[administrator-class-build-tab-component] {
        color: var(--green);
        background: var(--alpha-dark-1);
    }

    .btn--text[disabled][administrator-class-build-tab-component] {
        border: none;
    }

.btn--circle[administrator-class-build-tab-component],
.btn--square[administrator-class-build-tab-component] {
    position: relative;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

    .btn--circle .icon[administrator-class-build-tab-component],
    .btn--square .icon[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.btn--circle[administrator-class-build-tab-component] {
    border-radius: 50%;
}

.btn--square[administrator-class-build-tab-component] {
    border-radius: 4px;
}

.btn--disabled[administrator-class-build-tab-component],
.btn[disabled][administrator-class-build-tab-component] {
    color: var(--grey-light-4);
    background: transparent;
    border-color: var(--grey-light-3);
    cursor: not-allowed;
}

    .btn--disabled:hover[administrator-class-build-tab-component],
    .btn[disabled]:hover[administrator-class-build-tab-component] {
        color: var(--grey-light-4);
        background: transparent;
        border-color: var(--grey-light-3);
    }

.btn-inner[administrator-class-build-tab-component] {
    display: inline-block;
    padding: 3px;
    background: var(--grey-light-3);
    line-height: 0;
}

    .btn-inner.btn-inner--circle[administrator-class-build-tab-component] {
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

        .btn-inner.btn-inner--circle .btn[administrator-class-build-tab-component] {
            width: 24px;
            height: 24px;
        }

    .btn-inner .btn[administrator-class-build-tab-component] {
        border: none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

.btn--success[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--success:hover[administrator-class-build-tab-component], .btn--success.active[administrator-class-build-tab-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--error[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--error:hover[administrator-class-build-tab-component], .btn--error.active[administrator-class-build-tab-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--activity[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-3) !important;
}

    .btn--activity:hover[administrator-class-build-tab-component], .btn--activity.active[administrator-class-build-tab-component] {
        background: var(--grey-3) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lesson[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--lesson:hover[administrator-class-build-tab-component], .btn--lesson.active[administrator-class-build-tab-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--test[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--test:hover[administrator-class-build-tab-component], .btn--test.active[administrator-class-build-tab-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--quiz[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--quiz:hover[administrator-class-build-tab-component], .btn--quiz.active[administrator-class-build-tab-component] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--project[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--project:hover[administrator-class-build-tab-component], .btn--project.active[administrator-class-build-tab-component] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--supplementary[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green-yellow) !important;
}

    .btn--supplementary:hover[administrator-class-build-tab-component], .btn--supplementary.active[administrator-class-build-tab-component] {
        background: var(--green-yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--field-trip[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--field-trip:hover[administrator-class-build-tab-component], .btn--field-trip.active[administrator-class-build-tab-component] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lab[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--lab:hover[administrator-class-build-tab-component], .btn--lab.active[administrator-class-build-tab-component] {
        background: var(--yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--student[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--student:hover[administrator-class-build-tab-component], .btn--student.active[administrator-class-build-tab-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--teacher[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--teacher:hover[administrator-class-build-tab-component], .btn--teacher.active[administrator-class-build-tab-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--parent[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--parent:hover[administrator-class-build-tab-component], .btn--parent.active[administrator-class-build-tab-component] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--admin[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--admin:hover[administrator-class-build-tab-component], .btn--admin.active[administrator-class-build-tab-component] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--audit[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--audit:hover[administrator-class-build-tab-component], .btn--audit.active[administrator-class-build-tab-component] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--meta[administrator-class-build-tab-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-1) !important;
}

    .btn--meta:hover[administrator-class-build-tab-component], .btn--meta.active[administrator-class-build-tab-component] {
        background: var(--grey-1) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

/* 2. FORM */
/** 2.1 General */
.form .card[administrator-class-build-tab-component] {
    padding: 0.3125rem 0.625rem;
}

.form .container.gutter .row > *[administrator-class-build-tab-component] {
    padding: 0.3125rem 0.625rem;
}

/*input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='search'],
input[type='number']*/
[contenteditable][administrator-class-build-tab-component]::-moz-selection, input[administrator-class-build-tab-component]::-moz-selection {
    color: #ffffff;
    background: var(--green);
}

[contenteditable][administrator-class-build-tab-component]::selection,
input[administrator-class-build-tab-component]::selection {
    color: #ffffff;
    background: var(--green);
}

input[type=text].correct[administrator-class-build-tab-component] {
    border: 2px solid var(--green);
}

input[type=text].incorrect[administrator-class-build-tab-component] {
    border: 2px solid var(--red);
}

textarea[administrator-class-build-tab-component] {
    line-height: var(--line-height);
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
}

    textarea[administrator-class-build-tab-component]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    textarea[administrator-class-build-tab-component]::-webkit-scrollbar-track {
        background: transparent;
    }

    textarea[administrator-class-build-tab-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        textarea[administrator-class-build-tab-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    textarea[administrator-class-build-tab-component]::-webkit-scrollbar-corner {
        background: transparent;
    }

.field[administrator-class-build-tab-component] {
    color: var(--grey-dark-3);
    padding: 12px 12px 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    width: 100%;
    font-size: 0.875em;
}

    .field:focus[administrator-class-build-tab-component]::-moz-placeholder {
        color: transparent;
    }

    .field:focus:-ms-input-placeholder[administrator-class-build-tab-component] {
        color: transparent;
    }

    .field:focus[administrator-class-build-tab-component]::placeholder {
        color: transparent;
    }

    .field:disabled[administrator-class-build-tab-component] {
        background-color: transparent;
        opacity: 0.5;
    }

        .field:disabled ~ .btn[administrator-class-build-tab-component] {
            border-color: transparent;
            background: transparent;
            color: var(--grey-light-4);
            cursor: default;
        }

    .field.field--blank[administrator-class-build-tab-component] {
        width: auto;
    }

    .field[administrator-class-build-tab-component]::-moz-placeholder {
        -moz-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field:-ms-input-placeholder[administrator-class-build-tab-component] {
        -ms-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field[administrator-class-build-tab-component]::placeholder {
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

.field-group.valid .required[administrator-class-build-tab-component]::after {
    color: var(--green);
}

.field-group.valid .field[administrator-class-build-tab-component] {
    border-bottom-width: 2px;
    border-bottom-color: var(--green);
}

.field-group.invalid .required[administrator-class-build-tab-component]::after {
    color: var(--red);
}

.field-group.invalid .field[administrator-class-build-tab-component] {
    border-bottom-width: 2px;
    border-bottom-color: var(--red);
}

.field-group.invalid .response[administrator-class-build-tab-component] {
    margin: 4px 0 0 8px;
    height: auto;
    opacity: 1;
}

.field-group label[administrator-class-build-tab-component] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

    .field-group label.field-file[administrator-class-build-tab-component] {
        display: inline-block;
    }

.field-group .required[administrator-class-build-tab-component]::after {
    margin-left: 0.2em;
    content: "*";
    color: var(--green);
}

.field-group .response[administrator-class-build-tab-component] {
    color: var(--red);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.125em;
    opacity: 0;
    height: 0;
    transition: all var(--transition-duration) ease 0s;
}

.layout--dark .field[administrator-class-build-tab-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background-color: var(--grey-dark-4);
}

    .layout--dark .field:focus[administrator-class-build-tab-component]::-moz-placeholder {
        color: transparent;
    }
    
    .layout--dark .field:focus:-ms-input-placeholder[administrator-class-build-tab-component] {
        color: transparent;
    }

    .layout--dark .field:focus[administrator-class-build-tab-component]::placeholder {
        color: transparent;
    }

    .layout--dark .field:disabled[administrator-class-build-tab-component] {
        opacity: 0.3;
    }

        .layout--dark .field:disabled ~ .btn[administrator-class-build-tab-component] {
            color: var(--grey-dark-3);
        }

    .layout--dark .field[administrator-class-build-tab-component]::-moz-placeholder {
        color: var(--grey-dark-1);
    }

    .layout--dark .field:-ms-input-placeholder[administrator-class-build-tab-component] {
        color: var(--grey-dark-1);
    }

    .layout--dark .field[administrator-class-build-tab-component]::placeholder {
        color: var(--grey-dark-1);
    }

/** 2.1.1 Radio, Checkbox, File, Switch */
.field-check[administrator-class-build-tab-component],
.field-file[administrator-class-build-tab-component] {
    position: relative;
}

    .field-check input[type=radio][administrator-class-build-tab-component],
    .field-check input[type=checkbox][administrator-class-build-tab-component],
    .field-check input[type=file][administrator-class-build-tab-component],
    .field-file input[type=radio][administrator-class-build-tab-component],
    .field-file input[type=checkbox][administrator-class-build-tab-component],
    .field-file input[type=file][administrator-class-build-tab-component] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.field-check[administrator-class-build-tab-component] {
    padding-left: calc(1em + 12px);
    font-weight: var(--font-weight);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-check input[type=radio][administrator-class-build-tab-component],
    .field-check input[type=checkbox][administrator-class-build-tab-component] {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
    }

        .field-check input[type=radio]:checked ~ .radiomark[administrator-class-build-tab-component] {
            border-color: var(--green);
        }

            .field-check input[type=radio]:checked ~ .radiomark[administrator-class-build-tab-component]::before {
                opacity: 1;
            }

        .field-check input[type=checkbox]:checked ~ .checkmark[administrator-class-build-tab-component] {
            border-color: var(--green);
            background: var(--green);
        }

            .field-check input[type=checkbox]:checked ~ .checkmark .icon[administrator-class-build-tab-component] {
                opacity: 1;
            }

        .field-check input[type=checkbox]:disabled ~ .checkmark[administrator-class-build-tab-component] {
            border-color: var(--grey-light-4);
            background: var(--alpha-dark-1);
            color: var(--alpha-dark-2);
        }

    .field-check .radiomark[administrator-class-build-tab-component],
    .field-check .checkmark[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
        pointer-events: none;
    }

    .field-check .radiomark[administrator-class-build-tab-component] {
        border-radius: 50%;
    }

        .field-check .radiomark[administrator-class-build-tab-component]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            display: block;
            width: 0.725em;
            height: 0.725em;
            border-radius: inherit;
            background: var(--green);
            opacity: 0;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-check .checkmark[administrator-class-build-tab-component] {
        border-radius: 4px;
        color: #ffffff;
    }

        .field-check .checkmark .icon[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-height: 9px;
            height: 0.6em;
            opacity: 0;
        }

.success .field-check input[type=checkbox]:checked ~ .checkmark[administrator-class-build-tab-component] {
    border-color: var(--green);
    background: var(--green);
}

.error .field-check input[type=checkbox]:checked ~ .checkmark[administrator-class-build-tab-component] {
    border-color: var(--red);
    background: var(--red);
}

.layout--dark .field-check input[type=checkbox]:disabled ~ .checkmark[administrator-class-build-tab-component] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
    color: var(--alpha-light-2);
}

.layout--dark .field-check .radiomark[administrator-class-build-tab-component],
.layout--dark .field-check .checkmark[administrator-class-build-tab-component] {
    background: transparent;
    border-color: var(--grey-dark-1);
}

.layout--dark .field-check .checkmark[administrator-class-build-tab-component] {
    color: var(--grey-dark-6);
}

/** 2.1.2 Field Checkbox */
.field-checkbox[administrator-class-build-tab-component] {
    position: relative;
    display: inline-block;
    font-size: 0.675rem;
    font-weight: var(--font-weight);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

    .field-checkbox input[type=radio][administrator-class-build-tab-component] {
        position: absolute;
        opacity: 0;
    }

        .field-checkbox input[type=radio]:checked ~ .checkmark .icon .check[administrator-class-build-tab-component] {
            stroke-dashoffset: 0;
        }

    .field-checkbox .checkmark .icon[administrator-class-build-tab-component],
    .field-checkbox .checkmark-readonly .icon[administrator-class-build-tab-component] {
        min-height: 9px;
        height: 0.6em;
    }

        .field-checkbox .checkmark .icon .check[administrator-class-build-tab-component],
        .field-checkbox .checkmark-readonly .icon .check[administrator-class-build-tab-component] {
            transition: all var(--transition-duration) ease 0s;
            fill: none;
            stroke: currentColor;
            stroke-miterlimit: 10;
            stroke-dasharray: 25;
            stroke-width: 1.8;
        }

        .field-checkbox .checkmark .icon .check[administrator-class-build-tab-component] {
            stroke-dashoffset: 25;
        }

        .field-checkbox .checkmark-readonly .icon .check[administrator-class-build-tab-component] {
            stroke-dashoffset: 0;
        }

    .field-checkbox > .checkmark[administrator-class-build-tab-component] {
        position: relative;
        display: block;
        width: 27px;
        height: 27px;
        border-radius: 4px;
        color: var(--green);
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
    }

        .field-checkbox > .checkmark .icon[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .field-checkbox > .checkmark .icon .check[administrator-class-build-tab-component] {
                stroke-dashoffset: 25;
            }

/** 2.1.3 Field File */
.field-file[administrator-class-build-tab-component] {
    display: inline-block;
}

    .field-file input[type=file][administrator-class-build-tab-component] {
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

        .field-file input[type=file]:hover ~ .btn[administrator-class-build-tab-component], .field-file input[type=file]:focus ~ .btn[administrator-class-build-tab-component] {
            color: #ffffff !important;
            background: var(--green);
            border-color: var(--green);
        }

        .field-file input[type=file]:disabled[administrator-class-build-tab-component] {
            display: none;
        }

            .field-file input[type=file]:disabled ~ .btn[administrator-class-build-tab-component] {
                color: var(--grey-light-4) !important;
                background: transparent;
                border-color: var(--grey-light-3);
                cursor: not-allowed;
            }

.layout--dark .field-file input[type=file]:disabled ~ .btn[administrator-class-build-tab-component] {
    opacity: 0.125;
}

.browse-file ul li[administrator-class-build-tab-component] {
    margin-bottom: 6px;
}

/** 2.1.4 Date, Time */
.field-date[administrator-class-build-tab-component],
.field-time[administrator-class-build-tab-component],
.field-url[administrator-class-build-tab-component] {
    position: relative;
}

    .field-date .field[administrator-class-build-tab-component],
    .field-time .field[administrator-class-build-tab-component],
    .field-url .field[administrator-class-build-tab-component] {
        letter-spacing: 0.025em;
    }

        .field-date .field:focus ~ .btn[administrator-class-build-tab-component],
        .field-time .field:focus ~ .btn[administrator-class-build-tab-component],
        .field-url .field:focus ~ .btn[administrator-class-build-tab-component] {
            color: #ffffff;
            background: var(--green) !important;
        }

    .field-date .btn[administrator-class-build-tab-component],
    .field-time .btn[administrator-class-build-tab-component],
    .field-url .btn[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
    }

.layout--dark .field-date[administrator-class-build-tab-component],
.layout--dark .field-time[administrator-class-build-tab-component],
.layout--dark .field-url[administrator-class-build-tab-component] {
    position: relative;
}

    .layout--dark .field-date .field:focus[administrator-class-build-tab-component],
    .layout--dark .field-time .field:focus[administrator-class-build-tab-component],
    .layout--dark .field-url .field:focus[administrator-class-build-tab-component] {
        border-bottom-width: 1px;
        border-bottom-color: var(--grey-dark-1);
    }

/** 2.1.5 Field Readonly  */
.field-readonly[administrator-class-build-tab-component] {
    display: inline-block;
    font-size: 0.875em;
}

    .field-readonly label[administrator-class-build-tab-component] {
        font-weight: 600;
    }

    .field-readonly input[administrator-class-build-tab-component] {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        min-width: 36px;
        width: 100%;
        max-width: 60px;
        text-align: center;
    }

.layout--dark .field-readonly input[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

/** 2.1.6 Field Renge*/
.field-range.range--drag .range-slider .range-slider-track .range-slider-track-value[administrator-class-build-tab-component] {
    transition: none;
}

.field-range label[administrator-class-build-tab-component] {
    font-size: 0.875rem;
}

.field-range .range[administrator-class-build-tab-component] {
    margin-top: -4px;
    display: flex;
    align-items: center;
}

    .field-range .range:hover .range-inputs .range-input[administrator-class-build-tab-component], .field-range .range:focus .range-inputs .range-input[administrator-class-build-tab-component] {
        border-color: var(--green);
    }

.field-range .range-inputs[administrator-class-build-tab-component] {
    margin-left: 10px;
}

    .field-range .range-inputs .range-input[administrator-class-build-tab-component] {
        padding: 4px;
        width: 44px;
        color: var(--grey-3);
        font-size: 0.875rem;
        text-align: center;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-range .range-inputs .range-input:focus[administrator-class-build-tab-component] {
            border-color: var(--green);
        }

    .field-range .range-inputs [type=range][administrator-class-build-tab-component] {
        display: none;
    }

.field-range .range-slider[administrator-class-build-tab-component] {
    position: relative;
    height: 30px;
    min-width: 100px;
    width: 100%;
    flex: 1 1 100px;
    cursor: pointer;
}

    .field-range .range-slider .range-slider-track[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1px;
        width: 100%;
        background: var(--alpha-dark-2);
    }

        .field-range .range-slider .range-slider-track .range-slider-track-value[administrator-class-build-tab-component] {
            position: relative;
            height: 100%;
            width: 30%;
            background: var(--green);
            transition: all var(--transition-duration) ease 0s;
        }

    .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 26px;
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
    }

        .field-range .range-slider .range-slider-btn:hover[administrator-class-build-tab-component]::before, .field-range .range-slider .range-slider-btn:focus[administrator-class-build-tab-component]::before {
            transform: translate(-50%, -50%) scale(1.2);
        }

        .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component]::before, .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
            border: 2px solid var(--green);
            border-radius: inherit;
            transition: all var(--transition-duration) ease 0s;
        }

        .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component]::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--green);
            border-radius: inherit;
        }

        .field-range .range-slider .range-slider-btn.range-slider-btn--max[administrator-class-build-tab-component] {
            left: initial;
            right: 0;
            transform: translate(50%, -50%);
        }

.layout--light .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component] {
    background: var(--grey-light-1);
}

.layout--dark .field-range .range-inputs .range-input[administrator-class-build-tab-component] {
    color: var(--grey-1);
    border-color: var(--alpha-light-2);
    background: transparent;
}

    .layout--dark .field-range .range-inputs .range-input:focus[administrator-class-build-tab-component] {
        border-color: var(--green);
    }

.layout--dark .field-range .range-slider .range-slider-track[administrator-class-build-tab-component] {
    background: var(--alpha-light-2);
}

.layout--dark .field-range .range-slider .range-slider-btn[administrator-class-build-tab-component] {
    background: var(--grey-dark-4);
}

/** 2.1.7 Field Letter */
.field-letter[administrator-class-build-tab-component] {
    position: relative;
    padding-left: 2.25rem;
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
    cursor: default;
}

    .field-letter .lettermark[administrator-class-build-tab-component],
    .field-letter input[administrator-class-build-tab-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .field-letter input[administrator-class-build-tab-component] {
        opacity: 0;
        z-index: 1;
    }

        .field-letter input:not([disabled])[administrator-class-build-tab-component] {
            cursor: pointer;
        }

        .field-letter input:hover:not([disabled]) ~ .lettermark[administrator-class-build-tab-component], .field-letter input:focus:not([disabled]) ~ .lettermark[administrator-class-build-tab-component] {
            color: var(--green);
            border-color: var(--green);
        }

        .field-letter input:hover:not([disabled]):checked ~ .lettermark[administrator-class-build-tab-component], .field-letter input:focus:not([disabled]):checked ~ .lettermark[administrator-class-build-tab-component] {
            color: #ffffff;
        }

        .field-letter input:checked:hover ~ .lettermark[administrator-class-build-tab-component], .field-letter input:checked:focus ~ .lettermark[administrator-class-build-tab-component], .field-letter input.checked:hover ~ .lettermark[administrator-class-build-tab-component], .field-letter input.checked:focus ~ .lettermark[administrator-class-build-tab-component] {
            color: #ffffff;
        }

        .field-letter input:checked ~ .lettermark[administrator-class-build-tab-component], .field-letter input.checked ~ .lettermark[administrator-class-build-tab-component] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-letter .lettermark[administrator-class-build-tab-component] {
        font-weight: 600;
        border: 1px solid var(--grey-1);
        transition: all var(--transition-duration) ease 0s;
    }

        .field-letter .lettermark > *[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

.error .field-letter input:hover:not([disabled]) ~ .lettermark[administrator-class-build-tab-component], .error .field-letter input:focus:not([disabled]) ~ .lettermark[administrator-class-build-tab-component] {
    color: var(--red);
    border-color: var(--red);
}

.error .field-letter input:checked:hover ~ .lettermark[administrator-class-build-tab-component], .error .field-letter input:checked:focus ~ .lettermark[administrator-class-build-tab-component], .error .field-letter input.checked:hover ~ .lettermark[administrator-class-build-tab-component], .error .field-letter input.checked:focus ~ .lettermark[administrator-class-build-tab-component] {
    color: #ffffff;
}

.error .field-letter input:checked ~ .lettermark[administrator-class-build-tab-component], .error .field-letter input.checked ~ .lettermark[administrator-class-build-tab-component] {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

.success .field-letter input:hover:not([disabled]) ~ .lettermark[administrator-class-build-tab-component], .success .field-letter input:focus:not([disabled]) ~ .lettermark[administrator-class-build-tab-component] {
    color: var(--green);
    border-color: var(--green);
}

.success .field-letter input:checked:hover ~ .lettermark[administrator-class-build-tab-component], .success .field-letter input:checked:focus ~ .lettermark[administrator-class-build-tab-component], .success .field-letter input.checked:hover ~ .lettermark[administrator-class-build-tab-component], .success .field-letter input.checked:focus ~ .lettermark[administrator-class-build-tab-component] {
    color: #ffffff;
}

.success .field-letter input:checked ~ .lettermark[administrator-class-build-tab-component], .success .field-letter input.checked ~ .lettermark[administrator-class-build-tab-component] {
    color: #ffffff;
    background: var(--green);
    border-color: var(--green);
}

/** 2.1.8 Field True False */
.field-true-false[administrator-class-build-tab-component] {
    display: flex;
    align-items: center;
}

    .field-true-false .slash-sep[administrator-class-build-tab-component] {
        font-size: 1.25em;
        margin: 4px;
    }

    .field-true-false .field-letter[administrator-class-build-tab-component] {
        padding: 0;
    }

        .field-true-false .field-letter .lettermark[administrator-class-build-tab-component] {
            position: relative;
            display: block;
        }

/** 2.1.9 Field Evaluate */
.field-evaluate[administrator-class-build-tab-component] {
    position: relative;
    padding-left: 0.25rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: default;
    margin-bottom: 0;
    line-height: 0;
}

    .field-evaluate.success-color input:hover:not([disabled]) ~ .mark[administrator-class-build-tab-component], .field-evaluate.success-color input:focus:not([disabled]) ~ .mark[administrator-class-build-tab-component] {
        border-color: var(--green);
    }

    .field-evaluate.success-color input:checked ~ .mark[administrator-class-build-tab-component] {
        color: #ffffff;
        background: var(--green);
        border-color: var(--green);
    }

    .field-evaluate.error-color input:hover:not([disabled]) ~ .mark[administrator-class-build-tab-component], .field-evaluate.error-color input:focus:not([disabled]) ~ .mark[administrator-class-build-tab-component] {
        border-color: var(--red);
    }

    .field-evaluate.error-color input:checked ~ .mark[administrator-class-build-tab-component] {
        color: #ffffff;
        background: var(--red);
        border-color: var(--red);
    }

    .field-evaluate .mark[administrator-class-build-tab-component],
    .field-evaluate input[administrator-class-build-tab-component] {
        border-radius: 50%;
    }

    .field-evaluate input[administrator-class-build-tab-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

        .field-evaluate input:checked ~ .mark[administrator-class-build-tab-component] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-evaluate .mark[administrator-class-build-tab-component] {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-evaluate .mark > *[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

/** 2.1.10 Input Blank */
.input-blank[administrator-class-build-tab-component] {
    display: inline-block;
    padding: 0 4px;
    color: var(--green);
    background: transparent;
    border-bottom: 1px solid var(--green);
    outline: 0;
}

/** 2.2 Dropdown Menu */
.field-menu[administrator-class-build-tab-component],
.menu[administrator-class-build-tab-component] {
    position: relative;
    display: inline-block;
    font-weight: 400;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-menu.open > .menu-header > .icon[administrator-class-build-tab-component],
    .menu.open > .menu-header > .icon[administrator-class-build-tab-component] {
        transform: rotate(90deg);
    }

    .field-menu.open > .menu-list[administrator-class-build-tab-component],
    .menu.open > .menu-list[administrator-class-build-tab-component] {
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
    }

    .field-menu.menu--headline > .menu-header [data-menu-option][administrator-class-build-tab-component],
    .menu.menu--headline > .menu-header [data-menu-option][administrator-class-build-tab-component] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--grey-dark-3);
    }

    .field-menu.menu--headline > .menu-header > .icon[administrator-class-build-tab-component],
    .menu.menu--headline > .menu-header > .icon[administrator-class-build-tab-component] {
        top: -0.25em;
    }

    .field-menu.menu--list-top .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-top .menu-list[administrator-class-build-tab-component] {
        top: 0;
        transform: translate(0, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.open > .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-top.open > .menu-list[administrator-class-build-tab-component] {
        transform: translate(0, calc(-100% - 8px));
    }

    .field-menu.menu--list-right .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-right .menu-list[administrator-class-build-tab-component] {
        left: 100%;
        transform: translate(-100%, 10px);
    }

    .field-menu.menu--list-right.open > .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-right.open > .menu-list[administrator-class-build-tab-component] {
        transform: translate(-100%, 0);
    }

    .field-menu.menu--list-top.menu--list-right .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-top.menu--list-right .menu-list[administrator-class-build-tab-component] {
        top: 0;
        left: 100%;
        transform: translate(-100%, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.menu--list-right.open > .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-top.menu--list-right.open > .menu-list[administrator-class-build-tab-component] {
        transform: translate(-100%, calc(-100% - 8px));
    }

    .field-menu.menu--list-ycenter .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-ycenter .menu-list[administrator-class-build-tab-component] {
        top: calc(50% + 14px);
        transform: translate(0, -50%);
    }

    .field-menu.menu--list-ycenter.open > .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-ycenter.open > .menu-list[administrator-class-build-tab-component] {
        top: calc(50% + 4px);
    }

    .field-menu.menu--list-xcenter .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-xcenter .menu-list[administrator-class-build-tab-component] {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
    }

    .field-menu.menu--list-xcenter.open > .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-xcenter.open > .menu-list[administrator-class-build-tab-component] {
        transform: translate(-50%, 0);
    }

    .field-menu.menu--list-center .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-center .menu-list[administrator-class-build-tab-component] {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--list-center.open > .menu-list[administrator-class-build-tab-component],
    .menu.menu--list-center.open > .menu-list[administrator-class-build-tab-component] {
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--dark[administrator-class-build-tab-component],
    .menu.menu--dark[administrator-class-build-tab-component] {
        color: var(--grey-1);
    }

        .field-menu.menu--dark .menu-list[administrator-class-build-tab-component],
        .menu.menu--dark .menu-list[administrator-class-build-tab-component] {
            color: var(--grey-3);
            background: var(--grey-dark-4);
        }

        .field-menu.menu--dark .option:hover[administrator-class-build-tab-component],
        .menu.menu--dark .option:hover[administrator-class-build-tab-component] {
            color: var(--grey-1);
            background: var(--alpha-light-2);
        }

        .field-menu.menu--dark .option.option--checked[administrator-class-build-tab-component],
        .menu.menu--dark .option.option--checked[administrator-class-build-tab-component] {
            background: var(--alpha-light-1);
        }

    .field-menu label[administrator-class-build-tab-component],
    .menu label[administrator-class-build-tab-component] {
        margin-bottom: 0;
    }

    .field-menu .menu-header[administrator-class-build-tab-component],
    .menu .menu-header[administrator-class-build-tab-component] {
        display: inline-block;
        cursor: pointer;
        color: var(--grey-3);
        font-size: 0.875em;
    }

        .field-menu .menu-header:hover > .icon[administrator-class-build-tab-component],
        .menu .menu-header:hover > .icon[administrator-class-build-tab-component] {
            fill: var(--green);
        }

        .field-menu .menu-header > .icon[administrator-class-build-tab-component],
        .menu .menu-header > .icon[administrator-class-build-tab-component] {
            position: relative;
            top: -0.1em;
            height: 0.4em;
            margin-left: 0.125em;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-menu .menu-list[administrator-class-build-tab-component],
    .menu .menu-list[administrator-class-build-tab-component] {
        position: absolute;
        top: 100%;
        left: 0;
        transform: translate(0, 10px);
        display: inline-block;
        list-style: none;
        margin-top: 4px;
        padding-left: 0px;
        min-width: 150px;
        width: auto;
        max-width: 300px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        line-height: var(--line-height);
        z-index: 99;
        max-height: 50vh;
        
        scrollbar-color: var(--alpha-dark-1) transparent;        
    }

        .field-menu .menu-list.scroll[administrator-class-build-tab-component],
        .menu .menu-list.scroll[administrator-class-build-tab-component] {
            padding: 0;
            height: auto;
            max-height: 200px;
            overflow-y: auto;
        }

        .field-menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar,
        .menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        .field-menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-track,
        .menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-track {
            background: transparent;
        }

        .field-menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-thumb,
        .menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-thumb {
            background: var(--alpha-dark-2);
        }

            .field-menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-thumb:hover,
            .menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-thumb:hover {
                background: var(--green);
            }

        .field-menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-corner,
        .menu .menu-list[administrator-class-build-tab-component]::-webkit-scrollbar-corner {
            background: transparent;
        }

    .field-menu .field-check[administrator-class-build-tab-component],
    .field-menu .option[administrator-class-build-tab-component],
    .menu .field-check[administrator-class-build-tab-component],
    .menu .option[administrator-class-build-tab-component] {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: all var(--transition-duration) ease 0s;
    }

    .field-menu .option[administrator-class-build-tab-component],
    .menu .option[administrator-class-build-tab-component] {
        position: relative;
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-3);
        cursor: pointer;
    }

        .field-menu .option[class*=prefix][administrator-class-build-tab-component],
        .menu .option[class*=prefix][administrator-class-build-tab-component] {
            padding-left: 22px !important;
        }

            .field-menu .option[class*=prefix][administrator-class-build-tab-component]::before,
            .menu .option[class*=prefix][administrator-class-build-tab-component]::before {
                left: 8px;
            }

        .field-menu .option:hover[administrator-class-build-tab-component],
        .menu .option:hover[administrator-class-build-tab-component] {
            background-color: var(--grey-light-2);
        }

        .field-menu .option .icon[administrator-class-build-tab-component],
        .menu .option .icon[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            right: 8px;
            height: 0.6em;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
            fill: var(--green);
            opacity: 0;
            pointer-events: none;
        }

        .field-menu .option.option--icon[administrator-class-build-tab-component],
        .menu .option.option--icon[administrator-class-build-tab-component] {
            padding: 8px 8px 8px 30px;
        }

            .field-menu .option.option--icon .icon[administrator-class-build-tab-component],
            .menu .option.option--icon .icon[administrator-class-build-tab-component] {
                right: initial;
                left: 8px;
                height: 1em;
                max-width: 1.125em;
                opacity: 1;
                fill: currentColor;
            }

        .field-menu .option.option--checked[administrator-class-build-tab-component],
        .menu .option.option--checked[administrator-class-build-tab-component] {
            color: var(--green);
            background: var(--grey-light-1);
        }

            .field-menu .option.option--checked .icon[administrator-class-build-tab-component],
            .menu .option.option--checked .icon[administrator-class-build-tab-component] {
                opacity: 1;
            }

    .field-menu.menu--dark .field-option input[type=radio]:checked ~ .option[administrator-class-build-tab-component] {
        background: var(--alpha-light-1);
    }

    .field-menu .field-option[administrator-class-build-tab-component] {
        position: relative;
        font-weight: var(--font-weight);
    }

        .field-menu .field-option input[type=radio][administrator-class-build-tab-component] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

            .field-menu .field-option input[type=radio]:checked ~ .option[administrator-class-build-tab-component] {
                color: var(--green);
                background: var(--grey-light-1);
            }

                .field-menu .field-option input[type=radio]:checked ~ .option .icon[administrator-class-build-tab-component] {
                    opacity: 1;
                }

    .field-menu .field-check[administrator-class-build-tab-component] {
        padding: 8px 8px 8px 30px;
    }

        .field-menu .field-check:hover[administrator-class-build-tab-component] {
            background-color: var(--grey-light-2);
        }

        .field-menu .field-check .checkmark[administrator-class-build-tab-component] {
            left: 8px;
        }

.field-option-checked[administrator-class-build-tab-component] {
    color: var(--green) !important;
    background: var(--grey-light-1) !important;
}

.field-option-icon-checked[administrator-class-build-tab-component] {
    opacity: 1 !important;
}

.layout--dark .field-menu .menu-header[administrator-class-build-tab-component],
.layout--dark menu .menu-header[administrator-class-build-tab-component] {
    color: var(--grey-1);
}

/** 2.2.1 More Options */
.menu--more.open .btn[administrator-class-build-tab-component] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--more hr[administrator-class-build-tab-component] {
    margin: 0;
}

.menu--more .menu-header[administrator-class-build-tab-component] {
    position: relative;
}

    .menu--more .menu-header [data-menu-option][administrator-class-build-tab-component] {
        visibility: hidden;
        display: block;
        width: 30px;
    }

    .menu--more .menu-header .btn[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(90deg);
    }

.layout--dark .menu--more.open .btn[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--more hr[administrator-class-build-tab-component] {
    border-color: var(--grey-light-3);
}

/** 2.2.2 Select Options */
.menu--dropdown[administrator-class-build-tab-component],
.menu--dropdown-search[administrator-class-build-tab-component] {
    display: block;
}

    .menu--dropdown .menu-header[administrator-class-build-tab-component],
    .menu--dropdown-search .menu-header[administrator-class-build-tab-component] {
        position: relative;
        display: block;
    }

        .menu--dropdown .menu-header [data-menu-option][administrator-class-build-tab-component],
        .menu--dropdown-search .menu-header [data-menu-option][administrator-class-build-tab-component] {
            display: block;
            color: var(--grey-dark-3);
            background: #ffffff;
            padding: 8px 52px 8px 12px;
            border-radius: 4px;
            border: 1px solid var(--grey-light-3);
            max-height: 2.8em;
        }

        .menu--dropdown .menu-header .btn[administrator-class-build-tab-component],
        .menu--dropdown-search .menu-header .btn[administrator-class-build-tab-component] {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 40px;
            border-radius: 0 4px 4px 0;
            background: var(--grey-light-1);
        }

            .menu--dropdown .menu-header .btn .icon[administrator-class-build-tab-component],
            .menu--dropdown-search .menu-header .btn .icon[administrator-class-build-tab-component] {
                width: 0.8em;
                height: 0.8em;
            }

            .menu--dropdown .menu-header .btn:hover[administrator-class-build-tab-component],
            .menu--dropdown-search .menu-header .btn:hover[administrator-class-build-tab-component] {
                background: var(--green);
            }

            .menu--dropdown .menu-header .btn.btn--square .icon[administrator-class-build-tab-component],
            .menu--dropdown-search .menu-header .btn.btn--square .icon[administrator-class-build-tab-component] {
                width: auto;
                height: 0.3em;
            }

    .menu--dropdown .menu-list[administrator-class-build-tab-component],
    .menu--dropdown-search .menu-list[administrator-class-build-tab-component] {
        display: block;
        width: 100%;
        min-width: initial;
        max-width: initial;
    }

    .menu--dropdown-search .menu-list[administrator-class-build-tab-component] {
        max-height: initial;
        overflow: hidden;
    }

.layout--dark .menu--dropdown .menu-header [data-menu-option][administrator-class-build-tab-component],
.layout--dark .menu--dropdown-search .menu-header [data-menu-option][administrator-class-build-tab-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .menu--dropdown .btn[administrator-class-build-tab-component],
.layout--dark .menu--dropdown-search .btn[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .menu--dropdown-search .search-field .field[administrator-class-build-tab-component] {
    color: var(--grey-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

/** 2.2.3 Filter Options */
.menu--filter.open .btn[administrator-class-build-tab-component] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--filter .field-check[administrator-class-build-tab-component] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.layout--dark .menu--filter.open .btn[administrator-class-build-tab-component] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--filter .field-check .checkmark[administrator-class-build-tab-component] {
    background: #ffffff;
    border-color: var(--grey-light-3);
    color: #ffffff;
}

/** 2.2.4 Calendar Options */
.menu--calendar .menu-header[administrator-class-build-tab-component] {
    font-weight: 600;
}

    .menu--calendar .menu-header [data-menu-option][administrator-class-build-tab-component] {
        color: var(--grey-dark-4);
    }

.layout--dark .menu--calendar .menu-header [data-menu-option][administrator-class-build-tab-component] {
    color: var(--grey-1);
}

/** 2.2.5 Date Picker */
.menu--date-picker > .menu-header[administrator-class-build-tab-component] {
    text-align: center;
    min-width: 178px;
}

    .menu--date-picker > .menu-header [data-menu-option][administrator-class-build-tab-component] {
        color: var(--grey-dark-4);
    }

.menu--date-picker .menu-header[administrator-class-build-tab-component] {
    font-weight: 600;
}

.menu--date-picker > .menu-list[administrator-class-build-tab-component] {
    width: 100%;
    max-width: 300px !important;
    border-color: var(--grey-light-3);
    background: var(--grey-light-1);
    overflow: initial;
}

    .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[administrator-class-build-tab-component] {
        color: var(--green);
        background: #ffffff;
    }

.menu--date-picker .field-calendar[administrator-class-build-tab-component] {
    padding: 8px;
}

.menu--date-picker hr[administrator-class-build-tab-component] {
    margin: 0 8px;
}

.layout--dark .menu--date-picker > .menu-list[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-2);
    background: var(--grey-dark-4);
}

    .layout--dark .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[administrator-class-build-tab-component] {
        background: var(--alpha-light-2);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option:hover[administrator-class-build-tab-component] {
        color: var(--grey-1);
        background: var(--alpha-light-1);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option.option--checked[administrator-class-build-tab-component] {
        color: var(--green);
        background: var(--alpha-light-2);
    }

.layout--dark .menu--date-picker > .menu-header [data-menu-option][administrator-class-build-tab-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-2);
    background: transparent;
}

/** 2.2.6 Menu Dropdown Small */
.menu--dropdown-small.open .menu-btn .icon[administrator-class-build-tab-component] {
    transform: translateY(-50%) rotate(90deg);
}

.menu--dropdown-small .menu-btn[administrator-class-build-tab-component] {
    padding: 8px 24px 8px 8px;
    font-size: 0.875rem;
    color: var(--grey-3);
    line-height: 1;
    background: var(--grey-light-1);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
}

    .menu--dropdown-small .menu-btn:hover[administrator-class-build-tab-component], .menu--dropdown-small .menu-btn.active[administrator-class-build-tab-component] {
        background: var(--alpha-dark-2);
    }

    .menu--dropdown-small .menu-btn .icon[administrator-class-build-tab-component] {
        position: absolute;
        top: 50%;
        right: 8px;
        left: initial;
        transform: translateY(-50%);
        width: 12px;
        height: 6px;
        transition: all var(--transition-duration) ease 0s;
    }

.menu--dropdown-small hr[administrator-class-build-tab-component] {
    margin: 0;
}

.layout--light .menu--dropdown-small .menu-btn[administrator-class-build-tab-component] {
    background: #ffffff;
}

    .layout--light .menu--dropdown-small .menu-btn:hover[administrator-class-build-tab-component], .layout--light .menu--dropdown-small .menu-btn.active[administrator-class-build-tab-component] {
        background: var(--alpha-dark-1);
    }

.layout--dark .menu--dropdown-small .menu-btn[administrator-class-build-tab-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .menu--dropdown-small .menu-btn:hover[administrator-class-build-tab-component], .layout--dark .menu--dropdown-small .menu-btn.active[administrator-class-build-tab-component] {
        background: var(--alpha-light-2);
    }

.layout--dark .menu--dropdown-small hr[administrator-class-build-tab-component] {
    border-color: var(--grey-light-3);
}

/** 2.3 Field Switch */
.field-switch[administrator-class-build-tab-component],
.field-switch-small[administrator-class-build-tab-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-switch label[administrator-class-build-tab-component],
    .field-switch-small label[administrator-class-build-tab-component] {
        display: inline-block;
        margin-right: 4px;
    }

    .field-switch input[type=checkbox][administrator-class-build-tab-component],
    .field-switch-small input[type=checkbox][administrator-class-build-tab-component] {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .field-switch .switch-wrap[administrator-class-build-tab-component],
    .field-switch-small .switch-wrap[administrator-class-build-tab-component] {
        position: relative;
        display: inline-block;
    }

    .field-switch .switch[administrator-class-build-tab-component],
    .field-switch-small .switch[administrator-class-build-tab-component] {
        display: block;
    }

        .field-switch .switch .knob[administrator-class-build-tab-component],
        .field-switch-small .switch .knob[administrator-class-build-tab-component] {
            position: absolute;
            display: block;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
        }

        .field-switch .switch .state[administrator-class-build-tab-component],
        .field-switch-small .switch .state[administrator-class-build-tab-component] {
            display: block;
        }

.field-switch[administrator-class-build-tab-component] {
    position: relative;
    line-height: var(--line-height);
}

    .field-switch hr[administrator-class-build-tab-component] {
        margin: 4px 0 12px;
    }

    .field-switch .switch-wrap[administrator-class-build-tab-component] {
        width: 64px;
    }

    .field-switch input[type=checkbox]:checked ~ .switch .knob[administrator-class-build-tab-component] {
        left: calc(100% - 34px);
    }

        .field-switch input[type=checkbox]:checked ~ .switch .knob[administrator-class-build-tab-component]::before {
            background: var(--green);
        }

    .field-switch input[type=checkbox]:checked ~ .switch .state[administrator-class-build-tab-component] {
        color: #ffffff;
        background-color: var(--green);
    }

        .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(1)[administrator-class-build-tab-component] {
            opacity: 1;
        }

        .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(2)[administrator-class-build-tab-component] {
            opacity: 0;
        }

    .field-switch .switch .knob[administrator-class-build-tab-component] {
        width: 34px;
        height: 34px;
        border: 1px solid var(--grey-light-3);
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        z-index: 1;
    }

        .field-switch .switch .knob[administrator-class-build-tab-component]:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            width: 35%;
            height: 35%;
            border-radius: 50%;
            background: var(--grey-3);
        }

    .field-switch .switch .state[administrator-class-build-tab-component] {
        width: 62px;
        padding: 2px 6px;
        color: var(--grey-3);
        font-size: 0.75rem;
        text-transform: uppercase;
        border: 1px solid var(--grey-light-3);
        border-radius: 30px;
        background-color: #ffffff;
    }

        .field-switch .switch .state[administrator-class-build-tab-component]::after {
            display: table;
            content: "";
            clear: both;
        }

        .field-switch .switch .state *:nth-child(1)[administrator-class-build-tab-component] {
            opacity: 0;
            float: left;
        }

        .field-switch .switch .state *:nth-child(2)[administrator-class-build-tab-component] {
            opacity: 1;
            float: right;
        }

.field-switch-small .switch-wrap[administrator-class-build-tab-component] {
    top: 0.2em;
}

.field-switch-small input[type=checkbox]:checked ~ .switch[administrator-class-build-tab-component] {
    border-color: var(--green);
    background: var(--green);
}

    .field-switch-small input[type=checkbox]:checked ~ .switch .knob[administrator-class-build-tab-component] {
        left: calc(100% - 14px);
        background: #ffffff;
    }

.field-switch-small .switch[administrator-class-build-tab-component] {
    width: 32px;
    height: 16px;
    border-radius: 32px;
    border: 1px solid var(--grey-3);
}

    .field-switch-small .switch .knob[administrator-class-build-tab-component] {
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--grey-3);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

.layout--dark .field-switch hr[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-3);
}

.layout--dark .field-switch .switch .knob[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .field-switch .switch .state[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .field-switch-small .switch[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-1);
}

/** 2.4 Search */
.search[administrator-class-build-tab-component] {
    font-size: 1rem;
}

    .search .search-results[administrator-class-build-tab-component] {
        display: none;
    }

/** 2.4.1 Search Small */
.search--small[administrator-class-build-tab-component] {
    position: relative;
    padding: 6px 8px;
    background: var(--grey-light-2);
    z-index: 99;
}

    .search--small .search-field[administrator-class-build-tab-component] {
        position: relative;
    }

        .search--small .search-field input[administrator-class-build-tab-component] {
            padding: 8px 28px 6px;
            border-color: transparent;
            background: transparent;
            cursor: pointer;
        }

            .search--small .search-field input:focus[administrator-class-build-tab-component] {
                border-width: 1px;
                border-color: transparent;
                cursor: initial;
                background: #ffffff;
            }

        .search--small .search-field .search-icon[administrator-class-build-tab-component],
        .search--small .search-field .field-menu[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .search--small .search-field .search-icon[administrator-class-build-tab-component] {
            left: 8px;
            width: 0.875em;
            line-height: 0;
            pointer-events: none;
        }

        .search--small .search-field .field-menu[administrator-class-build-tab-component] {
            right: 0;
        }

            .search--small .search-field .field-menu.open .menu-list[administrator-class-build-tab-component] {
                top: 70%;
            }

            .search--small .search-field .field-menu .menu-header .icon[administrator-class-build-tab-component] {
                height: 0.4em;
            }

.layout--dark .search--small[administrator-class-build-tab-component] {
    background: var(--grey-dark-4);
}

    .layout--dark .search--small .search-field[administrator-class-build-tab-component] {
        border-color: var(--grey-dark-1);
        background-color: var(--grey-dark-4);
    }

        .layout--dark .search--small .search-field input:focus[administrator-class-build-tab-component] {
            background: var(--grey-dark-5);
        }

/** 2.4.2 Search Filed Live */
.search--live[administrator-class-build-tab-component] {
    position: relative;
}

    .search--live[data-view=search-results] .search-field[administrator-class-build-tab-component] {
        z-index: 10;
    }

        .search--live[data-view=search-results] .search-field input[administrator-class-build-tab-component] {
            border-radius: 4px 0 0 0;
        }

        .search--live[data-view=search-results] .search-field .btn[administrator-class-build-tab-component] {
            border-radius: 0 4px 0 0;
        }

    .search--live[data-view=search-results] .search-results[administrator-class-build-tab-component] {
        top: calc(100% - 1px);
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }

    .search--live .search-field[administrator-class-build-tab-component] {
        position: relative;
        display: flex;
        z-index: 1;
    }

        .search--live .search-field input[administrator-class-build-tab-component] {
            border-radius: 4px 0 0 4px;
        }

        .search--live .search-field .btn[administrator-class-build-tab-component] {
            margin-left: -1px;
            width: 40px;
            height: 40px;
            font-size: 1em;
            border-radius: 0 4px 4px 0;
        }

    .search--live .search-results[administrator-class-build-tab-component] {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 0 0 2px 2px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
    }

        .search--live .search-results .search-results-item[administrator-class-build-tab-component] {
            display: flex;
            align-items: center;
            font-size: 0.875em;
            transition: all var(--transition-duration) ease 0s;
            padding: 5px 10px;
        }

            .search--live .search-results .search-results-item:not(:last-child)[administrator-class-build-tab-component] {
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            .search--live .search-results .search-results-item.item--found[administrator-class-build-tab-component] {
                cursor: pointer;
            }

                .search--live .search-results .search-results-item.item--found:hover[administrator-class-build-tab-component], .search--live .search-results .search-results-item.item--found:focus[administrator-class-build-tab-component] {
                    background: rgba(0, 0, 0, 0.025);
                }

                    .search--live .search-results .search-results-item.item--found:hover .result *[administrator-class-build-tab-component], .search--live .search-results .search-results-item.item--found:focus .result *[administrator-class-build-tab-component] {
                        color: var(--green);
                    }

            .search--live .search-results .search-results-item.item--no-result[administrator-class-build-tab-component] {
                color: var(--grey-1);
            }

            .search--live .search-results .search-results-item .icon[administrator-class-build-tab-component] {
                margin-right: 10px;
                height: 0.875em;
                color: var(--alpha-dark-2);
            }

            .search--live .search-results .search-results-item .result[administrator-class-build-tab-component] {
                color: var(--grey-1);
            }

                .search--live .search-results .search-results-item .result *[administrator-class-build-tab-component] {
                    transition: all var(--transition-duration) ease 0s;
                }

                .search--live .search-results .search-results-item .result > span[administrator-class-build-tab-component] {
                    color: var(--grey-3);
                }

                .search--live .search-results .search-results-item .result strong[administrator-class-build-tab-component] {
                    color: var(--grey-dark-4);
                }

.layout--dark .search--live .search-field .btn[administrator-class-build-tab-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-3);
}

    .layout--dark .search--live .search-field .btn:hover[administrator-class-build-tab-component], .layout--dark .search--live .search-field .btn:focus[administrator-class-build-tab-component] {
        background: var(--green);
    }

/** 2.4.3 Search Filed Dropdown */
.search--dropdown .search-field[administrator-class-build-tab-component] {
    padding: 0.625rem;
    background-color: var(--grey-light-1);
    border-bottom: 1px solid var(--grey-light-3);
}

.search--dropdown .search-results[administrator-class-build-tab-component] {
    display: block;
}

    .search--dropdown .search-results.scroll[administrator-class-build-tab-component] {
        padding: 0px;
        max-height: calc(50vh - 61px);
    }

    .search--dropdown .search-results .no-result[administrator-class-build-tab-component] {
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-1);
    }

/* 13. MISC */
/** 13.2 Label */
.label[administrator-class-build-tab-component] {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
}

    .label.label--title[administrator-class-build-tab-component], .label.label--meta[administrator-class-build-tab-component], .label.label--status[administrator-class-build-tab-component] {
        text-transform: uppercase;
        letter-spacing: 0.125em;
    }

    .label.label--meta[administrator-class-build-tab-component], .label.label--status[administrator-class-build-tab-component] {
        font-size: 0.75rem;
        color: var(--grey-1);
    }

    .label.label--icon[administrator-class-build-tab-component] {
        position: relative;
        padding-left: 1.6em;
    }

        .label.label--icon .icon[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-width: 1.25em;
            max-height: 1.25em;
        }

            .label.label--icon .icon.icon--sm[administrator-class-build-tab-component] {
                max-width: 0.875em;
                max-height: 0.875em;
            }

    .label.label--menu[administrator-class-build-tab-component] {
        font-weight: 600;
    }

        .label.label--menu[administrator-class-build-tab-component]::after {
            content: "|";
            color: var(--grey-light-3);
            display: inline-block;
            margin: 0 0.375em 0 0.5em;
        }

    .label.label--status .label-value[administrator-class-build-tab-component] {
        text-transform: none;
        letter-spacing: var(--letter-spacing);
    }

    .label.label--color[administrator-class-build-tab-component] {
        position: relative;
        padding-bottom: 6px;
    }

        .label.label--color .label-color[administrator-class-build-tab-component] {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            max-width: 50px;
            height: 4px;
            border-radius: 2px;
        }

/** Layout Theme */
.layout--dark .label.label--title[administrator-class-build-tab-component] {
    color: var(--grey-1);
}

.layout--dark .label.label--meta[administrator-class-build-tab-component] {
    color: #616161;
}

.layout--dark .label.label--menu[administrator-class-build-tab-component]::after {
    color: var(--alpha-light-2);
}

/** 13.3 Meta */
.meta-group[administrator-class-build-tab-component] {
    position: relative;
    padding-left: 8px;
}

    .meta-group[administrator-class-build-tab-component]:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-left: 1px solid var(--grey-light-3);
    }

.meta[administrator-class-build-tab-component] {
    font-size: 0.75rem;
    color: var(--grey-1);
}

    .meta.meta--icon[administrator-class-build-tab-component] {
        position: relative;
        padding-left: 1.6em;
    }

        .meta.meta--icon .icon[administrator-class-build-tab-component] {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-height: 1.25em;
        }

    .meta .meta-value[administrator-class-build-tab-component] {
        color: var(--grey-3);
    }

/** Layout Theme */
.layout--dark .meta-group[administrator-class-build-tab-component]:before {
    border-color: var(--grey-dark-2);
}

.layout--dark .meta[administrator-class-build-tab-component] {
    color: #616161;
}
/*# sourceMappingURL=theme.css.map */
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/CourseEnrollmentTab.razor.rz.scp.css */
.course-enrollment-tab[b-evv2wi4wam] {
    height: 100%;
    padding: 10px;
    background-color: var(--grey-light-2);
    display: flex;
    flex-flow: column;
}

.enrollment-overview-tab-container[b-evv2wi4wam] {
    display: flex;
    width: 100%;
    align-items: flex-start;
    align-self: stretch;
}

.enrollment-configuration-tab-container[b-evv2wi4wam] {
    height: 100%;
    width: 100%;
}

.course-enrollment-tab-header[b-evv2wi4wam] {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px;
}

.course-enrollment-tab-body[b-evv2wi4wam] {
    display: flex;
    height: 100%;
    min-height: 0;
}

.course-enrollment-navigation[b-evv2wi4wam] {
    display: flex;
    width: 100%;
    justify-content: center;
}

.new-enrollment-button[b-evv2wi4wam]  .icon {
    min-width: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

.new-enrollment-button[b-evv2wi4wam]  .btn {
    height: 40px;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/CourseNode/CourseNode.razor.rz.scp.css */
.course-node[teacher-node-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    user-select: none;
}

.course-title[teacher-node-view] {
    color: #616161;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.course-icon[teacher-node-view] {
    width: 20px;
    height: 20px;
    aspect-ratio: 1/1;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentConfigurationTab/EnrollmentConfigurationTab.razor.rz.scp.css */
.enrollment-configuration-tab-container[enrollment-configuration-tab-view] {
    width: 100%;
    height: 100%;
}

.enrollment-configuration-tab[enrollment-configuration-tab-view] {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    height: 100%;
    min-height: 0;
    gap: 10px;
}

    .enrollment-configuration-tab[enrollment-configuration-tab-view]  .search--small {
        padding: 0;
    }

    .enrollment-configuration-tab[enrollment-configuration-tab-view]  .table-wrapper {
        width: 100%;
        overflow: hidden;
    }

.welcome-card-container[enrollment-configuration-tab-view] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: var(--grey-light-2);
}

.welcome-card[enrollment-configuration-tab-view] {
    max-width: 808px;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

    .welcome-card span[enrollment-configuration-tab-view] {
        color: var(--grey-dark-1);
        text-align: center;
        margin-bottom: 20px;
    }

    .welcome-card[enrollment-configuration-tab-view]  .btn {
        height: 40px !important;
    }
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentOverviewTab/EnrollmentOverviewTab.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/CoursesTab/CoursesTab.razor.rz.scp.css */
.tab-content[courses-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content-wrapper[courses-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
    padding: 24px;
    gap: 30px;
}

.tab-header[courses-tab-view] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    gap: 4px;
}

.tab-header-content[courses-tab-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.tab-header-label[courses-tab-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px; /* 160% */
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tab-header-content-description[courses-tab-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
}

.tab-body[courses-tab-view] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--grey-light-2);
}

    .tab-body[courses-tab-view]  .table-wrapper {
        width: 100%;
    }

    .tab-body[courses-tab-view]  .table-wrapper-card {
        height: 100%;
        width: 100%;
    }

    .tab-body[courses-tab-view]  .table-wrapper-body {
        height: 100%;
        width: 100%;
    }

.tab-footer[courses-tab-view] {
    padding: 15px;
    min-height: 64px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/CoursesTab/Views/CoursesTable/CoursesTable.razor.rz.scp.css */
.courses-table[courses-table-view] {
    display: flex;
    flex: 1 1 auto;
    margin: 0 10px 10px 10px;
    height: 100px;
    width: 100%;
    min-height: 200px;
}

    .courses-table[courses-table-view]  .spinner-profile-height {
        height: 100% !important;
    }

    .courses-table[courses-table-view]  .td--sticky {
        background-color: transparent !important;
    }

    .courses-table[courses-table-view]  .tr--link:hover .td--sticky {
        background-color: transparent !important;
    }

    .courses-table[courses-table-view]  .table {
       border: 1px solid var(--grey-light-4) !important;
       background-color: white !important;
    }

        .courses-table[courses-table-view]  .table tr > :first-child {
            min-width: 0 !important;
            padding: 5px 0 5px 0;
        }

.course-name-cell[courses-table-view] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.course-name-cell-information[courses-table-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .course-name-cell-information[courses-table-view]  svg {
        width: 14px;
        height: 14px;
    }

.course-name-cell-tooltip[courses-table-view] {
    border-radius: 4px;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: var(--grey-dark-3);
}

.course-name-cell-text[courses-table-view] {
    color: var(--grey-dark-4);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.subject-color-indicator[courses-table-view] {
    height: 100%;
    width: 4px;
    background-color: currentColor;
    display: inline-block;
}

.subject-cell[courses-table-view] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/CoursesTab/Views/CoursesTableFilter/CoursesTableFilter.razor.rz.scp.css */
.course-table-filter-container[courses-table-filter-view] {
    display: flex;
    align-items: center;
}

.course-table-filter-delete[courses-table-filter-view] {
    color: var(--grey-3);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .course-table-filter-delete[courses-table-filter-view]::after {
        content: '';
        display: block;
        width: 1px;
        height: 1rem;
        background: var(--grey-light-3);
        margin: 0 0.5rem;
    }

.delete-text[courses-table-filter-view] {
    margin-left: 0.5rem;
}

[courses-table-filter-view] .btn,
[courses-table-filter-view] .search--small .search-field input,
.filter-container[courses-table-filter-view] {
    height: 38.5px;
}

[courses-table-filter-view] .btn {
    max-height: none !important;
}

[courses-table-filter-view] .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.course-table-filter[courses-table-filter-view] {
    margin-right: 0.5rem;
}

.filter-container[courses-table-filter-view] {
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
}

.course-table-filter-container .course-table-filter-delete[courses-table-filter-view]  .icon {
    height: 16px !important;
}

.filter-container[courses-table-filter-view]  .btn-filter .btn:hover {
    color: var(--green);
    background: transparent;
}

[courses-table-filter-view] .subjects-drop-down .menu-list {
    transform: translate(-154px, 0) !important;
    min-width: 190px;
    max-width: 190px;
}

[courses-table-filter-view] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[courses-table-filter-view] .loader-spinner {
    height: 32px !important;
}


[courses-table-filter-view] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/StudentsTab/StudentsTab.razor.rz.scp.css */
.tab-content[students-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content-wrapper[students-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
    padding: 24px;
    gap: 30px;
    min-height: 0;
}

.tab-header[students-tab-view] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    gap: 4px;
}

.tab-header-controls[students-tab-view] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.tab-header-content[students-tab-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.tab-header-label[students-tab-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px; /* 160% */
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tab-header-content-description[students-tab-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
}

.tab-body[students-tab-view] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--grey-light-2);
    min-height: 0;
}

.tab-footer[students-tab-view] {
    padding: 15px;
    min-height: 64px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-header-controls[students-tab-view]  div.dropdown-menu {
    width: 100%;
}

.dropdown-button-content[students-tab-view] {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
}

    .dropdown-button-content[students-tab-view] .icon {
        width: 16px !important;
        height: 16px !important;
        flex: none !important;
        left: 0 !important;
    }

    .dropdown-button-content[students-tab-view]  path {
        fill: white !important;
    }

/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/StudentsTab/Views/StudentList/StudentList.razor.rz.scp.css */
.student-list-container[student-list-view] {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
}

.student-list-header[student-list-view] {
    display: flex;
    flex-direction: row;
    height: auto;
    align-items: center;
    justify-content: flex-end;
    margin-right: 150px;
    gap: 5px;
}

    .student-list-header .switch-label[student-list-view] {
        color: var(--grey-3);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
    }

.student-list-body[student-list-view] {
        display: flex;
        height: auto;
        width: 100%;
    }

    .student-list-body .student-list[student-list-view] {
        display: flex;
        height: 100%;
        width: 100%;
        padding: 10px;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.05);
    }

[student-list-view] .min-height-200 {
    min-height: 200px !important;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/StudentsTab/Views/StudentListItem/StudentListItem.razor.rz.scp.css */
.student-list-item[student-list-item-view] {
    display: flex;
    height: 50px;
    padding: 10px 4px 10px 10px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background-color: white;
    cursor: pointer;
}

    .student-list-item:hover[student-list-item-view] {
        background: var(--grey-light-1);
    }

    .student-list-item[student-list-item-view]  .remove-button {
        background-color: transparent;
        border: none;
        font-size: 1rem;
        color: var(--grey-1);
    }

        .student-list-item[student-list-item-view]  .remove-button:hover {
            color: #323232;
            background-color: var(--grey-light-1);
        }

    .student-list-item[student-list-item-view]  .remove-button .icon{
        height: 12px !important;
        width: 12px !important
    }

.column-cell[student-list-item-view] {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

    .column-cell.align-right[student-list-item-view] {
        justify-content: flex-end;
    }

    .column-cell.align-left[student-list-item-view] {
        justify-content: flex-start;
    }

    .column-cell .column-cell-content[student-list-item-view] {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        max-width: 120px;
    }

    .column-cell .column-cell-label[student-list-item-view] {
        color: var(--grey-3);
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
    }

    .column-cell .column-cell-value[student-list-item-view] {
        color: #616161;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
    }

.section-name[student-list-item-view] {
        color: var(--grey-dark-3);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
    }

.section-tag[student-list-item-view] {
    display: flex;
    min-width: 14px;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.05);
}

    .section-tag.student-group .section-tag-text[student-list-item-view] {
        color: var(--green);
    }

.section-tag-text[student-list-item-view] {
    color: var(--grey-3);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.switch-state-label[student-list-item-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.switch-container[student-list-item-view] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

    .switch-container[student-list-item-view]  .field-switch-small {
        display: flex !important;
    }
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/TeachersTab/TeachersTab.razor.rz.scp.css */
.tab-content[students-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content-wrapper[students-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
    padding: 24px;
    gap: 10px;
    min-height: 0;
}

.tab-header[students-tab-view] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    gap: 4px;
}

.tab-header-controls[students-tab-view] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    width: 100%;
}

    .tab-header-controls[students-tab-view]  .add-teacher-button {
        height: 38px;
    }

    .tab-header-content[students-tab-view] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        align-self: stretch;
    }

.tab-header-label[students-tab-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px; /* 160% */
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tab-header-content-description[students-tab-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
}

.tab-body[students-tab-view] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--grey-light-2);
    min-height: 0;
}

.tab-footer[students-tab-view] {
    padding: 15px;
    min-height: 64px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-header-controls[students-tab-view]  div.dropdown-menu {
    width: 100%;
}

.dropdown-button-content[students-tab-view] {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
}

    .dropdown-button-content[students-tab-view] .icon {
        width: 16px !important;
        height: 16px !important;
        flex: none !important;
        left: 0 !important;
    }

    .dropdown-button-content[students-tab-view]  path {
        fill: white !important;
    }

/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/TeachersTab/Views/CourseList/CourseList.razor.rz.scp.css */
.course-list-container[student-list-view] {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
}

.course-list-header[student-list-view] {
    display: flex;
    flex-direction: row;
    height: auto;
    align-items: center;
    justify-content: flex-end;
    margin-right: 150px;
    gap: 5px;
}

.course-list-body[student-list-view] {
        display: flex;
        height: auto;
        width: 100%;
    }

    .course-list-body .course-list[student-list-view] {
        display: flex;
        height: 100%;
        width: 100%;
        padding: 10px;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.05);
    }

[student-list-view] .min-height-200 {
    min-height: 200px !important;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/TeachersTab/Views/CourseListItem/CourseListItem.razor.rz.scp.css */
.course-list-item[student-list-item-view] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
    padding: 4px 8px 4px 10px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background-color: white;
    cursor: pointer;
}

    .course-list-item:hover[student-list-item-view] {
        background: var(--grey-light-1);
    }

.course-item-details h6[student-list-item-view] {
    margin-bottom: -4px;
}

.teacher-tag[student-list-item-view] {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    justify-content: space-between;
}

    .teacher-tag .teacher-name-container[student-list-item-view] {
        max-width: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;
        padding-left: 10px;
    }

    .teacher-tag[student-list-item-view]  .remove-teacher-button {
        border: 0;
        background-color: transparent !important;
    }

        .teacher-tag[student-list-item-view]  .remove-teacher-button .icon {
            height: 12px;
            width: 12px;
        }

.course-item-action[student-list-item-view] {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .course-item-action[student-list-item-view]  .field-group .input-wrapper > input {
        height: 32px;
    }

    .course-item-action[student-list-item-view]  .field-group > label {
        display: none;
    }

.subject-icon[student-list-item-view] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/TermsTab/TermsTab.razor.rz.scp.css */
.tab-content[term-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content-wrapper[term-tab-view] {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
    padding: 24px;
    gap: 30px;
}

.tab-header[term-tab-view] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    gap: 4px;
}

.tab-header-content[term-tab-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.tab-header-label[term-tab-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px; /* 160% */
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tab-header-content-description[term-tab-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
}

.tab-body[term-tab-view] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--grey-light-2);
}

    .tab-body[term-tab-view]  .table-wrapper-card {
        height: 100%;
    }

    .tab-body[term-tab-view]  .table-wrapper-body {
        height: 100%;
    }

.tab-footer[term-tab-view] {
    padding: 15px;
    min-height: 64px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/TermsTab/Views/TermList/TermList.razor.rz.scp.css */
.terms-list[term-list-view] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    height: fit-content;
    background: #FFF;
}

    .terms-list.state--empty .list-main[term-list-view] {
        background: transparent;
    }

    .terms-list.state--empty .list[term-list-view] {
        display: none;
    }

    .terms-list.state--empty .list-empty[term-list-view] {
        display: flex;
    }

    .terms-list .list-main[term-list-view] {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-radius: 0 0 4px 4px;
        background: #ffffff;
        overflow: hidden;
    }

    .terms-list .list-empty[term-list-view] {
        min-height: 80px;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 30px;
    }

    .terms-list .list-header[term-list-view] .field-check,
    .terms-list[term-list-view] .item-class ::deep.field-check {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .terms-list .list-header[term-list-view] {
        height: 40px;
        padding: 10px 5px 10px 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: var(--grey-light-2);
        border: 1px solid var(--grey-light-4);
        border-radius: 4px 4px 0 0;
    }

        .terms-list .list-header .list-header-label[term-list-view] {
            color: var(--grey-3);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 14px;
        }

    .terms-list .list[term-list-view] {
        flex: 1 1 auto;
        padding: 0 8px;
    }

/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/EnrollmentWizard/TermsTab/Views/TermListItem/TermListItem.razor.rz.scp.css */
.item[term-list-item-view] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .item:not(:last-of-type)[term-list-item-view] {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

.item-class[term-list-item-view] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-duration) ease 0s;
}

    .item-class .field-check[term-list-item-view] {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .item-class.state--disabled[term-list-item-view] {
        pointer-events: none;
    }

        .item-class.state--disabled .checkmark[term-list-item-view] {
            opacity: 0;
        }

    .item-class:hover[term-list-item-view], .item-class:focus[term-list-item-view] {
        background: var(--alpha-dark-1);
    }

    .item-class .field-check .checkmark[term-list-item-view] {
        top: 0.2em;
        transform: none;
    }


.layout--light .list-select-classes .list-main-header[term-list-item-view] {
    background: var(--grey-light-1);
}

.layout--dark .list-select-classes .list-main[term-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .list-select-classes .list-main-header[term-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .item-class:hover[term-list-item-view], .layout--dark .item-class:focus[term-list-item-view] {
    background: var(--alpha-light-1);
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/SectionNode/SectionNode.razor.rz.scp.css */

.section-node[section-node-view] {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
    gap: 10px;
    border-left: 2px solid var(--grey-light-3);
    padding: 0 0 0 8px;
}

.cell-content[section-node-view] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    width: 100%;
    min-width: 40px;
}

.cell-label[section-node-view] {
    color: var(--grey-3);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-height: 14px;
}

.cell-value[section-node-view] {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.section-node span[section-node-view] {
    display: inline-block;
    vertical-align: middle;
}
/* /Pages/Admin/SchoolYears/Views/CourseEnrollmentTab/Views/TermNode/TermNode.razor.rz.scp.css */
.term-node[term-node-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    user-select: none;
}
/* /Pages/Admin/SchoolYears/Views/CourseSectionDetails/CourseSectionDetails.razor.rz.scp.css */
.course-section-details-container[course-section-details-view] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1 1 0;
    align-self: stretch;
    padding: 0 20px;
}

.course-section-details-content[course-section-details-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.header-content[course-section-details-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 85px;
    border-bottom: 1px solid var(--grey-light-4);
    width: 100%;
}

.side-by-side-list[course-section-details-view] {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 500px;
}

.list-info[course-section-details-view] {
    display: flex;
    height: 25px;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
}

.student-list[course-section-details-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 0;
}
/* /Pages/Admin/SchoolYears/Views/CourseSectionDetails/Views/StudentList/StudentList.razor.rz.scp.css */
hr[student-list-view] {
    width: 100%;
    margin: 0;
}

.btn[student-list-view] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.btn-title[student-list-view] {
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
}

.selection-summary[student-list-view] {
    grid-column: 1 / 2;
    display: flex;
    justify-content: left;
}

.list-select-students[student-list-view] {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-4);
    background: var(--grey-light-1);
    min-height: 0;
    min-width: 220px;
}

    .list-select-students[student-list-view] .search--small {
        display: flex;
        background: white;
        border: 1px solid var(--grey-light-4);
        border-radius: 4px;
        height: 40px;
        padding: 12px 14px;
        align-items: center;
        align-self: stretch;
        gap: 8px;
    }

    .list-select-students[student-list-view] .search-field {
        width: 100%;
    }

    .list-select-students[student-list-view] .list-main-header ::deep.field-check,
    .list-select-students[student-list-view] .item-class ::deep.field-check {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .list-select-students[student-list-view] .list-main-header {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--alpha-dark-1);
        border-bottom: 1px solid var(--grey-light-3);
    }

        .list-select-students[student-list-view] .list-main-header ::deep.btn {
            margin-right: -8px;
        }

.list-main[student-list-view] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
    align-self: stretch
}

    .list-main[student-list-view] .list-main-header {
        height: 40px;
        padding: 10px 5px 10px 10px;
    }

.list-header[student-list-view] {
    width: 100%;
}

.list-empty[student-list-view] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    background: var(--grey-light-1);
}

.list[student-list-view] {
    flex: 1 1 auto;
    padding: 0 8px;
}

.list-footer[student-list-view] {
   display: flex;
   align-self: stretch;
}

.list-no-search-results[student-list-view] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    background: var(--grey-light-1);
    gap: 10px;
}

.search-icon-container[student-list-view]  svg {
    height: 32px;
    width: 32px;
}

.filter-drop-down-container[student-list-view] {
    height: 38.5px;
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
}

.filter-drop-down-container[student-list-view]  .filter-drop-down {
    min-width: 190px;
}

.filter-drop-down-container[student-list-view]  .filter-drop-down .btn-filter .btn:hover {
    color: var(--green);
    background: transparent;
}

.filter-drop-down-container[student-list-view]  .filter-drop-down .menu-list {
    transform: translate(-113px, 0) !important;
    transition: opacity var(--transition-duration) ease 0s;
}
/* /Pages/Admin/SchoolYears/Views/CourseSectionDetails/Views/StudentListFilter/StudentListFilter.razor.rz.scp.css */
.student-list-filters-container[student-list-filter-view] {
    width: 100%;
}

    .student-list-filters-container[student-list-filter-view]  .header-content {
        width: 100% !important;
    }

.student-list-filters[student-list-filter-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
/* /Pages/Admin/SchoolYears/Views/CourseSectionDetails/Views/StudentListItem/StudentListItem.razor.rz.scp.css */
.item[student-list-item-view] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .item:not(:last-of-type)[student-list-item-view] {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

.select-class[student-list-item-view] {
    padding: 2px;
}

.item-student[student-list-item-view] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-duration) ease 0s;
}

    .item-student[student-list-item-view]  input[type=checkbox] {
        top: 28% !important;
    }

    .item-student[student-list-item-view]  .checkmark {
        top: 28% !important;
    }

.layout--light .list-select-classes .list-main-header[student-list-item-view] {
    background: var(--grey-light-1);
}

.layout--dark .list-select-classes .list-main[student-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .list-select-classes .list-main-header[student-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .item-class:hover[student-list-item-view], .layout--dark .item-class:focus[student-list-item-view] {
    background: var(--alpha-light-1);
}
/* /Pages/Admin/SchoolYears/Views/CourseSectionProperties/CourseSectionProperties.razor.rz.scp.css */
.course-section-properties-content[course-section-properties-view] {
    display: flex;
    flex: 1 0 auto;
    width: 288px;
    padding: 10px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    border-right: 1px solid var(--grey-light-4);
    background: var(--grey-light-1);
}

.label--title[course-section-properties-view] {
    border-bottom: 1px solid var(--grey-light-4);
    display: flex;
    padding-bottom: 10px;
    align-items: center;
    align-self: stretch;
}

.add-teacher-button-section[course-section-properties-view] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.remove-teacher-button-container[course-section-properties-view] {
    display: none;
}

[course-section-properties-view] .remove-button {
    border: 0;
    background-color: transparent !important;
}

    [course-section-properties-view] .remove-button .icon {
        height: 12px;
        width: 12px;
    }

[course-section-properties-view] .add-teacher-button {
    padding: unset !important;
    height: 40px;
    width: 100%;
}

    [course-section-properties-view] .add-teacher-button:hover .remove-teacher-button-container {
        display: inline-block;
    }

.teacher-button-content[course-section-properties-view] {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
}

.teacher-name-container[course-section-properties-view] {
    max-width:100%;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    flex: 1 0 0;
}

.label-name[course-section-properties-view] {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    color: black;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
}
/* /Pages/Admin/SchoolYears/Views/EnrollmentCardList/EnrollmentCardList.razor.rz.scp.css */
.enrollment-card-list[enrollement-card-list] {
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 0;
    padding: 5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.no-enrollment-records[enrollement-card-list] {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.no-enrollment-record-title[enrollement-card-list] {
    color: var(--grey-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}
/* /Pages/Admin/SchoolYears/Views/EnrollmentCardList/Views/EnrollmentCard/EnrollmentCard.razor.rz.scp.css */
.enrollment-card[enrollement-card-view] {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background-color: white;
    max-height: 70px;
    cursor: pointer;
    min-width: 250px;
    user-select: none;
}

    .enrollment-card.selected[enrollement-card-view] {
        border-top: 1px solid var(--green);
        border-right: 1px solid var(--green);
        border-bottom: 1px solid var(--green);
        border-left: 4px solid var(--green);
        box-shadow: 0 0 5px -6px rgba(0, 0, 0, 0.15), 0 0 5px -4px rgba(0, 0, 0, 0.07);
    }

    .enrollment-card.disabled[enrollement-card-view] {
        cursor: default;
        background: var(--grey-light-1);
    }

    .enrollment-card-content[enrollement-card-view] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        align-self: stretch;
        min-width: 0;
    }

.enrollment-card-header[enrollement-card-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.add-button-text[enrollement-card-view] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.enrollment-card-action[enrollement-card-view]  .btn {
    height: 32px;
    width: 32px;
}
/* /Pages/Admin/SchoolYears/Views/EnrollmentCardList/Views/EnrollmentTags/EnrollmentTags.razor.rz.scp.css */
.enrollment-tags[enrollment-tags-view] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

    .enrollment-tags[enrollment-tags-view]  .header {
        min-width: 0;
    }
/* /Pages/Admin/SchoolYears/Views/HierarchicalTreeView/HierarchicalTree.razor.rz.scp.css */
.hierarhical-tree[hierarchical-tree-view] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.expandable-node[hierarchical-tree-view] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .expandable-node.collapsed .expand-action .expand-action-icon[hierarchical-tree-view] {
        transition: transform var(--transition-duration) ease 0s;
        transform: rotate(-90deg);
    }

    .expandable-node.expanded .expand-action .expand-action-icon[hierarchical-tree-view] {
        transition: transform var(--transition-duration) ease 0s;
        transform: rotate(0deg);
    }

    .expand-action[hierarchical-tree-view] {
        width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .expand-action.hidden-expander[hierarchical-tree-view] {
        visibility: hidden; 
    }

    .expand-action .expand-action-icon[hierarchical-tree-view] {
        display: flex;
        transition: transform 0.2s ease;
    }

.hierarhical-tree-parent-node[hierarchical-tree-view],
.hierarhical-tree-child-node[hierarchical-tree-view] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .hierarhical-tree-parent-node:hover[hierarchical-tree-view] {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .hierarhical-tree-child-node:hover[hierarchical-tree-view] {
        background-color: rgba(0, 0, 0, 0.02);
    }

.hierarhical-tree-grandchild-node[hierarchical-tree-view] {
    height: 40px;
}
/* /Pages/Admin/SchoolYears/Views/MasterScheduleTab/ScheduleEvents/ScheduleEvents.razor.rz.scp.css */
.schedule-events[schedule-events-view] {
    display: flex;
    min-height: 40px;
    padding: 5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    border-bottom: 1px solid var(--grey-light-4);
    background: var(--grey-light-1);
}
/* /Pages/Admin/SchoolYears/Views/MasterScheduleTab/ScheduleEvents/Views/ScheduleEvent/ScheduleEvent.razor.rz.scp.css */
.schedule-event[schedule-event-view] {
    display: flex;
    height: 30px;
    padding: 5px 10px 5px 14px;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    border-left: 4px solid;
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.08);
}

.schedule-event-content[schedule-event-view] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.schedule-event-tag[schedule-event-view] {
    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.05);
}

.schedule-event-tag-content[schedule-event-view] {
    display: flex;
    align-items: center;
}

.schedule-event-tag-content-text[schedule-event-view] {
    color: var(--grey-3);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
    align-items: center;
    text-wrap-mode: nowrap;
}

.schedule-event-title[schedule-event-view] {
    display: flex;
    width: 100%;
    align-items: center;
    color: black;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 25.6px;
    text-wrap-mode: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}

.schedule-event-info[schedule-event-view] {
    display: flex;
    align-items: center;
    width: auto;
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.8px;
    text-wrap-mode: nowrap;
}
/* /Pages/Admin/SchoolYears/Views/NavigationTabs/NavigationTabs.razor.rz.scp.css */
.navigation-tabs[navigation-tabs-view] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.navigation-tabs-content[navigation-tabs-view] {
    display: flex;
}

.navigation-tabs[navigation-tabs-view]  .navigation-tab:first-child {
    border-left: 1px solid var(--grey-light-4);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.navigation-tabs[navigation-tabs-view]  .navigation-tab:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* /Pages/Admin/SchoolYears/Views/NavigationTabs/Views/NavigationTab.razor.rz.scp.css */
.navigation-tab[b-lxb3i4t59q] {
    display: flex;
    height: 40px;
    min-width: 120px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--grey-light-4);
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    border-left: none;
}

    .navigation-tab .navigation-tab-title[b-lxb3i4t59q] {
        color: var(--grey-3);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
    }

    .navigation-tab.selected[b-lxb3i4t59q] {
        background: white;
    }

    .navigation-tab.selected .navigation-tab-title[b-lxb3i4t59q] {
        color: var(--green);
    }
/* /Pages/Admin/SchoolYears/Views/ProgramEnrollmentStatusTab/ProgramEnrollmentStatusTab.razor.rz.scp.css */
.program-enrollment-status-tab[b-r6mvfzs0by] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.program-enrollment-status-tab-header[b-r6mvfzs0by] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px;
}

.course-enrollment-navigation[b-r6mvfzs0by] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.program-enrollment-status-content[b-r6mvfzs0by] {
    flex: 1;
    display: flex;
    gap: 20px;
    min-height: 0;
}

.program-enrollment-status-tab-body[b-r6mvfzs0by] {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.enrollment-overview-tab-container[b-r6mvfzs0by] {
    display: flex;
    width: 100%;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
}

.enrollment-configuration-tab-container[b-r6mvfzs0by] {
    width: 100%;
    min-height: 0;
}

.program-enrollment-status-not-enrolled-students[b-r6mvfzs0by] {
    width: 50%;
    height: 100%;
    min-height: 0;
    padding: 10px;
}

.hidden[b-r6mvfzs0by] {
    display: none !important;
}
/* /Pages/Admin/SchoolYears/Views/ProgramEnrollmentStatusTab/Views/CoreProgramEnrollmentStatusTab/CoreProgramEnrollmentStatusTab.razor.rz.scp.css */

/* /Pages/Admin/SchoolYears/Views/ProgramEnrollmentStatusTab/Views/CourseItemView/CourseItemView.razor.rz.scp.css */
.enrollment-status-course-item-container[b-g21pok57rt] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    border-bottom: 1px solid #E1E1E1;
    padding: 15px 10px;
    transition: background 0.25s ease;
    cursor: pointer;
}
    
    .enrollment-status-course-item-container:hover[b-g21pok57rt] {
        background: rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid #E1E1E1;
    }

.enrollment-status-left[b-g21pok57rt] {
    display: flex;
    width: 70%;
    justify-content: space-between;
    flex-direction: column;
}

.enrollment-status-right[b-g21pok57rt] {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 5px;
}

.enrollment-status-first-row[b-g21pok57rt] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.enrollment-status-second-row[b-g21pok57rt] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.enrollment-status-icon[b-g21pok57rt] {
    width: 26px;
    height: 26px;
}

.enrollment-status-icon-value[b-g21pok57rt]  svg {
    width: 26px !important;
    height: 26px !important;
    fill: currentColor !important;
    color: currentColor !important;
}

.enrollment-status-course-item-name[b-g21pok57rt] {
    font-size: 16px;
    color: #616161;
    font-weight: 400;
    line-height: 100%;
    display: flex;
    align-items: center;
}

.enrollment-status-total-enrollments[b-g21pok57rt] {
    padding: 4px 8px;
    color: #616161;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 20px;
    background: #E9E9E9;
}

.enrollment-status-total-enrollments-text[b-g21pok57rt] {
    color: #888888 !important;
    font-weight: 400 !important;
}

.enrollment-status-subject-info[b-g21pok57rt] {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enrollment-status-circle[b-g21pok57rt] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #A4A4A4;
    margin: 0 3px;
}

.enrollment-status-grade-name[b-g21pok57rt] {
    font-size: 12px;
    color: #616161;
    font-weight: 400;
    line-height: 100%;
}

.enrollment-status-right-title[b-g21pok57rt] {
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    margin-right: 10px;
}

    .enrollment-status-right-title[b-g21pok57rt]  svg {
        margin-right: 5px;
    }

.add-button-text[b-g21pok57rt] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.not-clickable-enrollment[b-g21pok57rt] {
    cursor: default;
}
/* /Pages/Admin/SchoolYears/Views/ProgramEnrollmentStatusTab/Views/ElectiveProgramEnrollmentStatusTab/ElectiveProgramEnrollmentStatusTab.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Views/ProgramEnrollmentStatusTab/Views/NotEnrolledStudentsView/NotEnrolledStudentsView.razor.rz.scp.css */
.not-enrolled-students-container[b-mb7v75guus] {
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    border-bottom: 1px solid #E1E1E1;
    padding-bottom: 10px;
    gap: 10px;
}

.not-enrolled-students-first-row[b-mb7v75guus] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.not-enrolled-students-first-row img[b-mb7v75guus] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid white;
}

.not-enrolled-students-second-row[b-mb7v75guus] {
    background-color: rgba(229, 40, 60, 0.1);
    padding: 5px;
    border-radius: 16px;
    width: 100%;
    border: 1px solid #E1E1E1;
}

.not-enrolled-student-name[b-mb7v75guus] {
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    color: #616161;
}

.not-enrolled-missing[b-mb7v75guus] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 6px;
    color: #E5283C;
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    padding: 2px;
}

.not-enrolled-missing[b-mb7v75guus]  svg {
    transform: translateY(-1px);
    margin-right: 4px;
}

.not-enrolled-missing-text[b-mb7v75guus] {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.not-enrolled-missing-items[b-mb7v75guus] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.not-enrolled-course-item[b-mb7v75guus] {
    padding: 3px 4px;
    white-space: nowrap;
    display: flex;
    gap: 6px;
}

.not-enrolled-circle[b-mb7v75guus] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #A4A4A4;
    margin: 0 3px;
}

.not-enrolled-grade[b-mb7v75guus] {
    font-size: 12px;
    color: #616161;
    font-weight: 400;
    line-height: 100%;
}

.not-enrolled-group-names[b-mb7v75guus] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.not-enrolled-group-name[b-mb7v75guus] {
    padding: 4px 8px;
    color: #616161;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 20px;
    background: #E9E9E9;
    border: 1px solid #D2D2D2;
}

.not-enrolled-subject-icon[b-mb7v75guus] {
    width: 12px;
    height: 12px;
    fill: currentColor;
    color: currentColor;
}

    .not-enrolled-subject-icon[b-mb7v75guus]  svg {
        width: 12px !important;
        height: 12px !important;
    }
    
.not-enrolled-subject-name[b-mb7v75guus] {
    color: #616161 !important;
    font-size: 12px;
    font-weight: 400;
}
/* /Pages/Admin/SchoolYears/Views/ProgramsTab/ProgramsTab.razor.rz.scp.css */
.programs-tab[b-c92gd3qu1w] {
    height: calc(100vh - 240px);
    margin: 16px 16px 0 16px;
    padding: 8px;
    background-color: var(--grey-light-2);
    display: flex;
    flex-flow: column;
}

.programs-tab .header[b-c92gd3qu1w] {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

    .programs-tab .header[b-c92gd3qu1w]  .icon {
        min-width: 12px !important;
        min-height: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }

    .programs-tab .header[b-c92gd3qu1w]  .btn {
        height: 40px;
    }

.programs-tab .table-filter-container[b-c92gd3qu1w] {
    display: flex;
    align-items: center;
}

.programs-tab[b-c92gd3qu1w]  .btn--primary,
.programs-tab[b-c92gd3qu1w]  .search--small .search-field input {
    height: 38.5px;
}

.programs-tab[b-c92gd3qu1w]  .btn {
    max-height: none !important;
}

.programs-tab[b-c92gd3qu1w]  .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

[b-c92gd3qu1w] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/Admin/SchoolYears/Views/ScheduleBuildTab/ScheduleBuildTab.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Views/ScheduleBuildTab/Views/ScheduleBuilderLayout/ScheduleBuilderLayout.razor.rz.scp.css */
.loader-container[schedule-builder-layout-view] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.schedule-builder-template[schedule-builder-layout-view] {
    display: flex;
    height: 100%;
    width: 100%;
}

    .schedule-builder-template:has(.schedule-builder-template-footer-container)[schedule-builder-layout-view] {
        flex-wrap: wrap;
    }

        .schedule-builder-template:has(.schedule-builder-template-footer-container) .schedule-builder-template-sidebar-container[schedule-builder-layout-view],
        .schedule-builder-template:has(.schedule-builder-template-footer-container) .schedule-builder-template-body[schedule-builder-layout-view] {
            max-height: calc(100% - 64px);
        }

    .schedule-builder-template:has(.schedule-builder-template-sidebar-container.visible) .schedule-builder-template-body[schedule-builder-layout-view] {
        flex: 1 1 0;
    }


.schedule-builder-template-sidebar-container[schedule-builder-layout-view] {
    display: flex;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    border-right: 1px solid var(--grey-light-3);
}

.schedule-build-template-body-toolbar-container[schedule-builder-layout-view] {
        position: absolute;
        height: 64px;
        width: 100%;
        align-items: center;
        display: flex;
        background: white;
        padding: 12px;
        border-bottom: 1px solid var(--grey-light-3);
    }

    .schedule-build-template-body-toolbar-container .sidebar-actions[schedule-builder-layout-view] {
        width: auto;
    }

    .schedule-build-template-body-toolbar-container .toolbar-container[schedule-builder-layout-view] {
        width: 100%;
        padding: 0 8px 0 8px;
    }

    .schedule-build-template-body-toolbar-container .toobar-actions[schedule-builder-layout-view] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: auto;
    }

.schedule-builder-template-body[schedule-builder-layout-view] {
    position: relative;
    height: 100%;
    background: white;
}

.schedule-builder-template-body-container[schedule-builder-layout-view] {
    position: absolute;
    top: 64px;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 64px);
}

.schedule-builder-template-footer-container[schedule-builder-layout-view] {
    position: relative;
    width: 100%;
    padding: 15px;
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid var(--grey-light-3);
    z-index: 1;
}

.drop-down-container[schedule-builder-layout-view] {
    width: 190px;
}
/* /Pages/Admin/SchoolYears/Views/SchoolYearForm/SchoolYearForm.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Views/SchoolYearForm/Views/SchoolDaysSelector/SchoolDaysSelector.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Views/SidePanelNavigation/SidePanelNavigation.razor.rz.scp.css */
.navigation-buttons-container[b-1ve6t711y7] {
    display: flex;
    align-items: center;
    justify-items: center;
}

.date[b-1ve6t711y7] {
    font-weight: 500;
    font-size: 1rem;
    margin: 0 0 0 10px;
}
/* /Pages/Admin/SchoolYears/Views/SidePanelNavigation/Views/CalendarNavigation/CalendarNavigation.razor.rz.scp.css */
/* /Pages/Admin/SchoolYears/Views/SidePanelNavigation/Views/NavigationHeader/NavigationHeader.razor.rz.scp.css */
.navigation-buttons-container[b-36sqi9cog4] {
    display: flex;
    align-items: center;
    justify-items: center;
}

.date[b-36sqi9cog4] {
    font-weight: 500;
    font-size: 1rem;
    margin: 0 0 0 10px;
}
/* /Pages/Admin/SchoolYears/Views/TermList/TermList.razor.rz.scp.css */
.terms-list[term-list-view] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    height: fit-content;
    background: #FFF;
}

    .terms-list.state--empty .list-main[term-list-view] {
        background: transparent;
    }

    .terms-list.state--empty .list[term-list-view] {
        display: none;
    }

    .terms-list.state--empty .list-empty[term-list-view] {
        display: flex;
    }

    .terms-list .list-main[term-list-view] {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-radius: 0 0 4px 4px;
        background: #ffffff;
        overflow: hidden;
    }

    .terms-list .list-empty[term-list-view] {
        min-height: 80px;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 30px;
    }

    .terms-list .list-header[term-list-view] .field-check,
    .terms-list[term-list-view] .item-class ::deep.field-check {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .terms-list .list-header[term-list-view] {
        height: 40px;
        padding: 10px 5px 10px 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: var(--grey-light-2);
        border: 1px solid var(--grey-light-4);
        border-radius: 4px 4px 0 0;
    }

        .terms-list .list-header .list-header-label[term-list-view] {
            color: var(--grey-3);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 14px;
        }

    .terms-list .list[term-list-view] {
        flex: 1 1 auto;
        padding: 0 8px;
    }

/* /Pages/Admin/SchoolYears/Views/TermList/TermListItem/TermListItem.razor.rz.scp.css */
.item[term-list-item-view] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .item:not(:last-of-type)[term-list-item-view] {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

.item-class[term-list-item-view] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-duration) ease 0s;
}

    .item-class .field-check[term-list-item-view] {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .item-class.state--disabled[term-list-item-view] {
        pointer-events: none;
    }

        .item-class.state--disabled .checkmark[term-list-item-view] {
            opacity: 0;
        }

    .item-class:hover[term-list-item-view], .item-class:focus[term-list-item-view] {
        background: var(--alpha-dark-1);
    }

    .item-class .field-check .checkmark[term-list-item-view] {
        top: 0.2em;
        transform: none;
    }


.layout--light .list-select-classes .list-main-header[term-list-item-view] {
    background: var(--grey-light-1);
}

.layout--dark .list-select-classes .list-main[term-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .list-select-classes .list-main-header[term-list-item-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .item-class:hover[term-list-item-view], .layout--dark .item-class:focus[term-list-item-view] {
    background: var(--alpha-light-1);
}
/* /Pages/Admin/SchoolYears/Views/TimeScheduleTab/TimeScheduleTab.razor.rz.scp.css */
[time-schedule-tab-view] .new-time-schedule-button {
    max-height: 32px;
}
/* /Pages/Admin/UsersManagement/Administrators/Page/Administrators.razor.rz.scp.css */
.header-container[administrators-page] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[administrators-page] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

    .users-table-toolbar[administrators-page]  .btn {
        height: 39px;
    }

.search-input-container[administrators-page]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

    .search-input-container[administrators-page]  .search--small .search-field input {
        height: 39px;
        background: #fff;
        border: 1px solid var(--grey-light-3);
    }
/* /Pages/Admin/UsersManagement/Common/StudentFilter/StudentFilter.razor.rz.scp.css */
.student-filter-container[b-yz3rzzutph] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    overflow: auto;
}

.student-filter-container[b-yz3rzzutph]  .field-menu .menu-header {
    min-width: max-content;
}

/* 
    NOTE: This is a workaround to prevent unwanted transitions on dropdowns.
*/
[b-yz3rzzutph] .menu-list {
    transition: opacity var(--transition-duration) ease 0s !important;
}

[b-yz3rzzutph] .dropdown .dropdown-body {
    transition: opacity var(--transition-duration) ease 0s !important;
}

[b-yz3rzzutph] .field-menu .option,
[b-yz3rzzutph] .menu .option {
    transition: opacity var(--transition-duration) ease 0s !important;
}
/* /Pages/Admin/UsersManagement/Common/UsersTable/UsersTable.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1 General */
.table[administrator-users-page] {
    width: 100%;
    font-size: 0.875rem;
}

    .table th[administrator-users-page], .table td[administrator-users-page] {
        position: relative;
        vertical-align: inherit;
    }

    .table th[administrator-users-page] {
        background: var(--alpha-dark-1);
    }

    .table [rowspan][administrator-users-page] {
        vertical-align: top;
    }

    .table .tr--highlight th[administrator-users-page] {
        background: var(--alpha-dark-2);
    }

    .table .tr--highlight td[administrator-users-page] {
        background: var(--alpha-dark-1);
    }

    .table .tr--thin > *[administrator-users-page] {
        padding-top: 4px;
        padding-bottom: 4px;
        height: auto;
    }

    .table .tr--layout[administrator-users-page] {
        padding: 0;
        height: 0;
    }

        .table .tr--layout th[administrator-users-page], .table .tr--layout td[administrator-users-page] {
            padding: 0;
            height: 0;
            border: 0;
        }

    .table .tr--link[administrator-users-page],
    .table .td--link[administrator-users-page] {
        cursor: pointer;
        transition: all var(--transition-duration) ease 0s;
    }

        .table .tr--link:hover[administrator-users-page], .table .tr--link:focus[administrator-users-page], .table .tr--link:active[administrator-users-page],
        .table .td--link:hover[administrator-users-page],
        .table .td--link:focus[administrator-users-page],
        .table .td--link:active[administrator-users-page] {
            background-color: var(--alpha-dark-1);
        }

    .table .th--sticky[administrator-users-page] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

        .table .th--sticky[administrator-users-page]::before, .table .th--sticky[administrator-users-page]::after {
            content: "";
            position: absolute;
            display: block;
        }

        .table .th--sticky.th--sticky-top[administrator-users-page] {
            top: 0;
        }

            .table .th--sticky.th--sticky-top[administrator-users-page]::before, .table .th--sticky.th--sticky-top[administrator-users-page]::after {
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom-width: inherit;
                border-bottom-style: inherit;
                border-bottom-color: inherit;
            }

            .table .th--sticky.th--sticky-top[administrator-users-page]::before {
                height: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-top[administrator-users-page]::after {
                height: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-left[administrator-users-page] {
            left: 0;
        }

            .table .th--sticky.th--sticky-left[administrator-users-page]::before, .table .th--sticky.th--sticky-left[administrator-users-page]::after {
                right: -1px;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-left[administrator-users-page]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-left[administrator-users-page]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-right[administrator-users-page] {
            right: 0;
        }

            .table .th--sticky.th--sticky-right[administrator-users-page]::before, .table .th--sticky.th--sticky-right[administrator-users-page]::after {
                left: 0;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-right[administrator-users-page]::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-right[administrator-users-page]::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-top-left[administrator-users-page], .table .th--sticky.th--sticky-top-right[administrator-users-page] {
            top: 0;
            z-index: 4;
        }

            .table .th--sticky.th--sticky-top-left > *[administrator-users-page], .table .th--sticky.th--sticky-top-right > *[administrator-users-page] {
                position: relative;
                z-index: 1;
            }

            .table .th--sticky.th--sticky-top-left[administrator-users-page]::before, .table .th--sticky.th--sticky-top-left[administrator-users-page]::after, .table .th--sticky.th--sticky-top-right[administrator-users-page]::before, .table .th--sticky.th--sticky-top-right[administrator-users-page]::after {
                filter: blur(1px);
                background: rgba(0, 0, 0, 0.15);
            }

            .table .th--sticky.th--sticky-top-left[administrator-users-page]::before, .table .th--sticky.th--sticky-top-right[administrator-users-page]::before {
                top: 0;
                height: 100%;
                width: 1px;
            }

            .table .th--sticky.th--sticky-top-left[administrator-users-page]::after, .table .th--sticky.th--sticky-top-right[administrator-users-page]::after {
                bottom: -2px;
                left: 0;
                height: 1px;
                width: 100%;
            }

        .table .th--sticky.th--sticky-top-left[administrator-users-page] {
            left: 0;
        }

            .table .th--sticky.th--sticky-top-left[administrator-users-page]::before {
                left: 100%;
            }

        .table .th--sticky.th--sticky-top-right[administrator-users-page] {
            right: 0;
        }

            .table .th--sticky.th--sticky-top-right[administrator-users-page]::before {
                right: 100%;
            }

    .table .th--scroll-border-fix[administrator-users-page] {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + (2 * 1px));
        height: calc(100% + (2 * 1px));
        border: inherit;
    }

    .table .th--highlight[administrator-users-page] {
        color: var(--green);
        background: #f4fcf9;
        border: 1px solid #a8d7c4;
        z-index: 2;
    }

        .table .th--highlight > *[administrator-users-page] {
            color: inherit !important;
        }

    .table .th--clean[administrator-users-page] {
        padding: 0;
        border: none;
        background: transparent;
    }

        .table .th--clean.th--sticky[administrator-users-page]::before, .table .th--clean.th--sticky[administrator-users-page]::after {
            content: none;
        }

    .table .td--sticky[administrator-users-page] {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
    }

        .table .td--sticky.td--sticky-left[administrator-users-page] {
            left: 0;
        }

        .table .td--sticky.td--sticky-right[administrator-users-page] {
            right: 0;
        }

    .table .td--pseudo-border[administrator-users-page] {
        position: relative;
    }

        .table .td--pseudo-border[administrator-users-page]::before, .table .td--pseudo-border[administrator-users-page]::after {
            position: absolute;
            content: "";
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

        .table .td--pseudo-border[administrator-users-page]::before {
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }

        .table .td--pseudo-border[administrator-users-page]::after {
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
        }

    .table .table--cell-spacer[administrator-users-page] {
        width: 100%;
        background: transparent;
        border: none;
    }

        .table .table--cell-spacer[administrator-users-page]::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

    .table .table--cell-pattern[administrator-users-page] {
        position: relative;
    }

        .table .table--cell-pattern.th--sticky[administrator-users-page] {
            position: -webkit-sticky;
            position: sticky;
            background: transparent !important;
        }

            .table .table--cell-pattern.th--sticky .pattern[administrator-users-page] {
                left: 0;
                width: 100%;
                height: 100%;
            }

            .table .table--cell-pattern.th--sticky[administrator-users-page]::before, .table .table--cell-pattern.th--sticky[administrator-users-page]::after {
                content: none;
            }

        .table .table--cell-pattern .pattern[administrator-users-page] {
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + (2 * 1px));
            height: calc(100% + (2 * 1px));
            background-repeat: repeat;
            background-size: 45px;
            background-color: #ffffff;
        }

    .table .th--weekend[administrator-users-page] {
        background: var(--grey-light-1) !important;
    }

    .table .td--weekend[administrator-users-page] {
        background: rgba(0, 0, 0, 0.025) !important;
    }

        .table .td--weekend .pattern[administrator-users-page] {
            background-color: #ffffff;
        }

    .table .tr--weekend th .pattern[administrator-users-page], .table .tr--weekend td .pattern[administrator-users-page] {
        background-color: var(--alpha-dark-1);
    }

    .table .tr--weekend th[administrator-users-page] {
        background: #efefef !important;
    }

    .table .tr--weekend td[administrator-users-page] {
        background-color: rgba(0, 0, 0, 0.025) !important;
    }

.layout--light .table th[administrator-users-page] {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover[administrator-users-page], .layout--dark .table .tr--link:focus[administrator-users-page], .layout--dark .table .tr--link:active[administrator-users-page],
.layout--dark .table .td--link:hover[administrator-users-page],
.layout--dark .table .td--link:focus[administrator-users-page],
.layout--dark .table .td--link:active[administrator-users-page] {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky[administrator-users-page] {
    background: var(--grey-dark-3);
}

    .layout--dark .table .th--sticky.th--sticky-top[administrator-users-page]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .layout--dark .table .th--sticky.th--sticky-top-left[administrator-users-page]::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

.layout--dark .table .th--highlight[administrator-users-page] {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend[administrator-users-page] {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend[administrator-users-page] {
    background: rgba(255, 255, 255, 0.015) !important;
}

    .layout--dark .table .td--weekend .pattern[administrator-users-page] {
        background-color: #212121;
    }

.layout--dark .table .td--pseudo-border[administrator-users-page]::before, .layout--dark .table .td--pseudo-border[administrator-users-page]::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer[administrator-users-page]::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern[administrator-users-page] {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern[administrator-users-page], .layout--dark .tr--weekend td .pattern[administrator-users-page] {
    background-color: #212121;
}

.layout--dark .tr--weekend th[administrator-users-page] {
    background: #363636 !important;
}

.layout--dark .tr--weekend td[administrator-users-page] {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */

.table-wrapper.table-wrapper--flex[administrator-users-page] {
    display: flex;
    flex-direction: column;
}

    .table-wrapper.table-wrapper--flex .table-wrapper-body[administrator-users-page] {
        flex: 0 1 auto;
        min-height: 0;
    }

.table-wrapper.table-wrapper--card .table-wrapper-card[administrator-users-page] {
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    background: rgba(0, 0, 0, 0.025);
    border-radius: 4px;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .card[administrator-users-page] {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.025);
    border: none;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .scroll[administrator-users-page] {
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.table-wrapper .table-wrapper-header > *[administrator-users-page] {
    margin-bottom: 10px;
}

.table-wrapper .table-wrapper-header[data-view] .context-options[administrator-users-page] {
    display: none;
}

.table-wrapper .table-wrapper-header[data-view=context-options] .context-options[administrator-users-page] {
    display: block;
}

    .table-wrapper .table-wrapper-header[data-view=context-options] .context-options + *[administrator-users-page] {
        margin-left: 10px;
    }

.table-wrapper .table-wrapper-header .row[administrator-users-page] {
    align-items: center;
}

    .table-wrapper .table-wrapper-header .row > *[administrator-users-page] {
        width: auto;
        flex: 1 1 auto;
    }

.table-wrapper .table-wrapper-header .field-menu[administrator-users-page] {
    min-width: 160px;
}

.table-wrapper .table-wrapper-header .search[administrator-users-page] {
    max-width: 100%;
    width: 320px;
}

.table-wrapper .table-wrapper-body[data-view] .table-empty[administrator-users-page] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td[administrator-users-page],
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th[administrator-users-page] {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top[administrator-users-page]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left[administrator-users-page]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right[administrator-users-page]::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty[administrator-users-page] {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer[administrator-users-page] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .card[administrator-users-page] {
    height: auto;
}

.table-wrapper .table-wrapper-body .card[administrator-users-page],
.table-wrapper .table-wrapper-body .scroll[administrator-users-page] {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .table-wrapper-body .card[administrator-users-page] {
    background: #ffffff;
    height: 100%;
}

.table-wrapper .table-wrapper-footer > *[administrator-users-page] {
    padding: 10px 0 0;
}

.table-wrapper .table thead tr[administrator-users-page] {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th[administrator-users-page] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.table-wrapper .table tbody tr:last-child th[administrator-users-page],
.table-wrapper .table tbody tr:last-child td[administrator-users-page] {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky[administrator-users-page] {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child[administrator-users-page], .table-wrapper .table tr > *:last-child[administrator-users-page] {
    min-width: 40px;
}

.table-wrapper .table th[administrator-users-page],
.table-wrapper .table td[administrator-users-page] {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th[administrator-users-page] {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table .tr--nowrap > *[administrator-users-page] {
    white-space: nowrap;
}

.table-wrapper .table .tr--link td[administrator-users-page] {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky[administrator-users-page] {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top[administrator-users-page], .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-users-page], .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-users-page] {
    border-bottom: none;
}

    .table-wrapper .table .th--sticky.th--sticky-top[administrator-users-page]::before, .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-users-page]::before, .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-users-page]::before {
        content: none;
    }

    .table-wrapper .table .th--sticky.th--sticky-top[administrator-users-page]::after, .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-users-page]::after, .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-users-page]::after {
        height: 1px;
        bottom: 0px;
        background: var(--grey-light-3);
        filter: none;
        box-shadow: none;
    }

.table-wrapper .table .th--sticky.th--sticky-top[administrator-users-page] {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left[administrator-users-page], .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-users-page] {
    z-index: 5;
}

.table-wrapper .table .th--highlight[administrator-users-page] {
    color: var(--green);
    background: #f4fcf9;
    border: none;
}

    .table-wrapper .table .th--highlight[administrator-users-page]::before {
        width: 100%;
        height: 100%;
        background: transparent;
    }

.table-wrapper .table .th--active[administrator-users-page] {
    color: var(--green);
}

    .table-wrapper .table .th--active.th--sort .sort[administrator-users-page] {
        opacity: 1;
    }

.table-wrapper .table .th--sort[administrator-users-page] {
    padding: 5px 20px 5px 12px;
    cursor: pointer;
}

    .table-wrapper .table .th--sort:hover[administrator-users-page] {
        background: #f0f0f0;
    }

        .table-wrapper .table .th--sort:hover .sort[administrator-users-page] {
            opacity: 1;
        }

    .table-wrapper .table .th--sort.sort--top .icon .sort-bottom[administrator-users-page] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort.sort--bottom .icon .sort-top[administrator-users-page] {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort .sort[administrator-users-page] {
        position: absolute;
        width: 6px;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

.table-wrapper .table .th--check[administrator-users-page] {
    cursor: pointer;
}

    .table-wrapper .table .th--check:hover[administrator-users-page] {
        background: #f0f0f0;
    }

.table-wrapper .table .td--sticky[administrator-users-page] {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu[administrator-users-page] {
    position: absolute;
    top: 10px;
    right: 4px;
}

    .table-wrapper .table .td--row-menu .menu .btn .icon[administrator-users-page] {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.table-wrapper .table .field-check[administrator-users-page] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .table-wrapper .table .field-check .checkmark[administrator-users-page] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.table-wrapper .table-empty[administrator-users-page] {
    padding: 30px;
    text-align: center;
}

.layout--dark .table-wrapper[administrator-users-page] {
    border-color: var(--alpha-light-2);
}

    .layout--dark .table-wrapper.table-wrapper--card .card[administrator-users-page] {
        background: rgba(255, 255, 255, 0.025);
    }

    .layout--dark .table-wrapper.table-wrapper--card .scroll[administrator-users-page] {
        background: var(--grey-dark-4);
        border-color: var(--alpha-light-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    .layout--dark .table-wrapper .table thead th:hover[administrator-users-page] {
        background: #383838;
    }

    .layout--dark .table-wrapper .table th[administrator-users-page],
    .layout--dark .table-wrapper .table td[administrator-users-page] {
        border-bottom-color: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .tr--link:hover .td--sticky[administrator-users-page] {
        background: #2c2c2c;
    }

    .layout--dark .table-wrapper .table .th--sticky.th--sticky-top[administrator-users-page]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left[administrator-users-page]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right[administrator-users-page]::after {
        background: var(--alpha-light-2);
    }

    .layout--dark .table-wrapper .table .td--sticky[administrator-users-page] {
        background: var(--grey-dark-4);
    }

    .layout--dark .table-wrapper .card[administrator-users-page] {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-4);
    }

.layout--dark .card[administrator-users-page] {
    background: var(--grey-dark-4);
}
/*# sourceMappingURL=theme.css.map */

.search-wrapper[administrator-users-page] {
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.search-wrapper[administrator-users-page]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: 0 0 6px 0;
}
.search-wrapper[administrator-users-page]  .search--small .search-field input {
    height: 36px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}
.search-wrapper[administrator-users-page]  .btn {
    height: 36px;
}

[administrator-users-page] .card--profile {
    height: 100% !important;
}

.spinner-wrapper[administrator-users-page] {
    height: 100vh !important;
    border: none;
}
.spinner-container[administrator-users-page] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Admin/UsersManagement/Parents/Page/Parents.razor.rz.scp.css */
.header-container[parents-page] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[parents-page] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

    .users-table-toolbar[parents-page]  .btn {
        height: 39px;
    }

.search-input-container[parents-page]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

    .search-input-container[parents-page]  .search--small .search-field input {
        height: 39px;
        background: #fff;
        border: 1px solid var(--grey-light-3);
    }
/* /Pages/Admin/UsersManagement/StudentGroups/Components/EditStudentGroupDialog/EditStudentGroupDialog.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/StudentGroups/Components/NewStudentGroupDialog/NewStudentGroupDialog.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/StudentGroups/Components/StudentGroupsTable/StudentGroupsTable.razor.rz.scp.css */
.search-wrapper[b-kc4o1f81l3] {
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.search-wrapper[b-kc4o1f81l3]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: 0 0 6px 0;
}
.search-wrapper[b-kc4o1f81l3]  .search--small .search-field input {
    height: 36px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}
.search-wrapper[b-kc4o1f81l3]  .btn {
    height: 36px;
}

[b-kc4o1f81l3] .card--profile {
    height: 100% !important;
}

.spinner-wrapper[b-kc4o1f81l3] {
    height: 100vh !important;
    border: none;
}
.spinner-container[b-kc4o1f81l3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-kc4o1f81l3] .no-records-td {
    background: var(--grey-light-2) !important;
}

[b-kc4o1f81l3] .action-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

[b-kc4o1f81l3] .action-container button {
    border: none;
}

[b-kc4o1f81l3] .action-container button:not(:hover) {
    background-color: inherit;
}

[b-kc4o1f81l3] .action-container button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[b-kc4o1f81l3] .action-container button svg {
    width: 16px;
    height: 16px;
    color: #888888;
}
[b-kc4o1f81l3] .action-container button:hover svg {
    color: #888888;
}

.tooltip[b-kc4o1f81l3] {
    border-radius: 4px;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: var(--grey-dark-3);
}

.tooltip .item[b-kc4o1f81l3] {
    color: var(--grey-light-2);
    font-weight: 400;
    font-size: 12px;
    line-height: 16.34px;
}

[b-kc4o1f81l3] .students-count-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-kc4o1f81l3] .students-count-cell button {
    margin-left: auto;
}
/* /Pages/Admin/UsersManagement/StudentGroups/Components/ViewCourseSectionMembersDialog/ViewCourseSectionMembersDialog.razor.rz.scp.css */
.body-content[b-eseg0nnahb] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-course-section-members-dialog[b-eseg0nnahb] .dialog-body {
    background: var(--grey-light-1);
}

.body-content[b-eseg0nnahb]  .course-section-members-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.body-content[b-eseg0nnahb]  .spinner-profile-height {
    height: 100% !important;
    min-height: 50vh;
}

.header[b-eseg0nnahb] {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
}

.course-section-members-header[b-eseg0nnahb] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem 0 1rem;
}
    .course-section-members-header .course-section-members-header-left[b-eseg0nnahb] {
        width: 100%;
        min-width: 0;
        max-width: 320px;
        display: flex;
        align-items: center;
        gap: 0.125rem;
        padding-left: 0.25rem;
        color: #888888;
        font-size: 0.875rem;
    }
        .course-section-members-header .course-section-members-header-left .course-section-members-header-icon[b-eseg0nnahb] {
            width: 1rem;
            height: 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
            .course-section-members-header .course-section-members-header-left .course-section-members-header-icon svg[b-eseg0nnahb] {
                width: 1rem;
                height: 1rem;
            }
    .course-section-members-header .course-section-members-header-right[b-eseg0nnahb] {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

.view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 0.3125rem 1rem 0.3125rem 0.3125rem;
    border-radius: 0.25rem;
    background-color: white;
    overflow: hidden;
}
    .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-avatar-container {
        width: 30px;
        height: 30px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-name-role-container {
        width: 100%;
        min-width: 25%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        gap: 0.125rem;
    }
        .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-name-role-container .sgm-name-value {
            line-height: 19.07px;
            font-size: 0.875rem;
            font-weight: 400;
            color: #323232;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-name-role-container .sgm-role-value {
            line-height: 16.8px;
            font-size: 0.75rem;
            font-weight: 400;
            color: #888888;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-id-container,
    .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-grade-level-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

        .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-id-container .sgm-id-label,
        .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-grade-level-container .sgm-grade-level-label {
            line-height: 16.8px;
            font-size: 0.75rem;
            font-weight: 400;
            color: #888888;
            white-space: nowrap;
        }

        .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-id-container .sgm-id-value,
        .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-grade-level-container .sgm-grade-level-value {
            line-height: 16.8px;
            font-size: 0.75rem;
            font-weight: 400;
            color: #616161;
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .view-course-section-members-dialog[b-eseg0nnahb]  .course-section-member-container .sgm-separator {
        width: 1px;
        height: 12px;
        background-color: #E1E1E1;
    }
/* /Pages/Admin/UsersManagement/StudentGroups/Components/ViewStudentGroupMembersDialog/ViewStudentGroupMembersDialog.razor.rz.scp.css */
.body-content[b-hfmg5o8jj6] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-student-group-members-dialog[b-hfmg5o8jj6] .dialog-body {
    background: var(--grey-light-1);
}

.body-content[b-hfmg5o8jj6]  .student-group-members-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.body-content[b-hfmg5o8jj6]  .spinner-profile-height {
    height: 100% !important;
    min-height: 50vh;
}

.header[b-hfmg5o8jj6] {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
}

.student-group-members-header[b-hfmg5o8jj6] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem 0 1rem;
}
    .student-group-members-header .student-group-members-header-left[b-hfmg5o8jj6] {
        width: 100%;
        min-width: 0;
        max-width: 320px;
    
        display: flex;
        align-items: center;
        gap: 0.125rem;
        padding-left: 0.25rem;
        color: #888888;
        font-size: 0.875rem;
    }
        .student-group-members-header .student-group-members-header-left .student-group-members-header-icon[b-hfmg5o8jj6] {
            width: 1rem;
            height: 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
            .student-group-members-header .student-group-members-header-left .student-group-members-header-icon svg[b-hfmg5o8jj6] {
                width: 1rem;
                height: 1rem;
            }
    .student-group-members-header .student-group-members-header-right[b-hfmg5o8jj6] {
        min-width: 0;
    
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
.view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 0.3125rem 1rem 0.3125rem 0.3125rem;
    border-radius: 0.25rem;
    background-color: white;
    overflow: hidden;
}
    .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-avatar-container {
        width: 30px;
        height: 30px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-name-role-container {
        width: 100%;
        min-width: 25%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        gap: 0.125rem;
    }
        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-name-role-container .sgm-name-value {
            line-height: 19.07px;
            font-size: 0.875rem;
            font-weight: 400;
            color: #323232;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-name-role-container .sgm-role-value {
            line-height: 16.8px;
            font-size: 0.75rem;
            font-weight: 400;
            color: #888888;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    
    .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-id-container,
    .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-grade-level-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-id-container .sgm-id-label,
        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-grade-level-container .sgm-grade-level-label {
            line-height: 16.8px;
            font-size: 0.75rem;
            font-weight: 400;
            color: #888888;
            white-space: nowrap;
        }

        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-id-container .sgm-id-value,
        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-grade-level-container .sgm-grade-level-value {
            line-height: 16.8px;
            font-size: 0.75rem;
            font-weight: 400;
            color: #616161;
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .view-student-group-members-dialog[b-hfmg5o8jj6]  .student-group-member-container .sgm-separator {
            width: 1px;
            height: 12px;
            background-color: #E1E1E1;
        }
/* /Pages/Admin/UsersManagement/StudentGroups/Page/StudentGroups.razor.rz.scp.css */
.header-container[b-a8g47kjcnk] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[b-a8g47kjcnk] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.users-table-toolbar[b-a8g47kjcnk]  .btn {
    height: 39px;
}

.search-input-container[b-a8g47kjcnk]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

.search-input-container[b-a8g47kjcnk]  .search--small .search-field input {
    height: 39px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.users-table-filter[b-a8g47kjcnk] {
    margin-right: 0.5rem;
}

[b-a8g47kjcnk] .filter-drop-down {
    min-width: 190px;
}

[b-a8g47kjcnk] .filter-drop-down .{}
/* /Pages/Admin/UsersManagement/StudentGroups/Views/ClassroomCard/TeacherCard.razor.rz.scp.css */
.teacher-card[b-dqjzpspej2] {
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
    border: 1px solid #E1E1E1;
    border-radius: 0.25rem;
    background-color: white;
    user-select: none;
}
    .teacher-card .teacher-badge[b-dqjzpspej2] {
        width: 36px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 6px;
    }
    .teacher-card .teacher-details[b-dqjzpspej2] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
        .teacher-card .teacher-details .teacher-name[b-dqjzpspej2] {
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 19.07px;
            color: #414141;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .teacher-card .teacher-details .teacher-role-name[b-dqjzpspej2] {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 16.34px;
            color: #A4A4A4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    .teacher-card .remove-button[b-dqjzpspej2] {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        margin-left: auto;
        border: none;
        background: none;
        color: #888888;
        font-size: 1.5rem;
        cursor: pointer;
        transition: background-color var(--transition-duration) ease 0s, color var(--transition-duration) ease 0s;
    }
        .teacher-card .remove-button:hover[b-dqjzpspej2] {
            color: #323232;
            background-color: var(--grey-light-1);
        }
/* /Pages/Admin/UsersManagement/StudentGroups/Views/ClassroomCard/TeacherInputField.razor.rz.scp.css */
.field-group[b-d5tvst5bs7]  button {
    height: 42px;
    width: 100%;
}
    .field-group[b-d5tvst5bs7]  button svg {
        width: 0.75rem;
        height: 0.75rem;
    }
/* /Pages/Admin/UsersManagement/StudentGroups/Views/StudentGroupDialog/StudentGroupDialog.razor.rz.scp.css */
.student-group-dialog-container[b-bdsoy9vjjb] {
    display: flex;
}
    .student-group-dialog-container[b-bdsoy9vjjb] .dialog {
        height: 90vh;
        min-height: 600px;
    }
    .student-group-dialog-container[b-bdsoy9vjjb] .dialog-body {
        padding: 0;
    }

.student-group-dialog-body-content[b-bdsoy9vjjb] {
    width: 100%;
    height: 100%;
    display: flex;
}
    .student-group-dialog-body-content .student-group-dialog-body-content-left[b-bdsoy9vjjb] {
        width: 288px;
        min-width: 288px;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .student-group-dialog-body-content .student-group-dialog-body-content-right[b-bdsoy9vjjb] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
/* /Pages/Admin/UsersManagement/StudentGroups/Views/StudentGroupProperties/StudentGroupProperties.razor.rz.scp.css */
.student-group-properties-container[b-1sxm37e4fu] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    gap: 5px;
    padding: 10px 20px;
    border-right: 1px solid var(--grey-light-4);
    background: var(--grey-light-1);
}
    .student-group-properties-container .label--title[b-1sxm37e4fu] {
        display: flex;
        align-items: center;
        align-self: stretch;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--grey-light-4);
    }

/* When the first option is the selected one, make the header text lighter */
.student-group-properties-container[b-1sxm37e4fu]  .field-menu:has(.menu-list > li:first-child .option.field-option-checked) .menu-header .text-overflow {
    color: var(--grey-1);
}
.student-group-properties-container[b-1sxm37e4fu]  .field-menu .menu-list > li:first-child .option {
    color: var(--grey-1);
}
    
/* 
    NOTE: This is a workaround to prevent unwanted transitions on dropdowns.
*/
[b-1sxm37e4fu] .menu-list {
    transition: opacity var(--transition-duration) ease 0s !important;
}

[b-1sxm37e4fu] .dropdown .dropdown-body {
    transition: opacity var(--transition-duration) ease 0s !important;
}

[b-1sxm37e4fu] .field-menu .option,
[b-1sxm37e4fu] .menu .option {
    transition: opacity var(--transition-duration) ease 0s !important;
}
/* /Pages/Admin/UsersManagement/Students/Page/Students.razor.rz.scp.css */
.header-container[students-page] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[students-page] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

    .users-table-toolbar[students-page]  .btn {
        height: 39px;
    }
    
.search-input-container[students-page] {
    width: 15rem;
}

.search-input-container[students-page]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

    .search-input-container[students-page]  .search--small .search-field input {
        height: 39px;
        background: #fff;
        border: 1px solid var(--grey-light-3);
    }
/* /Pages/Admin/UsersManagement/Teachers/Page/Teachers.razor.rz.scp.css */
.header-container[teachers-page] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[teachers-page] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

    .users-table-toolbar[teachers-page]  .btn {
        height: 39px;
    }

.search-input-container[teachers-page]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

    .search-input-container[teachers-page]  .search--small .search-field input {
        height: 39px;
        background: #fff;
        border: 1px solid var(--grey-light-3);
    }
/* /Pages/Admin/UsersManagement/Users/Components/ImportUsersDialog/ImportUsersDialog.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/Users/Components/ImportUsersDialog/Views/Main/ImportMain.razor.rz.scp.css */
.users-import[import-main-view] {
    padding: 10px;
}

    .users-import .view-file[import-main-view] {
        min-height: 60vh;
        height: 100%;
        max-height: 80vh;
    }
/* /Pages/Admin/UsersManagement/Users/Components/ImportUsersDialog/Views/Summary/ImportSummary.razor.rz.scp.css */
.users-import[b-ufu3ktpalf] {
    padding: 10px;
}

    .users-import .view-summary[b-ufu3ktpalf] {
        height: 100%;
    }

    .users-import-summary > .card[b-ufu3ktpalf] {
        padding: 5px;
        background: rgba(0, 0, 0, 0.05);
    }

    .users-import-summary .card[b-ufu3ktpalf] {
        border: none;
    }

    .row-roles[b-ufu3ktpalf] {
        height: 100%;
    }

        .row-roles [class^=col][b-ufu3ktpalf] {
            height: 50%;
            min-width: 50%;
            flex: 1 1 auto;
            flex-basis: 0;
        }
/* /Pages/Admin/UsersManagement/Users/Components/ImportUsersDialog/Views/SummaryTable/ImportSummaryTable.razor.rz.scp.css */
.users-table-import-records[import-summary-table-view] {
    flex: 1 1 auto;
    min-height: 0;
    height: 40vh;
}

[import-summary-table-view] .table-wrapper-body {
    height: 100%;
}
/* /Pages/Admin/UsersManagement/Users/Components/ImportUsersDialog/Views/SummaryTile/ImportSummaryTileOverall.razor.rz.scp.css */
.users-import-summary-tile[import-summary-tile-overall-view],
.users-import-summary-tile-role[import-summary-tile-overall-view] {
    line-height: 1.2;
    height: 100%;
}

    .users-import-summary-tile .card[import-summary-tile-overall-view],
    .users-import-summary-tile-role .card[import-summary-tile-overall-view] {
        height: 100%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }

    .users-import-summary-tile .title[import-summary-tile-overall-view],
    .users-import-summary-tile-role .title[import-summary-tile-overall-view] {
        margin-bottom: 0;
    }

.users-import-summary-tile[import-summary-tile-overall-view] {
    text-align: center;
}

    .users-import-summary-tile[import-summary-tile-overall-view] .progress-circle {
        max-width: 65px;
        margin: auto;
    }

    .users-import-summary-tile .card[import-summary-tile-overall-view] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .users-import-summary-tile .card-body[import-summary-tile-overall-view] {
        margin: 15px 0 10px;
    }
/* /Pages/Admin/UsersManagement/Users/Components/ImportUsersDialog/Views/SummaryTile/ImportSummaryTileRole.razor.rz.scp.css */
.users-import-summary-tile[import-summary-tile-role-view],
.users-import-summary-tile-role[import-summary-tile-role-view] {
    line-height: 1.2;
    height: 100%;
}

    .users-import-summary-tile .card[import-summary-tile-role-view],
    .users-import-summary-tile-role .card[import-summary-tile-role-view] {
        height: 100%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }

    .users-import-summary-tile .title[import-summary-tile-role-view],
    .users-import-summary-tile-role .title[import-summary-tile-role-view] {
        margin-bottom: 0;
    }

.users-import-summary-tile-role[import-summary-tile-role-view] {
    display: flex;
    flex-direction: column;
}

    .users-import-summary-tile-role .card[import-summary-tile-role-view] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .users-import-summary-tile-role .card-header[import-summary-tile-role-view] {
        min-width: 36px;
    }
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/RegisterUserDialog.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* -----------
# ABSTRACT
----------- */
/* 1. MIXINS  */
/* 2. FUNCTIONS */
/** //////////////////////// Component Specific Styles ///////////////////////////////// */
/* ---------
# VIEWS
--------- */
/* 1. BUTTONS  */
/** 1.1 Base */
button[register-user-dialog-component],
input[type=submit][register-user-dialog-component],
input[type=button][register-user-dialog-component],
.btn[register-user-dialog-component] {
    font-size: 0.875rem;
    color: var(--grey-3);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1;
}

    button:hover[register-user-dialog-component], button.active[register-user-dialog-component],
    input[type=submit]:hover[register-user-dialog-component],
    input[type=submit].active[register-user-dialog-component],
    input[type=button]:hover[register-user-dialog-component],
    input[type=button].active[register-user-dialog-component],
    .btn:hover[register-user-dialog-component],
    .btn.active[register-user-dialog-component] {
        color: #ffffff;
        background: var(--green);
        border-color: transparent;
        outline: none;
    }

        button:hover .icon[register-user-dialog-component], button.active .icon[register-user-dialog-component],
        input[type=submit]:hover .icon[register-user-dialog-component],
        input[type=submit].active .icon[register-user-dialog-component],
        input[type=button]:hover .icon[register-user-dialog-component],
        input[type=button].active .icon[register-user-dialog-component],
        .btn:hover .icon[register-user-dialog-component],
        .btn.active .icon[register-user-dialog-component] {
            border-color: var(--green);
        }

    button.primary-color:hover[register-user-dialog-component], button.primary-color.active[register-user-dialog-component],
    input[type=submit].primary-color:hover[register-user-dialog-component],
    input[type=submit].primary-color.active[register-user-dialog-component],
    input[type=button].primary-color:hover[register-user-dialog-component],
    input[type=button].primary-color.active[register-user-dialog-component],
    .btn.primary-color:hover[register-user-dialog-component],
    .btn.primary-color.active[register-user-dialog-component] {
        color: #ffffff !important;
    }

    button .icon[register-user-dialog-component],
    input[type=submit] .icon[register-user-dialog-component],
    input[type=button] .icon[register-user-dialog-component],
    .btn .icon[register-user-dialog-component] {
        position: relative;
        top: 0;
        left: -0.25em;
        margin-right: 4px;
        display: inline-block;
        height: 1em;
        width: 1em;
        fill: currentColor;
        border-color: var(--grey-3);
        pointer-events: none;
    }

.layout--light button[register-user-dialog-component],
.layout--light input[type=submit][register-user-dialog-component],
.layout--light input[type=button][register-user-dialog-component], .layout--light.btn[register-user-dialog-component],
.layout--light .btn[register-user-dialog-component] {
    border-color: var(--grey-light-4);
    background: #ffffff;
}

    .layout--light button:hover[register-user-dialog-component], .layout--light button.active[register-user-dialog-component],
    .layout--light input[type=submit]:hover[register-user-dialog-component],
    .layout--light input[type=submit].active[register-user-dialog-component],
    .layout--light input[type=button]:hover[register-user-dialog-component],
    .layout--light input[type=button].active[register-user-dialog-component], .layout--light.btn:hover[register-user-dialog-component], .layout--light.btn.active[register-user-dialog-component],
    .layout--light .btn:hover[register-user-dialog-component],
    .layout--light .btn.active[register-user-dialog-component] {
        border-color: transparent;
        background: var(--green);
    }

.layout--light .btn--primary[register-user-dialog-component] {
    border-color: transparent;
    background: var(--green);
}

.layout--light .btn--notify[register-user-dialog-component]:before {
    border-color: var(--grey-light-1);
}

.layout--light .btn--link[register-user-dialog-component],
.layout--light .btn--text[register-user-dialog-component] {
    border-color: transparent;
    background: transparent;
}

    .layout--light .btn--text:hover[register-user-dialog-component], .layout--light .btn--text.active[register-user-dialog-component] {
        background: var(--alpha-dark-1);
    }

.layout--light .btn--light[register-user-dialog-component] {
    background: var(--grey-light-1);
}

.layout--light .btn--outline[register-user-dialog-component] {
    border-color: var(--green);
    background: transparent;
}

.layout--light .btn--disabled[register-user-dialog-component],
.layout--light .btn[disabled][register-user-dialog-component] {
    background: transparent;
    border-color: var(--grey-light-3);
}

    .layout--light .btn--disabled:hover[register-user-dialog-component],
    .layout--light .btn[disabled]:hover[register-user-dialog-component] {
        background: transparent;
        border-color: var(--grey-light-3);
    }

.layout--dark button[register-user-dialog-component],
.layout--dark input[type=submit][register-user-dialog-component],
.layout--dark input[type=button][register-user-dialog-component], .layout--dark.btn[register-user-dialog-component],
.layout--dark .btn[register-user-dialog-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark button:hover[register-user-dialog-component], .layout--dark button.active[register-user-dialog-component],
    .layout--dark input[type=submit]:hover[register-user-dialog-component],
    .layout--dark input[type=submit].active[register-user-dialog-component],
    .layout--dark input[type=button]:hover[register-user-dialog-component],
    .layout--dark input[type=button].active[register-user-dialog-component], .layout--dark.btn:hover[register-user-dialog-component], .layout--dark.btn.active[register-user-dialog-component],
    .layout--dark .btn:hover[register-user-dialog-component],
    .layout--dark .btn.active[register-user-dialog-component] {
        border-color: transparent;
        background: var(--green);
    }

        .layout--dark button:hover .icon[register-user-dialog-component], .layout--dark button.active .icon[register-user-dialog-component],
        .layout--dark input[type=submit]:hover .icon[register-user-dialog-component],
        .layout--dark input[type=submit].active .icon[register-user-dialog-component],
        .layout--dark input[type=button]:hover .icon[register-user-dialog-component],
        .layout--dark input[type=button].active .icon[register-user-dialog-component], .layout--dark.btn:hover .icon[register-user-dialog-component], .layout--dark.btn.active .icon[register-user-dialog-component],
        .layout--dark .btn:hover .icon[register-user-dialog-component],
        .layout--dark .btn.active .icon[register-user-dialog-component] {
            border-color: var(--green);
        }

    .layout--dark button .icon[register-user-dialog-component],
    .layout--dark input[type=submit] .icon[register-user-dialog-component],
    .layout--dark input[type=button] .icon[register-user-dialog-component], .layout--dark.btn .icon[register-user-dialog-component],
    .layout--dark .btn .icon[register-user-dialog-component] {
        border-color: var(--grey-3);
    }

.layout--dark .btn--primary[register-user-dialog-component] {
    border-color: transparent;
    background: var(--green);
}

.layout--dark .btn--notify[register-user-dialog-component]:before {
    border-color: var(--grey-dark-3);
}

.layout--dark .btn--link[register-user-dialog-component],
.layout--dark .btn--text[register-user-dialog-component] {
    border-color: transparent;
    background: transparent;
}

    .layout--dark .btn--text:hover[register-user-dialog-component], .layout--dark .btn--text.active[register-user-dialog-component] {
        background: var(--alpha-light-1);
    }

.layout--dark .btn--outline[register-user-dialog-component] {
    border-color: var(--green);
    background: transparent;
}

.layout--dark .btn--disabled[register-user-dialog-component],
.layout--dark .btn[disabled][register-user-dialog-component] {
    color: var(--grey-dark-2);
    background: transparent;
    border-color: var(--grey-dark-2);
}

    .layout--dark .btn--disabled:hover[register-user-dialog-component],
    .layout--dark .btn[disabled]:hover[register-user-dialog-component] {
        color: var(--grey-dark-2);
        background: transparent;
        border-color: var(--grey-dark-2);
    }

/** 1.1.1 Primary */
.btn--primary[register-user-dialog-component] {
    padding: 8px 12px;
    color: #ffffff;
    border-color: transparent;
    background: var(--green);
}

    .btn--primary:hover[register-user-dialog-component], .btn--primary.active[register-user-dialog-component] {
        opacity: 0.9;
    }

/** 1.1.2 Secondary */
.btn--secondary[register-user-dialog-component] {
    padding: 8px 12px;
    background: #ffffff;
}

    .btn--secondary.btn--link[register-user-dialog-component] {
        color: var(--grey-3);
    }

        .btn--secondary.btn--link:hover[register-user-dialog-component] {
            background: var(--alpha-dark-1);
        }

        .btn--secondary.btn--link[disabled][register-user-dialog-component] {
            border: none;
        }

.layout--dark .btn--secondary.btn--link:hover[register-user-dialog-component] {
    background: var(--alpha-light-1);
}

/** 1.1.3 Ternary */
.btn--ternary[register-user-dialog-component] {
    background: var(--alpha-dark-1);
}

    .btn--ternary:hover[register-user-dialog-component], .btn--ternary:focus[register-user-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .btn--ternary.active[register-user-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--light .btn--ternary[register-user-dialog-component] {
    background: var(--alpha-dark-1);
}

    .layout--light .btn--ternary:hover[register-user-dialog-component], .layout--light .btn--ternary:focus[register-user-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .layout--light .btn--ternary.active[register-user-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--dark .btn--ternary[register-user-dialog-component] {
    background: var(--grey-dark-2);
}

    .layout--dark .btn--ternary:hover[register-user-dialog-component] {
        color: var(--grey-light-4);
        background: var(--grey-dark-1);
    }

    .layout--dark .btn--ternary.active[register-user-dialog-component] {
        color: var(--grey-3);
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-4);
    }

/** 1.1.4 Modifiers */
.btn--notify[register-user-dialog-component] {
    position: relative;
}

    .btn--notify[register-user-dialog-component]:before {
        position: absolute;
        top: 4px;
        right: 4px;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background: var(--green);
        z-index: 1;
    }

.btn--light[register-user-dialog-component] {
    background: var(--grey-light-1);
    border-color: var(--grey-light-4);
}

.btn--dark[register-user-dialog-component] {
    background: var(--grey-dark-2);
    border-color: var(--grey-dark-1);
}

.btn--outline[register-user-dialog-component] {
    color: var(--green);
    background: transparent;
    border-color: var(--green);
}

.btn--rounded[register-user-dialog-component] {
    padding: 8px 25px;
    border-radius: 30px;
}

.btn--link[register-user-dialog-component] {
    color: var(--green);
    background: transparent;
    border-color: transparent;
}

.btn--text[register-user-dialog-component] {
    color: var(--grey-3);
    background: transparent;
    border-color: transparent;
}

    .btn--text:hover[register-user-dialog-component], .btn--text.active[register-user-dialog-component] {
        color: var(--green);
        background: var(--alpha-dark-1);
    }

    .btn--text[disabled][register-user-dialog-component] {
        border: none;
    }

.btn--circle[register-user-dialog-component],
.btn--square[register-user-dialog-component] {
    position: relative;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

    .btn--circle .icon[register-user-dialog-component],
    .btn--square .icon[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.btn--circle[register-user-dialog-component] {
    border-radius: 50%;
}

.btn--square[register-user-dialog-component] {
    border-radius: 4px;
}

.btn--disabled[register-user-dialog-component],
.btn[disabled][register-user-dialog-component] {
    color: var(--grey-light-4);
    background: transparent;
    border-color: var(--grey-light-3);
    cursor: not-allowed;
}

    .btn--disabled:hover[register-user-dialog-component],
    .btn[disabled]:hover[register-user-dialog-component] {
        color: var(--grey-light-4);
        background: transparent;
        border-color: var(--grey-light-3);
    }

.btn-inner[register-user-dialog-component] {
    display: inline-block;
    padding: 3px;
    background: var(--grey-light-3);
    line-height: 0;
}

    .btn-inner.btn-inner--circle[register-user-dialog-component] {
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

        .btn-inner.btn-inner--circle .btn[register-user-dialog-component] {
            width: 24px;
            height: 24px;
        }

    .btn-inner .btn[register-user-dialog-component] {
        border: none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

.btn--success[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--success:hover[register-user-dialog-component], .btn--success.active[register-user-dialog-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--error[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--error:hover[register-user-dialog-component], .btn--error.active[register-user-dialog-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--activity[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-3) !important;
}

    .btn--activity:hover[register-user-dialog-component], .btn--activity.active[register-user-dialog-component] {
        background: var(--grey-3) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lesson[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--lesson:hover[register-user-dialog-component], .btn--lesson.active[register-user-dialog-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--test[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--test:hover[register-user-dialog-component], .btn--test.active[register-user-dialog-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--quiz[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--quiz:hover[register-user-dialog-component], .btn--quiz.active[register-user-dialog-component] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--project[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--project:hover[register-user-dialog-component], .btn--project.active[register-user-dialog-component] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--supplementary[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green-yellow) !important;
}

    .btn--supplementary:hover[register-user-dialog-component], .btn--supplementary.active[register-user-dialog-component] {
        background: var(--green-yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--field-trip[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--field-trip:hover[register-user-dialog-component], .btn--field-trip.active[register-user-dialog-component] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lab[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--lab:hover[register-user-dialog-component], .btn--lab.active[register-user-dialog-component] {
        background: var(--yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--student[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--student:hover[register-user-dialog-component], .btn--student.active[register-user-dialog-component] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--teacher[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--teacher:hover[register-user-dialog-component], .btn--teacher.active[register-user-dialog-component] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--parent[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--parent:hover[register-user-dialog-component], .btn--parent.active[register-user-dialog-component] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--admin[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--admin:hover[register-user-dialog-component], .btn--admin.active[register-user-dialog-component] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--audit[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--audit:hover[register-user-dialog-component], .btn--audit.active[register-user-dialog-component] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--meta[register-user-dialog-component] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-1) !important;
}

    .btn--meta:hover[register-user-dialog-component], .btn--meta.active[register-user-dialog-component] {
        background: var(--grey-1) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

/* 2. FORM */
/** 2.1 General */
.form .card[register-user-dialog-component] {
    padding: 0.3125rem 0.625rem;
}

.form .container.gutter .row > *[register-user-dialog-component] {
    padding: 0.3125rem 0.625rem;
}

/*input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='search'],
input[type='number']*/
[contenteditable][register-user-dialog-component]::-moz-selection, input[register-user-dialog-component]::-moz-selection {
    color: #ffffff;
    background: var(--green);
}

[contenteditable][register-user-dialog-component]::selection,
input[register-user-dialog-component]::selection {
    color: #ffffff;
    background: var(--green);
}

input[type=text].correct[register-user-dialog-component] {
    border: 2px solid var(--green);
}

input[type=text].incorrect[register-user-dialog-component] {
    border: 2px solid var(--red);
}

textarea[register-user-dialog-component] {
    line-height: var(--line-height);
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
}

    textarea[register-user-dialog-component]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    textarea[register-user-dialog-component]::-webkit-scrollbar-track {
        background: transparent;
    }

    textarea[register-user-dialog-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        textarea[register-user-dialog-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    textarea[register-user-dialog-component]::-webkit-scrollbar-corner {
        background: transparent;
    }

.field[register-user-dialog-component] {
    color: var(--grey-dark-3);
    padding: 12px 12px 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    width: 100%;
    font-size: 0.875em;
}

    .field:focus[register-user-dialog-component]::-moz-placeholder {
        color: transparent;
    }

    .field:focus:-ms-input-placeholder[register-user-dialog-component] {
        color: transparent;
    }

    .field:focus[register-user-dialog-component]::placeholder {
        color: transparent;
    }

    .field:disabled[register-user-dialog-component] {
        background-color: transparent;
        opacity: 0.5;
    }

        .field:disabled ~ .btn[register-user-dialog-component] {
            border-color: transparent;
            background: transparent;
            color: var(--grey-light-4);
            cursor: default;
        }

    .field.field--blank[register-user-dialog-component] {
        width: auto;
    }

    .field[register-user-dialog-component]::-moz-placeholder {
        -moz-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field:-ms-input-placeholder[register-user-dialog-component] {
        -ms-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field[register-user-dialog-component]::placeholder {
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

.field-group.valid .required[register-user-dialog-component]::after {
    color: var(--green);
}

.field-group.valid .field[register-user-dialog-component] {
    border-bottom-width: 2px;
    border-bottom-color: var(--green);
}

.field-group.invalid .required[register-user-dialog-component]::after {
    color: var(--red);
}

.field-group.invalid .field[register-user-dialog-component] {
    border-bottom-width: 2px;
    border-bottom-color: var(--red);
}

.field-group.invalid .response[register-user-dialog-component] {
    margin: 4px 0 0 8px;
    height: auto;
    opacity: 1;
}

.field-group label[register-user-dialog-component] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

    .field-group label.field-file[register-user-dialog-component] {
        display: inline-block;
    }

.field-group .required[register-user-dialog-component]::after {
    margin-left: 0.2em;
    content: "*";
    color: var(--green);
}

.field-group .response[register-user-dialog-component] {
    color: var(--red);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.125em;
    opacity: 0;
    height: 0;
    transition: all var(--transition-duration) ease 0s;
}

.layout--dark .field[register-user-dialog-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background-color: var(--grey-dark-4);
}

    .layout--dark .field:focus[register-user-dialog-component]::-moz-placeholder {
        color: transparent;
    }

    .layout--dark .field:focus:-ms-input-placeholder[register-user-dialog-component] {
        color: transparent;
    }

    .layout--dark .field:focus[register-user-dialog-component]::placeholder {
        color: transparent;
    }

    .layout--dark .field:disabled[register-user-dialog-component] {
        opacity: 0.3;
    }

        .layout--dark .field:disabled ~ .btn[register-user-dialog-component] {
            color: var(--grey-dark-3);
        }

    .layout--dark .field[register-user-dialog-component]::-moz-placeholder {
        color: var(--grey-dark-1);
    }

    .layout--dark .field:-ms-input-placeholder[register-user-dialog-component] {
        color: var(--grey-dark-1);
    }

    .layout--dark .field[register-user-dialog-component]::placeholder {
        color: var(--grey-dark-1);
    }

/** 2.1.1 Radio, Checkbox, File, Switch */
.field-check[register-user-dialog-component],
.field-file[register-user-dialog-component] {
    position: relative;
}

    .field-check input[type=radio][register-user-dialog-component],
    .field-check input[type=checkbox][register-user-dialog-component],
    .field-check input[type=file][register-user-dialog-component],
    .field-file input[type=radio][register-user-dialog-component],
    .field-file input[type=checkbox][register-user-dialog-component],
    .field-file input[type=file][register-user-dialog-component] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.field-check[register-user-dialog-component] {
    padding-left: calc(1em + 12px);
    font-weight: var(--font-weight);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-check input[type=radio][register-user-dialog-component],
    .field-check input[type=checkbox][register-user-dialog-component] {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
    }

        .field-check input[type=radio]:checked ~ .radiomark[register-user-dialog-component] {
            border-color: var(--green);
        }

            .field-check input[type=radio]:checked ~ .radiomark[register-user-dialog-component]::before {
                opacity: 1;
            }

        .field-check input[type=checkbox]:checked ~ .checkmark[register-user-dialog-component] {
            border-color: var(--green);
            background: var(--green);
        }

            .field-check input[type=checkbox]:checked ~ .checkmark .icon[register-user-dialog-component] {
                opacity: 1;
            }

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

    .field-check .radiomark[register-user-dialog-component],
    .field-check .checkmark[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
        pointer-events: none;
    }

    .field-check .radiomark[register-user-dialog-component] {
        border-radius: 50%;
    }

        .field-check .radiomark[register-user-dialog-component]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            display: block;
            width: 0.725em;
            height: 0.725em;
            border-radius: inherit;
            background: var(--green);
            opacity: 0;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-check .checkmark[register-user-dialog-component] {
        border-radius: 4px;
        color: #ffffff;
    }

        .field-check .checkmark .icon[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-height: 9px;
            height: 0.6em;
            opacity: 0;
        }

.success .field-check input[type=checkbox]:checked ~ .checkmark[register-user-dialog-component] {
    border-color: var(--green);
    background: var(--green);
}

.error .field-check input[type=checkbox]:checked ~ .checkmark[register-user-dialog-component] {
    border-color: var(--red);
    background: var(--red);
}

.layout--dark .field-check input[type=checkbox]:disabled ~ .checkmark[register-user-dialog-component] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
    color: var(--alpha-light-2);
}

.layout--dark .field-check .radiomark[register-user-dialog-component],
.layout--dark .field-check .checkmark[register-user-dialog-component] {
    background: transparent;
    border-color: var(--grey-dark-1);
}

.layout--dark .field-check .checkmark[register-user-dialog-component] {
    color: var(--grey-dark-6);
}

/** 2.1.2 Field Checkbox */
.field-checkbox[register-user-dialog-component] {
    position: relative;
    display: inline-block;
    font-size: 0.675rem;
    font-weight: var(--font-weight);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

    .field-checkbox input[type=radio][register-user-dialog-component] {
        position: absolute;
        opacity: 0;
    }

        .field-checkbox input[type=radio]:checked ~ .checkmark .icon .check[register-user-dialog-component] {
            stroke-dashoffset: 0;
        }

    .field-checkbox .checkmark .icon[register-user-dialog-component],
    .field-checkbox .checkmark-readonly .icon[register-user-dialog-component] {
        min-height: 9px;
        height: 0.6em;
    }

        .field-checkbox .checkmark .icon .check[register-user-dialog-component],
        .field-checkbox .checkmark-readonly .icon .check[register-user-dialog-component] {
            transition: all var(--transition-duration) ease 0s;
            fill: none;
            stroke: currentColor;
            stroke-miterlimit: 10;
            stroke-dasharray: 25;
            stroke-width: 1.8;
        }

        .field-checkbox .checkmark .icon .check[register-user-dialog-component] {
            stroke-dashoffset: 25;
        }

        .field-checkbox .checkmark-readonly .icon .check[register-user-dialog-component] {
            stroke-dashoffset: 0;
        }

    .field-checkbox > .checkmark[register-user-dialog-component] {
        position: relative;
        display: block;
        width: 27px;
        height: 27px;
        border-radius: 4px;
        color: var(--green);
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
    }

        .field-checkbox > .checkmark .icon[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .field-checkbox > .checkmark .icon .check[register-user-dialog-component] {
                stroke-dashoffset: 25;
            }

/** 2.1.3 Field File */
.field-file[register-user-dialog-component] {
    display: inline-block;
}

    .field-file input[type=file][register-user-dialog-component] {
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

        .field-file input[type=file]:hover ~ .btn[register-user-dialog-component], .field-file input[type=file]:focus ~ .btn[register-user-dialog-component] {
            color: #ffffff !important;
            background: var(--green);
            border-color: var(--green);
        }

        .field-file input[type=file]:disabled[register-user-dialog-component] {
            display: none;
        }

            .field-file input[type=file]:disabled ~ .btn[register-user-dialog-component] {
                color: var(--grey-light-4) !important;
                background: transparent;
                border-color: var(--grey-light-3);
                cursor: not-allowed;
            }

.layout--dark .field-file input[type=file]:disabled ~ .btn[register-user-dialog-component] {
    opacity: 0.125;
}

.browse-file ul li[register-user-dialog-component] {
    margin-bottom: 6px;
}

/** 2.1.4 Date, Time */
.field-date[register-user-dialog-component],
.field-time[register-user-dialog-component],
.field-url[register-user-dialog-component] {
    position: relative;
}

    .field-date .field[register-user-dialog-component],
    .field-time .field[register-user-dialog-component],
    .field-url .field[register-user-dialog-component] {
        letter-spacing: 0.025em;
    }

        .field-date .field:focus ~ .btn[register-user-dialog-component],
        .field-time .field:focus ~ .btn[register-user-dialog-component],
        .field-url .field:focus ~ .btn[register-user-dialog-component] {
            color: #ffffff;
            background: var(--green) !important;
        }

    .field-date .btn[register-user-dialog-component],
    .field-time .btn[register-user-dialog-component],
    .field-url .btn[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
    }

.layout--dark .field-date[register-user-dialog-component],
.layout--dark .field-time[register-user-dialog-component],
.layout--dark .field-url[register-user-dialog-component] {
    position: relative;
}

    .layout--dark .field-date .field:focus[register-user-dialog-component],
    .layout--dark .field-time .field:focus[register-user-dialog-component],
    .layout--dark .field-url .field:focus[register-user-dialog-component] {
        border-bottom-width: 1px;
        border-bottom-color: var(--grey-dark-1);
    }

/** 2.1.5 Field Readonly  */
.field-readonly[register-user-dialog-component] {
    display: inline-block;
    font-size: 0.875em;
}

    .field-readonly label[register-user-dialog-component] {
        font-weight: 600;
    }

    .field-readonly input[register-user-dialog-component] {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        min-width: 36px;
        width: 100%;
        max-width: 60px;
        text-align: center;
    }

.layout--dark .field-readonly input[register-user-dialog-component] {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

/** 2.1.6 Field Renge*/
.field-range.range--drag .range-slider .range-slider-track .range-slider-track-value[register-user-dialog-component] {
    transition: none;
}

.field-range label[register-user-dialog-component] {
    font-size: 0.875rem;
}

.field-range .range[register-user-dialog-component] {
    margin-top: -4px;
    display: flex;
    align-items: center;
}

    .field-range .range:hover .range-inputs .range-input[register-user-dialog-component], .field-range .range:focus .range-inputs .range-input[register-user-dialog-component] {
        border-color: var(--green);
    }

.field-range .range-inputs[register-user-dialog-component] {
    margin-left: 10px;
}

    .field-range .range-inputs .range-input[register-user-dialog-component] {
        padding: 4px;
        width: 44px;
        color: var(--grey-3);
        font-size: 0.875rem;
        text-align: center;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-range .range-inputs .range-input:focus[register-user-dialog-component] {
            border-color: var(--green);
        }

    .field-range .range-inputs [type=range][register-user-dialog-component] {
        display: none;
    }

.field-range .range-slider[register-user-dialog-component] {
    position: relative;
    height: 30px;
    min-width: 100px;
    width: 100%;
    flex: 1 1 100px;
    cursor: pointer;
}

    .field-range .range-slider .range-slider-track[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1px;
        width: 100%;
        background: var(--alpha-dark-2);
    }

        .field-range .range-slider .range-slider-track .range-slider-track-value[register-user-dialog-component] {
            position: relative;
            height: 100%;
            width: 30%;
            background: var(--green);
            transition: all var(--transition-duration) ease 0s;
        }

    .field-range .range-slider .range-slider-btn[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 26px;
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
    }

        .field-range .range-slider .range-slider-btn:hover[register-user-dialog-component]::before, .field-range .range-slider .range-slider-btn:focus[register-user-dialog-component]::before {
            transform: translate(-50%, -50%) scale(1.2);
        }

        .field-range .range-slider .range-slider-btn[register-user-dialog-component]::before, .field-range .range-slider .range-slider-btn[register-user-dialog-component]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .field-range .range-slider .range-slider-btn[register-user-dialog-component]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
            border: 2px solid var(--green);
            border-radius: inherit;
            transition: all var(--transition-duration) ease 0s;
        }

        .field-range .range-slider .range-slider-btn[register-user-dialog-component]::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--green);
            border-radius: inherit;
        }

        .field-range .range-slider .range-slider-btn.range-slider-btn--max[register-user-dialog-component] {
            left: initial;
            right: 0;
            transform: translate(50%, -50%);
        }

.layout--light .field-range .range-slider .range-slider-btn[register-user-dialog-component] {
    background: var(--grey-light-1);
}

.layout--dark .field-range .range-inputs .range-input[register-user-dialog-component] {
    color: var(--grey-1);
    border-color: var(--alpha-light-2);
    background: transparent;
}

    .layout--dark .field-range .range-inputs .range-input:focus[register-user-dialog-component] {
        border-color: var(--green);
    }

.layout--dark .field-range .range-slider .range-slider-track[register-user-dialog-component] {
    background: var(--alpha-light-2);
}

.layout--dark .field-range .range-slider .range-slider-btn[register-user-dialog-component] {
    background: var(--grey-dark-4);
}

/** 2.1.7 Field Letter */
.field-letter[register-user-dialog-component] {
    position: relative;
    padding-left: 2.25rem;
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
    cursor: default;
}

    .field-letter .lettermark[register-user-dialog-component],
    .field-letter input[register-user-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .field-letter input[register-user-dialog-component] {
        opacity: 0;
        z-index: 1;
    }

        .field-letter input:not([disabled])[register-user-dialog-component] {
            cursor: pointer;
        }

        .field-letter input:hover:not([disabled]) ~ .lettermark[register-user-dialog-component], .field-letter input:focus:not([disabled]) ~ .lettermark[register-user-dialog-component] {
            color: var(--green);
            border-color: var(--green);
        }

        .field-letter input:hover:not([disabled]):checked ~ .lettermark[register-user-dialog-component], .field-letter input:focus:not([disabled]):checked ~ .lettermark[register-user-dialog-component] {
            color: #ffffff;
        }

        .field-letter input:checked:hover ~ .lettermark[register-user-dialog-component], .field-letter input:checked:focus ~ .lettermark[register-user-dialog-component], .field-letter input.checked:hover ~ .lettermark[register-user-dialog-component], .field-letter input.checked:focus ~ .lettermark[register-user-dialog-component] {
            color: #ffffff;
        }

        .field-letter input:checked ~ .lettermark[register-user-dialog-component], .field-letter input.checked ~ .lettermark[register-user-dialog-component] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-letter .lettermark[register-user-dialog-component] {
        font-weight: 600;
        border: 1px solid var(--grey-1);
        transition: all var(--transition-duration) ease 0s;
    }

        .field-letter .lettermark > *[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

.error .field-letter input:hover:not([disabled]) ~ .lettermark[register-user-dialog-component], .error .field-letter input:focus:not([disabled]) ~ .lettermark[register-user-dialog-component] {
    color: var(--red);
    border-color: var(--red);
}

.error .field-letter input:checked:hover ~ .lettermark[register-user-dialog-component], .error .field-letter input:checked:focus ~ .lettermark[register-user-dialog-component], .error .field-letter input.checked:hover ~ .lettermark[register-user-dialog-component], .error .field-letter input.checked:focus ~ .lettermark[register-user-dialog-component] {
    color: #ffffff;
}

.error .field-letter input:checked ~ .lettermark[register-user-dialog-component], .error .field-letter input.checked ~ .lettermark[register-user-dialog-component] {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

.success .field-letter input:hover:not([disabled]) ~ .lettermark[register-user-dialog-component], .success .field-letter input:focus:not([disabled]) ~ .lettermark[register-user-dialog-component] {
    color: var(--green);
    border-color: var(--green);
}

.success .field-letter input:checked:hover ~ .lettermark[register-user-dialog-component], .success .field-letter input:checked:focus ~ .lettermark[register-user-dialog-component], .success .field-letter input.checked:hover ~ .lettermark[register-user-dialog-component], .success .field-letter input.checked:focus ~ .lettermark[register-user-dialog-component] {
    color: #ffffff;
}

.success .field-letter input:checked ~ .lettermark[register-user-dialog-component], .success .field-letter input.checked ~ .lettermark[register-user-dialog-component] {
    color: #ffffff;
    background: var(--green);
    border-color: var(--green);
}

/** 2.1.8 Field True False */
.field-true-false[register-user-dialog-component] {
    display: flex;
    align-items: center;
}

    .field-true-false .slash-sep[register-user-dialog-component] {
        font-size: 1.25em;
        margin: 4px;
    }

    .field-true-false .field-letter[register-user-dialog-component] {
        padding: 0;
    }

        .field-true-false .field-letter .lettermark[register-user-dialog-component] {
            position: relative;
            display: block;
        }

/** 2.1.9 Field Evaluate */
.field-evaluate[register-user-dialog-component] {
    position: relative;
    padding-left: 0.25rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: default;
    margin-bottom: 0;
    line-height: 0;
}

    .field-evaluate.success-color input:hover:not([disabled]) ~ .mark[register-user-dialog-component], .field-evaluate.success-color input:focus:not([disabled]) ~ .mark[register-user-dialog-component] {
        border-color: var(--green);
    }

    .field-evaluate.success-color input:checked ~ .mark[register-user-dialog-component] {
        color: #ffffff;
        background: var(--green);
        border-color: var(--green);
    }

    .field-evaluate.error-color input:hover:not([disabled]) ~ .mark[register-user-dialog-component], .field-evaluate.error-color input:focus:not([disabled]) ~ .mark[register-user-dialog-component] {
        border-color: var(--red);
    }

    .field-evaluate.error-color input:checked ~ .mark[register-user-dialog-component] {
        color: #ffffff;
        background: var(--red);
        border-color: var(--red);
    }

    .field-evaluate .mark[register-user-dialog-component],
    .field-evaluate input[register-user-dialog-component] {
        border-radius: 50%;
    }

    .field-evaluate input[register-user-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

        .field-evaluate input:checked ~ .mark[register-user-dialog-component] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-evaluate .mark[register-user-dialog-component] {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-evaluate .mark > *[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

/** 2.1.10 Input Blank */
.input-blank[register-user-dialog-component] {
    display: inline-block;
    padding: 0 4px;
    color: var(--green);
    background: transparent;
    border-bottom: 1px solid var(--green);
    outline: 0;
}

/** 2.3 Field Switch */
.field-switch[register-user-dialog-component],
.field-switch-small[register-user-dialog-component] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-switch label[register-user-dialog-component],
    .field-switch-small label[register-user-dialog-component] {
        display: inline-block;
        margin-right: 4px;
    }

    .field-switch input[type=checkbox][register-user-dialog-component],
    .field-switch-small input[type=checkbox][register-user-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .field-switch .switch-wrap[register-user-dialog-component],
    .field-switch-small .switch-wrap[register-user-dialog-component] {
        position: relative;
        display: inline-block;
    }

    .field-switch .switch[register-user-dialog-component],
    .field-switch-small .switch[register-user-dialog-component] {
        display: block;
    }

        .field-switch .switch .knob[register-user-dialog-component],
        .field-switch-small .switch .knob[register-user-dialog-component] {
            position: absolute;
            display: block;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
        }

        .field-switch .switch .state[register-user-dialog-component],
        .field-switch-small .switch .state[register-user-dialog-component] {
            display: block;
        }

.field-switch[register-user-dialog-component] {
    position: relative;
    line-height: var(--line-height);
}

[register-user-dialog-component] .field-switch hr {
    margin: 0 0 8px;
}

.field-switch .switch-wrap[register-user-dialog-component] {
    width: 64px;
}

.field-switch input[type=checkbox]:checked ~ .switch .knob[register-user-dialog-component] {
    left: calc(100% - 34px);
}

    .field-switch input[type=checkbox]:checked ~ .switch .knob[register-user-dialog-component]::before {
        background: var(--green);
    }

.field-switch input[type=checkbox]:checked ~ .switch .state[register-user-dialog-component] {
    color: #ffffff;
    background-color: var(--green);
}

    .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(1)[register-user-dialog-component] {
        opacity: 1;
    }

    .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(2)[register-user-dialog-component] {
        opacity: 0;
    }

.field-switch .switch .knob[register-user-dialog-component] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--grey-light-3);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

    .field-switch .switch .knob[register-user-dialog-component]:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 35%;
        height: 35%;
        border-radius: 50%;
        background: var(--grey-3);
    }

.field-switch .switch .state[register-user-dialog-component] {
    width: 62px;
    padding: 2px 6px;
    color: var(--grey-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    border: 1px solid var(--grey-light-3);
    border-radius: 30px;
    background-color: #ffffff;
}

    .field-switch .switch .state[register-user-dialog-component]::after {
        display: table;
        content: "";
        clear: both;
    }

    .field-switch .switch .state *:nth-child(1)[register-user-dialog-component] {
        opacity: 0;
        float: left;
    }

    .field-switch .switch .state *:nth-child(2)[register-user-dialog-component] {
        opacity: 1;
        float: right;
    }

.field-switch-small .switch-wrap[register-user-dialog-component] {
    top: 0.2em;
}

.field-switch-small input[type=checkbox]:checked ~ .switch[register-user-dialog-component] {
    border-color: var(--green);
    background: var(--green);
}

    .field-switch-small input[type=checkbox]:checked ~ .switch .knob[register-user-dialog-component] {
        left: calc(100% - 14px);
        background: #ffffff;
    }

.field-switch-small .switch[register-user-dialog-component] {
    width: 32px;
    height: 16px;
    border-radius: 32px;
    border: 1px solid var(--grey-3);
}

    .field-switch-small .switch .knob[register-user-dialog-component] {
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--grey-3);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

.layout--dark .field-switch hr[register-user-dialog-component] {
    border-color: var(--grey-dark-3);
}

.layout--dark .field-switch .switch .knob[register-user-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .field-switch .switch .state[register-user-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .field-switch-small .switch[register-user-dialog-component] {
    border-color: var(--grey-dark-1);
}

/** 2.2 Dropdown Menu */
.field-menu[register-user-dialog-component],
.menu[register-user-dialog-component] {
    position: relative;
    display: inline-block;
    font-weight: 400;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-menu.open > .menu-header > .icon[register-user-dialog-component],
    .menu.open > .menu-header > .icon[register-user-dialog-component] {
        transform: rotate(90deg);
    }

    .field-menu.open > .menu-list[register-user-dialog-component],
    .menu.open > .menu-list[register-user-dialog-component] {
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
    }

    .field-menu.menu--headline > .menu-header [data-menu-option][register-user-dialog-component],
    .menu.menu--headline > .menu-header [data-menu-option][register-user-dialog-component] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--grey-dark-3);
    }

    .field-menu.menu--headline > .menu-header > .icon[register-user-dialog-component],
    .menu.menu--headline > .menu-header > .icon[register-user-dialog-component] {
        top: -0.25em;
    }

    .field-menu.menu--list-top .menu-list[register-user-dialog-component],
    .menu.menu--list-top .menu-list[register-user-dialog-component] {
        top: 0;
        transform: translate(0, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.open > .menu-list[register-user-dialog-component],
    .menu.menu--list-top.open > .menu-list[register-user-dialog-component] {
        transform: translate(0, calc(-100% - 8px));
    }

    .field-menu.menu--list-right .menu-list[register-user-dialog-component],
    .menu.menu--list-right .menu-list[register-user-dialog-component] {
        left: 100%;
        transform: translate(-100%, 10px);
    }

    .field-menu.menu--list-right.open > .menu-list[register-user-dialog-component],
    .menu.menu--list-right.open > .menu-list[register-user-dialog-component] {
        transform: translate(-100%, 0);
    }

    .field-menu.menu--list-top.menu--list-right .menu-list[register-user-dialog-component],
    .menu.menu--list-top.menu--list-right .menu-list[register-user-dialog-component] {
        top: 0;
        left: 100%;
        transform: translate(-100%, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.menu--list-right.open > .menu-list[register-user-dialog-component],
    .menu.menu--list-top.menu--list-right.open > .menu-list[register-user-dialog-component] {
        transform: translate(-100%, calc(-100% - 8px));
    }

    .field-menu.menu--list-ycenter .menu-list[register-user-dialog-component],
    .menu.menu--list-ycenter .menu-list[register-user-dialog-component] {
        top: calc(50% + 14px);
        transform: translate(0, -50%);
    }

    .field-menu.menu--list-ycenter.open > .menu-list[register-user-dialog-component],
    .menu.menu--list-ycenter.open > .menu-list[register-user-dialog-component] {
        top: calc(50% + 4px);
    }

    .field-menu.menu--list-xcenter .menu-list[register-user-dialog-component],
    .menu.menu--list-xcenter .menu-list[register-user-dialog-component] {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
    }

    .field-menu.menu--list-xcenter.open > .menu-list[register-user-dialog-component],
    .menu.menu--list-xcenter.open > .menu-list[register-user-dialog-component] {
        transform: translate(-50%, 0);
    }

    .field-menu.menu--list-center .menu-list[register-user-dialog-component],
    .menu.menu--list-center .menu-list[register-user-dialog-component] {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--list-center.open > .menu-list[register-user-dialog-component],
    .menu.menu--list-center.open > .menu-list[register-user-dialog-component] {
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--dark[register-user-dialog-component],
    .menu.menu--dark[register-user-dialog-component] {
        color: var(--grey-1);
    }

        .field-menu.menu--dark .menu-list[register-user-dialog-component],
        .menu.menu--dark .menu-list[register-user-dialog-component] {
            color: var(--grey-3);
            background: var(--grey-dark-4);
        }

        .field-menu.menu--dark .option:hover[register-user-dialog-component],
        .menu.menu--dark .option:hover[register-user-dialog-component] {
            color: var(--grey-1);
            background: var(--alpha-light-2);
        }

        .field-menu.menu--dark .option.option--checked[register-user-dialog-component],
        .menu.menu--dark .option.option--checked[register-user-dialog-component] {
            background: var(--alpha-light-1);
        }

    .field-menu label[register-user-dialog-component],
    .menu label[register-user-dialog-component] {
        margin-bottom: 0;
    }

    .field-menu .menu-header[register-user-dialog-component],
    .menu .menu-header[register-user-dialog-component] {
        display: inline-block;
        cursor: pointer;
        color: var(--grey-3);
        font-size: 0.875em;
    }

        .field-menu .menu-header:hover > .icon[register-user-dialog-component],
        .menu .menu-header:hover > .icon[register-user-dialog-component] {
            fill: var(--green);
        }

        .field-menu .menu-header > .icon[register-user-dialog-component],
        .menu .menu-header > .icon[register-user-dialog-component] {
            position: relative;
            top: -0.1em;
            height: 0.4em;
            margin-left: 0.125em;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-menu .menu-list[register-user-dialog-component],
    .menu .menu-list[register-user-dialog-component] {
        position: absolute;
        top: 100%;
        left: 0;
        transform: translate(0, 10px);
        display: inline-block;
        list-style: none;
        margin-top: 4px;
        padding-left: 0px;
        min-width: 150px;
        width: auto;
        max-width: 300px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        line-height: var(--line-height);
        z-index: 99;
        max-height: 50vh;
        
        scrollbar-color: var(--alpha-dark-1) transparent;        
    }

        .field-menu .menu-list.scroll[register-user-dialog-component],
        .menu .menu-list.scroll[register-user-dialog-component] {
            padding: 0;
            height: auto;
            max-height: 200px;
            overflow-y: auto;
        }

        .field-menu .menu-list[register-user-dialog-component]::-webkit-scrollbar,
        .menu .menu-list[register-user-dialog-component]::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        .field-menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-track,
        .menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-track {
            background: transparent;
        }

        .field-menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-thumb,
        .menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-thumb {
            background: var(--alpha-dark-2);
        }

            .field-menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-thumb:hover,
            .menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-thumb:hover {
                background: var(--green);
            }

        .field-menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-corner,
        .menu .menu-list[register-user-dialog-component]::-webkit-scrollbar-corner {
            background: transparent;
        }

    .field-menu .field-check[register-user-dialog-component],
    .field-menu .option[register-user-dialog-component],
    .menu .field-check[register-user-dialog-component],
    .menu .option[register-user-dialog-component] {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: all var(--transition-duration) ease 0s;
    }

    .field-menu .option[register-user-dialog-component],
    .menu .option[register-user-dialog-component] {
        position: relative;
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-3);
        cursor: pointer;
    }

        .field-menu .option[class*=prefix][register-user-dialog-component],
        .menu .option[class*=prefix][register-user-dialog-component] {
            padding-left: 22px !important;
        }

            .field-menu .option[class*=prefix][register-user-dialog-component]::before,
            .menu .option[class*=prefix][register-user-dialog-component]::before {
                left: 8px;
            }

        .field-menu .option:hover[register-user-dialog-component],
        .menu .option:hover[register-user-dialog-component] {
            background-color: var(--grey-light-2);
        }

        .field-menu .option .icon[register-user-dialog-component],
        .menu .option .icon[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            right: 8px;
            height: 0.6em;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
            fill: var(--green);
            opacity: 0;
            pointer-events: none;
        }

        .field-menu .option.option--icon[register-user-dialog-component],
        .menu .option.option--icon[register-user-dialog-component] {
            padding: 8px 8px 8px 30px;
        }

            .field-menu .option.option--icon .icon[register-user-dialog-component],
            .menu .option.option--icon .icon[register-user-dialog-component] {
                right: initial;
                left: 8px;
                height: 1em;
                max-width: 1.125em;
                opacity: 1;
                fill: currentColor;
            }

        .field-menu .option.option--checked[register-user-dialog-component],
        .menu .option.option--checked[register-user-dialog-component] {
            color: var(--green);
            background: var(--grey-light-1);
        }

            .field-menu .option.option--checked .icon[register-user-dialog-component],
            .menu .option.option--checked .icon[register-user-dialog-component] {
                opacity: 1;
            }

    .field-menu.menu--dark .field-option input[type=radio]:checked ~ .option[register-user-dialog-component] {
        background: var(--alpha-light-1);
    }

    .field-menu .field-option[register-user-dialog-component] {
        position: relative;
        font-weight: var(--font-weight);
    }

        .field-menu .field-option input[type=radio][register-user-dialog-component] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

            .field-menu .field-option input[type=radio]:checked ~ .option[register-user-dialog-component] {
                color: var(--green);
                background: var(--grey-light-1);
            }

                .field-menu .field-option input[type=radio]:checked ~ .option .icon[register-user-dialog-component] {
                    opacity: 1;
                }

    .field-menu .field-check[register-user-dialog-component] {
        padding: 8px 8px 8px 30px;
    }

        .field-menu .field-check:hover[register-user-dialog-component] {
            background-color: var(--grey-light-2);
        }

        .field-menu .field-check .checkmark[register-user-dialog-component] {
            left: 8px;
        }

.field-option-checked[register-user-dialog-component] {
    color: var(--green) !important;
    background: var(--grey-light-1) !important;
}

.field-option-icon-checked[register-user-dialog-component] {
    opacity: 1 !important;
}

.layout--dark .field-menu .menu-header[register-user-dialog-component],
.layout--dark menu .menu-header[register-user-dialog-component] {
    color: var(--grey-1);
}

/** 2.2.1 More Options */
.menu--more.open .btn[register-user-dialog-component] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--more hr[register-user-dialog-component] {
    margin: 0;
}

.menu--more .menu-header[register-user-dialog-component] {
    position: relative;
}

    .menu--more .menu-header [data-menu-option][register-user-dialog-component] {
        visibility: hidden;
        display: block;
        width: 30px;
    }

    .menu--more .menu-header .btn[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(90deg);
    }

.layout--dark .menu--more.open .btn[register-user-dialog-component] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--more hr[register-user-dialog-component] {
    border-color: var(--grey-light-3);
}

/** 2.2.2 Select Options */
.menu--dropdown[register-user-dialog-component],
.menu--dropdown-search[register-user-dialog-component] {
    display: block;
}

    .menu--dropdown .menu-header[register-user-dialog-component],
    .menu--dropdown-search .menu-header[register-user-dialog-component] {
        position: relative;
        display: block;
    }

        .menu--dropdown .menu-header [data-menu-option][register-user-dialog-component],
        .menu--dropdown-search .menu-header [data-menu-option][register-user-dialog-component] {
            display: block;
            color: var(--grey-dark-3);
            background: #ffffff;
            padding: 8px 52px 8px 12px;
            border-radius: 4px;
            border: 1px solid var(--grey-light-3);
            max-height: 2.8em;
        }

        .menu--dropdown .menu-header .btn[register-user-dialog-component],
        .menu--dropdown-search .menu-header .btn[register-user-dialog-component] {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 40px;
            border-radius: 0 4px 4px 0;
            background: var(--grey-light-1);
        }

            .menu--dropdown .menu-header .btn .icon[register-user-dialog-component],
            .menu--dropdown-search .menu-header .btn .icon[register-user-dialog-component] {
                width: 0.8em;
                height: 0.8em;
            }

            .menu--dropdown .menu-header .btn:hover[register-user-dialog-component],
            .menu--dropdown-search .menu-header .btn:hover[register-user-dialog-component] {
                background: var(--green);
            }

            .menu--dropdown .menu-header .btn.btn--square .icon[register-user-dialog-component],
            .menu--dropdown-search .menu-header .btn.btn--square .icon[register-user-dialog-component] {
                width: auto;
                height: 0.3em;
            }

    .menu--dropdown .menu-list[register-user-dialog-component],
    .menu--dropdown-search .menu-list[register-user-dialog-component] {
        display: block;
        width: 100%;
        min-width: initial;
        max-width: initial;
    }

    .menu--dropdown-search .menu-list[register-user-dialog-component] {
        max-height: initial;
        overflow: hidden;
    }

.layout--dark .menu--dropdown .menu-header [data-menu-option][register-user-dialog-component],
.layout--dark .menu--dropdown-search .menu-header [data-menu-option][register-user-dialog-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .menu--dropdown .btn[register-user-dialog-component],
.layout--dark .menu--dropdown-search .btn[register-user-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .menu--dropdown-search .search-field .field[register-user-dialog-component] {
    color: var(--grey-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

/** 2.2.3 Filter Options */
.menu--filter.open .btn[register-user-dialog-component] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--filter .field-check[register-user-dialog-component] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.layout--dark .menu--filter.open .btn[register-user-dialog-component] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--filter .field-check .checkmark[register-user-dialog-component] {
    background: #ffffff;
    border-color: var(--grey-light-3);
    color: #ffffff;
}

/** 2.2.4 Calendar Options */
.menu--calendar .menu-header[register-user-dialog-component] {
    font-weight: 600;
}

    .menu--calendar .menu-header [data-menu-option][register-user-dialog-component] {
        color: var(--grey-dark-4);
    }

.layout--dark .menu--calendar .menu-header [data-menu-option][register-user-dialog-component] {
    color: var(--grey-1);
}

/** 2.2.5 Date Picker */
.menu--date-picker > .menu-header[register-user-dialog-component] {
    text-align: center;
    min-width: 178px;
}

    .menu--date-picker > .menu-header [data-menu-option][register-user-dialog-component] {
        color: var(--grey-dark-4);
    }

.menu--date-picker .menu-header[register-user-dialog-component] {
    font-weight: 600;
}

.menu--date-picker > .menu-list[register-user-dialog-component] {
    width: 100%;
    max-width: 300px !important;
    border-color: var(--grey-light-3);
    background: var(--grey-light-1);
    overflow: initial;
}

    .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[register-user-dialog-component] {
        color: var(--green);
        background: #ffffff;
    }

.menu--date-picker .field-calendar[register-user-dialog-component] {
    padding: 8px;
}

.menu--date-picker hr[register-user-dialog-component] {
    margin: 0 8px;
}

.layout--dark .menu--date-picker > .menu-list[register-user-dialog-component] {
    border-color: var(--grey-dark-2);
    background: var(--grey-dark-4);
}

    .layout--dark .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[register-user-dialog-component] {
        background: var(--alpha-light-2);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option:hover[register-user-dialog-component] {
        color: var(--grey-1);
        background: var(--alpha-light-1);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option.option--checked[register-user-dialog-component] {
        color: var(--green);
        background: var(--alpha-light-2);
    }

.layout--dark .menu--date-picker > .menu-header [data-menu-option][register-user-dialog-component] {
    color: var(--grey-1);
    border-color: var(--grey-dark-2);
    background: transparent;
}

/** 2.2.6 Menu Dropdown Small */
.menu--dropdown-small.open .menu-btn .icon[register-user-dialog-component] {
    transform: translateY(-50%) rotate(90deg);
}

.menu--dropdown-small .menu-btn[register-user-dialog-component] {
    padding: 8px 24px 8px 8px;
    font-size: 0.875rem;
    color: var(--grey-3);
    line-height: 1;
    background: var(--grey-light-1);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
}

    .menu--dropdown-small .menu-btn:hover[register-user-dialog-component], .menu--dropdown-small .menu-btn.active[register-user-dialog-component] {
        background: var(--alpha-dark-2);
    }

    .menu--dropdown-small .menu-btn .icon[register-user-dialog-component] {
        position: absolute;
        top: 50%;
        right: 8px;
        left: initial;
        transform: translateY(-50%);
        width: 12px;
        height: 6px;
        transition: all var(--transition-duration) ease 0s;
    }

.menu--dropdown-small hr[register-user-dialog-component] {
    margin: 0;
}

.layout--light .menu--dropdown-small .menu-btn[register-user-dialog-component] {
    background: #ffffff;
}

    .layout--light .menu--dropdown-small .menu-btn:hover[register-user-dialog-component], .layout--light .menu--dropdown-small .menu-btn.active[register-user-dialog-component] {
        background: var(--alpha-dark-1);
    }

.layout--dark .menu--dropdown-small .menu-btn[register-user-dialog-component] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .menu--dropdown-small .menu-btn:hover[register-user-dialog-component], .layout--dark .menu--dropdown-small .menu-btn.active[register-user-dialog-component] {
        background: var(--alpha-light-2);
    }

.layout--dark .menu--dropdown-small hr[register-user-dialog-component] {
    border-color: var(--grey-light-3);
}

/** 2.4 Search */
.search[register-user-dialog-component] {
    font-size: 1rem;
}

    .search .search-results[register-user-dialog-component] {
        display: none;
    }

/** 2.4.1 Search Small */
.search--small[register-user-dialog-component] {
    position: relative;
    padding: 6px 8px;
    background: var(--grey-light-2);
    z-index: 99;
}

    .search--small .search-field[register-user-dialog-component] {
        position: relative;
    }

        .search--small .search-field input[register-user-dialog-component] {
            padding: 8px 28px 6px;
            border-color: transparent;
            background: transparent;
            cursor: pointer;
        }

            .search--small .search-field input:focus[register-user-dialog-component] {
                border-width: 1px;
                border-color: transparent;
                cursor: initial;
                background: #ffffff;
            }

        .search--small .search-field .search-icon[register-user-dialog-component],
        .search--small .search-field .field-menu[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .search--small .search-field .search-icon[register-user-dialog-component] {
            left: 8px;
            width: 0.875em;
            line-height: 0;
            pointer-events: none;
        }

        .search--small .search-field .field-menu[register-user-dialog-component] {
            right: 0;
        }

            .search--small .search-field .field-menu.open .menu-list[register-user-dialog-component] {
                top: 70%;
            }

            .search--small .search-field .field-menu .menu-header .icon[register-user-dialog-component] {
                height: 0.4em;
            }

.layout--dark .search--small[register-user-dialog-component] {
    background: var(--grey-dark-4);
}

    .layout--dark .search--small .search-field[register-user-dialog-component] {
        border-color: var(--grey-dark-1);
        background-color: var(--grey-dark-4);
    }

        .layout--dark .search--small .search-field input:focus[register-user-dialog-component] {
            background: var(--grey-dark-5);
        }

/** 2.4.2 Search Filed Live */
.search--live[register-user-dialog-component] {
    position: relative;
}

    .search--live[data-view=search-results] .search-field[register-user-dialog-component] {
        z-index: 10;
    }

        .search--live[data-view=search-results] .search-field input[register-user-dialog-component] {
            border-radius: 4px 0 0 0;
        }

        .search--live[data-view=search-results] .search-field .btn[register-user-dialog-component] {
            border-radius: 0 4px 0 0;
        }

    .search--live[data-view=search-results] .search-results[register-user-dialog-component] {
        top: calc(100% - 1px);
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }

    .search--live .search-field[register-user-dialog-component] {
        position: relative;
        display: flex;
        z-index: 1;
    }

        .search--live .search-field input[register-user-dialog-component] {
            border-radius: 4px 0 0 4px;
        }

        .search--live .search-field .btn[register-user-dialog-component] {
            margin-left: -1px;
            width: 40px;
            height: 40px;
            font-size: 1em;
            border-radius: 0 4px 4px 0;
        }

    .search--live .search-results[register-user-dialog-component] {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 0 0 2px 2px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
    }

        .search--live .search-results .search-results-item[register-user-dialog-component] {
            display: flex;
            align-items: center;
            font-size: 0.875em;
            transition: all var(--transition-duration) ease 0s;
            padding: 5px 10px;
        }

            .search--live .search-results .search-results-item:not(:last-child)[register-user-dialog-component] {
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            .search--live .search-results .search-results-item.item--found[register-user-dialog-component] {
                cursor: pointer;
            }

                .search--live .search-results .search-results-item.item--found:hover[register-user-dialog-component], .search--live .search-results .search-results-item.item--found:focus[register-user-dialog-component] {
                    background: rgba(0, 0, 0, 0.025);
                }

                    .search--live .search-results .search-results-item.item--found:hover .result *[register-user-dialog-component], .search--live .search-results .search-results-item.item--found:focus .result *[register-user-dialog-component] {
                        color: var(--green);
                    }

            .search--live .search-results .search-results-item.item--no-result[register-user-dialog-component] {
                color: var(--grey-1);
            }

            .search--live .search-results .search-results-item .icon[register-user-dialog-component] {
                margin-right: 10px;
                height: 0.875em;
                color: var(--alpha-dark-2);
            }

            .search--live .search-results .search-results-item .result[register-user-dialog-component] {
                color: var(--grey-1);
            }

                .search--live .search-results .search-results-item .result *[register-user-dialog-component] {
                    transition: all var(--transition-duration) ease 0s;
                }

                .search--live .search-results .search-results-item .result > span[register-user-dialog-component] {
                    color: var(--grey-3);
                }

                .search--live .search-results .search-results-item .result strong[register-user-dialog-component] {
                    color: var(--grey-dark-4);
                }

.layout--dark .search--live .search-field .btn[register-user-dialog-component] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-3);
}

    .layout--dark .search--live .search-field .btn:hover[register-user-dialog-component], .layout--dark .search--live .search-field .btn:focus[register-user-dialog-component] {
        background: var(--green);
    }

/** 2.4.3 Search Filed Dropdown */
.search--dropdown .search-field[register-user-dialog-component] {
    padding: 0.625rem;
    background-color: var(--grey-light-1);
    border-bottom: 1px solid var(--grey-light-3);
}

.search--dropdown .search-results[register-user-dialog-component] {
    display: block;
}

    .search--dropdown .search-results.scroll[register-user-dialog-component] {
        padding: 0px;
        max-height: calc(50vh - 61px);
    }

    .search--dropdown .search-results .no-result[register-user-dialog-component] {
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-1);
    }

/* 13. MISC */
/** 13.11 Scroll */
.scroll[register-user-dialog-component] {
    width: 100%;
    height: 100%;
    padding: 0 4px;
    overflow: auto;
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
    /* Hide scrollbar but allow scrolling */
}

    .scroll[register-user-dialog-component]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .scroll[register-user-dialog-component]::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll[register-user-dialog-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        .scroll[register-user-dialog-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    .scroll[register-user-dialog-component]::-webkit-scrollbar-corner {
        background: transparent;
    }

    .scroll.scroll--hidden[register-user-dialog-component] {
        padding: 0;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

        .scroll.scroll--hidden[register-user-dialog-component]::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }

.layout--dark .scroll[register-user-dialog-component] {
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .layout--dark .scroll[register-user-dialog-component]::-webkit-scrollbar-thumb {
        background: var(--alpha-light-2);
    }

        .layout--dark .scroll[register-user-dialog-component]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

/** Modifiers */
.shadow-edge-left[register-user-dialog-component],
.shadow-edge-right[register-user-dialog-component] {
    position: relative;
    overflow: hidden;
}

    .shadow-edge-left[register-user-dialog-component]::before, .shadow-edge-left[register-user-dialog-component]::after,
    .shadow-edge-right[register-user-dialog-component]::before,
    .shadow-edge-right[register-user-dialog-component]::after {
        position: absolute;
        top: 0;
        height: 100%;
        width: 1px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    }

    .shadow-edge-left[register-user-dialog-component]::before {
        content: "";
        left: -1px;
    }

    .shadow-edge-right[register-user-dialog-component]::after {
        content: "";
        right: -1px;
    }

/** 13.2 Label */
.label[register-user-dialog-component] {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
}

    .label.label--title[register-user-dialog-component], .label.label--meta[register-user-dialog-component], .label.label--status[register-user-dialog-component] {
        text-transform: uppercase;
        letter-spacing: 0.125em;
    }

    .label.label--meta[register-user-dialog-component], .label.label--status[register-user-dialog-component] {
        font-size: 0.75rem;
        color: var(--grey-1);
    }

    .label.label--icon[register-user-dialog-component] {
        position: relative;
        padding-left: 1.6em;
    }

        .label.label--icon .icon[register-user-dialog-component] {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-width: 1.25em;
            max-height: 1.25em;
        }

            .label.label--icon .icon.icon--sm[register-user-dialog-component] {
                max-width: 0.875em;
                max-height: 0.875em;
            }

    .label.label--menu[register-user-dialog-component] {
        font-weight: 600;
    }

        .label.label--menu[register-user-dialog-component]::after {
            content: "|";
            color: var(--grey-light-3);
            display: inline-block;
            margin: 0 0.375em 0 0.5em;
        }

    .label.label--status .label-value[register-user-dialog-component] {
        text-transform: none;
        letter-spacing: var(--letter-spacing);
    }

    .label.label--color[register-user-dialog-component] {
        position: relative;
        padding-bottom: 6px;
    }

        .label.label--color .label-color[register-user-dialog-component] {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            max-width: 50px;
            height: 4px;
            border-radius: 2px;
        }

/** Layout Theme */
.layout--dark .label.label--title[register-user-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .label.label--meta[register-user-dialog-component] {
    color: #616161;
}

.layout--dark .label.label--menu[register-user-dialog-component]::after {
    color: var(--alpha-light-2);
}

/** 13.8 Modal */
.modal[register-user-dialog-component] {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    direction: column;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    padding: 60px;
    z-index: 9999;
}

    .modal.open[register-user-dialog-component] {
        display: flex;
    }

    .modal.modal--lg .modal-body[register-user-dialog-component] {
        max-width: 1320px;
    }

    .modal.modal--md .modal-body[register-user-dialog-component] {
        max-width: 888px;
    }

    .modal.modal--sm .modal-body[register-user-dialog-component] {
        max-width: 696px;
    }

    .modal .modal-body[register-user-dialog-component] {
        position: relative;
        display: flex;
        padding: 0 60px;
        direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        z-index: 1;
        width: 100%;
    }

    .modal .modal-backdrop[register-user-dialog-component] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(82, 88, 96, 0.45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

/** 13.5 Dialog */
.dialog[register-user-dialog-component] {
    position: relative;
    transition: all var(--transition-duration) ease 0s;
}

    .dialog.dialog--arrow[register-user-dialog-component]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, 0) rotate(45deg);
        width: 12px;
        height: 12px;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-right: none;
        background: var(--grey-light-1);
    }

    .dialog.dialog--arrow.dialog--bottom[register-user-dialog-component]::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .dialog.dialog--arrow.dialog--top[register-user-dialog-component]::before {
        top: auto;
        bottom: 0;
        left: 50%;
        background: #ffffff;
        transform: translate(-50%, 50%) rotate(315deg);
    }

/** 13.5.1 Dialog Class Item */
.dialog--class-item[register-user-dialog-component] {
    width: 100%;
    max-width: 325px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

    .dialog--class-item.dialog--arrow[register-user-dialog-component]::before {
        top: 20px;
    }

    .dialog--class-item .dialog-header[register-user-dialog-component] {
        padding: 15px;
        border-bottom: 1px solid var(--grey-light-3);
        border-radius: 4px 4px 0 0;
        background: var(--grey-light-1);
    }

        .dialog--class-item .dialog-header .label--title[register-user-dialog-component] {
            margin-bottom: 8px;
        }

        .dialog--class-item .dialog-header .menu[register-user-dialog-component] {
            top: -4px;
            right: -6px;
        }

        .dialog--class-item .dialog-header .meta[register-user-dialog-component] {
            font-size: 0.75rem;
        }

    .dialog--class-item .dialog-body[register-user-dialog-component] {
        padding: 0 15px 7px;
    }

        .dialog--class-item .dialog-body > *[register-user-dialog-component] {
            margin: 8px 0;
        }

        .dialog--class-item .dialog-body ul li[register-user-dialog-component] {
            margin: 0.25rem 0;
        }

    .dialog--class-item .label[register-user-dialog-component] {
        font-size: 0.875rem;
    }

        .dialog--class-item .label.label--meta[register-user-dialog-component] {
            font-size: 0.75rem;
        }

    .dialog--class-item ul .label--icon[register-user-dialog-component] {
        font-size: 0.875rem;
    }

    .dialog--class-item ul label[register-user-dialog-component],
    .dialog--class-item ul .link[register-user-dialog-component] {
        font-size: 0.75rem;
    }

    .dialog--class-item ul label[register-user-dialog-component] {
        margin: 0.5em 0;
    }

.layout--dark .dialog--class-item h1[register-user-dialog-component], .layout--dark .dialog--class-item h2[register-user-dialog-component], .layout--dark .dialog--class-item h3[register-user-dialog-component], .layout--dark .dialog--class-item h4[register-user-dialog-component], .layout--dark .dialog--class-item h5[register-user-dialog-component], .layout--dark .dialog--class-item h6[register-user-dialog-component] {
    color: var(--grey-dark-3);
}

.layout--dark .dialog--class-item hr[register-user-dialog-component] {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta-group[register-user-dialog-component]:before {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta[register-user-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .label.label--title[register-user-dialog-component] {
    color: var(--grey-3);
}

.layout--dark .dialog--class-item .label.label--meta[register-user-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .field-check .radiomark[register-user-dialog-component],
.layout--dark .dialog--class-item .field-check .checkmark[register-user-dialog-component] {
    background: #ffffff;
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .field-check .checkmark[register-user-dialog-component] {
    color: #ffffff;
}

.layout--dark .dialog--class-item a.btn[register-user-dialog-component] {
    border-color: var(--grey-light-3);
    background: #ffffff;
}

    .layout--dark .dialog--class-item a.btn:hover[register-user-dialog-component], .layout--dark .dialog--class-item a.btn:focus[register-user-dialog-component], .layout--dark .dialog--class-item a.btn.active[register-user-dialog-component] {
        border-color: transparent;
        background: var(--green);
    }

.layout--dark .dialog--class-item .btn--text:hover[register-user-dialog-component], .layout--dark .dialog--class-item .btn--text:focus[register-user-dialog-component], .layout--dark .dialog--class-item .btn--text.active[register-user-dialog-component] {
    background: var(--alpha-dark-1);
}

.layout--dark .dialog--class-item .user .user-meta > *[register-user-dialog-component] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .avatar[register-user-dialog-component] {
    background: var(--grey-light-3);
}

    .layout--dark .dialog--class-item .avatar > .icon[register-user-dialog-component] {
        fill: var(--grey-1);
    }

/** 13.5.2 Dialog Standard */
.dialog--standard[register-user-dialog-component] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: var(--grey-light-2);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

    .dialog--standard .dialog-header[register-user-dialog-component],
    .dialog--standard .dialog-footer[register-user-dialog-component] {
        padding: 15px;
        min-height: 64px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dialog--standard .dialog-body[register-user-dialog-component] {
        flex: 1 1 auto;
        padding: 10px;
        height: 100%;
        overflow: hidden;
        border-top: 1px solid var(--grey-light-3);
        border-bottom: 1px solid var(--grey-light-3);
    }

        .dialog--standard .dialog-body .container.gutter[register-user-dialog-component] {
            padding: 0.625rem;
        }

        .dialog--standard .dialog-body .title[register-user-dialog-component] {
            margin: 0.625rem 0.875rem 0;
        }

        .dialog--standard .dialog-body .scroll[register-user-dialog-component] {
            flex: 1 1 auto;
            min-height: 0;
        }

.layout--dark .dialog--standard[register-user-dialog-component] {
    background: var(--grey-dark-4);
}

    .layout--dark .dialog--standard .dialog-body[register-user-dialog-component] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .dialog--standard .dialog-header[register-user-dialog-component],
    .layout--dark .dialog--standard .dialog-footer[register-user-dialog-component] {
        background: var(--alpha-light-1);
    }

/** 13.5.2 Dialog Class */
.dialog--class[register-user-dialog-component] {
    position: relative;
    width: 100%;
    max-width: 400px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

    .dialog--class.dialog--bottom[register-user-dialog-component], .dialog--class.dialog--top[register-user-dialog-component], .dialog--class.dialog--center[register-user-dialog-component] {
        position: relative;
        left: 50%;
    }

    .dialog--class.dialog--bottom[register-user-dialog-component] {
        transform: translate(-50%, 30px);
    }

    .dialog--class.dialog--top[register-user-dialog-component] {
        transform: translate(-50%, calc(-100% - 66px));
    }

    .dialog--class.dialog--center[register-user-dialog-component] {
        transform: translate(-50%, -50%);
    }

        .dialog--class.dialog--center.dialog--arrow[register-user-dialog-component]::before {
            content: none;
        }

    .dialog--class.dialog--arrow[register-user-dialog-component]::before {
        background: #f2f2f2;
    }

    .dialog--class .dialog-body[register-user-dialog-component] {
        height: 100%;
    }

        .dialog--class .dialog-body .summary-class-table[register-user-dialog-component] {
            height: 100%;
            margin: 0;
            border: none;
            border-radius: 4px 4px 0 0;
        }

            .dialog--class .dialog-body .summary-class-table .summary-class-table-header[register-user-dialog-component] {
                border-color: var(--grey-light-3);
                background: var(--alpha-dark-1);
            }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text:hover[register-user-dialog-component], .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text.active[register-user-dialog-component] {
                    background: var(--alpha-dark-1);
                }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .label[register-user-dialog-component] {
                    font-weight: 600;
                    color: var(--grey-dark-4);
                }

            .dialog--class .dialog-body .summary-class-table .meta[register-user-dialog-component] {
                color: var(--grey-3);
            }

        .dialog--class .dialog-body .table--summary .label[register-user-dialog-component] {
            color: var(--grey-1);
        }

        .dialog--class .dialog-body .table--summary td[register-user-dialog-component] {
            color: var(--grey-dark-4);
        }

        .dialog--class .dialog-body .table--summary th[register-user-dialog-component] {
            color: var(--grey-1);
            background: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table--summary tr:not(:last-child)[register-user-dialog-component] {
            border-color: #ffffff;
        }

        .dialog--class .dialog-body .table .th--highlight[register-user-dialog-component] {
            color: var(--green);
            background: #f4fcf9;
            border-color: #a8d7c4;
        }

        .dialog--class .dialog-body .table .td--link:hover[register-user-dialog-component] {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table .tr--highlight th[register-user-dialog-component] {
            background-color: var(--alpha-dark-2);
        }

        .dialog--class .dialog-body .table .tr--highlight td[register-user-dialog-component] {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .scroll[register-user-dialog-component] {
            scrollbar-color: var(--alpha-dark-1) transparent;
            padding: 1px 1px 1px 0;
        }

            .dialog--class .dialog-body .scroll[register-user-dialog-component]::-webkit-scrollbar-thumb {
                background: var(--alpha-dark-2);
            }

                .dialog--class .dialog-body .scroll[register-user-dialog-component]::-webkit-scrollbar-thumb:hover {
                    background: var(--green);
                }
/*# sourceMappingURL=theme.css.map */

[register-user-dialog-component] .container.gutter {
    margin-top: 0.625rem !important;
    margin-bottom: 0.625rem !important;
}
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/Views/BasicInformation/BasicInformation.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/Views/ContactInformation/ContactInformation.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/Views/RoleInformation/RoleInformation.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/Views/SchoolInfomation/EmployeeSchoolInformation.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/Views/SchoolInfomation/SchoolInformation.razor.rz.scp.css */
.preferred-classroom-input[register-user-dialog-component] {
    padding-top: 0.5rem;
}
/* /Pages/Admin/UsersManagement/Users/Components/RegisterUserDialog/Views/SchoolInfomation/StudentSchoolInformation.razor.rz.scp.css */
/* /Pages/Admin/UsersManagement/Users/Page/Users.razor.rz.scp.css */
.header-container[administrator-users-table-component] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[administrator-users-table-component] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

    .users-table-toolbar[administrator-users-table-component]  .btn {
        height: 39px;
    }

.search-input-container[administrator-users-table-component]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

    .search-input-container[administrator-users-table-component]  .search--small .search-field input {
        height: 39px;
        background: #fff;
        border: 1px solid var(--grey-light-3);
    }

.users-table-filter[administrator-users-table-component] {
    margin-right: 0.5rem;
}

[administrator-users-table-component] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/Common/Error.razor.rz.scp.css */

/* /Pages/Common/MyProfile/Page/AdministratorMyProfile.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Components/AddPreferredClassroomDialog/AddPreferredClassroomDialog.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Components/ClassroomsTable/ClassroomsTable.razor.rz.scp.css */
.search-wrapper[classrooms-table-component] {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.search-wrapper[classrooms-table-component]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: 0 0 6px 0;
}
.search-wrapper[classrooms-table-component]  .search--small .search-field input {
    height: 36px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}
.search-wrapper[classrooms-table-component]  .btn {
    height: 36px;
}

[classrooms-table-component] .card--profile {
    height: 100% !important;
}

.spinner-wrapper[classrooms-table-component] {
    height: 100vh !important;
    border: none;
}
.spinner-container[classrooms-table-component] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-wrapper[classrooms-table-component] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-left: auto;
}

.filter-wrapper[classrooms-table-component]  .field-group {
    min-width: 190px;
}
/* /Pages/Common/Profile/Base/Components/PreferredClassroomDialog/PreferredClassroomDialog.razor.rz.scp.css */
[preferred-classroom-dialog-view] .table-wrapper .table-wrapper-card {
    height: 70vh;
}
/* /Pages/Common/Profile/Base/Views/AttachmentContainer/AttachmentContainer.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/AttachmentUpload/AttachmentUpload.razor.rz.scp.css */
.attachment-selection[attachment-upload-view] {
    padding: 1rem;
}

    .attachment-selection .view-file[attachment-upload-view] {
        min-height: 60vh;
        height: 100%;
        max-height: 80vh;
    }
/* /Pages/Common/Profile/Base/Views/AttachmentUploadDialog/AttachmentUploadDialog.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ClassroomCard/ClassroomCard.razor.rz.scp.css */
.classroom-card[classroom-card-view] {
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
    border: 1px solid #E1E1E1;
    border-radius: 0.25rem;
    background-color: white;
    user-select: none;
}
    .classroom-card .classroom-badge[classroom-card-view] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        background-color: #27BF81;
        color: white;
        font-size: 1rem;
        font-weight: 600;
        line-height: 21.79px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color var(--transition-duration)ease 0s;
    }
        .classroom-card .classroom-badge:hover[classroom-card-view] {
            background-color: #323232;
        }
        .classroom-card .classroom-badge[classroom-card-view]  .pill {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            color: white;
            font-size: 1rem;
            font-weight: 600;
            line-height: 21.79px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    .classroom-card .classroom-details[classroom-card-view] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
        .classroom-card .classroom-details .classroom-name[classroom-card-view] {
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 19.07px;
            color: #414141;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .classroom-card .classroom-details .building-name[classroom-card-view] {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 16.34px;
            color: #A4A4A4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    .classroom-card .remove-button[classroom-card-view] {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        margin-left: auto;
        border: none;
        background: none;
        color: #888888;
        font-size: 1.5rem;
        cursor: pointer;
        transition: background-color var(--transition-duration) ease 0s, color var(--transition-duration) ease 0s;
    }
        .classroom-card .remove-button:hover[classroom-card-view] {
            color: #323232;
            background-color: var(--grey-light-1);
        }
/* /Pages/Common/Profile/Base/Views/ClassroomCard/ClassroomCardPillTooltip.razor.rz.scp.css */
.classroom-tooltip-container[classroom-card-pill-tooltip-view] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 16rem;
}
    .classroom-tooltip-container .classroom-tooltip-container-header[classroom-card-pill-tooltip-view] {
        font-size: 0.875rem; 
        font-weight: 600; 
        line-height: 19.07px; 
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
    .classroom-tooltip-container .classroom-tooltip-container-row[classroom-card-pill-tooltip-view] {
        display: flex;
        flex-direction: column;
    }
        .classroom-tooltip-container .classroom-tooltip-container-row .classroom-tooltip-row-title[classroom-card-pill-tooltip-view] {
            font-size: 0.625rem; 
            font-weight: 400; 
            line-height: 16.34px; 
            color: var(--grey-2);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            text-transform: uppercase;
        }
        .classroom-tooltip-container .classroom-tooltip-container-row .classroom-tooltip-row-text[classroom-card-pill-tooltip-view] {
            font-size: 0.75rem; 
            font-weight: 400; 
            line-height: 16.34px; 
            color: var(--grey-light-2);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }
/* /Pages/Common/Profile/Base/Views/ClassroomCard/PreferredClassroomInputField.razor.rz.scp.css */
.classroom-card-placeholder[classroom-input-field-view] {
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
    border: 1px solid #E1E1E1;
    border-radius: 0.25rem;
    background-color: transparent;
    user-select: none;
}
    .classroom-card-placeholder .classroom-badge-placeholder[classroom-input-field-view] {
        width: 42px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        background-color: white;
        color: #323232;
        font-size: 1rem;
        font-weight: 600;
        line-height: 21.79px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color var(--transition-duration)ease 0s;
    }
        .classroom-card-placeholder .classroom-badge-placeholder .add-button[classroom-input-field-view] {
            width: 1.5rem;
            height: 1.5rem;
            padding: 0;
            border: none;
            background: none;
            color: #888888;
            font-size: 1.5rem;
            cursor: pointer;
            transition: background-color var(--transition-duration) ease 0s, color var(--transition-duration) ease 0s;
        }
            .classroom-card-placeholder .classroom-badge-placeholder .add-button:hover[classroom-input-field-view] {
                color: #323232;
                background-color: var(--grey-light-1);
            }
            .classroom-card-placeholder .classroom-badge-placeholder .add-button span[classroom-input-field-view] {
                transform: rotate(45deg);
            }
    .classroom-card-placeholder .classroom-details-placeholder[classroom-input-field-view] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
        .classroom-card-placeholder .classroom-details-placeholder .classroom-name-placeholder[classroom-input-field-view] {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 16.34px;
            color: #A4A4A4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
/* /Pages/Common/Profile/Base/Views/ContactCard/ContactCard.razor.rz.scp.css */
/* Common CSS */

.card-container[contact-card-view] {
    background-color: #FFFFFF;
    box-shadow: 0 3px 6px #0000000F;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
}

.header-container .name[contact-card-view] {
    font-size: 1.125rem;
    color: var(--grey-dark-4);
    font-weight: 600;
}

.relationship[contact-card-view] {
    font-size: 0.875rem;
    color: var(--grey-1);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

    .header-container .action-menu[contact-card-view] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }

.gray-text[contact-card-view] {
    font-size: 0.875rem;
    color: var(--grey-3);
}

.gray-text-capitalized[contact-card-view] {
    font-size: 0.875rem;
    color: var(--grey-3);
    text-transform: capitalize;
}

.green-text[contact-card-view] {
    font-size: 0.875rem;
    color: var(--green);
}

.inline-text[contact-card-view] {
    display: flex;
    align-items: center;
}

    .inline-text .icon[contact-card-view] {
        margin-right: 0.25rem;
    }

        .inline-text .icon[contact-card-view]  > svg {
            width: 1rem;
            height: 1rem;
            fill: var(--green);
        }

/* 'Small'-specific CSS */

.card-container.small[contact-card-view] {
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
}

    .card-container.small[contact-card-view]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0.25rem;
        background-color: var(--grey-dark-4);
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .card-container.small .relationship[contact-card-view] {
        margin-bottom: 0.875rem;
    }

    .card-container.small .header-container[contact-card-view] {
        display: flex;
        justify-content: space-between;
    }

/* 'Large'-specific CSS */

    .card-container.large .header-container[contact-card-view] {
        display: flex;
        padding: 0.75rem 1.5rem;
    }

        .card-container.large .header-container .name-relationship-container[contact-card-view] {
            display: flex;
            flex-direction: column;
        }

    .card-container.large .ribbon[contact-card-view] {
        width: 100%;
        background-color: var(--grey-light-2);
        text-align: right;
        padding: 0.375rem 1rem;
        font-size: 0.75rem;
        color: var(--grey-2);
        letter-spacing: 1.2px;
        text-transform: uppercase;
        position: relative;
        margin-top: 1rem;
    }

    .card-container.large .details[contact-card-view] {
        padding: 1.5rem;
    }

        .card-container.large .details .section[contact-card-view] {
            margin-bottom: 0.5rem;
        }

            .card-container.large .details .section .section-title[contact-card-view] {
                font-size: 0.875rem;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: #888888bf;
                margin-bottom: 0.5rem;
            }
/* /Pages/Common/Profile/Base/Views/ContactDetailsDialog/ContactDetailsDialog.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/DocumentInfoCard/DocumentInfoCard.razor.rz.scp.css */
.document-card[document-info-card-view] {
    padding: 0.5rem 0.75rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    background: white;
    cursor: pointer;
    transition: all var(--transition-duration) ease 0s;
}

    .document-card:hover[document-info-card-view], .document-card:focus[document-info-card-view], .document-card.active[document-info-card-view] {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        border: 1px solid var(--grey-light-3);
    }

.document-info-btn[document-info-card-view] > .btn--circle {
    border: none;
    background: none;
}

    .document-info-btn[document-info-card-view] > .btn--circle:hover {
        color: var(--green);
        background-color: var(--grey-light-2);
    }
/* /Pages/Common/Profile/Base/Views/DocumentInfoDialog/DocumentInfoDialog.razor.rz.scp.css */
/* NOTE: This fixes the DocumentPreview sizing issue. */
.body-container[document-info-dialog-view] {
    border-radius: 0.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    .body-container[document-info-dialog-view]  .document-preview {
        height: 100%;
    }

    .body-container[document-info-dialog-view]  .document {
        height: 95%;
    }

    .body-container[document-info-dialog-view]  .document-body {
        height: 100%;
    }

.document-info-dialog-header[document-info-dialog-view] {
    display: flex;
    align-items: center;
}

.actions-container[document-info-dialog-view] {
    width: 100%;
    background-color: white;
    padding: 3px;
    border-bottom: 1px solid var(--grey-light-3);
}

.action-buttons[document-info-dialog-view] > .btn--circle {
    border: none;
    background: none;
}

    .action-buttons[document-info-dialog-view] > .btn--circle:hover {
        color: var(--green);
        background-color: var(--grey-light-2);
    }

.document-type[document-info-dialog-view] {
    font-size: 0.875rem;
    letter-spacing: 1.4px;
    color: var(--grey-3);
    text-transform: uppercase;
    margin-left: 0.625rem;
}

.document-info-container[document-info-dialog-view] {
    background-color: var(--grey-light-1);
    padding: 0.875rem;
}

.document-preview[document-info-dialog-view] {
    background-color: var(--grey-dark-3);
    min-height: 50px;
}
/* /Pages/Common/Profile/Base/Views/DocumentInfoItem/DocumentInfoItem.razor.rz.scp.css */

.document-name[document-info-item-view] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--grey-dark-4);
}

.document-details-container[document-info-item-view] {
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.document-file-container[document-info-item-view], .document-name[document-info-item-view] {
    line-height: 1;
}

.document-file-value[document-info-item-view] {
    font-size: 0.75rem;
    color: var(--grey-3);
}

.document-name[document-info-item-view], .document-file-value[document-info-item-view] {
    margin: 0;
}

.document-file-label[document-info-item-view] {
    font-size: 0.75rem;
    color: var(--grey-1);
}

.download-icon[document-info-item-view], .print-icon[document-info-item-view] {
    width: 1rem;
    height: 1rem;
    color: var(--grey-3);
}

.download-icon[document-info-item-view] {
    margin-right: 1rem;
}

.document-type-icon[document-info-item-view] {
    width: 1.5rem;
    height: 1.875rem;
    flex-shrink: 0;
}
/* /Pages/Common/Profile/Base/Views/EmergencyContactDialog/EmergencyContactDialog.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/EmergencyContactDialog/EmergencyContactDialogDetails.razor.rz.scp.css */
.emergency-contact-details[emergency-contact-dialog-details-view] {
    margin-top: 1rem;
}

.contact-section-dropdown[emergency-contact-dialog-details-view] {
    margin-left: 0.75rem;
}

.button-label[emergency-contact-dialog-details-view] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
    color: var(--grey-3);
    text-transform: capitalize;
    font-weight: 600;
}

.card[emergency-contact-dialog-details-view] {
    padding: 1rem !important;
}

.card-background-color[emergency-contact-dialog-details-view] {
    background-color: var(--grey-light-1);
}
/* /Pages/Common/Profile/Base/Views/GradebookDialog/GradebookDialog.razor.rz.scp.css */
.heading-container[gradebook-dialog-view] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.body-content[gradebook-dialog-view] {
    background: var(--grey-light-2);
    border-radius: 0 0 0.25rem 0.25rem;
    height: 50vh;
}

.no-data[gradebook-dialog-view] {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--grey-1);
}
/* /Pages/Common/Profile/Base/Views/LearningPlan/StudentLearningPlan.razor.rz.scp.css */
.student-learning-plan[b-n39wwhhugv] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
}

.student-learning-plan-wrapper[b-n39wwhhugv] {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.student-learning-plan-course[b-n39wwhhugv] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.course-info[b-n39wwhhugv] {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.icon[b-n39wwhhugv]  svg {
    width: 18px;
}

.course-name[b-n39wwhhugv] {
    color: #BCBCBC;
    font-size: 14px;
    line-height: 100%;
    font-weight: 600;
    margin-top: 1px;
}

.plan-name[b-n39wwhhugv] {
    font-size: 16px;
    color: #323232;
    line-height: 14px;
    font-weight: 600;
}

.file[b-n39wwhhugv] {
    display: flex;
    align-items: center;
}

.file-wrapper[b-n39wwhhugv] {
    padding: 5px;
    border-radius: 5px;
    background: #F2F2F2;
    height: 30px;
    cursor: pointer;
}
/* /Pages/Common/Profile/Base/Views/LinkParentDialog/LinkParentDialog.razor.rz.scp.css */
.link-parent-dialog-separator[link-parent-dialog-view] {
    position: relative;
    width: 100%;
    height: 4rem;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.125em;
    color: var(--grey-1);
}

.link-parent-dialog-separator-line[link-parent-dialog-view] {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    width: calc(100% - 1.25rem);
    height: 1px;
    background-color: var(--grey-light-3);
}

.link-parent-dialog-separator-text[link-parent-dialog-view] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--grey-light-2);
    padding: 1rem;
}

.link-parent-dialog-action-buttons[link-parent-dialog-view] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
/* /Pages/Common/Profile/Base/Views/LinkParentDialog/LinkParentDialogDetails.razor.rz.scp.css */
.link-parent-details[link-parent-dialog-details-view] {
    margin-top: 1rem;
}

.link-parent-details .container[link-parent-dialog-details-view] {
    padding: 0rem 0.625rem !important;
}

.section-title[link-parent-dialog-details-view] {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.125em;
    color: var(--grey-1);
    padding: 0 10px;
}
/* /Pages/Common/Profile/Base/Views/LinkParentDialog/LinkParentDialogSearch.razor.rz.scp.css */
.search-container[link-parent-dialog-search-view] {
    position: relative;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 10px;
    margin-top: 1rem;
}

.search-results-container[link-parent-dialog-search-view] {
    position: absolute;
    top: 2.75rem;
    left: 10px;
    width: calc(100% - 20px);
    max-height: 10rem;
    border: 1px solid var(--gray-light-2);
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: white;
}

.search-results-list[link-parent-dialog-search-view] {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 10rem;
    background: white;
    font-size: 0.875rem;
}

.selected-item-container[link-parent-dialog-search-view] {
    width: 100%;
    height: 8rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey-light-3);
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

    .selected-item-container .empty-value[link-parent-dialog-search-view] {
        text-align: center;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 1.2px;
        color: var(--grey-2);
    }

.selected-item[link-parent-dialog-search-view] {
    display: flex;
    width: 100%;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.selected-item-avatar[link-parent-dialog-search-view] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.selected-item-avatar[link-parent-dialog-search-view]  .avatar {
    width: 4rem;
    height: 4rem;
}

.selected-item-info[link-parent-dialog-search-view] {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    padding: 0.75rem 0rem;
}

.selected-item-info-name[link-parent-dialog-search-view] {
    font-size: 1.125rem;
    font-weight: 600;
}

.selected-item-info-row[link-parent-dialog-search-view] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.selected-item-info-row-item[link-parent-dialog-search-view] {
    display: flex;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.selected-item-info-tag[link-parent-dialog-search-view] {
    color: var(--grey-2);
}

.selected-item-info-value[link-parent-dialog-search-view] {
    color: var(--black);
}

.selected-item-info-address[link-parent-dialog-search-view] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--grey-2);
}

    .selected-item-info-address .icon[link-parent-dialog-search-view] {
        margin-right: 5px;
    }

        .selected-item-info-address .icon[link-parent-dialog-search-view]  > svg {
            width: 1rem;
            height: 1rem;
            fill: var(--green);
        }

.selected-item-actions[link-parent-dialog-search-view] {
    display: flex;
    margin: 0.5rem;
}

.selected-item-actions[link-parent-dialog-search-view]  .btn {
    border: none;
}
/* /Pages/Common/Profile/Base/Views/LinkParentDialog/LinkParentDialogSearchResult.razor.rz.scp.css */
.item[link-parent-dialog-search-result-view] {
    display: flex;
    gap: 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background: transparent;
    border: 1px solid var(--grey-light-2);
    cursor: pointer;
}

    .item:hover[link-parent-dialog-search-result-view] {
        background: var(--grey-light-2);
    }

.item-icon[link-parent-dialog-search-result-view] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 2.5rem;
    margin-left: 1rem;
    color: var(--grey-2);
}

    .item-icon > svg[link-parent-dialog-search-result-view] {
        align-content: center;
    }

.item-container[link-parent-dialog-search-result-view] {
    display: flex;
    gap: 0.25rem;
}

.item-tag[link-parent-dialog-search-result-view] {
    color: var(--grey-2);
}

.item-value[link-parent-dialog-search-result-view] {
    color: var(--black);
}
/* /Pages/Common/Profile/Base/Views/ParentCard/ParentCard.razor.rz.scp.css */
.parent-card[parent-card-view] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
    position: relative;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    background-color: var(--grey-light-2);
    border: 1px solid transparent;
    border-radius: 0.25rem;
    overflow: hidden;
    transition: all var(--transition-duration) ease 0s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.parent-card:hover[parent-card-view] {
    background-color: var(--grey-light-1);
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    border-radius: 0.25rem;
}

    .parent-card .parent-avatar[parent-card-view] {
        display: flex;
        flex-direction: column;
    }

    .parent-card .parent-details[parent-card-view] {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        margin-top: 0.25rem;
    }

        .parent-card .parent-details .parent-details-title[parent-card-view] {
            line-height: 0.875rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--grey-dark-4);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .parent-card .parent-details .parent-details-subtitle[parent-card-view] {
            font-size: 0.75rem;
            color: var(--grey-2);
            text-transform: capitalize;
        }

        .parent-card .parent-details .parent-details-subtitle .parent-relationship[parent-card-view] {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .parent-card:hover .parent-details .parent-details-subtitle .parent-relationship[parent-card-view] {
            display: none;
        }

        .parent-card .parent-details .parent-details-subtitle .parent-contact-type[parent-card-view] {
            display: none;
        }

        .parent-card:hover .parent-details .parent-details-subtitle .parent-contact-type[parent-card-view] {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .parent-card .parent-action[parent-card-view] {
        display: none;
    }

        .parent-card:hover .parent-action[parent-card-view] {
            display: block;
        }
/* /Pages/Common/Profile/Base/Views/ParentDetailsCard/ParentDetailsCard.razor.rz.scp.css */
.card-container[parent-details-card-view] {
    background-color: #FFFFFF;
    box-shadow: 0 3px 6px #0000000F;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
}

    .card-container .header-container[parent-details-card-view] {
        display: flex;
        padding: 0.75rem 1.25rem;
    }

        .card-container .header-container .name-relationship-container[parent-details-card-view] {
            display: flex;
            flex-direction: column;
        }

            .card-container .header-container .name-relationship-container .name[parent-details-card-view] {
                font-size: 1.125rem;
                color: var(--grey-dark-4);
                font-weight: 600;
            }

            .card-container .header-container .name-relationship-container .relationship[parent-details-card-view] {
                font-size: 0.875rem;
                color: var(--grey-1);
                text-transform: uppercase;
                letter-spacing: 1.4px;
            }

        .card-container .header-container .action-menu[parent-details-card-view] {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-left: auto;
        }

    .card-container .ribbon[parent-details-card-view] {
        width: 100%;
        background-color: var(--grey-light-2);
        text-align: right;
        padding: 0.375rem 1rem;
        font-size: 0.75rem;
        color: var(--grey-2);
        letter-spacing: 1.2px;
        text-transform: uppercase;
        position: relative;
        margin-top: 1rem;
    }

    .card-container .details[parent-details-card-view] {
        padding: 1.5rem;
    }

        .card-container .details .section[parent-details-card-view] {
            margin-bottom: 0.5rem;
        }

            .card-container .details .section .section-title[parent-details-card-view] {
                font-size: 0.875rem;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: #888888bf;
                margin-bottom: 0.5rem;
            }

            .card-container .details .section .gray-text[parent-details-card-view] {
                font-size: 0.875rem;
                color: var(--grey-3);
            }

            .card-container .details .section .gray-text-capitalized[parent-details-card-view] {
                font-size: 0.875rem;
                color: var(--grey-3);
                text-transform: capitalize;
            }

            .card-container .details .section .green-text[parent-details-card-view] {
                font-size: 0.875rem;
                color: var(--green);
            }

            .card-container .details .section .black-text[parent-details-card-view] {
                font-size: 0.875rem;
                color: var(--black);
            }

            .card-container .details .section .inline-text[parent-details-card-view] {
                display: flex;
                align-items: center;
            }

                .card-container .details .section .inline-text .icon[parent-details-card-view] {
                    margin-right: 0.25rem;
                }

                .card-container .details .section .inline-text .icon[parent-details-card-view]  > svg {
                    width: 1rem;
                    height: 1rem;
                    fill: var(--green);
                }

.contact-details-avatar[parent-details-card-view] {
    margin-right: 1rem;
    display: flex;
    align-items: center;
}

[parent-details-card-view] .contact-details-avatar .avatar {
    height: 2.5rem;
    width: 2.5rem;
    border: 2px solid var(--grey-1);
}

.contact-icons-container[parent-details-card-view] {
    background-color: var(--grey-dark-4);
    height: 3.75rem;
    border-radius: 0 60px 60px 0;
    position: absolute;
    left: 0;
    top: -50%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
}

[parent-details-card-view] .contact-icons-container .btn {
    border: 2px solid var(--grey-light-1);
    background-color: var(--grey-dark-4);
    width: 2.25rem;
    height: 2.25rem;
}

    [parent-details-card-view] .contact-icons-container .btn .icon {
        color: var(--grey-light-1);
    }

    [parent-details-card-view] .contact-icons-container .btn:hover {
        background-color: var(--grey-light-1);
    }

        [parent-details-card-view] .contact-icons-container .btn:hover .icon {
            color: var(--grey-dark-4);
        }
/* /Pages/Common/Profile/Base/Views/ParentDetailsDialog/ParentDetailsDialog.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ParentRelationship/ParentRelationship.razor.rz.scp.css */
.parent-relationship-container[parent-relationship-view] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.parent-relationship-container-title[parent-relationship-view] {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #A4A4A4;
    font-size: 0.75rem;
}

.parent-relationship-container-items[parent-relationship-view] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.parent-relationship-container-buttons[parent-relationship-view] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}


    .parent-relationship-container-buttons[parent-relationship-view]  .btn--primary {
        color: var(--green);
        border: 2px solid var(--green);
        background: white;
        overflow: hidden;
    }

        .parent-relationship-container-buttons[parent-relationship-view]  .btn--primary:hover {
            color: white;
            border: 2px solid var(--green);
            background: var(--green);
            overflow: hidden;
        }
/* /Pages/Common/Profile/Base/Views/ProfileAvatar/ProfileAvatar.razor.rz.scp.css */
.profile-avatar-container[profile-avatar-view] {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    gap: 1rem;
}

    .profile-avatar-container[profile-avatar-view]  .avatar {
        margin-top: 1rem;
        width: 8rem;
        height: 8rem;
    }

    .profile-avatar-container .user-info[profile-avatar-view] {
        line-height: 1.4;
        max-width: 100%;
    }

        .profile-avatar-container .user-info > *:last-child[profile-avatar-view] {
            display: block;
            font-size: 0.75rem;
            color: var(--grey-1);
            font-weight: var(--font-weight);
        }

        .profile-avatar-container .user-info .text-overflow[profile-avatar-view] {
            display: block;
        }

        .profile-avatar-container .user-info .user-role[profile-avatar-view] {
            text-transform: uppercase;
            letter-spacing: 0.125em;
        }

    .profile-avatar-container .contact-buttons[profile-avatar-view] {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

    .profile-avatar-container .contact-buttons[profile-avatar-view]  .btn--circle {
        width: 2.25rem;
        height: 2.25rem;
        color: var(--green);
        border: 2px solid var(--green);
    }

        .profile-avatar-container .contact-buttons[profile-avatar-view]  button .icon {
            color: var(--green);
        }

        .profile-avatar-container .contact-buttons[profile-avatar-view]  button:hover .icon {
            color: white;
        }
/* /Pages/Common/Profile/Base/Views/ProfileDetails/AdministratorProfileDetails.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ProfileDetails/StudentProfileDetails.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ProfileDetails/TeacherProfileDetails.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Common/ProfileDetailsContainer.razor.rz.scp.css */
.user-profile-details-container[profile-details-container-view] {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Header/ProfileDetailsHeader.razor.rz.scp.css */
.header[profile-details-header-view] {
    display: flex;
    flex-direction: row;
    margin: 1rem 0 1rem 0.825rem;
}

    .header .header-buttons[profile-details-header-view] {
        margin-left: auto;
    }

        .header .header-buttons[profile-details-header-view]  .header-button {
            margin: 0 0.25rem;
            line-height: 1.2;
        }
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/AboutMeSection/AboutMeSection.razor.rz.scp.css */
.readonly-label-title[about-me-section-view] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/AddressSection/AddressSection.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/BasicSection/BasicSection.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/ContactSection/Item/ContactSectionEmailItem.razor.rz.scp.css */
.email-item[contact-section-email-view]  .readonly-label .value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--green);
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/ContactSection/Item/ContactSectionPhoneItem.razor.rz.scp.css */
.phone-item[contact-section-phone-view]  .readonly-label .value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--green);
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/ContactSection/View/ContactSection.razor.rz.scp.css */
.contact-section-dropdown[contact-section-view] {
    margin-left: 1rem;
}

.button-label[contact-section-view] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
    color: var(--grey-3);
    text-transform: capitalize;
    font-weight: 600;
}

.card-background-color[contact-section-view] {
    background-color: var(--grey-light-1);
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/EducationSection/EducationSection.razor.rz.scp.css */
.education-section[education-section-view] {
    display: flex;
    flex-direction: column;
    padding: 0 0.625rem;
}

    .education-section .action[education-section-view] {
        padding: 1rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        font-size: 0.825rem;
        color: var(--grey-3);
        background-color: var(--grey-light-1);
        margin-top: 0.5rem;
    }

        .education-section .action .button-text[education-section-view] {
            align-items: center;
            display: flex;
            margin-left: 0.5rem;
        }
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/EducationSection/EducationSectionItem.razor.rz.scp.css */
.education-section-item[education-section-item-view] {
    padding: 0.5rem;
    box-sizing: border-box;
    margin-top: 1.5rem;
    background: var(--grey-light-2);
    border: 1px solid var(--grey-light-4);
    border-radius: 0.25rem;
}

    .education-section-item .header[education-section-item-view] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0;
        margin-top: -1.5rem;
        line-height: 2rem;
    }

        .education-section-item .header .header-text[education-section-item-view] {
            font-size: 0.875rem;
            background-color: var(--grey-light-2);
            padding: 0 0.625rem;
            color: var(--grey-1);
            display: flex;
            align-items: center;
        }

        .education-section-item .header[education-section-item-view]  .remove-button {
            background: var(--grey-light-2);
            border: none;
            font-size: 1rem;
            color: var(--grey-1);
        }

            .education-section-item .header[education-section-item-view]  .remove-button:hover {
                color: var(--red);
            }

    .education-section-item .education-section-row > *[education-section-item-view] {
        padding: 0.275rem 0.625rem;
    }
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/MedicalHistorySection/MedicalHistorySection.razor.rz.scp.css */
textarea[medical-history-section-view] {
    resize: none;
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/SchoolSection/AdministratorSchoolSection.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/SchoolSection/StudentSchoolSection.razor.rz.scp.css */
.programs-container[student-school-section-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* /Pages/Common/Profile/Base/Views/ProfileDetails/Views/Sections/SchoolSection/TeacherSchoolSection.razor.rz.scp.css */
[teacher-school-section-view] .school-subject {
    flex-flow: row !important;
    gap: 8px;
    max-height: 470px;
}

    [teacher-school-section-view] .school-subject .checkbox-group:nth-child(2) .items {
        overflow: auto;
    }

li[teacher-school-section-view] {
    font-size: 1.125rem;
    color: var(--grey-dark-3);
    font-weight: 600;
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 8px;
}
/* /Pages/Common/Profile/Base/Views/ProfileMenu/ProfileMenu.razor.rz.scp.css */
.profile-menu-container[b-iwewzbf760] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-menu-container-title[b-iwewzbf760] {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #A4A4A4;
    font-size: 0.75rem;
}

.profile-menu-container-items > ul[b-iwewzbf760] {
    display: flex;
    flex-direction: column;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.profile-menu-container-items > ul > li > div[b-iwewzbf760] {
    width: 100%;
    height: 2.5rem;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-left: 4px solid transparent;
}
.profile-menu-container-items > ul > li > div:hover[b-iwewzbf760]
{
    background-color: #F6F6F6;
}

.profile-menu-container-items > ul > li > div > div[b-iwewzbf760] {
    font-size: 14px;
    color: #323232;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.profile-menu-container-items > ul > li > div[b-iwewzbf760]  svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.profile-menu-container-items > ul > li > div.selected[b-iwewzbf760] {
    border-left: 4px solid #27BF81;
}

.profile-menu-container-items > ul > li > div.selected[b-iwewzbf760]  svg {
    color: #27BF81;
}
/* /Pages/Common/Profile/Base/Views/ProfilePageLayout/ProfilePageLayout.razor.rz.scp.css */
.profile-page-layout-container[profile-page-layout-view] {
    height: calc(100vh - 111px);
    padding: 2rem;
    overflow: auto;
}

.profile-page-layout[profile-page-layout-view] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid var(--grey-light-4);
    border-radius: 5px;
    overflow: hidden;
}

.profile-page-layout-top-column[profile-page-layout-view] {
    display: flex;
    justify-content: space-between;
    height: 60px;
    padding: 0.5rem;
    background-color: white;
    border-bottom: 1px solid var(--grey-light-4);
}

    .profile-page-layout-top-column[profile-page-layout-view]  .btn--circle {
        margin-left: 0.5rem;
    }

    .profile-page-layout-top-column .profile-completeness-container[profile-page-layout-view] {
        display: flex;
        align-items: center;
    }

    .meta-list[profile-page-layout-view] {
        margin-left: auto;
        margin-right: 1rem;
    }

.profile-page-layout-bottom-columns[profile-page-layout-view] {
    display: flex;
    width: 100%;
    height: 100%;
}

.profile-page-layout-left-sidebar[profile-page-layout-view],
.profile-page-layout-body[profile-page-layout-view],
.profile-page-layout-right-sidebar[profile-page-layout-view] {
    padding: 10px;
}

.profile-page-layout-left-sidebar[profile-page-layout-view] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 18%;
    min-width: 169px;
    background-color: #FFFFFF;
    border-right: 1px solid var(--grey-light-4);
    padding: 1.25rem;
}

.profile-page-layout-body[profile-page-layout-view] {
    display: flex;
    flex-direction: row;
    width: 47%;
    background-color: var(--grey-light-2);
}
.profile-page-layout-body-expanded[profile-page-layout-view] {
    width: 82%;
}

.profile-page-layout-right-sidebar[profile-page-layout-view] {
    display: flex;
    flex-direction: column;
    width: 35%;
    background-color: var(--grey-light-3);
}

.profile-page-layout-right-sidebar-collapsed[profile-page-layout-view] {
    display: none;
}

    .profile-page-layout-right-sidebar[profile-page-layout-view] >  .tabs {
        height: 100%;
        overflow: hidden;
        padding-bottom: 3.25rem;
    }

        .profile-page-layout-right-sidebar[profile-page-layout-view] >  .tabs .tabs-body {
            margin-top: 1rem;
            height: 100%
}

            .profile-page-layout-right-sidebar[profile-page-layout-view] >  .tabs .tabs-body .tabs-content {
                height: 100%
            }

/* Course tiles display adjustment */
.profile-page-layout[profile-page-layout-view]  .tile--class {
    padding: 0.5rem 0.75rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    background: white;
    cursor: auto;
    transition: all var(--transition-duration) ease 0s;
}

    .profile-page-layout[profile-page-layout-view]  .tile--class:hover,
    .profile-page-layout[profile-page-layout-view]  .tile--class:focus,
    .profile-page-layout[profile-page-layout-view]  .tile--class.active {
        border: 1px solid var(--grey-light-3);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        background: white;
    }
/* /Pages/Common/Profile/Base/Views/RegisterAndLinkParentDialog/RegisterAndLinkParentDialog.razor.rz.scp.css */
/* /Pages/Common/Profile/Base/Views/RegisterAndLinkParentDialog/RegisterAndLinkParentDialogDetails.razor.rz.scp.css */
.register-link-parent-details[register-link-parent-dialog-details-view] {
    margin-top: 1rem;
}

.contact-section-dropdown[register-link-parent-dialog-details-view] {
    margin-left: 0.75rem;
}

.button-label[register-link-parent-dialog-details-view] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
    color: var(--grey-3);
    text-transform: capitalize;
    font-weight: 600;
}

.card[register-link-parent-dialog-details-view] {
    padding: 1rem !important;
}

.card-background-color[register-link-parent-dialog-details-view] {
    background-color: var(--grey-light-1);
}
/* /Pages/Common/Profile/Base/Views/ReportCard/ReportCard.razor.rz.scp.css */
.report-card[b-a7db2ox121] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 2rem 6rem 1rem 6rem;
}

.report-card-left-container[b-a7db2ox121] {
    width: 350px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
    overflow: auto;
    padding-right: 1rem;
}

.separator[b-a7db2ox121] {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.grading-scales-container[b-a7db2ox121] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.grading-scales-title[b-a7db2ox121] {
    font-size: 14px;
    font-weight: 600;
    line-height: 25.6px;
    color: #323232;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grading-scales-data[b-a7db2ox121] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-card-right-container[b-a7db2ox121] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: auto;
    padding-right: 1rem;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportDetails/GradeReportDetails.razor.rz.scp.css */
.grade-report-details[b-8ou9xo4bx6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.grade-report-details-title[b-8ou9xo4bx6] {
    margin-bottom: 0.5rem;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    color: #323232;
}

.grade-report-details-text[b-8ou9xo4bx6] {
    font-size: 14px;
    color: #616161;
}

.grade-report-details-title[b-8ou9xo4bx6],
.grade-report-details-text[b-8ou9xo4bx6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportGrade/PercentileAndGradeMarkGradeReportGrade.razor.rz.scp.css */
.course-grade-container[b-wvstpi74oh] {
    min-width: 27px;
    max-width: 60px;
    width: fit-content;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 0.25rem;
}

.course-grade-content[b-wvstpi74oh] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: white;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportGrade/PercentileAndGradeMarkGradeReportGradeTooltip.razor.rz.scp.css */
.tooltip-container[b-ladxsi9aun] {
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    border-radius: 0.25rem;
    background-color: #272727;
}

.tooltip-title[b-ladxsi9aun] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #F1F1F1;
}

.tooltip-score-and-grade[b-ladxsi9aun] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.tooltip-score[b-ladxsi9aun] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #F1F1F1;
}

.course-grade-container[b-ladxsi9aun] {
    min-width: 27px;
    max-width: 60px;
    width: fit-content;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 0.25rem;
}

.course-grade-content[b-ladxsi9aun] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: white;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weight-category-breakdown-container[b-ladxsi9aun] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weight-category-breakdown-label[b-ladxsi9aun] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888888;
}

.weight-category-breakdown-data[b-ladxsi9aun] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    color: rgba(255, 255, 255, 0.75);
}

[b-ladxsi9aun] .grading-scale-content-list {
    color: rgba(255, 255, 255, 0.75);
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportGrade/PercentileOnlyGradeReportGrade.razor.rz.scp.css */
.course-grade-container[b-nrzrgwqtju] {
    min-width: 27px;
    max-width: 60px;
    width: fit-content;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.05);
}

.course-grade-content[b-nrzrgwqtju] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: rgba(136, 136, 136, 1);
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportGrade/PercentileOnlyGradeReportGradeTooltip.razor.rz.scp.css */
.tooltip-container[b-9mt1tzcj67] {
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    border-radius: 0.25rem;
    background-color: #272727;
}

.tooltip-title[b-9mt1tzcj67] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #F1F1F1;
}

.tooltip-score-and-grade[b-9mt1tzcj67] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.course-grade-container[b-9mt1tzcj67] {
    min-width: 27px;
    max-width: 60px;
    width: fit-content;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 0.25rem;
    background-color: rgb(255, 255, 255, 0.1);
}

.course-grade-content[b-9mt1tzcj67] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: white;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weight-category-breakdown-container[b-9mt1tzcj67] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weight-category-breakdown-label[b-9mt1tzcj67] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888888;
}

.weight-category-breakdown-data[b-9mt1tzcj67] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    color: rgba(255, 255, 255, 0.75);
}

[b-9mt1tzcj67] .grading-scale-content-list {
    color: rgba(255, 255, 255, 0.75);
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportGrade/ProficiencyGradeReportGrade.razor.rz.scp.css */
.course-grade-container[b-120ijphyhc] {
    min-width: 27px;
    max-width: 60px;
    width: fit-content;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 0.25rem;
}

.course-grade-content[b-120ijphyhc] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: white;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/GradeReportGrade/ProficiencyGradeReportGradeTooltip.razor.rz.scp.css */
.tooltip-container[b-5i9as8saft] {
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    border-radius: 0.25rem;
    background-color: #272727;
}

.tooltip-title[b-5i9as8saft] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #F1F1F1;
}

.tooltip-score-and-grade[b-5i9as8saft] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.tooltip-score[b-5i9as8saft] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #F1F1F1;
}

.course-grade-container[b-5i9as8saft] {
    min-width: 27px;
    max-width: 60px;
    width: fit-content;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 0.25rem;
}

.course-grade-content[b-5i9as8saft] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: white;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5i9as8saft] .grading-scale-content-list {
    color: rgba(255, 255, 255, 0.75);
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/OverallAttendanceSummary/OverallAttendanceSummary.razor.rz.scp.css */
.overall-attendance-summary[b-vlfwd1lpkd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.overall-attendance-summary-title[b-vlfwd1lpkd] {
    font-size: 14px;
    font-weight: 600;
    line-height: 25.6px;
    color: #323232;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-attendance-summary-data[b-vlfwd1lpkd] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
}

.overall-attendance-summary-breakdown[b-vlfwd1lpkd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.overall-attendance-summary-breakdown-row[b-vlfwd1lpkd] {
    display: flex;
    flex-direction: row;
    gap: 0.125rem;
}

.overall-attendance-summary-breakdown-row .breakdown-row-icon[b-vlfwd1lpkd] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
}

.overall-attendance-summary-breakdown-row .breakdown-row-icon[b-vlfwd1lpkd]  svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.breakdown-row-label[b-vlfwd1lpkd] {
    font-size: 12px;
    color: #323232;
}
.breakdown-row-value[b-vlfwd1lpkd] {
    font-size: 12px;
    font-weight: 600;
    color: #323232;
}

.overall-attendance-summary-pie-chart[b-vlfwd1lpkd] {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 10px solid #E1E1E1;
}
.overall-attendance-summary-pie-chart .inner-circle[b-vlfwd1lpkd] {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #E1E1E1;
}

.overall-attendance-summary-footer[b-vlfwd1lpkd] {
    font-size: 10px;
    color: #888888;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/PercentileAndGradeMarkScale/PercentileAndGradeMarkGrade.razor.rz.scp.css */
li[b-qnqm8xwo8f] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
}

.grading-scale-grade-dot[b-qnqm8xwo8f] {
    width: 0.375rem;
    height: 0.375rem;
    display: inline-block;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.grading-scale-grade-name[b-qnqm8xwo8f] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
}
    .grading-scale-grade-name > span[b-qnqm8xwo8f] {
        font-weight: 600;
    }

.grading-scale-grade-range[b-qnqm8xwo8f] {
    margin-left: 8px;
    margin-right: 8px;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
}

.grading-scale-grade-is-passing[b-qnqm8xwo8f] {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/PercentileAndGradeMarkScale/PercentileAndGradeMarkScale.razor.rz.scp.css */
.grading-scale-content[b-wbsr5oaur0] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.5rem;
}

.grading-scale-content-header[b-wbsr5oaur0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.grading-scale-header-name[b-wbsr5oaur0] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888888;
}

.grading-scale-content-list[b-wbsr5oaur0] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0;
    list-style-type: none;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/PercentileOnlyScale/PercentileOnlyScale.razor.rz.scp.css */
.grading-scale-content[b-2tlx2q3e4n] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.5rem;
}

.grading-scale-content-header[b-2tlx2q3e4n] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.grading-scale-header-name[b-2tlx2q3e4n] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888888;
}

.grading-scale-content-list[b-2tlx2q3e4n] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0;
    list-style-type: none;
}

li[b-2tlx2q3e4n] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
}

.grading-scale-grade-name[b-2tlx2q3e4n] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
}
.grading-scale-grade-name > span[b-2tlx2q3e4n] {
    font-weight: 600;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/ProficiencyScale/ProficiencyGrade.razor.rz.scp.css */
li[b-orkineb1rp] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
}

.grading-scale-grade-dot[b-orkineb1rp] {
    width: 0.375rem;
    height: 0.375rem;
    display: inline-block;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.grading-scale-grade-name[b-orkineb1rp] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
}
.grading-scale-grade-name > span[b-orkineb1rp] {
    font-weight: 600;
}

.grading-scale-grade-is-passing[b-orkineb1rp] {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/ProficiencyScale/ProficiencyScale.razor.rz.scp.css */
.grading-scale-content[b-82zd6wjule] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.5rem;
}

.grading-scale-content-header[b-82zd6wjule] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.grading-scale-header-name[b-82zd6wjule] {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 16.34px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888888;
}

.grading-scale-content-list[b-82zd6wjule] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0;
    list-style-type: none;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/TermReport/CourseReport.razor.rz.scp.css */
.course-report[b-1iaxudho71] {
    width: 100%;
    min-height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.course-report-left-container[b-1iaxudho71] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: auto;
}
.course-name[b-1iaxudho71] {
    margin-bottom: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    color: #323232;
}
.teacher-comment-label[b-1iaxudho71] {
    display: flex;
    gap: 0.25rem;
    font-size: 10px;
    color: #888888;
}

.course-report-right-container[b-1iaxudho71] {
    width: 4rem;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-bottom: auto;
}
/* /Pages/Common/Profile/Base/Views/ReportCard/Views/TermReport/TermReport.razor.rz.scp.css */
.term-report[b-i8e0kdexsi] {
    display: flex;
    flex-direction: column;
    
    padding: 0 1rem 1rem 1rem;
    
    border: none;
    border-radius: 0.5rem;
    background-color: white;
}

.term-report-header[b-i8e0kdexsi] {
    width: 100%;
    height: 3rem;
    flex-shrink: 0;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.course-name[b-i8e0kdexsi] {
    font-size: 14px;
    font-weight: 600;
    color: #888888;
}
.term-name[b-i8e0kdexsi] {
    font-size: 14px;
    font-weight: 600;
    color: #888888; 
}

.term-report-items[b-i8e0kdexsi] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* /Pages/Common/Profile/Base/Views/StudentGroup/StudentGroup.razor.rz.scp.css */
.student-group[student-group-view] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
}

.group[student-group-view] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .group .name[student-group-view] {
        color: var(--grey-dark-3);
        font-family: var(--font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 14px;
    }

    .group .students[student-group-view] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        color: var(--grey-3);
        font-family: var(--font-family);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16.8px;
    }

    .group .homeroom[student-group-view] {
        display: flex;
        min-width: 14px;
        padding: 2px 5px;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        color: var(--grey-3);
        font-family: var(--font-family);
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 10px;
    }

.homeroom-teacher[student-group-view] {
    display: flex;
    width: fit-content;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--grey-light-2);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    gap: 8px;
}

    .homeroom-teacher img[student-group-view] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .homeroom-teacher .about[student-group-view] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .homeroom-teacher .about .name[student-group-view] {
        color: var(--grey-dark-3);
        font-family: var(--font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    
    .homeroom-teacher .about .label[student-group-view] {
        color: var(--grey-2);
        font-family: var(--font-family);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
    }
/* /Pages/Common/Profile/Page/AdministratorAdministratorProfile.razor.rz.scp.css */
/* /Pages/Common/Settings/AdministratorSettings.razor.rz.scp.css */

/* /Pages/Common/StudentProfile/Page/AdministratorStudentProfile.razor.rz.scp.css */
/* /Pages/Common/TeacherProfile/Page/AdministratorTeacherProfile.razor.rz.scp.css */
/* /Pages/OrgAdmin/Courses/Components/AdministratorCourseDialog/AdministratorCourseDialog.razor.rz.scp.css */
.scroll-wrapper[b-ms6vfe0es9] {
    overflow-x: hidden !important;
}

.title-container[b-ms6vfe0es9] {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.icon-container[b-ms6vfe0es9] {
    background-color: var(--green);
    padding: 8px;
    border-radius: 4px;
    display: flex;
}

.icon-container[b-ms6vfe0es9]  .icon {
    width: 18px !important;
    height: 18px !important;
    fill: white;
}

.content[b-ms6vfe0es9],
.description[b-ms6vfe0es9] {
    display: flex;
    flex-flow: column;
    gap: 8px;
    padding: 0 15px;
}

.row[b-ms6vfe0es9] {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    gap: 5px;
}

.color-selector[b-ms6vfe0es9]  .field-group {
    width: 100%;
}

.color-selector[b-ms6vfe0es9]  .field-menu.menu--list-right.open > .menu-list, .menu.menu--list-right.open > .menu-list[b-ms6vfe0es9] {
    transform: translate(0, 0);
}

[b-ms6vfe0es9] .modal-body,
[b-ms6vfe0es9] .dialog,
[b-ms6vfe0es9] .dialog-body {
    overflow: visible !important;
}

[b-ms6vfe0es9] .modal.modal--md .modal-body {
    max-width: 1050px !important;
}

.description-container[b-ms6vfe0es9] {
    height: 24rem;
    min-height: 18rem;
    max-height: 32rem;
}

[b-ms6vfe0es9] .drop-down .drop-down-body {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translate(0, 10px);
    display: inline-block;
    list-style: none;
    padding-left: 0;
    min-width: 180px;
    width: auto;
    max-width: 300px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-duration) ease 0s;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    font-size: 14px;
    color: #888888 !important;
    line-height: 14px;
    max-height: 50vh;
    font-weight: 400;
    scrollbar-color: var(--alpha-dark-2) transparent;
    scrollbar-width: thin;
}

[b-ms6vfe0es9] .drop-down .drop-down-body {
    width: 230px !important;
}

[b-ms6vfe0es9] .drop-down .drop-down-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 50vh;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--grey-light-3);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    padding: 8px;
    z-index: 10;
}

.subject-label[b-ms6vfe0es9] {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--grey-light-2) transparent transparent;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-list::-webkit-scrollbar {
    width: 6px !important;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-list::-webkit-scrollbar-track {
    background: transparent !important;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-list::-webkit-scrollbar-thumb {
    background-color: var(--grey-light-2) !important;
    border-radius: 4px !important;
}

[b-ms6vfe0es9] .drop-down .drop-down-body .subject-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--grey-light-3) !important;
}
/* /Pages/OrgAdmin/Courses/Components/AdministratorCoursesTable/AdministratorCoursesTable.razor.rz.scp.css */
.courses-table-header[b-8eaxejdnbw] {
    display: flex;
    justify-content: space-between;
}

[b-8eaxejdnbw] .table-wrapper--card.courses {
    margin-top: 20px !important;
}

[b-8eaxejdnbw] .table-header {
    display: flex;
    justify-content: space-between;
}

[b-8eaxejdnbw] .new-course-button {
    height: 40px !important;
    width: 123px !important;
}

.subject-search[b-8eaxejdnbw] .search--small {
    background: white !important;
    border: 1px solid var(--grey-light-2);
}

.subject-button[b-8eaxejdnbw] .btn {
    padding: 15px;
}

[b-8eaxejdnbw] .curriculum-tabs > .tabs-header {
    background: white !important;
    z-index: 1;
    padding: 0 20px;
    border: 1px solid var(--grey-light-3);
}

.dialog-alert-container[b-8eaxejdnbw]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-8eaxejdnbw]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.hide[b-8eaxejdnbw] {
    display: none;
}

.display[b-8eaxejdnbw] {
    height: 100%;
    display: initial;
}

.courses-container.hide[b-8eaxejdnbw] {
    display: none;
}

.courses-container.display[b-8eaxejdnbw] {
    height: 100%;
    display: initial;
}

.courses-container[b-8eaxejdnbw] {
    display: flex;
    background: inherit;
    width: 100%;
}

.courses-header-item[b-8eaxejdnbw] {
    display: flex;
    align-items: center;
}

.courses-table-header[b-8eaxejdnbw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-8eaxejdnbw] .btn--circle svg {
    fill: var(--grey-dark-1);
}
[b-8eaxejdnbw] .btn--circle:hover svg {
    fill: white;
}

[b-8eaxejdnbw] .btn.btn--primary {
    padding: 12px !important;
}

[b-8eaxejdnbw] .import-button {
    height: 40px;
    color: var(--green);
}

[b-8eaxejdnbw] .import-button:hover {
    color: white;
}

.separator[b-8eaxejdnbw] {
    border: solid;
    border-width: 0.1px;
    border-color: var(--grey-light-4);
    margin: 0 15px;
    height: 40px;
}

.item.info[b-8eaxejdnbw] {
    font-weight: 600;
    font-size: 18px;
    line-height: 17px;
}

.courses-table-container--hidden[b-8eaxejdnbw] {
    display: none !important;
}
/* /Pages/OrgAdmin/Courses/Components/AdministratorCoursesTableContent/AdministratorCoursesTableContent.razor.rz.scp.css */
[b-7zk02f3nl7] .course-group {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    justify-content: space-between;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.course-name-container[b-7zk02f3nl7] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.label .label--course-icon[b-7zk02f3nl7] {
    margin-right: 10px;
}

.course-color-indicator[b-7zk02f3nl7] {
    display: block;
    height: 35px;
    width: 6px;
    transform: translateX(-13px);
}

.subject-label[b-7zk02f3nl7] {
    padding: 8px 12px;
    border-radius: 3px;
    font-weight: 400;
    line-height: 22.4px;
}

.dialog-alert-container[b-7zk02f3nl7]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-7zk02f3nl7]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}
/* /Pages/OrgAdmin/Courses/Components/ImportCoursesDialog/ImportCoursesDialog.razor.rz.scp.css */
.import-courses-dialog-header[import-courses-dialog-component] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
}

.import-courses-dialog-header-icon[import-courses-dialog-component] {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green);
}

.import-courses-dialog-body[import-courses-dialog-component] {
    display: flex;
    height: 44vh;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.import-courses-dialog-body-header[import-courses-dialog-component] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

    .import-courses-dialog-body-header p[import-courses-dialog-component] {
        color: #888888;
        font-size: 14px;
        line-height: 22.4px;
        font-weight: 400;
    }

.import-courses-template-container[import-courses-dialog-component] {
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #F1F1F1;
    box-shadow: 0 6px 24px 0 #0000001F;
}

.import-courses-template-info[import-courses-dialog-component] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(2px);
}

.import-courses-info-headline[import-courses-dialog-component] {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #616161;
}

.import-courses-info-container[import-courses-dialog-component] {
    display: flex;
    gap: 10px;
}

.import-courses-info-small[import-courses-dialog-component] {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    color: #888888;
}

.import-courses-template-download[import-courses-dialog-component] {
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: #888888;
    display: flex;
    gap: 5px;
    justify-content: center;
    height: 100%;
    align-items: center;
    padding-right: 10px;
}

    .import-courses-template-download[import-courses-dialog-component]  svg {
        color: #888888;
        fill:  #888888;
        width: 14px !important;
        height: 14px !important;
    }

.import-courses-file-icon[import-courses-dialog-component] {
    display: flex;
    height: 100%;
    align-items: center;
}

    .import-courses-file-icon[import-courses-dialog-component]  svg {
        color: #888888 !important;
        fill:  #888888 !important;
        width: 18px !important;
        height: 18px !important;
    }

.info-banner[import-courses-dialog-component] {
    display: flex;
    min-height: 40px;
    padding: 6px 6px 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid rgba(0, 162, 255, 0.30);
    background: rgba(0, 162, 255, 0.05);
    box-shadow: 0 3px 6px 0 rgba(0, 162, 255, 0.10);
    color: #00A2FF;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

    .info-banner .info-banner-icon[import-courses-dialog-component] {
        width: 16px;
        height: 16px;
        color: #00A2FF;
    }

.info-banner-content a[import-courses-dialog-component] {
    color: var(--green);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: lowercase;
}
/* /Pages/OrgAdmin/Courses/Page/AdministratorCourses.razor.rz.scp.css */
/* /Pages/OrgAdmin/Courses/Views/CoursesWelcome/CoursesWelcome.razor.rz.scp.css */
.courses-welcome-container[b-mpsmfujob9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.courses-welcome-wrapper[b-mpsmfujob9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-courses-actions[b-mpsmfujob9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

    .welcome-courses-actions[b-mpsmfujob9]  .btn {
        height: 39px !important;
    }

.welcome-title h1[b-mpsmfujob9] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-subtitle[b-mpsmfujob9] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/Courses/Views/ImportCoursesSummaryDialog/ImportCoursesSummaryDialog.razor.rz.scp.css */
.import-courses-summary-dialog[import-courses-summary-dialog-view]  .modal-body {
    max-width: 1320px !important;
    height: 75vh;
}

.import-courses-summary-dialog-header[import-courses-summary-dialog-view] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
}

.import-courses-summary-dialog-header-icon[import-courses-summary-dialog-view] {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green);
}

.import-courses-summary-dialog-body[import-courses-summary-dialog-view] {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.import-info[import-courses-summary-dialog-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.import-statistics[import-courses-summary-dialog-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    width: 100%;
}

.import-statistics-panel[import-courses-summary-dialog-view] {
    display: flex;
    width: 100%;
    padding: 15px;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
}

.failed-import-records[import-courses-summary-dialog-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    min-height: 300px;
}

.failed-import-records-panel[import-courses-summary-dialog-view] {
    display: flex;
    width: 100%;
    padding: 12px 20px 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    min-height: 0;
}

.failed-import-records-panel[import-courses-summary-dialog-view]  .table {
    border-bottom: 1px solid var(--grey-light-3);
}

    .failed-import-records-panel[import-courses-summary-dialog-view]  .table-wrapper {
        width: 100%;
    }

.failed-import-records-panel[import-courses-summary-dialog-view]  .table-wrapper .table th {
    background: white !important;
}

.failed-import-records-panel[import-courses-summary-dialog-view]  .table-wrapper-body {
    min-height: 0;
}

.import-summary-label[import-courses-summary-dialog-view] {
    color: var(--grey-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.failed-items-count-text[import-courses-summary-dialog-view] {
    color: var(--red);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.total-items-count-text[import-courses-summary-dialog-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Courses/Views/ImportCoursesSummaryDialog/Views/FailedCoursesTable/FailedCourseTable.razor.rz.scp.css */
.tooltip-body[b-v9h1i3vyxp] {
    display: flex;
    width: 260px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

.error-message-label[b-v9h1i3vyxp] {
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.copy-error-messages-container[b-v9h1i3vyxp] {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.error-message[b-v9h1i3vyxp] {
    color: var(--grey-light-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.icon-information[b-v9h1i3vyxp] {
    width: 16px;
    height: 16px;
    color: var(--grey-3);
}

.icon-failure[b-v9h1i3vyxp]  .icon {
    width: 10px;
    height: 10px;
}

.icon-failure[b-v9h1i3vyxp]  .icon path {
    fill: var(--red) !important;
}
/* /Pages/OrgAdmin/Courses/Views/ImportCoursesSummaryDialog/Views/ImportOverview/ImportOverview.razor.rz.scp.css */
.import-overview-card[import-courses-overview-view] {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.06);
}

.imported-label[import-courses-overview-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Courses/Views/SubjectDropdown/SubjectDropdown.razor.rz.scp.css */
.subject-dropdown-container[b-qjqflj39kn] {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden; 
}

.status-name[b-qjqflj39kn] {
    transform: translateY(-2px);
}

.subject-status-item[b-qjqflj39kn] {
    padding: 10px 5px;
    cursor: pointer;
    transition: all var(--transition-duration) ease 0s;
}

.subject-status-item:hover[b-qjqflj39kn] {
   background: #f2f2f2;
}

.status-icon[b-qjqflj39kn] {
    margin: 0 10px 0 5px !important;
}

.status-icon[b-qjqflj39kn]  svg {
    width: 18px !important;
    height: 18px !important;
}

.subject-list[b-qjqflj39kn] {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
}

.subject-footer[b-qjqflj39kn] {
    position: sticky;
    bottom: 0;
    background: #fff; 
    border-top: 1px solid #ddd;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    z-index: 5;
}

.sticky-button[b-qjqflj39kn] {
    background-color: #F6F6F6;
    color:#BFBFBF;
}

.subject-footer[b-qjqflj39kn]  button {
    background-color: #F6F6F6 !important;
    border-radius: 2px;
    color :#888888 !important;
    width: 190px !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 400 !important;
    border: 1px solid #E6E6E6;
}
/* /Pages/OrgAdmin/Courses/Views/SubjectDropdown/SubjectDropdownHeader.razor.rz.scp.css */
.subject-header[b-bh7tkhwa1g] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding-left: 10px;
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.status[b-bh7tkhwa1g] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.subject-icon[b-bh7tkhwa1g] {
    width: 29px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subject-icon[b-bh7tkhwa1g]  > svg {
    margin-right: 10px;
}

.subject-name[b-bh7tkhwa1g] {
    font-size: 14px;
    color: #323232;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 14px;
    font-weight: 400;
}

.header-status-icon[b-bh7tkhwa1g] {
   background-color: var(--green);
}

.header-status-icon[b-bh7tkhwa1g]  svg {
    color: #ffffff;
}

[b-bh7tkhwa1g] .btn--square {
    position: relative;
    width: 40px;
    height: 100%;
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
    border: 1px solid var(--grey-light-3);
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1;
    border-radius: 0 4px 4px 0;
    background: var(--grey-light-1) !important;
}

[b-bh7tkhwa1g] .btn--square ::deep svg {
    position: relative;
    top: 0;
    left: -0.25em;
    margin-right: 4px;
    display: inline-block;
    height: 1em;
    width: 1em;
    fill: #fff;
    border-color: var(--grey-3);
    pointer-events: none;
}

[b-bh7tkhwa1g] > .btn--square:hover {
    background-color: var(--green) !important;
    color: #fff !important;
    fill: #fff !important;
}

[b-bh7tkhwa1g] .btn--square:hover svg path {
    fill: #fff !important;
}

/* /Pages/OrgAdmin/Courses/Views/SubjectIconPickerView/SubjectIconPicker.razor.rz.scp.css */
[b-xwg8btqjl3] .icon-picker-field {
    position: relative;          
    display: flex;
    flex-direction: column;
    overflow: visible;           
}

.field-label[b-xwg8btqjl3] {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 500;
}

.field-input[b-xwg8btqjl3] {
    border: 4px solid white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    padding: 3px 0;
    font-size: 14px;
    font-weight: 400;
    outline: 1px solid #E1E1E1;
}

.no-icon[b-xwg8btqjl3] { 
    color: #999; 
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
    padding: 1px 0;
}

.selected-icon[b-xwg8btqjl3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f2;
    color: #959595;
    width: 100%;         
    padding: 0 10px;     
    box-sizing: border-box;
}

.selected-icon[b-xwg8btqjl3]  svg {
    height: 20px;
    margin-right: 10px;
}

.remove-btn[b-xwg8btqjl3] {
    margin-left: auto;    
    margin-right: -15px;  
    border: none;
    background: transparent !important;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 0;
}

.remove-btn:hover[b-xwg8btqjl3] {
    color: var(--p-gray-100);    
}

.remove-btn[b-xwg8btqjl3]  svg { 
    width: 14px;
    height: 14px;
}

.icon-dropdown[b-xwg8btqjl3] {
    z-index: 999999 !important;
    background: #f6f6f6;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-5px);
    transition: all 0.25s ease;
    pointer-events: none;
    border: 1px solid #E1E1E1;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.icon-dropdown.show[b-xwg8btqjl3] {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.icon-dropdown.hide[b-xwg8btqjl3] {
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
}

.icon-grid[b-xwg8btqjl3] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

.icon-option[b-xwg8btqjl3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease;
}

.icon-option.selected[b-xwg8btqjl3] {
    border: 1px solid #e3e8e3;
    background: #f6f6f6;
    pointer-events: none;   
    opacity: 0.6;          
    cursor: default;
}

.icon-option.selected .icon-wrapper[b-xwg8btqjl3]  svg {
    color: #bcbcbc !important;
}

.icon-option:hover[b-xwg8btqjl3] {
    background-color: #e9e9e9;
}

.icon-wrapper[b-xwg8btqjl3]{
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-wrapper[b-xwg8btqjl3]  svg {
    width: 20px !important;
    color: gray !important;
}

.icon-picker-field.disabled[b-xwg8btqjl3] {
    opacity: 0.5;
}

.icon-picker-field.disabled .field-input[b-xwg8btqjl3] {
    cursor: not-allowed !important;
}
/* /Pages/OrgAdmin/Dashboard/Components/AdminDashboard/AdminDashboard.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.dashboard-overview > .card[org-administrator-dashboard-component] {
    padding: 5px;
}

    .dashboard-overview > .card.layout--light[org-administrator-dashboard-component] {
        background: rgba(0, 0, 0, 0.025);
        border: none;
    }

.dashboard-overview .list-tile-users-summary[org-administrator-dashboard-component] {
   margin: -0.625rem;
}
/* /Pages/OrgAdmin/Dashboard/Components/AdminDashboard/Views/UsersSummaryTileView/UsersSummaryTile.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.tile-users-summary[org-admin-users-summary-tile-view] {
    display: flex;
    line-height: 1.4;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
    height: 77px;
    cursor: pointer;
}

    .tile-users-summary.summary--all[org-admin-users-summary-tile-view] {
        color: #ffffff;
        background-color: var(--green);
        box-shadow: 0 3px 6px rgba(39, 191, 129, 0.06);
    }

        .tile-users-summary.summary--all .summary-meta .label[org-admin-users-summary-tile-view],
        .tile-users-summary.summary--all .summary-label .label[org-admin-users-summary-tile-view] {
            opacity: 0.75;
        }

        .tile-users-summary.summary--all .summary-meta *[org-admin-users-summary-tile-view],
        .tile-users-summary.summary--all .summary-label *[org-admin-users-summary-tile-view] {
            color: inherit;
        }

        .tile-users-summary.summary--all .summary-label[org-admin-users-summary-tile-view] {
            padding: 10px 15px;
        }

    .tile-users-summary .summary-meta[org-admin-users-summary-tile-view],
    .tile-users-summary .summary-label[org-admin-users-summary-tile-view] {
        transition: all var(--transition-duration) ease 0s;
    }

    .tile-users-summary .summary-meta[org-admin-users-summary-tile-view] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        width: 68px;
        background: var(--alpha-dark-2);
    }

    .tile-users-summary .summary-label[org-admin-users-summary-tile-view] {
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
        padding: 15px;
    }

        .tile-users-summary .summary-label .btn[org-admin-users-summary-tile-view] {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(100%, -50%);
        }

    .tile-users-summary .summary-icon[org-admin-users-summary-tile-view] {
        position: relative;
        width: 43px;
        height: 43px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        border-radius: 50%;
    }

        .tile-users-summary .summary-icon .icon[org-admin-users-summary-tile-view] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            fill: var(--green);
        }

    .tile-users-summary .summary-count[org-admin-users-summary-tile-view] {
        font-size: 1.625rem;
        font-weight: 600;
    }

.layout--light.tile-users-summary[org-admin-users-summary-tile-view] {
    background: white;
}

    .layout--light.tile-users-summary.summary--all[org-admin-users-summary-tile-view] {
        background-color: var(--green);
    }    

    .layout--light.tile-users-summary .summary-meta[org-admin-users-summary-tile-view] {
        background: var(--alpha-dark-1);
    }

.layout--dark.tile-users-summary[org-admin-users-summary-tile-view] {
    background: var(--alpha-light-1);
}

    .layout--dark.tile-users-summary.summary--all[org-admin-users-summary-tile-view] {
        background-color: var(--green);
    }

        .layout--dark.tile-users-summary.summary--all .summary-meta .label[org-admin-users-summary-tile-view],
        .layout--dark.tile-users-summary.summary--all .summary-label .label[org-admin-users-summary-tile-view] {
            opacity: 0.75;
        }

        .layout--dark.tile-users-summary.summary--all .summary-meta *[org-admin-users-summary-tile-view],
        .layout--dark.tile-users-summary.summary--all .summary-label *[org-admin-users-summary-tile-view] {
            color: inherit;
        }

        .layout--dark.tile-users-summary.summary--all .summary-meta[org-admin-users-summary-tile-view] {
            background: var(--alpha-dark-2);
        }    

    .layout--dark.tile-users-summary .summary-meta[org-admin-users-summary-tile-view] {
        background: var(--alpha-light-1);
    }

    .layout--dark.tile-users-summary .summary-count[org-admin-users-summary-tile-view] {
        color: var(--grey-1);
    }
/* /Pages/OrgAdmin/Dashboard/Components/AdminDashboard/Views/UserSummaryTileView/UserSummaryTile.razor.rz.scp.css */
.tile-users-summary[org-admin-user-summary-tile-view] {
    cursor: pointer !important;
}
/* /Pages/OrgAdmin/Dashboard/Page/AdministratorDashboard.razor.rz.scp.css */
/* /Pages/OrgAdmin/Programs/Components/EditProgramCourseDialog/EditProgramCourseDialog.razor.rz.scp.css */
.edit-program-course-dialog[b-hmro0h327g]  .dialog-body {
    padding: 10px 10px 0 10px !important;
    min-height: 410px;
}

.edit-program-course-dialog[b-hmro0h327g]  .container.gutter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.title-container[b-hmro0h327g] {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.icon-container[b-hmro0h327g] {
    background-color: var(--green);
    padding: 8px;
    border-radius: 4px;
    display: flex;
}

.icon-container[b-hmro0h327g]  .icon {
    width: 18px !important;
    height: 18px !important;
    fill: white;
}

.subject-icon[b-hmro0h327g] {
    width: 16px;
    height: 16px;
}

.field-group-value[b-hmro0h327g] {
    color: var(--grey-dark-3);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.course-description-text[b-hmro0h327g] {
    color: var(--grey-dark-3);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.edit-standards-and-skills[b-hmro0h327g]  .standards-and-skills-selection-view {
    padding: 7px 0 7px 8px !important;
    margin: 0 7px !important;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseTableContent/ProgramCourseTableContent.razor.rz.scp.css */
[b-xpxhia6cxf] .course-group {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    justify-content: space-between;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.course-name-container[b-xpxhia6cxf] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.label .label--course-icon[b-xpxhia6cxf] {
    margin-right: 10px;
}

.course-color-indicator[b-xpxhia6cxf] {
    display: block;
    height: 35px;
    width: 6px;
    transform: translateX(-13px);
}

.subject-label[b-xpxhia6cxf] {
    padding: 8px 12px;
    border-radius: 3px;
    font-weight: 400;
    line-height: 22.4px;
}

.dialog-alert-container[b-xpxhia6cxf]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-xpxhia6cxf]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.remove-button-container[b-xpxhia6cxf]  .btn {
    background: transparent !important;
}

    .remove-button-container[b-xpxhia6cxf]  .btn svg {
        fill: var(--grey-3);
        width: 12px;
        height: 12px;
    }

.remove-button-container[b-xpxhia6cxf]  .btn:hover {
    background: transparent !important;
}

    .remove-button-container[b-xpxhia6cxf]  .btn:hover svg {
        fill: var(--grey-dark-3) !important;
    }
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseTableHeader/ProgramCourseTableHeader.razor.rz.scp.css */
.course-table-filter-container[b-44wz3ql4g5] {
    display: flex;
    align-items: center;
}

.course-table-filter-delete[b-44wz3ql4g5] {
    color: var(--grey-3);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.course-table-filter-delete[b-44wz3ql4g5]::after {
    content: '';
    display: block;
    width: 1px;
    height: 1rem;
    background: var(--grey-light-3);
    margin: 0 0.5rem;
}

.delete-text[b-44wz3ql4g5] {
    margin-left: 0.5rem;
}

[b-44wz3ql4g5] .btn,
[b-44wz3ql4g5] .search--small .search-field input,
.filter-container[b-44wz3ql4g5] {
    height: 38.5px;
}

[b-44wz3ql4g5] .btn {
    max-height: none !important;
}

[b-44wz3ql4g5] .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.course-table-filter[b-44wz3ql4g5] {
    margin-right: 0.5rem;
}

.filter-container[b-44wz3ql4g5] {
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
}

.course-table-filter-container .course-table-filter-delete[b-44wz3ql4g5]  .icon {
    height: 16px !important;
}

.filter-container[b-44wz3ql4g5]  .btn-filter .btn:hover {
    color: var(--green);
    background: transparent;
}

[b-44wz3ql4g5] .subjects-drop-down .menu-list {
    transform: translate(-154px, 0) !important;
    min-width: 190px;
    max-width: 190px;
}

[b-44wz3ql4g5] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[b-44wz3ql4g5] .loader-spinner {
    height: 32px !important;
}


[b-44wz3ql4g5] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/ProgramCourseWizardDialog.razor.rz.scp.css */
.program-course-wizard-dialog[program-course-wizard-dialog-component]  .dialog-header {
    border-bottom: none !important;
    padding-left: 25px;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .dialog-body {
    height: 60vh;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tabs-body {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tabs-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tabs-header {
    flex: 0 0 auto;
    background: white;
    padding-left: 20px;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tabs-btn {
    height: 40px;
    pointer-events: none !important;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    padding: 24px;
    gap: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    gap: 4px;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 20px;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-header-label {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-header-content-description {
    color: #616161;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
}

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-body {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: var(--grey-light-2);
    overflow: hidden;
}

    .program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-body > .scroll {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }

.program-course-wizard-dialog[program-course-wizard-dialog-component]  .tab-footer {
    display: flex;
    flex: 0 0 64px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 15px;
    background-color: #ffffff;
    box-sizing: border-box;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/ApplyGradeSettingsTab/ApplyGradeSettingsTab.razor.rz.scp.css */

.tab-header-controls[program-course-wizard-apply-grade-settings-tab-view]  div.dropdown-menu {
    width: 100%;
}

.dropdown-button-content[program-course-wizard-apply-grade-settings-tab-view] {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
}

    .dropdown-button-content[program-course-wizard-apply-grade-settings-tab-view] .icon {
        width: 16px !important;
        height: 16px !important;
        flex: none !important;
        left: 0 !important;
    }

    .dropdown-button-content[program-course-wizard-apply-grade-settings-tab-view]  path {
        fill: white !important;
    }

.grades-container[program-course-wizard-apply-grade-settings-tab-view] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/ApplyGradeSettingsTab/Views/GradeSettings/GradeSettings.razor.rz.scp.css */
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/Common/StandardsAndSkillsSelection.razor.rz.scp.css */
.standards-and-skills-selection-view[b-88tht3868j] {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 7px 17px !important;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.standards-and-skills-selection-view:hover[b-88tht3868j] {
    background: var(--grey-light-1);
}

.standards-and-skills-selection-icon[b-88tht3868j] {
    display: flex;
    width: 32px;
    height: 32px;
    min-width: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--green);
}

.standards-and-skills-selection-icon.empty[b-88tht3868j] {
    background: var(--grey-2);
}

.standards-and-skills-selection-content[b-88tht3868j] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
}

.standards-and-skills-selection-title[b-88tht3868j] {
    overflow: hidden;
    color: #272727;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.standards-and-skills-selection-count[b-88tht3868j] {
    overflow: hidden;
    color: #999999;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.standards-and-skills-selection-view[b-88tht3868j]  .btn.btn--circle {
    border: none !important;
}

.standards-and-skills-selection--disabled[b-88tht3868j] {
    pointer-events: none;
    opacity: 0.5;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CoursesTab/CoursesTab.razor.rz.scp.css */

.tab-body[program-course-wizard-courses-tab-view] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--grey-light-2);
}

    .tab-body[program-course-wizard-courses-tab-view]  .table-wrapper {
        width: 100%;
    }

    .tab-body[program-course-wizard-courses-tab-view]  .table-wrapper-card {
        height: 100%;
        width: 100%;
    }

    .tab-body[program-course-wizard-courses-tab-view]  .table-wrapper-body {
        height: 100%;
        width: 100%;
    }
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CoursesTab/Views/CoursesTable/CoursesTable.razor.rz.scp.css */
.courses-table[program-course-wizard-courses-table-view] {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    height: 100px;
    width: 100%;
    min-height: 200px;
}

    .courses-table[program-course-wizard-courses-table-view]  .spinner-profile-height {
        height: 100% !important;
    }

    .courses-table[program-course-wizard-courses-table-view]  .td--sticky {
        background-color: transparent !important;
    }

    .courses-table[program-course-wizard-courses-table-view]  .tr--link:hover .td--sticky {
        background-color: transparent !important;
    }

    .courses-table[program-course-wizard-courses-table-view]  .table {
       border: 1px solid var(--grey-light-4) !important;
       background-color: white !important;
    }

        .courses-table[program-course-wizard-courses-table-view]  .table tr > :first-child {
            min-width: 0 !important;
            padding: 5px 0 5px 0;
        }

.course-name-cell[program-course-wizard-courses-table-view] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.course-name-cell-information[program-course-wizard-courses-table-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .course-name-cell-information[program-course-wizard-courses-table-view]  svg {
        width: 14px;
        height: 14px;
    }

.course-name-cell-tooltip[program-course-wizard-courses-table-view] {
    border-radius: 4px;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: var(--grey-dark-3);
}

.course-name-cell-text[program-course-wizard-courses-table-view] {
    color: var(--grey-dark-4);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.subject-color-indicator[program-course-wizard-courses-table-view] {
    height: 100%;
    width: 4px;
    background-color: currentColor;
    display: inline-block;
}

.subject-cell[program-course-wizard-courses-table-view] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CoursesTab/Views/CoursesTableFilter/CoursesTableFilter.razor.rz.scp.css */
.course-table-filter-container[program-course-wizard-courses-table-filter-view] {
    display: flex;
    align-items: center;
}

.course-table-filter-delete[program-course-wizard-courses-table-filter-view] {
    color: var(--grey-3);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .course-table-filter-delete[program-course-wizard-courses-table-filter-view]::after {
        content: '';
        display: block;
        width: 1px;
        height: 1rem;
        background: var(--grey-light-3);
        margin: 0 0.5rem;
    }

.delete-text[program-course-wizard-courses-table-filter-view] {
    margin-left: 0.5rem;
}

[program-course-wizard-courses-table-filter-view] .btn,
[program-course-wizard-courses-table-filter-view] .search--small .search-field input,
.filter-container[program-course-wizard-courses-table-filter-view] {
    height: 38.5px;
}

[program-course-wizard-courses-table-filter-view] .btn {
    max-height: none !important;
}

[program-course-wizard-courses-table-filter-view] .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.course-table-filter[program-course-wizard-courses-table-filter-view] {
    margin-right: 0.5rem;
}

.filter-container[program-course-wizard-courses-table-filter-view] {
    width: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    cursor: pointer;
    padding: 5px 0 0 3px;
}

.course-table-filter-container .course-table-filter-delete[program-course-wizard-courses-table-filter-view]  .icon {
    height: 16px !important;
}

.filter-container[program-course-wizard-courses-table-filter-view]  .btn-filter .btn:hover {
    color: var(--green);
    background: transparent;
}

[program-course-wizard-courses-table-filter-view] .subjects-drop-down .menu-list {
    transform: translate(-154px, 0) !important;
    min-width: 190px;
    max-width: 190px;
}

[program-course-wizard-courses-table-filter-view] .loading-spinner {
    background: transparent !important;
    border: none !important;
    height: 50.5px !important;
    min-height: 50.5px !important;
    max-height: 50.5px !important;
}

[program-course-wizard-courses-table-filter-view] .loader-spinner {
    height: 32px !important;
}


[program-course-wizard-courses-table-filter-view] .filter-drop-down {
    min-width: 190px;
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CustomizeCoursesTab/CustomizeCoursesTab.razor.rz.scp.css */
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CustomizeCoursesTab/Views/CourseConfigCard/CourseConfigCard.razor.rz.scp.css */
.course-card[program-course-wizard-course-config-card-view] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-4);
    background: #fff;
}

    .course-card.warning[program-course-wizard-course-config-card-view] {
        border: 1px solid var(--orange);
        background: linear-gradient(0deg, rgba(235, 141, 42, 0.05) 0%, rgba(235, 141, 42, 0.05) 100%), #FFF;
    }

    .course-card[program-course-wizard-course-config-card-view]::before {
        position: absolute;
        z-index: 1;
        top: 10px;
        left: 0;
        width: 4px;
        height: 36px;
        border-radius: 0 4px 4px 0;
        background: currentColor;
        content: "";
    }

.course-header[program-course-wizard-course-config-card-view] {
    display: flex;
    height: 56px;
    width: 100%;
    padding: 5px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-radius: 4px;
}

    .course-header.expanded[program-course-wizard-course-config-card-view] {
        border-bottom: 1px solid var(--grey-light-3);
    }

.course-header-leading[program-course-wizard-course-config-card-view],
.course-header-actions[program-course-wizard-course-config-card-view] {
    display: flex;
    min-width: 0;
    align-items: center;
}

.course-header-leading[program-course-wizard-course-config-card-view] {
    flex: 1;
    gap: 8px;
}

.course-header-actions[program-course-wizard-course-config-card-view] {
    flex-shrink: 0;
    gap: 20px;
}

[program-course-wizard-course-config-card-view] .expander-button,
[program-course-wizard-course-config-card-view] .remove-button {
    border: 0;
    background: transparent;
    color: #7e7e7e;
}

[program-course-wizard-course-config-card-view] .expander-button {
    width: 28px;
    height: 42px;
    padding: 0;
}

[program-course-wizard-course-config-card-view] .remove-button {
    width: 30px;
    height: 40px;
}

.expander-button-icon[program-course-wizard-course-config-card-view],
.remove-button-icon[program-course-wizard-course-config-card-view] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.expander-button-icon[program-course-wizard-course-config-card-view] {
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
    transition: transform 150ms ease;
}

    .expander-button-icon.expanded[program-course-wizard-course-config-card-view] {
        transform: rotate(0deg);
    }

    .expander-button-icon[program-course-wizard-course-config-card-view]  svg {
        display: block;
        width: 12px;
        height: 12px;
    }

.remove-button-icon[program-course-wizard-course-config-card-view]  .icon {
    width: 12px !important;
    height: 12px !important;
}

.subject-icon[program-course-wizard-course-config-card-view] {
    width: 26px;
    height: 26px;
}

.course-title-area[program-course-wizard-course-config-card-view] {
    display: flex;
    flex-direction: column;
}

.course-title[program-course-wizard-course-config-card-view] {
    color: var(--grey-dark-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.course-subject[program-course-wizard-course-config-card-view] {
    color: currentColor;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    background: var(--grey-light-1);
    border-radius: 4px;
    display: flex;
    width: fit-content;
    padding: 0 5px;
}

.meta-item[program-course-wizard-course-config-card-view] {
    display: flex;
    min-width: 40px;
    flex-direction: column;
}

.meta-label[program-course-wizard-course-config-card-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
}

.meta-value[program-course-wizard-course-config-card-view] {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
}

.course-settings[program-course-wizard-course-config-card-view] {
    margin: 0 !important;
    padding: 0 0.625rem 0 0.625rem !important;
    background: var(--grey-light-1);
}

.warning-tag[program-course-wizard-course-config-card-view] {
    display: flex;
    min-width: 27px;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: rgba(235, 141, 42, 0.05);
}

.warning-tag-label[program-course-wizard-course-config-card-view] {
    color: var(--orange);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.standards-and-skills[program-course-wizard-course-config-card-view] {
    padding: 0 10px !important;
}

    .standards-and-skills[program-course-wizard-course-config-card-view]  .standards-and-skills-selection-view {
        padding: 7px 10px !important;
    }
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CustomizeCoursesTab/Views/CourseConfigCardGroup/CourseConfigCardGroup.razor.rz.scp.css */
.course-config-card-group[program-course-wizard-course-config-group-view] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

.course-config-card-group-header[program-course-wizard-course-config-group-view] {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    height: 36px;
    padding: 10px 0;
}

.course-config-card-group-body[program-course-wizard-course-config-group-view] {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--grey-light-3);
    background: var(--grey-light-3);
}

[program-course-wizard-course-config-group-view] .expander-button {
    border: 0;
    background: transparent;
    color: #7e7e7e;
}

.expander-button-icon[program-course-wizard-course-config-group-view] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.expander-button-icon[program-course-wizard-course-config-group-view] {
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
    transition: transform 150ms ease;
}

    .expander-button-icon.expanded[program-course-wizard-course-config-group-view] {
        transform: rotate(0deg);
    }

    .expander-button-icon[program-course-wizard-course-config-group-view]  svg {
        display: block;
        width: 12px;
        height: 12px;
    }

.tooltip-header-container[program-course-wizard-course-config-group-view] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}

.tooltip-header[program-course-wizard-course-config-group-view] {
    display: flex;
}

.tooltip-body[program-course-wizard-course-config-group-view] {
    width: fit-content;
    max-width: 20rem;
    height: fit-content;
    max-height: 10rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem;
    border: none;
    border-radius: 0.25rem;
    text-align: left;
    white-space: normal;
    background-color: var(--grey-dark-3);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

.tooltip-body-header[program-course-wizard-course-config-group-view] {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
}

.tooltip-body-message[program-course-wizard-course-config-group-view] {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--grey-light-2);
}
/* /Pages/OrgAdmin/Programs/Components/ProgramCourseWizardDialog/Views/CustomizeCoursesTab/Views/CourseConfigCardGroups/CourseConfigCardGroups.razor.rz.scp.css */
.course-config-card-groups[program-course-wizard-course-config-groups-view] {
    display: flex;
    flex-direction: column;
}
/* /Pages/OrgAdmin/Programs/Page/Programs.razor.rz.scp.css */
/* /Pages/OrgAdmin/Programs/Views/ProgramCourseTable/ProgramCourseTable.razor.rz.scp.css */
[b-ter2l8m122] .table-header {
    display: flex;
    justify-content: space-between;
}

.courses-header-item[b-ter2l8m122] {
    display: flex;
    align-items: center;
    padding: 5px 0 20px;
}

.courses-table-header[b-ter2l8m122] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-ter2l8m122] .btn--circle svg {
    fill: var(--grey-dark-1);
}

[b-ter2l8m122] .btn--circle:hover svg {
    fill: white;
}

[b-ter2l8m122] .btn.btn--primary {
    height: 39px;
}

.separator[b-ter2l8m122] {
    height: 40px;
    margin: 0 15px;
    border: solid var(--grey-light-4);
    border-width: 0.1px;
}

.item.info[b-ter2l8m122] {
    font-size: 18px;
    font-weight: 600;
    line-height: 17px;
}

.courses-table-header-item.filter[b-ter2l8m122] {
    display: flex;
    overflow: hidden;
}
/* /Pages/OrgAdmin/Programs/Views/ProgramCuricullumWelcome/ProgramCuricullumWelcome.razor.rz.scp.css */
.welcome-program-curicullum-container[program-curicullum-welcome-view] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.welcome-program-curicullum-wrapper[program-curicullum-welcome-view] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-program-curicullum-actions[program-curicullum-welcome-view] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

    .welcome-program-curicullum-actions[program-curicullum-welcome-view]  .btn {
        height: 40px;
    }

.welcome-program-curicullum-title h1[program-curicullum-welcome-view] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-program-curicullum-subtitle[program-curicullum-welcome-view] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/Programs/Views/ProgramDialog/ProgramDialog.razor.rz.scp.css */
.program-dialog[b-rgmxb1dihd]  .container.gutter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.title-container[b-rgmxb1dihd] {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.icon-container[b-rgmxb1dihd] {
    background-color: var(--green);
    padding: 8px;
    border-radius: 4px;
    display: flex;
}

.icon-container[b-rgmxb1dihd]  .icon {
    width: 18px !important;
    height: 18px !important;
    fill: white;
}

.grades-container[b-rgmxb1dihd] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.no-options-label[b-rgmxb1dihd] {
    color: var(--grey-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Programs/Views/ProgramsWelcome/ProgramsWelcome.razor.rz.scp.css */
.welcome-programs-container[programs-welcome-view] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.welcome-programs-wrapper[programs-welcome-view] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-programs-actions[programs-welcome-view] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

    .welcome-programs-actions[programs-welcome-view]  .btn {
        height: 40px;
    }

.welcome-programs-title h1[programs-welcome-view] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-programs-subtitle[programs-welcome-view] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/Programs/Views/ProgramTable/ProgramTable.razor.rz.scp.css */
.programs-table-wrapper[program-table-view] {
    display: flex;
    flex-flow: column;
}

    .programs-table-wrapper[program-table-view]  .programs-table-wrapper-header {
        width: 100%;
        display: flex;
        flex-flow: row;
        justify-content: flex-end;
        align-items: center;
    }

    .programs-table-wrapper-header[program-table-view]  .icon {
        min-width: 12px !important;
        min-height: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }

    .programs-table-wrapper-header[program-table-view]  .btn {
        height: 40px;
    }


.programs-table-wrapper-header-actions[program-table-view]  .btn {
    height: 40px;
}


.programs-table-wrapper[program-table-view]  .programs-table-wrapper-header-filter {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}

.programs-table-wrapper[program-table-view]  .btn--primary,
.programs-table-wrapper[program-table-view]  .search--small .search-field input {
    height: 38.5px;
}

.programs-table-wrapper[program-table-view]  .btn {
    max-height: none !important;
}

.programs-table-wrapper[program-table-view]  .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

[program-table-view] .filter-drop-down {
    min-width: 190px;
}

.programs-table[program-table-view] {
    width: 100%;
    height: 100%;
    border: 0;
}

.programs-table[program-table-view]  .spinner-profile-height {
    height: 100% !important;
}

.programs-table[program-table-view]  .table {
    background: #ffffff;
    height: auto;
    border: 1px solid var(--grey-light-3);
}

.programs-table[program-table-view] .tr--expanded {
    position: relative;
    border-bottom: 0;
}

.programs-table[program-table-view] .tr--expanded td {
    background: var(--alpha-dark-1);
}

.programs-table[program-table-view] .tr--expanded td::before {
    content: none;
}

.programs-table[program-table-view] .tr--expanded td::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    left: 0;
    height: 3px;
    bottom: 0;
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.programs-table[program-table-view]  .no-records-td {
    background: var(--grey-light-2) !important;
}

.programs-table[program-table-view]  .action-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

.programs-table[program-table-view]  .action-container button {
    border: none;
}

.programs-table[program-table-view]  .action-container button:not(:hover) {
    background-color: inherit;
}

.programs-table[program-table-view]  .action-container button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.programs-table[program-table-view]  .action-container button svg {
    width: 10px;
    height: 10px;
    color: #888888;
}
.programs-table[program-table-view]  .action-container button:hover svg {
    color: #888888;
}

.programs-table-wrapper[program-table-view]  tr.tr--program-selected > td,
.programs-table-wrapper[program-table-view]  tr.tr--program-selected:hover > td {
    background-color: #EAF9F3 !important;
}

.programs-table-wrapper[program-table-view]  tr.tr--program-selection-disabled,
.programs-table-wrapper[program-table-view]  tr.tr--program-selection-disabled > td {
    cursor: not-allowed !important;
    opacity: 0.5;
}

.programs-table-wrapper[program-table-view]  tr.tr--program-selection-disabled:hover > td {
    background-color: inherit !important;
}

.dialog-alert-container[program-table-view]  button:empty {
    display: none !important;
}

.dialog-alert-container[program-table-view]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}
/* /Pages/OrgAdmin/Schools/Components/SchoolDialog/SchoolDialog.razor.rz.scp.css */
.title-container[b-24a5jrab5j] {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.icon-container[b-24a5jrab5j] {
    display: flex;
    padding: 8px;
    background-color: var(--green);
    border-radius: 4px;
}

.icon-container[b-24a5jrab5j]  svg {
    width: 18px !important;
    height: 18px !important;
    fill: white;
    color: white !important;
}

.scroll-wrapper[b-24a5jrab5j] {
    overflow-x: hidden !important;
}

[b-24a5jrab5j] .modal-body,
[b-24a5jrab5j] .dialog,
[b-24a5jrab5j] .dialog-body {
    overflow: visible !important;
}
/* /Pages/OrgAdmin/Schools/Components/SchoolProgramsTableContent/SchoolProgramsTableContent.razor.rz.scp.css */
.school-programs-table[b-49qvt18r7r] {
    width: 100%;
}

.actions-container[b-49qvt18r7r] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dialog-alert-container[b-49qvt18r7r]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-49qvt18r7r]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

[b-49qvt18r7r] .button-remove,
[b-49qvt18r7r] .button-remove:hover,
[b-49qvt18r7r] .button-remove:focus,
[b-49qvt18r7r] .button-remove:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

[b-49qvt18r7r] .button-remove svg {
    fill: currentColor;
    color: var(--grey-dark-1);
}

[b-49qvt18r7r] .button-remove:hover svg {
    fill: currentColor;
    color: var(--grey-dark-2);
}
/* /Pages/OrgAdmin/Schools/Components/SchoolTabs/SchoolTabs.razor.rz.scp.css */
.school-details-container[b-evfc8dibdc] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.school-details-header[b-evfc8dibdc] {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 20px;
}

.school-details-header-item[b-evfc8dibdc] {
    display: flex;
    align-items: center;
}

.school-details-header-item.info[b-evfc8dibdc] {
    font-size: 18px;
    font-weight: 600;
    line-height: 17px;
    color: var(--grey-dark-1);
}

.separator[b-evfc8dibdc] {
    height: 25px;
    margin: 0 15px;
    border: solid var(--grey-light-4);
    border-width: 0 0 0 1px;
}

.school-details-tabs-container[b-evfc8dibdc] {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
}

[b-evfc8dibdc] .school-details-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

[b-evfc8dibdc] .school-details-tabs > .tabs-header {
    z-index: 1;
    padding: 0 20px;
    background: white !important;
    border: 1px solid var(--grey-light-3);
}

[b-evfc8dibdc] .school-details-tabs > .tabs-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

[b-evfc8dibdc] .school-details-tabs > .tabs-body > .tab-content {
    flex: 1;
    min-height: 0;
}

.school-details-card[b-evfc8dibdc] {
    width: 100%;
    min-height: 500px;
    height: 100%;
    padding: 0;
}

.school-details-tab-content[b-evfc8dibdc],
.school-programs-tab-content[b-evfc8dibdc] {
    width: 100%;
    min-height: 500px;
    padding: 30px;
}

.school-details-spinner[b-evfc8dibdc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 400px;
}

[b-evfc8dibdc] .btn--circle svg {
    fill: var(--grey-dark-1);
}

[b-evfc8dibdc] .btn--circle:hover svg {
    fill: white;
}

.school-details-tab-content[b-evfc8dibdc] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 500px;
    padding: 30px;
}

.school-details-actions[b-evfc8dibdc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--grey-light-3);
}

[b-evfc8dibdc] .btn.cancel-button:not(.btn--disabled):not([disabled]) {
    color: var(--grey-dark-1) !important;
    background: white !important;
}

[b-evfc8dibdc] .btn.cancel-button.btn--disabled,
[b-evfc8dibdc] .btn.cancel-button[disabled] {
    color: var(--grey-light-3) !important;
    background: transparent !important;
    border-color: var(--grey-light-3) !important;
}
/* /Pages/OrgAdmin/Schools/Page/AdministratorSchools.razor.rz.scp.css */
/* /Pages/OrgAdmin/Schools/Views/AddSchoolProgramDialog/AddSchoolProgramDialog.razor.rz.scp.css */
.add-school-program-dialog[b-zbavtvjsjw]  .programs-table-wrapper-header-filter {
    justify-content: space-between !important;
}
/* /Pages/OrgAdmin/Schools/Views/SchoolForm/SchoolForm.razor.rz.scp.css */
.school-form-content[b-aei2q8wewk] {
    width: 100%;
    overflow-y: auto;
}

.school-form-description[b-aei2q8wewk] {
    margin-top: 15px;
}

.school-form-section-title[b-aei2q8wewk] {
    margin-top: 25px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--grey-light-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--grey-dark-1);
}

.school-form-field[b-aei2q8wewk] {
    width: 100%;
}

.school-form-contact-row[b-aei2q8wewk] {
    row-gap: 15px;
}

[b-aei2q8wewk] .school-form-dropdown {
    width: 100%;
}

.school-form-content[b-aei2q8wewk] {
    padding: 12px 4px 8px;
}

.school-form-content > .row[b-aei2q8wewk] {
    margin-bottom: 20px;
}

.school-form-description[b-aei2q8wewk] {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.school-form-section-title[b-aei2q8wewk] {
    margin-top: 8px;
    margin-bottom: 4px;
    padding-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #A4A4A4;
    border-bottom: 1px solid #E7E7E7;
}

.school-form-field[b-aei2q8wewk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-aei2q8wewk] .school-form-dropdown {
    width: 100%;
}

.school-form-contact-row[b-aei2q8wewk] {
    row-gap: 20px;
}

@media (max-width: 768px) {
    .school-form-contact-row[b-aei2q8wewk] {
        row-gap: 16px;
    }
}
/* /Pages/OrgAdmin/Schools/Views/SchoolProgramsTable/SchoolProgramsTable.razor.rz.scp.css */
.school-programs-table-wrapper[b-f4mk29n00x] {
    width: 100%;
}

.school-programs-table-header[b-f4mk29n00x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.school-programs-table-actions[b-f4mk29n00x] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-programs-table-filter[b-f4mk29n00x] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-programs-table-filter[b-f4mk29n00x]  .search--small {
    background: white !important;
    border: 1px solid var(--grey-light-2);
    padding: 0 !important;
}

.school-programs-table-filter[b-f4mk29n00x]  .filter-drop-down {
    min-width: 200px;
}

[b-f4mk29n00x] .btn.btn--primary {
    padding: 12px !important;
}
/* /Pages/OrgAdmin/Schools/Views/SchoolTable/SchoolTable.razor.rz.scp.css */
.school-table-wrapper[b-17hy1f4zq0] {
    display: flex;
    flex-flow: column;
}

.school-table-wrapper-header[b-17hy1f4zq0] {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.school-table-wrapper-header[b-17hy1f4zq0]  .icon {
    min-width: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

.school-table-wrapper-header[b-17hy1f4zq0]  .btn {
    height: 40px;
}

.school-table-wrapper-header-filter[b-17hy1f4zq0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.school-table-wrapper[b-17hy1f4zq0]  .btn--primary,
.school-table-wrapper[b-17hy1f4zq0]  .search--small .search-field input {
    height: 38.5px;
}

.school-table-wrapper[b-17hy1f4zq0]  .btn {
    max-height: none !important;
}

.school-table-wrapper[b-17hy1f4zq0]  .search--small .search-field input {
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

[b-17hy1f4zq0] .filter-drop-down {
    min-width: 190px;
}

.school-table[b-17hy1f4zq0] {
    width: 100%;
    height: 100%;
}

.school-table[b-17hy1f4zq0]  .spinner-profile-height {
    height: 100% !important;
}

.school-table[b-17hy1f4zq0]  .table {
    height: auto;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
}

.school-table[b-17hy1f4zq0]  .no-records-td {
    background: var(--grey-light-2) !important;
}

.dialog-alert-container[b-17hy1f4zq0]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-17hy1f4zq0]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.table-tooltip-header[b-17hy1f4zq0] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    color: white;
}

.table-tooltip-item[b-17hy1f4zq0] {
    display: flex;
    font-size: 14px;
    font-weight: normal;
    color: var(--grey-light-4)
}

.actions-container[b-17hy1f4zq0] {
    display: flex;
    justify-content: right;
}

.actions-container[b-17hy1f4zq0] > .btn--circle {
    border: none;
    background: none;
}
/* /Pages/OrgAdmin/Schools/Views/SchoolWelcome/SchoolWelcome.razor.rz.scp.css */
.school-welcome-container[b-az0409dsql] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.school-welcome-wrapper[b-az0409dsql] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-school-actions[b-az0409dsql] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

    .welcome-school-actions[b-az0409dsql]  .btn {
        height: 39px !important;
    }

.welcome-title h1[b-az0409dsql] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-subtitle[b-az0409dsql] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/Settings/GradingScales/Components/GradeMarkGradingStDialog/GradeMarkGradingStandardDialog.razor.rz.scp.css */
/** CSS override */

.grading-standards-builder[edit-grading-standard-dialog-component] {
    margin: 10px;
}

[edit-grading-standard-dialog-component] .layout--dark .field {
    color: black;
    border-color: var(--grey-light-3);
    background-color: white;
}

[edit-grading-standard-dialog-component] .layout--dark .field-color-picker .field-color {
    border-color: var(--grey-light-3);
    background-color: white;
}

.title[edit-grading-standard-dialog-component] {
    min-height: 57.59px;
}

.label[edit-grading-standard-dialog-component] {
    width: fit-content;
}

.grading-standards-inputs[edit-grading-standard-dialog-component]  .scroll {
    flex: 0 1 auto;
    min-height: 0;
    padding-bottom: 10px;
}

    .grading-standards-inputs[edit-grading-standard-dialog-component]  .scroll > .flex {
        max-height: initial;
    }

.no-grades-view[edit-grading-standard-dialog-component] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 370px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px dashed rgba(0, 0, 0, 0.20);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/** Original CSS */
.grading-standards-builder .grading-standards-inputs[edit-grading-standard-dialog-component] {
    flex: 0 1 auto;
    min-height: 0;
    border-radius: 0 0 4px 4px;
}

.row[edit-grading-standard-dialog-component] {
    display: flex;
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.label-detail[edit-grading-standard-dialog-component] {
    width: fit-content;
    color: var(--grey-3);
}

.grading-standards-inputs[edit-grading-standard-dialog-component] {
    display: flex;
    flex-direction: column;
    margin: 20px 0 0 0;
}

    .grading-standards-inputs .scroll[edit-grading-standard-dialog-component] {
        flex: 0 1 auto;
        min-height: 0;
        padding-bottom: 10px;
    }

        .grading-standards-inputs .scroll > .flex[edit-grading-standard-dialog-component] {
            max-height: initial;
        }

    .grading-standards-inputs .gs-card-grade[edit-grading-standard-dialog-component] {
        width: 230px;
        min-width: 230px;
    }

.layout--dark .grading-standards-inputs[edit-grading-standard-dialog-component] {
    background: var(--grey-dark-3);
}
/* /Pages/OrgAdmin/Settings/GradingScales/Components/GradeMarkGradingStDialog/Views/GradeCardView/View/GradeCard.razor.rz.scp.css */
/** CSS override */

.gs-card-grade[grading-standard-grade-card-view] {
    min-width: 240px !important;
    width: 240px !important;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    /* Chrome, Safari, Edge, Opera */
    /* Firefox */
}

    .gs-card-grade[grading-standard-grade-card-view]  .menu-list {
        transform: none !important;
    }

.grade-label[grading-standard-grade-card-view] {
    display: flex;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-label[grading-standard-grade-card-view] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--grey-3);
}

.color-selector[grading-standard-grade-card-view] {
    display: flex;
    flex-direction: column;
}

    .color-selector label[grading-standard-grade-card-view] {
        display: block;
        font-size: 0.875rem;
        margin-bottom: 2px;
    }

    .color-selector[grading-standard-grade-card-view]  .field-group {
        width: 100%;
    }

/** Original CSS */

.gs-card-grade .card-header[grading-standard-grade-card-view],
.gs-card-grade .card-body[grading-standard-grade-card-view] {
    display: flex;
    gap: 10px;
}

.gs-card-grade .card-header[grading-standard-grade-card-view] {
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 30px;
    font-weight: 600;
}

.gs-card-grade .card-body[grading-standard-grade-card-view] {
    flex-direction: column;
    padding: 20px;
}

    .gs-card-grade .card-body > *[grading-standard-grade-card-view] {
        flex: 1 1 auto;
    }

    .gs-card-grade .card-body .flex > *[grading-standard-grade-card-view] {
        flex: 1 1 0;
    }

.gs-card-grade .field-group label[grading-standard-grade-card-view] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.gs-card-grade .field[type=number][grading-standard-grade-card-view]::-webkit-outer-spin-button,
.gs-card-grade .field[type=number][grading-standard-grade-card-view]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gs-card-grade .field[type=number][grading-standard-grade-card-view] {
    -moz-appearance: textfield;
}

.layout--dark .gs-card-grade .field[grading-standard-grade-card-view] {
    color: var(--grey-dark-3);
    border-color: var(--grey-light-3);
    background: #ffffff;
}

    .layout--dark .gs-card-grade .field[grading-standard-grade-card-view]::-moz-placeholder {
        color: var(--grey-1);
    }

    .layout--dark .gs-card-grade .field[grading-standard-grade-card-view]::placeholder {
        color: var(--grey-1);
    }

.layout--dark .gs-card-grade .field-color-picker .field-color[grading-standard-grade-card-view] {
    color: var(--grey-dark-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

    .layout--dark .gs-card-grade .field-color-picker .field-color > span[grading-standard-grade-card-view] {
        color: #ffffff;
    }
/* /Pages/OrgAdmin/Settings/GradingScales/Components/GradeMarkGradingStDialog/Views/GradesGraphView/View/GradesGraph.razor.rz.scp.css */
/** CSS override */

.grading-standards-graph[grading-standard-grades-graph-view] {
    border-radius: 4px 4px 0 0 !important;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    margin: 10px 0 0 0;
}

    /** Original CSS */

    .grading-standards-graph .graph[grading-standard-grades-graph-view] {
        position: relative;
        height: 130px;
        padding: 30px;
        background: white;
        border-radius: inherit;
    }

    .grading-standards-graph .graph-axis[grading-standard-grades-graph-view] {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-top: 10px;
    }

        .grading-standards-graph .graph-axis .graph-tick-line[grading-standard-grades-graph-view] {
            position: relative;
            width: 1px;
        }

            .grading-standards-graph .graph-axis .graph-tick-line:nth-child(even)[grading-standard-grades-graph-view]::before {
                height: 5px;
            }

            .grading-standards-graph .graph-axis .graph-tick-line[grading-standard-grades-graph-view]::before {
                content: "";
                display: block;
                width: 1px;
                height: 10px;
                background: #000000;
                opacity: 0.125;
            }

        .grading-standards-graph .graph-axis .graph-tick-label[grading-standard-grades-graph-view] {
            position: absolute;
            transform: translateX(-50%);
            color: #000000;
            opacity: 0.375;
        }

    .grading-standards-graph .graph-grade-scale[grading-standard-grades-graph-view] {
        position: relative;
        display: flex;
        height: 18px;
        border-radius: 10px;
        border: 3px solid var(--grey-light-3);
        background: var(--grey-light-3);
        margin: 30px -2px 0;
    }

    .grading-standards-graph .graph-html[grading-standard-grades-graph-view] {
        position: relative;
    }

        .grading-standards-graph .graph-html.graph-html--slots[grading-standard-grades-graph-view] {
            color: #000000;
        }

            .grading-standards-graph .graph-html.graph-html--slots .graph-slot[grading-standard-grades-graph-view] {
                top: 50% !important;
                transform: translateY(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 600;
            }

                .grading-standards-graph .graph-html.graph-html--slots .graph-slot span[grading-standard-grades-graph-view] {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                    .grading-standards-graph .graph-html.graph-html--slots .graph-slot span.position--top[grading-standard-grades-graph-view] {
                        position: absolute;
                        bottom: 100%;
                    }

                .grading-standards-graph .graph-html.graph-html--slots .graph-slot.slot--class[grading-standard-grades-graph-view] {
                    height: 29px;
                    padding: 2px 4px;
                    background: var(--alpha-green-2);
                    border: 2px solid var(--green);
                }

                    .grading-standards-graph .graph-html.graph-html--slots .graph-slot.slot--class:first-child[grading-standard-grades-graph-view] {
                        border-radius: 30px 0 0 30px;
                    }

                    .grading-standards-graph .graph-html.graph-html--slots .graph-slot.slot--class:last-child[grading-standard-grades-graph-view] {
                        border-radius: 0 30px 30px 0;
                    }

                    .grading-standards-graph .graph-html.graph-html--slots .graph-slot.slot--class:only-child[grading-standard-grades-graph-view] {
                        border-radius: 30px;
                    }

                .grading-standards-graph .graph-html.graph-html--slots .graph-slot.slot--break[grading-standard-grades-graph-view] {
                    height: 38px;
                    padding: 8px 0;
                    background: var(--alpha-red-2);
                    outline: 2px solid var(--red);
                    z-index: 1;
                    border-radius: 8px;
                }

        .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder[grading-standard-grades-graph-view] {
            position: absolute;
            top: 50%;
            width: 100%;
            height: 20px;
            font-size: 14px;
            color: var(--green);
            text-align: center;
            border-left: 1px solid var(--green);
            border-right: 1px solid var(--green);
        }

            .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder .graph-line[grading-standard-grades-graph-view] {
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                border-bottom: 1px dotted var(--green);
                opacity: 0.75;
            }

                .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder .graph-line[grading-standard-grades-graph-view]::before, .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder .graph-line[grading-standard-grades-graph-view]::after {
                    content: "";
                    position: absolute;
                    transform: translateY(-50%) rotate(45deg);
                    width: 8px;
                    aspect-ratio: 1/1;
                    border-color: var(--green);
                    border-width: 1px;
                }

                .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder .graph-line[grading-standard-grades-graph-view]::before {
                    left: 2px;
                    border-left-style: solid;
                    border-bottom-style: solid;
                }

                .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder .graph-line[grading-standard-grades-graph-view]::after {
                    right: 2px;
                    border-top-style: solid;
                    border-right-style: solid;
                }

            .grading-standards-graph .graph-html.graph-html--remainder .graph-remainder .graph-label[grading-standard-grades-graph-view] {
                position: absolute;
                left: 50%;
                transform: translate(-50%, -75%);
            }

.layout--light .grading-standards-graph[grading-standard-grades-graph-view], .layout--light.grading-standards-graph[grading-standard-grades-graph-view] {
    background: var(--grey-light-1);
}

    .layout--light .grading-standards-graph .graph[grading-standard-grades-graph-view], .layout--light.grading-standards-graph .graph[grading-standard-grades-graph-view] {
        background: #ffffff;
    }

.layout--dark .grading-standards-graph[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph[grading-standard-grades-graph-view] {
    background: var(--grey-dark-4);
}

    .layout--dark .grading-standards-graph .graph[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph .graph[grading-standard-grades-graph-view] {
        background: var(--alpha-light-1);
    }

    .layout--dark .grading-standards-graph .graph-axis .graph-tick-line[grading-standard-grades-graph-view]::before, .layout--dark.grading-standards-graph .graph-axis .graph-tick-line[grading-standard-grades-graph-view]::before {
        background: #ffffff;
    }

    .layout--dark .grading-standards-graph .graph-axis .graph-tick-label[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph .graph-axis .graph-tick-label[grading-standard-grades-graph-view] {
        color: #ffffff;
    }

    .layout--dark .grading-standards-graph .graph-grade-scale[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph .graph-grade-scale[grading-standard-grades-graph-view] {
        border-color: rgba(255, 255, 255, 0.05);
    }

        .layout--dark .grading-standards-graph .graph-grade-scale .graph-grade .graph-grade-ctrl .knob[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph .graph-grade-scale .graph-grade .graph-grade-ctrl .knob[grading-standard-grades-graph-view] {
            background: var(--grey-dark-4);
        }

        .layout--dark .grading-standards-graph .graph-grade-scale .graph-grade .graph-grade-ctrl .label[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph .graph-grade-scale .graph-grade .graph-grade-ctrl .label[grading-standard-grades-graph-view] {
            color: #ffffff;
        }

    .layout--dark .grading-standards-graph .graph-html.graph-html--slots[grading-standard-grades-graph-view], .layout--dark.grading-standards-graph .graph-html.graph-html--slots[grading-standard-grades-graph-view] {
        color: #ffffff;
    }
/* /Pages/OrgAdmin/Settings/GradingScales/Components/GradeMarkGradingStDialog/Views/GradesHeaderView/View/GradesHeader.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/GradingScales/Components/GradeMarkGradingStDialog/Views/GradesView/View/Grades.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/GradingScales/Components/GradeMarkGradingStDialog/Views/GraphGradeView/View/GraphGrade.razor.rz.scp.css */
.graph-grade[b-excca676sl] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.graph-grade-ctrl[b-excca676sl] {
    position: absolute;
    bottom: -4px;
    right: 0;
    transform: translateX(50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    border-radius: 50%;
    border: 2px;
    z-index: 1;
}

    .graph-grade-ctrl:hover[b-excca676sl] {
        z-index: 2;
    }

    .graph-grade-ctrl .knob[b-excca676sl] {
        position: relative;
        padding: 0;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: inherit;
        border: 2px solid currentColor;
        border-radius: inherit;
        background: #ffffff;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
    }

        .graph-grade-ctrl .knob[readonly][b-excca676sl] {
            cursor: context-menu;
        }

        .graph-grade-ctrl .knob[b-excca676sl]::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: currentColor;
            border-radius: inherit;
        }

    .graph-grade-ctrl .field[b-excca676sl] {
        width: 42px;
        padding: 0;
        margin-bottom: 5px;
        text-align: center;
        font-size: 12px;
        color: var(--grey-dark-3);
        background: none;
        border-radius: 0;
        border: none;
    }

    .graph-grade-ctrl .label[b-excca676sl] {
        color: #000000;
    }
/* /Pages/OrgAdmin/Settings/GradingScales/Components/PercentGradingStandardDialog/PercentGradingStandardDialog.razor.rz.scp.css */
.percent-grading-standard-dialog[b-7tiqq43p78] {
    margin: 10px;
}
/* /Pages/OrgAdmin/Settings/GradingScales/Components/ProficiencyGradingStandardDialog/ProficiencyGradingStandardDialog.razor.rz.scp.css */
/** CSS override */

.proficiency-grading-standard-dialog[edit-grading-standard-dialog-component]  .dialog--standard .dialog-body[dialog-template] {
    overflow-y: auto !important;
}

.grading-standards-builder[edit-grading-standard-dialog-component] {
    margin: 10px;
}

[edit-grading-standard-dialog-component] .layout--dark .field {
    color: black;
    border-color: var(--grey-light-3);
    background-color: white;
}

[edit-grading-standard-dialog-component] .layout--dark .field-color-picker .field-color {
    border-color: var(--grey-light-3);
    background-color: white;
}

.title[edit-grading-standard-dialog-component] {
    min-height: 57.59px;
}

.grading-standards-inputs[edit-grading-standard-dialog-component]  .scroll {
    flex: 0 1 auto;
    min-height: 0;
    padding-bottom: 10px;
}

    .grading-standards-inputs[edit-grading-standard-dialog-component]  .scroll > .flex {
        max-height: initial;
    }

.no-grades-view[edit-grading-standard-dialog-component] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 370px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px dashed rgba(0, 0, 0, 0.20);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/** Original CSS */
.grading-standards-builder .grading-standards-inputs[edit-grading-standard-dialog-component] {
    flex: 0 1 auto;
    min-height: 0;
    border-radius: 0 0 4px 4px;
}

.grading-standards-inputs[edit-grading-standard-dialog-component] {
    display: flex;
    flex-direction: column;
    margin: 20px 0 0 0;
}

    .grading-standards-inputs .scroll[edit-grading-standard-dialog-component] {
        flex: 0 1 auto;
        min-height: 0;
        padding-bottom: 10px;
    }

        .grading-standards-inputs .scroll > .flex[edit-grading-standard-dialog-component] {
            max-height: initial;
        }

    .grading-standards-inputs .gs-card-grade[edit-grading-standard-dialog-component] {
        width: 230px;
        min-width: 230px;
    }

.layout--dark .grading-standards-inputs[edit-grading-standard-dialog-component] {
    background: var(--grey-dark-3);
}
/* /Pages/OrgAdmin/Settings/GradingScales/Components/ProficiencyGradingStandardDialog/Views/GradeCardView/View/GradeCard.razor.rz.scp.css */
/** CSS override */

.gs-card-grade[grading-standard-grade-card-view] {
    min-width: 240px !important;
    width: 240px !important;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    /* Chrome, Safari, Edge, Opera */
    /* Firefox */
}

    .gs-card-grade[grading-standard-grade-card-view]  .menu-list {
        transform: none !important;
    }

.grade-label[grading-standard-grade-card-view] {
    display: flex;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-label[grading-standard-grade-card-view] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--grey-3);
}

.color-selector[grading-standard-grade-card-view] {
    display: flex;
    flex-direction: column;
}

    .color-selector label[grading-standard-grade-card-view] {
        display: block;
        font-size: 0.875rem;
        margin-bottom: 2px;
    }

    .color-selector[grading-standard-grade-card-view]  .field-group {
        width: 100%;
    }

/** Original CSS */

.gs-card-grade .card-header[grading-standard-grade-card-view],
.gs-card-grade .card-body[grading-standard-grade-card-view] {
    display: flex;
    gap: 10px;
}

.gs-card-grade .card-header[grading-standard-grade-card-view] {
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 30px;
    font-weight: 600;
}

.gs-card-grade .card-body[grading-standard-grade-card-view] {
    flex-direction: column;
    padding: 20px;
}

    .gs-card-grade .card-body > *[grading-standard-grade-card-view] {
        flex: 1 1 auto;
    }

    .gs-card-grade .card-body .flex > *[grading-standard-grade-card-view] {
        flex: 1 1 0;
    }

.gs-card-grade .field-group label[grading-standard-grade-card-view] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.gs-card-grade .field[type=number][grading-standard-grade-card-view]::-webkit-outer-spin-button,
.gs-card-grade .field[type=number][grading-standard-grade-card-view]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gs-card-grade .field[type=number][grading-standard-grade-card-view] {
    -moz-appearance: textfield;
}

.layout--dark .gs-card-grade .field[grading-standard-grade-card-view] {
    color: var(--grey-dark-3);
    border-color: var(--grey-light-3);
    background: #ffffff;
}

    .layout--dark .gs-card-grade .field[grading-standard-grade-card-view]::-moz-placeholder {
        color: var(--grey-1);
    }

    .layout--dark .gs-card-grade .field[grading-standard-grade-card-view]::placeholder {
        color: var(--grey-1);
    }

.layout--dark .gs-card-grade .field-color-picker .field-color[grading-standard-grade-card-view] {
    color: var(--grey-dark-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

    .layout--dark .gs-card-grade .field-color-picker .field-color > span[grading-standard-grade-card-view] {
        color: #ffffff;
    }
/* /Pages/OrgAdmin/Settings/GradingScales/Components/ProficiencyGradingStandardDialog/Views/GradesHeaderView/View/GradesHeader.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/GradingScales/Components/ProficiencyGradingStandardDialog/Views/GradesView/View/Grades.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/GradingScales/Page/GradingStandards.razor.rz.scp.css */
.grading-standards-page[grading-standards-page] {
    display: flex;
    justify-content: center;
}

[grading-standards-page] .table-wrapper--card {
    width: 1400px;
}

.table-container[grading-standards-page] {
    display: flex;
    padding: 0px 10px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    width: 1400px;
}

.table-header[grading-standards-page] {
    display: flex;
    justify-content: start;
    align-items: center;
    align-self: stretch;
}

.table-body[grading-standards-page] {
    display: flex;
    padding: 1px 1px 0px 1px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border: 1px solid var(--grey-light-3);
}

.dropdown-button-content[grading-standards-page] {
    display: flex;
    gap: 8px;
    height: 24px;
    align-items: center;
}

    .dropdown-button-content[grading-standards-page] .icon {
        width: 16px !important;
        height: 16px !important;
        flex: none !important;
        left: 0 !important;
    }

    .dropdown-button-content[grading-standards-page]  path {
        fill: white !important;
    }

[grading-standards-page] div.dropdown-menu {
    width: 100%;
}
/* /Pages/OrgAdmin/Settings/GradingScales/Page/Views/GradingStandardTable/GradingStandardsTable.razor.rz.scp.css */
.actions-container[grading-standards-table-view] {
    display: flex;
    justify-content: right;
    gap: 20px;
}

    .actions-container[grading-standards-table-view]  .menu--more .menu-header .btn {
        transform: translateY(-50%) rotate(180deg) !important;
    }

.tooltip-body[grading-standards-table-view] {
    border-radius: 4px;
    padding: 10px;
    transform: translate(-50%);
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    color: var(--grey-light-2);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

.default-tag[grading-standards-table-view] {
    display: flex;
    min-width: 27px;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--grey-3);
}
/* /Pages/OrgAdmin/Settings/SchoolTypes/Components/GradeTable/GradeTable.razor.rz.scp.css */
.grade-table-header[grade-table-component]  .btn {
    height: 40px;
}

.grade-table-footer[grade-table-component]  .pager {
    justify-content: flex-end;
}

    .grade-table-footer[grade-table-component]  .pager .pager--controls {
       display: none;
    }

.dialog-alert-container[grade-table-component]  button:empty {
    display: none !important;
}

.dialog-alert-container[grade-table-component]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.remove-button-container[grade-table-component]  .btn {
    background: transparent !important;
}

    .remove-button-container[grade-table-component]  .btn svg {
        fill: var(--grey-3);
        width: 12px;
        height: 12px;
    }

    .remove-button-container[grade-table-component]  .btn:hover {
        background: transparent !important;
    }

        .remove-button-container[grade-table-component]  .btn:hover svg {
            fill: var(--grey-dark-3) !important;
        }

.navigate-panel[grade-table-component] {
    display: flex;
    align-items: center;
}

    .navigate-panel[grade-table-component]  path {
        fill: var(--grey-3);
    }

.separator[grade-table-component] {
    height: 40px;
    margin: 0 15px;
    border: solid var(--grey-light-4);
    border-width: 0.1px;
}

.item.info[grade-table-component] {
    font-size: 18px;
    font-weight: 600;
    line-height: 17px;
}
/* /Pages/OrgAdmin/Settings/SchoolTypes/Components/GradeTable/Views/AddGradeDialog/AddGradeDialog.razor.rz.scp.css */
.add-grade-dialog[add-grade-dialog-view]  .container.gutter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* /Pages/OrgAdmin/Settings/SchoolTypes/Components/SchoolTypeTable/SchoolTypeTable.razor.rz.scp.css */
.school-types-table-header[school-type-table-component]  .btn {
    height: 40px;
}

.school-types-table-footer[school-type-table-component]  .pager {
    justify-content: flex-end;
}

    .school-types-table-footer[school-type-table-component]  .pager .pager--controls {
       display: none;
    }

.dialog-alert-container[school-type-table-component]  button:empty {
    display: none !important;
}

.dialog-alert-container[school-type-table-component]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}
/* /Pages/OrgAdmin/Settings/SchoolTypes/Components/SchoolTypeTable/Views/AddSchoolTypeDialog/AddSchoolTypeDialog.razor.rz.scp.css */
.add-school-type-dialog[add-school-type-dialog-view]  .container.gutter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* /Pages/OrgAdmin/Settings/SchoolTypes/Components/SchoolTypeTable/Views/SchoolTypesWelcome/SchoolTypesWelcome.razor.rz.scp.css */
.welcome-container[school-types-welcome-view] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.welcome-wrapper[school-types-welcome-view] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-actions[school-types-welcome-view] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

    .welcome-actions[school-types-welcome-view]  .btn {
        height: 40px;
    }

.welcome-title h1[school-types-welcome-view] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-subtitle[school-types-welcome-view] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/Settings/SchoolTypes/Page/SchoolTypes.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Components/ImportStandardsDialog/ImportStandardsDialog.razor.rz.scp.css */
.import-standards-dialog-header[b-f50nleevzq] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
}

.import-standards-dialog-header-icon[b-f50nleevzq] {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green);
}

.import-standards-and-skill-dialog-body[b-f50nleevzq] {
    display: flex;
    height: 44vh;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.import-standards-and-skill-dialog-body-header[b-f50nleevzq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

    .import-standards-and-skill-dialog-body-header p[b-f50nleevzq] {
        color: #888888;
        font-size: 14px;
        line-height: 22.4px;
        font-weight: 400;
    }

.import-standards-template-container[b-f50nleevzq] {
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #F1F1F1;
    box-shadow: 0 6px 24px 0 #0000001F;
}

.import-standards-template-info[b-f50nleevzq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(2px);
}

.import-standards-info-headline[b-f50nleevzq] {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #616161;
}

.import-standards-info-container[b-f50nleevzq] {
    display: flex;
    gap: 10px;
}

.import-standards-info-small[b-f50nleevzq] {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    color: #888888;
}

.import-standards-template-download[b-f50nleevzq] {
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: #888888;
    display: flex;
    gap: 5px;
    justify-content: center;
    height: 100%;
    align-items: center;
    padding-right: 10px;
}

    .import-standards-template-download[b-f50nleevzq]  svg {
        color: #888888;
        fill:  #888888;
        width: 14px !important;
        height: 14px !important;
    }

.import-standards-file-icon[b-f50nleevzq] {
    display: flex;
    height: 100%;
    align-items: center;
}

    .import-standards-file-icon[b-f50nleevzq]  svg {
        color: #888888 !important;
        fill:  #888888 !important;
        width: 18px !important;
        height: 18px !important;
    }
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Components/StandardsAndSkillsHierarchicalTree/StandardsAndSkillsHierarchicalTree.razor.rz.scp.css */
.standards-and-skills-wrapper[b-4z5kug9agr] {
    display: flex;
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dddddd;
    background: white;
}

.standards-and-skills-toolbar[b-4z5kug9agr] {
    display: flex;
    padding: 8px 10px;
    flex: 0 0 auto;
    align-items: center;
    border-bottom: 1px solid var(--grey-light-2);
    background: var(--grey-light-1);
}

.standards-and-skills-toolbar[b-4z5kug9agr]  .btn.secondary-color {
    background: var(--green) !important;
    color: white !important;
}

.standards-and-skills-toolbar-filters[b-4z5kug9agr] {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 8px;
}

.standards-and-skills-toolbar-filters[b-4z5kug9agr]  .search {
    min-width: 280px !important;
    background: white !important;
}

.standards-and-skills-toolbar-filters[b-4z5kug9agr]  .search.search--small {
    padding: 3px 8px !important;
}

.standards-and-skills-wrapper[b-4z5kug9agr]  .expandable-node {
    width: 100%;
    min-width: 0 !important;
}

.standards-and-skills-wrapper[b-4z5kug9agr]  .hierarhical-tree-node-template {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.standards-and-skills-node[b-4z5kug9agr] {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.standards-and-skills-node-content[b-4z5kug9agr] {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.standards-and-skills-node-type[b-4z5kug9agr],
.standards-and-skills-node-code[b-4z5kug9agr],
.standards-and-skills-node-name[b-4z5kug9agr],
.standards-and-skills-node-year[b-4z5kug9agr] {
    display: inline;
    margin-right: 6px;
    vertical-align: middle;
}

.standards-and-skills-node-type[b-4z5kug9agr],
.standards-and-skills-node-year[b-4z5kug9agr] {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--grey-light-2);
    color: var(--grey-2);
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
}

.standards-and-skills-node-code[b-4z5kug9agr] {
    color: var(--grey-2);
    font-size: 11px;
    white-space: nowrap;
}

.standards-and-skills-node-name[b-4z5kug9agr] {
    color: #272727;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.34px;
}

.standards-and-skills-node-actions[b-4z5kug9agr] {
    margin-left: auto;
    flex: 0 0 auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.hierarhical-tree-node:hover .standards-and-skills-node-actions[b-4z5kug9agr] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove {
    padding: 8px 0;
}

.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--grey-2);
}

.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove,
.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove .btn,
.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove .btn--icon,
.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove:hover,
.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove .btn:hover,
.standards-and-skills-node-actions[b-4z5kug9agr]  .button-remove .btn--icon:hover {
    border: none !important;
    background: transparent !important;
}

.standards-and-skills-loader[b-4z5kug9agr] {
    display: flex;
    height: calc(100% - 46px);
    align-items: center;
    justify-content: center;
}

.standards-and-skills-wrapper .loading-spinner[b-4z5kug9agr] {
    margin-top: 220px;
}

.standards-and-skills-node-selected[b-4z5kug9agr] {
    background: #e6f7f1 !important;
}

.standards-and-skills-wrapper[b-4z5kug9agr]  .hierarhical-tree-node.selected:has(.standards-and-skills-node-selected),
.standards-and-skills-wrapper[b-4z5kug9agr]  .hierarhical-tree-node:has(.standards-and-skills-node-selected) {
    background: #e6f7f1 !important;
}

.standards-and-skills-wrapper[b-4z5kug9agr]  .standards-and-skills-scroll {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.standards-and-skills-wrapper[b-4z5kug9agr]  .standards-and-skills-scroll > div {
    min-height: 0;
}

.dialog-alert-container[b-4z5kug9agr]  button:empty {
    display: none !important;
}

.dialog-alert-container[b-4z5kug9agr]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.standards-and-skills-wrapper.standards-and-skills-dialog-tree[b-4z5kug9agr] {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
}

.standards-and-skills-wrapper.standards-and-skills-dialog-tree .standards-and-skills-toolbar[b-4z5kug9agr] {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 0;
    min-height: 0;
    padding: 0;
    flex: 0 0 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.standards-and-skills-wrapper.standards-and-skills-dialog-tree .standards-and-skills-toolbar-filters[b-4z5kug9agr] {
    position: absolute;
    z-index: 20;
    top: -56px;
    right: 0;
    margin-left: 0;
    white-space: nowrap;
}

.standards-and-skills-wrapper.standards-and-skills-dialog-tree .standards-and-skills-loader[b-4z5kug9agr] {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.standards-and-skills-wrapper.standards-and-skills-dialog-tree .loading-spinner[b-4z5kug9agr] {
    margin-top: 0;
}

.standards-and-skills-wrapper.standards-and-skills-dialog-tree[b-4z5kug9agr]  .standards-and-skills-scroll {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Page/AdministratorStandardsAndSkills.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/HierarchicalTreeView/HierarchicalTree.razor.rz.scp.css */
.hierarhical-tree[b-qob7fvbatq] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: auto;
    scrollbar-color: var(--alpha-dark-2) transparent;
}

.hierarhical-tree-selection-highlight[b-qob7fvbatq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 287px; /* JS will overwrite */
    height: 30px; /* JS will overwrite */
    border-radius: 4px;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.hierarhical-tree-selection-highlight.full-width[b-qob7fvbatq] {
    width: 100% !important;
    z-index: 99999;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/HierarchicalTreeView/View/HierarchicalTreeNode.razor.rz.scp.css */
.hierarhical-tree-node[b-ys44ajwrzp] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    cursor: pointer;
    box-sizing: border-box;
    z-index: auto;
}

.expandable-node[b-ys44ajwrzp] {
    position: relative;
    z-index: auto;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    gap: 6px;
    padding: 0 12px 0 7px;
    box-sizing: border-box;
}

.hierarhical-tree-node-template[b-ys44ajwrzp] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

    .expandable-node.collapsed .expand-action .expand-action-icon[b-ys44ajwrzp] {
        transform: rotate(-90deg);
    }

    .expandable-node.expanded .expand-action .expand-action-icon[b-ys44ajwrzp] {
        transform: rotate(0deg);
    }

.expand-action[b-ys44ajwrzp] {
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    padding-left: 8px;
}

    .expand-action.hidden-expander[b-ys44ajwrzp] {
        visibility: hidden;
    }

    .expand-action[b-ys44ajwrzp]  .expand-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--transition-duration) ease 0s;
        color: var(--grey-3);
    }

        .expand-action[b-ys44ajwrzp]  .expand-action-icon.icon-14,
        .expand-action[b-ys44ajwrzp]  .expand-action-icon.icon-14 .icon {
            height: 10px;
            width: 10px;
        }

        .expand-action[b-ys44ajwrzp]  .expand-action-icon.icon-12,
        .expand-action[b-ys44ajwrzp]  .expand-action-icon.icon-12 .icon {
            height: 8px;
            width: 8px;
        }

        .expand-action[b-ys44ajwrzp]  .expand-action-icon ::deep .icon {
            display: flex;
            transition: transform 0.2s ease;
        }

    .expand-action[b-ys44ajwrzp]  .btn--circle {
        width: 24px;
        height: 24px;
    }

/*.hierarhical-tree-node-template {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}*/

.tree-anchor-start[b-ys44ajwrzp],
.tree-anchor-end[b-ys44ajwrzp] {
    display: block;
    flex: 0 0 1px;
    width: 1px;
    min-width: 1px;
    height: 30px;
    pointer-events: none;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/ImportStandardsSummaryDialog/ImportStandardsSummaryDialog.razor.rz.scp.css */
.import-standards-summary-dialog[import-standards-and-skills-summary-dialog-view]  .modal-body {
    max-width: 1320px !important;
    height: 75vh;
}

.import-standards-summary-dialog-header[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
}

.import-standards-summary-dialog-header-icon[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green);
}

.import-standards-summary-dialog-body[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.import-info[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.import-statistics[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    width: 100%;
}

.import-statistics-panel[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    width: 100%;
    padding: 15px;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
}

.import-statistics-panel-right-side[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    flex-direction: row;  
    width: 100%;
    gap: 24px;
    align-items: stretch;
    height: inherit;
}

.import-statistics-panel-item[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    height: 100%;
    flex: 1;
}

.failed-import-records[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    min-height: 300px;
}

.failed-import-records-panel[import-standards-and-skills-summary-dialog-view] {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 20px 20px 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    min-height: 0;
}

.navigation-tabs-container[import-standards-and-skills-summary-dialog-view] {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .navigation-tabs-container[import-standards-and-skills-summary-dialog-view]  .navigation-tabs {
        height: 42px;
        padding: 5px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.05);
    }

    .navigation-tabs-container[import-standards-and-skills-summary-dialog-view]  .navigation-tab {
        height: 32px !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), #FFF;
    }

.standard-group-table-container[import-standards-and-skills-summary-dialog-view],
.standard-table-container[import-standards-and-skills-summary-dialog-view] {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.failed-import-records-panel[import-standards-and-skills-summary-dialog-view]  .table {
    border-bottom: 1px solid var(--grey-light-3);
}

.failed-import-records-panel[import-standards-and-skills-summary-dialog-view]  .table-wrapper .table th {
    background: white !important;
}

.failed-import-records-panel[import-standards-and-skills-summary-dialog-view]  .table-wrapper-body {
    min-height: 0;
}

.import-summary-label[import-standards-and-skills-summary-dialog-view] {
    color: var(--grey-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.failed-items-count-text[import-standards-and-skills-summary-dialog-view] {
    color: var(--red);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.total-items-count-text[import-standards-and-skills-summary-dialog-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/ImportStandardsSummaryDialog/Views/FrameworksTable/FrameworkTable.razor.rz.scp.css */
.tooltip-body[b-b2zjjwhjfs] {
    display: flex;
    width: 260px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

.error-message-label[b-b2zjjwhjfs] {
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.copy-error-messages-container[b-b2zjjwhjfs] {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.error-message[b-b2zjjwhjfs] {
    color: var(--grey-light-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.icon-information[b-b2zjjwhjfs] {
    width: 16px;
    height: 16px;
    color: var(--grey-3);
}

.icon-failure[b-b2zjjwhjfs]  .icon {
    width: 10px;
    height: 10px;
}

.icon-failure[b-b2zjjwhjfs]  .icon path {
    fill: var(--red) !important;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/ImportStandardsSummaryDialog/Views/ImportOverview/ImportOverview.razor.rz.scp.css */
.import-overview-card[import-overview-view] {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.06);
}

.imported-label[import-overview-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/ImportStandardsSummaryDialog/Views/ImportStatus/ImportStatus.razor.rz.scp.css */
.import-status-card[import-status-view] {
    display: flex;
    height: 100%;
    padding: 10px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.06);
}

.imported-label[import-status-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/ImportStandardsSummaryDialog/Views/StandardSetTable/StandardSetTable.razor.rz.scp.css */
.tooltip-body[b-xshswg3c3h] {
    display: flex;
    width: 260px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

.error-message-label[b-xshswg3c3h] {
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.copy-error-messages-container[b-xshswg3c3h] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.error-message[b-xshswg3c3h] {
    color: var(--grey-light-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.icon-information[b-xshswg3c3h] {
    width: 16px;
    height: 16px;
    color: var(--grey-3);
}

.icon-failure[b-xshswg3c3h]  .icon {
    width: 10px;
    height: 10px;
}

.icon-failure[b-xshswg3c3h]  .icon path {
    fill: var(--red) !important;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/ImportStandardsSummaryDialog/Views/StatementTable/StatementTable.razor.rz.scp.css */
.tooltip-body[b-8lsphhaycv] {
    display: flex;
    width: 260px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

.error-message-label[b-8lsphhaycv] {
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.copy-error-messages-container[b-8lsphhaycv] {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.error-message[b-8lsphhaycv] {
    color: var(--grey-light-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.icon-information[b-8lsphhaycv] {
    width: 16px;
    height: 16px;
    color: var(--grey-3);
}

.icon-failure[b-8lsphhaycv]  .icon {
    width: 10px;
    height: 10px;
}

.icon-failure[b-8lsphhaycv]  .icon path {
    fill: var(--red) !important;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/SelectStandardsAndSkillsDialog/SelectStandardsAndSkillsDialog.razor.rz.scp.css */
.select-standards-and-skills-dialog[b-9w7zmksmre]  .dialog {
    height: 77vh;
}

.select-standards-and-skills-dialog[b-9w7zmksmre]  .modal-body {
    max-width: 1720px !important;
}

.select-standards-and-skills-dialog[b-9w7zmksmre]  .dialog-body {
    padding: 24px !important;
}

.select-standards-and-skills-dialog-header[b-9w7zmksmre] {
    display: flex;
    gap: 18px;
    align-items: center;
}

.select-standards-and-skills-dialog-header[b-9w7zmksmre]  .btn {
    height: 40px !important;
    width: 40px !important;
}

.select-standards-and-skills-dialog-header[b-9w7zmksmre]  .btn svg {
    height: 16px !important;
    width: 16px !important;
    color: #888888 !important;
    fill: #888888 !important
}

.select-standards-and-skills-dialog-title[b-9w7zmksmre] {
    margin: 0;
    color: #272727;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}

.select-standards-and-skills-dialog-body[b-9w7zmksmre] {
    display: flex;
    width: 100%;
    height: 100% !important;
    min-height: 560px;
    flex-direction: column;
    overflow: hidden;
}

.select-standards-and-skills-navigation[b-9w7zmksmre] {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-bottom: 16px;
}

.standards-and-skills-dialog-tab-body[b-9w7zmksmre] {
    position: relative;
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.standards-and-skills-all-tab-container[b-9w7zmksmre],
.standards-and-skills-selected-tab-container[b-9w7zmksmre] {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.standards-and-skills-dialog-tree-content[b-9w7zmksmre] {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.standards-and-skills-dialog-tree-content[b-9w7zmksmre]
 .standards-and-skills-dialog-tree {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
}

.hidden[b-9w7zmksmre] {
    display: none !important;
}

[b-9w7zmksmre] .select-standards-and-skills-dialog-template button:empty {
    display: none !important;
}

@media (max-width: 820px) {
    [b-9w7zmksmre] .select-standards-and-skills-dialog-template {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    .select-standards-and-skills-dialog-body[b-9w7zmksmre] {
        height: calc(100vh - 150px);
        min-height: 0;
    }

    .select-standards-and-skills-dialog-header[b-9w7zmksmre] {
        gap: 12px;
    }
}

@media (max-height: 720px) {
    .select-standards-and-skills-dialog-body[b-9w7zmksmre] {
        height: calc(100vh - 140px);
        min-height: 0;
    }
}

.select-standards-and-skills-navigation[b-9w7zmksmre] {
    position: relative;
    z-index: 2;
    padding-right: 500px;
}

.standards-and-skills-dialog-tab-body[b-9w7zmksmre],
.standards-and-skills-all-tab-container[b-9w7zmksmre],
.standards-and-skills-selected-tab-container[b-9w7zmksmre],
.standards-and-skills-dialog-tree-content[b-9w7zmksmre] {
    overflow: visible;
}

.standards-and-skills-dialog-tree-content[b-9w7zmksmre]  .standards-and-skills-wrapper.standards-and-skills-dialog-tree {
    position: relative;
    overflow: visible;
}

.standards-and-skills-dialog-tree-content[b-9w7zmksmre]  .standards-and-skills-wrapper.standards-and-skills-dialog-tree .standards-and-skills-toolbar {
    position: relative;
    z-index: 3;
    height: 0;
    min-height: 0;
    padding: 0;
    flex: 0 0 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.standards-and-skills-dialog-tree-content[b-9w7zmksmre]  .standards-and-skills-wrapper.standards-and-skills-dialog-tree .standards-and-skills-toolbar-filters {
    position: absolute;
    z-index: 10;
    top: -56px;
    right: 0;
    margin-left: 0;
}
/* /Pages/OrgAdmin/Settings/StandardsAndSkills/Views/StandardsAndSkillsWelcome/StandardsAndSkillsWelcome.razor.rz.scp.css */
.standards-welcome-container[b-ohysk7ogee] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.standards-welcome-wrapper[b-ohysk7ogee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-standards-actions[b-ohysk7ogee] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

.welcome-title h1[b-ohysk7ogee] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-subtitle[b-ohysk7ogee] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/Settings/Subjects/Components/ImportSubjectsDialog/ImportSubjectsDialog.razor.rz.scp.css */
.import-subjects-dialog-header[import-subjects-dialog-component] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
}

.import-subjects-dialog-header-icon[import-subjects-dialog-component] {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green);
}

.import-subjects-dialog-body[import-subjects-dialog-component] {
    display: flex;
    height: 44vh;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.import-subjects-dialog-body-header[import-subjects-dialog-component] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

    .import-subjects-dialog-body-header p[import-subjects-dialog-component] {
        color: #888888;
        font-size: 14px;
        line-height: 22.4px;
        font-weight: 400;
    }

.import-subjects-template-container[import-subjects-dialog-component] {
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #F1F1F1;
    box-shadow: 0 6px 24px 0 #0000001F;
}

.import-subjects-template-info[import-subjects-dialog-component] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(2px);
}

.import-subjects-info-headline[import-subjects-dialog-component] {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #616161;
}

.import-subjects-info-container[import-subjects-dialog-component] {
    display: flex;
    gap: 10px;
}

.import-subjects-info-small[import-subjects-dialog-component] {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    color: #888888;
}

.import-subjects-template-download[import-subjects-dialog-component] {
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: #888888;
    display: flex;
    gap: 5px;
    justify-content: center;
    height: 100%;
    align-items: center;
    padding-right: 10px;
}

    .import-subjects-template-download[import-subjects-dialog-component]  svg {
        color: #888888;
        fill:  #888888;
        width: 14px !important;
        height: 14px !important;
    }

.import-subjects-file-icon[import-subjects-dialog-component] {
    display: flex;
    height: 100%;
    align-items: center;
}

    .import-subjects-file-icon[import-subjects-dialog-component]  svg {
        color: #888888 !important;
        fill:  #888888 !important;
        width: 18px !important;
        height: 18px !important;
    }
/* /Pages/OrgAdmin/Settings/Subjects/Components/SubjectDialog/SubjectDialog.razor.rz.scp.css */
[administrator-curriculum-component] .color-selector {
    display: flex;
    flex-direction: column;
}

.color-selector label[administrator-curriculum-component] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.color-selector[administrator-curriculum-component]  .field-group {
    width: 100%;
}

.color-selector[administrator-curriculum-component]  .field-menu.menu--list-right.open > .menu-list, .menu.menu--list-right.open > .menu-list[administrator-curriculum-component] {
    transform: translate(0, 0);
}
/* /Pages/OrgAdmin/Settings/Subjects/Components/SubjectsTab/SubjectsTab.razor.rz.scp.css */
.subjects-tab[subjects-tab-component] {
    display: flex;
    width: 100%;
    height: 100%;
}

.subjects-tab-content[subjects-tab-component] {
    width: 100%;
}

.subjects-tab-content--hidden[subjects-tab-component] {
    display: none;
}

    .subjects-tab[subjects-tab-component]  .table-wrapper {
        width: 100%;
    }
    
.subject-table-header[subjects-tab-component] {
    display: flex !important;
    justify-content: space-between !important;
}

.dialog-alert-container[subjects-tab-component]  button:empty {
    display: none !important;
}

.dialog-alert-container[subjects-tab-component]  button:first-of-type:empty ~ button:last-of-type {
    background: var(--green) !important;
    color: white !important;
}

.subject-search[subjects-tab-component]  .search--small {
    padding: 4px 8px !important;
    background-color: white !important;
}

.subject-actions[subjects-tab-component]  .new-subject-button {
    height: 40px;
}

.subject-actions[subjects-tab-component]  .import-button {
    height: 40px;
    color: var(--green);
}

    .subject-actions[subjects-tab-component]  .import-button:hover {
        color: white;
    }
/* /Pages/OrgAdmin/Settings/Subjects/Components/SubjectsTab/Views/SubjectTable/SubjectsTable.razor.rz.scp.css */
[b-48tv2auy04] .subject-group {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    justify-content: space-between;
}

.subject-name-container[b-48tv2auy04] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.label .label--subject-icon[b-48tv2auy04] {
    margin-right: 10px;
}

.actions-container[b-48tv2auy04] {
    display: flex;
    justify-content: right;
}

.actions-container[b-48tv2auy04] > .btn--circle {
    border: none;
    background: none;
}
/* /Pages/OrgAdmin/Settings/Subjects/Page/AdministratorSubjects.razor.rz.scp.css */
/* /Pages/OrgAdmin/Settings/Subjects/Views/ImportSubjectsSummaryDialog/ImportSubjectsSummaryDialog.razor.rz.scp.css */
.import-subjects-summary-dialog[import-subjects-summary-dialog-view]  .modal-body {
    max-width: 1320px !important;
    height: 75vh;
}

.import-subjects-summary-dialog-header[import-subjects-summary-dialog-view] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-start;
}

.import-subjects-summary-dialog-header-icon[import-subjects-summary-dialog-view] {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green);
}

.import-subjects-summary-dialog-body[import-subjects-summary-dialog-view] {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.import-info[import-subjects-summary-dialog-view] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.import-statistics[import-subjects-summary-dialog-view] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    width: 100%;
}

.import-statistics-panel[import-subjects-summary-dialog-view] {
    display: flex;
    width: 100%;
    padding: 15px;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
}

.failed-import-records[import-subjects-summary-dialog-view] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    min-height: 300px;
}

.failed-import-records-panel[import-subjects-summary-dialog-view] {
    display: flex;
    width: 100%;
    padding: 12px 20px 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    min-height: 0;
}

.failed-import-records-panel[import-subjects-summary-dialog-view]  .table {
    border-bottom: 1px solid var(--grey-light-3);
}

.failed-import-records-panel[import-subjects-summary-dialog-view]  .table-wrapper .table th {
    background: white !important;
}

.failed-import-records-panel[import-subjects-summary-dialog-view]  .table-wrapper-body {
    min-height: 0;
}

.import-summary-label[import-subjects-summary-dialog-view] {
    color: var(--grey-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.failed-items-count-text[import-subjects-summary-dialog-view] {
    color: var(--red);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.total-items-count-text[import-subjects-summary-dialog-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Settings/Subjects/Views/ImportSubjectsSummaryDialog/Views/FailedSubjectTable/FailedSubjectTable.razor.rz.scp.css */
.tooltip-body[b-a6pijsrkfn] {
    display: flex;
    width: 260px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey-dark-2);
    background: var(--grey-dark-3);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

.error-message-label[b-a6pijsrkfn] {
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.copy-error-messages-container[b-a6pijsrkfn] {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.error-message[b-a6pijsrkfn] {
    color: var(--grey-light-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.icon-information[b-a6pijsrkfn] {
    width: 16px;
    height: 16px;
    color: var(--grey-3);
}

.icon-failure[b-a6pijsrkfn]  .icon {
    width: 10px;
    height: 10px;
}

.icon-failure[b-a6pijsrkfn]  .icon path {
    fill: var(--red) !important;
}
/* /Pages/OrgAdmin/Settings/Subjects/Views/ImportSubjectsSummaryDialog/Views/ImportOverview/ImportOverview.razor.rz.scp.css */
.import-overview-card[import-overview-view] {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.06);
}

.imported-label[import-overview-view] {
    color: var(--grey-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}
/* /Pages/OrgAdmin/Settings/Subjects/Views/SubjectsWelcome/SubjectsWelcome.razor.rz.scp.css */
.subjects-welcome-container[b-uhyx2v88bl] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.subjects-welcome-wrapper[b-uhyx2v88bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-subjects-actions[b-uhyx2v88bl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

.welcome-title h1[b-uhyx2v88bl] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-subtitle[b-uhyx2v88bl] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Components/EditSchoolAccessDialog/EditSchoolAccessDialog.razor.rz.scp.css */
.edit-school-access-content[b-187wrj8b0g] {
    min-height: 500px !important;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/RegisterUserDialog.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* -----------
# ABSTRACT
----------- */
/* 1. MIXINS  */
/* 2. FUNCTIONS */
/** //////////////////////// Component Specific Styles ///////////////////////////////// */
/* ---------
# VIEWS
--------- */
/* 1. BUTTONS  */
/** 1.1 Base */
button[b-jy14a3koly],
input[type=submit][b-jy14a3koly],
input[type=button][b-jy14a3koly],
.btn[b-jy14a3koly] {
    font-size: 0.875rem;
    color: var(--grey-3);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1;
}

    button:hover[b-jy14a3koly], button.active[b-jy14a3koly],
    input[type=submit]:hover[b-jy14a3koly],
    input[type=submit].active[b-jy14a3koly],
    input[type=button]:hover[b-jy14a3koly],
    input[type=button].active[b-jy14a3koly],
    .btn:hover[b-jy14a3koly],
    .btn.active[b-jy14a3koly] {
        color: #ffffff;
        background: var(--green);
        border-color: transparent;
        outline: none;
    }

        button:hover .icon[b-jy14a3koly], button.active .icon[b-jy14a3koly],
        input[type=submit]:hover .icon[b-jy14a3koly],
        input[type=submit].active .icon[b-jy14a3koly],
        input[type=button]:hover .icon[b-jy14a3koly],
        input[type=button].active .icon[b-jy14a3koly],
        .btn:hover .icon[b-jy14a3koly],
        .btn.active .icon[b-jy14a3koly] {
            border-color: var(--green);
        }

    button.primary-color:hover[b-jy14a3koly], button.primary-color.active[b-jy14a3koly],
    input[type=submit].primary-color:hover[b-jy14a3koly],
    input[type=submit].primary-color.active[b-jy14a3koly],
    input[type=button].primary-color:hover[b-jy14a3koly],
    input[type=button].primary-color.active[b-jy14a3koly],
    .btn.primary-color:hover[b-jy14a3koly],
    .btn.primary-color.active[b-jy14a3koly] {
        color: #ffffff !important;
    }

    button .icon[b-jy14a3koly],
    input[type=submit] .icon[b-jy14a3koly],
    input[type=button] .icon[b-jy14a3koly],
    .btn .icon[b-jy14a3koly] {
        position: relative;
        top: 0;
        left: -0.25em;
        margin-right: 4px;
        display: inline-block;
        height: 1em;
        width: 1em;
        fill: currentColor;
        border-color: var(--grey-3);
        pointer-events: none;
    }

.layout--light button[b-jy14a3koly],
.layout--light input[type=submit][b-jy14a3koly],
.layout--light input[type=button][b-jy14a3koly], .layout--light.btn[b-jy14a3koly],
.layout--light .btn[b-jy14a3koly] {
    border-color: var(--grey-light-4);
    background: #ffffff;
}

    .layout--light button:hover[b-jy14a3koly], .layout--light button.active[b-jy14a3koly],
    .layout--light input[type=submit]:hover[b-jy14a3koly],
    .layout--light input[type=submit].active[b-jy14a3koly],
    .layout--light input[type=button]:hover[b-jy14a3koly],
    .layout--light input[type=button].active[b-jy14a3koly], .layout--light.btn:hover[b-jy14a3koly], .layout--light.btn.active[b-jy14a3koly],
    .layout--light .btn:hover[b-jy14a3koly],
    .layout--light .btn.active[b-jy14a3koly] {
        border-color: transparent;
        background: var(--green);
    }

.layout--light .btn--primary[b-jy14a3koly] {
    border-color: transparent;
    background: var(--green);
}

.layout--light .btn--notify[b-jy14a3koly]:before {
    border-color: var(--grey-light-1);
}

.layout--light .btn--link[b-jy14a3koly],
.layout--light .btn--text[b-jy14a3koly] {
    border-color: transparent;
    background: transparent;
}

    .layout--light .btn--text:hover[b-jy14a3koly], .layout--light .btn--text.active[b-jy14a3koly] {
        background: var(--alpha-dark-1);
    }

.layout--light .btn--light[b-jy14a3koly] {
    background: var(--grey-light-1);
}

.layout--light .btn--outline[b-jy14a3koly] {
    border-color: var(--green);
    background: transparent;
}

.layout--light .btn--disabled[b-jy14a3koly],
.layout--light .btn[disabled][b-jy14a3koly] {
    background: transparent;
    border-color: var(--grey-light-3);
}

    .layout--light .btn--disabled:hover[b-jy14a3koly],
    .layout--light .btn[disabled]:hover[b-jy14a3koly] {
        background: transparent;
        border-color: var(--grey-light-3);
    }

.layout--dark button[b-jy14a3koly],
.layout--dark input[type=submit][b-jy14a3koly],
.layout--dark input[type=button][b-jy14a3koly], .layout--dark.btn[b-jy14a3koly],
.layout--dark .btn[b-jy14a3koly] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark button:hover[b-jy14a3koly], .layout--dark button.active[b-jy14a3koly],
    .layout--dark input[type=submit]:hover[b-jy14a3koly],
    .layout--dark input[type=submit].active[b-jy14a3koly],
    .layout--dark input[type=button]:hover[b-jy14a3koly],
    .layout--dark input[type=button].active[b-jy14a3koly], .layout--dark.btn:hover[b-jy14a3koly], .layout--dark.btn.active[b-jy14a3koly],
    .layout--dark .btn:hover[b-jy14a3koly],
    .layout--dark .btn.active[b-jy14a3koly] {
        border-color: transparent;
        background: var(--green);
    }

        .layout--dark button:hover .icon[b-jy14a3koly], .layout--dark button.active .icon[b-jy14a3koly],
        .layout--dark input[type=submit]:hover .icon[b-jy14a3koly],
        .layout--dark input[type=submit].active .icon[b-jy14a3koly],
        .layout--dark input[type=button]:hover .icon[b-jy14a3koly],
        .layout--dark input[type=button].active .icon[b-jy14a3koly], .layout--dark.btn:hover .icon[b-jy14a3koly], .layout--dark.btn.active .icon[b-jy14a3koly],
        .layout--dark .btn:hover .icon[b-jy14a3koly],
        .layout--dark .btn.active .icon[b-jy14a3koly] {
            border-color: var(--green);
        }

    .layout--dark button .icon[b-jy14a3koly],
    .layout--dark input[type=submit] .icon[b-jy14a3koly],
    .layout--dark input[type=button] .icon[b-jy14a3koly], .layout--dark.btn .icon[b-jy14a3koly],
    .layout--dark .btn .icon[b-jy14a3koly] {
        border-color: var(--grey-3);
    }

.layout--dark .btn--primary[b-jy14a3koly] {
    border-color: transparent;
    background: var(--green);
}

.layout--dark .btn--notify[b-jy14a3koly]:before {
    border-color: var(--grey-dark-3);
}

.layout--dark .btn--link[b-jy14a3koly],
.layout--dark .btn--text[b-jy14a3koly] {
    border-color: transparent;
    background: transparent;
}

    .layout--dark .btn--text:hover[b-jy14a3koly], .layout--dark .btn--text.active[b-jy14a3koly] {
        background: var(--alpha-light-1);
    }

.layout--dark .btn--outline[b-jy14a3koly] {
    border-color: var(--green);
    background: transparent;
}

.layout--dark .btn--disabled[b-jy14a3koly],
.layout--dark .btn[disabled][b-jy14a3koly] {
    color: var(--grey-dark-2);
    background: transparent;
    border-color: var(--grey-dark-2);
}

    .layout--dark .btn--disabled:hover[b-jy14a3koly],
    .layout--dark .btn[disabled]:hover[b-jy14a3koly] {
        color: var(--grey-dark-2);
        background: transparent;
        border-color: var(--grey-dark-2);
    }

/** 1.1.1 Primary */
.btn--primary[b-jy14a3koly] {
    padding: 8px 12px;
    color: #ffffff;
    border-color: transparent;
    background: var(--green);
}

    .btn--primary:hover[b-jy14a3koly], .btn--primary.active[b-jy14a3koly] {
        opacity: 0.9;
    }

/** 1.1.2 Secondary */
.btn--secondary[b-jy14a3koly] {
    padding: 8px 12px;
    background: #ffffff;
}

    .btn--secondary.btn--link[b-jy14a3koly] {
        color: var(--grey-3);
    }

        .btn--secondary.btn--link:hover[b-jy14a3koly] {
            background: var(--alpha-dark-1);
        }

        .btn--secondary.btn--link[disabled][b-jy14a3koly] {
            border: none;
        }

.layout--dark .btn--secondary.btn--link:hover[b-jy14a3koly] {
    background: var(--alpha-light-1);
}

/** 1.1.3 Ternary */
.btn--ternary[b-jy14a3koly] {
    background: var(--alpha-dark-1);
}

    .btn--ternary:hover[b-jy14a3koly], .btn--ternary:focus[b-jy14a3koly] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .btn--ternary.active[b-jy14a3koly] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--light .btn--ternary[b-jy14a3koly] {
    background: var(--alpha-dark-1);
}

    .layout--light .btn--ternary:hover[b-jy14a3koly], .layout--light .btn--ternary:focus[b-jy14a3koly] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .layout--light .btn--ternary.active[b-jy14a3koly] {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--dark .btn--ternary[b-jy14a3koly] {
    background: var(--grey-dark-2);
}

    .layout--dark .btn--ternary:hover[b-jy14a3koly] {
        color: var(--grey-light-4);
        background: var(--grey-dark-1);
    }

    .layout--dark .btn--ternary.active[b-jy14a3koly] {
        color: var(--grey-3);
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-4);
    }

/** 1.1.4 Modifiers */
.btn--notify[b-jy14a3koly] {
    position: relative;
}

    .btn--notify[b-jy14a3koly]:before {
        position: absolute;
        top: 4px;
        right: 4px;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background: var(--green);
        z-index: 1;
    }

.btn--light[b-jy14a3koly] {
    background: var(--grey-light-1);
    border-color: var(--grey-light-4);
}

.btn--dark[b-jy14a3koly] {
    background: var(--grey-dark-2);
    border-color: var(--grey-dark-1);
}

.btn--outline[b-jy14a3koly] {
    color: var(--green);
    background: transparent;
    border-color: var(--green);
}

.btn--rounded[b-jy14a3koly] {
    padding: 8px 25px;
    border-radius: 30px;
}

.btn--link[b-jy14a3koly] {
    color: var(--green);
    background: transparent;
    border-color: transparent;
}

.btn--text[b-jy14a3koly] {
    color: var(--grey-3);
    background: transparent;
    border-color: transparent;
}

    .btn--text:hover[b-jy14a3koly], .btn--text.active[b-jy14a3koly] {
        color: var(--green);
        background: var(--alpha-dark-1);
    }

    .btn--text[disabled][b-jy14a3koly] {
        border: none;
    }

.btn--circle[b-jy14a3koly],
.btn--square[b-jy14a3koly] {
    position: relative;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

    .btn--circle .icon[b-jy14a3koly],
    .btn--square .icon[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.btn--circle[b-jy14a3koly] {
    border-radius: 50%;
}

.btn--square[b-jy14a3koly] {
    border-radius: 4px;
}

.btn--disabled[b-jy14a3koly],
.btn[disabled][b-jy14a3koly] {
    color: var(--grey-light-4);
    background: transparent;
    border-color: var(--grey-light-3);
    cursor: not-allowed;
}

    .btn--disabled:hover[b-jy14a3koly],
    .btn[disabled]:hover[b-jy14a3koly] {
        color: var(--grey-light-4);
        background: transparent;
        border-color: var(--grey-light-3);
    }

.btn-inner[b-jy14a3koly] {
    display: inline-block;
    padding: 3px;
    background: var(--grey-light-3);
    line-height: 0;
}

    .btn-inner.btn-inner--circle[b-jy14a3koly] {
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

        .btn-inner.btn-inner--circle .btn[b-jy14a3koly] {
            width: 24px;
            height: 24px;
        }

    .btn-inner .btn[b-jy14a3koly] {
        border: none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

.btn--success[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--success:hover[b-jy14a3koly], .btn--success.active[b-jy14a3koly] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--error[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--error:hover[b-jy14a3koly], .btn--error.active[b-jy14a3koly] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--activity[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-3) !important;
}

    .btn--activity:hover[b-jy14a3koly], .btn--activity.active[b-jy14a3koly] {
        background: var(--grey-3) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lesson[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--lesson:hover[b-jy14a3koly], .btn--lesson.active[b-jy14a3koly] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--test[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--test:hover[b-jy14a3koly], .btn--test.active[b-jy14a3koly] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--quiz[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--quiz:hover[b-jy14a3koly], .btn--quiz.active[b-jy14a3koly] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--project[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--project:hover[b-jy14a3koly], .btn--project.active[b-jy14a3koly] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--supplementary[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green-yellow) !important;
}

    .btn--supplementary:hover[b-jy14a3koly], .btn--supplementary.active[b-jy14a3koly] {
        background: var(--green-yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--field-trip[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--field-trip:hover[b-jy14a3koly], .btn--field-trip.active[b-jy14a3koly] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--lab[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--lab:hover[b-jy14a3koly], .btn--lab.active[b-jy14a3koly] {
        background: var(--yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--student[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--student:hover[b-jy14a3koly], .btn--student.active[b-jy14a3koly] {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--teacher[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--teacher:hover[b-jy14a3koly], .btn--teacher.active[b-jy14a3koly] {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--parent[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--parent:hover[b-jy14a3koly], .btn--parent.active[b-jy14a3koly] {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--admin[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--admin:hover[b-jy14a3koly], .btn--admin.active[b-jy14a3koly] {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--audit[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--audit:hover[b-jy14a3koly], .btn--audit.active[b-jy14a3koly] {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

.btn--meta[b-jy14a3koly] {
    color: #ffffff;
    border-color: transparent !important;
    background: var(--grey-1) !important;
}

    .btn--meta:hover[b-jy14a3koly], .btn--meta.active[b-jy14a3koly] {
        background: var(--grey-1) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

/* 2. FORM */
/** 2.1 General */
.form .card[b-jy14a3koly] {
    padding: 0.3125rem 0.625rem;
}

.form .container.gutter .row > *[b-jy14a3koly] {
    padding: 0.3125rem 0.625rem;
}

/*input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='search'],
input[type='number']*/
[contenteditable][b-jy14a3koly]::-moz-selection, input[b-jy14a3koly]::-moz-selection {
    color: #ffffff;
    background: var(--green);
}

[contenteditable][b-jy14a3koly]::selection,
input[b-jy14a3koly]::selection {
    color: #ffffff;
    background: var(--green);
}

input[type=text].correct[b-jy14a3koly] {
    border: 2px solid var(--green);
}

input[type=text].incorrect[b-jy14a3koly] {
    border: 2px solid var(--red);
}

textarea[b-jy14a3koly] {
    line-height: var(--line-height);
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
}

    textarea[b-jy14a3koly]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    textarea[b-jy14a3koly]::-webkit-scrollbar-track {
        background: transparent;
    }

    textarea[b-jy14a3koly]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        textarea[b-jy14a3koly]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    textarea[b-jy14a3koly]::-webkit-scrollbar-corner {
        background: transparent;
    }

.field[b-jy14a3koly] {
    color: var(--grey-dark-3);
    padding: 12px 12px 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    width: 100%;
    font-size: 0.875em;
}

    .field:focus[b-jy14a3koly]::-moz-placeholder {
        color: transparent;
    }

    .field:focus:-ms-input-placeholder[b-jy14a3koly] {
        color: transparent;
    }

    .field:focus[b-jy14a3koly]::placeholder {
        color: transparent;
    }

    .field:disabled[b-jy14a3koly] {
        background-color: transparent;
        opacity: 0.5;
    }

        .field:disabled ~ .btn[b-jy14a3koly] {
            border-color: transparent;
            background: transparent;
            color: var(--grey-light-4);
            cursor: default;
        }

    .field.field--blank[b-jy14a3koly] {
        width: auto;
    }

    .field[b-jy14a3koly]::-moz-placeholder {
        -moz-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field:-ms-input-placeholder[b-jy14a3koly] {
        -ms-transition: all var(--transition-duration) ease 0s;
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

    .field[b-jy14a3koly]::placeholder {
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

.field-group.valid .required[b-jy14a3koly]::after {
    color: var(--green);
}

.field-group.valid .field[b-jy14a3koly] {
    border-bottom-width: 2px;
    border-bottom-color: var(--green);
}

.field-group.invalid .required[b-jy14a3koly]::after {
    color: var(--red);
}

.field-group.invalid .field[b-jy14a3koly] {
    border-bottom-width: 2px;
    border-bottom-color: var(--red);
}

.field-group.invalid .response[b-jy14a3koly] {
    margin: 4px 0 0 8px;
    height: auto;
    opacity: 1;
}

.field-group label[b-jy14a3koly] {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

    .field-group label.field-file[b-jy14a3koly] {
        display: inline-block;
    }

.field-group .required[b-jy14a3koly]::after {
    margin-left: 0.2em;
    content: "*";
    color: var(--green);
}

.field-group .response[b-jy14a3koly] {
    color: var(--red);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.125em;
    opacity: 0;
    height: 0;
    transition: all var(--transition-duration) ease 0s;
}

.layout--dark .field[b-jy14a3koly] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background-color: var(--grey-dark-4);
}

    .layout--dark .field:focus[b-jy14a3koly]::-moz-placeholder {
        color: transparent;
    }

    .layout--dark .field:focus:-ms-input-placeholder[b-jy14a3koly] {
        color: transparent;
    }

    .layout--dark .field:focus[b-jy14a3koly]::placeholder {
        color: transparent;
    }

    .layout--dark .field:disabled[b-jy14a3koly] {
        opacity: 0.3;
    }

        .layout--dark .field:disabled ~ .btn[b-jy14a3koly] {
            color: var(--grey-dark-3);
        }

    .layout--dark .field[b-jy14a3koly]::-moz-placeholder {
        color: var(--grey-dark-1);
    }

    .layout--dark .field:-ms-input-placeholder[b-jy14a3koly] {
        color: var(--grey-dark-1);
    }

    .layout--dark .field[b-jy14a3koly]::placeholder {
        color: var(--grey-dark-1);
    }

/** 2.1.1 Radio, Checkbox, File, Switch */
.field-check[b-jy14a3koly],
.field-file[b-jy14a3koly] {
    position: relative;
}

    .field-check input[type=radio][b-jy14a3koly],
    .field-check input[type=checkbox][b-jy14a3koly],
    .field-check input[type=file][b-jy14a3koly],
    .field-file input[type=radio][b-jy14a3koly],
    .field-file input[type=checkbox][b-jy14a3koly],
    .field-file input[type=file][b-jy14a3koly] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.field-check[b-jy14a3koly] {
    padding-left: calc(1em + 12px);
    font-weight: var(--font-weight);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-check input[type=radio][b-jy14a3koly],
    .field-check input[type=checkbox][b-jy14a3koly] {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
    }

        .field-check input[type=radio]:checked ~ .radiomark[b-jy14a3koly] {
            border-color: var(--green);
        }

            .field-check input[type=radio]:checked ~ .radiomark[b-jy14a3koly]::before {
                opacity: 1;
            }

        .field-check input[type=checkbox]:checked ~ .checkmark[b-jy14a3koly] {
            border-color: var(--green);
            background: var(--green);
        }

            .field-check input[type=checkbox]:checked ~ .checkmark .icon[b-jy14a3koly] {
                opacity: 1;
            }

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

    .field-check .radiomark[b-jy14a3koly],
    .field-check .checkmark[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
        pointer-events: none;
    }

    .field-check .radiomark[b-jy14a3koly] {
        border-radius: 50%;
    }

        .field-check .radiomark[b-jy14a3koly]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            display: block;
            width: 0.725em;
            height: 0.725em;
            border-radius: inherit;
            background: var(--green);
            opacity: 0;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-check .checkmark[b-jy14a3koly] {
        border-radius: 4px;
        color: #ffffff;
    }

        .field-check .checkmark .icon[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-height: 9px;
            height: 0.6em;
            opacity: 0;
        }

.success .field-check input[type=checkbox]:checked ~ .checkmark[b-jy14a3koly] {
    border-color: var(--green);
    background: var(--green);
}

.error .field-check input[type=checkbox]:checked ~ .checkmark[b-jy14a3koly] {
    border-color: var(--red);
    background: var(--red);
}

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

.layout--dark .field-check .radiomark[b-jy14a3koly],
.layout--dark .field-check .checkmark[b-jy14a3koly] {
    background: transparent;
    border-color: var(--grey-dark-1);
}

.layout--dark .field-check .checkmark[b-jy14a3koly] {
    color: var(--grey-dark-6);
}

/** 2.1.2 Field Checkbox */
.field-checkbox[b-jy14a3koly] {
    position: relative;
    display: inline-block;
    font-size: 0.675rem;
    font-weight: var(--font-weight);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

    .field-checkbox input[type=radio][b-jy14a3koly] {
        position: absolute;
        opacity: 0;
    }

        .field-checkbox input[type=radio]:checked ~ .checkmark .icon .check[b-jy14a3koly] {
            stroke-dashoffset: 0;
        }

    .field-checkbox .checkmark .icon[b-jy14a3koly],
    .field-checkbox .checkmark-readonly .icon[b-jy14a3koly] {
        min-height: 9px;
        height: 0.6em;
    }

        .field-checkbox .checkmark .icon .check[b-jy14a3koly],
        .field-checkbox .checkmark-readonly .icon .check[b-jy14a3koly] {
            transition: all var(--transition-duration) ease 0s;
            fill: none;
            stroke: currentColor;
            stroke-miterlimit: 10;
            stroke-dasharray: 25;
            stroke-width: 1.8;
        }

        .field-checkbox .checkmark .icon .check[b-jy14a3koly] {
            stroke-dashoffset: 25;
        }

        .field-checkbox .checkmark-readonly .icon .check[b-jy14a3koly] {
            stroke-dashoffset: 0;
        }

    .field-checkbox > .checkmark[b-jy14a3koly] {
        position: relative;
        display: block;
        width: 27px;
        height: 27px;
        border-radius: 4px;
        color: var(--green);
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
    }

        .field-checkbox > .checkmark .icon[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .field-checkbox > .checkmark .icon .check[b-jy14a3koly] {
                stroke-dashoffset: 25;
            }

/** 2.1.3 Field File */
.field-file[b-jy14a3koly] {
    display: inline-block;
}

    .field-file input[type=file][b-jy14a3koly] {
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

        .field-file input[type=file]:hover ~ .btn[b-jy14a3koly], .field-file input[type=file]:focus ~ .btn[b-jy14a3koly] {
            color: #ffffff !important;
            background: var(--green);
            border-color: var(--green);
        }

        .field-file input[type=file]:disabled[b-jy14a3koly] {
            display: none;
        }

            .field-file input[type=file]:disabled ~ .btn[b-jy14a3koly] {
                color: var(--grey-light-4) !important;
                background: transparent;
                border-color: var(--grey-light-3);
                cursor: not-allowed;
            }

.layout--dark .field-file input[type=file]:disabled ~ .btn[b-jy14a3koly] {
    opacity: 0.125;
}

.browse-file ul li[b-jy14a3koly] {
    margin-bottom: 6px;
}

/** 2.1.4 Date, Time */
.field-date[b-jy14a3koly],
.field-time[b-jy14a3koly],
.field-url[b-jy14a3koly] {
    position: relative;
}

    .field-date .field[b-jy14a3koly],
    .field-time .field[b-jy14a3koly],
    .field-url .field[b-jy14a3koly] {
        letter-spacing: 0.025em;
    }

        .field-date .field:focus ~ .btn[b-jy14a3koly],
        .field-time .field:focus ~ .btn[b-jy14a3koly],
        .field-url .field:focus ~ .btn[b-jy14a3koly] {
            color: #ffffff;
            background: var(--green) !important;
        }

    .field-date .btn[b-jy14a3koly],
    .field-time .btn[b-jy14a3koly],
    .field-url .btn[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
    }

.layout--dark .field-date[b-jy14a3koly],
.layout--dark .field-time[b-jy14a3koly],
.layout--dark .field-url[b-jy14a3koly] {
    position: relative;
}

    .layout--dark .field-date .field:focus[b-jy14a3koly],
    .layout--dark .field-time .field:focus[b-jy14a3koly],
    .layout--dark .field-url .field:focus[b-jy14a3koly] {
        border-bottom-width: 1px;
        border-bottom-color: var(--grey-dark-1);
    }

/** 2.1.5 Field Readonly  */
.field-readonly[b-jy14a3koly] {
    display: inline-block;
    font-size: 0.875em;
}

    .field-readonly label[b-jy14a3koly] {
        font-weight: 600;
    }

    .field-readonly input[b-jy14a3koly] {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        min-width: 36px;
        width: 100%;
        max-width: 60px;
        text-align: center;
    }

.layout--dark .field-readonly input[b-jy14a3koly] {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

/** 2.1.6 Field Renge*/
.field-range.range--drag .range-slider .range-slider-track .range-slider-track-value[b-jy14a3koly] {
    transition: none;
}

.field-range label[b-jy14a3koly] {
    font-size: 0.875rem;
}

.field-range .range[b-jy14a3koly] {
    margin-top: -4px;
    display: flex;
    align-items: center;
}

    .field-range .range:hover .range-inputs .range-input[b-jy14a3koly], .field-range .range:focus .range-inputs .range-input[b-jy14a3koly] {
        border-color: var(--green);
    }

.field-range .range-inputs[b-jy14a3koly] {
    margin-left: 10px;
}

    .field-range .range-inputs .range-input[b-jy14a3koly] {
        padding: 4px;
        width: 44px;
        color: var(--grey-3);
        font-size: 0.875rem;
        text-align: center;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-range .range-inputs .range-input:focus[b-jy14a3koly] {
            border-color: var(--green);
        }

    .field-range .range-inputs [type=range][b-jy14a3koly] {
        display: none;
    }

.field-range .range-slider[b-jy14a3koly] {
    position: relative;
    height: 30px;
    min-width: 100px;
    width: 100%;
    flex: 1 1 100px;
    cursor: pointer;
}

    .field-range .range-slider .range-slider-track[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1px;
        width: 100%;
        background: var(--alpha-dark-2);
    }

        .field-range .range-slider .range-slider-track .range-slider-track-value[b-jy14a3koly] {
            position: relative;
            height: 100%;
            width: 30%;
            background: var(--green);
            transition: all var(--transition-duration) ease 0s;
        }

    .field-range .range-slider .range-slider-btn[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 26px;
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
    }

        .field-range .range-slider .range-slider-btn:hover[b-jy14a3koly]::before, .field-range .range-slider .range-slider-btn:focus[b-jy14a3koly]::before {
            transform: translate(-50%, -50%) scale(1.2);
        }

        .field-range .range-slider .range-slider-btn[b-jy14a3koly]::before, .field-range .range-slider .range-slider-btn[b-jy14a3koly]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .field-range .range-slider .range-slider-btn[b-jy14a3koly]::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
            border: 2px solid var(--green);
            border-radius: inherit;
            transition: all var(--transition-duration) ease 0s;
        }

        .field-range .range-slider .range-slider-btn[b-jy14a3koly]::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--green);
            border-radius: inherit;
        }

        .field-range .range-slider .range-slider-btn.range-slider-btn--max[b-jy14a3koly] {
            left: initial;
            right: 0;
            transform: translate(50%, -50%);
        }

.layout--light .field-range .range-slider .range-slider-btn[b-jy14a3koly] {
    background: var(--grey-light-1);
}

.layout--dark .field-range .range-inputs .range-input[b-jy14a3koly] {
    color: var(--grey-1);
    border-color: var(--alpha-light-2);
    background: transparent;
}

    .layout--dark .field-range .range-inputs .range-input:focus[b-jy14a3koly] {
        border-color: var(--green);
    }

.layout--dark .field-range .range-slider .range-slider-track[b-jy14a3koly] {
    background: var(--alpha-light-2);
}

.layout--dark .field-range .range-slider .range-slider-btn[b-jy14a3koly] {
    background: var(--grey-dark-4);
}

/** 2.1.7 Field Letter */
.field-letter[b-jy14a3koly] {
    position: relative;
    padding-left: 2.25rem;
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
    cursor: default;
}

    .field-letter .lettermark[b-jy14a3koly],
    .field-letter input[b-jy14a3koly] {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .field-letter input[b-jy14a3koly] {
        opacity: 0;
        z-index: 1;
    }

        .field-letter input:not([disabled])[b-jy14a3koly] {
            cursor: pointer;
        }

        .field-letter input:hover:not([disabled]) ~ .lettermark[b-jy14a3koly], .field-letter input:focus:not([disabled]) ~ .lettermark[b-jy14a3koly] {
            color: var(--green);
            border-color: var(--green);
        }

        .field-letter input:hover:not([disabled]):checked ~ .lettermark[b-jy14a3koly], .field-letter input:focus:not([disabled]):checked ~ .lettermark[b-jy14a3koly] {
            color: #ffffff;
        }

        .field-letter input:checked:hover ~ .lettermark[b-jy14a3koly], .field-letter input:checked:focus ~ .lettermark[b-jy14a3koly], .field-letter input.checked:hover ~ .lettermark[b-jy14a3koly], .field-letter input.checked:focus ~ .lettermark[b-jy14a3koly] {
            color: #ffffff;
        }

        .field-letter input:checked ~ .lettermark[b-jy14a3koly], .field-letter input.checked ~ .lettermark[b-jy14a3koly] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-letter .lettermark[b-jy14a3koly] {
        font-weight: 600;
        border: 1px solid var(--grey-1);
        transition: all var(--transition-duration) ease 0s;
    }

        .field-letter .lettermark > *[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

.error .field-letter input:hover:not([disabled]) ~ .lettermark[b-jy14a3koly], .error .field-letter input:focus:not([disabled]) ~ .lettermark[b-jy14a3koly] {
    color: var(--red);
    border-color: var(--red);
}

.error .field-letter input:checked:hover ~ .lettermark[b-jy14a3koly], .error .field-letter input:checked:focus ~ .lettermark[b-jy14a3koly], .error .field-letter input.checked:hover ~ .lettermark[b-jy14a3koly], .error .field-letter input.checked:focus ~ .lettermark[b-jy14a3koly] {
    color: #ffffff;
}

.error .field-letter input:checked ~ .lettermark[b-jy14a3koly], .error .field-letter input.checked ~ .lettermark[b-jy14a3koly] {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

.success .field-letter input:hover:not([disabled]) ~ .lettermark[b-jy14a3koly], .success .field-letter input:focus:not([disabled]) ~ .lettermark[b-jy14a3koly] {
    color: var(--green);
    border-color: var(--green);
}

.success .field-letter input:checked:hover ~ .lettermark[b-jy14a3koly], .success .field-letter input:checked:focus ~ .lettermark[b-jy14a3koly], .success .field-letter input.checked:hover ~ .lettermark[b-jy14a3koly], .success .field-letter input.checked:focus ~ .lettermark[b-jy14a3koly] {
    color: #ffffff;
}

.success .field-letter input:checked ~ .lettermark[b-jy14a3koly], .success .field-letter input.checked ~ .lettermark[b-jy14a3koly] {
    color: #ffffff;
    background: var(--green);
    border-color: var(--green);
}

/** 2.1.8 Field True False */
.field-true-false[b-jy14a3koly] {
    display: flex;
    align-items: center;
}

    .field-true-false .slash-sep[b-jy14a3koly] {
        font-size: 1.25em;
        margin: 4px;
    }

    .field-true-false .field-letter[b-jy14a3koly] {
        padding: 0;
    }

        .field-true-false .field-letter .lettermark[b-jy14a3koly] {
            position: relative;
            display: block;
        }

/** 2.1.9 Field Evaluate */
.field-evaluate[b-jy14a3koly] {
    position: relative;
    padding-left: 0.25rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: default;
    margin-bottom: 0;
    line-height: 0;
}

    .field-evaluate.success-color input:hover:not([disabled]) ~ .mark[b-jy14a3koly], .field-evaluate.success-color input:focus:not([disabled]) ~ .mark[b-jy14a3koly] {
        border-color: var(--green);
    }

    .field-evaluate.success-color input:checked ~ .mark[b-jy14a3koly] {
        color: #ffffff;
        background: var(--green);
        border-color: var(--green);
    }

    .field-evaluate.error-color input:hover:not([disabled]) ~ .mark[b-jy14a3koly], .field-evaluate.error-color input:focus:not([disabled]) ~ .mark[b-jy14a3koly] {
        border-color: var(--red);
    }

    .field-evaluate.error-color input:checked ~ .mark[b-jy14a3koly] {
        color: #ffffff;
        background: var(--red);
        border-color: var(--red);
    }

    .field-evaluate .mark[b-jy14a3koly],
    .field-evaluate input[b-jy14a3koly] {
        border-radius: 50%;
    }

    .field-evaluate input[b-jy14a3koly] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

        .field-evaluate input:checked ~ .mark[b-jy14a3koly] {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-evaluate .mark[b-jy14a3koly] {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-evaluate .mark > *[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

/** 2.1.10 Input Blank */
.input-blank[b-jy14a3koly] {
    display: inline-block;
    padding: 0 4px;
    color: var(--green);
    background: transparent;
    border-bottom: 1px solid var(--green);
    outline: 0;
}

/** 2.3 Field Switch */
.field-switch[b-jy14a3koly],
.field-switch-small[b-jy14a3koly] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-switch label[b-jy14a3koly],
    .field-switch-small label[b-jy14a3koly] {
        display: inline-block;
        margin-right: 4px;
    }

    .field-switch input[type=checkbox][b-jy14a3koly],
    .field-switch-small input[type=checkbox][b-jy14a3koly] {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .field-switch .switch-wrap[b-jy14a3koly],
    .field-switch-small .switch-wrap[b-jy14a3koly] {
        position: relative;
        display: inline-block;
    }

    .field-switch .switch[b-jy14a3koly],
    .field-switch-small .switch[b-jy14a3koly] {
        display: block;
    }

        .field-switch .switch .knob[b-jy14a3koly],
        .field-switch-small .switch .knob[b-jy14a3koly] {
            position: absolute;
            display: block;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
        }

        .field-switch .switch .state[b-jy14a3koly],
        .field-switch-small .switch .state[b-jy14a3koly] {
            display: block;
        }

.field-switch[b-jy14a3koly] {
    position: relative;
    line-height: var(--line-height);
}

[b-jy14a3koly] .field-switch hr {
    margin: 0 0 8px;
}

.field-switch .switch-wrap[b-jy14a3koly] {
    width: 64px;
}

.field-switch input[type=checkbox]:checked ~ .switch .knob[b-jy14a3koly] {
    left: calc(100% - 34px);
}

    .field-switch input[type=checkbox]:checked ~ .switch .knob[b-jy14a3koly]::before {
        background: var(--green);
    }

.field-switch input[type=checkbox]:checked ~ .switch .state[b-jy14a3koly] {
    color: #ffffff;
    background-color: var(--green);
}

    .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(1)[b-jy14a3koly] {
        opacity: 1;
    }

    .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(2)[b-jy14a3koly] {
        opacity: 0;
    }

.field-switch .switch .knob[b-jy14a3koly] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--grey-light-3);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

    .field-switch .switch .knob[b-jy14a3koly]:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 35%;
        height: 35%;
        border-radius: 50%;
        background: var(--grey-3);
    }

.field-switch .switch .state[b-jy14a3koly] {
    width: 62px;
    padding: 2px 6px;
    color: var(--grey-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    border: 1px solid var(--grey-light-3);
    border-radius: 30px;
    background-color: #ffffff;
}

    .field-switch .switch .state[b-jy14a3koly]::after {
        display: table;
        content: "";
        clear: both;
    }

    .field-switch .switch .state *:nth-child(1)[b-jy14a3koly] {
        opacity: 0;
        float: left;
    }

    .field-switch .switch .state *:nth-child(2)[b-jy14a3koly] {
        opacity: 1;
        float: right;
    }

.field-switch-small .switch-wrap[b-jy14a3koly] {
    top: 0.2em;
}

.field-switch-small input[type=checkbox]:checked ~ .switch[b-jy14a3koly] {
    border-color: var(--green);
    background: var(--green);
}

    .field-switch-small input[type=checkbox]:checked ~ .switch .knob[b-jy14a3koly] {
        left: calc(100% - 14px);
        background: #ffffff;
    }

.field-switch-small .switch[b-jy14a3koly] {
    width: 32px;
    height: 16px;
    border-radius: 32px;
    border: 1px solid var(--grey-3);
}

    .field-switch-small .switch .knob[b-jy14a3koly] {
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--grey-3);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

.layout--dark .field-switch hr[b-jy14a3koly] {
    border-color: var(--grey-dark-3);
}

.layout--dark .field-switch .switch .knob[b-jy14a3koly] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .field-switch .switch .state[b-jy14a3koly] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .field-switch-small .switch[b-jy14a3koly] {
    border-color: var(--grey-dark-1);
}

/** 2.2 Dropdown Menu */
.field-menu[b-jy14a3koly],
.menu[b-jy14a3koly] {
    position: relative;
    display: inline-block;
    font-weight: 400;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .field-menu.open > .menu-header > .icon[b-jy14a3koly],
    .menu.open > .menu-header > .icon[b-jy14a3koly] {
        transform: rotate(90deg);
    }

    .field-menu.open > .menu-list[b-jy14a3koly],
    .menu.open > .menu-list[b-jy14a3koly] {
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
    }

    .field-menu.menu--headline > .menu-header [data-menu-option][b-jy14a3koly],
    .menu.menu--headline > .menu-header [data-menu-option][b-jy14a3koly] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--grey-dark-3);
    }

    .field-menu.menu--headline > .menu-header > .icon[b-jy14a3koly],
    .menu.menu--headline > .menu-header > .icon[b-jy14a3koly] {
        top: -0.25em;
    }

    .field-menu.menu--list-top .menu-list[b-jy14a3koly],
    .menu.menu--list-top .menu-list[b-jy14a3koly] {
        top: 0;
        transform: translate(0, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.open > .menu-list[b-jy14a3koly],
    .menu.menu--list-top.open > .menu-list[b-jy14a3koly] {
        transform: translate(0, calc(-100% - 8px));
    }

    .field-menu.menu--list-right .menu-list[b-jy14a3koly],
    .menu.menu--list-right .menu-list[b-jy14a3koly] {
        left: 100%;
        transform: translate(-100%, 10px);
    }

    .field-menu.menu--list-right.open > .menu-list[b-jy14a3koly],
    .menu.menu--list-right.open > .menu-list[b-jy14a3koly] {
        transform: translate(-100%, 0);
    }

    .field-menu.menu--list-top.menu--list-right .menu-list[b-jy14a3koly],
    .menu.menu--list-top.menu--list-right .menu-list[b-jy14a3koly] {
        top: 0;
        left: 100%;
        transform: translate(-100%, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.menu--list-right.open > .menu-list[b-jy14a3koly],
    .menu.menu--list-top.menu--list-right.open > .menu-list[b-jy14a3koly] {
        transform: translate(-100%, calc(-100% - 8px));
    }

    .field-menu.menu--list-ycenter .menu-list[b-jy14a3koly],
    .menu.menu--list-ycenter .menu-list[b-jy14a3koly] {
        top: calc(50% + 14px);
        transform: translate(0, -50%);
    }

    .field-menu.menu--list-ycenter.open > .menu-list[b-jy14a3koly],
    .menu.menu--list-ycenter.open > .menu-list[b-jy14a3koly] {
        top: calc(50% + 4px);
    }

    .field-menu.menu--list-xcenter .menu-list[b-jy14a3koly],
    .menu.menu--list-xcenter .menu-list[b-jy14a3koly] {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
    }

    .field-menu.menu--list-xcenter.open > .menu-list[b-jy14a3koly],
    .menu.menu--list-xcenter.open > .menu-list[b-jy14a3koly] {
        transform: translate(-50%, 0);
    }

    .field-menu.menu--list-center .menu-list[b-jy14a3koly],
    .menu.menu--list-center .menu-list[b-jy14a3koly] {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--list-center.open > .menu-list[b-jy14a3koly],
    .menu.menu--list-center.open > .menu-list[b-jy14a3koly] {
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--dark[b-jy14a3koly],
    .menu.menu--dark[b-jy14a3koly] {
        color: var(--grey-1);
    }

        .field-menu.menu--dark .menu-list[b-jy14a3koly],
        .menu.menu--dark .menu-list[b-jy14a3koly] {
            color: var(--grey-3);
            background: var(--grey-dark-4);
        }

        .field-menu.menu--dark .option:hover[b-jy14a3koly],
        .menu.menu--dark .option:hover[b-jy14a3koly] {
            color: var(--grey-1);
            background: var(--alpha-light-2);
        }

        .field-menu.menu--dark .option.option--checked[b-jy14a3koly],
        .menu.menu--dark .option.option--checked[b-jy14a3koly] {
            background: var(--alpha-light-1);
        }

    .field-menu label[b-jy14a3koly],
    .menu label[b-jy14a3koly] {
        margin-bottom: 0;
    }

    .field-menu .menu-header[b-jy14a3koly],
    .menu .menu-header[b-jy14a3koly] {
        display: inline-block;
        cursor: pointer;
        color: var(--grey-3);
        font-size: 0.875em;
    }

        .field-menu .menu-header:hover > .icon[b-jy14a3koly],
        .menu .menu-header:hover > .icon[b-jy14a3koly] {
            fill: var(--green);
        }

        .field-menu .menu-header > .icon[b-jy14a3koly],
        .menu .menu-header > .icon[b-jy14a3koly] {
            position: relative;
            top: -0.1em;
            height: 0.4em;
            margin-left: 0.125em;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-menu .menu-list[b-jy14a3koly],
    .menu .menu-list[b-jy14a3koly] {
        position: absolute;
        top: 100%;
        left: 0;
        transform: translate(0, 10px);
        display: inline-block;
        list-style: none;
        margin-top: 4px;
        padding-left: 0px;
        min-width: 150px;
        width: auto;
        max-width: 300px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        line-height: var(--line-height);
        z-index: 99;
        max-height: 50vh;
        
        scrollbar-color: var(--alpha-dark-1) transparent;        
    }

        .field-menu .menu-list.scroll[b-jy14a3koly],
        .menu .menu-list.scroll[b-jy14a3koly] {
            padding: 0;
            height: auto;
            max-height: 200px;
            overflow-y: auto;
        }

        .field-menu .menu-list[b-jy14a3koly]::-webkit-scrollbar,
        .menu .menu-list[b-jy14a3koly]::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        .field-menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-track,
        .menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-track {
            background: transparent;
        }

        .field-menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-thumb,
        .menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-thumb {
            background: var(--alpha-dark-2);
        }

            .field-menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-thumb:hover,
            .menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-thumb:hover {
                background: var(--green);
            }

        .field-menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-corner,
        .menu .menu-list[b-jy14a3koly]::-webkit-scrollbar-corner {
            background: transparent;
        }

    .field-menu .field-check[b-jy14a3koly],
    .field-menu .option[b-jy14a3koly],
    .menu .field-check[b-jy14a3koly],
    .menu .option[b-jy14a3koly] {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: all var(--transition-duration) ease 0s;
    }

    .field-menu .option[b-jy14a3koly],
    .menu .option[b-jy14a3koly] {
        position: relative;
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-3);
        cursor: pointer;
    }

        .field-menu .option[class*=prefix][b-jy14a3koly],
        .menu .option[class*=prefix][b-jy14a3koly] {
            padding-left: 22px !important;
        }

            .field-menu .option[class*=prefix][b-jy14a3koly]::before,
            .menu .option[class*=prefix][b-jy14a3koly]::before {
                left: 8px;
            }

        .field-menu .option:hover[b-jy14a3koly],
        .menu .option:hover[b-jy14a3koly] {
            background-color: var(--grey-light-2);
        }

        .field-menu .option .icon[b-jy14a3koly],
        .menu .option .icon[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            right: 8px;
            height: 0.6em;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
            fill: var(--green);
            opacity: 0;
            pointer-events: none;
        }

        .field-menu .option.option--icon[b-jy14a3koly],
        .menu .option.option--icon[b-jy14a3koly] {
            padding: 8px 8px 8px 30px;
        }

            .field-menu .option.option--icon .icon[b-jy14a3koly],
            .menu .option.option--icon .icon[b-jy14a3koly] {
                right: initial;
                left: 8px;
                height: 1em;
                max-width: 1.125em;
                opacity: 1;
                fill: currentColor;
            }

        .field-menu .option.option--checked[b-jy14a3koly],
        .menu .option.option--checked[b-jy14a3koly] {
            color: var(--green);
            background: var(--grey-light-1);
        }

            .field-menu .option.option--checked .icon[b-jy14a3koly],
            .menu .option.option--checked .icon[b-jy14a3koly] {
                opacity: 1;
            }

    .field-menu.menu--dark .field-option input[type=radio]:checked ~ .option[b-jy14a3koly] {
        background: var(--alpha-light-1);
    }

    .field-menu .field-option[b-jy14a3koly] {
        position: relative;
        font-weight: var(--font-weight);
    }

        .field-menu .field-option input[type=radio][b-jy14a3koly] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

            .field-menu .field-option input[type=radio]:checked ~ .option[b-jy14a3koly] {
                color: var(--green);
                background: var(--grey-light-1);
            }

                .field-menu .field-option input[type=radio]:checked ~ .option .icon[b-jy14a3koly] {
                    opacity: 1;
                }

    .field-menu .field-check[b-jy14a3koly] {
        padding: 8px 8px 8px 30px;
    }

        .field-menu .field-check:hover[b-jy14a3koly] {
            background-color: var(--grey-light-2);
        }

        .field-menu .field-check .checkmark[b-jy14a3koly] {
            left: 8px;
        }

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

.field-option-icon-checked[b-jy14a3koly] {
    opacity: 1 !important;
}

.layout--dark .field-menu .menu-header[b-jy14a3koly],
.layout--dark menu .menu-header[b-jy14a3koly] {
    color: var(--grey-1);
}

/** 2.2.1 More Options */
.menu--more.open .btn[b-jy14a3koly] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--more hr[b-jy14a3koly] {
    margin: 0;
}

.menu--more .menu-header[b-jy14a3koly] {
    position: relative;
}

    .menu--more .menu-header [data-menu-option][b-jy14a3koly] {
        visibility: hidden;
        display: block;
        width: 30px;
    }

    .menu--more .menu-header .btn[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(90deg);
    }

.layout--dark .menu--more.open .btn[b-jy14a3koly] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--more hr[b-jy14a3koly] {
    border-color: var(--grey-light-3);
}

/** 2.2.2 Select Options */
.menu--dropdown[b-jy14a3koly],
.menu--dropdown-search[b-jy14a3koly] {
    display: block;
}

    .menu--dropdown .menu-header[b-jy14a3koly],
    .menu--dropdown-search .menu-header[b-jy14a3koly] {
        position: relative;
        display: block;
    }

        .menu--dropdown .menu-header [data-menu-option][b-jy14a3koly],
        .menu--dropdown-search .menu-header [data-menu-option][b-jy14a3koly] {
            display: block;
            color: var(--grey-dark-3);
            background: #ffffff;
            padding: 8px 52px 8px 12px;
            border-radius: 4px;
            border: 1px solid var(--grey-light-3);
            max-height: 2.8em;
        }

        .menu--dropdown .menu-header .btn[b-jy14a3koly],
        .menu--dropdown-search .menu-header .btn[b-jy14a3koly] {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 40px;
            border-radius: 0 4px 4px 0;
            background: var(--grey-light-1);
        }

            .menu--dropdown .menu-header .btn .icon[b-jy14a3koly],
            .menu--dropdown-search .menu-header .btn .icon[b-jy14a3koly] {
                width: 0.8em;
                height: 0.8em;
            }

            .menu--dropdown .menu-header .btn:hover[b-jy14a3koly],
            .menu--dropdown-search .menu-header .btn:hover[b-jy14a3koly] {
                background: var(--green);
            }

            .menu--dropdown .menu-header .btn.btn--square .icon[b-jy14a3koly],
            .menu--dropdown-search .menu-header .btn.btn--square .icon[b-jy14a3koly] {
                width: auto;
                height: 0.3em;
            }

    .menu--dropdown .menu-list[b-jy14a3koly],
    .menu--dropdown-search .menu-list[b-jy14a3koly] {
        display: block;
        width: 100%;
        min-width: initial;
        max-width: initial;
    }

    .menu--dropdown-search .menu-list[b-jy14a3koly] {
        max-height: initial;
        overflow: hidden;
    }

.layout--dark .menu--dropdown .menu-header [data-menu-option][b-jy14a3koly],
.layout--dark .menu--dropdown-search .menu-header [data-menu-option][b-jy14a3koly] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .menu--dropdown .btn[b-jy14a3koly],
.layout--dark .menu--dropdown-search .btn[b-jy14a3koly] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .menu--dropdown-search .search-field .field[b-jy14a3koly] {
    color: var(--grey-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

/** 2.2.3 Filter Options */
.menu--filter.open .btn[b-jy14a3koly] {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--filter .field-check[b-jy14a3koly] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.layout--dark .menu--filter.open .btn[b-jy14a3koly] {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--filter .field-check .checkmark[b-jy14a3koly] {
    background: #ffffff;
    border-color: var(--grey-light-3);
    color: #ffffff;
}

/** 2.2.4 Calendar Options */
.menu--calendar .menu-header[b-jy14a3koly] {
    font-weight: 600;
}

    .menu--calendar .menu-header [data-menu-option][b-jy14a3koly] {
        color: var(--grey-dark-4);
    }

.layout--dark .menu--calendar .menu-header [data-menu-option][b-jy14a3koly] {
    color: var(--grey-1);
}

/** 2.2.5 Date Picker */
.menu--date-picker > .menu-header[b-jy14a3koly] {
    text-align: center;
    min-width: 178px;
}

    .menu--date-picker > .menu-header [data-menu-option][b-jy14a3koly] {
        color: var(--grey-dark-4);
    }

.menu--date-picker .menu-header[b-jy14a3koly] {
    font-weight: 600;
}

.menu--date-picker > .menu-list[b-jy14a3koly] {
    width: 100%;
    max-width: 300px !important;
    border-color: var(--grey-light-3);
    background: var(--grey-light-1);
    overflow: initial;
}

    .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[b-jy14a3koly] {
        color: var(--green);
        background: #ffffff;
    }

.menu--date-picker .field-calendar[b-jy14a3koly] {
    padding: 8px;
}

.menu--date-picker hr[b-jy14a3koly] {
    margin: 0 8px;
}

.layout--dark .menu--date-picker > .menu-list[b-jy14a3koly] {
    border-color: var(--grey-dark-2);
    background: var(--grey-dark-4);
}

    .layout--dark .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option[b-jy14a3koly] {
        background: var(--alpha-light-2);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option:hover[b-jy14a3koly] {
        color: var(--grey-1);
        background: var(--alpha-light-1);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option.option--checked[b-jy14a3koly] {
        color: var(--green);
        background: var(--alpha-light-2);
    }

.layout--dark .menu--date-picker > .menu-header [data-menu-option][b-jy14a3koly] {
    color: var(--grey-1);
    border-color: var(--grey-dark-2);
    background: transparent;
}

/** 2.2.6 Menu Dropdown Small */
.menu--dropdown-small.open .menu-btn .icon[b-jy14a3koly] {
    transform: translateY(-50%) rotate(90deg);
}

.menu--dropdown-small .menu-btn[b-jy14a3koly] {
    padding: 8px 24px 8px 8px;
    font-size: 0.875rem;
    color: var(--grey-3);
    line-height: 1;
    background: var(--grey-light-1);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
}

    .menu--dropdown-small .menu-btn:hover[b-jy14a3koly], .menu--dropdown-small .menu-btn.active[b-jy14a3koly] {
        background: var(--alpha-dark-2);
    }

    .menu--dropdown-small .menu-btn .icon[b-jy14a3koly] {
        position: absolute;
        top: 50%;
        right: 8px;
        left: initial;
        transform: translateY(-50%);
        width: 12px;
        height: 6px;
        transition: all var(--transition-duration) ease 0s;
    }

.menu--dropdown-small hr[b-jy14a3koly] {
    margin: 0;
}

.layout--light .menu--dropdown-small .menu-btn[b-jy14a3koly] {
    background: #ffffff;
}

    .layout--light .menu--dropdown-small .menu-btn:hover[b-jy14a3koly], .layout--light .menu--dropdown-small .menu-btn.active[b-jy14a3koly] {
        background: var(--alpha-dark-1);
    }

.layout--dark .menu--dropdown-small .menu-btn[b-jy14a3koly] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .menu--dropdown-small .menu-btn:hover[b-jy14a3koly], .layout--dark .menu--dropdown-small .menu-btn.active[b-jy14a3koly] {
        background: var(--alpha-light-2);
    }

.layout--dark .menu--dropdown-small hr[b-jy14a3koly] {
    border-color: var(--grey-light-3);
}

/** 2.4 Search */
.search[b-jy14a3koly] {
    font-size: 1rem;
}

    .search .search-results[b-jy14a3koly] {
        display: none;
    }

/** 2.4.1 Search Small */
.search--small[b-jy14a3koly] {
    position: relative;
    padding: 6px 8px;
    background: var(--grey-light-2);
    z-index: 99;
}

    .search--small .search-field[b-jy14a3koly] {
        position: relative;
    }

        .search--small .search-field input[b-jy14a3koly] {
            padding: 8px 28px 6px;
            border-color: transparent;
            background: transparent;
            cursor: pointer;
        }

            .search--small .search-field input:focus[b-jy14a3koly] {
                border-width: 1px;
                border-color: transparent;
                cursor: initial;
                background: #ffffff;
            }

        .search--small .search-field .search-icon[b-jy14a3koly],
        .search--small .search-field .field-menu[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .search--small .search-field .search-icon[b-jy14a3koly] {
            left: 8px;
            width: 0.875em;
            line-height: 0;
            pointer-events: none;
        }

        .search--small .search-field .field-menu[b-jy14a3koly] {
            right: 0;
        }

            .search--small .search-field .field-menu.open .menu-list[b-jy14a3koly] {
                top: 70%;
            }

            .search--small .search-field .field-menu .menu-header .icon[b-jy14a3koly] {
                height: 0.4em;
            }

.layout--dark .search--small[b-jy14a3koly] {
    background: var(--grey-dark-4);
}

    .layout--dark .search--small .search-field[b-jy14a3koly] {
        border-color: var(--grey-dark-1);
        background-color: var(--grey-dark-4);
    }

        .layout--dark .search--small .search-field input:focus[b-jy14a3koly] {
            background: var(--grey-dark-5);
        }

/** 2.4.2 Search Filed Live */
.search--live[b-jy14a3koly] {
    position: relative;
}

    .search--live[data-view=search-results] .search-field[b-jy14a3koly] {
        z-index: 10;
    }

        .search--live[data-view=search-results] .search-field input[b-jy14a3koly] {
            border-radius: 4px 0 0 0;
        }

        .search--live[data-view=search-results] .search-field .btn[b-jy14a3koly] {
            border-radius: 0 4px 0 0;
        }

    .search--live[data-view=search-results] .search-results[b-jy14a3koly] {
        top: calc(100% - 1px);
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }

    .search--live .search-field[b-jy14a3koly] {
        position: relative;
        display: flex;
        z-index: 1;
    }

        .search--live .search-field input[b-jy14a3koly] {
            border-radius: 4px 0 0 4px;
        }

        .search--live .search-field .btn[b-jy14a3koly] {
            margin-left: -1px;
            width: 40px;
            height: 40px;
            font-size: 1em;
            border-radius: 0 4px 4px 0;
        }

    .search--live .search-results[b-jy14a3koly] {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 0 0 2px 2px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        transition: all var(--transition-duration) ease 0s;
    }

        .search--live .search-results .search-results-item[b-jy14a3koly] {
            display: flex;
            align-items: center;
            font-size: 0.875em;
            transition: all var(--transition-duration) ease 0s;
            padding: 5px 10px;
        }

            .search--live .search-results .search-results-item:not(:last-child)[b-jy14a3koly] {
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            .search--live .search-results .search-results-item.item--found[b-jy14a3koly] {
                cursor: pointer;
            }

                .search--live .search-results .search-results-item.item--found:hover[b-jy14a3koly], .search--live .search-results .search-results-item.item--found:focus[b-jy14a3koly] {
                    background: rgba(0, 0, 0, 0.025);
                }

                    .search--live .search-results .search-results-item.item--found:hover .result *[b-jy14a3koly], .search--live .search-results .search-results-item.item--found:focus .result *[b-jy14a3koly] {
                        color: var(--green);
                    }

            .search--live .search-results .search-results-item.item--no-result[b-jy14a3koly] {
                color: var(--grey-1);
            }

            .search--live .search-results .search-results-item .icon[b-jy14a3koly] {
                margin-right: 10px;
                height: 0.875em;
                color: var(--alpha-dark-2);
            }

            .search--live .search-results .search-results-item .result[b-jy14a3koly] {
                color: var(--grey-1);
            }

                .search--live .search-results .search-results-item .result *[b-jy14a3koly] {
                    transition: all var(--transition-duration) ease 0s;
                }

                .search--live .search-results .search-results-item .result > span[b-jy14a3koly] {
                    color: var(--grey-3);
                }

                .search--live .search-results .search-results-item .result strong[b-jy14a3koly] {
                    color: var(--grey-dark-4);
                }

.layout--dark .search--live .search-field .btn[b-jy14a3koly] {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-3);
}

    .layout--dark .search--live .search-field .btn:hover[b-jy14a3koly], .layout--dark .search--live .search-field .btn:focus[b-jy14a3koly] {
        background: var(--green);
    }

/** 2.4.3 Search Filed Dropdown */
.search--dropdown .search-field[b-jy14a3koly] {
    padding: 0.625rem;
    background-color: var(--grey-light-1);
    border-bottom: 1px solid var(--grey-light-3);
}

.search--dropdown .search-results[b-jy14a3koly] {
    display: block;
}

    .search--dropdown .search-results.scroll[b-jy14a3koly] {
        padding: 0px;
        max-height: calc(50vh - 61px);
    }

    .search--dropdown .search-results .no-result[b-jy14a3koly] {
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-1);
    }

/* 13. MISC */
/** 13.11 Scroll */
.scroll[b-jy14a3koly] {
    width: 100%;
    height: 100%;
    padding: 0 4px;
    overflow: auto;
    scrollbar-color: var(--alpha-dark-1) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
    /* Hide scrollbar but allow scrolling */
}

    .scroll[b-jy14a3koly]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .scroll[b-jy14a3koly]::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll[b-jy14a3koly]::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        .scroll[b-jy14a3koly]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    .scroll[b-jy14a3koly]::-webkit-scrollbar-corner {
        background: transparent;
    }

    .scroll.scroll--hidden[b-jy14a3koly] {
        padding: 0;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

        .scroll.scroll--hidden[b-jy14a3koly]::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }

.layout--dark .scroll[b-jy14a3koly] {
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .layout--dark .scroll[b-jy14a3koly]::-webkit-scrollbar-thumb {
        background: var(--alpha-light-2);
    }

        .layout--dark .scroll[b-jy14a3koly]::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

/** Modifiers */
.shadow-edge-left[b-jy14a3koly],
.shadow-edge-right[b-jy14a3koly] {
    position: relative;
    overflow: hidden;
}

    .shadow-edge-left[b-jy14a3koly]::before, .shadow-edge-left[b-jy14a3koly]::after,
    .shadow-edge-right[b-jy14a3koly]::before,
    .shadow-edge-right[b-jy14a3koly]::after {
        position: absolute;
        top: 0;
        height: 100%;
        width: 1px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    }

    .shadow-edge-left[b-jy14a3koly]::before {
        content: "";
        left: -1px;
    }

    .shadow-edge-right[b-jy14a3koly]::after {
        content: "";
        right: -1px;
    }

/** 13.2 Label */
.label[b-jy14a3koly] {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
}

    .label.label--title[b-jy14a3koly], .label.label--meta[b-jy14a3koly], .label.label--status[b-jy14a3koly] {
        text-transform: uppercase;
        letter-spacing: 0.125em;
    }

    .label.label--meta[b-jy14a3koly], .label.label--status[b-jy14a3koly] {
        font-size: 0.75rem;
        color: var(--grey-1);
    }

    .label.label--icon[b-jy14a3koly] {
        position: relative;
        padding-left: 1.6em;
    }

        .label.label--icon .icon[b-jy14a3koly] {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-width: 1.25em;
            max-height: 1.25em;
        }

            .label.label--icon .icon.icon--sm[b-jy14a3koly] {
                max-width: 0.875em;
                max-height: 0.875em;
            }

    .label.label--menu[b-jy14a3koly] {
        font-weight: 600;
    }

        .label.label--menu[b-jy14a3koly]::after {
            content: "|";
            color: var(--grey-light-3);
            display: inline-block;
            margin: 0 0.375em 0 0.5em;
        }

    .label.label--status .label-value[b-jy14a3koly] {
        text-transform: none;
        letter-spacing: var(--letter-spacing);
    }

    .label.label--color[b-jy14a3koly] {
        position: relative;
        padding-bottom: 6px;
    }

        .label.label--color .label-color[b-jy14a3koly] {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            max-width: 50px;
            height: 4px;
            border-radius: 2px;
        }

/** Layout Theme */
.layout--dark .label.label--title[b-jy14a3koly] {
    color: var(--grey-1);
}

.layout--dark .label.label--meta[b-jy14a3koly] {
    color: #616161;
}

.layout--dark .label.label--menu[b-jy14a3koly]::after {
    color: var(--alpha-light-2);
}

/** 13.8 Modal */
.modal[b-jy14a3koly] {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    direction: column;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    padding: 60px;
    z-index: 9999;
}

    .modal.open[b-jy14a3koly] {
        display: flex;
    }

    .modal.modal--lg .modal-body[b-jy14a3koly] {
        max-width: 1320px;
    }

    .modal.modal--md .modal-body[b-jy14a3koly] {
        max-width: 888px;
    }

    .modal.modal--sm .modal-body[b-jy14a3koly] {
        max-width: 696px;
    }

    .modal .modal-body[b-jy14a3koly] {
        position: relative;
        display: flex;
        padding: 0 60px;
        direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        z-index: 1;
        width: 100%;
    }

    .modal .modal-backdrop[b-jy14a3koly] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(82, 88, 96, 0.45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

/** 13.5 Dialog */
.dialog[b-jy14a3koly] {
    position: relative;
    transition: all var(--transition-duration) ease 0s;
}

    .dialog.dialog--arrow[b-jy14a3koly]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, 0) rotate(45deg);
        width: 12px;
        height: 12px;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-right: none;
        background: var(--grey-light-1);
    }

    .dialog.dialog--arrow.dialog--bottom[b-jy14a3koly]::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .dialog.dialog--arrow.dialog--top[b-jy14a3koly]::before {
        top: auto;
        bottom: 0;
        left: 50%;
        background: #ffffff;
        transform: translate(-50%, 50%) rotate(315deg);
    }

/** 13.5.1 Dialog Class Item */
.dialog--class-item[b-jy14a3koly] {
    width: 100%;
    max-width: 325px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

    .dialog--class-item.dialog--arrow[b-jy14a3koly]::before {
        top: 20px;
    }

    .dialog--class-item .dialog-header[b-jy14a3koly] {
        padding: 15px;
        border-bottom: 1px solid var(--grey-light-3);
        border-radius: 4px 4px 0 0;
        background: var(--grey-light-1);
    }

        .dialog--class-item .dialog-header .label--title[b-jy14a3koly] {
            margin-bottom: 8px;
        }

        .dialog--class-item .dialog-header .menu[b-jy14a3koly] {
            top: -4px;
            right: -6px;
        }

        .dialog--class-item .dialog-header .meta[b-jy14a3koly] {
            font-size: 0.75rem;
        }

    .dialog--class-item .dialog-body[b-jy14a3koly] {
        padding: 0 15px 7px;
    }

        .dialog--class-item .dialog-body > *[b-jy14a3koly] {
            margin: 8px 0;
        }

        .dialog--class-item .dialog-body ul li[b-jy14a3koly] {
            margin: 0.25rem 0;
        }

    .dialog--class-item .label[b-jy14a3koly] {
        font-size: 0.875rem;
    }

        .dialog--class-item .label.label--meta[b-jy14a3koly] {
            font-size: 0.75rem;
        }

    .dialog--class-item ul .label--icon[b-jy14a3koly] {
        font-size: 0.875rem;
    }

    .dialog--class-item ul label[b-jy14a3koly],
    .dialog--class-item ul .link[b-jy14a3koly] {
        font-size: 0.75rem;
    }

    .dialog--class-item ul label[b-jy14a3koly] {
        margin: 0.5em 0;
    }

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

.layout--dark .dialog--class-item hr[b-jy14a3koly] {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta-group[b-jy14a3koly]:before {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta[b-jy14a3koly] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .label.label--title[b-jy14a3koly] {
    color: var(--grey-3);
}

.layout--dark .dialog--class-item .label.label--meta[b-jy14a3koly] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .field-check .radiomark[b-jy14a3koly],
.layout--dark .dialog--class-item .field-check .checkmark[b-jy14a3koly] {
    background: #ffffff;
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .field-check .checkmark[b-jy14a3koly] {
    color: #ffffff;
}

.layout--dark .dialog--class-item a.btn[b-jy14a3koly] {
    border-color: var(--grey-light-3);
    background: #ffffff;
}

    .layout--dark .dialog--class-item a.btn:hover[b-jy14a3koly], .layout--dark .dialog--class-item a.btn:focus[b-jy14a3koly], .layout--dark .dialog--class-item a.btn.active[b-jy14a3koly] {
        border-color: transparent;
        background: var(--green);
    }

.layout--dark .dialog--class-item .btn--text:hover[b-jy14a3koly], .layout--dark .dialog--class-item .btn--text:focus[b-jy14a3koly], .layout--dark .dialog--class-item .btn--text.active[b-jy14a3koly] {
    background: var(--alpha-dark-1);
}

.layout--dark .dialog--class-item .user .user-meta > *[b-jy14a3koly] {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .avatar[b-jy14a3koly] {
    background: var(--grey-light-3);
}

    .layout--dark .dialog--class-item .avatar > .icon[b-jy14a3koly] {
        fill: var(--grey-1);
    }

/** 13.5.2 Dialog Standard */
.dialog--standard[b-jy14a3koly] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: var(--grey-light-2);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

    .dialog--standard .dialog-header[b-jy14a3koly],
    .dialog--standard .dialog-footer[b-jy14a3koly] {
        padding: 15px;
        min-height: 64px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dialog--standard .dialog-body[b-jy14a3koly] {
        flex: 1 1 auto;
        padding: 10px;
        height: 100%;
        overflow: hidden;
        border-top: 1px solid var(--grey-light-3);
        border-bottom: 1px solid var(--grey-light-3);
    }

        .dialog--standard .dialog-body .container.gutter[b-jy14a3koly] {
            padding: 0.625rem;
        }

        .dialog--standard .dialog-body .title[b-jy14a3koly] {
            margin: 0.625rem 0.875rem 0;
        }

        .dialog--standard .dialog-body .scroll[b-jy14a3koly] {
            flex: 1 1 auto;
            min-height: 0;
        }

.layout--dark .dialog--standard[b-jy14a3koly] {
    background: var(--grey-dark-4);
}

    .layout--dark .dialog--standard .dialog-body[b-jy14a3koly] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .dialog--standard .dialog-header[b-jy14a3koly],
    .layout--dark .dialog--standard .dialog-footer[b-jy14a3koly] {
        background: var(--alpha-light-1);
    }

/** 13.5.2 Dialog Class */
.dialog--class[b-jy14a3koly] {
    position: relative;
    width: 100%;
    max-width: 400px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

    .dialog--class.dialog--bottom[b-jy14a3koly], .dialog--class.dialog--top[b-jy14a3koly], .dialog--class.dialog--center[b-jy14a3koly] {
        position: relative;
        left: 50%;
    }

    .dialog--class.dialog--bottom[b-jy14a3koly] {
        transform: translate(-50%, 30px);
    }

    .dialog--class.dialog--top[b-jy14a3koly] {
        transform: translate(-50%, calc(-100% - 66px));
    }

    .dialog--class.dialog--center[b-jy14a3koly] {
        transform: translate(-50%, -50%);
    }

        .dialog--class.dialog--center.dialog--arrow[b-jy14a3koly]::before {
            content: none;
        }

    .dialog--class.dialog--arrow[b-jy14a3koly]::before {
        background: #f2f2f2;
    }

    .dialog--class .dialog-body[b-jy14a3koly] {
        height: 100%;
    }

        .dialog--class .dialog-body .summary-class-table[b-jy14a3koly] {
            height: 100%;
            margin: 0;
            border: none;
            border-radius: 4px 4px 0 0;
        }

            .dialog--class .dialog-body .summary-class-table .summary-class-table-header[b-jy14a3koly] {
                border-color: var(--grey-light-3);
                background: var(--alpha-dark-1);
            }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text:hover[b-jy14a3koly], .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text.active[b-jy14a3koly] {
                    background: var(--alpha-dark-1);
                }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .label[b-jy14a3koly] {
                    font-weight: 600;
                    color: var(--grey-dark-4);
                }

            .dialog--class .dialog-body .summary-class-table .meta[b-jy14a3koly] {
                color: var(--grey-3);
            }

        .dialog--class .dialog-body .table--summary .label[b-jy14a3koly] {
            color: var(--grey-1);
        }

        .dialog--class .dialog-body .table--summary td[b-jy14a3koly] {
            color: var(--grey-dark-4);
        }

        .dialog--class .dialog-body .table--summary th[b-jy14a3koly] {
            color: var(--grey-1);
            background: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table--summary tr:not(:last-child)[b-jy14a3koly] {
            border-color: #ffffff;
        }

        .dialog--class .dialog-body .table .th--highlight[b-jy14a3koly] {
            color: var(--green);
            background: #f4fcf9;
            border-color: #a8d7c4;
        }

        .dialog--class .dialog-body .table .td--link:hover[b-jy14a3koly] {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table .tr--highlight th[b-jy14a3koly] {
            background-color: var(--alpha-dark-2);
        }

        .dialog--class .dialog-body .table .tr--highlight td[b-jy14a3koly] {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .scroll[b-jy14a3koly] {
            scrollbar-color: var(--alpha-dark-1) transparent;
            padding: 1px 1px 1px 0;
        }

            .dialog--class .dialog-body .scroll[b-jy14a3koly]::-webkit-scrollbar-thumb {
                background: var(--alpha-dark-2);
            }

                .dialog--class .dialog-body .scroll[b-jy14a3koly]::-webkit-scrollbar-thumb:hover {
                    background: var(--green);
                }
/*# sourceMappingURL=theme.css.map */

[b-jy14a3koly] .container.gutter {
    margin-top: 0.625rem !important;
    margin-bottom: 0.625rem !important;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/Views/BasicInformation/BasicInformation.razor.rz.scp.css */
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/Views/ContactInformation/ContactInformation.razor.rz.scp.css */
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/Views/RoleInformation/RoleInformation.razor.rz.scp.css */
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/Views/SchoolInfomation/EmployeeSchoolInformation.razor.rz.scp.css */
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/Views/SchoolInfomation/SchoolInformation.razor.rz.scp.css */
.preferred-classroom-input[b-q930ni215e] {
    padding-top: 0.5rem;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Components/RegisterUserDialog/Views/SchoolInfomation/StudentSchoolInformation.razor.rz.scp.css */
.programs-container[b-921euidel4] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Components/UsersTable/UsersTable.razor.rz.scp.css */
/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1 General */
.table[b-ab7y3vl1hb] {
    width: 100%;
    font-size: 0.875rem;
}

.table th[b-ab7y3vl1hb], .table td[b-ab7y3vl1hb] {
    position: relative;
    vertical-align: inherit;
}

.table th[b-ab7y3vl1hb] {
    background: var(--alpha-dark-1);
}

.table [rowspan][b-ab7y3vl1hb] {
    vertical-align: top;
}

.table .tr--highlight th[b-ab7y3vl1hb] {
    background: var(--alpha-dark-2);
}

.table .tr--highlight td[b-ab7y3vl1hb] {
    background: var(--alpha-dark-1);
}

.table .tr--thin > *[b-ab7y3vl1hb] {
    padding-top: 4px;
    padding-bottom: 4px;
    height: auto;
}

.table .tr--layout[b-ab7y3vl1hb] {
    padding: 0;
    height: 0;
}

.table .tr--layout th[b-ab7y3vl1hb], .table .tr--layout td[b-ab7y3vl1hb] {
    padding: 0;
    height: 0;
    border: 0;
}

.table .tr--link[b-ab7y3vl1hb],
.table .td--link[b-ab7y3vl1hb] {
    cursor: pointer;
    transition: all var(--transition-duration) ease 0s;
}

.table .tr--link:hover[b-ab7y3vl1hb], .table .tr--link:focus[b-ab7y3vl1hb], .table .tr--link:active[b-ab7y3vl1hb],
.table .td--link:hover[b-ab7y3vl1hb],
.table .td--link:focus[b-ab7y3vl1hb],
.table .td--link:active[b-ab7y3vl1hb] {
    background-color: var(--alpha-dark-1);
}

.table .th--sticky[b-ab7y3vl1hb] {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    background: var(--grey-light-1);
}

.table .th--sticky[b-ab7y3vl1hb]::before, .table .th--sticky[b-ab7y3vl1hb]::after {
    content: "";
    position: absolute;
    display: block;
}

.table .th--sticky.th--sticky-top[b-ab7y3vl1hb] {
    top: 0;
}

.table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::before, .table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::after {
    left: 0;
    bottom: -1px;
    width: 100%;
    border-bottom-width: inherit;
    border-bottom-style: inherit;
    border-bottom-color: inherit;
}

.table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::before {
    height: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::after {
    height: 4px;
    background: inherit;
}

.table .th--sticky.th--sticky-left[b-ab7y3vl1hb] {
    left: 0;
}

.table .th--sticky.th--sticky-left[b-ab7y3vl1hb]::before, .table .th--sticky.th--sticky-left[b-ab7y3vl1hb]::after {
    right: -1px;
    top: 0;
    height: 100%;
    border-right-width: inherit;
    border-right-style: inherit;
    border-right-color: inherit;
}

.table .th--sticky.th--sticky-left[b-ab7y3vl1hb]::before {
    width: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.table .th--sticky.th--sticky-left[b-ab7y3vl1hb]::after {
    width: 4px;
    background: inherit;
}

.table .th--sticky.th--sticky-right[b-ab7y3vl1hb] {
    right: 0;
}

.table .th--sticky.th--sticky-right[b-ab7y3vl1hb]::before, .table .th--sticky.th--sticky-right[b-ab7y3vl1hb]::after {
    left: 0;
    top: 0;
    height: 100%;
    border-right-width: inherit;
    border-right-style: inherit;
    border-right-color: inherit;
}

.table .th--sticky.th--sticky-right[b-ab7y3vl1hb]::before {
    width: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.table .th--sticky.th--sticky-right[b-ab7y3vl1hb]::after {
    width: 4px;
    background: inherit;
}

.table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb], .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb] {
    top: 0;
    z-index: 4;
}

.table .th--sticky.th--sticky-top-left > *[b-ab7y3vl1hb], .table .th--sticky.th--sticky-top-right > *[b-ab7y3vl1hb] {
    position: relative;
    z-index: 1;
}

.table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::before, .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::after, .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::before, .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::after {
    filter: blur(1px);
    background: rgba(0, 0, 0, 0.15);
}

.table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::before, .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::before {
    top: 0;
    height: 100%;
    width: 1px;
}

.table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::after, .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::after {
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 100%;
}

.table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb] {
    left: 0;
}

.table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::before {
    left: 100%;
}

.table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb] {
    right: 0;
}

.table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::before {
    right: 100%;
}

.table .th--scroll-border-fix[b-ab7y3vl1hb] {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + (2 * 1px));
    height: calc(100% + (2 * 1px));
    border: inherit;
}

.table .th--highlight[b-ab7y3vl1hb] {
    color: var(--green);
    background: #f4fcf9;
    border: 1px solid #a8d7c4;
    z-index: 2;
}

.table .th--highlight > *[b-ab7y3vl1hb] {
    color: inherit !important;
}

.table .th--clean[b-ab7y3vl1hb] {
    padding: 0;
    border: none;
    background: transparent;
}

.table .th--clean.th--sticky[b-ab7y3vl1hb]::before, .table .th--clean.th--sticky[b-ab7y3vl1hb]::after {
    content: none;
}

.table .td--sticky[b-ab7y3vl1hb] {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
}

.table .td--sticky.td--sticky-left[b-ab7y3vl1hb] {
    left: 0;
}

.table .td--sticky.td--sticky-right[b-ab7y3vl1hb] {
    right: 0;
}

.table .td--pseudo-border[b-ab7y3vl1hb] {
    position: relative;
}

.table .td--pseudo-border[b-ab7y3vl1hb]::before, .table .td--pseudo-border[b-ab7y3vl1hb]::after {
    position: absolute;
    content: "";
    box-shadow: none;
    border: none;
    background: var(--grey-light-3);
}

.table .td--pseudo-border[b-ab7y3vl1hb]::before {
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
}

.table .td--pseudo-border[b-ab7y3vl1hb]::after {
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
}

.table .table--cell-spacer[b-ab7y3vl1hb] {
    width: 100%;
    background: transparent;
    border: none;
}

.table .table--cell-spacer[b-ab7y3vl1hb]::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    box-shadow: none;
    border: none;
    background: var(--grey-light-3);
}

.table .table--cell-pattern[b-ab7y3vl1hb] {
    position: relative;
}

.table .table--cell-pattern.th--sticky[b-ab7y3vl1hb] {
    position: -webkit-sticky;
    position: sticky;
    background: transparent !important;
}

.table .table--cell-pattern.th--sticky .pattern[b-ab7y3vl1hb] {
    left: 0;
    width: 100%;
    height: 100%;
}

.table .table--cell-pattern.th--sticky[b-ab7y3vl1hb]::before, .table .table--cell-pattern.th--sticky[b-ab7y3vl1hb]::after {
    content: none;
}

.table .table--cell-pattern .pattern[b-ab7y3vl1hb] {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + (2 * 1px));
    height: calc(100% + (2 * 1px));
    background-repeat: repeat;
    background-size: 45px;
    background-color: #ffffff;
}

.table .th--weekend[b-ab7y3vl1hb] {
    background: var(--grey-light-1) !important;
}

.table .td--weekend[b-ab7y3vl1hb] {
    background: rgba(0, 0, 0, 0.025) !important;
}

.table .td--weekend .pattern[b-ab7y3vl1hb] {
    background-color: #ffffff;
}

.table .tr--weekend th .pattern[b-ab7y3vl1hb], .table .tr--weekend td .pattern[b-ab7y3vl1hb] {
    background-color: var(--alpha-dark-1);
}

.table .tr--weekend th[b-ab7y3vl1hb] {
    background: #efefef !important;
}

.table .tr--weekend td[b-ab7y3vl1hb] {
    background-color: rgba(0, 0, 0, 0.025) !important;
}

.layout--light .table th[b-ab7y3vl1hb] {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover[b-ab7y3vl1hb], .layout--dark .table .tr--link:focus[b-ab7y3vl1hb], .layout--dark .table .tr--link:active[b-ab7y3vl1hb],
.layout--dark .table .td--link:hover[b-ab7y3vl1hb],
.layout--dark .table .td--link:focus[b-ab7y3vl1hb],
.layout--dark .table .td--link:active[b-ab7y3vl1hb] {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky[b-ab7y3vl1hb] {
    background: var(--grey-dark-3);
}

.layout--dark .table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::before {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.layout--dark .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::before {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.layout--dark .table .th--highlight[b-ab7y3vl1hb] {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend[b-ab7y3vl1hb] {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend[b-ab7y3vl1hb] {
    background: rgba(255, 255, 255, 0.015) !important;
}

.layout--dark .table .td--weekend .pattern[b-ab7y3vl1hb] {
    background-color: #212121;
}

.layout--dark .table .td--pseudo-border[b-ab7y3vl1hb]::before, .layout--dark .table .td--pseudo-border[b-ab7y3vl1hb]::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer[b-ab7y3vl1hb]::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern[b-ab7y3vl1hb] {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern[b-ab7y3vl1hb], .layout--dark .tr--weekend td .pattern[b-ab7y3vl1hb] {
    background-color: #212121;
}

.layout--dark .tr--weekend th[b-ab7y3vl1hb] {
    background: #363636 !important;
}

.layout--dark .tr--weekend td[b-ab7y3vl1hb] {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */

.table-wrapper.table-wrapper--flex[b-ab7y3vl1hb] {
    display: flex;
    flex-direction: column;
}

.table-wrapper.table-wrapper--flex .table-wrapper-body[b-ab7y3vl1hb] {
    flex: 0 1 auto;
    min-height: 0;
}

.table-wrapper.table-wrapper--card .table-wrapper-card[b-ab7y3vl1hb] {
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    background: rgba(0, 0, 0, 0.025);
    border-radius: 4px;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .card[b-ab7y3vl1hb] {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.025);
    border: none;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .scroll[b-ab7y3vl1hb] {
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.table-wrapper .table-wrapper-header > *[b-ab7y3vl1hb] {
    margin-bottom: 10px;
}

.table-wrapper .table-wrapper-header[data-view] .context-options[b-ab7y3vl1hb] {
    display: none;
}

.table-wrapper .table-wrapper-header[data-view=context-options] .context-options[b-ab7y3vl1hb] {
    display: block;
}

.table-wrapper .table-wrapper-header[data-view=context-options] .context-options + *[b-ab7y3vl1hb] {
    margin-left: 10px;
}

.table-wrapper .table-wrapper-header .row[b-ab7y3vl1hb] {
    align-items: center;
}

.table-wrapper .table-wrapper-header .row > *[b-ab7y3vl1hb] {
    width: auto;
    flex: 1 1 auto;
}

.table-wrapper .table-wrapper-header .field-menu[b-ab7y3vl1hb] {
    min-width: 160px;
}

.table-wrapper .table-wrapper-header .search[b-ab7y3vl1hb] {
    max-width: 100%;
    width: 320px;
}

.table-wrapper .table-wrapper-body[data-view] .table-empty[b-ab7y3vl1hb] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td[b-ab7y3vl1hb],
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th[b-ab7y3vl1hb] {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top[b-ab7y3vl1hb]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty[b-ab7y3vl1hb] {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer[b-ab7y3vl1hb] {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .card[b-ab7y3vl1hb] {
    height: auto;
}

.table-wrapper .table-wrapper-body .card[b-ab7y3vl1hb],
.table-wrapper .table-wrapper-body .scroll[b-ab7y3vl1hb] {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .table-wrapper-body .card[b-ab7y3vl1hb] {
    background: #ffffff;
    height: 100%;
}

.table-wrapper .table-wrapper-footer > *[b-ab7y3vl1hb] {
    padding: 10px 0 0;
}

.table-wrapper .table thead tr[b-ab7y3vl1hb] {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th[b-ab7y3vl1hb] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.table-wrapper .table tbody tr:last-child th[b-ab7y3vl1hb],
.table-wrapper .table tbody tr:last-child td[b-ab7y3vl1hb] {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky[b-ab7y3vl1hb] {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child[b-ab7y3vl1hb], .table-wrapper .table tr > *:last-child[b-ab7y3vl1hb] {
    min-width: 40px;
}

.table-wrapper .table th[b-ab7y3vl1hb],
.table-wrapper .table td[b-ab7y3vl1hb] {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th[b-ab7y3vl1hb] {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table .tr--nowrap > *[b-ab7y3vl1hb] {
    white-space: nowrap;
}

.table-wrapper .table .tr--link td[b-ab7y3vl1hb] {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky[b-ab7y3vl1hb] {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top[b-ab7y3vl1hb], .table-wrapper .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb], .table-wrapper .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb] {
    border-bottom: none;
}

.table-wrapper .table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::before, .table-wrapper .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::before, .table-wrapper .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::before {
    content: none;
}

.table-wrapper .table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::after, .table-wrapper .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::after, .table-wrapper .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::after {
    height: 1px;
    bottom: 0px;
    background: var(--grey-light-3);
    filter: none;
    box-shadow: none;
}

.table-wrapper .table .th--sticky.th--sticky-top[b-ab7y3vl1hb] {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb], .table-wrapper .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb] {
    z-index: 5;
}

.table-wrapper .table .th--highlight[b-ab7y3vl1hb] {
    color: var(--green);
    background: #f4fcf9;
    border: none;
}

.table-wrapper .table .th--highlight[b-ab7y3vl1hb]::before {
    width: 100%;
    height: 100%;
    background: transparent;
}

.table-wrapper .table .th--active[b-ab7y3vl1hb] {
    color: var(--green);
}

.table-wrapper .table .th--active.th--sort .sort[b-ab7y3vl1hb] {
    opacity: 1;
}

.table-wrapper .table .th--sort[b-ab7y3vl1hb] {
    padding: 5px 20px 5px 12px;
    cursor: pointer;
}

.table-wrapper .table .th--sort:hover[b-ab7y3vl1hb] {
    background: #f0f0f0;
}

.table-wrapper .table .th--sort:hover .sort[b-ab7y3vl1hb] {
    opacity: 1;
}

.table-wrapper .table .th--sort.sort--top .icon .sort-bottom[b-ab7y3vl1hb] {
    opacity: 0.5;
}

.table-wrapper .table .th--sort.sort--bottom .icon .sort-top[b-ab7y3vl1hb] {
    opacity: 0.5;
}

.table-wrapper .table .th--sort .sort[b-ab7y3vl1hb] {
    position: absolute;
    width: 6px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    opacity: 0;
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .th--check[b-ab7y3vl1hb] {
    cursor: pointer;
}

.table-wrapper .table .th--check:hover[b-ab7y3vl1hb] {
    background: #f0f0f0;
}

.table-wrapper .table .td--sticky[b-ab7y3vl1hb] {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu[b-ab7y3vl1hb] {
    position: absolute;
    top: 10px;
    right: 4px;
}

.table-wrapper .table .td--row-menu .menu .btn .icon[b-ab7y3vl1hb] {
    transform: translate(-50%, -50%) rotate(90deg);
}

.table-wrapper .table .field-check[b-ab7y3vl1hb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.table-wrapper .table .field-check .checkmark[b-ab7y3vl1hb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.table-wrapper .table-empty[b-ab7y3vl1hb] {
    padding: 30px;
    text-align: center;
}

.layout--dark .table-wrapper[b-ab7y3vl1hb] {
    border-color: var(--alpha-light-2);
}

.layout--dark .table-wrapper.table-wrapper--card .card[b-ab7y3vl1hb] {
    background: rgba(255, 255, 255, 0.025);
}

.layout--dark .table-wrapper.table-wrapper--card .scroll[b-ab7y3vl1hb] {
    background: var(--grey-dark-4);
    border-color: var(--alpha-light-2);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.layout--dark .table-wrapper .table thead th:hover[b-ab7y3vl1hb] {
    background: #383838;
}

.layout--dark .table-wrapper .table th[b-ab7y3vl1hb],
.layout--dark .table-wrapper .table td[b-ab7y3vl1hb] {
    border-bottom-color: var(--alpha-light-2);
}

.layout--dark .table-wrapper .table .tr--link:hover .td--sticky[b-ab7y3vl1hb] {
    background: #2c2c2c;
}

.layout--dark .table-wrapper .table .th--sticky.th--sticky-top[b-ab7y3vl1hb]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left[b-ab7y3vl1hb]::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right[b-ab7y3vl1hb]::after {
    background: var(--alpha-light-2);
}

.layout--dark .table-wrapper .table .td--sticky[b-ab7y3vl1hb] {
    background: var(--grey-dark-4);
}

.layout--dark .table-wrapper .card[b-ab7y3vl1hb] {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

.layout--dark .card[b-ab7y3vl1hb] {
    background: var(--grey-dark-4);
}
/*# sourceMappingURL=theme.css.map */

.search-wrapper[b-ab7y3vl1hb] {
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.search-wrapper[b-ab7y3vl1hb]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: 0 0 6px 0;
}
.search-wrapper[b-ab7y3vl1hb]  .search--small .search-field input {
    height: 36px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}
.search-wrapper[b-ab7y3vl1hb]  .btn {
    height: 36px;
}

[b-ab7y3vl1hb] .card--profile {
    height: 100% !important;
}

.spinner-wrapper[b-ab7y3vl1hb] {
    height: 100vh !important;
    border: none;
}
.spinner-container[b-ab7y3vl1hb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-tooltip-header[b-ab7y3vl1hb] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    color: white;
}

.table-tooltip-item[b-ab7y3vl1hb] {
    display: flex;
    font-size: 14px;
    font-weight: normal;
    color: var(--grey-light-4)
}
/* /Pages/OrgAdmin/UsersManagement/Users/Page/Users.razor.rz.scp.css */
.header-container[b-e0ge98jgkh] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.users-table-toolbar[b-e0ge98jgkh] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.users-table-toolbar[b-e0ge98jgkh]  .btn {
    height: 39px;
}

.search-input-container[b-e0ge98jgkh]  .search--small {
    max-width: 100%;
    width: 320px;
    padding: unset;
}

.search-input-container[b-e0ge98jgkh]  .search--small .search-field input {
    height: 39px;
    background: #fff;
    border: 1px solid var(--grey-light-3);
}

.users-table-filter[b-e0ge98jgkh] {
    margin-right: 0.5rem;
}

[b-e0ge98jgkh] .filter-drop-down {
    min-width: 190px;
}

.role-menu[b-e0ge98jgkh]  .filter-drop-down {
    min-width: 230px !important;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Views/SchoolAccessCard/SchoolAccessCard.razor.rz.scp.css */
.school-access-card-container[b-7f39vyz6w7] {
    background-color: #fff;
    width: 100%;
    display: flex;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #E1E1E1;
}

.school-icon[b-7f39vyz6w7] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.school-icon svg[b-7f39vyz6w7] {
    width: 28px;
    height: 28px;
}

.school-info[b-7f39vyz6w7] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
}

.school-name[b-7f39vyz6w7] {
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
    color: #323232;
}

.school-label[b-7f39vyz6w7] {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    color: #888888;
    line-height: 16.8px;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Views/SchoolAccessSection/SchoolAccessSection.razor.rz.scp.css */
.school-access-autocomplete[b-amvdcpl99w] {
    position: relative;
    width: 100%;
    overflow: visible;
}

.school-access-search-field[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid #D7DEE8;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0 14px;
}

.school-access-search-icon[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    color: var(--gray);
}

.school-access-search-icon[b-amvdcpl99w]  svg {
    width: 16px;
    height: 16px;
}

.school-access-search-input[b-amvdcpl99w] {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
}

.school-access-suggestions[b-amvdcpl99w] {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: 100%;
    border: 1px solid #D7DEE8;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.school-access-suggestion[b-amvdcpl99w],
.school-access-suggestion:hover[b-amvdcpl99w],
.school-access-suggestion:focus[b-amvdcpl99w],
.school-access-suggestion:active[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    border: 0;
    background: #FFFFFF;
    color: #323232;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}

.school-access-suggestion-icon[b-amvdcpl99w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
}

.school-access-suggestion-name[b-amvdcpl99w] {
    color: #323232;
    font-weight: 500;
    line-height: 16px;
}

.school-access-selected-container[b-amvdcpl99w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.school-access-card-container[b-amvdcpl99w] {
    background-color: #FFFFFF;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #E1E1E1;
}

.school-access-card-content[b-amvdcpl99w] {
    display: flex;
    align-items: center;
}

.school-icon[b-amvdcpl99w] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.school-icon svg[b-amvdcpl99w] {
    width: 28px;
    height: 28px;
}

.school-info[b-amvdcpl99w] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
}

.school-name[b-amvdcpl99w] {
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
    color: #323232;
}

.school-label[b-amvdcpl99w] {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    color: #888888;
    line-height: 16.8px;
}

.school-access-remove-button[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #888888;
    padding: 4px;
}

.school-access-remove-button svg[b-amvdcpl99w] {
    width: 16px !important;
    height: 16px !important;
}

.school-access-no-results[b-amvdcpl99w] {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    color: #888888;
    background: #FFFFFF;
}

.school-access-selected-header[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.school-access-selected-count[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888888;
    font-size: 13px;
    font-weight: 500;
}

.school-access-selected-count-icon[b-amvdcpl99w] {
    display: flex;
    align-items: center;
    color: #888888;
}

.school-access-selected-count-icon[b-amvdcpl99w]  svg,
.school-access-selected-count-icon[b-amvdcpl99w]  svg * {
    fill: #888888 !important;
    stroke: #888888 !important;
    width: 16px !important;
    height: 16px !important;
}

.school-access-remove-all[b-amvdcpl99w] {
    font-size: 13px;
    font-weight: 600;
    color: #888888 !important;
    cursor: pointer;
}

.school-access-empty[b-amvdcpl99w] {
    min-height: 44px;
    padding: 8px;
    color: #888888;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.school-access-empty-first[b-amvdcpl99w] {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.school-access-empty-second[b-amvdcpl99w] {
    font-size: 14px;
    font-weight: 400;
}
/* /Pages/OrgAdmin/UsersManagement/Users/Views/UsersWelcome/UsersWelcome.razor.rz.scp.css */
.users-welcome-container[b-6sar6o8amd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.users-welcome-wrapper[b-6sar6o8amd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-users-actions[b-6sar6o8amd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
    margin-top: 30px;
}

.welcome-title h1[b-6sar6o8amd] {
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #272727;
}

.welcome-subtitle[b-6sar6o8amd] {
    color: #888888;
    line-height: 22.4px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 15px;
}
/* /Views/Attachments/Attachment/Attachment.razor.rz.scp.css */
.tile-attachment[b-87w84qfyzt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-height: 100%;
    max-width: 100%;
    padding: 6px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid var(--alpha-dark-1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    line-height: 1;
    cursor: pointer;
}

    .tile-attachment .attachment-icon[b-87w84qfyzt],
    .tile-attachment .attachment-ctrls[b-87w84qfyzt] {
        color: var(--grey-1);
    }

    .tile-attachment .attachment-label[b-87w84qfyzt] {
        flex: 1 1 auto;
        min-width: 0;
    }

        .tile-attachment .attachment-label > *[b-87w84qfyzt] {
            display: block;
            line-height: 1.1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

    .tile-attachment .title[b-87w84qfyzt] {
        font-size: 12px;
        margin-bottom: 0;
    }

    .tile-attachment .meta[b-87w84qfyzt] {
        font-size: 10px;
    }

        .tile-attachment .meta:not(:empty)[b-87w84qfyzt] {
            margin-top: 2px;
        }

    .tile-attachment .icon[b-87w84qfyzt] {
        width: 0.625em;
    }

    .tile-attachment .btn-close[b-87w84qfyzt] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 15px;
        height: 15px;
        cursor: pointer;
        color: var(--red);
    }

        .tile-attachment .btn-close .icon[b-87w84qfyzt] {
            width: 0.625em;
        }

.layout--dark .tile-attachment[b-87w84qfyzt] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-1);
}

/** 13.#.1 Types */
.tile-attachment.type--attached[b-87w84qfyzt] {
    align-items: initial;
    cursor: pointer;
    transition: all var(--transition-duration) ease 0s;
}

    .tile-attachment.type--attached:hover[b-87w84qfyzt] {
        background: var(--grey-light-1);
    }

.layout--dark .tile-attachment.type--attached:hover[b-87w84qfyzt] {
    background: var(--alpha-light-2);
}
/* /Views/Attachments/Attachments/Attachments.razor.rz.scp.css */
.list-attachments[b-8jdb4ybkn1] {
	padding: 6px;
	background: var(--grey-light-2);
	display: flex;
	gap: 10px;
	overflow: auto;
	scrollbar-color: var(--alpha-dark-2) transparent;
}

	.list-attachments[b-8jdb4ybkn1]::-webkit-scrollbar-thumb {
		background: var(--alpha-dark-2);
	}

		.list-attachments[b-8jdb4ybkn1]::-webkit-scrollbar-thumb:hover {
			background: var(--green);
		}

	.list-attachments[b-8jdb4ybkn1]::-webkit-scrollbar {
		width: 8px;
		height: 8px;
		scrollbar-width: initial;
	}

	.list-attachments[b-8jdb4ybkn1]::-webkit-scrollbar-track {
		background: transparent;
	}

	.list-attachments[b-8jdb4ybkn1]::-webkit-scrollbar-corner {
		background: transparent;
	}

	.list-attachments.scroll--hidden[b-8jdb4ybkn1] {
		padding: 0;
		-ms-overflow-style: none; /* for Internet Explorer, Edge */
		scrollbar-width: none; /* for Firefox */
	}

		.list-attachments.scroll--hidden[b-8jdb4ybkn1]::-webkit-scrollbar {
			display: none; /* for Chrome, Safari, and Opera */
		}

	.list-attachments.direction--vertical[b-8jdb4ybkn1] {
		flex-direction: column;
	}

		.list-attachments.direction--vertical .item-attachment[b-8jdb4ybkn1] {
			max-width: initial;
		}

			.list-attachments.direction--vertical .item-attachment .tile-attachment[b-8jdb4ybkn1] {
				display: flex;
			}

	.list-attachments .item-attachment[b-8jdb4ybkn1] {
		max-width: 200px;
	}
/* /Views/AvatarList/AvatarList.razor.rz.scp.css */

/* /Views/BuilderDialogFooter/BuilderDialogFooter.razor.rz.scp.css */
[b-16x5e0dvsu] .btn-override {
    height: 32px !important;
}
/* /Views/ClassList/ClassList.razor.rz.scp.css */

/* /Views/ConfirmationDialog/ConfirmationDialog.razor.rz.scp.css */
.confirmation-message[b-wq2sv8klv7] {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 0.875rem;
}

.confirmation-dialog[b-wq2sv8klv7] .dialog-header {
    border-bottom: 0 !important;
}

.confirmation-dialog[b-wq2sv8klv7] .dialog-footer {
    border-top: 0 !important;
}

.confirmation-dialog[b-wq2sv8klv7]  .btn-progress .loader-container {
    flex: 1 1 auto !important;
    margin-left: 0.5rem;
}
/* /Views/DashboardSidebar/DashboardSidebar.razor.rz.scp.css */
.sidebar[b-nzspurxhz9] {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	background: var(--grey-dark-4);
	top: 0;
	left: 0;
	z-index: 1001;
}

	.sidebar.docked[b-nzspurxhz9] {
		position: static;
	}

	.sidebar.flyout[b-nzspurxhz9] {
		position: absolute;
	}

	.sidebar.collapsed[b-nzspurxhz9] {
		min-width: 64px;
		max-width: 64px;
		width: 64px;
	}

	.sidebar.expanded[b-nzspurxhz9] {
		min-width: 288px;
		max-width: 288px;
		width: 288px;
	}

.logo-container[b-nzspurxhz9] {
	display: flex;
	padding: 20px 16px 8px 8px;
	align-items: flex-start;
	align-self: stretch;
	gap: 8px;
}

.profile-container[b-nzspurxhz9] {
	flex: 0 0 auto;
	padding: 0 16px 20px;
}

.button-container[b-nzspurxhz9] {
	display: flex;
	align-items: center;
	justify-content: center;
}

	.button-container[b-nzspurxhz9] .icon {
		left: 0 !important;
		margin-right: 0 !important;
	}

	.button-container[b-nzspurxhz9] .btn {
		display: flex;
		width: 40px;
		height: 40px;
		padding: 1px;
		justify-content: center;
		align-items: center;
		background: var(--grey-dark-4);
		border: none;
	}

		.button-container[b-nzspurxhz9] .btn:hover {
			display: flex;
			width: 40px;
			height: 40px;
			max-width: 40px;
			justify-content: center;
			align-items: center;
			border-radius: 50px;
			background: var(--white, rgba(255, 255, 255, 0.05));
		}

		.button-container[b-nzspurxhz9] .btn:hover path {
			fill: var(--green);
		}

.buttons-container[b-nzspurxhz9] {
	padding: 20px 0 10px 0;
}

.sidebar-backdrop[b-nzspurxhz9] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(82, 88, 96, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 1000;
}

.sidebar[b-nzspurxhz9]  .scroll {
	scrollbar-color: var(--alpha-light-2) transparent;
}
/* /Views/DocumentViewer/DocumentItem/DocumentItem.razor.rz.scp.css */
/* /Views/DocumentViewer/DocumentViewer.razor.rz.scp.css */
/* /Views/DragDrop/DragDrop.razor.rz.scp.css */

.dd-container[drag-drop-view] {
    position: relative;
    background-color: transparent;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.dd-container-drop-forbidden[drag-drop-view] {
    border: 1px dashed red; 
}

.dd-container.dd-container-horizontal[drag-drop-view] {
    display: flex;
    flex-direction: row;
}
.dd-container.dd-container-vertical[drag-drop-view] {
    display: flex;
    flex-direction: column;
}
    .dd-container:has(.dd-item-container.dd-item-container-drop-forbidden)[drag-drop-view] {
        cursor: no-drop !important;
    }

    .dd-container > .dd-item-container[drag-drop-view] {
        width: 100%;
        height: auto;
    }
        .dd-container > .dd-item-container[draggable=true][drag-drop-view] {
            cursor: grab;
            cursor: -moz-grab;
            cursor: -webkit-grab;
        }
            .dd-container > .dd-item-container[draggable=true]:active[drag-drop-view] {
                cursor: grabbing;
                cursor: -moz-grabbing;
                cursor: -webkit-grabbing;
            }

    .dd-container > .dd-item-container-padding[drag-drop-view] {
        padding: 4px 0;
    }

.dd-container > .dd-item-container-currently-dragged[drag-drop-view] {
    opacity: 0.75;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.15);
}
    .dd-container > .dd-item-container-drag-forbidden[drag-drop-view] {
        user-select: none;
    }

    .dd-container > .dd-item-container-drag-disabled[drag-drop-view] {
        pointer-events: none;
        user-select: none;
    }

    .dd-container > .dd-item-container-dragged-over[drag-drop-view] {
        opacity: 0.75;
        animation: blinker-drag-drop-view 800ms ease-in-out infinite;
    }
        .dd-container > .dd-item-container-dragged-over[drag-drop-view]  * {
            opacity: 0.75;
            animation: blinker-drag-drop-view 800ms ease-in-out infinite;
        }
    .dd-container > .dd-item-container-drop-forbidden[drag-drop-view] {
        cursor: not-allowed;
    }
        .dd-container > .dd-item-container-drop-forbidden[drag-drop-view]  * {
            cursor: not-allowed;
        }

    .dd-container > .dd-item-spacer[drag-drop-view] {
        opacity: 0;
        display: flex;
        align-items: center;
        background-color: transparent;
    }
        .dd-container.dd-container-horizontal > .dd-item-spacer[drag-drop-view] {
            flex-direction: column;
            min-width: 0.5rem;
            transition: padding-left 200ms 50ms cubic-bezier(0, 0, 0.2, 1), 
                        padding-right 200ms 50ms cubic-bezier(0, 0, 0.2, 1), 
                        opacity 200ms 50ms cubic-bezier(0, 0, 0.2, 1);
        }
        .dd-container.dd-container-vertical > .dd-item-spacer[drag-drop-view] {
            flex-direction: row;
            min-height: 0.5rem;
            transition: padding-top 200ms 50ms cubic-bezier(0, 0, 0.2, 1), 
                        padding-bottom 200ms 50ms cubic-bezier(0, 0, 0.2, 1), 
                        opacity 200ms 50ms cubic-bezier(0, 0, 0.2, 1);
        }
    .dd-container > .dd-item-spacer-dragged-over[drag-drop-view] {
        opacity: 1;
    }
        .dd-container.dd-container-horizontal > .dd-item-spacer-dragged-over[drag-drop-view] {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        .dd-container.dd-container-vertical > .dd-item-spacer-dragged-over[drag-drop-view] {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }
    .dd-container > .dd-item-spacer > .dd-item-spacer-line[drag-drop-view] {
        width: 100%;
        height: 100%;
        background-color: var(--grey-dark-2);
    }
        .dd-container.dd-container-horizontal > .dd-item-spacer > .dd-item-spacer-line[drag-drop-view] {
            min-width: 0.125rem;
            max-width: 0.125rem;
        }
        .dd-container.dd-container-vertical > .dd-item-spacer > .dd-item-spacer-line[drag-drop-view] {
            min-height: 0.125rem;
            max-height: 0.125rem;
        }

.dd-container > .dd-in-progress > *[drag-drop-view] {
    pointer-events: none;
}
    .dd-container > .dd-in-progress[drag-drop-view]  * {
        pointer-events: none;
    }

.dd-container > .dd-item-container-drag-overlay-mode[drag-drop-view] {
    pointer-events: none;
    user-select: none;
}

    .dd-container > .dd-item-container-drag-overlay-mode > *[drag-drop-view] {
        pointer-events: none;
        user-select: none;
    }

    .dd-container > .dd-item-container-drag-overlay-mode[drag-drop-view]  * {
        pointer-events: none;
        user-select: none;
    }

.drag-overlay-container[drag-drop-view] {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    pointer-events: none;
}

    .drag-overlay-container.hidden[drag-drop-view] {
        display: none;
    }

    .drag-overlay-container > *[drag-drop-view] {
        opacity: 0.9;
        pointer-events: none;
    }

@keyframes blinker-drag-drop-view {
    50% {
        opacity: 0;
    }
}
/* /Views/Feedback/AddComment/AddComment.razor.rz.scp.css */
/* /Views/Feedback/Comment/Comment.razor.rz.scp.css */
.list-tags[feedback-comment-view] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

    .list-tags .tag[feedback-comment-view] {
        text-align: center;
        border-radius: 30px;
        padding: 0 10px;
    }
/* /Views/Feedback/Feedback/Feedback.razor.rz.scp.css */
/* 
    view-panel
*/

.panel .panel-preheader[feedback-view] {
    margin-bottom: 4px;
}

.panel .panel-header[feedback-view] {
    margin-bottom: 10px;
}

.panel .panel-item[feedback-view] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 4px;
}

    .panel .panel-item .card-header[feedback-view] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .panel .panel-item .card-header .btn-close[feedback-view] {
            display: inline-block;
            padding-left: 4px;
            cursor: pointer;
        }

            .panel .panel-item .card-header .btn-close:hover[feedback-view], .panel .panel-item .card-header .btn-close:focus[feedback-view] {
                color: var(--red);
            }

            .panel .panel-item .card-header .btn-close .icon[feedback-view] {
                width: 0.625em;
            }

        .panel .panel-item .card-header .menu .btn[feedback-view] {
            margin-left: 4px;
        }

.panel .btn--add[feedback-view] {
    margin-top: 10px;
    max-width: 100%;
    text-align: left;
    font-size: 0.875em;
    color: var(--green);
}

    .panel .btn--add:hover[feedback-view], .panel .btn--add:focus[feedback-view] {
        color: #ffffff;
    }

/** 5.2.1 Panel Card */
.panel--card[feedback-view] {
    color: var(--grey-3);
}

    .panel--card .card[feedback-view] {
        padding: 10px;
    }

        .panel--card .card .card-header[feedback-view] {
            margin-bottom: 10px;
        }

/** 5.2.2 Panel Dropdown */
.panel--dropdown[feedback-view] {
    color: var(--grey-3);
}

    .panel--dropdown .dropdown .dropdown-header .dropdown-label[feedback-view] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .panel--dropdown .dropdown .dropdown-header .dropdown-label .icon--left[feedback-view] {
            top: 0;
            margin: 0;
        }

    .panel--dropdown .dropdown .dropdown-header .dropdown-controls[feedback-view] {
        display: flex;
        gap: 4px;
        pointer-events: all;
    }

    .panel--dropdown .dropdown .dropdown-header .icon--left[feedback-view] {
        margin-right: 4px;
    }

    .panel--dropdown .dropdown .dropdown-header .flex[feedback-view] {
        display: flex;
        gap: 8px;
    }

    .panel--dropdown .dropdown .dropdown-header > *[feedback-view] {
        display: inline-block;
        pointer-events: none;
    }

    .panel--dropdown .card[feedback-view] {
        padding: 10px;
    }

        .panel--dropdown .card .card-header[feedback-view] {
            color: var(--grey-1);
        }

/*
    view-panel-feedback
*/

.panel-feedback[feedback-view] {
    padding: 5px;
    background: #ffffff;
    border-radius: 4px;
}

    .panel-feedback.panel .panel-header[feedback-view] {
        margin-bottom: 5px;
    }

    .panel-feedback .card[feedback-view] {
        border-radius: 4px;
    }

    .panel-feedback .comment[feedback-view] {
        margin-top: 10px;
    }

    .icon-left[feedback-view] {
        transform: rotate(-90deg) !important;
    }

.dropdown--expendable .dropdown-header .dropdown-controls .icon[feedback-view] {
    position: absolute;
    top: 14px;
    transform: translate(-50%, -50%);
    height: 1em;
}
/* /Views/Feedback/Tag/Tag.razor.rz.scp.css */
/*
    view-tag
*/

.tag[feedback-tag-view] {
    display: inline-block;
    color: var(--grey-3);
    font-size: 0.75rem;
    letter-spacing: 0.125em;
    line-height: var(--line-height);
    text-transform: uppercase;
    text-align: center;
    border-radius: 30px;
    padding: 0 10px;
}

    .tag.tag--primary[feedback-tag-view] {
        color: var(--green);
        background: var(--alpha-green-2);
        border: 1px solid var(--alpha-green-3);
    }

    .tag.tag--basic[feedback-tag-view] {
        font-size: 0.875rem;
        letter-spacing: 0;
        text-transform: none;
        background: var(--alpha-dark-1);
    }

        .tag.tag--basic.correct[feedback-tag-view] {
            border: 2px solid var(--green);
            color: var(--green);
            background: var(--alpha-green-2);
        }

        .tag.tag--basic.incorrect[feedback-tag-view] {
            border: 2px solid var(--red);
            color: var(--red);
            background: var(--alpha-red-2);
        }

    .tag.tag--ctrl[feedback-tag-view] {
        display: inline-flex;
        align-items: center;
        font-size: 0.875rem;
        letter-spacing: 0;
        text-transform: none;
        border: 1px solid var(--grey-light-3);
        background: var(--alpha-dark-1);
    }

        .tag.tag--ctrl .tag-close[feedback-tag-view] {
            margin-left: 8px;
            line-height: 0.5;
            cursor: pointer;
        }

            .tag.tag--ctrl .tag-close.disabled[feedback-tag-view] {
                display: none;
            }

            .tag.tag--ctrl .tag-close:hover[feedback-tag-view] {
                color: var(--red);
            }

            .tag.tag--ctrl .tag-close .icon[feedback-tag-view] {
                height: 0.75em;
            }

.layout--dark .tag.tag--basic[feedback-tag-view] {
    background: var(--alpha-light-1);
}

    .layout--dark .tag.tag--basic.correct[feedback-tag-view] {
        background: var(--alpha-green-2);
    }

    .layout--dark .tag.tag--basic.incorrect[feedback-tag-view] {
        background: var(--alpha-red-2);
    }

.layout--dark .tag.tag--ctrl[feedback-tag-view] {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

/*
    view-tag-feedback
*/

.tag--basic[feedback-tag-view] {
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    background: var(--alpha-dark-1);
}
/* /Views/Feedback/ToolsList/ToolsList.razor.rz.scp.css */
.list-tools[feedback-tools-list-view] {
    display: flex;
}

    .list-tools .item-tool[feedback-tools-list-view] {
        display: flex;
    }

    .list-tools .btn-tool.active[feedback-tools-list-view] {
        background: transparent !important;
        cursor: context-menu;
    }

    .list-tools .btn-tool .icon[feedback-tools-list-view] {
        width: 80%;
    }
/* /Views/FileUploadManager/FileUploadManager.razor.rz.scp.css */


.file-upload-manager[b-zcqo7j536y] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 12px;
}

.file-upload-manager-header[b-zcqo7j536y] {
    flex-shrink: 0;
    width: 100%;
}

.file-upload-manager-header-content[b-zcqo7j536y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .file-upload-manager-header-content[b-zcqo7j536y]  .btn {
        height: 40px !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.mobile-upload[b-zcqo7j536y] {
    display: flex;
    align-items: center;
}

    .mobile-upload[b-zcqo7j536y]  .btn {
        margin: 0;
    }

.file-upload-manager-body[b-zcqo7j536y] {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.file-upload-manager-body-content[b-zcqo7j536y] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding-right: 4px;
}

    .file-upload-manager-body-content[b-zcqo7j536y]  .thumbnail {
        flex: 0 0 auto;
    }
/* /Views/GraphDiscoverBox/StudentGraphDiscoverBox.razor.rz.scp.css */

/* /Views/Header/AdministratorHeader.razor.rz.scp.css */
.utility[administrator-header-view] {
    display: flex;
    gap: 8px;
}
/* /Views/IrreversibleActionAlert/IrreversibleActionAlert.razor.rz.scp.css */
.irreversible-action-alert[b-z370cl56s6] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000000;
    display: none;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

.content[b-z370cl56s6] {
    width: 400px;
    min-height: 200px;
    padding: 32px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 0 8px lightgray;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.affected-items[b-z370cl56s6] {
    margin: 20px 20px 0 20px;
}

    .affected-items > li[b-z370cl56s6] {
        list-style: disc;
    }

h4[b-z370cl56s6] {
    margin-bottom: 10px;
}

label[b-z370cl56s6] {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px
}

.label-bold[b-z370cl56s6] {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.4px;
}

.controls[b-z370cl56s6] {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.show[b-z370cl56s6] {
    display: flex;
}

.hide[b-z370cl56s6] {
    display: none;
}

.check-box-container[b-z370cl56s6] {
    display: flex;
    justify-content:flex-start;
    align-items: flex-start;
    margin: 15px 0 0 0;
}

    .check-box-container[b-z370cl56s6]  .checkmark {
        transform: translateY(10%) !important;
    }

    .check-box-container[b-z370cl56s6]  .field-check input {
        transform: translateY(10%) !important;
    }

.checkbox-title[b-z370cl56s6] {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
    color: var(--grey-3);
}
/* /Views/ListHeader/ListHeader.razor.rz.scp.css */
.list-main-header[students-list-view] {
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--alpha-dark-1);
    border-bottom: 1px solid var(--grey-light-3);
}

.list-main-header[students-list-view] .btn {
    margin-right: -8px;
}
/* /Views/MonthWeeks/MonthWeeks.razor.rz.scp.css */
/** 2.9 Field Month Weeks */
.field-month-weeks[b-3ch1rav215] {
	display: flex;
	background: #ffffff;
	border: 1px solid var(--grey-light-3);
	border-radius: 4px;
	overflow: hidden;
}

	.field-month-weeks .field-header[b-3ch1rav215],
	.field-month-weeks .field-body[b-3ch1rav215] {
		display: flex;
		padding: 8px 16px;
	}

	.field-month-weeks .field-header[b-3ch1rav215] {
		justify-content: center;
		width: 50px;
		border-right: 1px solid;
		border-color: inherit;
		background: var(--grey-light-1);
	}

	.field-month-weeks .field-body[b-3ch1rav215] {
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
	}

	.field-month-weeks .month-week[b-3ch1rav215] {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		font-size: 0.75em;
		font-weight: var(--font-weight);
		gap: 2px;
	}

		[b-3ch1rav215].field-month-weeks .month-week .field-check {
			padding: 0;
		}

			[b-3ch1rav215].field-month-weeks .month-week .field-check .checkmark {
				position: relative;
				display: block;
				top: 0;
				transform: none;
			}

.layout--dark .field-month-weeks[b-3ch1rav215] {
	border-color: var(--alpha-light-2);
	background: var(--grey-dark-4);
}

	.layout--dark .field-month-weeks .field-header[b-3ch1rav215] {
		background: var(--alpha-light-1);
	}

	.layout--dark .field-month-weeks .field-body[b-3ch1rav215] {
		background: var(--grey-dark-4);
	}
/* /Views/Pill/Views/Pill.razor.rz.scp.css */

.pill[b-d0csz9frk5] {
    /* Color variables definition */
    --p-green-5:   rgba(39, 191, 129, 0.05);
    --p-green-10:  rgba(39, 191, 129, 0.1);
    --p-green-30:  rgba(39, 191, 129, 0.3);
    --p-green-50:  rgba(39, 191, 129, 0.5);
    --p-green-100: rgba(39, 191, 129, 1);

    --p-orange-5:   rgba(235, 141, 42, 0.05);
    --p-orange-10:  rgba(235, 141, 42, 0.1);
    --p-orange-30:  rgba(235, 141, 42, 0.3);
    --p-orange-50:  rgba(235, 141, 42, 0.5);
    --p-orange-100: rgba(235, 141, 42, 1);

    --p-red-5:   rgba(229, 40, 60, 0.05);
    --p-red-10:  rgba(229, 40, 60, 0.1);
    --p-red-30:  rgba(229, 40, 60, 0.3);
    --p-red-50:  rgba(229, 40, 60, 0.5);
    --p-red-100: rgba(229, 40, 60, 1);

    --p-gray-50:  rgba(136, 136, 136, 0.5);
    --p-gray-100: rgba(136, 136, 136, 1);

    --p-gray164-50: rgba(164, 164, 164, 0.5);
    --p-gray164-100: rgba(164, 164, 164, 1);

    --p-gray246-100: rgba(246, 246, 246, 1);

    --p-dark-gray-50:  rgba(221, 221, 221, 0.5);
    --p-dark-gray-100: rgba(221, 221, 221, 1);

    --p-light-coal-100: rgba(81, 81, 81, 1);
    --p-coal-100: rgba(65, 65, 65, 1);

    --p-black-5:  rgba(0, 0, 0, 0.05);
    --p-black-10: rgba(0, 0, 0, 0.1);

    /* Properties */
    display: inline-flex;
    align-items: center;
    justify-content: inherit;
    overflow: hidden;
}
    .pill .pill-icons-container[b-d0csz9frk5] {
        display: inline-flex;
        align-items: center;
    }
    .pill .pill-text[b-d0csz9frk5] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;
    }
    .pill .pill-action .pill-dismiss-button[b-d0csz9frk5] {
        display: inline-flex;
        align-items: center;
        border: none;
        border-radius: 0.25rem;
        color: inherit;
        background-color: transparent;
        transition: background-color 0.3s, color 0.3s;
    }
    .pill .pill-tooltip[b-d0csz9frk5] {
        position: fixed;
        z-index: 50;
        width: fit-content;
        height: fit-content;
        display: none;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem;
        border: none;
        border-radius: 0.25rem;
        background-color: var(--grey-dark-3);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
        animation: pill-tooltip-display-b-d0csz9frk5 300ms forwards;
    }
        .pill .pill-tooltip.pill-tooltip-visible[b-d0csz9frk5] {
            display: flex;
        }

    @keyframes pill-tooltip-display-b-d0csz9frk5 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100;
        }
    }

    /* 'content' affects text size, icon size and styles */
    .pill.pill-content-sm[b-d0csz9frk5] {
        font-size: 0.5rem;
        font-weight: 400;
    }
        .pill.pill-content-sm .pill-text[b-d0csz9frk5] {
            max-width: 12rem;
            gap: 0.125rem;
        }
        .pill.pill-content-sm .pill-icons-container[b-d0csz9frk5]  svg {
            width: 0.5rem;
            height: 0.5rem;
        }
        .pill.pill-content-sm .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            padding: 0.125rem;
            margin-left: 0.125rem;
        }
            .pill.pill-content-sm .pill-action .pill-dismiss-button[b-d0csz9frk5]  svg {
                width: 0.375rem;
                height: 0.375rem;
            }
    .pill.pill-content-md[b-d0csz9frk5] {
        font-size: 0.75rem;
        font-weight: 400;
    }
        .pill.pill-content-md .pill-text[b-d0csz9frk5] {
            max-width: 16rem;
            gap: 0.25rem;
        }
        .pill.pill-content-md .pill-icons-container[b-d0csz9frk5]  svg {
            width: 1rem;
            height: 1rem;
        }
        .pill.pill-content-md .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            padding: 0.25rem;
            margin-left: 0.125rem;
        }
            .pill.pill-content-md .pill-action .pill-dismiss-button[b-d0csz9frk5]  svg {
                width: 0.5rem;
                height: 0.5rem;
            }
    .pill.pill-content-lg[b-d0csz9frk5] {
        font-size: 1rem;
        font-weight: 400;
    }
        .pill.pill-content-lg .pill-text[b-d0csz9frk5] {
            max-width: 20rem;
            gap: 0.375rem;
        }
        .pill.pill-content-lg .pill-icons-container[b-d0csz9frk5]  svg {
            width: 1.5rem;
            height: 1.5rem;
        }
        .pill.pill-content-lg .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            padding: 0.375rem;
            margin-left: 0.125rem;
        }
            .pill.pill-content-lg .pill-action .pill-dismiss-button[b-d0csz9frk5]  svg {
                width: 0.625rem;
                height: 0.625rem;
            }
    .pill.pill-content-inherit[b-d0csz9frk5] {
        font-size: inherit;
        font-weight: inherit;
    }
        .pill.pill-content-inherit .pill-text[b-d0csz9frk5] {
            /* Add children properties if required. */
        }
        .pill.pill-content-inherit .pill-icons-container[b-d0csz9frk5]  svg {
            /* Add children properties if required. */
        }
        .pill.pill-content-inherit .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            /* Add children properties if required. */
        }
            .pill.pill-content-inherit .pill-action .pill-dismiss-button[b-d0csz9frk5]  svg {
                /* Add children properties if required. */
            }

    /* 'layout' affects paddings, gaps and max-width */
    .pill.pill-layout-sm[b-d0csz9frk5] {
        width: max-content;
        max-width: 12rem;
        padding: 0.125rem 0.5rem;
        gap: 0.25rem;
    }
        .pill.pill-layout-sm .pill-icons-container[b-d0csz9frk5] {
            gap: 0.0625rem;
        }
    .pill.pill-layout-md[b-d0csz9frk5] {
        width: max-content;
        max-width: 16rem;
        padding: 0.125rem 0.5rem;
        gap: 0.375rem;
    }
        .pill.pill-layout-md .pill-icons-container[b-d0csz9frk5] {
            gap: 0.125rem;
        }
    .pill.pill-layout-lg[b-d0csz9frk5] {
        width: max-content;
        max-width: 20rem;
        padding: 0.125rem 0.5rem;
        gap: 0.5rem;
    }
        .pill.pill-layout-lg .pill-icons-container[b-d0csz9frk5] {
            gap: 0.25rem;
        }
    .pill.pill-layout-inherit[b-d0csz9frk5] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        padding: inherit;
        gap: inherit;
    }
        .pill.pill-layout-inherit .pill-icons-container[b-d0csz9frk5] {
            /* Add children properties if required. */
        }

    /* 'color' affects background color, border color, and display color of icons, text and action buttons */
    .pill.pill-color-default[b-d0csz9frk5] {
        background-color: var(--p-gray246-100);
        color: var(--p-gray164-100);
        border-color: var(--p-dark-gray-100);
    }
        .pill.pill-color-default .pill-text .pill-text-label[b-d0csz9frk5] {
            color: var(--p-gray-100);
        }
        .pill.pill-color-default .pill-text .pill-text-value[b-d0csz9frk5] {
            color: var(--p-coal-100);
        }
        .pill.pill-color-default .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            color: var(--p-gray164-50);
        }
            .pill.pill-color-default .pill-action .pill-dismiss-button:hover[b-d0csz9frk5] {
                color: var(--p-gray164-100);
                background-color: var(--p-dark-gray-50);
            }
    .pill.pill-color-green[b-d0csz9frk5] {
        background-color: var(--p-green-5);
        color: var(--p-green-100);
        border-color: var(--p-green-30);
    }
        .pill.pill-color-green .pill-text .pill-text-label[b-d0csz9frk5] {
            color: var(--p-green-30);
        }
        .pill.pill-color-green .pill-text .pill-text-value[b-d0csz9frk5] {
            color: inherit; /* NOTE: Define complementary color if needed. */
        }
        .pill.pill-color-green .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            color: var(--p-green-50);
        }
            .pill.pill-color-green .pill-action .pill-dismiss-button:hover[b-d0csz9frk5] {
                color: var(--p-green-100);
                background-color: var(--p-green-10);
            }
    .pill.pill-color-orange[b-d0csz9frk5] {
        background-color: var(--p-orange-5);
        color: var(--p-orange-100);
        border-color: var(--p-orange-30);
    }
        .pill.pill-color-orange .pill-text .pill-text-label[b-d0csz9frk5] {
            color: var(--p-orange-30);
        }
        .pill.pill-color-orange .pill-text .pill-text-value[b-d0csz9frk5] {
            color: inherit; /* NOTE: Define complementary color if needed. */
        }
        .pill.pill-color-orange .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            color: var(--p-orange-50);
        }
            .pill.pill-color-orange .pill-action .pill-dismiss-button:hover[b-d0csz9frk5] {
                color: var(--p-orange-100);
                background-color: var(--p-orange-10);
            }
    .pill.pill-color-red[b-d0csz9frk5] {
        background-color: var(--p-red-5);
        color: var(--p-red-100);
        border-color: var(--p-red-30);
    }
        .pill.pill-color-red .pill-text .pill-text-label[b-d0csz9frk5] {
            color: var(--p-red-30);
        }
        .pill.pill-color-red .pill-text .pill-text-value[b-d0csz9frk5] {
            color: inherit; /* NOTE: Define complementary color if needed. */
        }
        .pill.pill-color-red .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            color: var(--p-red-50);
        }
            .pill.pill-color-red .pill-action .pill-dismiss-button:hover[b-d0csz9frk5] {
                color: var(--p-red-100);
                background-color: var(--p-red-10);
            }
    .pill.pill-color-gray[b-d0csz9frk5] {
        background-color: var(--p-dark-gray-100);
        color: var(--p-light-coal-100);
        border-color: var(--p-black-10);
    }
        .pill.pill-color-gray .pill-text .pill-text-label[b-d0csz9frk5] {
            color: var(--p-black-10);
        }
        .pill.pill-color-gray .pill-text .pill-text-value[b-d0csz9frk5] {
            color: inherit; /* NOTE: Define complementary color if needed. */
        }
        .pill.pill-color-gray .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            color: var(--p-gray-50);
        }
            .pill.pill-color-gray .pill-action .pill-dismiss-button:hover[b-d0csz9frk5] {
                color: var(--p-gray-100);
                background-color: var(--p-black-10);
            }
    .pill.pill-color-inherit[b-d0csz9frk5] {
        background-color: inherit;
        color: inherit;
        border-color: inherit;
    }
        .pill.pill-color-inherit .pill-text .pill-text-label[b-d0csz9frk5] {
            color: inherit;
        }
        .pill.pill-color-inherit .pill-text .pill-text-value[b-d0csz9frk5] {
            color: inherit;
        }
        .pill.pill-color-inherit .pill-action .pill-dismiss-button[b-d0csz9frk5] {
            color: inherit;
        }
            .pill.pill-color-inherit .pill-action .pill-dismiss-button:hover[b-d0csz9frk5] {
                /* Add children properties if required. */
            }

    /* variants: rounded (pill shape) / square (badge shape) */
    .pill.pill-rounded[b-d0csz9frk5] {
        border-radius: 1.25rem;
    }
    .pill.pill-square[b-d0csz9frk5] {
        border-radius: 0.25rem;
    }

    /* 'border' affects border properties */
    .pill.pill-border[b-d0csz9frk5] {
        border-width: 0.85px;
        border-style: solid;
    }
    .pill.pill-no-border[b-d0csz9frk5] {
        border: none;
    }

    /* 'shadow' affects box-shadow properties */
    .pill.pill-shadowed[b-d0csz9frk5] {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    }
        .pill.pill-shadowed.pill-hoverable:hover[b-d0csz9frk5] {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.09);
        }
    .pill.pill-non-shadowed[b-d0csz9frk5] {
        box-shadow: none;
    }
        .pill.pill-non-shadowed.pill-hoverable:hover[b-d0csz9frk5] {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
        }

    /* 'clickable' affects cursor properties */
    .pill.pill-clickable[b-d0csz9frk5] {
        cursor: pointer;
    }
    .pill.pill-non-clickable[b-d0csz9frk5] {
        cursor: inherit;
    }

    /* 'enabled / disabled' */
    .pill.pill-enabled[b-d0csz9frk5] {
        /* Add properties if required. */
    }
    .pill.pill-disabled[b-d0csz9frk5] {
        cursor: default;
    }


/* TODO: Adjust and add missing pill color definitions. */

.pill.pill-color-white[b-d0csz9frk5] {
    background-color: white;
    color: var(--p-gray164-100);
    border-color: var(--p-dark-gray-100);
}
.pill.pill-color-purple[b-d0csz9frk5] {
    background-color: rgba(174, 71, 255, 1);
    color: rgba(50, 50, 50, 1);
    border-color: white;
}
.pill.pill-color-yellow[b-d0csz9frk5] {
    background-color: rgba(228, 202, 57, 1);
    color: rgba(50, 50, 50, 1);
    border-color: white;
}
.pill.pill-color-dark-orange[b-d0csz9frk5] {
    background-color: rgba(235, 141, 42, 1);
    color: rgba(50, 50, 50, 1);
    border-color: white;
}
.pill.pill-color-blue[b-d0csz9frk5] {
    background-color: rgba(0, 162, 255, 1);
    color: rgba(50, 50, 50, 1);
    border-color: white;
}
/* /Views/Pill/Views/PillGroup.razor.rz.scp.css */
.pill-group.inline-styling[b-e5749eg8h2] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    user-select: none;
}

.pill-group.no-styling[b-e5749eg8h2] {
    /* NOTE: Intentionally left empty. */
}
/* /Views/Pill/Views/PillIcon.razor.rz.scp.css */
.pill-icon[b-swzz2n54ll] {
    display: inline-flex;
}

.pill-icon.pill-icon-color-inherit[b-swzz2n54ll] {
    color: inherit;
}

.pill-icon.pill-icon-color-yellow[b-swzz2n54ll] {
    color: rgba(228, 202, 57, 1);
}

.pill-icon.pill-icon-color-purple[b-swzz2n54ll] {
    color: rgba(174, 71, 255, 1);
}

.pill-icon.pill-icon-color-orange[b-swzz2n54ll] {
    color: rgba(235, 141, 42, 1);
}

.pill-icon.pill-icon-color-blue[b-swzz2n54ll] {
    color: rgba(0, 162, 255, 1);
}

.pill-icon.pill-icon-color-dark-gray[b-swzz2n54ll] {
    color: rgba(97, 97, 97, 1);
}

.pill-icon.pill-icon-color-light-black[b-swzz2n54ll] {
    color: rgba(50, 50, 50, 1);
}

.pill-icon.pill-icon-color-gray3[b-swzz2n54ll] {
    color: rgba(136, 136, 136, 1);
}
/* /Views/Rating/Views/Rating.razor.rz.scp.css */
.rating-container[b-s1g65hj4we] {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--grey-light-3);
    border-radius: 0.25rem;
}
    .rating-container:focus-visible[b-s1g65hj4we] {
        outline: none;
    }
    .rating-container:not(.rating-container-disabled)[b-s1g65hj4we] {
        color: var(--green);
        background-color: transparent;
    }

.rating-container-disabled[b-s1g65hj4we] {
    color: var(--grey-3);
    background-color: rgba(0, 0, 0, 0.05);
}
/* /Views/Rating/Views/RatingItem.razor.rz.scp.css */
.rating-item[b-hwwt4d7ovt] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
    .rating-item:hover[b-hwwt4d7ovt] {
        transform: scale(1.2);
    }

    .rating-item.rating-item-disabled[b-hwwt4d7ovt],
    .rating-item.rating-item-disabled:hover[b-hwwt4d7ovt] {
        cursor: default;
        pointer-events: none;
    }

    .rating-item.rating-item-readonly[b-hwwt4d7ovt] {
        cursor: default;
        pointer-events: none;
    }

    .rating-item .rating-item-input[b-hwwt4d7ovt] {
        position: absolute;
        margin: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        z-index: 1;
        clip: rect(0, 0, 0, 0);
        cursor: inherit;
    }
    .rating-item svg[b-hwwt4d7ovt] {
        pointer-events: none;
    }
        .rating-item svg path[b-hwwt4d7ovt] {
            pointer-events: none;
        }
/* /Views/ScheduleRoomButton/ScheduleRoomButton.razor.rz.scp.css */

.schedule-build-block[schedule-room-button-view] {
    position: relative;
    background: transparent;
    width: 36px;
    border-radius: 4px;
    flex-shrink: 0;
}

    .schedule-build-block.size--lg[schedule-room-button-view] {
        width: 43px;
    }

    .schedule-build-block .block-btn[schedule-room-button-view] {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: inherit;
        border: 1px solid currentColor;
        line-height: 1.2;
        overflow: hidden;
        cursor: pointer;
    }

        .schedule-build-block .block-btn[schedule-room-button-view]::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            background: currentColor;
            transition: all var(--transition-duration) ease 0s;
            opacity: 0.1;
        }

        .schedule-build-block .block-btn .btn-label[schedule-room-button-view] {
            flex: 1 1 auto;
            position: relative;
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 20px;
            z-index: 1;
        }

        .schedule-build-block .block-btn.type--select[schedule-room-button-view] {
            border-color: var(--grey-light-3);
        }

            .schedule-build-block .block-btn.type--select[schedule-room-button-view]::before {
                opacity: 0;
            }

        .schedule-build-block .block-btn.state--active[schedule-room-button-view]::before, 
        .schedule-build-block .block-btn:hover[schedule-room-button-view]::before {
            opacity: 1;
        }

        .schedule-build-block .block-btn.state--active .btn-label[schedule-room-button-view], 
        .schedule-build-block .block-btn:hover .btn-label[schedule-room-button-view] {
            color: #ffffff;
        }

        .schedule-build-block .block-btn.state--used[schedule-room-button-view] {
            color: var(--red);
        }

        .schedule-build-block .block-btn.state--capacity[schedule-room-button-view], 
        .schedule-build-block .block-btn.state--selected[schedule-room-button-view], 
        .schedule-build-block .block-btn.state--used[schedule-room-button-view] {
            border-color: currentColor;
        }
            .schedule-build-block .block-btn.state--capacity.state--readonly[schedule-room-button-view]::before, 
            .schedule-build-block .block-btn.state--selected.state--readonly[schedule-room-button-view]::before, 
            .schedule-build-block .block-btn.state--used.state--readonly[schedule-room-button-view]::before {
                content: "";
            }

            .schedule-build-block .block-btn.state--capacity[schedule-room-button-view]::before, 
            .schedule-build-block .block-btn.state--selected[schedule-room-button-view]::before, 
            .schedule-build-block .block-btn.state--used[schedule-room-button-view]::before {
                opacity: 1;
            }

            .schedule-build-block .block-btn.state--capacity .btn-label[schedule-room-button-view], 
            .schedule-build-block .block-btn.state--selected .btn-label[schedule-room-button-view], 
            .schedule-build-block .block-btn.state--used .btn-label[schedule-room-button-view] {
                color: #ffffff;
            }

        .schedule-build-block .block-btn.state--capacity[schedule-room-button-view] {
            color: var(--orange);
        }

        .schedule-build-block .block-btn.state--selected[schedule-room-button-view] {
            color: var(--green);
        }

        .schedule-build-block .block-btn.state--disabled[schedule-room-button-view] {
            opacity: 0.5;
            border: none;
            color: var(--grey-3);
            pointer-events: none;
        }

            .schedule-build-block .block-btn.state--disabled[schedule-room-button-view]::before {
                content: none;
            }

        .schedule-build-block .block-btn.state--readonly[schedule-room-button-view] {
            pointer-events: none;
        }

            .schedule-build-block .block-btn.state--readonly[schedule-room-button-view]::before {
                content: none;
            }

.layout--dark .schedule-build-block[schedule-room-button-view] {
    color: var(--grey-light-1);
}

    .layout--dark .schedule-build-block .block-btn.type--select[schedule-room-button-view] {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .schedule-build-block .block-btn.state--active .btn-label[schedule-room-button-view], 
    .layout--dark .schedule-build-block .block-btn:hover .btn-label[schedule-room-button-view] {
        color: var(--grey-dark-4);
    }

    .layout--dark .schedule-build-block .block-btn.state--capacity[schedule-room-button-view], 
    .layout--dark .schedule-build-block .block-btn.state--selected[schedule-room-button-view], 
    .layout--dark .schedule-build-block .block-btn.state--used[schedule-room-button-view] {
        border-color: currentColor;
    }

        .layout--dark .schedule-build-block .block-btn.state--capacity .btn-label[schedule-room-button-view], 
        .layout--dark .schedule-build-block .block-btn.state--selected .btn-label[schedule-room-button-view], 
        .layout--dark .schedule-build-block .block-btn.state--used .btn-label[schedule-room-button-view] {
            color: #ffffff;
        }

    .layout--dark .schedule-build-block .block-tag span[schedule-room-button-view] {
        color: var(--grey-dark-4);
    }
/* /Views/SchoolSubject/View/SchoolSubject.razor.rz.scp.css */
.school-subject[school-subject-view] {
    display: flex;
    flex-flow: column;
}

[school-subject-view] .checkbox-group:first-child .items {
    border-radius: initial;
    border: initial;
}

    [school-subject-view] .checkbox-group:first-child .items .item {
        width: fit-content;
        padding: 4px 0;
        border-bottom: initial;
        background: transparent;
    }

[school-subject-view] .checkbox-group:first-child .selected-count {
    display: none;
}
/* /Views/StudentClassTile/StudentClassTile.razor.rz.scp.css */

/* /Views/StudentsList/Student/Student.razor.rz.scp.css */
/* /Views/StudentsList/StudentsList/StudentsList.razor.rz.scp.css */
.list-students[students-list-view] {
    display: flex;
    flex-direction: column;
}

    .list-students .list-main[students-list-view] {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        overflow: hidden;
    }

    .list-students .list-main-header .field-check[students-list-view],
    .list-students .item-student .field-check[students-list-view] {
        padding-left: calc(1em + 16px);
        margin-bottom: 0;
    }

    .list-students .list-main-header[students-list-view] {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--alpha-dark-1);
        border-bottom: 1px solid var(--grey-light-3);
    }

        .list-students .list-main-header .btn[students-list-view] {
            margin-right: -8px;
        }

    .list-students .list[students-list-view] {
        flex: 1 1 auto;
        padding: 0 8px;
    }

        .list-students .list .item[students-list-view] {
            padding: 8px 0;
        }

            .list-students .list .item:not(:last-of-type)[students-list-view] {
                border-bottom: 1px solid var(--alpha-dark-1);
            }

    .list-students .item-student[students-list-view] {
        padding: 4px 8px;
        border-radius: 4px;
        transition: all var(--transition-duration) ease 0s;
    }

        .list-students .item-student:hover[students-list-view], .list-students .item-student:focus[students-list-view] {
            background: var(--alpha-dark-1);
        }

        .list-students .item-student .student[students-list-view] {
            padding-top: 2px;
            line-height: 1;
        }

            .list-students .item-student .student .name[students-list-view] {
                margin-bottom: 4px;
            }

        .list-students .item-student .field-check .checkmark[students-list-view] {
            top: 0.2em;
            transform: none;
        }

    .list-students .list-footer > *[students-list-view] {
        margin-top: 4px;
    }

.layout--light .list-students .list-main-header[students-list-view] {
    background: var(--grey-light-1);
}

.layout--dark .list-students .list-main[students-list-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .list-students .list-main-header[students-list-view] {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
}

.layout--dark .list .item:not(:last-of-type)[students-list-view] {
    border-color: var(--alpha-light-1);
}

.layout--dark .item-student:hover[students-list-view], .layout--dark .item-student:focus[students-list-view] {
    background: var(--alpha-light-1);
}

[students-list-view] .students-list-spinner {
    min-height: 164px !important;
}
/* /Views/TeacherClassTile/TeacherClassTile.razor.rz.scp.css */

/* /Views/Title/Title.razor.rz.scp.css */
/* /Views/WorkAvailability/Day/View/Day.razor.rz.scp.css */
.day[work-availability-day-view] {
    display: flex;
    flex-flow: column;
    gap: 10px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--grey-light-4);
    background: var(--grey-light-1);
    padding: 10px;
    min-height: 60px;
}

.header[work-availability-day-view] {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.readonly[work-availability-day-view] {
    min-height: 40px;
    background: transparent !important;
}

    .readonly .header[work-availability-day-view] {
        align-items: initial;
    }

.name[work-availability-day-view] {
    color: var(--grey-dark-3);
    font-family: var(--font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.day.readonly .name[work-availability-day-view] {
    font-size: 16px;
}

.availability[work-availability-day-view] {
    display: flex;
    flex-flow: column;
    gap: 10px;
}

    .availability[work-availability-day-view], .availability span[work-availability-day-view] {
        color: var(--grey-3);
        font-family: var(--font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 16.8px;
    }

[work-availability-day-view] .field-menu.menu--dropdown {
    min-width: 181px;
}
/* /Views/WorkAvailability/View/WorkAvailability.razor.rz.scp.css */
.work-availability[work-availability-view] {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 4px;
}

.title[work-availability-view] {
    color: var(--grey-3);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 16.8px;
}
/* /Views/WorkAvailability/WorkingPeriod/View/WorkingPeriod.razor.rz.scp.css */
.working-period[work-availability-working-period-view] {
    display: flex;
    flex-flow: row;
    gap: 8px;
    align-items: center;
}

[work-availability-working-period-view] .time-input {
    width: 100%;
    text-transform: capitalize;
}

[work-availability-working-period-view] .menu.menu--more .menu-header .btn {
    transform: translateY(-4px) !important;
}

[work-availability-working-period-view] .menu .field-option-disabled {
    color: var(--grey-1) !important;
}