body {
    overflow-anchor: none;
}

/* KLEUR variabelen voor de volledige website */
:root {
    --grey: #eee;
    --darkgrey: rgba(112, 121, 121, 0.6);
    --bluegrey: rgba(134, 153, 153, 0.50);
    --blue: rgb(102, 153, 153);
    --green: rgb(153, 204, 153);

    --sagegreen: #7a8f7a; /* Saliegroen */
    --alfasage: #7a8f7a3f; /* Saliegroen alfa */
    --darksage: #606f60; /* Saliegroen donker */

    --beige: #F4EFEA; /* Warm beige */
    --sand: #E6DCCF; /* Zand */
}


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

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

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



/* BOOTSTRAP COLORS */

/*.bg-primary { blauw }*/

/*.bg-secondary { grijs }*/

/*.bg-light { witachtig }*/

/*.bg-dark { donkergrijs }*/

/*.bg-danger { rood }*/


.bg-success { /* groen */
    background-color: #99CC99BF !important;
}

.bg-warning { /* geel */
    background-color: var(--sand) !important;
}

.bg-info { /* blauw-turkoois */
    background-color: var(--beige) !important;
}





/* NAVBAR mobiel: witruimte links bij uitgeklapt menu */
@media (max-width: 991.98px) {
    .navbar-collapse .nav-link.active {
        padding-left: 1rem !important;
    }
}




/* NAVBAR actieve link */
.navbar .nav-link.active,
.navbar a.active {
    background-color: var(--sagegreen);
    color: var(--beige) !important;
    border-radius: 5px;
}



/* KNOPPEN */

button {
    padding: 8px;
    background-color: var(--beige);
    color: var(--darksage);
    border: 0px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    color: var(--beige);
    background-color: var(--sagegreen);
}



/* bootstrap outline button met custom kleuren */
.btn-outline-dark {
    background-color: transparent !important;
    color: var(--darksage) !important;
    border: 2px solid var(--darksage) !important;
}

.btn-outline-dark:hover {
    background-color: var(--sagegreen) !important;
    color: var(--beige) !important;
    border: 2px solid var(--sagegreen) !important;
}

.btn-outline-dark.active {
    background-color: var(--sagegreen) !important;
    color: var(--beige) !important;
    border: 2px solid var(--sagegreen) !important;
}



/* TOOLTIPS */

.custom-tooltip {
    --bs-tooltip-bg: var(--beige);
    --bs-tooltip-color: var(--sagegreen);
}



/* FORMULIEREN */

.form-control:focus {
    border-color: var(--sagegreen) !important;
    box-shadow: 0 0 0 0.25rem rgba(122, 143, 122, 0.25) !important;
}

.form-select:focus {
    border-color: var(--sagegreen) !important;
    box-shadow: 0 0 0 0.25rem rgba(122, 143, 122, 0.25) !important;
}

.form-check-input {
    accent-color: var(--green);
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:checked {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.form-check-input:hover {
    box-shadow: 0 0 8px rgba(153, 204, 153, 0.5);
}