/* ============================================================
                      GRID CONTAINERS
   ============================================================ */


.grid-container-1,
.grid-container-2,
.grid-container-room-search-bar,
.grid-container-3,
.grid-container-4,
.grid-container-5,
.grid-container-6,
.grid-container-7,
.grid-container-8 {
  display: grid !important;
  grid-template-columns: auto;
  height: auto;
  gap: 2rem;
  align-items: start;
}

.dispatch-options > .grid-container-6:empty {
  display: none !important;
}

/* Base layouts*/
.grid-container-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-container-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.upload-card .grid-container-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.grid-container-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-container-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-container-6 {
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
}

.grid-container-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-container-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-container-room-search-bar {
  grid-template-columns: 1fr 5fr;
}

.offer-body .grid-container-room-search-bar {
  grid-template-columns: 1.47fr 4fr;
}

  .grid-container-room-search-bar .grid-container-5 {
    grid-template-columns: repeat(3, 1fr);
  }

.textarea-grid-container-2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 1670px) {
  .grid-container-7 {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-container-8,
  .grid-container-6 {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-container-3:not(.popup-container):not(.orderer-row) {
    grid-template-columns: 1fr 1fr;
  }

  .offer-body .grid-container-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-container-room-search-bar {
    grid-template-columns: 1fr 4fr;
  }

    .grid-container-room-search-bar .grid-container-6 {
      grid-template-columns: repeat(6, 1fr);
    }

  .offer-body .grid-container-room-search-bar {
    grid-template-columns: 1.48fr 4fr;
  }

  .grid-container-room-search-bar .grid-container-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal-body .grid-container-5 {
    grid-template-columns: repeat(4, 1fr);
  }

  .card-body.offer-body .contact-fields {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-container-room-search-bar .grid-container-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1620px) {
  .offer-body .grid-container-room-search-bar {
    grid-template-columns: 1.65fr 3fr;
  }

  .offer-body .grid-container-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1550px) {
  .grid-container-8 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-container-7 {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-container-room-search-bar .grid-container-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1500px) {
    .grid-container-room-search-bar {
    grid-template-columns: 1fr 2fr;
  }

     .grid-container-room-search-bar .grid-container-5 {
      grid-template-columns: repeat(2, 1fr);
    }

  .modal-body .grid-container-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1400px) {
  .upload-card .grid-container-3 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1450px) {
  .grid-container-8 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-container-5,
  .grid-container-6,
  .grid-container-7 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-container-3:not(.popup-container):not(.orderer-row),
  .custom-grid-container-3 {
    grid-template-columns: 1fr 1fr;
  }

  .contact-creditcards .grid-container-4 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .card-body.offer-body .contact-fields {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1320px) {
  .grid-container-8 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container-4,
  .grid-container-5,
  .grid-container-6,
  .grid-container-7 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-container-room-search-bar {
    grid-template-columns: 1fr 3fr;
  }

  .grid-container-3:not(.popup-container):not(.orderer-row) {
    grid-template-columns: 1fr;
  }

  .grid-container-room-search-bar .grid-container-5 {
    grid-template-columns: 1fr;
  }

   .grid-container-room-search-bar {
    grid-template-columns: 1fr 1fr;
  }

  .grid-container-room-search-bar .grid-container-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1285px) {
  .address-form-header .margin-left-auto {
    margin-left: unset !important;
  }

  .card-body.offer-body .contact-fields {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1250px) {
  .offer-body .grid-container-room-search-bar {
    grid-template-columns: 1.13fr 1fr;
  }

  .offer-body .grid-container-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer-body .grid-container-room-search-bar .grid-container-3 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1235px) {
  .grid-container-3:not(.popup-container):not(.orderer-row) {
    grid-template-columns: 1fr;
  }

  .grid-container-room-search-bar {
    grid-template-columns: 1fr 2fr;
  }

    .grid-container-room-search-bar .grid-container-5 {
      grid-template-columns: 1fr 1fr;
    }

    .grid-container-room-search-bar .grid-container-5 {
      grid-template-columns: 1fr 1fr;
    }

    .grid-container-room-search-bar {
      grid-template-columns: 1fr 2fr;
    }

  .contact-creditcards .grid-container-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1150px) {
  .modal-body .grid-container-5 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1090px) {
  .grid-container-room-search-bar .grid-container-5 {
    grid-template-columns: 1fr;
  }

  .grid-container-room-search-bar {
    grid-template-columns: 1fr 1fr;
  }

  .grid-container-room-search-bar {
    grid-template-columns: 1fr 1fr;
  }

   .grid-container-room-search-bar .grid-container-5 {
      grid-template-columns: 1fr;
    }

  .grid-container-4,
  .grid-container-7,
  .grid-container-6,
  .grid-container-5 {
    grid-template-columns: 1fr 1fr 1fr;
  }

 .grid-container-room-search-bar {
    grid-template-columns: 1fr;
  }

  .grid-container-room-search-bar .grid-container-6 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 1060px) {
  .res-details .blazored-typeahead .blazored-typeahead__results {
    min-width: 55vw !important;
  }
}

@media (max-width: 968px) {
  .res-details .blazored-typeahead .blazored-typeahead__results {
    min-width: 50vw !important;
  }

  .card-body.offer-body .contact-fields,
  .grid-container-6,
  .grid-container-7,
  .grid-container-8,
  .grid-container-4,
  .modal-body .grid-container-5,
  .grid-container-5,
  .grid-container-3,
  .custom-grid-container-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-container-2,
  .contact-creditcards .grid-container-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 955px) {
  .invoices-container {
    padding-right: .5rem;
  }
}

@media (max-width: 860px) {
  .card-body.offer-body .contact-fields,
  .offer-body .grid-container-room-search-bar {
    grid-template-columns: 1fr;
  }

  .offer-body .grid-container-4 {
    grid-template-columns: 1fr;
  }

  .grid-container-6,
  .grid-container-7,
  .grid-container-8,
  .grid-container-4,
  .modal-body .grid-container-5,
  .grid-container-5,
  .grid-container-2,
  .grid-container-room-search-bar,
  .grid-container-3:not(.popup-container) {
    grid-template-columns: 1fr;
  }

  .grid-container-room-search-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .grid-container-3,
  .grid-container-3.popup-container {
    grid-template-columns: 1fr;
  }

  .price-list-modal .grid-container-3 {
    grid-template-columns: 1fr !important;
  }
}

