:root {
  --app-bg-color: #000080;
  --app-text-color: #FFFFFF;
  --app-bg-modal-color: #000080;
}
html, body {
  min-height: 100vh;
  background-color: var(--app-bg-color);
  color: var(--app-text-color);
}
/* RESPONSIVE */
@media (max-width: 575px) {
.btn-responsive {
  margin: 0px 1px 0px 0px;
  padding: 0.2rem 0.3rem; /* 0.25rem 0.5rem is usual btn-sm padding */
  font-size: 0.875rem; /* 0.875rem is usual btn-sm font size */
  line-height: 0.9;
  border: none;
}
.btn-responsive img {
  height: 0.9em; /* just under font size */
  width: auto; /* preserve aspect ratio */
  vertical-align: middle; /* aligns with text baseline */
  margin-left: 0.05em; /* optional spacing from text */
}
.li-responsive {
  font-size: 0.875rem;
}
.bootbox .btn {
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
}
.bootbox .bootbox-body {
  font-size: 0.8rem !important;
}
textarea {
  font-size: 0.8rem !important;
}
select {
  font-size: 0.8rem !important;
}
.table-responsive td, 
.table-responsive th {
  padding: 0.3rem 0.3rem;  /* was 5px */
  font-size: 0.8rem; /* was 14px */
  vertical-align: middle;
}
.form-control {
  padding: 0.2rem 0.2rem;
  font-size: 0.8rem;
  line-height: 0.9;
}
.form-check {
  font-size: 0.8rem;
  line-height: 0.9;
  display: flex;
  align-items: center;
}
.form-check-label {
  margin-bottom: 0; /* Prevent label from pushing downward */
  padding: 0.2rem 0.2rem;
}
.alert {
  padding: 0.2rem 0.3rem;
}
input[type="date"] {
  vertical-align: middle;
}
.bootstrap-select .dropdown-toggle {
  font-size: 0.8rem !important;
  padding: 0.2rem 0.2rem !important;
}
.bootstrap-select .dropdown-menu li a {
  font-size: 0.8rem !important;
  padding: 0.2rem 0.2rem !important;
}
}

/* TOTALLY DYNAMIC */
title-responsive {
  font-size: calc(16px + 2vw);
  font-weight: 550;
}
subtitle-responsive {
  font-size: calc(12px + 1.5vw);
  font-weight: 550;
}
text-responsive {
  font-size: calc(12px + 0.5vw);
}
.badge-responsive {
  font-size: calc(12px + 0.5vw);
}
li-responsive {
  font-size: calc(11px + 0.5vw);
}
li-responsive:hover {
  font-weight: bold;
  background-color: #FFFF00!important;
}
dl, ol, ul {
  padding-inline-start: 20px;
}
.calendar-cell {
  font-size: calc(11px + 0.5vw);
  height: auto;
  border: 1px solid #ffffff;
  text-align: center;
  padding: 4px;
}
.calendar-header {
  font-weight: bold;
  font-size: calc(11px + 0.5vw);
  text-align: center;
  background-color: #ffffff;
  color: #0F0A0A;
}
th-collapsed {
  height: 1;
}
/* CLASSES FOR APP CONFIGURABLE BACKGROUND COLOURS */
.border-primary {
  border-color: var(--app-bg-color)!important;
}
.bg-bvr-primary {
  background-color: var(--app-bg-color)!important;
}
.text-bvr-primary {
  color: var(--app-text-color)!important;
}
.table-bvr-primary {
  --bs-table-bg: var(--app-bg-color)!important;
  --bs-table-border-color: var(--app-text-color)!important;
  --bs-table-color: var(--app-text-color)!important; /* text colour */
}
.modal-body-bvr {
    color: var(--app-text-color);
    background-color: var(--app-bg-modal-color);
}

/* CLASSES */
.alert {
  border-radius: 0;
}
.btn-responsive {
  margin: 1px 2px 1px 0px;
}
.form-control {
    background-clip: initial;
}
.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
.bg-bvr-modal {
  background-color: #000080!important;
}
.bg-bvr-secondary {
  background-color: #FFFF00!important;
}
.bg-bvr-lightish {
  background-color: #d5d5d5!important;
}
.bg-bvr-darkish {
  background-color: #6C757D!important;
}
.bg-bvr-info {
  background-color: #2292A4!important;
}
.calendar-cell:hover,
.img-bvr-green:hover,
.img-bvr-red:hover,
.img-bvr-yellow:hover,
.btn-bvr-primary:hover,
.btn-bvr-secondary:hover,
.btn-bvr-warning:hover,
.btn-bvr-danger:hover,
.btn-bvr-light:hover,
.btn-bvr-dark:hover,
.btn-bvr-info:hover {
  background-color: #F5F5F5!important;  /* was dee2e6 */
  color: #0F0A0A!important;
}
.btn-bvr-primary,
.badge-primary {
    color: #F5F5F5;
    background-color: #013CD8;
    border-color: #013CD8;
}
.btn-bvr-primary {
  --bs-btn-bg: #013CD8;;
  --bs-btn-hover-bg: #013CD8;;
  --bs-btn-border-color: #013CD8;;
  --bs-btn-hover-border-color: #013CD8;;
  --bs-btn-color: #F5F5F5;
  --bs-btn-hover-color: #F5F5F5;
}
.btn-bvr-secondary,
.btn-bvr-warning,
.badge-warning {
    color: #0F0A0A;
    background-color: #FFFF00;
    border-color: #FFFF00;
}
.btn-bvr-secondary,
.btn-bvr-warning {
  --bs-btn-bg: #FFFF00;
  --bs-btn-hover-bg: #FFFF00;
  --bs-btn-border-color: #FFFF00;
  --bs-btn-hover-border-color: #0F0A0A;
  --bs-btn-color: #0F0A0A;
  --bs-btn-hover-color: #0F0A0A;
}
.btn-bvr-danger,
.badge-danger {
    color: #ffffff;
    background-color: #ff0000;
    border-color: #ff0000;
}
.btn-bvr-danger {
  --bs-btn-bg: #ff0000;
  --bs-btn-hover-bg: #ff0000;
  --bs-btn-border-color: #ff0000;
  --bs-btn-hover-border-color: #ff0000;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #0F0A0A;
}
.btn-bvr-light {
    color: #0F0A0A;
    background-color: #F5F5F5;
    border-color: #F5F5F5;
}
.btn-bvr-light {
  --bs-btn-bg: #F5F5F5;
  --bs-btn-hover-bg: #F5F5F5;
  --bs-btn-border-color: #F5F5F5;
  --bs-btn-hover-border-color: #F5F5F5;
  --bs-btn-color: #0F0A0A;
  --bs-btn-hover-color: #0F0A0A;
}
.btn-bvr-dark {
    color: #FFFFFF;
    background-color: #6C757D;
    border-color: #6C757D;
}
.btn-bvr-dark {
  --bs-btn-bg: #6C757D;
  --bs-btn-hover-bg: #6C757D;
  --bs-btn-border-color: #6C757D;
  --bs-btn-hover-border-color: #6C757D;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
}
.btn-bvr-info {
    color: #0F0A0A;
    background-color: #2292A4;
    border-color: #2292A4;
}
.btn-bvr-info {
  --bs-btn-bg: #2292A4;
  --bs-btn-hover-bg: #2292A4;
  --bs-btn-border-color: #2292A4;
  --bs-btn-hover-border-color: #2292A4;
  --bs-btn-color: #0F0A0A;
  --bs-btn-hover-color: #0F0A0A;
}
.badge-Rainbow {
    color: #000000;
    background-image: linear-gradient(to left, orchid, aqua, greenyellow, yellow, yellow, orange, red);
    border: 1px solid #000000;
}
.badge-White {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #000000;
}
.badge-Yellow {
    color: #000000;
    background-color: #ffff00;
    border: 1px solid #000000;
}
.badge-Tangerine {
    color: #000000;
    background-color: #ffa800;
    border: 1px solid #000000;
}
.badge-Orange {
    color: #000000;
    background-color: #ff8000;
    border: 1px solid #000000;
}
.badge-Lime {
    color: #000000;
    background-color: #7fff00;
    border: 1px solid #000000;
}
.badge-Green {
    color: #000000;
    background-color: #00d92f;
    border: 1px solid #000000;
}
.badge-Aqua {
    color: #000000;
    background-color: #00ffff;
    border: 1px solid #000000;
}
.badge-Blue {
    color: #000000;
    background-color: #00bfff;
    border: 1px solid #000000;
}
.badge-Pink {
    color: #000000;
    background-color: #ffc0cb;
    border: 1px solid #000000;
}
.badge-Purple {
    color: #ffffff;
    background-color: #da70d6;
    border: 1px solid #000000;
}
.badge-Brown {
    color: #ffffff;
    background-color: #cd853f;
    border: 1px solid #000000;
}
.badge-Red {
    color: #ffffff;
    background-color: #ff0000;
    border: 1px solid #000000;
}
.badge-Black {
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #000000;
}
.badge-Unknown {
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #000000;
}
.color-bvr-green,
.img-bvr-green {
  color: #00d92f;
}
.color-bvr-red,
.img-bvr-red {
  color: #ff0000;
}
.color-bvr-yellow,
.img-bvr-yellow {
  color: #FFFF00;
}
.image-right {
  float: right;
  margin: 5px;
}
#rainbowrow1 {
  background-image: linear-gradient(to right, yellow, #ffa800, #ff8000, greenyellow);
}
#rainbowrow2 {
  background-image: linear-gradient(to right, greenyellow, green, aqua);
}
#rainbowrow3 {
  background-image: linear-gradient(to right, aqua, aqua, blue, pink, orchid, brown, red, black);
}
.text-toggle[aria-expanded=false] .text-expanded {
  display: none;
}
.text-toggle[aria-expanded=true] .text-collapsed {
  display: none;
}