:root {
    /* Primaire kleur variaties */
    --primary-50: #f1f7fe;
    --primary-100: #e1effd;
    --primary-200: #bddefa;
    --primary-300: #83c4f6;
    --primary-400: #41a6ef;
    --primary-500: #85a4d6; /* DEFAULT */
    --primary-600: #6D8CBD;
    --primary-700: #0a569a;
    --primary-800: #0d4a7f;
    --primary-900: #113f69;
    --primary-950: #0b2746;
    --background: #E8F0F8;
    /* Secundaire kleur variaties */
    --secundary-50: #f0fdfc;
    --secundary-100: #cef9f5;
    --secundary-200: #9cf3ed;
    --secundary-300: #63e5e1;
    --secundary-400: #33cece;
    --secundary-500: #1ab0b2;
    --secundary-600: #11878b; /* DEFAULT */
    --secundary-700: #126f73;
    --secundary-800: #14565b;
    --secundary-900: #15494c;
    --secundary-950: #052a2e;

    --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);
    /* background: url("https://www.attentia.be/sites/all/themes/attentia2014/images/content-bg.jpg") repeat left top; */
    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;
}