* {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

:root {
    font-size: 16px;
    --font-family-open-sans: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --font-family-plus-jakarta: 'Plus Jakarta Sans', 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --font-family-poppins: 'Poppins', 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --nw-font-family--primary: var(--font-family-poppins);
    --nw-font-family--secondary: var(--font-family-open-sans);
    --nw-font-size-xxs: 0.625rem;
    --nw-font-size-xs: 0.75rem;
    --nw-font-size-sm: 0.875rem;
    --nw-font-size-md: 1rem;
    --nw-font-size-lg: 1.125rem;
    --nw-font-size-xl: 1.25rem;
    --nw-font-size-xxl: 1.5rem;
    --nw-font-size-2xl: 1.625rem;
    --nw-font-size-3xl: 1.875rem;
    --nw-font-size-4xl: 2rem;
    /* Z indexes */
    --nw-z-body: 0;
    --nw-z-pinned-table-col: 10;
    --nw-z-pinned-table-cell: 15;
    --nw-z-floating-action-button: 30;
    --nw-z-floating-header: 50;
    --nw-z-floating-footer: 49;        /* Using the same value as --nw-z-floating-header made the bottom actions appear on top of a sidesheet */
    --nw-z-sidebar: 90;
    --nw-z-sidebar-tooltip: 95;
    --nw-z-sidesheet-scrim: 99;
    --nw-z-sidesheet: 100;
    --nw-z-overlay: 200;
    --nw-z-overlay-scrim: 205;
    --nw-z-modal: 210;
    --nw-z-dropdown: 400;
    --nw-z-dragging-item: 1000;

    /*
        Safe area insets for devices with notches or rounded corners
        Forced behaviour for modern android and iOS devices.
    */
    --safe-keyboard-height: 0px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-bottom-keyboard: calc( var(--safe-bottom) + var(--safe-keyboard-height) );
    --safe-left: env(safe-area-inset-left, 0px); 
}

/* Font utilities (size, line overflow) → NwDynamicCss */

[data-font-size=small] {
    font-size: 14px;
}

[data-font-size=medium] {
    font-size: 16px;
}

[data-font-size=large] {
    font-size: 18px;
}

/* font families and style → NwDynamicCss */

.font-family-plus-jakarta {
    --nw-font-family--secondary: var(--font-family-plus-jakarta);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--nw-font-family--secondary, var(--font-family-open-sans));
    --nw-paragraph-size: 0.875rem;
    font-size: var(--nw-paragraph-size);
}

h1,
.nw-h1 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-family: var(--nw-font-family--primary);
    font-weight: 600;
    margin: 0;
}

h2,
.nw-h2 {
    font-size: 1.125rem;
    line-height: 1.125rem;
    font-family: var(--nw-font-family--primary);
    font-weight: 600;
    margin: 0;
}

h3,
.nw-h3 {
    font-size: 1rem;
    line-height: 1rem;
    font-family: var(--nw-font-family--primary);
    font-weight: 600;
    margin: 0;
}

h4,
.nw-h4 {
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-family: var(--nw-font-family--primary);
    font-weight: 600;
    margin: 0;
}

h5,
.nw-h5 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 600;
    font-family: var(--nw-font-family--primary);
    margin: 0;
}

p {
    margin: 0;
    font-size: var(--nw-paragraph-size);
    line-height: 1.4em;
}

@media screen and (min-width: 1920px) {
    :root {
        font-size: 18px;
    }
}

button {
    border: none;
    background: transparent;
    color: inherit;
    cursor: inherit;
    font-size: initial;
    padding: 0;
}

input {
    background-color: transparent;
    border: transparent;
}

    input:focus {
        outline: none;
    }

    input::-ms-reveal,
    input::-ms-clear {
        display: none;
    }

    input:-webkit-autofill {
        -webkit-background-clip: text;
    }

hr {
    margin: 0;
    width: 100%;
    height: 0;
    border: none;
    border-bottom: 1px solid var(--nwp-neutral-light);
}

a {
    color: var(--nwp-main);
}

    a:visited {
        color: var(--nwp-main-dark);
    }

.nw-sidebar-menu a {
    color: var(--nwp-neutral-text);
    overflow: hidden;
}

    .nw-sidebar-menu a:visited {
        color: var(--nwp-neutral-text);
    }

pre {
    font-family: "Consolas", monospace;
}

code {
    font-family: "Consolas", monospace;
    font-size: 0.8em;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: var(--nwp-neutral-dark);
}

/* cursor styles → NwDynamicCss */

/* pseudo-class: cannot be expressed in NwDynamicCss */
.cursor-grab:active {
    cursor: grabbing;
}

/* .nw-shadow → NwDynamicCss */

.nw-card {
    background-color: var(--nwp-card);
    color: var(--nwp-on-card);
}

.nw-card-outlined {
    background-color: var(--nwp-card);
    color: var(--nwp-on-card);
    border: 1px solid var(--nwp-neutral-light);
    border-radius: 0.75rem;

}

.nw-card-variant {
    border-radius: 0.75rem;
    background-color: var(--nw-card-variant-back);
    color: var(--on-card-variant);
    border: 1px solid var(--nw-card-variant-back-border);
}

    .nw-card-variant hr {
        border-bottom: 1px solid var(--nw-card-variant-back-border);
    }

@media (pointer: fine) {
    /* width */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(80, 80, 80, 0.4);
        border-radius: 4px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(80, 80, 80, 0.6);
    }
}
    /* .rounded-* → NwDynamicCss  */

    [data-nw-theme=light] {
        /* Main Color */
        --nwp-main-50: #F2F2FF;
        --nwp-main-100: #F0E6FF;
        --nwp-main-200: #CBADF7;
        --nwp-main-300: #AA79F2;
        --nwp-main-400: #8B49EB;
        --nwp-main-500: #6D1BE6;
        --nwp-main-600: #5512B8;
        --nwp-main-700: #3F0B8C;
        --nwp-main-800: #29065E;
        --nwp-main-900: #160333;
        /* Red Color */
        --nwp-red-50: #FFEDF5;
        --nwp-red-100: #FFDEED;
        --nwp-red-200: #F5A6CA;
        --nwp-red-300: #ED74AB;
        --nwp-red-400: #E3448C;
        --nwp-red-500: #DC1670;
        --nwp-red-600: #B01059;
        --nwp-red-700: #870B43;
        --nwp-red-800: #5C062D;
        --nwp-red-900: #330319;
        /* Green Color */
        --nwp-green-50: #EDFFFD;
        --nwp-green-100: #D0F5F0;
        --nwp-green-200: #9FEDE3;
        --nwp-green-300: #6FE8D9;
        --nwp-green-400: #41E0CD;
        --nwp-green-500: #16DBC3;
        --nwp-green-600: #10B09C;
        --nwp-green-700: #0B8778;
        --nwp-green-800: #065C51;
        --nwp-green-900: #03332D;
        /* Yellow Color */
        --nwp-yellow-50: #FFFFEB;
        --nwp-yellow-100: #FCFCD7;
        --nwp-yellow-200: #FAFAAF;
        --nwp-yellow-300: #F7F786;
        --nwp-yellow-400: #F6F55D;
        --nwp-yellow-500: #F6F537;
        --nwp-yellow-600: #C4C423;
        --nwp-yellow-700: #949315;
        --nwp-yellow-800: #63630A;
        --nwp-yellow-900: #333303;
        /* Blue Color */
        --nwp-blue-50: #F0F6FF;
        --nwp-blue-100: #E6F0FF;
        --nwp-blue-200: #BCD5FA;
        --nwp-blue-300: #86B3F7;
        --nwp-blue-400: #5D9AF5;
        --nwp-blue-500: #1C6DE6;
        --nwp-blue-600: #2365C4;
        --nwp-blue-700: #134794;
        --nwp-blue-800: #092E63;
        --nwp-blue-900: #021633;

        --nwp-gray-50: #FFFFFF;
        --nwp-gray-100: #fAFAFA;
        --nwp-gray-200: #F2F2F2;
        --nwp-gray-300: #EBEBEB;
        --nwp-gray-400: #E6E6E6;
        --nwp-gray-500: #B8B8B8;
        --nwp-gray-600: #8C8C8C;
        --nwp-gray-700: #5E5E5E;
        --nwp-gray-800: #333333;
        --nwp-gray-900: #1F1F1F;

        --nwp-main-clear: #F9F2FF;
        --nwp-main-light: #CBADF7;
        --nwp-main-light-clear: #CFC5D1;
        --nwp-main: #6d1be6;
        --nwp-on-main: var(--nwp-main-clear);
        --nwp-main-ghost: #F0E6FF;
        --nwp-main-dark: #3f0b8c;
        --nwp-main-text: #160333;
        --nwp-main-text-agenda: #15051A;
        --nwp-red-clear: #FFEDF5;
        --nwp-red-light: #F5A6CA;
        --nwp-red: #D11569;
        --nwp-on-red: var(--nwp-red-clear);
        --nwp-red-ghost: #FFEDF5;
        --nwp-red-dark: #870b43;
        --nwp-red-text: #330319;
        --nwp-green-clear: #EDFFFD;
        --nwp-green-light: #9FEDE3;
        --nwp-green: #10B09C;
        --nwp-on-green: var(--nwp-green-text);
        --nwp-green-ghost: #edfffd;
        --nwp-green-dark: #0A7F72;
        --nwp-green-text: #03332d;
        --nwp-yellow-clear: #FFFFEB;
        --nwp-yellow-light: #FAFAAF;
        --nwp-yellow: #f6f537;
        --nwp-on-yellow: var(--nwp-yellow-text);
        --nwp-yellow-ghost: #FCFCD7;
        --nwp-yellow-dark: #949315;
        --nwp-yellow-text: #333303;
        --nwp-blue-clear: #F0F6FF;
        --nwp-blue-light: #BCD5FA;
        --nwp-blue: #196BE6;
        --nwp-blue-alter: #1F67D4;
        --nwp-on-blue: var(--nwp-blue-clear);
        --nwp-blue-ghost: #F0F6FF;
        --nwp-blue-dark: #134794;
        --nwp-blue-text: #021633;
        --nwp-neutral-clear: #fff;
        --nwp-neutral-light: #EBEBEB;
        --nwp-neutral: #5E5E5E;
        --nwp-on-neutral: var(--nwp-neutral-text);
        --nwp-neutral-ghost: #F2F2F2;
        --nwp-neutral-dark: #5E5E5E;
        --nwp-neutral-text: #1f1f1f;
        --nwp-disabled-clear: #fff;
        --nwp-disabled-light: #F7F7F7;
        --nwp-disabled: #8C8C8C;
        --nwp-on-disabled: var(--nwp-disabled-clear);
        --nwp-disabled-ghost: #F7F7F7;
        --nwp-disabled-dark: #5E5E5E;
        --nwp-disabled-text: #1f1f1f;
        --nwp-text: #1f1f1f;
        --nwp-text-base: #EBEBEB;
        --nwp-on-text: #fff;
        --nwp-text-ghost: #F7F7F7;
        --nwp-text-dark: #1f1f1f;
        --nwp-text-light: #EBEBEB;
        --nwp-body: #fff;
        --nwp-card: #fff;
        --nwp-on-card: #1f1f1f;
        --nw-card-variant-back: #F7F7F7;
        --nw-card-variant-color: #1f1f1f;
        --nw-card-variant-back-border: #EBEBEB;
        --nw-card-placeholder-hover-back: #EBEBEB;
        --nw-checkbox-border: #5E5E5E;
        --nw-data-table-thead-back: #F7F7F7;
        --nw-data-table-row-border-bottom: #EBEBEB;
        --nw-input-border: #b8b8b8;
        --nw-input-back: #FAFAFA;
        --nw-input-color: #1f1f1f;
        --nw-input-placeholder: #5E5E5E;
        --nw-input-disabled-border: #EBEBEB;
        --nw-input-disabled-back: #F7F7F7;
        --nw-input-disabled-color: #b8b8b8;
        --nw-input-red: #dc1670;
        --nw-sidebar-expander-button-back: #fff;
        --nw-sidebar-expander-button-color: #1f1f1f;
        --nw-sidebar-expander-button-border: #EBEBEB;
        --nw-stepper-border: #EBEBEB;
        --nw-stepper-back: #F7F7F7;
        --nw-stepper-locked-back: #fff;
        --nw-stepper-locked-text: #b8b8b8;
        --nw-task-back-hover: #EBEBEB;
        --nw-switch-off-border: #b8b8b8;
        --nw-switch-off-ball: #b8b8b8;
        --nw-switch-disabled-border: #EBEBEB;
        --nw-switch-disabled-back: #F7F7F7;
        --nw-switch-disabled-ball: #EBEBEB;
        --nw-tabs-border-color: #EBEBEB;
        --nw-tabs-not-selected-color: #5E5E5E;
        --nw-tabs-not-selected-count-color: #5E5E5E;
        --nw-tabs-not-selected-count-back: #EBEBEB;
        --box-back: var(--nw-input-back);
        --border-color: var(--nw-input-border);
        --nw-ghost-opacity: 0.12;
        --nw-ghost-opacity-hover: 0.25;
        --nw-outlined-opacity-hover: 0.15;
        --nw-solid-opacity: 1;
        --nw-solid-opacity-hover: 0.8;
    }

    .border {
        border-width: 1px;
        border-style: solid;
    }

    .border--dashed {
        border-width: 1px;
        border-style: dashed;
    }

    .border-top {
        border-top-width: 1px;
        border-top-style: solid;
    }

    .border--top-dashed {
        border-top-width: 1px;
        border-top-style: dashed;
    }

    .border-right {
        border-right-width: 1px;
        border-right-style: solid;
    }

    .border--right-dashed {
        border-right-width: 1px;
        border-right-style: dashed;
    }

    .border-bottom {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .border--bottom-dashed {
        border-bottom-width: 1px;
        border-bottom-style: dashed;
    }

    .border-left {
        border-left-width: 1px;
        border-left-style: solid;
    }

    .border--left-dashed {
        border-left-width: 1px;
        border-left-style: dashed;
    }

    .nw-border--main {
        border-color: var(--nwp-main);
    }

    .nw-border--main-light {
        border-color: var(--nwp-main-light);
    }

    .nw-border--main-light-clear {
        border-color: var(--nwp-main-light-clear);
    }

    .nw-border--main-dark {
        border-color: var(--nwp-main-dark);
    }

    .nw-border--red {
        border-color: var(--nwp-red);
    }

    .nw-border--red-dark {
        border-color: var(--nwp-red-dark);
    }

    .nw-border--green {
        border-color: var(--nwp-green);
    }

    .nw-border--green-dark {
        border-color: var(--nwp-green-dark);
    }

    .nw-border--yellow {
        border-color: var(--nwp-yellow);
    }

    .nw-border--yellow-dark {
        border-color: var(--nwp-yellow-dark);
    }

    .nw-border--blue {
        border-color: var(--nwp-blue);
    }

    .nw-border--blue-dark {
        border-color: var(--nwp-blue-dark);
    }

    .nw-back--blue-300 {
        background: var(--nwp-blue-300);
        color: var(--nwp-blue-dark);
    }

    .nw-border--neutral {
        border-color: var(--nwp-neutral);
    }

    .nw-border--neutral-grey {
        border-color: var(--nwp-gray-300);
    }

    .nw-border--neutral-light {
        border-color: var(--nwp-neutral-light);
    }

    .nw-border--neutral-clear {
        border-color: var(--nwp-neutral-clear);
    }

    .nw-border--text {
        border-color: var(--nwp-text);
    }

    .nw-border--none {
        border: none;
    }

    .nw-back--hub {
        background: linear-gradient(105deg, var(--nwp-main), var(--nwp-blue), var(--nwp-green));
        background-origin: border-box;
        color: var(--nwp-on-hub);
    }

    .nw-back--hub-clear {
        background: linear-gradient(105deg, var(--nwp-main-clear), var(--nwp-blue-clear), var(--nwp-green-clear));
        background-origin: border-box;
        color: var(--nwp-neutral-900);
    }

    .nw-color--hub,
    .nw-color--hub\:hover:hover {
        color: var(--nwp-text);
    }

    .nw-border--hub {
        border-color: var(--nwp-text);
        background: transparent;
    }

    .nw-back--main-ghost {
        background: var(--nwp-main-ghost);
        color: var(--nwp-main);
    }

    .nw-back--blue-ghost {
        background: var(--nwp-blue-ghost);
        color: var(--nwp-blue-600);
    }

    .nw-back--green-ghost {
        background: var(--nwp-green-ghost);
        color: var(--nwp-green-dark);
    }

    .nw-back--green-300 {
        background: var(--nwp-green-300);
        color: var(--nwp-green-dark);
    }

    .nw-back--yellow-ghost {
        background: var(--nwp-yellow-ghost);
        color: var(--nwp-yellow-text);
    }

    .nw-back--red-ghost {
        background: var(--nwp-red-ghost);
        color: var(--nwp-red);
    }

    .nw-back--disabled-ghost {
        background: var(--nwp-disabled-ghost);
        color: var(--nwp-disabled);
    }

    .nw-back--main {
        background: var(--nwp-main);
        color: var(--nwp-main-clear);
    }

    .nw-back--blue {
        background: var(--nwp-blue);
        color: var(--nwp-blue-clear);
    }

    .nw-back--green {
        background: var(--nwp-green);
        color: var(--nwp-green-clear);
    }

    .nw-back--yellow {
        background: var(--nwp-yellow);
        color: var(--nwp-yellow-text);
    }

    .nw-back--red {
        background: var(--nwp-red);
        color: var(--nwp-red-clear);
    }

    .nw-back--disabled {
        background: var(--nwp-disabled);
        color: var(--nwp-disabled-clear);
    }

    .nw-back--neutral-light {
        background: var(--nwp-neutral-light);
        color: var(--nwp-text);
    }

    .nw-back--main-dark {
        background: var(--nwp-main-dark);
        color: var(--nwp-on-main);
    }

    .nw-back--blue-dark {
        background: var(--nwp-blue-dark);
        color: var(--nwp-on-blue);
    }

    .nw-back--green-dark {
        background: var(--nwp-green-dark);
        color: var(--nwp-green-clear);
    }

    .nw-back--yellow-dark {
        background: var(--nwp-yellow-dark);
        color: var(--nwp-yellow-ghost);
    }

    .nw-back--red-dark {
        background: var(--nwp-red-dark);
        color: var(--nwp-on-red);
    }

    .nw-back--disabled-dark {
        background: var(--nwp-disabled-dark);
        color: var(--nwp-neutral-clear);
    }

    .nw-back--main-text {
        background: var(--nwp-main-text);
        color: var(--nwp-main-clear);
    }

    .nw-back--blue-text {
        background: var(--nwp-blue-text);
        color: var(--nwp-blue-clear);
    }

    .nw-back--green-text {
        background: var(--nwp-green-text);
        color: var(--nwp-green-clear);
    }

    .nw-back--yellow-text {
        background: var(--nwp-yellow-text);
        color: var(--nwp-yellow-clear);
    }

    .nw-back--red-text {
        background: var(--nwp-red-text);
        color: var(--nwp-red-clear);
    }

    .nw-back--disabled-text {
        background: var(--nwp-disabled-text);
        color: var(--nwp-disabled-clear);
    }

    .nw-back--input-back {
        background: var(--nw-input-back);
        color: var(--nwp-text);
    }

    .nw-back--transparent {
        background: transparent;
    }

    .nw-border--transparent {
        border-color: transparent;
    }

    .nw-color--main-light,
    .nw-color--main-light\:hover:hover {
        color: var(--nwp-main-light);
    }

    .nw-fill--main-light,
    .nw-fill--main-light svg {
        fill: var(--nwp-main-light);
    }

    .nw-color--main,
    .nw-color--main\:hover:hover {
        color: var(--nwp-main);
    }

    .nw-fill--main,
    .nw-fill--main svg {
        fill: var(--nwp-main);
    }

    .nw-color--main-dark,
    .nw-color--main-dark\:hover:hover {
        color: var(--nwp-main-dark);
    }

    .nw-fill--main-dark,
    .nw-fill--main-dark svg {
        fill: var(--nwp-main-dark);
    }

    .nw-color--main-text,
    .nw-color--main-text\:hover:hover {
        color: var(--nwp-main-text);
    }

    .nw-color--main-text-agenda,
    .nw-color--main-agenda\:hover:hover {
        color: var(--nwp-main-text-agenda);
    }

    .nw-fill--main-text,
    .nw-fill--main-text svg {
        fill: var(--nwp-main-text);
    }

    .nw-color--red-light,
    .nw-color--red-light\:hover:hover {
        color: var(--nwp-red-light);
    }

    .nw-fill--red-light,
    .nw-fill--red-light svg {
        fill: var(--nwp-red-light);
    }

    .nw-color--red,
    .nw-color--red\:hover:hover {
        color: var(--nwp-red);
    }

    .nw-fill--red,
    .nw-fill--red svg {
        fill: var(--nwp-red);
    }

    .nw-color--red-dark,
    .nw-color--red-dark\:hover:hover {
        color: var(--nwp-red-dark);
    }

    .nw-fill--red-dark,
    .nw-fill--red-dark svg {
        fill: var(--nwp-red-dark);
    }

    .nw-color--red-text,
    .nw-color--red-text\:hover:hover {
        color: var(--nwp-red-text);
    }

    .nw-fill--red-text,
    .nw-fill--red-text svg {
        fill: var(--nwp-red-text);
    }

    .nw-color--green-light,
    .nw-color--green-light\:hover:hover {
        color: var(--nwp-green-light);
    }

    .nw-fill--green-light,
    .nw-fill--green-light svg {
        fill: var(--nwp-green-light);
    }

    .nw-color--green,
    .nw-color--green\:hover:hover {
        color: var(--nwp-green);
    }

    .nw-fill--green,
    .nw-fill--green svg {
        fill: var(--nwp-green);
    }

    .nw-color--green-dark,
    .nw-color--green-dark\:hover:hover {
        color: var(--nwp-green-dark);
    }

    .nw-fill--green-dark,
    .nw-fill--green-dark svg {
        fill: var(--nwp-green-dark);
    }

    .nw-color--green-text,
    .nw-color--green-text\:hover:hover {
        color: var(--nwp-green-text);
    }

    .nw-fill--green-text,
    .nw-fill--green-text svg {
        fill: var(--nwp-green-text);
    }

    .nw-color--yellow-light,
    .nw-color--yellow-light\:hover:hover {
        color: var(--nwp-yellow-light);
    }

    .nw-fill--yellow-light,
    .nw-fill--yellow-light svg {
        fill: var(--nwp-yellow-light);
    }

    .nw-color--yellow,
    .nw-color--yellow\:hover:hover {
        color: var(--nwp-yellow);
    }

    .nw-fill--yellow,
    .nw-fill--yellow svg {
        fill: var(--nwp-yellow);
    }

    .nw-color--yellow-text,
    .nw-color--yellow-text\:hover:hover {
        color: var(--nwp-yellow-text);
    }

    .nw-fill--yellow-text,
    .nw-fill--yellow-text svg {
        fill: var(--nwp-yellow-text);
    }

    .nw-color--yellow-dark,
    .nw-color--yellow-dark\:hover:hover {
        color: var(--nwp-yellow-dark);
    }

    .nw-fill--yellow-dark,
    .nw-fill--yellow-dark svg {
        fill: var(--nwp-yellow-dark);
    }

    .nw-color--blue-light,
    .nw-color--blue-light\:hover:hover {
        color: var(--nwp-blue-light);
    }

    .nw-fill--blue-light,
    .nw-fill--blue-light svg {
        fill: var(--nwp-blue-light);
    }

    .nw-color--blue,
    .nw-color--blue\:hover:hover {
        color: var(--nwp-blue);
    }

    .nw-fill--blue,
    .nw-fill--blue svg {
        fill: var(--nwp-blue);
    }

    .nw-color--blue-dark,
    .nw-color--blue-dark\:hover:hover {
        color: var(--nwp-blue-dark);
    }

    .nw-fill--blue-dark,
    .nw-fill--blue-dark svg {
        fill: var(--nwp-blue-dark);
    }

    .nw-color--blue-text,
    .nw-color--blue-text\:hover:hover {
        color: var(--nwp-blue-text);
    }

    .nw-fill--blue-text,
    .nw-fill--blue-text svg {
        fill: var(--nwp-blue-text);
    }

    .nw-color--neutral,
    .nw-color--neutral\:hover:hover {
        color: var(--nwp-neutral);
    }

    .nw-fill--neutral,
    .nw-fill--neutral svg {
        fill: var(--nwp-neutral);
    }

    .nw-color--neutral-dark,
    .nw-color--neutral-dark\:hover:hover {
        color: var(--nwp-neutral-dark);
    }

    .nw-fill--neutral-dark,
    .nw-fill--neutral-dark svg {
        fill: var(--nwp-neutral-dark);
    }

    .nw-color--disabled,
    .nw-color--disabled\:hover:hover {
        color: var(--nwp-disabled);
    }

    .nw-opacity--disabled,
    .nw-opacity--disabled\:hover:hover {
        opacity: 0.45;
    }

    .nw-fill--disabled,
    .nw-fill--disabled svg {
        fill: var(--nwp-disabled);
    }

    .nw-color--text,
    .nw-color--text\:hover:hover {
        color: var(--nwp-text);
    }

    .nw-color--nwp-gray-900,
    .nw-color--nwp-gray-900\:hover:hover {
        color: var(--nwp-gray-900);
    }

    .nw-fill--text,
    .nw-fill--text svg {
        fill: var(--nwp-text);
    }

    .nw-color--white,
    .nw-color--nw-color--white\:hover:hover {
        color: var(--nwp-gray-50);
    }

    .nw-color--white,
    .nw-color--nw-color--white\:hover:hover {
        color: var(--nwp-gray-50);
    }

    .nw-color--gray-700 {
        color: var(--nwp-gray-700);
    }

    .nw-fill--white,
    .nw-fill--white svg {
        fill: var(--nwp-gray-50);
    }

    .d-block {
        display: block;
    }

    .d-inline {
        display: inline;
    }

    .d-inline-block {
        display: inline-block;
    }

    .d-flex {
        display: flex;
    }

    .d-inline-flex {
        display: inline-flex;
    }

    .d-grid {
        display: grid;
    }

    .d-inline-grid {
        display: inline-grid;
    }

    .d-table {
        display: table;
    }

    .d-table-row {
        display: table-row;
    }

    .d-table-cell {
        display: table-cell;
    }

    .d-none {
        display: none;
    }

    .d-initial {
        display: initial;
    }

    .d-inherit {
        display: inherit;
    }
    
    .d-contents {
        display: contents;
    }

    .flex-row {
        flex-direction: row;
    }

    .flex-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-column-reverse {
        flex-direction: column-reverse;
    }

    .flex-nowrap {
        flex-wrap: nowrap;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-wrap-reverse {
        flex-wrap: wrap-reverse;
    }

    .flex-0 {
        flex: 0;
    }

    .flex-grow-0 {
        flex-grow: 0;
    }

    .flex-shrink-0 {
        flex-shrink: 0;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        flex: 2;
    }

    .flex-3 {
        flex: 3;
    }

    .flex-4 {
        flex: 4;
    }

    .flex-5 {
        flex: 5;
    }

    .flex-6 {
        flex: 6;
    }

    .flex-7 {
        flex: 7;
    }

    .flex-grow-1 {
        flex-grow: 1;
    }

    .flex-shrink-1 {
        flex-shrink: 1;
    }

    .justify-content-start {
        justify-content: start;
    }

    .justify-content-end {
        justify-content: end;
    }

    .justify-content-center {
        justify-content: center;
    }

    .justify-content-between {
        justify-content: space-between;
    }

    .justify-content-around {
        justify-content: space-around;
    }

    .justify-content-evenly {
        justify-content: space-evenly;
    }

    .justify-items-start {
        justify-items: start;
    }

    .justify-items-end {
        justify-items: end;
    }

    .justify-items-center {
        justify-items: center;
    }

    .justify-items-between {
        justify-items: space-between;
    }

    .justify-items-around {
        justify-items: space-around;
    }

    .justify-items-evenly {
        justify-items: space-evenly;
    }

    .align-items-stretch {
        align-items: stretch;
    }

    .align-items-start {
        align-items: start;
    }

    .align-items-end {
        align-items: end;
    }

    .align-items-center {
        align-items: center;
    }

    .align-items-baseline {
        align-items: baseline;
    }

    .align-content-stretch {
        align-content: stretch;
    }

    .align-content-start {
        align-content: start;
    }

    .align-content-end {
        align-content: end;
    }

    .align-content-center {
        align-content: center;
    }

    .align-content-baseline {
        align-content: baseline;
    }

    .align-self-auto {
        align-self: auto;
    }

    .align-self-stretch {
        align-self: stretch;
    }

    .align-self-start {
        align-self: start;
    }

    .align-self-end {
        align-self: end;
    }

    .align-self-center {
        align-self: center;
    }

    .align-self-baseline {
        align-self: baseline;
    }

/* gap classes replaced NwDynamicCss */

/* margin classes replaced NwDynamicCss */

/* padding classes replaced NwDynamicCss */


/*
    MARGIN AND PADDING FOR MOBILE DEVICES
    0 - 240px viewport width: 0.25rem
    240px - 360px viewport width: linear interpolation between 0.25rem and 0.75rem
    360px and above: 0.75rem 
*/
:root{
    --spacing-mobile: clamp(0.25rem, 15dvw, 1.25rem);
}
.mx-mobile {
    margin-left: var(--spacing-mobile);
    margin-right: var(--spacing-mobile);
}

.px-mobile {
    padding-left: var(--spacing-mobile);
    padding-right: var(--spacing-mobile);
}

/** PADDING SAFE AREAS **/

.pt-safe{
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
}
.pb-safe{
    padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
}
.ps-safe{   
    padding-left: var(--safe-left, env(safe-area-inset-left, 0px));
}
.pe-safe{
    padding-right: var(--safe-right, env(safe-area-inset-right, 0px));
}

    /* .position-*  → NwDynamicCss */
    /* .text-*      → NwDynamicCss */
    /* .row .col-*  → NwDynamicCss */
    /* .overflow-*  → NwDynamicCss */

/* TODO: NwTable so the NwDataTable can use it and NwTable can live by itself */
    .nw-table table {
        border-spacing: 0;
        width: 100%;
    }

    .nw-table thead {
        background-color: var(--nw-data-table-thead-back);
        font-size: 0.875rem;
        min-height: 2.5rem;
        height: 2.5rem;
    }

    .nw-table__th {
        width: 100%;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 0;
        text-align: start;
        font-size: 0.875rem;
    }

    .nw-table__th--sortable {
        cursor: pointer;
    }

        .nw-table__th--sortable:hover {
            text-decoration: underline dashed;
        }

    .nw-table th {
        padding: 0 0.75rem;
        font: normal normal bold 0.875rem/1.375rem 'Open Sans';
        color: var(--nwp-text);
    }

    .nw-table td {
        padding: 0.75rem;
        height: 2.5rem;
        border-bottom: 1px solid var(--nw-data-table-row-border-bottom);
        font: normal normal normal 0.875rem/1rem 'Open Sans';
        color: var(--nwp-text);
    }

    .nw-table__select {
        width: 2.5rem;
        text-align: center;
    }

    .nw-table__w0 {
        width: 0;
        min-width: 2.5rem;
        text-align: center;
    }

    .nw-table__w0badge {
        width: 0 !important;
        min-width: 0 !important;
        text-align: center;
    }

    .nw-table__highlighted {
        background-color: var(--nwp-gray-100);
    }

/* SORT BUTTON SHOULD LIVE AS A SEPARATE COMPONENT*/

.nw-sort-button {
    width: 0.5rem;
    height: 0.625rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-left: 0.5rem;
}

    .nw-sort-button::before {
        content: "";
        width: 0px;
        height: 0.25rem;
        border-width: 0px 0.25rem 0.25rem 0.25rem;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: var(--nwp-text);
        opacity: 0.3;
        margin-bottom: 0.125rem;
    }

    .nw-sort-button::after {
        content: "";
        width: 0px;
        height: 0.25rem;
        border-width: 0.25rem 0.25rem 0 0.25rem;
        border-style: solid;
        border-color: transparent;
        border-top-color: var(--nwp-text);
        opacity: 0.3;
    }

    .nw-sort-button.nw-sort-button--asc::before {
        opacity: 0.8;
    }

    .nw-sort-button.nw-sort-button--desc::after {
        opacity: 0.8;
    }

    

    .empty-data {
        background: #FAFAFA 0% 0% no-repeat padding-box;
        /* border: 1px dashed #D6D6D6; */
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%2300000026' stroke-width='2' stroke-dasharray='15%2c15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
        border-radius: 12px;
        width: 100%;
        text-align: center;
        color: var(--nwp-text);
        box-sizing: border-box;
        padding: 2rem;
        cursor: pointer;
    }

        .empty-data .nw-icon {
            color: #B8B8B8;
        }

    button.empty-data {
        cursor: pointer;
    }


    [role='menuitem'] [role='button'] {
        cursor: pointer;
    }

    .nw__separator {
        grid-column: 1 / -1;
        width: 100%;
    }

        .nw__separator hr {
            border-bottom: 1px solid var(--nwp-gray-400);
        }

    /* → NwDynamicCss — Width / Height utilities */