/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */



/* Provide sufficient contrast against white background */
a {
    color: #000000;
}
    a:link {
        text-decoration: none;
        color: #000000;
    }

    a:visited {
        text-decoration: none;
        color: #000000;
    }

    a:hover {
        text-decoration: none;
        color: #000000;
    }

    a:active {
        text-decoration: none;
        color: #000000;
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}



/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-family: Roboto;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}


body {
    font-family: 'Arial', sans-serif;
    background-color: #ffffff; /* Witte achtergrond */
    color: #000000; /* Zwarte tekst */
}


.list-item {
    border-bottom: dashed 1px #CCCCCC;
    padding-top: 6px;
    padding-bottom: 5px;
}

/* Zoekbalk */
.custom-search-box {
    position: relative;
    width: 300px;
    margin-left: auto;
}

    .custom-search-box input {
        width: 100%;
        padding: 7px 40px 7px 15px; /* Iets hogere zoekbalk met meer padding */
        border: 1.5px solid #cc0000; /* Dunnere donkerrode rand */
        border-radius: 25px; /* Maakt de zoekbalk rond */
        outline: none;
        color: #000000; /* Zwarte tekst in het zoekveld */
        font-size: 14px; /* Iets kleinere tekst voor balans */
    }

        .custom-search-box input::placeholder {
            color: #666666; /* Lichtgrijze placeholder-tekst */
        }

        .custom-search-box input:focus {
            border-color: #ff6600; /* Fel oranje rand bij focus */
            box-shadow: 0 0 5px rgba(255, 102, 0, 0.5); /* Subtiele gloed bij focus */
        }

    .custom-search-box i {
        position: absolute;
        right: 15px; /* Plaatsing rechts */
        top: 50%;
        transform: translateY(-50%);
        color: #cc0000; /* Donkerrood voor het vergrootglas */
    }

        .custom-search-box i:hover {
            color: #ff6600; /* Fel oranje hover-kleur voor het vergrootglas */
        }


/* Zorg dat de hoofdcarousel centraal staat en een max-grootte heeft */
.carousel-inner img {
    display: block;
    margin: 0 auto; /* Centreert het plaatje horizontaal */
    max-height: 400px; /* Max hoogte */
    max-width: 100%; /* Zorgt dat de breedte niet uitrekt buiten de container */
    object-fit: contain; /* Zorg dat de afbeelding netjes binnen de container blijft */
}

/* Centreer en stel een maximale grootte in voor de thumbnails */
.thumbnail-img {
    display: block;
    margin: 0 auto; /* Centreert de thumbnails */
    max-height: 120px; /* Zorgt dat de thumbnails kleiner blijven */
    max-width: 120px; /* Thumbnails hebben max breedte */
    object-fit: cover; /* Thumbnail vult netjes de ruimte zonder uitrekken */
    cursor: pointer; /* Zorg voor een klikbare ervaring */
}

    /* Optioneel: Hover-effect op de thumbnails */
    .thumbnail-img:hover {
        border: 1.5px solid #007bff; /* Highlight de thumbnail bij hover */
        transform: scale(1.05); /* Vergroot lichtjes */
        transition: transform 0.2s ease, border 0.2s ease;
    }


/* Maak de carousel-pijltjes rood */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: red; /* Maakt de pijlen rood */
    border-radius: 50%; /* Optioneel: Rond de pijltjes af */
    width: 40px; /* Iets grotere pijlen */
    height: 40px;
}

    /* Zorg dat de pijlen duidelijker zijn */
    .carousel-control-prev-icon:hover,
    .carousel-control-next-icon:hover {
        background-color: darkred; /* Donkerdere tint bij hover */
        transform: scale(1.2); /* Vergroot lichtjes bij hover */
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

/* Linkeruitlijning van de thumbnails */
.d-flex.flex-wrap {
    justify-content: flex-start; /* Dwing de inhoud naar links */
}

/* Zorg voor consistente thumbnail-afmetingen */
.thumbnail-img {
    height: 100px; /* Pas de hoogte aan indien nodig */
    object-fit: cover; /* Zorg dat afbeeldingen niet vervormd worden */
}

/* Voeg een kleine gap toe tussen thumbnails */
.d-flex.flex-wrap .col-2 {
    flex: 0 0 auto; /* Zorg dat de kolommen zich niet automatisch aanpassen */
}


/* Stijl voor de standaard (unchecked) staat */
.form-check-input {
    border-color: #ccc; /* Lichtgrijze rand voor de ongecheckte staat */
    background-color: #fff; /* Witte achtergrond voor de ongecheckte staat */
}

    /* Aangepaste stijl voor de gecheckte checkbox */
    .form-check-input:checked {
        background-color: darkred !important; /* Donkerrood wanneer gecheckt */
        border-color: darkred !important; /* Donkerrode rand */
    }

    /* Verander de kleur van de checkbox als deze in focus is */
    .form-check-input:focus:checked {
        background-color: darkred !important; /* Donkerrood bij focus als gecheckt */
        border-color: darkred !important; /* Donkerrode rand bij focus */
    }

    /* Stijl voor ongecheckte checkbox als deze in focus is */
    .form-check-input:focus {
        border-color: darkred !important; /* Donkerrode rand als de checkbox in focus is (maar niet gecheckt) */
    }

.affiliate-link {
    font-size: 16px; /* Bepaal de tekstgrootte */
    display: inline-flex;
    align-items: center; /* Zorg ervoor dat het icoon en de tekst goed uitgelijnd zijn */
}

    .affiliate-link svg {
        width: 1em; /* Schaal het icoon naar de grootte van de tekst */
        height: 1em; /* Zorg ervoor dat het icoon dezelfde hoogte heeft als de tekst */
        fill: currentColor; /* Laat het icoon dezelfde kleur hebben als de tekstkleur */
        margin-left: 8px; /* Voeg wat ruimte toe tussen de tekst en het icoon */
    }