.office-map__body {
  margin: 1.75rem 0 .5rem 0
}

@media (max-width:991px) {
  .office-map__body-container {
    padding: 0 !important
  }

  .office-map__body-row {
    margin: auto !important
  }
}

.office-map__region-selection .col-12 {
  padding-left: 12px;
}

.office-map__body .col-12 {
  padding-right: 12px;
  padding-left: 12px;
}

@media (max-width:991px) {
  .office-map__region-selection.desktop {
    display: none
  }
}

.office-map__region-selection.mobile {
  display: none;
  margin: .75rem 0 1.875rem 0;
  padding: 0 1.875rem
}

@media (max-width:991px) {
  .office-map__region-selection.mobile {
    display: block
  }
}

.office-map__region-selection.mobile p {
  color: #003a70;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2.25rem;
  padding: 0;
  margin: 0 0 .3125rem 0
}

.office-map__region-selection.mobile button.dropdown-toggle {
  color: #003a70;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  text-align: left;
  padding: .5625rem 0 .5625rem .8125rem;
  border-radius: .3125rem;
  border: .5px solid #83786f;
  background: #fff
}

.office-map__region-selection.mobile button.dropdown-toggle::after {
  content: url(/wp-content/themes/beigene20/assets/build/images/dropdown-toggle-arrow.svg);
  position: absolute;
  right: .4375rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: none;
  margin: 0;
  display: block
}

.office-map__region-selection.mobile ul.dropdown-menu {
  width: 100%;
  border-radius: .625rem;
  border: .125rem solid #83786f;
  background: #fff
}

.office-map__region-selection.mobile ul.dropdown-menu a.dropdown-item {
  color: #000
}

.office-map__region-selection.mobile ul.dropdown-menu a.dropdown-item:hover {
  background: rgba(0, 103, 127, .15);
  color: #00677f;
  text-decoration: none
}

.office-map__region-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: .6875rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.office-map__region-buttons .region-selector-cta.active {
  color: #fff !important;
  background-color: #003a70 !important
}

.office-map__region-buttons .btn-primary::after {
  display: none;
}

.office-map__region-button-group p {
  color: #003a70;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2.25rem;
  padding: 0;
  margin: 20px 0 .5625rem 0;
}

@media (max-width:991px) {
  .office-map__office-list-column {
    padding: 0
  }
}

.office-map__office-card {
  padding: .625rem 1.1875rem;
  background: #fff;
  border-radius: .625rem;
  border: 1px solid #83786f;
  text-align: left
}

.office-map__office-card-header {
  font-size: 1.375rem;
  line-height: 1.6875rem;
  font-weight: 700;
  color: #003a70;
  padding: 0;
  margin: 0 0 .25rem 0;
  -webkit-transition: color .2s;
  transition: color .2s
}

.office-map__office-card-content p {
  padding: 0;
  margin: 0;
  color: #003a70;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  font-family: 'Poppins', sans-serif;
}

.office-map__office-card.selected {
  border: 3px solid #003a70
}

.office-map__office-card:hover .office-map__office-card-header {
  color: #3876b0
}

.office-map__office-list {
  padding: 1.25rem .9375rem;
  background: #f0efec;
  border-radius: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .5625rem;
  height: 100%;
  max-height: 53.5625rem;
  overflow-y: auto
}

@media (max-width:991px) {
  .office-map__office-list {
    height: auto;
    max-height: unset;
    padding: .5625rem 1.875rem
  }
}

.office-map__office-list .office-map__office-card {
  display: none
}

@media (max-width:991px) {
  .office-map__map-column {
    position: sticky;
    top: 3.5rem;
    padding: 0
  }
}

.office-map__map #office-mapbox-container {
  height: 48.5625rem;
  width: 100%;
  border-radius: 1.25rem;
  overflow: hidden
}

@media (max-width:991px) {
  .office-map__map #office-mapbox-container {
    height: 16.875rem;
    border-radius: 0
  }
}

.office-map__map #office-mapbox-container .marker {
  border: none;
  cursor: pointer;
  height: 56px;
  width: 56px;
  background-image: url(/wp-content/themes/beigene20/assets/images/marker_red.png);
  background-position: center;
  background-repeat: no-repeat
}

.office-map__map #office-mapbox-container .mapboxgl-popup {
  padding-bottom: 50px
}

.office-map__map #office-mapbox-container .mapboxgl-popup-content {
  padding: .625rem;
  width: 11.25rem
}

.office-map__map #office-mapbox-container .mapboxgl-popup-content p {
  font-family: Poppins, sans-serif;
  color: #003a70;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  padding: 0
}

@media (max-width:991px) {
  .office-map__map #office-mapbox-container .mapboxgl-popup-content p {
    font-size: .875rem
  }
}

.office-map__map #office-mapbox-container .mapboxgl-popup-close-button {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem
}

.office-map__map #office-mapbox-container .mapboxgl-popup-close-button:active,
.office-map__map #office-mapbox-container .mapboxgl-popup-close-button:focus,
.office-map__map #office-mapbox-container .mapboxgl-popup-close-button:focus-visible {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0
}

.office-map__footer {
  padding: 0;
  margin-bottom: 50px;
}

.office-map__footer-content {
  margin-top: 20px;
}

@media (max-width:991px) {

  .office-map__footer .col-12,
  .office-map__footer .container {
    padding: 0 !important
  }

  .office-map__footer .row {
    margin: auto !important
  }

  .office-map__footer-content {
    padding: 0 1.875rem;
  }
}