/* Map - Map View DIV */
#mapViewDIV {
  position:absolute;
  top: 50px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 0;
  margin: 0;
  border: 1px solid #25363d;
}

/* Mobile - 700px */
@media only screen and (max-width: 700px) {
  #mapViewDIV {
    position:absolute;
    top: 90px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0;
    margin: 0;
    border: 1px solid #25363d;
  }
}

/* Map - Home Button */
#homeButtonDIV{
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 10px;
  height: 35px;
  width: 35px;
  border: 1px solid #D3D3D3;
  border-radius: 4px;
  background: white;
}

/* Map - Zoom Slider */
#zoomSliderDIV{
  position: absolute;
  z-index: 2;
  top: 55px !important;
  left: 10px;
  height: 70px;
  width: 35px;
  border: 1px solid #D3D3D3;
  border-radius: 4px;
  background: white;
}

/* Map - Locate */
#mapLocateDIV{
  position: absolute;
  z-index: 2;
  top: 135px !important;
  left: 10px;
  height: 35px;
  width: 35px;
  border: 1px solid #D3D3D3;
  border-radius: 4px;
  background: white;
}

/* Map - Scale Bar */
#mapScaleBarDIV{
  position: absolute;
  z-index: 3;
  bottom: 10px;
  left: 10px;
  height: 30px;
  width: 120px;
}


/* Map - Search Widget */
#searchWidgetDIV{
  position: absolute;
  z-index: 2;
  top: 10px !important;
  left: 60px;
  height: 35px;
  width: 250px;
  border: 1px solid #D3D3D3;
  border-radius: 4px;
}


/* ---------------------------------------------------------
   Feature Hover Tooltip
   --------------------------------------------------------- */

#featureHoverTooltip {
    display: none;
    position: fixed !important;

    width: 220px !important;
    height: auto !important;

    padding: 7px 10px;

    background-color: white !important;
    border: 1px solid #777777 !important;
    border-radius: 4px;

    color: #222222 !important;

    font-family: Arial, sans-serif;
    font-size: 12px !important;
    line-height: 1.4;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

    pointer-events: none !important;

    z-index: 999999 !important;
}


/* ---------------------------------------------------------
   Tooltip Arrow - Tooltip is RIGHT of cursor
   Arrow appears on LEFT side
   --------------------------------------------------------- */

#featureHoverTooltip.tooltip-right::before {
    content: "";
    position: absolute;

    left: -8px;
    top: 12px;

    border-width: 8px 8px 8px 0;
    border-style: solid;
    border-color: transparent #777777 transparent transparent;
}

#featureHoverTooltip.tooltip-right::after {
    content: "";
    position: absolute;

    left: -7px;
    top: 13px;

    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent white transparent transparent;
}


/* ---------------------------------------------------------
   Tooltip Arrow - Tooltip is LEFT of cursor
   Arrow appears on RIGHT side
   --------------------------------------------------------- */

#featureHoverTooltip.tooltip-left::before {
    content: "";
    position: absolute;

    right: -8px;
    top: 12px;

    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #777777;
}

#featureHoverTooltip.tooltip-left::after {
    content: "";
    position: absolute;

    right: -7px;
    top: 13px;

    border-width: 7px 0 7px 7px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

/*
.esri-view-width-xlarge .esri-popup__main-container
{
  max-height: 400px !important;
  max-width: 400px !important;
}
.esri-view-width-large .esri-popup__main-container
{
  max-height: 400px !important;
  max-width: 300px !important;
}
.esri-view-width-medium .esri-popup__main-container
{
  max-height: 400px !important;
  max-width: 300px !important;
}
*/



/* =========================================================
   DEVELOPMENT TRACKER - MOBILE MAP LAYOUT
   ========================================================= */

@media only screen and (max-width: 700px) {

  /* Match the new 64px mobile header */
  #mapViewDIV {
    top: 64px;
  }

  /* Full-width responsive search bar */
  #searchWidgetDIV {
    top: 10px !important;
    left: 10px;
    right: 10px;
    width: auto;
    height: 35px;
    box-sizing: border-box;
  }

  /* Ensure ArcGIS Search fills its container */
  #searchWidgetDIV .esri-search {
    width: 100%;
    max-width: 100%;
  }

  /* Move navigation below the search bar */

  #homeButtonDIV {
    top: 58px !important;
    left: 10px;
  }

  #zoomSliderDIV {
    top: 103px !important;
    left: 10px;
  }

  #mapLocateDIV {
    top: 183px !important;
    left: 10px;
  }

  /* Hide hover tooltip on mobile */
  #featureHoverTooltip {
    display: none !important;
  }

}