F /* Site Wide 
----------------------------------- */
body {
  margin-bottom: 60px;
}

/* QRCode 
----------------------------------- */
#qrcode {
  display: flex;
  justify-content: center;
}

/* Nav 
----------------------------------- */
a.nav-link {
  color: lightgray;
}

  a.nav-link:hover {
    color: lightgray;
    background-color: transparent;
    border-radius: 3px;
    border: 0px;
    border-bottom: 3px solid #369; /* Line under active tab */
  }

.navbar-brand .logo {
  position: relative;
  display: inline-block;
  height: 42px !important;
  width: auto !important;
  margin: 0;
  top: 0;
}

.company-block {
  position: absolute;
  padding: 0;
  margin-left: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  display: inline-block;
  text-shadow: 1px 1px 1px black;
  letter-spacing: 1.2px;
}

.company-name {
  position: absolute;
  font-weight: 400;
  height: 26px;
  color: #bcd;
  font-size: 1.3em;
  line-height: 1;
}

.company-name-sm {
  position: absolute;
  left: 0;
  top: 18px;
  font-weight: 400;
  padding-top: 0;
  color: lightsteelblue;
}

/* Tabs 
----------------------------------- */
.panel.with-nav-tabs .panel-heading {
  padding: 5px 5px 0 5px;
}

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

/* Custom wide modal 
----------------------------------- */
.modal-wide {
  overflow-y: initial !important;
}

  .modal-wide .modal-dialog {
    max-width: 90%;
    width: 90%;
  }

    .modal-wide .modal-dialog .modal-body {
      overflow-y: auto;
      max-height: 50vh;
    }

  .modal-wide .modal-content .modal-body {
    overflow-y: auto;
    max-height: 500px;
  }

.modal-dialog.modal-wide {
  max-width: 90%;
  width: 90%;
}

#search {
  position: fixed;
  top: 15%;
  left: 25%;
  width: 50%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  /*-ms-transition: all 0.5s ease-in-out;*/
  transition: all 0.5s ease-in-out;
  -webkit-transform: translate(0, -100%) scale(0, 0);
  -moz-transform: translate(0, -100%) scale(0, 0);
  -o-transform: translate(0, -100%) scale(0, 0);
  -ms-transform: translate(0, -100%) scale(0, 0);
  transform: translate(0, -100%) scale(0, 0);
  opacity: 0;
  z-index: -1;
}

  #search.open {
    -webkit-transform: translate(0, 0) scale(1, 1);
    -moz-transform: translate(0, 0) scale(1, 1);
    -o-transform: translate(0, 0) scale(1, 1);
    -ms-transform: translate(0, 0) scale(1, 1);
    transform: translate(0, 0) scale(1, 1);
    z-index: 9999;
    opacity: 1;
  }

  #search .control-label {
    text-transform: uppercase;
    font-size: .75em;
    font-weight: 100;
    vertical-align: text-top;
  }


/* Footer Area 
----------------------------------- */
footer ul {
  margin: 0;
  padding: 0;
}

  footer ul li {
    list-style: none;
  }

    footer ul li a {
      color: #369 !important;
      margin: 0;
      padding: 0 6px 0 0;
      text-decoration: none;
    }

      footer ul li a:hover {
        text-decoration: underline;
      }

      footer ul li a i {
        padding-left: 6px;
        color: #369; /* your accent */
      }

        footer ul li a i:hover {
          color: #5c8bb8; /* hover shade */
        }

footer img {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: 50px !important;
}

/* Validation
----------------------------------- */
.validation-summary {
  display: none;
}

  .validation-summary .validation-summary-errors {
    display: block;
  }

.validation-summary-valid {
  display: none;
}

.validation-summary-errors ul {
  list-style: none;
  margin-left: -40px;
}

.btn-xs,
.field-validation-error input[type="text"] {
  border: 1px solid #ff0000; /* Red border */
  background-color: #ffeeee; /* Light red background */
}

/* Controls 
----------------------------------- */
.label {
  color: #9be;
  font-weight: normal;
  text-align: left;
}

/* highlight OFF (false) when enabled */
.form-switch .form-check-input:not(:checked):not(:disabled) {
  background-color: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning, #ffc107);
  cursor: pointer;
}


.form-switch .form-check-input:not(:checked):disabled {
  background-color: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning, #ffc107);
  color: black;
}

/* focus ring in the OFF state */
.form-switch .form-check-input.switch-alert:not(:checked):not(:disabled):focus {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb, 255,193,7), .25);
}

/* optional: make ON look "success" */
.form-switch .form-check-input.switch-alert:checked {
  background-color: var(--bs-success, #198754);
  border-color: var(--bs-success, #198754);
}

/* optional: make ON look "success" */
.form-switch .form-check-label {
  color: black;
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
  color: darkslategray;
  opacity: initial;
  text-transform: none;
}


/* Apply invalid styling to any input with .is-invalid */
td.is-invalid,
tr.is-invalid,
input.is-invalid {
  border-color: #dc3545 !important; /* red border */
  background-color: #fdecec !important; /* softer light pink background */
  color: #842029 !important; /* dark red text */
}

  /* Ensure disabled inputs also show invalid styling */
  input.is-invalid:disabled,
  input[disabled].is-invalid {
    border-color: #dc3545 !important;
    background-color: #fdecec !important;
    opacity: 1; /* override Bootstrap’s default opacity for disabled */
    cursor: not-allowed;
  }

/* Apply verification-needed styling (not an error, but requires attention) */
input.not-verified {
  border-color: #ffc107 !important; /* orange border */
  background-color: #fff4e5 !important; /* light orange-yellow background */
  color: #663c00 !important; /* darker amber text */
}

/* Fontawesome Styles 
------------------------------------ */
i.fab.fa-facebook, i.fab.fa-linkedin, i.fab.fa-x-twitter {
  color: #369;
}

/* Place Holder
----------------------------------- */
input::placeholder {
  font-weight: normal;
  font-style: italic;
  opacity: 0.5;
  color: slateblue;
}

textarea {
  resize: none; /* no resize handle at all */
  overflow: hidden; /* remove scrollbars if autosizing */
}

  textarea.resize-vertical {
    resize: vertical; /* allow only vertical (shows handle) */
  }

  textarea.resize-horizontal {
    resize: horizontal; /* allow only horizontal */
  }

  textarea.resize-both {
    resize: both; /* allow both */
  }

  textarea::placeholder {
    font-weight: normal;
    font-style: italic;
    opacity: 0.5;
    color: red;
  }

.bulleted {
  list-style-type: disc !important;
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0 0 1rem 0;
}

  .bulleted > li {
    display: list-item !important; /* undo inline/inline-block */
    list-style-type: disc !important; /* undo any li-level overrides */
  }


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 2560px) {
  main {
    min-height: 600px;
  }
}

/* Max-width: 1440px - large laptops */
@media (max-width: 1440px) {
  main {
    min-height: 600px;
  }
}

/* Max-width: 1024px - tablets, smaller laptops */
@media (max-width: 1024px) {
  main {
    min-height: 600px;
  }
}

/* Max-width: 768px - landscape phones and smaller tablets */
@media (max-width: 768px) {

  main {
    min-height: 600px;
  }

  .navbar-wrapper {
    margin-top: 0;
  }

    .navbar-wrapper .container {
      padding-right: 15px;
      padding-left: 15px;
    }

    .navbar-wrapper .navbar {
      padding-right: 0;
      padding-left: 0;
      border-radius: 4px;
    }

  .ls-l-bgi {
    top: -30% !important;
    width: 100% !important;
  }

  ul .navbar-form {
    padding-left: 0;
    padding-right: 5px;
  }

  .nav > li > a {
    padding-left: 5px;
    padding-right: 10px;
  }

  .logo img {
    height: 38px !important;
    width: auto !important;
    margin-top: 2px;
  }
}

/* Max-width: 576px - portrait phones */
@media (max-width: 576px) {
  main {
    min-height: 600px;
  }

  .navbar-wrapper {
    margin-top: 0;
  }

    .navbar-wrapper .container {
      padding-right: 15px;
      padding-left: 15px;
    }

    .navbar-wrapper .navbar {
      padding-right: 0;
      padding-left: 0;
      border-radius: 4px;
    }

  .ls-l-bgi {
    top: -30% !important;
    width: 100% !important;
  }

  ul .navbar-form {
    padding-left: 0;
    padding-right: 5px;
  }

  .nav > li > a {
    padding-left: 5px;
    padding-right: 10px;
  }

  .company-name {
    font-size: 2.4em;
    font-weight: 600;
    color: #47a;
    letter-spacing: 2px;
  }
}

/* Max-width: 300px - tiny phones & small screens */
@media (max-width: 300px) {
  main {
    min-height: 600px;
  }

  .navbar-wrapper {
    margin-top: 0;
  }

    .navbar-wrapper .container {
      padding-right: 15px;
      padding-left: 15px;
    }

    .navbar-wrapper .navbar {
      padding-right: 0;
      padding-left: 0;
      border-radius: 4px;
    }

  .ls-l-bgi {
    top: -30% !important;
    width: 100% !important;
  }

  ul .navbar-form {
    padding-left: 0;
    padding-right: 5px;
  }

  .nav > li > a {
    padding-left: 5px;
    padding-right: 10px;
  }

  .navbar-brand .logo {
    height: 24px !important;
  }

  .company-name {
    font-size: 1.6em;
    font-weight: 500;
    color: #47a;
    letter-spacing: 1.2px;
  }
}