:root {
    --UOB-primary: #a7102f;
    --UOB-primary-dark: #690911;
    --UOB-accent: #690911;
    --UOB-accent-dark: ##690911;
    --UOB-accent-soft: rgba(255, 193, 7, 0.16);
    --UOB-primary-soft: rgba(209, 31, 46, 0.12);
    --UOB-bg: #f8f9fc;
    --UOB-white: #ffffff;
    --UOB-text: #1f1f1f;
    --UOB-muted: #6c757d;
    --UOB-border: #ececec;
    --UOB-success: #198754;
    --UOB-warning: #ffb300;
    --UOB-danger: #a7102f;
    --UOB-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    --UOB-radius-xl: 24px;
    --UOB-radius-lg: 18px;
    --UOB-radius-md: 14px;
    --UOB-transition: all 0.3s ease;
    --sidebar-width: 290px;
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: var(--UOB-bg);
    color: var(--UOB-text);
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--UOB-primary) 0%, var(--UOB-primary-dark) 100%);
    color: var(--UOB-white);
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: var(--UOB-transition);
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.brand-title {
    display: block;
    color: var(--UOB-white);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.brand-subtitle {
    color: rgba(255, 255, 255, 0.78);
}

.sidebar-close,
.menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.student-mini-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--UOB-radius-lg);
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.18);
}

    .student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.student-meta h6 {
    color: var(--UOB-white);
    font-size: 0.96rem;
}

.student-meta p,
.student-meta span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.sidebar-nav .nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: var(--UOB-transition);
    font-weight: 500;
}

    .sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .sidebar-nav .nav-link:hover,
    .sidebar-nav .nav-link.active {
        color: var(--UOB-primary);
        background: var(--UOB-white);
    }

.logout-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--UOB-white) !important;
}

/* Main */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 1.5rem;
}

.topbar {
    background: var(--UOB-white);
    border: 1px solid var(--UOB-border);
    border-radius: var(--UOB-radius-xl);
    box-shadow: var(--UOB-shadow);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--UOB-primary);
}

.page-subtitle {
    color: var(--UOB-muted);
    font-size: 0.95rem;
}

.topbar-icon-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--UOB-white);
    border: 1px solid var(--UOB-border);
    display: grid;
    place-items: center;
    position: relative;
    color: var(--UOB-primary);
    box-shadow: var(--UOB-shadow);
}

.notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--UOB-accent);
}

.topbar-profile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--UOB-white);
    border: 1px solid var(--UOB-border);
    box-shadow: var(--UOB-shadow);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .topbar-profile img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .topbar-profile strong {
        display: block;
        font-size: 0.92rem;
        color: var(--UOB-primary);
    }

    .topbar-profile small {
        color: var(--UOB-muted);
    }

/* Cards */
.dashboard-card {
    background: var(--UOB-white);
    border: 1px solid var(--UOB-border);
    border-radius: var(--UOB-radius-xl);
    box-shadow: var(--UOB-shadow);
    padding: 1.25rem;
    height: 100%;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--UOB-primary);
    margin-bottom: 0.25rem;
}

.section-text {
    color: var(--UOB-muted);
    margin-bottom: 0;
    font-size: 0.92rem;
}

/* Stat cards */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 122px;
    border-top: 4px solid transparent;
}

.stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.stat-text p {
    font-size: 0.9rem;
    color: var(--UOB-muted);
    margin-bottom: 0.3rem;
}

.stat-text h3 {
    margin: 0;
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--UOB-primary);
}

.stat-card-primary {
    border-top-color: var(--UOB-primary);
}

    .stat-card-primary .stat-icon {
        background: var(--UOB-primary-soft);
        color: var(--UOB-primary);
    }

.stat-card-success {
    border-top-color: var(--UOB-accent);
}

    .stat-card-success .stat-icon {
        background: var(--UOB-accent-soft);
        color: var(--UOB-accent-dark);
    }

.stat-card-warning {
    border-top-color: var(--UOB-primary);
}

    .stat-card-warning .stat-icon {
        background: rgba(209, 31, 46, 0.1);
        color: var(--UOB-primary);
    }

.stat-card-accent {
    border-top-color: var(--UOB-accent);
}

    .stat-card-accent .stat-icon {
        background: var(--UOB-accent-soft);
        color: var(--UOB-accent-dark);
    }

/* Courses */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.course-item {
    border: 1px solid var(--UOB-border);
    border-radius: var(--UOB-radius-lg);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    transition: var(--UOB-transition);
}

    .course-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(209, 31, 46, 0.08);
        border-color: rgba(209, 31, 46, 0.2);
    }

.course-info {
    flex: 1;
}

    .course-info h5 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
        color: var(--UOB-primary);
        font-weight: 700;
    }

    .course-info p {
        margin-bottom: 0.75rem;
        color: var(--UOB-muted);
        font-size: 0.92rem;
    }

.course-action {
    text-align: right;
    min-width: 110px;
}

.custom-progress {
    height: 15px;
    border-radius: 999px;
    background: #f1f1f1;
    overflow: hidden;
}

    .custom-progress .progress-bar {
        background: linear-gradient(90deg, var(--UOB-primary), var(--UOB-accent));
        font-size: 0.72rem;
        font-weight: 700;
    }

/* Badges */
.badge-soft {
    display: inline-block;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

    .badge-soft.success {
        background: var(--UOB-accent-soft);
        color: #9a7200;
    }

    .badge-soft.warning {
        background: rgba(255, 193, 7, 0.2);
        color: #a97800;
    }

    .badge-soft.primary {
        background: var(--UOB-primary-soft);
        color: var(--UOB-primary);
    }

/* Announcements */
.announcement-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.announcement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--UOB-border);
}

    .announcement-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.announcement-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--UOB-primary);
    margin-top: 0.45rem;
    flex-shrink: 0;
}

.announcement-item h6 {
    margin-bottom: 0.25rem;
    font-weight: 700;
    color: var(--UOB-primary);
}

.announcement-item p {
    color: var(--UOB-muted);
    font-size: 0.92rem;
}

/* Profile summary */
.profile-summary {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .profile-summary li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--UOB-border);
        padding: 0.85rem 0;
    }

        .profile-summary li:first-child {
            padding-top: 0;
        }

        .profile-summary li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .profile-summary span {
        color: var(--UOB-muted);
        font-size: 0.92rem;
    }

    .profile-summary strong {
        color: var(--UOB-primary);
        text-align: right;
        font-size: 0.94rem;
    }

/* Payment */
.payment-box {
    background: #fffaf0;
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: var(--UOB-radius-lg);
    padding: 1rem;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

    .payment-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .payment-row span {
        color: var(--UOB-muted);
    }

    .payment-row strong {
        color: var(--UOB-primary);
    }

    .payment-row.highlight strong {
        color: var(--UOB-primary);
    }

/* Quick links */
.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}

.quick-link-box {
    border: 1px solid var(--UOB-border);
    background: #fff;
    border-radius: var(--UOB-radius-lg);
    padding: 1rem;
    text-align: center;
    transition: var(--UOB-transition);
    color: var(--UOB-primary);
}

    .quick-link-box:hover {
        background: var(--UOB-primary);
        color: var(--UOB-white);
        transform: translateY(-2px);
        border-color: var(--UOB-primary);
    }

    .quick-link-box i {
        display: block;
        font-size: 1.35rem;
        margin-bottom: 0.6rem;
    }

/* Buttons */
.btn-UOB {
    background: var(--UOB-primary);
    color: var(--UOB-white);
    border: none;
    border-radius: 12px;
    padding: 0.65rem 1rem;
    font-weight: 600;
    transition: var(--UOB-transition);
}

    .btn-UOB:hover {
        background: var(--UOB-primary-dark);
        color: var(--UOB-white);
    }

.btn-UOB-outline {
    background: transparent;
    color: var(--UOB-primary);
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    transition: var(--UOB-transition);
}

    .btn-UOB-outline:hover {
        background: var(--UOB-accent);
        color: #212529;
        border-color: var(--UOB-accent);
    }

/* Mobile sidebar */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: var(--UOB-transition);
}

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

        .sidebar.show {
            transform: translateX(0);
        }

    .main-content {
        width: 100%;
        margin-left: 0;
        padding: 1rem;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-left,
    .topbar-right {
        justify-content: space-between;
    }

    .course-item {
        flex-direction: column;
        align-items: stretch;
    }

    .course-action {
        text-align: left;
        min-width: auto;
    }
}

@media (max-width: 767.98px) {
    .page-title {
        font-size: 1.25rem;
    }

    .page-subtitle {
        font-size: 0.88rem;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
    }

    .student-mini-card {
        align-items: flex-start;
    }
}


/*InProcessCertifications.html*/

:root {
    --ipc-primary: #a7102f;
    --ipc-primary-dark: #a81622;
    --ipc-accent: #ffc107;
    --ipc-accent-dark: #d39e00;
    --ipc-accent-soft: rgba(255, 193, 7, 0.16);
    --ipc-primary-soft: rgba(209, 31, 46, 0.12);
    --ipc-bg: #f8f9fc;
    --ipc-white: #ffffff;
    --ipc-text: #202020;
    --ipc-muted: #6c757d;
    --ipc-border: #ececec;
    --ipc-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    --ipc-radius-xl: 24px;
    --ipc-radius-lg: 18px;
    --ipc-radius-md: 14px;
    --ipc-transition: all 0.3s ease;
    --ipc-sidebar-width: 290px;
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: var(--ipc-bg);
    color: var(--ipc-text);
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.ipc-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.ipc-sidebar {
    width: var(--ipc-sidebar-width);
    background: linear-gradient(180deg, var(--ipc-primary) 0%, var(--ipc-primary-dark) 100%);
    color: var(--ipc-white);
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: var(--ipc-transition);
}

.ipc-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ipc-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ipc-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .ipc-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ipc-brand-text span {
    display: block;
    color: var(--ipc-white);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.ipc-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.ipc-sidebar-close,
.ipc-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.ipc-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ipc-radius-lg);
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.ipc-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .ipc-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ipc-student-meta h6 {
    color: var(--ipc-white);
    font-size: 0.96rem;
}

.ipc-student-meta p,
.ipc-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.ipc-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.ipc-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: var(--ipc-transition);
}

    .ipc-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .ipc-sidebar-nav .nav-link:hover,
    .ipc-sidebar-nav .nav-link.active {
        color: var(--ipc-primary);
        background: var(--ipc-white);
    }

.ipc-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--ipc-white) !important;
}

/* Main */
.ipc-main {
    margin-left: var(--ipc-sidebar-width);
    width: calc(100% - var(--ipc-sidebar-width));
    padding: 1.5rem;
}

.ipc-topbar {
    background: var(--ipc-white);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-xl);
    box-shadow: var(--ipc-shadow);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ipc-topbar-left,
.ipc-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ipc-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ipc-primary);
}

.ipc-page-subtitle {
    color: var(--ipc-muted);
    font-size: 0.95rem;
}

.ipc-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--ipc-white);
    border: 1px solid var(--ipc-border);
    display: grid;
    place-items: center;
    position: relative;
    color: var(--ipc-primary);
    box-shadow: var(--ipc-shadow);
}

.ipc-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ipc-accent);
}

.ipc-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--ipc-white);
    border: 1px solid var(--ipc-border);
    box-shadow: var(--ipc-shadow);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .ipc-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .ipc-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: var(--ipc-primary);
    }

    .ipc-profile-pill small {
        color: var(--ipc-muted);
    }

/* Cards */
.ipc-card {
    background: var(--ipc-white);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-xl);
    box-shadow: var(--ipc-shadow);
    padding: 1.25rem;
}

/* Program Hero */
.ipc-program-hero {
    background: linear-gradient(135deg, rgba(209, 31, 46, 0.04), rgba(255, 193, 7, 0.08));
}

.ipc-chip {
    display: inline-block;
    background: var(--ipc-primary-soft);
    color: var(--ipc-primary);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ipc-program-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ipc-primary);
    margin-bottom: 0.75rem;
}

.ipc-program-desc {
    color: var(--ipc-muted);
    max-width: 90%;
}

.ipc-mini-stat {
    background: var(--ipc-white);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    padding: 1rem;
    text-align: center;
}

    .ipc-mini-stat span {
        display: block;
        color: var(--ipc-muted);
        font-size: 0.88rem;
        margin-bottom: 0.4rem;
    }

    .ipc-mini-stat strong {
        font-size: 1.3rem;
        color: var(--ipc-primary);
    }

.ipc-program-sidebox {
    background: var(--ipc-white);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    padding: 1rem;
}

    .ipc-program-sidebox ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .ipc-program-sidebox li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--ipc-border);
    }

        .ipc-program-sidebox li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .ipc-program-sidebox span {
        color: var(--ipc-muted);
    }

    .ipc-program-sidebox strong {
        color: var(--ipc-primary);
        text-align: right;
    }

/* Stats */
.ipc-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid var(--ipc-primary);
}

.ipc-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--ipc-primary);
    background: var(--ipc-primary-soft);
}

.ipc-stat-card p {
    font-size: 0.92rem;
    color: var(--ipc-muted);
    margin-bottom: 0.35rem;
}

.ipc-stat-card h3 {
    margin: 0;
    color: var(--ipc-primary);
    font-weight: 800;
    font-size: 1.7rem;
}

/* Search & Filter */
.ipc-search-wrap {
    position: relative;
}

    .ipc-search-wrap i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: var(--ipc-muted);
    }

    .ipc-search-wrap .form-control {
        padding-left: 42px;
        height: 52px;
        border-radius: 14px;
        border: 1px solid var(--ipc-border);
        box-shadow: none;
    }

        .ipc-search-wrap .form-control:focus,
        .ipc-form-select:focus {
            border-color: rgba(209, 31, 46, 0.35);
            box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
        }

.ipc-form-select {
    height: 52px;
    border-radius: 14px;
    border: 1px solid var(--ipc-border);
    box-shadow: none;
}

.ipc-filter-note {
    color: var(--ipc-muted);
    font-size: 0.92rem;
}

/* Course Card */
.ipc-course-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ipc-course-card {
    overflow: hidden;
}

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

.ipc-course-header-left {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.ipc-course-thumb {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--ipc-border);
    background: #f3f3f3;
}

    .ipc-course-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ipc-thumb-locked {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(209, 31, 46, 0.08), rgba(255, 193, 7, 0.08));
}

.ipc-thumb-lock {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ipc-primary);
    color: var(--ipc-white);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.ipc-course-main {
    flex: 1;
}

.ipc-course-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.4rem;
}

.ipc-course-code {
    font-size: 0.85rem;
    color: var(--ipc-muted);
    font-weight: 600;
}

.ipc-course-main h3 {
    font-size: 1.25rem;
    margin-bottom: 0.45rem;
    color: var(--ipc-primary);
    font-weight: 700;
}

.ipc-course-main p {
    margin-bottom: 0.9rem;
    color: var(--ipc-muted);
    max-width: 90%;
}

.ipc-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.ipc-status-active {
    background: rgba(209, 31, 46, 0.12);
    color: var(--ipc-primary);
}

.ipc-status-scheduled {
    background: rgba(255, 193, 7, 0.2);
    color: #916d00;
}

.ipc-status-locked {
    background: #efefef;
    color: #6e6e6e;
}

.ipc-progress-block {
    max-width: 480px;
}

.ipc-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    margin-bottom: 0.45rem;
}

    .ipc-progress-label span {
        color: var(--ipc-muted);
    }

    .ipc-progress-label strong {
        color: var(--ipc-primary);
    }

.ipc-progress {
    height: 10px;
    border-radius: 999px;
    background: #f1f1f1;
    overflow: hidden;
}

    .ipc-progress .progress-bar {
        background: linear-gradient(90deg, var(--ipc-primary), var(--ipc-accent));
    }

.ipc-release-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff9e9;
    color: #826200;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
}

.ipc-advisor-info {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff9e9;
    color: #826200;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
}

.ipc-course-header-right {
    flex-shrink: 0;
}

.ipc-btn {
    background: var(--ipc-primary);
    color: var(--ipc-white);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    font-weight: 600;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .ipc-btn:hover {
        background: var(--ipc-primary-dark);
        color: var(--ipc-white);
    }

    .ipc-btn i {
        transition: transform 0.3s ease;
    }

.ipc-course-card.open .ipc-btn i {
    transform: rotate(180deg);
}

/* Course Body */
.ipc-course-body {
    margin-top: 1.25rem;
    border-top: 1px solid var(--ipc-border);
    padding-top: 1.25rem;
    display: none;
}

.ipc-course-card.open .ipc-course-body {
    display: block;
}

.ipc-resource-box {
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    padding: 1rem;
    height: 100%;
    background: #fff;
}

.ipc-resource-muted {
    background: #fcfcfc;
}

.ipc-resource-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

    .ipc-resource-head i {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: var(--ipc-primary-soft);
        color: var(--ipc-primary);
        font-size: 1.05rem;
    }

    .ipc-resource-head h5 {
        margin: 0;
        font-size: 1rem;
        color: var(--ipc-primary);
        font-weight: 700;
    }

.ipc-resource-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ipc-resource-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--ipc-border);
    }

        .ipc-resource-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .ipc-resource-list span {
        color: var(--ipc-text);
        font-size: 0.93rem;
    }

    .ipc-resource-list a {
        color: var(--ipc-primary);
        font-weight: 700;
        font-size: 0.9rem;
    }

        .ipc-resource-list a:hover {
            color: var(--ipc-accent-dark);
        }

.ipc-locked-text {
    color: var(--ipc-muted);
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* Hidden by filter */
.ipc-hidden {
    display: none !important;
}

/* Overlay */
.ipc-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: var(--ipc-transition);
}

    .ipc-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .ipc-sidebar {
        transform: translateX(-100%);
    }

        .ipc-sidebar.show {
            transform: translateX(0);
        }

    .ipc-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .ipc-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ipc-topbar-left,
    .ipc-topbar-right {
        justify-content: space-between;
    }

    .ipc-course-header {
        flex-direction: column;
    }

    .ipc-course-header-left {
        flex-direction: column;
    }

    .ipc-course-main p,
    .ipc-program-desc {
        max-width: 100%;
    }

    .ipc-course-thumb {
        width: 100%;
        max-width: 220px;
        height: 180px;
    }
}

@media (max-width: 767.98px) {
    .ipc-page-title {
        font-size: 1.3rem;
    }

    .ipc-page-subtitle {
        font-size: 0.88rem;
    }

    .ipc-program-title {
        font-size: 1.45rem;
    }

    .ipc-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .ipc-profile-pill strong {
            font-size: 0.86rem;
        }
}


/* CompletedCertifications.aspx CSS*/

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fc;
    color: #202020;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.cc-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.cc-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.cc-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cc-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cc-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .cc-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.cc-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.cc-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.cc-sidebar-close,
.cc-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.cc-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.cc-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .cc-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cc-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
}

.cc-student-meta p,
.cc-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.cc-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.cc-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .cc-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .cc-sidebar-nav .nav-link:hover,
    .cc-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.cc-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Main */
.cc-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.cc-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cc-topbar-left,
.cc-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cc-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
}

.cc-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.cc-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.cc-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.cc-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .cc-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .cc-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .cc-profile-pill small {
        color: #6c757d;
    }

/* Cards */
.cc-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.cc-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid #a7102f;
}

.cc-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #a7102f;
    background: rgba(209, 31, 46, 0.1);
}

.cc-stat-card p {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.cc-stat-card h3 {
    margin: 0;
    color: #a7102f;
    font-weight: 800;
    font-size: 1.7rem;
}

/* Search */
.cc-search-wrap {
    position: relative;
}

    .cc-search-wrap i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #6c757d;
    }

    .cc-search-wrap .form-control {
        padding-left: 42px;
        height: 52px;
        border-radius: 14px;
        border: 1px solid #ececec;
        box-shadow: none;
    }

        .cc-search-wrap .form-control:focus,
        .cc-form-select:focus {
            border-color: rgba(209, 31, 46, 0.35);
            box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
        }

.cc-form-select {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

.cc-filter-note {
    color: #6c757d;
    font-size: 0.92rem;
}

/* Course list */
.cc-course-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cc-course-card {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.cc-course-thumb {
    width: 180px;
    min-width: 180px;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #ececec;
}

    .cc-course-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cc-course-content {
    flex: 1;
}

.cc-course-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.cc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.cc-status-badge {
    display: inline-block;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
}

.cc-code-badge {
    display: inline-block;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255, 193, 7, 0.16);
    color: #9a7200;
}

.cc-course-content h3 {
    font-size: 1.22rem;
    color: #a7102f;
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.cc-course-content p {
    color: #6c757d;
    margin-bottom: 0;
    max-width: 90%;
}

.cc-grade-box {
    min-width: 95px;
    text-align: center;
    background: #fff8e1;
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 16px;
    padding: 0.9rem 0.8rem;
}

    .cc-grade-box span {
        display: block;
        font-size: 0.82rem;
        color: #8a6b00;
        margin-bottom: 0.25rem;
    }

    .cc-grade-box strong {
        display: block;
        font-size: 1.6rem;
        color: #a7102f;
        line-height: 1;
    }

.cc-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 0.9rem 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    margin-bottom: 1rem;
}

    .cc-course-meta div {
        color: #444;
        font-size: 0.92rem;
    }

    .cc-course-meta span {
        color: #6c757d;
        font-weight: 600;
        margin-right: 0.3rem;
    }

.cc-course-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.cc-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.68rem 1rem;
    font-weight: 600;
}

    .cc-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.cc-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.68rem 1rem;
    font-weight: 600;
}

    .cc-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

/* Hidden by filter */
.cc-hidden {
    display: none !important;
}

/* Overlay */
.cc-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .cc-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .cc-sidebar {
        transform: translateX(-100%);
    }

        .cc-sidebar.show {
            transform: translateX(0);
        }

    .cc-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .cc-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-topbar-left,
    .cc-topbar-right {
        justify-content: space-between;
    }

    .cc-course-card {
        flex-direction: column;
    }

    .cc-course-thumb {
        width: 100%;
        min-width: 100%;
        height: 220px;
    }

    .cc-course-top {
        flex-direction: column;
    }

    .cc-course-content p {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .cc-page-title {
        font-size: 1.3rem;
    }

    .cc-page-subtitle {
        font-size: 0.88rem;
    }

    .cc-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .cc-profile-pill strong {
            font-size: 0.86rem;
        }

    .cc-course-meta {
        flex-direction: column;
        gap: 0.7rem;
    }
}


/*Payment.html css*/

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fc;
    color: #202020;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.pay-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.pay-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.pay-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pay-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.pay-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .pay-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.pay-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.pay-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.pay-sidebar-close,
.pay-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.pay-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.pay-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .pay-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pay-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
}

.pay-student-meta p,
.pay-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.pay-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.pay-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .pay-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .pay-sidebar-nav .nav-link:hover,
    .pay-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.pay-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Main */
.pay-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.pay-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.pay-topbar-left,
.pay-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pay-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
}

.pay-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.pay-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.pay-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.pay-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .pay-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .pay-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .pay-profile-pill small {
        color: #6c757d;
    }

/* Cards */
.pay-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.pay-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid #a7102f;
}

.pay-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #a7102f;
    background: rgba(209, 31, 46, 0.1);
}

.pay-stat-card p {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.pay-stat-card h3 {
    margin: 0;
    color: #a7102f;
    font-weight: 800;
    font-size: 1.7rem;
}

.pay-section-head {
    margin-bottom: 1rem;
}

.pay-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.pay-section-subtitle {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.94rem;
}

/* Overview */
.pay-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.pay-overview-box {
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
}

    .pay-overview-box span {
        display: block;
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }

    .pay-overview-box strong {
        font-size: 1.4rem;
        color: #a7102f;
    }

.pay-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pay-info-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid #ececec;
    }

        .pay-info-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .pay-info-list span {
        color: #6c757d;
    }

    .pay-info-list strong {
        color: #a7102f;
        text-align: right;
    }

/* Search */
.pay-search-wrap {
    position: relative;
}

    .pay-search-wrap i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #6c757d;
    }

    .pay-search-wrap .form-control {
        padding-left: 42px;
        height: 52px;
        border-radius: 14px;
        border: 1px solid #ececec;
        box-shadow: none;
    }

        .pay-search-wrap .form-control:focus,
        .pay-form-select:focus {
            border-color: rgba(209, 31, 46, 0.35);
            box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
        }

.pay-form-select {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

.pay-filter-note {
    color: #6c757d;
    font-size: 0.92rem;
}

/* Table */
.pay-table-wrap {
    overflow-x: auto;
}

.pay-table {
    min-width: 980px;
}

    .pay-table thead th {
        background: #fff7e0;
        color: #6b5200;
        font-size: 0.88rem;
        font-weight: 700;
        border-bottom: 1px solid #ececec;
        white-space: nowrap;
        padding: 1rem 0.9rem;
    }

    .pay-table tbody td {
        padding: 1rem 0.9rem;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: middle;
        font-size: 0.93rem;
        color: #333;
    }

.pay-title-cell strong {
    display: block;
    color: #a7102f;
    font-size: 0.96rem;
    margin-bottom: 0.2rem;
}

.pay-title-cell small {
    color: #6c757d;
    font-size: 0.82rem;
}

.pay-badge {
    display: inline-block;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.pay-badge-paid {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.pay-badge-pending {
    background: rgba(255, 193, 7, 0.22);
    color: #8a6b00;
}

.pay-badge-overdue {
    background: rgba(209, 31, 46, 0.12);
    color: #a7102f;
}

.pay-hidden {
    display: none !important;
}

/* Overlay */
.pay-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .pay-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .pay-sidebar {
        transform: translateX(-100%);
    }

        .pay-sidebar.show {
            transform: translateX(0);
        }

    .pay-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .pay-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pay-topbar-left,
    .pay-topbar-right {
        justify-content: space-between;
    }

    .pay-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .pay-page-title {
        font-size: 1.3rem;
    }

    .pay-page-subtitle {
        font-size: 0.88rem;
    }

    .pay-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .pay-profile-pill strong {
            font-size: 0.86rem;
        }
}


/*settings.aspx*/


body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fc;
    color: #202020;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.set-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.set-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.set-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.set-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.set-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .set-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.set-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.set-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.set-sidebar-close,
.set-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.set-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.set-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .set-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.set-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
}

.set-student-meta p,
.set-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.set-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.set-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .set-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .set-sidebar-nav .nav-link:hover,
    .set-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.set-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Main */
.set-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.set-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.set-topbar-left,
.set-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.set-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
}

.set-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.set-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.set-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.set-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .set-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .set-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .set-profile-pill small {
        color: #6c757d;
    }

/* Cards */
.set-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.set-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid #a7102f;
}

.set-summary-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #a7102f;
    background: rgba(209, 31, 46, 0.1);
}

.set-summary-card p {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.set-summary-card h3 {
    margin: 0;
    color: #a7102f;
    font-weight: 800;
    font-size: 1.5rem;
}

.set-section-head {
    margin-bottom: 1rem;
}

.set-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.set-section-subtitle {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.94rem;
}

/* Form */
.set-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.45rem;
}

.set-input {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

    .set-input:focus {
        border-color: rgba(209, 31, 46, 0.35);
        box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
    }

.set-textarea {
    min-height: 110px;
    height: auto;
    resize: vertical;
    padding-top: 0.9rem;
}

.set-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
    font-weight: 600;
}

    .set-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.set-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

    .set-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

/* Avatar */
.set-avatar-panel {
    text-align: center;
}

.set-avatar-large {
    width: 130px;
    height: 130px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(209, 31, 46, 0.12);
}

    .set-avatar-large img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Notification switches */
.set-switch-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.set-switch-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem;
}

    .set-switch-item strong {
        display: block;
        color: #a7102f;
        margin-bottom: 0.2rem;
        font-size: 0.95rem;
    }

    .set-switch-item span {
        display: block;
        color: #6c757d;
        font-size: 0.88rem;
        max-width: 260px;
    }

.set-switch {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

    .set-switch:checked {
        background-color: #a7102f;
        border-color: #a7102f;
    }

/* Preferences */
.set-pref-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.set-pref-item {
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem;
}

/* Overlay */
.set-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .set-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .set-sidebar {
        transform: translateX(-100%);
    }

        .set-sidebar.show {
            transform: translateX(0);
        }

    .set-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .set-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .set-topbar-left,
    .set-topbar-right {
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .set-page-title {
        font-size: 1.3rem;
    }

    .set-page-subtitle {
        font-size: 0.88rem;
    }

    .set-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .set-profile-pill strong {
            font-size: 0.86rem;
        }

    .set-switch-item {
        flex-direction: column;
    }

        .set-switch-item span {
            max-width: 100%;
        }
}


/*Gradems Transcript.html*/

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fc;
    color: #202020;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.gt-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.gt-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.gt-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gt-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.gt-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .gt-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.gt-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.gt-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.gt-sidebar-close,
.gt-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.gt-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.gt-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .gt-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gt-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
}

.gt-student-meta p,
.gt-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.gt-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.gt-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .gt-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .gt-sidebar-nav .nav-link:hover,
    .gt-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.gt-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Main */
.gt-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.gt-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.gt-topbar-left,
.gt-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gt-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
}

.gt-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.gt-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.gt-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.gt-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .gt-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .gt-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .gt-profile-pill small {
        color: #6c757d;
    }

/* Cards */
.gt-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.gt-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid #a7102f;
}

.gt-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #a7102f;
    background: rgba(209, 31, 46, 0.1);
}

.gt-stat-card p {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.gt-stat-card h3 {
    margin: 0;
    color: #a7102f;
    font-weight: 800;
    font-size: 1.7rem;
}

.gt-section-head {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.gt-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.gt-section-subtitle {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.94rem;
}

/* Buttons */
.gt-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
}

    .gt-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

/* Overview */
.gt-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.gt-overview-box {
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
}

    .gt-overview-box span {
        display: block;
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }

    .gt-overview-box strong {
        font-size: 1.05rem;
        color: #a7102f;
    }

.gt-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .gt-info-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid #ececec;
    }

        .gt-info-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .gt-info-list span {
        color: #6c757d;
    }

    .gt-info-list strong {
        color: #a7102f;
        text-align: right;
    }

/* Search */
.gt-search-wrap {
    position: relative;
}

    .gt-search-wrap i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #6c757d;
    }

    .gt-search-wrap .form-control {
        padding-left: 42px;
        height: 52px;
        border-radius: 14px;
        border: 1px solid #ececec;
        box-shadow: none;
    }

        .gt-search-wrap .form-control:focus,
        .gt-form-select:focus {
            border-color: rgba(209, 31, 46, 0.35);
            box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
        }

.gt-form-select {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

.gt-filter-note {
    color: #6c757d;
    font-size: 0.92rem;
}

/* Terms */
.gt-term-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.gt-term-box {
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 1rem;
    text-align: center;
    background: #fff;
}

    .gt-term-box span {
        display: block;
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }

    .gt-term-box strong {
        display: block;
        color: #a7102f;
        font-size: 1.1rem;
        margin-bottom: 0.15rem;
    }

    .gt-term-box small {
        color: #6c757d;
    }

/* Table */
.gt-table-wrap {
    overflow-x: auto;
}

.gt-table {
    min-width: 900px;
}

    .gt-table thead th {
        background: #fff7e0;
        color: #6b5200;
        font-size: 0.88rem;
        font-weight: 700;
        border-bottom: 1px solid #ececec;
        white-space: nowrap;
        padding: 1rem 0.9rem;
    }

    .gt-table tbody td {
        padding: 1rem 0.9rem;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: middle;
        font-size: 0.93rem;
        color: #333;
    }

.gt-grade-badge,
.gt-status-badge {
    display: inline-block;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.gt-grade-a {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.gt-grade-b {
    background: rgba(255, 193, 7, 0.22);
    color: #8a6b00;
}

.gt-grade-c {
    background: rgba(209, 31, 46, 0.12);
    color: #a7102f;
}

.gt-status-badge {
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
}

.gt-hidden {
    display: none !important;
}

/* Overlay */
.gt-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .gt-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .gt-sidebar {
        transform: translateX(-100%);
    }

        .gt-sidebar.show {
            transform: translateX(0);
        }

    .gt-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .gt-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gt-topbar-left,
    .gt-topbar-right {
        justify-content: space-between;
    }

    .gt-overview-grid,
    .gt-term-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .gt-page-title {
        font-size: 1.3rem;
    }

    .gt-page-subtitle {
        font-size: 0.88rem;
    }

    .gt-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .gt-profile-pill strong {
            font-size: 0.86rem;
        }

    .gt-overview-grid,
    .gt-term-grid {
        grid-template-columns: 1fr;
    }
}



/*Single course css*/

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fc;
    color: #202020;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.scl-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.scl-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.scl-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.scl-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.scl-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .scl-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.scl-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.scl-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.scl-sidebar-close,
.scl-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.scl-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.scl-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .scl-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.scl-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
}

.scl-student-meta p,
.scl-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.scl-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.scl-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .scl-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .scl-sidebar-nav .nav-link:hover,
    .scl-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.scl-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Main */
.scl-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.scl-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.scl-topbar-left,
.scl-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scl-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
}

.scl-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.scl-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.scl-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.scl-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .scl-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .scl-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .scl-profile-pill small {
        color: #6c757d;
    }

/* Cards */
.scl-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.scl-hero-card {
    background: linear-gradient(135deg, rgba(209, 31, 46, 0.04), rgba(255, 193, 7, 0.08));
}

.scl-chip {
    display: inline-block;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.scl-course-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #a7102f;
    margin-bottom: 0.7rem;
}

.scl-course-desc {
    color: #6c757d;
    margin-bottom: 1rem;
}

.scl-progress-box {
    max-width: 520px;
}

.scl-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

    .scl-progress-head span {
        color: #6c757d;
    }

    .scl-progress-head strong {
        color: #a7102f;
    }

.scl-progress {
    height: 10px;
    border-radius: 999px;
    background: #f1f1f1;
    overflow: hidden;
}

    .scl-progress .progress-bar {
        background: linear-gradient(90deg, #a7102f, #ffc107);
    }

.scl-hero-stats {
    display: grid;
    gap: 0.9rem;
}

.scl-hero-stat {
    border: 1px solid #ececec;
    border-radius: 18px;
    background: #fff;
    padding: 0.95rem 1rem;
}

    .scl-hero-stat span {
        display: block;
        color: #6c757d;
        font-size: 0.88rem;
        margin-bottom: 0.2rem;
    }

    .scl-hero-stat strong {
        color: #a7102f;
        font-size: 1rem;
    }

/* Section */
.scl-section-head {
    margin-bottom: 1rem;
}

.scl-section-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #a7102f;
}

/* Lesson sidebar */
.scl-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.scl-lesson-item {
    width: 100%;
    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    text-align: left;
    transition: all 0.3s ease;
}

    .scl-lesson-item:hover,
    .scl-lesson-item.active {
        border-color: rgba(209, 31, 46, 0.2);
        background: rgba(209, 31, 46, 0.04);
    }

.scl-lesson-number {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    font-weight: 700;
    flex-shrink: 0;
}

.scl-lesson-content strong {
    display: block;
    color: #a7102f;
    font-size: 0.92rem;
    margin-bottom: 0.1rem;
}

.scl-lesson-content small {
    color: #6c757d;
}

/* Video area */
.scl-video-box {
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #1d1d1d, #3d3d3d);
    min-height: 360px;
    display: grid;
    place-items: center;
}

.scl-video-placeholder {
    text-align: center;
    color: #fff;
    padding: 2rem;
}

.scl-video-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    background: rgba(255, 193, 7, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.15);
    font-size: 2rem;
}

.scl-video-placeholder h3 {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.scl-video-placeholder p {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

/* Tabs */
.scl-tabs {
    border-bottom: 1px solid #ececec;
}

    .scl-tabs .nav-link {
        border: none;
        color: #6c757d;
        font-weight: 600;
        padding: 0.9rem 1rem;
    }

        .scl-tabs .nav-link.active {
            color: #a7102f;
            background: transparent;
            border-bottom: 2px solid #a7102f;
        }

.scl-tab-content {
    padding-top: 1.2rem;
    padding-left: 1.0rem;
}

.scl-tab-title {
    color: #a7102f;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* Materials */
.scl-material-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.scl-material-item {
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

    .scl-material-item strong {
        display: block;
        color: #a7102f;
        margin-bottom: 0.15rem;
    }

    .scl-material-item small {
        color: #6c757d;
    }

/* Assignments */
.scl-assignment-box {
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

    .scl-assignment-box:last-child {
        margin-bottom: 0;
    }

.scl-assignment-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

    .scl-assignment-top strong {
        display: block;
        color: #a7102f;
        margin-bottom: 0.15rem;
    }

    .scl-assignment-top small {
        color: #6c757d;
    }

.scl-assignment-status {
    display: inline-block;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255, 193, 7, 0.22);
    color: #8a6b00;
}

.scl-status-open {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

/* Outline */
.scl-outline-list {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

    .scl-outline-list li {
        margin-bottom: 0.6rem;
        color: #444;
    }

/* Info list */
.scl-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .scl-info-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid #ececec;
    }

        .scl-info-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .scl-info-list span {
        color: #6c757d;
    }

    .scl-info-list strong {
        color: #a7102f;
        text-align: right;
    }

/* Downloads */
.scl-download-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scl-download-item {
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #a7102f;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .scl-download-item:hover {
        background: rgba(209, 31, 46, 0.04);
        color: #a7102f;
    }

    .scl-download-item i {
        font-size: 1.15rem;
    }

/* Notes */
.scl-notes-box {
    min-height: 150px;
    border-radius: 16px;
    border: 1px solid #ececec;
    box-shadow: none;
    padding-top: 0.9rem;
    resize: vertical;
}

    .scl-notes-box:focus {
        border-color: rgba(209, 31, 46, 0.35);
        box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
    }

/* Buttons */
.scl-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
}

    .scl-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.scl-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    font-weight: 600;
}

    .scl-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

/* Overlay */
.scl-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .scl-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 1199.98px) {
    .scl-video-box {
        min-height: 320px;
    }
}

@media (max-width: 991.98px) {
    .scl-sidebar {
        transform: translateX(-100%);
    }

        .scl-sidebar.show {
            transform: translateX(0);
        }

    .scl-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .scl-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .scl-topbar-left,
    .scl-topbar-right {
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .scl-page-title {
        font-size: 1.3rem;
    }

    .scl-page-subtitle {
        font-size: 0.88rem;
    }

    .scl-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .scl-profile-pill strong {
            font-size: 0.86rem;
        }

    .scl-course-title {
        font-size: 1.45rem;
    }

    .scl-video-box {
        min-height: 260px;
    }

    .scl-material-item,
    .scl-assignment-top {
        flex-direction: column;
        align-items: flex-start;
    }
}


/*Graduation pack page css*/

/* Sidebar */
.gpr-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.gpr-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gpr-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.gpr-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .gpr-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.gpr-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.gpr-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.gpr-sidebar-close,
.gpr-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.gpr-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.gpr-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .gpr-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gpr-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
}

.gpr-student-meta p,
.gpr-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

.gpr-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.gpr-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .gpr-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .gpr-sidebar-nav .nav-link:hover,
    .gpr-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.gpr-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Main */
.gpr-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.gpr-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.gpr-topbar-left,
.gpr-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gpr-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
}

.gpr-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.gpr-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.gpr-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.gpr-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .gpr-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .gpr-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .gpr-profile-pill small {
        color: #6c757d;
    }

/* Cards */
.gpr-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.gpr-hero-card {
    background: linear-gradient(135deg, rgba(209, 31, 46, 0.04), rgba(255, 193, 7, 0.08));
}

.gpr-chip {
    display: inline-block;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.gpr-hero-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #a7102f;
    margin-bottom: 0.7rem;
}

.gpr-hero-text {
    color: #6c757d;
    margin-bottom: 0;
}

/* Section */
.gpr-section-head {
    margin-bottom: 1rem;
}

.gpr-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.gpr-section-subtitle {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.94rem;
}

/* Form */
.gpr-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.45rem;
}

.gpr-input {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

    .gpr-input:focus {
        border-color: rgba(209, 31, 46, 0.35);
        box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
    }

.gpr-textarea {
    min-height: 130px;
    height: auto;
    resize: vertical;
    padding-top: 0.9rem;
}

/* Checks */
.gpr-check-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem;
    min-height: 70px;
}

.gpr-check {
    margin-top: 0;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

    .gpr-check:checked {
        background-color: #a7102f;
        border-color: #a7102f;
    }

.gpr-check-label {
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

/* Disclaimer */
.gpr-disclaimer-box {
    background: #fff8e8;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: 18px;
    padding: 1rem;
}

    .gpr-disclaimer-box p {
        margin-bottom: 0.65rem;
        color: #5b5b5b;
    }

.gpr-agree-check {
    margin-top: 1rem;
}

    .gpr-agree-check .form-check-input:checked {
        background-color: #a7102f;
        border-color: #a7102f;
    }

/* Buttons */
.gpr-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
    font-weight: 600;
}

    .gpr-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.gpr-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

    .gpr-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

/* Right panel */
.gpr-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .gpr-info-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid #ececec;
    }

        .gpr-info-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .gpr-info-list span {
        color: #6c757d;
    }

    .gpr-info-list strong {
        color: #a7102f;
        text-align: right;
    }

.gpr-mini-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.gpr-mini-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    color: #a7102f;
    font-weight: 600;
}

    .gpr-mini-item i {
        font-size: 1.1rem;
    }

.gpr-help-text {
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Overlay */
.gpr-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .gpr-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .gpr-sidebar {
        transform: translateX(-100%);
    }

        .gpr-sidebar.show {
            transform: translateX(0);
        }

    .gpr-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .gpr-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gpr-topbar-left,
    .gpr-topbar-right {
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .gpr-page-title {
        font-size: 1.3rem;
    }

    .gpr-page-subtitle {
        font-size: 0.88rem;
    }

    .gpr-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .gpr-profile-pill strong {
            font-size: 0.86rem;
        }

    .gpr-hero-title {
        font-size: 1.45rem;
    }

    .gpr-info-list li {
        flex-direction: column;
        gap: 0.35rem;
    }

    .gpr-info-list strong {
        text-align: left;
    }
}


/*Graduation pack success page css*/


.gps-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fc 0%, #fff5f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.gps-wrapper {
    max-width: 760px;
    margin: 0 auto;
}

.gps-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 2.25rem;
    text-align: center;
}

.gps-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(209, 31, 46, 0.08);
    color: #a7102f;
    display: grid;
    place-items: center;
    font-size: 2.6rem;
}

.gps-chip {
    display: inline-block;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.gps-title {
    font-size: 2rem;
    font-weight: 800;
    color: #a7102f;
    margin-bottom: 0.9rem;
}

.gps-text {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.4rem;
}

.gps-info-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gps-info-item {
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
}

    .gps-info-item span {
        display: block;
        color: #6c757d;
        font-size: 0.88rem;
        margin-bottom: 0.3rem;
    }

    .gps-info-item strong {
        color: #a7102f;
        font-size: 1rem;
    }

.gps-note-box {
    background: #fff8e8;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: 1.4rem;
    color: #5b5b5b;
}

.gps-actions {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.gps-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    font-weight: 600;
}

    .gps-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.gps-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    font-weight: 600;
}

    .gps-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

@media (max-width: 767.98px) {
    .gps-card {
        padding: 1.5rem;
    }

    .gps-title {
        font-size: 1.45rem;
    }

    .gps-info-box {
        grid-template-columns: 1fr;
    }
}


/*assignment submission page css*/

.asg-shell {
    display: flex;
    min-height: 100vh;
    background: #f8f9fc;
    color: #202020;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.asg-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.asg-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.asg-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.asg-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .asg-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.asg-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.asg-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.asg-sidebar-close,
.asg-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.asg-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.asg-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .asg-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.asg-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
    margin-bottom: 0.25rem;
}

.asg-student-meta p,
.asg-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    margin-bottom: 0;
}

.asg-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.asg-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .asg-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .asg-sidebar-nav .nav-link:hover,
    .asg-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.asg-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.asg-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.asg-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.asg-topbar-left,
.asg-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.asg-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
    margin-bottom: 0.25rem;
}

.asg-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.asg-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.asg-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.asg-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .asg-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .asg-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .asg-profile-pill small {
        color: #6c757d;
    }

.asg-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.asg-hero-card {
    background: linear-gradient(135deg, rgba(209, 31, 46, 0.04), rgba(255, 193, 7, 0.08));
}

.asg-chip {
    display: inline-block;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.asg-hero-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #a7102f;
    margin-bottom: 0.7rem;
}

.asg-hero-text {
    color: #6c757d;
    margin-bottom: 1rem;
}

.asg-assignment-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

    .asg-assignment-meta div {
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 16px;
        padding: 0.9rem;
    }

    .asg-assignment-meta span {
        display: block;
        color: #6c757d;
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .asg-assignment-meta strong {
        color: #a7102f;
        font-size: 0.92rem;
    }

.asg-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.asg-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.asg-section-subtitle {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.94rem;
}

.asg-question-box {
    background: #fff8e8;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: 18px;
    padding: 1.2rem;
}

    .asg-question-box h4,
    .asg-question-box h5 {
        color: #a7102f;
        font-weight: 700;
    }

    .asg-question-box p,
    .asg-question-box li {
        color: #4f4f4f;
        line-height: 1.7;
    }

.asg-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.45rem;
}

.asg-input {
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

    .asg-input:focus {
        border-color: rgba(209, 31, 46, 0.35);
        box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
    }

.asg-textarea {
    min-height: 130px;
    resize: vertical;
    padding-top: 0.9rem;
}

.asg-upload-box {
    border: 2px dashed rgba(209, 31, 46, 0.25);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    background: rgba(209, 31, 46, 0.03);
    position: relative;
}

    .asg-upload-box i {
        font-size: 2.8rem;
        color: #a7102f;
        margin-bottom: 0.75rem;
    }

    .asg-upload-box h4 {
        color: #a7102f;
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 0.4rem;
    }

    .asg-upload-box p {
        color: #6c757d;
        margin-bottom: 0.8rem;
    }

    .asg-upload-box input[type="file"] {
        display: block;
        margin: 0.8rem auto;
        max-width: 330px;
    }

    .asg-upload-box span {
        color: #333;
        font-size: 0.9rem;
        font-weight: 600;
    }

.asg-agree-check .form-check-input:checked {
    background-color: #a7102f;
    border-color: #a7102f;
}

.asg-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
    font-weight: 600;
}

    .asg-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.asg-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

    .asg-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

.asg-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .asg-info-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid #ececec;
    }

        .asg-info-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .asg-info-list span {
        color: #6c757d;
    }

    .asg-info-list strong {
        color: #a7102f;
        text-align: right;
    }

.asg-resource-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.asg-resource-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    color: #a7102f;
    font-weight: 600;
    text-decoration: none;
}

    .asg-resource-item:hover {
        background: rgba(209, 31, 46, 0.04);
        color: #a7102f;
    }

    .asg-resource-item i {
        font-size: 1.15rem;
    }

.asg-guideline-list {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

    .asg-guideline-list li {
        margin-bottom: 0.65rem;
        color: #444;
        line-height: 1.6;
    }

.asg-table-wrap {
    overflow-x: auto;
}

.asg-table {
    min-width: 760px;
}

    .asg-table thead th {
        background: #fff7e0;
        color: #6b5200;
        font-size: 0.88rem;
        font-weight: 700;
        border-bottom: 1px solid #ececec;
        white-space: nowrap;
        padding: 1rem 0.9rem;
    }

    .asg-table tbody td {
        padding: 1rem 0.9rem;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: middle;
        font-size: 0.93rem;
        color: #333;
    }

.asg-badge {
    display: inline-block;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.asg-badge-reviewed {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.asg-badge-pending {
    background: rgba(255, 193, 7, 0.22);
    color: #8a6b00;
}

.asg-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .asg-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 991.98px) {
    .asg-sidebar {
        transform: translateX(-100%);
    }

        .asg-sidebar.show {
            transform: translateX(0);
        }

    .asg-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .asg-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .asg-topbar-left,
    .asg-topbar-right {
        justify-content: space-between;
    }

    .asg-assignment-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .asg-page-title {
        font-size: 1.3rem;
    }

    .asg-page-subtitle {
        font-size: 0.88rem;
    }

    .asg-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .asg-profile-pill strong {
            font-size: 0.86rem;
        }

    .asg-hero-title {
        font-size: 1.45rem;
    }

    .asg-assignment-meta {
        grid-template-columns: 1fr;
    }

    .asg-info-list li {
        flex-direction: column;
        gap: 0.35rem;
    }

    .asg-info-list strong {
        text-align: left;
    }
}


/*Login page*/

.login-page-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, #fff5f6 0%, #f8f9fc 45%, #fff8e8 100%);
    display: flex;
    align-items: center;
    padding: 40px 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.login-card {
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.1);
    border: 1px solid #ececec;
}

.login-brand-panel {
    height: 100%;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-logo-box {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin-bottom: 1.4rem;
    overflow: hidden;
}

    .login-logo-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.login-chip {
    display: inline-block;
    width: fit-content;
    background: rgba(255, 193, 7, 0.18);
    color: #ffc107;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.login-brand-panel h1 {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff;
}

.login-brand-panel p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.login-feature-list {
    display: grid;
    gap: 0.85rem;
}

    .login-feature-list div {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        background: rgba(255, 255, 255, 0.1);
        padding: 0.9rem 1rem;
        border-radius: 16px;
    }

    .login-feature-list i {
        color: #ffc107;
        font-size: 1.2rem;
    }

    .login-feature-list span {
        font-weight: 600;
    }

.login-form-panel {
    height: 100%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-head {
    margin-bottom: 1.6rem;
}

    .login-form-head h2 {
        color: #a7102f;
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .login-form-head p {
        color: #6c757d;
        margin-bottom: 0;
    }

.login-label {
    font-weight: 700;
    color: #333;
    margin-bottom: 0.45rem;
}

.login-input-group {
    position: relative;
}

    .login-input-group > i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #a7102f;
        font-size: 1rem;
        z-index: 2;
    }

.login-input {
    height: 54px;
    border-radius: 15px;
    border: 1px solid #ececec;
    padding-left: 45px;
    padding-right: 48px;
    box-shadow: none;
}

    .login-input:focus {
        border-color: rgba(209, 31, 46, 0.4);
        box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
    }

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6c757d;
    z-index: 3;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0.8rem 0 1.2rem;
    flex-wrap: wrap;
}

    .login-options label {
        color: #555;
        font-size: 0.92rem;
    }

    .login-options a,
    .login-help-text a {
        color: #a7102f;
        font-weight: 700;
        text-decoration: none;
    }

        .login-options a:hover,
        .login-help-text a:hover {
            color: #a81622;
        }

.login-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    font-weight: 700;
    margin-top: 0.3rem;
}

    .login-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.login-help-text {
    text-align: center;
    margin-top: 1.2rem;
}

    .login-help-text p {
        color: #6c757d;
        margin-bottom: 0;
    }

.login-footer-note {
    text-align: center;
    margin-top: 2rem;
    color: #6c757d;
}

@media (max-width: 991.98px) {
    .login-brand-panel,
    .login-form-panel {
        padding: 2rem;
    }

        .login-brand-panel h1,
        .login-form-head h2 {
            font-size: 1.65rem;
        }
}

@media (max-width: 575.98px) {
    .login-page-wrap {
        padding: 20px 0;
    }

    .login-card {
        border-radius: 22px;
    }

    .login-brand-panel,
    .login-form-panel {
        padding: 1.5rem;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}




/*profile page css*/

.pro-shell {
    display: flex;
    min-height: 100vh;
    background: #f8f9fc;
    color: #202020;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.pro-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.pro-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pro-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.pro-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .pro-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.pro-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.pro-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.pro-sidebar-close,
.pro-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.pro-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.pro-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .pro-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pro-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
    margin-bottom: 0.25rem;
}

.pro-student-meta p,
.pro-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    margin-bottom: 0;
}

.pro-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.pro-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .pro-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .pro-sidebar-nav .nav-link:hover,
    .pro-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.pro-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.pro-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.pro-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.pro-topbar-left,
.pro-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pro-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
    margin-bottom: 0.25rem;
}

.pro-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.pro-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.pro-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.pro-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .pro-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .pro-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .pro-profile-pill small {
        color: #6c757d;
    }

.pro-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.pro-hero-card {
    background: linear-gradient(135deg, rgba(209, 31, 46, 0.04), rgba(255, 193, 7, 0.08));
}

.pro-hero-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.pro-hero-avatar {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(209, 31, 46, 0.12);
    flex-shrink: 0;
}

    .pro-hero-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pro-chip {
    display: inline-block;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
}

.pro-hero-info h2 {
    font-size: 1.85rem;
    font-weight: 800;
    color: #a7102f;
    margin-bottom: 0.35rem;
}

.pro-hero-info p {
    color: #6c757d;
    margin-bottom: 0;
}

.pro-profile-status {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 1rem;
}

    .pro-profile-status div:first-child {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .pro-profile-status span,
    .pro-profile-status small {
        color: #6c757d;
    }

    .pro-profile-status strong {
        color: #a7102f;
    }

.pro-progress {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1f1f1;
    margin-bottom: 0.6rem;
}

    .pro-progress .progress-bar {
        background: linear-gradient(90deg, #a7102f, #ffc107);
    }

.pro-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid #a7102f;
}

.pro-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #a7102f;
    background: rgba(209, 31, 46, 0.1);
}

.pro-stat-card p {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.pro-stat-card h3 {
    margin: 0;
    color: #a7102f;
    font-weight: 800;
    font-size: 1.45rem;
}

.pro-section-head {
    margin-bottom: 1rem;
}

.pro-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.pro-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}

.pro-info-item {
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
}

.pro-info-wide {
    grid-column: span 2;
}

.pro-info-item span {
    display: block;
    color: #6c757d;
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
}

.pro-info-item strong {
    color: #333;
    font-size: 0.96rem;
}

.pro-counselor-box {
    text-align: center;
}

.pro-counselor-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.pro-counselor-box h4 {
    color: #a7102f;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.pro-counselor-box p {
    color: #6c757d;
}

.pro-info-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

    .pro-info-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid #ececec;
    }

        .pro-info-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .pro-info-list span {
        color: #6c757d;
    }

    .pro-info-list strong {
        color: #a7102f;
        text-align: right;
        font-size: 0.9rem;
    }

.pro-link-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

    .pro-link-list a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border: 1px solid #ececec;
        border-radius: 16px;
        padding: 0.95rem 1rem;
        color: #a7102f;
        font-weight: 600;
        text-decoration: none;
    }

        .pro-link-list a:hover {
            background: rgba(209, 31, 46, 0.04);
        }

    .pro-link-list i {
        font-size: 1.1rem;
    }

.pro-timeline {
    position: relative;
}

.pro-timeline-item {
    display: flex;
    gap: 0.8rem;
    padding-bottom: 1rem;
    position: relative;
}

    .pro-timeline-item:last-child {
        padding-bottom: 0;
    }

    .pro-timeline-item > span {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #d7d7d7;
        margin-top: 0.25rem;
        flex-shrink: 0;
    }

    .pro-timeline-item.done > span,
    .pro-timeline-item.active > span {
        background: #a7102f;
    }

    .pro-timeline-item strong {
        display: block;
        color: #333;
        font-size: 0.94rem;
        margin-bottom: 0.2rem;
    }

    .pro-timeline-item small {
        color: #6c757d;
    }

.pro-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .pro-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 991.98px) {
    .pro-sidebar {
        transform: translateX(-100%);
    }

        .pro-sidebar.show {
            transform: translateX(0);
        }

    .pro-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .pro-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pro-topbar-left,
    .pro-topbar-right {
        justify-content: space-between;
    }

    .pro-info-grid {
        grid-template-columns: 1fr;
    }

    .pro-info-wide {
        grid-column: span 1;
    }
}

@media (max-width: 767.98px) {
    .pro-page-title {
        font-size: 1.3rem;
    }

    .pro-page-subtitle {
        font-size: 0.88rem;
    }

    .pro-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .pro-profile-pill strong {
            font-size: 0.86rem;
        }

    .pro-hero-info {
        flex-direction: column;
        align-items: flex-start;
    }

        .pro-hero-info h2 {
            font-size: 1.45rem;
        }

    .pro-info-list li {
        flex-direction: column;
        gap: 0.35rem;
    }

    .pro-info-list strong {
        text-align: left;
    }
}

/*Logout page css*/

.logout-page-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, #fff5f6 0%, #f8f9fc 45%, #fff8e8 100%);
    display: flex;
    align-items: center;
    padding: 40px 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.logout-card {
    max-width: 680px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 30px;
    border: 1px solid #ececec;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.1);
    padding: 2.4rem;
    text-align: center;
}

.logout-logo {
    width: 86px;
    height: 86px;
    margin: 0 auto 1rem;
    border-radius: 22px;
    background: rgba(209, 31, 46, 0.08);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .logout-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.logout-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    background: rgba(255, 193, 7, 0.18);
    color: #a7102f;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
}

.logout-chip {
    display: inline-block;
    background: rgba(209, 31, 46, 0.1);
    color: #a7102f;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.logout-card h1 {
    color: #a7102f;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
}

.logout-card p {
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 1.4rem;
}

.logout-info-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

    .logout-info-box div {
        border: 1px solid #ececec;
        border-radius: 18px;
        padding: 1rem;
        background: #fff;
    }

    .logout-info-box span {
        display: block;
        color: #6c757d;
        font-size: 0.88rem;
        margin-bottom: 0.3rem;
    }

    .logout-info-box strong {
        color: #a7102f;
        font-size: 1rem;
    }

.logout-actions {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.logout-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 0.85rem 1.25rem;
    font-weight: 700;
}

    .logout-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.logout-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 14px;
    padding: 0.85rem 1.25rem;
    font-weight: 700;
}

    .logout-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

.logout-footer-note {
    margin-top: 1.5rem;
    color: #6c757d;
}

@media (max-width: 767.98px) {
    .logout-card {
        padding: 1.5rem;
        border-radius: 24px;
    }

        .logout-card h1 {
            font-size: 1.45rem;
        }

    .logout-info-box {
        grid-template-columns: 1fr;
    }
}


/*forget password css*/

.fp-page-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, #fff5f6 0%, #f8f9fc 45%, #fff8e8 100%);
    display: flex;
    align-items: center;
    padding: 40px 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.fp-card {
    max-width: 1050px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.1);
    border: 1px solid #ececec;
}

.fp-brand-panel {
    height: 100%;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fp-logo-box {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin-bottom: 1.4rem;
    overflow: hidden;
}

    .fp-logo-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.fp-chip {
    display: inline-block;
    width: fit-content;
    background: rgba(255, 193, 7, 0.18);
    color: #ffc107;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.fp-brand-panel h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff;
}

.fp-brand-panel p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.fp-help-list {
    display: grid;
    gap: 0.85rem;
}

    .fp-help-list div {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        background: rgba(255, 255, 255, 0.1);
        padding: 0.9rem 1rem;
        border-radius: 16px;
    }

    .fp-help-list i {
        color: #ffc107;
        font-size: 1.2rem;
    }

    .fp-help-list span {
        font-weight: 600;
    }

.fp-form-panel {
    height: 100%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fp-form-head {
    margin-bottom: 1.5rem;
}

    .fp-form-head h2 {
        color: #a7102f;
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .fp-form-head p {
        color: #6c757d;
        margin-bottom: 0;
        line-height: 1.7;
    }

.fp-label {
    font-weight: 700;
    color: #333;
    margin-bottom: 0.45rem;
}

.fp-input-group {
    position: relative;
}

    .fp-input-group > i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #a7102f;
        font-size: 1rem;
        z-index: 2;
    }

.fp-input {
    height: 54px;
    border-radius: 15px;
    border: 1px solid #ececec;
    padding-left: 45px;
    box-shadow: none;
}

    .fp-input:focus {
        border-color: rgba(209, 31, 46, 0.4);
        box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
    }

.fp-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    font-weight: 700;
    margin-top: 0.4rem;
}

    .fp-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.fp-message-box {
    margin-top: 1rem;
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

    .fp-message-box i {
        color: #198754;
        font-size: 1.4rem;
        margin-top: 0.1rem;
    }

    .fp-message-box strong {
        display: block;
        color: #198754;
        margin-bottom: 0.25rem;
    }

    .fp-message-box p {
        margin-bottom: 0;
        color: #555;
        font-size: 0.92rem;
        line-height: 1.6;
    }

.fp-actions {
    margin-top: 1.2rem;
    text-align: center;
}

    .fp-actions a {
        color: #a7102f;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

        .fp-actions a:hover {
            color: #a81622;
        }

.fp-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: #6c757d;
}

    .fp-divider::before,
    .fp-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #ececec;
    }

.fp-support-box {
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 1.1rem;
    background: #fff8e8;
}

    .fp-support-box h4 {
        color: #a7102f;
        font-size: 1.05rem;
        font-weight: 800;
        margin-bottom: 0.45rem;
    }

    .fp-support-box p {
        color: #6c757d;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

.fp-btn-outline {
    background: transparent;
    color: #a7102f;
    border: 1px solid rgba(209, 31, 46, 0.2);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    font-weight: 700;
}

    .fp-btn-outline:hover {
        background: #ffc107;
        color: #1f1f1f;
        border-color: #ffc107;
    }

.fp-footer-note {
    text-align: center;
    margin-top: 1.5rem;
    color: #6c757d;
}

@media (max-width: 991.98px) {
    .fp-brand-panel,
    .fp-form-panel {
        padding: 2rem;
    }

        .fp-brand-panel h1,
        .fp-form-head h2 {
            font-size: 1.65rem;
        }
}

@media (max-width: 575.98px) {
    .fp-page-wrap {
        padding: 20px 0;
    }

    .fp-card {
        border-radius: 22px;
    }

    .fp-brand-panel,
    .fp-form-panel {
        padding: 1.5rem;
    }
}


/*Notification Page css*/

.ntf-shell {
    display: flex;
    min-height: 100vh;
    background: #f8f9fc;
    color: #202020;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.ntf-sidebar {
    width: 290px;
    background: linear-gradient(180deg, #a7102f 0%, #a81622 100%);
    color: #ffffff;
    padding: 1.25rem;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.ntf-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ntf-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.ntf-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .ntf-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ntf-brand-text span {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.ntf-brand-text small {
    color: rgba(255, 255, 255, 0.8);
}

.ntf-sidebar-close,
.ntf-menu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.ntf-student-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.ntf-student-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

    .ntf-student-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ntf-student-meta h6 {
    color: #ffffff;
    font-size: 0.96rem;
    margin-bottom: 0.25rem;
}

.ntf-student-meta p,
.ntf-student-meta span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    margin-bottom: 0;
}

.ntf-nav-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 1rem 0 0.65rem;
    padding: 0 0.75rem;
    list-style: none;
}

.ntf-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .ntf-sidebar-nav .nav-link i {
        font-size: 1.08rem;
    }

    .ntf-sidebar-nav .nav-link:hover,
    .ntf-sidebar-nav .nav-link.active {
        color: #a7102f;
        background: #ffffff;
    }

.ntf-logout-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.ntf-main {
    margin-left: 290px;
    width: calc(100% - 290px);
    padding: 1.5rem;
}

.ntf-topbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ntf-topbar-left,
.ntf-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ntf-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #a7102f;
    margin-bottom: 0.25rem;
}

.ntf-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.ntf-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    position: relative;
    color: #a7102f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.ntf-notify-dot {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc107;
}

.ntf-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
}

    .ntf-profile-pill img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
    }

    .ntf-profile-pill strong {
        display: block;
        font-size: 0.92rem;
        color: #a7102f;
    }

    .ntf-profile-pill small {
        color: #6c757d;
    }

.ntf-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.ntf-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    border-top: 4px solid #a7102f;
}

.ntf-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #a7102f;
    background: rgba(209, 31, 46, 0.1);
}

.ntf-stat-card p {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.ntf-stat-card h3 {
    margin: 0;
    color: #a7102f;
    font-weight: 800;
    font-size: 1.65rem;
}

.ntf-search-wrap {
    position: relative;
}

    .ntf-search-wrap i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #6c757d;
    }

    .ntf-search-wrap .form-control {
        padding-left: 42px;
        height: 52px;
        border-radius: 14px;
        border: 1px solid #ececec;
        box-shadow: none;
    }

        .ntf-search-wrap .form-control:focus,
        .ntf-form-select:focus {
            border-color: rgba(209, 31, 46, 0.35);
            box-shadow: 0 0 0 0.2rem rgba(209, 31, 46, 0.08);
        }

.ntf-form-select {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: none;
}

.ntf-btn-main {
    background: #a7102f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
    font-weight: 600;
}

    .ntf-btn-main:hover {
        background: #a81622;
        color: #ffffff;
    }

.ntf-section-head {
    margin-bottom: 1rem;
}

.ntf-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #a7102f;
}

.ntf-section-subtitle {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.94rem;
}

.ntf-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ntf-item {
    display: flex;
    gap: 1rem;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 1rem;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .ntf-item:hover {
        border-color: rgba(209, 31, 46, 0.25);
        background: rgba(209, 31, 46, 0.03);
    }

    .ntf-item.unread {
        border-left: 5px solid #a7102f;
        background: #fffafa;
    }

.ntf-item-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

    .ntf-item-icon.course {
        background: rgba(209, 31, 46, 0.1);
        color: #a7102f;
    }

    .ntf-item-icon.assignment {
        background: rgba(255, 193, 7, 0.22);
        color: #8a6b00;
    }

    .ntf-item-icon.payment {
        background: rgba(25, 135, 84, 0.12);
        color: #198754;
    }

    .ntf-item-icon.graduation {
        background: rgba(209, 31, 46, 0.1);
        color: #a7102f;
    }

    .ntf-item-icon.support {
        background: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
    }

.ntf-item-content {
    flex: 1;
}

.ntf-item-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

    .ntf-item-top h4 {
        color: #a7102f;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0;
    }

    .ntf-item-top span {
        color: #6c757d;
        font-size: 0.82rem;
        white-space: nowrap;
    }

.ntf-item-content p {
    color: #555;
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.ntf-item-content small {
    color: #6c757d;
    font-weight: 600;
}

.ntf-hidden {
    display: none !important;
}

.ntf-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .ntf-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 991.98px) {
    .ntf-sidebar {
        transform: translateX(-100%);
    }

        .ntf-sidebar.show {
            transform: translateX(0);
        }

    .ntf-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .ntf-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ntf-topbar-left,
    .ntf-topbar-right {
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .ntf-page-title {
        font-size: 1.3rem;
    }

    .ntf-page-subtitle {
        font-size: 0.88rem;
    }

    .ntf-profile-pill {
        padding: 0.5rem 0.7rem;
    }

        .ntf-profile-pill strong {
            font-size: 0.86rem;
        }

    .ntf-item {
        flex-direction: column;
    }

    .ntf-item-top {
        flex-direction: column;
        gap: 0.25rem;
    }
}

.scl-card {
    height: 100%;
}

.scl-video-box {
    height: 480px;
}

.scl-lesson-sidebar {
    height: 520px;
    display: flex;
    flex-direction: column;
}

.scl-info-card {
    height: 520px;
    display: flex;
    flex-direction: column;
}

.scl-lesson-list {
    flex: 1;
    overflow-y: auto;
}

:root {
    --top-panel-height: 500px;
}

.scl-video-box,
.scl-lesson-sidebar,
.scl-info-card {
    height: var(--top-panel-height);
}