:root {
  --rood: #c01e02;
  --zwart: #383838;
  --rood-rgb: 192, 30, 2;
  --rood-bg: 192, 30, 2, 0.2;
  --zwart-rgb: 56, 56, 56;
  --zwart-bg: 56, 56, 56, 0.2;
  --groen-bg: 25, 175, 10, 0.3;
  --blauw-bg: 13, 10, 240, 0.3;
  --oranje-bg: 255, 165, 0, 0.3;
  --rood-bg: 192, 30, 2, 0.3;
  --bs-link-color: var(--rood);
  --bs-link-hover-color: var(--rood);
  --bs-nav-tabs-link-active-bg: var(--bs-primary-border-subtle);
  --bs-nav-pills-link-active-bg: var(--bs-primary-border-subtle);
  --bs-link-color-rgb: var(--rood-rgb);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e")
}

@font-face {
  font-family: droidSans;
  src: url("../font/DroidSans.ttf") format("truetype");
}

@font-face {
  font-family: droidSansBold;
  src: url("../font/DroidSans-Bold.ttf") format("truetype");
}

body {
  font-family: 'droidSans', sans-serif;
  font-size: 13px;
  line-height: 22px;
  color: #777;
  font-weight: 400;
  margin-right: 0px;
}

/* Font size for tablets and mobile phones
@media (max-width: 768px) {
  body {
    font-size: 24px;
    line-height: 28px;
  }
}
 */

.backgroundLogin {
  background-image: url('../images/background.jpg');
  background-position: center 86px;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 885px;
}

.nav-link.active {
  background-color: var(--bs-primary-border-subtle) !important;
}

.form-switch {
  display: flex !important;
}

.form-check-input:checked {
  background-color: var(--rood) !important;
  border-color: var(--zwart) !important;
}

.tab-content {
  border-left: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 10px;
  height: calc(100vh - 175px);
}

.nav-tabs {
  margin-bottom: 0;
}

.table-responsive {
  height: calc(100vh - 225px);
  max-height: calc(100vh - 225px);
  overflow-y: auto;
}

.sticky-header th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* CSS to show only the icon of a date input field */
.only-icon {
    width: 32px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: none;
    background: transparent;
}

/* Hide the date text fields */
.only-icon::-webkit-datetime-edit,
.only-icon::-webkit-datetime-edit-text,
.only-icon::-webkit-datetime-edit-month-field,
.only-icon::-webkit-datetime-edit-day-field,
.only-icon::-webkit-datetime-edit-year-field {
    display: none;
}

/* Hide placeholder text */
.only-icon::before {
    content: "";
}

/* Safari/Firefox fallback (hides text by making it transparent) */
.only-icon {
    color: transparent;
}

/* Optional: remove inner padding in Firefox */
.only-icon::-moz-focus-inner {
    border: 0;
}

/* Styling for the calendar button */
#calendarBtn {
    background-color: #007e97 !important;   /* normal background */
    border-color: #007e97 !important;       /* normal border */
    color: white !important;                /* text color */
}

#calendarBtn:hover {
    background-color: #006a7b !important;   /* hover background */
    border-color: #006a7b !important;       /* hover border */
    color: white !important;
}

#calendarBtn:focus,
#calendarBtn:focus-visible {
    background-color: #007e97 !important;
    border-color: #007e97 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 126, 151, 0.4) !important;
}

#calendarBtn:active,
#calendarBtn.active {
    background-color: #005c65 !important;   /* pressed/active */
    border-color: #005c65 !important;
    color: white !important;
}

#calendarBtn:disabled {
    background-color: #80b0bb !important;
    border-color: #80b0bb !important;
    color: white !important;
}