:root{
    --pannel-color: #1e1e1e;
    --background-color: #101010;
    --accent-color: #b388f5;
    --accent-color-disabled:#382e47;
    --confirm-color: #63d7c6;
    --white: #e1e1e1;
    --light-gray: #9e9e9e;
    --error-color: #c26c7a;
    --error-color-dark: #731827;
    --success-color: #6cc278;

    --graph-orange-light: #ffbe76;
    --graph-orange-dark: #f0932b;
    --graph-red-light: #ff7979;
    --graph-red-dark: #eb4d4b;
    --graph-green-light: #badc58;
    --graph-green-dark: #6ab04c;
    --graph-blue-light: #7ed6df;
    --graph-blue-dark: #22a6b3;

    --large-font: 2rem;
    --input-font: 1rem;
    --button-font: 1.2rem;
    
    --button-weight: 600;
}
.alert-lower-bottom{
    position: absolute;
    z-index: 999999;
    background-color: var(--error-color);
    color: var(--background-color);
    box-sizing: border-box;
    padding: 5px 20px;
    border-radius: 5px;
    font-weight: var(--button-weight);
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px;
    animation: alertFadeIn .2s ease-in-out forwards;
}
/*-------- CHIPS --------*/
.info-chip{
    height: 20px;
    color: var(--background-color);
    width: fit-content;
    white-space: nowrap;
    padding: 2px 10px;
    display: flex;
    border-radius: 99999px;
    align-items: center;
    font-weight: 600;
    font-size: small;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.green-bg{
    background-color: var(--graph-green-dark);
}
.green-txt{
    color: var(--graph-green-light);
}
.orange-bg{
    background-color: var(--graph-orange-dark);
}
.red-bg{
    background-color: var(--graph-red-dark);
}
.blue-bg{
    background-color: var(--graph-blue-dark);
}
.error-alert{
    background-color: var(--error-color);
}
.success-alert{
    background-color: var(--success-color);
}
.alert-lower-bottom-fade-out{
    animation: alertFadeOut .2s ease-in-out forwards;
}
@keyframes alertFadeIn{
    0%{
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
    100%{
        transform: translateX(-50%) translateY(0px);
        opacity: 1;
    }
}
@keyframes alertFadeOut{
    0%{
        transform: translateX(-50%) translateY(0px);
        opacity: 1;
    }
    100%{
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
}