body {
    background-color: var(--background-color);
    font-family: var(--font-family) !important;
    font-size: var(--default-text-size);
    color: var(--default-text-color);
}

header {
    background-color: var(--header-color) !important;
    color: var(--header-text-color) !important;
}

header .nav-link {
    color: var(--header-text-color) !important;
}

main {

}

footer {
    background-color: var(--footer-color) !important;
    color: var(--footer-text-color) !important;
    font-size: var(--footer-text-size);
}

footer a {
    color: var(--footer-text-color);
}

footer a:hover {
    color: var(--footer-hover-color);
}

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

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

.btn.btn-primary {
    background-color: var(--primary-color, #007bff);
    color: var(--primary-text-color, #fff);
    border-color: var(--primary-border-color, #007bff);
}

.btn.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color, #007bff), #fff 30%);
    color: color-mix(in srgb, var(--primary-text-color, #007bff), #fff 30%);
    border-color: color-mix(in srgb, var(--primary-border-color, #007bff), #fff 30%);
}

.btn.btn-secondary {
    background-color: var(--secondary-color, #6c757d);
    color: var(--secondary-text-color, #fff);
    border-color: var(--secondary-border-color, #6c757d);
}

.btn.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--secondary-color, #007bff), #fff 30%);
    color: color-mix(in srgb, var(--secondary-text-color, #007bff), #fff 30%);
    border-color: color-mix(in srgb, var(--secondary-border-color, #007bff), #fff 30%);
}

input, select, .custom-file-label, .custom-control .custom-control-label::before {
    background-color: var(--input-background-color, #fff);
    color: var(--input-text-color, #495057);
    border-color: var(--input-border-color, #ced4da) !important;
}

/* Restaura o ícone e a cor de fundo do checkbox quando marcado */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--input-border-focus-color, #007bff) !important;
    border-color: var(--input-border-focus-color, #007bff) !important;
}

.dropdown-menu {
    background-color: var(--menu-background-color, #fff);
}

.dropdown-item {
    color: var(--menu-text-color, #212529);
}