:root {
  /* Customizizations: using https://bootstrap.build/app */

  /* Color System */
  --primary:    #22577A;
  --secondary:  #38A3A5;
  --success:    #57CC99; 

  /* Primary Variants */
  --primary-darken-16: color-mix(in srgb, var(--primary), black 16%);
  --primary-darken-48: color-mix(in srgb, var(--primary), black 48%);
  --primary-darken-72: color-mix(in srgb, var(--primary), black 72%);

  --primary-lighten-24: color-mix(in srgb, var(--primary), white 24%);
  --primary-lighten-32: color-mix(in srgb, var(--primary), white 32%);
  --primary-lighten-40: color-mix(in srgb, var(--primary), white 40%);
  --primary-lighten-48: color-mix(in srgb, var(--primary), white 48%);
  --primary-lighten-64: color-mix(in srgb, var(--primary), white 64%);
  --primary-lighten-72: color-mix(in srgb, var(--primary), white 72%);
  --primary-lighten-80: color-mix(in srgb, var(--primary), white 80%);

  /* Secondary Variants */
  --secondary-darken-24: color-mix(in srgb, var(--secondary), black 24%);
  --secondary-darken-32: color-mix(in srgb, var(--secondary), black 32%);
  --secondary-darken-40: color-mix(in srgb, var(--secondary), black 40%);
  --secondary-darken-48: color-mix(in srgb, var(--secondary), black 48%);
  --secondary-darken-72: color-mix(in srgb, var(--secondary), black 72%);

  --secondary-lighten-16: color-mix(in srgb, var(--secondary), white 16%);
  --secondary-lighten-48: color-mix(in srgb, var(--secondary), white 48%);
  --secondary-lighten-64: color-mix(in srgb, var(--secondary), white 64%);
  --secondary-lighten-72: color-mix(in srgb, var(--secondary), white 72%);
  --secondary-lighten-80: color-mix(in srgb, var(--secondary), white 80%);

  /* Success Variants */
  --success-darken-24: color-mix(in srgb, var(--success), black 24%);
  --success-darken-32: color-mix(in srgb, var(--success), black 32%);
  --success-darken-40: color-mix(in srgb, var(--success), black 40%);
  --success-darken-48: color-mix(in srgb, var(--success), black 48%);
  --success-darken-72: color-mix(in srgb, var(--success), black 72%);

  --success-lighten-16: color-mix(in srgb, var(--success), white 16%);
  --success-lighten-24: color-mix(in srgb, var(--success), white 24%);
  --success-lighten-48: color-mix(in srgb, var(--success), white 48%);
  --success-lighten-64: color-mix(in srgb, var(--success), white 64%);
  --success-lighten-72: color-mix(in srgb, var(--success), white 72%);
  --success-lighten-80: color-mix(in srgb, var(--success), white 80%);
}

a {
  color: var(--primary); }
  a:hover {
    color: var(--primary-lighten-24); }

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: var(--primary-lighten-72); }

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: var(--primary-lighten-48); }

.table-hover .table-primary:hover {
  background-color: var(--primary-lighten-64); }
  .table-hover .table-primary:hover > td,
  .table-hover .table-primary:hover > th {
    background-color: var(--primary-lighten-64); }

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: var(--secondary-lighten-72); }

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: var(--secondary-lighten-48); }

.table-hover .table-secondary:hover {
  background-color: var(--secondary-lighten-64); }
  .table-hover .table-secondary:hover > td,
  .table-hover .table-secondary:hover > th {
    background-color: var(--secondary-lighten-64); }

.table-success,
.table-success > th,
.table-success > td {
  background-color: var(--success-lighten-72); }

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: var(--success-lighten-48); }

.table-hover .table-success:hover {
  background-color: var(--success-lighten-64); }
  .table-hover .table-success:hover > td,
  .table-hover .table-success:hover > th {
    background-color: var(--success-lighten-64); }

.form-control:focus {
    border-color: var(--primary-lighten-24);
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }

.valid-feedback {
  color: var(--success); }

.valid-tooltip {
  color: var(--success-darken-72);
  background-color: rgb(from var(--success) r g b / 0.9); }

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--success);
  /* manual - update fill to success color */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2357CC99' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); }
  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.25); }

.was-validated .custom-select:valid, .custom-select.is-valid {
  border-color: var(--success);
  /* manual - update fill to success color */
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2357CC99' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); }
  .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.25); }

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--success); }

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
  color: var(--success); }
  .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
    border-color: var(--success); }

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: var(--success-lighten-24);
  background-color: var(--success-lighten-24); }

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.25); }

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--success); }

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
  border-color: var(--success); }

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: var(--success);
  box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.25); }

.btn:focus, .btn.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary); }
  .btn-primary:hover {
    background-color: var(--primary-lighten-24);
    border-color: var(--primary-lighten-32); }
  .btn-primary:focus, .btn-primary.focus {
    background-color: var(--primary-lighten-24);
    border-color: var(--primary-lighten-32);
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary-darken-16) r g b / 0.5); }
  .btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--primary);
    border-color: var(--primary); }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
  .show > .btn-primary.dropdown-toggle {
    background-color: var(--primary-lighten-32);
    border-color: var(--primary-lighten-40); }
    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgb(from var(--primary-darken-16) r g b / 0.5); }

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary); }
  .btn-secondary:hover {
    background-color: var(--secondary-darken-24);
    border-color: var(--secondary-darken-32); }
  .btn-secondary:focus, .btn-secondary.focus {
    background-color: var(--secondary-darken-24);
    border-color: var(--secondary-darken-32);
    box-shadow: 0 0 0 0.2rem rgb(from var(--secondary-lighten-16) r g b / 0.5); }
  .btn-secondary.disabled, .btn-secondary:disabled {
    background-color: var(--secondary);
    border-color: var(--secondary); }
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-secondary.dropdown-toggle {
    background-color: var(--secondary-darken-32);
    border-color: var(--secondary-darken-40); }
    .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-secondary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgb(from var(--secondary-lighten-16) r g b / 0.5); }

.btn-success {
  color: var(--success-darken-72);
  background-color: var(--success);
  border-color: var(--success); }
  .btn-success:hover {
    background-color: var(--success-darken-24);
    border-color: var(--success-darken-32); }
  .btn-success:focus, .btn-success.focus {
    background-color: var(--success-darken-24);
    border-color: var(--success-darken-32);
    box-shadow: 0 0 0 0.2rem rgb(from var(--success-lighten-16) r g b / 0.5); }
  .btn-success.disabled, .btn-success:disabled {
    color: var(--success-darken-72);
    background-color: var(--success);
    border-color: var(--success); }
  .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
  .show > .btn-success.dropdown-toggle {
    background-color: var(--success-darken-32);
    border-color: var(--success-darken-40); }
    .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
    .show > .btn-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgb(from var(--success-lighten-16) r g b / 0.5); }

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary); }
  .btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary); }
  .btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.5); }
  .btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--primary); }
  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
  .show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary); }
    .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.5); }

.btn-outline-secondary {
  color: var(--secondary);
  border-color: var(--secondary); }
  .btn-outline-secondary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary); }
  .btn-outline-secondary:focus, .btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--secondary) r g b / 0.5); }
  .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
    color: var(--secondary); }
  .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--secondary);
    border-color: var(--secondary); }
    .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-secondary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgb(from var(--secondary) r g b / 0.5); }

.btn-outline-success {
  color: var(--success);
  border-color: var(--success); }
  .btn-outline-success:hover {
    color: var(--success-darken-72);
    background-color: var(--success);
    border-color: var(--success); }
  .btn-outline-success:focus, .btn-outline-success.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.5); }
  .btn-outline-success.disabled, .btn-outline-success:disabled {
    color: var(--success); }
  .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
  .show > .btn-outline-success.dropdown-toggle {
    color: var(--success-darken-72);
    background-color: var(--success);
    border-color: var(--success); }
    .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.5); }

.btn-link {
  color: var(--primary); }
  .btn-link:hover {
    color: var(--primary-lighten-24); }

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary); }

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--primary);
    background-color: var(--primary); }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--primary-lighten-24); }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--primary-lighten-48);
    border-color: var(--primary-lighten-48); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: var(--primary);
  background-color: var(--primary); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgb(from var(--primary) r g b / 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgb(from var(--primary) r g b / 0.5); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgb(from var(--primary) r g b / 0.5); }

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgb(from var(--primary) r g b / 0.5); }

.custom-select:focus {
    border-color: var(--primary-lighten-24);
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }

.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--primary-lighten-24);
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }

.custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }
  .custom-range::-webkit-slider-thumb {
    background-color: var(--primary); }
    .custom-range::-webkit-slider-thumb:active {
      background-color: var(--primary-lighten-48); }
  .custom-range::-moz-range-thumb {
    background-color: var(--primary); }
    .custom-range::-moz-range-thumb:active {
      background-color: var(--primary-lighten-48); }
  .custom-range::-ms-thumb {
    background-color: var(--primary); }
    .custom-range::-ms-thumb:active {
      background-color: var(--primary-lighten-48); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary); }

.page-link {
  color: var(--primary); }
  .page-link:hover {
    color: var(--primary-lighten-24); }
  .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.25); }

.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary); }

.badge-primary {
  background-color: var(--primary); }
  a.badge-primary:hover, a.badge-primary:focus {
    background-color:var( --primary-lighten-24); }
  a.badge-primary:focus, a.badge-primary.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--primary) r g b / 0.5); }

.badge-secondary {
  background-color: var(--secondary); }
  a.badge-secondary:hover, a.badge-secondary:focus {
    background-color: var(--secondary-darken-24); }
  a.badge-secondary:focus, a.badge-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--secondary) r g b / 0.5); }

.badge-success {
  color: var(--success-darken-72);
  background-color: var(--success); }
  a.badge-success:hover, a.badge-success:focus {
    color: var(--success-darken-72);
    background-color: var(--success-darken-24); }
  a.badge-success:focus, a.badge-success.focus {
    box-shadow: 0 0 0 0.2rem rgb(from var(--success) r g b / 0.5); }

.alert-primary {
  color: var(--primary-darken-48);
  background-color: var(--primary-lighten-80);
  border-color: var(--primary-lighten-72); }
  .alert-primary hr {
    border-top-color: var(--primary-lighten-64); }
  .alert-primary .alert-link {
    color: var(--primary-darken-72); }

.alert-secondary {
  color: var(--secondary-darken-48);
  background-color: var(--secondary-lighten-80);
  border-color: var(--secondary-lighten-72); }
  .alert-secondary hr {
    border-top-color: var(--secondary-lighten-64); }
  .alert-secondary .alert-link {
    color: var(--secondary-darken-72); }

.alert-success {
  color: var(--success-darken-48);
  background-color: var(--success-lighten-80);
  border-color: var(--success-lighten-72); }
  .alert-success hr {
    border-top-color: -var(-success-lighten-64); }
  .alert-success .alert-link {
    color: var(--success-darken-72); }

.progress-bar {
  background-color: var(--primary); }

.list-group-item.active {
    background-color: var(--primary);
    border-color: var(--primary); }

.list-group-item-primary {
  color: var(--primary-darken-48);
  background-color: var(--primary-lighten-72); }
  .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
    color: var(--primary-darken-48);
    background-color: var(--primary-lighten-64); }
  .list-group-item-primary.list-group-item-action.active {
    background-color: var(--primary-darken-48);
    border-color: var(--primary-darken-48); }

.list-group-item-secondary {
  color: var(--secondary-darken-48);
  background-color: var(--secondary-lighten-72); }
  .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
    color: var(--secondary-darken-48);
    background-color: var(--secondary-lighten-64); }
  .list-group-item-secondary.list-group-item-action.active {
    background-color: var(--secondary-darken-48);
    border-color: var(--secondary-darken-48); }

.list-group-item-success {
  color: var(--success-darken-48);
  background-color: var(--success-lighten-72); }
  .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
    color: var(--success-darken-48);
    background-color: var(--success-lighten-64); }
  .list-group-item-success.list-group-item-action.active {
    background-color: var(--success-darken-48);
    border-color: var(--success-darken-48); }

.bg-primary {
  background-color: var(--primary) !important; }

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: var(--primary-lighten-24) !important; }

.bg-secondary {
  background-color: var(--secondary) !important; }

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: var(--secondary-darken-24) !important; }

.bg-success {
  background-color: var(--success) !important; }

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: var(--success-darken-24) !important; }

.border-primary {
  border-color: var(--primary) !important; }

.border-secondary {
  border-color: var(--secondary) !important; }

.border-success {
  border-color: var(--success) !important; }

.text-primary {
  color: var(--primary) !important; }

a.text-primary:hover, a.text-primary:focus {
  color: var(--primary-lighten-24) !important; }

.text-secondary {
  color: var(--secondary) !important; }

a.text-secondary:hover, a.text-secondary:focus {
  color: var(--secondary-darken-24) !important; }

.text-success {
  color: var(--success) !important; }

a.text-success:hover, a.text-success:focus {
  color: var(--success-darken-24) !important; }