#dialog {
  display: none;
  background: #fff;
  max-width: 369px; 
  padding: 16px;
  border-radius: 0px;
  border: 3px solid #cbd6e2;
  box-shadow: 0 0 10px rgb(3 17 36 / 35%);
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}

#dialog-hover {
  display: none;
  background: #282b2d;
  color: #fff;
  width: 58px;
  height: 58px;
  padding: 2px;
  border-radius: 10px;
  border: 3px solid #cbd6e2;
  box-shadow: 0 0 10px rgb(3 17 36 / 35%);
  position: absolute;
  z-index: 99;
}

#dialog-hover h2 {
  color: #fff;
  margin: 0;
  font-size: 16px;
}

#dialog form {
/*   height: 200px;
  overflow-y: overlay; */
}

#dialog form .hs-input {
    padding: 2px !important;
}

.interactive-map {
  width: 100%;
  margin: auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.lot-popup: hover {
   fill: rgba(0, 0, 0, 0.5);
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
}
.popup[fill='#d8efc2'] {
  cursor: pointer!important;
}
.popup:not[fill='#d8efc2'] {
  cursor: default!important;
}
/* The actual popup (appears on top) */
.s7 .popuptext, .s8 .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.s7 .popuptext::after, .s8 .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.s7 .show, .s8 .show{
  visibility: visible !important;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.interactive-map-responsive {
  display: none;
  flex-wrap: wrap;
  text-align: center;
}

.interactive-form-response {
  display: none;
  padding: 28px 20px;
}

.interactive-map svg {
  width: auto;
  position: relative;
  left: 6%;
  z-index: 2;
}

@media(max-width: 768px){
  .interactive-map {
    overflow: scroll;
    padding: 16px;
    display: block;
  }
  
  .interactive-map svg {
    width: 1700px;
    margin-bottom: -120px;
  }
  
  .interactive-map-responsive {
    display: flex;
  }

  .interactive-form-response {
    display: block;
  }
}

.lot-button {
  background: #9b9da0;
  flex-grow: 1;
  width: 15.5%;
  padding: 8px 16px;
  margin: 16px 8px;
/*   cursor: pointer; */
}

.lot-button h3 {
  margin: 0 !important;
}


@media(max-width: 510px){
  .lot-button {
    width: 25%;
  }
}


div#dialog {
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    left: 50% !important;
}