:root {
  /* Colors */
  --color-void: #08090a;
  --color-carbon: #0f1011;
  --color-obsidian: #161718;
  --color-graphite: #23252a;
  --color-smoke: #383b3f;
  --color-ash: #62666d;
  --color-fog: #8a8f98;
  --color-mist: #d0d6e0;
  --color-bone: #e5e5e6;
  --color-paper: #ffffff;

  --color-void: #f7f6f5;
  --color-carbon: #f0efee;
  --color-obsidian: #e9e8e7;
  --color-graphite: #dcdad5;
  --color-smoke: #c7c4c0;
  --color-ash: #9d9992;
  --color-fog: #57534c;
  --color-mist: #2f291f;
  --color-bone: #1a1a19;
  --color-paper: #000000;


 


  --color-acid-lime: #e4f222;
  --color-pulse-green: #27a644;
  --color-coral-red: #eb5757;
  --color-signal-teal: #02b8cc;
  --color-iris-violet: #6366f1;
  --color-lavender: #8b5cf6;

  /* Typography — Font Families */
  --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-berkeley-mono: 'Berkeley Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --text-body-sm: 15px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: -0.165px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.33;
  --tracking-body-lg: -0.24px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.288px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -0.704px;
  --text-heading: 48px;
  --leading-heading: 1;
  --tracking-heading: -1.056px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.408px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.584px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-w510: 510;
  --font-weight-w590: 590;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 22px;
  --radius-full: 400px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-small: 2px;
  --radius-badges: 4px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-subtle: rgb(35, 37, 42) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  --shadow-xl: rgba(8, 9, 10, 0.6) 0px 4px 32px 0px;
  --shadow-subtle-4: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;
  --shadow-subtle-5: rgba(0, 0, 0, 0.1) 0px 0px 0px 2px;

  /* Surfaces */
  --surface-void: #08090a;
  --surface-carbon: #0f1011;
  --surface-obsidian: #161718;
  --surface-slate: #23252a;

  --default-border: 1px solid var(--color-graphite);
  --strong-border: 1px solid var(--color-smoke);
  --subtle-border: 1px solid rgba(255, 255, 255, 0.08);

  --subtle-border: 1px solid rgba(0, 0, 0, 0.08);
}

html, body{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--color-void);
}

*{
    color: var(--color-mist);
    font-family: var(--font-inter-variable);
    font-size: var(--spacing-16);
}

.primary_text{
    color: var(--color-paper);
}

.ajs-message{
    border-radius: var(--radius-cards) !important;
    background-color: var(--color-obsidian) !important;
}
.ajs-error{
    border: 1px solid var(--color-coral-red) !important;
    color: var(--color-coral-red) !important;
}
.ajs-success{
    border: 1px solid var(--color-pulse-green) !important;
    color: var(--color-pulse-green) !important;
}

.page_name{
    display: flex;
    align-content: center;
    gap: var(--element-gap);
}
.button_main{
    background-color: var(--color-obsidian);
    padding: var(--spacing-8);
    border-radius: var(--radius-buttons);
    border: var(--subtle-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--element-gap);
}
.button_main:hover{
    scale: 1.05;
    transition: scale 0.2s ease-out;
}
.button_main:active{
    scale: 0.95;
    transition: scale 0.2s ease-out;
}
.button_subtle{
    color: var(--color-fog);
}
.button_subtle_off{
    color: var(--color-ash);
}

/* .dt-paging-button.current{
    background-color: var(--color-void) !important;
    border: var(--subtle-border) !important;
    border-radius: var(--radius-buttons) !important;
    transition: all 0.2s ease-out;
}
.dt-paging-button:hover{
    background-color: var(--color-obsidian) !important;
    border: var(--subtle-border) !important;
    border-radius: var(--radius-buttons) !important;
} */

/* NAVBAR */
        .account_name{
            color: var(--color-fog);
        }
        .account_profile{
            width: 30px;
            height: 30px;
            border-radius: 10%;
            background-color: var(--color-carbon);
            border: var(--default-border);
            color: var(--color-mist);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .right .account:hover{
            cursor: pointer;
        }
        .nav_bar > div > div{
            display: flex;
            align-items: center;
            display: flex;
            gap: var(--spacing-16);
        }
        .main_nav{
            display: flex;
            justify-content: space-between;
            padding: 8px;
            margin-left: var(--section-gap);
            margin-right: var(--section-gap);
        }
        /* .nav_bar div{
            display: flex;
            gap: var(--spacing-16);
        } */
        .sec_nav{
            margin-top: var(--spacing-8);
            margin-bottom: var(--spacing-8);
            display: flex;  
            justify-content: space-between;
            padding: 8px;
            margin-left: var(--section-gap);
            margin-right: var(--section-gap);
        }
        .sec_nav >div{
            width: 30%;
        }
        .nav_bar .right{
            justify-content: flex-end;
        }
        .navbar .middle{
            justify-content: center;
        }
        .nav_bar{
            border-bottom: var(--default-border);
            background-color: var(--color-carbon);
            zoom: 110%;
        }
        .modal{
            display: none;
        }
        .search_wrapper{
            background: var(--color-carbon);
            color: var(--color-fog);
            border: 2px solid var(--color-graphite);
            border-radius: var(--radius-inputs);
            padding: var(--spacing-4);
            display: flex;
            gap: var(--element-gap);
        }
        .search_clear{
            color: var(--color-fog);
        }
        .searchbox{
            all: unset;
            width: 500px;
            border-radius: var(--radius-inputs);
        }
        .searchbox:focus{
            outline: none;
        }
        .toggle{
            display:none;
        }

.confirm > div, .cancel > div, .clear > div{
    font-size: 30px;
}

/* Scrollbar width */
        ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        }

        /* Track (background) */
        ::-webkit-scrollbar-track {
        background: #0f1011;
        }

        /* Thumb (the part you drag) */
        ::-webkit-scrollbar-thumb {
        background: #383b3f;
        border-radius: 10px;
        }

        /* Thumb when hovering */
        ::-webkit-scrollbar-thumb:hover {
        background: #62666d;
        }