AgileVentures/LocalSupport

@import "utils/colors";

#map-canvas {
  height: 400px;
  width: 100%;
}
.map_container {
  flex: 1;
  // since the height of #map_container is dynamic, these 12px need to be subtracted
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  margin-bottom: 20px; // for when the screen narrows to a one column layout
}

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

.vol_op{
  height: 22px;
  width: 22px;
  &:hover{
    cursor: pointer;
  }
}

.custom-marker {
  height: 22px;
  width: 22px;
}

.measle {
  height: 6px;
  width: 6px;
  // set measle in bottom center of parent div,
  // used in maps_utilities/custom_marker set markers positions
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  &:hover{
    cursor: pointer;
  }
}

.marker {
  height: 22px;
  width: 22px;
  position: relative;
  z-index: 1;
  &:hover{
    cursor: pointer;
  }
}

.infowindow_close{
  position: absolute;
  top: 0;
  right: 5px;
}

.arrow_box {
  position: relative;
  background: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  width: 280px;
  padding: 10px 20px 10px 5px;
  // box-shadow: 2px 2px 2px #888888;
}

.arrow_box:after, .arrow_box:before{
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after{
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

.arrow_box:before {
  border-color: rgba(219, 219, 219, 0);
  border-bottom-color: #dbdbdb;
  border-width: 11px;
  margin-left: -11px;
}

.infoBox > img { display: none;  }

.long-vol-op {
  max-height: 135px;
  overflow-y: auto;

  ul {
    margin-left: 5px;
  }

  li {
    border-bottom: 0.1rem solid $light-gray;
    margin: 10px 0;
    padding-bottom: 10px;
  }

  li:last-child {
    border: 0;
  }
}

/* MAP LEGEND STYLE
-------------------------------------------------- */

.map_legend .key_image, .map_legend .key_text {
  padding: 0;
  vertical-align: baseline;
  border: none;
}

.map_legend td.key_image {
  padding-right: 10px;
  text-align: center;
}

.map_legend td.key_text {
  font-size: 12px;
  color: #899096;
}

/* --------------------- VOLOPS LIST ON THE INDEX PAGE ---------------------- */

.center-map-on-op:hover {
  background-color: #f5f5f5;
}