/*
 * Squeeze Modern Theme - Official Brand Identity
 * Custom Bootstrap 5 theme variables and components
 * Brand colors per design studio spec: SQ! Yellow #FFDB05, SQ! Black #000000,
 * SQ! White #F0E5D6, SQ! Lilac #A890EC, SQ! Salmon #F68378
 */

/* ===================================
   1. Font Import
   =================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Note: Ready for Labil Grotesk when license is acquired
   Replace Inter with Labil Grotesk in font-family declarations below */

/* ===================================
   2. CSS Custom Properties (Variables)
   =================================== */
:root {
    /* === Official Brand Colors (design studio spec) === */
    --squeeze-yellow: #FFDB05;            /* SQ! Yellow — RGB 255/219/5, Pantone 116 C */
    --squeeze-black: #000000;             /* SQ! Black — pure black */
    --squeeze-white: #FFFFFF;            /* SQ! White — pure white (RGB 255/255/255, CMYK 0/0/0/0) */
    --squeeze-lila: #A890EC;             /* SQ! Lilac — supplementary accent */
    --squeeze-salmon: #F68378;           /* SQ! Salmon — supplementary accent */

    /* Primary palette aliases */
    --squeeze-primary: #FFDB05;           /* SQ! Yellow — primary brand color */
    --squeeze-primary-hover: #E5C400;     /* Darker yellow for hover states */
    --squeeze-primary-light: #FFFBE0;     /* Very light yellow for backgrounds */
    --squeeze-primary-dark: #C9AB00;      /* Dark yellow for high-contrast use */

    /* Black variants for text on yellow */
    --squeeze-black-light: #1A1A1A;       /* Near-black for body text */
    --squeeze-black-medium: #2D2D2D;      /* Slightly lighter */
    --squeeze-black-hover: #404040;       /* Hover state */

    /* Secondary and accent colors */
    --squeeze-secondary: #000000;         /* SQ! Black as secondary */
    --squeeze-success: #10B981;           /* Emerald for success states */
    --squeeze-warning: #F59E0B;           /* Amber for warnings */
    --squeeze-danger: #DC2626;            /* Red for danger/errors */
    --squeeze-info: #0EA5E9;             /* Sky blue for informational */

    /* Neutral Colors - Updated to work with new palette */
    --squeeze-gray-50: #FAFAFA;
    --squeeze-gray-100: #F5F5F5;
    --squeeze-gray-200: #E5E5E5;
    --squeeze-gray-300: #D4D4D4;
    --squeeze-gray-400: #A3A3A3;
    --squeeze-gray-500: #737373;
    --squeeze-gray-600: #525252;
    --squeeze-gray-700: #404040;
    --squeeze-gray-800: #262626;
    --squeeze-gray-900: #171717;

    /* Text Colors */
    --squeeze-text-primary: #1A1A1A;
    --squeeze-text-secondary: #525252;
    --squeeze-text-muted: #A3A3A3;
    --squeeze-text-light: #D4D4D4;
    --squeeze-text-on-primary: #000000;   /* SQ! Black text on yellow */

    /* Background Colors */
    --squeeze-bg-body: #FAFAFA;           /* Near-white page background — slight separation from card surfaces */
    --squeeze-bg-surface: #FFFFFF;        /* SQ! White — pure white for cards/surfaces */
    --squeeze-bg-hover: #F5F5F5;          /* Hover state */
    --squeeze-bg-selected: #FFFDE6;       /* Light yellow tint for selected/active items */

    /* Border */
    --squeeze-border-color: #E5E5E5;
    --squeeze-border-radius: 0.5rem;
    --squeeze-border-radius-lg: 0.75rem;

    /* Spacing Scale (4px base grid) */
    --squeeze-space-1: 0.25rem;   /* 4px */
    --squeeze-space-2: 0.5rem;    /* 8px */
    --squeeze-space-3: 0.75rem;   /* 12px */
    --squeeze-space-4: 1rem;      /* 16px */
    --squeeze-space-5: 1.25rem;   /* 20px */
    --squeeze-space-6: 1.5rem;    /* 24px */
    --squeeze-space-8: 2rem;      /* 32px */

    /* Typography Scale */
    --squeeze-text-xs: 0.75rem;     /* 12px — badge labels, captions */
    --squeeze-text-sm: 0.875rem;    /* 14px — form labels, secondary metadata */
    --squeeze-text-base: 1rem;      /* 16px — body text */
    --squeeze-text-lg: 1.125rem;    /* 18px — emphasized body, card titles */
    --squeeze-text-xl: 1.25rem;     /* 20px — sub-headings */
    --squeeze-text-2xl: 1.5rem;     /* 24px — section headings */
    --squeeze-text-3xl: 1.75rem;    /* 28px — page headings */

    /* Semantic Badge Colors */
    --squeeze-badge-success-bg: #D1FAE5;
    --squeeze-badge-success-text: #065F46;
    --squeeze-badge-warning-bg: #FEF3C7;
    --squeeze-badge-warning-text: #92400E;
    --squeeze-badge-danger-bg: #FEE2E2;
    --squeeze-badge-danger-text: #7F1D1D;
    --squeeze-badge-info-bg: #E0F2FE;
    --squeeze-badge-info-text: #075985;

    /* Shadows */
    --squeeze-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --squeeze-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --squeeze-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --squeeze-shadow-yellow: 0 4px 20px 0 rgb(255 219 5 / 0.35);  /* SQ! Yellow glow */
}

/* ===================================
   3. Bootstrap Variable Overrides
   =================================== */
body {
    --bs-primary: var(--squeeze-primary);
    --bs-secondary: var(--squeeze-secondary);
    --bs-dark: var(--squeeze-secondary);     /* bg-dark → SQ! Black */
    --bs-success: var(--squeeze-success);
    --bs-warning: var(--squeeze-warning);
    --bs-danger: var(--squeeze-danger);
    --bs-info: var(--squeeze-info);
    --bs-body-bg: var(--squeeze-bg-body);
    --bs-body-color: var(--squeeze-text-primary);
    --bs-border-color: var(--squeeze-border-color);
}

/* ===================================
   4. Base Styles
   =================================== */
body {
    background-color: var(--squeeze-bg-body);
    color: var(--squeeze-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
}

/* ===================================
   5. Typography
   =================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--squeeze-text-primary);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

h1 { font-size: var(--squeeze-text-3xl); }
h2 { font-size: var(--squeeze-text-2xl); }
h3 { font-size: var(--squeeze-text-xl); }
h4 { font-size: var(--squeeze-text-lg); }
h5 { font-size: var(--squeeze-text-base); }
h6 { font-size: var(--squeeze-text-sm); }

.text-muted {
    color: var(--squeeze-text-muted) !important;
}

/* ===================================
   6. Buttons - Updated for yellow primary
   =================================== */
.btn {
    border-radius: var(--squeeze-border-radius);
    font-weight: 500;
    border: none;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background-color: var(--squeeze-primary) !important;
    color: var(--squeeze-text-on-primary) !important;
    border: 1px solid transparent !important;
}

.btn-primary:hover {
    background-color: var(--squeeze-primary-hover) !important;
    border-color: transparent !important;
    color: var(--squeeze-text-on-primary) !important;
}

.btn-primary:focus {
    background-color: var(--squeeze-primary) !important;
    border-color: transparent !important;
    color: var(--squeeze-text-on-primary) !important;
    box-shadow: 0 0 0 3px var(--squeeze-primary-light) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus:active {
    background-color: var(--squeeze-primary-hover) !important;
    border-color: transparent !important;
    color: var(--squeeze-text-on-primary) !important;
    box-shadow: none !important;
}

.btn-secondary {
    background-color: var(--squeeze-gray-200);
    color: var(--squeeze-text-primary);
    border: 1px solid var(--squeeze-gray-200);
}

.btn-secondary:hover {
    background-color: var(--squeeze-gray-300);
    border-color: var(--squeeze-gray-300);
    color: var(--squeeze-text-primary);
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--squeeze-gray-400);
    border-color: var(--squeeze-gray-400);
    color: var(--squeeze-text-primary);
    box-shadow: none;
}

.btn-outline-primary {
    border: 1px solid var(--squeeze-primary);
    color: var(--squeeze-primary);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--squeeze-primary);
    border-color: var(--squeeze-primary);
    color: var(--squeeze-text-on-primary);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--squeeze-primary-hover);
    border-color: var(--squeeze-primary-hover);
    color: var(--squeeze-text-on-primary);
    box-shadow: none;
}

.btn-outline-secondary {
    border: 1px solid var(--squeeze-border-color);
    color: var(--squeeze-text-secondary);
    background-color: var(--squeeze-bg-surface);
}

.btn-outline-secondary:hover {
    background-color: var(--squeeze-bg-hover);
    border-color: var(--squeeze-gray-300);
    color: var(--squeeze-text-primary);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    background-color: var(--squeeze-gray-200);
    border-color: var(--squeeze-gray-300);
    color: var(--squeeze-text-primary);
    box-shadow: none !important;
    outline: none;
}

/* Icon button */
.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--squeeze-border-radius);
    background-color: transparent;
    color: var(--squeeze-text-secondary);
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
    background-color: var(--squeeze-bg-hover);
    color: var(--squeeze-text-primary);
}

.btn-icon:focus,
.btn-icon:focus-visible,
.btn-icon.show {
    background-color: var(--squeeze-gray-200);
    color: var(--squeeze-text-primary);
    box-shadow: none !important;
    outline: none;
}

/* ===================================
   6b. Button groups (split buttons)
   =================================== */
/* Render a subtle translucent separator between split button halves. */
.btn-group > .btn + .btn,
.btn-group > .btn + .dropdown-toggle {
    border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Suppress focus ring (box-shadow) on buttons inside a group — the light-yellow
   primary focus glow bleeds inward and appears as a white separator between halves. */
.btn-group > .btn:focus,
.btn-group > .btn:focus-visible,
.btn-group > .btn.show {
    box-shadow: none !important;
    outline: none;
}

/* Darken the toggle half of split buttons when the dropdown is open.
   Both primary and secondary need explicit overrides because Bootstrap's default
   .show darkening either can't apply (!important) or goes too dark for our palette. */
.btn-group > .btn-primary.show {
    background-color: var(--squeeze-primary-hover) !important;
    border-color: var(--squeeze-primary-hover) !important;
}

.btn-group > .btn-secondary.show {
    background-color: var(--squeeze-gray-300) !important;
    border-color: var(--squeeze-gray-300) !important;
    color: var(--squeeze-text-primary);
}

/* ===================================
   6c. Button sizing
   =================================== */
/* Override btn-sm to match form-control/form-select height (.375rem vertical padding).
   The base .btn uses 0.5rem vertical padding (taller than form controls by design),
   but btn-sm is expected to align with sm form inputs in filter bars and toolbars. */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: inherit;
}

/* ===================================
   7. Forms
   =================================== */
.form-control,
.form-select {
    border: 1px solid var(--squeeze-border-color);
    border-radius: var(--squeeze-border-radius);
    color: var(--squeeze-text-primary);
    background-color: var(--squeeze-bg-surface);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--squeeze-primary);
    box-shadow: 0 0 0 3px var(--squeeze-primary-light);
    background-color: var(--squeeze-bg-surface);
}

.form-label {
    color: var(--squeeze-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Number stepper */
.number-stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--squeeze-border-color);
    border-radius: var(--squeeze-border-radius);
    background-color: var(--squeeze-bg-surface);
}

.number-stepper__button {
    width: 2.5rem;
    min-height: 2.5rem;
    border: 0;
    background-color: var(--squeeze-bg-hover);
    color: var(--squeeze-text-primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.number-stepper__button:hover:not(:disabled) {
    background-color: var(--squeeze-gray-200);
}

.number-stepper__button--primary {
    background-color: var(--squeeze-primary);
}

.number-stepper__button--primary:hover:not(:disabled) {
    background-color: var(--squeeze-primary-hover);
}

.number-stepper__button:disabled {
    color: var(--squeeze-text-muted);
    cursor: not-allowed;
}

.number-stepper__input {
    width: 3.5rem;
    min-height: 2.5rem;
    border: 0;
    border-left: 1px solid var(--squeeze-border-color);
    border-right: 1px solid var(--squeeze-border-color);
    background-color: var(--squeeze-bg-surface);
    color: var(--squeeze-text-primary);
    font-weight: 700;
    text-align: center;
    appearance: textfield;
}

.number-stepper__input::-webkit-outer-spin-button,
.number-stepper__input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.number-stepper__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--squeeze-primary-light);
}

/* ===================================
   8. Cards
   =================================== */
.card {
    background-color: var(--squeeze-bg-surface);
    border: 1px solid var(--squeeze-border-color);
    border-radius: var(--squeeze-border-radius-lg);
    box-shadow: var(--squeeze-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
    box-shadow: var(--squeeze-shadow);
    border-color: var(--squeeze-gray-300);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--squeeze-border-color);
    padding: 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* ===================================
   9. Badges - Updated for new color scheme
   =================================== */
.badge {
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
}

.badge.bg-primary {
    background-color: var(--squeeze-primary) !important;
    color: var(--squeeze-text-on-primary);
}

.badge.bg-success {
    background-color: var(--squeeze-badge-success-bg) !important;
    color: var(--squeeze-badge-success-text);
}

.badge.bg-warning {
    background-color: var(--squeeze-badge-warning-bg) !important;
    color: var(--squeeze-badge-warning-text);
}

.badge.bg-danger {
    background-color: var(--squeeze-badge-danger-bg) !important;
    color: var(--squeeze-badge-danger-text);
}

.badge.bg-secondary {
    background-color: var(--squeeze-gray-200) !important;
    color: var(--squeeze-text-secondary);
}

.badge.bg-info {
    background-color: var(--squeeze-badge-info-bg) !important;
    color: var(--squeeze-badge-info-text);
}

/* ===================================
   10. Dropdowns
   =================================== */
.dropdown-menu {
    border: 1px solid var(--squeeze-border-color);
    border-radius: var(--squeeze-border-radius);
    box-shadow: var(--squeeze-shadow-md);
    padding: 0.5rem;
    z-index: 1050;
    background-color: var(--squeeze-bg-surface);
}

.dropdown-item {
    border-radius: calc(var(--squeeze-border-radius) - 2px);
    padding: 0.5rem 0.75rem;
    color: var(--squeeze-text-primary);
    transition: background-color 0.15s ease;
}

.dropdown-item:hover {
    background-color: var(--squeeze-bg-hover);
    color: var(--squeeze-text-primary);
}

.dropdown-divider {
    margin: 0.5rem 0;
    border-color: var(--squeeze-border-color);
}

/* ===================================
   11. Navigation - Updated for new brand
   =================================== */
.navbar {
    background-color: var(--squeeze-secondary) !important;
    box-shadow: var(--squeeze-shadow);
    border-bottom: 3px solid var(--squeeze-primary);
}

.navbar-brand {
    font-weight: 700;
    font-size: var(--squeeze-text-2xl);
    color: var(--squeeze-white) !important;
    letter-spacing: -0.025em;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--squeeze-gray-300);
    font-weight: 500;
    transition: color 0.15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--squeeze-primary);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: var(--squeeze-primary);
    background-color: var(--squeeze-gray-800);
    border-radius: var(--squeeze-border-radius);
}

/* ===================================
   12. Tables
   =================================== */
.table {
    color: var(--squeeze-text-primary);
}

.table > thead {
    border-bottom: 2px solid var(--squeeze-border-color);
}

.table > tbody > tr {
    border-bottom: 1px solid var(--squeeze-border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--squeeze-gray-50);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--squeeze-bg-selected);
}

/* ===================================
   13. Pagination
   =================================== */
.pagination {
    gap: 0.25rem;
}

.page-link {
    border: none;
    border-radius: var(--squeeze-border-radius);
    color: var(--squeeze-text-secondary);
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    transition: all 0.15s ease;
}

.page-link:hover {
    background-color: var(--squeeze-bg-selected);
    color: var(--squeeze-text-primary);
}

.page-item.active .page-link {
    background-color: var(--squeeze-primary);
    color: var(--squeeze-text-on-primary);
}

.page-item.disabled .page-link {
    color: var(--squeeze-text-muted);
    background-color: transparent;
}

/* ===================================
   14. Alerts
   =================================== */
.alert {
    border: none;
    border-radius: var(--squeeze-border-radius);
    border-left: 4px solid;
}

.alert-info {
    background-color: var(--squeeze-badge-info-bg);
    color: var(--squeeze-badge-info-text);
    border-left-color: var(--squeeze-info);
}

.alert-success {
    background-color: var(--squeeze-badge-success-bg);
    color: var(--squeeze-badge-success-text);
    border-left-color: var(--squeeze-success);
}

.alert-warning {
    background-color: var(--squeeze-badge-warning-bg);
    color: var(--squeeze-badge-warning-text);
    border-left-color: var(--squeeze-warning);
}

.alert-danger {
    background-color: var(--squeeze-badge-danger-bg);
    color: var(--squeeze-badge-danger-text);
    border-left-color: var(--squeeze-danger);
}

/* ===================================
   15. Progress
   =================================== */
.progress {
    background-color: var(--squeeze-gray-200);
    border-radius: 1rem;
    height: 0.5rem;
}

.progress-bar {
    background-color: var(--squeeze-primary);
}

.capacity-progress {
    height: 1.25rem;
}

.capacity-progress .capacity-current {
    background-color: var(--squeeze-black);
}

.capacity-progress .capacity-import {
    background-color: var(--squeeze-primary);
}

.capacity-legend {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    vertical-align: 0.05em;
}

.capacity-legend-current {
    background-color: var(--squeeze-black);
}

.capacity-legend-import {
    background-color: var(--squeeze-primary);
}

.quiz-import-page #wizardStatus {
    padding-bottom: 6rem;
}

.import-action-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    padding: 0.75rem 0;
    background-color: var(--squeeze-white);
    border-top: 1px solid var(--squeeze-gray-300);
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.import-action-bar-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .quiz-import-page #wizardStatus {
        padding-bottom: 9rem;
    }

    .import-action-bar-content {
        flex-direction: column;
        align-items: stretch;
    }

    .import-action-bar .btn {
        width: 100%;
    }
}

/* ===================================
   16. Logo and Brand Elements
   =================================== */
.squeeze-logo {
    height: 32px;
    width: auto;
    max-width: none;
}

.squeeze-logo-large {
    height: 80px;
    width: auto;
    max-width: none;
}

.squeeze-logo-small {
    height: 24px;
    width: auto;
    max-width: none;
}

.squeeze-logo-icon {
    height: 24px;
    width: 24px; /* Square for icon variant */
}

/* Logo container for navbar */
.navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand .squeeze-logo {
    height: 28px; /* Slightly smaller in navbar for better fit */
}

/* Responsive logo - use icon on small screens */
@media (max-width: 576px) {
    .navbar-brand .squeeze-logo {
        display: none;
    }
    .navbar-brand .squeeze-logo-icon {
        display: inline-block;
    }
}

@media (min-width: 577px) {
    .navbar-brand .squeeze-logo-icon {
        display: none;
    }
}

/* ===================================
   17. Utility Classes
   =================================== */
.bg-surface {
    background-color: var(--squeeze-bg-surface);
}

.bg-hover {
    background-color: var(--squeeze-bg-hover);
}

.bg-selected {
    background-color: var(--squeeze-bg-selected);
}

.border-light {
    border-color: var(--squeeze-border-color) !important;
}

.text-on-primary {
    color: var(--squeeze-text-on-primary) !important;
}

.shadow-sm {
    box-shadow: var(--squeeze-shadow-sm) !important;
}

.shadow {
    box-shadow: var(--squeeze-shadow) !important;
}

.shadow-md {
    box-shadow: var(--squeeze-shadow-md) !important;
}

.shadow-yellow {
    box-shadow: var(--squeeze-shadow-yellow) !important;
}

.rounded {
    border-radius: var(--squeeze-border-radius) !important;
}

.rounded-lg {
    border-radius: var(--squeeze-border-radius-lg) !important;
}

/* ===================================
   18. Animations and Transitions
   =================================== */
.squeeze-hover-lift {
    transition: box-shadow 0.2s ease-in-out;
}

.squeeze-hover-lift:hover {
    box-shadow: var(--squeeze-shadow-md);
}

.squeeze-pulse {
    animation: squeeze-pulse 2s infinite;
}

@keyframes squeeze-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--squeeze-primary);
    }
    50% {
        box-shadow: 0 0 0 10px transparent;
    }
}

/* ===================================
   19. Dark Mode Support (Future)
   =================================== */
@media (prefers-color-scheme: dark) {
    /* Currently not implemented, but structure ready for future dark mode */
}

/* ===================================
   20. Print Styles
   =================================== */
@media print {
    .navbar,
    .dropdown,
    .btn-icon,
    .pagination {
        display: none !important;
    }

    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    body {
        background-color: white !important;
        color: black !important;
    }
}