@font-face {
  font-family: "Museo Sans";
  src: url(museosansrounded-500-webfont.woff) format("woff"),
    url(museosansrounded-700-webfont.woff) format("woff");
  font-style: normal;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 24;
}

.clientHeader {
  font-family: "Museo Sans", sans-serif;
  flex-direction: column;
  align-items: center;
  position: relative;

  .clientHeader__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .clientHeader__nav {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: #0f2d52;
      color: #ffffff;
      width: 100%;
      padding: 8px 0;
      font-size: 14px;
      font-weight: 500;

      .clientHeader__nav-container {
        display: flex;
        height: 32px;
        max-width: 1352px;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        padding: 0 12px;

        .clientHeader__nav-right {
          display: flex;
          align-items: center;

          .clientHeader__nav-list {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: center;

            .clientHeader__nav-listItem {
              margin-right: 16px;

              .clientHeader__nav-link {
                color: #ffffff;
                text-decoration: none;
                font-size: 14px;
                transition: text-decoration-color 0.4s, color 0.4s;

                &:hover {
                  text-decoration: none;
                  color: #eaecf0;
                  transition: text-decoration-color 0.4s, color 0.4s;
                }
              }
            }

            .clientHeader__nav-listItem.translate {
              position: relative;
              margin-right: 0;

              .clientHeader__nav-translate {
                background-color: transparent;
                color: #ffffff;
                border: none;
                cursor: pointer;
                font-size: 14px;
                font-family: "Museo Sans", sans-serif;
                display: flex;
                align-items: center;
                border-radius: 50px;
                padding: 2px 8px 2px 14px;
                margin-right: 0;
                border: 2px solid transparent;
                outline: 2px solid transparent;

                &:hover {
                  text-decoration: none;
                }

                &::before {
                  content: "\e80b";
                  font-family: "Material Icons";
                  margin-right: 5px;
                  font-size: 16px;
                }

                .material-symbols-outlined {
                  font-size: 30px;
                  width: 30px;
                }
              }

              .clientHeader__nav-dropdown {
                display: flex;
                width: 100%;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                visibility: hidden;
                opacity: 0;

                .clientHeader__nav-dropdownItem {
                  text-decoration: none;
                  display: flex;
                  position: absolute;
                  top: 100%;
                  margin: 0 auto;
                  background-color: #ffffff;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                  z-index: 1000;
                  font-size: 16px;
                  padding: 26px;
                  height: auto;
                  color: #02657e;
                  border-radius: 4px;
                  justify-content: center;
                }
              }
            }

            .clientHeader__nav-listItem.translate.active
              .clientHeader__nav-dropdown {
              visibility: visible;
              opacity: 1;
              transition: visibility 0s, opacity 0.35s linear, top 0.4s,
                bottom 0.4s, box-shadow 0.4s;
            }

            .clientHeader__nav-listItem.translate.active
              .clientHeader__nav-translate {
              outline-color: #edb660;
              outline-offset: 0px;
              outline-style: solid;
              outline-width: 2px;
              border-radius: 50px;
              border: 2px solid #ffffff;
            }
          }
        }
      }
    }

    .clientHeader__menu {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;

      .clientHeader__menu-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        max-width: 1352px;
        width: 100%;
        padding-inline: 16px;
        border-radius: 4px;
        background-color: #ffffff;
        margin: 0 auto;
        padding: 0 16px;
        height: 112px;

        .clientHeader__logo-container {
          .clientHeader__logo-link {
            .clientHeader__logo {
              max-height: 80px;
              width: auto;
            }
          }
        }

        .clientHeader__menu-list {
          list-style: none;
          display: flex;
          align-items: center;
          font-size: 20px;
          color: #0091b9;
          height: 100%;
          margin: 0;
          padding: 0;

          .clientHeader__menu-list-container {
            display: flex;
            width: 100% !important;
            justify-content: flex-end !important;
          }

          .clientHeader__menu-listItem {
            height: 100%;
            display: flex;
            align-items: center;

            .clientHeader__menu-link {
              color: #0091b9;
              text-decoration: none;
              font-weight: 500;
              align-items: center;
              color: var(--colors-header-primary-menu-link);
              display: flex;
              height: 100%;
              line-height: 1.25;
              padding-left: 16px;
              padding-right: 16px;
              text-align: center;
              text-decoration: none;
              transition: text-decoration-color 0.4s, color 0.4s;

              &:hover {
                text-decoration: none;
                color: #03add8;
                transition: text-decoration-color 0.4s, color 0.4s;
              }
            }
          }
        }
      }
    }
  }
}
.clientHeader__menu-search {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: text-decoration-color 0.4s, color 0.4s;
  color: #0091b9;
  margin-left: 0;

  i {
    font-size: 20px;
  }

  &:hover {
    text-decoration: none;
    color: #03add8;
    transition: text-decoration-color 0.4s, color 0.4s;
  }
}

@media only screen and (max-width: 992px) {
  .clientHeader__nav {
    height: 40px;
  }

  .clientHeader__nav-container {
    display: none !important;
  }

  .clientHeader__menu {
    background-color: #ffffff !important;
  }

  .clientHeader__logo {
    max-height: 64px !important;
  }

  .clientHeader__menu-container {
    max-width: 750px !important;

    .clientHeader__menu-list-container {
      background-color: #ffffff;
      position: fixed;
      width: 407px;
      top: 0;
      height: 100vh;
      z-index: 2000;
      right: -407px;
      display: flex;
      justify-content: flex-start;
      padding: 16px;
    }

    .clientHeader__menu-list {
      flex-direction: column;
      align-items: flex-start !important;
      justify-content: flex-start;
      width: 100%;
      position: relative;

      .clientHeader__menu-close {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex !important;
        height: 34px;
        cursor: pointer;
      }

      .clientHeader__menu-listItem {
        height: auto !important;
        width: 100%;

        .clientHeader__menu-link {
          padding: 16px !important;
          height: auto !important;
          font-size: 16px;
          color: #020202 !important;
          font-weight: 300;
          font-family: "Museo Sans 300", sans-serif;
          width: 100%;

          &:hover {
            color: #03add8 !important;
            background-color: #f2fafd;
          }
        }
      }

      .clientHeader__menu-listItem:nth-child(2) {
        margin-top: 70px !important;
      }
    }
    .clientHeader__menu-hamburger {
      display: flex;
      height: 20px;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #0091b9;
      margin-left: 0;
      gap: 8px;

      img {
        width: 20px;
      }
    }

    .clientHeader__menu-icons {
      display: flex;
      align-items: center;
      gap: 16px;

      .clientHeader__menu-search {
        padding: 10px;
        background-color: #0091b9;
        color: #ffffff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          width: 20px;
          height: 20px;
          color: #ffffff;
          font-size: 19px;
        }
      }
    }
  }

  .menuLanguageToggle {
    display: flex !important;
    position: relative;
    flex-direction: column;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    margin-top: 30px;

    .clientHeader__menu-link:nth-child(1) {
      padding: 12px 16px;
      color: #0091b9;
      background-color: #f0f7ff;
      border-radius: 4px;
      border: 1px solid rgb(0, 145, 185);
      display: flex;
      align-items: center;

      &:hover {
        text-decoration: none;
      }

      &::before {
        content: "\e80b";
        font-family: "Material Icons";
        margin-right: 7px;
        font-size: 20px;
        display: flex;
        align-items: center;
        color: #0f2d52;
      }
    }

    .clientHeader__menu-link:nth-child(2) {
      position: absolute;
      bottom: -45px;
      left: 16px;
      color: #02657e;
      transition: all 0.4s ease-in-out;

      &:hover {
        text-decoration: none;
        color: rgb(0, 145, 185);
        transition: all 0.4s ease-in-out;
      }
    }
  }
}

.menuLanguageToggle {
  display: none;
}

.clientHeader__menu-close {
  display: none;
}

.clientHeader__menu-hamburger {
  display: none;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .clientHeader__menu {
    background-color: #ffffff !important;
  }

  .clientHeader__nav-container {
    max-width: 990px !important;
  }

  .clientHeader__menu-container {
    max-width: 990px !important;
  }
}

@media only screen and (max-width: 767px) {
  .clientHeader__menu {
    background-color: #ffffff !important;
  }

  .clientHeader__nav-container {
    max-width: 570px !important;
  }

  .clientHeader__menu-container {
    max-width: 570px !important;
  }
}

@media screen and (max-width: 992px) {
  .clientHeader__menu-list-container {
    transition: right 0.6s ease-in-out;
  }
  .clientHeader__menu-list-container.active {
    right: 0;
    transition: right 0.6s ease-in-out;
  }
}

.clientHeader__searchOverlay {
  position: fixed;
  z-index: 2000;
  background-color: #ffffff;
  width: 100vw;
  height: 386px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 32px 32px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-in-out;

  .clientHeader__searchOverlay-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    justify-content: flex-end;
    height: 100%;

    .clientHeader__searchOverlay-logo {
      position: absolute;
      top: 0;
      left: 0;
    }

    .clientHeader__searchOverlay-close {
      position: absolute;
      top: 0;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #0091b9;
      font-weight: 700;
      padding: 14px;
      cursor: pointer;

      img {
        height: 20px;
        margin-right: 5px;
      }
    }

    .clientHeader__searchOverlay-wrapper {
      padding: 16px 32px;
      height: 230px;

      .clientHeader__searchOverlay-navigation {
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: flex-start;
        height: 100%;
        width: 100%;
        justify-content: flex-start;
        width: 100%;
        display: flex;
        gap: 13px;
        height: 42px;
        border-bottom: 1px solid #000;
        align-items: flex-end;

        .clientHeader__searchOverlay-radio {
          display: none;
        }

        .clientHeader__searchOverlay-label {
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0 16px;
          background-color: #ffffff;
          color: #0091b9;
          font-weight: 700;
          border-radius: 4px 4px 0 0;
          cursor: pointer;
          transition: background-color 0.4s ease-in-out;

          &.active {
            color: #ffffff;
            background-color: #0091b9;
            transition: background-color 0.4s ease-in-out;
          }
        }
      }

      .clientHeader__searchOverlay-tab {
        display: flex;
        position: absolute;
        top: 50px;
        padding-top: 36px;
        width: 100%;
      }
    }
  }

  .clientHeader__searchOverlay-inputWrapper {
    position: relative;
    width: 100%;

    .clientHeader__searchOverlay-input {
      width: 100%;
      height: 44px;
      border-radius: 4px;
      border-width: 1px;
      padding: 8px 18px;

      &:hover {
        border-color: #0091b9;
      }
    }

    .clientHeader__searchOverlay-button {
      position: absolute;
      background: none;
      border: none;
      right: 0;
      width: 44px;
      height: 100%;

      i {
        font-size: 20px;
      }
    }
  }
}

.clientHeader__searchOverlay-submitSearch {
  margin-left: 25px;

  .clientHeader__searchOverlay-button {
    margin-left: 35px;
    background-color: rgb(237, 182, 96);
    border-radius: 50px;
    display: flex;
    color: rgb(15, 45, 82);
    gap: 5px;
    align-items: center;
    padding: 8px 18px;
    font-family: "Museo Sans 700";
    border: none;
    justify-content: center;

    &:hover {
      background-color: rgb(229, 150, 26);
    }
  }
}

.clientHeader__searchOverlay-label--hidden {
  display: none;
}

.clientHeader__searchOverlay-logo {
  left: 28px !important;
  .clientHeader__logo {
    max-height: unset !important;
    width: 191px;
  }
}

.clientHeader__searchOverlay-searchAll,
.clientHeader__searchOverlay-searchProviders,
.clientHeader__searchOverlay-searchLocations {
  width: 100%;
}

.clientHeader__searchOverlay-searchAll::before {
  content: "Search Valley Children's Healthcare";
}

.clientHeader__searchOverlay-searchProviders::before {
  content: "Search doctors and providers by specialty, condition or procedure";
}

.clientHeader__searchOverlay-searchLocations::before {
  content: "Search location by name";
}

.clientHeader__searchOverlay.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease-in-out;
}

.clientHeader__searchOverlay-backdrop {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 1;
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}

.clientHeader__searchOverlay-locationsRow {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.clientHeader__searchOverlay-loactionsColumn.col--button {
  position: absolute;
}

.clientHeader__searchOverlay-label--multi {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 5px;
  background-color: #ffffff;
  color: #020202;
  font-weight: 700;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  font-family: "Museo Sans 700", sans-serif;
  margin-bottom: 5px;
}

.clientHeader__searchOverlay-multiselect {
  border: 1px solid #000;
  padding: 6px;
  min-height: 40px;
  cursor: pointer;
  background-color: #fff;
  position: relative;
  border-radius: 4px;
  margin-left: 5px;
}

.multiselect-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clientHeader__searchOverlay-searchLocations {
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: flex-end;
}

.clientHeader__searchOverlay-searchLocations::before {
  content: "Search location by name";
  position: absolute;
  bottom: 0;
  margin-bottom: 44px;
}

.multiselect-tag {
  background: #d6e8ff;
  color: #000000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  display: flex;
  z-index: 1;
  flex-wrap: wrap;
}
.clientHeader__searchOverlay-inputWrapper.locationType {
  margin-right: 20px;
}
.multiselect-tag-close {
  cursor: pointer;
  font-weight: bold;
  padding: 0 4px;
}

.multiselect-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  background: white;
  border: 1px solid #0091b9;
  width: 100%;
  padding: 20px 0;
  border-radius: 0 0 4px 4px;
  overflow-y: scroll;
  max-height: 260px;
  overflow-x: hidden;
}

.multiselect-option {
  padding: 7px 15px;
  cursor: pointer;
}

.multiselect-option.selected {
  font-style: italic;
  color: #98a2b3;
  pointer-events: none;
}

.multiselect-option:hover {
  background: #0091b9;
  color: #ffffff;
}

.clientHeader__searchOverlay-multiselect.active .multiselect-dropdown {
  display: block;
}

.multiselect-filter {
  width: calc(100% - 25px);
  padding: 6px;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  margin-left: 16px;
  align-self: center;
  border: 1px solid #000;
  border-radius: 4px;
  height: 34px;
  margin-bottom: 10px;

  &:focus-visible,
  &:focus,
  &:active,
  &:target {
    border-color: #0091b9;
  }
}

.clientHeader__searchOverlay-multiselect:nth(1)::before {
  content: "Location Type";
  font-family: "Museo Sans 700", sans-serif;
  color: #020202;
  margin-bottom: 4px;
  font-size: 16px;
}

.clientHeader__searchOverlay-button--textSearch {
  position: absolute;
  background: none;
  border: none;
  right: 0;
  width: 44px;
  height: 100%;

  i {
    font-size: 20px;
  }
}

.clientHeader__searchOverlay-multiselect::before {
  content: "\e5cd";
  font-family: "Material Icons";
  color: #000;
  font-weight: 600;
  right: 9px;
  position: absolute;
  top: 9px;
  transform: rotate(45deg);
  font-size: 14px;
  transition: transform 0.2s ease-in-out;
}

.clientHeader__searchOverlay-multiselect.active::before {
  transform: rotate(90deg);
  transition: transform 0.2s ease-in-out;
}

.englishNav .clientHeader__searchOverlay-multiselect::after {
  content: "Select an option";
  font-family: "Museo Sans";
  font-weight: 700;
  font-size: 15px;
  color: #98a2b3;
  left: 12px;
  top: 9px;
  position: absolute;
  z-index: 0;
}

.spanishNav .clientHeader__searchOverlay-multiselect::after {
  content: "Seleccione una opción";
  font-family: "Museo Sans";
  font-weight: 700;
  font-size: 15px;
  color: #98a2b3;
  left: 12px;
  top: 9px;
  position: absolute;
  z-index: 0;
}

.clientHeader__searchOverlay-multiselect.has-tags::after {
  display: none;
}

@media screen and (max-width: 992px) {
  .clientHeader__searchOverlay-searchLocations {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 0px;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .clientHeader__searchOverlay-searchLocations::before {
    content: "Search location by name";
    position: absolute;
    top: -23px;
    bottom: unset;
    margin-bottom: unset;
  }

  .clientHeader__searchOverlay-submitSearch {
    margin-left: 0;

    .clientHeader__searchOverlay-button {
      margin-left: 0;
    }
  }
}
@media screen and (max-width: 992px) {
  .fullHeight {
    height: 100vh;

    .clientHeader__searchOverlay-container {
      justify-content: flex-start;

      .clientHeader__searchOverlay-wrapper {
        padding: 16px 32px;
        height: 230px;
        margin-top: 90px;

        .clientHeader__searchOverlay-tab {
          display: flex;
          position: absolute;
          top: 50px;
          padding-top: 60px;
          width: 100%;
        }
      }
    }
  }
}

.clientHeader__searchOverlay-input:focus-visible
  + .clientHeader__searchOverlay-button--textSearch
  .fa-search::before,
.clientHeader__searchOverlay-input:focus-visible
  + .clientHeader__searchOverlay-button
  .fa-search::before {
  content: "\e5cd";
  font-family: "Material Icons";
}

.clientHeader__searchOverlay-input:focus-visible
  + .clientHeader__searchOverlay-button--textSearch,
.clientHeader__searchOverlay-input:focus-visible
  + .clientHeader__searchOverlay-button {
  top: 4px;
}

@media screen and (max-width: 767px) {
  .clientHeader__searchOverlay.active {
    overflow-y: scroll;
    height: 520px;
  }

  .clientHeader__searchOverlay-wrapper {
    width: 100%;
  }

  .clientHeader__searchOverlay-container {
    justify-content: center !important;
    align-items: flex-start !important;
    padding-bottom: 30px;
  }

  .clientHeader__searchOverlay {
    & .clientHeader__searchOverlay-container {
      & .clientHeader__searchOverlay-wrapper {
        .clientHeader__searchOverlay-navigation {
          display: flex;
          position: unset;
          flex-direction: column;
          align-items: flex-start;
          height: 100%;
          width: 100%;
          justify-content: flex-start;
          width: 100%;
          gap: 3px;
          height: 42px;
          border-bottom: none;
          align-items: flex-start;
        }
      }
    }
  }

  .fullHeight {
    & .clientHeader__searchOverlay-container {
      & .clientHeader__searchOverlay-wrapper {
        .clientHeader__searchOverlay-tab {
          display: flex;
          position: unset;
        }
      }
    }
  }

  .clientHeader__searchOverlay {
    & .clientHeader__searchOverlay-container {
      & .clientHeader__searchOverlay-wrapper {
        .clientHeader__searchOverlay-tab {
          display: flex;
          position: unset;
          top: 205px;
          padding-top: 36px;
          width: 100%;
          margin-bottom: 70px;
        }
      }
    }
  }

  .clientHeader__searchOverlay {
    & .clientHeader__searchOverlay-container {
      & .clientHeader__searchOverlay-wrapper {
        & .clientHeader__searchOverlay-navigation {
          .clientHeader__searchOverlay-label {
            height: 48px;
            display: flex;
            font-size: 18px;
            align-items: center;
            padding: 0 16px;
            background-color: #f2fafd;
            color: #0091b9;
            padding: 16px;
            width: 100%;
            font-weight: 700;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            transition: background-color 0.4s ease-in-out;
          }
        }
      }
    }
  }

  label.clientHeader__searchOverlay-label::before {
    content: "\e313";
    margin-right: 12px;
    font-size: 35px;
    font-family: "Material Icons";
    font-weight: 100;
  }

  .clientHeader__searchOverlay-searchAll::before {
    content: "Search Valley Children's Healthcare";
    font-size: 18px;
    font-family: "Museo Sans 300";
  }

  .clientHeader__searchOverlay {
    & .clientHeader__searchOverlay-inputWrapper {
      .clientHeader__searchOverlay-input {
        width: 100%;
        height: 44px;
        border-radius: 4px;
        border-width: 1px;
        padding: 8px 18px;
        font-size: 18px;
        font-family: "Museo Sans 700";
      }
    }
  }

  .clientHeader__searchOverlay-searchProviders::before {
    content: "Search doctors and providers by specialty, condition or procedure";
    font-family: "Museo Sans 300";
    font-size: 18px;
  }

  .clientHeader__searchOverlay-searchLocations::before {
    font-family: "Museo Sans 300";
    font-size: 18px;
  }

  .fullHeight {
    height: 100vh !important;

    .clientHeader__searchOverlay-wrapper {
      margin-top: -36px !important;
    }
  }

  .clientHeader__searchOverlay-submitSearch {
    .clientHeader__searchOverlay-button {
      margin-left: 0;
      margin-bottom: 150px;
    }
  }
}

.clientHeader__menu-list-container {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.autocomplete-list {
  position: absolute;
  width: calc(100% - 2px);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  z-index: 1000;
}
.autocomplete-list li {
  padding: 8px;
  cursor: pointer;
}
.autocomplete-list li:hover {
  background: #f0f0f0;
}