:root {

    /* Bootstrap color pallet*/
    /* Primary */
    --bs-secondary:#154273    ;
    --bs-secondary-rgb: 21, 66, 115;
    --bs-btn-secondary-color: #fff;
    /* Secondary */
    --bs-primary: #01689b;
    --bs-primary-rgb:1, 104, 155;
    --bs-btn-primary-color: #fff;
    /* Success */
    --bs-success: #28a745;
    --bs-success-rgb: 40, 167, 69;
    --bs-btn-success-color: #fff;
    /* Danger */
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-btn-danger-color: #fff;
    /* Warning */
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-btn-warning-color: #212529;
    /* Info */
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
    --bs-btn-info-color: #fff;
    /* Light */
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-btn-light-color: #212529;
    /* Dark */
    --bs-dark: #343a40;
    --bs-dark-rgb: 52, 58, 64;
    --bs-btn-dark-color: #fff;

    /*extra*/
    --bs-transparent: transparent;
    --bs-btn-disabled-opacity: 0.5; /* Pas de gewenste transparantie aan */

    /* Do not edit these variables, only percentages*/
    /* Primary */
    --bs-btn-primary-bg: var(--bs-primary);
    --bs-btn-primary-border-color: var(--bs-primary);
    --bs-btn-primary-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, white 15%);
    --bs-btn-primary-hover-border-color: color-mix(in srgb, var(--bs-primary) 90%, white 10%);
    --bs-btn-primary-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black 20%);
    --bs-btn-primary-active-border-color: color-mix(in srgb, var(--bs-primary) 100%, black 0%);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 30%, white 70%);
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 50%, white 50%); 
    --bs-table-primary-bg:var(--bs-white);

    /*extra */
    --bs-table-transparent:var(--bs-transparent);
    --bs-table-white:var(--bs-white);
    --bs-table-striped:var(--bs-light);

    /* Secondary */
    --bs-btn-secondary-bg: var(--bs-secondary);
    --bs-btn-secondary-border-color: var(--bs-secondary);
    --bs-btn-secondary-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, white 15%);
    --bs-btn-secondary-hover-border-color: color-mix(in srgb, var(--bs-secondary) 90%, white 10%);
    --bs-btn-secondary-active-bg: color-mix(in srgb, var(--bs-secondary) 80%, black 20%);
    --bs-btn-secondary-active-border-color: color-mix(in srgb, var(--bs-secondary) 100%, black 0%);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 30%, white 70%);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 50%, white 50%);

    /* Success */
    --bs-btn-success-bg: var(--bs-success);
    --bs-btn-success-border-color: var(--bs-success);
    --bs-btn-success-hover-bg: color-mix(in srgb, var(--bs-success) 85%, white 15%);
    --bs-btn-success-hover-border-color: color-mix(in srgb, var(--bs-success) 90%, white 10%);
    --bs-btn-success-active-bg: color-mix(in srgb, var(--bs-success) 80%, black 20%);
    --bs-btn-success-active-border-color: color-mix(in srgb, var(--bs-success) 100%, black 0%);
    --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 30%, white 70%);
    --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 50%, white 50%);

    /* Danger */
    --bs-btn-danger-bg: var(--bs-danger);
    --bs-btn-danger-border-color: var(--bs-danger);
    --bs-btn-danger-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, white 15%);
    --bs-btn-danger-hover-border-color: color-mix(in srgb, var(--bs-danger) 90%, white 10%);
    --bs-btn-danger-active-bg: color-mix(in srgb, var(--bs-danger) 80%, black 20%);
    --bs-btn-danger-active-border-color: color-mix(in srgb, var(--bs-danger) 100%, black 0%);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 30%, white 70%);
    --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 50%, white 50%);

    /* Warning */
    --bs-btn-warning-bg: var(--bs-warning);
    --bs-btn-warning-border-color: var(--bs-warning);
    --bs-btn-warning-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, white 15%);
    --bs-btn-warning-hover-border-color: color-mix(in srgb, var(--bs-warning) 90%, white 10%);
    --bs-btn-warning-active-bg: color-mix(in srgb, var(--bs-warning) 80%, black 20%);
    --bs-btn-warning-active-border-color: color-mix(in srgb, var(--bs-warning) 100%, black 0%);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 30%, white 70%);
    --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 50%, white 50%);

    /* Info */
    --bs-btn-info-bg: var(--bs-info);
    --bs-btn-info-border-color: var(--bs-info);
    --bs-btn-info-hover-bg: color-mix(in srgb, var(--bs-info) 85%, white 15%);
    --bs-btn-info-hover-border-color: color-mix(in srgb, var(--bs-info) 90%, white 10%);
    --bs-btn-info-active-bg: color-mix(in srgb, var(--bs-info) 80%, black 20%);
    --bs-btn-info-active-border-color: color-mix(in srgb, var(--bs-info) 100%, black 0%);
    --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 30%, white 70%);
    --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 50%, white 50%);

    /* Light */
    --bs-btn-light-bg: var(--bs-light);
    --bs-btn-light-border-color: var(--bs-light);
    --bs-btn-light-hover-bg: color-mix(in srgb, var(--bs-light) 85%, white 15%);
    --bs-btn-light-hover-border-color: color-mix(in srgb, var(--bs-light) 90%, white 10%);
    --bs-btn-light-active-bg: color-mix(in srgb, var(--bs-light) 80%, black 20%);
    --bs-btn-light-active-border-color: color-mix(in srgb, var(--bs-light) 100%, black 0%);
    --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 30%, white 70%);
    --bs-light-border-subtle: color-mix(in srgb, var(--bs-light) 50%, white 50%);

    /* Dark */
    --bs-btn-dark-bg: var(--bs-dark);
    --bs-btn-dark-border-color: var(--bs-dark);
    --bs-btn-dark-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, white 15%);
    --bs-btn-dark-hover-border-color: color-mix(in srgb, var(--bs-dark) 90%, white 10%);
    --bs-btn-dark-active-bg: color-mix(in srgb, var(--bs-dark) 80%, black 20%);
    --bs-btn-dark-active-border-color: color-mix(in srgb, var(--bs-dark) 100%, black 0%);
    --bs-dark-bg-subtle: color-mix(in srgb, var(--bs-dark) 30%, white 70%);
    --bs-dark-border-subtle: color-mix(in srgb, var(--bs-dark) 50%, white 50%);
}

/* kleuren (text) Specific Classes */

/* Button Specific Classes */
.btn-primary {
    --bs-btn-color: var(--bs-btn-primary-color);
    --bs-btn-bg: var(--bs-btn-primary-bg);
    --bs-btn-border-color: var(--bs-btn-primary-border-color);
    --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-primary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color);
}

/* Repeat button classes for each color */
.btn-secondary {
    --bs-btn-color: var(--bs-btn-secondary-color);
    --bs-btn-bg: var(--bs-btn-secondary-bg);
    --bs-btn-border-color: var(--bs-btn-secondary-border-color);
    --bs-btn-hover-bg: var(--bs-btn-secondary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-secondary-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-secondary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-secondary-active-border-color);
}

/* Success Button */
.btn-success {
    --bs-btn-color: var(--bs-btn-success-color);
    --bs-btn-bg: var(--bs-btn-success-bg);
    --bs-btn-border-color: var(--bs-btn-success-border-color);
    --bs-btn-hover-bg: var(--bs-btn-success-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-success-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-success-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-success-active-border-color);
}

/* Danger Button */
.btn-danger {
    --bs-btn-color: var(--bs-btn-danger-color);
    --bs-btn-bg: var(--bs-btn-danger-bg);
    --bs-btn-border-color: var(--bs-btn-danger-border-color);
    --bs-btn-hover-bg: var(--bs-btn-danger-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-danger-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-danger-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-danger-active-border-color);
}

/* Warning Button */
.btn-warning {
    --bs-btn-color: var(--bs-btn-warning-color);
    --bs-btn-bg: var(--bs-btn-warning-bg);
    --bs-btn-border-color: var(--bs-btn-warning-border-color);
    --bs-btn-hover-bg: var(--bs-btn-warning-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-warning-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-warning-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-warning-active-border-color);
}

/* Info Button */
.btn-info {
    --bs-btn-color: var(--bs-btn-info-color);
    --bs-btn-bg: var(--bs-btn-info-bg);
    --bs-btn-border-color: var(--bs-btn-info-border-color);
    --bs-btn-hover-bg: var(--bs-btn-info-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-info-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-info-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-info-active-border-color);
}

/* Light Button */
.btn-light {
    --bs-btn-color: var(--bs-btn-light-color);
    --bs-btn-bg: var(--bs-btn-light-bg);
    --bs-btn-border-color: var(--bs-btn-light-border-color);
    --bs-btn-hover-bg: var(--bs-btn-light-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-light-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-light-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-light-active-border-color);
}

/* Dark Button */
.btn-dark {
    --bs-btn-color: var(--bs-btn-dark-color);
    --bs-btn-bg: var(--bs-btn-dark-bg);
    --bs-btn-border-color: var(--bs-btn-dark-border-color);
    --bs-btn-hover-bg: var(--bs-btn-dark-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-dark-hover-border-color);
    --bs-btn-active-bg: var(--bs-btn-dark-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-dark-active-border-color);
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    pointer-events: none;
    opacity: var(--bs-btn-disabled-opacity);
   
    /* Gebruik de specifieke variabelen voor de kleur van de knop */
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.table-primary {
    --bs-table-bg: var(--bs-table-primary-bg);
}

.table-transparent{--bs-table-bg: (var(--bs-table-transparent))

}

.secondary-hover:hover {
    color:var(--bs-secondary);  /* Donkerdere kleur bij hover */
    font-weight: bold;
}


.active > .page-link, 
.page-link.active {
    z-index: 3;
    color: #ffffff; /* Zet de tekstkleur op wit */
    background-color: var(--bs-primary); /* Gebruik de primaire kleur voor de achtergrond */
    border-color: var(--bs-primary); /* Gebruik de primaire kleur voor de rand */
}

.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x); /* Padding voor links en rechts */
    font-size: var(--bs-pagination-font-size); /* Tekengrootte op basis van variabele */
    color: var(--bs-primary); /* Primaire kleur voor de tekst */
    text-decoration: none; /* Geen onderstreping */
    background-color: var(--bs-pagination-bg); /* Achtergrondkleur van de knop */
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color); /* Rand met breedte en kleur */
    transition: 
        color 0.15s ease-in-out, 
        background-color 0.15s ease-in-out, 
        border-color 0.15s ease-in-out, 
        box-shadow 0.15s ease-in-out; /* Animaties voor kleur, achtergrond, rand en schaduw */
}