:root {
    --app-height: 100%;
    --topbar-height: 150px;
}

html,
body,
#viewDiv {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
}

html,
body {
    height: var(--app-height);
}

#viewDiv {
    height: calc(var(--app-height));
}

.esri-icon-non-visible::before {
  color: black;
  font-weight: bold;
  content: "\e610";
}

.esri-icon-visible::before {
  color: black;
  font-weight: bold;
  content: "\e611";
}
.esri-popup__footer {
  display: none;
}
.esri-popup__main-container {
  z-index: 99;
  position: absolute;
  margin: auto;
  top: 15%;
  width: 50%;
}

#heading {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #0098db;
  overflow: hidden;
  font-family: "DM Sans", sans-serif;
}

#title-container {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#topbar {
/*   width: 92%; */
  padding-inline: 0%;
  height: var(--topbar-height);
  /* height: fit-content; */
  display: flex;
  align-items: center;
  border-bottom: 10px solid #0083bf;
  overflow: hidden;
}
.help-link {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
  padding-block: 0.5em;
}
#logo-large {
  display: inline;
}
.logo {
  height: 75px;
}
.esri-view-width-xlarge .esri-popup__main-container,.esri-view-width-large .esri-popup__main-container,.esri-view-width-medium .esri-popup__main-container {
max-height: 500px !important;  
  
}

.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: 200px;
}
.header {
  text-align: left;
  background: grey;
  color: rgb(255, 255, 255);
  height: 44px;
  display: flex;
  align-items: center;
  font-weight: bolder;
  font-size: 24pt;
}

.header img {
  height: 40px;
  margin: 0 8px 0 8px;
}

#instruction {
  z-index: 99;
  position: absolute;
  top: 15px;
  left: 50%;
  padding: 0px;
  margin-left: -200px;
  height: 35px;
  width: 380px;
  background: rgba(255, 255, 255, 1);
  font-size: 10px;
  color: black;
}

/*
}
.esri-search__form {
  color: pink;
}
*/

@media screen and (max-width: 800px) {
  :root {
    --topbar-height: 250px;
  }
  #topbar {
    flex-direction: column;
  }
  h1 {
    font-size: max(2vw, 24px);
  }
  .logo {
  height: 60px;
}
}