.left-side {
    padding: 5rem 8rem;
}

.app-container {
    position:relative;
}
.map {
  padding:0;
  height:32dvh;
}
#map-image {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
@media (min-width: 992px) {
    .map {
        height: 100dvh;
    }
}
.address-edit {
    display: flex;
    align-items: center;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}
.panel__header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-black);
    padding-bottom: 1.4rem;
}
.panel {
  position:absolute;
  top:30dvh;
  background-color:var(--color-grey);
  padding:1.3rem 1.3rem 4rem;
  height:70dvh;
  overflow-y:auto;
  border-radius:.5rem .5rem 0 0;
}
.panel__bottom-bar {
  display:flex;
  position:fixed;
  bottom:0;
  width:100%;
  background-color:#fff;
  justify-content:center;
  padding:2rem 0;
  left:0
}
@media (min-width: 992px) and (min-height: 840px) {
  .panel__bottom-bar {
    display:none
  }
}
@media (min-width: 992px) and (max-height: 840px) {
  .panel__bottom-bar {
    width:50%;
    z-index:999
  }
}
@media (min-width: 992px) {
    .panel {
        position:static;
        padding:4rem 6rem;
        height:100dvh
    }
    .flex-lg-row {
        flex-direction: row !important;
    }
    .order-lg-2 {
        order: 2 !important;
    }
    .col-lg-6 {
        flex: 0 0 auto;

    }
}
@media (min-width: 1200px) {
  .panel {
    padding:5rem 8rem;
  }
}
.panel     .modal-backdrop,
.panel     .modal {
  width:100dvw
}
@media (min-width: 992px) {
  .panel     .modal-backdrop,
  .panel     .modal {
    width:50dvw
  }
}
@media (min-width: 3200px) {
  .panel     .modal-backdrop,
  .panel     .modal {
    width:33.333dvw
  }
}
information-panel {
  height:100%
}