html,
body {
    padding: 0px;
    margin: 0px;
    display: inline;
    min-height: 100vh;
    flex-grow: 1;
    background-color: var(--white);
}

div,
span,
input,
select,
textarea {
    color: var(--default-text-color);
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify {
    justify-content: center;
}

.align {
    align-items: center;
}

.main {
    width: 100vw;
    height: 100vh;
}

* {
    font-family: "Noto Sans", sans-serif;
}

.pointer {
    cursor: pointer !important;
}

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

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.title {
    font-size: 3em;
    margin-left: 1.5rem;
    font-weight: 500;
    color: var(--default-text-color);
}

.btn.red-background,
.btn.green-background {
    color: white !important;
}

.space-between {
    justify-content: space-between;
}

.fill {
    font-variation-settings: 'FILL' 1;
}

.no-select {
    cursor: default;
}

.red-background {
    background-color: var(--red) !important;
}

.red-color {
    color: var(--red) !important;
}

.red-border {
    color: var(--red) !important;
}

.green-background {
    background-color: var(--green) !important;
}

.green-color {
    color: var(--green) !important;
}

.black-color {
    color: var(--black) !important;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

:root {
    /* main colors */
    --red: #b92929;
    --green: #227327;
    --light-green: #8bdd98;
    --white: white;
    --light-grey: #E5E5E5;
    --grey: #9f9f9f;
    --hovered-light-grey: #b4b4b4;
    --dark-grey: #636363;
    --black: #242424;
    --full-black: black;
    --extra-light-grey: #f4f4f4;


    /* custom colors */
    --default-text-color: var(--black);

    --black-btn-background: var(--black);
    --black-btn-text: var(--white);

    --modal-background: #000000c7;

    --black-unmodified: #151515;
    --darker-black-unmodified: #242424;
    --white-unmodified: white;

    /* specific colors */
    --header-white: rgb(240, 240, 240);
    --header-background: var(--black);
}

[data-theme="dark"] {
    --white: #151515;
    --black: #fdfdfd;
    --dark-theme-dark-grey: #292929;
    --grey: #858585;
    --light-grey: #292929;
    --extra-light-grey: #1c1c1c;

    --black-btn-background: rgb(240, 240, 240);

    /* specific colors */
    --header-background: var(--light-grey);

    input {
        color-scheme: dark;
    }
    
}
[data-theme="dark-background"]{
    body{
        background-color: var(--black) !important;
    }
}

.text-no-wrap {
    white-space: nowrap !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888888;
    border-radius: .5rem;
}

.custom-scrollbar::-webkit-scrollbar {
    width: .2rem;
    height: .3rem;
    background: none;
}