@charset "UTF-8";

:root {
    color-scheme: light;
    --primary: #FE0000;
    --primary-rgb: 254, 0, 0;
    --primary-light: #eb1e1e;
    --primary-dark: #e10404;
    --primary-with-opacity: rgba(var(--primary-rgb), 0.29);
    --primary-with-less-opacity: rgba(var(--primary-rgb), 0.561);
    --primary-with-more-opacity: rgba(var(--primary-rgb), 0.169);
    --secondary: #077982;
    --secondary-light: #0A8A8F;
    --secondary-dark: #066A6A;
    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-more: 14px;

    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-primary: 'Ubuntu', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --orange: #fd7e14;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --success: #28a745;
    --info: #2fcce0;
    --warning: #ffc107;
    --danger: #f44336;
    --light: #ced4da;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-nav: 1055px;

    --app-bar-height: 56px;
    --top-nav-height: 80px;
    --bottom-nav-height: 56px;

    --disabled-color: rgb(216 216 216);
    --disabled-color-contrast: rgba(0, 0, 0, .26);

    /** shadows **/
    --box-shadow-primary: 0 0.5rem 1.125rem -0.5rem rgba(var(--primary-rgb), 0.9);
    --box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%), 0px 1px 3px 0px rgb(0 0 0 / 8%);
    --box-shadow-light: 0px 0 12px 1px rgb(0 0 0 / 14%);
    --box-shadow-darker: 5px 20px 40px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 8px 30px 40px 0 rgba(0, 0, 0, 0.2);
    /* --box-shadow-lift: 4px 5px 14px 1px rgb(0 0 0 / 12%); */
    --box-shadow-lift: 4px 5px 34px 1px rgb(0 0 0 / 30%);
    --box-shadow-sm: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
    --box-shadow-sm-hover: 0 0.48rem 1.8rem 0 rgb(40 44 48 / 15%);

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

.font-primary {
    font-family: var(--font-family-primary) !important;
}

.font-monospace {
    font-family: var(--font-family-monospace) !important;
}

body,
body[data-mode="light"],
.light-ui {
    --font-color: #212529;
    --font-color-light: #515358;

    --primary-contrast: #fff;

    --bg-color: #fff;
    --bg-color-light: hsl(0deg 0% 94%);
    --bg-translucent: rgba(255, 255, 255, 0.72);

    --color-light: #f8f8f8;
    --card-color: #fff;
    --light: #ced4da;
    --light-primary: #e3f2fd;
    --light-grey: #80868b;
    --lighter: #f3f3f3;
    --dark: #151515;
    --dark-light: #292d32;
    --white: #fff;
    --font-white-secondary: #fff;

    --danger: #f44336;
    --danger-rgb: 255, 68, 68;
    --danger-contrast: #fff;
    --danger-light: #ed576b;
    --danger-dark: #cf3c4f;
    --danger-opacity: #f443362b;

    --success: #28a745;
    --success-rgb: 69, 204, 113;
    --success-contrast: #fff;
    --success-light: #42d77d;
    --success-dark: #27a75a;

    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;
    --warning-contrast: #212529;
    --warning-light: #ffca22;
    --warning-dark: #bd9519;
}

body[data-mode="dark"],
.dark-ui {
    color-scheme: dark;
    --primary: #FE0000;
    --primary-rgb: 254, 0, 0;
    --primary-dark: #eb1e1e;
    --primary-light: #e10404;
    --primary-contrast: #000;

    --secondary: #077982;
    --secondary-light: #066a6a;
    --secondary-dark: #0a8a8f;

    --font-color: #dbdbdb;
    --font-color-light: #bfbfc3;

    --bg-color: #121212;
    --bg-color-light: #1b1c1f;
    --bg-translucent: rgb(29 29 32 / 72%);

    --color-light: #1f1f1f;
    --card-color: #1f1f1f;
    --light: #6d6d6d;
    --light-primary: #e3f2fd;
    --light-grey: #80868b;
    --lighter: #2e2e2e;
    --dark: #fcfcfc;
    --dark-light: #c6c6c6;
    --white: #1d1d20;
    --font-white-secondary: #fcfcfc;

    /** shadows **/
    --box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 77%), 0px 1px 3px 0px rgb(0 0 0 / 36%);
    --box-shadow-light: 0px 0 12px 1px rgb(0 0 0 / 80%);
    --box-shadow-lift: 4px 5px 34px 1px rgb(0 0 0);
    --box-shadow-sm: 0 0.375rem 1.5rem 0 rgb(11 12 12 / 55%);
    --box-shadow-sm-hover: 0 0.48rem 1.8rem 0 0 rgb(0 0 0 / 55%);
    --box-shadow-primary: 0 0.5rem 1.125rem -0.5rem rgba(var(--primary-rgb), 0.8);

    --disabled-color: rgb(66 66 66);
    --disabled-color-contrast: rgba(255, 255, 255, .26);

    --danger: #ff4961;
    --danger-rgb: 255, 73, 97;
    --danger-contrast: #000;
    --danger-light: #ff5b71;
    --danger-dark: #e04055;

    --success: #2fdf75;
    --success-rgb: 47, 223, 117;
    --success-contrast: #000;
    --success-light: #44e283;
    --success-dark: #29c467;

    --warning: #ffd534;
    --warning-rgb: 255, 213, 52;
    --warning-contrast: #212529;
    --warning-light: #ffd948;
    --warning-dark: #e0bb2e;
}

select,
input,
textarea {
    accent-color: var(--primary);
}

@media (max-width: 576px) {
    :root {
    --top-nav-height: 68px;
    }
}