.module-homepage-map .ol-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}

.module-homepage-map .ol-wrapper .ol-col.search {
  position: absolute;
  z-index: 1;
  width: 400px;
  top: 40px;
  left: 32px;
}

.module-homepage-map .ol-wrapper .ol-col.search .search-fields {
  padding: 0px;
}

.module-homepage-map .ol-wrapper .ol-col.search .search-fields h3 {
  color: white;
  font-size: 24px;
}

.module-homepage-map .ol-wrapper .ol-col.search .search-fields form label {
  font-size: 16px !important;
  color: white !important;
  margin-bottom: -3px !important;
}

.module-homepage-map .ol-wrapper .ol-col.search .search-fields .ol-search-input {
  position: relative;
}

.module-homepage-map .ol-wrapper .ol-col.search .search-fields form button {
  position: absolute;
  padding: 8px;
  top: 10px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.module-homepage-map .ol-wrapper .ol-col.search .search-fields .orange-cta {
  margin-top: 22px;
  display: block;
  text-align: center;
}

.module-homepage-map .ol-wrapper .ol-col.search .locations-title {
  color: white;
  padding-left: 16px;
  margin-bottom: 0px;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings {
  max-height: 0px;
  margin-top: 0px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 0 0 8px 8px;
  padding: 0;
  transition: all 0.5s ease-in-out;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
  justify-content: space-between;
  width: calc(85% - 108px);
  padding: 6px 0;
}

.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
  justify-content: space-between;
  width: calc(85% - 108px);
  padding: 6px 0;
}

.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .card-info p,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .card-info p {
  font-family: Manrope;
  font-weight: 500;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0%;
  color: #121212;
}

.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .card-info span.card-title,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .card-info span.card-title {
  font-family: DIN Next LT Pro;
  font-weight: 700;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #0d0d0d;
}
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .card-distance,
.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .card-distance {
  display: flex;
  align-items: center;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings.active {
  max-height: 450px;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .studio-cards {
  display: flex;
  flex-direction: row;
  gap: 12px;
  transition: all 0.3s ease;
}

.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .studio-cards .card-img img,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .studio-cards .card-img img {
  width: 96px;
  height: 100%;
  max-width: 96px;
  display: block;
  object-fit: contain;
}

.module-homepage-map input#pac-input {
  padding-right: 40px;
  width: 33%;
  border-radius: 8px;
  flex-direction: column;

}

.module-homepage-map #pac-input::placeholder,
.module-homepage-map #pac-input::-webkit-input-placeholder {

  color: #1E1D1E;
  font-family: Manrope;
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0%;

}

.module-homepage-map p.studiosResults,
.module-homepage-map p.singleResultMessage,
.module-homepage-map p.potentialResultMessage {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 0;
  padding: 0 16px;
  color: #0d0d0d;
  background: white;
  border-radius: 8px 8px 0 0;
  position: relative;
}

.module-homepage-map p.potentialResultMessage:before,
.module-homepage-map p.singleResultMessage:before,
.module-homepage-map p.studiosResults:before {
  content: '';
  position: absolute;
  background: white;
  top: -5px;
  height: 10px;
  width: 100%;
  left: 0;
  z-index: -1;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location--hidden {
  display: none !important;
}

/* customize the appearance of the scrollbar in WebKit browsers */
.module-homepage-map .ol-wrapper .ol-col.search .location-listings::-webkit-scrollbar {
  width: 2px;
}


.module-homepage-map .ol-wrapper .ol-col.search .location-listings::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 12px 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
  border: none;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 12px;
  border-radius: 0;
  text-align: left;
  border-bottom: 1px solid #E9E8E8;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location .info-links a,
.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .location .info-links a,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location .potential-studio a.register {
  color: #390372;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  letter-spacing: 0;
  cursor: pointer;
}
.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .location .info-links a.register,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location .info-links a.register,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location .potential-studio a.register {
  color: #7e0aff;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location span,
.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .location span {
  color: #262626;
  font-size: 14px;
  line-height: 20px;
  font-family: TT Commons Pro, arial, sans-serif;
  font-weight: 500;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location span.distanceKM {
  color: #4a4a49;
  font-size: 12px;
  line-height: 22px;
  font-weight: 500;
}

{#
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location {
  display:none !important;
}
#}

.module-homepage-map input#pac-input:focus {
  outline: #7E0AFF solid 2px
}

/* Example targeting a generic autocomplete item class */
.module-homepage-map .pac-container {
  border-radius: 4px
}

.module-homepage-map .pac-item:hover {
  background-color: #DBD2FF;
  /* Desired hover background color */
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location.active {

  /* background-color: rgb(24, 24, 24); */
  display: block;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location.active .studio-cards,
.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location:hover .studio-cards {
  border-radius: 8px;
  /* background-color: rgb(24, 24, 24); */
  background-color: #DBD2FF;
}

.module-homepage-map .ol-wrapper .ol-col.search .location-listings .location.mb-active {
  display: block !important;
}

.module-homepage-map .potential-studio {
  text-align: center;
  padding: 12px 16px;
  margin: 0 auto;
}

.module-homepage-map .potential-studio h6 {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: #000;
}

.module-homepage-map .potential-studio p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
  padding-top: 12px;
  margin-bottom: 0;
  color: #000;
}

.module-homepage-map .ol-wrapper .ol-col.map {
  width: 100%;
}

.module-homepage-map .mb-only {
  display: none;
}


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

  .module-homepage-map .ol-wrapper {
    flex-direction: column;
  }

  .module-homepage-map .ol-wrapper .ol-col.search {
    padding: 16px 0;
    width: 100%;
    left: 0;
    position: relative;
    top: 0;
  }

  .module-homepage-map #map {
    height: 460px;
    width: 100%;
  }

  .module-homepage-map .ol-wrapper .ol-col.map {
    width: 100%;
  }

  .module-homepage-map .ol-wrapper .ol-col.search .location-listings .location {
    width: calc(100% - 24px);
  }

  .module-homepage-map .ol-wrapper .ol-col.search .location-listings {
    max-height: 230px;
    margin-top: 10px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    position: absolute;
    bottom: -446px;
    /*460px map height - 16px of padding*/
    max-height: 123px;
    overflow-x: hidden;
  }
  
  
  .module-homepage-map .closest-location-listings.active {
    max-height: 200px;
    overflow: hidden;
    visibility: visible;
    position: absolute;
    bottom: -445px;
    width: calc(100% - 32px);
    transform: translateX(16px);
    z-index: 1;
  }

  .module-homepage-map .ol-wrapper .ol-col.search .location-listings.mb-only {
    display: none;
  }

  .module-homepage-map .ol-wrapper .ol-col.search .location-listings.mb-only.active {
    display: block;
    max-height: 123px;
    overflow: hidden;
    width: calc(100% - 32px);
    transform: translateX(16px);
  }

  .module-homepage-map .mb-only p.studiosResults,
  .module-homepage-map .mb-only p.singleResultMessage {
    display: none !important;
  }

  .module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .card-info,
  .module-homepage-map .ol-wrapper .ol-col.search .location-listings .card-info {
    width: calc(95% - 145px);
  }
  
}
  
.module-homepage-map .ol-wrapper .ol-col.map #map {
  width: 100%;
  height: 700px;
  border-radius: 8px;
}

/**/
.module-homepage-map .closest-location-listings .accordion-item button.button-no-style.button-title {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.module-homepage-map .closest-location-listings .accordion-item .accordion-title {
  padding: 0 16px;
  margin-top: 20px;
  border-radius: 10px 10px 0 0;
  background-color: #390372;
  border-bottom: 0;
  color: white;
}

.module-homepage-map .closest-location-listings .accordion-item h6 {
  font-size: 14px;
  font-family: Manrope;
  font-weight: 700;
}

.module-homepage-map .closest-location-listings {
  overflow: hidden;
  visibility: hidden;
  max-height: 0;
  transition: height 0.5s ease-in-out;
}
.module-homepage-map .closest-location-listings svg.icon {
  transition: all 0.5s ease-in-out;
}

.module-homepage-map .closest-location-listings .is-open svg.icon {
  transform: scale(1, -1);
}

.module-homepage-map .closest-location-listings.active {
  overflow: hidden;
  visibility: visible;
  max-height: 200px;
}

.module-homepage-map .closest-location-listings .accordion-item {
  border-bottom: 0;
  background: white;
  max-height: 200px;
  border-radius: 10px;
}

.module-homepage-map .closest-location-listings .accordion-item.is-open .accordion-title {
  border-radius: 10px;
}

.module-homepage-map .ol-wrapper .ol-col.search .closest-location-listings .studio-cards {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 16px;
}

/**/

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

  .module-homepage-map .ol-wrapper .ol-col.map #map {
    height: 460px;
    width: 100%;
  }
}

/**/
.pac-container {
  color: #151515 !important;
  font-family: 'Manrope' !important;
}

.pac-item:hover {
  background-color: #DBD2FF!important;
}

.pac-item-query {
  color: #151515 !important;
}