.HotelDetailsHotelImageContainer
{
    width: 100%;
    height: fit-content;
    background-color: rgb(35, 35, 35);
    position: relative;
}
.RoomPanelImageBackgroundDisplay
{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    object-position: center !important;
    object-fit: cover !important;
    -webkit-filter: brightness(20%);
}
.HotelDetailsImageWrapper
{
    width: fit-content;
    margin: 0 auto;
    display: flex;
}
.HotelDetailsHotelImageMain
{
    height: 100%;
    overflow: hidden;
    position: relative;
}
.SeeAllPhotosButton
{
    position: absolute;
}
.HotelDetailsHotelImageSub
{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.HotelDetailsHotelImageSubMini2
{
    flex-grow: 1;
    overflow: hidden;
    -webkit-filter: brightness(50%);
}
.HotelDetailsHotelImageMain:has(.loading_grey)
{
    -webkit-filter: brightness(50%);
}
.HotelDetailsHotelImageSubMini2:hover, .HotelDetailsHotelImageSubMini2:active
{
    cursor: pointer;
    scale: 98%;
    -webkit-filter: brightness(100%);
    -webkit-transition: -webkit-filter 0.3s ease, scale 0.3s ease;
    -moz-transition: -webkit-filter 0.3s ease, scale 0.3s ease;
    -o-transition: -webkit-filter 0.3s ease, scale 0.3s ease;
    -ms-transition: -webkit-filter 0.3s ease, scale 0.3s ease;
    transition: -webkit-filter 0.3s ease, scale 0.3s ease;
}
.HotelDetailsHotelImageMain:has(.loading_grey), .HotelDetailsHotelImageSubMini2:has(.loading_grey), .HotelImageSwiperPanel .loading_grey
{
    pointer-events: none;
    border-radius: 0 !important;
    -webkit-filter: brightness(50%);
}
.AllImageSwiperContainer:has(.loading_grey)
{
    pointer-events: none;
}

@media screen and (max-width: 560px)
{
    .HotelDetailsHotelImageContainer
    {
        padding-bottom: 3vw;
        padding-top: 1vw;
    }
    .HotelDetailsImageWrapper
    {
        height: 45vw;
    }
    .HotelDetailsHotelImageMain
    {
        width: 85vw;
    }
    .SeeAllPhotosButton
    {
        right: 3vw;
        bottom: 3vw;
        box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.2) !important;
    }
    .HotelDetailsHotelImageSub
    {
        display: none;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .HotelDetailsHotelImageContainer
    {
        padding-bottom: 2.5vw;
    }
    .HotelDetailsImageWrapper
    {
        height: 23vw;
    }
    .HotelDetailsHotelImageMain
    {
        width: 40vw;
    }
    .SeeAllPhotosButton
    {
        right: 1vw;
        bottom: 1vw;
        box-shadow: 0 0.5vw calc(5px + 0.5vw) rgba(0, 0, 0, 0.2) !important;
    }
    .HotelDetailsHotelImageSub
    {
        width: 20vw;
        margin-left: 1vw;
    }
    .HotelDetailsHotelImageSubMini2
    {
        border-radius: 0.5vw;
    }
    .HotelDetailsHotelImageSubMini2:last-child
    {
        margin-top: 1vw;
    }
    
}

@media screen  and (min-width: 1201px)
{
    .HotelDetailsHotelImageContainer
    {
        padding-bottom: 20px;
    }
    .HotelDetailsImageWrapper
    {
        height: 300px;
    }
    .HotelDetailsHotelImageMain
    {
        width: 550px;
    }
    .SeeAllPhotosButton
    {
        right: 20px;
        bottom: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
    }
    .HotelDetailsHotelImageSub
    {
        width: 275px;
        margin-left: 15px;
    }
    .HotelDetailsHotelImageSubMini2
    {
        border-radius: 5px;
    }
    .HotelDetailsHotelImageSubMini2:last-child
    {
        margin-top: 15px;
    }
}


/* ------------------------------- ALL IMAGE SWIPER ------------------------- */

.MainSwiperContainer
{
    height: fit-content;
    position: relative;
    display: flex;
    -webkit-mask-box-image: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.8), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255),  rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255),rgb(255, 255, 255),rgb(255, 255, 255),rgba(255, 255, 255, 0.8),transparent);
}
.MainImageSwiperWrapper
{
    padding: 0;
    margin: 0;
}

.AllImageSwiperContainer
{
    width: fit-content;
    height: fit-content;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.HotelImageSwiperPanel
{
    background-position: center !important;
    background-size: cover !important;
    position: relative;
    cursor: pointer;
}
.HotelImageSwiperPanel:not(.swiper-slide-active)
{
    -webkit-filter: brightness(40%);
}
.ImageSwiperButtonContainer
{
    width: fit-content;
    height: 100%;
    position: relative;
    display: flex;
    margin: auto 0;
}

.HotelDetailsPhotoPrevButton
{
    rotate: 180deg;
    position: relative;
    margin-top: auto 0;
    cursor: pointer;
}

.HotelDetailsPhotoPrevButton, .HotelDetailsPhotoNextButton
{
    position: relative;
    margin-top: auto 0;
    cursor: pointer;
    background: transparent;
    outline: 0 !important;
    border: 0 !important;
}

.HotelDetailsPhotoPrevButton img, .HotelDetailsPhotoNextButton img
{
    width: 60%;
    height: 60%;
    margin: auto;
    object-fit: contain !important;
    object-position: center !important;
}

@media screen and (max-width: 560px)
{
    .MainSwiperContainer
    {
        width: 50vw;
    }
    
    .AllImageSwiperContainer
    {
        margin-top: 2vw;
    }
    .HotelImageSwiperPanel
    {
        width: 15vw;
        height: 10vw;
        border: 0.2vw solid rgb(225, 225, 225);
        margin-left: 1vw;
        margin-right: 1vw;
    }
    .HotelDetailsPhotoPrevButton, .HotelDetailsPhotoNextButton
    {
        width: 8vw;
        height: 8vw;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .MainSwiperContainer
    {
        width: 60vw;
        max-width: 400px;
    }
    
    .AllImageSwiperContainer
    {
        margin-top: calc(8px + 1vw);
    }
    .HotelImageSwiperPanel
    {
        width: calc(80px + 1vw);
        height: calc(50px + 1vw);
        border: 0.4vw solid rgb(225, 225, 225);
        margin-left: calc(1px + 1vw);
        margin-right: calc(1px + 1vw);
    }
    .HotelDetailsPhotoPrevButton, .HotelDetailsPhotoNextButton
    {
        width: calc(25px + 1vw);
        height: calc(25px + 1vw);
    }
}


@media screen  and (min-width: 1201px)
{
    .MainSwiperContainer
    {
        width: 500px;
        max-width: 400px;
    }
    
    .AllImageSwiperContainer
    {
        margin-top: 15px;
    }
    .HotelImageSwiperPanel
    {
        width: 100px;
        height: 60px;
        border: 2px solid rgb(225, 225, 225);
        margin-left: 5px;
        margin-right: 5px;
    }
    .HotelDetailsPhotoPrevButton, .HotelDetailsPhotoNextButton
    {
        width: 30px;
        height: 30px;
    }
}


/* -------------------------- MAP ----------------------------- */

.HotelMapContainer
{
    width: 100%;
    position: relative;
    overflow: hidden;
}

.LocationMap
{
    width: 100%;
    height: 100%;
    position: relative;
    border:0;
}
.ExpandMapButton
{
    width: fit-content;
    height: fit-content;
    border: 0;
    background-color: #ED7C42;
    position: absolute;
    display: flex;
}
.ExpandButtonIcon, .ExpandMapButton p
{
    margin: auto 0;
}
.MapFullScreenBlocker
{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: flex;
}

.LocationMapFullScreen
{
    width: 85%;
    height: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #5c5c5c;
}

.ContainerWithIconAndText
{
    width: fit-content;
    height: fit-content;
    display: flex;
}
.ShareBookingMesButtonContainer
{
    background: linear-gradient(90deg, #50A9E1 0%, #7CBFE8 100%);
}
.ShareBookingMesButtonContainer > *:not(:last-child)
{
    margin: auto 0;
}

.ShareBookingMesButtonContainer button
{
    background-color: #FFFFFF;
}

@media screen and (max-width: 560px)
{
    .ExpandButtonIcon
    {
        width: 3vw;
        height: 3vw;
        margin-right: 0.5vw;
    }
    .ExpandMapButton
    {
        padding: 1.5vw 2vw;
        box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.2) !important;
        right: 3vw;
        top: 3vw;
    }
    .RoomTypeMap
    {
        height: 50vw;
        margin-top: 3vw;
        margin-bottom: 3vw;
    }
    .HotelMapContainer
    {
        height: 40vw;
        margin-top: 1vw;
        margin-bottom: 5vw;
    }
    .ContainerWithIconAndText
    {
        flex: 1;
        padding: 1.2vw 1.2vw;
        flex-direction: column;
    }
    .ShareBookingMesButtonContainer .BasicIconInsideOrangeContainer
    {
        width: 6vw;
        height: 6vw;
        margin-right: 0.5vw;
    }
    .ShareBookingMesButtonContainer .LabelGreyHeaderSmallerText
    {
        margin-right: 1vw !important;
    }
    .ShareBookingMesButtonContainer .ShareButtonBlue
    {
        width: 100%;
        margin: 0 auto;
        margin-top: 1.2vw;
    }
    .ShareBookingMesButtonContainer .ShareButtonBlue
    {
        margin-left: auto;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .ExpandButtonIcon
    {
        width: calc(12px + 0.5vw);
        height: calc(12px + 0.5vw);
        margin-right: 0.3vw;
    }
    .ExpandMapButton
    {
        box-shadow: 0 0.5vw calc(5px + 0.5vw) rgba(0, 0, 0, 0.2) !important;
        right: 15px;
        top: 15px;
    }
    .HotelMapContainer
    {
        height: calc(350px + 0.5vw);
        margin-top: calc(8px + 0.5vw);
        margin-bottom: calc(8px + 0.5vw);
    }
    .ContainerWithIconAndText
    {
        padding: calc(2px + 0.5vw) calc(2px + 0.5vw);
    }
    .ShareBookingMesButtonContainer .BasicIconInsideOrangeContainer
    {
        width: calc(25px + 0.5vw);
        height: calc(25px + 0.5vw);
        margin-right: 0.5vw;
    }
    .ShareBookingMesButtonContainer .LabelGreyHeaderSmallerText
    {
        margin-right: calc(10px + 0.5vw) !important;
    }
    .ShareBookingMesButtonContainer button
    {
        margin-top: auto;
        margin-bottom: auto;
    }
}

@media screen  and (min-width: 1201px)
{
    .ExpandButtonIcon
    {
        width: 17px;
        height: 17px;
        margin-right: 5px;
    }
    .ExpandMapButton
    {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
        right: 20px;
        top: 20px;
    }
    .HotelMapContainer
    {
        height: 350px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .ContainerWithIconAndText
    {
        padding: 8px 8px;
    }
    .ShareBookingMesButtonContainer .BasicIconInsideOrangeContainer
    {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .ShareBookingMesButtonContainer .LabelGreyHeaderSmallerText
    {
        margin-right: 15px !important;
    }
    .ShareBookingMesButtonContainer button
    {
        margin-top: auto;
        margin-bottom: auto;
    }
}



/* ============================================== PING EXPREZY BOOKING DETAILS ===================================== */

.PingExprezyBookingDetails
{
    background-color: #F2F4F7;
    margin-left: auto;
    margin-right: auto;
}
.PingExprezyBookingDetails .SectionContentWrapper
{
    width: 100% !important;
}
.PingExprezyHeaderButtonWrapper
{
    height: fit-content;
    display: flex;
    overflow: hidden;
}
.PingExprezyHeaderButtonWrapper .SectionHeaderTextIndex
{
    flex: 1;
    margin: 0 !important;
}
.PingExprezyBookingDetails .PingExprezyPanel
{
    flex-direction: row;
    background-color: #FFFFFF;
}
.PingExprezyBookingDetails .PingExprezyDescriptionContainer
{
    flex: 1;
    margin-top: 0;
    display: flex;
    flex-direction: column;
}
.PingExprezyBookingDetails .PingExprezyUserInfoWrapper
{
    order: 0;
    margin-top: 0;
}
.PingExprezyBookingDetails .PingExperienceDescriptionText
{
    order: 1;
}

@media screen and (max-width: 560px)
{
    .PingExprezyBookingDetails
    {
        width: 93% !important;
        padding-top: 2vw !important;
        padding-bottom: 2vw !important;
    }
    .RightSectionBookingDetails
    {
        max-width: 95% !important;
    }
    .PingExprezyHeaderButtonWrapper
    {
        margin: 0 2.5vw;
    }
    .PingExprezyHeaderButtonWrapper .SectionHeaderTextIndex
    {
        margin: 0 !important;
        margin-top: 2px !important;
        margin-right: 10px !important;
    }
    .PingExprezyBookingDetails .PingExprezyPanel
    {
        width: 50vw;
        min-width: 50vw;
        max-width: 50vw;
        flex-direction: column;
        margin-top: 1.5vw;
        margin-bottom: 1.5vw;
    }
    .PingExprezyBookingDetails .PingExprezyDescriptionContainer
    {
        margin-top: 2vw;
    }
    .PingExprezyUserNameLocationWrapper
    {
        margin-bottom: 1vw;
    }
    .PingExprezyUserNameLocationWrapper .InterRegularTextFont
    {
        margin-top: -0.2vw;
    }
}


@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .PingExprezyBookingDetails
    {
        width: 95% !important;
        padding-top: calc(10px + 0.5vw) !important;
        padding-bottom: calc(5px + 0.5vw) !important;
    }
    .PingExprezyHeaderButtonWrapper
    {
        margin: 0 calc(10px + 0.5vw);
    }
    .PingExprezyHeaderButtonWrapper .SectionHeaderTextIndex
    {
        margin: 0 !important;
        margin-top: 2px !important;
        margin-right: calc(5px + 0.5vw) !important;
    }
    .PingExprezyBookingDetails .PingExprezyPanel
    {
        width: calc(380px + 0.5vw);
        min-width: calc(380px + 0.5vw);
        max-width: calc(380px + 0.5vw);
        margin-top: calc(8px + 0.5vw);
    }
    .PingExprezyBookingDetails .PingExprezyImageContainer
    {
        width: calc(170px + 0.5vw);
    }
    .PingExprezyBookingDetails .PingExprezyDescriptionContainer
    {
        margin-left: calc(5px + 0.5vw);
    }
    .PingExprezyUserNameLocationWrapper
    {
        margin-bottom: 0.5vw;
    }
    .PingExprezyUserNameLocationWrapper .InterRegularTextFont
    {
        margin-top: -0.4vw;
    }
}


@media screen  and (min-width: 1201px)
{
    .PingExprezyBookingDetails
    {
        width: 85% !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .PingExprezyHeaderButtonWrapper
    {
        margin: 0 18px;
    }
    .PingExprezyHeaderButtonWrapper .SectionHeaderTextIndex
    {
        margin: 0 !important;
        margin-top: 2px !important;
        margin-right: 10px !important;
    }
    .PingExprezyBookingDetails .PingExprezyPanel
    {
        width: 400px;
        min-width: 400px;
        max-width: 400px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .PingExprezyBookingDetails .PingExprezyImageContainer
    {
        width: 190px;
    }
    .PingExprezyBookingDetails .PingExprezyDescriptionContainer
    {
        margin-left: 10px;
    }
    .PingExprezyUserNameLocationWrapper
    {
        margin-bottom: 5px;
    }
    .PingExprezyUserNameLocationWrapper .InterRegularTextFont
    {
        margin-top: -2px;
    }
}