html, body {
  overflow:hidden;
  font-family: arial;
}

/* --------------------------------------------------------------------------------------------- */
/* Application Header - START
/* --------------------------------------------------------------------------------------------- */
/* Application Header */
#appHeader{
  position:absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  background: #25363d;
  /* Make Text Unselectable */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* Application Header - Mobile 700px*/
@media only screen and (max-width: 700px) {
  #appHeader{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 80px;
    background: #25363d;
	/* Make Text Unselectable */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
}

/* Application Header City Logo */
#appHeaderCityLogo{
  z-index: 2;
  position: absolute;
  margin-top: 5px;
  left: 5px;
  height: 40px;
  width: 40px;
  border-radius: 4px;
  background-image:url(https://gis.edmondok.gov/ApplicationModulesJS4X/Graphics/CityLogo/CityLogoSmall.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  /* Make Text Unselectable */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* Application Header City Logo - Mobile 700px*/
@media only screen and (max-width: 700px) {
  #appHeaderCityLogo{
    z-index: 2;
    position: absolute;
    margin-top: 5px;
    left: 5px;
    height: 35px;
    width: 35px;
    border-radius: 4px;
    background-image:url(https://gis.edmondok.gov/ApplicationModulesJS4X/Graphics/CityLogo/CityLogoSmall.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px;
	/* Make Text Unselectable */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
}

/* Application Header Title */
#appHeaderTitle{
  z-index: 2;
  position: absolute;
  margin-top: 5px;
  left: 50px;
  line-height: 1;
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Make Text Unselectable */
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  /* Make Text Unselectable */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* Application Header Title - Mobile 700px */
@media only screen and (max-width: 700px) {
  #appHeaderTitle{
    z-index: 2;
    position: absolute;
    margin-top: 5px;
    left: 45px;
    line-height: 1;
    font-size: 18px;
    font-weight: bold;
    color: white;
    /* Make Text Unselectable */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
}

/* Application Header Sub Title */
#appHeaderSubTitle{
  z-index: 2;
  position: absolute;
  top: 30px;
  left: 50px;
  line-height: 1;
  font-size: 16px;
  font-weight: bold;
  color: white;
  /* Make Text Unselectable */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* Application Header Sub Title - Mobile 700px */
@media only screen and (max-width: 700px) {
  #appHeaderSubTitle{
    z-index: 2;
    position: absolute;
    top: 27px;
    left: 45px;
    line-height: 1;
    font-size: 14px;
    font-weight: bold;
    color: white;
    /* Make Text Unselectable */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
}
/* --------------------------------------------------------------------------------------------- */
/* Application Header - END
/* --------------------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------------------- */
/* Application Header - Buttons - START
/* --------------------------------------------------------------------------------------------- */
/* Application Header - Info Button */
#infoBtn{
  position: absolute;
  right: 0px;
}

@media only screen and (max-width: 700px) {
  #infoBtn{
    position: absolute;
    right: 0px;
    height: 40px;
    width: 40px;
	bottom: 0px;
  }
}

/* Application Header - Layer List Button */
#layerListBtn{
  position: absolute;
  right: 50px;
}

@media only screen and (max-width: 700px) {
  #layerListBtn{
    position: absolute;
    right: 40px;
	height: 40px;
    width: 40px;
	bottom: 0px;
  }
}

/* Application Header - Layer List Button */
#legendBtn{
  position: absolute;
  right: 100px;
}

@media only screen and (max-width: 700px) {
  #legendBtn{
    position: absolute;
    right: 80px;
    height: 40px;
    width: 40px;
    bottom: 0px;
  }
}

/* ESRI Calcite Style */
calcite-action {
  --calcite-ui-icon-color: white;
}

calcite-popover {
  width: 300px;
}
/* --------------------------------------------------------------------------------------------- */
/* Application Header - Buttons - END
/* --------------------------------------------------------------------------------------------- */