:root {

    --color-1-magenta: #f20cb5;
    --color-2-lila: #ca38f2;
    --color-3-dark-blue: #341959;
    --color-4-blue: #0511f2;
    --color-5-light-blue: #2793f2;
    --color-5-green: #2fc21c;
    --color-6-red: #f20c0c;


    --deactivate-gray: hsla(0, 0%, 100%, 0.38);

    --background-color: rgb(255, 255, 255);
    --border-color: #0000001a;

    --font-color-main : #181c2b;
    --font-color-main-secondary : #6c757d;
    --border-radius: 4px;

    /* a */
    --link-color: rgb(148, 68, 224);


    /* footer*/
    --footer-height: 64px;
    --footer-background:#fafafa;
    --box-shadow-footer: 0px 0px 29px -16px rgba(0, 0, 0, 0.5);


    /* header */
    --header-height: 56px;
    --header-background-color: var(--background-color);

    /* grid container */
    --grid-container-background-color: #ffffff;
    --grid-container-hover-border-color: #00000026;
    --grid-container-hover-box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.2);


    /* navbar */
    --font-color-menue: var(--font-color-main);
    --menue-background-color: #212a35;
    --menue-background-color-mobile: #ffffffa8;
    --menue-background-color-light: #f0f0f0;
    --menue-background-color-left: rgba(255, 255, 255, 0);
    --menue-background-color-right: rgba(255, 255, 255, 0.1);
    --menue-backgorund-box-shadow: 6px 0px 9px -3px rgba(0,0,0,0.2);
    --menue-navbar-links-container-box-shadow: 5px 0px 10px 0px #5f5f5f;
    --menue-navbar-li-hover: #64646440;

    /* radio button */
    --radio-button-box-shadow-inset: inset 6px 4px 11px 1px rgba(0, 0, 0, 0.233);

    /* kontext menue */
    --kontextMenu-background-color: #f9f9f9ad;
    --kontextMenu-border-color: #d4d4d4b3;
    --kontextMenu-box-shadow: 4px 4px 8px 4px #57575787;
    --kontextMenu-ul-li-hover: var(--menue-navbar-li-hover);

    /* help popup */
    --helpPopup-background-color: #f9f9f9cc;
    --helpPopup-border-color: #d4d4d4b3;
    --helpPopup-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

    /* scroll bar */
    --scrollBar-track-background-color: #cacaca;
    --scrollBar-thumb-background-color: #949494d3;
    --scrollBar-thumb-hover-background-color: #636363d3;
    --scrollBar-thumb-active-background-color: #636363d3;

    /* content */
    --content-background-box-shadow: inset 4px 4px 7px 0px rgb(141 141 141);
    --content-background-color: #5e5e5e17;

    /* div-container */
    --div-container-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
    --div-container-border:  1px solid var(--border-color);

        /* rank-container */
        --rank-container-background-color: #fafafa;

        /* img-container */
        --img-container-background-color: #ffffff;

        /* info-container */
        --info-container-background-color: #fafafa;


    /* popup */
    --popup-background-background-color: #d3d3d35e;
    --popup-background-color: rgba(255, 255, 255, 0.7);
    --popup-content-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);


    /* tables */ 
    --table-head-background-color: #c7c7c7;
    --tables-border-color: #a1a1a1;
    --tables-tr-nth-child-even: #f1f1f1;
    --tables-tr-nth-child-odd: #e3e3e3;



    /* graphs */
    --chart-height: 260px;
    --grid-color: var(--border-color);
    
    --font-family: Latto, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;;

    --lebrain-green: #33a63f;
    --lebrain-pink: #9444E0;

    --color-blue-1: #E3F2FD;
    --color-blue-2: #BBDEFB;   
    --color-blue-3: #64B5F6;  
    --color-blue-4: #1E88E5;  
    --color-blue-5: #0D47A1;


    --color-orange-1: #FFCFA8;
    --color-orange-2: #FFB170;
    --color-orange-3: #FF953D;
    --color-orange-4: #FF8723;
    --color-orange-5: #FF7400;

    --color-green-1: #7AE67A;
    --color-green-2: #4FD94F;
    --color-green-3: #2ECF2E;
    --color-green-4: #04C504;
    --color-green-5: #019501;

    --color-red-1: #FFD1D1;
    --color-red-2: #FFA0B0;
    --color-red-3: #FF0000;
    --color-red-4: #ED0000;
    --color-red-5: #d20000;

    --color-gray-1: #d4d4d4;
    --color-gray-2: #b4b4b4;
    --color-gray-3: #909090;
    --color-gray-4: #636363;
    --color-gray-5: #494848;

    --color-price-loss: #face4b;

    --color-local: #E91E63;
    --color-online: var(--color-green-4);

    --color-sales: var(--color-green-3);
    --color-orders: var(--color-blue-4);
    --color-returns: var(--color-orange-4);

    --color-accent-blue-light: #ADD8E6; /* Hellblau */
    --color-accent-blue-cobalt: #0047AB; /* Kobaltblau */
    --color-accent-turquoise: #40E0D0; /* Türkis */
    --color-accent-dark-mint: #137a63; /* Dark-Mint */

    --color-accent-lavender: #E6E6FA; /* Lavendel */
    --color-accent-plum: #DDA0DD; /* Pflaume */
    --color-accent-violet-dark: #9400D3; /* Dunkles Violett */

    --color-accent-yellow-lemon: #FFF44F; /* Zitronengelb */
    --color-accent-yellow-gold: #FFD700; /* Gold */
    --color-accent-yellow-mustard: #FFDB58; /* Senfgelb */

    --color-accent-neutral-cream: #FFFDD0; /* Cremeweiß */
    --color-accent-neutral-taupe: #483C32; /* Taupe */
    --color-accent-neutral-slate-dark: #3d6b6b; /* Dunkles Schiefergrau */
    
    --loading-after-element-width: 0%;
    --loading-after-element-opacity: 80%;
    --loading-after-element-transition-duration: 0.3s;


    --background-image-without-brain: url(../images/brains/05ef6759-62a9-4f2e-bc9d-b58478ddb0ab2-2.webp);


    /* size properties */
    --navbar-width: 230px;
    --navbar-width-small: 50px;

    /* glass design properties */
    --glass-border: 1px solid rgba(255, 255, 255, 0.25);
    --glass-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.432);
    --glass-background-color: rgba(255, 255, 255, 0.08); 
    --glass-backdrop-filter: blur(8px); /* Weichzeichnung des Hintergrundes */
    --glass-webkit-backdrop-filter: blur(8px); /* Für Safari-Browser */
    --glass-border-radius: var(--border-radius) 0 0 0; /* Optional: Abgerundete Ecken */

    /* input */
    --input-color: var(--font-color-main);
    --input-background-color: #f5f5f5;
    --input-background-color-deactivated: #b5b5b5;
    --input-border-radius: var(--border-radius);
    --input-border-color: #d6d6d6;
    --input-border-color-deactivated: white;
    --input-border-color-focus: #9444E0;
    --input-placeholder-color: #3e3e3e;
    --input-hover: #f0f0f0;

    /* button */
    --button-color: #f5f5f5;
    --button-color-disabled: #676767;
    --button-background-color: #737373;
    --button-background-color-disabled: #151515;
    --button-hover: #3a3a3a;

    /* notification */
    --notification-color: var(--font-color-main);
    --notification-border-color: #ccc;
    --notification-background-color: var(--background-color);
    --notification-hover-background-color: rgba(249, 249, 249, 0.85);


}


.dark-theme {

    --deactivate-gray: #0000004f;

    --background-color: #1e1f20;
    --border-color: #ffffff1f;

    --font-color-main : #e1e1e1;
    --font-color-main-secondary : #919191;

    --icon-color: #616161;


    /* footer*/
    --footer-background:#2a2a2a;
    --box-shadow-footer: 0px 0px 29px -16px rgba(0, 0, 0, 0.5);


    /* header */
    --header-background-color: #2a2a2a;

    /* grid container */
    --grid-container-background-color: #1e1f20;
    --grid-container-hover-border-color: #4949498f;
    --grid-container-hover-box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.8);


    /* navbar */
    --font-color-menue: var(--font-color-main);
    --menue-background-color: #2a2a2a;
    --menue-background-color-mobile: #1f1f1fda;
    --menue-background-color-light: #f0f0f0;
    --menue-background-color-left: #2a2a2a;
    --menue-background-color-right: #3d3d3d;
    --menue-backgorund-box-shadow: 6px 0px 9px -3px rgba(0,0,0,0.2);
    --menue-navbar-li-hover: #dbdbdb40;

    /* radio button */
    --radio-button-box-shadow-inset: inset 6px 4px 11px 1px black;

    /* kontext menue */
    --kontextMenu-background-color: #00000038;
    --kontextMenu-border-color: #d4d4d4b3;
    --kontextMenu-box-shadow: 4px 4px 8px 4px #000000d4;
    --kontextMenu-ul-li-hover: var(--menue-navbar-li-hover);

    /* help popup */
    --helpPopup-background-color: var(--background-color);
    --helpPopup-border-color: #d4d4d4b3;
    --helpPopup-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

    /* scroll bar */
    --scrollBar-track-background-color: #54545481;
    --scrollBar-thumb-background-color: #727272d3;
    --scrollBar-thumb-hover-background-color: #a7a7a7;
    --scrollBar-thumb-active-background-color: #a7a7a7;

    /* content */
    --content-background-box-shadow: inset 4px 4px 7px 0px black;
    --content-background-color: #131314;


    /* div-container */
    --div-container-background-color: #4f4f4f;
    --div-container-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
    --div-container-border:  0.5px solid var(--border-color);

        /* rank-container */
        --rank-container-background-color: #4f4f4f;

        /* info-container */
        --info-container-background-color: #4f4f4f;



    /* popup */
    --popup-background-background-color: #737373b5;
    --popup-background-color: rgba(0, 0, 0, 0.7);
    --popup-content-box-shadow: 0 0 10px rgb(0, 0, 0);




    --background-image-without-brain: url(../images/brains/05ef6759-62a9-4f2e-bc9d-b58478ddb0ab2-2_dark.webp);


    /* tables */ 
    --table-head-background-color: #1d1d1d;
    --tables-border-color: #484848;
    --tables-tr-nth-child-even: #3a3a3a;
    --tables-tr-nth-child-odd: #4e4e4e;

    /* graphs */
    --grid-color: var(--border-color);




/* glass design properties */
--glass-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
--glass-background-color: #121212b3; 


    /* input */
    --input-color: var(--font-color-main);
    --input-background-color: #2c2c2c;
    --input-background-color-deactivated: #000000;
    --input-border-radius: var(--border-radius);
    --input-border-color: #3a3a3a;
    --input-border-color-deactivated: #a1a1a1;
    --input-border-color-focus: #9444E0;
    --input-placeholder-color: #3e3e3e;
    --input-hover: #5e5e5e;

    /* button */
    --button-color: var(--font-color-main);
    --button-color-disabled: #676767;
    --button-background-color: #737373;
    --button-background-color-disabled: #151515;
    --button-hover: #3a3a3a;

    /* notification */
    --notification-color: var(--font-color-main);
    --notification-border-color: #3e3e3e;
    --notification-background-color: rgba(21, 21, 21, 0.85);
    --notification-hover-background-color: rgba(0, 0, 0, 0.85);

}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    transition: background-color 0.3s ease, border-color 0.3s ease;

}

/* all elements with attribute tileid */
*[tileid] {
    display: none;
}


*[loading="true"]::after {
    /* width: 100%; */
    /* height: 100%; */
    content: " "; /* Leerzeichen im Content für die Anzeige des Pseudo-Elements */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: var(--deactivate-gray); /* Halbtransparenter Hintergrund für den Glas-Effekt */
    color: white; /* Textfarbe */
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Textes */
    justify-content: center; /* Horizontale Zentrierung des Textes */
    text-align: center; /* Zentriert den Text, falls er umbricht */
    backdrop-filter: blur(5px); /* Glas-Effekt */
    background-image: url('../images/loadingGIF_old.gif'); /* Hintergrund-GIF */
    background-repeat: no-repeat;
    background-position: center; /* Zentriert das Hintergrundbild */
    background-size: 64px auto; /* Behält die ursprüngliche Größe des Bildes bei */
    border-radius: var(--border-radius); /* Abgerundete Ecken */
}

*[noData="true"]::after {
    /* width: 100%; */
    /* height: 100%; */
    content: "No data available"; /* Leerzeichen im Content für die Anzeige des Pseudo-Elements */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: var(--deactivate-gray); /* Halbtransparenter Hintergrund für den Glas-Effekt */
    color: white; /* Textfarbe */
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Textes */
    justify-content: center; /* Horizontale Zentrierung des Textes */
    text-align: center; /* Zentriert den Text, falls er umbricht */
    backdrop-filter: blur(5px); /* Glas-Effekt */
    background-repeat: no-repeat;
    background-position: center; /* Zentriert das Hintergrundbild */
    background-size: 64px auto; /* Behält die ursprüngliche Größe des Bildes bei */
    border-radius: var(--border-radius); /* Abgerundete Ecken */
}



html {
    scroll-behavior: smooth;
}


body {
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    color: var(--font-color-main);
    background-color: var(--background-color);
    overflow: hidden;
    height: 100svh;
    width: 100svw;
    -webkit-font-smoothing: antialiased; /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale;  /* Firefox */
}

.no-scroll {
    overflow: hidden;
}


h1 {
    letter-spacing: -1.5px;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 8px;
}

h2 {
    letter-spacing: -1.25px;
    margin: 0;
}

h3 {
    letter-spacing: -1.0px;
    margin: 0 0 8px 0;
}

h4 {
    letter-spacing: -0.75px;
    margin: 16px 0 8px 0;
    text-align: left;
}



#background {
    /* image */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-image: url(../images/background/light-source-pink.webp);
    background-size: cover; /* Bedeckt den gesamten Container, könnte über den Rand hinausgehen */
    background-position: center center; /* Zentriert das Bild */
    background-repeat: no-repeat;
    z-index: -100;
}

/* add blurfilter to the #background */
#background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* backdrop-filter: blur(20px);  */
    z-index: -99;
}


footer {
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative; 
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    font-size: 12px;
    color: var(--font-color);
    font-weight: bold;
    box-shadow: var(--box-shadow-footer);  
    background-color: var(--footer-background);
    z-index: 1000;
}

footer.login {
    color: #d3d3d3;
    background: #00000042;
    border-color: rgb(151 151 151);
}

.span-color-order {
    color: var(--color-orders);
}

.span-color-returns {
    color: var(--color-returns);
}

.diagramm-container {
    height: 230px;
}

/* link color */
a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
}

hr {
    height: 1px;
    width: 100%;
    opacity: 0.2;
    margin: 8px 0;
}

.glass-container {
    background-color: var(--glass-background-color);
    border: var(--glass-border);
    box-shadow: var(--glass-box-shadow);
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
    border-radius: var(--glass-border-radius);
}

.help-Popup {
    display: none;
    position: absolute;
    border-radius: 1rem;
    font-family: var(--font-family);
    left: 300px;
    top: 300px;
    width: 360px;
    height: auto;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.07rem;
    color: var(--font-color);
    border: 1px solid var(--helpPopup-border-color);
    background-color: var(--helpPopup-background-color);
    box-shadow: var(--helpPopup-box-shadow);
    backdrop-filter: blur(8px); /* Weichzeichnung des Hintergrundes */
    -webkit-backdrop-filter: blur(8px); /* Für Safari-Browser */
    border-radius: 8px; /* Optional: Abgerundete Ecken */
    transition: visibility 0.2s ease-in-out;
    --triangle-offset-x: 0px; /* Horizontaler Versatz */
    --triangle-offset-y: 0px; /* Vertikaler Versatz */
    --triangle-direction: 1;
    z-index: 1003; /* Stellen Sie sicher, dass der z-index hoch genug ist, damit das Popup über anderen Elementen liegt */
}

.help-Popup::after, .help-Popup::before {
    /* ... Ihre anderen Stile ... */
    left: calc(50% + var(--triangle-offset-x)); /* Verwenden der CSS-Variable für den horizontalen Versatz */
    bottom: var(--triangle-offset-y); /* Verwenden der CSS-Variable für den vertikalen Versatz */
    transform: translateX(-50%) scaleY(var(--triangle-direction)); /* Richtung des Dreiecks anpassen */
    z-index: 1002;
}

.help-Popup::after {
    content: '';
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(212, 212, 212, 0.7); /* Die Farbe des Randes */
}



.container-helpPopup-text {
    margin: 16px;
}

.help-Popup-span-title {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: -0.07rem;
    color: var(--font-color);
}

.help-Popup-span {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.07rem;
    text-align: justify;
    color: var(--font-color);
}


.container-InfoIcon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    top: 24px;
    right: 24px;
    left: auto;
}

.container-InfoIcon > i {
    width: auto;
    height: auto;
    opacity: 5%;
    transition: all 0.1s ease-in-out;
}

.container-InfoIcon > i:hover {
    opacity: 100%;
}


.background-image-without-brain-overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
}

.chart-container {
    padding: 8px;
    display: block;
    height: var(--chart-height);
    position: relative;
}

#main-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    align-content: center;
    height: calc(100svh - var(--header-height));
    background-color: var(--content-background-color);
    will-change: width;
}

#main-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--content-background-box-shadow);
    z-index: 2;
    pointer-events: none;
}


.background-image-without-brain {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--background-image-without-brain);
    background-size: cover; /* Bedeckt den gesamten Container, könnte über den Rand hinausgehen */
    background-position: center center; /* Zentriert das Bild */
    background-repeat: no-repeat;
    z-index: -100;
}

.icon-color {
    color: var(--font-color-main);
}


#loadingImage {
    height: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;    
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dunkelgrauer Hintergrund mit Transparenz */
    z-index: 999; /* Stellen Sie sicher, dass es unter dem Popup liegt */
}

#overlayPopUp {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Macht das Overlay so breit wie den Container */
    height: 100%; /* Macht das Overlay so hoch wie den Container */
    background-color: rgba(128, 128, 128, 0.5); /* Halbtransparentes Grau */
    display: flex;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
    z-index: 2; /* Stellen Sie sicher, dass das Overlay über den Inhalten des Containers liegt */
}

#success-animation {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background-color: #eceff1;
}

#success-animation > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#success-animation img {
    height: 100%;
    width: auto;
    object-fit: cover;
    clip-path: inset(1% 1%);
}



/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* Fügen Sie diese Zeile hinzu, um die Höhe des horizontalen Scrollbalkens zu definieren */
}
  
/* Track */
::-webkit-scrollbar-track {
    background: var(--scrollBar-track-background-color);
    border-radius: 0.5rem;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollBar-thumb-background-color);
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollBar-thumb-hover-background-color);
}

/* Handle on active */
::-webkit-scrollbar-thumb:active {
    background: var(--scrollBar-thumb-active-background-color);
    min-height: 8px; /* Verwenden Sie min-height statt height */
    min-width: 8px; /* Fügen Sie diese Zeile hinzu für den horizontalen Scrollbalken */
}


#popup-placholder-menue {
    min-width: 220px;
    max-width: 220px;
}


@media (max-width: 1024px) {

    #popup-placholder-menue {
        min-width: 120px;
        max-width: 120px;
    }

}

@media (max-width: 480px) {

    body {
        font-size: 0.8rem;
        overflow: auto;
    }

    #main-container {
        height: min-content;
        min-height: 100vh;
    }


    #popup-placholder-menue {
        min-width: 0;
        max-width: 0;
    }

 
}