body {
    font-family: 'Roboto', sans-serif;
    /* font-family: Arial, Helvetica, sans-serif; */
    background-color: var(--color-bg);
    color: var(--color-fg);
}

:root {
    --sunbelt-green: #008545;
    --sunbelt-yellow: #FED203;

    --color-bg: #ffffff;
    --color-fg: #000000;

    --dark-bg: #121212;
    --dark-container: #282828;
    --dark-title: #8B8B8B !important;
    --dark-text: #E2E2E2 !important;
    --dark-input-bg: #1A1A1A;
    --dark-input-border: #1A1A1A;
    --dark-input-label-color: #656565;
    --bg-1: #fff;
    --bg-2: #fff;
    --bg-3: #fff;
    --bg-4: #f5f5f5;
    --text-1: #000;
    --text-2: #7e7e7e;
    --text-3: #7e7e7e;
    --border-1: #c1c1c187;
    --border-2: #c1c1c1;
    --border-3: #e7e7e7
}

.crt-white-logo {
    filter: invert(1)
}
.text-fg-color {
    color: var(--color-bg) !important;
}

.text-bg-color {
    color: var(--dark-bg) !important;
}

@media (prefers-color-scheme: dark) {
    .crt-white-logo {
        filter: invert(0)
    }
    body {
        background-color: var(--dark-bg);
        color: var(--dark-text);
    }
    .text-fg-color {
        color: var(--dark-bg) !important;
    }
    
    .text-bg-color {
        color: var(--dark-text) !important;
    }
    :root {
        --bg-1: #121212;
        --bg-2: #1e1e1e;
        --bg-3: #282828;
        --bg-4: #282828;
        --text-1: #e2e2e2;
        --text-2: #e2e2e2;
        --text-3: #8B8B8B;
        --border-1: #121212;
        --border-3: #393939
    }
    
}

input {
    border-radius: 4px;
}