:root{
    --max-width-sm: 40rem;
    --max-width-md: 48rem;
    --max-width-lg: 80rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-base: 1.5rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --space-2xl: 16rem;
    --grid-gutter: var(--space-md);
    --base-white: #fff;
    --base-black: #000;
    --gray-50: #f5f8fd;
    --gray-100: #f1f5fb;
    --gray-150: #eaf0f8;
    --gray-200: #e0e9f4;
    --gray-250: #d6e0ed;
    --gray-300: #bbc9dc;
    --gray-350: #a2b4cb;
    --gray-400: #8396af;
    --gray-450: #657892;
    --gray-500: #576b85;
    --gray-550: #4d5e74;
    --gray-600: #3f4d62;
    --gray-650: #2e3c50;
    --gray-700: #232e3c;
    --gray-750: #1b2633;
    --gray-800: #121a24;
    --gray-900: #0d1219;
    --blue-50: #eff6ff;
    --blue-100: #e7f1ff;
    --blue-200: #c8e1ff;
    --blue-300: #95c6ff;
    --blue-400: #57a1f8;
    --blue-500: #1a81fa;
    --blue-600: #0368de;
    --blue-700: #0058c0;
    --blue-800: #0042a6;
    --blue-900: #003585;
    --indigo-50: #f6f5ff;
    --indigo-100: #ebeaff;
    --indigo-200: #d4d0ff;
    --indigo-300: #b9b2ff;
    --indigo-400: #8378ff;
    --indigo-500: #6052ff;
    --indigo-600: #5748ff;
    --indigo-700: #4a3aff;
    --indigo-800: #2617ce;
    --indigo-900: #0c009b;
    --violet-50: #f9f6ff;
    --violet-100: #f0eaff;
    --violet-200: #e5d9ff;
    --violet-300: #cbb4ff;
    --violet-400: #a076ff;
    --violet-500: #8854fc;
    --violet-600: #7b2bff;
    --violet-700: #6823d4;
    --violet-800: #5114af;
    --violet-900: #3f0c8e;
    --green-50: #f0fffa;
    --green-100: #eafaf4;
    --green-200: #d2f0e5;
    --green-300: #8ce4c5;
    --green-400: #39c693;
    --green-500: #1ba875;
    --green-600: #0e9c69;
    --green-700: #0d8b5e;
    --green-800: #066845;
    --green-900: #004d31;
    --yellow-50: #fffbef;
    --yellow-100: #fff9e3;
    --yellow-200: #ffecb4;
    --yellow-300: #ffdb7d;
    --yellow-400: #fec941;
    --yellow-500: #fdb601;
    --yellow-600: #e0a306;
    --yellow-700: #b2830a;
    --yellow-800: #8a6c1e;
    --yellow-900: #5f4b18;
    --orange-50: #fff8f5;
    --orange-100: #fff3ec;
    --orange-200: #ffdaca;
    --orange-300: #ffac92;
    --orange-400: #ff7d5f;
    --orange-500: #ff603b;
    --orange-600: #f55a03;
    --orange-700: #dd5406;
    --orange-800: #ba4d0f;
    --orange-900: #8f471e;
    --red-50: #fff5f6;
    --red-100: #ffedee;
    --red-200: #ffd0d4;
    --red-300: #f8a8ae;
    --red-400: #ff707a;
    --red-500: #ff3a49;
    --red-600: #ff0013;
    --red-700: #ce0010;
    --red-800: #97000b;
    --red-900: #680008;
    --color-water-darker: var(--blue-700);
    --color-water: var(--blue-500);
    --color-water-lighter: var(--blue-100);
    --color-lava-darker: var(--red-700);
    --color-lava: var(--red-500);
    --color-lava-lighter: var(--red-100);
    --color-grass-darker: var(--green-700);
    --color-grass: var(--green-500);
    --color-grass-lighter: var(--green-100);
    --color-gold-darker: var(--yellow-700);
    --color-gold: var(--yellow-500);
    --color-gold-lighter: var(--yellow-100);
    --color-charcoal-darker: var(--gray-800);
    --color-charcoal: var(--gray-700);
    --color-charcoal-lighter: var(--gray-650);
    --color-graphite-darker: var(--gray-550);
    --color-graphite: var(--gray-500);
    --color-graphite-lighter: var(--gray-450);
    --color-stainless-darker: var(--gray-400);
    --color-stainless: var(--gray-350);
    --color-stainless-lighter: var(--gray-300);
    --color-alloy-darker: var(--gray-250);
    --color-alloy: var(--gray-150);
    --color-alloy-lighter: var(--gray-100);
    --color-white: #fff;
    --color-border: var(--gray-150);
    --color-border-dark: var(--gray-650);
    --color-background: var(--color-white);
    --color-overlay: var(--color-charcoal-darker);
    --color-facebook: #3e5b96;
    --color-twitter: #2aa3ef;
    --color-github: #444;
    --color-google-plus: #db4e47;
    --transition-duration-s: 250ms;
    --transition-ease-in: cubic-bezier(0.55,0.055,0.675,0.19);
    --transition-ease-out: cubic-bezier(0.215,0.61,0.355,1);
    --transition-bounce: cubic-bezier(0.175,0.885,0.32,1.275);
    --elevation-none: 0px 0px 0px #0000;
    --elevation-sm: 0 3px 10px 0 #00356614,0 3px 5px 0 #0035660f;
    --elevation-md: 0 20px 36px -6px #00356614,0 10px 16px -8px #0035660f;
    --elevation-lg: 0 30px 80px -10px #0035661a,0 20px 24px -8px #0035660a;
    --elevation-xl: 0 40px 100px -20px #00356626,0 20px 60px -30px #0035660d;
    --elevation-dark-sm: 0 3px 10px 0 #00356633,0 3px 5px 0 #00356624;
    --elevation-dark-md: 0 20px 36px -6px #00356633,0 10px 16px -8px #00356629;
    --elevation-dark-lg: 0 30px 80px -10px #0035661a,0 20px 24px -8px #0035660a;
    --elevation-dark-xl: 0 40px 100px -20px #00356626,0 20px 60px -30px #0035660d;
    --roundness-sm: 0.125rem;
    --roundness-md: 0.25rem;
    --roundness-base: 0.375rem;
    --roundness-lg: 0.5rem;
    --roundness-full: 9999px;
    --focus-outline: var(--color-water) auto 2px;
    --font-main: "Inter","ui-sans-serif","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-header: "Poppins","ui-sans-serif","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-code: "ui-monospace","SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New","monospace";
    --text-base-size: 1rem;
    --text-base-leading: 1.6;
    --text-weight-light: 300;
    --text-weight-regular: 400;
    --text-weight-medium: 500;
    --text-weight-semibold: 600;
    --text-weight-bold: 700;
    --text-size-2xs: 0.625rem;
    --text-size-xs: 0.75rem;
    --text-size-sm: 0.875rem;
    --text-size-md: var(--text-base-size);
    --text-size-lg: 1.125rem;
    --text-size-xl: 1.25rem;
    --text-size-2xl: 1.5rem;
    --text-size-3xl: 1.875rem;
    --text-size-4xl: 2.25rem;
    --text-size-5xl: 3rem;
    --text-size-6xl: 3.5rem;
    --text-size-7xl: 4rem;
    --text-size-8xl: 5rem;
    --text-size-9xl: 7rem;
    --text-leading-none: 1;
    --text-leading-3xs: 1.1;
    --text-leading-2xs: 1.2;
    --text-leading-xs: 1.3;
    --text-leading-sm: 1.4;
    --text-leading-md: 1.6;
    --text-leading-lg: 1.7;
    --text-leading-xl: 1.8;
    --text-margin-xs: 0.5rem;
    --text-margin-sm: 1rem;
    --text-margin-md: 1.25rem;
    --text-margin-lg: 1.5rem;
    --text-margin-xl: 2rem;
    --text-margin-2xl: 2.5rem;
    --text-margin-3xl: 3rem;
    --text-selection-background: var(--blue-200);
    --text-selection-text: var(--gray-700);
    --color-base-text: var(--gray-600);
    --color-secondary-text: var(--gray-500);
    --color-disabled-text: var(--gray-350);
    --color-base-header: var(--gray-900);
    --color-disabled-header: var(--gray-350);
    --color-text-code: var(--gray-900);
    --color-background-code: var(--gray-100);
    --mainViewMenuHeight: 4rem;
    --component-size-sm: 2.375rem;
    --component-size-base: 3rem;
    --component-size-lg: 3.5rem;
}

[theme~="dark"] {
    --lumo-base-color: hsl(214, 35%, 21%);
    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
    --lumo-tint: hsl(214, 100%, 98%);
    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
    --lumo-shade: hsl(214, 33%, 13%);
    --lumo-contrast-5pct: var(--lumo-tint-5pct);
    --lumo-contrast-10pct: var(--lumo-tint-10pct);
    --lumo-contrast-20pct: var(--lumo-tint-20pct);
    --lumo-contrast-30pct: var(--lumo-tint-30pct);
    --lumo-contrast-40pct: var(--lumo-tint-40pct);
    --lumo-contrast-50pct: var(--lumo-tint-50pct);
    --lumo-contrast-60pct: var(--lumo-tint-60pct);
    --lumo-contrast-70pct: var(--lumo-tint-70pct);
    --lumo-contrast-80pct: var(--lumo-tint-80pct);
    --lumo-contrast-90pct: var(--lumo-tint-90pct);
    --lumo-contrast: var(--lumo-tint);
    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
    --lumo-primary-color: hsl(214, 90%, 48%);
    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
    --lumo-primary-text-color: hsl(214, 90%, 77%);
    --lumo-primary-contrast-color: #fff;
    --lumo-error-color: hsl(3, 79%, 49%);
    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
    --lumo-error-text-color: hsl(3, 100%, 80%);
    --lumo-success-color: hsl(145, 72%, 30%);
    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
    --lumo-success-text-color: hsl(145, 85%, 46%);
}


html{
    --lumo-base-color: #fff;
    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
    --lumo-tint: #fff;
    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
    --lumo-shade: hsl(214, 35%, 15%);
    --lumo-contrast-5pct: var(--lumo-shade-5pct);
    --lumo-contrast-10pct: var(--lumo-shade-10pct);
    --lumo-contrast-20pct: var(--lumo-shade-20pct);
    --lumo-contrast-30pct: var(--lumo-shade-30pct);
    --lumo-contrast-40pct: var(--lumo-shade-40pct);
    --lumo-contrast-50pct: var(--lumo-shade-50pct);
    --lumo-contrast-60pct: var(--lumo-shade-60pct);
    --lumo-contrast-70pct: var(--lumo-shade-70pct);
    --lumo-contrast-80pct: var(--lumo-shade-80pct);
    --lumo-contrast-90pct: var(--lumo-shade-90pct);
    --lumo-contrast: var(--lumo-shade);
    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
    --lumo-primary-color: hsl(214, 100%, 48%);
    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
    --lumo-primary-text-color: hsl(214, 100%, 43%);
    --lumo-primary-contrast-color: #fff;
    --lumo-error-color: hsl(3, 85%, 48%);
    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
    --lumo-error-text-color: hsl(3, 89%, 42%);
    --lumo-error-contrast-color: #fff;
    --lumo-success-color: hsl(145, 72%, 30%);
    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
    --lumo-success-text-color: hsl(145, 85%, 25%);
    --lumo-success-contrast-color: #fff;


    --lumo-border-radius-s: 0.25em;
    --lumo-border-radius-m: var(--lumo-border-radius, 0.25em);
    --lumo-border-radius-l: 0.5em;
    --lumo-border-radius: 0.25em;
    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
    --lumo-clickable-cursor: default;


    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --lumo-font-size-xxs: 0.75rem;
    --lumo-font-size-xs: 0.8125rem;
    --lumo-font-size-s: 0.875rem;
    --lumo-font-size-m: 1rem;
    --lumo-font-size-l: 1.125rem;
    --lumo-font-size-xl: 1.375rem;
    --lumo-font-size-xxl: 1.75rem;
    --lumo-font-size-xxxl: 2.5rem;
    --lumo-line-height-xs: 1.25;
    --lumo-line-height-s: 1.375;
    --lumo-line-height-m: 1.625;


    /*host*/
    
    --lumo-space-xs: 0.25rem;
    --lumo-space-s: 0.5rem;
    --lumo-space-m: 1rem;
    --lumo-space-l: 1.5rem;
    --lumo-space-xl: 2.5rem;
    --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
    --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
    --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
    --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
    --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
    --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
    --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
    --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
    --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
    --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
}

[part='overlay'] {
    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 0 0 1px var(--lumo-contrast-10pct), var(--lumo-box-shadow-l);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    font-weight: 400;
    line-height: var(--lumo-line-height-s);
    letter-spacing: 0;
    text-transform: none;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[part='overlay'] {
    pointer-events: auto;
}

:host([theme~='error']) [part='overlay'] {
    background: var(--lumo-error-color);
    color: var(--lumo-error-contrast-color);
    box-shadow: var(--lumo-box-shadow-l);
}


[part='content'] {
    padding: var(--lumo-space-wide-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-success {
    background: var(--lumo-success-color);
    color: var(--lumo-success-contrast-color);
    box-shadow: var(--lumo-box-shadow-l);
}

.overlay {
    background: var(--lumo-error-color);
    color: var(--lumo-error-contrast-color);
    box-shadow: var(--lumo-box-shadow-l);
}

/*-------------------------------------------------------------------------------------------------------------------*/

#id_notifications {
    z-index: 1000;
    position: fixed;
    right: 30px;
    width: 250px;
    display: flex;
    bottom: 20px;
    flex-direction: column;
    justify-content: end;
    height: max-content;
}

.notification{
    padding: 1px;
    margin: 15px 5px;
}

.notification-error {
    color: white;
    background: hsl(3, 79%, 49%);
    box-shadow: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
}

button.notification-close-btn {
    border: none;
    background: red;
    border-radius: 10px;
    color: white;
}

@media only screen and (min-width: 768px){


    [part='content']{
        height: 55px;
    }

    #id_notifications{
        width: 350px;
    }
}

.notification.notification-warning {
    background-color: hsl(45deg 100% 46%);
    color: white;
}

.notification-content > span:first-child{
    display: flex;
    align-items: center;
}

.notification-content > span:first-child > span:first-child{
    font-size: 25px;
}

.notification-content > span:first-child > span:first-child i{
    padding-right: 10px;
}

span.notification-close-btn:hover {
    font-size: 25px;
}

.notification-close-btn{
    transition: font-size .2s;
    font-size: 20px;
}