#jobmap
{
  height: 100%;
  width: 100%;
}

.markerPin, .markerPinYellow
{
  background-position: top center;
  height: 40px !important;
  width: 25px !important;
  margin-top: -40px !important;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.markerPin
{
  background-image: url('/images/maps/redmarker.png');
}

.markerPinYellow
{
  background-image: url('/images/maps/yellowmarker.png');
}

.markerPin span, .markerPinYellow span
{
  display: inline-block;
  padding-top: 4px;
}

  .markerPin span.dot, .markerPinYellow span.dot
  {
    height: 9px;
    width: 9px;
    border-radius: 5px;
    background-color: #fff;
    margin-top: 8px;
  }

.markerPopupContainer
{
  left: -154px !important;
  bottom: -4px !important;
}

  .markerPopupContainer .jobUrl
  {
    font-size: 14px;
  }

.markerPopup
{
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 280px;
  box-sizing: padding-box;
}

  .markerPopup > div
  {
    border-bottom: 1px solid #dddddd;
  }

  .markerPopup .logo img
  {
    max-width: 220px;
    max-height: 80px;
  }

.marker-cluster-small
{
  background-color: rgba(237, 178, 0, 0.3);
  height: 36px !important;
  width: 36px !important;
  border-radius: 18px !important;
}

  .marker-cluster-small div
  {
    background-color: rgba(237, 178, 0, 0.90);
    height: 26px !important;
    width: 26px !important;
    border-radius: 13px !important;
  }

.marker-cluster-medium
{
  background-color: rgba(47, 211, 14, 0.3);
}

  .marker-cluster-medium div
  {
    background-color: rgba(47, 211, 14, 0.9);
  }

.marker-cluster-large
{
  background-color: rgba(0, 140, 255, 0.3);
  height: 44px !important;
  width: 44px !important;
  border-radius: 22px !important;
}

  .marker-cluster-large div
  {
    background-color: rgba(0, 140, 255, 0.9);
    height: 34px !important;
    width: 34px !important;
    border-radius: 17px !important;
  }

/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small
{
  background-color: rgba(237, 178, 0, 0.3);
}

  .leaflet-oldie .marker-cluster-small div
  {
    background-color: rgba(237, 178, 0, 0.90);
  }

.leaflet-oldie .marker-cluster-medium
{
  background-color: rgba(47, 211, 14, 0.3);
}

  .leaflet-oldie .marker-cluster-medium div
  {
    background-color: rgba(47, 211, 14, 0.9);
  }

.leaflet-oldie .marker-cluster-large
{
  background-color: rgba(0, 140, 255, 0.3);
}

  .leaflet-oldie .marker-cluster-large div
  {
    background-color: rgba(0, 140, 255, 0.9);
  }

.marker-cluster
{
  background-clip: padding-box;
  border-radius: 20px;
}

  .marker-cluster div
  {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
  }

  .marker-cluster span
  {
    line-height: 30px;
    color: #ffffff;
  }

.marker-cluster-small span
{
  line-height: 26px;
}

.marker-cluster-large span
{
  line-height: 34px;
}

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow
{
  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
  -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}