/* Move down content because we have a fixed navbar that is 50px tall */
body {
    /*    padding-top: 10px;*/
    padding-bottom: 20px;
    /*    background: #A8D5FE !important;*/
    background: #F7E3C3 !important;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}



.navbar {
    height: 100px !important; /*i assume your navbar size 100px*/
}

/*Modify the background color*/

.navbar-custom {
    background-color: #2B4D4E; /*#8FAAF0*/ /* #365AAA*/
}
    /*     Modify brand and text color */

    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
        color: white;
    }

.navbar-img {
    display: flex;
}

.btn-color {
    background: #8FAAF0 !important;
    border-color: white !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #508CBF !important;
}

.is-invalid {
    border: 2px solid red !important;
    box-shadow: 0 0 3px red;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

.table-condensed tr th {
    border: 0px solid #6e7bd9;
    color: white;
    /* background-color: #6e7bd9; */
    background-color: #4A3C8C;
    vertical-align: middle;
    text-align: center;
}

.table-condensed, .table-condensed tr td {
    border: 0px solid #000;
}

.table > tbody > tr:nth-child(odd) > td {
    background-color: #E7E7FF !important;
}




.buttonload {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 8px 10px; /* Some padding */
    font-size: 15px /* Set a font size */;
}

a.my-class {
    color: white;
    text-decoration: none;
}

.input-validation-error {
    border: 2px solid red;
}

.dl-horizontal {
    display: grid;
    grid-template-columns: 150px 1fr; /* Eerste kolom is 150px breed, tweede kolom vult de rest */
    gap: 10px 20px; /* Ruimte tussen rijen (10px) en kolommen (20px) */
    align-items: center; /* Zorgt dat tekst verticaal uitgelijnd is */
}

    .dl-horizontal dt {
        text-align: right;
        font-weight: bold;
    }

    .dl-horizontal dd {
        margin: 0; /* Verwijdert de standaard marge */
    }

    form .small-dropdown {
        width: auto;
        display: inline-block;
        min-width: 200px;
        max-width: 100%;
        height: 32px;
        padding: 5px;
        box-sizing: border-box;
    }

    form .small-input {
        width: 60px; /* Zorg voor een smalle breedte */
        height: 30px; /* Maak de hoogte consistent met andere inputvelden (standaard hoogte) */
        padding: 5px; /* Houd de padding gelijk aan standaard inputvelden */
        box-sizing: border-box; /* Zorg dat de padding wordt meegenomen in de hoogte/breedte */
        font-size: 14px; /* Stel dezelfde fontgrootte in als andere velden */
        text-align: center; /* Centreer de tekst in het veld */
    }



@media (max-width: 576px) {
    /* Maak de container een flex-container en voeg padding toe */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Zorg dat het logo helemaal links staat zonder extra margin */
    .navbar-img,
    .logo-spacing {
        float: none !important;
        margin-left: 0 !important;
        order: 0 !important;
    }

    /* Plaats de menu-knop (navbar-toggler) helemaal rechts */
    .navbar-toggler {
        order: 1 !important;
        margin-left: auto !important;
    }

    /* Zorg dat de uitgeklapte menu na de toggler komt */
    .collapse.navbar-collapse {
        order: 2 !important;
        width: 100% !important;
        position: relative;
        z-index: 10; /* Menu ligt boven de alert */
    }

    .alert {
        position: relative;
        z-index: 1; /* Lager dan het menu */
    }

    .breakable .table-responsive td {
        word-break: break-all;
        /* of */
        overflow-wrap: break-word;
    }
}


@media (min-width: 768px) {
    .custom-border-md-end {
        border-right: 2px solid black;
    }

}

/* Alleen HOVER/EFFECT in de SELECTIEPOPUP */
.select2-results__option--highlighted {
    background-color: #2B4D4E !important; /* navigatiebalkkleur */
    color: white !important;
}