body {
  padding: 0;
  margin: 0;
  height: 92%;
  width: 100%;
  overflow: hidden;
  background-color: #78cdce;
}

span {
  font-weight: 200;
}

#viewDiv {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #78cdce;
}

.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}
‍‍‍

/* #srDiv {
  height: 80px;
  padding: 10px;
} */

.head-title {
  width: 35%;
  font-size: 3vmin;
}

.info {
  width: max-content;
  background-color: white;
  opacity: 0.9;
  color: orangered;
  font-size: 3vmin;
  /* padding: 2vmin; */
  visibility: hidden;
  padding: 1rem 2.5rem;
  border-radius: 0.2rem;
  top: 1vmin;
}

#info-cont {
  position: absolute;
  z-index: 5;
}

#infobox {
  position: absolute;
  z-index: 10;
}

.nav {
  top: 0%;
  width: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #529495;
  color: white;
  height: 8vmin;
  padding: 0 1rem;
  font-size: 1.7vw;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 1;
}

#nav-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50vw;
}

#in-nav {
  font-size: 1.2vw;
  font-weight: lighter;
}

.btn-world-extent {
  display: inline;
  background-color: orangered;
  color: white;
  font-size: 1vw;
  font-weight: 500;
  border: none;
  padding: 2vmin 1vmin;
  border-radius: 4vmin;
  cursor: pointer;
  transition: all 0.3s;
  font-family: var(--calcite-sans-family);
  text-transform: uppercase;
  /* text-transform: uppercase; */
}

a {
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: rgb(248, 138, 98);
}

a:active {
  color: orangered;
}

.visible-layer {
  color: #fff;
  background-color: #226f0e;
}

.btn-donate {
  height: 4vmin;
}

.btn-world-extent:hover {
  background-color: white;
  color: orangered;
}

.btn-donate:hover {
  background-color: white;
  color: orangered;
}

.btn-alerts:hover {
  background-color: white;
  color: orangered;
}

.btns-switch {
  position: relative;
  display: flex;
  background-color: rgb(230, 136, 102);
  /* padding: 0px 0px; */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: auto;
  width: 15vw;
  height: 8vmin;
}

#SortDiv {
  width: inherit;
}

calcite-segmented-control-item {
  width: 13vw;
}

#nav-left .btns-switch {
  width: 20vw;
}

.btn-switch {
  display: flex;
  background-color: rgb(230, 136, 102);
  color: white;
  font-size: 1vw;
  font-weight: 600;
  border: none;
  padding: 2vmin 2vmin;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  height: 8vmin;
  /* height: 20vh; */
  justify-content: center;
  align-items: center;
  width: 50%;
  text-transform: uppercase;
}

#nav-left .btn-switch {
  font-size: 1.3vw;
  height: 4vmin;
}

.btn-switch:hover {
  background-color: white;
  color: orangered;
}

.active-map {
  color: white;
  background-color: orangered;
}

.esri-widget {
  background-color: rgba(255, 255, 255, 0.85);
  color: orangered;
}

.esri-popup__main-container {
  background-color: white;
}

.esri-time-slide {
  background-color: white;
}

.esri-slider {
  color: orangered;
}

.hidden {
  display: none;
}

.close-modal {
  position: absolute;
  top: 0.5rem;
  right: 2rem;
  font-size: 3rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

.modal-info {
  display: block;
  width: inherit;
  background-color: transparent;
  color: white;
  visibility: visible;
  width: auto;
  padding: 0px 0px;
}

#modal-title {
  text-align: center;
  font-size: 6vmin;
  font-weight: 1000;
  color: white;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 80%;

  background-image: linear-gradient(
    to top left,
    rgba(36, 197, 167, 0.7),
    rgba(194, 217, 217, 0.7)
  );

  padding: 3vmin 7vmin;
  border-radius: 0.5vmin;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 20;
  overflow-y: scroll;
  overflow-x: scroll;
}

#splash-title {
  color: orangered;
  text-transform: uppercase;
  font-size: 6vmin;
  font-weight: 900;
  margin-top: 3vmin;
  margin-bottom: 0vmin;
  /* color: white; */
}

.splash-info {
  padding-top: 1vmin;
  font-size: 3vmin;
  color: white;
}

.close-splash {
  position: absolute;
  top: 0.5rem;
  right: 2rem;
  font-size: 3rem;
  color: white;
  cursor: pointer;
  border: none;
  background: none;
}

.splash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;

  background-image: linear-gradient(
    to top left,
    rgba(12, 96, 105, 0.95),
    rgba(141, 210, 174, 0.95)
  );

  padding: 3vmin 7vmin;
  border-radius: 0.5vmin;
  /* box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.7); */
  z-index: 20;
  overflow-y: scroll;
  overflow-x: hidden;
}

.modal::-webkit-scrollbar {
  width: 5vmin;
}

.modal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

.modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6);
}

.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.8);
}

.splash::-webkit-scrollbar {
  width: 5vmin;
}

.splash::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

.splash::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6);
}

.splash::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.8);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.7vmin);
  z-index: 5;
}

.instructions {
  position: absolute;
  z-index: 5;
  left: 1%;
  bottom: 3vmin;
  font-size: 2.5vmin;
  color: white;
}

.scale {
  position: absolute;
  /* z-index: 5; */
  left: 50%;
  bottom: 3vmin;
  font-size: 3vmin;
  font-weight: 600;
  color: white;
}

.highlight {
  color: orangered;
  text-transform: uppercase;
  font-size: 3vmin;
  font-weight: 600;
}

#graph_legend {
  display: inline-flex;
  /* justify-content: space-between; */
  align-items: center;
  margin: 3vmin;
  margin-left: 20vmin;
  /* margin: 3vmin; */
  /* width: 90%; */
}

#graph {
  width: 50vmin !important;
  height: 50% !important;
  padding: 0vmin;
  font-weight: 900;
}

#legend {
  width: 30%;
  margin-left: 3vmin;
  color: white;
  /* overflow: scroll; */
}

#legend ul {
  list-style: none;
  font-size: 3vmin;
  white-space: nowrap;
}

ul {
  list-style: none;
  font-size: 3vmin;
  white-space: wrap;
}

#legend li span {
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  display: inline-block;
  margin: 0 1vmin 3vmin 0;
  vertical-align: -3vmin;
}

#seasons-filter {
  height: 15vmin;
  width: 100%;
  visibility: hidden;
}

.subgroup-item {
  width: 100%;
  padding: 2vmin;
  font-size: 3vmin;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  /* height: 40px; */
}

.subgroup-item:focus {
  background-color: orange;
}

.subgroup-item:hover {
  background-color: orangered;
  color: white;
}

title {
  padding: 50px;
}

#titleText {
  font-size: 20pt;
  font-weight: 60;
  padding-bottom: 10px;
}

#timeSlider {
  /* display: inline-flex; */
  opacity: 1;
  width: 45vw;
  height: auto;
  overflow: visible;
  margin-left: 0%;
  visibility: visible;
  background-color: white;
}

#infoDiv {
  padding: 1vw;
  width: 30vw;
  height: 80vh;
  position: relative;
  font-size: 2vmin;
  background-color: white;
  color: #529495;
  --calcite-ui-brand: #529495;
  --calcite-ui-brand-hover: orangered;
  overflow-y: scroll;
}

.heading {
  color: #529495;
  margin-left: 0px;
  margin-bottom: 1vh;
  margin-top: 0px;
}

#content {
  /* padding-bottom: 2vh; */
  padding-top: 1.5vh;
  overflow-y: scroll;
  height: 65%;
}

#resultsDiv {
  height: 35%;
  z-index: 5;
  overflow-y: scroll;
}

#resultsHeading {
  padding-top: 1vh;
  padding-bottom: 0vh;
  margin: 0vh;
}

.header-content {
  display: flex;
  flex-direction: column;
  padding: 0px 0px;
  overflow: hidden;
  margin-inline-end: auto;
}

#results {
  background-color: inherit;
  height: 35%;
  /* overflow-y: scroll; */
}

h3.esri-widget__heading,
h4.esri-widget__heading,
h5.esri-widget__heading,
h6.esri-widget__heading {
  font-size: 3.5vh;
  text-align: center;
  padding-bottom: 2vh;
}

.esri-legend__layer-table--size-ramp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.esri-legend__layer-cell--info {
  font-size: 2.5vh;
}

.esri-legend__layer-caption {
  display: table-caption;
  padding-top: 2vh;
  padding-bottom: 2vh;
  word-break: break-word;
  font-size: 3vh;
  color: #000;
  font-weight: 400;
}

.esri-legend__service {
  padding: 3vh 0px;
  width: 30vw;
  word-wrap: break-word;
  border-bottom: 1px solid rgba(110, 110, 110, 0.3);
}

.esri-ui-corner .esri-expand .esri-widget--panel,
.esri-ui-corner .esri-expand .esri-widget--panel-height-only,
.esri-ui-corner .esri-component > .esri-widget--panel,
.esri-ui-corner .esri-component.esri-widget--panel {
  width: 30vw;
}

/* toggle clustter */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 22px;
  vertical-align: middle;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #529495;
}

input:focus + .slider {
  box-shadow: 0 0 1px #529495;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

.labelText {
  padding-left: 5px;
  font-size: 2vh;
  font-weight: 500;
}

#mainDiv {
  padding: 8px;
}

calcite-radio-group {
  width: inherit;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
}

/* calcite-radio-group-item {
  width: 50%;
  --calcite-font
} */

.esri-view-width-xlarge .esri-popup__main-container,
.esri-view-width-large .esri-popup__main-container {
  max-height: 70vh !important;
  max-width: 35vw !important;
}

.esri-view-width-medium .esri-popup__main-container {
  max-height: 70vh !important;
  /* max-width: 40vw !important; */
  width: 40vw;
}

.esri-view-height-less-than-medium .esri-popup__main-container {
  max-height: 70vh;
}

.esri-feature-content span {
  color: #000;
}

.esri-widget__heading.esri-feature-element-info__title {
  color: orangered;
}

.esri-feature-element-info__description {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 0.2vh;
  color: #000;
}

@media (max-width: 700px) {
  html,
  body {
    height: 100%;
  }

  body {
    overflow: hidden;
    background-color: #78cdce;
  }

  #viewDiv {
    display: flex;
    padding: 0;
    margin: 0;
    height: 92%;
    width: 100%;
    background-color: #78cdce;
  }

  .instructions {
    visibility: hidden;
  }

  .scale {
    left: 5%;
    bottom: 7vmin;
    font-size: 5vmin;
    z-index: 1;
    visibility: hidden;
  }

  .nav {
    /* top: 0%; */
    width: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #529495; */
    background-color: rgb(212, 159, 141);

    color: white;
    height: 8vh;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
    text-align: center;
  }

  .head-title {
    width: 25%;
    font-size: 3vmin;
    text-align: left;
    font-weight: 700;
    visibility: hidden;
    display: none;
    z-index: 1;
  }

  #in-nav {
    font-size: 1.2vw;
    font-weight: lighter;
    display: none;
  }

  .btn-world-extent {
    font-size: 2.4vw;
    /* padding: 0vmin 0vmin; */
    margin-right: -4vw;
    font-family: var(--calcite-sans-family);
    text-transform: uppercase;
    text-align: center;
    height: 8vh;
    width: 20vw;
    border-radius: 0vmin;
  }

  #nav-left .btns-switch {
    margin: -5vw;
    height: 8vh;
    width: 48vw;
    position: absolute;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    background-color: transparent;
  }

  #nav-left .btn-switch {
    height: 8vh;
    width: 50%;
    font-size: 3.7vw;
    text-align: center;
    overflow: visible;
  }

  .btns-switch {
    position: absolute;
    align-items: center;
    overflow: hidden;
    width: 30vw;
    height: 8vh;
    margin-left: 44.5vw;
    z-index: 1;
    /* background-color: transparent; */
  }

  .btn-switch {
    font-size: 3vw;
    text-align: center;
    width: 50%;
    height: 8vh;
    overflow: visible;
  }

  #modal-title {
    text-align: center;
    margin: 10vw;
    font-size: 7vw;
    font-weight: 1000;
    color: white;
  }

  .esri-view-width-xsmall .esri-expand--auto .esri-expand__mask--expanded {
    background-color: #000;
    position: fixed;
    right: 0;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    opacity: 0;
    z-index: 1;
  }

  .esri-view-width-xsmall .esri-expand--auto .esri-expand__container--expanded {
    width: 92vw;
    position: relative;
    top: inherit;
    bottom: 0;
    margin: 0;
    height: auto;
    background: #ffffff;
    /* kground: #bd3333; */
    z-index: 5;
    overflow: scroll;
  }

  .esri-view-width-xsmall .esri-expand--auto .esri-widget {
    max-width: 100%;
    width: 100%;
    background-color: transparent;
  }

  .esri-scale-bar.esri-widget {
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
    z-index: 1;
  }

  .img_leg_NDs {
    width: 10%;
  }

  .subgroup-item {
    width: 100%;
    padding: 3vmin;
    font-size: 6vmin;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    /* height: 40px; */
  }

  .esri-widget--button {
    transition: background-color 125ms ease-in-out;
    z-index: 5;
  }

  .esri-time-slider {
    cursor: default;
    min-width: 85vmin;
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
    z-index: 5;
  }

  #infoDiv {
    width: 70vw;
    height: 78vh;
    position: relative;
    font-size: 3.5vw;
    background-color: white;

    color: #529495;
    --calcite-ui-brand: #529495;
    --calcite-ui-brand-hover: orangered;
    overflow-y: scroll;
  }

  .esri-view-width-xsmall
    .esri-ui-top-right
    .esri-expand--auto
    .esri-expand__container--expanded,
  .esri-view-width-xsmall
    .esri-ui-bottom-right
    .esri-expand--auto
    .esri-expand__container--expanded {
    width: 75vw;
    height: 78vh;
    animation: expand-slide-rtl-ani 300ms forwards;
  }

  #content {
    /* padding-bottom: 2vh; */
    padding-top: 1.5vh;
    overflow-y: scroll;
    height: 65%;
  }

  #resultsDiv {
    display: flex;
    background-color: inherit;
    padding: inherit;
    padding-top: 0px;
    height: 35vh;
    overflow-y: hidden;
  }

  #results {
    background-color: inherit;
    height: 30vh;
  }

  .modal {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* left: 50%; */

    background-image: linear-gradient(
      to top left,
      rgba(36, 197, 167, 0.7),
      rgba(194, 217, 217, 0.7)
    );

    padding: 0vmin 0vmin;
    border-radius: 0.5vmin;
    box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
    z-index: 20;
    overflow-y: scroll;
    overflow-x: scroll;
  }

  .modal::-webkit-scrollbar {
    width: 5vmin;
  }

  calcite-segmented-control-item {
    width: 33vw;
  }

  .close-modal {
    position: absolute;
    top: 0.5vmin;
    right: 0.5rem;
    font-size: 3rem;
    color: #333;
    cursor: pointer;
    border: none;
    background: none;
  }

  #graph_legend {
    display: grid;
    /* justify-content: space-between; */
    align-items: center;
    /* text-align: center; */
    /* margin-left: 10vmin; */
    width: 90%;
    /* margin: 3vmin; */
    margin-left: 3vmin;
  }

  #graph {
    width: 80vmin !important;
    height: 80vmin !important;
    margin-bottom: 5vmin;
    font-weight: 900;
    margin-left: 5vmin;
  }

  #legend {
    width: 40%;
    margin-left: 15vmin;
    color: white;
    /* overflow: scroll; */
  }

  #legend ul {
    list-style: none;
    font-size: 4vmin;
    white-space: nowrap;
  }

  ul {
    list-style: none;
    font-size: 4vmin;
    white-space: wrap;
  }

  #legend li span {
    width: 4vmin;
    height: 4vmin;
    border-radius: 50%;
    display: inline-block;
    margin: 0 1vmin 3vmin 0;
    vertical-align: -3vmin;
  }

  .modal-info {
    display: block;
    text-align: center;
    width: inherit;
    background-color: transparent;
    color: white;
    visibility: visible;
    width: auto;
    padding: 0vmin 0vmin;
    /* margin-left: 3vmin; */
  }

  .modal-info ul {
    margin-left: 5vmin;
    margin-right: 5vmin;
    padding: 0vmin;
  }

  .highlight {
    color: orangered;
    text-transform: uppercase;
    font-size: 5vmin;
    font-weight: 600;
  }

  #timeSlider {
    opacity: 1;
    height: 45vw;
    overflow: visible;
    margin-left: 0%;
    visibility: visible;
    background-color: rgb(255, 255, 255);
  }

  #infobox {
    font-size: 4vmin;
    width: 58vmin;
    background-color: white;
    opacity: 0.9;
    color: orangered;
    /* padding: 2vmin; */
    visibility: hidden;
    padding: 1rem 1rem;
    border-radius: 0.2rem;
    top: 0vmin;
    margin-left: -50vmin;
  }

  #splash-title {
    color: orangered;
    text-transform: uppercase;
    font-size: 7vmin;
    font-weight: 900;
    /* margin-top: 3vmin;
    margin-bottom: 0vmin; */
    /* color: white; */
    padding: 5vmin;
    padding-bottom: 0vmin;
    padding-top: 8vmin;
  }

  .splash-info {
    padding: 5vmin;
    padding-top: 1vmin;
    font-size: 5vmin;
    color: white;
  }

  .close-splash {
    position: absolute;
    top: 0.5vw;
    right: 0.5vw;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    border: none;
    background: none;
  }

  .splash {
    position: absolute;
    /* top: 50%;
    left: 50%; */
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;

    background-image: linear-gradient(
      to top left,
      rgba(12, 96, 105, 0.95),
      rgba(141, 210, 174, 0.95)
    );

    padding: 0vmin 0vmin;

    /* margin: 3vmin 7vmin; */
    border-radius: 0.5vmin;
    /* box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.7); */
    z-index: 20;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  h3.esri-widget__heading,
  h4.esri-widget__heading,
  h5.esri-widget__heading,
  h6.esri-widget__heading {
    font-size: 6vw;
  }

  /* .esri-legend__layer-table--size-ramp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
   */
  .esri-legend__layer-cell--info {
    font-size: 4.5vw;
  }

  .esri-legend__layer-caption {
    font-size: 5.5vw;
  }

  .esri-legend__service {
    padding: 3vh 0px;
    width: 80vw;
    word-wrap: break-word;
    border-bottom: 1px solid rgba(110, 110, 110, 0.3);
  }

  .esri-ui-corner .esri-expand .esri-widget--panel,
  .esri-ui-corner .esri-expand .esri-widget--panel-height-only,
  .esri-ui-corner .esri-component > .esri-widget--panel,
  .esri-ui-corner .esri-component.esri-widget--panel {
    width: 100%;
  }

  img[alt="Project"] {
    width: 180;
    height: 115;
  }

  img[alt="GlobalGiving"] {
    width: 128;
    height: 86;
  }
} ;