* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#topArea {
  height: 5%;
  min-height: 32px;
  flex-grow: 0;
  background: #A7A7A7;
}

#topAreaEle {
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

#topAreaEle * {
  /* height: 100%; */
  font-size: 21px;
  color: #f4fbff;
  display: flex;
  align-items: center;
}

#topAreaEle > img {
  margin-left: 1vw;
  margin-right: 1vw;
  height: 80%;
}

#topAreaEle div {
  height: 80%;
}

#topAreaEle .mapTitle {
  min-width: 85px;
  margin-right: auto;
}

#topAreaEle .topWidget {
  height: 100%;
  /* set w:h = 1:1  */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: solid;
  border-color: #5a5757;
  border-width: 1px;
}

.topWidget:hover {
  background-color: #b3b3b3;
}

#topAreaEle .topWidget img {
  height: 55%;
}

#viewDiv {
  flex-grow: 1;
  border-bottom: 1px solid;
}

#historyDiv {
  /* position: absolute;
  top: 255px;
  left: 15.5px; */
  cursor: default;
}

#measureDiv {
  /* position: absolute;
  top: 110px;
  right: 15.5px; */
  cursor: default;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.esri-widget--button.active,
.esri-widget--button.active:hover,
.esri-widget--button.active:focus {
  cursor: default;
  background-color: #999696;
}
.esri-widget--button.active path,
.esri-widget--button.active:hover path,
.esri-widget--button.active:focus path {
  fill: #e4e4e4;
}

#printDiv {
  /* position: absolute;
  top: 155px;
  right: 15.5px; */
  cursor: default;
}

#overviewButton {
  /* position: absolute;
  top: 200px;
  right: 15.5px; */
  cursor: default;
}

#overviewDiv {
  padding: 0;
  margin: 0;
  /* position: absolute;
  bottom: 30px;
  right: 55px; */
  aspect-ratio: 1 / 1;
  width: 60%;
  max-width: 180px;
  height: auto;
  z-index: 99;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
}