.navbar-brand .material-icons {
    font-size: 22px;
}

@media (min-width: 992px) {
    .layout-default .navbar-brand {
        min-width: 184px;
    }

    .layout-default .mdk-drawer[data-persistent],
    .layout-default .mdk-drawer-layout .mdk-drawer[data-persistent],
    .layout-default .mdk-drawer__content {
        width: 190px;
    }

    [dir] .layout-default .sidebar-p-a {
        padding: .75rem;
    }

    [dir] .layout-default .sidebar-p-t {
        padding-top: .65rem;
    }

    [dir] .layout-default .sidebar-menu {
        margin-bottom: .35rem;
    }

    [dir] .layout-default .sidebar-heading {
        margin-bottom: .35rem;
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .layout-default .sidebar-heading {
        font-size: .7rem;
    }

    [dir] .layout-default .sidebar-menu-button {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .layout-default .sidebar-menu-button {
        font-size: .875rem;
        line-height: 36px;
    }

    .layout-default .sidebar-menu-icon {
        font-size: 21px;
    }

    [dir=ltr] .layout-default .sidebar-menu-icon--left {
        margin-right: .5rem;
    }

    body.classmanager-class-focus #default-drawer,
    body.classmanager-project-focus #default-drawer {
        display: none;
    }

    body.classmanager-class-focus .mdk-drawer-layout__content,
    body.classmanager-project-focus .mdk-drawer-layout__content {
        margin-left: 0 !important;
    }

    body.classmanager-class-focus .layout-default .navbar-brand,
    body.classmanager-class-focus .navbar-brand,
    body.classmanager-project-focus .layout-default .navbar-brand,
    body.classmanager-project-focus .navbar-brand {
        min-width: auto;
    }
}

.sidebar-menu-button[href="#"] {
    cursor: default;
}

#default-drawer .sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.classmanager-mobile-account {
    border-top: 1px solid #edf0f5;
    margin-top: auto;
    padding: 1rem;
}

.classmanager-mobile-account__summary {
    align-items: center;
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
    min-width: 0;
}

.classmanager-mobile-account__text {
    display: block;
    line-height: 1.25;
    min-width: 0;
}

.classmanager-mobile-account__text strong,
.classmanager-mobile-account__text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classmanager-mobile-account__text strong {
    color: #272c33;
    font-size: .875rem;
}

.classmanager-mobile-account__text small {
    color: #6c757d;
    font-size: .75rem;
}

[dir] .classmanager-mobile-account__logout {
    border-radius: 6px;
    padding-left: .5rem;
    padding-right: .5rem;
}

.classmanager-mobile-account__logout {
    color: #384e68;
    line-height: 36px;
}

.classmanager-mobile-account__logout:hover {
    background: #f5f7fa;
    color: #272c33;
    text-decoration: none;
}

.accounts-heading {
    align-items: flex-start;
}

.accounts-heading__copy p {
    color: #55657e;
    margin: .4rem 0 0;
}

.accounts-card {
    border-color: #dfe7f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.accounts-users-card .card-header {
    gap: .75rem;
}

.accounts-users-card .btn .material-icons,
.accounts-modal .btn .material-icons {
    vertical-align: middle;
}

.accounts-admin-layout {
    align-items: flex-start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.accounts-users-card {
    min-width: 0;
}

.accounts-table {
    min-width: 920px;
}

.accounts-table th {
    color: #5b6d86;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.accounts-table td {
    vertical-align: middle;
}

.accounts-user-cell {
    align-items: center;
    display: flex;
    gap: .65rem;
    white-space: nowrap;
}

.accounts-side {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.accounts-form {
    display: grid;
    gap: .85rem;
}

.accounts-form label {
    display: grid;
    gap: .35rem;
    margin-bottom: 0;
}

.accounts-form label span {
    color: #42556e;
    font-size: .8125rem;
    font-weight: 600;
}

.accounts-email-form {
    align-items: end;
    background: #f8fafc;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem;
}

.accounts-email-form label {
    display: grid;
    gap: .35rem;
}

.accounts-email-form label span {
    color: #42556e;
    font-size: .8125rem;
    font-weight: 600;
}

.accounts-selected {
    align-items: center;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.accounts-selected__avatar,
.accounts-profile-hero__avatar {
    align-items: center;
    background: #e8e7ff;
    border-radius: 50%;
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 800;
    justify-content: center;
}

.accounts-selected__avatar {
    font-size: 1.25rem;
    height: 72px;
    width: 72px;
}

.accounts-selected h5 {
    color: #10163a;
    font-size: 1rem;
    margin-bottom: .15rem;
}

.accounts-selected p {
    color: #6b7c93;
    margin-bottom: .45rem;
}

.accounts-detail-list,
.accounts-info-list {
    border: 1px solid #edf0f5;
    border-radius: 8px;
    display: grid;
    overflow: hidden;
}

.accounts-detail-list {
    margin-top: 1rem;
}

.accounts-detail-list span,
.accounts-info-list span {
    align-items: center;
    color: #42556e;
    display: grid;
    gap: .75rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 0;
    padding: .75rem .9rem;
    overflow-wrap: anywhere;
}

.accounts-info-list span {
    grid-template-columns: 34px 170px minmax(0, 1fr);
}

.accounts-detail-list span + span,
.accounts-info-list span + span {
    border-top: 1px solid #edf0f5;
}

.accounts-detail-list .material-icons,
.accounts-info-list .material-icons {
    align-items: center;
    background: #eef4ff;
    border-radius: 8px;
    color: #536a8b;
    display: inline-flex;
    font-size: 19px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.accounts-info-list strong {
    color: #536a8b;
    font-size: .8125rem;
}

.accounts-profile-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}

.accounts-profile-hero {
    grid-column: 1 / -1;
}

.accounts-profile-hero .card-body {
    align-items: center;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: auto minmax(180px, .5fr) minmax(0, 1fr);
}

.accounts-profile-hero__avatar {
    font-size: 2.25rem;
    height: 118px;
    width: 118px;
}

.accounts-profile-hero__main h2 {
    color: #10163a;
    font-size: 1.6rem;
    margin-bottom: .5rem;
}

.accounts-profile-hero__meta {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accounts-profile-hero__meta span {
    border-left: 1px solid #dfe7f2;
    color: #42556e;
    display: grid;
    gap: .2rem .75rem;
    grid-template-columns: 34px minmax(0, 1fr);
    padding-left: 1.25rem;
    overflow-wrap: anywhere;
}

.accounts-profile-hero__meta .material-icons {
    align-items: center;
    background: #eef4ff;
    border-radius: 8px;
    color: #536a8b;
    display: inline-flex;
    font-size: 19px;
    grid-row: 1 / span 2;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.accounts-profile-hero__meta strong {
    color: #536a8b;
    font-size: .8125rem;
}

@media (max-width: 1199.98px) {
    .accounts-admin-layout,
    .accounts-profile-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .accounts-email-form {
        grid-template-columns: 1fr;
    }

    .accounts-email-form .btn {
        width: 100%;
    }

    .accounts-users-card .card-header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .accounts-users-card .card-header .btn {
        margin-left: 0 !important;
        width: 100%;
    }

    .accounts-side {
        grid-template-columns: 1fr;
    }

    .accounts-profile-hero .card-body,
    .accounts-profile-hero__meta {
        grid-template-columns: 1fr;
    }

    .accounts-profile-hero .card-body {
        justify-items: flex-start;
    }

    .accounts-profile-hero__meta span {
        border-left: 0;
        border-top: 1px solid #dfe7f2;
        padding-left: 0;
        padding-top: 1rem;
        width: 100%;
    }

    .accounts-info-list span {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .accounts-info-list strong {
        grid-column: 2;
    }
}

.card-header-tabs-basic a {
    white-space: nowrap;
}

.modal.show {
    align-items: center;
    display: flex !important;
    justify-content: center;
    padding: 1.5rem !important;
}

[dir] .modal.show .modal-dialog {
    margin: 0 auto;
}

.modal.show .modal-dialog {
    max-height: calc(100vh - 3rem);
    width: 100%;
}

.modal.show .modal-content {
    max-height: calc(100vh - 3rem);
}

.modal.show .modal-body {
    overflow-y: auto;
}

.modal.show .modal-dialog-centered {
    min-height: 0;
}

.modal.show .modal-dialog-centered::before {
    display: none;
}

.classmanager-summary .card-body {
    min-height: 104px;
}

.classmanager-summary-icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.classmanager-summary-icon .material-icons {
    font-size: 22px;
}

.classmanager-table {
    min-width: 920px;
}

.classmanager-task-load-table {
    min-width: 720px;
}

.classmanager-records-table {
    min-width: 780px;
}

.classmanager-table th {
    color: #6c757d;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

.classmanager-table td {
    vertical-align: middle;
}

.classmanager-title-link {
    color: #272c33;
    display: inline-block;
    font-weight: 600;
    max-width: 240px;
    overflow-wrap: anywhere;
}

.classmanager-title-link:hover {
    color: #308af3;
    text-decoration: none;
}

.classmanager-week-link {
    display: inline-block;
}

.classmanager-week-link:hover {
    text-decoration: none;
}

.classmanager-task-ratio {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.classmanager-task-ratio-completed {
    color: #22c55e;
}

.classmanager-task-ratio-divider {
    color: #9aa6b2;
    padding: 0 .15rem;
}

.classmanager-task-ratio-total {
    color: #f59e0b;
}

.classmanager-money-ratio {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.classmanager-money-ratio-deposit {
    color: #d97706;
}

.classmanager-money-ratio-divider {
    color: #9aa6b2;
    padding: 0 .15rem;
}

.classmanager-money-ratio-total {
    color: #2563eb;
}

.classmanager-icon-action {
    align-items: center;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.classmanager-week-card {
    position: sticky;
    top: 84px;
}

body.classmanager-class-focus .page__heading-container,
body.classmanager-class-focus .page__container {
    max-width: none;
}

body.classmanager-class-focus .page__container {
    padding-left: 1rem;
    padding-right: 1rem;
}

body.classmanager-class-focus .page__heading-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

body.classmanager-project-tab-active .page__heading-container {
    display: none;
}

.classmanager-week-content-card {
    min-height: 420px;
}

@media (min-width: 992px) {
    [dir] .classmanager-week-workspace {
        margin-left: 0;
        margin-right: 0;
    }

    .classmanager-week-tabs-col {
        flex: 0 0 200px;
        max-width: 200px;
    }

    .classmanager-week-content-col {
        flex: 1 1 0;
        max-width: calc(100% - 200px);
    }

    [dir] .classmanager-week-tabs-col,
    [dir] .classmanager-week-content-col {
        padding-left: 0;
        padding-right: 0;
    }

    [dir] .classmanager-week-card {
        border-right: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    [dir] .classmanager-week-content-card {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
}

.classmanager-week-list .list-group-item {
    border-left: 0;
    border-right: 0;
    padding: .75rem .85rem;
}

.classmanager-week-list .list-group-item:first-child {
    border-top: 0;
}

.classmanager-week-list .avatar-title .material-icons {
    font-size: 17px;
}

.classmanager-syllabus-card .card-header {
    gap: .75rem;
}

.classmanager-syllabus-upload {
    flex: 0 0 auto;
}

.classmanager-syllabus-file-card {
    align-items: center;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 1rem;
}

.classmanager-syllabus-file-icon {
    align-items: center;
    background: #dc2626;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.classmanager-syllabus-file-icon strong {
    font-size: .75rem;
    line-height: 1;
}

.classmanager-syllabus-file-main {
    min-width: 0;
}

.classmanager-syllabus-file-main h5 {
    color: #111827;
    font-size: .95rem;
    margin-bottom: .35rem;
    overflow-wrap: anywhere;
}

.classmanager-syllabus-file-main p {
    color: #42556e;
    margin-bottom: .75rem;
}

.classmanager-syllabus-meta {
    color: #6b7c93;
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    gap: .55rem 1rem;
}

.classmanager-syllabus-meta span {
    align-items: center;
    display: inline-flex;
    gap: .25rem;
}

.classmanager-syllabus-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.classmanager-syllabus-empty {
    align-items: center;
    border: 1px dashed #dbe3ef;
    border-radius: 8px;
    color: #6b7c93;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    min-height: 220px;
    padding: 1.5rem;
    text-align: center;
}

.classmanager-syllabus-empty .material-icons {
    color: #5567ff;
    font-size: 38px;
}

.classmanager-syllabus-empty strong {
    color: #111827;
}

.classmanager-course-materials {
    border-top: 1px solid #edf0f5;
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.classmanager-course-materials-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.classmanager-course-materials-header h5 {
    color: #111827;
    font-size: 1rem;
    margin-bottom: .2rem;
}

.classmanager-course-material-form {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(160px, 1fr) minmax(190px, 1fr) auto;
}

.classmanager-course-material-form .form-control {
    min-height: 36px;
}

.classmanager-course-material-list {
    display: grid;
    gap: .85rem;
}

.classmanager-course-material-card {
    background: #fbfdff;
}

.classmanager-course-material-icon {
    background: #2563eb;
}

.classmanager-course-materials-empty {
    border: 1px dashed #dbe3ef;
    border-radius: 8px;
    color: #6b7c93;
    padding: 1rem;
    text-align: center;
}

.classmanager-task-card {
    border-radius: 6px;
    margin-bottom: 1rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

[dir] .card.classmanager-task-card-submitted {
    background-color: #f8fbff;
    border-color: #bfdbfe;
    box-shadow: inset 4px 0 0 #3b82f6;
}

[dir] .card.classmanager-task-card-complete {
    background-color: #f6fef9;
    border-color: #86efac;
    box-shadow: inset 4px 0 0 #22c55e;
}

.classmanager-task-card:last-child {
    margin-bottom: 0;
}

.classmanager-week-header-actions {
    gap: .35rem;
}

.classmanager-delete-toggle,
.classmanager-icon-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.classmanager-delete-toggle,
.classmanager-icon-action.btn-sm {
    min-width: 34px;
    padding-left: .45rem;
    padding-right: .45rem;
}

.classmanager-delete-control {
    display: none !important;
}

body.classmanager-delete-mode .classmanager-delete-control {
    display: inline-flex !important;
}

body.classmanager-delete-mode .classmanager-delete-toggle {
    background-color: #fef2f2;
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.classmanager-task-icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.classmanager-task-icon .material-icons {
    font-size: 22px;
}

.classmanager-task-tabs {
    border: 1px solid #edf0f5;
    border-radius: 8px;
    overflow: hidden;
}

.classmanager-task-inner-tabs {
    background: #fbfdff;
    border-bottom: 1px solid #edf0f5;
    padding: 0 .75rem;
}

.classmanager-task-inner-tabs .nav-link {
    align-items: center;
    border: 0;
    color: #6b7c93;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: .25rem;
    min-height: 46px;
}

.classmanager-task-inner-tabs .nav-link.active {
    background: transparent;
    border-bottom: 2px solid #5567ff;
    color: #5567ff;
}

.classmanager-task-tab-content {
    background: #fff;
    padding: 1rem;
}

.classmanager-submission-empty {
    align-items: center;
    border: 1px dashed #dbe3ef;
    border-radius: 8px;
    color: #6b7c93;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    min-height: 150px;
    padding: 1rem;
    text-align: center;
}

.classmanager-submission-empty .material-icons {
    color: #94a3b8;
    font-size: 32px;
}

.classmanager-submission-empty strong {
    color: #24324a;
}

.classmanager-rich-text p:last-child,
.classmanager-rich-text ol:last-child,
.classmanager-rich-text ul:last-child,
.classmanager-rich-text blockquote:last-child {
    margin-bottom: 0;
}

.classmanager-rich-text ol,
.classmanager-rich-text ul {
    margin-bottom: .75rem;
    padding-left: 1.5rem;
}

.classmanager-rich-text blockquote {
    border-left: 3px solid #dbe3ef;
    color: #42556e;
    margin: .75rem 0;
    padding-left: .85rem;
}

.classmanager-instructions-row {
    gap: .75rem;
}

.classmanager-task-instructions-scroll {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    max-height: 260px;
    min-height: 72px;
    min-width: 0;
    overflow-y: auto;
    padding: .9rem 1rem;
    scrollbar-gutter: stable;
}

.classmanager-task-instructions-scroll::-webkit-scrollbar {
    width: 10px;
}

.classmanager-task-instructions-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 2px solid #fff;
    border-radius: 999px;
}

.classmanager-task-instructions-scroll::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 999px;
}

.classmanager-instruction-files {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.classmanager-instruction-image {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    margin: 0;
    max-width: min(100%, 320px);
    overflow: hidden;
}

.classmanager-instruction-image a {
    display: block;
}

.classmanager-instruction-image img {
    aspect-ratio: 16 / 10;
    display: block;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    width: 100%;
}

.classmanager-instruction-image figcaption {
    border-top: 1px solid #edf0f5;
    color: #6b7c93;
    font-size: .8125rem;
    overflow-wrap: anywhere;
    padding: .55rem .7rem;
}

.classmanager-instruction-pdf {
    align-items: center;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    max-width: 100%;
    padding: .75rem;
}

.classmanager-instruction-pdf-main {
    align-items: center;
    display: flex;
    gap: .6rem;
    min-width: 0;
}

.classmanager-instruction-pdf-main strong {
    color: #24324a;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.classmanager-instruction-pdf-icon {
    align-items: center;
    background: #fee2e2;
    border-radius: 6px;
    color: #dc2626;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.classmanager-instruction-pdf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.classmanager-submission,
.classmanager-discussion-post {
    background: #f8f9fb;
    border: 1px solid #edf0f5;
    border-radius: 6px;
    padding: 1rem;
}

.classmanager-file-action-group {
    display: inline-flex;
}

.classmanager-project-summary span {
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
}

.classmanager-project-summary strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.classmanager-project-summary small {
    color: #64748b;
}

.classmanager-project-workspace {
    display: grid;
    gap: .85rem;
}

.classmanager-project-top {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.classmanager-project-top > div:first-child {
    flex: 1 1 420px;
    min-width: 0;
}

.classmanager-project-top h2 {
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-project-meta-line {
    align-items: center;
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .45rem;
}

.classmanager-project-meta-line strong {
    align-items: center;
    display: inline-flex;
    gap: .25rem;
}

.classmanager-project-meta-line strong i {
    background: #22c55e;
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.classmanager-project-tabs {
    border-bottom: 1px solid #e5edf6;
    gap: 1.15rem;
}

.classmanager-project-actions {
    align-items: center;
    display: flex;
    flex: 0 1 680px;
    flex-wrap: nowrap;
    gap: .5rem;
    justify-content: flex-end;
    min-width: 0;
}

.classmanager-project-tabs .nav-link {
    align-items: center;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #334155;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 800;
    min-height: 42px;
    padding: .45rem .2rem;
}

.classmanager-project-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: #4f46e5;
    color: #3f3ce8;
}

.classmanager-project-tab-content {
    display: grid;
    gap: .85rem;
}

.classmanager-project-overview-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.classmanager-project-overview-card,
.classmanager-project-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .03);
}

.classmanager-project-overview-card {
    display: grid;
    gap: .5rem;
    min-height: 112px;
    padding: .85rem;
}

.classmanager-project-overview-card > span,
.classmanager-project-overview-card > div > span,
.classmanager-project-panel p {
    color: #64748b;
}

.classmanager-project-overview-card h3,
.classmanager-project-progress-card strong {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-project-progress-card {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 72px;
}

.classmanager-project-progress-card strong {
    color: #4f46e5;
    display: block;
}

.classmanager-project-progress-card small,
.classmanager-project-overview-card small {
    color: #64748b;
    display: block;
    font-weight: 700;
}

.classmanager-project-ring {
    align-items: center;
    background:
        radial-gradient(circle closest-side, #fff 72%, transparent 73%),
        conic-gradient(#4f46e5 var(--progress), #e8edf5 0);
    border-radius: 50%;
    display: grid;
    height: 72px;
    justify-content: center;
    width: 72px;
}

.classmanager-project-ring b {
    color: #0f172a;
}

.classmanager-project-mini-row {
    align-items: center;
    display: flex;
    gap: .45rem;
    min-width: 0;
}

.classmanager-project-mini-row span {
    color: #475569;
    flex: 1 1 auto;
    font-size: .86rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classmanager-project-mini-row strong {
    flex: 0 0 auto;
    font-size: .9rem;
    white-space: nowrap;
}

.classmanager-project-overview-card a,
.classmanager-project-panel-head a {
    align-items: center;
    color: #3f3ce8;
    display: inline-flex;
    font-size: .88rem;
    font-weight: 800;
    gap: .35rem;
    margin-top: auto;
}

.classmanager-project-card-icon {
    align-items: center;
    background: #ede9fe;
    border-radius: 8px;
    color: #4f46e5;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.classmanager-project-overview-panels {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.classmanager-project-panel {
    overflow: hidden;
    padding: 1rem;
}

.classmanager-project-panel h4 {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-project-panel p {
    margin: .25rem 0 .9rem;
}

.classmanager-project-summary-list {
    margin: 0;
}

.classmanager-project-summary-list div,
.classmanager-project-activity {
    align-items: center;
    border-top: 1px solid #edf2f7;
    display: grid;
    gap: .75rem;
}

.classmanager-project-summary-list div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .7rem 0;
}

.classmanager-project-summary-list dt {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-weight: 800;
    gap: .45rem;
}

.classmanager-project-summary-list dd {
    color: #0f172a;
    font-weight: 900;
    margin: 0;
}

.classmanager-project-panel-head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.classmanager-project-activity {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: .8rem 0;
}

.classmanager-project-activity > span {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.classmanager-project-activity strong,
.classmanager-project-activity small {
    display: block;
}

.classmanager-project-activity small,
.classmanager-project-activity time {
    color: #64748b;
}

.classmanager-project-activity time {
    font-size: .78rem;
    text-align: right;
}

.classmanager-project-placeholder {
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-weight: 800;
    padding: 2rem;
    text-align: center;
}

.classmanager-project-activity .bg-success-light {
    background: #dcfce7;
}

.classmanager-project-activity .bg-primary-light {
    background: #dbeafe;
}

.classmanager-project-activity .bg-warning-light {
    background: #ffedd5;
}

.classmanager-project-instruction-board {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .03);
    overflow: hidden;
}

.classmanager-project-instruction-head {
    align-items: flex-start;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.classmanager-project-instruction-head h3,
.classmanager-project-file-section h4,
.classmanager-project-history h4 {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-project-instruction-head p,
.classmanager-project-file-section p,
.classmanager-project-history p {
    color: #64748b;
    font-weight: 700;
    margin: .25rem 0 0;
}

.classmanager-project-instruction-head > div:last-child {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.classmanager-project-instruction-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.classmanager-project-instruction-main {
    padding: 1rem;
}

.classmanager-project-instruction-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .8rem;
}

.classmanager-project-instruction-meta span {
    align-items: center;
    background: #eef2ff;
    border-radius: 6px;
    color: #3f3ce8;
    display: inline-flex;
    font-weight: 900;
    padding: .35rem .65rem;
}

.classmanager-project-instruction-meta small {
    color: #64748b;
    font-weight: 700;
}

.classmanager-project-instruction-content {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 8px 8px 0 0;
    color: #1f2f46;
    font-size: .96rem;
    line-height: 1.65;
    max-height: 320px;
    overflow-y: auto;
    padding: 1.15rem 1.25rem;
}

.classmanager-project-instruction-content p,
.classmanager-project-instruction-content ul {
    margin-bottom: .9rem;
}

.classmanager-project-instruction-content p:last-child,
.classmanager-project-instruction-content ul:last-child {
    margin-bottom: 0;
}

.classmanager-project-instruction-content strong,
.classmanager-project-instruction-content h1,
.classmanager-project-instruction-content h2,
.classmanager-project-instruction-content h3,
.classmanager-project-instruction-content h4 {
    color: #0f172a;
    font-weight: 900;
}

.classmanager-project-instruction-content ul,
.classmanager-project-instruction-content ol {
    padding-left: 1.35rem;
}

.classmanager-project-instruction-content li {
    margin: .22rem 0;
}

.classmanager-project-instruction-content blockquote {
    background: #f8fafc;
    border-left: 4px solid #4f46e5;
    border-radius: 6px;
    margin: .9rem 0;
    padding: .75rem 1rem;
}

.classmanager-project-edit-instruction {
    align-items: center;
    border: 1px solid #dbe3ef;
    border-radius: 0 0 8px 8px;
    color: #3f3ce8;
    display: flex;
    font-weight: 900;
    justify-content: flex-start;
    margin: 0;
    padding: .8rem 1rem;
    width: 100%;
}

.classmanager-project-file-section {
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
    padding-top: 1rem;
}

.classmanager-project-file-list {
    display: grid;
    gap: .65rem;
    margin-top: .85rem;
}

.classmanager-project-file-card {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: .75rem;
}

.classmanager-project-file-badge {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.classmanager-project-file-badge.is-pdf {
    background: #fee2e2;
    color: #dc2626;
}

.classmanager-project-file-badge.is-doc {
    background: #dbeafe;
    color: #2563eb;
}

.classmanager-project-file-badge.is-sheet {
    background: #dcfce7;
    color: #16a34a;
}

.classmanager-project-file-badge.is-file {
    background: #f1f5f9;
    color: #64748b;
}

.classmanager-project-file-main {
    min-width: 0;
}

.classmanager-project-file-main a {
    color: #3f3ce8;
    display: block;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.classmanager-project-file-main p {
    color: #475569;
    margin: .2rem 0 .35rem;
}

.classmanager-project-file-main div {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    font-weight: 800;
    gap: .55rem;
}

.classmanager-project-file-main span {
    align-items: center;
    display: inline-flex;
    gap: .2rem;
}

.classmanager-project-file-actions {
    display: inline-flex;
    gap: .45rem;
}

.classmanager-project-view-more {
    align-items: center;
    color: #3f3ce8;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    margin-top: .75rem;
    width: 100%;
}

.classmanager-project-history {
    border-left: 1px solid #e2e8f0;
    padding: 1rem;
}

.classmanager-project-history-list {
    border-bottom: 1px solid #e2e8f0;
    display: grid;
    gap: 0;
    margin: 1rem 0;
    padding-bottom: 1rem;
    position: relative;
}

.classmanager-project-history-list:before {
    background: #dbe3ef;
    bottom: 1.5rem;
    content: "";
    left: 10px;
    position: absolute;
    top: 1rem;
    width: 2px;
}

.classmanager-project-history-list > div {
    border-radius: 8px;
    color: #475569;
    padding: .85rem .85rem .85rem 2.1rem;
    position: relative;
}

.classmanager-project-history-list > div:before {
    background: #94a3b8;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cbd5e1;
    content: "";
    height: 14px;
    left: 4px;
    position: absolute;
    top: 1rem;
    width: 14px;
    z-index: 1;
}

.classmanager-project-history-list > div.is-active {
    background: #f8fafc;
}

.classmanager-project-history-list > div.is-active:before {
    background: #4f46e5;
    box-shadow: 0 0 0 3px #e0e7ff;
}

.classmanager-project-history-list strong,
.classmanager-project-history-list span {
    display: block;
}

.classmanager-project-history-list strong {
    color: #0f172a;
    font-weight: 900;
}

.classmanager-project-history-list span {
    color: #64748b;
    font-size: .82rem;
    margin: .2rem 0;
}

.classmanager-project-history-list p {
    color: #334155;
    margin: 0;
}

.classmanager-milestone-board {
    align-self: start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .03);
    overflow: hidden;
    padding: 1rem;
}

.classmanager-milestone-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.classmanager-milestone-head h3 {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-milestone-head p {
    color: #64748b;
    font-weight: 700;
    margin: .25rem 0 0;
}

.classmanager-milestone-stats {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1.2rem 0 1rem;
    overflow: hidden;
}

.classmanager-milestone-stats > div {
    align-items: center;
    display: grid;
    gap: .2rem .75rem;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 1rem;
}

.classmanager-milestone-stats > div + div {
    border-left: 1px solid #e2e8f0;
}

.classmanager-milestone-stat-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    grid-row: span 2;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.classmanager-milestone-stat-icon.bg-primary-light {
    background: #e0e7ff;
}

.classmanager-milestone-stat-icon.bg-success-light {
    background: #dcfce7;
}

.classmanager-milestone-stat-icon.bg-warning-light {
    background: #ffedd5;
}

.classmanager-milestone-stat-icon.bg-muted-light {
    background: #f1f5f9;
}

.classmanager-milestone-stats small {
    color: #0f172a;
    font-weight: 800;
}

.classmanager-milestone-stats strong {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 900;
}

.classmanager-milestone-table-wrap {
    overflow-x: auto;
}

.classmanager-milestone-table {
    border-collapse: collapse;
    min-width: 980px;
    width: 100%;
}

.classmanager-milestone-table th {
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
    font-weight: 900;
    padding: .75rem .85rem;
    text-align: left;
}

.classmanager-milestone-table td {
    border-top: 1px solid #e2e8f0;
    color: #334155;
    padding: .8rem .85rem;
    vertical-align: middle;
}

.classmanager-milestone-table tbody tr[data-milestone-row] {
    cursor: pointer;
}

.classmanager-milestone-table tbody tr.is-selected {
    background: #f5f7ff;
    box-shadow: inset 3px 0 0 #4f46e5;
}

.classmanager-milestone-table td:nth-child(1),
.classmanager-milestone-table th:nth-child(1) {
    text-align: center;
    width: 42px;
}

.classmanager-milestone-table td:nth-child(2) a {
    color: #3f3ce8;
    font-weight: 900;
}

.classmanager-milestone-table td:nth-child(4) {
    white-space: nowrap;
}

.classmanager-milestone-accordion-row {
    display: none;
}

.classmanager-milestone-accordion-row.is-open {
    display: table-row;
}

.classmanager-milestone-accordion-row td {
    background: #f8fbff;
    padding: .75rem .7rem 1rem !important;
}

.classmanager-milestone-accordion {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    display: grid;
    gap: 0;
    grid-template-columns: 1.15fr 1fr .95fr;
    overflow: hidden;
    padding: 0;
}

.classmanager-milestone-detail-panel {
    min-height: 96px;
    padding: 1.15rem 1.45rem;
}

.classmanager-milestone-detail-panel + .classmanager-milestone-detail-panel {
    border-left: 1px solid #e2e8f0;
}

.classmanager-milestone-detail-panel h4 {
    align-items: center;
    color: #0f172a;
    display: flex;
    font-size: .95rem;
    font-weight: 900;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.classmanager-milestone-detail-panel h4 .material-icons {
    color: #334155;
}

.classmanager-milestone-detail-panel p {
    color: #475569;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

.classmanager-milestone-detail-panel-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .4rem;
}

.classmanager-milestone-detail-panel-head h4 {
    margin: 0;
}

.classmanager-milestone-upload-link {
    align-items: center;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    color: #4f46e5;
    cursor: pointer;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: .35rem;
    justify-content: center;
    margin: 0;
    padding: .35rem .65rem;
}

.classmanager-milestone-upload-link:hover {
    background: #eef2ff;
    border-color: #818cf8;
    color: #3730a3;
}

.classmanager-milestone-files-panel .classmanager-milestone-file-list {
    margin-top: .65rem;
}

.classmanager-milestone-files-panel .classmanager-milestone-file-list > div {
    border: 0;
    border-radius: 0;
    gap: .65rem;
    grid-template-columns: 24px minmax(0, 1fr) 28px;
    padding: 0;
}

.classmanager-milestone-files-panel .classmanager-milestone-file-list strong {
    color: #0f172a;
    display: block;
    font-size: .92rem;
    font-weight: 900;
}

.classmanager-milestone-files-panel .classmanager-milestone-file-list small {
    color: #64748b;
    display: block;
    font-size: .86rem;
    font-weight: 500;
    margin-top: .2rem;
}

.classmanager-milestone-updated-panel p {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-bottom: .25rem;
}

.classmanager-milestone-updated-panel p .material-icons {
    color: #64748b;
}

.classmanager-milestone-updated-panel small {
    color: #475569;
    display: block;
    font-size: .9rem;
}

.classmanager-milestone-status {
    border-radius: 6px;
    display: inline-flex;
    font-weight: 800;
    padding: .35rem .6rem;
    white-space: nowrap;
}

.classmanager-milestone-status.is-complete,
.classmanager-milestone-status.is-completed {
    background: #dcfce7;
    color: #15803d;
}

.classmanager-milestone-status.is-in-progress {
    background: #eef2ff;
    color: #3730a3;
}

.classmanager-milestone-status.is-pending {
    background: #f1f5f9;
    color: #334155;
}

.classmanager-milestone-status.is-not-started {
    background: #f1f5f9;
    color: #334155;
}

.classmanager-milestone-progress {
    display: grid;
    gap: .35rem;
    max-width: 84px;
    min-width: 68px;
}

.classmanager-milestone-progress strong {
    color: #0f172a;
    font-weight: 900;
}

.classmanager-milestone-progress span {
    background: #e2e8f0;
    border-radius: 999px;
    display: block;
    height: 6px;
    overflow: hidden;
}

.classmanager-milestone-progress i {
    background: #4f46e5;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.classmanager-milestone-table tr:not(.is-expanded) .classmanager-milestone-progress i[style*="100"] {
    background: #16a34a;
}

.classmanager-milestone-actions {
    align-items: center;
    display: inline-flex;
    gap: .5rem;
    white-space: nowrap;
}

.classmanager-milestone-detail-row td {
    background: #f8fbff;
    padding-top: 0;
}

.classmanager-milestone-detail {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, .9fr);
    padding: 1rem;
}

.classmanager-milestone-detail > div + div {
    border-left: 1px solid #e2e8f0;
    padding-left: 1rem;
}

.classmanager-milestone-detail h5 {
    align-items: center;
    color: #0f172a;
    display: flex;
    font-size: .95rem;
    font-weight: 900;
    margin: 0 0 .5rem;
}

.classmanager-milestone-detail p,
.classmanager-milestone-detail a {
    color: #475569;
    margin: 0;
}

.classmanager-milestone-detail a {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    font-weight: 900;
}

.classmanager-milestone-detail a .material-icons {
    color: #4f46e5;
}

.classmanager-milestone-detail small {
    color: #64748b;
    font-weight: 700;
    margin-left: 1.35rem;
}

.classmanager-milestone-footer {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    padding-top: .9rem;
}

.classmanager-milestone-footer > div {
    display: inline-flex;
    gap: .4rem;
}

.classmanager-milestone-timer-float {
    align-items: center;
    background: #07114a;
    border: 1px solid #2c3bb5;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
    display: none;
    gap: .55rem;
    justify-content: space-between;
    margin: 0;
    max-width: 520px;
    padding: .45rem .55rem;
    width: min(100%, 520px);
    z-index: 10;
}

.classmanager-milestone-timer-float.is-visible {
    display: flex;
}

.classmanager-milestone-timer-float span,
.classmanager-milestone-timer-float small {
    color: #cbd5e1;
    display: block;
    font-weight: 800;
}

.classmanager-milestone-timer-float strong {
    color: #fff;
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.classmanager-milestone-time-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-auto-rows: max-content;
}

.classmanager-milestone-time-main {
    align-content: start;
    align-self: start;
    display: grid;
    gap: .65rem;
    grid-auto-rows: max-content;
    grid-template-rows: max-content max-content;
}

.classmanager-milestone-time-overview {
    align-self: start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .03);
    height: fit-content;
    min-height: 0;
    padding: .75rem;
}

.classmanager-milestone-time-overview h3,
.classmanager-milestone-side-head h3 {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 900;
    margin: 0 0 .6rem;
}

.classmanager-milestone-time-cards {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.classmanager-milestone-time-cards > div {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .15rem .55rem;
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 86px;
    padding: .6rem;
}

.classmanager-milestone-time-cards .classmanager-milestone-stat-icon {
    grid-row: span 3;
}

.classmanager-milestone-time-cards small {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
}

.classmanager-milestone-time-cards strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.1;
}

.classmanager-milestone-time-cards em {
    color: #64748b;
    font-size: .78rem;
    font-style: normal;
    font-weight: 700;
}

.classmanager-milestone-time-table {
    min-width: 860px;
}

.classmanager-milestone-time-table th:nth-child(3),
.classmanager-milestone-time-table td:nth-child(3),
.classmanager-milestone-time-table th:nth-child(4),
.classmanager-milestone-time-table td:nth-child(4) {
    width: 82px;
}

.classmanager-milestone-time-table th:nth-child(6),
.classmanager-milestone-time-table td:nth-child(6) {
    width: 86px;
}

.classmanager-milestone-time-table th:nth-child(8),
.classmanager-milestone-time-table td:nth-child(8) {
    text-align: center;
    width: 72px;
}

.classmanager-milestone-time-table tbody tr.is-active-timer {
    background: #f5f7ff;
}

.classmanager-milestone-action-btn {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    color: #475569;
    height: 38px;
    width: 38px;
}

.classmanager-milestone-action-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

.classmanager-milestone-actions-menu .dropdown-menu {
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    min-width: 190px;
    padding: .35rem;
}

.classmanager-milestone-actions-menu .dropdown-item {
    align-items: center;
    border-radius: 6px;
    color: #334155;
    display: flex;
    font-weight: 800;
    padding: .6rem .7rem;
}

.classmanager-milestone-actions-menu .dropdown-item:hover {
    background: #eef2ff;
    color: #3730a3;
}

.classmanager-milestone-actions-menu .dropdown-item.text-danger:hover {
    background: #fef2f2;
    color: #b91c1c !important;
}

.classmanager-milestone-running {
    box-shadow: 0 8px 18px rgba(79, 70, 229, .22);
    white-space: nowrap;
}

.classmanager-milestone-side-panel {
    align-self: start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .03);
    padding: 1rem;
}

.classmanager-milestone-side-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.classmanager-milestone-selected-card {
    align-items: start;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: 48px minmax(0, 1fr);
    margin-bottom: 1rem;
    padding: 1rem;
}

.classmanager-milestone-detail-title-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: space-between;
}

.classmanager-milestone-selected-card h4 {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 900;
    margin: 0 .5rem .3rem 0;
}

.classmanager-milestone-selected-card p {
    color: #64748b;
    margin: .45rem 0 0;
}

.classmanager-milestone-detail-meta {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin-top: .65rem;
}

.classmanager-milestone-detail-meta span {
    align-items: center;
    display: inline-flex;
    gap: .25rem;
    font-weight: 800;
}

.classmanager-milestone-detail-meta strong {
    color: #0f172a;
}

.classmanager-milestone-detail-progress {
    display: grid;
    gap: .35rem;
    margin-top: .75rem;
}

.classmanager-milestone-detail-progress div {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.classmanager-milestone-detail-progress strong {
    color: #0f172a;
    font-weight: 900;
}

.classmanager-milestone-detail-progress span {
    color: #64748b;
    font-weight: 800;
}

.classmanager-milestone-detail-progress > span {
    background: #e2e8f0;
    border-radius: 999px;
    display: block;
    height: 6px;
    overflow: hidden;
}

.classmanager-milestone-detail-progress i {
    background: #4f46e5;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.classmanager-milestone-side-section {
    border-top: 1px solid #e2e8f0;
    padding: 1rem 0;
}

.classmanager-milestone-side-section:last-child {
    padding-bottom: 0;
}

.classmanager-milestone-side-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.classmanager-milestone-side-title h4 {
    color: #0f172a;
    font-size: .98rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-milestone-side-title a,
.classmanager-milestone-side-title .btn-link {
    color: #3f3ce8;
    font-weight: 900;
    padding: 0;
}

.classmanager-milestone-side-stats {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0;
}

.classmanager-milestone-side-compact-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .6rem;
}

.classmanager-milestone-side-compact-meta > span:not(.classmanager-milestone-status) {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.classmanager-milestone-side-compact-meta strong {
    color: #0f172a;
}

.classmanager-milestone-side-stats small {
    color: #64748b;
    display: block;
    font-weight: 800;
}

.classmanager-milestone-side-stats strong {
    color: #0f172a;
    display: block;
    font-weight: 900;
    margin-top: .3rem;
}

.classmanager-milestone-session-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    justify-items: center;
    padding: 1rem;
    text-align: center;
}

.classmanager-milestone-session-card small,
.classmanager-milestone-session-card span {
    color: #64748b;
    font-weight: 800;
}

.classmanager-milestone-session-card strong {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
    margin: .3rem 0;
}

.classmanager-milestone-session-card > div {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
}

.classmanager-milestone-entry-list {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: .75rem 0;
    overflow: hidden;
}

.classmanager-milestone-entry-list > div {
    display: grid;
    gap: .2rem .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .8rem;
}

.classmanager-milestone-entry-list > div + div {
    border-top: 1px solid #e2e8f0;
}

.classmanager-milestone-entry-list strong {
    color: #0f172a;
    font-weight: 900;
}

.classmanager-milestone-entry-list span {
    color: #475569;
    grid-column: 1;
}

.classmanager-milestone-entry-list em {
    color: #0f172a;
    font-style: normal;
    font-weight: 900;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.classmanager-milestone-note-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: .75rem;
    padding: .75rem;
}

.classmanager-milestone-note-card strong,
.classmanager-milestone-note-card small {
    display: block;
}

.classmanager-milestone-note-card strong {
    color: #0f172a;
    font-weight: 900;
}

.classmanager-milestone-note-card small,
.classmanager-milestone-note-card p {
    color: #64748b;
}

.classmanager-milestone-note-card p {
    margin: .45rem 0 0;
}

.classmanager-milestone-file-list {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
}

.classmanager-milestone-file-list > div {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    grid-template-columns: 24px minmax(0, 1fr) 28px;
    padding: .5rem;
}

.classmanager-milestone-file-list > div.classmanager-milestone-empty-line {
    grid-template-columns: 24px minmax(0, 1fr);
}

.classmanager-milestone-file-list span {
    color: #0f172a;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.classmanager-milestone-file-list a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.classmanager-milestone-detail-actions {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.classmanager-add-milestone-modal .modal-dialog {
    max-width: 760px;
}

.classmanager-add-milestone-modal .modal-content {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}

.classmanager-add-milestone-modal .modal-header,
.classmanager-add-milestone-modal .modal-footer {
    border: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.classmanager-add-milestone-modal .modal-header {
    padding-bottom: .75rem;
}

.classmanager-add-milestone-modal .modal-body {
    padding: .75rem 1.5rem 1rem;
}

.classmanager-add-milestone-modal .modal-title {
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 900;
}

.classmanager-add-milestone-modal .form-control {
    border-color: #dbe3ef;
    border-radius: 7px;
    min-height: 46px;
}

.classmanager-add-milestone-modal textarea.form-control {
    min-height: 132px;
    resize: vertical;
}

.classmanager-add-milestone-modal .classmanager-focus-input:focus,
.classmanager-add-milestone-modal .form-control:focus {
    border-color: #8b7cff;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .18);
}

.classmanager-textarea-wrap {
    position: relative;
}

.classmanager-textarea-wrap small {
    bottom: .55rem;
    color: #64748b;
    font-weight: 800;
    position: absolute;
    right: .75rem;
}

.classmanager-icon-field {
    position: relative;
}

.classmanager-icon-field .form-control {
    padding-right: 2.65rem;
}

.classmanager-icon-field > .material-icons {
    color: #64748b;
    pointer-events: none;
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 1599.98px) and (min-width: 992px) {
    body.classmanager-class-focus .page__container,
    body.classmanager-class-focus .page__heading-container {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    body.classmanager-project-tab-active .page__heading-container {
        display: none;
    }

    .classmanager-week-tabs-col {
        flex-basis: 160px;
        max-width: 160px;
    }

    .classmanager-week-content-col {
        max-width: calc(100% - 160px);
    }

    .classmanager-week-card .card-header {
        padding: .55rem .6rem;
    }

    .classmanager-week-card .card-header__title {
        font-size: 1rem;
    }

    .classmanager-week-list .list-group-item {
        padding: .5rem .55rem;
    }

    .classmanager-week-list strong {
        font-size: .78rem;
    }

    .classmanager-week-list small {
        font-size: .68rem;
        line-height: 1.25;
    }

    .classmanager-week-list .avatar-xs {
        height: 1.75rem;
        width: 1.75rem;
    }

    .classmanager-project-workspace {
        gap: .6rem;
    }

    .classmanager-project-top {
        align-items: center;
    }

    .classmanager-project-top .breadcrumb {
        display: none;
    }

    .classmanager-project-top h2 {
        font-size: 1.2rem;
    }

    .classmanager-project-actions {
        flex: 0 1 520px;
        min-width: 0;
    }

    .classmanager-project-actions .btn {
        font-size: .78rem;
        padding: .4rem .55rem;
        white-space: nowrap;
    }

    .classmanager-project-meta-line {
        font-size: .85rem;
        margin-top: .2rem;
    }

    .classmanager-project-tabs {
        gap: .45rem;
    }

    .classmanager-project-tabs .nav-link {
        font-size: .84rem;
        padding: .45rem .2rem;
    }

    .classmanager-milestone-time-layout {
        gap: .65rem;
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .classmanager-milestone-time-main {
        gap: .65rem;
    }

    .classmanager-milestone-timer-float {
        gap: .45rem;
        max-width: 380px;
        padding: .38rem .45rem;
        width: min(100%, 380px);
    }

    .classmanager-milestone-timer-float strong {
        font-size: .9rem;
    }

    .classmanager-milestone-timer-float span,
    .classmanager-milestone-timer-float small {
        font-size: .72rem;
        line-height: 1.15;
    }

    .classmanager-milestone-timer-float .btn {
        font-size: .72rem;
        padding: .32rem .45rem;
    }

    .classmanager-milestone-time-overview,
    .classmanager-milestone-board,
    .classmanager-milestone-side-panel {
        padding: .65rem;
    }

    .classmanager-milestone-time-overview h3,
    .classmanager-milestone-side-head h3,
    .classmanager-milestone-head h3 {
        font-size: .98rem;
        margin-bottom: .65rem;
    }

    .classmanager-milestone-time-cards {
        gap: .5rem;
    }

    .classmanager-milestone-time-cards > div {
        gap: .15rem .45rem;
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 66px;
        padding: .42rem;
    }

    .classmanager-milestone-stat-icon {
        height: 32px;
        width: 32px;
    }

    .classmanager-milestone-time-cards small,
    .classmanager-milestone-time-cards em {
        font-size: .72rem;
    }

    .classmanager-milestone-time-cards strong {
        font-size: 1rem;
        line-height: 1.05;
    }

    .classmanager-milestone-table th,
    .classmanager-milestone-table td {
        font-size: .78rem;
        padding: .5rem .45rem;
    }

    .classmanager-milestone-time-table {
        min-width: 700px;
    }

    .classmanager-milestone-time-table th:nth-child(6),
    .classmanager-milestone-time-table td:nth-child(6) {
        width: 72px;
    }

    .classmanager-milestone-time-table .classmanager-milestone-progress {
        max-width: 64px;
        min-width: 54px;
    }

    .classmanager-milestone-detail-panel {
        padding: .9rem 1rem;
    }

    .classmanager-milestone-detail-panel p {
        font-size: .8rem;
    }

    .classmanager-milestone-head {
        align-items: center;
    }

    .classmanager-milestone-head p {
        font-size: .78rem;
        margin-top: .1rem;
    }

    .classmanager-milestone-head .btn {
        font-size: .78rem;
        padding: .45rem .65rem;
    }

    .classmanager-milestone-side-panel {
        font-size: .86rem;
    }

    .classmanager-milestone-selected-card {
        grid-template-columns: 34px minmax(0, 1fr);
        margin-bottom: .7rem;
        padding: .65rem;
    }

    .classmanager-milestone-selected-card h4,
    .classmanager-milestone-side-title h4 {
        font-size: .86rem;
    }

    .classmanager-milestone-selected-card p {
        font-size: .8rem;
    }

    .classmanager-milestone-side-section {
        padding: .75rem 0;
    }

    .classmanager-milestone-side-stats {
        gap: .4rem;
        margin: .65rem 0;
    }

    .classmanager-milestone-side-stats small {
        font-size: .72rem;
    }

    .classmanager-milestone-side-stats strong {
        font-size: .82rem;
    }

    .classmanager-milestone-detail-actions {
        grid-template-columns: 1fr;
    }

    .classmanager-milestone-detail-actions .btn {
        font-size: .78rem;
        padding: .45rem .55rem;
    }

    .classmanager-milestone-session-card {
        padding: .75rem;
    }

    .classmanager-milestone-session-card strong {
        font-size: 1.55rem;
    }

    .classmanager-milestone-session-card > div {
        gap: .45rem;
    }

    .classmanager-milestone-session-card .btn,
    .classmanager-milestone-entry-list,
    .classmanager-milestone-entry-list strong,
    .classmanager-milestone-entry-list span,
    .classmanager-milestone-entry-list em {
        font-size: .78rem;
    }
}

@media (min-width: 1800px) {
    body.classmanager-class-focus .page__container,
    body.classmanager-class-focus .page__heading-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .classmanager-week-tabs-col {
        flex-basis: 230px;
        max-width: 230px;
    }

    .classmanager-week-content-col {
        max-width: calc(100% - 230px);
    }

    .classmanager-week-list .list-group-item {
        padding: .62rem .75rem;
    }

    .classmanager-week-list strong {
        font-size: .84rem;
    }

    .classmanager-week-list small {
        font-size: .72rem;
        line-height: 1.25;
    }

    .classmanager-project-top h2 {
        font-size: 1.32rem;
    }

    .classmanager-project-meta-line {
        font-size: .86rem;
        margin-top: .28rem;
    }

    .classmanager-project-actions .btn {
        font-size: .8rem;
        padding: .42rem .7rem;
    }

    .classmanager-milestone-time-layout {
        grid-template-columns: minmax(0, 1fr) 420px;
    }

    .classmanager-milestone-time-cards {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }

    .classmanager-milestone-time-table {
        min-width: 0;
    }
}

.classmanager-final-submission {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr) 280px;
}

.classmanager-final-main {
    display: grid;
    gap: .9rem;
    min-width: 0;
}

.classmanager-final-card,
.classmanager-final-side-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .025);
}

.classmanager-final-card {
    padding: .85rem 1rem;
}

.classmanager-final-card h3,
.classmanager-final-side-card h4 {
    color: #0f172a;
    font-size: .98rem;
    font-weight: 900;
    margin: 0;
}

.classmanager-final-card h3 span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
}

.classmanager-final-card p,
.classmanager-final-side-card p {
    color: #64748b;
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.35;
    margin: .3rem 0 .65rem;
}

.classmanager-final-status-grid {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1.05fr 1fr .85fr;
    margin-top: .7rem;
    padding-top: .75rem;
}

.classmanager-final-status-grid > div {
    border-left: 1px solid #e2e8f0;
    display: grid;
    gap: .28rem;
    min-width: 0;
    padding: .1rem .95rem;
}

.classmanager-final-status-grid > div:first-child {
    border-left: 0;
    padding-left: 0;
}

.classmanager-final-status-grid small,
.classmanager-final-status-grid span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
}

.classmanager-final-status-grid strong {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.classmanager-final-status-grid em {
    color: #16a34a;
    font-size: .82rem;
    font-style: normal;
    font-weight: 800;
}

.classmanager-final-status,
.classmanager-final-version {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    justify-self: flex-start;
    padding: .32rem .6rem;
    white-space: nowrap;
}

.classmanager-final-status i,
.classmanager-final-dot {
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    margin-right: .4rem;
    width: 6px;
}

.classmanager-final-status.is-draft {
    background: #fff1d6;
    color: #9a4a00;
}

.classmanager-final-status.is-draft i,
.classmanager-final-dot.is-draft {
    background: #f59e0b;
}

.classmanager-final-version {
    background: #ede9fe;
    color: #4f46e5 !important;
    min-height: 38px;
    min-width: 38px;
    justify-content: center;
}

.classmanager-final-editor {
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    overflow: hidden;
}

.classmanager-final-toolbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #dbe3ef;
    display: flex;
    flex-wrap: wrap;
}

.classmanager-final-toolbar button {
    align-items: center;
    background: transparent;
    border: 0;
    border-right: 1px solid #edf2f7;
    color: #334155;
    display: inline-flex;
    font-weight: 800;
    gap: .35rem;
    font-size: .82rem;
    min-height: 31px;
    padding: .32rem .58rem;
}

.classmanager-final-editor-body {
    background: transparent;
    border: 0;
    color: #334155;
    font-size: .86rem;
    min-height: 82px;
    outline: 0;
    padding: .7rem .75rem;
    resize: vertical;
    width: 100%;
}

.classmanager-final-editor-count {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    padding: 0 .75rem .45rem;
    text-align: right;
}

.classmanager-final-deliverables-head {
    align-items: flex-start;
    display: flex;
    gap: .85rem;
    justify-content: space-between;
}

.classmanager-final-deliverables-head .btn,
.classmanager-final-actions .btn {
    align-items: center;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    justify-content: center;
    min-height: 34px;
    padding: .35rem .8rem;
}

.classmanager-final-file-list {
    display: grid;
    gap: 0;
    margin-top: .7rem;
}

.classmanager-final-file-card {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: .65rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: .58rem 0;
}

.classmanager-final-file-card .classmanager-project-file-badge {
    border-radius: 6px;
    height: 30px;
    width: 30px;
}

.classmanager-final-file-main {
    min-width: 0;
}

.classmanager-final-file-main strong {
    color: #3f3ce8;
    display: block;
    font-size: .86rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.classmanager-final-file-main div {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    font-weight: 800;
    gap: .45rem;
    margin-top: .2rem;
}

.classmanager-final-type {
    border-radius: 6px;
    padding: .14rem .36rem;
}

.classmanager-final-type.is-doc {
    background: #dbeafe;
    color: #1d4ed8;
}

.classmanager-final-type.is-presentation {
    background: #ffedd5;
    color: #c2410c;
}

.classmanager-final-type.is-sheet {
    background: #dcfce7;
    color: #15803d;
}

.classmanager-final-type.is-archive {
    background: #ede9fe;
    color: #4f46e5;
}

.classmanager-project-file-badge.is-presentation {
    background: #ffedd5;
    color: #ea580c;
}

.classmanager-project-file-badge.is-archive {
    background: #ede9fe;
    color: #4f46e5;
}

.classmanager-final-file-actions {
    display: inline-flex;
    gap: .4rem;
}

.classmanager-final-file-actions .btn {
    align-items: center;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.classmanager-final-file-note {
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
    padding-top: .62rem;
}

.classmanager-final-actions {
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
    margin-top: .75rem;
    padding-top: .75rem;
}

.classmanager-final-side {
    display: grid;
    align-content: start;
    gap: .9rem;
    min-width: 0;
}

.classmanager-final-side-card {
    padding: .85rem 1rem;
}

.classmanager-final-side-card dl {
    margin: .7rem 0 0;
}

.classmanager-final-side-card dl div {
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    padding: .58rem 0;
}

.classmanager-final-side-card dt {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.classmanager-final-side-card dd {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
    margin: 0;
    text-align: right;
}

.classmanager-final-side-card dd em {
    color: #16a34a;
    font-size: .76rem;
    font-style: normal;
}

.classmanager-final-empty-version {
    align-items: center;
    color: #64748b;
    display: grid;
    gap: .55rem;
    justify-items: center;
    min-height: 126px;
    text-align: center;
}

.classmanager-final-empty-version .material-icons {
    color: #c7d2fe;
    font-size: 48px;
}

@media (max-width: 1199.98px) {
    .classmanager-project-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classmanager-project-overview-panels {
        grid-template-columns: 1fr;
    }

    .classmanager-milestone-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classmanager-milestone-stats > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }

    .classmanager-milestone-stats > div:nth-child(4) {
        border-top: 1px solid #e2e8f0;
    }

    .classmanager-project-instruction-layout {
        grid-template-columns: 1fr;
    }

    .classmanager-project-history {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }

    .classmanager-milestone-time-layout {
        grid-template-columns: 1fr;
    }

    .classmanager-milestone-time-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classmanager-final-submission {
        grid-template-columns: 1fr;
    }

    .classmanager-final-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classmanager-final-status-grid > div:nth-child(3) {
        border-left: 0;
    }

    .classmanager-final-status-grid > div:nth-child(n+3) {
        border-top: 1px solid #e2e8f0;
        padding-top: .85rem;
    }
}

.classmanager-time-progress {
    background: #e2e8f0;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.classmanager-time-progress span {
    background: #2563eb;
    display: block;
    height: 100%;
}

.classmanager-time-tracker-card {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.classmanager-time-card-head {
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    display: grid;
    gap: .9rem;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 1rem;
}

.classmanager-time-card-icon {
    align-items: center;
    background: #dcfce7;
    border-radius: 9px;
    color: #16a34a;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.classmanager-time-card-icon .material-icons {
    font-size: 26px;
}

.classmanager-time-card-head strong,
.classmanager-time-card-head b {
    color: #0f172a;
    font-size: 1.35rem;
}

.classmanager-time-card-body {
    display: grid;
    gap: .9rem;
    padding: 1rem;
}

.classmanager-time-state {
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 800;
}

.classmanager-time-dark {
    align-items: center;
    background: #111827;
    border: 1px solid #253044;
    border-radius: 10px;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    padding: 1rem;
}

.classmanager-time-toggle {
    align-items: center;
    border: 0;
    border-radius: 0;
    color: #fff;
    display: inline-flex;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.classmanager-time-toggle .material-icons {
    font-size: 28px;
}

.classmanager-time-toggle.is-running {
    background: #ef4444;
}

.classmanager-time-toggle:not(.is-running) {
    background: #2563eb;
}

.classmanager-time-dark span {
    color: #94a3b8;
    display: block;
    font-weight: 800;
}

.classmanager-time-dark strong {
    color: #fff;
    display: block;
    font-size: 1.75rem;
    line-height: 1.1;
}

.classmanager-time-dark em {
    background: #5b2d42;
    border-radius: 999px;
    color: #fecdd3;
    font-style: normal;
    font-weight: 800;
    padding: .55rem .8rem;
}

.classmanager-time-stats {
    display: grid;
    gap: 0;
    margin: 0;
}

.classmanager-time-stats div {
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    padding: .75rem 0;
}

.classmanager-time-stats dt {
    color: #64748b;
    font-size: 1rem;
    font-weight: 800;
}

.classmanager-time-stats dd {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-size: 1.15rem;
    font-weight: 900;
    gap: .45rem;
    margin: 0;
}

.classmanager-time-stats .material-icons {
    color: #64748b;
}

.classmanager-time-estimate-row {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(90px, 1fr) 96px 96px auto;
}

.classmanager-time-estimate-row > span {
    color: #64748b;
    font-size: 1rem;
    font-weight: 800;
}

.classmanager-time-estimate-row label {
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    min-height: 44px;
    padding: 0 .55rem;
}

.classmanager-time-estimate-row input {
    background: transparent;
    border: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.classmanager-time-estimate-row small {
    color: #64748b;
    font-size: 1rem;
    font-weight: 800;
}

.classmanager-assignment-time-card {
    border-radius: 8px;
    box-shadow: none;
}

.classmanager-assignment-time-card .classmanager-time-card-head {
    gap: .65rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: .75rem .85rem;
}

.classmanager-assignment-time-card .classmanager-time-card-icon {
    border-radius: 7px;
    height: 34px;
    width: 34px;
}

.classmanager-assignment-time-card .classmanager-time-card-icon .material-icons {
    font-size: 20px;
}

.classmanager-assignment-time-card .classmanager-time-card-head strong,
.classmanager-assignment-time-card .classmanager-time-card-head b {
    font-size: 1rem;
}

.classmanager-assignment-time-card .classmanager-time-card-body {
    gap: .65rem;
    padding: .85rem;
}

.classmanager-assignment-time-card .classmanager-time-progress {
    height: 5px;
}

.classmanager-time-compact-top {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.15fr);
}

.classmanager-assignment-time-card .classmanager-time-state {
    font-size: .92rem;
    margin-bottom: .35rem;
}

.classmanager-assignment-time-card .classmanager-time-dark {
    border-radius: 8px;
    gap: .65rem;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: .65rem .75rem;
}

.classmanager-assignment-time-card .classmanager-time-toggle {
    height: 38px;
    width: 38px;
}

.classmanager-assignment-time-card .classmanager-time-toggle .material-icons {
    font-size: 21px;
}

.classmanager-assignment-time-card .classmanager-time-dark span {
    font-size: .78rem;
}

.classmanager-assignment-time-card .classmanager-time-dark strong {
    font-size: 1.2rem;
}

.classmanager-assignment-time-card .classmanager-time-dark em {
    font-size: .76rem;
    padding: .3rem .55rem;
}

.classmanager-assignment-time-card .classmanager-time-stats {
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.classmanager-assignment-time-card .classmanager-time-stats div {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: .55rem .65rem;
}

.classmanager-assignment-time-card .classmanager-time-stats dt {
    font-size: .82rem;
}

.classmanager-assignment-time-card .classmanager-time-stats dd {
    font-size: .96rem;
}

.classmanager-assignment-time-card .classmanager-time-stats .material-icons {
    font-size: 18px;
}

.classmanager-assignment-time-card .classmanager-time-estimate-row {
    gap: .5rem;
    grid-template-columns: minmax(95px, 1fr) 82px 82px auto;
}

.classmanager-assignment-time-card .classmanager-time-estimate-row > span {
    font-size: .86rem;
}

.classmanager-assignment-time-card .classmanager-time-estimate-row label {
    min-height: 38px;
}

.classmanager-assignment-time-card .classmanager-time-estimate-row input,
.classmanager-assignment-time-card .classmanager-time-estimate-row small {
    font-size: .92rem;
}

.classmanager-assignment-time-card {
    background: #fff;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    box-shadow: none;
    display: block;
    padding: .65rem;
}

.classmanager-tracker-summary {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.classmanager-tracker-stat,
.classmanager-tracker-control,
.classmanager-tracker-panel {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
}

.classmanager-tracker-stat {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 74px;
    padding: .58rem .7rem;
}

.classmanager-tracker-stat-icon,
.classmanager-tracker-panel-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.classmanager-tracker-stat-status .classmanager-tracker-stat-icon {
    background: #e9efff;
    color: #1d4ed8;
}

.classmanager-tracker-stat-estimate .classmanager-tracker-stat-icon {
    background: #efedff;
    color: #1d4ed8;
}

.classmanager-tracker-stat-tracked .classmanager-tracker-stat-icon {
    background: #dcfce7;
    color: #16a34a;
}

.classmanager-tracker-stat-remaining .classmanager-tracker-stat-icon {
    background: #fff1dc;
    color: #f59e0b;
}

.classmanager-tracker-stat-icon .material-icons {
    font-size: 21px;
}

.classmanager-tracker-stat span,
.classmanager-tracker-panel > span,
.classmanager-tracker-estimate > span {
    color: #50627e;
    display: block;
    font-size: .78rem;
    font-weight: 800;
}

.classmanager-tracker-stat strong {
    color: #020817;
    display: block;
    font-size: 1.08rem;
    line-height: 1.15;
    margin-top: .12rem;
}

.classmanager-tracker-stat em {
    background: #e8eef5;
    border-radius: 5px;
    color: #50627e;
    display: inline-flex;
    font-size: .74rem;
    font-style: normal;
    font-weight: 800;
    margin-top: .3rem;
    padding: .18rem .4rem;
}

.classmanager-tracker-stat .btn {
    font-size: .72rem;
    font-weight: 800;
    margin-top: .3rem;
    min-height: 26px;
    padding: .12rem .45rem;
}

.classmanager-tracker-control {
    margin-top: .6rem;
    padding: .72rem .85rem;
}

.classmanager-tracker-clock-row {
    align-items: center;
    display: flex;
    gap: .65rem;
    justify-content: center;
}

.classmanager-tracker-clock-row > strong {
    color: #020817;
    font-size: 2.35rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.classmanager-tracker-clock-row > span {
    background: #f3f6fa;
    border: 1px solid #d6e0ef;
    border-radius: 6px;
    color: #50627e;
    font-size: .82rem;
    font-weight: 800;
    padding: .24rem .5rem;
}

.classmanager-tracker-start {
    align-items: center;
    border-radius: 5px;
    display: inline-flex;
    font-size: .84rem;
    font-weight: 900;
    min-height: 34px;
    padding-left: .8rem;
    padding-right: .8rem;
}

.classmanager-tracker-start.is-running {
    background: #ef4444;
    border-color: #ef4444;
}

.classmanager-tracker-progress-row {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: .65rem;
}

.classmanager-tracker-progress-row .classmanager-time-progress {
    height: 6px;
}

.classmanager-tracker-progress-row b {
    color: #020817;
    font-size: .92rem;
}

.classmanager-tracker-progress-copy {
    color: #50627e;
    font-size: .82rem;
    font-weight: 700;
    margin-top: .38rem;
}

.classmanager-tracker-bottom {
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
    margin-top: .6rem;
}

.classmanager-tracker-panel {
    min-height: 104px;
    padding: .72rem;
}

.classmanager-tracker-panel-head {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
}

.classmanager-tracker-panel-icon {
    background: #f3f6fa;
    color: #50627e;
    height: 36px;
    width: 36px;
}

.classmanager-tracker-panel-icon .material-icons {
    font-size: 20px;
}

.classmanager-tracker-panel strong {
    color: #020817;
    display: block;
    font-size: .96rem;
    margin-bottom: .25rem;
}

.classmanager-tracker-panel b {
    color: #50627e;
    display: block;
    font-size: .84rem;
}

.classmanager-tracker-panel span {
    color: #50627e;
    display: block;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.25;
}

.classmanager-tracker-log {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.classmanager-tracker-panel-arrow {
    color: #50627e;
    font-size: 20px;
    margin-top: .55rem;
}

.classmanager-tracker-estimate {
    display: block;
}

.classmanager-tracker-estimate > strong {
    margin-bottom: .25rem;
}

.classmanager-tracker-estimate .classmanager-time-estimate-row {
    gap: .4rem;
    grid-template-columns: 82px auto 82px 66px;
    margin-top: .55rem;
}

.classmanager-tracker-estimate .classmanager-time-estimate-row label {
    min-height: 34px;
}

.classmanager-tracker-estimate .classmanager-time-estimate-row input {
    font-size: .84rem;
    font-weight: 800;
}

.classmanager-tracker-estimate .classmanager-time-estimate-row small {
    font-size: .78rem;
}

.classmanager-tracker-estimate .classmanager-time-estimate-row .btn {
    font-size: .82rem;
    font-weight: 800;
    min-height: 34px;
    padding: .25rem .6rem;
}

.classmanager-tracker-estimate .classmanager-tracker-estimate-separator {
    color: #50627e;
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.classmanager-tracker-estimate > b {
    color: #50627e;
    display: block;
    font-size: .82rem;
    margin-top: .45rem;
}

.classmanager-time-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.classmanager-time-inputs label {
    align-items: center;
    background: #fff;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    min-height: 44px;
    overflow: hidden;
}

.classmanager-time-inputs input {
    border: 0;
    min-width: 0;
    outline: 0;
    padding: .65rem .75rem;
    width: 88px;
}

.classmanager-time-inputs small {
    color: #64748b;
    font-weight: 800;
    padding-right: .75rem;
}

.classmanager-time-inputs-large label {
    min-height: 50px;
}

.classmanager-time-inputs-large input {
    font-size: 1rem;
    width: 110px;
}

.classmanager-project-summary {
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
    overflow: hidden;
}

.classmanager-project-summary > div {
    display: grid;
    gap: .2rem;
    padding: 1rem;
}

.classmanager-project-summary > div + div {
    border-left: 1px solid #edf2f7;
}

.classmanager-project-progress {
    align-content: center;
}

.classmanager-project-section,
.classmanager-project-time-box {
    border: 1px solid #edf2f7;
    border-radius: 8px;
    margin-top: 1rem;
    padding: 1rem;
}

.classmanager-project-inline-form {
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) 140px 140px auto;
    margin-bottom: .9rem;
}

.classmanager-project-list {
    display: grid;
    gap: .55rem;
}

.classmanager-project-list-item,
.classmanager-project-update {
    border: 1px solid #edf2f7;
    border-radius: 7px;
    padding: .75rem;
}

.classmanager-project-list-item {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.classmanager-project-list-item small {
    color: #64748b;
    display: block;
}

.classmanager-project-update p {
    color: #334155;
    margin: .35rem 0 0;
}

.classmanager-project-instructions {
    border: 1px solid #edf2f7;
    border-radius: 8px;
    margin-top: 1rem;
    padding: 1rem;
}

.classmanager-project-instructions-input {
    min-height: 180px;
    resize: vertical;
}

.classmanager-project-upload-drop {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #b8c4d6;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: .8rem;
    min-height: 92px;
    padding: 1rem;
    transition: border-color .15s ease, background .15s ease;
}

.classmanager-project-upload-drop:hover {
    background: #f1f5f9;
    border-color: #2563eb;
}

.classmanager-project-upload-drop input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.classmanager-project-upload-icon {
    align-items: center;
    background: #e0e7ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.classmanager-project-upload-drop strong,
.classmanager-project-upload-drop small {
    display: block;
}

.classmanager-project-upload-drop small {
    color: #64748b;
    margin-top: .15rem;
}

.classmanager-project-selected-files {
    display: grid;
    gap: .35rem;
    margin-top: .55rem;
}

.classmanager-project-selected-files span {
    background: #eef2ff;
    border-radius: 6px;
    color: #334155;
    font-size: .8rem;
    padding: .4rem .55rem;
}

.classmanager-project-existing-files {
    border: 1px solid #edf2f7;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: .85rem;
}

.classmanager-project-existing-file-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.classmanager-project-existing-file {
    align-items: center;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    color: #1f2937;
    display: grid;
    gap: .15rem;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: .65rem;
    text-decoration: none;
}

.classmanager-project-existing-file:hover {
    border-color: #2563eb;
    color: #1f2937;
    text-decoration: none;
}

.classmanager-project-existing-file span {
    align-items: center;
    background: #eef2ff;
    border-radius: 7px;
    color: #2563eb;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    grid-row: span 2;
    height: 42px;
    justify-content: center;
}

.classmanager-project-existing-file strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classmanager-project-existing-file small {
    color: #64748b;
}

.special-orders-page {
    --so-bg: #f8fafc;
    --so-border: #d9e2ef;
    --so-border-soft: #edf2f7;
    --so-text: #172033;
    --so-muted: #64748b;
    --so-primary: #2563eb;
    --so-success: #16a34a;
    --so-warning: #d97706;
    --so-danger: #dc2626;
    --so-purple: #7c3aed;
    color: var(--so-text);
}

.preloader {
    pointer-events: none;
}

body:not(.modal-open) .modal-backdrop {
    display: none !important;
    pointer-events: none !important;
}

.modal:not(.show) {
    pointer-events: none !important;
}

.modal.show {
    pointer-events: auto;
}

.special-orders-heading {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.special-orders-heading-copy {
    min-width: 0;
}

.special-orders-subtitle {
    color: var(--so-muted);
    margin: .45rem 0 0;
    max-width: 720px;
}

.special-orders-actions,
.special-orders-bulk,
.special-orders-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.special-orders-actions {
    justify-content: flex-end;
}

.special-order-detail-head .special-orders-actions {
    gap: .6rem;
    padding-top: 1.75rem;
}

.special-orders-button,
.special-orders-icon-button,
.special-orders-page-button,
.special-orders-row-action {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    letter-spacing: 0;
}

.special-orders-button {
    min-height: 36px;
    padding: .45rem .95rem;
}

.special-orders-page .special-orders-button-primary {
    background: var(--so-primary);
    background-color: var(--so-primary);
    border-color: var(--so-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
}

.special-orders-page .special-orders-button-primary:hover,
.special-orders-page .special-orders-button-primary:focus {
    background: #1d4ed8;
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.special-orders-button-muted,
.special-orders-icon-button,
.special-orders-page-button,
.special-orders-row-action {
    background: #fff;
    border: 1px solid var(--so-border);
    color: #23324a;
}

.special-order-card-header .special-orders-button-muted,
.special-order-card-header .special-orders-icon-button,
.special-order-card-header .special-order-link-button {
    font-size: .75rem;
}

.special-orders-button-muted:hover,
.special-orders-icon-button:hover,
.special-orders-page-button:hover,
.special-orders-row-action:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.special-orders-button:disabled {
    background: #f1f5f9;
    border-color: #dbe3ef;
    box-shadow: none;
    color: #94a3b8;
}

.special-orders-icon-button,
.special-orders-page-button,
.special-orders-row-action {
    height: 36px;
    padding: 0;
    width: 36px;
}

.special-orders-summary-grid {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    margin-bottom: 1rem;
}

.special-orders-metric {
    align-items: center;
    background: #fff;
    border: 1px solid var(--so-border);
    border-radius: 8px;
    display: flex;
    gap: .6rem;
    min-height: 86px;
    padding: .75rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.special-orders-metric:hover {
    border-color: #cbd5e1;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    transform: translateY(-1px);
}

.special-orders-metric-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.special-orders-metric-icon .material-icons {
    font-size: 19px;
}

.special-orders-metric-copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.special-orders-metric-copy strong {
    color: #0f172a;
    font-size: 1.02rem;
    line-height: 1.2;
}

.special-orders-metric-label,
.special-orders-metric-copy span:last-child {
    color: var(--so-muted);
    font-size: .8125rem;
}

.special-orders-metric-primary .special-orders-metric-icon {
    background: #dbeafe;
    color: var(--so-primary);
}

.special-orders-metric-success .special-orders-metric-icon {
    background: #dcfce7;
    color: var(--so-success);
}

.special-orders-metric-danger .special-orders-metric-icon {
    background: #fee2e2;
    color: var(--so-danger);
}

.special-orders-panel {
    background: #fff;
    border: 1px solid var(--so-border);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .045);
    overflow: visible;
}

.special-orders-toolbar {
    align-items: end;
    background: #fff;
    border-bottom: 1px solid var(--so-border-soft);
    border-radius: 8px 8px 0 0;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(108px, .72fr)) auto;
    padding: .75rem;
    position: relative;
    z-index: 4;
}

.special-orders-search {
    align-self: end;
    min-width: 0;
    position: relative;
}

.special-orders-search .material-icons {
    color: #475569;
    left: .75rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.special-orders-search .form-control {
    height: 38px;
    padding-left: 2.65rem;
}

.special-orders-filter {
    display: grid;
    gap: .35rem;
    margin: 0;
    min-width: 0;
}

.special-orders-filter span {
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
}

.special-orders-search .form-control,
.special-orders-filter .form-control,
.special-orders-modal .form-control {
    background: #fff;
    border-color: #cfd8e5;
    border-radius: 6px;
    color: #172033;
    min-height: 38px;
}

.special-orders-filter .form-control {
    height: 38px;
    padding-left: .65rem;
    padding-right: 1.8rem;
}

.special-orders-search .form-control:focus,
.special-orders-filter .form-control:focus,
.special-orders-modal .form-control:focus {
    border-color: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.special-orders-check-button {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--so-border);
    border-radius: 6px;
    color: #23324a;
    display: inline-flex;
    font-weight: 600;
    gap: .45rem;
    margin: 0;
    min-height: 38px;
    padding: .45rem .6rem;
    white-space: nowrap;
}

.special-orders-check-button input,
.special-orders-row-check {
    accent-color: var(--so-primary);
    height: 16px;
    width: 16px;
}

.special-orders-bulk {
    align-self: end;
    flex-wrap: nowrap;
    min-width: 0;
}

.special-orders-bulk-transaction {
    display: grid;
    gap: .25rem;
    margin: 0;
    min-width: 210px;
}

.special-orders-bulk-transaction span,
.special-order-sidebar-payment-select span {
    color: #64748b;
    font-size: .68rem;
    font-weight: 750;
}

.special-orders-bulk-transaction .form-control {
    border: 1px solid var(--so-border);
    border-radius: 6px;
    font-size: .75rem;
    height: 38px;
    min-height: 38px;
}

.special-orders-bulk .dropdown-toggle {
    height: 38px;
    min-height: 38px;
    white-space: nowrap;
}

.special-orders-bulk .dropdown {
    position: relative;
}

.special-orders-bulk .dropdown-menu {
    bottom: auto !important;
    left: auto !important;
    margin-top: .45rem;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    transform: none !important;
    z-index: 1060;
}

.special-orders-table {
    table-layout: fixed;
    min-width: 980px;
}

.special-orders-table th {
    background: #fbfdff;
    border-top: 0;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: .9rem 1rem;
    vertical-align: middle;
    white-space: nowrap;
}

.special-orders-table td {
    border-color: var(--so-border-soft);
    color: #172033;
    padding: 1rem;
    vertical-align: middle;
}

.special-orders-table tbody tr {
    transition: background-color .15s ease;
}

.special-orders-table tbody tr:hover {
    background: #f8fafc;
}

.special-orders-table tr[hidden] {
    display: none;
}

.special-orders-checkbox-cell {
    width: 42px;
}

.special-orders-table th:nth-child(2),
.special-orders-table td:nth-child(2) {
    width: 92px;
}

.special-orders-table th:nth-child(3),
.special-orders-table td:nth-child(3) {
    width: 28%;
}

.special-orders-table th:nth-child(4),
.special-orders-table td:nth-child(4) {
    width: 132px;
}

.special-orders-table th:nth-child(5),
.special-orders-table td:nth-child(5) {
    width: 118px;
}

.special-orders-table th:nth-child(6),
.special-orders-table td:nth-child(6) {
    width: 142px;
}

.special-orders-table th:nth-child(7),
.special-orders-table td:nth-child(7) {
    width: 162px;
}

.special-orders-table th:nth-child(8),
.special-orders-table td:nth-child(8) {
    width: 62px;
}

.special-orders-id,
.special-orders-title,
.special-orders-date,
.special-orders-money {
    color: #0f172a;
    font-weight: 700;
}

.special-orders-title {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

a.special-orders-id:hover,
a.special-orders-title:hover {
    color: var(--so-primary);
    text-decoration: none;
}

.special-orders-description {
    color: var(--so-muted);
    display: -webkit-box;
    font-size: .8125rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.45;
    margin-top: .25rem;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.special-orders-estimate {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 700;
    gap: .25rem;
    margin-top: .35rem;
}

.special-orders-estimate .material-icons {
    color: #64748b;
    font-size: 15px;
}

.special-orders-person {
    align-items: center;
    display: inline-flex;
    gap: .55rem;
    max-width: 100%;
    white-space: normal;
}

.special-orders-person-name {
    display: -webkit-box;
    line-height: 1.25;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.special-orders-person small {
    color: var(--so-muted);
    display: block;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
}

.special-orders-avatar {
    align-items: center;
    background: #eef2f7;
    border: 1px solid #dce5f0;
    border-radius: 50%;
    color: #475569;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: .75rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.special-orders-due {
    font-size: .8125rem;
    margin-top: .2rem;
}

.special-orders-due-primary {
    color: var(--so-primary);
}

.special-orders-due-warning {
    color: var(--so-warning);
}

.special-orders-due-danger {
    color: var(--so-danger);
}

.special-orders-due-muted {
    color: var(--so-muted);
}

.special-orders-badge {
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .5rem;
    white-space: nowrap;
}

.special-orders-badge-primary {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.special-orders-badge-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.special-orders-badge-warning {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.special-orders-badge-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.special-orders-badge-muted {
    background: #f1f5f9;
    border-color: #dbe3ef;
    color: #475569;
}

.special-orders-badge-purple {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

.special-orders-progress {
    display: grid;
    gap: .28rem;
    min-width: 96px;
}

.special-orders-progress span:first-child {
    color: #23324a;
    font-size: .8125rem;
    font-weight: 700;
}

.special-orders-progress-track {
    background: #e5eaf1;
    border-radius: 999px;
    display: block;
    height: 5px;
    overflow: hidden;
}

.special-orders-progress-bar {
    border-radius: inherit;
    display: block;
    height: 100%;
}

.special-orders-progress-primary {
    background: var(--so-primary);
}

.special-orders-progress-success {
    background: var(--so-success);
}

.special-orders-progress-warning {
    background: var(--so-warning);
}

.special-orders-progress-danger {
    background: var(--so-danger);
}

.special-orders-progress-muted {
    background: #94a3b8;
}

.special-orders-progress-purple {
    background: var(--so-purple);
}

.special-orders-financial-meta {
    align-items: center;
    color: var(--so-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .8125rem;
    margin-top: .35rem;
}

.special-orders-state {
    display: grid;
    gap: .5rem;
}

.special-orders-state-top {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.special-orders-priority-flag {
    align-items: center;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    flex: 0 0 auto;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.special-orders-priority-flag .material-icons {
    font-size: 18px;
}

.special-orders-priority-flag-danger {
    color: var(--so-danger);
}

.special-orders-priority-flag-warning {
    color: var(--so-warning);
}

.special-orders-priority-flag-muted {
    color: #94a3b8;
}

.special-orders-row-action .material-icons {
    font-size: 20px;
}

.special-orders-menu {
    border-color: var(--so-border);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
    padding: .35rem;
}

.special-orders-menu .dropdown-item {
    align-items: center;
    border-radius: 6px;
    color: #23324a;
    display: flex;
    font-size: .875rem;
    gap: .55rem;
    padding: .55rem .65rem;
}

.special-orders-menu .dropdown-item:hover {
    background: #f1f5f9;
}

.special-orders-menu form {
    margin: 0;
}

.special-orders-menu .dropdown-item:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: .75;
}

.special-orders-menu .dropdown-item .material-icons {
    color: #475569;
    font-size: 18px;
}

.special-orders-menu .special-order-whatsapp-menu-item {
    color: #15803d;
}

.special-orders-menu .special-order-whatsapp-menu-item .fa-whatsapp {
    color: #25d366;
    font-size: 18px;
    text-align: center;
    width: 18px;
}

.special-orders-delete-modal .modal-body {
    color: #475569;
    font-size: .875rem;
}

.special-orders-delete-heading {
    align-items: center;
    display: flex;
    gap: .8rem;
}

.special-orders-delete-icon {
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #475569;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.special-orders-delete-icon .material-icons {
    font-size: 22px;
}

.special-orders-footer {
    align-items: center;
    border-top: 1px solid var(--so-border-soft);
    color: #475569;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .85rem 1rem;
}

.special-orders-page-button {
    height: 34px;
    min-width: 34px;
    width: auto;
}

.special-orders-page-button.active {
    background: var(--so-primary);
    border-color: var(--so-primary);
    color: #fff;
}

.special-orders-page-button:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.special-orders-modal {
    border: 0;
    border-radius: 8px;
    display: flex;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

.special-orders-modal .modal-header,
.special-orders-modal .modal-footer {
    border-color: var(--so-border-soft);
    flex: 0 0 auto;
}

.special-orders-modal .modal-body {
    flex: 1 1 auto;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.special-orders-modal label {
    color: #475569;
    font-size: .8125rem;
    font-weight: 700;
}

.special-orders-rich-editor {
    background: #fff;
    border: 1px solid #cfd8e5;
    border-radius: 6px;
    overflow: hidden;
}

.special-orders-rich-toolbar {
    align-items: center;
    background: #fbfdff;
    border-bottom: 1px solid var(--so-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    min-height: 40px;
    padding: .35rem .5rem;
}

.special-orders-rich-toolbar .btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #23324a;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.special-orders-rich-toolbar .btn:hover,
.special-orders-rich-toolbar .btn.active {
    background: #eef2ff;
    color: var(--so-primary);
}

.special-orders-rich-toolbar .material-icons {
    font-size: 18px;
}

.special-orders-rich-divider {
    background: #dbe3ef;
    height: 22px;
    margin: 0 .25rem;
    width: 1px;
}

.special-orders-rich-input {
    color: #172033;
    font-size: .875rem;
    line-height: 1.6;
    max-height: 260px;
    min-height: 132px;
    outline: 0;
    overflow-y: auto;
    padding: .85rem 1rem;
}

.special-orders-modal .special-orders-rich-input {
    max-height: 220px;
}

.special-orders-rich-input:focus {
    box-shadow: inset 0 0 0 3px rgba(37, 99, 235, .1);
}

.special-orders-rich-input p,
.special-orders-rich-input ul,
.special-orders-rich-input ol,
.special-orders-rich-input blockquote {
    margin-bottom: .75rem;
}

.special-orders-rich-input p:last-child,
.special-orders-rich-input ul:last-child,
.special-orders-rich-input ol:last-child,
.special-orders-rich-input blockquote:last-child {
    margin-bottom: 0;
}

.special-orders-rich-input ul,
.special-orders-rich-input ol {
    padding-left: 1.15rem;
}

.special-orders-rich-input blockquote {
    border-left: 3px solid #dbe3ef;
    color: #475569;
    padding-left: .85rem;
}

.special-orders-upload-zone {
    align-items: center;
    background: #fbfdff;
    border: 1px dashed #a8b6ca;
    border-radius: 8px;
    color: var(--so-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    margin: 0;
    min-height: 132px;
    padding: 1rem;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.special-orders-upload-zone:hover,
.special-orders-upload-zone.is-dragging {
    background: #f4f7ff;
    border-color: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.special-orders-upload-input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.special-orders-upload-icon {
    align-items: center;
    background: #dbeafe;
    border-radius: 8px;
    color: var(--so-primary);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.special-orders-upload-icon .material-icons {
    font-size: 22px;
}

.special-orders-upload-zone strong {
    color: #172033;
    font-size: .875rem;
}

.special-orders-upload-zone small {
    color: var(--so-muted);
    font-size: .75rem;
}

.special-orders-upload-list {
    display: grid;
    gap: .5rem;
    margin-top: .65rem;
}

.special-orders-upload-heading {
    color: #475569;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.special-orders-upload-item {
    align-items: center;
    background: #fff;
    border: 1px solid var(--so-border-soft);
    border-radius: 6px;
    color: #172033;
    display: flex;
    gap: .65rem;
    min-height: 42px;
    padding: .55rem .7rem;
}

.special-orders-upload-item > div {
    min-width: 0;
}

.special-orders-upload-item .material-icons {
    color: var(--so-primary);
    font-size: 19px;
}

.special-orders-upload-item strong {
    display: block;
    font-size: .8125rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.special-orders-upload-item small {
    color: var(--so-muted);
    display: block;
    font-size: .75rem;
    margin-top: .15rem;
}

.special-orders-upload-remove {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--so-border-soft);
    border-radius: 5px;
    color: #64748b;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    width: 28px;
}

.special-orders-upload-remove:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.special-orders-upload-remove .material-icons {
    color: inherit;
    font-size: 17px;
}

.special-order-detail-page .page__heading-container {
    padding-bottom: 0;
}

.special-order-detail-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.special-order-detail-title {
    min-width: 0;
}

.special-order-detail-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .5rem;
}

.special-order-detail-title-row h1 {
    color: #172033;
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.2;
}

.special-order-tabs {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    gap: .25rem;
    margin-top: 1.35rem;
    overflow-x: auto;
    padding: .25rem;
    scrollbar-width: none;
}

.special-order-tabs::-webkit-scrollbar {
    display: none;
}

.special-order-tabs a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #53657d;
    display: inline-flex;
    flex: 1 1 0;
    font-size: .875rem;
    font-weight: 650;
    gap: .5rem;
    justify-content: center;
    min-height: 38px;
    padding: .55rem .85rem;
    white-space: nowrap;
}

.special-order-tabs a:hover,
.special-order-tabs a.active {
    text-decoration: none;
}

.special-order-tabs a:hover {
    background: rgba(255, 255, 255, .58);
    color: #172033;
}

.special-order-tabs a.active {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    color: #172033;
}

.special-order-tabs .material-icons {
    font-size: 17px;
    opacity: .9;
}

.special-order-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(420px, 1.4fr) minmax(290px, .82fr) minmax(260px, .66fr);
}

.special-order-detail-grid-two {
    grid-template-columns: minmax(620px, 1fr) minmax(240px, 300px);
}

.special-order-main,
.special-order-side,
.special-order-rail {
    display: grid;
    gap: 1rem;
}

.special-order-main,
.special-order-side {
    align-content: start;
}

.special-order-rail {
    align-content: start;
}

.special-order-card {
    background: #fff;
    border: 1px solid var(--so-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .035);
    overflow: hidden;
}

.special-order-card-header {
    align-items: center;
    border-bottom: 1px solid var(--so-border-soft);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-height: 52px;
    padding: .75rem 1rem;
}

.special-order-card-title {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: .9rem;
    gap: .65rem;
    min-width: 0;
}

.special-order-header-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
}

.special-order-inline-action {
    margin: 0;
}

.special-order-card-subtitle {
    color: var(--so-muted);
    font-size: .8125rem;
    line-height: 1.45;
    margin: .35rem 0 0 2.6rem;
}

.special-order-card-icon,
.special-order-mini-icon {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.special-order-card-icon .material-icons {
    font-size: 18px;
}

.special-order-card-icon-primary {
    background: #dbeafe;
    color: var(--so-primary);
}

.special-order-card-icon-success {
    background: #dcfce7;
    color: var(--so-success);
}

.special-order-card-icon-purple {
    background: #ede9fe;
    color: var(--so-purple);
}

.special-order-card-icon-warning {
    background: #fef3c7;
    color: var(--so-warning);
}

.special-order-mini-icon {
    background: #f8fafc;
    border: 1px solid var(--so-border-soft);
    color: #475569;
    font-weight: 750;
}

.special-order-title-muted {
    color: var(--so-muted);
    font-weight: 500;
}

.special-order-fullscreen {
    min-height: 32px;
    padding: .35rem .65rem;
}

.special-order-editor-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--so-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    min-height: 42px;
    padding: .5rem 1rem;
}

.special-order-editor-toolbar .material-icons {
    color: #172033;
    font-size: 18px;
}

.special-order-rich-copy {
    color: #0f172a;
    font-size: .875rem;
    line-height: 1.65;
    padding: 1rem;
}

.special-order-instructions-editor {
    border: 0;
    border-radius: 0 0 8px 8px;
}

.special-order-instructions-editor .special-orders-rich-input {
    min-height: 96px;
}

.special-order-rich-copy p {
    margin-bottom: 1rem;
}

.special-order-rich-copy p:last-child {
    margin-bottom: 0;
}

.special-order-rich-copy ul {
    margin-bottom: 1rem;
    padding-left: 1.15rem;
}

.special-order-note-copy {
    color: #172033;
    font-size: .875rem;
    line-height: 1.65;
    padding: 1rem;
}

.special-order-note-copy p {
    margin-bottom: .75rem;
}

.special-order-note-copy p:last-child {
    margin-bottom: 0;
}

.special-order-note-editor {
    padding: 1rem;
}

.special-order-note-editor textarea {
    border: 1px solid var(--so-border);
    border-radius: 8px;
    color: #172033;
    font-size: .875rem;
    line-height: 1.55;
    min-height: 150px;
    padding: .85rem 1rem;
    resize: vertical;
    width: 100%;
}

.special-order-note-editor textarea:focus {
    border-color: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(45, 100, 235, .12);
    outline: 0;
}

.special-order-last-updated {
    display: grid;
    gap: .35rem;
    padding: 1rem;
}

.special-order-last-updated span {
    color: var(--so-muted);
    font-size: .8125rem;
    font-weight: 650;
}

.special-order-last-updated strong {
    color: #172033;
    font-size: .875rem;
}

.special-order-link-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--so-primary);
    display: inline-flex;
    font-weight: 650;
    gap: .35rem;
    padding: .25rem;
}

.special-order-link-button:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.special-order-file-list {
    display: grid;
}

.special-order-file-list-roomy .special-order-file {
    min-height: 58px;
}

.special-order-file {
    align-items: center;
    border-top: 1px solid var(--so-border-soft);
    display: grid;
    gap: .75rem;
    grid-template-columns: 34px minmax(0, 1fr) 38px 38px;
    padding: .85rem 1rem;
}

.special-order-file:first-child {
    border-top: 0;
}

.special-order-file strong {
    color: #172033;
    display: block;
    font-size: .875rem;
}

.special-order-file small {
    color: var(--so-muted);
    display: block;
    margin-top: .2rem;
}

.special-order-file-type {
    align-items: center;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    font-size: .65rem;
    font-weight: 800;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.special-order-file-primary {
    background: var(--so-primary);
}

.special-order-file-danger {
    background: var(--so-danger);
}

.special-order-dropzone {
    align-items: center;
    border: 1px dashed #a7b6cc;
    border-radius: 8px;
    color: var(--so-muted);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1rem;
    min-height: 148px;
    padding: 1.25rem;
    text-align: center;
}

.special-order-dropzone.is-dragging {
    background: #f4f8ff;
    border-color: var(--so-primary);
}

.special-order-dropzone.is-uploading {
    background: #f8fbff;
    border-color: var(--so-primary);
    pointer-events: none;
}

.special-order-dropzone .material-icons {
    color: #53657d;
    font-size: 34px;
    margin-bottom: .35rem;
}

.special-order-dropzone strong {
    color: #23324a;
}

.special-order-submission-note {
    color: #334155;
    display: grid;
    gap: .45rem;
    margin: .75rem auto .9rem;
    max-width: 560px;
    text-align: left;
    width: 100%;
}

.special-order-submission-note span {
    font-size: .78rem;
    font-weight: 750;
}

.special-order-submission-note textarea {
    border: 1px solid var(--so-border);
    border-radius: 8px;
    color: #172033;
    min-height: 82px;
    padding: .7rem .85rem;
    resize: vertical;
    width: 100%;
}

.special-order-submission-note textarea:focus {
    border-color: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(45, 100, 235, .12);
    outline: 0;
}

.special-order-upload-progress {
    display: grid;
    gap: .45rem;
    margin: .25rem auto .75rem;
    max-width: 560px;
    width: 100%;
}

.special-order-upload-progress[hidden] {
    display: none;
}

.special-order-upload-progress-head {
    align-items: center;
    color: #334155;
    display: flex;
    font-size: .78rem;
    font-weight: 750;
    justify-content: space-between;
}

.special-order-upload-progress-track {
    background: #e8eef7;
    border-radius: 999px;
    height: 9px;
    overflow: hidden;
}

.special-order-upload-progress-track span {
    background: linear-gradient(90deg, var(--so-primary), #20b86f);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .18s ease;
    width: 0;
}

.special-order-upload-message {
    color: #53657d;
    display: block;
    font-weight: 650;
    min-height: 1.2rem;
}

.special-order-upload-message.is-error {
    color: var(--so-danger);
}

.special-order-attachment-upload {
    border-top: 1px solid var(--so-border-soft);
    display: grid;
    gap: .8rem;
    padding: 1rem 1.25rem 1.1rem;
}

.special-order-attachment-upload[hidden] {
    display: none;
}

.special-order-attachment-picker {
    align-items: center;
    background: #f8fbff;
    border: 1px dashed #a9b9d2;
    border-radius: 8px;
    color: #334155;
    display: grid;
    gap: .35rem;
    justify-items: center;
    margin: 0;
    min-height: 116px;
    padding: 1rem;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.special-order-attachment-picker:hover,
.special-order-attachment-picker.is-dragging {
    background: #f1f6ff;
    border-color: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(45, 100, 235, .08);
}

.special-order-attachment-input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.special-order-attachment-picker-icon {
    align-items: center;
    background: #e8f0ff;
    border-radius: 8px;
    color: var(--so-primary);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.special-order-attachment-picker-icon .material-icons {
    font-size: 22px;
}

.special-order-attachment-picker strong {
    color: #172033;
    font-size: .9rem;
    font-weight: 750;
}

.special-order-attachment-picker small {
    color: var(--so-muted);
    font-size: .76rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.special-order-attachment-upload.has-files .special-order-attachment-picker {
    background: #f4fff8;
    border-color: #7ddaa0;
}

.special-order-attachment-upload.has-files .special-order-attachment-picker-icon {
    background: #dcfce7;
    color: #16a34a;
}

.special-order-attachment-note {
    margin: 0;
    max-width: none;
}

.special-order-upload-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.special-order-dropzone .btn {
    margin-top: .7rem;
}

.special-order-dropzone small {
    color: var(--so-muted);
    font-size: .75rem;
    margin-top: .65rem;
}

.special-order-dropzone-large {
    min-height: 190px;
}

.special-order-table {
    min-width: 760px;
}

.special-order-table th {
    background: #fbfdff;
    border-top: 0;
    color: #64748b;
    font-size: .75rem;
    font-weight: 750;
    padding: .85rem 1rem;
    vertical-align: middle;
    white-space: nowrap;
}

.special-order-table td {
    border-color: var(--so-border-soft);
    color: #172033;
    font-size: .8125rem;
    padding: .95rem 1rem;
    vertical-align: middle;
}

.special-order-table td strong {
    color: #172033;
    display: block;
    font-size: .8125rem;
}

.special-order-table td small {
    color: var(--so-muted);
    display: block;
    margin-top: .2rem;
}

.special-order-submission-file-cell {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.special-order-submission-actions {
    display: inline-flex;
    gap: .35rem;
    white-space: nowrap;
}

.special-order-submission-actions form {
    margin: 0;
}

.special-order-file > form {
    margin: 0;
}

.special-order-file-action {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #243651;
    display: inline-flex;
    flex: 0 0 34px;
    font-size: .875rem;
    height: 34px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 34px;
}

.special-order-file-action:hover,
.special-order-file-action:focus {
    background: #eef3fb;
    border-color: #d9e2ef;
    color: #18263d;
    text-decoration: none;
}

.special-order-file-action i {
    line-height: 1;
}

.special-order-delete-file {
    color: #e53935;
}

.special-order-delete-file:hover {
    background: #fff0f0;
    border-color: #ffcdd2;
    color: #c62828;
}

.special-order-whatsapp-share {
    align-items: center;
    background: #25d366;
    border: 1px solid #25d366;
    border-radius: .45rem;
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: .45rem;
    min-height: 40px;
    padding: .55rem .9rem;
    white-space: nowrap;
}

.special-order-whatsapp-share:hover,
.special-order-whatsapp-share:focus {
    background: #1ebe5d;
    border-color: #1ebe5d;
    color: #fff;
    text-decoration: none;
}

.special-order-whatsapp-share .fa-whatsapp {
    font-size: 1.1rem;
}

.special-order-empty-strip {
    align-items: center;
    border-top: 1px solid var(--so-border-soft);
    color: var(--so-muted);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    justify-content: center;
    min-height: 112px;
    padding: 1.25rem;
    text-align: center;
}

.special-order-empty-strip .material-icons {
    color: #64748b;
    font-size: 30px;
}

.special-order-empty-strip strong {
    color: #23324a;
}

.special-order-payment-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.special-order-payment-summary div {
    border-left: 1px solid var(--so-border-soft);
    display: grid;
    gap: .45rem;
    min-height: 96px;
    padding: 1.25rem;
}

.special-order-payment-summary div:first-child {
    border-left: 0;
}

.special-order-payment-summary span {
    color: var(--so-muted);
    font-size: .8125rem;
    font-weight: 650;
}

.special-order-payment-summary strong {
    color: #0f172a;
    font-size: 1.25rem;
    line-height: 1.1;
}

.special-order-payment-summary .special-orders-badge {
    color: #dc2626;
    font-size: .75rem;
}

.special-order-payment-editor {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1rem 1.25rem;
}

.special-order-payment-editor label {
    display: grid;
    gap: .45rem;
    margin: 0;
}

.special-order-payment-editor span {
    color: var(--so-muted);
    font-size: .78rem;
    font-weight: 750;
}

.special-order-payment-editor input,
.special-order-payment-editor select {
    border: 1px solid var(--so-border);
    border-radius: 8px;
    color: #172033;
    min-height: 42px;
    padding: .62rem .75rem;
    width: 100%;
}

.special-order-payment-editor input:focus,
.special-order-payment-editor select:focus {
    border-color: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(45, 100, 235, .12);
    outline: 0;
}

.special-order-payment-editor-wide {
    grid-column: span 2;
}

.special-order-payment-help {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--so-border-soft);
    border-radius: 8px;
    color: #475569;
    display: flex;
    gap: .5rem;
    grid-column: span 2;
    padding: .65rem .75rem;
}

.special-order-payment-help .material-icons {
    color: var(--so-primary);
    font-size: 18px;
}

.special-order-payment-help a {
    color: var(--so-primary);
    font-weight: 750;
}

.special-order-sidebar-payment-select {
    display: grid;
    gap: .35rem;
    margin: 0 0 .65rem;
}

.special-order-sidebar-payment-select .form-control {
    border: 1px solid var(--so-border);
    border-radius: 6px;
    min-height: 38px;
}

.payments-page .payment-entry-panel {
    margin-bottom: 1rem;
}

.payment-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--so-border-soft);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.payment-entry-form {
    align-items: end;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(130px, .6fr) minmax(130px, .6fr) minmax(210px, 1fr) minmax(240px, 1.2fr) auto;
    padding: 1rem 1.25rem;
}

.payment-entry-form label {
    display: grid;
    gap: .4rem;
    margin: 0;
}

.payment-entry-form label span {
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
}

.payment-entry-form .form-control {
    border: 1px solid var(--so-border);
    border-radius: 7px;
    min-height: 40px;
}

.payments-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.6fr);
}

.payment-detail-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
}

.payment-detail-actions .special-orders-button {
    pointer-events: auto;
}

.payment-modal-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-modal-grid label {
    display: grid;
    gap: .4rem;
    margin: 0;
}

.payment-modal-grid label span {
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
}

.payment-modal-grid .form-control {
    border: 1px solid var(--so-border);
    border-radius: 7px;
    min-height: 40px;
}

.payment-modal-grid textarea.form-control {
    resize: vertical;
}

.payment-modal-wide {
    grid-column: 1 / -1;
}

.payment-modal-note {
    background: #f8fafc;
    border: 1px solid var(--so-border-soft);
    border-radius: 7px;
    color: #64748b;
    font-size: .82rem;
    margin: 1rem 0 0;
    padding: .7rem .8rem;
}

.payment-list-panel,
.payment-detail-panel {
    min-width: 0;
}

.payment-transaction-list {
    display: grid;
    gap: .5rem;
    max-height: 620px;
    overflow: auto;
    padding: .75rem;
}

.payment-transaction-item {
    align-items: center;
    border: 1px solid var(--so-border-soft);
    border-radius: 8px;
    color: #172033;
    display: grid;
    gap: .7rem;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: .8rem;
    text-decoration: none;
}

.payment-transaction-item:hover,
.payment-transaction-item.active {
    border-color: var(--so-primary);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .08);
    color: #172033;
    text-decoration: none;
}

.payment-transaction-icon {
    align-items: center;
    background: #eef2ff;
    border-radius: 8px;
    color: var(--so-primary);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.payment-transaction-main,
.payment-transaction-amount {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.payment-transaction-main strong,
.payment-transaction-amount strong {
    color: #0f172a;
    font-size: .92rem;
}

.payment-transaction-main small,
.payment-transaction-main em,
.payment-transaction-amount small {
    color: #64748b;
    font-size: .76rem;
}

.payment-transaction-main em {
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-transaction-amount {
    text-align: right;
}

.special-order-payment-summary-editable {
    border-top: 1px solid var(--so-border-soft);
}

.special-order-payment-actions {
    border-top: 1px solid var(--so-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
}

.special-order-key-values {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 1rem;
}

.special-order-due-date-form {
    border-bottom: 1px solid var(--so-border-soft);
    display: grid;
    gap: .6rem;
    padding: 1rem;
}

.special-order-due-date-form label {
    color: var(--so-muted);
    font-size: .8125rem;
    font-weight: 600;
    margin: 0;
}

.special-order-due-date-form > div {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.special-order-due-date-form .form-control {
    border-color: var(--so-border);
    border-radius: 8px;
    color: #172033;
    font-size: .875rem;
    font-weight: 700;
    min-height: 42px;
}

.special-order-key-values div {
    align-items: center;
    display: flex;
    gap: .85rem;
    justify-content: space-between;
}

.special-order-key-values-compact div {
    border-top: 1px solid var(--so-border-soft);
    padding-top: .85rem;
}

.special-order-key-values-compact div:first-child {
    border-top: 0;
    padding-top: 0;
}

.special-order-key-values dt {
    color: var(--so-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.special-order-key-values dd {
    color: #172033;
    font-size: .875rem;
    font-weight: 700;
    margin: 0;
    text-align: right;
}

.special-order-wide-button {
    margin: 0 1rem 1rem;
    width: calc(100% - 2rem);
}

.special-order-progress-body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.special-order-progress-body .special-orders-progress {
    gap: .55rem;
}

.special-order-time-tracker {
    align-items: center;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: .7rem;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: .75rem;
}

.special-order-time-toggle {
    align-items: center;
    background: #f8fafc;
    border: 0;
    border-radius: 50%;
    color: #0f172a;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.special-order-time-toggle .material-icons {
    font-size: 21px;
}

.special-order-time-tracker.is-running .special-order-time-toggle {
    background: #ef4444;
    color: #fff;
}

.special-order-time-main {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.special-order-time-main span,
.special-order-time-state {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 700;
}

.special-order-time-main strong {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.1;
}

.special-order-time-state {
    background: rgba(148, 163, 184, .14);
    border-radius: 999px;
    padding: .25rem .5rem;
    white-space: nowrap;
}

.special-order-time-tracker.is-running .special-order-time-state {
    background: rgba(239, 68, 68, .18);
    color: #fecaca;
}

.special-order-time-stats {
    display: grid;
    gap: .65rem;
    margin: 0;
}

.special-order-time-stats div {
    align-items: center;
    border-top: 1px solid var(--so-border-soft);
    display: flex;
    justify-content: space-between;
    padding-top: .65rem;
}

.special-order-time-stats div:first-child {
    border-top: 0;
    padding-top: 0;
}

.special-order-time-stats dt {
    color: var(--so-muted);
    font-size: .78rem;
    font-weight: 700;
}

.special-order-time-stats dd {
    align-items: center;
    color: #172033;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 750;
    gap: .35rem;
    margin: 0;
}

.special-order-time-stats .material-icons {
    color: #64748b;
    font-size: 17px;
}

.special-order-time-estimate-form {
    align-items: end;
    border-top: 1px solid var(--so-border-soft);
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) 58px 58px auto;
    padding-top: .8rem;
}

.special-order-time-estimate-form > span {
    color: var(--so-muted);
    font-size: .78rem;
    font-weight: 750;
}

.special-order-time-estimate-form label {
    align-items: center;
    border: 1px solid var(--so-border);
    border-radius: 7px;
    display: flex;
    gap: .25rem;
    height: 36px;
    margin: 0;
    padding: 0 .45rem;
}

.special-order-time-estimate-form input {
    border: 0;
    color: #172033;
    font-weight: 750;
    min-width: 0;
    padding: 0;
    width: 100%;
}

.special-order-time-estimate-form input:focus {
    outline: 0;
}

.special-order-time-estimate-form small {
    color: var(--so-muted);
    font-weight: 700;
}

.special-order-time-estimate-form .special-orders-button {
    height: 36px;
    min-height: 36px;
    padding: .35rem .7rem;
}

.special-order-timeline {
    display: grid;
    padding: .4rem 1rem 1rem;
}

.special-order-timeline-item {
    border-left: 1px solid #dbe3ef;
    display: grid;
    gap: .25rem;
    padding: .85rem 0 .85rem 1.35rem;
    position: relative;
}

.special-order-timeline-item::before {
    background: #94a3b8;
    border: 3px solid #f8fafc;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: -6px;
    position: absolute;
    top: 1rem;
    width: 12px;
}

.special-order-timeline-item.active::before {
    background: var(--so-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.special-order-timeline-item strong {
    color: #172033;
    font-size: .875rem;
}

.special-order-timeline-item small {
    color: var(--so-muted);
}

.special-order-timeline-item .special-orders-badge {
    justify-self: start;
}

.special-order-empty-state {
    align-items: center;
    color: var(--so-muted);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    min-height: 140px;
    padding: 1rem;
    text-align: center;
}

.special-order-empty-state .material-icons {
    color: #64748b;
    font-size: 42px;
}

.special-order-empty-state strong {
    color: #23324a;
}

.special-order-empty-state-large {
    min-height: 250px;
}

.special-order-activity-card {
    min-height: 620px;
}

.special-order-activity-list {
    display: grid;
    gap: 0;
    padding: 1.35rem 1.4rem;
}

.special-order-activity-item {
    display: grid;
    gap: 1rem;
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 76px;
    position: relative;
}

.special-order-activity-item::before {
    background: #e2e8f0;
    bottom: 0;
    content: "";
    left: 5px;
    position: absolute;
    top: 16px;
    width: 1px;
}

.special-order-activity-item:last-child::before {
    display: none;
}

.special-order-activity-dot {
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dbe3ef;
    height: 12px;
    margin-top: .25rem;
    width: 12px;
    z-index: 1;
}

.special-order-activity-item strong {
    color: #172033;
    display: block;
    font-size: .875rem;
    margin-bottom: .3rem;
}

.special-order-activity-item small,
.special-order-activity-item span:not(.special-order-activity-dot) {
    color: var(--so-muted);
    display: block;
    font-size: .8125rem;
    line-height: 1.45;
}

.special-order-activity-primary .special-order-activity-dot {
    background: var(--so-primary);
}

.special-order-activity-success .special-order-activity-dot {
    background: var(--so-success);
}

.special-order-activity-warning .special-order-activity-dot {
    background: #f59e0b;
}

.special-order-activity-muted .special-order-activity-dot {
    background: #94a3b8;
}

@media (max-width: 1399.98px) {
    .special-order-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    }

    .special-order-detail-grid-two {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    }

    .special-order-rail {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr);
    }
}

@media (max-width: 991.98px) {
    .classmanager-milestone-accordion {
        grid-template-columns: 1fr;
    }

    .classmanager-milestone-detail-panel {
        min-height: auto;
    }

    .classmanager-milestone-detail-panel + .classmanager-milestone-detail-panel {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }

    .special-order-detail-head {
        flex-direction: column;
    }

    .special-order-detail-head .special-orders-actions {
        padding-top: 0;
    }

    .special-order-detail-grid,
    .special-order-rail {
        grid-template-columns: 1fr;
    }

    .special-order-tabs a {
        flex: 0 0 auto;
    }

    .special-order-payment-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .special-order-payment-editor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .special-order-payment-summary div:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .special-order-detail-title-row h1 {
        font-size: 1.35rem;
    }

    .special-order-card-header,
    .special-order-file,
    .special-order-key-values div {
        align-items: flex-start;
    }

    .special-order-card-header {
        flex-direction: column;
    }

    .special-order-header-actions,
    .special-order-inline-action,
    .special-order-whatsapp-share {
        justify-content: center;
        width: 100%;
    }

    .special-order-file {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .special-order-file .special-orders-icon-button {
        width: 100%;
    }

    .special-order-key-values div {
        flex-direction: column;
        gap: .35rem;
    }

    .special-order-due-date-form > div {
        grid-template-columns: 1fr;
    }

    .special-order-payment-editor,
    .special-order-payment-summary {
        grid-template-columns: 1fr;
    }

    .special-order-payment-editor-wide {
        grid-column: auto;
    }

    .special-order-payment-actions {
        justify-content: stretch;
    }

    .special-order-payment-actions .special-orders-button {
        flex: 1 1 100%;
    }

    .special-order-key-values dd {
        text-align: left;
    }

    .special-order-payment-summary {
        grid-template-columns: 1fr;
    }

    .special-order-payment-summary div {
        border-left: 0;
        border-top: 1px solid var(--so-border-soft);
    }

    .special-order-payment-summary div:first-child {
        border-top: 0;
    }
}

@media (max-width: 1399.98px) {
    .special-orders-summary-grid {
        grid-template-columns: repeat(6, minmax(104px, 1fr));
    }

    .special-orders-toolbar {
        grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(100px, .65fr)) auto;
    }

    .special-orders-search,
    .special-orders-bulk {
        grid-column: auto;
    }

    .special-orders-bulk {
        flex-wrap: nowrap;
    }

    .special-orders-bulk .dropdown-toggle {
        padding-left: .6rem;
        padding-right: .6rem;
    }
}

@media (max-width: 991.98px) {
    .special-orders-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .special-orders-actions {
        justify-content: flex-start;
    }

    .special-orders-summary-grid,
    .special-orders-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .special-orders-search,
    .special-orders-bulk {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .special-orders-actions,
    .special-orders-bulk,
    .special-orders-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .special-orders-button,
    .special-orders-icon-button,
    .special-orders-bulk .dropdown,
    .special-orders-bulk .dropdown-toggle,
    .special-orders-check-button,
    .special-orders-pagination {
        width: 100%;
    }

    .special-orders-summary-grid,
    .special-orders-toolbar {
        grid-template-columns: 1fr;
    }

    .special-orders-metric {
        min-height: 96px;
    }
}

body.classmanager-delete-mode .classmanager-file-action-group .btn:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

body.classmanager-delete-mode .classmanager-file-action-group .btn + .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-left: -1px;
}

[dir] .classmanager-task-card-submitted .classmanager-submission {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

[dir] .classmanager-task-card-complete .classmanager-submission {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.classmanager-discussion {
    border-top: 1px solid #edf0f5;
    padding-top: 1rem;
}

.classmanager-discussion-comment {
    display: flex;
}

.classmanager-avatar-initials {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
}

[dir] .avatar-title.classmanager-avatar-owner {
    background-color: #4f46e5;
    color: #fff;
}

[dir] .avatar-title.classmanager-avatar-student-blue {
    background-color: #dbeafe;
    color: #1d4ed8;
}

[dir] .avatar-title.classmanager-avatar-student-amber {
    background-color: #fef3c7;
    color: #92400e;
}

[dir] .avatar-title.classmanager-avatar-student-rose {
    background-color: #ffe4e6;
    color: #be123c;
}

[dir] .avatar-title.classmanager-avatar-student-teal {
    background-color: #ccfbf1;
    color: #0f766e;
}

[dir] .avatar-title.classmanager-avatar-reply {
    background-color: #d1fae5;
    color: #047857;
}

.classmanager-discussion-post {
    background: #fff;
}

.classmanager-thread {
    border-top: 1px solid #edf0f5;
    padding: 1rem 0;
}

.classmanager-thread .classmanager-rich-text {
    line-height: 1.55;
}

.classmanager-thread-reply .classmanager-rich-text {
    line-height: 1.5;
}

.classmanager-thread:last-child {
    padding-bottom: 0;
}

.classmanager-thread-replies {
    margin-top: 1rem;
    padding-left: 1.25rem;
}

.classmanager-thread-reply {
    background: #f8f9fb;
    border: 1px solid #edf0f5;
    border-radius: 6px;
    display: flex;
    margin-top: .75rem;
    padding: .85rem;
}

.classmanager-thread-reply:first-child {
    margin-top: 0;
}

.classmanager-quill {
    height: 180px;
}

.classmanager-discussion-post-modal .modal-content {
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

.classmanager-discussion-post-modal form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
    min-height: 0;
}

.classmanager-discussion-post-body {
    flex: 1 1 auto;
    max-height: calc(100vh - 190px);
    min-height: 0;
    overflow-y: auto;
}

.classmanager-discussion-post-modal .classmanager-quill {
    display: flex;
    flex-direction: column;
    height: min(420px, 48vh);
    min-height: 240px;
    overflow: hidden;
}

.classmanager-discussion-post-modal .ql-container {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
}

.classmanager-discussion-post-modal .ql-editor {
    height: 100%;
    overflow-y: auto !important;
}

.classmanager-task-modal .modal-content {
    overflow: hidden;
}

.classmanager-task-modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding-bottom: 1.25rem;
}

.classmanager-task-instructions-group {
    margin-bottom: 1rem;
}

.classmanager-task-instructions-group .classmanager-quill {
    border-bottom: 1px solid #edf0f5;
    display: flex;
    flex-direction: column;
    height: min(300px, 36vh);
    max-height: 300px;
    min-height: 220px;
    overflow: hidden;
}

.classmanager-task-instructions-group .ql-container {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
}

.classmanager-task-instructions-group .ql-editor {
    height: 100%;
    max-height: none;
    overflow-y: auto !important;
    padding-bottom: 1rem;
}

.classmanager-task-files-group {
    background: #fbfdff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    clear: both;
    margin-top: 1rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.classmanager-upload-zone {
    align-items: center;
    border: 2px dashed #dfe3ea;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding: 1.5rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

.classmanager-task-files-group .classmanager-upload-zone {
    background: #fff;
    border-radius: 8px;
    min-height: 112px;
    padding: 1rem;
}

.classmanager-task-files-group .classmanager-upload-icon {
    height: 40px;
    margin-bottom: .55rem;
    width: 40px;
}

.classmanager-task-files-group .classmanager-upload-icon .material-icons {
    font-size: 24px;
}

.classmanager-task-files-group .classmanager-file-list {
    background: #fff;
    border-radius: 0 0 8px 8px;
    max-height: 132px;
    overflow-y: auto;
}

.classmanager-edit-instructions-modal .modal-content {
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

.classmanager-edit-instructions-body {
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.classmanager-edit-instructions-editor-group {
    margin-bottom: 0;
}

.classmanager-edit-instructions-editor-group .classmanager-quill {
    display: flex;
    flex-direction: column;
    height: min(340px, 42vh);
    min-height: 220px;
    overflow: hidden;
}

.classmanager-edit-instructions-editor-group .ql-container {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
}

.classmanager-edit-instructions-editor-group .ql-editor {
    height: 100%;
    overflow-y: auto !important;
}

.classmanager-edit-file-list {
    border: 1px solid #edf0f5;
    border-radius: 8px;
    display: grid;
    gap: 0;
    overflow: hidden;
}

.classmanager-edit-file-item {
    align-items: center;
    background: #fff;
    border-top: 1px solid #edf0f5;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .75rem;
}

.classmanager-edit-file-item:first-child {
    border-top: 0;
}

.classmanager-edit-file-main {
    align-items: center;
    display: flex;
    gap: .6rem;
    min-width: 0;
}

.classmanager-edit-file-main strong {
    color: #24324a;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.classmanager-edit-file-icon {
    align-items: center;
    background: #eef2ff;
    border-radius: 6px;
    color: #5567ff;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.classmanager-edit-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.classmanager-edit-file-empty {
    color: #6b7c93;
    padding: .9rem;
    text-align: center;
}

.classmanager-upload-zone.is-dragging {
    background: #f4f7ff;
    border-color: #5567ff;
}

.classmanager-upload-input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.classmanager-upload-icon {
    align-items: center;
    background: #f8f9fb;
    border-radius: 6px;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    margin-bottom: .75rem;
    width: 48px;
}

.classmanager-upload-icon .material-icons {
    color: #5567ff;
    font-size: 28px;
}

.classmanager-upload-text {
    color: #53657d;
    font-weight: 600;
}

.classmanager-file-list {
    border: 1px solid #edf0f5;
    border-top: 0;
}

.classmanager-file-list:empty {
    display: none;
}

.classmanager-submission-files-group {
    display: grid;
    gap: .75rem;
}

.classmanager-submission-attached {
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    overflow: hidden;
}

.classmanager-submission-attached-head {
    align-items: center;
    background: #fbfdff;
    border-bottom: 1px solid #edf0f5;
    color: #8a98aa;
    display: flex;
    font-size: .78rem;
    font-weight: 900;
    justify-content: space-between;
    letter-spacing: .08em;
    padding: .55rem .75rem;
    text-transform: uppercase;
}

.classmanager-submission-attached-head b {
    font-weight: 900;
}

.classmanager-submission-file-list {
    border: 0;
}

.classmanager-submission-file-row {
    align-items: center;
    border-left: 0;
    border-right: 0;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    min-height: 46px;
    padding: .55rem .7rem;
}

.classmanager-submission-file-row:first-child {
    border-top: 0;
}

.classmanager-submission-file-main {
    align-items: center;
    display: flex;
    gap: .65rem;
    min-width: 0;
}

.classmanager-submission-file-main strong {
    color: #24324a;
    display: inline-block;
    font-size: .9rem;
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.classmanager-submission-file-main em {
    background: #edf2ff;
    border-radius: 4px;
    color: #4f67d8;
    display: inline-flex;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    margin-left: .5rem;
    padding: .12rem .38rem;
    vertical-align: middle;
}

.classmanager-submission-file-icon {
    align-items: center;
    background: #eef2ff;
    border-radius: 4px;
    color: #4f67d8;
    display: inline-flex;
    flex: 0 0 26px;
    font-size: .52rem;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    line-height: 1;
    width: 26px;
}

.classmanager-submission-file-icon.is-doc,
.classmanager-submission-file-icon.is-docx {
    background: #e8f1ff;
    color: #1d6fd8;
}

.classmanager-submission-file-icon.is-xls,
.classmanager-submission-file-icon.is-xlsx,
.classmanager-submission-file-icon.is-csv {
    background: #e8f8ef;
    color: #16a34a;
}

.classmanager-submission-file-icon.is-pdf {
    background: #ede9fe;
    color: #6d28d9;
}

.classmanager-submission-file-icon.is-zip {
    background: #fff7d6;
    color: #d97706;
}

.classmanager-submission-file-icon.is-py,
.classmanager-submission-file-icon.is-ipyn {
    background: #fff2df;
    color: #ea580c;
}

.classmanager-submission-file-meta {
    align-items: center;
    color: #7b8794;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: .8rem;
    font-weight: 700;
    gap: .45rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.classmanager-submission-file-remove {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 50%;
    color: #6b7c93;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 28px;
}

.classmanager-submission-file-remove:hover {
    background: #fff5f5;
    border-color: #fecaca;
    color: #dc2626;
}

.classmanager-submission-file-empty {
    color: #7b8794;
    font-weight: 700;
    list-style: none;
    padding: .8rem;
    text-align: center;
}

.classmanager-submission-files-group .classmanager-upload-zone {
    border-radius: 7px;
    min-height: 92px;
    padding: .9rem;
}

.classmanager-submission-files-group .classmanager-upload-icon {
    height: 36px;
    margin-bottom: .45rem;
    width: 36px;
}

.classmanager-submission-files-group .classmanager-upload-icon .material-icons {
    font-size: 22px;
}

.classmanager-submission-files-group .classmanager-upload-text {
    font-size: .9rem;
}

.classmanager-submission-files-group .classmanager-upload-zone small {
    display: block;
    font-weight: 700;
    margin-top: .25rem;
}

.classmanager-submission-upload-progress {
    background: #f8faff;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    padding: .65rem .75rem;
}

.classmanager-submission-upload-progress[hidden] {
    display: none;
}

.classmanager-submission-upload-progress-head {
    align-items: center;
    color: #52637a;
    display: flex;
    font-size: .8rem;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: .45rem;
}

.classmanager-submission-upload-progress-track {
    background: #e4e9f2;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.classmanager-submission-upload-progress-track span {
    background: #5567e8;
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .15s ease;
    width: 0;
}

.classmanager-submission-upload-progress.is-error {
    background: #fff7f7;
    border-color: #fecaca;
}

.classmanager-submission-upload-progress.is-error .classmanager-submission-upload-progress-head {
    color: #b42318;
}

.classmanager-submission-upload-progress.is-error .classmanager-submission-upload-progress-track span {
    background: #dc2626;
}

.classmanager-task-card-new {
    border-color: #dfe8ff;
}

.classmanager-generated-submission {
    border-color: #dcefe2;
}

.classmanager-generated-thread {
    border-color: #dfe8ff;
}

.classmanager-task-actions {
    row-gap: .5rem;
}

.classmanager-login-body {
    background: #f4f6f9;
    min-height: 100vh;
}

.classmanager-login-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.classmanager-login-panel {
    max-width: 520px;
    width: 100%;
}

.classmanager-login-brand {
    align-items: center;
    color: #24324a;
    display: flex;
    margin-bottom: 1.5rem;
}

.classmanager-login-brand-icon {
    align-items: center;
    background: #24324a;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin-right: .85rem;
    width: 44px;
}

.classmanager-login-brand small {
    color: #7b8794;
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.classmanager-login-card {
    background: #fff;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(36, 50, 74, .08);
    padding: 2rem;
}

.classmanager-login-title {
    color: #24324a;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.classmanager-role-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.classmanager-role-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    color: #24324a;
    cursor: pointer;
    display: flex;
    min-height: 78px;
    padding: .9rem;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    width: 100%;
}

.classmanager-role-card:hover,
.classmanager-role-card.active {
    border-color: #4f67d8;
    box-shadow: 0 8px 22px rgba(79, 103, 216, .12);
    transform: translateY(-1px);
}

.classmanager-role-card small {
    color: #7b8794;
    display: block;
    font-weight: 600;
}

.classmanager-role-icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    margin-right: .75rem;
    width: 42px;
}

.classmanager-role-icon-admin {
    background: #e0f2fe;
    color: #0369a1;
}

.classmanager-role-icon-employer {
    background: #dcfce7;
    color: #15803d;
}

@media (max-width: 575.98px) {
    .classmanager-summary .text-amount {
        font-size: 1.35rem;
    }

    .classmanager-login-card {
        padding: 1.25rem;
    }

    .classmanager-role-grid {
        grid-template-columns: 1fr;
    }

    .classmanager-task-content .btn,
    .classmanager-task-actions {
        margin-left: 0 !important;
        margin-top: .75rem;
        width: 100%;
    }

    .classmanager-task-actions .btn {
        margin-right: 0 !important;
    }

    .classmanager-task-instructions-scroll {
        flex-basis: 100%;
        max-height: 220px;
    }

    .classmanager-syllabus-card .card-header,
    .classmanager-syllabus-file-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .classmanager-syllabus-upload,
    .classmanager-syllabus-upload .btn,
    .classmanager-syllabus-actions .btn,
    .classmanager-syllabus-actions form,
    .classmanager-syllabus-actions button {
        width: 100%;
    }

    .classmanager-syllabus-actions {
        justify-content: stretch;
    }

    .classmanager-course-material-form {
        grid-template-columns: 1fr;
    }

    .classmanager-project-top,
    .classmanager-project-panel-head {
        display: grid;
    }

    .classmanager-project-top .btn {
        width: 100%;
    }

    .classmanager-project-tabs {
        gap: .25rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .classmanager-project-overview-grid,
    .classmanager-project-progress-card,
    .classmanager-project-activity,
    .classmanager-milestone-stats,
    .classmanager-milestone-detail {
        grid-template-columns: 1fr;
    }

    .classmanager-project-activity time {
        text-align: left;
    }

    .classmanager-milestone-head,
    .classmanager-milestone-footer,
    .classmanager-milestone-timer-float {
        align-items: stretch;
        display: grid;
    }

    .classmanager-milestone-head .btn,
    .classmanager-milestone-footer .btn {
        width: 100%;
    }

    .classmanager-milestone-stats > div,
    .classmanager-milestone-stats > div:nth-child(3),
    .classmanager-milestone-stats > div:nth-child(4) {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }

    .classmanager-milestone-stats > div:first-child {
        border-top: 0;
    }

    .classmanager-milestone-detail > div + div {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-left: 0;
        padding-top: 1rem;
    }

    .classmanager-milestone-time-cards,
    .classmanager-milestone-side-stats {
        grid-template-columns: 1fr;
    }

    .classmanager-milestone-time-cards > div {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .classmanager-milestone-session-card > div,
    .classmanager-milestone-timer-float .btn {
        display: grid;
        width: 100%;
    }

    .classmanager-project-instruction-head,
    .classmanager-project-file-card {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .classmanager-project-instruction-head > div:last-child,
    .classmanager-project-instruction-head .btn,
    .classmanager-project-file-actions,
    .classmanager-project-file-actions .btn {
        width: 100%;
    }

    .classmanager-project-file-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classmanager-project-file-badge {
        height: 34px;
        width: 34px;
    }

    .classmanager-final-status-grid,
    .classmanager-final-file-card {
        grid-template-columns: 1fr;
    }

    .classmanager-final-status-grid > div,
    .classmanager-final-status-grid > div:first-child,
    .classmanager-final-status-grid > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding: .85rem 0 0;
    }

    .classmanager-final-status-grid > div:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .classmanager-final-deliverables-head,
    .classmanager-final-actions {
        display: grid;
    }

    .classmanager-final-deliverables-head .btn,
    .classmanager-final-actions .btn,
    .classmanager-final-file-actions,
    .classmanager-final-file-actions .btn {
        width: 100%;
    }

    .classmanager-final-file-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classmanager-edit-file-item {
        grid-template-columns: 1fr;
    }

    .classmanager-edit-file-actions,
    .classmanager-edit-file-actions .btn {
        width: 100%;
    }

    .classmanager-submission-file-row {
        grid-template-columns: minmax(0, 1fr) 28px;
    }

    .classmanager-submission-file-meta {
        grid-column: 1 / -1;
        justify-content: flex-start;
        white-space: normal;
    }

    .classmanager-discussion-comment {
        align-items: flex-start;
    }

    .classmanager-thread-replies {
        padding-left: 0;
    }

    .classmanager-time-card-head,
    .classmanager-time-dark,
    .classmanager-time-compact-top,
    .classmanager-assignment-time-card .classmanager-time-stats,
    .classmanager-tracker-summary,
    .classmanager-tracker-bottom,
    .classmanager-tracker-progress-row,
    .classmanager-time-estimate-row {
        grid-template-columns: 1fr;
    }

    .classmanager-tracker-clock-row {
        align-items: stretch;
        flex-direction: column;
    }

    .classmanager-tracker-clock-row > strong {
        font-size: 2.4rem;
        text-align: center;
    }

    .classmanager-tracker-start {
        justify-content: center;
        width: 100%;
    }

    .classmanager-tracker-estimate .classmanager-time-estimate-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .classmanager-tracker-estimate .classmanager-time-estimate-row .btn {
        grid-column: 1 / -1;
    }

    .classmanager-time-card-head {
        gap: .55rem;
    }

    .classmanager-time-card-icon {
        height: 42px;
        width: 42px;
    }

    .classmanager-time-dark {
        align-items: stretch;
    }

    .classmanager-time-toggle {
        width: 100%;
    }

    .classmanager-time-estimate-row .btn {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .classmanager-week-card {
        position: static;
    }
}
/* Calendar */
.calendar-heading {
    align-items: flex-start;
    display: flex;
}

.calendar-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.calendar-board,
.calendar-panel {
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.calendar-board {
    min-width: 0;
    padding: 1rem;
}

.calendar-panel {
    padding: 1rem;
}

.calendar-panel + .calendar-panel {
    margin-top: 1rem;
}

.calendar-panel__head {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.calendar-panel h4 {
    color: #1f2d4d;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .85rem;
}

.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
}

.calendar-filter {
    background: #fff;
    border: 1px solid #d6dfef;
    border-radius: 5px;
    color: #42526e;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    padding: .5rem .65rem;
}

.calendar-filter.active,
.calendar-filter:hover {
    background: #3f5df3;
    border-color: #3f5df3;
    color: #fff;
}

.calendar-deadline-list {
    max-height: 520px;
    overflow: auto;
    padding-right: .25rem;
}

.calendar-deadline {
    align-items: center;
    border-top: 1px solid #edf1f7;
    color: #1f2d4d;
    display: grid;
    gap: .75rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: .8rem 0;
    text-decoration: none;
}

.calendar-deadline:hover {
    color: #1f2d4d;
    text-decoration: none;
}

.calendar-deadline__icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.calendar-deadline__icon i {
    font-size: 19px;
}

.calendar-deadline__icon--assignment {
    background: #eef1ff;
    color: #4c5de6;
}

.calendar-deadline__icon--special-order {
    background: #fff2e8;
    color: #f26a21;
}

.calendar-deadline__body {
    min-width: 0;
}

.calendar-deadline__body strong,
.calendar-deadline__body small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-deadline__body strong {
    font-size: .86rem;
    font-weight: 700;
}

.calendar-deadline__body small {
    color: #65728a;
    font-size: .76rem;
}

.calendar-deadline__meta {
    display: grid;
    gap: .35rem;
    justify-items: end;
}

.calendar-deadline__meta time {
    color: #344563;
    font-size: .78rem;
}

.calendar-status {
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .45rem;
}

.calendar-status--overdue {
    background: #fff0f0;
    color: #e03131;
}

.calendar-status--due-soon {
    background: #fff7e6;
    color: #d98b00;
}

.calendar-status--upcoming {
    background: #edf4ff;
    color: #3466e8;
}

.calendar-status--completed {
    background: #eaf8f1;
    color: #1f9d62;
}

.calendar-legend {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-legend span {
    align-items: center;
    color: #31405f;
    display: inline-flex;
    font-size: .82rem;
    gap: .5rem;
}

.calendar-dot {
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.calendar-dot--assignment,
.calendar-dot--upcoming {
    background: #4c6fff;
}

.calendar-dot--special-order,
.calendar-dot--due-soon {
    background: #f59f00;
}

.calendar-dot--overdue {
    background: #e03131;
}

.calendar-dot--completed {
    background: #20a66a;
}

.calendar-page .fc-toolbar {
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-page .fc-toolbar h2 {
    color: #1f2d4d;
    font-size: 1.35rem;
    font-weight: 800;
}

.calendar-page .fc-button {
    background: #fff;
    border-color: #d6dfef;
    box-shadow: none;
    color: #1f2d4d;
    font-weight: 700;
    text-shadow: none;
}

.calendar-page .fc-button.fc-state-active,
.calendar-page .fc-button:hover {
    background: #3f5df3;
    border-color: #3f5df3;
    color: #fff;
}

.calendar-page .fc-event {
    border-radius: 4px;
    border-width: 1px;
    font-size: .67rem;
    line-height: 1.25;
    margin: 2px 4px;
    padding: .16rem .25rem;
}

.calendar-page .fc-day,
.calendar-page .fc-day-top {
    cursor: pointer;
}

.calendar-page .fc-more {
    color: #3154f5;
    display: inline-block;
    font-size: .76rem;
    font-weight: 800;
    margin: .15rem .35rem 0;
}

.calendar-page .fc-more:hover {
    color: #1838d8;
    text-decoration: none;
}

.calendar-page .fc-day-grid-event .fc-content {
    white-space: normal;
}

.calendar-page .classmanager-calendar-assignment {
    background: #f4f6ff;
    border-color: #9aa8ff;
    color: #3f4fc7;
}

.calendar-page .classmanager-calendar-special-order {
    background: #fff4ec;
    border-color: #ffb17d;
    color: #c85012;
}

.calendar-page .classmanager-calendar-overdue {
    border-left: 3px solid #e03131;
}

.calendar-page .classmanager-calendar-due-soon {
    border-left: 3px solid #f59f00;
}

.calendar-page .classmanager-calendar-completed {
    background: #ecf9f2;
    border-color: #8fddb5;
    color: #16764a;
}

.calendar-event-icon {
    font-size: 12px;
    margin-right: .18rem;
    vertical-align: -2px;
}

.calendar-event-status {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    margin-top: .1rem;
}

.calendar-day-modal .modal-content {
    border: 1px solid #dfe6f1;
    border-radius: 7px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}

.calendar-day-modal .modal-header {
    align-items: center;
    border-bottom-color: #edf1f7;
}

.calendar-day-modal .modal-title {
    color: #1f2d4d;
    font-size: 1.1rem;
    font-weight: 800;
}

.calendar-day-list {
    display: grid;
}

.calendar-day-item {
    align-items: center;
    border-bottom: 1px solid #edf1f7;
    color: #1f2d4d;
    display: grid;
    gap: .8rem;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: .9rem 0;
    text-decoration: none;
}

.calendar-day-item:first-child {
    padding-top: 0;
}

.calendar-day-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.calendar-day-item:hover {
    color: #1f2d4d;
    text-decoration: none;
}

.calendar-day-item__body {
    min-width: 0;
}

.calendar-day-item__body strong,
.calendar-day-item__body small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-day-item__body strong {
    font-size: .9rem;
    font-weight: 800;
}

.calendar-day-item__body small {
    color: #65728a;
    font-size: .78rem;
}

.calendar-day-item__meta {
    display: grid;
    gap: .35rem;
    justify-items: end;
}

.calendar-day-item__meta time {
    color: #344563;
    font-size: .78rem;
}

.calendar-day-empty {
    align-items: center;
    color: #64748b;
    display: none;
    gap: .35rem;
    justify-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.calendar-day-empty .material-icons {
    color: #3f5df3;
    font-size: 34px;
}

.calendar-day-empty strong,
.calendar-day-empty span {
    display: block;
}

.calendar-day-empty strong {
    color: #1f2d4d;
    font-weight: 800;
}

@media (max-width: 1199.98px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }

    .calendar-sidebar {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-panel + .calendar-panel {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .calendar-board {
        overflow-x: auto;
    }

    .calendar-board #calendar {
        min-width: 720px;
    }

    .calendar-sidebar,
    .calendar-legend {
        grid-template-columns: 1fr;
    }

    .calendar-deadline {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .calendar-deadline__meta {
        grid-column: 2;
        justify-items: start;
    }

    .calendar-day-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .calendar-day-item__meta {
        grid-column: 2;
        justify-items: start;
    }
}