:root {
    /* Colors */
    /* Primary Color: Deep Space Blue */
    --color-primary: #1E3A8A;
    --color-primary-hover: #2B4BA3;
    --color-primary-active: #162A66;
    --color-primary-disabled: #7889b9;

    /* Secondary Color: Relic Gold */
    --color-secondary: #D97706;
    --color-secondary-hover: #F59E0B;
    --color-secondary-active: #B35E05;
    --color-secondary-disabled: #A1804A;

    /* Passive Button Palette */
    --color-passive-button: #E5E7EB; /* Light Gray */
    --color-passive-button-hover: #D1D5DB; /* Pale Slate */
    --color-passive-button-active: #9CA3AF; /* Mid Slate */
    --color-passive-button-disabled: #F3F4F6; /* Faint Gray */
    --color-passive-button-text: #1F2937; /* Deep Slate */
    --color-passive-button-text-disabled: #6B7280; /* Muted Slate */

    /* Accent Color (Buttons): Circuit Green */
    --color-accent: #22C55E;
    --color-accent-hover: #34D399;
    --color-accent-active: #16A34A;
    --color-accent-disabled: #6EE7B7;

    /* Primary Text: Slate Gray */
    --color-text-primary: #1F2937;
    --color-text-primary-hover: #374151;
    --color-text-primary-disabled: #9CA3AF;

    /* Secondary Text/Accent: Silver Metallic */
    --color-text-secondary: #9CA3AF;
    --color-text-secondary-hover: #A1A7B5;
    --color-text-secondary-disabled: #D1D5DB;

    /* Background: Off-White */
    --background: #F3F4F6;
    --background-hover: #E5E7EB;
    --background-active: #D1D5DB;
    --background-disabled: #E5E7EB;

    /* Error/Warning: Rust Red */
    --color-error: #DC2626;
    --color-error-hover: #EF4444;
    --color-error-active: #B91C1C;
    --color-error-disabled: #FCA5A5;

    /* Success: Teal Glow */
    --color-success: #14B8A6;
    --color-success-hover: #2DD4BF;
    --color-success-active: #0D9488;
    --color-success-disabled: #6EE7B7;


    --color-white: white;
    --color-primary-text: #231F20;
    --color-background: #E8E8E8;
    --color-gray-1: #eeeeee;
    --color-gray-2: #dddddd;
    --color-gray-3: #cccccc;
    --color-gray-4: #bbbbbb;
    --color-gray-5: #9a9a9a;

    --alert-info-background: #cfe2ff;
    --alert-info-border: #84A1CC;
    --alert-info-text: #084298;

    --alert-warning-background: #fff3cd;
    --alert-warning-border: #b3a681;
    --alert-warning-text: #664d03;

    --alert-error-background: #f8d7da;
    --alert-error-border: #c29094;
    --alert-error-text: #842029;

    --alert-success-background: #d1e7dd;
    --alert-success-border: #87a899;
    --alert-success-text: #0f5132;

    /* Font Sizes */
    --font-xsmall: 12px;
    --font-small: 14px;
    --font-medium: 16px;
    --font-large: 18px;
    --font-xlarge: 24px;
    --font-xxlarge: 36px;

    /* Font Weight */
    --font-weight-normal: 400;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-8: 32px;
    --spacing-10: 48px;

    /* Radius */
    --radius-none: 0px;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-xlarge: 24px;
    --radius-xxlarge: 32px;
    --radius-full: 9999px;

    /* Layout Vars */
    --header-height: 60px;

    /* Shadows */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --shadow-8: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

    /* Layers */
    --layer-dropdown: 50;
    --layer-sidesheet-mask: 99;
    --layer-sidesheet: 100;
    --layer-message-banners: 500;
    --layer-header: 500;
    --layer-sidesheet-mask-nav: 509;
    --layer-side-nav: 510;
}

* {
    font-family: "Open Sans", sans-serif;
    font-weight: var(--font-weight-normal);
    box-sizing: border-box;
    color: var(--color-text-primary);
}
body {
    margin: 0px;
    background-color: var(--background);
}
/*********************************
/* Header Formatting
/********************************/
header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-primary);
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    padding: var(--spacing-0) var(--spacing-4);
    z-index: var(--layer-header);
    transition: all 0.3s ease;
}

header .header-nav-btn {
    display: none;
    color: var(--color-white);
    margin-right: var(--spacing-2);
}

header h1 {
    font-size: var(--font-xlarge);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    line-height: var(--header-height);
    margin: var(--spacing-0);
    transition: all 0.3s ease;
}

.account-container {
    display: flex;
    flex-wrap: nowrap;
    column-gap: var(--spacing-2);
    align-items: center;
    transition: all 0.3s ease;
}

.account-container h2 {
    font-size: var(--font-large);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    line-height: var(--header-height);
    margin: var(--spacing-0);
}

.team-swap-dropdown {
    position: relative !important;
}


/* Page Content CSS */
section {
    margin-top: var(--header-height);
    padding-top: var(--spacing-4);
}

.page-content {
    margin: var(--spacing-0) auto;
    padding: var(--spacing-0) var(--spacing-8);
    max-width: 1400px;
}
.page-content h1 {
    font-size: var(--font-xxlarge);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-0);
    margin-bottom: var(--spacing-4);
}
.cards-1D {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-4);
}

/* Bread Crumbs */
.breadcrumbs {
    display: flex;
    flex-direction: row;
    row-gap: var(--spacing-1);
    align-items: center;
}
.breadcrumbs > * {
    color: var(--color-text-secondary);
    font-size: var(--font-small);
    padding: var(--spacing-2) var(--spacing-1);
    user-select: none;
}

.breadcrumbs>a {
    text-decoration: none;

    border-radius: var(--radius-small);
    transition: 250ms;
}
.breadcrumbs>a:hover {
    background-color: var(--color-passive-button-hover);
}

.breadcrumbs>.material-icons {
    line-height: 100%;
    vertical-align: middle;
    padding: var(--spacing-0);
}

/* Common Layout Elements */
.card {
    padding: var(--spacing-4);
    background-color: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-1);
}

.card-narrow-1 {
    max-width: 600px;
    margin: var(--spacing-0) auto;
}

.card h2 {
    font-size: var(--font-large);
    font-weight: var(--font-weight-semi-bold);
    margin: var(--spacing-0);
    margin-bottom: var(--spacing-4);
}

.card-w-header {
    background-color: var(--color-white);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-medium);
}

.card-header {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);

    background-color: var(--color-background);
    border-top-right-radius: var(--radius-medium);
    border-top-left-radius: var(--radius-medium);

    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
}
.card-header h2 {
    font-size: var(--font-large);
    font-weight: var(--font-weight-semi-bold);
    margin: var(--spacing-0);
}
.card-header input[type=text] {
    margin-right: var(--spacing-10);
    border: 1px solid var(--color-gray-3);
    border-radius: var(--radius-small);

    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--color-background);
    font-family: Gadugi;
    font-size: var(--font-large);
    transition: all 250ms;
}
.card-header input[type=text]:hover {
    border-color: var(--color-gray-5);
    background-color: var(--background);
}
.card-header input[type=text]:focus {
    border-color: var(--color-gray-5);
    background-color: var(--color-white);
}

.card-header-buttons {
    display: flex;
    flex-direction: row;
    column-gap: var(--spacing-3);
    align-items: center;
    width: max-content;
}
.card-header-buttons .btn {
    width: max-content;
}


.card-header .inline-tag {
    background-color: var(--background-active);
    width: max-content;
}

.card-content {
    padding: var(--spacing-4);
    background-color: var(--color-white);
    margin-bottom: var(--spacing-2);
    border-bottom-right-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
}

.card-section {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-2);
}

.card-section h3 {
    font-size: var(--font-medium);
    font-weight: var(--font-weight-semi-bold);
    margin: unset;
}

.card-section > p {
    margin: unset;
    font-size: var(--font-medium);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary-hover);
}

/* Input Layouts */
.stacked-input {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-1);
    height: max-content;
}

.small-form {
    display: grid;
    grid-template-areas: "label label" "input submit";
    grid-template-columns: 1fr 40px;
    column-gap: var(--spacing-2);
    row-gap: var(--spacing-1);
}
.small-form label { grid-area: label; }
.small-form input, .small-form select { grid-area: input; }
.small-form input[type=submit] {
    grid-area: submit;
    font-size: var(--font-medium);
 }

/* General Inputs */
label {
    font-size: var(--font-small);
    font-weight: var(--font-weight-semi-bold);
}
label[required]::after {
    content: " *";
    color: red;
}

.stacked-input input[type=text],input[type=password],input[type=email],input[type=datetime-local],input[type=html-duration-picker],input[type=date],input[type=number],input[type=url],input[type=search],textarea {
    width: 100%;
    border: 1px solid var(--color-gray-5);
    border-radius: var(--radius-small);

    padding: var(--spacing-2) var(--spacing-2);
    background-color: var(--color-white);
    font-family: Gadugi;
    font-size: var(--font-medium);
}
select {
    width: 100%;
    height: min-content;
    border: 1px solid var(--color-gray-5);
    border-radius: var(--radius-small);

    padding: var(--spacing-2) var(--spacing-2);
    font-family: Gadugi;
    font-size: var(--font-medium);
}
.stacked-input input:disabled {
    cursor: default;
    background-color: var(--background-disabled);
}

/* Password Field Toggle */
.password-field {
    position: relative;
}
.password-field input {
    padding-right: 40px;
    width: 100%;
}
.password-field .toggle-password {
    position: absolute;
    height: max-content;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
}

/* Select */
select.floating {
    background-color: inherit;
    border: none;
    border-radius: var(--radius-small);
    padding: var(--spacing-1) var(--spacing-2);
    transition: 250ms;
}


/* Radio Button */
.horizontal-radio-field {
    all:unset;
    display: flex;
    flex-flow: column nowrap;

    row-gap: var(--spacing-2);
}

.radio-field-title {
    font-size: var(--font-small);
    font-weight: var(--font-weight-semi-bold);
}

.horizontal-radio {
    display: grid;
    grid-template-areas: "radio title" "nothing description";
    grid-template-columns: 20px 1fr;
    column-gap: var(--spacing-2);
    margin-left: var(--spacing-2);
}

.horizontal-radio input[type=radio] {
    grid-area: radio;
}

.horizontal-radio label {
    grid-area: title;
}

.horizontal-radio .radio-description {
    grid-area: description;
    color: var(--color-text-secondary);
    font-size: var(--font-small);
}

/* Input With Units */
.input-w-units {
    display: grid;
    grid-template-columns: 1fr max-content;
}

.input-w-units input {
    border-top-right-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
}

.input-w-units *:nth-child(2) {
    border: 1px solid var(--color-gray-5);
    border-radius: var(--radius-small);

    padding: var(--spacing-2) var(--spacing-2);
    background-color: var(--color-white);
    font-family: Gadugi;
    font-size: var(--font-medium);
    border-top-left-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
    font-size: var(--font-small);
    background-color: var(--background);
    height: 100%;
    border-left: none;
}

/* Chip w/ icon */
.chip-w-icon {
    height: min-content;
    width: max-content;
    border-radius: var(--radius-large);
    background-color: var(--background-hover);

    padding: var(--spacing-1) var(--spacing-4) var(--spacing-1) var(--spacing-3);
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: var(--spacing-1);

    position: relative;
    font-size: var(--font-small);
    font-weight: var(--font-weight-semi-bold);
    white-space: nowrap;
    color: var(--color-text-primary);
}

.chip-w-icon .chip-icon {
    font-size: var(--font-xsmall);
    border: none;
    border-radius: var(--radius-full);
    background-color: transparent;
    color: inherit;

    height: 90%;
    aspect-ratio: 1;
    
    position: absolute;
    right: var(--spacing-1);
    top: 50%;
    transform: translateY(-50%);

    cursor: pointer;

    transition: 250ms;
}
.chip-w-icon:has(.chip-icon:hover) {
    background-color: var(--color-passive-button-hover);
}

.chip-w-icon.chip-small {
    font-size: var(--font-xsmall);
}


/* Labeled Info */
.labeled-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--spacing-2);
    font-size: var(--font-small);
}


/*********************************
/* Button Formatting
/********************************/
.btn {
    all:unset;
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
    width: 100%;

    font-size: var(--font-medium);
    font-weight: var(--font-weight-semi-bold);
    text-align: center;
    user-select: none;

    border-radius: var(--radius-medium);
    padding: var(--spacing-2) var(--spacing-2);
    cursor: pointer;
    transition: 250ms;
}

.btn-small {
    font-size: var(--font-small);
    padding: var(--spacing-1) var(--spacing-2) !important;
}
.btn-small .material-icons, .btn-small.material-icons  {
    font-size: 18px;
}

/* Primary */
.btn.primary {
    color: var(--color-white);
    background-color: var(--color-primary);
}
.btn.primary:hover {
    background-color: var(--color-primary-hover);
}
.btn.primary:active {
    background-color: var(--color-primary-active);
}
.btn.primary:disabled, .btn.primary.disabled {
    cursor: default;
    background-color: var(--color-primary-disabled);
}

.btn.primary .material-icons {
    color: var(--color-white);
}

/* Secondary */
.btn.secondary {
    color: var(--color-passive-button-text);
    background-color: var(--color-secondary);
}
.btn.secondary:hover {
    background-color: var(--color-secondary-hover);
}
.btn.secondary:active {
    background-color: var(--color-secondary-active);
}
.btn.secondary:disabled {
    cursor: default;
    background-color: var(--color-secondary-disabled);
    color: var(--color-passive-button-text-disabled);
}

/* Passive */
.passive {
    color: var(--color-text-primary);
    background-color: var(--color-passive-button);
}
.passive:hover {
    background-color: var(--color-passive-button-hover);
}
.passive:active {
    background-color: var(--color-passive-button-active);
}
.passive:disabled {
    cursor: default;
    color: var(--color-text-primary-disabled);
    background-color: var(--color-passive-button-disabled);
}

/* Icon Only */
.btn.icon {
    background-color: inherit;
    width: fit-content;
    height: fit-content;
}
.btn.icon:hover {
    background-color: var(--color-passive-button-hover);
    scale: 115%;
}
.btn.icon:active {
    background-color: var(--color-passive-button-active);
}

.icon.brand {
    color: var(--color-text-primary) !important;
}
.icon.brand:hover {
    background-color: var(--color-primary-hover);
    scale: 115%;
}
.icon.brand:active {
    background-color: var(--color-primary-active);
}


/* Floating */
.btn.floating {
    width: fit-content;
    padding: var(--spacing-2) var(--spacing-4);
    background-color: inherit;
}
.floating:hover {
    background-color: var(--color-passive-button-hover);
}
.floating:active {
    background-color: var(--color-passive-button-active);
}
.floating:disabled {
    background-color: inherit;
    color: var(--color-text-primary-disabled);
    cursor: default;
}

/* Buttons in Table Rows */
td .btn {
    padding: var(--spacing-1);
    font-size: var(--font-xlarge);
}

.cancel-submit {
    display:grid;
    grid-template-columns: min-content 1fr;
    column-gap: var(--spacing-3);
}

.plotly-graph-div {
    width: 100% !important;
}

/* Button Themes */
.success {
    color: var(--color-accent) !important;
}
.danger {
    color: var(--alert-error-text) !important;
}

/* Dropdown Formatting */
.dropdown {
    line-height: 100%;
    position: absolute;
}
.dropdown.inline {
    position: relative !important;
}
.dropdown .dropdown-button {
    color: var(--color-passive-button);
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}
.dropdown .dropdown-button.light-bg {
    color: var(--color-text-primary);
}

.dropdown .dropdown-content {
    position: absolute;
    display: none;

    flex-flow: column nowrap;

    padding: var(--spacing-2) var(--spacing-0);
    background-color: var(--background);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-2);
    z-index: var(--layer-dropdown);
}
.dropdown.right-align .dropdown-content {
    right: var(--spacing-0);
}
.dropdown.left-align .dropdown-content {
    left: var(--spacing-0);
}
.dropdown-content {
    animation: growDown 100ms ease-in-out;
}

.dropdown-top-right {
    top: var(--spacing-2);
    right: var(--spacing-2);
}

.table-row-dropdown {
    position: static !important;
}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}

.dropdown-content .dropdown-option {
    all: unset;
    flex-grow: 1;

    font-size: var(--font-small);
    color: var(--color-text-primary);
    padding: var(--spacing-2) var(--spacing-3);
    min-width: max-content;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    column-gap: var(--spacing-2);

    border: none;
    background-color: var(--background);
    cursor: pointer;
    line-height: 24px;
    transition: 250ms;
}
.dropdown-content .dropdown-option:hover {
    background-color: var(--color-passive-button-hover);
}
.dropdown-content .dropdown-option:active {
    background-color: var(--color-passive-button-active);
}
.dropdown-content .material-icons {
    font-size: var(--font-large);
    line-height: 24px;
    vertical-align: middle;
}

button.button-w-icon span.material-symbols-outlined{
    line-height: unset;
    font-size: var(--font-large);
    margin-right: var(--spacing-3);
}

/* Multiselect Formatting */
.multiselect-btn {
    color: var(--color-text-primary);
    background-color: var(--color-passive-button);
}
.multiselect-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-passive-button-hover);
}

.multiselect-btn.multiselect-btn-selected {
    color: var(--color-white);
    background-color: var(--color-primary);
}


/*********************************
/* Sidesheet Formatting
/********************************/
.sidesheet {
    position: fixed;
    top: var(--header-height);
    right: var(--spacing-0);
    height: calc(100% - var(--header-height));
    min-width: 450px;
    max-width: 90%;

    border-top-left-radius: var(--radius-xlarge);
    border-bottom-left-radius: var(--radius-xlarge);

    background-color: var(--background);
    box-shadow: var(--shadow-4);
    z-index: var(--layer-sidesheet);

    display: none;
    grid-template-rows: max-content 1fr min-content;

    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
.sidesheet.sidesheet--open {
    display: grid;
    transform: translateX(0) !important;
}

.sidesheet-mask {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: var(--spacing-0);
    height: calc(100% - var(--header-height));
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    z-index: var(--layer-sidesheet-mask)
}
.sidesheet-mask--visible {
    display: block !important;
}


.sidesheet-close {
    font-size: var(--font-xlarge);
}

.sidesheet-header > h2 {
    all: unset;
    font-size: var(--font-xlarge);
    font-weight: var(--font-weight-bold);
}
.sidesheet-header {
    display: grid;
    grid-template-columns: 1fr min-content;
    column-gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-0);
}

.sidesheet .sidesheet-content {
    width: 100%;
    overflow: auto;
    padding: var(--spacing-0) var(--spacing-3);
    padding-bottom: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.sidesheet-content.standard-width {
    width: 450px;
}

.sidesheet-sidebar-layout {
    display: grid;
    grid-template-columns: 350px min-content 200px;
    margin-bottom: var(--spacing-4);
}

.sidesheet-sidebar-layout .titled-sections {
    margin: var(--spacing-0) var(--spacing-2) !important;
}

.sidesheet-action {
    margin: var(--spacing-0) var(--spacing-3) var(--spacing-3);
}
/*********************************
/* Dialog Formatting
/********************************/
.dialog {
    position: fixed;
    top: 15%;
    right: 50%;
    transform: translate(50%, 0%);

    border-radius: var(--radius-large);

    background-color: var(--background);
    box-shadow: var(--shadow-4);
    z-index: var(--layer-sidesheet);

    display: none;
    grid-template-areas: "header" "content" "footer";
    grid-template-rows: max-content 1fr min-content;
}
.dialog--open {
    display: grid;
}

.dialog-mask {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: var(--spacing-0);
    height: calc(100% - var(--header-height));
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    z-index: var(--layer-sidesheet-mask)
}
.dialog-mask--visible {
    display: block !important;
}

.dialog-header {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: min-content;
    column-gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-0);
}
.dialog-header-buttons {
    display: grid;
    grid-template-columns: 1fr min-content;
    column-gap: var(--spacing-2);
}
.dialog-header > h2 {
    all: unset;
    font-size: var(--font-xlarge);
    font-weight: var(--font-weight-bold);
}
.dialog-header > p {
    all: unset;
    font-size: var(--font-medium);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary-hover);
}

.dialog-header-dropdown {
    position: relative !important;
    margin: auto;
}
.dialog-header-dropdown .dropdown-button {
    color: var(--color-text-primary) !important;
}

.dialog .dialog-content {
    width: 100%;
    overflow: auto;
    padding: var(--spacing-0) var(--spacing-4);
}

.dialog-w-messages {
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--spacing-3);
}

.dialog-footer {
    grid-area: footer;
    padding: var(--spacing-4) var(--spacing-4)
}
/*********************************
/* Message Banner Formatting
/********************************/
.message-banners {
    position: fixed;
    top: calc(var(--header-height) + var(--spacing-4));
    right: 50%;
    transform: translate(50%, 0%);

    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-2);
    z-index: var(--layer-message-banners);
}

.message-banner {
    border-radius: var(--radius-medium);

    padding: var(--spacing-2) var(--spacing-2);
    font-size: var(--font-medium);
    vertical-align: middle;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    column-gap: var(--spacing-2);

    box-shadow: var(--shadow-2);
}
.message-banner--fade {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

.message-banner .btn.icon {
    padding: var(--spacing-0);
}

.message-banner.success {
    color: var(--alert-success-text);
    background-color: var(--alert-success-background);
    border: 1px var(--alert-success-border) solid;
}
.message-banner.success .btn.icon:hover {
    background-color: var(--alert-success-border);
}

.message-banner.info {
    color: var(--alert-info-text);
    background-color: var(--alert-info-background);
    border: 1px var(--alert-info-border) solid;
}
.message-banner.info .btn.icon:hover {
    background-color: var(--alert-info-border);
}

.message-banner.warning {
    color: var(--alert-warning-text);
    background-color: var(--alert-warning-background);
    border: 1px var(--alert-warning-border) solid;
}
.message-banner.warning .btn.icon:hover {
    background-color: var(--alert-warning-border);
}

.message-banner.error {
    color: var(--alert-error-text);
    background-color: var(--alert-error-background);
    border: 1px var(--alert-error-border) solid;
}
.message-banner.error .btn.icon:hover {
    background-color: var(--alert-error-border);
}


/*********************************
/* Titled Sections
/********************************/
.titled-sections {
    display: flex;
    margin: var(--spacing-0) auto;

    flex-direction: column;
    row-gap: var(--spacing-8);
    max-width: 750px;
}

.parent-section {
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--spacing-4);
}

.title-section-indent {
    margin-left: var(--spacing-8);
}

.title-section h3 {
    margin: var(--spacing-0);
    font-size: var(--font-large);
    font-weight: var(--font-weight-semi-bold);
}
.title-section h4 {
    margin: var(--spacing-0);
    font-size: var(--font-small);
    font-weight: var(--font-weight-semi-bold);
}
.title-section p {
    all: unset;
    font-size: var(--font-small);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary-hover);
}

.title-section .horizontal-divider {
    background-color: var(--background-active);
    height: 2px;
    width: 90%;
    margin-left: var(--spacing-8);
}


/*********************************
/* Inline Tag
/********************************/
.inline-tag {
    display: inline;
    font-size: 12px;
    font-weight: var(--font-weight-semi-bold);
    height: min-content;
    width: max-content;
    border-radius: var(--radius-large);
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--background-hover);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.inline-tag.info {
    background-color: var(--alert-info-background);
    color: var(--alert-info-text);
}

.inline-tag.success {
    background-color: var(--alert-success-background);
    color: var(--alert-success-text);
}

.inline-tag.warning {
    background-color: var(--alert-warning-background);
    color: var(--alert-warning-text);
}

.inline-tag.error {
    background-color: var(--alert-error-background);
    color: var(--alert-error-text);
}

.inline-tag.small {
    font-size: 10px;
    padding: var(--spacing-1) var(--spacing-2);
}

/*********************************
/* Info Tooltip
/********************************/
.inline-info-tooltip {
    font-size: var(--font-small) !important;
    color: var(--color-text-secondary);
    cursor: default;
    user-select: none;
    transition: 250ms;
}

/*********************************
/* Picture Formatting
/********************************/
.hover-picture-container {
    position: relative;
    flex-grow: initial !important;
}

.hover-picture-container > * {
    position: absolute;
    top: 0;
    left: 0;
}

.hover-picture-container label {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
    opacity: 0%;
    transition: 250ms ease-in-out;
    cursor: pointer;
    user-select: none;
}
.hover-picture-container:hover label {
    opacity: 75%;
}

/* Hide file input but keep it accessible via the label */
.hover-picture-container input[type=file] {
    display: none;
}

img {
    object-fit: cover;
    user-select: none;
}

.placeholder-picture {
    background-color: var(--background-hover);
    padding: var(--spacing-3);
}

/* Profile Picture */
.profile-picture {
    object-fit: cover;
    box-shadow: var(--shadow-1);
    user-select: none;
}

/* Common Picture Sizes */
.picture-round-xsm { height: 32px; width: 32px; border-radius: var(--radius-full);}
.picture-round-sm { height: 48px; width: 48px; border-radius: var(--radius-full);}
.picture-round-md { height: 60px; width: 60px; border-radius: var(--radius-full);}

.picture-xsm { height: 32px; width: 32px; border-radius: var(--radius-small);}
.picture-sm { height: 48px; width: 48px; border-radius: var(--radius-small);}
.picture-md { height: 60px; width: 60px; border-radius: var(--radius-small);}
.picture-lg { height: 95px; width: 95px; border-radius: var(--radius-small);}

/*********************************
/* Key Value Formatting
/********************************/
.key-value-pair {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--spacing-2);
}

.key {
    font-weight: var(--font-weight-semi-bold);
}

/*********************************
/* Generic
/********************************/
.make-relative{
    position: relative;
}

.icon-w-text {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: var(--spacing-2);
}

.passive-text {
    color: var(--color-text-secondary) !important;
}

.small-text {
    font-size: var(--font-small) !important;
}

.vertical-divider {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    height: 100%;
    border-left: 1px solid;
}
.horizontal-divider {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    width: 100%;
    border-bottom: 1px solid;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--spacing-3);
    column-gap: var(--spacing-2);
}

.rows-2 {
    row-gap: var(--spacing-2);
}
.rows-3 {
    row-gap: var(--spacing-3);
}
.rows-4 {
    row-gap: var(--spacing-4);
}

.flex-container.w-grow > * {
    flex-grow: 1;
}

.no-grow {
    flex-grow: initial !important;
}

.grow {
    flex-grow: 1;
}

.basis-1 { flex-basis: 80px; }
.basis-2 { flex-basis: 160px; }
.basis-3 { flex-basis: 240px; }
.basis-4 { flex-basis: 320px; }
.basis-5 { flex-basis: 480px; }
.basis-all {flex-basis: 100%; }
div.break {width: 100%; height: 0;}

.text-left {
    text-align: left;
}

@media only screen and (max-width: 950px) {
    header {
        padding: var(--spacing-0) var(--spacing-2);
    }

    header h1 {
        font-size: var(--font-large);
    }

    .page-content h1 {
        font-size: var(--font-xlarge);
    }

    .account-container {
        column-gap: var(--spacing-2);
    }

    .account-container h2 {
        font-size: var(--font-small);
    }

    .navbar {
        font-size: var(--font-xsmall) !important;
    }

    .nav-item {
        padding: var(--spacing-1) var(--spacing-2) !important;
    }
}

@media only screen and (max-width: 675px) {
    header {
        grid-template-columns: max-content 1fr max-content;
        padding-left: var(--spacing-2);
    }
    header .header-nav-btn {
        display: block;
    }

    .nav-item {
        width: min-content !important;
    }
    .navbar {
        display: none !important;
    }

    .account-container {
        column-gap: var(--spacing-2);
    }

    section {
        padding-top: var(--spacing-2);
    }

    .page-content {
        padding: var(--spacing-0) var(--spacing-2);
    }

    .page-content > h1 {
        margin-bottom: var(--spacing-3);
    }

    .sidesheet {
        min-width: unset;
        width: 90%;
    }

    .sidesheet-content.standard-width {
        width: unset;
    }

    .nav-sidesheet {
        min-width: unset !important;
        width: 80%;
    }

    .dialog {
        max-height: calc(100% - var(--header-height) - var(--spacing-10));
        height: max-content;
        min-height: 60%;

        top: unset;
        bottom: var(--spacing-0);
        right: unset;
        transform: unset;
        width: 100%;

        border-bottom-left-radius: var(--radius-none);
        border-bottom-right-radius: var(--radius-none);
    }
}

@media only screen and (max-width: 575px) {

    .card {
        padding: var(--spacing-3);
    }

    .sidesheet-sidebar-layout{
        grid-template-columns: unset;
        grid-template-rows: max-content 1px max-content;
        row-gap: var(--spacing-4);
    }

    .sidesheet-sidebar-layout .vertical-divider {
        position: relative;
        height: 1px;
        left: 5%;
        width: 90%;
        border-left: none;
        border-bottom: 1px solid;
    }

    .breadcrumbs > * {
        font-size: var(--font-xsmall);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary:         #1E40AF;
        --color-primary-hover:   #3B82F6;
        --color-primary-active:  #1E3A8A;
        --color-primary-disabled: #60A5FA;

        --color-secondary:       #D97706;
        --color-secondary-hover: #F59E0B;
        --color-secondary-active:#B45309;
        --color-secondary-disabled:#A1804A;

        --color-accent:          #10B981;
        --color-accent-hover:    #059669;
        --color-accent-active:   #047857;
        --color-accent-disabled: #6EE7B7;

        --color-text-primary:    #E2E8F0;
        --color-text-primary-hover: #E5E7EB;
        --color-text-primary-disabled: #9CA3AF;

        --color-text-secondary:  #94A3B8;
        --color-text-secondary-hover: #D1D5DB;
        --color-text-secondary-disabled: #4B5563;

        --background:            #020617;
        --background-hover:      #0F172A;
        --background-active:     #1E293B;

        --color-passive-button:  #111827;
        --color-passive-button-hover: #1F2937;
        --color-passive-button-active: #475569;
        --color-passive-button-disabled: #0F172A;
        --color-passive-button-text: #E5E7EB;
        --color-passive-button-text-disabled: #94A3B8;

        --color-error: #F87171;
        --color-error-hover: #FCA5A5;
        --color-error-active: #EF4444;
        --color-error-disabled: #FECACA;

        --color-success: #34D399;
        --color-success-hover: #4ADE80;
        --color-success-active: #10B981;
        --color-success-disabled: #6EE7B7;

        --alert-info-background: #1E40AF33;
        --alert-info-border: #3B82F6;
        --alert-info-text: #BFDBFE;

        --alert-warning-background: #92400E33;
        --alert-warning-border: #F59E0B;
        --alert-warning-text: #FDE68A;

        --alert-error-background: #991B1B33;
        --alert-error-border: #F87171;
        --alert-error-text: #FECACA;

        --alert-success-background: #065F4633;
        --alert-success-border: #34D399;
        --alert-success-text: #A7F3D0;

        --color-white: #FFFFFF;
        --color-primary-text: #F1F5F9;
        --color-background: #0F172A;
        --color-gray-1: #1E293B;
        --color-gray-2: #334155;
        --color-gray-3: #475569;
        --color-gray-4: #64748B;
        --color-gray-5: #94A3B8;

        --shadow-1:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.4),
        0 1px 2px rgba(15, 23, 42, 0.3);

        --shadow-2:
        inset 0 1px 1px rgba(30, 64, 175, 0.08),
        0 3px 6px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.35);

        --shadow-3:
        inset 0 2px 4px rgba(30, 64, 175, 0.06),
        0 10px 20px rgba(0, 0, 0, 0.45),
        0 6px 10px rgba(0, 0, 0, 0.38);

        --shadow-4:
        inset 0 2px 6px rgba(30, 64, 175, 0.05),
        0 14px 28px rgba(0, 0, 0, 0.5),
        0 10px 14px rgba(0, 0, 0, 0.4);

        --shadow-8:
        inset 0 4px 12px rgba(30, 64, 175, 0.04),
        0 19px 38px rgba(0, 0, 0, 0.58),
        0 15px 15px rgba(0, 0, 0, 0.45);
    }

    .card, .card-w-header, .card-content {
        background-color: var(--background-active);
    }

    .stacked-input input[type=text],input[type=password],input[type=email],input[type=datetime-local],input[type=html-duration-picker],input[type=date],input[type=number],input[type=url],input[type=search],textarea {
        background-color: var(--color-passive-button);
    }

    select {
        background-color: var(--color-passive-button);
    }

    .btn.floating {
        border: 1px solid var(--color-passive-button-active);
    }


}