/* THEME ADJUSTMENTS START */

:root {
  --brand-header-height: 50px;
  --brand-footer-height: 30px;
  --brand-filter-height: 50px;
  --brand-content-space-height: 10px;
  --brand-accordion-header-height: 120px;

  --brand-button-font-weight: normal;
  --brand-button-font-size: 0.9rem;

  /* custom brand colors */
  /* from refaloggen */
  /* --bs-brand-primary-color: #004b93; */
  /* from vonin dot com */
  /* --bs-brand-primary-color: #00539b; */

  /* Colors for all filled bootstrap buttons and text (text-primary etc) override */
  --bs-brand-primary-text: #fff;
  --bs-brand-primary-text-hover: #aaaaaa;
  /* --bs-brand-primary-color: #1c794e; */
  /* --bs-brand-primary-color: #4d1e8b; */
  --bs-brand-primary-color: #005964;
  --bs-brand-primary-rgb: 0, 89, 100;
  --bs-brand-primary-hover: color-mix(in srgb, var(--bs-brand-primary-color), black 10%);
  --bs-brand-primary-disabled: color-mix(in srgb, var(--bs-brand-primary-color), black 30%);
  --bs-brand-primary-soft: color-mix(in srgb, var(--bs-brand-primary-color), var(--bs-secondary-bg) 60%);

  --bs-brand-secondary-text: #fff;
  --bs-brand-secondary-color: #6c757d;
  --bs-brand-secondary-rgb: 108, 117, 125;
  --bs-brand-secondary-hover: color-mix(in srgb, var(--bs-brand-secondary-color), black 10%);
  --bs-brand-secondary-disabled: color-mix(in srgb, var(--bs-brand-secondary-color), black 30%);

  --bs-brand-success-text: #fff;
  --bs-brand-success-color: #198754;
  --bs-brand-success-rgb: 25, 135, 84;
  --bs-brand-success-hover: color-mix(in srgb, var(--bs-brand-success-color), black 10%);
  --bs-brand-success-disabled: color-mix(in srgb, var(--bs-brand-success-color), black 30%);

  --bs-brand-info-text: #000;
  --bs-brand-info-color: #0dcaf0;
  --bs-brand-info-rgb: 13, 202, 240;
  --bs-brand-info-hover: color-mix(in srgb, var(--bs-brand-info-color), black 10%);
  --bs-brand-info-disabled: color-mix(in srgb, var(--bs-brand-info-color), black 30%);

  --bs-brand-warning-text: #000;
  --bs-brand-warning-color: #ffc107;
  --bs-brand-warning-rgb: 255, 193, 7;
  --bs-brand-warning-hover: color-mix(in srgb, var(--bs-brand-warning-color), black 10%);
  --bs-brand-warning-disabled: color-mix(in srgb, var(--bs-brand-warning-color), black 30%);

  --bs-brand-danger-text: #fff;
  --bs-brand-danger-color: #dc3545;
  --bs-brand-danger-rgb: 220, 53, 69;
  --bs-brand-danger-hover: color-mix(in srgb, var(--bs-brand-danger-color), black 10%);
  --bs-brand-danger-disabled: color-mix(in srgb, var(--bs-brand-danger-color), black 30%);

  --bs-brand-light-text: #000;
  --bs-brand-light-color: #f8f9fa;
  --bs-brand-light-rgb: 248, 249, 250;
  --bs-brand-light-hover: color-mix(in srgb, var(--bs-brand-light-color), black 10%);
  --bs-brand-light-disabled: color-mix(in srgb, var(--bs-brand-light-color), black 30%);

  --bs-brand-dark-text: #fff;
  --bs-brand-dark-color: #212529;
  --bs-brand-dark-rgb: 33, 37, 41;
  --bs-brand-dark-hover: color-mix(in srgb, var(--bs-brand-dark-color), black 10%);
  --bs-brand-dark-disabled: color-mix(in srgb, var(--bs-brand-dark-color), black 30%);

  /* border radii (slightly lower than original bootstrap) */
  /* --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.2rem;
  --bs-border-radius-lg: 0.4rem;
  --bs-border-radius-xl: 0.7rem;
  --bs-border-radius-xxl: 1.5rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem; */
}

.form-check-input:checked {
  background-color: var(--bs-brand-primary-color);
  border-color: var(--bs-brand-primary-color);
  }

[data-bs-theme=newlight] {
  --bs-body-color: #1a1c1f; /* 15% darker */
  --bs-body-color-rgb: 26, 28, 31; /* 15% darker */
  --bs-body-bg: #dcdcdc; /* 15% darker */
  --bs-body-bg-rgb: 220, 220, 220; /* 15% darker */
  --bs-emphasis-color: #000; /* Already at max darkness */
  --bs-emphasis-color-rgb: 0, 0, 0; /* Already at max darkness */
  --bs-secondary-color: rgba(26, 28, 31, 0.75); /* 15% darker */
  --bs-secondary-color-rgb: 26, 28, 31; /* 15% darker */
  --bs-secondary-bg: #bfbfbf; /* 15% darker */
  --bs-secondary-bg-rgb: 191, 191, 191; /* 15% darker */
  --bs-tertiary-color: rgba(26, 28, 31, 0.5); /* 15% darker */
  --bs-tertiary-color-rgb: 26, 28, 31; /* 15% darker */
  --bs-tertiary-bg: #dcdcdc; /* 15% darker */
  --bs-tertiary-bg-rgb: 220, 220, 220; /* 15% darker */
  --bs-primary-text-emphasis: #041e52; /* 15% darker */
  --bs-secondary-text-emphasis: #212428; /* 15% darker */
  --bs-success-text-emphasis: #072a19; /* 15% darker */
  --bs-info-text-emphasis: #043f4c; /* 15% darker */
  --bs-warning-text-emphasis: #553d02; /* 15% darker */
  --bs-danger-text-emphasis: #4e1016; /* 15% darker */
  --bs-light-text-emphasis: #3c4147; /* 15% darker */
  --bs-dark-text-emphasis: #3c4147; /* 15% darker */
  --bs-primary-bg-subtle: #a5bad0; /* 15% darker */
  --bs-secondary-bg-subtle: #b6b7b9; /* 15% darker */
  --bs-success-bg-subtle: #a7c0b6; /* 15% darker */
  --bs-info-bg-subtle: #a5ccd1; /* 15% darker */
  --bs-warning-bg-subtle: #d1b59f; /* 15% darker */
  --bs-danger-bg-subtle: #d1b1b5; /* 15% darker */
  --bs-light-bg-subtle: #dcdcdc; /* 15% darker */
  --bs-dark-bg-subtle: #a5acb1; /* 15% darker */
  --bs-primary-border-subtle: #7ca5c7; /* 15% darker */
  --bs-secondary-border-subtle: #9b9fa2; /* 15% darker */
  --bs-success-border-subtle: #819f92; /* 15% darker */
  --bs-info-border-subtle: #7daec7; /* 15% darker */
  --bs-warning-border-subtle: #ccb172; /* 15% darker */
  --bs-danger-border-subtle: #c2979e; /* 15% darker */
  --bs-link-color: #0b57cf; /* 15% darker */
  --bs-link-color-rgb: 11, 87, 207; /* 15% darker */
  --bs-link-hover-color: #08489f; /* 15% darker */
  --bs-link-hover-color-rgb: 8, 72, 159; /* 15% darker */
  --bs-code-color: #b62a6f; /* 15% darker */
  --bs-border-color: #b0b4b7; /* 15% darker */
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175); /* No change as it's transparency */
  --bs-form-valid-color: #155f42; /* 15% darker */
  --bs-form-valid-border-color: #155f42; /* 15% darker */
  --bs-form-invalid-color: #b62a36; /* 15% darker */
  --bs-form-invalid-border-color: #b62a36; /* 15% darker */
}

[data-bs-theme=newdark] {
  color-scheme: newdark;
  --bs-body-color: #d1d6dd; /* 10% brighter */
  --bs-body-color-rgb: 209, 214, 221; /* 10% brighter */
  --bs-body-bg: #30363c; /* 10% brighter */
  --bs-body-bg-rgb: 48, 54, 60; /* 10% brighter */
  --bs-emphasis-color: #ffffff; /* Already at max brightness */
  --bs-emphasis-color-rgb: 255, 255, 255; /* Already at max brightness */
  --bs-secondary-color: rgba(209, 214, 221, 0.75); /* 10% brighter */
  --bs-secondary-color-rgb: 209, 214, 221; /* 10% brighter */
  --bs-secondary-bg: #40464d; /* 10% brighter */
  --bs-secondary-bg-rgb: 64, 70, 77; /* 10% brighter */
  --bs-tertiary-color: rgba(209, 214, 221, 0.5); /* 10% brighter */
  --bs-tertiary-color-rgb: 209, 214, 221; /* 10% brighter */
  --bs-tertiary-bg: #3a4046; /* 10% brighter */
  --bs-tertiary-bg-rgb: 58, 64, 70; /* 10% brighter */
  --bs-primary-text-emphasis: #91c7ff; /* 10% brighter */
  --bs-secondary-text-emphasis: #ccd2d8; /* 10% brighter */
  --bs-success-text-emphasis: #96ccb2; /* 10% brighter */
  --bs-info-text-emphasis: #96effc; /* 10% brighter */
  --bs-warning-text-emphasis: #ffe87a; /* 10% brighter */
  --bs-danger-text-emphasis: #f49aa4; /* 10% brighter */
  --bs-light-text-emphasis: #ffffff; /* Already at max brightness */
  --bs-dark-text-emphasis: #eef3f8; /* 10% brighter */
  --bs-primary-bg-subtle: #082858; /* 10% brighter */
  --bs-secondary-bg-subtle: #202123; /* 10% brighter */
  --bs-success-bg-subtle: #07241c; /* 10% brighter */
  --bs-info-bg-subtle: #053d49; /* 10% brighter */
  --bs-warning-bg-subtle: #412f03; /* 10% brighter */
  --bs-danger-bg-subtle: #3a0e12; /* 10% brighter */
  --bs-light-bg-subtle: #40464d; /* 10% brighter */
  --bs-dark-bg-subtle: #222528; /* 10% brighter */
  --bs-primary-border-subtle: #0b54b5; /* 10% brighter */
  --bs-secondary-border-subtle: #50575e; /* 10% brighter */
  --bs-success-border-subtle: #125a40; /* 10% brighter */
  --bs-info-border-subtle: #0a8fa9; /* 10% brighter */
  --bs-warning-border-subtle: #ac8a0e; /* 10% brighter */
  --bs-danger-border-subtle: #a92934; /* 10% brighter */
  --bs-light-border-subtle: #5f6871; /* 10% brighter */
  --bs-dark-border-subtle: #40464d; /* 10% brighter */
  --bs-heading-color: inherit; /* No change as it's not a color value */
  --bs-link-color: #91c7ff; /* 10% brighter */
  --bs-link-hover-color: #abd3ff; /* 10% brighter */
  --bs-link-color-rgb: 145, 199, 255; /* 10% brighter */
  --bs-link-hover-color-rgb: 171, 211, 255; /* 10% brighter */
  --bs-code-color: #f6a1ce; /* 10% brighter */
  --bs-border-color: #5f6871; /* 10% brighter */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15); /* No change as it's transparency */
  --bs-form-valid-color: #96ccb2; /* 10% brighter */
  --bs-form-valid-border-color: #96ccb2; /* 10% brighter */
  --bs-form-invalid-color: #f49aa4; /* 10% brighter */
  --bs-form-invalid-border-color: #f49aa4; /* 10% brighter */
}

.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-secondary-bg); /*--bs-tertiary-bg ?*/
  --bs-accordion-btn-focus-box-shadow: transparent;
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-active-bg: var(--bs-secondary-bg);
}

.btn-primary-nav {
  --bs-btn-color: var(--bs-brand-primary-text);
  --bs-btn-bg: var(--bs-brand-primary-color);
  --bs-btn-border-color: var(--bs-brand-primary-color);
  --bs-btn-hover-color: var(--bs-brand-primary-text-hover);
  --bs-btn-hover-bg: var(--bs-brand-primary-color);
  --bs-btn-hover-border-color: var(--bs-brand-primary-color);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-primary-rgb);
  --bs-btn-active-color: var(--bs-brand-primary-text);
  --bs-btn-active-bg: var(--bs-brand-primary-color);
  --bs-btn-active-border-color: var(--bs-brand-primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-primary-text);
  --bs-btn-disabled-bg: var(--bs-brand-primary-color);
  --bs-btn-disabled-border-color: var(--bs-brand-primary-color);
}

.btn-primary {
  --bs-btn-color: var(--bs-brand-primary-text);
  --bs-btn-bg: var(--bs-brand-primary-color);
  --bs-btn-border-color: var(--bs-brand-primary-color);
  --bs-btn-hover-color: var(--bs-brand-primary-text);
  --bs-btn-hover-bg: var(--bs-brand-primary-hover);
  --bs-btn-hover-border-color: var(--bs-brand-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-primary-rgb);
  --bs-btn-active-color: var(--bs-brand-primary-text);
  --bs-btn-active-bg: var(--bs-brand-primary-color);
  --bs-btn-active-border-color: var(--bs-brand-primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-primary-text);
  --bs-btn-disabled-bg: var(--bs-brand-primary-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-primary-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-secondary {
  --bs-btn-color: var(--bs-brand-secondary-text);
  --bs-btn-bg: var(--bs-brand-secondary-color);
  --bs-btn-border-color: var(--bs-brand-secondary-color);
  --bs-btn-hover-color: var(--bs-brand-secondary-text);
  --bs-btn-hover-bg: var(--bs-brand-secondary-hover);
  --bs-btn-hover-border-color: var(--bs-brand-secondary-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-secondary-rgb);
  --bs-btn-active-color: var(--bs-brand-secondary-text);
  --bs-btn-active-bg: var(--bs-brand-secondary-color);
  --bs-btn-active-border-color: var(--bs-brand-secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-secondary-text);
  --bs-btn-disabled-bg: var(--bs-brand-secondary-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-secondary-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-success {
  --bs-btn-color: var(--bs-brand-success-text);
  --bs-btn-bg: var(--bs-brand-success-color);
  --bs-btn-border-color: var(--bs-brand-success-color);
  --bs-btn-hover-color: var(--bs-brand-success-text);
  --bs-btn-hover-bg: var(--bs-brand-success-hover);
  --bs-btn-hover-border-color: var(--bs-brand-success-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-success-rgb);
  --bs-btn-active-color: var(--bs-brand-success-text);
  --bs-btn-active-bg: var(--bs-brand-success-color);
  --bs-btn-active-border-color: var(--bs-brand-success-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-success-text);
  --bs-btn-disabled-bg: var(--bs-brand-success-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-success-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-info {
  --bs-btn-color: var(--bs-brand-info-text);
  --bs-btn-bg: var(--bs-brand-info-color);
  --bs-btn-border-color: var(--bs-brand-info-color);
  --bs-btn-hover-color: var(--bs-brand-info-text);
  --bs-btn-hover-bg: var(--bs-brand-info-hover);
  --bs-btn-hover-border-color: var(--bs-brand-info-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-info-rgb);
  --bs-btn-active-color: var(--bs-brand-info-text);
  --bs-btn-active-bg: var(--bs-brand-info-color);
  --bs-btn-active-border-color: var(--bs-brand-info-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-info-text);
  --bs-btn-disabled-bg: var(--bs-brand-info-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-info-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-warning {
  --bs-btn-color: var(--bs-brand-warning-text);
  --bs-btn-bg: var(--bs-brand-warning-color);
  --bs-btn-border-color: var(--bs-brand-warning-color);
  --bs-btn-hover-color: var(--bs-brand-warning-text);
  --bs-btn-hover-bg: var(--bs-brand-warning-hover);
  --bs-btn-hover-border-color: var(--bs-brand-warning-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-warning-rgb);
  --bs-btn-active-color: var(--bs-brand-warning-text);
  --bs-btn-active-bg: var(--bs-brand-warning-color);
  --bs-btn-active-border-color: var(--bs-brand-warning-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-warning-text);
  --bs-btn-disabled-bg: var(--bs-brand-warning-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-warning-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-danger {
  --bs-btn-color: var(--bs-brand-danger-text);
  --bs-btn-bg: var(--bs-brand-danger-color);
  --bs-btn-border-color: var(--bs-brand-danger-color);
  --bs-btn-hover-color: var(--bs-brand-danger-text);
  --bs-btn-hover-bg: var(--bs-brand-danger-hover);
  --bs-btn-hover-border-color: var(--bs-brand-danger-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-danger-rgb);
  --bs-btn-active-color: var(--bs-brand-danger-text);
  --bs-btn-active-bg: var(--bs-brand-danger-color);
  --bs-btn-active-border-color: var(--bs-brand-danger-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-danger-text);
  --bs-btn-disabled-bg: var(--bs-brand-danger-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-danger-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-light {
  --bs-btn-color: var(--bs-brand-light-text);
  --bs-btn-bg: var(--bs-brand-light-color);
  --bs-btn-border-color: var(--bs-brand-light-color);
  --bs-btn-hover-color: var(--bs-brand-light-text);
  --bs-btn-hover-bg: var(--bs-brand-light-hover);
  --bs-btn-hover-border-color: var(--bs-brand-light-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-light-rgb);
  --bs-btn-active-color: var(--bs-brand-light-text);
  --bs-btn-active-bg: var(--bs-brand-light-color);
  --bs-btn-active-border-color: var(--bs-brand-light-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-light-text);
  --bs-btn-disabled-bg: var(--bs-brand-light-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-light-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.btn-dark {
  --bs-btn-color: var(--bs-brand-dark-text);
  --bs-btn-bg: var(--bs-brand-dark-color);
  --bs-btn-border-color: var(--bs-brand-dark-color);
  --bs-btn-hover-color: var(--bs-brand-dark-text);
  --bs-btn-hover-bg: var(--bs-brand-dark-hover);
  --bs-btn-hover-border-color: var(--bs-brand-dark-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-dark-rgb);
  --bs-btn-active-color: var(--bs-brand-dark-text);
  --bs-btn-active-bg: var(--bs-brand-dark-color);
  --bs-btn-active-border-color: var(--bs-brand-dark-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brand-dark-text);
  --bs-btn-disabled-bg: var(--bs-brand-dark-disabled);
  --bs-btn-disabled-border-color: var(--bs-brand-dark-disabled);
  font-weight: var(--brand-button-font-weight);
  font-size: var(--brand-button-font-size);
}

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-primary-rgb), var(--bs-text-opacity)) !important;
}
.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-secondary-rgb), var(--bs-text-opacity)) !important;
}
.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-success-rgb), var(--bs-text-opacity)) !important;
}
.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-info-rgb), var(--bs-text-opacity)) !important;
}
.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-warning-rgb), var(--bs-text-opacity)) !important;
}
.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-danger-rgb), var(--bs-text-opacity)) !important;
}
.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-light-rgb), var(--bs-text-opacity)) !important;
}
.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-dark-rgb), var(--bs-text-opacity)) !important;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-dark-rgb), var(--bs-bg-opacity)) !important;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-success-rgb), var(--bs-border-opacity)) !important;
}

.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-info-rgb), var(--bs-border-opacity)) !important;
}

.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-warning-rgb), var(--bs-border-opacity)) !important;
}

.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-danger-rgb), var(--bs-border-opacity)) !important;
}

.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-light-rgb), var(--bs-border-opacity)) !important;
}

.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-brand-dark-rgb), var(--bs-border-opacity)) !important;
}


.mediumSwitch {
  transform: scale(1.2); /* Increase size by 1.5 times */
  margin-top: 5px;
}

.modal-warning-glow {
  box-shadow: 0 0 15px 5px rgba(var(--bs-brand-danger-rgb), 0.5);
  border-radius: calc(var(--bs-border-radius) * 1); /* Optional: match the modal's border-radius */
}
.modal-info-glow {
  box-shadow: 0 0 15px 5px rgba(var(--bs-brand-primary-rgb), 0.5);
  border-radius: calc(var(--bs-border-radius) * 3); /* Optional: match the modal's border-radius */
}
.modal-success-glow {
  box-shadow: 0 0 15px 5px rgba(var(--bs-brand-success-rgb), 0.5);
  border-radius: calc(var(--bs-border-radius) * 3); /* Optional: match the modal's border-radius */
}

/* THEME ADJUSTMENTS END */

body {
  font-family: 'Karla', sans-serif;
  /* font-family: 'Poppins', sans-serif; */
}

/* Header Custom */
.div-header-main {
  height: var(--brand-header-height) !important;
	background-color: var(--bs-brand-primary-color);
}
@media (max-width: 768px) {
  .div-header-main {
    height: var(--brand-header-height) !important;
  }
}

.div-header-front {
  height: 90px !important;
	background-color: var(--bs-brand-primary-color);
}
@media (max-width: 768px) {
  .div-header-front {
    height: 80px !important;
  }
}

.static-filter-area {
  margin-top: var(--brand-header-height);
  /* height: var(--brand-filter-height); */
  /* height turned off, using class py-1/2/3 on parent element */
  z-index: 20;
}
.static-filter-row {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.static-filter-content {
  margin-top: calc(var(--brand-header-height) + var(--brand-filter-height) + var(--brand-content-space-height));
  /* margin-bottom: calc(var(--brand-footer-height) + var(--brand-content-space-height)); */
}

/* 
.static-sidebar {
  height: calc(100vh - (var(--brand-header-height) + var(--brand-filter-height) + var(--brand-content-space-height)));
  top: 0;
} */
.static-sidebar {
  position: sticky;
  top: calc(var(--brand-header-height) + var(--brand-filter-height) + var(--brand-content-space-height));
  height: calc(100vh - (var(--brand-header-height) + var(--brand-filter-height) + var(--brand-content-space-height)));
  overflow-y: auto;
}
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint */
  .static-sidebar {
    position: static !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
}

.fixed-bottom {
  z-index: 20 !important;
}
.footer-pagename {
  z-index: 21 !important;
  height: var(--brand-footer-height);
}
.div-footer-front {
  z-index: 20 !important;
  margin-top: var(--brand-header-height);
  height: 30px;
	background-color: var(--bs-brand-primary-color);
}
@media (max-width: 768px) {
  .div-footer-front {
    height: 30px;
  }
}

.div-bg-front {
  background-color: var(--bs-brand-primary-color);
}
.div-spacing-front {
  padding-top: auto;
  padding-bottom: auto;
}

.header-logo-container
{
  height: 100% !important;
	background-color: transparent; /* transparent */
}

.header-logo {
  margin-top: 0;
	height: 80% !important;
	width: auto;
}

/* Dashboard widget panels: mostly bg-body-secondary, with a small top fade
   down from bg-body so panels don't look like flat blocks. Fixed px stop
   (not %) so the fade stays the same size regardless of widget height. */
.dashboard-widget-fade {
  background: linear-gradient(to bottom, var(--bs-brand-primary-soft) 0px, var(--bs-secondary-bg) 60px);
}

.setlist-item-fade {
  background: linear-gradient(to bottom, var(--bs-secondary-bg) 0px, var(--bs-body-bg) 10px);
  /* background: linear-gradient(to bottom, var(--bs-brand-primary-soft) 0px, var(--bs-secondary-bg) 20px); */
}

/* Main Menu Nav */
.div-header-menu {
  position: fixed;
}

.bg-body-brand {
  background-color: var(--bs-brand-primary-color) !important;
}
.bg-warning-brand {
  background-color: #4c7ea7 !important; /* Fallback for browsers that do not support RGBA */
  background-color: rgba(76, 126, 167, 0.25) !important; /* RGBA with 50% opacity */
}
.bg-disabled-brand {
  /* background-color: #e9ecef; */
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.bg-disabled-brand:focus {
  /* background-color: #e9ecef; */
  background-color: var(--bs-secondary-bg);
  opacity: 1;
  border: 0px solid;
}

.bg-progress-brand {
  background-color: var(--bs-brand-primary-color) !important;
}
/* transport status bar */
.w-15 {
  width: 15% !important;
}

.bg-status-new {
  background-color: transparent !important;
}
.bg-status-active {
  background-color: #0077b6 !important;
}
.bg-status-complete {
  background-color: #008a62 !important;
}
.card-footer-custom {
  padding: none;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  /* border-top: none; */
}
.progress-custom,
.progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #0d6efd;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4.5px;
  border-bottom-right-radius: 4.5px;
}

/* remove text deco on links */
a{
  text-decoration: none;
}

/* Menu Links Custom */
.linkLevel1 {
  font-size: 1.0rem !important;
}
.linkLevel2 {
  font-size: 1.0rem !important;
  margin-left: 1rem !important;
  margin-bottom: 0.3rem !important;
}
.linkLevel3 {
  font-size: 1.0rem !important;
  margin-left: 3rem !important;
  margin-bottom: 0.3rem !important;
}
.link-body-emphasis-brand {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-body-emphasis-brand:hover {
  color: var(--bs-brand-primary-color) !important;
  -webkit-text-decoration-color: var(--bs-brand-primary-color) !important;
  text-decoration-color: var(--bs-brand-primary-color) !important;
}
.link-body-emphasis-brand:focus {
  color: var(--bs-brand-primary-color) !important;
  -webkit-text-decoration-color: var(--bs-brand-primary-color) !important;
  text-decoration-color: var(--bs-brand-primary-color) !important;
}

.core {
  text-transform: lowercase !important; /* hei kim ;) <3 */
}

/* Input groups custom */
.custom-input-group {
  display: flex;
  /* Add any desired styles for the input group container here */
}
.custom-input-group > div:not(:last-child) input {
  border-right: none !important; /* Remove right border for all inputs except the last child */
}
.custom-input-group > div:first-child input {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.custom-input-group > div:last-child input {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
.custom-input-group > div input {
  border-radius: 0;
}

.btn-fixed-w{
  max-width:260px !important;
}

.btn-fixed-h{
  max-height: 34px !important;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 8px;
  padding-right: 8px;
}

.w-100.btn.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.w-100.btn.dropdown-toggle::after {
  /* Keep the default dropdown arrow to the right */
  content: "";
}
.input-max-w{
max-width: 70%;
}

/* Footer Custom */
.div-footer-main {
  height: 50px;
background-color: var(--bs-brand-primary-color);
}


/* Table stuff */
.tr-brand{
  height: 50px;
}


.table-brand {
  --bs-table-color: #000;
  /* --bs-table-bg: #dadada; */
  --bs-table-bg: #d1d2d4;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
  }


.table-secondary-brand {
  --bs-table-color: #000;
  --bs-table-bg: #eeeeee;
  --bs-table-border-color: #cbccce;
  --bs-table-striped-bg: #e6e6e6;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #dcdee0;
  /* --bs-table-hover-bg: #d1d2d4; */
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-moveicon {

}
.table-moveicon:hover {
  cursor: pointer;
}


/* --brand-header-height: 50px;
--brand-footer-height: 30px;
--brand-filter-height: 50px;
--brand-content-space-height: 10px; */

/* table with vertical scroll and sticky header */
.table-scrollable {
  height: calc(100vh - (var(--brand-header-height) + var(--brand-filter-height) + (var(--brand-content-space-height) * 2)));
  /* + var(--brand-footer-height) */
  overflow-y:scroll;
}
.table-scrollable-under-tabs {
  height: calc(100vh - (var(--brand-header-height) + (var(--brand-filter-height)*3.5) + (var(--brand-content-space-height) * 2)));
  /* + var(--brand-footer-height) */
  overflow-y:scroll;
}

.table-scrollable-modal {
  height: calc(40vh);
  overflow-y:scroll;
}

/* "Push" layout for the add-songs offcanvas: Bootstrap's offcanvas is always
   position:fixed and simply overlays the page — there's no built-in push
   mode. This manually squeezes the page's own fixed header, the setlist
   actionbar, and the main content over by the offcanvas width while it's
   open, so the setlist (drag handle, remove, transition note buttons) stays
   reachable instead of hidden underneath it. Skipped below 768px: the
   offcanvas is already effectively fullscreen there, so there's no page
   left to squeeze into. */
@media (min-width: 768px) {
  body.offcanvas-push-active .navbar.fixed-top,
  body.offcanvas-push-active .static-filter-area,
  body.offcanvas-push-active main {
    /* width, not margin-right: .static-filter-area also carries
       .container-fluid, which sets an explicit width:100% — margin-right on
       an explicitly-sized box just shifts it left instead of shrinking it.
       container-fluid's margin-left/right:auto also needs killing here,
       otherwise a now-narrower-than-its-span box gets centered between the
       left:0/right:0 anchors instead of staying flush against the left edge. */
    width: calc(100% - var(--bs-offcanvas-width, 400px));
    margin-left: 0;
    margin-right: 0;
    transition: width 0.3s ease-in-out;
  }
}

/* An offcanvas body is near-full-viewport height and its own height varies
   with the viewport, unlike a modal dialog (capped/centered) — a fixed vh
   value like .table-scrollable-modal leaves most of it empty. Flex-fills
   whatever space is left after the offcanvas's other content (hint text,
   search box, action button) instead. Needs the offcanvas-body (and any
   wrapper around this element) to be flex columns (d-flex flex-column) for
   flex-grow to have something to grow into. */
.scrollable-offcanvas-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  padding-right: 10px; /* breathing room between list content and the scrollbar track */
}

.table-scrollable-accordion {
  height: calc(100vh - (var(--brand-header-height) + var(--brand-filter-height) + (var(--brand-content-space-height) * 2) + (var(--brand-accordion-header-height) * 2)));
  /* height: calc(62vh); */
  overflow-y:scroll;
}

/* Same one-header + one-fixed-bar composition as .table-scrollable, applied to the
   setlist editor's item list instead of a table — scrolls under the setlist actionbar
   rather than the whole page scrolling. */
.setlist-scrollable {
  height: calc(100vh - (var(--brand-header-height) + var(--brand-filter-height) + (var(--brand-content-space-height) * 6)));
  overflow-y: scroll;
  padding-right: 10px; /* breathing room between list content and the scrollbar track */
}

.table-scrollable-head {
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-static-head {
  position: static;
  top: 120;
  z-index: 10;
}

.table-head-hover:hover {
  /* background-color: var(--bs-secondary-bg); */
  border-bottom: 1px solid !important;
  /* border bottom is a maybe?? */
}

.table-head-rounded th:first-child {
  border-top-left-radius: calc(var(--bs-border-radius)*1);
}
.table-head-rounded th:last-child {
  border-top-right-radius: calc(var(--bs-border-radius)*1);
}

.table-loading tr {
  display: none !important;
}

.table-row-success-highlight {
    position: relative;
    /* Ensure the row is positioned for the overlay */
    z-index: 200;
}
.table-row-success-highlight::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--bs-brand-success-rgb), 0.25);
    border-top: 1px solid rgba(var(--bs-brand-success-rgb), 1.0);
    border-bottom: 1px solid rgba(var(--bs-brand-success-rgb), 1.0);
    pointer-events: none;
    z-index: 200;
}
.table-row-error-highlight {
    position: relative;
    /* Ensure the row is positioned for the overlay */
    z-index: 200;
}
.table-row-error-highlight::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--bs-brand-danger-rgb), 0.25);
    border-top: 1px solid rgba(var(--bs-brand-danger-rgb), 1.0);
    border-bottom: 1px solid rgba(var(--bs-brand-danger-rgb), 1.0);
    pointer-events: none;
    z-index: 200;
}
.table-row-warning-highlight {
    position: relative;
    /* Ensure the row is positioned for the overlay */
    z-index: 200;
}
.table-row-warning-highlight::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--bs-brand-warning-rgb), 0.25);
    border-top: 1px solid rgba(var(--bs-brand-warning-rgb), 1.0);
    border-bottom: 1px solid rgba(var(--bs-brand-warning-rgb), 1.0);
    pointer-events: none;
    z-index: 200;
}

.card-body-scrollable {
  max-height: calc(100vh - 440px);
  overflow-y:scroll;
}

.modal-body-scrollable {
  overflow-y:scroll;
}
.modal-maxheight {
  /* max-height: calc(80vh); */
  max-height: 80vh;
}

.offcanvas-body-scrollable {
  /* max-height: calc(100vh - 440px); */
  overflow-y:scroll;
}

/* Scrollbars */
/* Base scrollbar styling - works in Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent !important;
}
/* Styling the scrollbar corner (where horizontal and vertical scrollbars meet) */
::-webkit-scrollbar-corner {
  background: transparent !important;
}
/* Styling the scrollbar track */
::-webkit-scrollbar-track {
  background: var(--bs-secondary-bg) !important;
  border-radius: 4px;
}
/* Styling the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: var(--bs-dark-bg-subtle) !important;
  border-radius: 4px;
  cursor: grab;
}
/* Styling the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--bs-dark-bg-subtle) !important;
  cursor: grab;
}
/* Styling the scrollbar thumb when being dragged */
::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
}

/* Hide the up and down arrows for number input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Hide the up and down arrows for number input in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.help-iframe-container {
  width: 100%;
  height: calc(100vh - 240px);
}

@media (max-width: 768px) {
  .help-iframe-container {
    width: 100%;
    height: calc(100vh - 240px);
  }
}

.help-iframe {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 768px) {
  .help-iframe {
    width: calc(100vw - 80px) !important;
    height: calc(100vh - 240px) !important;
  }
}

.pdfDesign {
  width: 210mm; /* A4 width in millimeters */
  height: 290mm; /* A4 height in millimeters */
  margin: 0 auto; /* Center the content on the page */
  padding: 60px; /* Add padding if necessary */
}
.pdf-horizontal-line {
  border-top: 2px solid var(--bs-brand-primary-color); /* 1px solid black line */
  width: 100%; /* Full width of the container */
  margin-top: 5px;
  margin-bottom: 5px;
}
.pdf-signature-line {
  border-top: 2px solid var(--bs-brand-primary-color); /* 1px solid black line */
  width: 50%; /* Full width of the container */
  margin-top: 5px;
  margin-bottom: 5px;
}
.fs-7 {
  font-size: 0.8rem !important;
}

.allpdftext {
  letter-spacing: 0.01px;
}

.img-thumbnail-trlog {
  padding: 0rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}

/* Container to maintain aspect ratio */
.img-container {
  position: relative;
  padding-bottom: 100%; /* 1:1 aspect ratio (square) */
  overflow: hidden;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
}

/* Images inside the container */
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This ensures the entire image is visible without stretching */
}

.img-view-button {
  position: absolute; /* Set the button to absolute positioning within the container */
  bottom: 0px; /* Adjust the button's position from the bottom */
  left: 0px; /* Adjust the button's position from the right */
}

.img-download-button {
  position: absolute; /* Set the button to absolute positioning within the container */
  bottom: 0px; /* Adjust the button's position from the bottom */
  right: 0px; /* Adjust the button's position from the right */
}

.img-delete-menu {
  position: absolute;
  right: 5%;
  bottom: 14%;
  width: 60%;
}
.img-comment-menu {
  position: absolute;
  left: 5%;
  bottom: 14%;
  width: 90%;
  z-index: 10000000;
}

.img-btn-group {
  position: absolute; /* Set the button to absolute positioning within the container */
  bottom: 0px; /* Adjust the button's position from the bottom */
  width: 100%;
  border-radius: 0px !important;
}
.img-btn {
  border-radius: 0px !important;
}

.img-comment-group {
  position: absolute; /* Set the button to absolute positioning within the container */
  top: 0px; /* Adjust the button's position from the bottom */
  width: 100%;
  border-radius: 0px !important;
}

.img-manual {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  border: none;
}
.img-manual-front-container{
  height: calc(100vh - 300px) !important;
  border-radius: 15px;
  bottom: 0px;
  overflow-y:hidden;
}
.img-manual-front {
  width: 100%;
  height: auto;
  border: none !important;
  border-radius: 15px;
  margin-top: auto;
  margin-bottom: auto;
}

.img-devmode {
  margin-left: auto;
  margin-right: auto;
	width: 100%;
}

.userfilter-menu {
  width: 240px;
}
.userfilter-scrollable1 {
  min-width: 200px;
  max-height: 230px !important;
  overflow-y: scroll;
  border-radius: calc(var(--bs-border-radius)) 0px 0px calc(var(--bs-border-radius));
}
.userfilter-scrollable2 {
  min-width: 200px;
  max-height: 220px !important;
  overflow-y: scroll;
  border-radius: calc(var(--bs-border-radius)) 0px 0px calc(var(--bs-border-radius));
}

/* Hide horizontal scrollbar in modals without affecting content or glow effects */
.modal-dialog {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

.modal-dialog::-webkit-scrollbar {
    width: 0px !important; /* Chrome, Safari, Opera */
    height: 0px !important; /* Hide horizontal scrollbar */
    background: transparent !important;
}

.modal-content {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

.modal-content::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important; /* Hide horizontal scrollbar */
    background: transparent !important;
}

.modal-body {
    word-wrap: break-word;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

.modal-body::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important; /* Hide horizontal scrollbar */
    background: transparent !important;
}

/* Hide password manager popups/overlays that might cause overflow */
.modal [data-proton-pass-extension],
.modal [data-1password-extension],
.modal [data-lastpass-extension],
.modal [data-bitwarden-extension] {
    display: none !important;
}