.picture-map-wrapper {
    display: grid;
    grid-template-columns: 60% auto;
    column-gap: 30px;
    padding: 30px 0;
}

.hqbc {
    background: #232323;
}

.picture-map-wrapper .picture img {
    width: 100%;
}


.choose-room-section {
    display: grid;
    grid-template-columns: auto auto;
    padding: 30px 0;
}

.choose-room-section .choose-room-controls {
    display: flex;
    justify-content: flex-end;
}

.flatpickr-calendar {
    background-color: #363636;
    box-shadow: 0px 4px 8px rgb(8 8 8 / 16%);
    border-radius: 4px;
}

.flatpickr-weekdays {
    background: #2E2E2E;
    height: 39px;
    line-height: 39px;
}

span.flatpickr-weekday {
    color: rgba(255, 255, 255, 0.88);
    font-family: Hkgrotesk-700, sans-serif;
    font-style: normal;
    font-size: 18px;
    line-height: 39px;
    height: 39px;
}

.flatpickr-months .flatpickr-month {
    color: rgba(255, 255, 255, 0.8);
}

.flatpickr-months {
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.8);
    font-family: Hkgrotesk-800, sans-serif;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    min-height: 56px;
}

.flatpickr-current-month {
    font-size: 16px;
    line-height: 24px;
    padding-top: 15px;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #BC5AFF;
}

.flatpickr-day {
    color: #ffffff;
    max-width: 43px;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
    content: none;
}

.dayContainer {
    background: #1E1E1E;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    border-radius: 0;
    background: #BC5AFF;
    border-color: #BC5AFF;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background: #BC5AFF;
    border-color: #BC5AFF;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange, .flatpickr-day.endRange.endRange {
    border-radius: 0;
}

.flatpickr-day.inRange {
    background: #383838;
    border-color: #383838;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.flatpickr-day.inRange {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.flatpickr-day {
    background: #232323;
    border-radius: 0;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: #383838;
    background: #232323;
}

.choose-room-section .choose-room {
    font-family: Poppins-600, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.88);
    margin: auto 0;
}

.choose-room-section .choose-room-controls .period-wrapper, .choose-room-section .choose-room-controls .guests-wrapper {
    position: relative;
}

.choose-room-section .choose-room-controls .period-wrapper .calendar-icon {
    position: absolute;
    left: 28px;
    top: 18px;
    color: rgba(255, 255, 255, 0.32);
}

.choose-room-section .choose-room-controls .period, .choose-room-section .choose-room-controls .guests {
    font-family: Hkgrotesk-500, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.88);

    background: #1E1E1E;
    border: 2px solid #383838;
    box-sizing: border-box;
    border-radius: 4px;
    height: 56px;
    margin: 0 8px;
    padding: 16px 26px;

    cursor: pointer;
}

.choose-room-section .choose-room-controls .period {
    padding-left: 50px;
}

.choose-room-section .choose-room-controls .guests .guests-icon {
    color: rgba(255, 255, 255, 0.32);
    margin-right: 10px;
    font-size: 20px;
}

.choose-room-section .choose-room-controls .guests .dot-icon {
    font-size: 5px;
    line-height: 24px;
    vertical-align: middle;
    margin: 0 10px;
}

.choose-room-section .choose-room-controls .guests-wrapper .guests-popup {
    display: none;
    position: absolute;
    top: 61px;
    left: 16px;
    z-index: 2;

    cursor: auto;
    border-radius: 4px;

    background: #363636;
    box-shadow: 0px 4px 8px rgba(8, 8, 8, 0.16);

    padding: 24px;
    min-width: 450px;
}

.choose-room-section .choose-room-controls .guests-wrapper .guests-popup.collapsed {
    display: block;
}

.choose-room-section .choose-room-controls .guests-wrapper .guests-popup .selection-wrapper {
    display: grid;
    grid-template-columns: 60% 40%;
    margin-bottom: 15px;
}

.choose-room-section .choose-room-controls .guests-wrapper .guests-popup p {
    font-family: Hkgrotesk-400, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.8);

    margin: auto 0;
}

.choose-room-section .choose-room-controls .guests-wrapper .guests-popup p .muted {
    color: rgba(255, 255, 255, 0.5);
}

.choose-room-section .choose-room-controls .guests-wrapper .guests-popup select {
    background: #1E1E1E;
    border: 2px solid #363636;
    box-sizing: border-box;
    border-radius: 4px;
}

.choose-room-section .search-button {
    width: 149px;
    height: 56px;

    background: #2E2E2E;
    border-radius: 4px;
    font-family: Hkgrotesk-800, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.8);

    padding: 16px 24px;
    margin: 0 8px;
    cursor: pointer;
}

.rooms-listing {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

.room-card {
    margin: 20px;
}

.room-card .image-wrapper img {
    width: 100%;
}

.room-card .card-body {
    background: #232323;
}

.room-card .card-body .hotel-title {
    font-family: Poppins-700, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 32px;
    color: #BC5AFF;
    height: 50px;
}

.room-card .card-body .hotel-details {
    font-family: Hkgrotesk-400, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.88);
}

.room-card .card-body .price {
    text-align: right;
    line-height: 11px;
}


.room-card .card-body .price .old-price {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 40px;
    text-decoration-line: line-through;
}

.room-card .card-body .price .new-price {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 40px;
}

.room-card .price-description {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 5px;
}

.room-card .card-body .price-info {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 5px;
}

.room-card .card-body .free-cancelation {
    font-family: Hkgrotesk-700, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    color: #7BCA79;
}

.room-card .card-body .info-text {
    font-family: Hkgrotesk-400, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.64);
}

.room-card .card-body .per-night-price {
    text-align: right;
}

.room-card .card-body .per-night-text {
    font-family: Hkgrotesk-500, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 24px;
    text-align: right;
    color: rgba(255, 255, 255, 0.88);
}

.room-card .card-body .per-night-price .total-price {
    font-family: Hkgrotesk-700, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: rgba(255, 255, 255, 0.88);
}

.room-card .card-footer {
    display: grid;
    grid-template-columns: auto auto;
    background: #363636;
}

.room-card .card-footer .reserve-now {
    font-family: Hkgrotesk-800, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.room-card .card-footer .reserve-arrow {
    text-align: right;
}

.overview, .amenities, .policies, .wlocation {
    display: grid;
    grid-template-columns: 40% auto;
}

.overview .title-section, .amenities .title-section, .policies .title-section, .wlocation .title-section {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 60px;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.96);
}

.overview .text-section .title, .amenities .text-section .title, .policies .text-section .title, .wlocation .text-section .title {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.8);
}

/*.amenities .text-section {
    display: flex;
}

.amenities .text-section .amenities-list {
    margin: auto 10px;
}

.amenities .amenity-icon {
    font-size: 30px;
}
 */
@media only screen and (max-width: 1199px) {
    .choose-room-section .choose-room-controls {
        display: block;
    }

    .choose-room-section .choose-room-controls .period-wrapper, .choose-room-section .choose-room-controls .guests, .choose-room-section .search-button {
        width: fit-content;
        margin-left: auto;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 1024px) {
    .room-card {
        margin: 10px;
    }

    .rooms-listing {
        display: grid;
        grid-template-columns: 50% 50%;
    }
}

@media only screen and (max-width: 768px) {
    .room-card .card-body .hotel-details {
        margin-bottom: 0;
    }

    .room-card .card-body .price {
        line-height: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .picture-map-wrapper {
        grid-template-columns: 100%;
    }


    .choose-room-section {
        display: block;
    }

    .choose-room-section .choose-room-controls .period-wrapper, .choose-room-section .choose-room-controls .guests, .choose-room-section .search-button {
        width: 100%;
    }

    .choose-room-section .choose-room-controls .period {
        margin: 0;
        width: 100%;
    }

    .choose-room-section .search-button {
        text-align: center;
    }

    .overview, .amenities, .policies, .wlocation {
        display: block;
        margin-bottom: 20px;
    }

    .overview .title-section, .amenities .title-section, .policies .title-section, .wlocation .title-section {
        font-size: 20px;
        line-height: 120%;
        margin-bottom: 10px;
    }

    .overview .text-section .title, .amenities .text-section .title, .policies .text-section .title, .wlocation .text-section .title {
        font-size: 16px;
        line-height: 120%;
    }
}

@media only screen and (max-width: 544px) {
    .choose-room-section .choose-room-controls .guests-wrapper .guests-popup {
        left: 0;
        min-width: 100%;
        padding: 12px;
    }

    .choose-room-section .choose-room-controls .guests .dot-icon {
        margin: 0 3px;
    }

    .choose-room-section .choose-room-controls .guests .guests-icon {
        margin-right: 0;
    }

    .choose-room-section .choose-room-controls .period, .choose-room-section .choose-room-controls .guests {
        padding: 16px;
        height: auto;
    }

    .choose-room-section .choose-room-controls .period {
        padding-left: 50px;
    }

    .choose-room-section .choose-room-controls .period-wrapper .calendar-icon {
        top: 24px;
    }

    .choose-room-section .choose-room {
        text-align: center;
    }

    .rooms-listing {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        display: grid;
        grid-template-columns: 100%;
    }

    .rooms-listing .room-card {
        width: 100%;
        min-width: 250px;
        white-space: initial;
        margin: 5px;
    }

}

.room-info {
    display: grid;
    grid-template-columns: 50% auto;
    column-gap: 80px;
}

.room-info .gallery-section .main-image {
    width: 100%;
}

.room-info .info-section .tags-section {
    display: flex;
    flex-wrap: wrap;
}

.room-info .info-section .tags-section .tag {
    font-family: Hkgrotesk-800, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.64);

    margin: 4px 8px 4px 0;
    padding: 8px 16px;
    background: #383838;
    border-radius: 4px;
}

.room-info .info-section .title {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.8);

    margin-top: 30px;
}

.room-info .info-section ul {
    list-style-type: '\2713';
    padding-inline-start: 15px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.room-info .info-section ul li {
    font-family: Hkgrotesk-500, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.64);

    padding-left: 10px;
}

.roomdetails {
    display: none;
}

.roomback {
    display: flex;
    align-items: center;
    background-color: #232323;

    margin-bottom: 30px;
}

.roomback .btitle {
    padding-left: 50px;
}


.carouselr-cell {
    width: 100%; /* full width */
    height: 370px;
    background: #222;
    /* center images in cells with flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carouselr.is-fullscreen .carouselr-cell {
    height: 100%;
}

.carouselr-cell img {
    display: block;
    max-height: 100%;
}

.bphd_wrapper {
    margin-right: 20px;
}

.backbtn, .room-card .image-wrapper, .room-card .phtitle, .reserve-button {
    cursor: pointer;
}

.extr-rate {
    font-size: 11px;
    line-height: 11px;
}

@media only screen and (max-width: 768px) {
    .room-info {
        display: block;
    }

    .room-info .info-section {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 544px) {
    .room-info .info-section .tags-section .tag {
        font-size: 12px;
        line-height: 120%;
        padding: 4px 12px;
    }

    .room-info .info-section .title {
        font-size: 14px;
        line-height: 120%;
        margin-top: 15px;
    }

    .room-info .info-section p {
        font-size: 12px;
        line-height: 120%;
    }

    .room-info .info-section ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }

    .room-info .info-section ul li {
        font-size: 12px;
        line-height: 120%;
    }

    .carouselr-cell {
        height: 270px;
    }

    .bphd_wrapper {
        margin-right: 0px;
    }

}