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

: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-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;
}

html,
body {
  height: 100%;
  background-color: #efefef;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

body {
  
}

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

.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: 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;
}

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

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

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

.page-login {
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  // @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");
  }

  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 .nav-link {
  color: rgba(255, 255, 255, 0.85);

  &.active {
    color: #08565d;
    font-weight: 700;
    letter-spacing: -0.03125rem;
  }
}

.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;
    padding-bottom: 10vh;
  }

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

      &.active {
        color: #fff !important;
        background-color: var(--bs-secondary-color);
      }
    }
  }


  #chart-tabs {
    background-color: #000;

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

    .nav-link {
      border-radius: 0.5rem 0.5rem 0 0;
      font-size: 0.9rem;
      padding-left: .5rem;
      padding-right: .5rem;
      // color: rgba(255,255,255, 0.85);
      // &:active,
      // &:focus,
      // &:hover {
      //   color: var(--bs-secondary-color) !important;
      // }
    }
  }

  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;
    }
  }

  .head-spacer {
    display: none;
  }

  @media screen and (min-width:1200px) {
    .head-spacer {
      // height: 1.5rem;
    }
  }

  #chartAddVitalSigns {
    @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;
}