@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

/* Fonts and other items are targeting mobile first */
.notification-banner > div > div {
  padding: 0;
  margin: 0;
}
.alert-drawer-wrapper {
  background: #fada87;
  padding: 0.5em 1.25em;
  margin-bottom: 1px;
  min-height: 0;
  position: absolute;
  /* width: 100vw; */
  /* left: calc(-50vw + 50%); */
  left: 0;
  right: 0;
  top: 0;
}

.alert-drawer__body {
  display: none;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  justify-content: space-between;
  margin: 0.5em 0 0;
  border-top: 1px solid #606060;
}

.alert-drawer__body li {
  display: block;
  font: 14px/19px "Noto Sans", Arial, sans-serif;
  color: #606060;
  margin: 0.5em 0.5em 0.5em 0;
}
.alert-drawer__body li::before {
  content: "\2022";
}

.alert-drawer {
  margin: 0 auto;
  padding: 0;
}

.alert-drawer__body li a {
  text-decoration: none;
}
.alert-drawer__body li a:hover,
.alert-drawer__body li a:active,
.alert-drawer__body li a:focus {
  text-decoration: underline;
}

.alert-drawer__body.active {
  display: block;
}
.alert-drawer__body.active + .alert-drawer__toggle button::after {
  content: "";
  display: none;
}
.alert-drawer__toggle {
  display: block;
  text-align: center;
}
.alert-drawer__toggle button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 auto;
}

.alert-drawer__toggle button::after {
  content: "Expand for resources";
  display: block;
  font: 12px/19px "Noto Sans", Arial, sans-serif;
  color: #606060;
  text-align: center;
}

html[lang="es"] .alert-drawer__toggle button::after {
  content: "Mostrar más recursos";
}

.alert-drawer .alert-drawer-title {
  font: bold 16px/19px "Noto Sans", Arial, sans-serif;
  color: #444444;
}
.alert-drawer a {
  text-decoration: underline;
  color: #606060;
}

.ellipse {
  display: none;
}
.ellipse::before {
  content: "\2026";
}

ul div.alert-drawer__heading {
	text-align: left;
}

/* ONLY FOR DIV#CONTAINER. CAN BE REMOVED WHEN COVID BANNER IS REMOVED */
@media only screen and (max-width: 768px) {
    div#container {
      margin-top: 180px;
    }
  }
@media only screen and (min-width: 769px) and (max-width: 1440px) {
    div#container {
      margin-top: 130px;
    }
}
@media only screen and (min-width: 1441px) {
    div#container {
      margin-top: 80px;
    }
}
/* END DIV#CONTAINER */

/* tablet portrait up */
  @media only screen and (min-width: 768px) {
    .alert-drawer__body.active {
      display: flex;
    }
    .alert-drawer__body li {
      display: inline-block;
    }
  }

  /* Desktop and up overrides */
  @media only screen and (min-width: 1025px) {
    /* Open state is default */
    .alert-drawer {
      margin: 0 auto;
      max-width: 62.5em;
      padding-left: 10px;

    }

    /* Desktop defaults for min-height are injected via Launch */

    /* Expanded Banner */
    .alert-drawer.expanded {
      min-height: 1px;
    }
    html[lang="es"] .alert-drawer.expanded {
      min-height: 100px;
    }

    /* Collapsed Banner */
    .alert-drawer.collapsed {
      min-height: 30px;
    }
    html[lang="es"] .alert-drawer.collapsed {
      min-height: 30px;
    }

    .alert-drawer .alert-drawer-title {
      font: bold 20px/24px "Noto Sans", Arial, sans-serif;

    }
  }

  @media only screen and (min-width: 1441px) {
    .alert-drawer {
      max-width: 1200px;
      padding-left: 20px;
    }
  }

    @media only print {
    .notification-banner {
      display: none;
    }
    .alert-drawer-wrapper {
      display: none;
    }
  }