@import "font-awesome.min-2.css";
@import "owl.carousel.min.css";

/* revamp common */
@import "root-2.css";
@import "reset-2.css";
@import "common-element.css";
@import "nav-tab.css";
@import "revamp-modal.css";
@import "button-map-switcher.css";
@import "share-and-favorite-button.css";

#mainContent .wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-room-page);
  padding: 0px 20px;
}

.wrap.detail-roomid > .wrapper {
  display: flex;
  min-width: 100%;
  margin: 0rem -1rem;
}
.wrap.detail-roomid > .wrapper .gallery-content {
  width: 55%;
  flex: 0 0 55%;
  position: sticky;
  top: 80px;
  align-self: start;
}
.wrap.detail-roomid > .wrapper > div {
  padding: 0rem 1rem;
}
.wrap.detail-roomid > .wrapper .room-detail-content {
  width: 45%;
  flex: 1 1 45%;
  padding-top: 93px;
  padding-left: 45px;
}
.content-body_tab_navs {
  font-size: var(--font-size-16);
}
@media screen and (max-width: 860px) {
  .nav-utils-container {
    order: 2;
  }
  .wrap.detail-roomid > .wrapper {
    display: block;
    margin: 0 auto;
  }
  .wrap.detail-roomid > .wrapper .room-detail-content {
    width: 100% !important;
    padding-left: 0px;
    padding-top: 0;
    padding-right: 0;
  }
  #recommendProperties .section-footer {
    justify-content: start;
  }
  body {
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 1000px) {
  .wrap.detail-roomid > .wrapper .gallery-content {
    width: 35%;
    flex: 0 0 35%;
  }
  .wrap.detail-roomid > .wrapper .room-detail-content {
    width: 65%;
    flex: 0 0 65%;
  }
  .building-gallery .gallery-image {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .nav-utils {
    flex-wrap: nowrap;
    overflow-x: scroll;
  }
  .nav-utils > * {
    width: auto;
    flex: 0 0 auto;
  }
  .nav-utils .map-switcher .map-switcher__btn {
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
    display: inline-flex;
  }
}