@import "~bootstrap/scss/bootstrap.scss";
@import "~bootstrap-icons/font/bootstrap-icons.css";

:root {
  --red: #993333;
  --red-hover: #7A2929;

  --blue: #1717cc;
  --blue-hover: #1414A3;

  --yellow: #CC9933;
  --yellow-hover: #B38029;

  --green: #336633;
  --green-hover: #295229;

  --black: #000000;
  --black-hover: #000000;

  --orange: #CC6633;
  --orange-hover: #B35229;

  --teal: #339966;
  --teal-hover: #297A52;

  --purple: #663399;
  --purple-hover: #52297A;

  --blue-best: #013889;
}

:root,
[data-mdb-theme="light"] {
  /* CSS HEX */
  --midnight-green: #065055ff;
  --verdigris: #3ea5a0ff;
  --teal: #177a79ff;
  --pumpkin: #f37f30ff;
  --mint-green: #d1f1eeff;

  --bs-body-color: #252525;
  --primary: #065055ff;
  --secondary: #3ea5a0ff;

  --bs-tertiary: rgba(255, 255, 255, 0.5);
  --bs-bg-opacity: 0.1;

  --letter-spacing: 0.03125rem;

  //FONTS
  --ff-lora: "Lora", serif;
  --ff-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New", monospace;
  --ff-bebas: "Bebas Neue", sans-serif;
  --bs-nav-tabs-link-hover-border-color: transparent;

}

html,
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  margin: 0;
  padding: 0;
  background-color: #efefef;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}


@media (max-width: 1200px) {
  body {
    overflow-x: hidden;
  }
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show {
  font-weight: 600;
  // text-transform: uppercase;
  border-bottom: 1px solid;
  border-top: 1px solid;
  border-color: var(--primary);
}

.navbar .nav-link {
  text-shadow: 0 0 0 #00000000;
  transition: text-shadow 0.3s ease-in-out;
}

.navbar .nav-link:hover,
.nav-link:focus {
  color: var(--purple-hover);
  text-shadow: 0 3px 8px #0000002a;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff; //--bs-nav-tabs-link-active-color: #fff;
}

#navbarNav>ul>li>a {
  white-space: nowrap;
}


.bg-body-tertiary {
  background-color: #efefef;
}

.w-65 {
  width: 65%;
}

/** FONT STYLES ***/
.ff-lora {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  // font-weight: 400;
  // font-style: normal;
}

.ff-mono {
  font-family: var(--ff-mono);
}

.ff-bebas {
  font-family: var(--ff-bebas);
}

.ff-lora {
  font-family: var(--ff-lora);
}

/***************/
.detail-text,
.fs-10 {
  font-size: 0.625rem;
}

.fs-8 {
  font-size: .5rem;
}

.text-sm {
  font-size: .8rem;
}

// CHART COLOR THEMING DECLARATIONS

/* Button Classes */
.btn-qc {
  --qc-button-back: #e8803d;
  --qc-button-back-hover: #e47227;
  --qc-button-text: rgba(255, 255, 255, 0.8);
  --qc-button-text-hover: #fff;
  background-color: var(--qc-button-back);
  color: var(--qc-button-text);
  border-color: var(--qc-button-back);
  &:hover, &:active, &:focus {
    background-color: var(--qc-button-back-hover);
    border-color: var(--qc-button-back-hover);
    color: var(--qc-button-text-hover);
  }
}

.btn-incident {
  color: var(--red);
  // background-color: var(--red);
  color: var(--red);
  // background-color: var(--red);
  border-color: var(--red);

  &:hover {
    color: #fff;
    background-color: var(--red-hover);
    // border-color: var(--red-hover);
    // border-color: var(--red-hover);
  }

  &:active,
  &:focus,
  &.active {
    color: #fff;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 100%);
    ;
  }
}

.btn-patient-info {
  color: var(--blue);
  color: var(--blue);
  border-color: var(--blue);
}

.btn-patient-info:hover {
  color: #fff;
  background-color: var(--blue-hover);


}

.btn-history {
  color: var(--yellow);
  color: var(--yellow);
  border-color: var(--yellow);
}

.btn-history:hover {
  color: #fff;
  color: #fff;
  background-color: var(--yellow-hover);


}

.btn-vitals {
  color: var(--green);
  color: var(--green);
  border-color: var(--green);
}

.btn-vitals:hover {
  color: #fff;
  background-color: var(--green-hover);


}

.btn-treatment {
  color: var(--black);
  color: var(--black);
  border-color: var(--black);
}

.btn-treatment:hover {
  color: #fff;
  background-color: var(--black-hover);


}

.btn-health-assessment {
  color: var(--orange);
  color: var(--orange);
  border-color: var(--orange);
}

.btn-health-assessment:hover {
  color: #fff;
  background-color: var(--orange-hover);
}

.btn-narrative {
  color: var(--teal);
  color: var(--teal);
  border-color: var(--teal);
}

.btn-narrative:hover {
  color: #fff;
  background-color: var(--teal-hover);
  border-color: var(--teal-hover);
}

.btn-signatures {
  color: var(--purple);
  color: var(--purple);
  border-color: var(--purple);
}

.btn-signatures:hover {
  color: #fff;
  background-color: var(--purple-hover);
  border-color: var(--purple-hover);
}


/* Text Color Classes */
.text-incident {
  color: var(--red) !important;
}

.text-patient-info {
  color: var(--blue) !important;
}

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

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

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

.text-health-assessment {
  color: var(--orange) !important;
}

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

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


/* Background Color Classes */
.bg-incident {
  background-color: var(--red) !important;
  background-image: linear-gradient(to bottom, var(--red-hover), var(--red));
}

.bg-patient-info {
  background-color: var(--blue) !important;
  background-image: linear-gradient(to bottom, var(--blue-hover), var(--blue));
}

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

.bg-vitals {
  background-color: var(--green) !important;
  background-image: linear-gradient(to bottom, var(--green-hover), var(--green));
}

.bg-treatment {
  background-color: var(--black) !important;
  background-image: linear-gradient(to bottom, var(--black-hover), var(--black));
}

.bg-health-assessment {
  background-color: var(--orange) !important;
  background-image: linear-gradient(to bottom, var(--dark-orange), var(--orange));
}

.bg-narrative {
  background-color: var(--teal) !important;
  background-image: linear-gradient(to bottom, var(--teal-hover), var(--teal));
}

.bg-signatures {
  background-color: var(--purple) !important;
  background-image: linear-gradient(to bottom, var(--purple-hover), var(--purple));
}

/* Border Color Classes */
.border-incident,
.border-patient-info,
.border-history,
.border-vitals,
.border-treatment,
.border-health-assessment,
.border-narrative,
.border-signatures {
  border: 3px solid;
}

// BORDER COLORS
.border-incident {
  border-color: var(--red) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--red) !important;
  }
}

.border-patient-info {
  border-color: var(--blue) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--blue) !important;
  }
}

.border-history {
  border-color: var(--yellow) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--yellow) !important;
  }
}

.border-vitals {
  border-color: var(--green) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--green) !important;
  }
}

.border-treatment {
  border-color: var(--black) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--black) !important;
  }
}

.border-health-assessment {
  border-color: var(--orange) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--orange) !important;
  }
}

.border-narrative {
  border-color: var(--teal) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--teal) !important;
  }
}

.border-signatures {
  border-color: var(--purple) !important;
  border-top: none !important;

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

  .well.footer {
    border-top: 4px solid var(--purple) !important;
  }
}


// ACTIVE TABS
#incident-overview-tab.active {
  background-color: var(--red);
  border-color: var(--red-hover);
  border-bottom: 0;
}

#patient-information-tab.active {
  background-color: var(--blue);
  border-color: var(--blue-hover);
  border-bottom: 0;
}

#medical-history-tab.active {
  background-color: var(--yellow);
  border-color: var(--yellow-hover);
  border-bottom: 0;
}

#vital-signs-tab.active {
  background-color: var(--green);
  border-color: var(--green-hover);
  border-bottom: 0;
}

#treatment-tab.active {
  background-color: var(--black);
  border-color: var(--black-hover);
  color: #fff;
  border-bottom: 0;
}

#health-assessments-tab.active {
  background-color: var(--orange);
  border-color: var(--orange-hover);
  border-bottom: 0;
}

#narrative-info-tab.active {
  background-color: var(--teal);
  border-color: var(--teal-hover);
  border-bottom: 0;
}

#reqd-signatures-tab.active {
  background-color: var(--purple);
  border-color: var(--purple-hover);
  border-bottom: 0;
}

#incident-overview-pane {
  position: relative;

  // border-radius: 0 0 25px 25px;
  hr {
    border-color: var(--red);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--red);
    border-color: var(--red);


    &:hover {
      color: #fff;
      background-color: var(--red-hover);
      border-color: var(--red-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--red);
    opacity: .5;
  }

  &::after {
    content: "Incident Overview";
    right: 32px;
  }
}

#patient-information-pane {
  position: relative;

  hr {
    border-color: var(--blue);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--blue);
    border-color: var(--blue);


    &:hover {
      color: #fff;
      background-color: var(--blue-hover);
      border-color: var(--blue-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--blue);
    border-color: var(--blue-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--blue);
    opacity: .5;
  }

  &::after {
    content: "Patient Information";
    right: 32px;
  }
}

#medical-history-pane {
  position: relative;

  hr {
    border-color: var(--yellow);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--yellow-hover);
    border-color: var(--yellow-hover);
    color: var(--yellow-hover);
    border-color: var(--yellow-hover);

    &:hover {
      color: #fff;
      background-color: var(--yellow-hover);
      border-color: var(--yellow-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--yellow);
    border-color: var(--yellow-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--yellow);
    opacity: .5;
  }

  &::after {
    content: "Medical History";
    right: 32px;
  }
}

#vital-signs-pane {
  position: relative;

  hr {
    border-color: var(--green);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--green);
    border-color: var(--green);


    &:hover {
      color: #fff;
      background-color: var(--green-hover);
      border-color: var(--green-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--green);
    border-color: var(--green-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--green);
    opacity: .5;
  }

  &::after {
    content: "Vital Signs";
    right: 32px;
  }
}

#treatment-pane {
  position: relative;

  hr {
    border-color: var(--black);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--black);
    border-color: var(--black);


    &:hover {
      color: #fff;
      background-color: var(--black-hover);
      border-color: var(--black-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--black);
    border-color: var(--black-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--black);
    opacity: .5;
  }

  &::after {
    content: "Treatment";
    right: 32px;
  }
}

#health-assessments-pane {
  position: relative;

  hr {
    border-color: var(--orange);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--orange);
    border-color: var(--orange);

    &:hover {
      color: #fff;
      background-color: var(--orange-hover);
      border-color: var(--orange-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--orange-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--orange);
    opacity: .5;
  }

  &::after {
    content: "Health Assessments";
    right: 32px;
  }
}

#narrative-info-pane {
  position: relative;

  hr {
    border-color: var(--teal);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--teal);
    border-color: var(--teal);

    &:hover {
      color: #fff;
      background-color: var(--teal-hover);
      border-color: var(--teal-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--teal);
    border-color: var(--teal-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--teal);
    opacity: .5;
  }

  &::after {
    content: "Narrative Info";
    right: 32px;
  }
}

#narrative-info-pane {
  position: relative;

  hr {
    border-color: var(--teal);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--teal);
    border-color: var(--teal);


    &:hover {
      color: #fff;
      background-color: var(--teal-hover);
      border-color: var(--teal-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--teal);
    border-color: var(--teal-hover);
  }


}

#reqd-signatures-pane {
  position: relative;

  hr {
    border-color: var(--purple);
    opacity: .8;
  }

  .btn-outline-secondary {
    color: var(--purple);
    border-color: var(--purple);


    &:hover {
      color: #fff;
      background-color: var(--purple-hover);
      border-color: var(--purple-hover);
    }
  }

  .btn-check:checked+.btn,
  :not(.btn-check)+.btn:active,
  .btn:first-child:active,
  .btn.active,
  .btn.show {
    color: #fff;
    background-color: var(--purple);
    border-color: var(--purple-hover);
  }

  &::before,
  &::after {
    position: absolute;
    bottom: 20px;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--purple);
    opacity: .5;
  }

  &::after {
    content: "Required Signatures";
    right: 32px;
    font-size: 1.5rem;
    color: var(--purple);
    opacity: .5;
  }
}

#reqd-signatures-pane.tab-pane::before {
  right: 32px;
  font-size: 1.5rem;
  color: var(--purple);
  opacity: .5;
}

// 576px -sm-
// 768px -md-
// 992px -lg-
// 1200px  -xl-
// 1400px  -xxl-

.border-dashed {
  border-radius: 0.5rem !important;
}

.btn-audit-add {
  color: #fff;
  background: #cc0000;

  &:hover {
    color: #fff;
    background: rgb(37, 37, 37);
    // background: linear-gradient(0deg, rgba(37,37,37,1) 20%, rgba(191,75,33,1) 70%);
  }
}

// CUSTOM BUTTONS
.btn-qc,
.btn-secondary,
.btn-success,
.fix-button,
.btn-audit-add,
.btn-audit-view,
.btn-audit-delete {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-audit-view {
  color: #fff;
  background: #910562;

  &:hover {
    color: #fff;
    background: rgb(37, 37, 37);
    // background: linear-gradient(0deg, rgba(37,37,37,1) 20%, rgba(191,75,33,1) 70%);
  }
}

.audit_correction_chart {

  .btn-group>.btn.fix-button,
  .btn-group>.btn-group:not(:last-child)>.btn.fix-button {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
  }
}

.fix-button {
  color: #fff;
  background: var(--blue-best);
  border-color: var(--blue-best);
}

.btn-audit-delete {
  color: #fff;
  background: #cc0000;

  &:hover {
    color: #fff;
    background: rgb(37, 37, 37);
    // background: linear-gradient(0deg, rgba(37,37,37,1) 20%, rgba(191,75,33,1) 70%);
  }
}

/*** CUSTOM BUTTON SPECIAL SITUATIONS ***/
#divTeamMembers td>a.btn-audit-view {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid white;
}

input+label+.btn-audit-view,
textarea+label+.btn-audit-view {
  border-right: 1px solid white;
}

#divTeamMembers td>a.btn-audit-delete {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  // border-top: .05px solid transparent;
}

// /CUSTOM BUTTONS
body.login {
  min-height: 100vh;

  .btn-audit-add {
    color: #fff;
    background: #cc0000;
    background-clip: padding-box !important;

    span {
      background-clip: border-box !important;
    }

    &:hover {
      color: #fff;
      background: rgb(37, 37, 37);
      // background: linear-gradient(0deg, rgba(37,37,37,1) 20%, rgba(191,75,33,1) 70%);
    }
  }
}

// CUSTOM BUTTONS
.btn-audit-add,
.btn-audit-view,
.btn-audit-delete {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.btn-audit-view {
  color: #fff;
  background: #910562;

  &:hover {
    color: #fff;
    background: rgb(37, 37, 37);
    // background: linear-gradient(0deg, rgba(37,37,37,1) 20%, rgba(191,75,33,1) 70%);
  }
}


.btn-audit-delete {
  color: #fff;
  background: #cc0000;

  &:hover {
    color: #fff;
    background: rgb(37, 37, 37);
    // background: linear-gradient(0deg, rgba(37,37,37,1) 20%, rgba(191,75,33,1) 70%);
  }
}

/*** CUSTOM BUTTON SPECIAL SITUATIONS ***/
#divTeamMembers td>a.btn-audit-view {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid white;
}

input+label+.btn-audit-view,
textarea+label+.btn-audit-view {
  border-right: 1px solid white;
}

#divTeamMembers td>a.btn-audit-delete {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  // border-top: .05px solid transparent;
}

// /CUSTOM BUTTONS
body.login {
  min-height: 100vh;

  // @media (max-width: 576px) {
  background-image: url("../images/login-background-01@576.webp");

  // }
  @media (min-width: 768px) {
    background-image: url("../images/login-background-01@768.webp");
  }

  @media (min-width: 992px) {
    background-image: url("../images/login-background-01@992.webp");
  }

  @media (min-width: 1200px) {
    background-image: url("../images/login-background-01@1200.webp");
  }

  @media (min-width: 1400px) {
    background-image: url("../images/login-background-01@1400.webp");
  }

  @media (min-width: 1600px) {
    background-image: url("../images/login-background-01@1600.webp");
  }

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  nav {
    background: none !important;
  }
}

.alert {
  text-align: center;
}

/*** HOME ***/
.home {
  background-image: url("../images/home-back.svg");
  background-size: cover;
  background-clip: border-box;

  .card-header {
    background: #fff;
  }
}

/*** /HOME ***/
// vertical seperators
#ChartNavbarNav li a.nav-link {
  color: var(--bs-secondary-color);
}

#navbarNav>ul>li::after,
.vr {
  width: 2px;
  background-color: rgb(255 255 255 / 12%);
  opacity: 1;
}

#navbarNav>ul>li::after,
.vr-blurry {
  background-image: linear-gradient(180deg, transparent, #666, transparent);
  width: 1px;
  opacity: 0.25;
}

.client-logo {
  // py-2 px-5 mx-auto img-fluid
  padding: 0.5rem 1rem;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  max-width: 18rem;
}

.checkout-wrapper {
  margin-top: 20px;
}

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

.eec-logo {
  margin-top: -4px
}

// #chart-tabs {
//   font-family: var(--ff);
// }

.chart,
.audit_correction_chart,
.audit_chart {
  text-transform: uppercase;

  .client-logo {
    max-height: 2rem;
    padding: 0;
    margin: 0;
    width: auto;
  }

  input[type="datetime-local"].form-control {
    font-family: var(--ff-mono);
    color: var(--bs-secondary-color);
    background: transparent;
  }

  .chart-header {
    background-color: #212529;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  }

  .tab-pane {
    // overflow-y: visible;
    // border-top: 5px solid;
    // border-top: 5px solid;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 4.6875rem;
    margin-bottom: 6.25rem;

    @media screen and (min-width: 1200px) {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  #chartNavbarNav {
    .nav-link {
      padding-right: 1rem;
    }
  }


  #chart-tabs {
    padding-top: 1rem;
    // background:linear-gradient(0deg, rgba(0,0,0,1) 5%, rgba(176,176,176,1) 50%, rgba(0,0,0,1) 95%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, rgb(235, 235, 235) 100%);
    border-bottom: 3px solid;
    padding-top: 1rem;
    // background:linear-gradient(0deg, rgba(0,0,0,1) 5%, rgba(176,176,176,1) 50%, rgba(0,0,0,1) 95%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, rgb(235, 235, 235) 100%);
    border-bottom: 3px solid;

    @media screen and (min-width: 1200px) {}

    .nav-link {
      font-family: var(--ff-bebas);
      font-family: var(--ff-bebas);
      border-radius: 0.5rem 0.5rem 0 0;
      font-size: clamp(1.2rem, 0.278vw + 1.111rem, 1.5rem);
      font-size: clamp(1.2rem, 0.278vw + 1.111rem, 1.5rem);
      padding-left: .5rem;
      padding-right: .5rem;
      // padding:0 .5rem;
      line-height: 1;
      margin-bottom: 0;
      border-bottom: 0;
      // text-shadow: 1px 1px 3px rgba(255,255,255,0.5), -1px -1px 3px rgba(255,255,255,0.5), -1px 1px 3px rgba(255,255,255,0.5), 1px -1px 3px rgba(255,255,255,0.5);

      // padding:0 .5rem;
      line-height: 1;
      margin-bottom: 0;
      border-bottom: 0;
      // text-shadow: 1px 1px 3px rgba(255,255,255,0.5), -1px -1px 3px rgba(255,255,255,0.5), -1px 1px 3px rgba(255,255,255,0.5), 1px -1px 3px rgba(255,255,255,0.5);

    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    // font-family: "Bebas Neue", serif;
    // font-weight: 400;
    // font-style: normal;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  h1.h4 {
    font-weight: 600;

    @media screen and (min-width: 1200px) {
      line-height: 2rem;
    }
  }

  h2.h4 {
    font-weight: 300;
  }

  h1.h4,
  h2.h4 {
    font-size: 1.25rem;
  }

  h4 {
    font-weight: 500;
  }

  label,
  button,
  input,
  textarea,
  .form-floating {
    text-transform: uppercase;
  }

  h2.chart-header-id {
    font-family: var(--ff-mono);
  }

  .std-radio-label {
    display: block;
    width: 70px;

    @media screen and (min-width:1200px) {
      display: inline-block;
    }
  }

  .btn-group-vertical {
    width: 100%;
    background-color: rgb(248, 249, 250);
    background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    .btn-outline-secondary {
      padding-top: .75rem;
      padding-bottom: .75rem;
    }
  }

  // .btn-check:checked+.btn,
  // :not(.btn-check)+.btn:active,
  // .btn:first-child:active,
  // .btn.active,
  // .btn.show {
  //   font-weight: 600;
  //   letter-spacing: var(--letter-spacing);
  // }

  .well {
    background-color: rgb(248, 249, 250);
    background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    border: 1px solid rgb(222, 226, 230);
    border-radius: 0.375rem;
    box-shadow: inset rgba(0, 0, 0, 0.075) 0px 0.125rem 0.25rem 0px;
    margin: 0;
    max-width: 100%;
    padding: 0.5rem .75rem;

    &.footer {
      border-radius: 0;
      margin-bottom: 0;
      padding: 0.5rem 1.5rem;
    }

    label.d-block,
    label.form-label {
      font-size: 0.75rem;
      // letter-spacing: var(--letter-spacing);
      font-weight: 400;
      color: var(--bs-secondary-color);
      font-style: italic;
      display: block;
      margin-bottom: 0;
    }
  }

  #chartAddVitalSigns {
    &:not(.bi-plus-square-fill) {
      font-size: 12px;
    }

    @media screen and (min-width:1200px) {
      margin-top: 1.8rem;
    }
  }

  #chartAddTreatmentType,
  #chartAddVitalSigns {
    border: 0;
  }

  #chartAddTreatmentType i.bi,
  #chartAddVitalSigns i.bi {
    font-size: 2rem;
  }

  @media screen and (min-width:1200px) {

    #chartAddTreatmentType i.bi,
    #chartAddVitalSigns i.bi {
      font-size: 3rem;
      line-height: 1;
    }
  }

  .mathSymbol {
    font-size: 2rem;
    color: var(--bs-secondary-color);
  }
}

/*** CHART STYLES ***/
/*** BUTTON TOGGLES ***/
.toggles [type="checkbox"] {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.toggles [type="checkbox"]+label {
  display: block;
  position: relative;
  padding: 0.5em;
  padding-left: 4em;
  max-width: calc(100% - 2em);
}

.toggles [type="checkbox"]+label::before,
.toggles [type="checkbox"]+label::after {
  content: "";
  position: absolute;
  height: 1.5em;
  transition: all 0.25s ease;
}

.toggles [type="checkbox"]+label::before {
  left: 0;
  top: 0.2em;
  width: 3em;
  border: 0.2em solid #767676;
  background: #767676;
  border-radius: 1.1em;
}

.toggles [type="checkbox"]+label::after {
  left: 0;
  top: 0.25em;
  background-color: #fff;
  background-position: center center;
  border-radius: 50%;
  width: 1.5em;
  border: 0.15em solid #767676;
}

.toggles [type="checkbox"]:checked+label::after {
  left: 1.6em;
  border-color: #36a829;
  color: #36a829;
}

#tab-content {
  background-color: rgba(255, 255, 255, 0.8);
}

/*** AUDIT STYLES ***/
.audit_chart {
  min-height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.incident-overview-tab {
  background: linear-gradient(to right top, var(--red-hover), white, var(--red));

  #chart-tabs {
    border-bottom: 5px solid var(--red);
  }
}

.patient-information-tab {
  background: linear-gradient(to right top, var(--blue-hover), white, var(--blue));

  #chart-tabs {
    border-bottom: 5px solid var(--blue);
  }
}

.medical-history-tab {
  background: linear-gradient(to right top, var(--yellow-hover), white, var(--yellow));

  #chart-tabs {
    border-bottom: 5px solid var(--yellow);
  }
}

.vital-signs-tab {
  background: linear-gradient(to right top, var(--green-hover), white, var(--green));

  #chart-tabs {
    border-bottom: 5px solid var(--green);
  }
}

.treatment-tab {
  background: linear-gradient(to right top, var(--black-hover), white, var(--black));

  #chart-tabs {
    border-bottom: 5px solid var(--black);
  }
}

.health-assessments-tab {
  background: linear-gradient(to right top, var(--orange-hover), white, var(--orange));

  #chart-tabs {
    border-bottom: 5px solid var(--orange);
  }
}

.narrative-info-tab {
  background: linear-gradient(to right top, var(--teal-hover), white, var(--teal));

  #chart-tabs {
    border-bottom: 5px solid var(--teal);
  }
}

.reqd-signatures-tab {
  background: linear-gradient(to right top, var(--purple-hover), white, var(--purple));

  #chart-tabs {
    border-bottom: 5px solid var(--purple);
  }
}

.eec-table-header {
  font-weight: 600;
  font-size: 0.75rem;
  font-family: var(--ff-lora);
}

.treatment-row.odd {
  background-color: rgba(255, 255, 255, 0.5);
}



// TODO: HACKY THINGS WE SHOULDN'T DO
#audit_chart_staffMember+a,
#audit_chart_staffMember+a+a {
  max-width: 100px;
  margin-top: 3px;
}

.vital-signs-row {
  font-family: var(--ff-mono);
  font-weight: 400;
}

#audit_chart_allergies>div>div>div.col-3.col-lg-1>a.ms-auto.btn.btn-audit-view.d-flex.align-items-center.justify-content-center {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#audit_chart_allergies>div>div>div.col-3.col-lg-1>a.ms-auto.btn.btn-audit-view.d-flex.align-items-center.justify-content-center,
#audit_chart_allergies>div>div>div.col-3.col-lg-1>a.btn.btn-audit-delete.d-flex.align-items-center.justify-content-center {
  height: 50%;
}

#audit_chart_allergies>div>div>div.col-3.col-lg-1>a,
#audit_chart_currentMedications>div>div>div.col-3.col-lg-1>a,
#audit_chart_surgicalHistory>div>div>div.col-3.col-lg-1>a,
#audit_chart_medicalHistory>div>div>div.col-3.col-lg-1>a {
  height: 50%;
  width: 100%;
}

// AUDIT MEDICAL HISTORY BUTTONS
.position-relative .badge {
  font-weight: 400;
  font-family: var(--ff-mono);
  font-size: 0.625rem;
}

#nav-section-switch>a.btn>img,
#nav-section-switch>a.btn>span {
  filter: saturate(.4);
  transition: all 0.3s ease-in-out;
  opacity: 0.6;
}

#nav-section-switch>a.btn:hover>img,
#nav-section-switch>a.btn:hover>span,
#nav-section-switch.btn-group>a.btn.active>img,
#nav-section-switch.btn-group>a.btn.active>span {
  filter: saturate(1);
  opacity: 1;
}

/**** ADMIN SECTION STYLES ****/
body.admin {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .5) 100%),
    url(../images/admin-section-back.svg),
    linear-gradient(38deg, rgba(1, 56, 137, .4) 20%, rgba(13, 110, 253, .35) 70%),
    #fff;
  background-size: 100%, 15%, 100%, 100%;
}

.chart-stats>div>div:nth-child(3) h5>span {
  display: none;
}

.bg-blue {
  background-color: #0d6efd;
  color: #fff;
}


.swiper-container {
  overflow: clip;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--bs-secondary) !important;
}

.subtext {
  display: block;
  font-size: 0.75rem;
  font-family: var(--ff-mono);
  font-weight: 400;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

.swiper-slide {
  font-size: 0.875rem;

  address,
  .contact-block {
    line-height: 1.2;
  }

  address hr {
    visibility: hidden;
    margin: 0;
  }
}

body.admin_chart_index table img {
  max-width: 50px;
  height: auto;
}

.contact-block a {
  text-decoration: none;
  color: var(--bs-secondary-color);

  &:hover {
    color: #0d6efd;
  }
}


.audit_chart #incident-overview-pane #audit_chart_staffMember+a {
  margin-left: auto;
}

@media screen and (min-width: 1200px) {

  #audit_chart_vital-signs-container+a,
  #audit_chart_vital-signs-container+a+a,
  #audit_chart_treatment-type-container+a,
  #audit_chart_treatment-type-container+a+a {
    width: 49.5%;
    display: inline-block !important;
    margin-top: .5rem;
  }

  #audit_chart_vital-signs-container+a,
  #audit_chart_vital-signs-container+a {
    margin-left: 0 !important;
  }
}

#audit_patient_gender.border-dashed,
#audit_patient_race.border-dashed,
#audit_chart_vital-signs-container.border-dashed,
#audit_chart_treatment-type-container.border-dashed {
  padding-left: 0.5rem;
}

/************ ADMIN SECTION STYLES ************/
/************ QUICK CHART STYLES **************/