html {
  font-size: 14px;
}

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

.navbar-nav {
    flex-wrap: wrap;
}


.required-field {
    background-color: #ffebee !important; /* Light red for required fields */
    border: 1px solid #f44336 !important;
}

.required-field-filled {
    background-color: #e8f5e8 !important; /* Light green when filled */
    border: 1px solid #4caf50 !important;
}

/*this gives a blue white box around thead selected menuitem turned off 24 juli 2025*/
/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
    outline: none;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.container {
    margin-left: 10px; /* Adjust as needed */
    margin-right: 10px;
    max-width: 100%; /* Ensure it stretches as needed */
}

.footer {
    background-color: #e6e6fa;
    color: #666;
    text-align: center;
    padding: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
.form-control {
    font-size: 14px; /* Pas de grootte aan naar wens */
}

.control-label {
    font-size: 14px; /* Pas de grootte aan naar wens */
    margin: 2px;
    padding: 2px;
}

h1 {
    font-size: 24px; /* Pas de grootte aan naar wens */
    margin-top: 4px;
    padding-top: 4px;
}

h2 {
    font-size: 20px; /* Pas de grootte aan naar wens */
    margin-top: 4px;
    padding-top: 4px;
}

/* dit zijn de grijze kopjes bij de groepering van items bij klantenkaart */
h4 {
    font-size: 16px; /* Pas de grootte aan naar wens */
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 4px;
    background-color: lightgray;
}

/* dit zijn de labels bij de verwijdrerschermen standaard vet */
dt {
    font-weight: normal;
}


/* Dark blue text for forms and labels */
/* Dark blue text for all display elements */
.control-label,
.form-control,
h4,
h1,
label:not([for]),
.display-text,
.display-name,
.table td, /* Targets DisplayFor in tables */
.table th, /* Targets DisplayNameFor in table headers */
[data-display="true"] {
    color: #213C7F !important; /* Dark blue */
}

/* Specific targeting for DisplayFor and DisplayNameFor */
td, .display-field {
    color: #213C7F !important;
}

th, .display-name {
    color: #213C7F !important;
}

/* Ensure hyperlinks keep their original colors */
a {
    color: inherit !important;
}

a:hover {
    color: inherit !important;
}

.row.mb-1 {
    margin-bottom: 6px;
    height: 28px; /* Vaste hoogte */
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    color: #213C7F !important; /* Force the color */
}

    /* Override browser's disabled styling */
    .custom-checkbox:disabled {
        opacity: 1 !important; /* Remove the transparency */
        filter: none !important; /* Remove any filters */
        color: #213C7F !important; /* Ensure color stays */
        background-color: #f8f9fa !important; /* Optional: light background */
        border-color: #213C7F !important; /* Match border color */
    }

    /* Optional: Add checked state styling */
    .custom-checkbox:checked:disabled {
        background-color: #213C7F !important;
        border-color: #213C7F !important;
    }

/* Hamburger menu styling - ALWAYS PINK ----------------------------------------- */
.navbar-toggler {
    border: none !important;
    padding: 0 !important;
    margin-right: 15px !important;
}

    .navbar-toggler:focus {
        box-shadow: none !important;
    }

/* DEFAULT STATE - ALWAYS PINK */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230, 0, 126, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5em !important;
    height: 1.5em !important;
    transition: all 0.2s ease-in-out !important;
}

/* HOVER STATE - DARKER PINK */
.navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230, 0, 126, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ACTIVE STATE (when menu is open) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230, 0, 126, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* hamburger menu einde ---------------------------- */

/* hyperlinks donkerblauw en roze bij hover*/
a.custom-link,
a.custom-link:visited {
    color: #213C7F !important;
    text-decoration: none !important;
}

a.custom-link:hover,
a.custom-link:focus {
    color: #E6007E !important;
    text-decoration: none !important;
}
/* hyperlinks */

/* rijen met witte of grijze achtergrond */
tr:nth-child(even) {
    background-color: #e6e6e6 /*iets donkerder #f9f9f9; /* light grey */
}

tr:nth-child(odd) {
    background-color: #ffffff; /* white */
}

.btn btn-primary{
    padding: 2px;
    margin: 2px;
}



/*opmaak van de links aan de rechterkant van de records */
/* Target the <a> tags inside the td with class action-links */
td.action-links a {
    color: #E6007E;
    text-decoration: none;
}

/* Style for disabled link */
.disabled-link {
    color: #cccccc !important;
    cursor: not-allowed;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
}


/* Optional: Style for hover state */
    td.action-links a:hover {
    color: #E6007E;
    text-decoration: underline;
    }


/* Style buttons to look like links */
.styled-as-link {
    background: none !important;
    border: none !important;
    color: #E6007E !important;
    text-decoration: none !important;
    padding: 0 !important;
    font: inherit !important;
    cursor: pointer !important;
    display: inline !important;
    margin: 0 !important;
}

    .styled-as-link:hover {
        color: #E6007E !important;
        text-decoration: underline !important;
    }

/* Disabled state */
.disabled-link {
    color: #cccccc !important;
    cursor: not-allowed !important;
}

/* Separator styling | */
.action-links .separator {
    color: black;
    margin: 0 4px;
}

/* Form styling to make them inline */
.action-links form {
    display: inline;
}


/*opmaak van de pagina nummers tussen knop previous command next */
.page-numbers {
    display: inline-block;
    padding: 3px 3px;
    margin: 0 5px;
    border: 0px solid #ddd;
    background-color: transparent;
}

/* For regular nav items (buttons and labels) */
.nav-item .nav-link.btn.btn-link.text-white-custom,
.nav-item label.nav-link.btn.btn-link.text-white-custom,
/* For dropdown menu items */
.nav-item.dropdown .dropdown-menu .nav-link.btn.btn-link.text-white-custom {
    color: white !important;
    text-decoration: none;
}

/* Dropdown menu specific styling */
.nav-item.dropdown .dropdown-menu {
    background-color: white !important; /* white background for entire dropdown */
    border: none;
    padding: 0; /* remove default padding */
}

/* Blue dropdown theme */
.blue-dropdown {
    
    padding: 0;
}

    .blue-dropdown .btn.btn-link {
        color: yellow !important;
        background-color: transparent !important;
        width: 100%;
        text-align: left;
        padding: 0.5rem 1rem;
    }

        .blue-dropdown .btn.btn-link:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

/* Forces white text for the dropdown toggle */
.navbar-light .navbar-nav .nav-link.dropdown-toggle {
    color: white !important;
}

    /* Optional: Ensure it stays white on hover/focus */
    .navbar-light .navbar-nav .nav-link.dropdown-toggle:hover,
    .navbar-light .navbar-nav .nav-link.dropdown-toggle:focus {
        color: white !important;
    }

/* 1. For regular nav buttons (Actielijst, Klanten, Personen, Momenten) */
.nav-item form .btn-link:hover {
    color: #E6007E !important;
}

/* 2. For dropdown toggle (Basisgegevens) */
.nav-link.dropdown-toggle:hover {
    color: #E6007E !important;
}


/* 3. For dropdown menu items */
.dropdown-menu .btn-link:hover {
    color: #E6007E !important;
}

/* Add spacing between nav items */
.navbar-nav .nav-item {
    margin-right: 1rem; /* Adjust this value as needed */
}

/* Remove margin from last item to avoid extra space */
.navbar-nav .nav-item:last-child {
    margin-right: 0;
}

.nav-item form .btn-link:hover {
   
    color: #E6007E !important;
}

/* This will override ALL conflicting Bootstrap nav-link hover styles */
.navbar-light .navbar-nav .nav-item form .btn-link:hover,
.navbar-light .navbar-nav .nav-item > .nav-link:hover {
    color: #E6007E !important; /* Your pink color */
   
}

/* For dropdown items */
.navbar-light .navbar-nav .dropdown-menu .btn-link:hover {
    color: #E6007E !important;
    background-color: transparent
}

button.text-blue-custom {
    color: #213d7f !important;
    background: white !important;
    font-size: 18px !important;
}

/* button blauw voor filteren */
.btn-success {
    background-color: #213C7F;
    border-color: #213C7F;
    color: white; /* Change text color if needed for better contrast */
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #E6007E; /*pink for hover state */
    border-color: #E6007E;
}


/* button roze voor acties */
.btn-warning {
    background-color: #E6007E;
    border-color: #E6007E;
    color: white; /* Change text color if needed for better contrast */
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #213C7F; /*blue for hover state */
    border-color: #213C7F;
}


/* button voor previous and next page*/
.btn-previous,
.btn-next {
    background-color: lightgrey;
    border-color: black;
    color: black; /* Change text color if needed for better contrast */
}
.btn-previous:hover,
.btn-previous:focus,
.btn-previous:active,
.btn-next:hover,
.btn-next:focus,
.btn-next:active {
    background-color: darkgray; /*blue for hover state */
    border-color: white;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select-with-icon {
    appearance: none; /* Verberg standaard dropdown pijltje */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #d3daea; /* kleur van Richard ontvangen rgb 211 218  234 gemaakt*/
    padding-right: 2rem; /* ruimte voor icoon rechts */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='12' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    display: inline-block; /* Add this */
    width: 100%; /* Add this to prevent full width */
    /* max-width: 150px;*/
}

.form-row-spacing {
    margin-bottom: 0.3rem; /* or whatever spacing you prefer */
}

/* Hide for all browsers the small up and down errors next to numbers: number input spinners, which appear in some browsers for <input type="number"> elements. He */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}