:root {
    --primary: #f11300;
    --primary-dark: #f11400cf;
    --primary-active: #f24333;

    --layer-0: rgb(15, 15, 15);
    --layer-1: rgb(23, 23, 23);
    --layer-1-5: rgba(23, 23, 23, .5);
    --layer-2: rgb(31, 31, 31);
    --layer-2-5: rgba(31, 31, 31, .5);
    --layer-3: rgb(42, 42, 42);
    --layer-3-5: rgba(42, 42, 42, .5);
    --layer-4: rgb(52, 52, 52);
    --layer-5: rgb(64, 64, 64);
    --layer-6: rgb(86, 86, 86);
    --layer-6-5: rgba(86, 86, 86, .5);
    --layer-6-6: rgba(86, 86, 86, .6);
    --layer-7: rgb(105, 105, 105);
    --layer-7-5: rgba(105, 105, 105, .5);

    --success: rgb(58, 151, 78);
    --success-active: rgb(54, 173, 80);

    --warning: rgb(218, 185, 39);
    --warning-active: rgb(234, 197, 34);

    --error: rgb(200, 29, 29);
    --error-active: rgb(236, 57, 57);

    --info: rgb(29, 95, 200);
    --info-active: rgb(38, 123, 213);

}

body {
    background-color: var(--layer-0);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    margin: 0;
    padding: 0;
    color: white;
    overflow: hidden;
}

body * {
    z-index: inherit;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24
}

@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins/Poppins-Medium.ttf) format("truetype");
}

* {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

::selection {
    background-color: rgb(248, 173, 12);
    color: white;
}

.tippy-box[data-theme~='error-tooltip'] {
    background-color: var(--error);
    color: white;
}

.tippy-box[data-theme~='error-tooltip'][data-placement^='top']>.tippy-arrow::before {
    border-top-color: var(--error);
}

.tippy-box[data-theme~='error-tooltip'][data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: var(--error);
}

.tippy-box[data-theme~='error-tooltip'][data-placement^='left']>.tippy-arrow::before {
    border-left-color: var(--error);
}

.tippy-box[data-theme~='error-tooltip'][data-placement^='right']>.tippy-arrow::before {
    border-right-color: var(--error);
}

.input-error {
    outline: 2px solid rgba(255, 0, 0, 0.5);
}