/* =====================================================
   CASPA DESIGN SYSTEM
===================================================== */

:root {
    --caspa-primary: #17365d;
    --caspa-primary-dark: #102a49;
    --caspa-primary-soft: #edf4fb;

    --caspa-secondary: #0f6c7c;
    --caspa-secondary-soft: #eaf6f7;

    --caspa-accent: #d6a84a;

    --caspa-success: #198754;
    --caspa-warning: #f0ad4e;
    --caspa-danger: #dc3545;

    --caspa-bg: #f4f7fb;
    --caspa-surface: #ffffff;

    --caspa-border: #e3e9f0;

    --caspa-text: #1f2937;
    --caspa-muted: #6b7280;

    --sidebar-width: 270px;

    --caspa-radius: 14px;
    --caspa-radius-lg: 18px;

    --caspa-shadow:
        0 6px 22px rgba(15, 23, 42, .06);

    --caspa-shadow-hover:
        0 12px 30px rgba(15, 23, 42, .10);
}


/* =====================================================
   RESET / GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    background: var(--caspa-bg);
    color: var(--caspa-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =====================================================
   GLOBAL LINKS
===================================================== */

a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

a {
    color: inherit;
}


/* =====================================================
   AUTHENTICATED APPLICATION SHELL
===================================================== */

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


/* =====================================================
   SIDEBAR
===================================================== */

.app-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    z-index: 1040;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #17365d 0%,
            #102a49 100%
        );

    color: #ffffff;

    border-right:
        1px solid rgba(255, 255, 255, .06);

    box-shadow:
        5px 0 20px rgba(15, 23, 42, .07);

    scrollbar-width: thin;
}


.sidebar-brand {
    padding: 24px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, .09);
}


.sidebar-brand .brand-logo {
    width: 48px;
    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .17),
            rgba(255, 255, 255, .08)
        );

    border:
        1px solid rgba(255, 255, 255, .12);

    font-size: 23px;

    color: #ffffff;
}


.sidebar-brand-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}


.sidebar-brand-subtitle {
    margin-top: 4px;

    font-size: 10.5px;
    line-height: 1.4;

    color:
        rgba(255, 255, 255, .56);
}


.sidebar-nav {
    padding: 18px 13px 30px;
}


.sidebar-section-title {
    padding: 14px 13px 7px;

    font-size: 9.5px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.4px;

    color:
        rgba(255, 255, 255, .38);
}


.sidebar-link,
.sidebar-link:link,
.sidebar-link:visited {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 44px;

    padding: 10px 13px;

    margin-bottom: 4px;

    border-radius: 10px;

    color:
        rgba(255, 255, 255, .76);

    font-size: 13.5px;

    font-weight: 500;

    text-decoration: none !important;

    border-bottom: none !important;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}


.sidebar-link span,
.sidebar-link i {
    text-decoration: none !important;
    border-bottom: none !important;
}


.sidebar-link i {
    width: 20px;

    text-align: center;

    font-size: 17px;

    flex-shrink: 0;
}


.sidebar-link:hover,
.sidebar-link:focus {
    color: #ffffff;

    background:
        rgba(255, 255, 255, .09);

    transform:
        translateX(2px);

    text-decoration: none !important;
}


.sidebar-link.active {
    color: #ffffff;

    background:
        rgba(255, 255, 255, .14);

    font-weight: 600;

    box-shadow:
        inset 3px 0 0 var(--caspa-accent);

    text-decoration: none !important;
}


/* =====================================================
   MAIN APPLICATION AREA
===================================================== */

.app-main {
    width:
        calc(100% - var(--sidebar-width));

    min-height: 100vh;

    margin-left:
        var(--sidebar-width);

    display: flex;

    flex-direction: column;
}


/* =====================================================
   HEADER
===================================================== */

.app-header {
    min-height: 72px;

    position: sticky;

    top: 0;

    z-index: 1020;

    display: flex;

    align-items: center;

    padding: 0 28px;

    background:
        rgba(255, 255, 255, .97);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    border-bottom:
        1px solid var(--caspa-border);

    box-shadow:
        0 2px 12px rgba(15, 23, 42, .03);
}


.header-title {
    color:
        var(--caspa-primary);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;
}


.header-subtitle {
    margin-top: 2px;

    color:
        var(--caspa-muted);

    font-size: 10.5px;
}


.user-avatar {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            var(--caspa-primary),
            var(--caspa-secondary)
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 5px 12px rgba(23, 54, 93, .15);
}


.user-role-badge {
    display: inline-flex;

    align-items: center;

    padding: 2px 8px;

    margin-top: 3px;

    border-radius: 999px;

    background:
        var(--caspa-primary-soft);

    color:
        var(--caspa-primary);

    font-size: 9.5px;

    font-weight: 600;
}


/* =====================================================
   PAGE CONTENT
===================================================== */

.app-content {
    flex: 1;

    padding: 28px;
}


.content-container {
    width: 100%;

    max-width: 1600px;

    margin: 0 auto;
}


/* =====================================================
   DASHBOARD TYPOGRAPHY
===================================================== */

.dashboard-heading {
    margin-bottom: 4px;

    color:
        var(--caspa-primary);

    font-size: 27px;

    font-weight: 700;

    letter-spacing: -.3px;
}


.dashboard-subheading {
    margin-bottom: 0;

    color:
        var(--caspa-muted);

    font-size: 13.5px;
}


/* =====================================================
   DASHBOARD STAT CARDS
===================================================== */

.stat-card {
    height: 100%;

    padding: 20px;

    border:
        1px solid rgba(227, 233, 240, .75);

    border-radius:
        var(--caspa-radius-lg);

    background:
        var(--caspa-surface);

    box-shadow:
        var(--caspa-shadow);

    overflow: hidden;

    text-decoration: none !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


a.stat-card,
a.stat-card:hover,
a.stat-card:focus,
a.stat-card:active {
    text-decoration: none !important;
    color: inherit;
}


.stat-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--caspa-shadow-hover);

    border-color:
        #d8e1eb;
}


.stat-icon {
    width: 48px;
    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background:
        var(--caspa-primary-soft);

    color:
        var(--caspa-primary);

    font-size: 21px;
}


.stat-icon.secondary {
    background:
        var(--caspa-secondary-soft);

    color:
        var(--caspa-secondary);
}


.stat-icon.success {
    background:
        #eaf7ef;

    color:
        var(--caspa-success);
}


.stat-icon.warning {
    background:
        #fff7e7;

    color:
        #b7791f;
}


.stat-value {
    margin-bottom: 5px;

    color:
        var(--caspa-primary);

    font-size: 26px;

    line-height: 1;

    font-weight: 700;
}


.stat-label {
    color:
        var(--caspa-muted);

    font-size: 12.5px;
}


/* =====================================================
   DASHBOARD CARDS
===================================================== */

.dashboard-card {
    background:
        var(--caspa-surface);

    border:
        1px solid rgba(227, 233, 240, .8);

    border-radius:
        var(--caspa-radius-lg);

    box-shadow:
        var(--caspa-shadow);

    overflow: hidden;
}


a.dashboard-card,
a.dashboard-card:hover,
a.dashboard-card:focus,
a.dashboard-card:active {
    text-decoration: none !important;
    color: inherit;
}


.dashboard-card-header {
    min-height: 64px;

    padding: 18px 21px;

    display: flex;

    align-items: center;

    border-bottom:
        1px solid #edf1f5;

    background:
        #ffffff;
}


.dashboard-card-title {
    margin: 0;

    color:
        var(--caspa-primary);

    font-size: 15px;

    font-weight: 700;
}


/* =====================================================
   QUICK ACTIONS
===================================================== */

.quick-action,
.quick-action:link,
.quick-action:visited {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px;

    border:
        1px solid transparent;

    border-radius: 12px;

    background:
        #f8fafc;

    color:
        #334155;

    text-decoration: none !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.quick-action span,
.quick-action i {
    text-decoration: none !important;
}


.quick-action:hover,
.quick-action:focus {
    color:
        var(--caspa-primary);

    background:
        var(--caspa-primary-soft);

    border-color:
        #dce8f4;

    transform:
        translateX(2px);

    text-decoration: none !important;
}


.quick-action-icon {
    width: 39px;
    height: 39px;

    border-radius: 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background:
        #ffffff;

    border:
        1px solid #e7ecf2;

    color:
        var(--caspa-primary);

    font-size: 17px;
}


/* =====================================================
   STANDARD CARDS
===================================================== */

.card {
    border-radius:
        var(--caspa-radius);

    border-color:
        var(--caspa-border);
}


.card-header {
    border-bottom:
        1px solid var(--caspa-border);
}


a.card,
a.card:hover,
a.card:focus,
a.card:active {
    text-decoration: none !important;
    color: inherit;
}


/* =====================================================
   BUTTONS
===================================================== */

.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active {
    border-radius: 9px;

    font-weight: 500;

    text-decoration: none !important;
}


.btn-primary {
    background:
        var(--caspa-primary);

    border-color:
        var(--caspa-primary);
}


.btn-primary:hover,
.btn-primary:focus {
    background:
        var(--caspa-primary-dark);

    border-color:
        var(--caspa-primary-dark);
}


.btn-outline-primary {
    color:
        var(--caspa-primary);

    border-color:
        var(--caspa-primary);
}


.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background:
        var(--caspa-primary);

    border-color:
        var(--caspa-primary);

    color: #ffffff;
}


/* =====================================================
   FORMS
===================================================== */

.form-label {
    margin-bottom: 7px;

    color:
        #374151;

    font-size: 13px;

    font-weight: 600;
}


.form-control,
.form-select {
    min-height: 44px;

    border-radius: 9px;

    border-color:
        #dce2e8;

    font-size: 13.5px;
}


.form-control:focus,
.form-select:focus {
    border-color:
        #7aa6d8;

    box-shadow:
        0 0 0 .2rem
        rgba(23, 54, 93, .10);
}


textarea.form-control {
    min-height: auto;
}


/* =====================================================
   TABLES
===================================================== */

.table {
    --bs-table-bg: transparent;

    color:
        var(--caspa-text);
}


.table > :not(caption) > * > * {
    padding:
        .85rem .8rem;

    border-bottom-color:
        #edf1f5;
}


.table thead th {
    color:
        #64748b;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .35px;

    white-space: nowrap;
}


.table tbody td {
    font-size: 13px;

    vertical-align: middle;
}


.table a,
.table a:hover,
.table a:focus,
.table a:active {
    text-decoration: none !important;
}


/* =====================================================
   BADGES
===================================================== */

.badge {
    padding:
        .45em .7em;

    border-radius: 7px;

    font-weight: 600;

    font-size: 10.5px;
}


/* =====================================================
   ALERTS
===================================================== */

.alert {
    border-radius: 11px;

    border-width: 1px;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .03);
}


/* =====================================================
   DROPDOWNS
===================================================== */

.dropdown-item,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    text-decoration: none !important;
}


/* =====================================================
   BREADCRUMBS / PAGINATION
===================================================== */

.breadcrumb a,
.breadcrumb a:hover,
.breadcrumb a:focus,
.page-link,
.page-link:hover,
.page-link:focus {
    text-decoration: none !important;
}


/* =====================================================
   PROGRESS BARS
===================================================== */

.progress {
    overflow: hidden;

    background:
        #e9eef4;

    border-radius:
        999px;
}


.progress-sm {
    height: 9px;
}


.progress-xs {
    height: 8px;
}


.progress-xxs {
    height: 7px;
}


.progress-width-100 {
    width: 100%;
}


.progress-width-85 {
    width: 85%;
}


.progress-width-70 {
    width: 70%;
}


.progress-width-60 {
    width: 60%;
}


.progress-width-45 {
    width: 45%;
}


/* =====================================================
   DYNAMIC HTML PROGRESS ELEMENTS
===================================================== */

.caspa-progress {
    display: block;

    width: 100%;

    height: 9px;

    overflow: hidden;

    border: 0;

    border-radius:
        999px;

    background:
        #e9eef4;

    appearance: none;

    -webkit-appearance: none;
}


.caspa-progress::-webkit-progress-bar {
    background:
        #e9eef4;

    border-radius:
        999px;
}


.caspa-progress::-webkit-progress-value {
    background:
        var(--caspa-success);

    border-radius:
        999px;

    transition:
        width .3s ease;
}


.caspa-progress::-moz-progress-bar {
    background:
        var(--caspa-success);

    border-radius:
        999px;
}


.caspa-progress-xs {
    height: 8px;
}


.caspa-progress-xxs {
    height: 7px;
}


/* =====================================================
   FOOTER
===================================================== */

.app-footer {
    padding:
        15px 28px;

    border-top:
        1px solid var(--caspa-border);

    background:
        #ffffff;

    color:
        var(--caspa-muted);

    font-size: 11px;
}


/* =====================================================
   GUEST SHELL
===================================================== */

.guest-shell {
    width: 100%;

    min-height: 100vh;

    background:
        #f4f7fb;
}


/* =====================================================
   MOBILE SIDEBAR OVERLAY
===================================================== */

.sidebar-overlay {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 1035;

    background:
        rgba(15, 23, 42, .45);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}


.mobile-menu-button {
    display: none;
}


/* =====================================================
   UTILITY CLASSES
===================================================== */

.text-spaced {
    letter-spacing: 1.5px;
}


.text-light-muted {
    color:
        rgba(255, 255, 255, .65);
}


.pre-line {
    white-space: pre-line;
}


.icon-3xl {
    font-size: 3rem;
}


.max-width-250 {
    max-width: 250px;
}


.max-width-260 {
    max-width: 260px;
}


.max-width-280 {
    max-width: 280px;
}


/* =====================================================
   LOGIN PAGE
===================================================== */

.login-shell {
    min-height:
        calc(100vh - 40px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        30px 15px;

    background:
        radial-gradient(
            circle at top left,
            rgba(13, 110, 253, 0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f7f9fc 0%,
            #eef3f8 100%
        );
}


.login-wrapper {
    width: 100%;

    max-width: 1050px;

    background:
        #ffffff;

    border-radius:
        22px;

    overflow:
        hidden;

    box-shadow:
        0 22px 60px rgba(23, 43, 77, 0.14);
}


.login-brand-panel {
    min-height:
        610px;

    padding:
        55px 48px;

    color:
        #ffffff;

    background:
        linear-gradient(
            rgba(17, 48, 87, 0.94),
            rgba(14, 70, 95, 0.96)
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}


.brand-icon {
    width:
        66px;

    height:
        66px;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.14);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        30px;

    margin-bottom:
        28px;

    border:
        1px solid rgba(255, 255, 255, .18);
}


.login-brand-panel h1 {
    font-size:
        34px;

    line-height:
        1.2;

    font-weight:
        700;

    margin-bottom:
        18px;
}


.login-brand-panel p {
    color:
        rgba(255, 255, 255, .82);

    font-size:
        16px;

    line-height:
        1.7;
}


.feature-item {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        14px;

    color:
        rgba(255, 255, 255, .88);

    font-size:
        14px;
}


.feature-icon {
    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .12);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;
}


.login-form-panel {
    min-height:
        610px;

    padding:
        60px 55px;

    display:
        flex;

    align-items:
        center;
}


.login-form-inner {
    width:
        100%;

    max-width:
        390px;

    margin:
        0 auto;
}


.portal-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 12px;

    background:
        #edf4ff;

    color:
        #0d6efd;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        600;

    margin-bottom:
        18px;
}


.login-title {
    font-size:
        30px;

    font-weight:
        700;

    color:
        #152238;

    margin-bottom:
        7px;
}


.login-subtitle {
    color:
        #7b8798;

    margin-bottom:
        30px;
}


.login-label {
    font-weight:
        600;

    color:
        #38465a;

    margin-bottom:
        8px;
}


.login-input-group {
    position:
        relative;
}


.login-input-icon {
    position:
        absolute;

    left:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #8492a6;

    z-index:
        5;
}


.login-control {
    height:
        54px;

    border-radius:
        12px;

    padding-left:
        46px;

    border:
        1px solid #dce3eb;

    font-size:
        15px;

    background:
        #fbfcfe;
}


.login-control:focus {
    background:
        #ffffff;

    border-color:
        #6ea8fe;

    box-shadow:
        0 0 0 .22rem rgba(13, 110, 253, .12);
}


.password-toggle {
    position:
        absolute;

    right:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    border:
        0;

    background:
        transparent;

    color:
        #8492a6;

    z-index:
        5;

    cursor:
        pointer;
}


.password-toggle:hover,
.password-toggle:focus {
    color:
        #0d6efd;
}


.login-btn {
    height:
        54px;

    border-radius:
        12px;

    font-weight:
        600;

    font-size:
        16px;

    margin-top:
        8px;

    box-shadow:
        0 8px 20px rgba(13, 110, 253, .18);
}


.login-alert {
    border-radius:
        12px;

    font-size:
        14px;
}


.login-footer {
    margin-top:
        28px;

    padding-top:
        22px;

    border-top:
        1px solid #edf0f4;

    text-align:
        center;

    color:
        #8a96a7;

    font-size:
        13px;
}


.back-home {
    color:
        #526173;

    text-decoration:
        none;

    font-size:
        14px;
}


.back-home:hover {
    color:
        #0d6efd;

    text-decoration:
        none;
}


/* =====================================================
   PAYMENT RECEIPT
===================================================== */

.receipt-wrapper {
    max-width:
        850px;

    margin:
        0 auto;
}


.receipt-card {
    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:
        12px;

    padding:
        40px;
}


.receipt-title {
    font-weight:
        700;

    letter-spacing:
        1px;
}


.receipt-divider {
    border-top:
        2px dashed #d1d5db;

    margin:
        28px 0;
}


/* =====================================================
   LANDING PAGE
===================================================== */

.landing-page {
    min-height:
        100vh;

    background:
        radial-gradient(
            circle at top right,
            rgba(15, 108, 124, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7f9fc 0%,
            #eef4f8 100%
        );
}


/* =====================================================
   LANDING NAVBAR
===================================================== */

.landing-navbar {
    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid #e5eaf0;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.landing-navbar .brand-logo {
    width:
        46px;

    height:
        46px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #17365d,
            #0f6c7c
        );

    color:
        #ffffff;

    font-size:
        1.3rem;

    font-weight:
        800;

    flex-shrink:
        0;

    border:
        0;
}


.landing-navbar .brand-title {
    color:
        #17365d;

    font-weight:
        800;

    line-height:
        1.1;
}


.landing-navbar .brand-subtitle {
    font-size:
        .75rem;

    color:
        #6b7280;
}


/* =====================================================
   LANDING HERO
===================================================== */

.hero-section {
    padding:
        95px 0 85px;
}


.hero-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    background:
        #edf4fb;

    color:
        #17365d;

    border:
        1px solid #dce8f4;

    border-radius:
        50px;

    padding:
        8px 14px;

    font-size:
        .85rem;

    font-weight:
        600;

    margin-bottom:
        22px;
}


.hero-title {
    font-size:
        clamp(2.4rem, 5vw, 4.5rem);

    line-height:
        1.08;

    font-weight:
        800;

    color:
        #172033;

    letter-spacing:
        -1.5px;

    max-width:
        800px;
}


.hero-title span {
    color:
        #17365d;
}


.hero-description {
    max-width:
        700px;

    color:
        #667085;

    font-size:
        1.1rem;

    line-height:
        1.8;

    margin-top:
        24px;
}


.hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        32px;
}


/* =====================================================
   LANDING BUTTONS
===================================================== */

.btn-caspa {
    background:
        #17365d;

    border-color:
        #17365d;

    color:
        #ffffff;

    padding:
        12px 24px;

    font-weight:
        600;

    border-radius:
        10px;
}


.btn-caspa:hover,
.btn-caspa:focus {
    background:
        #102a49;

    border-color:
        #102a49;

    color:
        #ffffff;
}


.btn-outline-caspa {
    padding:
        12px 24px;

    border-radius:
        10px;

    border:
        1px solid #cfd8e3;

    background:
        #ffffff;

    color:
        #17365d;

    font-weight:
        600;
}


.btn-outline-caspa:hover,
.btn-outline-caspa:focus {
    background:
        #f3f6fa;

    border-color:
        #c5cfdb;

    color:
        #17365d;
}


/* =====================================================
   HERO SERVICE PANEL
===================================================== */

.hero-panel {
    background:
        #ffffff;

    border-radius:
        22px;

    padding:
        28px;

    border:
        1px solid #e3e9f0;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .08);
}


.hero-panel-title {
    font-size:
        1.05rem;

    font-weight:
        700;

    color:
        #172033;

    margin-bottom:
        20px;
}


.hero-service-item {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        14px 0;

    border-bottom:
        1px solid #eef1f5;
}


.hero-service-item:last-child {
    border-bottom:
        none;
}


.service-icon {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        11px;

    background:
        #edf4fb;

    color:
        #17365d;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        1.1rem;
}


/* =====================================================
   LANDING SECTIONS
===================================================== */

.section {
    padding:
        80px 0;
}


.section-light {
    background:
        #ffffff;
}


.section-heading {
    max-width:
        700px;

    margin:
        0 auto 45px;

    text-align:
        center;
}


.section-heading h2 {
    font-size:
        2rem;

    font-weight:
        800;

    color:
        #172033;
}


.section-heading p {
    color:
        #6b7280;

    margin-top:
        12px;

    line-height:
        1.7;
}


/* =====================================================
   SERVICE CARDS
===================================================== */

.service-card {
    height:
        100%;

    background:
        #ffffff;

    border:
        1px solid #e5eaf0;

    border-radius:
        16px;

    padding:
        26px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.service-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 14px 35px rgba(15, 23, 42, .08);
}


.service-card-icon {
    width:
        52px;

    height:
        52px;

    border-radius:
        14px;

    background:
        #edf4fb;

    color:
        #17365d;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        1.4rem;

    margin-bottom:
        20px;
}


.service-card h5 {
    font-weight:
        700;

    color:
        #172033;
}


.service-card p {
    color:
        #6b7280;

    line-height:
        1.65;

    font-size:
        .95rem;

    margin-bottom:
        0;
}


/* =====================================================
   HOW IT WORKS
===================================================== */

.process-card {
    text-align:
        center;

    padding:
        20px;
}


.process-number {
    width:
        52px;

    height:
        52px;

    margin:
        0 auto 16px;

    border-radius:
        50%;

    background:
        #17365d;

    color:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        800;
}


.process-card h6 {
    font-weight:
        700;

    color:
        #172033;
}


.process-card p {
    color:
        #6b7280;

    font-size:
        .92rem;
}


/* =====================================================
   LANDING CTA
===================================================== */

.cta-box {
    background:
        linear-gradient(
            135deg,
            #17365d,
            #0f6c7c
        );

    color:
        #ffffff;

    border-radius:
        22px;

    padding:
        45px;
}


.cta-box h2 {
    font-weight:
        800;
}


.cta-box p {
    color:
        rgba(255, 255, 255, .82);

    max-width:
        650px;
}


/* =====================================================
   LANDING FOOTER
===================================================== */

.landing-footer {
    background:
        #102a49;

    color:
        rgba(255, 255, 255, .75);

    padding:
        30px 0;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

    .app-content {
        padding:
            24px;
    }

}


@media (max-width: 991px) {

    .app-sidebar {
        transform:
            translateX(-100%);

        transition:
            transform .25s ease;
    }


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


    .sidebar-overlay.show {
        display:
            block;
    }


    .app-main {
        width:
            100%;

        margin-left:
            0;
    }


    .mobile-menu-button {
        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;
    }


    .app-header {
        padding:
            0 18px;
    }


    .app-content {
        padding:
            20px 16px;
    }


    .header-title {
        font-size:
            14px;
    }


    .dashboard-heading {
        font-size:
            24px;
    }


    .login-brand-panel {
        min-height:
            auto;

        padding:
            38px 32px;
    }


    .login-form-panel {
        min-height:
            auto;

        padding:
            45px 30px;
    }


    .login-brand-panel h1 {
        font-size:
            28px;
    }


    .hero-section {
        padding:
            60px 0;
    }


    .hero-panel {
        margin-top:
            40px;
    }

}


@media (max-width: 767px) {

    .login-brand-panel {
        display:
            none;
    }


    .login-wrapper {
        max-width:
            500px;

        border-radius:
            18px;
    }


    .login-form-panel {
        padding:
            40px 24px;
    }


    .hero-section {
        padding:
            50px 0;
    }


    .hero-title {
        font-size:
            2.5rem;
    }


    .hero-description {
        font-size:
            1rem;
    }


    .section {
        padding:
            60px 0;
    }


    .cta-box {
        padding:
            32px 24px;
    }


    .landing-navbar .brand-subtitle {
        display:
            none;
    }


    .receipt-card {
        padding:
            28px 20px;
    }

}


@media (max-width: 575px) {

    .header-title {
        max-width:
            190px;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }


    .header-subtitle {
        display:
            none;
    }


    .app-header {
        min-height:
            64px;
    }


    .dashboard-heading {
        font-size:
            22px;
    }


    .stat-value {
        font-size:
            24px;
    }


    .app-footer {
        padding:
            14px 16px;

        text-align:
            center;
    }


    .hero-title {
        font-size:
            2.1rem;
    }


    .hero-actions .btn,
    .hero-actions .btn-caspa,
    .hero-actions .btn-outline-caspa {
        width:
            100%;
    }


    .cta-box {
        padding:
            28px 20px;
    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    .app-sidebar,
    .app-header,
    .app-footer,
    .mobile-menu-button,
    .sidebar-overlay,
    .btn,
    .sidebar,
    .topbar,
    .navbar,
    .no-print {
        display:
            none !important;
    }


    .app-main {
        width:
            100% !important;

        margin-left:
            0 !important;
    }


    .main-content,
    main {
        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .app-content {
        padding:
            0 !important;
    }


    body {
        background:
            #ffffff !important;
    }


    .dashboard-card,
    .stat-card,
    .card {
        box-shadow:
            none !important;

        break-inside:
            avoid;
    }


    .receipt-wrapper {
        max-width:
            100%;
    }


    .receipt-card {
        border:
            none;

        box-shadow:
            none;

        padding:
            20px;
    }

}

/* =====================================================
   FINAL LINK DECORATION OVERRIDE
   Keep this section at the END of caspa.css
===================================================== */

html body a,
html body a:link,
html body a:visited,
html body a:hover,
html body a:focus,
html body a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}


/* Sidebar links */
html body .sidebar-link,
html body .sidebar-link:link,
html body .sidebar-link:visited,
html body .sidebar-link:hover,
html body .sidebar-link:focus,
html body .sidebar-link:active,
html body .sidebar-link span,
html body .sidebar-link i {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}


/* Buttons that are rendered as anchor tags */
html body a.btn,
html body a.btn:hover,
html body a.btn:focus,
html body a.btn:active,
html body .btn a,
html body .btn span,
html body .btn i {
    text-decoration: none !important;
    text-decoration-line: none !important;
}


/* Tables */
html body .table a,
html body .table a:hover,
html body .table a:focus,
html body .table a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}


/* Dashboard and quick-action links */
html body .quick-action,
html body .quick-action *,
html body .stat-card,
html body .stat-card *,
html body .dashboard-card,
html body .dashboard-card * {
    text-decoration: none !important;
    text-decoration-line: none !important;
}


/* Pagination, breadcrumbs and navigation */
html body .page-link,
html body .breadcrumb a,
html body .nav-link,
html body .dropdown-item {
    text-decoration: none !important;
    text-decoration-line: none !important;
}


/* Landing and authentication links */
html body .back-home,
html body .btn-caspa,
html body .btn-outline-caspa,
html body .navbar-brand {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* =====================================================
   REPORT / TABLE SPACING
===================================================== */

.table > :not(caption) > * > * {
    padding: 0.95rem 1rem;
}

.table thead th {
    padding-left: 1rem;
    padding-right: 1rem;
}

.table tbody td {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* Report summary rows */
.dashboard-card .list-group-item,
.card .list-group-item {
    padding: 0.85rem 1rem;
}


/* Extra spacing for report tables/cards */
.dashboard-card-body,
.card-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* =====================================================
   MANAGEMENT REPORT SPACING
===================================================== */

.dashboard-card .list-group-item {
    padding: 0.9rem 1.15rem;
}

.dashboard-card .table th,
.dashboard-card .table td {
    padding: 0.9rem 1.15rem;
}

.dashboard-card-header {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

/* =========================================================
   CASPA SIDEBAR COLOUR REFINEMENT
========================================================= */

.app-sidebar {
    background: linear-gradient(
        180deg,
        #123c55 0%,
        #0d4f5c 55%,
        #083c49 100%
    );
}


/* Sidebar brand area */

.sidebar-brand {
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}


/* Normal menu links */

.sidebar-link {
    color: rgba(255, 255, 255, 0.82);
}


/* Icons */

.sidebar-link i {
    color: rgba(255, 255, 255, 0.72);
}


/* Hover */

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.sidebar-link:hover i {
    color: #ffffff;
}


/* Active menu */

.sidebar-link.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-left: 3px solid #f4b942;
}

.sidebar-link.active i {
    color: #ffffff;
}


/* Section headings */

.sidebar-section-title {
    color: rgba(255, 255, 255, 0.42);
}


/* Sidebar scrollbar */

.app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}


/* =========================================================
   CASPA TOP BAR COLOUR REFINEMENT
========================================================= */

.app-header {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #f4fafb 55%,
        #eef7f8 100%
    );

    border-bottom: 1px solid #d7e7ea;
    box-shadow: 0 2px 8px rgba(13, 79, 92, 0.06);
}


/* Main organisation name */

.app-header .header-title {
    color: #123c55;
}


/* Organisation subtitle */

.app-header .header-subtitle {
    color: #6b7f87;
}


/* Username */

.app-header .fw-semibold {
    color: #123c55;
}


/* Role badge */

.app-header .user-role-badge {
    background: #e7f3f4;
    color: #0d4f5c;
    border: 1px solid #cce3e6;
}


/* User avatar */

.app-header .user-avatar {
    background: linear-gradient(
        135deg,
        #0d4f5c,
        #123c55
    );

    color: #ffffff;
    border: 2px solid #dcecef;
}


/* Notification bell */

.app-header .header-notification-link {
    background: #edf6f7;
    color: #0d4f5c;
    border: 1px solid #d5e7e9;
}


/* Notification bell hover */

.app-header .header-notification-link:hover {
    background: #0d4f5c;
    color: #ffffff;
    border-color: #0d4f5c;
}


/* Unread notification badge */

.app-header .header-notification-badge {
    background: #dc3545;
    color: #ffffff;
    border: 2px solid #ffffff;
}


/* Logout button */

.app-header .btn-outline-danger {
    background: #ffffff;
}


/* Logout hover */

.app-header .btn-outline-danger:hover {
    background: #dc3545;
    color: #ffffff;
}

/* =========================================================
   CASPA DARKER TOP BAR
========================================================= */

.app-header {
    background: linear-gradient(
        90deg,
        #dcebed 0%,
        #d2e5e8 55%,
        #c7dde1 100%
    );

    border-bottom: 1px solid #abcbd0;
    box-shadow: 0 2px 10px rgba(13, 79, 92, 0.10);
}


/* Organisation title */

.app-header .header-title {
    color: #123c55;
    font-weight: 700;
}


/* Organisation subtitle */

.app-header .header-subtitle {
    color: #526d75;
}


/* Username */

.app-header .fw-semibold {
    color: #123c55;
}


/* Role badge */

.app-header .user-role-badge {
    background: rgba(255, 255, 255, 0.55);
    color: #0d4f5c;
    border: 1px solid #a9cdd2;
}


/* Notification bell */

.app-header .header-notification-link {
    background: rgba(255, 255, 255, 0.60);
    color: #0d4f5c;
    border: 1px solid #aacdd2;
}

.app-header .header-notification-link:hover {
    background: #0d4f5c;
    color: #ffffff;
    border-color: #0d4f5c;
}


/* User avatar */

.app-header .user-avatar {
    background: linear-gradient(
        135deg,
        #0d4f5c,
        #123c55
    );

    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.75);
}


/* =========================================================
   CASPA DARKER FOOTER
========================================================= */

.app-footer {
    background: linear-gradient(
        90deg,
        #c7dde1 0%,
        #b9d4d9 50%,
        #aecdd3 100%
    );

    color: #294f59;
    border-top: 1px solid #9fc4ca;
    box-shadow: 0 -2px 8px rgba(13, 79, 92, 0.06);
}


/* Footer text */

.app-footer,
.app-footer p,
.app-footer span,
.app-footer small {
    color: #355e67;
}


/* Footer links */

.app-footer a {
    color: #0d4f5c;
    font-weight: 600;
    text-decoration: none;
}

.app-footer a:hover {
    color: #083c49;
}

/* =========================================================
   CASPA COLOURED DASHBOARD CARDS
========================================================= */

/* Base stat card */

.stat-card {
    background: linear-gradient(
        135deg,
        #f7fbfc 0%,
        #edf5f7 100%
    );
    border: 1px solid #d8e7ea;
    box-shadow: 0 4px 14px rgba(18, 60, 85, 0.06);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(18, 60, 85, 0.10);
}


/* =========================================================
   BLUE / PRIMARY
========================================================= */

.stat-card.card-primary {
    background: linear-gradient(
        135deg,
        #edf5ff 0%,
        #dcecff 100%
    );
    border-color: #c5dcf7;
}

.stat-card.card-primary .stat-value {
    color: #164c7e;
}


/* =========================================================
   TEAL / SUCCESS
========================================================= */

.stat-card.card-success {
    background: linear-gradient(
        135deg,
        #edf9f6 0%,
        #d8f0e9 100%
    );
    border-color: #bfe2d7;
}

.stat-card.card-success .stat-value {
    color: #146c5b;
}


/* =========================================================
   GOLD / WARNING
========================================================= */

.stat-card.card-warning {
    background: linear-gradient(
        135deg,
        #fff9e9 0%,
        #f8edc8 100%
    );
    border-color: #ead89b;
}

.stat-card.card-warning .stat-value {
    color: #8a6514;
}


/* =========================================================
   PURPLE / SECONDARY
========================================================= */

.stat-card.card-secondary {
    background: linear-gradient(
        135deg,
        #f5f1fb 0%,
        #e8def5 100%
    );
    border-color: #d7c6eb;
}

.stat-card.card-secondary .stat-value {
    color: #65438a;
}


/* =========================================================
   RED / ATTENTION
========================================================= */

.stat-card.card-danger {
    background: linear-gradient(
        135deg,
        #fff2f2 0%,
        #f9dddd 100%
    );
    border-color: #edc2c2;
}

.stat-card.card-danger .stat-value {
    color: #a33b3b;
}

/* =========================================================
   CASPA NOTIFICATION CENTRE
========================================================= */

.notification-list {
    width: 100%;
}


/* Individual notification */

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #e7edf1;
    background: #ffffff;
    transition: background .2s ease;
}

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

.notification-item:hover {
    background: #f8fbfc;
}


/* Unread notification */

.notification-item.notification-unread {
    background: linear-gradient(
        90deg,
        #eef8fa 0%,
        #f8fcfd 100%
    );

    border-left: 4px solid #0d6b78;
}

.notification-item.notification-unread:hover {
    background: #eaf6f8;
}


/* Notification icon */

.notification-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 1.15rem;
}


/* General */

.notification-general {
    background: #e8f1fb;
    color: #285d8f;
}


/* Research */

.notification-research {
    background: #e6f4f6;
    color: #0d6672;
}


/* Appointment */

.notification-appointment {
    background: #f1eafa;
    color: #694a8d;
}


/* Training */

.notification-training {
    background: #fff4d9;
    color: #926c16;
}


/* Payment */

.notification-payment {
    background: #e5f5ed;
    color: #277154;
}


/* Document */

.notification-document {
    background: #edf0f5;
    color: #4d5d72;
}


/* Main notification content */

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-content h6 {
    color: #173d4c;
}

.notification-content p {
    font-size: .91rem;
    line-height: 1.55;
}


/* Type badge */

.notification-type-badge {
    background: #edf2f5;
    color: #536773;
    border: 1px solid #dbe4e8;
    font-weight: 600;
}


/* Date/time */

.notification-meta {
    color: #87979e;
    font-size: .78rem;
}


/* Action area */

.notification-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.notification-actions form {
    margin: 0;
}


/* Empty state */

.notification-empty-icon {
    width: 72px;
    height: 72px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf5f6;
    color: #4f7b84;

    font-size: 1.8rem;
}


/* =========================================================
   NOTIFICATION RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

    .notification-item {
        flex-wrap: wrap;
        padding: 18px;
    }

    .notification-content {
        flex: 1 1 calc(100% - 65px);
    }

    .notification-actions {
        width: 100%;
        padding-left: 62px;
        margin-top: 5px;
    }
}

/* =========================================================
   NOTIFICATIONS CENTRE - FINAL LAYOUT FIX
========================================================= */

/* Main notifications panel */

.notification-list {
    display: block;
    width: 100%;
}


/* Each notification becomes a proper horizontal row */

.notification-list .notification-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;

    width: 100%;
    min-height: 90px;

    padding: 18px 20px;

    background: #ffffff;

    border-bottom: 1px solid #e4ebef;
    border-left: 4px solid transparent;
}


/* Alternate subtle hover */

.notification-list .notification-item:hover {
    background: #f7fafb;
}


/* Unread */

.notification-list .notification-item.notification-unread {
    background: linear-gradient(
        90deg,
        #edf8fa 0%,
        #f8fcfd 65%,
        #ffffff 100%
    );

    border-left-color: #0d6b78;
}


/* =========================================================
   ICON
========================================================= */

.notification-list .notification-icon {
    width: 46px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    font-size: 1.15rem;
}


/* =========================================================
   CONTENT
========================================================= */

.notification-list .notification-content {
    display: block;
    min-width: 0;
}

.notification-list .notification-content h6 {
    margin-bottom: 4px;
    color: #153f50;
    font-size: .96rem;
}

.notification-list .notification-content p {
    margin-bottom: 6px !important;

    color: #5e7078 !important;

    font-size: .88rem;
    line-height: 1.45;
}


/* Date */

.notification-list .notification-meta {
    display: flex;
    align-items: center;

    color: #87969c;

    font-size: .76rem;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.notification-list .notification-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    width: auto !important;
    min-width: max-content;

    padding: 0 !important;
    margin: 0 !important;
}


.notification-list .notification-actions form {
    display: inline-block;
    margin: 0 !important;
}


.notification-list .notification-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    white-space: nowrap;
}


/* Icon-only buttons */

.notification-list .notification-actions form .btn {
    width: 36px;
    height: 34px;
    padding: 0;
}


/* =========================================================
   CATEGORY ICON COLOURS
========================================================= */

.notification-list .notification-general {
    background: #e8f1fb;
    color: #285d8f;
}

.notification-list .notification-research {
    background: #e3f3f5;
    color: #0d6672;
}

.notification-list .notification-appointment {
    background: #f0e8f8;
    color: #68468b;
}

.notification-list .notification-training {
    background: #fff3d5;
    color: #906715;
}

.notification-list .notification-payment {
    background: #e1f3ea;
    color: #267052;
}

.notification-list .notification-document {
    background: #e8eef5;
    color: #435d76;
}


/* =========================================================
   TYPE BADGE
========================================================= */

.notification-list .notification-type-badge {
    padding: 4px 8px;

    background: #edf2f5;
    color: #526872;

    border: 1px solid #dce5e9;
    border-radius: 999px;

    font-size: .68rem;
    font-weight: 600;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .notification-list .notification-item {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;

        padding: 16px;
    }

    .notification-list .notification-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .notification-list .notification-actions {
        grid-column: 2;

        justify-content: flex-start;

        margin-top: 8px !important;
    }
}

/* =========================================================
   LOGIN PAGE - COLUMN ALIGNMENT FIX
========================================================= */

.login-wrapper {
    overflow: hidden;
}

.login-wrapper > .row {
    align-items: stretch;
}

.login-wrapper > .row > [class*="col-"] {
    display: flex;
}

.login-brand-panel,
.login-form-panel {
    width: 100%;
    min-height: 100%;
}

/* Make the blue panel occupy the complete left side */
.login-brand-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Right panel */
.login-form-panel {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Keep the login content properly positioned */
.login-form-inner {
    width: 100%;
}


/* =========================================================
   REGISTRATION OPTIONS
========================================================= */

.login-form-inner .card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.login-form-inner a:hover .card {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .login-wrapper > .row > [class*="col-"] {
        display: block;
    }

    .login-brand-panel,
    .login-form-panel {
        height: auto;
        min-height: auto;
    }

    .login-brand-panel {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

}