:root {
  --property-page-desc-bg: #ffffff;
  --property-page-desc-text: #000000;
  --property-page-amen-bg: #f2f4f8;
  --property-page-amen-text: #000000;
}

#property-glider-cont {
  margin-top: -3px;
  background-color: #212121;
}

#property-glider {
  height: 100%;
}

#property-glider img {
  min-height: 350px;
  max-height: 60vh;
  max-width: 100%;
}

.full-screen-button {
  position: absolute;
  bottom: 5px;
  right: 2em;
  background-color: #fafafa;
  background-image: url(/assets/full_screen.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px;
  padding: 16px;
}

#room-info-cont {
  margin-top: 1%;
}

.room-label {
  font-size: 1.4em;
  font-weight: bold;
}

.room-icon {
  width: 24px;
  vertical-align: sub;
}

.spacer {
  display: inline-block;
  min-width: 25px;
}

#property-desc {
  white-space: pre-wrap;
  color: var(--property-page-desc-text);
}

#property-desc-cont {
  background: var(--property-page-desc-bg);
}

#property-desc-inner, #property-amen-cont {
  padding: 15px;
}

#property-amen-cont {
  background: var(--property-page-amen-bg)
}

#amen-list-label {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--property-page-amen-text);
}

#amen-list {
  column-count: auto;
  column-width: 16rem;
  color: var(--property-page-amen-text);
}

#photos-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#photos-modal-content {
  position: relative;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 4px 2px #5b5b5b;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 5px 0 0;
  margin-left: 5px;
  margin-right: 5px;
}

#photm-modal-close {
  position: absolute;
  top: 7px;
  right: 5px;
  z-index: 1;
  background-color: #666666;
  color: white;
  border: 1px solid lightgray;
}

#photm-modal-close:hover {
  background-color: #222222;
  color: white;
}

#photm-main img {
  max-width: 100%;
  max-height: calc(100vh - 60px);
}

/* The Close Button */
.close {
  color: #595959;
  float: right;
  font-size: 24px;
  font-weight: bold;
  padding-right: 8px;
  padding-left: 8px;
  margin-right: 5px;
  margin-top: 5px;
  background-color: #d2d2d2;
  border-radius: 16px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  background-color: gray;
}

@media screen and (max-width: 825px), screen and (max-height: 825px) {
  #photos-modal {
    padding-top: 25px;
  }

  .glide__arrow, .glide__slide {
    transform: scale(1.15);
  }

    .close {
        transform: scale(1.15);
    }
  
}