/* esri */
html,
body,
#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

/* Custom Home widget styling */
.esri-home,
.esri-locate,
.esri-expand,
.esri-zoom {
    border-radius: 3px;
    border: 2px solid gold;
    background-color: #041E42 !important;
}

.esri-widget--button,
.esri-expand__toggle {
    background-color: #041E42 !important;
    color: white !important;
    fill: white !important;

}
/* ZH */
body {
  overflow-x: hidden;
}
.footer-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #041E42;
    margin-top: 0rem;
    color: white;
    text-align: center;

}

.footer-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;

}
.footer-link li {
    list-style-type: none;
}
.footer-link li a {
    text-decoration: none;
    color: white;  
}
.footer-link li a:hover {
    text-decoration: underline gold;
}
.footer-social ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.7rem;
    padding: 0;
    margin-top: 2rem;
}

.footer-social img {
    width: 20px;
    height: auto;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-radius: 4px;
    background-color: white;
}
.footer-social ul li{
    list-style-type: none;   
}
.footer-social img:hover{
    filter: blur(.5px);
}
/* Tab */
@media screen and (min-width: 40em) and (max-width: 1256px){
    .nav .head {
        font-size: 2rem;
     }
    }

/* Phone */
@media (width < 48em) {
    .footer-link {
        gap: 1rem ;
     }
    .nav .head {
      font-size: 1.5rem !important;
   }
   .nav.logo {
    height: auto;
    width: 50px !important;
    margin-left: 1rem;
    margin-right: 2rem;
  }
  #viewDiv {
   
    height: 75% !important;
    
}
.nav__widget img {
  height: 50px !important;
 }

    
    }

/* navBar */

a,
a:visited,
a:active {
  font-weight: 400;
  text-decoration: none;
  color: black;
}
a:hover,
a:visited:hover,
a:active:hover {
  text-decoration: underline gold;
}


/* WIC */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #041E42;  
  color: white; 
  position: sticky !important; 
  top: 0px;
  z-index: 1000; 
  width: 100%; 
}

.nav__icon{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}
.nav.logo {
  height: auto;
  width: 100px;
  margin-left: 1rem;
  margin-right: 2rem;
}

.nav.head {
  font-size: 3rem;
  font-weight: 800;
}
.nav__widget{
  display: flex;
  flex-direction: row;
  justify-content:space-around ;
  align-items: center;
}

 .nav__widget img {
  height: 4rem;
 }
 .nav__widget img:hover {
  height: 50px;
 }
 .help__tip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.help__tip .help__tip--text {
  visibility: hidden;
  width: 140px;
  background-color: #041E42;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px 8px;
  position: absolute;
  z-index: 1;
  bottom: -35%; /* position above the icon */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.9rem;
}

.help__tip:hover .help__tip--text {
  visibility: visible;
  opacity: 1;
}