:root {
    --background: #f8f9fa;

    /* Primaire kleur variaties */
    --primary-50: #f1f8fa;
    --primary-100: #dbecf2;
    --primary-200: #bbdae6;
    --primary-300: #8cbed4;
    --primary-400: #5097b9;
    --primary-500: #3a7ea1;
    --primary-600: #326788;
    --primary-700: #2f5670;
    --primary-800: #2d495d;
    --primary-900: #293e50;
    --primary-950: #172635;

    /* Secundaire kleur variaties */
    --secundary-50: #f5f6f5;
    --secundary-100: #e4e9e7;
    --secundary-200: #cdd4d1;
    --secundary-300: #aab6b0;
    --secundary-400: #7f918a;
    --secundary-500: #64766f;
    --secundary-600: #56645f;
    --secundary-700: #495551;
    --secundary-800: #414947;
    --secundary-900: #3d4442;
    --secundary-950: #232928;

    --gray-50: #f5f8f8;
    --gray-100: #edf1f2;
    --gray-200: #dee5e7;
    --gray-300: #cad4d7;
    --gray-400: #b3c0c6;
    --gray-500: #9facb5;
    --gray-600: #8996a2;
    --gray-700: #808b95; /* DEFAULT */
    --gray-800: #616a72;
    --gray-900: #51585e;
    --gray-950: #2f3337;
    /* Accent kleur variaties */
    --accent-50: #f6f7f9;
    --accent-100: #ecedf2;
    --accent-200: #d5d9e2;
    --accent-300: #b0b6c9;
    --accent-400: #858fab;
    --accent-500: #667291;
    --accent-600: #515b78;
    --accent-700: #424a62;
    --accent-800: #3c4256;
    --accent-900: #333847;
    --accent-950: #22252f;
}


body {
    background-color: var(--background);
    color: var(--gray-700);
    accent-color: var(--primary-700);
}

/* background colors */
.bg-primary-50 {
    background-color: var(--primary-50);
}

.bg-primary-100 {
    background-color: var(--primary-100);
}

.bg-primary-200 {
    background-color: var(--primary-200);
}

.bg-primary-300 {
    background-color: var(--primary-300);
}

.bg-primary-400 {
    background-color: var(--primary-400);
}

.bg-primary-500 {
    background-color: var(--primary-500);
}

.bg-primary-600 {
    background-color: var(--primary-600);
}

.bg-primary-700 {
    background-color: var(--primary-700);
}

.bg-primary-800 {
    background-color: var(--primary-800);
}

.bg-primary-900 {
    background-color: var(--primary-900);
}

.bg-primary-950 {
    background-color: var(--primary-950);
}

.bg-secundary-50 {
    background-color: var(--secundary-50);
}

.bg-secundary-100 {
    background-color: var(--secundary-100);
}

.bg-secundary-200 {
    background-color: var(--secundary-200);
}

.bg-secundary-300 {
    background-color: var(--secundary-300);
}

.bg-secundary-400 {
    background-color: var(--secundary-400);
}

.bg-secundary-500 {
    background-color: var(--secundary-500);
}

.bg-secundary-600 {
    background-color: var(--secundary-600);
}

.bg-secundary-700 {
    background-color: var(--secundary-700);
}

.bg-secundary-800 {
    background-color: var(--secundary-800);
}

.bg-secundary-900 {
    background-color: var(--secundary-900);
}

.bg-secundary-950 {
    background-color: var(--secundary-950);
}

.bg-gray-50 {
    background-color: var(--gray-50);
}

.bg-gray-100 {
    background-color: var(--gray-100);
}

.bg-gray-200 {
    background-color: var(--gray-200);
}

.bg-gray-300 {
    background-color: var(--gray-300);
}

.bg-gray-400 {
    background-color: var(--gray-400);
}

.bg-gray-500 {
    background-color: var(--gray-500);
}

.bg-gray-600 {
    background-color: var(--gray-600);
}

.bg-gray-700 {
    background-color: var(--gray-700);
}

.bg-gray-800 {
    background-color: var(--gray-800);
}

.bg-gray-900 {
    background-color: var(--gray-900);
}

.bg-gray-950 {
    background-color: var(--gray-950);
}

.bg-accent-50 {
    background-color: var(--accent-50);
}

.bg-accent-100 {
    background-color: var(--accent-100);
}

.bg-accent-200 {
    background-color: var(--accent-200);
}

.bg-accent-300 {
    background-color: var(--accent-300);
}

.bg-accent-400 {
    background-color: var(--accent-400);
}

.bg-accent-500 {
    background-color: var(--accent-500);
}

.bg-accent-600 {
    background-color: var(--accent-600);
}

.bg-accent-700 {
    background-color: var(--accent-700);
}

.bg-accent-800 {
    background-color: var(--accent-800);
}

.bg-accent-900 {
    background-color: var(--accent-900);
}

.bg-accent-950 {
    background-color: var(--accent-950);
}

.bg-white {
    background-color: #FFFFFF;
}

.bg-black {
    background-color: #000000;
}


/* Text classes */
.text-primary-50 {
    color: var(--primary-50);
}

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

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

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

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

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

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

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

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

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

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

.text-secundary-50 {
    color: var(--secundary-50);
}

.text-secundary-100 {
    color: var(--secundary-100);
}

.text-secundary-200 {
    color: var(--secundary-200);
}

.text-secundary-300 {
    color: var(--secundary-300);
}

.text-secundary-400 {
    color: var(--secundary-400);
}

.text-secundary-500 {
    color: var(--secundary-500);
}

.text-secundary-600 {
    color: var(--secundary-600);
}

.text-secundary-700 {
    color: var(--secundary-700);
}

.text-secundary-800 {
    color: var(--secundary-800);
}

.text-secundary-900 {
    color: var(--secundary-900);
}

.text-secundary-950 {
    color: var(--secundary-950);
}

.text-gray-50 {
    color: var(--gray-50);
}

.text-gray-100 {
    color: var(--gray-100);
}

.text-gray-200 {
    color: var(--gray-200);
}

.text-gray-300 {
    color: var(--gray-300);
}

.text-gray-400 {
    color: var(--gray-400);
}

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

.text-gray-800 {
    color: var(--gray-800);
}

.text-gray-900 {
    color: var(--gray-900);
}

.text-gray-950 {
    color: var(--gray-950);
}

.text-accent-50 {
    color: var(--accent-50);
}

.text-accent-100 {
    color: var(--accent-100);
}

.text-accent-200 {
    color: var(--accent-200);
}

.text-accent-300 {
    color: var(--accent-300);
}

.text-accent-400 {
    color: var(--accent-400);
}

.text-accent-500 {
    color: var(--accent-500);
}

.text-accent-600 {
    color: var(--accent-600);
}

.text-accent-700 {
    color: var(--accent-700);
}

.text-accent-800 {
    color: var(--accent-800);
}

.text-accent-900 {
    color: var(--accent-900);
}

.text-accent-950 {
    color: var(--accent-950);
}

.text-white {
    color: #FFFFFF;
}

.text-black {
    color: #000000;
}

/* Text classes */
.text-primary-50 {
    color: var(--primary-50);
}

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

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

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

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

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

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

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

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

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

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

.text-secundary-50 {
    color: var(--secundary-50);
}

.text-secundary-100 {
    color: var(--secundary-100);
}

.text-secundary-200 {
    color: var(--secundary-200);
}

.text-secundary-300 {
    color: var(--secundary-300);
}

.text-secundary-400 {
    color: var(--secundary-400);
}

.text-secundary-500 {
    color: var(--secundary-500);
}

.text-secundary-600 {
    color: var(--secundary-600);
}

.text-secundary-700 {
    color: var(--secundary-700);
}

.text-secundary-800 {
    color: var(--secundary-800);
}

.text-secundary-900 {
    color: var(--secundary-900);
}

.text-secundary-950 {
    color: var(--secundary-950);
}

.text-gray-50 {
    color: var(--gray-50);
}

.text-gray-100 {
    color: var(--gray-100);
}

.text-gray-200 {
    color: var(--gray-200);
}

.text-gray-300 {
    color: var(--gray-300);
}

.text-gray-400 {
    color: var(--gray-400);
}

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

.text-gray-800 {
    color: var(--gray-800);
}

.text-gray-900 {
    color: var(--gray-900);
}

.text-gray-950 {
    color: var(--gray-950);
}

.text-accent-50 {
    color: var(--accent-50);
}

.text-accent-100 {
    color: var(--accent-100);
}

.text-accent-200 {
    color: var(--accent-200);
}

.text-accent-300 {
    color: var(--accent-300);
}

.text-accent-400 {
    color: var(--accent-400);
}

.text-accent-500 {
    color: var(--accent-500);
}

.text-accent-600 {
    color: var(--accent-600);
}

.text-accent-700 {
    color: var(--accent-700);
}

.text-accent-800 {
    color: var(--accent-800);
}

.text-accent-900 {
    color: var(--accent-900);
}

.text-accent-950 {
    color: var(--accent-950);
}

.text-white {
    color: #FFFFFF;
}

.text-black {
    color: #000000;
}

/* Text classes */
.fill-primary-50 {
    color: var(--primary-50);
}

.fill-primary-100 {
    color: var(--primary-100);
}

.fill-primary-200 {
    color: var(--primary-200);
}

.fill-primary-300 {
    color: var(--primary-300);
}

.fill-primary-400 {
    color: var(--primary-400);
}

.fill-primary-500 {
    color: var(--primary-500);
}

.fill-primary-600 {
    color: var(--primary-600);
}

.fill-primary-700 {
    color: var(--primary-700);
}

.fill-primary-800 {
    color: var(--primary-800);
}

.fill-primary-900 {
    color: var(--primary-900);
}

.fill-primary-950 {
    color: var(--primary-950);
}

.fill-secundary-50 {
    color: var(--secundary-50);
}

.fill-secundary-100 {
    color: var(--secundary-100);
}

.fill-secundary-200 {
    color: var(--secundary-200);
}

.fill-secundary-300 {
    color: var(--secundary-300);
}

.fill-secundary-400 {
    color: var(--secundary-400);
}

.fill-secundary-500 {
    color: var(--secundary-500);
}

.fill-secundary-600 {
    color: var(--secundary-600);
}

.fill-secundary-700 {
    color: var(--secundary-700);
}

.fill-secundary-800 {
    color: var(--secundary-800);
}

.fill-secundary-900 {
    color: var(--secundary-900);
}

.fill-secundary-950 {
    color: var(--secundary-950);
}

.fill-gray-50 {
    color: var(--gray-50);
}

.fill-gray-100 {
    color: var(--gray-100);
}

.fill-gray-200 {
    color: var(--gray-200);
}

.fill-gray-300 {
    color: var(--gray-300);
}

.fill-gray-400 {
    color: var(--gray-400);
}

.fill-gray-500 {
    color: var(--gray-500);
}

.fill-gray-600 {
    color: var(--gray-600);
}

.fill-gray-700 {
    color: var(--gray-700);
}

.fill-gray-800 {
    color: var(--gray-800);
}

.fill-gray-900 {
    color: var(--gray-900);
}

.fill-gray-950 {
    color: var(--gray-950);
}

.fill-accent-50 {
    color: var(--accent-50);
}

.fill-accent-100 {
    color: var(--accent-100);
}

.fill-accent-200 {
    color: var(--accent-200);
}

.fill-accent-300 {
    color: var(--accent-300);
}

.fill-accent-400 {
    color: var(--accent-400);
}

.fill-accent-500 {
    color: var(--accent-500);
}

.fill-accent-600 {
    color: var(--accent-600);
}

.fill-accent-700 {
    color: var(--accent-700);
}

.fill-accent-800 {
    color: var(--accent-800);
}

.fill-accent-900 {
    color: var(--accent-900);
}

.fill-accent-950 {
    color: var(--accent-950);
}

.fill-white {
    color: #FFFFFF;
}

.fill-black {
    color: #000000;
}

/* Fontgewicht klassen */
.text-thin {
    font-weight: 100;
}

.text-extralight {
    font-weight: 200;
}

.text-light {
    font-weight: 300;
}

.text-normal {
    font-weight: 400;
}

.text-medium {
    font-weight: 500;
}

.text-semibold {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

.text-extrabold {
    font-weight: 800;
}

.text-black {
    font-weight: 900;
}

.border-primary-50 {
    border-color: var(--primary-50);
}

.border-primary-100 {
    border-color: var(--primary-100);
}

.border-primary-200 {
    border-color: var(--primary-200);
}

.border-primary-300 {
    border-color: var(--primary-300);
}

.border-primary-400 {
    border-color: var(--primary-400);
}

.border-primary-500 {
    border-color: var(--primary-500);
}

.border-primary-600 {
    border-color: var(--primary-600);
}

.border-primary-700 {
    border-color: var(--primary-700);
}

.border-primary-800 {
    border-color: var(--primary-800);
}

.border-primary-900 {
    border-color: var(--primary-900);
}

.border-primary-950 {
    border-color: var(--primary-950);
}

.border-secundary-50 {
    border-color: var(--secundary-50);
}

.border-secundary-100 {
    border-color: var(--secundary-100);
}

.border-secundary-200 {
    border-color: var(--secundary-200);
}

.border-secundary-300 {
    border-color: var(--secundary-300);
}

.border-secundary-400 {
    border-color: var(--secundary-400);
}

.border-secundary-500 {
    border-color: var(--secundary-500);
}

.border-secundary-600 {
    border-color: var(--secundary-600);
}

.border-secundary-700 {
    border-color: var(--secundary-700);
}

.border-secundary-800 {
    border-color: var(--secundary-800);
}

.border-secundary-900 {
    border-color: var(--secundary-900);
}

.border-gray-50 {
    border-color: var(--gray-50);
}

.border-gray-100 {
    border-color: var(--gray-100);
}

.border-gray-200 {
    border-color: var(--gray-200);
}

.border-gray-300 {
    border-color: var(--gray-300);
}

.border-gray-400 {
    border-color: var(--gray-400);
}

.border-gray-500 {
    border-color: var(--gray-500);
}

.border-gray-600 {
    border-color: var(--gray-600);
}

.border-gray-700 {
    border-color: var(--gray-700);
}

.border-gray-800 {
    border-color: var(--gray-800);
}

.border-gray-900 {
    border-color: var(--gray-900);
}

.border-accent-50 {
    border-color: var(--accent-50);
}

.border-accent-100 {
    border-color: var(--accent-100);
}

.border-accent-200 {
    border-color: var(--accent-200);
}

.border-accent-300 {
    border-color: var(--accent-300);
}

.border-accent-400 {
    border-color: var(--accent-400);
}

.border-accent-500 {
    border-color: var(--accent-500);
}

.border-accent-600 {
    border-color: var(--accent-600);
}

.border-accent-700 {
    border-color: var(--accent-700);
}

.border-accent-800 {
    border-color: var(--accent-800);
}

.border-accent-900 {
    border-color: var(--accent-900);
}

.border-white {
    border-color: #FFFFFF;
}

.border-black {
    border-color: #000000;
}

/* hover variants */
.hover\:bg-primary-50:hover {
    background-color: var(--primary-50);
}

.hover\:bg-primary-100:hover {
    background-color: var(--primary-100);
}

.hover\:bg-primary-200:hover {
    background-color: var(--primary-200);
}

.hover\:bg-primary-300:hover {
    background-color: var(--primary-300);
}

.hover\:bg-primary-400:hover {
    background-color: var(--primary-400);
}

.hover\:bg-primary-500:hover {
    background-color: var(--primary-500);
}

.hover\:bg-primary-600:hover {
    background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
    background-color: var(--primary-700);
}

.hover\:bg-primary-800:hover {
    background-color: var(--primary-800);
}

.hover\:bg-primary-900:hover {
    background-color: var(--primary-900);
}

.hover\:bg-primary-950:hover {
    background-color: var(--primary-950);
}

.hover\:bg-secundary-50:hover {
    background-color: var(--secundary-50);
}

.hover\:bg-secundary-100:hover {
    background-color: var(--secundary-100);
}

.hover\:bg-secundary-200:hover {
    background-color: var(--secundary-200);
}

.hover\:bg-secundary-300:hover {
    background-color: var(--secundary-300);
}

.hover\:bg-secundary-400:hover {
    background-color: var(--secundary-400);
}

.hover\:bg-secundary-500:hover {
    background-color: var(--secundary-500);
}

.hover\:bg-secundary-600:hover {
    background-color: var(--secundary-600);
}

.hover\:bg-secundary-700:hover {
    background-color: var(--secundary-700);
}

.hover\:bg-secundary-800:hover {
    background-color: var(--secundary-800);
}

.hover\:bg-secundary-900:hover {
    background-color: var(--secundary-900);
}

.hover\:bg-secundary-950:hover {
    background-color: var(--secundary-950);
}

.hover\:bg-gray-50:hover {
    background-color: var(--gray-50);
}

.hover\:bg-gray-100:hover {
    background-color: var(--gray-100);
}

.hover\:bg-gray-200:hover {
    background-color: var(--gray-200);
}

.hover\:bg-gray-300:hover {
    background-color: var(--gray-300);
}

.hover\:bg-gray-400:hover {
    background-color: var(--gray-400);
}

.hover\:bg-gray-500:hover {
    background-color: var(--gray-500);
}

.hover\:bg-gray-600:hover {
    background-color: var(--gray-600);
}

.hover\:bg-gray-700:hover {
    background-color: var(--gray-700);
}

.hover\:bg-gray-800:hover {
    background-color: var(--gray-800);
}

.hover\:bg-gray-900:hover {
    background-color: var(--gray-900);
}

.hover\:bg-gray-950:hover {
    background-color: var(--gray-950);
}

.hover\:bg-accent-50:hover {
    background-color: var(--accent-50);
}

.hover\:bg-accent-100:hover {
    background-color: var(--accent-100);
}

.hover\:bg-accent-200:hover {
    background-color: var(--accent-200);
}

.hover\:bg-accent-300:hover {
    background-color: var(--accent-300);
}

.hover\:bg-accent-400:hover {
    background-color: var(--accent-400);
}

.hover\:bg-accent-500:hover {
    background-color: var(--accent-500);
}

.hover\:bg-accent-600:hover {
    background-color: var(--accent-600);
}

.hover\:bg-accent-700:hover {
    background-color: var(--accent-700);
}

.hover\:bg-accent-800:hover {
    background-color: var(--accent-800);
}

.hover\:bg-accent-900:hover {
    background-color: var(--accent-900);
}

.hover\:bg-accent-950:hover {
    background-color: var(--accent-950);
}

.hover\:bg-white:hover {
    background-color: #FFFFFF;
}

.hover\:bg-black:hover {
    background-color: #000000;
}

.hover\:text-primary-50:hover {
    color: var(--primary-50);
}

.hover\:text-primary-100:hover {
    color: var(--primary-100);
}

.hover\:text-primary-200:hover {
    color: var(--primary-200);
}

.hover\:text-primary-300:hover {
    color: var(--primary-300);
}

.hover\:text-primary-400:hover {
    color: var(--primary-400);
}

.hover\:text-primary-500:hover {
    color: var(--primary-500);
}

.hover\:text-primary-600:hover {
    color: var(--primary-600);
}

.hover\:text-primary-700:hover {
    color: var(--primary-700);
}

.hover\:text-primary-800:hover {
    color: var(--primary-800);
}

.hover\:text-primary-900:hover {
    color: var(--primary-900);
}

.hover\:text-primary-950:hover {
    color: var(--primary-950);
}

.hover\:text-secundary-50:hover {
    color: var(--secundary-50);
}

.hover\:text-secundary-100:hover {
    color: var(--secundary-100);
}

.hover\:text-secundary-200:hover {
    color: var(--secundary-200);
}

.hover\:text-secundary-300:hover {
    color: var(--secundary-300);
}

.hover\:text-secundary-400:hover {
    color: var(--secundary-400);
}

.hover\:text-secundary-500:hover {
    color: var(--secundary-500);
}

.hover\:text-secundary-600:hover {
    color: var(--secundary-600);
}

.hover\:text-secundary-700:hover {
    color: var(--secundary-700);
}

.hover\:text-secundary-800:hover {
    color: var(--secundary-800);
}

.hover\:text-secundary-900:hover {
    color: var(--secundary-900);
}

.hover\:text-secundary-950:hover {
    color: var(--secundary-950);
}

.hover\:text-gray-50:hover {
    color: var(--gray-50);
}

.hover\:text-gray-100:hover {
    color: var(--gray-100);
}

.hover\:text-gray-200:hover {
    color: var(--gray-200);
}

.hover\:text-gray-300:hover {
    color: var(--gray-300);
}

.hover\:text-gray-400:hover {
    color: var(--gray-400);
}

.hover\:text-gray-500:hover {
    color: var(--gray-500);
}

.hover\:text-gray-600:hover {
    color: var(--gray-600);
}

.hover\:text-gray-700:hover {
    color: var(--gray-700);
}

.hover\:text-gray-800:hover {
    color: var(--gray-800);
}

.hover\:text-gray-900:hover {
    color: var(--gray-900);
}

.hover\:text-gray-950:hover {
    color: var(--gray-950);
}

.hover\:text-accent-50:hover {
    color: var(--accent-50);
}

.hover\:text-accent-100:hover {
    color: var(--accent-100);
}

.hover\:text-accent-200:hover {
    color: var(--accent-200);
}

.hover\:text-accent-300:hover {
    color: var(--accent-300);
}

.hover\:text-accent-400:hover {
    color: var(--accent-400);
}

.hover\:text-accent-500:hover {
    color: var(--accent-500);
}

.hover\:text-accent-600:hover {
    color: var(--accent-600);
}

.hover\:text-accent-700:hover {
    color: var(--accent-700);
}

.hover\:text-accent-800:hover {
    color: var(--accent-800);
}

.hover\:text-accent-900:hover {
    color: var(--accent-900);
}

.hover\:text-accent-950:hover {
    color: var(--accent-950);
}

.hover\:text-white:hover {
    color: #FFFFFF;
}

.hover\:text-black:hover {
    color: #000000;
}

.border-width-0 {
    border-width: 0px;
}

.border-width-1 {
    border-width: 1px;
}

.border-width-2 {
    border-width: 2px;
}

.border-width-3 {
    border-width: 3px;
}

.border-width-4 {
    border-width: 4px;
}

.border-width-5 {
    border-width: 5px;
}

.border-width-6 {
    border-width: 6px;
}

.border-width-7 {
    border-width: 7px;
}

.border-width-8 {
    border-width: 8px;
}

.border-width-9 {
    border-width: 9px;
}

.border-width-10 {
    border-width: 10px;
}

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-double {
    border-style: double;
}

.border-none {
    border-style: none;
}

/* ====================== */
/* CSS VARIABELEN (THEMA) */
/* ====================== */
:root {
    --primary-color: #5097B9;        /* Hoofdkleur - blauw */
    --secondary-color: #3d4442;     /* Secundaire kleur - donker (zwart) */
    --third-color: #9ECCE3;              /* Lichte versie van hoofdkleur */
    --background-color: #f8f9fa;     /* Algemene achtergrondkleur */
    --text-color: #333;              /* Standaard tekstkleur */
    --link-color: #5097B9;           /* Link kleur */
    --link-hover-color: #3d4442;     /* Link hover kleur */
    --border-radius: 5px;            /* Standaard border-radius */
    --lightgray-color: #eeeeee; 
}

/* ====================== */
/* ALGEMEEN              */
/* ====================== */

body {
    font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color:#fff;
}

a {
    color: var(--link-color) !important;
    text-decoration: none; /* Optioneel: verwijdert standaard onderstreping */
}

a:hover {
    color: var(--link-hover-color) !important;
    text-decoration: underline; /* Optioneel: voegt onderstreping toe bij hover */
}

.bg {
    background:transparent;
}

.userMenu *{
    color:var(--primary-color);
}

/*Dit is voor de schermen zonder menustructuur links*/
#background {
    position: relative;
}

#background #bg img {
    position: fixed;
    right: 15px;
    bottom: 5px;
    width: 18%;
}

.bg #bg img {
    position: fixed;
    right: 15px;
    bottom: 5px;
    width: 18%;
}


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

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    color: #fff;
    background: var(--primary-color)!important;
}

/* ========================= */
/* OVERRIDE VOOR PANELS     */
/* ========================= */


.panel-login > .panel-heading {
    color: white;
    background: var(--primary-color);
}
 


/* ========================= */
/* OVERRIDE VOOR PANELS     */
/* ========================= */

.panel {
    margin-bottom: 20px;
    background-color: rgba(252, 252, 252, 0.75);
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.alert-info {
    background-color: var(--third-color);
    border-color:var(--primary-color);
    color:white;
}


/* ========================= */
/* KNOPPEN     */
/* ========================= */

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

.btn-info,
#btnCookiesOk {
    color: #fff!important;
    background:var(--primary-color)!important;
    border-color:var(--primary-color);
}

#btnCookiesOk:hover{
    color: #333!important;
}

.btn-login {
    color: #fff;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-login:hover, .btn-login:focus, .btn-login.focus, .btn-login:active, .btn-login.active, .open > .dropdown-toggle.btn-login {
    color: #ffffff;
    background: var(--secondary-color);
}

.btn-default{
    color: #ffffff!important;
    background:var(--primary-color)!important;
}


/* ========================= */
/* NAVBAR     */
/* ========================= */
/* .header-row {
    color: #fff;
    background-color: var(--primary-color);
    font-weight: 600;
} */


/* ========================= */
/* TABLES     */
/* ========================= */
.header-row {
    color: #fff !important;
    background-color: var(--primary-color)!important;
    font-weight: 600;
}

.selected-row {
    border-left: 3px var(--primary-color) solid;
}

.tblPeriodMon.active {
    background-color: var(--third-color)!important;
}

/* ========================= */
/* LOGIN     */
/* ========================= */
#frmLogin .container-fluid .row #banner {
    /* Voeg hier je stijlen toe */
    margin-top: 150px!important;
}

/* ========================= */
/* DIMONA     */
/* ========================= */

.btn-login {
    color: #fff;
    background-color: var(--primary-color)!important;
    /* background: linear-gradient(#525f40, #455036 20%, #525f40); */
    border-color: var(--primary-color)!important;
}

#lblWerkgevers{
    color: #fff!important;
}

#pnlWerkgevers a {
    color:var(--secondary-color-color)!important;
}

#menu-panel-2 .btn-login {
    color:#fff!important;
}

#menu-panel-2 a {
    color:var(--secondary-color-color)!important;
}

#btnAnnuleren,
#btnVolgende,
#btnVorige,
#btnBevestigen{
    color:#fff!important;
    background-color: var(--primary-color)!important;
}

a.btn-default,
a#lblVolledigeLijst {
    color: var(--secondary-color-color)!important;
}


/* ========================= */
/* INGAVE AFWEZIGHEDEN     */
/* ========================= */
#menuHoofd,
#menuHoofd * {
    color: white !important;
}
#btnVolgende,
#btnVorige,
#btnBevestigen,
#lblTransfer,
#lblBeheerGlobaleCode,
#lblCodesPerWerknemer,
#lblToevoegen,
#lblWijzigen,
#lblVerwijderen,
#lblGroepenPerGebruiker,
#btnExport #lblExport,
.btn-login{
    color:#fff!important;
}

.list-group-item.active{
    background:var(--third-color)!important;
}

#btnTransfer{
    color:#fff!important; 
}

#lblWerkgever,
#lblWerknemer{
    color:var(--secondary-color)!important;
}

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

.cancel-padding a{
    color:var(--secondary-color)!important;
}

#menuBeheer a{
    color:var(--secondary-color)!important;
}

#menuHoofd .navbar-nav > .active-item {
    border-color:var(--secondary-color)!important;
}


/* #pnlCodes button[data-code-id="1"] {
    -moz-box-shadow: none!important;
    box-shadow: none !important;
} */

/* ========================= */
/* PRESTATIES     */
/* ========================= */

#lblBtnNext {
    color:white!important;
}

#WnModalLink {
    color:white!important;
}

.colorDiv,
.code-color{
    -moz-box-shadow: none!important;
    box-shadow: none !important;

}

#udpWGAnnouncement #btnSaveWGAnnouncement,
#btnAnnouncementModalOK{
    color:#666!important;
}

/* ========================= */
/* AANVRAAG LOONDOCUMENTEN     */
/* ========================= */

#banner img {
    display: none;
}

#pnlDocumenten a
,#bHistoriek{
    color:var(--secondary-color)!important;
}

#lblDocumentKeuze
, #lblTitel
, #lblTitel2
, #lblTitel3{
    color:var(--primary-color)!important;
}

#upButtons hr{
    border-color:var(--lightgray-color)!important;
}

.datepicker .day.active.today {
    background-color:var(--third-color)!important;
}


/* ========================= */
/* BRUTO-NETTO     */
/* ========================= */

#Panel1{
    color: #fff;
    background-color: var(--primary-color)!important;
    /* background: linear-gradient(#525f40, #455036 20%, #525f40); */
    border-color: var(--primary-color)!important; 
}

#menu-panel-1 a{
    color:var(--secondary-color)!important;
}

/* #lblWerkgever{
    color: var(--primary-color)!important; 
}

#lblWerknemers
,#lblCumul{
    color:var(--secondary-color)!important;
} */

.step.active{
    background-color:var(--third-color)!important;
}


.arrow-steps .step:after {
    border-left: 17px solid var(--third-color)!important;
}

.arrow-steps .step:before {
    border-left: 17px solid var(--third-color)!important;
}

.arrow-steps .step.tab-active:after
, .arrow-steps .step.tab-active:before {
    border-left: 17px solid rgb(51, 122, 183)!important;
    border-left: 17px solid var(--primary-color)!important;
}

.next a
, .previous a
, #Btnbereken_Tab4{
    color: #fff!important;
    background-color: var(--primary-color)!important;
    background: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}

#lblSimulator{
    color: #fff!important;
}

/* ========================= */
/* CONSULTEREN LOONGEGEVENS     */
/* ========================= */
#menu_panel #menu-panel-2 a#home {
    display: none;
}



/* ========================= */
/* BEHEER WERKNEMERS    */
/* ========================= */

#btnWeekToevoegen,
.btn-default .glyphicon,
#btnZoeken,
.undo,
#btnLoongegevenToevoegen,
#imgBedrijfswagen,
#btnOpslaan,
#btnAfdrukken,
.wijzig-week,
.verwijder-week,
#tblWerknemers a{
    color: #fff!important;
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important; 
}

.tabs-bar .tab.success {
    border-bottom-color: var(--primary-color)!important;
}

.arrow .glyphicon.glyphicon-menu-left,
.undo,
#lblWgSelected{
    color:#fff!important;
}

#lblWerknemers{
    color: var(--primary-color)!important;
}

/* ========================= */
/* ONKOSTEN    */
/* ========================= */

.bg-primary {
    color: #fff;
    background-color: var(--primary-color)!important;
}

#lblOnkostennotas,
#lblType,
#lblOrganogram,
#lblGroep,
#lblProject{
    color: var(--secondary-color);
}



#lblTitle,
#lblOndernemingsNr,
#lblUpdateTitle{
    color:var(--primary-color)!important;
}

/* ========================= */
/* BOEKHOUDDOCUMENTEN    */
/* ========================= */
#btnZoek{
    color:#fff!important;
}

.ExpenseOverview #btnOpslaan{
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}


/* ========================= */
/* RAPPORTERING    */
/* ========================= */

.employerTitle {
    color:var(--primary-color)!important;
}
/* 
#menu-panel-1{
    color: #fff;
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important; 
} */

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

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

#main{
    background-color: transparent;
}

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

.bg-primary-100 {
    background-color: var(--third-color)!important;
}

.hover\:bg-primary-50:hover {
    background-color: var(--lightgray-color)!important;
}

.pagination.paginate_button a,
.page-item{
    color: #fff;
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important; 
}
.toggle-control input:checked ~ .control {
    background-color: var(--primary-color)!important;
}

h1,
#totaalChart{
    color: var(--primary-color)!important;
}



/* .header-row{
    background-color: var(--primary-color)!important;
} */

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

.page-item.active .page-link {
    background-color: var(--third-color)!important;
    border-color: transparent!important;
}

ul.pagination .page-link {
    color: #fff;
    background-color: var(--primary-color)!important;
}

ul.pagination .page-link:hover {
    background-color: #e6f0ff;
    border-radius: 4px;
    text-decoration: none;
}

ul.pagination .page-item.active .page-link {
    background-color: var(--third-color)!important;
    color: white;
    border: none!important;
}


/* ========================= */
/* ESS ONKOSTEN    */
/* ========================= */

#lblTitle,
#lblAddTitle{
    color: var(--primary-color)!important;
}

#chkToonDetail > button.active{
    background-color: var(--primary-color)!important;
}

#lblRemove,
#lblMarkAsRead,
#btnArchive,
#lblType{
    color: #fff!important;
}


.menu.menu-open > .menu-body > #pnlMenu.panel-group.margin-top > .panel.panel-default > .panel-heading > h4.panel-title a{
    color: var(--secondary-color)!important;
}

.list-group-item span{
    color: var(--secondary-color)!important;
}

.list-group-item span.badge{
    color: #fff!important;
}