@font-face {
    font-family: quan;
    src: url(../fonts/Quan/Quan.otf);
}

@font-face {
    font-family: quan-black;
    src: url(../fonts/Quan/Quan-Black.otf);
}

@font-face {
    font-family: quan-book;
    src: url(../fonts/Quan/Quan-Book.otf);
}

@font-face {
    font-family: quan-bold;
    src: url(../fonts/Quan/Quan-Bold.otf);
}

@font-face {
    font-family: nexa;
    src: url(../fonts/Nexa/NexaRegular.otf);
}

@font-face {
    font-family: nexa-black;
    src: url(../fonts/Nexa/NexaBlack.otf);
}

@font-face {
    font-family: nexa-light;
    src: url(../fonts/Nexa/NexaLight.otf);
}

@font-face {
    font-family: nexa-bold;
    src: url(../fonts/Nexa/NexaBold.otf);
}

@font-face {
    font-family: ibm-mono;
    src: url(../fonts/IBMPlex/IBMPlexMono-Regular.otf);
}

@font-face {
    font-family: ibm-bold;
    src: url(../fonts/IBMPlex/IBMPlexMono-Bold.otf);
}

@font-face {
    font-family: ibm-text;
    src: url(../fonts/IBMPlex/IBMPlexMono-Text.otf);
}

@font-face {
    font-family: ibm-medium;
    src: url(../fonts/IBMPlex/IBMPlexMono-Medium.otf);
}

@font-face {
    font-family: ibm-light;
    src: url(../fonts/IBMPlex/IBMPlexMono-Light.otf);
}

@font-face {
    font-family: ibm-italic;
    src: url(../fonts/IBMPlex/IBMPlexMono-Italic.otf);
}

* {
    font-family: ibm-mono , sans-serif;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* Internet Explorer 10+ */
}


*::-webkit-scrollbar {
    display: none;
}


:root {
    --background-color: #EDEFF1;
    --foreground-color: #2A2F39;
    --text-color: #EDEFF1;
    --text-secondary-color:#EDEFF1;
    --primary-color: #2A2F39;
    --secondary-color: #595F6A;
    --tertiary-color: #F2F2F2;
    --quadrary-color:#22262E ;
    --hover-color: rgba(42, 47, 57, 0.5);
    --disable: rgba(255, 255, 255, 0.5);
    --dropShadowLight: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.3));
    --dropShadowMedium: drop-shadow(2px 2px 2px var(--dropShadow-color));
    --dropShadowHeavy: drop-shadow(2px 2px 2px var(--dropShadow-color));
    --dropShadow-color : #000000;
    --theme: #a68eff;
    --underlay: rgba(0, 0, 0, 0.5);
    --underlay01: rgba(0, 0, 0, 0.1);
    --underlay02: rgba(0, 0, 0, 0.2);
    --underlay03: rgba(0, 0, 0, 0.3);
    --underlay04: rgba(0, 0, 0, 0.4);
    --logo: #2A2F39;
    --height: 150px;
    --calendar-select: #288EDF;
    --calendar-hover: rgba(28, 103, 174, 0.5);
    --calendar-highlight: #246fff;
    --text-color-10: rgba(237, 239, 241, 0.10);
    --text-color-25: rgba(237, 239, 241, 0.25);
    --text-color-50: rgba(237, 239, 241, 0.50);
    --text-color-75: rgba(237, 239, 241, 0.75);

    --stockHigh-color: #22b3f1;
    --stockMedium-color: #2ad574;
    --stockLow-color: #f6bb26;
    --stockCritical-color: #f63453;

    --glowLow-reorder-marker: #ffa502;
    --glowHigh-reoder-marker: #ffd36a;
    --glowHigh-critical-marker: #ff6b6b;
    --glowLow-critical-marker: #e74c3c;


    --cursor: url("../cursor/cursor.svg") 8 8, default;
    --pointer: url("../cursor/pointer.svg") 8 8, pointer;
    --text: url("../cursor/text.svg") 8 8, text;
    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}

/*html[data-theme='virtue-light'] {*/
/*    --background-color: #E4EEF6;*/
/*    --foreground-color: #215a88;*/
/*    --text-color: #ffffff;*/
/*    --text-secondary-color:#E4EEF6;*/
/*    --primary-color: #6fadf3;*/
/*    --secondary-color: #6b829d;*/
/*    --tertiary-color: #2A2F39;*/
/*    --quadrary-color:#22262E ;*/
/*    --hover-color: rgba(42, 47, 57, 0.5);*/
/*    --disable: rgba(255, 255, 255, 0.5);*/
/*    --dropShadow-color : #000000;*/
/*    --theme: #a68eff;*/
/*    --underlay: rgba(0, 0, 0, 0.5);*/
/*    --underlay01: rgba(0, 0, 0, 0.1);*/
/*    --underlay02: rgba(0, 0, 0, 0.2);*/
/*    --underlay03: rgba(0, 0, 0, 0.3);*/
/*    --logo: #288EDF;*/
/*    --height: 150px;*/
/*    --calendar-select: #288EDF;*/
/*    --calendar-hover: rgba(28, 103, 174, 0.5);*/
/*    --calendar-highlight: #246fff;*/
/*    --text-color-10: rgba(237, 239, 241, 0.10);*/
/*    --text-color-25: rgba(237, 239, 241, 0.25);*/
/*    --text-color-50: rgba(237, 239, 241, 0.50);*/
/*    --text-color-75: rgba(237, 239, 241, 0.75);*/
/*    --cursor: url("../cursor/cursor.svg") 8 8, default;*/
/*    --pointer: url("../cursor/pointer.svg") 8 8, pointer;*/
/*    --text: url("../cursor/text.svg") 8 8, text;*/
/*    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;*/
/*}*/

html[data-theme='virtue-light'] {
    --background-color: #E4EEF6;        /* soft light blue-gray */
    --foreground-color: #215A88;        /* deep blue for contrast sections */
    --text-color: #1B2430;              /* dark navy for readability */
    --text-secondary-color: #4B5A6E;    /* muted steel blue for secondary text */

    --primary-color: #6FADF3;           /* bright sky-blue accent */
    --secondary-color: #6B829D;         /* muted cool secondary */
    --tertiary-color: #FFFFFF;          /* crisp white highlight areas */
    --quadrary-color: #C8D6E4;          /* lighter blue-gray layering */
    --quintuple-color: #9BAEC2;         /* soft desaturated mid-tone */

    --hover-color: rgba(33, 90, 136, 0.25);
    --disable: rgba(0, 0, 0, 0.35);
    --dropShadow-color: #000000;

    --theme: #288EDF;                   /* strong blue identity accent */
    --underlay: rgba(0, 0, 0, 0.4);
    --underlay01: rgba(0, 0, 0, 0.1);
    --underlay02: rgba(0, 0, 0, 0.2);
    --underlay03: rgba(0, 0, 0, 0.3);

    --logo: #288EDF;                    /* logo matches theme accent */
    --height: 150px;

    /* Calendar states */
    --calendar-select: #288EDF;
    --calendar-hover: rgba(40, 142, 223, 0.35);
    --calendar-highlight: #4FA5FF;

    /* Text opacity variants */
    --text-color-10: rgba(27, 36, 48, 0.10);
    --text-color-25: rgba(27, 36, 48, 0.25);
    --text-color-50: rgba(27, 36, 48, 0.50);
    --text-color-75: rgba(27, 36, 48, 0.75);

    /* Stock indicators — vibrant for clarity on light bg */
    --stockHigh-color: #22b3f1;
    --stockMedium-color: #2ad574;
    --stockLow-color: #f6bb26;
    --stockCritical-color: #f63453;

    /* Glow markers */
    --glowLow-reorder-marker: #ffa502;
    --glowHigh-reoder-marker: #ffd36a;
    --glowHigh-critical-marker: #ff6b6b;
    --glowLow-critical-marker: #e74c3c;

    /* Gradients */
    --gradient: linear-gradient(to right, transparent 20%, var(--primary-color) 80%);
    --gradientReverse: linear-gradient(to left, transparent 20%, var(--primary-color) 80%);

    --gradientSecondary: linear-gradient(to right, transparent 20%, var(--secondary-color) 80%);
    --gradientSecondaryReverse: linear-gradient(to left, transparent 20%, var(--secondary-color) 80%);

    /* Custom cursors */
    --cursor: url("../cursor/cursor.svg") 8 8, default;
    --pointer: url("../cursor/pointer.svg") 8 8, pointer;
    --text: url("../cursor/text.svg") 8 8, text;
    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}

/*html[data-theme='virtue-dark'] {*/
/*    --background-color: #288EDF;*/
/*    --foreground-color: #E4EEF6;*/
/*    --text-color: #1C67AE;*/
/*    --text-secondary-color:#E4EEF6;*/
/*    --primary-color: #E4EEF6;*/
/*    --secondary-color: #1C67AE;*/
/*    --tertiary-color: #2A2F39;*/
/*    --hover-color: rgba(228, 238, 246, 0.5);*/
/*    --dropShadow-color : #000000;*/
/*    --theme: #a68eff;*/
/*    --underlay: rgba(0, 0, 0, 0.5);*/
/*    --logo: #E4EEF6;*/
/*    --height: 150px;*/
/*    --cursor: url("../cursor/cursor.svg") 8 8, default;*/
/*    --pointer: url("../cursor/pointer.svg") 8 8, pointer;*/
/*    --text: url("../cursor/text.svg") 8 8, text;*/
/*    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;*/
/*}*/

html[data-theme='vice-light'] {
    --background-color: #E4EEF6;
    --foreground-color: #DF285A;
    --text-color: #E4EEF6;
    --text-secondary-color:#E4EEF6;
    --primary-color: #DF285A;
    --secondary-color: #A70F48;
    --tertiary-color: #2A2F39;
    --hover-color: rgba(167, 15, 72, 0.5);
    --dropShadow-color : #000000;
    --theme: #a68eff;
    --underlay: rgba(0, 0, 0, 0.5);
    --logo: #DF285A;
    --height: 150px;
    --cursor: url("../cursor/cursor.svg") 8 8, default;
    --pointer: url("../cursor/pointer.svg") 8 8, pointer;
    --text: url("../cursor/text.svg") 8 8, text;
    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}

/*html[data-theme='vice-dark'] {*/
/*    --background-color: #A70F48;*/
/*    --foreground-color: #E4EEF6;*/
/*    --text-color: #A70F48;*/
/*    --text-secondary-color:#E4EEF6;*/
/*    --primary-color: #DF285A;*/
/*    --secondary-color: #A70F48;*/
/*    --tertiary-color: #2A2F39;*/
/*    --hover-color: rgba(167, 15, 72, 0.5);*/
/*    --dropShadow-color : #000000;*/
/*    --theme: #a68eff;*/
/*    --underlay: rgba(0, 0, 0, 0.5);*/
/*    --logo: #E4EEF6;*/
/*    --height: 150px;*/
/*    --cursor: url("../cursor/cursor.svg") 8 8, default;*/
/*    --pointer: url("../cursor/pointer.svg") 8 8, pointer;*/
/*    --text: url("../cursor/text.svg") 8 8, text;*/
/*    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;*/
/*}*/


html[data-theme='vice-dark'] {
    --background-color: #A70F48;       /* base magenta-red */
    --foreground-color: #1A1C22;       /* dark neutral foreground */
    --text-color: #E4EEF6;             /* light text for readability */
    --text-secondary-color: #C8CED6;   /* softer secondary text */

    --primary-color: #DF285A;          /* bright pink-red accent */
    --secondary-color: #6C0F36;        /* darker shade for balance */
    --tertiary-color: #2A2F39;         /* cool dark neutral for sections */
    --quadrary-color: #E4EEF6;         /* inverted for cards/headers */
    --quintuple-color: #F6B6C6;        /* soft highlight shade */

    --hover-color: rgba(223, 40, 90, 0.4);
    --disable: rgba(255, 255, 255, 0.4);
    --dropShadow-color : #000000;

    --theme: #DF285A;                  /* thematic magenta */
    --underlay: rgba(0, 0, 0, 0.55);
    --underlay01: rgba(0, 0, 0, 0.1);
    --underlay02: rgba(0, 0, 0, 0.2);
    --underlay03: rgba(0, 0, 0, 0.3);

    --logo: #E4EEF6;                   /* logo stands out light */
    --height: 150px;

    --calendar-select: #FF5C8A;        /* bright selection */
    --calendar-hover: rgba(255, 92, 138, 0.4);
    --calendar-highlight: #FF80A8;

    --text-color-10: rgba(228, 238, 246, 0.10);
    --text-color-25: rgba(228, 238, 246, 0.25);
    --text-color-50: rgba(228, 238, 246, 0.50);
    --text-color-75: rgba(228, 238, 246, 0.75);

    /* Stock indicators adjusted for dark/magenta bg */
    --stockHigh-color: #22b3f1;
    --stockMedium-color: #2ad574;
    --stockLow-color: #f6bb26;
    --stockCritical-color: #f63453;

    /* Glow markers tuned to pop on dark red background */
    --glowLow-reorder-marker: #ffa502;
    --glowHigh-reoder-marker: #ffd36a;
    --glowHigh-critical-marker: #ff6b6b;
    --glowLow-critical-marker: #e74c3c;

    --gradient: linear-gradient(to right, transparent 20%, var(--primary-color) 80%);
    --gradientReverse: linear-gradient(to left, transparent 20%, var(--primary-color) 80%);

    --gradientSecondary: linear-gradient(to right, transparent 20%, var(--secondary-color) 80%);
    --gradientSecondaryReverse: linear-gradient(to left, transparent 20%, var(--secondary-color) 80%);

    --cursor: url("../cursor/cursor.svg") 8 8, default;
    --pointer: url("../cursor/pointer.svg") 8 8, pointer;
    --text: url("../cursor/text.svg") 8 8, text;
    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}


html[data-theme='practical-white'] {
    --background-color: #EDEFF1;
    --foreground-color: #2A2F39;
    --text-color: #EDEFF1;
    --text-secondary-color:#EDEFF1;
    --primary-color: #2A2F39;
    --secondary-color: #595F6A;
    --tertiary-color: #F2F2F2;
    --quadrary-color:#22262E ;
    --quintuple-color: #AEADA4;
    --hover-color: rgba(42, 47, 57, 0.5);
    --disable: rgba(255, 255, 255, 0.5);
    --dropShadow-color : #000000;
    --theme: #a68eff;
    --underlay: rgba(0, 0, 0, 0.5);
    --underlay01: rgba(0, 0, 0, 0.1);
    --underlay02: rgba(0, 0, 0, 0.2);
    --underlay03: rgba(0, 0, 0, 0.3);
    --logo: #2A2F39;
    --height: 150px;
    --calendar-select: #288EDF;
    --calendar-hover: rgba(28, 103, 174, 0.5);
    --calendar-highlight: #246fff;
    --text-color-10: rgba(237, 239, 241, 0.10);
    --text-color-25: rgba(237, 239, 241, 0.25);
    --text-color-50: rgba(237, 239, 241, 0.50);
    --text-color-75: rgba(237, 239, 241, 0.75);

    --stockHigh-color: #22b3f1;
    --stockMedium-color: #2ad574;
    --stockLow-color: #f6bb26;
    --stockCritical-color: #f63453;

    --warning:#f63453;
    --warning-box: #752f3b;

    --input-highlight: #0363f3;
    --input-highlight-shadow: #2F6DFF4C;

    --glowLow-reorder-marker: #ffa502;
    --glowHigh-reoder-marker: #ffd36a;
    --glowHigh-critical-marker: #ff6b6b;
    --glowLow-critical-marker: #e74c3c;

    --gradient: linear-gradient(to right,  transparent 20%, var(--primary-color) 80%);
    --gradientReverse: linear-gradient(to left,  transparent 20%, var(--primary-color) 80%);

    --gradientSecondary: linear-gradient(to right,  transparent 20%, var(--secondary-color) 80%);
    --gradientSecondaryReverse: linear-gradient(to left,  transparent 20%, var(--secondary-color) 80%);

    --cursor: url("../cursor/cursor-w.svg") 4 4, default;
    --pointer: url("../cursor/pointer-w.svg") 4 4, pointer;
    --text: url("../cursor/text-w.svg") 4 4, text;
    --cursorInfo: url("../cursor/cursorInfo-w.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}

/*html[data-theme='technical-black'] {*/
/*    --background-color: #11141B;*/
/*    --foreground-color: #D8E4EA;*/
/*    --text-color: #EDEFF1;*/
/*    --text-secondary-color:#EDEFF1;*/
/*    --primary-color: #2A2F39;*/
/*    --secondary-color: #595F6A;*/
/*    --tertiary-color: #F2F2F2;*/
/*    --hover-color: rgba(216, 228, 234, 0.5);*/
/*    --dropShadow-color : #000000;*/
/*    --theme: #a68eff;*/
/*    --underlay: rgba(0, 0, 0, 0);*/
/*    --underlay01: rgba(0, 0, 0, 0.1);*/
/*    --underlay02: rgba(0, 0, 0, 0.2);*/
/*    --underlay03: rgba(0, 0, 0, 0.3);*/

/*    --text-color-10: rgba(237, 239, 241, 0.10);*/
/*    --text-color-25: rgba(237, 239, 241, 0.25);*/
/*    --text-color-50: rgba(237, 239, 241, 0.50);*/
/*    --text-color-75: rgba(237, 239, 241, 0.75);*/

/*    --stockHigh-color: #F5EFE7;*/
/*    --stockMedium-color: #D8C4B6;*/
/*    --stockLow-color: #3E5879;*/
/*    --stockCritical-color: #213555;*/

/*    --glowLow-reorder-marker: #ffa502;*/
/*    --glowHigh-reoder-marker: #ffd36a;*/
/*    --glowHigh-critical-marker: #ff6b6b;*/
/*    --glowLow-critical-marker: #e74c3c;*/
/*    --logo: #D8E4EA;*/
/*    --height: 150px;*/
/*    --cursor: url("../cursor/cursor-b.svg") 4 4, default;*/
/*    --pointer: url("../cursor/pointer-b.svg") 4 4, pointer;*/
/*    --text: url("../cursor/text-b.svg") 4 4, text;*/
/*    --cursorInfo: url("../cursor/cursorInfo-b.svg") 4 4, help;*/
/*}*/


html[data-theme='technical-black'] {
    --background-color: #11141B;        /* deep technical black */
    --foreground-color: #1E232C;        /* slightly lighter neutral for cards/panels */
    --text-color: #EDEFF1;              /* crisp light text */
    --text-secondary-color: #AEB6C2;    /* softer gray-blue for secondary text */

    --primary-color: #2A2F39;           /* cool dark gray accent */
    --secondary-color: #4A5260;         /* muted steel gray */
    --tertiary-color: #D8E4EA;          /* light contrast element */
    --quadrary-color: #20242D;          /* subtle depth layer */
    --quintuple-color: #6E7685;         /* desaturated mid-tone accent */

    --hover-color: rgba(216, 228, 234, 0.25);
    --disable: rgba(255, 255, 255, 0.35);
    --dropShadow-color: #000000;

    --theme: #7F6CFF;                   /* subtle technical purple accent */
    --underlay: rgba(0, 0, 0, 0.6);
    --underlay01: rgba(0, 0, 0, 0.1);
    --underlay02: rgba(0, 0, 0, 0.2);
    --underlay03: rgba(0, 0, 0, 0.3);

    --logo: #D8E4EA;                    /* logo pops in light gray-blue */
    --height: 150px;

    /* Calendar states tuned to stand out on black */
    --calendar-select: #288EDF;
    --calendar-hover: rgba(40, 142, 223, 0.35);
    --calendar-highlight: #4FA5FF;

    /* Text opacity variants */
    --text-color-10: rgba(237, 239, 241, 0.10);
    --text-color-25: rgba(237, 239, 241, 0.25);
    --text-color-50: rgba(237, 239, 241, 0.50);
    --text-color-75: rgba(237, 239, 241, 0.75);

    /* Stock indicators aligned with semantic colors */
    --stockHigh-color: #22b3f1;     /* cyan pop */
    --stockMedium-color: #2ad574;   /* green pop */
    --stockLow-color: #f6bb26;      /* amber pop */
    --stockCritical-color: #f63453; /* red pop */

    /* Glow markers tuned for dark base */
    --glowLow-reorder-marker: #ffa502;
    --glowHigh-reoder-marker: #ffd36a;
    --glowHigh-critical-marker: #ff6b6b;
    --glowLow-critical-marker: #e74c3c;

    /* Gradients using primary/secondary */
    --gradient: linear-gradient(to right, transparent 20%, var(--primary-color) 80%);
    --gradientReverse: linear-gradient(to left, transparent 20%, var(--primary-color) 80%);

    --gradientSecondary: linear-gradient(to right, transparent 20%, var(--secondary-color) 80%);
    --gradientSecondaryReverse: linear-gradient(to left, transparent 20%, var(--secondary-color) 80%);

    /* Custom cursors */
    --cursor: url("../cursor/cursor-b.svg") 4 4, default;
    --pointer: url("../cursor/pointer-b.svg") 4 4, pointer;
    --text: url("../cursor/text-b.svg") 4 4, text;
    --cursorInfo: url("../cursor/cursorInfo-b.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}


/*html[data-theme='automata'] {*/
/*    --background-color: #B0AB98;*/
/*    --foreground-color: #b413d;*/
/*    --text-color: #EDEFF1;*/
/*    --text-secondary-color:#594e4a;*/
/*    --primary-color: #C3BDA8;*/
/*    --secondary-color: #594e4a;*/
/*    --tertiary-color: #B8B29D;*/
/*    --quadrary-color:#B0AB98 ;*/
/*    --hover-color: rgba(237, 239, 241, 0.51);*/
/*    --disable: rgba(255, 255, 255, 0.5);*/
/*    --dropShadow-color : #000000;*/
/*    --theme: #a68eff;*/
/*    --underlay: rgba(0, 0, 0, 0.5);*/
/*    --underlay01: rgba(0, 0, 0, 0.1);*/
/*    --underlay02: rgba(0, 0, 0, 0.2);*/
/*    --underlay03: rgba(0, 0, 0, 0.3);*/
/*    --logo: #EDEFF1;*/
/*    --height: 150px;*/
/*    --calendar-select: #288EDF;*/
/*    --calendar-hover: rgba(28, 103, 174, 0.5);*/
/*    --calendar-highlight: #246fff;*/
/*    --text-color-10: rgba(237, 239, 241, 0.10);*/
/*    --text-color-25: rgba(237, 239, 241, 0.25);*/
/*    --text-color-50: rgba(237, 239, 241, 0.50);*/
/*    --text-color-75: rgba(237, 239, 241, 0.75);*/
/*    --cursor: url("../cursor/cursor.svg") 8 8, default;*/
/*    --pointer: url("../cursor/pointer.svg") 8 8, pointer;*/
/*    --text: url("../cursor/text.svg") 8 8, text;*/
/*    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;*/
/*}*/

html[data-theme='automata'] {
    --background-color: #B0AB98;        /* muted automata base */
    --foreground-color: #2E2A26;        /* dark brown-gray for contrast */
    --text-color: #EDEFF1;              /* bright neutral text */
    --text-secondary-color: #594E4A;    /* muted earthy secondary text */

    --primary-color: #C3BDA8;           /* lighter highlight beige */
    --secondary-color: #594E4A;         /* earthy mechanical tone */
    --tertiary-color: #B8B29D;          /* slightly lighter accent */
    --quadrary-color: #9F9A85;          /* deeper beige-gray */
    --quintuple-color: #D2CCBA;         /* pale highlight for UI borders */

    --hover-color: rgba(46, 42, 38, 0.25);
    --disable: rgba(255, 255, 255, 0.35);
    --dropShadow-color: #000000;

    --theme: #A68EFF;                   /* subtle purple accent for contrast */
    --underlay: rgba(0, 0, 0, 0.5);
    --underlay01: rgba(0, 0, 0, 0.1);
    --underlay02: rgba(0, 0, 0, 0.2);
    --underlay03: rgba(0, 0, 0, 0.3);

    --logo: #EDEFF1;                    /* light logo for visibility */
    --height: 150px;

    /* Calendar colors tuned with blue highlight for clarity */
    --calendar-select: #288EDF;
    --calendar-hover: rgba(40, 142, 223, 0.35);
    --calendar-highlight: #4FA5FF;

    /* Text opacity levels */
    --text-color-10: rgba(237, 239, 241, 0.10);
    --text-color-25: rgba(237, 239, 241, 0.25);
    --text-color-50: rgba(237, 239, 241, 0.50);
    --text-color-75: rgba(237, 239, 241, 0.75);

    /* Stock indicators — bright to stand out against muted base */
    --stockHigh-color: #22b3f1;
    --stockMedium-color: #2ad574;
    --stockLow-color: #f6bb26;
    --stockCritical-color: #f63453;

    /* Glow markers */
    --glowLow-reorder-marker: #ffa502;
    --glowHigh-reoder-marker: #ffd36a;
    --glowHigh-critical-marker: #ff6b6b;
    --glowLow-critical-marker: #e74c3c;

    /* Gradients */
    --gradient: linear-gradient(to right, transparent 20%, var(--primary-color) 80%);
    --gradientReverse: linear-gradient(to left, transparent 20%, var(--primary-color) 80%);

    --gradientSecondary: linear-gradient(to right, transparent 20%, var(--secondary-color) 80%);
    --gradientSecondaryReverse: linear-gradient(to left, transparent 20%, var(--secondary-color) 80%);

    /* Custom cursors */
    --cursor: url("../cursor/cursor.svg") 8 8, default;
    --pointer: url("../cursor/pointer.svg") 8 8, pointer;
    --text: url("../cursor/text.svg") 8 8, text;
    --cursorInfo: url("../cursor/cursorInfo.svg") 4 4, help;
    --pencil: url("../cursor/pencil-w.svg") -4 64, default;
    --eraser: url("../cursor/eraser-w.svg") -4 64, default;
    --grab: url("../cursor/grab-w.svg") 4 4, grab;
    --grabbing: url("../cursor/grabbing-w.svg") 4 4, grabbing;
}


body {
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    color: var(--primary-color);
    background-color: var(--background-color);
    transition:  background-color 0.3s;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: var(--cursor)
}


h2 {
    margin: 0;
}

#patientRecordPage {
    display: none;
}

label {
    cursor: var(--cursor);
}

span {
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s , opacity 0.3s;
}

::placeholder {
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s;
}

svg {
    fill: var(--text-secondary-color);
}



.overflowYScroll {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: visible;
}
.overflowXScroll {
    overflow-x: scroll;
}


.main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    padding: 20px;
    box-sizing: border-box;
    transition: opacity 0.5s;
}

.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

::-webkit-scrollbar {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    visibility: hidden;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-thumb {
    visibility: hidden;
    width: 0;
    height: 0;
}

input , textarea {
    cursor: var(--text);
}

input[type='checkbox']{
    cursor: var(--pointer);
    width: fit-content !important;
}

select {
    cursor: var(--cursor);
}

input , select{
    width: 200px;
    height: fit-content;
    border: none;
    outline: none;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    color: var(--foreground-color);
    background-color: transparent;
    font-family: ibm-mono , sans-serif;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , border 0.3s;
}

textarea {
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 2px;
    transition: color 0.3s, background-color 0.3s , border 0.3s;
}

input , textarea , select {
    border: 1px solid transparent;
}


button {
    border: none;
    outline: none;
    background-color: transparent;
    cursor: var(--pointer);
    font-family: ibm-mono , sans-serif;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

p {
    margin: 0;
    padding: 0;
}

ul {
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

input::placeholder  , textarea::placeholder{
    color: var(--hover-color);
}

.ibm-mono{
    font-family: ibm-mono , sans-serif;
    color: var(--foreground-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

.ibm-bold {
    font-family: ibm-bold , sans-serif;
    color: var(--foreground-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}
.ibm-microcopy {
    margin-top: 5px;
    font-family: ibm-medium , sans-serif;
    font-size: 12px;
    color: var(--hover-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

.main-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    opacity: 0;
    animation: fade 0.5s 0.5s forwards;
}

#loginLoadingDna {
    position: relative;
    height: 100%;
    width: 100%;
}

.logo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo-info{
    height: 150px;
    width: 150px;
    margin: 20px 0;
    fill: var(--text-secondary-color);
}

.logo {
    height: 150px;
    width: 150px;
    margin: 20px 0;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

.logo path {
    fill: var(--logo);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

.generic-container.top-right {
    position: absolute;
    top: 20px;
    right: 20px;
    animation: fade 0.5s 0.7s forwards;
    opacity: 0;
    z-index: 2;
}
.generic-container.top-right .portal-generic-button {
    margin: 0;
}


.square {
    display: flex;
    height: 15px;
    width: 15px;
    background-color: var(--hover-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , transform 0.3s;
}

.login-input-container {
    display: flex;
    flex-direction: column;
    margin: 40px 0;
}

.login-input-container input {
    margin: 20px 0;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
    border-bottom: solid 3px var(--primary-color);
}


/* HOME PAGE */

.dashboard-user-container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 300px) 1fr minmax(0, 300px);
    align-items: center;
    flex-direction: row;
    color: var(--text-color);
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
    border-radius: 2px;
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s , color 0.3s , filter 0.3s , transform 0.3s;
    min-width: 450px;
    margin-bottom: 10px;
    width: 100%;
    cursor: var(--cursor)
}



.dashboard-separator{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 90%;
}

.dashboard-generic-btn-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: right;
}

.dashboard-generic-btn-container {
    display: flex;
    flex-direction: row;
    border-radius: 2px;
    color: var(--text-color);
    height: fit-content;
    width: fit-content;
    padding: 10px;
    margin-left: 10px;
    box-sizing: border-box;
    min-width: 20px;
    transition: background-color 0.3s , color 0.3s , filter 0.3s , transform 0.3s;
    cursor: var(--cursor)
}



.dashboard-user-information {
    display: flex;
    flex-direction: row;
    width: fit-content;

}

.dashboard-user-name {
    font-weight: bold;
    font-size: 16px;
}

.dashboard-location-container {
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.dashboard-location-select {
    background-color: var(--quadrary-color);
    width: fit-content;
    min-width: 120px;
    padding: 10px; box-sizing: border-box;
    color: var(--text-color);
    appearance: none;
    border: solid 1px var(--quadrary-color) ;
    transition: background-color 0.3s , color 0.3s , border 0.3s;
}

.dashboard-location-select:hover {
    background-color: var(--secondary-color);
    cursor: var(--pointer);
}

.dashboard-location-select:focus {
    border: solid 1px var(--quadrary-color) ;
    box-shadow: 0 0 0 1px var(--text-color);
    transition: background-color 0.3s , color 0.3s , border 0.3s;
}


.dashboard-user-information-text {
    position: relative;
    width: 100%;
    font-size: 14px;
}


.dashboard-user-role {
    margin-right: 20px;
    margin-left: 20px;
}

.dashboard-user-role svg {
    padding: 2px;
    box-sizing: border-box;
    max-height: 45px;
    max-width: 45px;
    height: 100%;
    width: 100%;
    fill: var(--text-color);
    transition: fill 0.3s;
}

.dashboard-filter-btn-container{
    position: relative;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    bottom: 15px;
    height: fit-content;
    z-index: 2;
}


.dashboard-filter-btn , .toggle-square-btn{
    margin-right: auto;
    margin-left: 15px;
    padding: 5px;
    border-radius: 2px;
    height: 100%;
    max-height: 30px;
    min-width: 30px;
    box-sizing: border-box;
    fill: var(--text-secondary-color);
    color: var(--text-secondary-color);
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s , opacity 0.3s;
    cursor: var(--pointer)
}

.toggle-square-btn {
    cursor: var(--pointer);
    background-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s , opacity 0.3s , filter 0.3s , transform 0.3s;
}

.toggle-square-btn svg {
    margin-left:  0 !important;
    justify-self: center !important;
    max-height: 30px;
    min-height: 15px;
    min-width: 30px;
}

.toggle-square-btn:hover {
    transform: translate(-2px , -2px);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
}

.toggle-square-btn.active {
    background-color: var(--text-color);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s , opacity 0.3s;
    transform: translate(-2px , -2px);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
}

.toggle-square-btn.active svg {
    fill: var(--primary-color);
}

.toggle-square-btn.active:hover svg {
    fill: var(--primary-color);
}

.dashboard-filter-btn:hover ,.toggle-square-btn:hover{
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.dashboard-filter-btn:hover svg ,.toggle-square-btn:hover svg{
    fill: var(--background-color);
}

.dashboard-filter-btn svg , .toggle-square-btn svg{
    transition: background-color 0.3s , fill 0.3s , color 0.3s , opacity 0.3s;
}

.dashboard-filter-btn:active , .toggle-square-btn:active{
    scale: 1.05;
}


.dashboard-information-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-height: 500px;
    height: 100%;
    min-width: 450px;
    box-sizing: border-box;
    width: 100%;
    color: var(--text-color);
    background-color: var(--hover-color);
    font-family: ibm-bold , sans-serif;
    border-radius: 2px;
    margin-bottom: 10px;
    transition: color 0.3s, background-color 0.3s;
}

.dashboard-information-bar {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    height: 20px;
    padding: 2px;
    box-sizing: border-box;
    width: 100%;
    min-width: 450px;
    margin-bottom: 20px;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
    background-color: var(--primary-color) ;
    color: var(--text-color);
    border-radius: 2px;
    transition: color 0.3s, background-color 0.3s;
}

.dashboard-information-container {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}


#dashboardNotificationBox , #dashboardChatBox {
    display: none;
}

.dashboard-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.dashboard-appointment-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: fit-content;
    max-height: 65px;
    margin: 20px 0;
    width: 100%;
}

.dashboard-notification-container svg{
    height: 100%;
    width: 100%;
    max-height: 30px;
    max-width: 30px;
    fill: var(--text-color);
    transition: fill 0.3s;
}

.dashboard-appointment-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 100%;
    width: auto;
    margin-left: 20px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: background-color 0.3s , color 0.3s , transform 0.3s , filter 0.3s;

}

.dashboard-appointment-info-container ,.dashboard-notification-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    height: fit-content;
    min-height: 30px;
    width: 100%;
    box-sizing: border-box;
    max-width: 80%;
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: background-color 0.3s , color 0.3s , transform 0.3s , filter 0.3s;
}

.dashboard-appointment-info-container:hover , .dashboard-notification-container:hover{
    background-color: var(--background-color);
    color: var(--primary-color);
    transform: translate(-2px , -2px);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    cursor: var(--pointer)}

.dashboard-notification-container:hover svg{
    fill: var(--primary-color);
}

.dashboard-appointment-info-container > div:not(:first-child) , .dashboard-notification-container  > div:not(:first-child)  {
    margin-left: auto;
}

.dashboard-information-bar-section-name {
    margin-left: 10px;
    color: var(--secondary-color);
}

.dashboard-notification-accept-container , .dashboard-notification-decline-container {
    padding: 10px;
    box-sizing: border-box;
    transition: color 0.3s ,background-color 0.3s,  filter 0.3s , transform 0.3s;
}
.dashboard-notification-accept-container:hover , .dashboard-notification-decline-container:hover {
    background-color: var(--primary-color);
    transform: translate(-2px , -2px);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.notification-circle-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 2px;
    right: 2px;
    z-index: 5;
}

.notification-inner-circle {
    position: absolute;
    border-radius: 50%;
    height: 6px;
    width: 6px;
    background-color: var(--text-secondary-color);
    z-index: 2;
    animation: pulse 1s forwards infinite ;
}

.notification-circle {
    position: absolute;
    border: 1px solid var(--text-secondary-color);
    border-radius: 50%;
    height: 12px;
    width: 12px;
    z-index: 2;
}

#chatFilterNew ,
#notificationFilterNew ,
#calendarFilterNew ,
#calendarDayView{
    display: none;
}


.chat-box-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-height: 100%;
    overflow-y: scroll;
    margin: 5px 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--hover-color);
}

.chat-message-bar , .ticket-chat-message-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    height: 50px;
    width: 100%;
}

.chat-message-bar input , .ticket-chat-message-bar input {
    height: 40px;
    background-color: var(--secondary-color);
    color: var(--text-secondary-color);
    width: 30%;
    border: none;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
}

.chat-box-sendMessage-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    margin: 0 10px;
    background-color: var(--secondary-color);
    transition: transform 0.3s , scale 0.3s , background-color 0.3s , color 0.3s;
}

.chat-box-sendMessage-btn:hover {
    cursor: var(--pointer);
    background-color: var(--primary-color);
}

.chat-box-sendMessage-btn:hover svg {
    fill: var(--text-secondary-color)
}

.chat-box-sendMessage-btn:active {
    scale: 1.1;
}

.chat-box-sendMessage-btn svg {
    height: 25px;
    width: 25px;
    fill: var(--primary-color);
    transition: fill 0.3s;
}

.chat-recipient-container {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 300px;
    border-radius: 2px;
    margin: 0 auto 10px 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
    animation: fade-left 0.3s forwards;
}

.chat-sender-container {
    display: flex;
    flex-direction: column;
    height: fit-content;
    border-radius: 2px;
    width: 300px;
    margin: 0 0 10px auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    animation: fade-right 0.3s forwards;
}

.chat-message {
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.chat-recipient-container .chat-user-info , .chat-recipient-container .chat-message {
    margin-right: auto;
}

.chat-sender-container .chat-user-info ,.chat-sender-container .chat-message {
    margin-right: auto;
}

.chat-user-info {
    font-size: 14px;
    opacity: 0.5;
}

/* HOME PAGE */



/* MEDICAL RECORD */

.medical-record , .patient-record , .calendar-section , .account-settings-page , .medicine-section , .telemedicine-section, .location-management-page , .inventory-page , .support-board-page , .patient-information {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    background-color: var(--hover-color);
    max-height: calc(100vh - 155px);
    height: 100%;
    width: 100%;
    border-radius: 2px;
    transition: color 0.3s, background-color 0.3s;
}


.medical-record-list-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 2px;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    backdrop-filter: drop-shadow(2px 2px 2px black);
    background-color: var(--primary-color);
    transition: background-color 0.3s;
}

.medical-record-list-container .generic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    border-radius: 2px;
    background-color: var(--secondary-color)
}

.medical-record-list-container svg {
    margin-left: 10px;
}


.medical-record-header {
    position: sticky;
    display: grid;
    top: 0;
    z-index: 10;
    grid-template-columns: repeat(6, 1fr);
    text-align: left;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    background-color: var(--primary-color);
    font-weight: bold;
}

.medical-record-patient-container {
    display: flex;
    text-align: left;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s;
    cursor: var(--pointer);
}

.medical-record-patient-container:hover {
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}
.medical-record-patient-container:hover select {
    background-color: var(--primary-color);
}
.medical-record-patient-container select {
    text-align: left;
}

.medical-record-patient-container-data {
    display: grid;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    grid-template-columns: repeat(6, 1fr);
}


.medical-record input , .medical-record select ,
.outstanding-task-box select ,
.detail-information-header select, .outstanding-task-box  input , .outstanding-task-box  textarea ,
.quickSupport-container select , .quickSupport-container input , .quickSupport-container textarea,
.support-board-page select , .support-board-page input ,
.location-management-page select , .location-management-page input ,
.inventory-page select , .inventory-page input ,
.create-newUser-box input , .create-newUser-box select ,
.create-invoice-box input , .create-invoice-box select ,
.send-invite-box input , .send-invite-box select ,
.medicine-section input , .medicine-section select ,
.patient-information input , .patient-information select ,
.account-settings-page input , .account-settings-page select{
    max-width: 200px;
    width: 100%;
    /*margin-right: auto;*/
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 2px;
    transition: color 0.3s, background-color 0.3s;
}

.medical-record input::placeholder ,
.outstanding-task-box  input::placeholder ,
.outstanding-task-box  textarea::placeholder ,
.quick-box  input::placeholder ,
.medicine-section input::placeholder{
    color: var(--primary-color);
    transition: color 0.3s;
}

.medical-record-list-container {
    position: sticky;
    top: 0;
    z-index: 100;
}

.medical-record-table{
    height: 100%;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: auto;
}

.medical-record-table-container {
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}


.medical-record-table thead th {
    position: sticky;
    height: 20px;
    top: 0;
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    z-index: 1;
}

.medical-record-table th {
    color: var(--foreground-color);
    padding: 10px;
    text-align: left;
    transition:  color 0.3s;

}

.medical-record-table td {
    text-align: left;
    transition:  color 0.3s;
    padding: 20px 10px;
}

.medical-record-table tbody tr {
    border: solid 2px transparent;
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    transition:  background-color 0.3s , border 0.3s , filter 0.3s;
}

.medical-record-table tbody tr:hover {
    border: solid 2px var(--text-secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    background-color: var(--hover-color);
    cursor: var(--pointer)
}


.medical-record-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}


.medical-record-list ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.medical-record-list li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    font-size: 14px;
    border: solid 2px transparent;
    transition: background-color 0.3s , border 0.3s;
}

.medical-record-list li:hover {
    border: solid 2px var(--text-secondary-color);
    background-color: var(--hover-color);
    cursor: var(--pointer);
}

.generic-add-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    box-sizing: border-box;
    padding: 5px;
    font-size: 12px;
    transition: background-color 0.3s , fill 0.3s , color 0.3s , border 0.3s;
}

.generic-add-button svg {
    max-height: 50px;
    max-width: 50px;
    margin-right: 5px;
    transition: scale 0.2s;
    filter: drop-shadow(0 0 0 )!important;
}

.generic-add-button:hover {
    background-color: var(--hover-color);
    cursor: var(--pointer);
}

.generic-add-button div {
    font-family: ibm-medium , sans-serif;

}

.generic-add-button:active > svg {
    scale: 1.1;
}

.send-invite-title {
    margin: 20px;
    font-size: 20px;
    font-family: ibm-text , sans-serif;
    border-bottom: solid 3px var(--text-secondary-color);
    color: var(--text-secondary-color);
}

.new-patient-registration-box , .send-invite-box , .invitation-box{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    height: 80vh;
    min-width: 550px;
    max-height: 650px;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s;
}

.new-patient-input-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 5px;
    column-gap: 30px;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: scroll;
}


@media (max-width: 768px) {
    .new-patient-input-list  {
        grid-template-columns: 1fr;
    }
}

#newPatientInformation ,  #newPatientAddress , #newUserInformation , #newUserAddress{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

}

#newPatientInformation .generic-container , #newPatientAddress .generic-container{
    display: flex;
    justify-content: center;
    margin: auto 0 20px 0;
}


.new-patient-input-list li {
    display: flex;
    align-items: start;
    justify-self: center;
    flex-direction: column;
    margin: 5px 0;
    width: 200px;
}

.new-patient-input-list li input , .new-patient-input-list li select{
    color: #fff;
    background-color: var(--secondary-color);
}

#stateContainer {
    display: none;
}
/* MEDICAL RECORD */

/* PATIENT RECORD */
.patient-record , .patient-information  {
    position: relative;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 20px;
}

.patient-record .generic-overflow-button-container , .patient-information .generic-overflow-button-container {
    position: absolute;
    top: -15px;
    left: 0;
    z-index: 2;
}

.patient-record .generic-overflow-button , .calendar-section .generic-overflow-button {
    position: relative;
}

.generic-overflow-button-container .generic-button , .generic-overflow-button-container .generic-text-display{
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    height: 28px;
}

.patient-record .generic-overflow-button:hover  {
    transform: translate(-2px , -2px);
    background-color: var(--text-secondary-color);
}

.patient-record .generic-overflow-button svg {
    fill: var(--text-secondary-color) !important;
    opacity: 1 !important;
}
.patient-record .generic-overflow-button:hover svg {
    fill: var(--primary-color) !important;
    opacity: 1 !important;
}

.patient-general-info-ul-wrapper{
    position: relative;
    overflow-x: visible;
    white-space: nowrap;
}

.patient-general-info-ul-container {
    position: relative;
    overflow-x: hidden;
    white-space: nowrap;
    border-radius: 2px;
    -webkit-backdrop-filter: var(--dropShadowLight);
    filter: var(--dropShadowLight);
    scroll-behavior: smooth;
}

.vertical-gradient {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 30px;
    height: 100%;
    width: 30px;
    background: var(--gradientSecondary);
}

.vertical-gradient-reverse {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30px;
    background: var(--gradientSecondaryReverse);
    z-index: 2;
}

.vertical-gradient svg , .vertical-gradient-reverse svg{
    width: 8px;
    height: fit-content;
    fill: var(--hover-color);
    transition: fill 0.3s , scale 0.2s;
}

.vertical-gradient:hover , .vertical-gradient-reverse:hover {
    cursor: var(--pointer);
}

.vertical-gradient:hover svg , .vertical-gradient-reverse:hover svg{
    fill: var(--primary-color);
}

.vertical-gradient:active svg , .vertical-gradient-reverse:active svg{
    scale: 1.1;
}


.vertical-button {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    background-color: var(--primary-color);
    transition: background-color 0.3s;
}

.vertical-button:hover {
    background-color: var(--background-color);
    cursor: var(--pointer);
}


.vertical-button:active svg {
    scale: 1.1;
}

.vertical-button svg {
    min-width: 4px;
    width: 8px;
    height: fit-content;
    fill: var(--text-secondary-color);
    transition: fill 0.3s , scale 0.2s;
}

.vertical-button:hover svg {
    fill: var(--primary-color);
}

.patient-general-info-container {
    display: flex;
    background-color: var(--secondary-color);
    flex-direction: row;
    padding: 10px;
    border-radius: 2px;
    max-height: 60px;
    width: 100%;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.50));
    filter:  drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.50));
    overflow-x: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;

}


.patient-general-info-container li:first-child {
    margin: 0 40px;
}

.patient-general-info-container li vertical-dot-line{
    margin: 0 40px;
}

.patient-general-info-container li:last-child {
    margin-right: 80px;
}

.patient-general-info-container li {
    align-items: center;
}

.patient-inner-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px 0;
}

.patient-inner-container svg {
    margin-right:  10px
}

.patient-record-container {
    position: relative;
    border-radius: 2px;
    margin-top: 20px;
    padding: 10px;
    min-height: 200px;
    max-height: 300px;
    background-color: var(--secondary-color);
    -webkit-filter:  var(--dropShadowLight);
    filter:  var(--dropShadowLight);
    transition: max-height 0.5s, min-height 0.5s;
}

.patient-record-table{
    min-height: 100px;
    max-height: 200px;
    overflow-y: scroll;
    transition: opacity 0.3s;
}
.patient-record-table thead {
    position: sticky;
    background-color: var(--secondary-color);
    top: 0;
}

.patient-record-container svg  {
    height: 15px;
    width: auto;
    fill: var(--text-secondary-color);
    cursor: var(--pointer);
    transition: fill 0.3s , opacity 0.3s;
}


.patient-record-container svg:hover{
    opacity: 0.8;
}

.patient-record-container table {
    border-collapse: collapse;
    transition:  opacity 0.2s;

}

.patient-record-container tbody tr {
    transition: background-color 0.3s;
}

.patient-record-container tbody tr:hover {
    background-color: var(--hover-color);
}
.patient-record-container table th , .patient-record-container table td {
    padding: 0 20px;
}

.patient-record-container thead {
    text-align: left;
    color: var(--hover-color);
}

.patient-text-container {
    display: flex;
    flex-direction: row;
}

.patient-record-info-box-wrapper {
    display: grid;
    flex-direction: row;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 20px;
    flex-wrap: wrap;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.patient-record-info-box {
    position: relative;
    border-radius: 2px;
    max-width: calc(100% - 20px); /* Accounts for the last gap */
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    background-color: var(--secondary-color);
    -webkit-filter: var(--dropShadowLight);
    filter: var(--dropShadowLight);
}

.patient-record-info-box:last-child {
    margin-right: 0;
}
.patient-record-info-box .text-heavy {
    margin-right: 10px;
}

.patient-record-info-box button {
    margin-left: auto;
}

.back-button {
    position: absolute;
    z-index: 100;
    top: -15px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 100px;
    border: 1px solid var(--background-color);
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    box-sizing: border-box;
    padding: 10px;
    margin: auto 20px 20px 20px;
    cursor: var(--pointer);
    opacity: 1;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s;
}

.patient-record-description-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    min-width: 160px;
    max-width: 20%;
    box-sizing: border-box;
    border-radius: 4px;
}

.patient-record-info-wrapper {
    width: 100%;
    max-width: 80%;
    height: 100%;
    flex: 1;
    background-color: var(--hover-color);
    overflow-y: scroll;
    min-height: 0;
    margin-right: 20px;
    border-radius: 2px;
    padding: 10px;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.patient-record-info-inner-wrapper {
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
    padding: 1px;
    box-sizing: border-box;
}


.horizontal-gradient {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom,  transparent 10%, var(--primary-color) 90%);
    z-index: 5;
}

.horizontal-padded-bar {
    position: sticky;
    bottom: -10px;
    width: 100%;
    height: 20px;
    background-color: transparent;
    z-index: 5;
    isolation: isolate; /* KEY */
}
.horizontal-padded-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #2d2f34; /* or any solid fallback */
    z-index: -1;
}

.horizontal-gradient-top {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to top,  transparent 10%, var(--primary-color) 90%);
    z-index: 5;
}


.patient-record-notes-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--hover-color);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 2px;
    transition: background-color 0.3s;
}


.patient-record-notes-wrapper ul {
    overflow-y: scroll;
    min-height: 0;
    height: 100%;

}


.patient-record-notes-container {
    display: flex;
    flex-direction: row;
}

.patient-record-notes-title-box {
    position: relative;
    text-align: center;
    width: fit-content;
    min-width: 100px;
    height: 100%;
    max-height: 30px;
    box-sizing: border-box;
    color: var(--text-secondary-color);
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    font-family: ibm-mono , sans-serif;
    bottom: 35px;
    left: 10px;
    padding: 5px;
    border-radius: 2px;
    font-size: 16px;
    transition: color 0.3s, background-color 0.3s;
}


.patient-record-add-note {
    position: relative;
    bottom: 35px;
    margin-left: auto !important;
    padding: 5px;
    border-radius: 2px;
    height: 100%;
    max-height: 30px;
    min-width: 30px;
    width: 30px;
    box-sizing: border-box;
    fill: var(--text-secondary-color);
    color: var(--text-secondary-color);
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s;
    cursor: var(--pointer);
}


.patient-record-notes-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    max-height: 80px;
    margin-bottom: 20px;
    overflow-y: hidden;
    padding: 5px;
    box-sizing: border-box;
    transition: background-color 0.3s , 0.3s;
    cursor: var(--cursorInfo);
}

.patient-record-notes-box:hover {
    background-color: var(--primary-color);
}

.patient-record-notes-box:hover .trash-icon-svg {
    opacity: 0.5;
}


.patient-record-notes-box-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-wrap: break-word;
    overflow-x: hidden;
    margin-right: auto;
}


.patient-record-notes-date {
    font-size: 10px;
    opacity: 0.6;
    margin-right: auto;
}
.patient-record-notes-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 10px;
    opacity: 0.6;
    text-align: right;
    margin-left: 20px;
}

.data-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.data-metric span {
    color: var(--text-secondary-color);
    font-size: 95%;
    opacity: 0.6;
}

.data-metric div:hover {
    cursor: var(--pointer);
    background-color: var(--primary-color);
}
.data-metric input , .data-metric select{
    padding: 0;
    background-color: var(--hover-color);
    color: var(--text-secondary-color);
}
.data-metric select {
    width: fit-content;
}

.data-metric div {
    margin-right: 5px;
    padding: 2px;
    border-radius: 2px;
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.patient-specific-info-wrapper{
    max-height: 250px;
    overflow-y: scroll;
}

.patient-specific-info-wrapper svg {
    height: 15px;
    width: auto;
    margin-left: 10px;
    fill: var(--text-secondary-color);
    cursor: var(--pointer);
    transition: fill 0.3s , opacity 0.3s;
}


.patient-specific-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin: 10px 0;
    border-radius: 2px;
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.patient-specific-info-container:hover {
    background-color: var(--hover-color);
    cursor: var(--pointer);
}

.patient-specific-info {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.patient-specific-info-status {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    height: fit-content;
    min-width: 70px;
    padding: 5px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    margin-left: auto;
    font-size: 12px;
}
.patient-info {
    display: flex;
    flex-direction: row;
    opacity: 1;
    max-width: 300px;
    width: fit-content;
    box-sizing: border-box;
    transition: max-width 0.5s, opacity 0.5s, transform 0.5s;
}




.physicalCharacteristic-box {
    display: flex;
    flex-direction: row;
    opacity: 1;
    max-width: 300px;
    width: fit-content;
    box-sizing: border-box;
    transition: max-width 0.5s ease-out, opacity 0.5s, transform 0.5s ease-out;
}

.physicalCharacteristic-box.hide{
    transform: translateX(-10px);
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.physicalCharacteristic-container {
    display: flex;
    flex-direction: column;
}

.physical-characteristics-box-toggles {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    max-height: 650px;
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s;
}

.physical-characteristics-box-toggles-container {
    position: relative;
    background-color: var(--primary-color);
    min-width: 400px;
}

.physical-characteristics-box-toggles ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    max-height: 500px;
    max-width: 800px;
    width: 100%;
    overflow-y: scroll;
}

.physical-characteristics-box-toggles input {
    text-align: left;
    width: fit-content;
    cursor: var(--pointer);
}

.physical-characteristics-box-toggles li {
    min-width: 100px;
    margin: 10px 0;
    padding: 10px;
    transition: background-color 0.3s  , color 0.3s , opacity 0.3s;
}

.physical-characteristics-box-toggles li label {
    cursor: var(--pointer);
}

.physical-characteristics-box-toggles li:hover {
    background-color: var(--secondary-color);
}

/* PATIENT RECORD */

/* OUTSTANDING TASK BOX */

.outstanding-task-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    height: 80vh;
    width: 80vw;
    max-width: 550px;
    max-height: 660px;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s;
}

.creation-box-title {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: ibm-text , sans-serif;
    flex-shrink: 0;
    text-align: center;
    height: fit-content;
    width: fit-content;
    white-space: nowrap;
    padding: 5px 10px;
    box-sizing: border-box;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: background-color 0.3s , opacity 0.3s , color 0.3s;
}

.outstanding-task-box-input-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-direction: column;
    justify-content: left;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 20px;
    width: 100%;
    margin-bottom: 20px;
    overflow-y: scroll;

}

@media (max-width: 768px) {
    .outstanding-task-box-input-list  {
        grid-template-columns: 1fr;
    }
}


.outstanding-task-box-input-list li {
    display: flex;
    align-self: center;
    justify-self: center;
    align-items: start;
    flex-direction: column;
    margin: 5px 0;
    width: 100%;
    max-width: 200px;
}

.outstanding-task-box-input-list label ,.outstanding-task-box-input-list optional-tag {
    margin: 10px 0;
}
.outstanding-task-box-input-list label {
    padding-right: 10px;
}


.outstanding-task-box-input-list textarea {
    min-height: 70px;
    margin-bottom: 20px;
    padding: 0;
}

.outstanding-task-box .generic-button-2 {
    margin-top: auto;
}

/* OUTSTANDING TASK BOX */



/* DETAIL INFORMATION BOX */
.detail-information-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 500px;
    max-width: 450px;
    height: 100%;
    width: 100%;
    padding: 20px;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s;
}

.detail-information-header {
    display: flex;
    flex-direction: row;
}

.detail-information-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.detail-information-container textarea{
    max-height: 450px;
    max-width: 450px;
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

#detailAllergy ,
#detailMedication ,
#detailProblem ,
#updateAllergyButton ,
#updateMedicalProblemButton ,
#updateMedicationButton ,
#newPatientAddress ,
#newUserAddress ,
#patientVitalLungs,
#patientVitalTemperature ,
#createAppointmentBox ,
#quickCreateAppointmentBox ,
#quickEditAppointmentBox{
    display: none;
}

/* DETAIL INFORMATION BOX */

/* NAVIGATION BAR */
#navigationPage,
#patientRecord ,
#locationManagementPage,
#accountSettingsPage ,
#resourcesPage,
#medicalRecordSection  ,
#patientListSection ,
#medicineSection,
#calendarSection ,
#billingSection ,
#patientInformationSection ,
#operationsPage ,
#supportBoardPage,
#ticketSectionDetail,
#appLayoutPage
{
    display: none;
}

.navigation-top-bar {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 75px;
    margin-bottom: auto;
    color: var(--text-color);
    background-color: var(--primary-color);
    border-radius: 2px;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    backdrop-filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s;
    z-index: 2;
}

.navigation-top-bar ul , .navigation-top-bar li  {
    display: flex;
    flex-direction: row;
}

.navigation-nav-list {
    overflow-x: scroll;
    width: 100%;
}

.navigation-right-nav-list li{
    margin: 0 10px;
}

.navigation-nav-list li {
    justify-content: center;
    align-items: center;
    margin: 0 20px;
    padding: 10px;
    transition: background-color 0.3s , color 0.3s , opacity 0.3s;
    border-radius: 2px;
}

.navigation-nav-list li:hover {
    background-color: var(--secondary-color);
    cursor: var(--pointer);
}

.navigation-logo-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 150px;
    width: fit-content;
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
}

.navigation-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
    margin: 0 10px;
    width: fit-content;
    box-sizing: border-box;
}

.navigation-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 45px;
    max-width: 45px;
    height:100%;
    width:100%;
    fill: var(--text-color);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s , transform 0.3s , filter 0.3s;
}

.navigation-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height:25px;
    width: 25px;
    fill: var(--text-color);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.3s , transform 0.3s , filter 0.3s;
}

.navigation-icon-only {
    display: flex;
    justify-content: center;
    align-items: center;
    height:25px;
    width: 25px;
    opacity: 0.5;
    fill: var(--text-color);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.3s , transform 0.3s , filter 0.3s;
}

.navigation-icon-only:hover {
    opacity: 1;
    cursor: var(--pointer);
}

.navigation-icon-only:active {
    scale: 1.1;
}

.navigation-name-box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    max-width: 120px;
    max-height: 30px;
    height: 30px;
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    font-family: ibm-medium , sans-serif;
    top: 5px;
    padding: 5px;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 12px;
}

.navigation-name-container {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.navigation-name-container:hover ~ .navigation-user-info-card {
    display: flex;}

.navigation-user-info-card {
    display: none;
    position: absolute;
    flex-direction: column;
    border-radius: 2px;
    background-color: var(--secondary-color);
    height: fit-content;
    width: fit-content;
    padding: 5px;
    box-sizing: border-box;
    min-width: 100px;
    left: 110%;
    animation: fade 0.3s forwards;
}

/* NAVIGATION BAR */

/* ACCOUNT MANAGEMENT */

.account-settings-page {
    display: flex;
    flex-direction: row;
    max-height: 100%;
    box-sizing: border-box;
}

.account-settings-box-header {
    position: absolute;
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    border-radius: 2px;
    min-height: 75px;
    min-width: 50px;
    top: -15px;
    right: -10px;
}

.account-settings-box-header-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    width: 200px;
}

.account-settings-box-header-container svg {
    position: absolute;
    fill: var(--text-color);
    margin-top: 10px;
    max-height: 50px;
    max-width: 50px;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.account-settings-box-header-title{
    position: relative;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-color);
    border-radius: 2px;
    width: fit-content;
    height: fit-content;
    padding: 5px;
    box-sizing: border-box;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.account-side-bar-title ,
.location-side-bar-title ,
.location-inventory-side-bar-title,
.support-board-side-bar-title{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid 1px var(--text-secondary-color);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-family: ibm-bold,sans-serif;
}

.location-inventory-side-bar-items {
    width: 100%;
}

.account-side-bar-items li , .location-inventory-side-bar-items li{
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s , color 0.3s , opacity 0.3s;
}

.account-side-bar-items li:hover , .location-inventory-side-bar-items li:hover{
    background-color: var(--secondary-color);
    cursor: var(--pointer);
}

.account-settings-page .generic-button {
    padding: 5px 5px;
}

.account-management-side-bar #accountSettingsSaveButton {
    margin: 20px 0;
    border: 1px solid white;
}

.account-settings-info-box .generic-container-column {
    margin: 10px 0;
}

#accountSettingAppointmentsRecurrenceDaysSection .day{
    display: flex;
    padding: 5px;
    margin: 3px;
    background-color: var(--secondary-color);
    border: 1px solid #ccc;
    opacity: 0.5;
    transition: background-color 0.3s , color 0.3s , border 0.3s , opacity 0.3s;
}

#accountSettingAppointmentsRecurrenceDaysSection .select-day {
    cursor: var(--pointer);
}

#accountSettingAppointmentsRecurrenceDaysSection .day.selected {
    background-color: var(--secondary-color);
    opacity: 1;
    color: white;
}

#accountSettingAppointmentsRecurrenceDaysSection {
    height: 100%;
    width: 100%;
}

#accountSettingAppointmentsRecurrenceDays {
    max-height: 100%;
    width: 100%;
    overflow-y: scroll;
}

#accountSettingAppointmentsRecurrenceDays .day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

#accountSettingAppointmentsRecurrenceDays .day label {
    max-width: 210px;
    width: 100%;
    margin: 0 5px;
}

#accountSettingAppointmentsRecurrenceDays .day .select-day {
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    background-color: var(--primary-color);
    transition: background-color 0.3s , opacity 0.3s;
 }

#accountSettingAppointmentsRecurrenceDays .day.selected .select-day {
    text-align: center;
    width: 100%;
    color: var(--text-color);
    background-color: var(--calendar-select)
}

#accountSettingAppointmentsRecurrenceDays .day.selected .select-day:hover , #accountSettingAppointmentsRecurrenceDays .day .select-day:hover {
opacity: 0.8;
}

.account-settings-page-container , .support-board-page-container{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    transition: color 0.3s, background-color 0.3s;
}

.availability-container {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*.auto-schedule-container {*/
/*    animation: fade-down 0.3s forwards;*/
/*}*/

/* ACCOUNT MANAGEMENT */

/* LOCATION MANAGEMENT */

.location-management-page {
    max-height: 100%;
    flex-direction: row;
    box-sizing: border-box;
}

.location-management-side-bar-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.location-management-side-bar-main svg {
    height: 25px;
    width: 25px;
}

.location-management-side-bar-main .generic-button-4{
    margin: 10px 0 0 0 ;
    padding: 10px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.section-title {
    font-family: ibm-bold, sans-serif;
    background-color: var(--primary-color);
    padding: 10px;
    box-sizing: border-box;
    width: fit-content;
    border-radius: 2px;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    backdrop-filter: drop-shadow(2px 2px 2px black);

}

.location-management-side-bar , .account-management-side-bar , .location-inventory-side-bar , .support-board-side-bar {
    display: flex;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    flex-direction: column;
    width: 20%;
    max-width: 200px;
    min-width: 150px;
    height: 100%;
    overflow-y: hidden;
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.location-management-main-container , .account-management-main-container ,.billing-main-container , .support-board-main-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
}



.location-management-header , .location-inventory-header , .billing-invoice-header , .analytics-inventory-header , .supportBoard-ticket-header{
    position: sticky;
    display: grid;
    top: 0;
    z-index: 10;
    grid-template-columns: repeat(6, 1fr);
    text-align: left;
    gap: 10px;
    padding: 10px;
    overflow-x: scroll;
    min-height: fit-content;
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    background-color: var(--primary-color);
    font-weight: bold;
}

.location-inventory-header {
    height: 100%;
    max-height: 30px;
    min-height: 30px;
    grid-template-columns: 50px repeat(8, 1fr);
}

.analytics-inventory-header {
    display: flex;
    flex-direction: row;
    min-height: 50px;
    height: fit-content;
    overflow-y: visible;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;
}

.analytics-inventory-header-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.analytics-inventory-header-info li{
    margin: auto 40px;
    width: fit-content;
    white-space: nowrap;
}

.analytics-inventory-header .vertical-gradient {
    background: var(--gradient);

}
.analytics-inventory-header .vertical-gradient-reverse {
    background: var(--gradientReverse);
}

.analytics-inventory-header .vertical-gradient svg , .analytics-inventory-header .vertical-gradient-reverse svg{
    width: 8px;
    height: fit-content;
    fill: var(--text-color-50);
    transition: fill 0.3s , scale 0.2s;
}

.analytics-inventory-header  .vertical-gradient:hover svg ,.analytics-inventory-header  .vertical-gradient-reverse:hover svg{
    fill: var(--text-color);
}

.location-inventory-main-container {
    display: flex;
    flex-direction: column;
    height: 100%;

}

.location-inventory-list-wrapper {
    display: flex;
    height: 100%;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    overflow: scroll;
}

.location-inventory-list-inner-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 10px 0;
    position: relative;
    flex-direction: column;
    background-color: var(--hover-color);

    box-sizing: border-box;
    overflow: visible;
}

.location-management-user-list-wrapper {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    margin: 10px 0;
    background-color: var(--hover-color);
    padding: 10px;
    box-sizing: border-box;
}

.location-management-user-container {
    display: grid;
    text-align: left;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s;
}

.location-management-user-container:hover {
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}
.location-management-user-container:hover select {
    background-color: var(--primary-color);
}
.location-management-user-container select {
    text-align: left;
}


.location-management-user-info-container div {
    margin-bottom: 5px;
}

.location-management-generic-container {
    display: flex;
    flex-direction: column;
}

.location-management-generic-container svg {
    max-height: 30px;
    max-width: 30px;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    fill: var(--tertiary-color);
    transition: fill 0.3s , opacity 0.3s , scale 0.3s;
}

.location-management-generic-container button:active svg {
    scale: 1.1;
}

.location-management-generic-container:hover svg {
    opacity: 1;
}

.location-management-generic-container label {
    font-weight: bold;
    margin-bottom: 5px;
}

.location-management-location-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    margin-top: auto;
    width: 100%;
    overflow-y: scroll;
}


.new-patient-registration-box:hover caution-tag ,  .send-invite-box:hover caution-tag {
    animation: flashing-red 1s alternate-reverse infinite;
}

.new-user-information ,.new-user-address {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.new-user-information button ,.new-user-address button {
    margin: 10px 0;
}

.new-user-information  label  ,.new-user-address label  {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    width: 100%;
}

.new-user-information  ul ,.new-user-address  ul{
    display: grid;
    flex-direction: column;
    margin: 0 auto;
    height: 100%;
    max-height: 500px;
}

.send-invite-box , .invitation-box {
    max-height: 600px;
}

.send-invite-box ul li , .invitation-box ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 10px 0;
}
.send-invite-box ul li label {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    width: 100%;
}

.invitation-box-form {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.invitation-box .generic-container {
    margin-top: auto;
}

.invitation-box .generic-container button {
    margin: 0 20px;
}

.permission-management-container , .email-settings-management-container {
    height: 20%;
}

.permission-matrix-grid,
.permission-matrix-grid-body .grid-row {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr 1fr;
    gap: 0.5rem;
}

.grid-row-container {
   width: 100%;
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transition: background-color 0.3s , filter 0.3s , transform 0.3s , color 0.3s;
}

.grid-row {
    padding: 5px 10px;
    box-sizing: border-box;
    align-items: center;
    transition: background-color 0.3s , filter 0.3s , transform 0.3s , color 0.3s;
}

.grid-row-container:hover {
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}

.permission-matrix-wrapper {
    display: flex;
    position: relative;
    flex-direction: column;
    max-height: 80%;
    height: 100%;
    margin-bottom: 10px;
    background-color: var(--hover-color);
    padding: 10px;
    box-sizing: border-box;
}

.permission-matrix-grid {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 5px 0;
    box-sizing: border-box;
}

.permission-matrix-grid-body {
    height: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    overflow-y: scroll;
}

.permission-matrix-actions {
    display: flex;
    height: fit-content;

    bottom: 0;
}

.permission-matrix-controls {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--hover-color);

}


/* PATIENT LIST */

.patient-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: auto;
    overflow-y: scroll;
}

.patient-selection-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.8;
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    max-height: 200px;
    max-width: 300px;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    color: var(--text-color-25);
    transition: background-color 0.3s , opacity 0.3s , color 0.3s , transform 0.3s , scale 0.3s , filter 0.3s;
}

.patient-selection-box:hover {
    color: var(--text-secondary-color);
    opacity: 1;
    filter: drop-shadow(2px 2px 2px black);
    cursor: var(--pointer);
    transform: translate(-5px , -5px);
}

.patient-selection-box:hover {
    fill: var(--text-secondary-color);

}

.patient-selection-box-title {
    margin-bottom: 10px;
}

.patient-selection-box-ID{
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 2px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background-color: var(--primary-color);
}

.patient-selection-box-container {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-color);
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.patient-selection-box-content {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;

}

.patient-selection-box-content span:first-child {
    margin-right: auto;
}

.patient-selection-box svg {
    height: 18px;
    width: 18px;
    fill: var(--text-secondary-color);
}

.patient-selection-box-footer {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: auto;
    width: 100%;
}

.patient-selection-box-footer span:first-child {
    margin-right: auto;
}


/* PATIENT LIST */


/* PATIENT INFORMATION */

.patient-general-information-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    margin-right: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.patient-info-box , .account-settings-info-box , .generic-info-box{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
    opacity: 1;
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    padding: 20px;
    margin: 15px 15px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: background-color 0.3s , opacity 0.3s , color 0.3s , transform 0.3s , scale 0.3s , filter 0.3s;
}

.patient-info-box ul , .account-settings-info-box ul , .generic-info-box ul{
    overflow-y: scroll;
}

.patient-info-box ul li , .account-settings-info-box ul li , .generic-info-box ul li{
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin: 20px 0;
}

.patient-info-box ul li label , .account-settings-info-box ul li label , .generic-info-box ul li label{
    margin-bottom: 5px;
}


.patient-info-tag , .account-settings-info-tag , .human-anatomy-info-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    height: fit-content;
    width: fit-content;
    white-space: nowrap;
    min-width: 200px;
    padding: 5px;
    box-sizing: border-box;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: background-color 0.3s , opacity 0.3s , color 0.3s;
}

/* PATIENT INFORMATION */




/* BILLING */

.create-invoice-box , .detail-invoice-box{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    max-width: 1100px;
    width: 100%;
    max-height: 650px;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s , max-width 0.3s;
}

.invoice-header-section {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.invoice-header-section  .generic-text-details {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    height: 100%;
    width: 100%;
}
.invoice-header-section .invoice-bill-section {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}
.invoice-details-section {
    display: flex;
    flex-direction: column;
}

.invoice-details-section label {
    font-size: 14px;
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.7);
}

.invoice-bill-section label {
    margin: 5px 0;
}

.invoice-details-section .generic-container div:first-child{
    margin: 0 20px;
}

.invoice-details-section .generic-container , .invoice-bill-section .generic-container-column {
    margin: 10px 0;
}
.invoice-bill-section .generic-container-column {
    margin: 10px 20px 20px 0;
}

.invoice-details-section input , .invoice-details-section select , .invoice-bill-section input , .invoice-bill-section select{
    min-width: 200px;
}

.invoice-footer-section {
    display: flex;
    margin-top: auto;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
}

.invoice-footer-section textarea {
    background-color: transparent;
    min-width: 300px;
    min-height: 50px;
    max-height: 50px;
    max-width: 100%;
    width: 100%;
}

.invoice-footer-section .generic-text-details {
    margin-right: 20px;
    width: 70%;
}

.invoice-items-section {
    max-height: 400px;
    overflow-y: scroll;
    width: 100%;
}

.revenue-category-select option {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.lines-container {
   display: flex;
    flex-direction: column;
}

.detail-lines-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: scroll;
}

.invoice-row-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border: solid 1px transparent;
    box-sizing: border-box;
    height: 100%;
    transition: border 0.3s , box-shadow 0.3s , height 0.3s;
}

.invoice-row-wrapper .number-column {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(255, 255, 255, 0.10);
    width: 50px;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.invoice-row-wrapper:hover {
    border-right: solid 1px #0061c9;
    box-shadow:inset 2px 0 0 1px #0061c9;
}

.invoice-content-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Ensures the content container takes up the rest of the space */
    align-items: stretch;
    height: auto;
}

.invoice-container {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

.invoice-row-header , .detail-invoice-row-header {
    position: sticky;
    top: 0;
    border: solid 1px transparent;
    background-color: var(--quadrary-color);
}

.invoice-row , .invoice-row-header , .detail-invoice-row-header {
    display: grid;
    grid-template-columns: 50px  150px 150px 150px 150px 150px auto;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.detail-invoice-row-header ,.detail-lines-container .invoice-row{
    grid-template-columns: 50px  auto 150px 150px 150px 150px 150px ;
}

.invoice-row {
    width: 100%;
    transition: background-color 0.3s;
}

.invoice-row:hover{
    background-color: var(--quadrary-color) !important;
}

.invoice-row div:hover{
    color: var(--calendar-select) !important;
}

.invoice-inner-row {
    display: grid;
    grid-template-columns:150px 150px 150px 150px 150px auto;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.invoice-row select , .invoice-row input , .invoice-inner-row select , .invoice-inner-row input{
    border-radius: 0;
    margin: 0;
    background-color: transparent;
}
.invoice-row:hover {
    border-color: #007bff;
}

.invoice-row div ,  .invoice-row-header div , .detail-invoice-row-header div, .invoice-inner-row div{
    padding: 5px;
    box-sizing: border-box;
    border-collapse: collapse;
    text-align: center;
    height: 100%;
    border: solid 1px rgba(255, 255, 255, 0.10);
}

.invoice-row div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    min-height: 50px;
    transition: color 0.3s , background-color 0.3s;
}

.active-edit {
    background-color: var(--warning);
}
.invoice-edit-input {
    width: 100%;
    background-color: var(--secondary-color)!important;
    color: var(--text);
}


.details-row {
    max-height: 0;
    background: var(--underlay02);
    border: solid 1px rgba(255, 255, 255, 0.10);
    border-top: none;
    border-bottom: none;
    padding: 0;
    opacity: 0;
    box-sizing: border-box;

    pointer-events: none;
}

.expand {
    transition: opacity 0.3s, max-height 0.3s ease-in-out, padding 0.3s;
    transition-delay: 0.3s, 0s, 0s;
}

.collapse {
    transition: opacity 0.3s, max-height 0.3s ease-in-out, padding 0.3s;
    transition-delay: 0s, 0s, 0s;
}

.details-row.visible {
    display: flex;
    opacity: 1;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    max-height: 100px;
    pointer-events: visible;
    z-index: 100;
}
.details-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.details-container label {
    display: flex;
    flex-direction: column;
    font-size: 14px;

}
.details-container input {
    padding: 5px;
    border: solid 1px rgba(255, 255, 255, 0.10);
}

.action-cell {
    display: flex;
    flex-direction: row;
}

.action-cell svg {
    height: 20px;
    width: 20px;
}

.action-cell .expand-button , .action-cell .remove-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-cell .expand-button  {
    width: 80%;
}
.action-cell  .remove-button {

    width: 20%;
}

.expand-button {
    cursor: var(--pointer);
    transition: background-color 0.3s;
}

.expand-button.open {
    background-color: var(--text-color);
}

.expand-button.open svg {
    fill: var(--primary-color);
}

.expand-button svg {
    fill: var(--text-color);
}

.expand-button:hover {
    background-color: var(--text-color-25);
}

.expand-button.open:hover {
    background-color: var(--text-color-75);
}

.expand-button:hover svg {
    fill: var(--primary-color);
}

.remove-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: var(--pointer);
    transition: background-color 0.3s;
    height: 100%;
}

.remove-button svg {
    fill: #ff4d4d;
    max-height: 20px;
    max-width: 20px;
}

.remove-button:hover {
    background-color: #ff4d4d;
}

.remove-button:hover svg {
    fill: var(--text-color);
}

.expand-button svg , .remove-button svg{
    transition: fill 0.3s , scale 0.3s;
}

.expand-button:active svg , .remove-button:active svg  {
    scale: 1.1;
}
#new-line-button {
    background-color: #007bff;
    color: #fff;
    cursor: var(--pointer);
    transition: background-color 0.3s , scale 0.3s;
}
#new-line-button:hover {
    background-color: #0056b3;
}
#new-line-button:active {
    scale: 1.05;
}

.create-invoice-box .generic-button-2 {
    margin-top: 20px;
}

.invoice-total-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: var(--underlay02);
    padding: 10px;
    width: 30%;
    box-sizing: border-box;

}

.invoice-total-container div div:first-child {
    margin-right: auto;
}

.create-invoice-box horizontal-dot-line {
    opacity: 0.2;
}

.invoice-status {
    display: flex;
    width: fit-content;
    padding: 5px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    background-color: var(--primary-color);
}

.invoice-status.paid {
    background-color: #67d77f;
}

.invoice-status.pending {
    background-color: #ffb454;
}

.invoice-status.overdue {
    background-color:  #ff4c7b;
}


.detail-invoice-box .generic-container{
    width: 100%;
}


.detail-invoice-box .generic-svg {
    background-color: var(--underlay02);
    padding: 5px;
    margin-left: auto;
    box-sizing: border-box;
}
.detail-invoice-box .generic-svg:hover svg{
    fill: var(--text-color);
    cursor: var(--pointer);
}

.detail-invoice-box .generic-svg:active svg{
  scale: 1.05;
}


.detail-invoice-box .generic-svg svg {
    fill: var(--secondary-color);
    transition: fill 0.3s , scale 0.3s;
}

.detail-invoice-box .invoice-container {
    margin-top: 10px;
    background-color: var(--underlay01);
}

.detail-invoice-footer {
    display: flex;
    align-items: center;
    margin-top: auto;
    width: 100%;
}

.detail-invoice-footer .generic-container:first-child {
margin-right: auto;
    color: var(--underlay);
}

.detail-invoice-footer .generic-container {
    width: fit-content;
}

.detail-invoice-bottom-row {
    position: sticky;

    bottom: 0;
    display: grid;
    width: 100%;
    grid-template-columns: auto 150px;
    align-items: center;

    transition: border-color 0.3s;
    background-color: var(--quadrary-color);
}

.detail-invoice-bottom-row div {
    border: solid 1px rgba(255, 255, 255, 0.10);
    padding: 5px;
    box-sizing: border-box;
}

.billing-invoice-item-container {
    display: grid;
    text-align: left;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s;
}

    /* BILLING */


/* LOCATION INVENTORY */

#inventoryActionContainer ,
#serviceActionContainer ,
#supplierActionContainer,
#inventoryAddTemplateView ,
#serviceAddTemplateView ,
#medpackSupportActionContainer ,
#patientAccessSupportActionContainer ,
#guideSupportActionContainer,
#locationInformationActionContainer,
#locationSecurityActionContainer,
#locationUsersActionContainer
{
    display: none;
    flex-direction: column;
}
.inventory-page {
    display: flex;
    flex-direction: row;
    max-height: 100%;
    box-sizing: border-box;
}


.location-inventory-wrapper {
    position: relative;
    margin: 10px 0;
    background-color: var(--secondary-color);
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s;
}

.location-inventory-wrapper .generic-button-delete{
    margin: 0 auto 0 0;
    padding: 0;
}



.location-inventory-item-container-edit line-separator-full , .location-inventory-addons-container-edit-grid line-separator-full{
    margin-bottom: 15px;
    background-color: var(--text-color-25);
}
.location-inventory-item-container-edit line-separator-full:last-of-type , .location-inventory-addons-container-edit-grid line-separator-full:last-of-type{
    margin-top: 20px;
}

.location-inventory-item-container-edit{
    max-height: 0;
    opacity: 0;
    overflow: scroll;
    transition: max-height 0.5s ease-in-out , padding 0.5s , opacity 0.3s , height 0.3s;
    cursor: var(--cursor);
}

.location-inventory-item-container-edit.display-grid {
    display: grid;
    position: relative;
    opacity: 1;
    padding: 10px;
    box-sizing: border-box;
    max-height: 400px; /* adjust based on expected max size */
}
.location-inventory-item-container-edit .edit-form {
    height: 200px;
    max-height: 250px;
    overflow: scroll;
}

.location-inventory-item-container-edit .generic-container-column textarea ,.location-inventory-addons-container-edit-grid .generic-container-column textarea{
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}


.toggle-btn {
    cursor: var(--pointer);
    position: relative;
    padding-left: 1.2rem; /* space for triangle */
}

.toggle-btn::before {
    content: "▼";
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 0.2s ease;
}

.toggle-btn.active::before {
    transform: rotate(180deg); /* Rotate to down arrow */
}

.square-btn.active {

}


.location-management-item-container-edit-grid {
    display: grid;
    gap: 20px;
    margin-left: 20px;
    grid-template-columns:   repeat(auto-fit, minmax(250px, 1fr));
    transition: max-height 0.5s ease-in-out , padding 0.5s , opacity 0.3s;

}
.location-inventory-item-container-edit-grid{
    display: grid;
    grid-template-columns:   repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-left: 20px;
    width: 100%;
    transition: max-height 0.5s ease-in-out , padding 0.5s , opacity 0.3s , height 0.3s;
}

 .location-inventory-service-container-edit-grid{
    display: none;
    margin-left: 20px;
    gap: 20px;
    grid-template-columns:  repeat(auto-fit, minmax(250px, 1fr));
    transition: max-height 0.5s ease-in-out , padding 0.5s , opacity 0.3s , height 0.3s , margin-left 0.5s;
    z-index: -1;
}
.location-inventory-addons-container-edit-grid {
    display: none;
    margin-left: 20px;
    transition: max-height 0.5s ease-in-out , padding 0.5s , opacity 0.3s , height 0.3s , margin-left 0.5s;
    z-index: -1;
}

.location-service-conditions-container-edit-grid {
    display: none;
    margin-left: 20px;
    transition: max-height 0.5s ease-in-out , padding 0.5s , opacity 0.3s , height 0.3s , margin-left 0.5s;
    z-index: -1;
}

.location-inventory-service-container-edit-grid.show {
    position: relative;
    pointer-events: visible;
    display: grid;
    opacity: 1;
    z-index: 10;
    width: 100%;
    max-height: 250px;
    animation: fade 0.3s forwards;
}
.location-inventory-addons-container-edit-grid.show {
    position: relative;
    pointer-events: visible;
    display: flex;
    flex-direction: column;
    opacity: 1;
    z-index: 10;
    width: 100%;
    max-height: 250px;
    animation: fade 0.3s forwards;
}

.location-service-conditions-container-edit-grid.show {
    position: relative;
    pointer-events: visible;
    display: flex;
    flex-direction: column;
    opacity: 1;
    z-index: 10;
    width: 100%;
    max-height: 250px;
    animation: fade 0.3s forwards;
}

.addon-row-header {
    /*position: sticky;*/
    /*top: 0;*/
    display: grid;
    grid-template-columns: 200px 100px 100px 100px;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.addon-row-header input {
    border: solid 1px var(--quadrary-color);
    background-color: var(--secondary-color);
}

.addon-line {
    display: grid;
    grid-template-columns: 200px 100px 100px 100px;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.3s , background-color 0.3s;
}

.addon-line input {
    border-radius: 0;
    margin: 0;
    background-color: transparent;
    transition: background-color 0.3s , color 0.3s;
}

.addon-line:hover input {
    background-color: var(--text-color-10) !important;
}
.addon-line input:hover{
    color: var(--calendar-select);
}


.add-addon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    background-color: #007bff;
    color: #fff;
    cursor: var(--pointer);
    transition: background-color 0.3s , scale 0.3s;
}
.add-addon-btn:hover {
    background-color: #0056b3;
}
.add-addon-btn:active {
    scale: 1.05;
}

.add-addon-delete-btn {}

/*.invoice-row:hover {*/
/*    border-color: #007bff;*/
/*}*/

/*.invoice-row div ,  .invoice-row-header div , .detail-invoice-row-header div, .invoice-inner-row div{*/
/*    padding: 5px;*/
/*    box-sizing: border-box;*/
/*    border-collapse: collapse;*/
/*    text-align: center;*/
/*    height: 100%;*/
/*    border: solid 1px rgba(255, 255, 255, 0.10);*/
/*}*/


.location-management-item-container-edit-grid {
    margin: 0;
}

.location-inventory-item-container-edit-grid input ,
.location-inventory-item-container-edit-grid select ,
.location-inventory-service-container-edit-grid input ,
.location-inventory-service-container-edit-grid select

{
    background-color: var(--secondary-color);
    border-bottom: 2px solid var(--text-color);
    transition: border 0.3s , background-color 0.3s , color 0.3s;
}

.location-inventory-item-container-edit-grid span {
    color: var(--primary-color);
    font-size: 14px;
}

.location-inventory-item-container ,.location-management-item-container {
    display: grid;
    text-align: left;
    grid-template-columns: 50px repeat(8, 1fr);
    gap: 10px;
    padding: 10px;
    /*background-color: var(--secondary-color);*/
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    transition:  background-color 0.3s , transform 0.3s , filter 0.3s;
    cursor: var(--cursor);
}

.location-management-item-container {
    grid-template-columns:  repeat(6, 1fr) 50px;

}
.billing-invoice-item-container:hover , .location-inventory-wrapper:hover{
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    cursor: var(--pointer);
}

.location-inventory-wrapper:hover select , .location-inventory-wrapper:hover input {
    background-color: var(--primary-color);
}

.location-inventory-wrapper:hover textarea {
    background-color: var(--quadrary-color);
}

.location-inventory-wrapper:hover .location-inventory-generic-container  svg {
 opacity: 1 ;
}


.location-inventory-wrapper:hover .location-inventory-item-container-edit-grid input , .location-inventory-wrapper:hover label span{
    border-color: var(--text-color);
    color: var(--text-color);
}
.location-inventory-wrapper:hover input::placeholder {
    color: var(--secondary-color);
}

.location-inventory-item-container:hover select  , .billing-invoice-item-container:hover select ,.location-management-item-container:hover select{
    background-color: var(--primary-color);
}
.location-inventory-item-container select , .billing-invoice-item-container select , .location-management-item-container select{
    text-align: left;
}


.location-management-item-info-container div {
    margin-bottom: 5px;
}

.location-inventory-generic-container {
    display: flex;
    flex-direction: column;

}



.location-inventory-generic-container svg {
    max-height: 30px;
    max-width: 30px;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    fill: var(--tertiary-color);
    transition: fill 0.3s , opacity 0.3s , scale 0.3s;
}

.location-inventory-generic-container button:active svg {
    scale: 1.1;
}

.location-inventory-generic-container:hover svg {
    opacity: 1;
}

.location-inventory-generic-container label {
    font-weight: bold;
    margin-bottom: 5px;
}

.location-inventory-location-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    margin-top: auto;
    width: 100%;
}


.location-inventory-side-bar .generic-container , .location-management-page .location-management-side-bar .generic-container , .support-board-page .support-board-side-bar .generic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto 15px 0;
    border-radius: 2px;
    background-color: var(--secondary-color)
}


.search-bar-container svg {
    margin-left: 10px;
}

.location-inventory-side-bar .generic-container-column div{
    margin: 10px 0;
}

.inventory-item , .service-item {
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s , color 0.3s;
}

.inventory-item:hover , .service-item:hover {
    background-color: var(--quadrary-color);
}

/* LOCATION INVENTORY */

/* GENERIC COMPONENT */
.text-heavy {
    font-family: ibm-bold, sans-serif;
}

.text-light {
    font-family: ibm-light, sans-serif;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.text-light:hover {
    opacity: 1;
}

.large-text {
    font-size: 18px;
}

.medium-text {
    font-size: 16px;
}

.small-text {
    font-size: 14px;
}

.small-text-opacity {
    font-size: 14px;
    opacity: 0.5;
}
#inactivity-countdown  {
    margin: 0 10px;
}

.generic-grid-box-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: fit-content;
    max-height: 500px;
    width: 100%;
}


.generic-svg {
    max-height: 35px;
    max-width: 35px;
}

.generic-header {
    display: flex;
    width: 100%;
}

.generic-container {
    display: flex;
    flex-direction: row;
}

.generic-container-column {
    display: flex;
    flex-direction: column;
}


.generic-text-switch div {
    cursor: var(--cursor);
    transition: opacity 0.3s , transform 0.3s;

}
.generic-text-switch:hover div:first-child{
    transform: translateX(0px);
}

.generic-text-switch div:first-child{
    position: absolute;
    opacity: 0;
    transform: translateX(-5px);
}
.generic-text-switch:hover div:first-child{
    opacity: 1;
}

.generic-text-switch:hover div:last-child {
    opacity: 0;
    transform: translateX(5px);
}

.generic-icon {
    height: 20px;
    width: 20px;
    fill: var(--text-secondary-color);
    transition: fill 0.3s , opacity 0.3s;
}

.generic-icon-2 {
    height: 100%;
    width: 100%;
    max-width: 30px;
    max-height: 30px;
    fill: var(--text-secondary-color);
    transition: fill 0.3s , opacity 0.3s;
}

.filter-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

.generic-filter-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.generic-filter-container-2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.generic-filter-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin: 5px;
    padding: 5px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
    transition: background-color 0.3s , transform 0.3s , color 0.3s , filter 0.3s , opacity 0.3s;
}

.generic-filter-btn.hide {
    opacity: 0.5;
}
.generic-filter-btn.hide svg{
    fill: var(--primary-color);
}

.generic-filter-btn svg {
    transition: fill 0.3s , opacity 0.3s;
}

.generic-filter-btn:hover svg{

    fill: var(--primary-color) ;
}

.generic-filter-btn:hover {
    cursor: var(--pointer);
    background-color: var(--background-color);
    color: var(--foreground-color);
    transform: translate(-2px , -2px);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.generic-top-left-container {
    display: flex;
    flex-direction: row;
    position: absolute;
    justify-self: start;
    align-items: start;
    top: 15px;
    left: 20px;
    z-index: 500;
}


.save-button , .generic-bottom-button{
    margin: auto 0 0 0 !important;
    width: 100% !important;
    padding: 5px !important;
    min-height: 30px !important;
}

.generic-bottom-button {
    -webkit-filter: drop-shadow(2px -2px 2px rgba(0, 0, 0, 0.8)) !important;
    filter: drop-shadow(2px -2px 2px rgba(0, 0, 0, 0.8)) !important;
}
.generic-bottom-button-container {
    display: flex;
    flex-direction: row;
    height: fit-content;
}

.generic-toggle-container {
    display: flex;
    flex-direction: column;
    padding: 5px;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
    color: var(--text-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    margin-bottom: 5px;
    width: 100%;
    transition: filter 0.3s , transform 0.3s , background-color 0.3s , color 0.3s , border 0.3s;
}


.generic-toggle-container:hover {
    /*background-color: var(--primary-color);*/
    /*-webkit-filter: drop-shadow(2px 2px 2px black);*/
    /*filter: drop-shadow(2px 2px 2px black);*/
    /*transform: translate(-5px , -5px);*/
    /*z-index: 100;*/
    /*cursor: var(--pointer);*/
}

.generic-toggle-container div {
    display: flex;
    align-items: center;
}

.generic-display-button {
    text-align: center;
    min-width: 100px;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: color 0.3s , background-color 0.3s;
}

.generic-display-button:hover {
    background-color: var(--tertiary-color);
    cursor: var(--pointer);
}

.generic-display-button.inactive {
    color: var(--text-color-25);
    background-color: var(--secondary-color);
}

.generic-display-button.inactive:hover {
    color: var(--text-color-25);
    background-color: var(--primary-color);
}

.generic-button , .generic-text-display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    min-height: 25px;
    min-width: 100px;
    background-color: var(--foreground-color);
    color: var(--background-color);
    box-sizing: border-box;
    padding: 2px 5px;

    margin: 0 20px;
    cursor: var(--pointer);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));

    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s , transform 0.3s , filter 0.3s;
}

.generic-text-display {
    cursor: var(--cursor);
}

.generic-button:hover {
    background-color: var(--background-color);
    color: var(--foreground-color);
    transform: translate(-2px , -2px);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    z-index: 10;
}

.generic-button-2{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 100px;
    border: 1px solid var(--background-color);
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    box-sizing: border-box;
    padding: 10px;
    margin-top: auto;
    cursor: var(--pointer);
    opacity: 1;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s;
}

.generic-button-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: fit-content;
    white-space: nowrap;
    border: 1px solid transparent;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    box-sizing: border-box;
    padding: 5px;
    margin: 20px;
    cursor: var(--pointer);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, scale 0.1s ,  transform 0.3s , filter 0.3s;
}

.generic-button-3:hover{
    background-color: var(--background-color);
    fill: var(--primary-color);
    color: var(--primary-color);
    transform: translate(-2px , -2px);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}

.generic-button-3:hover > svg , .generic-button-3:hover > button {
    opacity: 1 !important;
    fill: var(--primary-color);
    color: var(--primary-color);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
}

.generic-button-3:active {
    scale: 1.05;
}

.generic-button-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: fit-content;
    min-width: 100px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-secondary-color);
    box-sizing: border-box;
    padding: 10px;
    margin: 20px;
    cursor: var(--pointer);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s;
}

.generic-button-4:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.generic-button-4:hover svg , .generic-button:hover svg{
    fill: var(--primary-color);
}

.generic-button-4 svg , .generic-button svg{
    fill: var(--tertiary-color);
    max-height: 40px;
    max-width: 40px;
    margin-right: 10px;
    transition: fill 0.3s;
}

.generic-button-3 button {
    color: var(--text-secondary-color);
}


.portal-generic-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    min-height: 25px;
    min-width: 100px;
    background-color: transparent;
    color: var(--foreground-color);
    box-sizing: border-box;
    outline-color: var(--tertiary-color) !important;
    padding: 5px;
    margin: 0 20px;
    cursor: var(--pointer);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s , transform 0.3s , filter 0.3s;
}

.portal-generic-button:hover {
    background-color: var(--foreground-color);
    color: var(--background-color);
    transform: translate(-2px , -2px);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    z-index: 10;
}

.portal-generic-button:active {
    scale: 1.05;
}

.portal-generic-button:hover> .square {
    background-color: var(--background-color);
}

.portal-generic-button .square {
    margin-right: 10px;
    background-color: var(--primary-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}


.generic-button-delete {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: fit-content;
    min-width: 100px;
    height: fit-content;
    border: 1px solid transparent;
    background-color: transparent;
    box-sizing: border-box;
    margin-left: auto;
    margin-bottom: auto;
    padding: 5px;
    cursor: var(--pointer);
    fill: var(--secondary-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s , transform 0.3s;
}

.generic-button-copy {
    position: relative;
    cursor: var(--pointer);
}

.generic-button-copy svg path {
    fill: rgba(255, 255, 255, 0.5);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.3s;
}

.generic-button-copy:hover svg path {
    fill: var(--text-secondary-color) !important;
}

.generic-button-delete:hover {
    color: var(--text-color);
    background-color: #ab303f;
}

.generic-button-delete:active ,.generic-button-copy:active {
    scale: 1.1;
}

.generic-button-delete:hover button , .generic-button-delete:hover svg {
    color: var(--text-secondary-color);
    fill: var(--text-secondary-color);
}

.generic-button-delete button , .generic-button-delete svg  {
    color: #dc394d;
    fill: #dc394d;
}

.generic-button-back {
    position: absolute;
    top: -10px;
    left: 0;
    z-index: 2;
}

.generic-overflow-button-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: -15px;
    right: 2%;
    height: fit-content;
    z-index: 10;
    margin-left: auto;
}

.generic-overflow-button-container-side {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 15px;
    left: -15px;
    height: fit-content;
    z-index: 10;

}

.generic-overflow-button , .generic-overflow-button-side{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 2px;
    height: 100%;
    max-height: 30px;
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    margin-left: 15px;
    fill: var(--text-secondary-color);
    color: var(--text-secondary-color);
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    cursor: var(--pointer);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s , transform 0.3s;
}
.generic-overflow-button-side {
    margin: 15px 0 0 0;

}

.generic-overflow-button-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 2px;
    height: 100%;
    max-height: 30px;
    width: fit-content;
    margin-left: 15px;
    color: var(--text-secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    cursor: var(--pointer);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s , transform 0.3s;
}

.generic-overflow-button:hover , .generic-overflow-button-side:hover{
    border-radius: 0;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.generic-overflow-button:hover svg , .generic-overflow-button-side:hover svg {
    fill: var(--background-color);
}

.generic-overflow-button svg , .generic-overflow-button-side svg{
    transition: background-color 0.3s , fill 0.3s , color 0.3s , opacity 0.3s;
}

.generic-overflow-button:active , .generic-overflow-button-side:active{
    scale: 1.05;
}

.generic-text-details {
    display: flex;
    background-color: var(--underlay02);
    padding: 10px;
    box-sizing: border-box;
}

.selected {
    border: 1px solid var(--background-color);
}

.completed {
    background-color: var(--secondary-color);
}

.complete-color {
    color: #67d77f;
}

.cancel-color {
    color:  #ff4c7b;
}

.schedule-color {
    color: #ffb454;
}

.generic-button-2:hover {
    border: 1px solid var(--background-color);
    background-color: var(--background-color);
    color: var(--foreground-color);
}

.generic-button-2:active {
    scale: 1.1;
}

#systemMessageBox {
    z-index: 1000;
}

.generic-wrapper {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.generic-overlay , .generic-overlay-2{
    position: fixed;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.generic-overlay-2 {
    position: absolute;
}



#underlay {
    display: none;
}

.generic-underlay {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--underlay);
    z-index: -2;
    transition: background-color 0.3s;
}


.generic-center {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: -1;
}

.generic-center svg path {
    fill: var(--tertiary-color);
    opacity: 0.2;
}

.generic-center .ibm-bold {
    color: var(--tertiary-color);
    opacity: 0.2;
}


.generic-button:active {
    scale: 1.1;
}

.selection-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    z-index: -1;
}

.initialAnim {
    animation: fade 0.5s 1.5s forwards;
}

.app-layout-page {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.app-map-title {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--text-color);
    width: fit-content;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--primary-color);
}

.app-map-grid-list {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 32px;
    text-align: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;

}

.app-map-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
}

.app-map-item .selection-box-text {
    margin: 10px 0;
}

.app-explorer-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 0 15px 36px;
}

.app-explorer-header {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    color: var(--text-color);
    margin: 8px 0 16px 6px;
    font-size: 0.9rem;
}

.app-explorer-table {
    display: flex;
    flex-direction: column;
    gap: 10px; /* increase spacing between rows */
    width: 100%;
    margin-left: 20px;
}

.app-explorer-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    box-sizing: border-box;
    border-radius: 6px;
    transition: background 0.3s ease, transform 0.3s ease;
    cursor: var(--pointer);
}

.app-explorer-row:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(4px);
}

.app-explorer-name {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--text-color, #fff);
}

.app-explorer-icon svg {
    width: 26px;
    height: 26px;
    fill: var(--text-color, #fff);
    opacity: 0.9;
}



.selection-container {
    display: flex;
    flex-direction: row;
    margin-bottom: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.selection-container li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary-color);
}

.selection-container li div {
    margin-top: 20px;
}

.selection-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    max-height: 100px;
    max-width: 100px;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    margin: 0 20px;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    outline: 2px solid transparent;
    outline-offset: 5px;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s , transform 0.3s , filter 0.3s , outline 0.3s , outline-offset 0.3s , max-height 0.3s, max-width 0.3s;
}

@media   (max-height: 850px) , (max-width: 850px) {
    .selection-box {
        max-height: 80px;
        max-width: 80px;
    }
}

/* Media query for smaller screens */
@media  (max-width: 650px), (max-height: 750px)  {
    .selection-box {
        max-height: 70px;
        max-width: 70px;
    }
}

/* Media query for smaller screens */
@media  (max-width: 600px), (max-height: 650px)  {
    .selection-box {
        max-height: 60px;
        max-width: 60px;
    }
}

/* Media query for extra small screens */
@media (max-width: 510px), (max-height: 650px) {
    .selection-box {
        max-height: 40px;
        max-width: 40px;
    }
    .selection-box-text {
        font-size: 12px;
    }
}

.selection-box svg {
    height: 100%;
    width: 100%;
    min-height: 20px;
    min-width: 20px;
}

.selection-box:hover {
    background-color: var(--text-color);
    transform: translateY(-5px);
    cursor: var(--pointer);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
}


.selection-box:active {
    scale: 1.05;
}

.selection-box path {
    fill: var(--text-color);
    transition: fill 0.1s;
}

.selection-box:hover > svg path {
    fill: var(--primary-color);
}

.selection-box-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80px;
    margin-bottom: auto;
}

.trash-icon-svg {
    height: 15px;
    width: 15px;
    opacity: 0;
    margin: auto 0;
    fill: var(--text-secondary-color);
    transition: fill 0.3s , opacity 0.3s , scale 0.2s;
}

.trash-icon-svg:hover {
    opacity: 1!important;
    cursor: var(--pointer);
}

.trash-icon-svg:active {
    scale: 1.1;
}

.minimize-button{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -10px;
    right: 15px;
    padding: 5px;
    border-radius: 2px;
    max-height: 30px;
    min-width: 30px;
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s;
    cursor: var(--pointer);
}

.minimize-button:hover svg {
    scale: 1.1;
    fill: var(--text-secondary-color)
}

.minimize-button:active{
    scale: 1.1;
}

.minimize-button svg {
    fill: var(--text-secondary-color);
    transition: color 0.3s, background-color 0.3s , fill 0.3s , scale 0.2s , rotate 0.2s;
}


.minimize {
    max-height: 20px !important;
    min-height: 20px !important;
    transition: max-height 0.5s , min-height 0.5s;
}

.minimize .minimize-button svg {
    rotate: 90deg;
    fill: var(--text-color-25);
}


.patient-record-container.minimize .patient-record-table,
.patient-record-container.minimize .patient-text-container ~ *:not(.minimize-button) {
    opacity: 0;
    pointer-events: none;
}
/* GENERIC COMPONENT */

.disable-2 {
    pointer-events: none;

}

.disable , .locked {
    color: rgba(0, 0, 0, 0.5) !important;
    opacity: 0.5 !important;
    pointer-events: none;
}

.disable svg path ,  .locked svg path {
    fill: rgba(0, 0, 0, 0.5) !important;
}

.disable .square {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Adjust background color */
}

.disable button {
    color: rgba(0, 0, 0, 0.5) !important; /* Adjust text color */
}
.disable div {
    color: rgba(0, 0, 0, 0.5) !important; /* Adjust text color */
}

.hidden {
    display: none !important;
}

.active {
    opacity: 1;
    transition: opacity 0.3s , background-color 0.3s , color 0.3s , fill 0.3s , transform 0.3s;
}

.generic-select-button {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-color: var(--secondary-color);
    color: var(--text-color);

    padding: 2px;
    box-sizing: border-box;
    transition: background-color 0.3s , color 0.3s , opacity 0.3s;
}
.generic-select-button:hover {
    background-color: var(--quadrary-color);
    cursor: var(--pointer);
}

.selected-btn svg{
    opacity: 1;
}

.unselected-btn svg{
    opacity: 0.2;
}

.inactive {
    opacity: 0.5;
    transition: opacity 0.3s , background-color 0.3s , color 0.3s;
}

.inactive-button {
    opacity: 0.5;
    transition: opacity 0.3s;
    pointer-events: none;
}

footer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: auto;
    width: 100%;
    text-align: left !important;
}

.footer-info{
    align-self: center;
    font-size: 13px;
    opacity: 0;
    font-family: ibm-text, sans-serif;
    color: var(--hover-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
    animation: fade 0.5s 1s forwards;
}

.footer-info:hover{
    color: var(--foreground-color);
    cursor: var(--pointer);
}

.certificate-compliance-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: ibm-bold , sans-serif;
    bottom: 2px;
    right: 20px;
    color: var(--hover-color);
    opacity: 0;
    transition: opacity 0.3s , color 0.3s;
    animation: fade 0.5s 1s forwards;
}

.certificate-compliance-icon svg{
    height: 30px;
    width: 30px;
    fill: var(--hover-color);
    transition: fill 0.3s ;
}

.certificate-compliance-icon:hover , .certificate-compliance-icon:hover svg{
    color: var(--foreground-color);
    fill: var(--foreground-color);
    cursor: var(--pointer);
}

/* LANGUAGE */

.language-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: var(--pointer);
    color: var(--text-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
    opacity: 0;
    animation: fade 0.3s 0.9s forwards;
    z-index: 1;
}

.language-inner-container {
    display: flex;
    flex-direction: row;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}


.language-container:hover {
    opacity: 0.8;
}

.language-container p {
    margin: 0 5px;
}

.language-inactive , .theme-inactive{
    color: var(--foreground-color);
    opacity: 0.2;
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

.language-active , .theme-active{
    color: var(--foreground-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}

.language-selector {
    animation: fade 1s forwards;
}

/* LANGUAGE */



/* THEME */

/*.primary-theme path{*/
/*    fill: var(--text-color) !important;*/
/*}*/

/*.secondary-theme path{*/
/*    fill: var(--secondary-color) !important;*/
/*}*/

/*.tertiary-theme path{*/
/*    fill: var(--tertiary-color) !important;*/
/*}*/

/*.quaternary-theme  path{*/
/*    fill: var(--quadrary-color) !important;*/
/*}*/

#themeList , #languageList{
    display: none;
    animation: fade 0.3s forwards;
}

.theme-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    opacity: 0;
    animation: fade 0.3s 1s forwards;
    z-index: 1;

}

.language-selector-container , .theme-selector-container{
    display: flex;
    flex-direction: row;
    opacity: 1;
    padding: 5px;
    box-sizing: border-box;
    cursor: var(--pointer);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s;
}

.language-selector-container .ibm-mono , .theme-selector-container .ibm-mono{
    font-family: ibm-mono , sans-serif;
    margin-left: 8px;
}

.language-selector-container:hover , .theme-selector-container:hover {
    opacity: 0.8;
}
.language-selector-container:active , .theme-selector-container:active {
    opacity: 1;
    scale: 1.05;
}

.language-selector-container svg path , .theme-selector-container svg path{
    fill: var(--foreground-color);
    transition: fill 0.3s;
}

.theme-selector-container {
    justify-content: flex-start;
    margin-left: 10px;
    min-width: 100px;
}

.theme-box , .theme-container li {
    /*background-color: var(--primary-color);*/
    padding: 2px;
    height: fit-content;
    width: fit-content;
    text-align: center;
    min-width: 100px;
    box-sizing: border-box;
    color: var(--primary-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s;
}
.theme-container li {
    margin-top: 10px;
}

.theme-box:hover , .theme-container li:hover {
    /*background-color: var(--hover-color);*/
    cursor: var(--pointer);
}

.theme-box:hover , .theme-container li:hover {
    /*background-color: var(--hover-color);*/
    cursor: var(--pointer);
}

.theme-list {
    display: flex;
    flex-direction: column;
}
.theme-list li p {
    transition: color 0.3s , opacity 0.3s;
}
.theme-list li p:hover {
    opacity: 1;
    color: var(--calendar-select);
}

/* THEME */






/* MEDICINE LIST */

.medicine-section {
    position: relative;
    overflow-y: hidden;

}

/*.medicine-list {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*}*/

.medicine-list-info-box {
    position: relative;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 20px;
}

.medicine-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: auto;
    overflow-y: scroll;
}

.medicine-info-box {
    display: flex;
    flex-direction: column;
    opacity: 0.8;
    max-height: 310px;
    max-width: 250px;
    height:  100%;
    width: 100%;
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    padding: 10px;
    box-sizing: border-box;
    /*margin: 0 20px 20px 20px;*/
    color: var(--disable);
    background-color: var(--primary-color);
    transition: background-color 0.3s , opacity 0.3s , color 0.3s , transform 0.3s , scale 0.3s;
}

.medicine-info-box:hover {
    color: var(--text-secondary-color);
    opacity: 1;
    filter: drop-shadow(2px 2px 2px black);
    transform: translate(-5px , -5px);
}

.medicine-info-box:hover svg {
    fill: var(--text-secondary-color);
}

.medicine-info-box svg {
    align-self: flex-start;
    fill: var(--disable);
    height: auto;
    width: 100%;
    margin: auto 0 10px 0;
    transition: fill 0.3s;
}

.medicine-info-box-title {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 5px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
}



.medicine-info-container {
    margin: 5px 0;
}

.medicine-info-container div:last-child{
    display: flex;
    margin-left: 20px;
}

.medicine-info-container svg {
    display: flex;
    align-self: center;
    height: 100%;
    width: 100%;
    max-height: 15px;
    max-width: 15px;
    margin-left: auto;
}


.medicine-info-box-footer {
    font-size: 12px;
    color: var(--text-color-25);
    transition: color 0.3s;
}

.medicine-info-box-footer:hover {
    color: var(--text-secondary-color);

}

.copy-text-container {
    position: absolute;
    text-align: center;
    text-wrap: none;
    top: 0;
    left: 0;
    width: fit-content;
    padding: 2px 5px;
    font-size: 12px;
    background-color: var(--secondary-color);
    box-sizing: border-box;
}

/* MEDICINE LIST */

/* SETTINGS */

.settings-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 10px 10px;
    box-sizing: border-box;
    height: 80vh;
    width: 80vw;
    min-width: 350px;
    min-height: 250px;
    max-height: 500px;
    max-width: 450px;
    background-color: var(--secondary-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s , background-color 0.3s , color 0.3s;
}

.settings-box-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

.settings-box-bar {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 10px;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: fit-content;
    max-width: 300px;
    background-color: var(--primary-color);
    color: var(--text-secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transition: height 0.3s , width 0.3s , background-color 0.3s , color 0.3s;
}


.setting-button-container {
    display: flex;
    flex-direction: row;
    padding: 5px;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
    color: var(--text-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    width: 80%;
    transition: filter 0.3s , transform 0.3s , background-color 0.3s , color 0.3s , border 0.3s;
}


.setting-button-container:hover {
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transform: translate(-5px , -5px);
    z-index: 100;
    cursor: var(--pointer);
}

.setting-button-container div {
    display: flex;
    align-items: center;
}

/* Style the button as a toggle */

.toggle-button {
    display: flex;
    align-content: center;
    width: fit-content;
    height: fit-content;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
    cursor: var(--pointer);
    border: none;
    outline: none;
    transition: background-color 0.3s , color 0.3s;
}

.toggle-off,
.toggle-on {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-color-25);
    width: 30px;
    text-align: center;
    transition:  color 0.3s;
}
.toggle-on {
    margin-left: 5px;
}

.toggle-off {
    color: var(--text-color-25);
}

/* The slider container */
.slider {
    width: 50px;
    height: 20px;
    background-color: var(--secondary-color);
    position: relative;
    border: solid 3px var(--hover-color);
    transition: background-color 0.3s ease;
}

/* The circle that moves in the slider */
.slider-circle {
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 1px;
    left: 1px;
    transition: left 0.3s ease , color 0.3s;
}

/* When the toggle is active ("On" state) */
.toggle-button.active .slider {
    background-color: var(--calendar-select);
}

.toggle-button.active .slider-circle {
    left: 31px;
    background-color: white;
}

.toggle-button .toggle-off{
    color: var(--text-color-75);
}

.toggle-button.active .toggle-off{
    color: var(--text-color-25);
}

.toggle-button.active .toggle-on {
    color: var(--calendar-select);
}


.tri-toggle-button {
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 4px 12px;
    min-width: 70px;
    text-align: center;
    transition: background 0.25s, color 0.25s;
    user-select: none;
}

.tri-toggle-button.state-off {
    background: rgba(255,255,255,0.05);
    color: #aaa;
}

.tri-toggle-button.state-auto {
    background: rgba(255,215,0,0.15);
    color: #ffd700;
}

.tri-toggle-button.state-on {
    background: rgba(0,200,255,0.25);
    color: #4fc3f7;
}

/* SETTING */

/* SUPPORT BOARD */
.support-board-page {
    max-height: 100%;
    flex-direction: row;
    box-sizing: border-box;
}
.supportBoard-ticket-header {
    min-height: 30px;
    grid-template-columns: repeat(5, 1fr);
}

.ticket-container {
    display: flex;
    text-align: left;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--secondary-color);
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    transition: color 0.3s , background-color 0.3s , transform 0.3s , filter 0.3s;
    cursor: var(--pointer);
}

.ticket-container:hover {
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}
.ticket-container:hover select {
    background-color: var(--primary-color);
}
.ticket-container select {
    text-align: left;
}

.ticket-container-data {
    display: grid;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(5, 1fr);
}

.ticket-chat-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.ticket-chat-container .generic-overflow-button-container {
    top: -10px;
    left: 0;
}

.ticket-chat-case-info {
    display: flex;
    margin: 30px auto;
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: var(--primary-color);
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    padding: 20px;
    width: fit-content;
    min-width: 200px;
    box-sizing: border-box
}
#ticketSubjectDisplay {
    font-weight: bold;
}

.ticket-chat-box-wrapper{
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--hover-color);
    margin: 5px 0;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.ticket-chat-box-container{
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 0;
}

.ticket-chat-message-bar {
    flex-shrink: 0;
}


/* SUPPORT BOARD */

/* MISCELLANEOUS */

.main-text {
    font-size: 12px;
    color: var(--text-color);
    transition: color 0.3s;
}

.sub-text {
    font-size: 12px;
    position: relative;
    width: fit-content;
    color: var(--text-color-50);
    transition: color 0.3s;
}

.sub-text:hover {
    color: var(--calendar-highlight);
}

.sub-text::before{
    display: block;
    content: '';
    width: 0;
    right: 0;
    height: 2px;
    position: absolute;
    top: -2px;
    background-color: var(--calendar-highlight);
    transform-origin: center;

    transition: width 0.3s ease-in-out;
}

.sub-text:hover::before{
    width: 100%;
    left: 0;
}

#unlicensedInfo {
    display: none;

}

#unlicensedInfo img {
    height: fit-content;
    width: 300px;
    margin-bottom: 20px;
}
.info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-container p:first-of-type {
    border: solid 1px white;
    padding: 10px;
    transition: color 0.3s, border 0.3s;
}

.info-container:hover > italic {
    margin: 20px;
    opacity: 1;
}

.info-container p:first-of-type:hover {
    color: var(--background-color);
    border: solid 1px var(--background-color);
    cursor: var(--cursor);
}

.info-container p {
    color: var(--text-secondary-color);
    margin: 10px;
    cursor: var(--cursor);
}


italic {
    opacity: 0;
    font-family: ibm-italic , sans-serif;
    text-align: center;
    color: var(--text-secondary-color);
    transition: opacity 0.3s , margin 0.3s;
    margin: -10px;
    cursor: var(--cursor);
}


.m-Active {
    color: #ff4c7b;
}

.Chronic{
    color: #a498ff;
}

.Resolved{
    color: #67d77f;
}

.Mild {
    color: #71c7ff;
}

.Moderate {
    color: #ffb454;
}

.Severe {
    color: #ff4c7b;
}

.accept:hover {
    color: #40b2ff;
}
.decline:hover {
    color: #ff3160;
}

.loading-anim-container {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    /*background-color: var(--hover-color);*/
    height: 100%;
    width: 100%;
    opacity: 1 !important;
}

.inactivity-warning , .onboarding-warning , .info-overlay{
    display: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    z-index: 10000;
    transition: opacity 0.3s;
}

.info-overlay .generic-bottom-button-container {
    margin-bottom: 40px;
}

.info-guide {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border-radius: 8px;
    color: var(--text-color);
    height: 100%;
    max-width: 700px;
    text-align: left;
    line-height: 1.6;
}

.info-guide h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #fff;
}

.info-guide p {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* === Close Button === */
.info-overlay-footer {
    text-align: center;
    margin-top: 25px;
}

.readonly-input {
    color: var(--text-color-25) !important;
    cursor: var(--cursor);
}
/* MISCELLANEOUS */



/* QUICK BOX */

.quick-box {
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: fit-content;
    width:fit-content;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s , opacity 0.3s;
    z-index: 100;
}

.quick-box-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: fit-content;
    max-height: 450px;
    max-width: 420px;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 1.5vh;
    overflow: hidden;
    transition: height 0.3s , width 0.3s;
}

.quick-box-button-container:not(:last-child) {
    padding-right: 10px;
    box-sizing: border-box;
}

.quick-box-container-input-list {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    box-sizing: border-box;

}

.quick-box-container-input-list li {
    display: flex;
    align-items: start;
    flex-direction: column;
    margin: 5px 0;
    width: 100%;
    max-width: 300px;
    flex-grow: 1;
    flex-shrink: 1;
}

.quick-box-container-input-list label ,.quick-box-container-input-list optional-tag {
    margin: 5px 0;
    font-size: 1.2vh;
    flex-shrink: 1;
}
.quick-box-container-input-list label {
    padding-right: 10px;
}

.quick-box-container-input-list textarea {
    min-height: 70px;
    margin-bottom: 20px;
    resize: none; /* Prevent resizing */
    height: 100%; /* Scale the height dynamically */
    width: 100%; /* Ensure the textarea fits the width */
    max-height: 70px; /* Constrain the max height */
    font-size: 1.2vh; /* Scale text size */
    flex-grow: 1;
    flex-shrink: 1; /* Allow it to shrink */
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 2px;
}

.quick-box input,
.quick-box select {
    height: fit-content;
    padding: 5px;
    width: 100%;
    margin-right: auto;
    color: var(--text-secondary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 2px;
    transition: color 0.3s, background-color 0.3s;
    font-size: 1.2vh; /* Scale input text size */
    flex-grow: 1;
    flex-shrink: 1; /* Allow shrinking */
}
.quick-box .generic-button-4 ,.quick-box .generic-button-2 {
    margin: 10px;
    font-size: 1.2vh;
    flex-grow: 1;
    flex-shrink: 1;
}



.quickSupport-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    height: 80vh;
    width: 80vw;
    max-width: 550px;
    max-height: 660px;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s;
}

.quickSupport-container input , .quickSupport-container select , .quickSupport-container textarea {
    width: 100%;
    min-width: 100px;
    max-width: 300px;
}

.quickSupport-input-container {
    overflow-y: scroll;
    max-height: 100%;
}

.quickSupport-input {
    display: flex;
    flex-direction: column;
}

.quickSupport-title-container , .quickSupport-input {
    margin: 20px 0;
}

.quickSupport-input label {
    margin: 5px 0;
}


.quickMenuPinBoard {
    position: absolute;
    left: 20px;
    top: -10px;
    max-width: 300px;
    max-height: 300px;
    min-width: 150px;
    min-height: 150px;
    width: 30vw;
    height: 30vh;
    background-color: var(--secondary-color);
}

.quickMenu-generic-title {
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    height: fit-content;
    background-color: var(--primary-color);
    box-shadow: 2px 2px 2px black;
}

.qmPin-list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

.qmPin-pinned-element {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 5px;
    box-sizing: border-box;
    width: 80%;
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: color 0.3s, background-color 0.3s, opacity 0.3s, fill 0.3s , scale 0.1s , transform 0.3s , filter 0.3s;
}

.qmPin-pinned-element svg {
    height:100%;
    width: 100%;
    max-height: 15px;
    max-width: 15px;
    fill: var(--background-color);
    transition:  opacity 0.3s, fill 0.3s;
    margin-right: 10px;

}

.qmPin-pinned-element:hover svg {
    fill: var(--primary-color);
}

.qmPin-pinned-element:hover {
    background-color: var(--background-color);
    color: var(--foreground-color);
    transform: translate(-2px , -2px);
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1));
    z-index: 10;
    cursor: var(--pointer);
}


.pinned {
    transform: translate(-2px , -2px);
    background-color: var(--text-secondary-color);
    transition: opacity 0.3s , background-color 0.3s ;
}
.pinned svg  path{
    fill: var(--primary-color);
    opacity: 1 ;
}

.pinned:hover  {
    background-color: var(--secondary-color)!important;
}

.pinned:hover path {
    fill: var(--text-color)!important;
}

/* QUICK BOX */


/* QUICK MENU */
.quick-menu {
    display: none;
    position: fixed;
    color: var(--text-secondary-color);
    /*overflow: auto;*/
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity 0.3s , backdrop-filter 0.3s;
    text-align: left;
    opacity: 0;
    z-index: 1000;
}

.quick-menu-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.quick-menu-title {
    font-family: ibm-medium , sans-serif;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 50px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    box-shadow: 2px 2px 2px black;
}


.quick-menu .quick-menu-selector {
    text-align: center;
    padding: 10px;
    margin: 20px;
    border: solid 1px transparent;
    transition: color 0.3s , background-color 0.3s , border 0.3s;
}

.quick-menu .quick-menu-selector:hover {
    border: solid 1px white;
    cursor: var(--pointer);
}

.quick-menu .quick-menu-selector .generic-container {
    justify-content: center;
    align-items: center;
}

.quick-menu .quick-menu-selector svg {
    fill: var(--text-color);
    margin-left: 10px;

}
/* QUICK MENU */


html.animation-enabled .generic-button:hover ,
html.animation-enabled .generic-button-3:hover ,
html.animation-enabled .setting-button-container:hover ,
html.animation-enabled .dashboard-appointment-info-container:hover,
html.animation-enabled .dashboard-notification-container:hover ,
html.animation-enabled .location-management-user-container:hover ,
html.animation-enabled .medical-record-patient-container:hover ,
html.animation-enabled .ticket-container:hover ,
html.animation-enabled .location-inventory-wrapper:hover ,
html.animation-enabled .billing-invoice-item-container:hover ,
html.animation-enabled .medicine-info-box:hover ,
html.animation-enabled .patient-selection-box:hover ,
html.animation-enabled .patient-record .generic-overflow-button:hover,
html.animation-enabled .generic-filter-btn:hover,
html.animation-enabled .qmPin-pinned-element:hover,
html.animation-enabled .portal-generic-button:hover
{
    animation: outline-expand-small 0.3s ease-in alternate-reverse infinite;
}

html.animation-enabled .selection-box:hover {
    animation: outline-expand  0.3s  ease alternate-reverse infinite;
}


@media print {
    .no-print { display: none; }
    .invoice-container { display: block; }
}


html.animation-enabled .lock-in-anim:hover .corner-top-left,
html.animation-enabled .lock-in-anim:hover .corner-top-right,
html.animation-enabled .lock-in-anim:hover .corner-bottom-left,
html.animation-enabled .lock-in-anim:hover .corner-bottom-right {
    transform: translate(0, 0);
    opacity: 1;
}

.corner-container {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.3s , transform 0.3s;
}
.corner-container svg {
    height: 8px;
    width: 8px;
}

.corner-container path {
    transition: fill 0.3s;
}

.corner-top-left,
.corner-top-right,
.corner-bottom-left,
.corner-bottom-right {
    display: inline-block;
    position: absolute;
    font-size: 0;
    opacity: 0;
}

.corner-top-left{
    left: 0;
    top: 0;
    transform: translate(-2px, -2px);
}
.corner-top-left path {
    fill: var(--calendar-select);
}
.corner-top-right{
    right: 0;
    top: 0;
    transform: translate(2px, -2px);
}
.corner-bottom-left{
    bottom: 0;
    left: 0;
    transform: translate(-2px, 2px);
}
.corner-bottom-right{
    bottom: 0;
    right: 0;
    transform: translate(2px, 2px);
}



.lock-in-anim-v2 .corner-top-left,
.lock-in-anim-v2 .corner-top-right,
.lock-in-anim-v2 .corner-bottom-left,
.lock-in-anim-v2 .corner-bottom-right {
    opacity: 0.5 !important;
}

.lock-in-anim-v2:hover .corner-top-left,
.lock-in-anim-v2:hover .corner-top-right,
.lock-in-anim-v2:hover .corner-bottom-left,
.lock-in-anim-v2:hover .corner-bottom-right
{
    transform: translate(0, 0) !important;
    opacity: 1 !important;
}

.lock-in-anim-v2 .corner-top-left svg,
.lock-in-anim-v2 .corner-top-right svg,
.lock-in-anim-v2 .corner-bottom-left svg,
.lock-in-anim-v2 .corner-bottom-right svg
{
 scale: 0.75 !important;
}



.lock-in-anim-v2 .corner-top-left{
    left: 0;
    top: 0;
    transform: translate(-2px, -2px) !important;
}
.lock-in-anim-v2 .corner-top-left path {
    fill: var(--calendar-select);
}
.lock-in-anim-v2 .corner-top-right{
    right: 0;
    top: 0;
    transform: translate(2px, -2px) !important;
}
.lock-in-anim-v2 .corner-bottom-left{
    bottom: 0;
    left: 0;
    transform: translate(-2px, 2px) !important;
}
.lock-in-anim-v2 .corner-bottom-right{
    bottom: 0;
    right: 0;
    transform: translate(2px, 2px) !important;
}


/* STRIPE SETTINGS TEST */

.warning-box {
    display: none;
    flex-direction: column;
    gap: 12px;
    background-color: var(--quadrary-color);
    border: 1px solid transparent;
    padding: 16px;
    border-radius: 2px;
    margin-top: 12px;
}

.warning-title {
    font-weight: 800;
    color: var(--calendar-select);
}

.req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 16px;
    padding-left: 4px;
}

.req-item {
    padding: 10px 12px;
    background-color: var(--secondary-color);
    border-left: 4px solid var(--calendar-select);
    border-radius: 2px;
    font-size: 14px;
    color: var(--text-color);
}

.stripe-logo {
    position: absolute;
    top: 5px;
    right: 15px;
}


.stripe-logo path {
    fill: rgba(255, 255, 255, 0.25);
    transition: fill 0.3s;
}

.stripe-logo:hover path{
    fill: #635bff;
}

.status-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
}
.status-tag.yellow { color: #f9c74f; }
.status-tag.green { color: #90be6d; }
.status-tag.red { color: #d25757; }
.status-tag.gray { color: #ccc; }

.stripe-btn.primary {
    background-color: #5469d4;
    color: white;
}

.stripe-info-box {
    display: flex;
    flex-direction: row;
}

.stripe-info-box p {
    margin-bottom:10px ;
    font-size: 14px;
}

.stripe-info-box .generic-container-column {
    margin-right: 50px;
}

.action-buttons {
    margin: 10px 0;
    display: flex;
    gap: 10px;
}

.stripe-btn.primary {
    background-color: var(--calendar-select);
    color: white;
    padding: 8px 16px;
    border-radius: 2px;
    border: none;
    cursor: var(--pointer);
    transition: background-color 0.3s , color 0.3s;
}

.stripe-btn.primary:hover {
    background-color: var(--calendar-highlight);
}

.stripe-completed {
    background-color: #5469d4;
    color: #e1e1e1;
    padding: 8px 16px;
    border-radius: 2px;
    border: none;
    cursor: var(--cursor);
    transition: background-color 0.3s , color 0.3s;
}

.stripe-btn.secondary {
    background-color: #e1e1e1;
    color: #333;
    padding: 8px 16px;
    border-radius: 2px;
    border: none;
    cursor: var(--pointer);
    transition: background-color 0.3s , color 0.3s;
}

.stripe-btn.secondary:hover {
    background-color: #333;
    color: #e1e1e1;
}

.stripe-context-box {
    background-color: rgba(255, 255, 255, 0.02);
    padding: 10px 15px;
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 0.9em;
    color: #bbb;
}

.stripe-notice {
    font-size: 0.9em;
    color: #aaa;
    white-space: pre-line; /* render \n as line breaks */
}
.note {
    margin: 5px 0;
    font-style: italic;
    color: #888;
}

.stripe-context-box .generic-container {
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 15px 0;
}

.stripe-complete {
    display: none;
}

.stripe-context-box ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.stripe-context-box li {
    margin: 5px 0;
    font-size: 14px;
}

.stripe-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 2px;
    padding: 12px 20px;
    margin: 10px auto;
    width: 260px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.stripe-btn.primary {
    background: #288edf;
    color: #fff;
}

.stripe-btn.primary:hover {
    background: #1c67ae;
}

.stripe-note {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #aaa;
}


/* STRIPE SETTINGS TEST */


/* BILLING ACCOUNT TEST */


/* BILLING ACCOUNT TEST */


/* STRIPE */

#stripeForm {
    transition: opacity 0.3s;
}

#stripeForm.generic-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

.stripe-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.powered-by-stripe {
    position: fixed;
    bottom: 0;
    left: 40px;
    margin: 35px 0 30px 0;
    opacity: 0.4;
    scale: 0.8;
    transition: opacity 0.3s;
}

.powered-by-stripe:hover {
    opacity: 1;
}

.powered-by-stripe svg {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.stripe-container-wrapper {
    max-height: 60%;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.stripe-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    transition: all 0.3s ease-in-out , transform 0.2s;
}

.stripe-inner-container {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: hidden;
    background-color: #1e1e1e;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    transition: all 0.3s ease-in-out , transform 0.2s;
}

.stripe-container form {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 6px;
    overflow-y: scroll;
    background-color: #1e1e1e;
    transition: all 0.3s ease-in-out , transform 0.2s;
}

.stripe-button-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto 0 50px 0;
    color: var(--text-color);
    background-color: var(--calendar-highlight);
    min-width: 80px;
    min-height: 35px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 2px;
    transition: background-color 0.3s , width 0.3s , max-width 0.3s;
}

.stripe-button-container:hover {
    background-color: var(--calendar-select);
    cursor: var(--pointer);
}

.stripe-button-container span {
    font-family: ibm-bold, sans-serif;

}

.hidden {
    display: none;
}

.payment-title , .payment-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 20px;
}

.payment-footer {
    margin: 10px 0;
}

.title-line {
    font-weight: 500;
    font-size: 1rem;
}
.amount-line {
    font-weight: bold;
    font-size: 1.25rem;
    margin-top: 10px;
}

.footer-line {
    font-size: 0.85rem;
    color: #aaa;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 16px;
}

#payment-message {
    color: white;
}

.stripe-success {
    background-color: #2ad574;
    pointer-events: none;
}

.stripe-failure {
    background-color: #b80536;
    pointer-events: none;
}

.subscription-info-container{
    display: flex;
    justify-self: center;
    align-items: center;
    position: relative;
    margin-left: 10px;
    cursor: var(--cursorInfo);
}
.subscription-info-container:hover .subscription-info{
    opacity: 1;
}

.subscription-info-container svg{
    height: 20px;
    width: 20px;
}
.subscription-info-container path{
    fill: var(--text-color-50);
}

.subscription-info-container:hover path{
    fill: var(--text-color);
}
.subscription-info {
    position: absolute;
    top: 0;
    left: 25px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid white;
    background-color: var(--hover-color);
    transition: opacity 0.3s;
    pointer-events: none;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(25vw - 60px);
    max-width: 350px;
    min-width: 150px;
    white-space: normal;
    word-break: break-word;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 100;
}
@media (max-width: 600px) {
    .subscription-info {
        left: 0;
        transform: translate(-70%,25px);
        max-width: 90vw;
    }
}

.subscription-note {
    display: inline-block;
    font-family: ibm-italic , sans-serif;
}

.subscription-disclaimer{
    margin: 10px 0;
    display: inline-block;
    width: fit-content;
    color: var(--text-color-75);
}

.subscription-refund-text {
    display: inline-block;
    color: var(--text-color-75);
}

.setup-complete-container {
    display: flex;
    height: 100%;
    max-width: 300px;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--text-color);
    opacity: 0;
    animation: fade 0.3s 0.4s forwards;
}

.setup-complete-container line-separator {
    height: 2px;
    margin: 10px 0;
    background-color: var(--text-color);
}

.setup-complete-container .generic-container {
    align-items: center;
}
.setup-complete-container svg {
    margin: 0 5px;
}

.setup-info-text {
    font-size: 14px;
    font-family: ibm-light , sans-serif;
}

/* STRIPE */


/* PRICING */
.pricing-section {
    display: none;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    /*overflow-y: scroll;*/

}
.pricing-container-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 100px;
    /*grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));*/
}

.pricing-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    max-height: 500px;
    min-height: calc(100% - 20px);
    height: 100%;
    color: var(--background-color);
    margin: 50px 20px;
    z-index: 10;

}

.pricing-container:hover >.pricing-container-title , .pricing-container:hover >.pricing-container-content{
    filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 1));
    -webkit-filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 1));
}

.pricing-container-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    background-color: var(--foreground-color);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    transition: background-color 0.3s, color 0.3s, filter 0.3s , opacity 0.3s;
}

.pricing-container-title div:first-child {
    font-family: ibm-medium , sans-serif;
    font-size: 18px;
}

.pricing-container-title div:last-child {
    font-family: ibm-italic , sans-serif;
    font-size: 24px;
}

.pricing-container-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background-color: var(--foreground-color);
    padding: 10px;
    box-sizing: border-box;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    transition: background-color 0.3s, color 0.3s, filter 0.3s , opacity 0.3s;
    height: fit-content;
    min-height: 450px;
    max-height: 450px;
    margin-bottom: 100px;
}

.pricing-container-content ul {
    overflow-y: scroll;
}

.pricing-price-container {
    display: flex;
    flex-direction: row;
    font-family: ibm-bold , sans-serif;
    font-size: 30px;
    margin: 10px 0;
    border: 2px solid var(--background-color);
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s , color 0.3s ;
    min-width: 100px;
    justify-content: center;

}
.pricing-price-container div:first-child {
    align-self: flex-start;
    font-family: ibm-bold , sans-serif;
}

.pricing-price-container div:last-child {
    align-self: flex-end;
    font-size: 14px;
}


.pricing-price-container:hover {
    background-color: var(--background-color);
    color: var(--foreground-color);
}

.pricing-container-content ul {
    width: 100%;
}
.pricing-container-content ul li{
    padding: 2px;
    box-sizing: border-box;
    margin: 10px 0;
    transition: background-color 0.3s , color 0.3s;
}

.pricing-container-content ul li:hover {
    background-color: var(--background-color);
    color: var(--foreground-color);
    font-family: ibm-bold,sans-serif;
    cursor: var(--cursorInfo);

}
/* PRICING */


/* FILE MANAGEMENT */
.file-upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--underlay);
    width: 100%;
    height: 100%;
    max-height: 200px;
    margin-top: 20px;
    cursor: var(--pointer);
    transition: background-color 0.3s;
}

.file-upload-container:hover {
    background-color: var(--underlay04);
}

.file-upload-container svg {
    max-height: 50px;
    max-width: 50px;
    height: 100%;
    width: 100%;
    margin-bottom: 10px;
}

.files-uploaded-container {
    width: 100%;
}


.file-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 10px 0;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: var(--primary-color);
    position: relative;
}

/* Hover preview container */
.file-preview-hover {
    position: absolute;
    top: -120px;   /* show above file */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    padding: 5px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.file-preview-hover img {
    max-width: 150px;
    max-height: 150px;
    display: block;
}

/* Show preview only when hovering over the file */
.file-item:hover .file-preview-hover {
    display: block;
}

.file-preview {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.file-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

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

.progress-bar {
    width: 120px;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: #007bff;
    transition: width 0.3s;
}

.file-item .remove-button {
    background-color: transparent;
}

/* FILE MANAGEMENT */





/* ONBOARDING */
.onboarding-page {
    display: none;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--foreground-color);
    z-index: 99;
    transition: opacity 0.3s;
}

.onboarding-main-container {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

.onboarding-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.onboarding-title {
    margin: 0 0 5px;
    font-size: 22px;
    color: var(--text-color);
}

.onboarding-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--text-color-50);
}

.onboarding-cards-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: #fff;
}
.onboarding-cards-container ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.onboarding-cards-container li {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--secondary-color);
    margin: 0 20px;
    max-height: 400px;
    max-width: 300px;
    height: 100%;
    width: 100%;
    -webkit-filter: drop-shadow(2px 2px 2px transparent);
    filter: drop-shadow(2px 2px 2px transparent);
    color: var(--text-color-50);
    transition: filter 0.3s , transform 0.3s , color 0.3s;
}

.onboarding-cards-container li:hover {
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    cursor: var(--pointer);
    color: var(--text-color);
}

.onboarding-cards-container li:hover .onboarding-icon path {
    fill: var(--text-color);
}


.onboarding-overlay-text {
    display:flex;
    padding: 10px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    margin-top: auto;
    text-align: center;
    background-color: rgba(0,0,0,0.2);
    border-top: solid 2px rgba(255,255,255,0.5);
}

.onboarding-setup-container {
    display: none;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    opacity: 0;
    color: #fff;
    transition: opacity 0.3s;
}

.onboarding-generic-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.onboarding-generic-container-row {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--quadrary-color);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    width: 100%;
    flex: 1; /* take remaining vertical space below header */
    min-height: 0; /* crucial for proper flex overflow behavior */
}

.onboarding-generic-container-row vertical-line-separator {
    align-self: center;
    background-color: var(--hover-color);
}

.onboarding-setup-container h2 {
    margin-top: 0;
    font-size: 22px;
}

.onboarding-setup-container section:not(section:first-child) {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.onboarding-status-bar {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 80%;
    background-color: rgba(0,0,0,0.25);
    color: var(--text-color-50);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-bottom: solid 1px rgba(255,255,255,0.15);
}

.onboarding-card.complete {
    -webkit-filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    filter: drop-shadow(2px 2px 2px var(--dropShadow-color));
    transform: translate(-2px , -2px);
    cursor: var(--pointer);
    color: var(--text-color);
}

.onboarding-card.complete .onboarding-status-bar svg , .onboarding-card.complete .onboarding-icon svg path{
    fill: var(--text-color);
}

.onboarding-card.partial .onboarding-status-bar svg {
    fill: #ffb730;
}

.onboarding-status-bar.complete {
    background-color:var(--primary-color);
    color: var(--calendar-select);
    border-bottom: solid 1px var(--calendar-highlight);
}

.onboarding-status-bar.partial {
    background-color:var(--primary-color);
    color: #ffb730;
    border-bottom: solid 1px #ffb730;
}

.onboarding-status-bar svg {
    height: 25px;
    width: 25px;
    margin-left: 20px;
    fill: var(--text-color-25);
}

.setup-form-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: visible;
    background-color: var(--quadrary-color);
    min-height: 0;
    flex: 1;
}

.setup-form-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: 100%;
    overflow-y: scroll;
    min-height: 0;
    flex: 1;
}

.setup-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 620px;
    box-sizing: border-box;
    overflow-y: scroll;
}

.setup-form input:focus, .setup-form textarea:focus, .setup-form select:focus {
    outline: none;
    border: 1px solid var(--calendar-highlight);
    background: var(--quadrary-color);
}

.form-group {
    margin-bottom: 15px;
}
section optional-tag {
    margin-left: 0;
    margin-bottom: 5px;
    opacity: 0.75;
}
.form-group optional-tag {
    margin-left: 10px;
}


.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #ccc;
}

.form-group input , .form-group select ,  .form-group textarea{
    width: 100%;
    padding: 10px;
    border-radius: 2px;
    box-sizing: border-box;
    background: var(--secondary-color);
    color: #fff;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group.half {
    flex: 1;
}

.setup-footer {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.setup-btn {
    display: flex;
    margin-top: 20px;
    background: #288edf;
    border-radius: 2px;
    border: none;
    height: 40px;
    padding: 12px 20px;
    font-size: 15px;
    color: white;
    cursor: var(--pointer);
    align-items: center;
    justify-content: center;

}

.setup-btn:hover {
    background: #1c67ae;
}

.onboarding-icon {
    margin-top: auto;
}

.onboarding-icon svg{
    max-height: 75px;
    max-width: 75px;
    height: 100%;
    width: 100%;
}

#onboardingSelectionPage .onboarding-icon svg {
    max-height: 100px;
    max-width: 100px;
}

.onboarding-icon path {
    fill: var(--text-color-50);
    transition: fill 0.3s;
}
.onboarding-setup-container .generic-info-box {
    background-color: var(--quadrary-color);
}

.onboarding-stripe-logo {
    margin-bottom: auto;
}

.onboarding-stripe-logo path{
    fill: var(--text-color-25);
    transition: fill 0.3s;
}
.onboarding-stripe-logo:hover path {
    fill: #635bff;
}

.onboarding-tabs {
    margin-bottom: auto;
}


.onboarding-tab {
    background-color: transparent;
    color: var(--text-color-50, #ccc);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-bottom: 2px solid transparent;
}

.onboarding-tab.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--text-color);
}

.onboarding-tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.onboarding-tab-content.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}
/* PROGRESS */
.onboarding-progress-bar {
    width: 80%;
    max-width: 800px;
    margin: 20px auto 20px auto;
    color: #E4EEF6;
    font-family: monospace;
    text-align: center;
}

.onboarding-progress-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
}

.onboarding-progress-title {
    font-weight: bold;
    letter-spacing: 0.5px;
}

.onboarding-progress-count {
    font-style: italic;
    color: rgba(255,255,255,0.6);
}


.onboarding-step-track {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    position: relative;
    width: 70%;
}

.step-line {
    flex: 1;
    height: 4px;
    background-color: #1b1f24;
    transition: background-color 0.4s ease, width 0.4s ease;
}

.step-node {
    width: 16px;
    height: 16px;
    background-color: #1b1f24;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

.step-node.complete {
    background-color: var(--text-color);
    box-shadow: 0 0 10px rgba(0,179,255,0.2);
    transform: scale(1.05);
}

.step-line.complete {
    background-color: var(--text-color);
}

.step-node::after {
    content: attr(data-label);
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #ccc;
    white-space: nowrap;
    opacity: 0.8;
}


.onboarding-progress-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}


/* PROGRESS */



.onboarding-content-box-service {
    max-width: 600px;
    margin: 0 auto;
    padding: 25px;
    background: rgba(0,0,0,0.25);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onboarding-form label {
    display: block;
    margin-top: 15px;
    font-weight: 500;
    font-size: 14px;
}

.onboarding-form input,
.onboarding-form select,
.onboarding-form textarea {
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    border-radius: 2px;
    background-color: rgba(255,255,255,0.05);
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
}

.onboarding-row {
    display: flex;
    gap: 15px;
}

.onboarding-col {
    flex: 1;
}

.optional-tag {
    opacity: 0.6;
    font-size: 12px;
}

.onboarding-hint-box {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.onboarding-warning .generic-container-column  , .onboarding-warning .generic-container{
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.warning-guide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.input-highlight-missing {
    border: 1px solid var(--input-highlight) !important;
    box-shadow: 0 0 6px var(--input-highlight-shadow);
    animation: inputPulse 1s ease-in-out 20;
}



.onboarding-service-header-grid {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 0;
    box-sizing: border-box;
    background-color: var(--quadrary-color);
}

.onboarding-service-header {
    display: grid;
    grid-template-columns: 1fr 180px 120px 120px 120px 40px;
    gap: 8px;
    color: var(--text-color);
    font-weight: bold;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding: 0 10px;
}

.onboarding-service-header div{
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.onboarding-service-grid {
    position: relative;
    display: flex;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow-y: scroll;
    flex-direction: column;
    grid-template-columns: minmax(180px , 1fr) 180px 120px 120px 100px 40px;
    box-sizing: border-box;
    color: var(--text-color);
    font-size: 0.9rem;
}


.onboarding-service-row {
    display: grid;
    flex-direction: row;
    grid-template-columns: minmax(180px , 1fr) 180px 120px 120px 100px 40px;
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s , background 0.3s  , color 0.3s;
}

.onboarding-service-grid input,
.onboarding-service-grid select {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: inherit;
    padding: 4px 6px;
    border-radius: 4px;
    width: 90%;
    font-size: 0.85rem;
    transition: opacity 0.3s , background 0.3s , background-color 0.3s;
}

.onboarding-service-grid input:hover,
.onboarding-service-grid select:hover {
    background-color: var(--primary-color);
}

.onboarding-service-grid input:focus,
.onboarding-service-grid select:focus {
    border-color: var(--calendar-highlight);
    background-color: var(--primary-color);
    outline: none;
}

.onboarding-service-grid > .onboarding-service-row:nth-child(even) {
    background-color: rgba(255,255,255,0.02);
}

.onboarding-service-row input,
.onboarding-service-row select,
.onboarding-service-row textarea {
    background-color: var(--hover-color);
    border: 1px solid rgba(255,255,255,0.15);
    color: inherit;
    padding: 4px 6px;
    border-radius: 2px;
    width: 90%;
    font-size: 0.85rem;
    transition: border-color 0.3s , background-color 0.3s , background 0.3s;
}

.onboarding-service-row input::placeholder,
.onboarding-service-row select::placeholder,
.onboarding-service-row textarea::placeholder {
    color: var(--text-color-25);
}

.onboarding-service-list-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 1000px;
    max-height: 600px;
    margin-bottom: auto;
    overflow: visible;
}

.onboarding-service-list-container {
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 0;
    flex: 1;
    position: relative;
    flex-direction: column;
    background-color: var(--quadrary-color);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    box-sizing: border-box;

}

.onboarding-service-empty {
    display: flex;
    justify-content: center;
    margin: auto 0;
    text-align: center;
    padding: 20px;
}

.delete-service-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.2rem;
    cursor: var(--pointer);
    justify-self: center;
    align-self: center;
    transition: color 0.3s ease;
}

.delete-service-btn:hover {
    color: #ff6666;
}

.onboarding-tip {
    position: absolute;
    width: 100%;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}


.onboarding-invitation-information {
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 40px;
    border-radius: 2px;
    width: 100%;
    max-width: 950px;
    margin-right: auto;
    color: var(--text-color);
}


.onboarding-invitation-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 400px;
    height: 100%;
    width: 100%;
    min-width: 200px;
    margin-left: 20px;
    color: var(--text-color);
    /*background: linear-gradient(90deg, rgba(255,255,255,0.02) 40%, transparent 100%);*/
}

.onboarding-invitation-container .toggle-square-btn {
    padding: 10px;
    box-sizing: border-box;
    max-height: 30px;
    max-width: 30px;
    background-color: var(--primary-color);
}
.onboarding-invitation-container .toggle-square-btn svg {
    max-height: 20px;
}

.onboarding-views-wrapper {
    position: relative;
    width: 100%;
    min-height: 180px; /* adjust to your expected content height */
}


.onboarding-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.onboarding-view.active-view {
    opacity: 1;
    pointer-events: auto;
}

.onboarding-invitation-list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    overflow-y: scroll;
}

.onboarding-view.hidden {
    display: none;
}

.onboarding-view.active-view {
    display: block;
}

.invitation-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invitation-title {
    font-family: monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-color);
}

.invitation-subtitle {
    font-size: 0.9rem;
    color: var(--text-color-50);
    margin-top: -4px;
}

.invitation-owner {
    font-size: 0.9rem;
    color: var(--text-color-75);
}
.invitation-owner span {
    color: var(--calendar-select);
}

.invitation-section {
    margin-top: 1rem;
}

.invitation-section + .invitation-section {
    border-top: 1px solid var(--hover-color);
    padding-top: 0.75rem;
}

.section-label {
    font-size: 0.75rem;
    color: var(--text-color-50);
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.section-value {
    font-size: 0.9rem;
    color: var(--text-color);
}

.level-bar {
    background: rgba(255,255,255,0.05);
    height: 6px;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}
.level-progress {
    background: var(--calendar-select);
    height: 100%;
    transition: width 0.3s ease;
}

.level-info {
    font-size: 0.8rem;
    color: var(--text-color-50);
}

.invitation-actions {
    display: flex;
    margin-top: 1rem;
    gap: 0.5rem;
}

.invite-accept, .invite-decline {
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 0.85em;
    cursor: var(--pointer);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.invite-accept {
    background-color: var(--calendar-select);
    color: var(--text-color);
}
.invite-accept:hover {
    background-color: var(--calendar-highlight);
}

.invite-decline {
    background-color: transparent;
    border: 1px solid var(--text-color-25);
    color: var(--text-color-75);
}
.invite-decline:hover {
    border-color: var(--text-color);
    background-color: var(--text-color);
    color: var(--primary-color);
}



.invite-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--hover-color);
    border-radius: 2px;
    border: 1px solid transparent;
    padding: 12px 16px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease , border 0.3s;
    cursor: var(--pointer);
}

.invite-card:hover {
    background-color: var(--primary-color);
}

.invite-card.active {
    border-color: var(--calendar-select);
    border: 1px solid var(--text-color);
    background-color: var(--hover-color);
}

.invite-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invite-location-name {
    font-weight: bold;
    color: var(--text-color);
}

.invite-role,
.invite-date {
    font-size: 0.85em;
    color: var(--text-color-50);
}

.invite-actions {
    display: flex;
    gap: 8px;
}

.invitation-placeholder {
    color: var(--text-color-50);
    font-style: italic;
}
/* AVAILABILITY */
.availability-days-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.availability-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 2px;
    background: rgba(255,255,255,0.05);
    transition: background 0.2s;
}

.availability-row .generic-toggle-container {
    flex-direction: row;
}

.availability-row:hover {
    background: rgba(255,255,255,0.08);
}

.availability-day-label {
    width: 90px;
    font-weight: 500;
}
.availability-times {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.availability-times input {
    width: 110px;
    padding: 3px 5px;
    background: transparent;
    color: var(--text-color, #e4e4e4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
}

.availability-working-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.onboarding-availability-hours-preview-container {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    flex-direction: column;
    min-height: 0;
    font-size: 0.9rem;
}

.location-hours-modal {
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
    min-height: 0;
}



.location-hours-box {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    height: 100%;
    flex: 1;
    margin-top: 40px;
    width: 80vw;
    min-height: 0;
    background-color: var(--foreground-color);
    color: var(--text-secondary-color);
    transition: height 0.3s , width 0.3s;
}

/* Allow inner scroll if needed */
.hours-setup-container {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    flex: 1;
    height: 100%;
    width: 100%;
}

/* Header with copy button */
.location-hours-header , .availability-hours-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    height: fit-content;
    color: var(--text-color);
}

/* ===== Grid Layout ===== */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 15px;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.location-hours-day-column  ,.userAvailability-hours-day-column{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 5px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    transition: background-color 0.3s , opacity 0.3s ;
}

.location-hours-day-column.disabled-day ,.userAvailability-hours-day-column.disabled-day{
    opacity: 0.4;
}

/* ===== Day Header ===== */
.location-hours-day-headers {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.location-hours-day-headers h4 {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 600;
    margin: 4px 0;
}

/* ===== Time Frames ===== */
.frames-container {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    gap: 6px;
    flex: 1;
    min-height: 0;

}

.time-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px;
    box-sizing: border-box;
    border-radius: 4px;
}

.time-frame input[type="time"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    border-radius: 4px;
    padding: 3px 5px;
    box-sizing: border-box;
    font-size: 13px;
    width:100%;
    max-width: 85px;
}

/* ===== Buttons ===== */
.add-frame-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color);
    padding: 4px;
    font-size: 12px;
    border-radius: 4px;
    cursor: var(--pointer);
    margin-top: 6px;
    transition: background 0.2s;
}

.add-frame-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.remove-frame-btn {
    background-color: var(--secondary-color);
    border: none;
    color: var(--text-color-75);
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    cursor: var(--pointer);
    font-size: 14px;
    margin-top: 5px;
    line-height: 1;
}

.remove-frame-btn:hover {
    color: var(--text-color);
    background-color: #f8404e;
}

.location-hours-selected-day {
    outline: 1px solid var(--hover-color);
    background: rgba(40, 142, 223, 0.1);
}

/* ===== Footer ===== */
.hours-footer {
    display: flex;
    justify-content: center;
}

.hours-preview {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-sizing: border-box;
    color: var(--text-color);
    font-size:  0.9rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
    transition: border 0.3s, background 0.3s;
}

.availability-preview  {
    border-radius: 2px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-sizing: border-box;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 6px;
    transition: border 0.3s, background 0.3s;
}


.hours-preview:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.hours-preview-line {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    padding: 4px;
    box-sizing: border-box;
    border-radius: 2px;
    transition: background-color 0.3s;
}
.hours-preview-line:hover {
    background-color: var(--secondary-color);
}
.hours-preview-line:last-child {
    border-bottom: none;
}

.hours-preview-day {
    font-weight: 600;
    color: var(--text-color);
    width: 60px;
}

.hours-preview-timeframes {
    flex: 1;
    text-align: right;
    color: var(--text-secondary-color);
}

/* ===== Responsive Behavior ===== */
@media (max-width: 1100px) {
    .outstanding-task-box {
        max-width: 900px;
    }
}

@media (max-width: 800px) {
    .outstanding-task-box {
        width: 95%;
        max-height: 90vh;
    }

    .hours-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .hours-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


    /* ONBOARDING */

/* TEST */



.blank {
    text-decoration: none;
    border: none;
    width: 0;
    height: 0;
    padding: 0;
    margin:  0;
}

.top-right-absolute {
    position: absolute;
    right: 25px;
    top: 25px;
}

.generic-svg-icon {
    display: flex;
    height: fit-content;
    width: fit-content;
    cursor: var(--pointer);
}

.generic-svg-icon svg{
    height: 20px;
    width: 20px;
    fill: var(--text-color-50);
    transition: fill 0.3s;
}

.generic-svg-icon:hover svg{
    fill: var(--text-color);
}

.hint-text {
    color: var(--text-color-50);
    font-size: 0.8rem;
}

.text-placeholder {
    color: var(--text-color-50);
    font-style: italic;
    text-align: center;
}

.highlight-text {
    color: #42aaff;
    font-weight: 600;
}