:root {
    --grey1: #45475a;
    --grey2: #585b70;
    --blue: #89b4fa;
    --green: #a6e3a1;
    --black: #1e1e2e;
    --white: #cdd6f4;
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --lavender: #b4befe;
    --surface0: #313244;
    --surface1: #45475a;
    --surface2: #585b70;
    --overlay0: #6c7086;
    --overlay1: #7f849c;
    --overlay2: #9399b2;
    --text: #cdd6f4;
    --subtext1: #bac2de;
    --subtext0: #a6adc8;
    --base: #1e1e2e;
    --mantle: #181825;
    --crust: #11111b;
}


.btn {
    padding: 1% 3%;
    cursor: pointer;
    height: fit-content;
    width: fit-content;
    border-radius: 5px;
    border: none;
    display: flex;
    background-color: var(--white);
    color: var(--black);
    outline: none;
    transition: filter 0.2s ease;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    text-decoration: none;
}

.btn:hover {
    filter: brightness(0.8);
}

.btn:active {
    filter: brightness(0.6);
}

.btn-primary {
    background-color: var(--blue);
    color: var(--black);
}

.btn-success {
    background-color: var(--green);
    color: var(--black);
}

.btn-danger {
    background-color: var(--red);
    color: var(--black);
}

.btn-warning {
    background-color: var(--yellow);
    color: var(--black);
}

.form-input {
    padding: 4% 0%;
    border: none;
    border-radius: 5px;
    color: var(--white);
    background: var(--black);
    transition: border 0.2s ease;
    width: 100%;
    outline: none;
    box-sizing: border-box;
}

input.form-input,
select.form-input {
    border-bottom: 2px solid var(--white);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

input.form-input:focus,
select.form-input:focus {
    border-bottom: 2px solid var(--blue);
}


.checkbox {
    appearance: none;
    min-width: 1rem;
    min-height: 1rem;
    background-color: var(--white);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

*:disabled {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
}

.checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='800px' width='800px'%3E%3Crect fill='%2311111b' height='24' width='24'%3E%3C/rect%3E%3Cpath stroke-linejoin='round' stroke-linecap='round' stroke-width='2' stroke='%23cdd6f4' d='M4 12.6111L8.92308 17.5L20 6.5'%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
}