@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/*
Z-Index Reference
-----------------
Floating Drawer: 100
Menu Drawer: 990
Top Layout Header: 995
Toast: 1000
Loading Box: 1005
Autocomplete drawer: 1500
Login: 9999

Colors
-----------------
Standard background: #F5F7FA
https://www.colorxs.com/color/hex-24598A
Dark blue: #24598A
https://www.colorxs.com/color/hex-3d65a2
Blue: #3d65a2
https://www.colorxs.com/color/hex-446288
Medium Blue: #446288

Default Breakpoints
-------------------
xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px
*/

:root {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
    --field-height: 35px;
    --button-height: 35px;
    /* Color for all the bordered elements with a strong accent (fields) */
    --border-color-dark: #637990;
    /* Color for the bordered elements when they gain focus */
    --border-color-focused: #0b6bcb;
    /* Color used for the page title */
    --fg-title-color: #475259;
    /* Color for all the labels (form labels) */
    --fg-label-color: #24598a;
    /* Background and foreground for all the fields */
    --bg-field-color: #fbfcfe;
    --fg-field-color: #475259;
    /* Main background color and the text over it */
    --bg-main-color: #f5f7fa;
    --fg-main-color: #475259;
    /* Palette colors with different levels of intensity */
    --bg-light-color: #e4eaf1;
    --ag-light-color: #f1ebe4;
    --fg-light-color: #000000d6;
    --bg-medium-xlight-color: #c9d4e4;
    --fg-medium-xlight-color: #000000d6;
    --bg-medium-light-color: #a0b4cf;
    --fg-medium-light-color: #ffffff;
    --bg-medium-color: #6a8ab4;
    --fg-medium-color: #ffffffd6;
    --bg-dark-color: #446288;
    --fg-dark-color: #ffffffd6;
    /* Color used for the regular buttons */
    --bg-regular-color: #b9c5d1;
    --fg-regular-color: #000000d6;
    --bg-regular-hlight-color: #8499ae;
    --fg-regular-hlight-color: #ffffffd6;
    --bg-regular-contrast: #437eb4;
    /* Color used as the primary highlight color (primary buttons, outlines) */
    --bg-primary-color: #3d65a2;
    --fg-primary-color: #ffffffd6;
    --bg-primary-hlight-color: #437eb4;
    --fg-primary-hlight-color: #ffffffd6;
    --bg-primary-contrast: #437eb4;
    /* Color used as the secondary highligt color (secondary buttons) */
    --bg-secondary-color: #8f8f8f;
    --fg-secondary-color: #ffffffd6;
    --bg-secondary-light-color: #b8b8b8;
    --fg-secondary-light-color: #000000d6;
    /* Color used as the color to denote an active (turn on) elemet (active buttons) */
    --bg-active-color: #79b791;
    --fg-active-color: #000000d6;
    --bg-active-light-color: #a2cdb3;
    --fg-active-light-color: #/* Color of the background with error conditions and the text over it */;
    --bg-active-contrast: #24598a;
    /* Color of the elements with danger condition */
    --color-danger: #ed254e;
    /* Color of the elements with error condition */
    --color-error: #ed254e;
    /* Color of the background of the elements denoting error conditions and the text over it */
    --bg-error-color: #ed254e;
    --fg-error-color: #ffffff;
    --bg-error-hlight-color: #880e26;
    --fg-error-hlight-color: #ffffff;
    /* Color of the background of the elements denoting a warning conditions and the text over it */
    --bg-warn-color: #ffaa0d;
    --fg-warn-color: #000000d6;
    /* Color of the background of the elements denoting a successful conditions and the text over it */
    --bg-success-color: #a0c964;
    --fg-success-color: #000000;
    --bg-success-hlight-color: #8eb455;
    --fg-success-hlight-color: #000000;
    /* Color of the background of the elements denoting a positive action and the text over it */
    --bg-positive-color: #64c972;
    --fg-positive-color: #000000;
    --bg-positive-hlight-color: #50b05d;
    --fg-positive-hlight-color: #000000;
    /* Color of the background of the elements denoting a neutral conditions and the text over it */
    --bg-neutral-color: #cecece;
    --fg-neutral-color: #000000d6;
    /* Sizes and gaps */
    --size-tn: 2px;
    --size-xs: 5px;
    --size-sm: 10px;
    --size-md: 15px;
    --size-lg: 20px;
    --size-xl: 30px;
    /* Negative sizes (used to disable a positive size) */
    --size-ntn: -2px;
    --size-nxs: -5px;
    --size-nsm: -10px;
    --size-nmd: -15px;
    --size-nlg: -20px;
    --size-nxl: -30px;
    --size-field-height: 28px;
    /* Width of the menu when it is collapsed */
    --menu-width-collapsed: 45px;
    /* Small radius value (buttons, input, selects, pills, grids) */
    --rounded-radius-sm: 6px;
    /* Large radius value */
    --rounded-radius-lg: 12px;
    /* Data label sizing */
    --data-label-size: 1rem;
    --data-label-weight: 500;
}

HTML {
    height: 100%;
}

BODY {
    margin: 0;
    min-width: 320px;
    height: 100%;
    color: var(--fg-main-color);
    background-color: var(--bg-main-color);
    overflow: hidden;
}

H1,
H2,
H3,
H4,
h5 {
    margin: 0;
}

A {
    cursor: pointer;
    color: var(--bg-primary-hlight-color);
    text-decoration: none;
}
A:hover {
    color: var(--bg-primary-hlight-color) !important;
    text-decoration: underline;
}

DIV {
    box-sizing: border-box;
}

/* Top container with all the application content */
#root {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
}

/* Area showing a loading message in the center of the screen */
.ai-loading-box {
    position: absolute;
    width: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-medium-color);
    color: var(--fg-medium-color);
    border-radius: var(--rounded-radius-sm);
    font-size: 1.2rem;
    z-index: 1001;
    padding: var(--size-md);
    text-align: center;
    transition: all 1s ease-out;
}

/* Component to display a loading bar with an animation */
.ai-loader-bar {
    width: 100%;
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.ai-loader-bar::after {
    content: '';
    width: 192px;
    height: 4.8px;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: loader-bar-anim 2s linear infinite;
}

/* Visual style that enabled a pulsation effect */
.ai-pulse {
    animation: anim-pulse 1s linear infinite;
}

@keyframes loader-bar-anim {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}

@keyframes anim-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}