*{
    margin: 0;
    padding: 0;
}

body
{
}
body:has(.BlockerOverflowDisable), body:has(.BasicBlackBlocker), body:has(.AlmostThereBlockerContainer)
{
    overflow: hidden;
}
p
{
    width: fit-content;
    height: fit-content;
}

button:focus {outline:0;}
html
{
    scroll-behavior: smooth;
}

.basic{
    width: 100%;
    height: auto;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
div > div:has(> .ImageFullCover)
{
    position: relative;
}

.MainBackground
{
    width: 100%;
    height: 100%;
    background: url(../Assets/BackgroundHorizontal.jpg);
    background-size: 100% 100%;
    background-position: center;
    padding-bottom: 100vh;
    position: fixed;
    display: block;
    z-index: -2;
}

.Selectable:hover, .Selectable:active, .SpecialHovSelectable:has(.TargetSpecialHovSelect:hover), .SpecialHovSelectable:has(.TargetSpecialHovSelect:active)
{
    -webkit-filter: brightness(90%);
    scale: 98%;
    cursor: pointer;
    -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;
}
.Selectable2:hover, .Selectable2:active, .ContainerHoverable2:hover .ContentHovTarget2, .ContainerHoverable2:active .ContentHovTarget2
{
    opacity: 70%;
    scale: 97%;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease, scale 0.3s ease;
    -moz-transition: opacity 0.3s ease, scale 0.3s ease;
    -o-transition: opacity 0.3s ease, scale 0.3s ease;
    -ms-transition: opacity 0.3s ease, scale 0.3s ease;
    transition: opacity 0.3s ease, scale 0.3s ease;
}
.Selectable3:hover, .Selectable:active
{
    -webkit-filter: brightness(90%);
    cursor: pointer;
    -webkit-transition: -webkit-filter 0.3s ease;
    -moz-transition: -webkit-filter 0.3s ease;
    -o-transition: -webkit-filter 0.3s ease;
    -ms-transition: -webkit-filter 0.3s ease;
    transition: -webkit-filter 0.3s ease;
}
.SelectableOnlyContentAnim:hover .WhichTargetAnim, .SelectableOnlyContentAnim:active .WhichTargetAnim
{
    -webkit-filter: brightness(90%);
    scale: 98%;
    -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;
}
.SelectableOnlyContentAnim:hover, .SelectableOnlyContentAnim:active
{
    -webkit-filter: brightness(90%);
    cursor: pointer;
    -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;
}
.ButtonUnselectableOpacity
{
    pointer-events: none !important;
    opacity: 30% !important;
}
a, a:visited
{
    color:inherit;
    text-decoration:none;
    /* text-decoration: none;
    decoration: none;
    color: inherit; */
}
.Unselectable
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.HyperlinkUnderlineText:hover, .HyperlinkUnderlineText:active, a:hover .HyperlinkUnderlineText, a:active .HyperlinkUnderlineText
{
    text-decoration: underline;
    cursor: pointer;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.HideScrollBar::-webkit-scrollbar, .FlexFullDisplayPanel::-webkit-scrollbar
{
    display: none;
}

a:visited
{
    color: inherit;
    text-decoration:inherit !important;
}

/* ------------------------------- HIDE AND SHOW ON MOBILE ----------------------- */

@media screen and (max-width: 700px)
{
    .HideOnMobile
    {
        display: none !important;
    }
}
@media screen and (min-width: 701px)
{
    .ShowOnMobile
    {
        display: none !important;
    }
}

@media screen and (max-width: 900px)
{
    .HideOnMobile2
    {
        display: none !important;
    }
}
@media screen and (min-width: 901px)
{
    .ShowOnMobile2
    {
        display: none !important;
    }
}
/* ------------------------------- BASIC ANIMATION ------------------------------ */

.SplashAnim
{
    animation: OpenRightSection 1s normal forwards ease-in-out;
}
@keyframes SplashAnimation
{
    from
    {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}

/* ------------------------------- HREF CONTAINER ------------------------------- */

.HREFInsideContainer
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ================================== LOADER GREY ================================ */

.loading_grey
{
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: loading_grey_animation;
    animation-timing-function: linear;
    background: linear-gradient(to right, #eee 8%, rgb(244, 244, 244) 18%, #eee 33%);
    background-size: 300% 100%; /* Increase width for smooth transition */
    position: relative;
    width: 100%;
}
.loading_grey2
{
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: loading_grey_animation;
    animation-timing-function: linear;
    background: linear-gradient(to right, #eee 8%, rgb(244, 244, 244) 18%, #eee 33%);
    background-size: 300% 100%; /* Increase width for smooth transition */
    position: relative;
}

@keyframes loading_grey_animation {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media screen and (max-width: 560px)
{
    .loading_grey
    {
        border-radius: 0.8vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .loading_grey
    {
        border-radius: 0.2vw;
    }
}

@media screen  and (min-width: 1201px)
{
    .loading_grey
    {
        border-radius: 5px;
    }
}


/* ================================== FONT ================================== */


@font-face {
    font-family: 'Inter Regular';
    src: url(../Assets/Font/Inter/Inter-Regular.ttf)format('truetype');
}
@font-face {
    font-family: 'Inter Italic';
    src: url(../Assets/Font/Inter/Inter-Italic.otf)format('truetype');
}
@font-face {
    font-family: 'Inter Medium';
    src: url(../Assets/Font/Inter/Inter-Medium.ttf)format('truetype');
}
@font-face {
    font-family: 'Inter Medium Italic';
    src: url(../Assets/Font/Inter/Inter_18pt-MediumItalic.ttf)format('truetype');
}
@font-face {
    font-family: 'Inter Bold';
    src: url(../Assets/Font/Inter/Inter_24pt-SemiBold.ttf)format('truetype');
}
@font-face {
    font-family: 'Inter Bold Italic';
    src: url(../Assets/Font/Inter/Inter_24pt-SemiBoldItalic.ttf)format('truetype');
}
@font-face {
    font-family: 'Inter Extreme Bold';
    src: url(../Assets/Font/Inter/Inter-Bold.otf)format('truetype');
}

@font-face {
    font-family: 'MontSerrat Regular';
    src: url(../Assets/Font/Montserrat/Montserrat-Regular.ttf)format('truetype');
}
@font-face {
    font-family: 'MontSerrat Bold';
    src: url(../Assets/Font/Montserrat/Montserrat-Medium.ttf)format('truetype');
}
@font-face {
    font-family: 'MontSerrat Italic';
    src: url(../Assets/Font/Montserrat/Montserrat-Italic.ttf)format('truetype');
}

@font-face {
    font-family: 'Roboto Regular';
    src: url(../Assets/Font/Roboto/Roboto-Regular.ttf)format('truetype');
}
@font-face {
    font-family: 'Roboto Italic';
    src: url(../Assets/Font/Roboto/Roboto-Italic.ttf)format('truetype');
}
@font-face {
    font-family: 'Roboto Bold';
    src: url(../Assets/Font/Roboto/Roboto-Medium.ttf)format('truetype');
}
@font-face {
    font-family: 'Roboto Bold Italic';
    src: url(../Assets/Font/Roboto/Roboto-MediumItalic.ttf)format('truetype');
}

@font-face {
    font-family: 'Poppins Light';
    src: url(../Assets/Font/Poppins/Poppins-Light.ttf)format('truetype');
}
@font-face {
    font-family: 'Poppins Regular';
    src: url(../Assets/Font/Poppins/Poppins-Regular.ttf)format('truetype');
}
@font-face {
    font-family: 'Poppins Italic';
    src: url(../Assets/Font/Poppins/Poppins-Italic.ttf)format('truetype');
}
@font-face {
    font-family: 'Poppins Medium';
    src: url(../Assets/Font/Poppins/Poppins-Medium.ttf)format('truetype');
}
@font-face {
    font-family: 'Poppins Bold';
    src: url(../Assets/Font/Poppins/Poppins-SemiBold.ttf)format('truetype');
}
@font-face {
    font-family: 'Poppins Bold Italic';
    src: url(../Assets/Font/Poppins/Poppins-SemiBoldItalic.ttf)format('truetype');
}
@font-face {
    font-family: 'Poppins Extreme Bold';
    src: url(../Assets/Font/Poppins/Poppins-Bold.ttf)format('truetype');
}
@font-face {
    font-family: 'Baloo Bhai';
    src: url(../Assets/Font/BalooBhai-Regular.ttf)format('truetype');
}

.InterRegularTextFont
{
    font-family: 'Inter Regular';
}
.InterItalicTextFont
{
    font-family: 'Inter Italic';
}
.InterMediumTextFont
{
    font-family: 'Inter Medium';
}
.InterMediumItalicTextFont
{
    font-family: 'Inter Medium Italic';
}
.InterBoldTextFont
{
    font-family: 'Inter Bold';
}
.InterBoldItalicTextFont
{
    font-family: 'Inter Bold Italic';
}
.InterExBoldTextFont
{
    font-family: 'Inter Extreme Bold'
}

.MontSerratRegularTextFont
{
    font-family: 'MontSerrat Regular';
}
.MontSerratBoldTextFont
{
    font-family: 'MontSerrat Bold';
}
.MontSerratItalicTextFont
{
    font-family: 'MontSerrat Italic';
}


.RobotoTextFont
{
    font-family: 'Roboto Regular';
}
.RobotoItalicTextFont
{
    font-family: 'Roboto Italic';
}
.RobotoBoldTextFont
{
    font-family: 'Roboto Bold';
}
.RobotoBoldItalicTextFont
{
    font-family: 'Roboto Bold Italic';
}


.PoppinsLightTextFont
{
    font-family: 'Poppins Light';
}
.PoppinsRegularTextFont
{
    font-family: 'Poppins Regular';
}
.PoppinsItalicTextFont
{
    font-family: 'Poppins Italic';
}
.PoppinsMediumTextFont
{
    font-family: 'Poppins Medium';
}
.PoppinsBoldTextFont
{
    font-family: 'Poppins Bold';
}
.PoppinsBoldItalicTextFont
{
    font-family: 'Poppins Bold Italic';
}
.PoppinsExBoldTextFont
{
    font-family: 'Poppins Extreme Bold';
}
.BalooBhaiTextFont
{
    font-family: 'Baloo Bhai';
}

/* ============================================== BASIC UI ============================================== */

.MainTopButtonWrapper
{
    width: 100%;
    height: fit-content;
    position: fixed !important;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    z-index: 999;
}
.TopMenuPanel
{
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(240, 247, 253, 0.8)); */
    background: linear-gradient(to bottom, rgba(27, 27, 27, 0.7), rgba(19, 19, 19, 0.7));
    /* background-color: rgba(255, 255, 255, 0.8); */
}
.TopMenuPanelBlueGrad
{
    background: linear-gradient(to bottom, #1D76AE, #18618e);
}
.TopBackgroundThatWillChange
{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(240, 247, 253, 1));
    width: 100%;
    height: 100%;
    position: absolute;

    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.TopCornerButtonContainerScrolled .TopBackgroundThatWillChange
{
    opacity: 1;
}
.BottomMenuTextMainWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
}
.BottomDarkColor, .BottomMenuTextMainWrapper p
{
    color: #344054;
}
.BottomTwoTextWrapper p:first-child, .BottomLightColor
{
    color: #667085 !important;
}
.Bottom1stWrapper, .Bottom2ndWrapper, .BottomIconAndTextWrapper, .BottomTwoTextWrapper p
{
    width: fit-content;
    height: fit-content;
}
.BottomIconAndTextWrapper
{
    display: flex;
}
.BottomIconAndTextWrapper img
{
    object-fit: contain !important;
    object-position: left;
}
.BottomIMGNotWA
{
    scale: 90%;
}
.BottomTwoTextWrapper p
{
    margin: 0;
}

.ContainerFlex
{
    left: 0;
    width: 100%;
    height: 0;
    position: absolute;
    display: flex;
}
.ContainerFlex2
{
    width: fit-content;
    right: 0;
    left: auto;
}
.MoreThanOneButtonFlexWrapper
{
    display: flex;
    flex-direction: row;
    width: fit-content;
    height: fit-content;
}
.BasicTextButton, .VoucherAppliedText
{
    font-family: 'Inter Medium';
    border: 0;
    position: relative;
}
.SmallRoundedText
{
    border: 0;
    position: relative;
}
.OrangeButton
{
    background-color: #ED7C42;
    color: white;
}
.OrangeButton2
{
    background-color: #F6BEA1;
    color: #ED7C42;
}
.RedButton, .VoucherStatusExpired
{
    background-color: #da0000;
    color: white;
}
.VoucherStatusActive, .VoucherStatusAvailable, .VoucherStatusSuccess, .VoucherStatusAccepted, .AddReferralButtonSuccess
{
    background-color: #12B76A;
    color: white;
}
.BluButton
{
    background-color: #283FFF;
    color: white;
}
.BlueButton
{
    background-color: #3A9FDD;
    color: white;
}
.VoucherStatusUsed, .VoucherStatusOnTheWay, .VoucherStatusInProcess
{
    background-color: #2494D9;
}
.BlueOutlineButton
{
    background-color: #FFFFFF;
    color: #1D76AE;
}
.GreyOutlineButton
{
    background-color: white;
    color: #667085;
}
.GreyButton
{
    background-color: #757e8c;
    color: white;
}
.GreyOpacityButton, .ListinYourAccButton
{
    background-color: rgba(241, 241, 241, 0.2);
}
.ListinYourAccButton p
{
    color: white;
}
.BlueButtonLight, .TopCornerButtonContainerScrolled .ListinYourAccButton
{
    background-color: #D3EAF7;
    color: #3A9FDD;
}
.TopCornerButtonContainerScrolled .ListinYourAccButton p
{
    color: #3A9FDD;
}
.AddReferralButtonSuccess
{
    pointer-events: none;
}
.ListinYourAccButton .BasicIconInsideButton
{
    content: url("/Assets/ButtonIcon/home-white-icon.svg");
}
.TopCornerButtonContainerScrolled .ListinYourAccButton .BasicIconInsideButton
{
    content: url("/Assets/ButtonIcon/home-blue-icon.svg");
}

.UserTopInfoWrapper .ToggleArrow
{
    content: url("/Assets/ButtonIcon/chevron-white.svg");
}
.TopCornerButtonContainerScrolled .UserTopInfoWrapper .ToggleArrow
{
    content: url("/Assets/ButtonIcon/chevron-blue.svg");
}

.GreyBorderBlackTextButton
{
    background-color: white;
    color: #344054;
}
.GreenBorderGreenTextButton
{
    background-color: white;
    color: #039855;
}

.ButtonUnselected
{
    color: rgb(61, 61, 61);
    background-color: #55595f;
}
.ButtonUnselectable, .PaymentChooseForm:not(:has(input:checked)) .BasicTextButton
{
    background-color: #b7b7b7 !important;
    color: rgb(113, 113, 113) !important;
    pointer-events: none !important;
}
.ButtonInvalid
{
    background-color: #e9e9e9 !important;
    pointer-events: none !important;
    color: white !important;
}
.RedWarningContainer
{
    flex: 1;
    height: fit-content;
    background-color: rgb(214, 0, 0);
    text-align: center;
}
.RedWarningContainer p
{
    text-align: center;
    margin: auto;
    width: fit-content;
    height: fit-content;
    color: white;
}

.SignInButtonTop, .LoadMoreButton, .SeeAllPhotosButton, .SelectRoomButton, .PaddingExtendedButton, .PaddingExtendedButton2
{
    width: fit-content;
    height: fit-content;
    margin: auto;
    margin-right: 0;
    box-shadow: 0 0 0 !important;
}
.PinginGoLogo
{
    margin: auto 0;
    width: auto !important;
    display: block;
}
.BottomEndSection
{
    width: 100%;
    height: fit-content;
    /* background: linear-gradient(to bottom, #1D76AE, #196696); */
    background-color: #0B4A6F;
}
.CopyrightEndText
{
    margin: auto;
    /* margin-right: 0; */
    color: white;
}
.swiper-button-disabled
{
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.swiper-wrapper
{
    display: flex;
}
.BasicBlackBlocker, .FilterBlocker, .AlmostThereBlockerContainer
{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
}
.BlockerOpacityOnHover
{
    opacity: 0;
    -webkit-transition: opacity 0.2s ease, scale 0.3s ease;
    -moz-transition: opacity 0.2s ease, scale 0.3s ease;
    -o-transition: opacity 0.2s ease, scale 0.3s ease;
    -ms-transition: opacity 0.2s ease, scale 0.3s ease;
    transition: opacity  0.2s ease, scale 0.3s ease;
}
.BlockerOpacityOnHover:hover
{
    opacity: 1;
}
.BlockerWithHoverableText
{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    cursor: pointer;
}
.BlockerWithHoverableText p
{
    margin: auto !important;
    color: white;
    scale: 100%;
    transition: opacity 0.3s, scale 0.3s;
}
.BlockerWithHoverableText:hover
{
    background-color: rgba(0, 0, 0, 0.8);
}
.BlockerWithHoverableText:hover p
{
    scale: 110%;
}
.TopMenuSectionWrapper
{
    max-width: 1500px;
    position: relative;
}
.NoFeaturedPropertyFoundContainer
{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.CollapsibleContent
{
    max-height: 0;
    overflow: hidden;
}
.CollapsibleCheckBoxContainer:has(.FilterCheckBox:checked) + .CollapsibleContent
{
    max-height: none;
    overflow: visible;
    /* -webkit-transition: max-height 0.3s ease;
    -moz-transition: max-height 0.3s ease;
    -o-transition:  max-height 0.3s ease;
    -ms-transition: max-height 0.3s ease;
    transition: max-height 0.3s ease; */
}
.UserTopInfoWrapper, .MainTopSectionButtonWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: auto 0;
    margin-left: auto;
    position: relative;
}
.UserTopProfileIcon
{
    position: relative;
    border-radius: 100%;
    overflow: hidden;
    background: url(../Assets/ProfilePicture.jpg);
    background-position: center !important;
    background-size: cover !important;
}
.UserTopProfileName
{
    width: fit-content;
    height: fit-content;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.TopCornerButtonContainerScrolled .UserTopProfileName
{
    color: #1D76AE;
}

.WhitePanelContentMainWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    position: relative;
}
.WhitePanelContentWrapper
{
    width: 100%;
    height: fit-content;
    display: flex;
    position: relative;
}
.WhitePanelContentWrapper .BasicInputTextTop
{
    margin: auto 0;
}
.RoomButtonAndInputContainer, .RoomQuotaAndTypeContainer
{
    width: fit-content;
    height: fit-content;
    position: relative;
    display: flex;
    margin: auto 0;
    margin-left: auto;
}
.RoomButtonAndInputContainer .InputFieldInsideSmallPanel, .RoomQuotaAndTypeContainer .InputFieldInsideSmallPanel
{
    background-color: rgb(244, 244, 244);
    text-align: center;
}
.ContactUsMessageInputField
{
    width: 100%;
    color: #000000;
    background-color: transparent;
    border: 0;
    outline: none;
    resize: none;
}

.InputPasswordWithButton[type="password"] + .BasicIconInsideInput, .InputPasswordWithButton[type="password"] + .BasicIconInsideInput2
{
    content: url(../Assets/ButtonIcon/showpassword.svg); /* Change to closed eye icon */
}
.InputPasswordWithButton[type="text"] + .BasicIconInsideInput, .InputPasswordWithButton[type="text"] + .BasicIconInsideInput2
{
    content: url(../Assets/ButtonIcon/hidepassword.svg); /* Change to open eye icon */
}

.IncreaseReduceRoomButton
{
    margin: auto 0;
}

.BasicRadioButtonContainer
{
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    border-radius: 100%;
    display: flex;
}

.BasicRadioButtonContainer .RadioButtonSpan
{
    display: block;
    width: 100%;
    height: 90%;
    position: relative;
    background-color: white;
    border-radius: 100%;
    cursor: pointer;
}

.BasicBlueRadioButton
{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}

.BasicRadioButtonContainer .RadioButtonSpan::after
{
    content:"";
    background-color: #50A9E1;
    background-size: 100% 100%;
    display: block;
    position: relative;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 100%;
    scale: 0%;
    transition: opacity 0.3s, scale 0.3s;
}

.BasicBlueRadioButton:checked ~ .RadioButtonSpan::after
{
    width: 100%;
    height: 100%;
    scale: 50%;
    opacity: 1;
}

.BasicBlueRadioButton:checked ~ .RadioButtonSpan
{
    background-color: #D3EAF7;
}

.BasicBoxShadow, .BasicBoxShadowUp, .BasicBoxShadowMid
{
    z-index: 1;
}

@media screen and (max-width: 560px)
{
    .TopCornerButtonContainerScrolled, .BasicShadow
    {
        box-shadow: 0 0.2vw 0.2vw rgba(0, 0, 0, 0.2);
    }
    .BasicShadow2
    {
        box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.2);
    }
    .BottomMenuSectionWrapper
    {
        width: 92%;
        margin: 5vw auto;
    }
    .TopMenuSectionWrapper
    {
        width: 92%;
        margin: 3vw auto;
    }
    .BottomMenuTextMainWrapper
    {
        margin-top: 2.5vw;
        gap: 8vw;
    }
    .BottomMenuText
    {
        font-size: 2.7vw;
        line-height: 3.7vw;
        margin-bottom: 2vw;
    }
    .BottomMenuHeaderText
    {
        font-size: 3vw;
        line-height: 4vw;
        margin-bottom: 2vw;
    }
    .BasicTextButton
    {
        border-radius: 0.8vw;
    }
    .BasicBoxShadow
    {
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
    }
    .BasicBoxShadowMid
    {
        box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.2);
    }
    .BasicBoxShadowUp
    {
        box-shadow: 0 -0.5vw 1vw rgba(0, 0, 0, 0.2);
    }
    .WhiteOuterHover:hover, .WhiteOuterHover:active
    {
        box-shadow: 0 0 0.5vw 0.5vw #ffffff !important;
    }
    .BlueOutlineButton
    {
        outline: 0.1vw solid #2494D9;
        outline-offset: -0.1vw;
    }
    .GreyOutlineButton
    {
        outline: 0.2vw solid #344054;
        outline-offset: -0.2vw;
    }
    .BasicIconInsideButton
    {
        width: 3.2vw;
        height: 3.2vw;
        margin: -0.5vw 1.2vw;
    }
    .BasicIconInsideButton2
    {
        width: 2.2vw;
        height: 2.2vw;
        margin: auto 1.2vw;
    }
    .SignInButtonTop, .LoadMoreButton, .SeeAllPhotosButton, .RedWarningContainer
    {
        padding: 1.5vw 2vw;
        font-size: 2.2vw;
    }
    .ButtonResizeFollowInput
    {
        padding: 2.3vw 2vw;
    }
    .VoucherAppliedText
    {
        padding: 0.3vw 1.5vw;
        border-radius: 2vw;
        font-size: 1.8vw;
        top: -0.2vw;
    }
    .SmallRoundedText
    {
        padding: 0.3vw 1.5vw;
        border-radius: 2vw;
        font-size: 1.8vw;
    }
    .RedWarningContainer p
    {
        font-size: 2.2vw;
    }
    .PaddingExtendedButton
    {
        padding: 1.5vw 6vw;
        font-size: 2.2vw;
    }
    .PaddingExtendedButton2
    {
        padding: 1.5vw 5vw;
        font-size: 2.2vw;
    }
    .SelectRoomButton
    {
        padding: 1.5vw 2vw;
        font-size: 2vw;
        white-space: nowrap;
    }
    .PinginGoLogo
    {
        height: 3.5vw;
    }
    .SocialIconButton
    {
        width: 5vw;
        height: 5vw;
        margin-right: 2vw;
    }
    .CopyrightEndText
    {
        font-size: 2.5vw;
    }
    .NoFeaturedPropertyFoundContainer
    {
        margin: 4vw 0;
    }
    .BasicRoundRadius
    {
        border-radius: 0.8vw;
    }
    .UserTopProfileIcon
    {
        width: 4.2vw;
        height: 4.2vw;
    }
    .UserTopProfileName
    {
        margin: auto 1.5vw;
        font-size: 2.5vw;
        max-width: 13vw;
    }
    .WhitePanelContentMainWrapper
    {
        padding: 2vw 2.2vw;
    }
    .WhitePanelContentMainWrapper .WhitePanelContentWrapper:not(:last-child)
    {
        margin-bottom: 1.5vw;
    }
    .WhitePanelContentWrapper
    {
        min-width: 35vw;
    }
    .WhitePanelContentWrapper .BasicInputTextTop
    {
        margin-right: 2vw;
    }
    .RoomButtonAndInputContainer .SmallPanelDropDownContainer
    {
        width: 9vw !important;
        min-width: 9vw !important;
        height: 5vw;
        margin: auto 1vw;
    }
    .RoomQuotaAndTypeContainer .InputFieldInsideSmallPanel
    {
        width: 9vw !important;
        min-width: 9vw !important;
        height: 5vw;
        margin: auto 1vw;
    }
    .IncreaseReduceRoomButton
    {
        width: 4vw;
        height: 4vw;
    }
    .BasicRadioButtonContainer
    {
        width: 2.8vw;
        height: 3vw;
        /* margin-right: 2vw; */
    }
    .BasicThinGreyBorder
    {
        border: 0.2vw solid rgb(155, 159, 164) !important;
    }
    .BasicRadioButtonContainer .RadioButtonSpan
    {
        outline: 0.2vw solid #D0D5DD !important;
        outline-offset: -0.2vw !important;
    }
    .BasicBlueRadioButton:checked ~ .RadioButtonSpan
    {
        outline: 0.2vw solid #50A9E1 !important;
        outline-offset: -0.2vw !important;
    }
    .GreyBorderBlackTextButton
    {
        outline: 0.2vw solid #D0D5DD !important;
        outline-offset: -0.2vw !important;
    }
    .GreenBorderGreenTextButton
    {
        outline: 0.2vw solid #039855 !important;
        outline-offset: -0.2vw !important;
    }
    .CollapsibleCheckBoxContainer:has(.FilterCheckBox:checked) + .CollapsibleContent
    {
        padding-top: 2vw;
    }
    .BottomIconAndTextWrapper
    {
        column-gap: 2vw;
    }
    .BottomIconAndTextWrapper img
    {
        width: 4.5vw;
        height: 4.5vw;
        margin-top: 0.5vw;
    }
    .BottomIconAndTextWrapper:not(:last-child)
    {
        margin-bottom: 2vw;
    }
    .Bottom1stWrapper
    {

    }
    .Bottom2ndWrapper
    {

    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .TopCornerButtonContainerScrolled, .BasicShadow
    {
        box-shadow: 0 0.2vw calc(1px + 0.5vw) rgba(0, 0, 0, 0.2);
    }
    .BasicShadow2
    {
        box-shadow: 0 0.4vw 0.5vw rgba(0, 0, 0, 0.2);
    }
    .BottomMenuSectionWrapper
    {
        width: 93%;
        margin: 20px auto;
    }
    .TopMenuSectionWrapper
    {
        width: 95%;
        margin: calc(10px + 0.5vw) auto;
    }
    .BottomMenuTextMainWrapper
    {
        margin-top: calc(10px + 0.5vw);
        gap: calc(30px + 0.5vw);
    }
    .BottomMenuText
    {
        font-size: calc(9px + 0.5VW);
        line-height: calc(13px + 0.5VW);;
        margin-bottom: calc(5px + 0.5vw);
    }
    .BottomMenuHeaderText
    {
        font-size: calc(10.5px + 0.5VW);
        margin-bottom: calc(5px + 0.5vw);
    }
    .BasicTextButton
    {
        border-radius: 0.3vw;
    }
    .BasicBoxShadow
    {
        box-shadow: 0 0.4vw calc(0px + 0.5vw) rgba(0, 0, 0, 0.2);
    }
    .BasicBoxShadowMid
    {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .BasicBoxShadowUp
    {
        box-shadow: 0 -0.3vw calc(0px + 0.5vw) rgba(0, 0, 0, 0.2);
    }
    .WhiteOuterHover:hover, .WhiteOuterHover:active
    {
        box-shadow: 0 0 0.2vw 0.2vw #ffffff !important;
    }
    .BlueOutlineButton
    {
        outline: 1.5px solid #2494D9;
        outline-offset: -1.5px;
    }
    .GreyOutlineButton
    {
        outline: 1.5px solid #344054;
        outline-offset: -1.5px;
    }
    .BasicIconInsideButton
    {
        width: calc(14px + 0.5vw);
        height: calc(14px + 0.5vw);
        margin: -1px calc(2px + 0.5vw);
    }
    .BasicIconInsideButton2
    {
        width: calc(8px + 0.5vw);
        height: calc(8px + 0.5vw);
        margin: auto calc(0px + 0.5vw);
    }
    .SignInButtonTop, .LoadMoreButton, .SeeAllPhotosButton, .RedWarningContainer
    {
        padding: calc(5px + 0.5vw) calc(8px + 0.5vw);
        font-size: calc(7px + 0.5vw);
    }
    .ButtonResizeFollowInput
    {
        padding: calc(7px + 0.5vw) calc(8px + 0.5vw);
    }
    .VoucherAppliedText
    {
        padding: 0.2vw calc(2px + 0.5vw);
        font-size: calc(4px + 0.5vw);
        border-radius: calc(5px + 0.5vw);
    }
    .SmallRoundedText
    {
        padding: 0.2vw calc(2px + 0.5vw);
        font-size: calc(4px + 0.5vw);
        border-radius: calc(5px + 0.5vw);
    }
    .RedWarningContainer p
    {
        font-size: calc(7px + 0.5vw);
    }
    .PaddingExtendedButton
    {
        padding: calc(5px + 0.5vw) calc(35px + 0.5vw);
        font-size: calc(7px + 0.5vw);
    }
    .PaddingExtendedButton2
    {
        padding: calc(5px + 0.5vw) calc(30px + 0.5vw);
        font-size: calc(7px + 0.5vw);
    }
    .SelectRoomButton
    {
        padding: calc(4px + 0.5vw) calc(5px + 0.5vw);
        font-size: calc(7px + 0.5vw);

        /* padding: 0.7vw 1vw;
        font-size: 1.2vw; */
    }
    .PinginGoLogo
    {
        height: calc(16px + 0.5vw);
    }
    .SocialIconButton
    {
        width: calc(18px + 0.5vw);
        height: calc(18px + 0.5vw);
        margin-right: calc(5px + 0.5vw);
    }
    .CopyrightEndText
    {
        font-size: calc(8px + 0.5vw);
    }
    .NoFeaturedPropertyFoundContainer
    {
        margin: calc(10px + 0.5vw) 0;
    }
    .BasicRoundRadius
    {
        border-radius: 0.5vw;
    }
    .UserTopProfileIcon
    {
        width: calc(20px + 0.5vw);
        height: calc(20px + 0.5vw);
    }
    .UserTopProfileName
    {
        margin: auto calc(2px + 0.5vw);
        font-size: calc(9px + 0.5vw);
        max-width: 20vw;
    }
    .WhitePanelContentMainWrapper
    {
        padding: calc(5px + 0.5vw) calc(10px + 0.5vw);
    }
    .WhitePanelContentMainWrapper .WhitePanelContentWrapper:not(:last-child)
    {
        margin-bottom: calc(4px + 0.5vw);
    }
    .WhitePanelContentWrapper
    {
        min-width: calc(200px + 0.5vw);
    }
    .WhitePanelContentWrapper .BasicInputTextTop
    {
        margin-right: 20px;
    }
    .RoomButtonAndInputContainer .SmallPanelDropDownContainer
    {
        width: calc(40px + 0.5vw) !important;
        min-width: calc(40px + 0.5vw) !important;
        height: calc(22px + 0.5vw);
        margin: auto 6px;
    }
    .RoomQuotaAndTypeContainer .InputFieldInsideSmallPanel
    {
        width: calc(40px + 0.5vw) !important;
        min-width: calc(40px + 0.5vw) !important;
        height: calc(22px + 0.5vw);
        margin: auto 6px;
    }
    .IncreaseReduceRoomButton
    {
        width: calc(18px + 0.5vw);
        height: calc(18px + 0.5vw);
    }
    .BasicRadioButtonContainer
    {
        width: calc(11px + 0.5vw);
        height: calc(13px + 0.5vw);
        /* margin-right: calc(12px + 0.5vw); */
    }
    .BasicThinGreyBorder
    {
        border: 1px solid rgb(155, 159, 164) !important;
    }
    .BasicRadioButtonContainer .RadioButtonSpan
    {
        outline: 1px solid #D0D5DD !important;
        outline-offset: -1px !important;
    }
    .BasicBlueRadioButton:checked ~ .RadioButtonSpan
    {
        outline: 1px solid #50A9E1 !important;
        outline-offset: -1px !important;
    }
    .GreyBorderBlackTextButton
    {
        outline: 1px solid #D0D5DD !important;
        outline-offset: -1px !important;
    }
    .GreenBorderGreenTextButton
    {
        outline: 1px solid #039855 !important;
        outline-offset: -1px !important;
    }
    .CollapsibleCheckBoxContainer:has(.FilterCheckBox:checked) + .CollapsibleContent
    {
        padding-top: calc(5px + 0.5vw);
    }
    .BottomIconAndTextWrapper
    {
        column-gap: 10px;
    }
    .BottomIconAndTextWrapper img
    {
        width: calc(18px + 0.5vw);
        height: calc(18px + 0.5vw);
        margin-top: 0.2vw;
    }
    .BottomIconAndTextWrapper:not(:last-child)
    {
        margin-bottom: 10px;
    }
    .Bottom1stWrapper
    {
        width: 30vw;
    }
    .Bottom2ndWrapper
    {

    }
}

@media screen  and (min-width: 1201px)
{
    .FilterBlocker
    {
        display: none;
    }
    .TopCornerButtonContainerScrolled, .BasicShadow
    {
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    }
    .BasicShadow2
    {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
    .BottomMenuSectionWrapper
    {
        width: 85%;
        max-width: 1410px;
        margin: 20px auto;
    }
    .TopMenuSectionWrapper
    {
        width: 95%;
        margin: 18px auto;
    }
    .BottomMenuTextMainWrapper
    {
        margin-top: 15px;
        gap: 80px;
    }
    .BottomMenuText
    {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 10px;
    }
    .BottomMenuHeaderText
    {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 10px;
    }
    .BasicTextButton
    {
        border-radius: 5px;
    }
    .BasicBoxShadow
    {
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    }
    .BasicBoxShadowMid
    {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .BasicBoxShadowUp
    {
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    }
    .WhiteOuterHover:hover, .WhiteOuterHover:active
    {
        box-shadow: 0 0 2px 2px #ffffff !important;
    }
    .BlueOutlineButton
    {
        outline: 1.5px solid #2494D9;
        outline-offset: -1.5px;
    }
    .GreyOutlineButton
    {
        outline: 1.5px solid #344054;
        outline-offset: -1px;
    }
    .BasicIconInsideButton
    {
        width: 18px;
        height: 18px;
        margin: -2px 6px;
    }
    .BasicIconInsideButton2
    {
        width: 13px;
        height: 13px;
        margin: auto 5px;
    }
    .SignInButtonTop, .LoadMoreButton, .SeeAllPhotosButton, .SelectRoomButton, .RedWarningContainer
    {
        padding: 10px 12px;
        font-size: 13px;
    }
    .ButtonResizeFollowInput
    {
        padding: 11px 12px;
    }
    .VoucherAppliedText
    {
        padding: 2.5px 7px;
        border-radius: 10px;
        font-size: 11px;
    }
    .SmallRoundedText
    {
        padding: 2.5px 7px;
        border-radius: 10px;
        font-size: 9px;
    }
    .RedWarningContainer p
    {
        font-size: 13px;
    }
    .PaddingExtendedButton
    {
        padding: 10px 50px;
        font-size: 13px;
    }
    .PaddingExtendedButton2
    {
        padding: 10px 30px;
        font-size: 13px;
    }
    .PinginGoLogo
    {
        height: 22px;
    }
    .SocialIconButton
    {
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }
    .CopyrightEndText
    {
        font-size: 13px;
    }
    .NoFeaturedPropertyFoundContainer
    {
        margin: 30px 0;
    }
    .BasicRoundRadius
    {
        border-radius: 5px;
    }
    .UserTopProfileIcon
    {
        width: 28px;
        height: 28px;
    }
    .UserTopProfileName
    {
        margin: auto 8px;
        font-size: 15px;
        max-width: 200px;
    }
    .WhitePanelContentMainWrapper
    {
        padding: 10px 15px;
    }
    .WhitePanelContentMainWrapper .WhitePanelContentWrapper:not(:last-child)
    {
        margin-bottom: 5px;
    }
    .WhitePanelContentWrapper
    {
        min-width: 230px;
    }
    .WhitePanelContentWrapper .BasicInputTextTop
    {
        margin-right: 20px;
    }
    .RoomButtonAndInputContainer .SmallPanelDropDownContainer
    {
        width: 50px !important;
        min-width: 50px !important;
        height: 30px;
        margin: auto 6px;
    }
    .RoomQuotaAndTypeContainer .InputFieldInsideSmallPanel
    {
        width: 50px !important;
        min-width: none !important;
        height: 30px;
        margin: auto 6px;
    }
    .IncreaseReduceRoomButton
    {
        width: 22px;
        height: 22px;
    }
    .BasicRadioButtonContainer
    {
        width: 18px;
        max-width: 18px;
        height: 20px;
        max-height: 20px;
        /* margin-right: 8px; */
    }
    .BasicThinGreyBorder
    {
        border: 1px solid rgb(155, 159, 164) !important;
    }
    .BasicRadioButtonContainer .RadioButtonSpan
    {
        outline: 1px solid #D0D5DD !important;
        outline-offset: -1px !important;
    }
    .BasicBlueRadioButton:checked ~ .RadioButtonSpan
    {
        outline: 1px solid #50A9E1 !important;
        outline-offset: -1px !important;
    }
    .GreyBorderBlackTextButton
    {
        outline: 1px solid #D0D5DD !important;
        outline-offset: -1px !important;
    }
    .GreenBorderGreenTextButton
    {
        outline: 1px solid #039855 !important;
        outline-offset: -1px !important;
    }
    .CollapsibleCheckBoxContainer:has(.FilterCheckBox:checked) + .CollapsibleContent
    {
        padding-top: 10px;
    }
    .BottomIconAndTextWrapper
    {
        column-gap: 10px;
    }
    .BottomIconAndTextWrapper:not(:last-child)
    {
        margin-bottom: 10px;
    }
    .BottomIconAndTextWrapper img
    {
        width: 25px;
        height: 25px;
        margin-top: 2px;
    }
    /* .Bottom1stWrapper, .Bottom2ndWrapper
    {
        flex: 1 1 200px;
    } */
    .Bottom1stWrapper
    {
        max-width: 300px;
    }
    .BottomTwoTextWrapper > p:first-child
    {

    }
}


/* ============================================== SWITCH ============================================== */

.switchlabel
{
  position: relative;
  display: inline-block;
}
.switchlabel input
{
  opacity: 0;
  width: 0;
  height: 0;
}
.switchslider
{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.switchslider:before
{
  position: absolute;
  content: "";
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .switchslider
{
  background-color: #2196F3;
}
.switchslider.round:before
{
  border-radius: 50%;
}


@media screen and (max-width: 560px)
{
    .switchlabel
    {
        width: 7vw;
        height: 3.5vw;
    }
    .switchslider:before
    {
      height: 2.5vw;
      width: 2.5vw;
      left: 0.5vw;
      bottom: 0.5vw;
    }
    input:focus + .switchslider
    {
      box-shadow: 0 0 0.1vw #2196F3;
    }
    input:checked + .switchslider:before
    {
      -webkit-transform: translateX(3.5vw);
      -ms-transform: translateX(3.5vw);
      transform: translateX(3.5vw);
    }
    .switchslider.round
    {
      border-radius: 3.5vw;
    }
    .switchslider.round:before
    {
      border-radius: 50%;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .switchlabel
    {
        width: calc(28px + 0.5vw);
        height: calc(16px + 0.1vw);
    }
    .switchslider:before
    {
      height: calc(12px + 0.1vw);
      width: calc(12px + 0.1vw);
      left: calc(2px + 0.1vw);
      bottom: calc(2px + 0.1vw);
    }
    input:focus + .switchslider
    {
      box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .switchslider:before
    {
      -webkit-transform: translateX(calc(14px + 0.1vw));
      -ms-transform: translateX(calc(14px + 0.1vw));
      transform: translateX(calc(14px + 0.1vw));
    }
    .switchslider.round
    {
      border-radius: calc(12px + 0.1vw);
    }
    .switchslider.round:before
    {
      border-radius: 50%;
    }
}

@media screen  and (min-width: 1201px)
{
    .switchlabel
    {
        width: 40px;
        height: 19px;
    }
    .switchslider:before
    {
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 1.5px;
    }
    input:focus + .switchslider
    {
      box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .switchslider:before
    {
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
    .switchslider.round
    {
      border-radius: 20px;
    }
    .switchslider.round:before
    {
      border-radius: 50%;
    }
}


/* ============================================== Main Background ============================================== */

.MainBackgroundAnimateContainer, .MainBackgroundAnimate
{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover !important;
    object-position: center !important;
    overflow: hidden;
}
.MainBackgroundAnimateContainer
{
    width: 100%;
}
.SectionContentWrapper
{
    max-width: 1500px;
    height: fit-content;
    margin: 0 auto;
}
.ContainerWithMaskEdge
{
    width: 100%;
    height: fit-content;
    /* -webkit-mask-box-image: linear-gradient(to left, transparent, 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),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), transparent); */
}
.NoFoundIcon, .NoFoundIcon2
{
    margin: 0 auto;
    object-fit: contain;
}
.NoFoundIcon2
{
    object-position: center !important;
}
.NoFoundHeaderText
{
    color: #272727;
    width: fit-content;
    height: fit-content;
    text-align: center;
}
.NoFoundMessageText
{
    color: #272727;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    text-align: center;
}
.RoomPanelContainer, .PingExprezyPanel
{
    flex: 1;
    height: auto;
    /* height: fit-content; */
    position: relative;
    display: flex;
}
.BasicHotelListPanelSwiperWrapper
{
    flex: 1;
    height: 100%;
    display: flex;
    position: relative;
}
.PingExprezyPanel
{
    background-color: #F2F4F7;
    overflow: hidden;
    flex-direction: column;
}
.PingExprezyPanelViewDetails
{
    flex: 1;
    height: fit-content;
}
.RoomPanelContainer:hover .ImageFullCover, .RoomPanelContainer:active .ImageFullCover, .PingExprezyPanel:hover .ImageFullCover, .PingExprezyPanel:active .ImageFullCover
{
    scale: 120%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.PingExprezyImageContainer, .PingExprezyImageContainerFullDisplay
{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.PingExprezyImageContainerFullDisplay
{
    height: fit-content;
    object-fit: cover !important;
    object-position: center;
}
.PingExprezyDescriptionContainer
{
    flex-grow: 1;
}
.PingExprezyUserInfoWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    margin-top: auto;
    overflow: hidden;
}
.PingExprezyUserProfileIcon
{
    background-color: white;
    border-radius: 100%;
    object-fit: cover !important;
    object-position: center !important;
}
.PingExprezyUserInfoWrapper .LabelGreyHeaderSmallerText
{
    white-space: nowrap;
    text-overflow: ellipsis;
}
.RatingPingExprezyContainer
{
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    background-color: rgba(249, 250, 251, 0.8);
}
.RatingPingExprezyContainer
{
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    background-color: rgba(249, 250, 251, 0.8);
}
.RatingPingExprezyContainer img
{
    object-fit: contain !important;
    object-position: center !important;
    margin: auto 0;
}
.RatingPingExprezyRatingText
{
    width: fit-content;
    height: fit-content;
    color: #626B79;
    margin: auto 0;
}
.RoomPanelContentWrapper
{
    flex: 1;
    position: relative;
    background-color: white;
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.RoomPanelContentWrapper:has(.loading_grey)
{
    box-shadow: 0 0 0 !important;
}
.RoomPanelImageContainer
{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.ImageFullCover
{
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute;
    top: 0;
    left: 0;
}
.RoomBenefitsContainer, .RoomLocationContainerInsidePanel, .RoomHotelBenefitsInsidePanel
{
    width: 100%;
    height: fit-content;
    display: flex;
    overflow: hidden;
}
.RoomBenefitsContainer, .RoomHotelBenefitsInsidePanel
{
    -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),rgba(255, 255, 255, 0.8));
}
.RoomHotelBenefitsInsidePanel
{
    width: 100% !important;
    margin-top: 0 !important;
}
.RoomHotelBenefitsInsidePanel .RoomBenefitsPanel
{
    background-color: #F2F4F7;
    color: #344054;
}
.BlueColouredBenefits.RoomHotelBenefitsInsidePanel .RoomBenefitsPanel
{
    background-color: #F0F9FF;
    color: #026AA2;
}
.RoomBenefitsPanel, .BookingStatusBookingDetails
{
    font-family: 'Inter Regular';
    width: fit-content;
    height: fit-content;
    background-color: #EFF8FF;
    color: #175CD3;
    white-space: nowrap;
}
.IconInsideRoundedPanel
{
    object-fit: contain !important;
    object-position: center !important;
    margin: auto 0;
}
.RoomPanelBottomInfoWrapper
{
    flex: 1;
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
}
.RoomNameTextInsidePanel
{
    width: 100%;
    height: fit-content;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.LocationIconInsidePanel
{
    /* margin: auto 0; */
    height: fit-content;
}
.RoomLocationTextInsidePanel, .SeeMapTextInsidePanel
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.RoomLocationTextInsidePanel
{
    color: #344054;
}
.SeeMapTextInsidePanel
{
    color: #ED7C42 !important;
}
.PingToGoInsidePanel
{
    width: 100%;
    margin: 0 auto;
}
.PingToGoIconInsidePanel
{
    object-fit: contain !important;
    object-position: center !important;
}
.PingToGoWithImgWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
}
.PingToGoWithImgWrapper p
{
    text-align: end;
}
.PingFromTextInsidePanel, .PingNightTextInsidePanel
{
    text-align: end;
}
.PingFromPriceTextInsidePanel
{
    color: #ED7C42;
}
.RoomPanelDiscountBack
{
    position: absolute;
    z-index: 1;
    background: url(../Assets/ButtonIcon/DiscountRedFlagBack.png);
    background-position: center;
    background-size: 100% 100%;
}
.RoomPanelDiscountBackNew
{
    width: fit-content;
    position: absolute;
    z-index: 1;
    background: url(../Assets/Icon/red-banner-back-new.png);
    background-size: 100% 100%;
}
.RoomPanelDiscountTop
{
    background-color: #F04438;
    position: absolute;
    width: fit-content;
    display: flex;
    right: 0;
}
.RoomPanelDiscountTopNew
{
    width: fit-content;
    height: fit-content;
    position: relative;
    display: flex;
    right: 0;
    background-size: 100% 100%;
}
.RoomPanelDiscountTopValue
{
    white-space: nowrap;
    color: white;
}
.RoomPanelDiscountTopCorner
{
    height: 100%;
    top: 0;
    position: absolute;
    background: url(../Assets/ButtonIcon/DiscountRedFlag.png);
    background-position: center;
    background-size: 100% 100%;
}
.BasicPanelSwiperMainContainer
{
    width: 100%;
    height: fit-content;
    display: flex;
    position: relative;
}
.PopularAreasPanelContainer, .HotelRoomPanelSwiperContainer
{
    height: fit-content;
    margin: 0 auto;
    display: flex;
}
.RedBannerNew
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    object-fit: fill !important;
}
.RoomPanelDiscountTopNew .RoomPanelDiscountTopValue
{
    margin: 0;
    width: fit-content;
    background-size: 100% 100%;
}

@media screen and (max-width: 560px)
{
    .MainBackgroundAnimate
    {
        width: 100%;
        height: 100%;
    }
    .MainBackgroundAnimateContainer
    {
        height: 40vw;
    }
    .SectionContentWrapper
    {
        width: 98%;
    }
    .ContainerWithMaskEdge
    {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            white 2vw,
            white calc(100% - 2vw),
            transparent 100%
        );
    }
    .NoFoundIcon
    {
        width: 26vw;
    }
    .NoFoundIcon2
    {
        width: 20vw;
        height: 20vw;
    }
    .NoFoundHeaderText
    {
        margin: 0.1vw auto;
        font-size: 3vw;
    }
    .NoFoundMessageText
    {
        font-size: 2.3vw;
    }
    .RoomPanelContainer
    {
        width: 50vw;
        min-width: 50vw;
        max-width: 50vw;
        margin: 3vw 0;
        margin-right: 4vw;
    }
    .PingExprezyPanel
    {
        width: 45vw;
        min-width: 45vw;
        max-width: 45vw;
        margin: 3vw 0;
        margin-right: 4vw;
        border-radius: 0.8vw;
        box-shadow: 0 0.1vw 0.5vw rgba(0, 0, 0, 0.2);
        padding: 2vw;
    }
    .PingExprezyPanelViewDetails
    {
        margin: 3vw 0;
        border-radius: 0.8vw;
        box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.2);
        padding: 2vw;
    }
    .PingExprezyImageContainer
    {
        height: 28vw;
        border-radius: 0.8vw;
    }
    .PingExprezyImageContainerFullDisplay
    {
        max-height: 30vw;
        border-radius: 0.8vw;
    }
    .PingExprezyDescriptionContainer
    {
        margin-top: 2vw;
        margin-top: 1vw;
    }
    .PingExprezyDescriptionContainer .RoomHotelDescriptionInsidePanel
    {
        display: flex !important;
        margin-bottom: 2vw;
    }
    .PingExprezyUserProfileIcon
    {
        width: 4vw;
        height: 4vw;
        outline: 0.1vw solid rgb(207, 207, 207);
        margin-right: 1vw;
    }
    .PingExprezyUserInfoWrapper .LabelGreyHeaderSmallerText
    {
        margin-top: 0.4vw;
        font-size: 2.5vw;
    }
    .RatingPingExprezyContainer
    {
        padding: 0.5vw 1.2vw;
        border-radius: 0.8vw;
    }
    .RatingPingExprezyContainer img
    {
        width: 2.5vw;
        height: 2.5vw;
        margin-right: 0.8vw;
    }
    .RatingPingExprezyRatingText
    {
        font-size: 2.5vw;
    }
    .RoomPanelContentWrapper
    {
        width: 100%;
        box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.2);
        border-radius: 1.5vw;
        /* padding-bottom: 2vw; */
    }
    .RoomPanelBottomInfoWrapper
    {
        padding: 2.5vw;
    }
    .RoomPanelImageContainer
    {
        height: 30vw;
    }
    .RoomBenefitsContainer, .RoomLocationContainerInsidePanel, .RoomHotelBenefitsInsidePanel
    {
        column-gap: 0.5vw;
        margin: 1vw auto;
        /* margin-top: 2vw; */
        margin-top: 0;
    }
    .RoomLocationContainerInsidePanel
    {
        margin: 1vw auto;
    }
    .RoomBenefitsPanel
    {
        font-size: 2vw;
        padding: 0.8vw 1.5vw;
        border-radius: 2vw;
        margin-right: 0.5vw;
    }
    .BookingStatusBookingDetails
    {
        padding: 0.8vw 1.5vw;
        border-radius: 2vw;
        margin-right: 0.5vw;
    }
    .BookingStatusBookingDetails p
    {
        width: fit-content;
        font-size: 2.2vw;
    }
    .IconInsideRoundedPanel
    {
        width: 1.8vw;
        height: 1.8vw;
        margin-right: 0.8vw;
    }
    .BookingStatusBookingDetails .IconInsideRoundedPanel
    {
        width: 2vw;
        height: 2vw;
    }
    .RoomNameTextInsidePanel
    {
        font-size: 3.2vw;
    }
    .LocationIconInsidePanel
    {
        width: 1.8vw;
        /* margin-left: 1vw; */
        margin-right: 0.2vw;
    }
    .RoomLocationTextInsidePanel, .SeeMapTextInsidePanel
    {
        font-size: 2.2vw;
    }
    .SeeMapTextInsidePanel
    {
        margin-left: 2px;
    }
    .RoomLocationTextInsidePanel
    {
        max-width: 65%;
    }
    .PingToGoInsidePanel
    {
        /* width: 90%; */
        font-size: 2.4vw;
    }
    .PingToGoIconInsidePanel
    {
        width: 2.5vw;
        margin-right: 0vw;
    }
    .PingFromTextInsidePanel, .PingNightTextInsidePanel
    {
        font-size: 2vw;
        width: 100%;
        margin: 0.2vw auto;
    }
    .PingFromTextInsidePanel
    {
        padding-top: 2vw;
    }
    .PingFromPriceTextInsidePanel
    {
        font-size: 3vw;
        margin-left: 0.5vw;
    }
    .RoomPanelDiscountBack
    {
        width: 1.5vw;
        height: 9vw;
        right: -1.5vw;
        top: -1vw;
    }
    .RoomPanelDiscountTop
    {
        height: 7vw;
    }
    .RoomPanelDiscountTopValue
    {
        font-size: 3.5vw;
        margin: auto 2vw;
        text-shadow: 0.4vw 0.1vw rgba(0, 0, 0, 0.3);
    }
    .RoomPanelDiscountTopCorner
    {
        width: 2vw;
        left: -1.9vw;
    }

    .RoomPanelDiscountBackNew
    {
        padding-left: 2vw;
        height: 1.5vw;
        right: 1vw;
        top: -1.5vw;
    }
    .RoomPanelDiscountTopNew .RoomPanelDiscountTopValue
    {
        padding: 0.5vw 1.5vw;
        padding-bottom: 1.8vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .MainBackgroundAnimate
    {
        width: 100%;
        height: 100%;
    }
    .MainBackgroundAnimateContainer
    {
        height: calc(250px + 0.5vw);
    }
    .SectionContentWrapper
    {
        width: 96%;
    }
    .ContainerWithMaskEdge
    {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            white 5px,
            white calc(100% - 5px),
            transparent 100%
        );
    }
    .NoFoundIcon
    {
        width: calc(130px + 0.5vw);
    }
    .NoFoundIcon2
    {
        width: calc(110px + 0.5vw);
        height: calc(110px + 0.5vw);
    }
    .NoFoundHeaderText
    {
        margin: 0.4vw auto;
        font-size: calc(12px + 0.5vw);
    }
    .NoFoundMessageText
    {
        font-size: calc(8px + 0.5vw);
    }
    .RoomPanelContainer
    {
        width: calc(260px + 0.5vw);
        min-width: calc(260px + 0.5vw);
        max-width: calc(260px + 0.5vw);
        margin: calc(10px + 0.5vw) 0;
        margin-right: calc(10px + 0.5vw);
    }
    .PingExprezyPanel
    {
        width: calc(220px + 0.5vw);
        min-width: calc(220px + 0.5vw);
        max-width: calc(220px + 0.5vw);
        margin: calc(10px + 0.5vw) 0;
        margin-right: calc(10px + 0.5vw);
        border-radius: 0.5vw;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: calc(4px + 0.5vw);
    }
    .PingExprezyPanelViewDetails
    {
        margin: calc(15px + 0.5vw) 0;
        border-radius: 0.5vw;
        box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.2);
        padding: calc(4px + 0.5vw);
    }
    .PingExprezyImageContainer
    {
        height: calc(140px + 0.5vw);
        border-radius: 0.5vw;
    }
    .PingExprezyImageContainerFullDisplay
    {
        max-height: calc(200px + 0.5vw);
        border-radius: 0.5vw;
    }
    .PingExprezyDescriptionContainer
    {
        margin-top: calc(4px + 0.5vw);
        margin-bottom: calc(1px + 0.5vw);
    }
    .PingExprezyDescriptionContainer .RoomHotelDescriptionInsidePanel
    {
        margin-bottom: calc(8px + 0.5vw);
    }
    .PingExprezyUserProfileIcon
    {
        width: calc(12px + 0.5vw);
        height: calc(12px + 0.5vw);
        outline: 1px solid rgb(207, 207, 207);
        margin-right: calc(1px + 0.5vw);
    }
    .PingExprezyUserInfoWrapper .LabelGreyHeaderSmallerText
    {
        margin-top: 0.1vw;
    }
    .RatingPingExprezyContainer
    {
        padding: 0.5vw calc(1px + 0.5vw);
        border-radius: 0.5vw;
    }
    .RatingPingExprezyContainer img
    {
        width: calc(7px + 0.5vw);
        height: calc(7px + 0.5vw);
        margin-right: 0.5vw;
    }
    .RatingPingExprezyRatingText
    {
        font-size: calc(7px + 0.5vw);
    }
    .RoomPanelContentWrapper
    {
        width: 100%;
        box-shadow: 0 calc(1px + 0.5vw) calc(2px + 0.5vw) rgba(0, 0, 0, 0.2);
        border-radius: calc(2px + 0.5vw);
        /* padding-bottom: calc(4px + 0.5vw); */
    }
    .RoomPanelBottomInfoWrapper
    {
        padding: calc(8px + 0.5vw);
    }
    .RoomPanelImageContainer
    {
        height: calc(150px + 0.5vw);
    }
    .RoomBenefitsContainer, .RoomLocationContainerInsidePanel, .RoomHotelBenefitsInsidePanel
    {
        column-gap: 0.2vw;
        margin: calc(2.5px + 0.5vw) auto;
        /* margin-top: calc(2px + 0.5vw); */
        margin-top: 0;
    }
    .RoomLocationContainerInsidePanel
    {
        margin: calc(1px + 0.5vw) auto;
    }
    .RoomBenefitsPanel
    {
        font-size: calc(4px + 0.5vw);
        padding: 0.2vw calc(2px + 0.5vw);
        border-radius: 10px;
        margin-right: 0.5vw;
    }
    .BookingStatusBookingDetails
    {
        padding: 0.4vw calc(2px + 0.5vw);
        border-radius: 10px;
        margin-right: 0.5vw;
    }
    .BookingStatusBookingDetails p
    {
        width: fit-content;
        font-size: calc(5px + 0.5vw);
    }
    .IconInsideRoundedPanel
    {
        width: calc(3px + 0.5vw);
        height: calc(3px + 0.5vw);
        margin-right: 0.4vw;
    }
    .BookingStatusBookingDetails .IconInsideRoundedPanel
    {
        width: calc(4px + 0.5vw);
        height: calc(4px + 0.5vw);
    }
    .RoomNameTextInsidePanel
    {
        font-size: calc(11px + 0.5vw);
    }
    .LocationIconInsidePanel
    {
        width: calc(6px + 0.5vw);
        /* margin-left: calc(1px + 0.5vw); */
        margin-right: 0.5vw;
    }
    .RoomLocationTextInsidePanel, .SeeMapTextInsidePanel
    {
        font-size: calc(7px + 0.5vw);
    }
    .SeeMapTextInsidePanel
    {
        margin-left: 2px;
    }
    .RoomLocationTextInsidePanel
    {
        max-width: 66%;
    }
    .PingToGoInsidePanel
    {
        /* width: 90%; */
        font-size: calc(6px + 0.5vw);
    }
    .PingToGoIconInsidePanel
    {
        width: calc(8px + 0.5vw);
        margin-right: 0.3vw;
    }
    .PingFromTextInsidePanel, .PingNightTextInsidePanel
    {
        font-size: calc(7px + 0.5vw);
        width: 100%;
        margin: 0.1vw auto;
    }
    .PingFromTextInsidePanel
    {
        padding-top: calc(5px + 0.5vw);
    }
    .PingFromPriceTextInsidePanel
    {
        font-size: calc(10px + 0.5vw);
        margin-left: 0.4vw;
    }
    .RoomPanelDiscountBack
    {
        width: calc(5px + 0.5vw);
        height: calc(40px + 0.5vw);
        right: calc(-5px - 0.5vw);
        top: -0.5vw;
    }
    .RoomPanelDiscountTop
    {
        height: calc(30px + 0.5vw);
    }
    .RoomPanelDiscountTopValue
    {
        font-size: calc(12px + 0.5vw);
        margin: auto calc(5px + 0.5vw);
        text-shadow: 0.2vw 0.15vw rgba(0, 0, 0, 0.3);
    }
    .RoomPanelDiscountTopCorner
    {
        width: calc(10px + 0.5vw);
        left: calc(-9px - 0.5vw);
    }

    .RoomPanelDiscountBackNew
    {
        padding-left: 12px;
        height: calc(2px + 0.5vw);
        right: 0.5vw;
        top: calc(-2px - 0.5vw);
    }

    .RoomPanelDiscountTopNew .RoomPanelDiscountTopValue
    {
        padding: 0.5vw calc(4px + 0.5vw);
        padding-bottom: calc(4px + 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .MainBackgroundAnimate
    {
        /* width: 120%;
        height: 120%;
        left: -5px;
        top: -5px;
        filter: blur(3px);
        -webkit-filter: blur(3px); */
        width: 100%;
        height: 100%;
    }
    .MainBackgroundAnimateContainer
    {
        height: 270px;
    }
    .SectionContentWrapper
    {
        width: 86vw;
    }
    .ContainerWithMaskEdge
    {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            white 10px,
            white calc(100% - 10px),
            transparent 100%
        );
    }
    .NoFoundIcon
    {
        width: 150px;
    }
    .NoFoundIcon2
    {
        width: 130px;
        height: 130px;
    }
    .NoFoundHeaderText
    {
        margin: 2px auto;
        font-size: 19px;
    }
    .NoFoundMessageText
    {
        font-size: 13px;
    }
    .RoomPanelContainer
    {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        margin: 20px 0;
        margin-right: 20px;
    }
    .PingExprezyPanel
    {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        margin: 20px 0;
        margin-right: 20px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 10px;
    }
    .PingExprezyPanelViewDetails
    {
        margin: 20px 0;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        padding: 10px;
    }
    .PingExprezyImageContainer
    {
        height: 150px;
        border-radius: 5px;
    }
    .PingExprezyImageContainerFullDisplay
    {
        max-height: 200px;
        border-radius: 5px;
    }
    .PingExprezyDescriptionContainer
    {
        margin-top: 10px;
        margin-bottom: 2px;
    }
    .PingExprezyDescriptionContainer .RoomHotelDescriptionInsidePanel
    {
        margin-bottom: 10px;
    }
    .PingExprezyUserProfileIcon
    {
        width: 22px;
        height: 22px;
        outline: 1px solid rgb(207, 207, 207);
        margin-right: 7px;
    }
    .PingExprezyUserInfoWrapper .LabelGreyHeaderSmallerText
    {
        margin-top: 2px;
        /* font-size: 14px; */
    }
    .RatingPingExprezyContainer
    {
        padding: 4px 7px;
        border-radius: 5px;
    }
    .RatingPingExprezyContainer img
    {
        width: 13px;
        height: 13px;
        margin-right: 5px;
    }
    .RatingPingExprezyRatingText
    {
        font-size: 12px;
    }
    .RoomPanelContentWrapper
    {
        width: 100%;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        /* padding-bottom: 10px; */
    }
    .RoomPanelBottomInfoWrapper
    {
        padding: 12px;
    }
    .RoomPanelImageContainer
    {
        height: 160px;
    }
    .RoomBenefitsContainer, .RoomLocationContainerInsidePanel, .RoomHotelBenefitsInsidePanel
    {
        column-gap: 3px;
        margin: 4px auto;
        /* margin-top: 10px; */
        margin-top: 0;
    }
    .RoomLocationContainerInsidePanel
    {
        margin: 6px auto;
        margin-top: 4px;
    }
    .RoomBenefitsPanel
    {
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 10px;
        margin-right: 5px;
    }
    .BookingStatusBookingDetails
    {
        padding: 2px 8px;
        border-radius: 10px;
        margin-right: 5px;
    }
    .BookingStatusBookingDetails p
    {
        width: fit-content;
        font-size: 12px;
    }
    .IconInsideRoundedPanel
    {
        width: 10px;
        height: 10px;
        margin-right: 3px;
    }
    .BookingStatusBookingDetails .IconInsideRoundedPanel
    {
        width: 12px;
        height: 12px;
    }
    .RoomNameTextInsidePanel
    {
        font-size: 17px;
    }
    .LocationIconInsidePanel
    {
        width: 11.5px;
        /* margin-left: 5px; */
        margin-right: 2px;
    }
    .RoomLocationTextInsidePanel, .SeeMapTextInsidePanel
    {
        font-size: 13px;
    }
    .SeeMapTextInsidePanel
    {
        margin-left: 2px;
    }
    .RoomLocationTextInsidePanel
    {
        max-width: 65%;
    }
    .PingToGoInsidePanel
    {
        /* width: 90%; */
        font-size: 13px;
    }
    .PingToGoIconInsidePanel
    {
        width: 16px;
        margin-right: 5px;
    }
    .PingFromTextInsidePanel, .PingNightTextInsidePanel
    {
        font-size: 13px;
        width: 100%;
        margin: 2px auto;
    }
    .PingFromTextInsidePanel
    {
        padding-top: 12px;
    }
    .PingFromPriceTextInsidePanel
    {
        font-size: 18px;
        margin-left: 5px;
    }
    .RoomPanelDiscountBack
    {
        width: 10px;
        height: 50px;
        right: -10px;
        top: -8px;
    }
    .RoomPanelDiscountTop
    {
        height: 40px;
    }
    .RoomPanelDiscountTopValue
    {
        font-size: 20px;
        margin: auto 10px;
        text-shadow: 2px 1.5px rgba(0, 0, 0, 0.3);
    }
    .RoomPanelDiscountTopCorner
    {
        width: 20px;
        left: -19px;
    }

    .RoomPanelDiscountBackNew
    {
        padding-left: 12px;
        height: 8px;
        right: 5px;
        top: -8px;
    }

    .RoomPanelDiscountTopNew .RoomPanelDiscountTopValue
    {
        padding: 4px 12px;
        padding-bottom: 11px;
    }
}


/* ============================================== USER INPUT ============================================ */

.InputUserExperienceMainContainer
{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.InputUserExperienceMainContainer p
{
    margin: 0 auto;
    text-align: center;
}
.TellUserExperienceWrapper
{
    width: auto;
    height: fit-content;
    background-color: #E9F4FB;
    display: flex;
    flex-direction: column;
}
.UserExperienceRatingContainer
{
    width: fit-content;
    height: fit-content;
}
.UserExperienceStar
{
    object-fit: contain !important;
    object-position: center !important;
    content: url(../Assets/ButtonIcon/rating-star-light.svg);
}

.UserExperienceCurrent1 .UserExperienceStar:first-child,
.UserExperienceCurrent2 .UserExperienceStar:first-child, .UserExperienceCurrent2 .UserExperienceStar:nth-child(2),
.UserExperienceCurrent3 .UserExperienceStar:first-child, .UserExperienceCurrent3 .UserExperienceStar:nth-child(2), .UserExperienceCurrent3 .UserExperienceStar:nth-child(3),
.UserExperienceCurrent4 .UserExperienceStar:first-child, .UserExperienceCurrent4 .UserExperienceStar:nth-child(2), .UserExperienceCurrent4 .UserExperienceStar:nth-child(3), .UserExperienceCurrent4 .UserExperienceStar:nth-child(4),
.UserExperienceCurrent5 .UserExperienceStar:first-child, .UserExperienceCurrent5 .UserExperienceStar:nth-child(2), .UserExperienceCurrent5 .UserExperienceStar:nth-child(3), .UserExperienceCurrent5 .UserExperienceStar:nth-child(4), .UserExperienceCurrent5 .UserExperienceStar:nth-child(5)
{
    content: url(../Assets/ButtonIcon/rating-star-fill.svg);
}

.UserExperienceUploadPhoto
{
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    position: relative;
}
.UserExperienceUploadPhoto img
{
    width: 100%;
    height: fit-content;
}







@media screen and (max-width: 560px)
{
    .InputUserExperienceMainContainer
    {
        padding-top: 2.5vw;
    }
    .InputUserExperienceMainContainer p
    {
        width: 90%;
    }
    .TellUserExperienceWrapper
    {
        margin-top: 2.5vw;
    }
    .TellUserExperienceWrapper > *:not(:last-child)
    {
        margin-bottom: 2.2vw !important;
    }
    .UserExperienceRatingContainer
    {
        margin: 10px auto !important;
    }
    .UserExperienceStar
    {
        width: 4.8vw;
        height: 4.8vw;
    }
    .UserExperienceUploadPhoto
    {
        width: 85%;
        outline: 0.6vw solid white;
        outline-offset: -0.4vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .InputUserExperienceMainContainer
    {
        padding-top: calc(10px + 0.5vw);
    }
    .InputUserExperienceMainContainer p
    {
        width: 90%;
    }
    .TellUserExperienceWrapper
    {
        margin-top: calc(10px + 0.5vw);
    }
    .TellUserExperienceWrapper > *:not(:last-child)
    {
        margin-bottom: calc(10px + 0.5vw) !important;
    }
    .UserExperienceRatingContainer
    {
        margin: calc(5px + 0.5vw) auto !important;
    }
    .UserExperienceStar
    {
        width: calc(22px + 0.5vw);
        height: calc(22px + 0.5vw);
    }
    .UserExperienceUploadPhoto
    {
        width: 85%;
        outline: 0.4vw solid white;
        outline-offset: -0.2vw;
    }
}

@media screen  and (min-width: 1201px)
{
    .InputUserExperienceMainContainer
    {
        padding-top: 15px;
    }
    .InputUserExperienceMainContainer p
    {
        width: 90%;
    }
    .TellUserExperienceWrapper
    {
        margin-top: 15px;
    }
    .TellUserExperienceWrapper > *:not(:last-child)
    {
        margin-bottom: 15px !important;
    }
    .UserExperienceRatingContainer
    {
        margin: 10px auto !important;
    }
    .UserExperienceStar
    {
        width: 28px;
        height: 28px;
    }
    .UserExperienceUploadPhoto
    {
        width: 80%;
        outline: 4px solid white;
        outline-offset: -2px;
    }
}



/* ============================================== INPUT FIELD RELATED ============================================== */

.BasicInputFieldContainer input, .BasicInputFieldContainer input:focus
{
    background-color: transparent;
    border: 0;
    outline: 0;
}

@media screen and (max-width: 560px)
{
    .BasicInputFieldContainer:focus-within, .HoverableContentInsideInputField:has(.ContainerFlex) .BasicInputFieldContainer, .SmallPanelDropDownContainer:has(.ContainerFlex) .SmallPanelDropDownInputWrapper, .InputFieldWithButton:focus
    {
        outline: 0.4vw solid black !important;
        outline-offset: -0.4vw !important;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .BasicInputFieldContainer:focus-within, .HoverableContentInsideInputField:has(.ContainerFlex) .BasicInputFieldContainer, .SmallPanelDropDownContainer:has(.ContainerFlex) .SmallPanelDropDownInputWrapper, .InputFieldWithButton:focus
    {
        outline: 2px solid black !important;
        outline-offset: -2px !important;
    }
}

@media screen  and (min-width: 1201px)
{
    .BasicInputFieldContainer:focus-within, .HoverableContentInsideInputField:has(.ContainerFlex) .BasicInputFieldContainer, .SmallPanelDropDownContainer:has(.ContainerFlex) .SmallPanelDropDownInputWrapper, .InputFieldWithButton:focus
    {
        outline: 2px solid black !important;
        outline-offset: -2px  !important;
    }
}



/* ----------------------------------- Small Panel Flex --------------------------------- */
.FlexFullDisplayPanel, .FlexContainerWithTopPanel
{
    background-color: white;
    z-index: 999;
}
.FlexFullDisplayPanel, .FlexContainerBaseAnimate, .FlexContainerWithTopPanel
{
    position: relative;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    margin: auto;
}
.FlexFullDisplayPanel
{
    max-height: 75vh;
    overflow-y: auto
}
.TopHeaderContainerInsidePanel
{
    flex: 1;
    height: fit-content;
    background-color: #A7D4F0;
    display: flex;
    position: relative !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.TopHeaderContentWrapper
{
    margin: auto;
    display: flex;
}
.TopHeaderContentWrapper *
{
    margin: auto 0;
}
.PingExprezyText
{
    background-color: #2494D9;
    color: #FFFFFF;
    width: fit-content;
    height: fit-content;
}
.SmallPanelHeaderText
{
    width: fit-content;
    height: fit-content;
    position: relative;
    color: #000000;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
}
.InputFieldHeaderText, .RedWarningText
{
    width: fit-content;
    height: fit-content;
    color: #344054;
}
.WarningTextWithIcon
{
    /* width: fit-content; */
    flex: 1;
    height: fit-content;
    display: flex;
}
.WarningInputUrlIcon
{
    object-fit: contain !important;
    object-position: center !important;
}
.RedWarningText
{
    color: rgb(214, 0, 0);
}
.RedWarningHidden
{
    display: none;
}
.SmallPanelDropDownContainer
{
    display: flex;
    background-color: white;
    cursor: pointer;
    height: fit-content;
    position: relative;
}
.InputFieldContainerInvalid
{
    pointer-events: none !important;
    -webkit-filter: brightness(90%);
}
.SmallPanelDropDownContainer:has(+ *:not(.RedWarningHidden)),.BasicHeaderAndInputWrapper .RedWarningText
{
  margin-bottom: 0 !important;
}


.BasicButtonSmallPanel
{
    background-color: #ED7C42;
    color: white;
    border: 0;
    margin-left: auto;
    position: relative;
}

.TextButtonSmallPanel
{
    background-color: transparent;
    color: #e00000;
    border: 0;
    margin-left: auto;
    position: relative;
}
.SmallPanelDropDownInputWrapper
{
    flex-grow: 1;
    height: fit-content;
    display: flex;
    background-color: white;
}
.SmallPanelDropDownInputWrapper p
{
    margin: auto 0;
}
.InputFieldInsideSmallPanel
{
    width: 100%;
    height: 100%;
    display: flex;
    background-color: white;
    border: 0;
    cursor: auto !important;
}
.MiniDropDownText
{
    height: fit-content;
    background-color: white;
    border: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ChevronInsideInput
{
    object-fit: contain !important;
    object-position: center !important;
    margin: auto;
    margin-right: 0;
}
.CircleInsideInputField
{
    border-radius: 100%;
    object-fit: cover !important;
    object-position: center !important;
}
.SmallPanelBottomButtonWrapper
{
    width: fit-content;
    height: fit-content;
    margin-left: auto;
    display: flex;
}
.DropDownSelectionContainerPanel
{
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0px;
    right: 0px;
    position: absolute;
    z-index: 99;
}

.DropDownContainer
{
    width: 100%;
    height: fit-content;
    position: relative;
    overflow: auto;
    z-index: 99;
}
.SignInDropDownContainer
{
    width: fit-content;
    margin-left: auto;
    max-height: none;
}
.DropDownSelectionContainer
{
    width: 100%;
    height: fit-content;
    position: relative;
    border: 0;
    background: white;
    display: flex;
    /* flex-direction: column; */
}
.DropDownWithStatus:has(.DropDownStatusText)
{
    -webkit-filter: brightness(90%);
}
.DropDownSelectionContainerSelected
{
    background: #ED7C42;
}

.DropDownSelectionContainerSelected p
{
    color: #ffffff !important;
}
.DropDownSelectionContainerSelected .DropDownSelectionText
{
    font-family: 'Inter Bold';
}

.DropDownSelectionContainer:hover, .DropDownSelectionContainer:active
{
    -webkit-filter: brightness(70%);
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.DropDownSelectionText, .SignInTopDropDownText
{
    font-family: 'Inter Medium';
    width: 90%;
    height: fit-content;
    position: relative;
    color: #000000;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto 0;
    text-align: start;
}
.DropDownSelectionIMGIcon
{
    object-fit: contain !important;
    object-position: center !important;
    margin: auto 0;
}
.RoomStatusUnavailableText
{
    color: #747474;
    position: absolute;
    font-style: italic;
}
.DropDownSelectionContainerSelected .RoomStatusUnavailableText
{
    color: #ffffff;
}
.CloseButtonInsidePanel
{
    margin: auto;
    margin-right: 0;
}
.CloseButton
{
    position: absolute;
    object-fit: contain !important;
    object-position: center !important;
    cursor: pointer;
}
.BasicCircularRectangleText
{
    width: fit-content;
    height: fit-content;
    color: white;
}
.DropDownSelectionContainer .BasicCircularRectangleText
{
    margin: auto 0;
}
.InputFieldWithButton
{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.FirstNumberPhoneNumberWrapper
{
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    background-color: white;
    color: #667085;
}
.PhoneCodeNumberTextWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    background-color: white;
    white-space: nowrap;
}

@media screen and (max-width: 560px)
{
    .SmallPanelHeaderText
    {
        font-size: 3.2vw;
        margin-bottom: 1vw;
    }
    .FlexFullDisplayPanel
    {
        padding: 3vw 3vw;
        border-radius: 1vw;
    }
    .TopHeaderContainerInsidePanel
    {
        padding: 3vw 2vw;
        box-shadow: 0 0.5vw 0.4vw rgba(0, 0, 0, 0.2);
        border-radius: 1vw;
    }
    .TopHeaderContentWrapper *:not(:last-child)
    {
        margin-right: 0.5vw;
    }
    .PingExprezyText
    {
        font-size: 2vw;
        padding: 0.8vw 1vw;
        border-radius: 0.5vw;
    }
    .FlexContainerWithTopPanel
    {
        border-radius: 1vw;
    }
    .InputFieldHeaderText, .RedWarningText
    {
        font-size: 2.4vw;
        margin-bottom: 0.5vw;
    }
    .SmallPanelDropDownContainer
    {
        min-width: 35vw;
        border-radius: 0.5vw;
        margin-bottom: 2vw;
    }
    .SmallPanelDropDownContainer + .RedWarningText
    {
        margin-top: 0.5vw;
        margin-bottom: 2vw;
    }
    .WarningTextWithIcon
    {
        margin-top: 0.5vw;
    }
    .WarningInputUrlIcon
    {
        width: 3vw;
        height: 3vw;
        margin-right: 1vw;
    }
    .WarningTextMarginTop
    {
        margin-top: 0.5vw;
    }
    .SmallPanelDropDownContainer .InputFieldInsideSmallPanel, .SmallPanelDropDownContainer .SmallPanelDropDownInputWrapper, .FirstNumberPhoneNumberWrapper, .InputFieldWithIcon, .InputFieldOutline
    {
        outline: 0.4vw solid rgb(225, 225, 225);
        outline-offset: -0.2vw;
    }
    .InputFieldWarningOutline
    {
        outline: 0.4vw solid rgb(255, 0, 0);
        outline-offset: -0.2vw;
    }
    .SmallPanelDropDownInputWrapper, .InputFieldInsideSmallPanel, .PhoneCodeNumberTextWrapper, .MiniDropDownText
    {
        border-radius: 0.5vw;
        padding: 2.2vw 2vw;
        font-size: 2.4vw;
    }
    .ContactUsMessageInputField
    {
        height: 8em;
        padding: 2.2vw 2vw;
    }
    .MiniDropDownText
    {
        width: 25vw;
        padding: 2.2vw 2vw;
    }
    .FirstNumberPhoneNumberWrapper
    {
        border-radius: 1vw;
        margin-right: -0.2vw;
        font-size: 2.4vw;
    }
    .BasicButtonSmallPanel, .TextButtonSmallPanel
    {
        font-size: 3vw;
        border-radius: 0.8vw;
        padding: 1.8vw 4vw;
    }
    .SmallPanelBottomButtonWrapper button:not(:last-child)
    {
        margin-right: 1.5vw;
    }
    .ChevronInsideInput
    {
        width: 3vw;
        height: 3vw;
    }
    .CircleInsideInputField
    {
        width: 3vw;
        height: 3vw;
        border: 0.3vw solid #D0D5DD;
        margin-right: 1vw;
    }
    .DropDownContainer
    {
        border-radius: 1vw;
        box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.2);
        max-height: 45vw;
    }
    .ContainerFlex2
    {
        bottom: -1vw;
    }
    .MoreThanOneButtonFlexWrapper *:not(:last-child)
    {
        margin-right: 1vw !important;
    }
    .ResendChangeEmailButtonWrapper
    {
        margin: 3vw auto;
        /* margin-bottom: 3vw; */
    }
    .DropDownSelectionText
    {
        font-size: 2.5vw;
    }
    .DropDownSelectionContainer .BasicCircularRectangleText
    {
        margin-left: 3vw;
    }
    .BasicCircularRectangleText
    {
        padding: 0.4vw 1vw;
        border-radius: 3vw;
        font-size: 2vw;
    }
    .SignInTopDropDownText
    {
        font-size: 2.8vw;
    }
    .DropDownSelectionIMGIcon
    {
        width: 3.8vw;
        height: 3.8vw;
        margin-right: 1.5vw;
    }
    .SignInDropDownContainer .DropDownSelectionContainer
    {
        min-width: 30vw;
    }
    .DropDownSelectionContainer
    {
        padding: 2.2vw 2vw;
        /* height: 11vw; */
    }
    .DropDownWithStatus
    {
        padding: 2.5vw 2vw;
    }
    .RoomStatusUnavailableText
    {
        bottom: 1vw;
        font-size: 2vw;
        left: 4vw;
    }
    .CloseButtonInsidePanel
    {
        width: 3.3vw;
        height: 3.3vw;
    }
    .TopHeaderContainerInsidePanel .CloseButtonInsidePanel
    {
        margin-left: -3.3vw;
    }
    .CloseButton
    {
        right: 2vw;
        top: 2vw;
        width: 6vw;
        height: 6vw;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .SmallPanelHeaderText
    {
        font-size: calc(10px + 0.5vw);
        margin-bottom: 5px;
    }
    .FlexFullDisplayPanel
    {
        padding: calc(10px + 0.5vw) calc(12px + 0.5vw);
        border-radius: 0.5vw;
    }
    .TopHeaderContainerInsidePanel
    {
        padding: calc(8px + 0.5vw) calc(2px + 0.5vw);
        box-shadow: 0 0.3vw calc(0px + 0.2vw) rgba(0, 0, 0, 0.2);
        border-radius: 0.5vw;
    }
    .TopHeaderContentWrapper *:not(:last-child)
    {
        margin-right: 0.5vw;
    }
    .PingExprezyText
    {
        font-size: calc(5px + 0.5vw);
        padding: 0.5vw 0.7vw;
        border-radius: 0.3vw;
    }
    .FlexContainerWithTopPanel
    {
        border-radius: 0.5vw;
    }
    .InputFieldHeaderText, .RedWarningText
    {
        font-size: calc(7px + 0.5vw);
        margin-bottom: 0.5vw;
    }
    .SmallPanelDropDownContainer
    {
        min-width: calc(170px + 0.1vw);
        border-radius: 0.5vw;
        margin-bottom: 10px;
    }
    .SmallPanelDropDownContainer + .RedWarningText
    {
        margin-top: 2px;
        margin-bottom: 10px;
    }
    .WarningTextWithIcon
    {
        margin-top: 1px;
    }
    .WarningInputUrlIcon
    {
        width: calc(10px + 0.5vw);
        height: calc(10px + 0.5vw);
        margin-right: 0.5vw;
    }
    .WarningTextMarginTop
    {
        margin-top: 2px;
    }
    .SmallPanelDropDownContainer .InputFieldInsideSmallPanel, .SmallPanelDropDownContainer .SmallPanelDropDownInputWrapper, .FirstNumberPhoneNumberWrapper, .InputFieldWithIcon, .InputFieldOutline
    {
        outline: 0.2vw solid rgb(225, 225, 225);
        outline-offset: -0.1vw;
    }
    .InputFieldWarningOutline
    {
        outline: 0.2vw solid rgb(255, 0, 0);
        outline-offset: -0.1vw;
    }
    .SmallPanelDropDownInputWrapper, .InputFieldInsideSmallPanel, .PhoneCodeNumberTextWrapper, .MiniDropDownText
    {
        padding: calc(6px + 0.5vw) calc(5px + 0.5vw);
        border-radius: 0.5vw;
        font-size: calc(8px + 0.5vw);
    }
    .ContactUsMessageInputField
    {
        height: 8em;
        padding: calc(6px + 0.5vw) calc(5px + 0.5vw);
    }
    .MiniDropDownText
    {
        width: calc(120px + 0.5vw);
        padding: calc(6px + 0.5vw) calc(5px + 0.5vw);
    }
    .FirstNumberPhoneNumberWrapper
    {
        border-radius: 0.5vw;
        font-size: calc(8px + 0.5vw);
        margin-right: -0.1vw;
    }
    .BasicButtonSmallPanel, .TextButtonSmallPanel
    {
        font-size: calc(8.5px + 0.5vw);
        border-radius: 0.4vw;
        padding: calc(4px + 0.5vw) calc(10px + 0.5vw);
    }
    .SmallPanelBottomButtonWrapper button:not(:last-child)
    {
        margin-right: 5px;
    }
    .ChevronInsideInput
    {
        width: calc(8px + 0.5vw);
        height: calc(8px + 0.5vw);
    }
    .CircleInsideInputField
    {
        width: calc(12px + 0.5vw);
        height: calc(12px + 0.5vw);
        margin-top: -2px;
        margin-bottom: -2px;
        border: 1.5px solid #D0D5DD;
        margin-right: calc(2px + 0.5vw);
    }
    .DropDownContainer
    {
        border-radius: calc(1px + 0.5vw);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        max-height: calc(180px + 0.5vw);
    }
    .ContainerFlex2
    {
        bottom: calc(-2px - 0.5vw);
    }
    .ResendChangeEmailButtonWrapper
    {
        margin: calc(10px + 0.5vw) auto;
        /* margin-bottom: calc(10px + 0.5vw); */
    }
    .MoreThanOneButtonFlexWrapper *:not(:last-child)
    {
        margin-right: calc(3px + 0.5vw) !important;
    }
    .DropDownSelectionText
    {
        font-size:  calc(9px + 0.5vw);
    }
    .DropDownSelectionContainer .BasicCircularRectangleText
    {
        margin-left: calc(10px + 0.5vw);
    }
    .BasicCircularRectangleText
    {
        padding: 0.3vw 0.8vw;
        border-radius: calc(10px + 0.5vw);
        font-size: calc(6px + 0.5vw);
    }
    .SignInTopDropDownText
    {
        font-size:  calc(10px + 0.5vw);
    }
    .DropDownSelectionIMGIcon
    {
        width: calc(14px + 0.5vw);
        height: calc(14px + 0.5vw);
        margin-right: calc(3px + 0.5vw);
    }
    .SignInDropDownContainer .DropDownSelectionContainer
    {
        min-width: calc(150px + 0.5vw);
    }
    .DropDownSelectionContainer
    {
        padding: calc(6px + 0.5vw) calc(5px + 0.5vw);
        /* height: calc(40px + 1vw); */
    }
    .DropDownWithStatus
    {
        padding: calc(10px + 0.5vw) calc(5px + 0.5vw);
    }
    .RoomStatusUnavailableText
    {
        bottom: 0.5vw;
        font-size: 1.5vw;
        left: calc(8px + 1vw);
    }
    .CloseButtonInsidePanel
    {
        width: calc(12px + 0.5vw);
        height: calc(12px + 0.5vw);
    }
    .TopHeaderContainerInsidePanel .CloseButtonInsidePanel
    {
        margin-left: calc(-12px - 0.5vw);
    }
    .CloseButton
    {
        right: calc(5px + 0.5vw);
        top: calc(5px + 0.5vw);
        width: calc(40px + 0.5vw);
        height: calc(40px + 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .SmallPanelHeaderText
    {
        font-size: 15.5px;
        margin-bottom: 4px;
    }
    .FlexFullDisplayPanel
    {
        padding: 17px 17px;
        border-radius: 5px;
    }
    .TopHeaderContainerInsidePanel
    {
        padding: 15px 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }
    .TopHeaderContentWrapper *:not(:last-child)
    {
        margin-right: 5px;
    }
    .PingExprezyText
    {
        font-size: 12px;
        padding: 5px 7px;
        border-radius: 5px;
    }
    .FlexContainerWithTopPanel
    {
        border-radius: 5px;
    }
    .InputFieldHeaderText, .RedWarningText
    {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .SmallPanelDropDownContainer
    {
        min-width: 180px;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .SmallPanelDropDownContainer + .RedWarningText
    {
        margin-top: 2px;
        margin-bottom: 10px;
    }
    .WarningTextWithIcon
    {
        margin-top: 1px;
    }
    .WarningInputUrlIcon
    {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }
    .WarningTextMarginTop
    {
        margin-top: 2px;
    }
    .SmallPanelDropDownContainer .InputFieldInsideSmallPanel, .SmallPanelDropDownContainer .SmallPanelDropDownInputWrapper, .FirstNumberPhoneNumberWrapper, .InputFieldWithIcon, .InputFieldOutline
    {
        outline: 2px solid rgb(225, 225, 225);
        outline-offset: -2px;
    }
    .InputFieldWarningOutline
    {
        outline: 2px solid rgb(255, 0, 0);
        outline-offset: -2px;
    }
    .SmallPanelDropDownInputWrapper, .InputFieldInsideSmallPanel, .PhoneCodeNumberTextWrapper, .MiniDropDownText
    {
        border-radius: 5px;
        padding: 12px 10px;
        font-size: 12.5px;
    }
    .ContactUsMessageInputField
    {
        height: fit-content;
        padding: 12px 10px;
    }
    .MiniDropDownText
    {
        width: 150px;
        padding: 12px 8px;
    }
    .FirstNumberPhoneNumberWrapper
    {
        border-radius: 5px;
        margin-right: -2px;
        font-size: 12.5px;
    }
    .BasicButtonSmallPanel, .TextButtonSmallPanel
    {
        font-size: 14px;
        border-radius: 5px;
        padding: 8px 15px;
    }
    .SmallPanelBottomButtonWrapper button:not(:last-child)
    {
        margin-right: 5px;
    }
    .ChevronInsideInput
    {
        width: 13px;
        height: 13px;
    }
    .CircleInsideInputField
    {
        width: 18px;
        height: 18px;
        margin: -2px 0;
        border: 1px solid #D0D5DD;
        margin-right: 8px;
    }
    .DropDownContainer
    {
        border-radius: 5px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        max-height:200px;
    }
    .ContainerFlex2
    {
        bottom: -5px;
    }
    .ResendChangeEmailButtonWrapper
    {
        margin: 18px auto;
        /* margin-bottom: 18px; */
    }
    .MoreThanOneButtonFlexWrapper *:not(:last-child)
    {
        margin-right: 10px !important;
    }
    .DropDownSelectionText
    {
        font-size: 14px;
    }
    .DropDownSelectionContainer .BasicCircularRectangleText
    {
        margin-left: 20px;
    }
    .BasicCircularRectangleText
    {
        padding: 3px 8px;
        border-radius: 15px;
        font-size: 11px;
    }
    .SignInTopDropDownText
    {
        font-size: 15px;
    }
    .DropDownSelectionIMGIcon
    {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    .SignInDropDownContainer .DropDownSelectionContainer
    {
        min-width: 180px;
    }
    .DropDownSelectionContainer
    {
        padding: 10px;
        /* height: 50px; */
    }
    .DropDownWithStatus
    {
        padding: 15px 10px;
    }
    .RoomStatusUnavailableText
    {
        bottom: 5px;
        font-size: 10px;
        left: 10px;
    }
    .CloseButtonInsidePanel
    {
        width: 15px;
        height: 15px;
    }
    .TopHeaderContainerInsidePanel .CloseButtonInsidePanel
    {
        margin-left: -15px;
    }
    .CloseButton
    {
        right: 10px;
        top: 10px;
        width: 50px;
        height: 50px;
    }
    .FilterleftPanel .CloseButtonInsidePanel
    {
        display: none;
    }
}

.DropDownInvalid
{
    background-color: #e9e9e9 !important;
}

.DropDownInvalid p
{
    color: #b0b0b0;
}


/* ------------------------------------- TOP SEARCH ------------------------------- */

.SearchHotelInputFieldWrapper
{
    width: fit-content;
    height: fit-content;
    margin: auto 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.SearchInputFieldTopBottomTextWrapper
{
    color: #333333;
    flex: 1;
    /* width: fit-content; */
    height: fit-content;
    margin: auto 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.BasicInputFieldChevronIconSearch
{
    margin: auto;
    margin-right: 0;
}
.IndexSearchButton
{
    margin: auto;
}
.SectionSeparatorContainer
{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.SearchTopRightSectionButtonWrapper
{
    flex-grow: 1;
    height: fit-content;
    display: grid;
    margin-left: auto;
    margin-right: 0;
    grid-template-columns: repeat(3, 1fr);
}
.SearchTopRightSectionButtonWrapper .HoverableContentInsideInputField
{
    flex-grow: 1;
}
.SearchHotelIndexFormContainer
{
    height: fit-content;
    background: white;
    position: relative;
    margin: auto;
    margin-bottom: 0;
    border-style: solid;
    border-color: #ffffff;
}

.SearchHotelInputFieldContainerIndex, .SearchTopNonIndexSection
{
    flex-grow: 1;
    height: fit-content;
    background-color: #F2F4F7;
    display: flex;
    cursor: pointer;
    position: relative;
}
.CheckInCheckOutDateHotelDetailsWrapper, .CheckInCheckOutDateHotelDetailsWrapper .HoverableContentInsideInputField
{
    width: 100%;
    display: flex;
}
.HoverableContentInsideInputField
{
    display: flex;
    position: relative;
}
.SearchHotelInputFieldIndex
{
    flex-grow: 1;
    height: fit-content;
    margin: auto;
}
.BasicIconInsideInput, .BasicIconInsideInput2, .BasicIconInsideButton, .BasicIconInsideButton2, .BasicIconInsideInput3
{
    object-fit: contain !important;
    object-position: center !important;
}
.MainContentSection
{
    width: 100%;
    height: fit-content;
    background-color: white;
}

.TopBottomIndexSection, .BottomIndexContainer
{
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.BottomMenuSection
{
    width: 100%;
    height: fit-content;
    background: linear-gradient(to bottom, #f9fdff, #F0F9FF);
    /* background-color: #F0F9FF; */
}
.TopTextQuotes, .BottomTextQuotes
{
    margin: 0 auto;
    color: white;
    z-index: 1;
}
.PaddingButtonRight
{
    left: auto !important;
    right: 0 !important;
}
.NextPreviousSwiperButton
{
    display: flex;
    border-radius: 100%;
    border: 0;
    background-color: rgba(255, 255, 255, 0.8);
}
.NextPreviousSwiperButton img
{
    object-fit: contain !important;
    object-position: center !important;
    margin: auto;
}
.PopularAreasLeftRightButtonContainer
{
    position: absolute;
    width: fit-content;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
}
.DropDownStatusText
{
    position: absolute;
    color: #575757;
}
.PaddingButtonLeft img
{
    rotate: 90deg;
}
.PaddingButtonRight img
{
    rotate: -90deg;
}
.SearchTopNonIndexButton
{
    width: fit-content;
    height: auto;
    display: flex;
    box-shadow: 0 0 0 !important;
}
@media screen and (max-width: 560px)
{
    .BasicInputTextTop
    {
        width: 100%;
        font-size: 2.6vw;
        margin: 0.1vw 0;
    }
    .BasicInputTextBottom
    {
        font-size: 2.1vw;
    }
    .DropDownStatusText
    {
        font-size: 2.0vw;
        bottom: 0.5vw;
    }
    .BasicInputFieldChevronIconSearch
    {
        width: 2.2vw;
        height: 2.2vw;
    }
    .IndexSearchButton
    {
        font-size: 2.7vw;
        padding: 2.2vw 15vw;
        margin-top: -4.4vw;
    }
    /* .BasicPanelSwiperMainContainer
    {
        margin-bottom: 2vw;
    } */
    .TrendingHotelsSwiperContainer
    {
        width: 93%;
    }
    .PopularAreasPanelContainer, .HotelRoomPanelSwiperContainer
    {
        width: 93%;
    }
    .SectionSeparatorContainer
    {
        padding: 5vw 0;
    }
    .SectionSeparatorContainerShortenBottom:not(:last-child)
    {
        padding-bottom: 3vw;
    }
    .SectionHeaderTextIndex
    {
        font-size: 4vw;
        line-height: 5vw;
        margin: 0 3vw;
    }
    .SectionHeaderTextIndex2
    {
        font-size: 3.3vw;
        /* margin: 0 5vw; */
    }
    .SearchHotelIndexFormContainer
    {
        width: 85vw;
        padding: 2vw;
        padding-bottom: 6vw;
        border-radius: 1vw;
        top: 1vw;
        box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.2);
    }
    .SearchHotelInputFieldContainerIndex
    {
        border-radius: 1vw;
        padding: 3vw 2vw;
    }
    .SearchTopNonIndexSection
    {
        border-radius: 1vw;
        padding: 1.5vw 2vw;
    }
    .SearchHotelInputFieldIndex
    {
        font-size: 3.5vw;
    }
    .BasicIconInsideInput
    {
        width: 4vw;
        height: 4vw;
        margin: auto 1.2vw;
    }
    .BasicIconInsideInput2
    {
        width: 3.5vw;
        height: 3.5vw;
        margin: auto 1.5vw;
    }
    .BasicIconInsideInput3
    {
        width: 3vw;
        height: 3vw;
        margin: auto 1vw;
    }
    .BottomIndexSection
    {
        margin-top: 10vw;
    }
    .TopTextQuotes, .BottomTextQuotes
    {
        font-size: 3.2vw;
    }
    .TopTextQuotes
    {
        margin-top: 20vw;
        margin-bottom: 10vw;
    }
    .BottomTextQuotes
    {
        margin-top: 13vw;
        margin-bottom: 13vw;
    }
    .NextPreviousSwiperButton
    {
        width: 9vw;
        height: 9vw;
        margin: auto 0.5vw;
    }
    .NextPreviousSwiperButton img
    {
        width: 3vw;
        height: 3vw;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .BasicInputTextTop
    {
        font-size: calc(9px + 0.5vw);
        line-height: calc(11px + 0.5vw);
        margin: 0.05vw 0;
    }
    .BasicInputTextBottom
    {
        font-size: calc(7px + 0.5vw);
    }
    .DropDownStatusText
    {
        font-size: calc(6px + 0.5vw);
        bottom: 0.4vw;
    }
    .BasicInputFieldChevronIconSearch
    {
        width: calc(9px + 0.5vw);
        height: calc(9px + 0.5vw);
    }
    .IndexSearchButton
    {
        font-size: calc(9px + 0.5vw);
        padding: calc(8px + 0.5vw) calc(80px + 0.5vw);
        margin-top: calc(-6px - 0.5vw);
    }
    /* .BasicPanelSwiperMainContainer
    {
        margin-bottom: calc(10px + 0.5vw);
    } */
    .TrendingHotelsSwiperContainer
    {
        width: 97%;
    }
    .PopularAreasPanelContainer, .HotelRoomPanelSwiperContainer
    {
        width: 97%;
    }
    .SectionSeparatorContainer
    {
        padding: calc(20px + 0.5vw) 0;
    }
    .SectionSeparatorContainerShortenBottom:not(:last-child)
    {
        padding-bottom: calc(5px + 0.5vw);
    }
    .SectionHeaderTextIndex
    {
        font-size: calc(16px + 0.5vw);
        line-height: calc(20px + 0.5vw);
        margin: 0 1.5vw;
    }
    .SectionHeaderTextIndex2
    {
        font-size: calc(14px + 0.5vw);
        /* margin: 0 calc(30px + 0.5vw); */
    }
    .SearchHotelIndexFormContainer
    {
        width: 80vw;
        padding: calc(10px + 0.5vw);
        padding-bottom: calc(15px + 0.5vw);
        border-radius: 1vw;
        top: calc(20px + 0.5vw);
        box-shadow: 0 0.5vw calc(5px + 0.5vw) rgba(0, 0, 0, 0.2);
    }
    .SearchHotelInputFieldContainerIndex
    {
        border-radius: 1vw;
        padding: calc(10px + 0.5vw) calc(10px + 0.5vw);
    }
    .SearchTopNonIndexSection
    {
        border-radius: 0.5vw;
        padding: calc(5px + 0.5vw) calc(10px + 0.5vw);
    }
    .SearchHotelInputFieldIndex
    {
        font-size: calc(12px + 0.5vw);
    }
    .BasicIconInsideInput
    {
        width: calc(18px + 0.5vw);
        height: calc(18px + 0.5vw);
        margin: auto calc(5px + 0.5vw);
    }
    .BasicIconInsideInput2
    {
        width: calc(14px + 0.5vw);
        height: calc(14px + 0.5vw);
        margin: auto calc(5px + 0.5vw);
    }
    .BasicIconInsideInput3
    {
        width: calc(10px + 0.5vw);
        height: calc(10px + 0.5vw);
        margin: auto calc(0px + 0.5vw);
    }
    .BottomIndexSection
    {
        margin-top: 80px;
    }
    .TopTextQuotes, .BottomTextQuotes
    {
        font-size: calc(16px + 0.5vw);
    }
    .TopTextQuotes
    {
        margin-top: calc(120px + 0.5vw);
        margin-bottom: calc(20px + 0.5vw);
        max-width: 90%;
    }
    .BottomTextQuotes
    {
        margin-top: calc(70px + 0.5vw);
        margin-bottom: calc(70px + 0.5vw);
    }
    .NextPreviousSwiperButton
    {
        width: calc(45px + 0.5vw);
        height: calc(45px + 0.5vw);
        margin: auto 0.5vw;
    }
    .NextPreviousSwiperButton img
    {
        width: calc(12px + 0.5vw);
        height: calc(12px + 0.5vw);
    }
}

@media screen and (min-width: 1201px)
{
    .BasicInputTextTop
    {
        font-size: 15px;
        margin: 1px 0;
    }
    .BasicInputTextBottom
    {
        font-size: 11px;
    }
    .DropDownStatusText
    {
        font-size: 10px;
        bottom: 4px;
    }
    .BasicInputFieldChevronIconSearch
    {
        width: 14px;
        height: 14px;
    }
    .IndexSearchButton
    {
        font-size: 15.5px;
        padding: 14px 90px;
        margin-top: -15px;
    }
    /* .BasicPanelSwiperMainContainer
    {
        margin-bottom: 15px;
    } */
    .TrendingHotelsSwiperContainer
    {
        width: 97%;
    }
    .PopularAreasPanelContainer, .HotelRoomPanelSwiperContainer
    {
        width: 97%;
    }
    .SectionSeparatorContainer
    {
        padding: 30px 0;
    }
    .SectionSeparatorContainerShortenBottom:not(:last-child)
    {
        padding-bottom: 15px;
    }
    .SectionHeaderTextIndex
    {
        font-size: 23px;
        line-height: 27px;
        margin: 0 15px;
    }
    .SectionHeaderTextIndex2
    {
        font-size: 22px;
        /* margin: 0 50px; */
    }
    .SearchHotelIndexFormContainer
    {
        width: 950px;
        padding: 20px;
        padding-bottom: 30px;
        border-radius: 12px;
        top: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }
    .SearchHotelInputFieldContainerIndex
    {
        border-radius: 5px;
        padding: 15px 15px;
    }
    .SearchTopNonIndexSection
    {
        border-radius: 5px;
        padding: 10px 15px;
    }
    .SearchHotelInputFieldIndex
    {
        font-size: 19px;
    }
    .BasicIconInsideInput
    {
        width: 20px;
        height: 20px;
        margin: auto 10px;
    }
    .BasicIconInsideInput2
    {
        width: 18px;
        height: 18px;
        margin: auto 10px;
    }
    .BasicIconInsideInput3
    {
        width: 16px;
        height: 16px;
        margin: auto 6px;
    }
    .BottomIndexSection
    {
        margin-top: 80px;
    }
    .TopTextQuotes, .BottomTextQuotes
    {
        font-size: 25px;
    }
    .TopTextQuotes
    {
        margin-top: 140px;
        margin-bottom: 40px;
    }
    .BottomTextQuotes
    {
        margin-top: 90px;
        margin-bottom: 90px;
    }
    .NextPreviousSwiperButton
    {
        width: 45px;
        height: 45px;
        margin: auto 5px;
    }
    .NextPreviousSwiperButton img
    {
        width: 18px;
        height: 18px;
    }
}

.MainSectionWithBlueHeader, .MainSectionPaymentForm, .MainSectionBasicWithBlue, .MainSectionWithoutAnyAdd
{
    max-width: 1450px;
    width: 90%;
    height: fit-content;
    display: flex;
    margin: 0 auto;
}

.TopNonIndexSearchSection
{
    display: flex;
}
.SearchTopNonIndexButton p
{
    margin: auto;
}

@media screen and (max-width: 560px)
{
    .MainSectionWithBlueHeader
    {
        width: 100%;
        padding-top: 50vw !important;
    }
    .MainSectionWithoutAnyAdd
    {
        background-color: #2196F3;
        padding-top: 11vw !important;
    }
    .MainSectionPaymentForm
    {
        width: 95%;
        padding-top: 29vw;
    }
    .MainSectionBasicWithBlue
    {
        width: 95%;
        padding-top: 26vw;
    }
    .NotFoundWrapper
    {
        margin: 10vw 0;
    }
    .TopNonIndexSearchSection
    {
        margin: 2vw auto;
        flex-direction: column;
    }
    .CitySearchBarNonIndex
    {
        width: 100%;
        margin-bottom: 1.5vw;
    }
    .SearchTopRightSectionButtonWrapper
    {
        width: 100%;
        column-gap: 1.5vw;
    }
    .SearchTopNonIndexButton
    {
        padding: 1.6vw 8vw;
        margin: auto;
        margin-top: 1.5vw;
    }
    /* .SearchTopNonIndexButton
    {
        padding: 2.5vw 2vw;
    } */
    .SearchTopNonIndexButton p
    {
        font-size: 2.5vw;
    }
    .SearchTopNonIndexButton img
    {
        width: 2.5vw;
        height: 2.5vw;
        margin-right: 1vw;
    }

    /* .CitySearchBarNonIndex .BasicInputTextTop
    {
        font-size: 3vw;
        margin-bottom: 0;
    } */
}
@media screen and (max-width: 960px)  and (min-width: 561px)
{
    .MainSectionWithBlueHeader
    {
        width: 100%;
        padding-top: calc(160px + 10vw) !important;
        /* margin-top: calc(250px + 0.5vw) !important; */
    }
    .MainSectionWithoutAnyAdd
    {
        padding-top: calc(35px + 3vw) !important;
    }
    .MainSectionPaymentForm
    {
        width: 95%;
        padding-top: calc(80px + 10vw);
    }
    .MainSectionBasicWithBlue
    {
        width: 95%;
        padding-top: calc(60px + 10vw);
    }
    .NotFoundWrapper
    {
        margin: calc(60px + 0.5vw) 0;
    }
    .TopNonIndexSearchSection
    {
        flex-direction: column;
        margin: calc(5px + 0.5vw) auto;
    }
    .CitySearchBarNonIndex
    {
        width: 100% !important;
        margin-bottom: calc(4px + 0.5vw);
    }
    .SearchTopRightSectionButtonWrapper
    {
        width: 100%;
        column-gap: calc(4px + 0.5vw);
    }
    .SearchTopNonIndexButton
    {
        padding: calc(5px + 0.5vw) calc(60px + 0.5vw) !important;
        margin: auto !important;
        margin-top: calc(4px + 0.5vw) !important;
    }
    .SearchTopNonIndexButton p
    {
        font-size: calc(10px + 0.5vw) !important;
        margin-left: 5px !important;
        display: flex !important;
    }
    .SearchTopNonIndexButton img
    {
        width: calc(10px + 0.5vw) !important;
        height: calc(10px + 0.5vw) !important;
        margin-right: 0 !important;
    }

    /* .CitySearchBarNonIndex .BasicInputTextTop
    {
        font-size: calc(13px + 0.5vw);
        margin-bottom: 0px;
    } */
}
@media screen and (max-width: 1200px)  and (min-width: 961px)
{
    .MainSectionWithBlueHeader, .MainSectionPaymentForm
    {
        padding-top: calc(160px + 0.5vw) !important;
    }
    .MainSectionWithoutAnyAdd
    {
        padding-top: calc(60px + 0.5vw) !important;
    }
    .MainSectionBasicWithBlue
    {
        padding-top: calc(150px + 0.5vw) !important;
    }
    .NotFoundWrapper
    {
        margin: calc(60px + 0.5vw) 0;
    }
    .TopNonIndexSearchSection
    {
        margin: calc(4px + 0.5vw) auto;
    }
    .CitySearchBarNonIndex
    {
        width: 30%;
        margin-right: calc(4px + 0.5vw);
    }
    .SearchTopRightSectionButtonWrapper
    {
        width: 100%;
        column-gap: calc(4px + 0.5vw);
    }
    .SearchTopNonIndexButton
    {
        padding: calc(5px + 0.5vw) calc(10px + 0.5vw);
        margin-left: calc(2px + 0.5vw);
    }
    .SearchTopNonIndexButton p
    {
        display: none;
    }
    .SearchTopNonIndexButton img
    {
        margin: auto;
        width: calc(15px + 0.5vw);
        height: calc(15px + 0.5vw);
    }
/*
    .CitySearchBarNonIndex .BasicInputTextTop
    {
        font-size: calc(11px + 0.5vw);
        margin-bottom: 0px;
    } */
}

@media screen and (min-width: 1201px)
{
    .MainSectionWithBlueHeader, .MainSectionPaymentForm
    {
        padding-top: 180px !important;
    }
    .MainSectionBasicWithBlue
    {
        padding-top: 180px !important;
    }
    .NotFoundWrapper
    {
        margin: 100px 0;
    }
    .MainSectionWithoutAnyAdd
    {
        padding-top:70px !important;
    }
    .TopNonIndexSearchSection
    {
        margin: 12px auto;
    }
    .CitySearchBarNonIndex
    {
        width: 40%;
        margin-right: 12px;
    }
    .SearchTopRightSectionButtonWrapper
    {
        column-gap: 12px;
    }
    .SearchTopNonIndexButton
    {
        padding: 10px 15px;
        margin-left: 10px;
    }
    .SearchTopNonIndexButton p
    {
        display: none;
    }
    .SearchTopNonIndexButton img
    {
        width: 20px;
        height: 20px;
        margin: auto;
    }
    /* .CitySearchBarNonIndex .BasicInputTextTop
    {
        font-size: 20px;
        margin-bottom: 0px;
    } */
}



/* --------------------------------------- CHECK BOX ----------------------------------------------- */

.FilterCheckBoxContainer
{
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    position: relative;
}
.CircleCheckBoxContainer .CheckBoxSpan
{
    border-radius: 100% !important;
    background-color: white;
}
.FilterCheckBoxContainer .CheckBoxSpan
{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: white;
    cursor: pointer;
}
.FilterCheckBox
{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.FilterCheckBoxInvalid
{
    pointer-events: none !important;
    -webkit-filter: brightness(90%);
}

.FilterCheckBoxContainer .CheckBoxSpan::after
{
    content:"";
    background-color: #50A9E1;
    background-size: 100% 100%;
    display: block;
    position: relative;
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-mask-box-image: url(../Assets/ButtonIcon/check.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: opacity 0.3s;
}
.CircleCheckBoxContainer .CheckBoxSpan::after
{
    background-color: white;
    -webkit-mask-box-image:none;
    border-radius: 100%;
}
.FilterCheckBox:checked ~ .CheckBoxSpan::after
{
    width: 100%;
    height: 100%;
    opacity: 1;
}

.FilterCheckBox:checked ~ .CheckBoxSpan
{
    background-color: #D3EAF7;
}

.CheckBoxText, .SliderSwitchText
{
    width: fit-content;
    height: fit-content;
    margin: auto 0;
    position: relative;
    text-overflow: ellipsis;
    color: #344054;
}

@media screen and (max-width: 560px)
{
    .FilterCheckBoxContainer
    {
        width: 2.5vw;
        height: 2.5vw;
    }

    .FilterCheckBoxContainer .CheckBoxSpan
    {
        border: 0.35vw solid #D0D5DD;
        border-radius: 0.5vw;
    }
    .FilterCheckBox:checked ~ .CheckBoxSpan
    {
        border: 0.4vw solid #50A9E1;
    }
    .CircleCheckBoxContainer > .FilterCheckBox:checked + .CheckBoxSpan
    {
      outline: 0.3vw solid #50A9E1;
      outline-offset: -0.1vw; /* Adds 10px space */
    }
    .CheckBoxText, .SliderSwitchText
    {
        font-size: 2.5vw;
        margin-left: 1.5vw;
        top: 0.1vw;
    }
    .SliderSwitchText
    {
        top: 0px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 561px)
{
    .FilterCheckBoxContainer
    {
        width: calc(8px + 0.5vw);
        height: calc(8px + 0.5vw);
    }

    .FilterCheckBoxContainer .CheckBoxSpan
    {
        border: 1.8px solid #D0D5DD;
        border-radius: 3px;
    }
    .FilterCheckBox:checked ~ .CheckBoxSpan
    {
        border: 2px solid #50A9E1;
    }
    .CircleCheckBoxContainer > .FilterCheckBox:checked + .CheckBoxSpan
    {
      outline: 3px solid #50A9E1;
      outline-offset: -1px; /* Adds 10px space */
    }
    .CheckBoxText, .SliderSwitchText
    {
        font-size: calc(7px + 0.5vw);
        margin-left: calc(4px + 0.5vw);
        top: 0.15vw;
    }
    .SliderSwitchText
    {
        top: 0px;
    }
}

@media screen and (min-width: 1201px)
{
    .FilterCheckBoxContainer
    {
        width: 13px;
        height: 13px;
    }
    .FilterCheckBoxContainer .CheckBoxSpan
    {
        border: 1.8px solid #D0D5DD;
        border-radius: 3px;
    }
    .FilterCheckBox:checked ~ .CheckBoxSpan
    {
        border: 2px solid #50A9E1;
    }
    .CircleCheckBoxContainer > .FilterCheckBox:checked + .CheckBoxSpan
    {
      outline: 3px solid #50A9E1;
      outline-offset: -1px; /* Adds 10px space */
    }
    .CheckBoxText, .SliderSwitchText
    {
        font-size: 12.5px;
        margin-left: 8px;
        top: 1.5px;
    }
    .SliderSwitchText
    {
        top: 0px;
    }
}

/* ========================= SEARCH RESULT PANEL ======================= */

.RoomHotelPanel
{
    width: 100%;
    height: fit-content;
    background-color: white;
    display: flex;
    position: relative;
}
.BasicContentScroller
{
    flex: 1;
    height: fit-content;
    overflow-y: auto;
    max-height: 70vh;
    -webkit-mask-box-image:  linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 98%, transparent 100%);
}

.LoadMoreButton
{
    margin: 0 auto;
}
.RoomHotelWrapper
{
    position: relative;
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}
.RoomHotelImageInsidePanel
{
    overflow: hidden;
}
.RoomHotelImageRightSectionInSeparatorsidePanel
{
    position: relative;
    display: flex;
    flex: 1;
}
.RoomHotelPanelInfoLeftWrapper, .RoomHotelPanelInfoOneWrapper
{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.RoomHotelPanelInfoRightWrapper
{
    width: fit-content;
    height: fit-content;
    margin-top: auto;
}
.RoomHotelNameInsidePanel, .PaymentSectionHeaderText
{
    color: #272727;
}
.NameofHotelPopularAreaLoadGrey, .HowManyHotelLeftPopularAreaLoadGrey
{
    margin: 0 auto;
}
.RoomHotelDescriptionInsidePanel
{
    color: #2f2f2f;
    /* flex: 1; */
    overflow: hidden;
    text-overflow: ellipsis;
    /* -webkit-mask-box-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgba(255, 255, 255, 1),rgba(255, 255, 255, 1),rgba(255, 255, 255, 1), rgba(255, 255, 255), rgba(255, 255, 255, 0.2), transparent); */
}
.RoomHotelPanelInfoLeftWrapper .RoomHotelDescriptionInsidePanel
{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.RoomHotelDisplayedNameInsidePanel
{
    width: auto;
    height: fit-content;
    background-color: #D3EAF7;
    margin-top: auto;
    display: flex;
}
.RoomHotelDisplayedNameInsidePanel img
{
    object-fit: contain !important;
    object-position: center !important;
}
.RoomHotelDisplayedNameInsidePanel p
{
    margin: auto 0;
}
.PingToGo2InsidePanel
{
    width: fit-content;
    height: fit-content;
    margin-left: auto;
    margin-bottom: 0;
}
.PingToGoHotelDetailsText
{
    width: fit-content;
    height: fit-content;
    margin-bottom: 0;
}
.PingToGo3InsidePanel
{
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    margin-right: 0;
    color: #1D2939;
    text-align: end;
}
.CuttedPriceText
{
    white-space: nowrap;
    color: #667085;
    margin-left: auto;
    text-decoration-line: line-through;
}
.OriginalPriceText, .OriginalPriceBiggerText
{
    white-space: nowrap;
    color: #ED7C42;
}
.OriginalPriceHotelDetailsText
{
    margin-left: auto;
    text-align: end;
}
.RoomHotelPanel:not(.notanimatable):hover,.RoomHotelPanel:not(.notanimatable):active
{
    scale: 98%;
    cursor: pointer;
    -webkit-transition: box-shadow 0.3s ease, scale 0.3s ease;
    -moz-transition: box-shadow 0.3s ease, scale 0.3s ease;
    -o-transition: box-shadow 0.3s ease, scale 0.3s ease;
    -ms-transition: box-shadow 0.3s ease, scale 0.3s ease;
    transition: box-shadow 0.3s ease, scale 0.3s ease;
}
.LabelGreyHeaderText, .LabelGreyHeaderSmallerText, .LabelGreyHeaderSmallerText2
{
    color: #272727;
    width: fit-content;
    height: fit-content;
}
.TopBottomHeaderButtonPaddingContainer
{
    flex: 1;
    height: fit-content;
    display: flex;
    position: relative;
}
.SmallerRoomDescriptionText img
{
    object-fit: contain;
    object-position: center;
}
.PingExprezyViewMoreContainer
{
    max-height: 70vh;
    overflow-y: auto;
}
.ListofExprezyAllContainer
{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 560px)
{
    .RoomHotelPanel
    {
        width: 97%;
        margin: 0 auto;
        border-radius: 0.8vw;
        margin-bottom: 2.5vw;
        box-shadow: 0 0.2vw 0.2vw rgba(0, 0, 0, 0.2);
    }
    .RoomHotelPanelContainer .RoomHotelPanel
    {
        width: 100%;
    }
    .BasicContentScroller
    {
        margin-top: 0.2vw;
        padding: 0 1vw;
    }
    .BasicContentScroller > *:last-child
    {
        margin-bottom: 10vw;
    }
    .LoadMoreButton
    {
        margin-top: 5px;
    }
    .RoomHotelWrapper
    {
        height: fit-content;
        padding: 0;
        flex-direction: column;
    }
    .RoomHotelImageInsidePanel
    {
        width: 100%;
        height: 20vw;
        border-radius: 0.8vw;
    }
    .RoomHotelImageRightSectionInSeparatorsidePanel
    {
        padding: 1vw 3vw;
        padding-bottom: 2vw;
        height: fit-content;
        flex-direction: column;
    }
    .RoomHotelPanelInfoRightWrapper
    {
       width: 100%;
       display: flex;
    }

    .MyPingPanelContentContainer .RoomBottomInfoLeft
    {
        width: 100%;
        display: flex;
        border-top: 0.4vw solid #D0D5DD;
        border-bottom: 0.4vw solid #D0D5DD;
    }
    .MyPingPanelContentContainer .RoomHotelBenefitsInsidePanel
    {
        display: none;
    }
    .MyPingPanelContentContainer .RoomStatusandNameWrapper
    {
        width: 100%;
        display: flex;
        margin-bottom: 1vw;
    }
    .MyPingPanelContentContainer .RoomStatusandNameWrapper .RoomBenefitsPanel
    {
        order: 2;
        margin-left: auto;
    }
    .MyPingPanelContentContainer .RoomStatusandNameWrapper .RoomHotelNameInsidePanel
    {
        order: 1;
    }

    .RoomHotelPanelInfoRightWrapper .RoomBottomInfoLeft .InputFieldMargin3
    {
        min-width: 65% !important;
        max-width: 65% !important;
        height: fit-content;
        margin: auto 0 !important;
        padding: 1vw 1.5vw;
    }
    .RoomHotelPanelInfoRightWrapper .LabelGreyHeaderText
    {
        font-size: 2.6vw;
    }
    .RoomHotelPanelInfoRightWrapper .RoomBottomInfoLeft .UserSectionMyPing
    {
        flex: 1;
        /* height: 100%; */
        padding: 1vw 1.5vw;
        background-color: #e5ebec;
        margin: auto;
        margin-left: auto;
        border-left: 0.4vw solid #D0D5DD;
        display: flex;
    }
    .RoomHotelPanelInfoRightWrapper .WrapperUserInfoRightSection
    {
        height: fit-content;
        margin: auto 0;
    }
    .RoomHotelPanelInfoRightWrapper .PhoneNumberAndEmailWrapper
    {
        flex-direction: column;
    }
    .RoomHotelPanelInfoRightWrapper .GreyLineSeparator
    {
        display: none;
    }
    .RoomHotelPanelInfoRightWrapper .RoomBottomInfoRight
    {
        width: 100%;
        height: fit-content;
        padding-top: 1vw;
    }
    .RoomHotelPanelInfoRightWrapper .TwoSeparatorContent:last-child
    {
        margin: auto 0;
    }

    .RoomBottomInfoLeft ,.RoomBottomInfoRight
    {
        width: 50%;
        height: fit-content;
        margin-top: auto;
    }
    .RoomHotelNameInsidePanel
    {
        font-size: 3.2vw;
        margin-bottom: 0.2vw;
    }
    .PaymentSectionHeaderText
    {
        font-size: 4vw;
        margin-bottom: 0.2vw;
    }
    .PaymentSectionHeaderText2
    {
        font-size: 4.8vw;
    }
    .PaymentSectionHeaderText2 img
    {
        width: 4vw;
        height: 4vw;
        margin-left: 1vw;
        vertical-align:baseline;
    }
    .BasicRoomHeaderTextLoad
    {
        width: 35vw !important;
    }
    .FeaturedButtonLoad
    {
        width: 50vw !important;
        height: 6vw !important;
    }
    .NameofHotelPopularAreaLoadGrey
    {
        width: 70%;
        height: 4vw;
        margin-bottom: 1vw;
    }
    .HowManyHotelLeftPopularAreaLoadGrey
    {
        width: 50%;
        height: 3vw;
        margin-bottom: 1vw;
    }

    .RoomHotelNameInsidePanel.loading_grey
    {
        width: 80%;
        height: 4vw;
        margin-bottom: 1vw;
    }
    .RoomSmallInfo.loading_grey
    {
        width: 50%;
        height: 3vw;
        margin-bottom: 0.5vw;
    }
    .RoomHotelRightInfo1.loading_grey
    {
        width: 30%;
        height: 3vw;
        margin-bottom: 0.5vw;
    }
    .RoomHotelRightInfo2.loading_grey
    {
        width: 50%;
        height: 4vw;
        margin-bottom: 0.5vw;
    }
    .RoomHotelRightInfo3.loading_grey
    {
        width: 20%;
        height: 3vw;
    }
    .MarginTextUpDown
    {
        margin: 1.8vw 0;
    }
    .RoomHotelDescriptionInsidePanel
    {
        font-size: 2.2vw;
        display: none !important;
    }
    .DescriptionTextNotDisableable
    {
        font-size: 2.2vw;
        line-height: 3.2vw;
    }
    .DescriptionEmailConfirmationText
    {
        font-size: 2.2vw;
    }
    .EmailConfirmFlexWrapper, .CreatePasswordFlexWrapper, .SignInMainFlexWrapper
    {
        width: 80vw;
    }
    .PingExprezyViewMoreContainer
    {
        width: 80vw;
        max-height: 70vh;
    }
    .ListofExprezyAllContainer, .TellUserExperienceWrapper
    {
        padding: 2.5vw 3vw;
    }
    .TukarPointContainer
    {
        width: 85vw;
    }
    .FinalConfirmationWrapper
    {
        width: 75vw;
    }
    .EmailConfirmFlexWrapper .DescriptionEmailConfirmationText, .CreatePasswordFlexWrapper .DescriptionEmailConfirmationText, .FinalConfirmationWrapper .DescriptionEmailConfirmationText
    {
        width: 90%;
    }
    .RoomHotelPanelContainer .RoomHotelDescriptionInsidePanel, .GreyContainerInfoPadding .RoomHotelDescriptionInsidePanel
    {
        display: flex !important;
    }
    .SmallerRoomDescriptionText
    {
        font-size: 2vw;
    }
    .SmallerRoomDescriptionText img
    {
        width: 2.5vw !important;
        height: 2.5vw !important;
        margin-left: 0.5vw !important;
    }
    .RoomHotelDisplayedNameInsidePanel
    {
        padding: 1.8vw 2vw;
        border-radius: 0.8vw;
        margin-top: 0.5vw;
        margin-bottom: 1vw;
    }
    .RoomHotelDisplayedNameInsidePanel img
    {
        width: 2.5vw;
        height: 2.5vw;
    }
    .RoomHotelDisplayedNameInsidePanel p
    {
        font-size: 2.2vw;
        margin-left: 1vw;
    }
    .PingToGoWithImgWrapper
    {
        margin-left: 0 !important;
        width: 100%;
    }
    .PingToGoWithImgWrapper p
    {
        text-align: start;
    }
    .PingToGo2InsidePanel, .PingToGoHotelDetailsText
    {
        font-size: 2.2vw;
        margin-top: 0.5vw;
        margin-left: 0;
    }
    .PingToGo3InsidePanel
    {
        margin-left: 0;
    }
    .CuttedPriceText
    {
        font-size: 2.5vw;
    }
    .OriginalPriceText
    {
        font-size: 3.2vw;
    }
    .OriginalPriceBiggerText
    {
        font-size: 3.4vw;
    }
    .OriginalPriceHotelDetailsText
    {
        font-size: 2.4vw;
    }
    .RoomHotelPanel:not(.notanimatable):hover,.RoomHotelPanel:not(.notanimatable):active
    {
        box-shadow: 0 0 2vw 0.1vw #48abe0;
    }
    .LabelGreyHeaderBiggerText, .PaymentPriceFinalToPay
    {
        font-size: 3.2vw;
        line-height: 4vw;
    }
    .LabelGreyHeaderText
    {
        font-size: 3vw;
        line-height: 3.8vw;
    }
    .LabelGreyHeaderSmallerText2
    {
        font-size: 2.6vw;
        line-height: 3.6vw;
    }
    .LabelGreyHeaderSmallerText
    {
        font-size: 2.4vw;
        line-height: 3.4vw;
    }
    .TopBottomHeaderButtonPaddingContainer
    {
        padding: 2.5vw 3vw;
    }
}

@media screen and (max-width: 960px) and (min-width: 561px)
{
    .RoomHotelPanel
    {
        width: 95%;
        margin: 0 auto;
        border-radius: 0.5vw;
        margin-bottom: calc(8px + 0.5vw);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .RoomHotelPanelContainer .RoomHotelPanel
    {
        width: 100%;
    }
}
@media screen and (max-width: 1200px) and (min-width: 961px)
{
    .RoomHotelPanel
    {
        border-radius: 0.5vw;
        margin-bottom: calc(8px + 0.5vw);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

@media screen and (max-width: 1200px) and (min-width: 561px)
{
    .BasicContentScroller
    {
        margin-top: 0.3vw;
        padding: 0 calc(5px + 0.5vw);
    }
    .BasicContentScroller > *:last-child
    {
        margin-bottom: calc(40px + 0.5vw);
    }
    .LoadMoreButton
    {
        margin-top: calc(10px + 0.5vw);
    }
    .RoomHotelWrapper
    {
        height: calc(180px + 0.5vw);
        padding: calc(8px + 0.5vw);
    }
    .RoomHotelImageInsidePanel
    {
        width: calc(150px + 1vw);
        min-width: calc(150px + 1vw);
        height: calc(170px + 0.5vw);
        min-height: calc(170px + 0.5vw);
        border-radius: 0.5vw;
    }
    .RoomHotelImageRightSectionInSeparatorsidePanel
    {
        height: calc(180px + 0.5vw);
        margin-left: calc(8px + 0.5vw);
    }
    .RoomHotelPanelInfoLeftWrapper
    {
        width: 0vw;
        padding-right: calc(8px + 0.5vw);
        border-right: 2px solid #D0D5DD;
    }
    .RoomHotelPanelInfoRightWrapper
    {
        padding-left: calc(8px + 0.5vw);
        width: calc(120px + 1vw);
    }
    .MyPingPanelContentContainer .RoomHotelBenefitsInsidePanel
    {
        display: none;
    }
    .MyPingPanelContentContainer .PingToGoInsidePanel
    {
        margin-bottom: calc(0.5vw);
    }
    .MyPingPanelContentContainer .RoomHotelPanelInfoRightWrapper
    {
        width: calc(150px + 1vw);
    }
    .MyPingPanelContentContainer .LabelGreyHeaderText
    {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .MyPingPanelContentContainer .TwoSeparatorWrapper, .MyPingPanelContentContainer .PhoneNumberAndEmailWrapper
    {
        flex-direction: column;
    }
    .MyPingPanelContentContainer .RoomBottomInfoRight .TwoSeparatorWrapper .TwoSeparatorContent:last-child
    {
        width: 100% !important;
    }
    .MyPingPanelContentContainer .RoomBottomInfoRight .TwoSeparatorWrapper .TwoSeparatorContent:last-child .SignInButtonTop
    {
        width: 100%;
        height: fit-content;
    }

    .MyPingPanelContentContainer .PhoneNumberAndEmailWrapper .GreyLineSeparator
    {
        display: none;
    }

    .RoomHotelNameInsidePanel
    {
        font-size: calc(14px + 0.5vw);
    }
    .PaymentSectionHeaderText
    {
        font-size: calc(17px + 0.5vw);
    }
    .PaymentSectionHeaderText2
    {
        font-size: calc(22px + 0.5vw);
    }
    .PaymentSectionHeaderText2 img
    {
        width: calc(18px + 0.5vw);
        height: calc(18px + 0.5vw);
        margin-left: 0.5vw;
        vertical-align:baseline;
    }
    .BasicRoomHeaderTextLoad
    {
        width: 35vw !important;
    }
    .FeaturedButtonLoad
    {
        width: 50vw !important;
        height: calc(30px + 0.5vw) !important;
    }
    .NameofHotelPopularAreaLoadGrey
    {
        width: 70%;
        height: calc(12px + 0.5vw);
        margin-bottom: 0.5vw;
    }
    .HowManyHotelLeftPopularAreaLoadGrey
    {
        width: 50%;
        height: calc(10px + 0.5vw);
        margin-bottom: 0.5vw;
    }

    .RoomHotelNameInsidePanel.loading_grey
    {
        width: 70%;
        height: calc(20px + 0.5vw);
        margin-bottom: 0.5vw;
    }
    .RoomSmallInfo.loading_grey
    {
        width: 50%;
        height: calc(15px + 0.5vw);
        margin-bottom: 0.5vw;
    }
    .RoomHotelDescriptionInsidePanel.loading_grey
    {
        width: 100%;
        height: calc(40px + 0.5vw);
        margin-bottom: 0.5vw;
    }
    .RoomHotelRightInfo1.loading_grey
    {
        width: calc(135px + 0.5vw);
        height: calc(10px + 0.5vw);
        margin-bottom: 0.5vw;
    }
    .RoomHotelRightInfo2.loading_grey
    {
        width: calc(85px + 0.5vw);
        height: calc(15px + 0.5vw);
        margin-bottom: 0.5vw;
        margin-left: auto;
    }
    .RoomHotelRightInfo3.loading_grey
    {
        width: calc(105px + 0.5vw);
        height: calc(10px + 0.5vw);
        margin-bottom: 0.5vw;
        margin-left: auto;
    }
    .MarginTextUpDown
    {
        margin: calc(5px + 0.5vw) 0;
    }
    .RoomHotelDescriptionInsidePanel, .DescriptionTextNotDisableable
    {
        font-size: calc(6px + 0.5vw);
        line-height: calc(10px + 0.5vw);
    }
    .DescriptionEmailConfirmationText
    {
        font-size: calc(8px + 0.5vw);
        line-height: calc(12px + 0.5vw);
    }
    .EmailConfirmFlexWrapper
    {
        width: calc(500px + 1vw);
    }
    .SignInMainFlexWrapper
    {
        width: 380px;
    }
    .CreatePasswordFlexWrapper
    {
        width: calc(450px + 1vw);
    }
    .PingExprezyViewMoreContainer
    {
        width: calc(550px + 1vw);
        max-width: 85vw;
    }
    .ListofExprezyAllContainer, .TellUserExperienceWrapper
    {
        padding: calc(10px + 0.5vw) calc(20px + 0.5vw);
    }
    .TukarPointContainer
    {
        width: calc(650px + 1vw);
        max-width: 85vw;
    }
    .FinalConfirmationWrapper
    {
        width: calc(500px + 1vw);
    }
    .EmailConfirmFlexWrapper .DescriptionEmailConfirmationText, .CreatePasswordFlexWrapper .DescriptionEmailConfirmationText, .FinalConfirmationWrapper .DescriptionEmailConfirmationText
    {
        width: 90%;
    }
    .SmallerRoomDescriptionText
    {
        font-size: calc(5px + 0.5vw);
    }
    .SmallerRoomDescriptionText img
    {
        width: calc(8px + 0.5vw) !important;
        height: calc(8px + 0.5vw) !important;
        margin-left: 2px !important;
    }
    .RoomHotelDisplayedNameInsidePanel
    {
        padding: calc(5px + 0.5vw);
        border-radius: 0.5vw;
    }
    .RoomHotelDisplayedNameInsidePanel img
    {
        width: calc(9px + 0.5vw);
        height: calc(9px + 0.5vw);
    }
    .RoomHotelDisplayedNameInsidePanel p
    {
        font-size: calc(7px + 0.5vw);
        margin-left: calc(1px + 0.5vw);
    }
    .PingToGo2InsidePanel, .PingToGoHotelDetailsText
    {
        font-size: calc(8px + 0.5vw);
        margin-top: 0.1vw;
    }
    .PingToGo3InsidePanel
    {
        margin-bottom: calc(5px + 0.5vw);
    }
    .CuttedPriceText
    {
        font-size: calc(10px + 0.5vw);
    }
    .OriginalPriceText
    {
        font-size: calc(8px + 1vw);
    }
    .OriginalPriceBiggerText
    {
        /* font-size: 1.6vw; */
        font-size: calc(12px + 0.5vw);
    }
    .OriginalPriceHotelDetailsText
    {
        font-size: 1.4vw;
    }
    .RoomHotelPanel:not(.notanimatable):hover,.RoomHotelPanel:not(.notanimatable):active
    {
        box-shadow: 0 0 8px 1px #48abe0;
    }
    .LabelGreyHeaderBiggerText, .PaymentPriceFinalToPay
    {
        font-size: calc(13px + 0.5vw);
        line-height: calc(18px + 0.5vw);
    }
    .LabelGreyHeaderText
    {
        font-size: calc(11px + 0.5vw);
        line-height: calc(16px + 0.5vw);
    }
    .LabelGreyHeaderSmallerText2
    {
        font-size: calc(9px + 0.5vw);
        line-height: calc(14px + 0.5vw);
    }
    .LabelGreyHeaderSmallerText
    {
        font-size: calc(8px + 0.5vw);
        line-height: calc(13px + 0.5vw);
    }
    .TopBottomHeaderButtonPaddingContainer
    {
        padding: calc(10px + 0.5vw) calc(20px + 0.5vw);
    }
}

@media screen and (min-width: 1201px)
{
    .RoomHotelPanel
    {
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .BasicContentScroller
    {
        margin-top: 2px;
        padding: 0 5px;
    }
    .BasicContentScroller > *:last-child
    {
        margin-bottom: 50px;
    }
    .LoadMoreButton
    {
        margin-top: 5px;
    }
    .RoomHotelWrapper
    {
        height: 200px;
        padding: 15px;
    }
    .RoomHotelImageInsidePanel
    {
        width: 200px;
        min-width: calc(100px + 0.5vw);
        height: 200px;
        min-height: 200px;
        border-radius: 5px;
    }
    .RoomHotelImageRightSectionInSeparatorsidePanel
    {
        height: 200px;
        margin-left: 15px;
    }
    .RoomHotelPanelInfoLeftWrapper
    {
        padding-right: 15px;
        border-right: 2px solid #D0D5DD;
    }
    .RoomHotelPanelInfoRightWrapper
    {
        padding-left: 15px;
        min-width: 180px;
    }
    .MyPingPanelContentContainer .RoomHotelBenefitsInsidePanel
    {
        max-width: 200px;
        margin-left: 0;
    }
    .MyPingPanelContentContainer .RoomBottomInfoRight .OriginalPriceText
    {
        padding-right: 8px;
    }
    .RoomHotelNameInsidePanel
    {
        font-size: 22px;
    }
    .PaymentSectionHeaderText
    {
        font-size: 24px;
    }
    .PaymentSectionHeaderText2
    {
        font-size: 28px;
    }
    .PaymentSectionHeaderText2 img
    {
        width: 22px;
        height: 22px;
        margin-left: 5px;
        vertical-align:baseline;
    }
    .BasicRoomHeaderTextLoad
    {
        width: 300px !important;
    }
    .FeaturedButtonLoad
    {
        width: 500px !important;
        height: 40px !important;
    }
    .NameofHotelPopularAreaLoadGrey
    {
        width: 70%;
        height: 20px;
        /* margin:  5px auto; */
        margin-bottom: 5px;
    }
    .HowManyHotelLeftPopularAreaLoadGrey
    {
        width: 50%;
        height: 15px;
        margin-bottom: 5px;
    }

    .RoomHotelNameInsidePanel.loading_grey
    {
        width: 70%;
        height: 30px;
        margin-bottom: 5px;
    }
    .RoomSmallInfo.loading_grey
    {
        width: 50%;
        height: 20px;
        margin-bottom: 5px;
    }
    .RoomHotelDescriptionInsidePanel.loading_grey
    {
        width: 100%;
        height: 60px;
        margin-bottom: 5px;
    }
    .RoomHotelRightInfo1.loading_grey
    {
        width: 160px;
        height: 20px;
        margin-bottom: 5px;
    }
    .RoomHotelRightInfo2.loading_grey
    {
        width: 110px;
        height: 25px;
        margin-left: auto;
        margin-bottom: 5px;
    }
    .RoomHotelRightInfo3.loading_grey
    {
        width: 140px;
        height: 20px;
        margin-left: auto;
        margin-bottom: 5px;
    }
    .MarginTextUpDown
    {
        margin: 8px 0;
    }
    .RoomHotelDescriptionInsidePanel, .DescriptionTextNotDisableable, .DescriptionEmailConfirmationText
    {
        font-size: 12px;
        line-height: 18px;
    }
    .EmailConfirmFlexWrapper
    {
        width: 700px;
    }
    .SignInMainFlexWrapper
    {
        width: 380px;
    }
    .CreatePasswordFlexWrapper
    {
        width: 500px;
    }
    .PingExprezyViewMoreContainer
    {
        width: 600px;
    }
    .ListofExprezyAllContainer, .TellUserExperienceWrapper
    {
        padding: 15px 30px;
    }
    .TukarPointContainer
    {
        width: 700px;
    }
    .FinalConfirmationWrapper
    {
        width: 550px;
    }
    .EmailConfirmFlexWrapper .DescriptionEmailConfirmationText, .CreatePasswordFlexWrapper .DescriptionEmailConfirmationText, .FinalConfirmationWrapper .DescriptionEmailConfirmationText
    {
        width: 90%;
    }
    .SmallerRoomDescriptionText
    {
        font-size: 11px;
    }
    .SmallerRoomDescriptionText img
    {
        width: 14px !important;
        height: 14px !important;
        margin-left: 2px !important;
    }
    .RoomHotelDisplayedNameInsidePanel
    {
        padding: 10px;
        border-radius: 5px;
    }
    .RoomHotelDisplayedNameInsidePanel img
    {
        width: 16px;
        height: 16px;
    }
    .RoomHotelDisplayedNameInsidePanel p
    {
        font-size: 14px;
        margin-left: 8px;
    }
    .PingToGo2InsidePanel, .PingToGoHotelDetailsText
    {
        font-size: 15px;
        margin-top: 2px;
    }
    .PingToGo3InsidePanel
    {
        margin-bottom: 10px;
    }
    .CuttedPriceText, .OriginalPriceHotelDetailsText
    {
        font-size: calc(8px + 0.5vw);
    }
    .OriginalPriceText
    {
        font-size: calc(13px + 0.5vw);
    }
    .OriginalPriceBiggerText
    {
        font-size: calc(14px + 0.5vw);
    }
    .RoomHotelPanel:not(.notanimatable):hover,.RoomHotelPanel:not(.notanimatable):active
    {
        box-shadow: 0 0 8px 1px #48abe0;
    }
    .LabelGreyHeaderBiggerText
    {
        font-size: 18px;
    }
    .LabelGreyHeaderText, .PaymentPriceFinalToPay
    {
        font-size: 16px;
    }
    .LabelGreyHeaderSmallerText2
    {
        font-size: 14px;
        line-height: 20px;
    }
    .LabelGreyHeaderSmallerText
    {
        font-size: 13.5px;
        line-height: 18px;
    }
    .TopBottomHeaderButtonPaddingContainer
    {
        padding: 15px 20px;
    }
}

/* For Max Font Size */
@media screen and (min-width: 2001px)
{
    .CuttedPriceText, .OriginalPriceHotelDetailsText
    {
        font-size: 14px;
    }
    .OriginalPriceText
    {
        font-size: 19px;
    }
    .OriginalPriceBiggerText
    {
        font-size: 20px;
    }

}

/* --------------------------------- Section Information Details ------------------------------------- */

.HotelDetailsInformationWrapper
{
    max-width: 1450px;
    height: fit-content;
    display: flex;
}
.RedBorderMaxDiscount, .RedBorderMaxDiscountHotelDetails
{
    width: fit-content;
    height: fit-content;
    background-color: #ed3224;
}
.RedOutlineTextContainer, .BlackOutlineTextContainer
{
    width: fit-content;
    height: fit-content;
    background-color: white;
}
.HotelDetailsInformationLeftSection
{
    flex: 1;
    height: fit-content;
}
.HotelDetailsHotelInformationMarginWrapper, .HotelDetailsHotelInformationMarginWrapper2, .TopArrowAndHeaderWrapper
{
    width: 100%;
    height: fit-content;
    display: flex;
}
.HotelDetailsHotelInformationMarginWrapper2
{
    flex-direction: column;
}
.RoomHotelTypeText
{
    width: fit-content;
    height: fit-content;
    background-color: #DEDEDE;
    margin: auto 0;
}
.ShareButtonBlue
{
    width: fit-content;
    height: fit-content;
    background-color: #D3EAF7;
    color: #3A9FDD;
    display: flex;
    outline: 0;
    border: 0;
}
.ShareButtonBlue img
{
    height: fit-content;
    object-position: center !important;
    object-fit: contain !important;
    margin: auto 0;
}
.SectionSeparatorWithGreyLine
{
    width: 100%;
    height: fit-content;
}
.FacilityAndBenefitsContainer
{
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-rows: repeat(auto-fit);
}
.FaciltyChildrenContainer
{
    width: 100%;
    height: fit-content;
    display: flex;
    height: fit-content;
}
.FacilityNameText
{
    width: fit-content;
    height: fit-content;
    color: #000000;
}
.StarRatingIconWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    margin-top: auto;
}
.StarRatingIcon
{
    display: flex;
    margin-top: auto;
}
.StarRatingIconWrapper .StarRatingIcon
{
    content: url(../Assets/ButtonIcon/star-line.svg);
}
.StarRating05 .StarRatingIcon:first-child,
.StarRating15 .StarRatingIcon:nth-child(2),
.StarRating25 .StarRatingIcon:nth-child(3),
.StarRating35 .StarRatingIcon:nth-child(4),
.StarRating45 .StarRatingIcon:nth-child(5)
{
    content: url(../Assets/ButtonIcon/star-half-fill.svg);
}
.StarRating1 .StarRatingIcon:first-child,
.StarRating15 .StarRatingIcon:first-child,
.StarRating2 .StarRatingIcon:first-child, .StarRating2 .StarRatingIcon:nth-child(2),
.StarRating25 .StarRatingIcon:first-child, .StarRating25 .StarRatingIcon:nth-child(2),
.StarRating3 .StarRatingIcon:first-child, .StarRating3 .StarRatingIcon:nth-child(2), .StarRating3 .StarRatingIcon:nth-child(3),
.StarRating35 .StarRatingIcon:first-child, .StarRating35 .StarRatingIcon:nth-child(2), .StarRating35 .StarRatingIcon:nth-child(3),
.StarRating4 .StarRatingIcon:first-child, .StarRating4 .StarRatingIcon:nth-child(2), .StarRating4 .StarRatingIcon:nth-child(3), .StarRating4 .StarRatingIcon:nth-child(4),
.StarRating45 .StarRatingIcon:first-child, .StarRating45 .StarRatingIcon:nth-child(2), .StarRating45 .StarRatingIcon:nth-child(3), .StarRating45 .StarRatingIcon:nth-child(4),
.StarRating5 .StarRatingIcon:first-child, .StarRating5 .StarRatingIcon:nth-child(2), .StarRating5 .StarRatingIcon:nth-child(3), .StarRating5 .StarRatingIcon:nth-child(4), .StarRating5 .StarRatingIcon:nth-child(5)
{
    content: url(../Assets/ButtonIcon/star-fill.svg);
}

.RatingBlueText
{
    color: #2494D9;
    margin-top: auto;
}
.RatingGreyText
{
    color: #626B79;
    margin-top: auto;
}
.RoomHotelPanelContainer
{
    width: 100%;
    display: flex;
    flex-direction: column;
    height: fit-content;
}
.RoomHotelPanelBlueBottomPanel
{
    width: auto;
    height: fit-content;
    background-color: #1D76AE;
    color: white;
    display: flex;
}
.RoomHotelPanelBlueBottomLeftWrapper
{
    height: fit-content;
    margin: auto 0;
}
.RoomHotelPanelBlueBottomRightWrapper
{
    flex-grow: 1;
    height: fit-content;
    margin: auto 0;
}
.HotelDetailsInformationRightSection
{
    height: fit-content;
    background-color: #F2F4F7;
    max-height: 0;
    width: 0;
    position: relative;
    overflow: hidden;

}
.HotelDetailsInformationRightSection.with-transition
{
    transition: width 0.8s ease, min-width 0.8s ease, max-height 0.8s ease, margin-left 0.8s ease;
}
.HotelDetailsInformationRightSection.RightSectionOpen
{
    max-height:9999999;
    animation: OpenRightSection 0.8s normal forwards ease-in-out;
}

.HotelDetailsInformationRightSection .RoomPanelDiscountBackNew
{
    opacity: 0;
}
.HotelDetailsInformationRightSection.RightSectionOpen .RoomPanelDiscountBackNew
{
    animation: OpenRightSection 0.8s normal forwards ease-in-out;
}

@keyframes OpenRightSection
{
    from
    {
        opacity: 0;
        overflow: hidden;
    }
    60%
    {
        opacity: 0;
        overflow: hidden;
    }
    to
    {
        opacity: 1;
        overflow: visible;
    }
}

.HotelDetailsInformationRightWrapper
{
    flex-grow: 1;
    position: relative;
}
.HotelDetailsInformationRightWrapper p
{
    margin-left: 0;
}
.TwoPartSeparatorCheckInOut .HoverableContentInsideInputField
{
    width: 49%;
}
.TwoPartSeparatorCheckInOut .HoverableContentInsideInputField:last-child
{
    margin-left: auto;
}
.HotelDetailsInformationRightSection .SearchTopNonIndexSection
{
    background-color: white;
}
.HotelPhotoChoiceMainContainer
{
    width: fit-content;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.HotelPhotoChoiceTopContainer
{
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    display: flex;
}
.NextPrevButtonPhotoChoice
{
    background-color: #273038;
    border: 0;
    outline: 0;
    margin: auto 0;
}
.NextPrevButtonPhotoChoice img
{
    width: 50%;
    height: fit-content;
}
.HotelPhotoChoiceTopPhotoContainer
{
    background-color: rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}
.HotelPhotoChoiceTopPhotoContainer img
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain !important;
    object-position: center !important;
}
.HotelPhotoChoiceSortButtonContainer
{
    width: fit-content;
    height: fit-content;
}
.ListOfPhotoToClickHotelPhoto
{
    width: fit-content;
    height: fit-content;
    overflow-y: auto;
    overflow-x: none;
    margin: 0 auto;
}
.ListOfPhotoToClickHotelPhotoWrapper
{
    width: fit-content;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(auto-fit);
    -webkit-mask-box-image: linear-gradient(to bottom, transparent, 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),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),transparent);
}
.ListOfPhotoPanelHotelPhoto
{
    overflow: hidden;
}
.ListOfPhotoPanelHotelPhotoNotSelected
{
    outline: 0 !important;
    -webkit-filter: brightness(40%);
    -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;
}
.CloseWhiteBlocker
{
    object-fit: contain !important;
    object-position: center !important;
    position: absolute;
}
.BackArrowBigHeader
{
    object-fit: contain !important;
    object-position: center !important;
    margin: auto 0;
}
@media screen and (max-width: 560px)
{
    .RedBorderMaxDiscount
    {
        padding: 1vw 0;
        border-radius: 0.8vw;
    }
    .RedBorderMaxDiscountHotelDetails, .RedOutlineTextContainer
    {
        padding: 1vw 2vw;
        border-radius: 2.5vw;
    }
    .RedBorderMaxDiscount .LabelGreyHeaderText
    {
        text-shadow: 0.4vw 0.1vw rgba(0, 0, 0, 0.3);
    }
    .RedOutlineTextContainer
    {
        outline: 0.4vw solid #F04438;
        outline-offset: -0.4vw;
    }
    .BlackOutlineTextContainer
    {
        outline: 0.4vw solid #344054;
        outline-offset: -0.4vw;
    }
    .HotelDetailsHotelInformationMarginWrapper
    {
        margin-bottom: 1.2vw;
    }
    .HotelDetailsHotelInformationMarginWrapper2
    {
        margin-bottom: 2vw;
    }
    .TopArrowAndHeaderWrapper
    {
        margin: 1.2vw 0;
    }
    .TopArrowAndHeaderWrapper
    {
        margin: 1.2vw 0;
    }
    .RoomHotelTypeText
    {
        padding: 0.5vw 1vw;
        border-radius: 0.8vw;
        font-size: 2vw;
        margin-right: 1vw;
    }
    .ShareButtonBlue
    {
        padding: 1.5vw 1.3vw;
        border-radius: 0.8vw;
        font-size: 2.2vw;
    }
    .ShareButtonBlue img
    {
        width: 2vw;
        margin-right: 1vw;
    }
    .SectionSeparatorWithGreyLine
    {
        padding-top: 2vw;
        margin-top: 3vw;
        border-top: 0.3vw solid #98A2B3;
    }
    .FacilityAndBenefitsContainer
    {
        grid-template-columns: repeat(3, 1fr);
        margin: 1vw 0;
        column-gap: 0.5vw;
        row-gap: 0.6vw;
    }
    .FacilityIcon
    {
        width: 3.5vw;
        height: 3.5vw;
        margin-right: 0.5vw;
    }
    .FacilityNameText
    {
        margin-top: 0.5vw;
        font-size: 2.2vw;
    }
    .StarRatingIconWrapper
    {
        margin-right: 1vw;
    }
    .StarRatingIcon
    {
        width: 3.5vw;
        height: 3.5vw;
    }
    .RatingBlueText
    {
        font-size: 3vw;
    }
    .RatingGreyText
    {
        font-size: 2vw;
    }
    .RoomHotelPanelContainer
    {
        margin-top: 1.5vw;
    }
    .RoomHotelPanelBlueBottomPanel
    {
        padding: 1vw 2vw;
        border-radius: 0.8vw;
    }
    .RoomHotelPanelBlueBottomLeftWrapper
    {
        width: 28vw;
    }
    .RoomHotelPanelBlueBottomRightWrapper
    {
        margin-right: 1vw;
    }
    .HotelDetailsInformationRightSection.RightSectionOpen
    {
        width: 100% !important;
        border-radius: 0vw;
        margin: 0 auto;
    }
    .HotelDetailsInformationLeftSection
    {
        width: 95%;
        height: fit-content;
        margin: 0 auto;
    }
    .HotelDetailsInformationRightWrapper
    {
        padding: 2.5vw 3vw;
    }
    .CheckInCheckOutDateHotelDetailsWrapper
    {
        margin-top: 1.5vw;
    }
    .HotelDetailsInformationWrapper
    {
        width: 98%;
        margin: 3vw auto;
        flex-direction: column;
    }
    .HotelPhotoChoiceMainContainer
    {
        height: 85vh;
    }
    .NextPrevButtonPhotoChoice
    {
        width: 5.2vw;
        height: 6.2vw;
        border-radius: 0.8vw;
    }
    .HotelPhotoChoiceTopPhotoContainer
    {
        width: 80vw;
        height: 45vw;
        margin: 0 1vw;
        border-radius: 0.8vw;
    }
    .HotelPhotoChoiceSortButtonContainer
    {
        margin: 1vw auto;
        margin-bottom: 0.1vw;
    }
    .HotelPhotoChoiceSortButtonContainer .BasicTextButton:not(:last-child)
    {
        margin-right: 1vw;
    }
    .ListOfPhotoToClickHotelPhotoWrapper
    {
        column-gap: 1.5vw;
        row-gap: 1.5vw;
        padding: 2vw;
        grid-template-columns: repeat(3, 1fr);
    }
    .ListOfPhotoPanelHotelPhoto
    {
        width: 25vw;
        height: 15vw;
        outline: 0.1vw solid white;
        border-radius: 0.8vw;
    }
    .CloseWhiteBlocker
    {
        width: 5vw;
        height: 5vw;
        top: 2vw;
        right: 2vw;
    }
    .BackArrowBigHeader
    {
        width: 2.8vw;
        height: 2.8vw;
        margin-right: 1vw;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .RedBorderMaxDiscount
    {
        padding: 0.5vw 0;
        border-radius: 0.5vw;
    }
    .RedBorderMaxDiscountHotelDetails, .RedOutlineTextContainer
    {
        padding: 0.5vw calc(8px + 0.5vw);
        border-radius: 2.5vw;
    }
    .RedBorderMaxDiscountHotelDetails .LabelGreyHeaderText
    {
        text-shadow: 0.2vw 0.15vw rgba(0, 0, 0, 0.3);
    }
    .RedOutlineTextContainer
    {
        outline: 0.2vw solid #F04438;
        outline-offset: -0.2vw;
    }
    .BlackOutlineTextContainer
    {
        outline: 0.2vw solid #344054;
        outline-offset: -0.2vw;
    }
    .HotelDetailsHotelInformationMarginWrapper
    {
        margin-bottom: calc(2px + 0.5vw);
    }
    .HotelDetailsHotelInformationMarginWrapper2
    {
        margin-bottom: calc(9px + 0.5vw);
    }

    .TopArrowAndHeaderWrapper
    {
        margin: calc(2px + 0.5vw) 0;
    }
    .RoomHotelTypeText
    {
        padding: 0.5vw calc(1px + 0.5vw);
        border-radius: 0.5vw;
        font-size: calc(9px + 0.5vw);
        margin-right: calc(1px + 0.5vw);
    }
    .ShareButtonBlue
    {
        padding: calc(1.5px + 0.5vw) calc(3px + 0.5vw);
        border-radius: 0.5vw;
        font-size: calc(7px + 0.5vw);
    }
    .ShareButtonBlue img
    {
        width: calc(7px + 0.5vw);
        margin-right: 0.5vw;
    }
    .SectionSeparatorWithGreyLine
    {
        padding-top: calc(5px + 0.5vw);
        margin-top: calc(10px + 0.5vw);
        border-top: 1px solid #98A2B3;
    }
    .FacilityAndBenefitsContainer
    {
        grid-template-columns: repeat(3, 1fr);
        margin: calc(2px + 0.5vw) 0;
        column-gap: 0.4vw;
        row-gap: 0.5vw;
    }
    .FacilityIcon
    {
        width: calc(10px + 0.5vw);
        height: calc(10px + 0.5vw);
        margin-right: 0.2vw;
    }
    .FacilityNameText
    {
        margin-top: 1px;
        font-size: calc(6px + 0.5vw);
    }
    .StarRatingIconWrapper
    {
        margin-right: 0.5vw;
    }
    .StarRatingIcon
    {
        width: calc(10px + 0.5vw);
        height: calc(10px + 0.5vw);
    }
    .RatingBlueText
    {
        font-size: calc(10px + 0.5vw);
    }
    .RatingGreyText
    {
        font-size: calc(5px + 0.5vw);
    }
    .RoomHotelPanelContainer
    {
        margin-top: calc(5px + 0.5vw);
    }
    .RoomHotelPanelBlueBottomPanel
    {
        padding: calc(2px + 0.5vw) calc(9px + 0.5vw);
        border-radius: 0.5vw;
    }
    .RoomHotelPanelBlueBottomLeftWrapper
    {
        width: 13.5vw;
    }
    .RoomHotelPanelBlueBottomRightWrapper
    {
        margin-right: 1vw;
    }
    /* .HotelDetailsInformationRightSection.RightSectionOpen
    {
        width: 35vw;
        min-width: 35vw;
        border-radius: 0.5vw;
        margin-left: 1.5vw;
    } */
    .HotelDetailsInformationRightSection.RightSectionOpen
    {
        width: 35vw !important;
        border-radius: 0.5vw;
        margin-left: 1.5vw;
    }
    .HotelDetailsInformationRightWrapper
    {
        padding: 1.5vw 1.6vw;
    }
    .CheckInCheckOutDateHotelDetailsWrapper
    {
        margin-top: calc(2px + 0.5vw);
    }
    .HotelDetailsInformationWrapper
    {
        width: 95%;
        margin: calc(8px + 0.5vw) auto;
    }
    .HotelPhotoChoiceMainContainer
    {
        height: 85vh;
    }
    .NextPrevButtonPhotoChoice
    {
        width: calc(24px + 0.5vw);
        height: calc(32px + 0.5vw);
        border-radius: 0.5vw;
    }
    .HotelPhotoChoiceTopPhotoContainer
    {
        width: 55vw;
        /* height: calc(250px + 0.5vw); */
        height: 28vw;
        margin: 0 0.7vw;
        border-radius: 0.5vw;
    }
    .HotelPhotoChoiceSortButtonContainer
    {
        margin: 1vw auto;
        margin-bottom: 0.5vw;
    }
    .HotelPhotoChoiceSortButtonContainer .BasicTextButton:not(:last-child)
    {
        margin-right: 5px;
    }
    .ListOfPhotoToClickHotelPhotoWrapper
    {
        column-gap: 1vw;
        row-gap: 1vw;
        padding: 1.5vw;
    }
    .ListOfPhotoPanelHotelPhoto
    {
        width: 20vw;
        height: 12vw;
        outline: 0.1vw solid white;
        border-radius: 0.5vw;
    }
    .CloseWhiteBlocker
    {
        width: 4vw;
        height: 4vw;
        top: 2vw;
        right: 2vw;
    }
    .BackArrowBigHeader
    {
        width: calc(14px + 0.5vw);
        height: calc(14px + 0.5vw);
        margin-right: calc(2px + 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .RedBorderMaxDiscount
    {
        padding: 4px 0;
        border-radius: 5px;
    }
    .RedBorderMaxDiscountHotelDetails, .RedOutlineTextContainer
    {
        padding: 4px 15px;
        border-radius: 15px;
    }
    .RedBorderMaxDiscountHotelDetails .LabelGreyHeaderText
    {
        text-shadow: 2px 1.5px rgba(0, 0, 0, 0.3);
    }
    .RedOutlineTextContainer
    {
        outline: 2px solid #F04438;
        outline-offset: -2px;
    }
    .BlackOutlineTextContainer
    {
        outline: 2px solid #344054;
        outline-offset: -2px;
    }
    .HotelDetailsHotelInformationMarginWrapper
    {
        margin-bottom: 8px;
    }
    .HotelDetailsHotelInformationMarginWrapper2
    {
        margin-bottom: 15px;
    }
    .TopArrowAndHeaderWrapper
    {
        margin: 8px 0;
    }

    .RoomHotelTypeText
    {
        padding: 5px 6px;
        border-radius: 5px;
        font-size: 15px;
        margin-right: 5px;
    }
    .ShareButtonBlue
    {
        padding: 8px 6px;
        border-radius: 5px;
        font-size: 13px;
    }
    .ShareButtonBlue img
    {
        width: 12px;
        margin-right: 5px;
    }
    .SectionSeparatorWithGreyLine
    {
        padding-top: 15px;
        margin-top: 20px;
        border-top: 1px solid #98A2B3;
    }
    .FacilityAndBenefitsContainer
    {
        grid-template-columns: repeat(4, 1fr);
        margin: 8px 0;
        column-gap: 5px;
        row-gap: 7px;
    }
    .FacilityIcon
    {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }
    .FacilityNameText
    {
        margin-top: 1px;
        font-size: 13px;
    }
    .StarRatingIconWrapper
    {
        margin-right: 6px;
    }
    .StarRatingIcon
    {
        width: 19px;
        height: 19px;
    }
    .RatingBlueText
    {
        font-size: 17px;
    }
    .RatingGreyText
    {
        font-size: 10px;
    }
    .RoomHotelPanelContainer
    {
        margin-top: 10px;
    }
    .RoomHotelPanelBlueBottomPanel
    {
        padding: 8px 15px;
        border-radius: 5px;
    }
    .RoomHotelPanelBlueBottomLeftWrapper
    {
        width: 170px;
    }
    .RoomHotelPanelBlueBottomRightWrapper
    {
        margin-right: 15px;
    }
    /* .HotelDetailsInformationRightSection.RightSectionOpen
    {
        width: 400px;
        min-width: 400px;
        border-radius: 5px;
        margin-left: 30px;
    } */

    .HotelDetailsInformationRightSection.RightSectionOpen
    {
        width: 400px !important;
        border-radius: 5px;
        margin-left: 30px;
    }
    .HotelDetailsInformationRightWrapper
    {
        padding: 16px 18px;
    }
    .CheckInCheckOutDateHotelDetailsWrapper
    {
        margin-top: 8px;
    }
    .HotelDetailsInformationWrapper
    {
        width: 85%;
        margin: 20px auto;
    }
    .HotelPhotoChoiceMainContainer
    {
        height: 85vh;
    }
    .NextPrevButtonPhotoChoice
    {
        width: 30px;
        height: 40px;
        border-radius: 5px;
    }
    .HotelPhotoChoiceTopPhotoContainer
    {
        width: 600px;
        height: 300px;
        margin: 0 5px;
        border-radius: 5px;
    }
    .HotelPhotoChoiceSortButtonContainer
    {
        margin: 8px auto;
        margin-bottom: 2px;
    }
    .HotelPhotoChoiceSortButtonContainer .BasicTextButton:not(:last-child)
    {
        margin-right: 5px;
    }
    .ListOfPhotoToClickHotelPhotoWrapper
    {
        column-gap: 8px;
        row-gap: 8px;
        padding: 10px;
    }
    .ListOfPhotoPanelHotelPhoto
    {
        width: 140px;
        height: 80px;
        outline: 1px solid white;
        border-radius: 5px;
    }
    .CloseWhiteBlocker
    {
        width: 38px;
        height: 38px;
        top: 10px;
        right: 10px;
    }
    .BackArrowBigHeader
    {
        width: 19px;
        height: 19px;
        margin-right: 10px;
    }
}


.OrangeWarningContainer
{
    display: flex;
    flex: 1;
    height: fit-content;
    background-color: #FFF6ED;
}
.WarningCircleIcon, .BasicIconInsideOrangeContainer
{
    margin: auto 0;
}
.InputFieldMargin, .InputFieldMargin2, .InputFieldMargin3, .InputFieldMargin4
{
    flex: 1;
    height: fit-content;
    display: flex;
    flex-direction: column;
    position: relative;
}
.InputFieldMargin2, .InputFieldMargin3, .InputFieldMargin4
{
    flex-direction: row;
}
.PriceTextMainContainer, .PriceMainTextWrapper, .TwoSeparatorWrapper
{
    flex: 1;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.PriceMainTextWrapper, .TwoSeparatorWrapper
{
    flex-direction: row;
}
.BlueContainerPrice
{
    background-color: #D3EAF7;
}
.WhiteContainerPrice
{
    background-color: white;
}
.BasicHeaderAndInputWrapper
{
    width: 100%;
    height: fit-content;
}
.Price1stWrapper
{
    width: fit-content;
    height: fit-content;
}
.Price2ndWrapper
{
    flex-grow: 1;
    text-align: end;
}
.Price2ndWrapper p
{
    text-align: end;
    margin-left: auto;
}
.TwoSeparatorWrapper .TwoSeparatorContent:last-child
{
    margin-left: auto;
}
.FirstNumberPhoneNumber
{
    width: fit-content;
    height: 100%;
}
.CheckBoxMarginBasic, .HeaderTextWithRadioButtonWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
}
.BigIconInsidePanel, .BigIconInsidePanel2, .BigIconInsidePanel3, .BigIconInsidePanel4, .EmailConfirmationIcon
{
    height: fit-content;
    object-fit: contain !important;
    object-position: center !important;
}

.PhoneNumberAndEmailWrapper
{
    flex: 1;
    height: fit-content;
    display: flex;
}
.EmailSeparatorWrapper, .PhoneNumberSeparatorWrapper
{
    width: fit-content;
    height: auto;
}
.EmailSeparatorWrapper
{
    max-width: 65%;
}
.GreyLineSeparator
{
    height: auto;
    background-color: #667085;
}


@media screen and (max-width: 560px)
{
    .OrangeWarningContainer
    {
        padding: 2.5vw 2vw;
        margin-bottom: 1.5vw;
    }
    .WarningCircleIcon
    {
        width: 3vw;
        height: 3vw;
        margin-right: 1vw;
    }
    .BasicIconInsideOrangeContainer
    {
        width: 8vw;
        height: 8vw;
        margin-right: 0.5vw;
    }
    .InputFieldMargin2
    {
        margin-bottom: 2vw;
    }
    .InputFieldMargin3
    {
        margin-bottom: 1vw;
    }
    .InputFieldMargin4
    {
        margin-bottom: 0.4vw;
    }
    .InputFieldMargin5
    {
        margin-bottom: 1.5vw;
    }
    .InputFieldMarginBoth
    {
        margin: 1.5vw 0;
    }
    .InputFieldMarginBoth2
    {
        margin: 0 1.5vw;
    }
    .PriceMainTextWrapper:not(:last-child)
    {
        margin-bottom: 1.5vw !important;
    }
    .BlueContainerPrice
    {
        border: 0.1vw solid #2494D9;
        padding: 1vw 1.5vw;
    }
    .WhiteContainerPrice
    {
        border: 0.1vw solid white;
        padding: 1vw 1.5vw;
    }
    .BasicHeaderAndInputWrapper
    {
        margin-top: 2vw;
        margin-bottom: 3.5vw;
    }
    .BasicHeaderAndInputWrapper:last-child
    {
        margin-bottom: 23.5vw;
    }
    .Price1stWrapper
    {
        margin-right: 1vw;
    }
    .Price1stWrapper .PoinWithIconWrapper
    {
        margin-top: 0.1vw;
    }
    .TwoSeparatorContent
    {
        width: 49%;
    }
    .FirstNumberPhoneNumber
    {
        border-right: 0.4vw solid #D0D5DD;
    }
    .CheckBoxMarginBasic
    {
        margin-right: 3vw;
    }
    .HeaderTextWithRadioButtonWrapper
    {
        margin-bottom: 0.8vw;
    }
    .BigIconInsidePanel
    {
        width: 15vw !important;
        height: 14vw !important;
    }
    .BigIconInsidePanel2
    {
        width: 15vw !important;
        height: 15vw !important;
        margin: auto 0;
    }
    .BigIconInsidePanel3
    {
        width: 17vw;
        height: 17vw;
    }
    .BigIconInsidePanel4
    {
        width: 10vw;
    }
    .EmailConfirmationIcon
    {
        width: 40vw;
        margin: 1vw auto;
    }
    .CheckSuccessGreenCircle
    {
        width: 25vw;
        margin: 1vw auto;
    }
    .GreyLineSeparator
    {
        width: 0.15vw;
        padding: 1vw 0;
        margin: 0 1vw;
    }
    .PhoneNumberSeparatorWrapper
    {
        border-left: 1px;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .OrangeWarningContainer
    {
        padding: calc(7px + 0.5vw) calc(6px + 0.5vw);
        margin-bottom: calc(2px + 0.5vw);
    }
    .WarningCircleIcon
    {
        width: calc(10px + 0.5vw);
        height: calc(10px + 0.5vw);
        margin-right: calc(1px + 0.5vw);
    }
    .BasicIconInsideOrangeContainer
    {
        width: calc(38px + 0.5vw);
        height: calc(38px + 0.5vw);
        margin: auto calc(1px + 0.5vw);
    }
    .InputFieldMargin2
    {
        margin-bottom: calc(8px + 0.5vw);
    }
    .InputFieldMargin3
    {
        margin-bottom: calc(1px + 0.5vw);
    }
    .InputFieldMargin4
    {
        margin-bottom: 0.5vw;
    }
    .InputFieldMargin5
    {
        margin-bottom: calc(4px + 0.5vw);
    }
    .InputFieldMarginBoth
    {
        margin: calc(2px + 0.5vw) 0;
    }
    .InputFieldMarginBoth2
    {
        margin: 0 calc(2px + 0.5vw);
    }
    .PriceMainTextWrapper:not(:last-child)
    {
        margin-bottom: calc(2px + 0.5vw) !important;
    }
    .BlueContainerPrice
    {
        border: 1.5px solid #2494D9;
        padding: calc(1px + 0.5vw) calc(4px + 0.5vw);
    }
    .WhiteContainerPrice
    {
        border: 1.5px solid white;
        padding: calc(1px + 0.5vw) calc(4px + 0.5vw);
    }
    .BasicHeaderAndInputWrapper
    {
        margin-top: calc(5px + 0.5vw);
        margin-bottom: calc(15px + 0.5vw);
    }
    .BasicHeaderAndInputWrapper:last-child
    {
        margin-bottom: calc(50px + 0.5vw);
    }
    .Price1stWrapper
    {
        margin-right: 0.1vw;
    }
    .Price1stWrapper .PoinWithIconWrapper
    {
        margin-top: 0.1vw;
    }
    .TwoSeparatorContent
    {
        width: 49%;
    }
    .FirstNumberPhoneNumber
    {
        border-right: 0.2vw solid #D0D5DD;
    }
    .CheckBoxMarginBasic
    {
        margin-right: calc(8px + 0.5vw);
    }
    .HeaderTextWithRadioButtonWrapper
    {
        margin-bottom: calc(1px + 0.5vw);
    }
    .BigIconInsidePanel
    {
        width: calc(70px + 0.5vw) !important;
        height: calc(70px + 0.5vw) !important;
    }
    .BigIconInsidePanel2
    {
        width: calc(70px + 0.5vw) !important;
        height: calc(80px + 0.5vw) !important;
        margin: calc(-5px -0.5vw) 0;
    }
    .BigIconInsidePanel3
    {
        width: calc(90px + 0.5vw);
        height: calc(90px + 0.5vw);
    }
    .BigIconInsidePanel4
    {
        width: calc(60px + 0.5vw);
    }
    .EmailConfirmationIcon
    {
        width: calc(180px + 0.5vw);
        margin: calc(2px + 0.5vw) auto;
    }
    .CheckSuccessGreenCircle
    {
        width: calc(140px + 0.5vw);
        margin: calc(2px + 0.5vw) auto;
    }
    .GreyLineSeparator
    {
        max-width: 1.3px;
        width: 0.2vw;
        padding: calc(3px + 0.5vw) 0;
        margin: 0 calc(1px + 0.5vw);
    }
    .PhoneNumberSeparatorWrapper
    {
        border-left: 1px;
    }
}

@media screen  and (min-width: 1201px)
{
    .OrangeWarningContainer
    {
        padding: 12px 10px;
        margin-bottom: 10px;
    }
    .WarningCircleIcon
    {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
    .BasicIconInsideOrangeContainer
    {
        width: 48px;
        height: 48px;
        margin: auto 8px;
    }
    .InputFieldMargin2
    {
        margin-bottom: 18px;
    }
    .InputFieldMargin3
    {
        margin-bottom: 5px;
    }
    .InputFieldMargin4
    {
        margin-bottom: 2px;
    }
    .InputFieldMargin5
    {
        margin-bottom: 10px;
    }
    .InputFieldMarginBoth
    {
        margin: 10px 0;
    }
    .InputFieldMarginBoth2
    {
        margin: 0 10px;
    }
    .PriceMainTextWrapper:not(:last-child)
    {
        margin-bottom: 10px !important;
    }
    .BlueContainerPrice
    {
        border: 1.5px solid #2494D9;
        padding: 5px 10px;
    }
    .WhiteContainerPrice
    {
        border: 1.5px solid white;
        padding: 5px 10px;
    }
    .BasicHeaderAndInputWrapper
    {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .BasicHeaderAndInputWrapper:last-child
    {
        margin-bottom: 0;
    }
    .Price1stWrapper
    {
        margin-right: 5px;
    }
    .Price1stWrapper .PoinWithIconWrapper
    {
        margin-top: 1px;
    }
    .TwoSeparatorContent
    {
        width: 49%;
    }
    .FirstNumberPhoneNumber
    {
        border-right: 2px solid #D0D5DD;
    }
    .CheckBoxMarginBasic
    {
        margin-right: 20px;
    }
    .HeaderTextWithRadioButtonWrapper
    {
        margin-bottom: 5px;
    }
    .BigIconInsidePanel
    {
        width: 100px !important;
        height: 80px !important;
    }
    .BigIconInsidePanel2
    {
        width: 100px !important;
        height: 100px !important;
        margin: -10px 0;
    }
    .BigIconInsidePanel3
    {
        width: 110px;
        height: 110px;
    }
    .BigIconInsidePanel4
    {
        width: 70px;
    }
    .EmailConfirmationIcon
    {
        width: 230px;
        margin: 10px auto;
    }
    .CheckSuccessGreenCircle
    {
        width: 160px;
        margin: 10px auto;
    }
    .GreyLineSeparator
    {
        width: 1.3px;
        padding: 7px 0;
        margin: 0 6px;
    }
    .PhoneNumberSeparatorWrapper
    {
        border-left: 1px;
    }
}

/* ------------------------------- Slider Toggle ------------------------------- */

.switch
{
    position: relative;
    display: inline-block;
}

.switch input
{ 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider
{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before
{
  position: absolute;
  content: "";
  background-color: white;
  /* -webkit-transition: transform .4s;
  transition-duration: transform .4s; */
}

input:checked + .slider
{
    background-color: #2196F3;
}

.slider.round:before
{
  border-radius: 50%;
}


@media screen and (max-width: 560px)
{
    .switch
    {
        width: 7vw;
        height: 4vw;
    }
    input:focus + .slider
    {
        box-shadow: 0 0 0.1vw #2196F3;
    }
    .slider:before
    {
        height: 3vw;
        width: 3vw;
        left: 0.5vw;
        bottom: 0.5vw;
    }
    input:checked + .slider:before
    {
        -webkit-transform: translateX(3vw);
        -ms-transform: translateX(3vw);
        transform: translateX(3vw);
    }
    .slider.round
    {
        border-radius: 4vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 560.001px)
{
    .switch
    {
        width: calc(35px + 0.5vw);
        height: calc(16.5px + 0.5vw);
    }
    input:focus + .slider
    {
        box-shadow: 0 0 1px #2196F3;
    }
    .slider:before
    {
        height: calc(13px + 0.5vw);
        width: calc(13px + 0.5vw);
        left: 0.22vw;
        bottom: 0.22vw;
    }
    input:checked + .slider:before
    {
        -webkit-transform: translateX(calc(15px + 0.5vw));
        -ms-transform: translateX(calc(15px + 0.5vw));
        transform: translateX(calc(15px + 0.5vw));
    }
    .slider.round
    {
        border-radius: calc(29px + 0.5vw);
    }
}

@media screen  and (min-width: 1200.001px)
{
    .switch
    {
        width: 40px;
        height: 21.5px;
    }
    input:focus + .slider
    {
        box-shadow: 0 0 1px #2196F3;
    }
    .slider:before
    {
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
    }
    input:checked + .slider:before
    {
        -webkit-transform: translateX(18px);
        -ms-transform: translateX(18px);
        transform: translateX(18px);
    }
    .slider.round
    {
        border-radius: 34px;
    }
}


/* ---------------------------- Waiting Clock -------------------------- */


.WaitingClockAnimated
{
    margin: auto;
    animation-name: animateclock;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    /* animation-timing-function: ease-in-out; */
}

@media screen and (max-width: 500px)
{
    .WaitingClockAnimated
    {
        width: 8vw;
    }
}
@media screen and (max-width: 800px)  and (min-width: 500.001px)
{
    .WaitingClockAnimated
    {
        width: 5vw;
    }
}
@media screen  and (max-width: 1000px)  and (min-width: 800.001px)
{
    .WaitingClockAnimated
    {
        width: calc(30px + 1vw);
    }
}
@media screen  and (min-width: 1000.001px)
{
    .WaitingClockAnimated
    {
        width: 40px;
    }
}

@keyframes animateclock
{
    0%
    {
        rotate: 0deg;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    20%
    {
        rotate: 180deg;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    30%
    {
        rotate: 180deg;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    40%
    {
        rotate: 180deg;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    50%
    {
        rotate: 180deg;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    70%
    {
        rotate: 0deg;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    80%
    {
        rotate: 0deg;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    90%
    {
        rotate: 0deg;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100%
    {
        rotate: 0deg;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}


/* ========================================= BLOCKER IF ROOM UNAVAILABLE ==================================== */

.RoomUnavailableBlockerHotelDetails
{
    width: 100%;
    height: 100%;
    background-color: rgba(242, 244, 247, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

.RoomUnavailableWrapper
{
    width: 90%;
    height: fit-content;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.RoomUnavailableHeaderText
{
    margin: 0 auto;
}
.RoomUnavailableText
{
    color: #000000;
    text-align: center;
}
@media screen and (max-width: 500px)
{
    .RoomUnavailableBlockerHotelDetails
    {
        border-radius: 0.8vw;
    }
    .RoomUnavailableHeaderText
    {
        font-size: 3.6vw;
    }
    .RoomUnavailableHeaderMessage
    {
        margin: 1vw auto;
        margin-bottom: 2vw;
        font-size: 2.6vw;
    }
    /* .RoomUnavailableText
    {
        text-shadow: 0 0.1vw 1vw rgba(0, 0, 0, 0.9);
    } */
}
@media screen and (max-width: 1200px)  and (min-width: 500.001px)
{
    .RoomUnavailableBlockerHotelDetails
    {
        border-radius: 0.5vw;
    }
    .RoomUnavailableHeaderText
    {
        font-size: calc(13px + 0.5vw);
    }
    .RoomUnavailableHeaderMessage
    {
        margin:  calc(2px + 0.5vw) auto;
        margin-bottom:  calc(5px + 0.5vw);
        font-size: calc(8px + 0.5vw);
    }
    /* .RoomUnavailableText
    {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    } */
}
@media screen  and (min-width: 1200.001px)
{
    .RoomUnavailableBlockerHotelDetails
    {
        border-radius: 5px;
    }
    .RoomUnavailableHeaderText
    {
        font-size: 20px;
    }
    .RoomUnavailableHeaderMessage
    {
        margin: 5px auto;
        margin-bottom: 10px;
        font-size: 15px;
    }
    /* .RoomUnavailableText
    {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    } */
}


/* -------------------------------- Full Screen -------------------------- */

.ImageFullScreen
{
    position: relative;
    width: 80%;
    max-width: 800px;
    height: 90%;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto;
}
.BasicBlackBlocker:has(.ImageFullScreen)
{
    background-color: rgba(0, 0, 0, 0.7);
}
.FullScreenImageSwiper
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.NavButtonFullScreen
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  z-index: 1;
  background-color: transparent;
}
.NavButtonFullScreen img
{
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
}
.NavButtonFullScreen.right img
{
    transform: scaleX(-1);
}

@media screen and (max-width: 500px)
{
    .NavButtonFullScreen.left
    {
        left: 0.5vw;
    }
    .NavButtonFullScreen.right
    {
        right: 0.5vw;
    }
    .NavButtonFullScreen
    {
        width: 10vw;
        height: 10vw;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 500.001px)
{
    .NavButtonFullScreen.left
    {
        left: 0.5vw;
    }
    .NavButtonFullScreen.right
    {
        right: 0.5vw;
    }
    .NavButtonFullScreen
    {
        width: calc(50px + 0.5vw);
        height: calc(50px + 0.5vw);
    }
}

@media screen  and (min-width: 1200.001px)
{
    .NavButtonFullScreen.left
    {
        left: 10px;
    }
    .NavButtonFullScreen.right
    {
        right: 10px;
    }
    .NavButtonFullScreen
    {
        width: 60px;
        height: 60px;
    }
}


/* ------------------------------- REFERRAL IMAGE SHARE ------------------------------- */

#ReferallImageContent
{
    background: lightblue;
    display: flex;
    flex-direction: column;
    z-index: -999;
    top: 0;
    width: 390px;
    height: 220px;
    position: absolute;
    overflow: hidden;
}
.PingShareImageBlackGradient
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
}
.PingShareTagImg
{
    height: 25px;
    width: fit-content;
    position: absolute;
    right: 10px;
    bottom: 10px;
    object-fit: contain;
}
.PingSharePinginGoLogo
{
    width: 90px;
    height: fit-content;
    position: absolute;
    left: 10px;
    bottom: 10px;
    object-fit: contain;
}
.PinginGoReferTextContainer
{
    width: fit-content;
    height: fit-content;
    position: absolute;
    background-color: #fe742e;
    bottom: 0;
    left: 0;
}
.PinginGoReferText
{
    width: fit-content;
    height: fit-content;
    margin: 10px 20px;
    font-family: 'Inter Medium';
    font-size: 20px;
    position: relative;
    color: white;
    text-shadow: 3px 3px #c4551e;
}
.PingSharePriceContainer
{
    width: fit-content;
    height: fit-content;
    background-color: white;
    position: absolute;
    border-radius: 8px;
    top: 10px;
    left: 10px;
}

.PingSharePriceContainer p
{
    width: fit-content;
    height: fit-content;
    margin: 2px 10px;
    font-size: 18px;
    position: relative;
    color: #ED7C42;
}

.ScreenBlocker
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
}


/* ------------------------------------- WARNING HOTEL PANEL ------------------------------------ */

.WarningPanelContainer
{
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0px;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 100%);
}

.WarningPanelSendStatus
{
    width: 95%;
    display: flex;
    position: relative;
}

.WarningPanelSuccess, .WarningCopySuccess
{
    background-color: #039855;
}

.WarningPanelFailed
{
    background-color: #B42318;
}

.WarningPanelIconContainer
{
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    border-radius: 100%;
}

.WarningPanelSuccess .WarningPanelIconContainer, .WarningCopySuccess .WarningPanelIconContainer
{
    background-color: #75FF7538;
}

.WarningPanelFailed .WarningPanelIconContainer
{
    background-color: #8F220038;
}


.WarningPanelIcon
{
    width: 60%;
    height: 60%;
    margin: auto;
}

.WarningPanelSuccess .WarningPanelIcon
{
    content: url(../Assets/ButtonIcon/Warning/round-check-circle.svg);
}
.WarningCopySuccess .WarningPanelIcon
{
    content: url(../Assets/ButtonIcon/copy-white-icon.svg);
}
.WarningFailedAlert .WarningPanelIcon
{
    content: url(../Assets/ButtonIcon/Warning/danger-triangle-linear.svg);
}

.WarningDeleted .WarningPanelIcon
{
    content: url(../Assets/ButtonIcon/Warning/trash.svg);
}
.WarningPanelTextMessage
{
    height: fit-content;
    color: white;
    margin: auto 0;
    margin-left: auto;
}
.NotificationMessageTime
{
    height: fit-content;
    margin-left: auto;
    color: white;
    margin-top: auto;
    margin-bottom: auto;
}

@media screen and (max-width: 560px)
{
    .WarningPanelContainer
    {
        width: 80vw;
        height: 70vw;
        top: 5vw;
        padding-bottom: 10vw;
        padding-top: 3vw;
        padding-left: 8vw;
    }
    .WarningPanelSendStatus
    {
        width: 95%;
        height: 12vw;

        border-radius: 1vw;
        margin-bottom: 2vw;
    }
    .WarningPanelIconContainer
    {
        width: 8.5vw;
        height: 8.5vw;
        margin-left: 2vw;
    }
    .WarningPanelTextMessage
    {
        max-width: 40vw;
        padding: 0 2vw;
        font-size: 2.4vw;
    }
    .NotificationMessageTime
    {
        margin-right: 3vw;
        font-size: 2.6vw;
    }
}
@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .WarningPanelContainer
    {
        width: calc(400px + 00.5vw);
        height: calc(450px + 00.5vw);
        top: calc(20px + 00.5vw);
        padding-bottom: calc(10px + 00.5vw);
        padding-top: calc(10px + 00.5vw);
        padding-left: calc(30px + 00.5vw);
    }
    .WarningPanelSendStatus
    {
        width: 95%;
        height: calc(55px + 00.5vw);;

        border-radius: 0.5vw;
        margin-bottom: calc(8px + 00.5vw);;
    }
    .WarningPanelIconContainer
    {
        width: calc(38px + 0.5vw);
        height: calc(38px + 0.5vw);
        margin-left: calc(10px + 0.5vw);
    }
    .WarningPanelTextMessage
    {
        max-width: calc(240px + 0.5vw);
        padding: 0 calc(5px + 0.5vw);
        font-size: calc(9px + 0.5vw);
    }
    .NotificationMessageTime
    {
        margin-right: calc(8px + 0.5vw);
        font-size: calc(10px + 0.5vw);
    }
}
@media screen  and (min-width: 1201px)
{
    .WarningPanelContainer
    {
        width: 450px;
        height: 500px;
        top: 20px;
        padding-bottom: 40px;
        padding-top: 20px;
        padding-left: 60px;
    }
    .WarningPanelSendStatus
    {
        width: 95%;
        height: 64px;

        border-radius: 8px;
        margin-bottom: 15px;
    }
    .WarningPanelIconContainer
    {
        width: 42px;
        height: 42px;
        margin-left: 15px;
    }
    .WarningPanelTextMessage
    {
        max-width: 280px;
        padding: 0 15px;
        font-size: 14px;
    }
    .NotificationMessageTime
    {
        margin-right: 15px;
        font-size: 12px;
    }
}


/* ----------------------------- Hint Mask --------------------------------- */
.HintContentContainer
{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    /* background-color: rgba(0, 0, 0, 0.4); */
    z-index: 999;
}

@media screen and (max-width: 500px)
{
    .ChangeUserInfoMask
    {
        width: 60px;
        height: 2.5vw;
        transform: translate(130px, 0.5vw);
    }
}
@media screen and (max-width: 800px)  and (min-width: 500.001px)
{
    .ChangeUserInfoMask
    {
        width: calc(65px - 1vw);
        height: 15px;
        transform: translate(calc(125px + 1vw), 1.5px);
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 800.001px)
{
    .ChangeUserInfoMask
    {
        width: calc(50px - 1vw);
        height: 18px;
        transform: translate(calc(142px + 1vw), 1px);
    }
}
@media screen  and (min-width: 1200.001px)
{
    .ChangeUserInfoMask
    {
        width: 30px;
        height: 18px;
        transform: translate(165px, 1px);
    }
}

/* ----------------------------- GUIDER TEXT BOX --------------------------------- */


.TextBoxContainer
{
    position: absolute;
    width: fit-content;
    height: fit-content;
}
.TextBoxbubble
{
    position: relative;
    background: #ffffff;
    height: fit-content;
    padding: 0px;
    overflow: hidden;
}
.BubblePointer
{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #ED7C42 transparent;
}
.TextBoxHeaderContainer
{
    width: 100%;
    height: fit-content;
    background: #ED7C42;
    display: flex;
}
.TextBoxHeaderText
{
    color: #FFFFFF;
}
.CloseGuidePanel
{
    border: 0;
    margin: auto;
    background: url(../Assets/ButtonIcon/close-white.svg);
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
.TextBoxMessageSection
{
    width: 100%;
    height: fit-content;
}
.UserEditInfoMask .WhereToClickButtonGuide
{
    position: absolute;
    cursor: pointer;
}

@media screen and (max-width: 560px)
{
    .TextBoxbubble
    {
        border-radius: 1vw;
    }
    .WelcomeToPinginGoGuide
    {
        width: 55vw;
        right: 2vw;
        top: 13vw;
    }
    .BubblePointer
    {
        border-width: 0 1.5vw 5vw;
        top: -4vw;
        left: 93%;
    }
    .TextBoxHeaderText
    {
        font-size: 2.8vw;
        padding: 2.5vw 3vw;
    }
    .CloseGuidePanel
    {
        width: 3.5vw;
        height: 3.5vw;
        margin-right: 2vw;
    }
    .TextBoxMessageSection p
    {
        font-size: 2.4vw;
        padding: 2.2vw;
    }
    .UserEditInfoMask .WhereToClickButtonGuide
    {
        width: 3.5vw;
        height: 3.5vw;

        right: 3.5vw;
        top: 5.5vw;
    }
    .Guide-Rect-Hole
    {
        width: 60px;
        height: 2vw;
        transform: translate(135px, 1vw);
    }
}
@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .TextBoxbubble
    {
        border-radius: calc(2px + 0.5vw);
    }
    .WelcomeToPinginGoGuide
    {
        width: calc(260px + 0.5vw);
        right: 1vw;
        top: calc(60px + 0.5vw);
    }
    .BubblePointer
    {
        border-width: 0 11px 20px;
        top: -20px;
        left: 93%;
        margin-left: -11px;
    }
    .TextBoxHeaderText
    {
        font-size: calc(10px + 0.5vw);
        padding: calc(8px + 0.5vw) calc(8px + 0.5vw);
    }
    .CloseGuidePanel
    {
        width: calc(15px + 0.5vw);
        height: calc(15px + 0.5vw);
        margin-right:  calc(8px + 0.5vw);
    }
    .TextBoxMessageSection p
    {
        font-size: calc(8px + 0.5vw);
        padding: calc(9px + 0.5vw);
    }
    .UserEditInfoMask .WhereToClickButtonGuide
    {
        width: calc(15px + 0.5vw);
        height: calc(15px + 0.5vw);

        right: 2vw;
        top: calc(18px + 0.5vw);
    }
    .Guide-Rect-Hole
    {
        x: 165;
        y: 0.4vw;
        width: 32;
        height: 9;
    }

}

@media screen  and (min-width: 1201px)
{
    .TextBoxbubble
    {
        border-radius: 8px;
    }
    .WelcomeToPinginGoGuide
    {
        width: 300px;
        right: 13px;
        top: 70px;
    }
    .BubblePointer
    {
        border-width: 0 11px 20px;
        top: -20px;
        left: 86%;
        margin-left: 0px;
    }
    .TextBoxHeaderText
    {
        font-size: 15px;
        padding: 12px 15px;
    }
    .CloseGuidePanel
    {
        width: 20px;
        height: 20px;
        margin-right: 15px;
    }
    .TextBoxMessageSection p
    {
        font-size: 13px;
        padding: 15px;
    }
    .UserEditInfoMask .WhereToClickButtonGuide
    {
        width: 20px;
        height: 20px;
        right: 35px;
        top: 25px;
    }
    .Guide-Rect-Hole
    {
        x: 88%;
        y: 3px;
        width: 20px;
        height: 12px;
    }
}


/* ----------------------------- Progress Top ------------------------------ */

.ProgressStepMainContainer
{
    width: 100%;
    display: flex;
    /* grid-template-rows: repeat(auto-fit);
    grid-template-columns: repeat(3, 1fr); */
}
.PaymentTopLineAndTextContainer
{
    /* flex: 1; */
    display: flex;
}
.PaymentTopLineAndTextContainer:not(:first-child)
{
    flex: 1;
}
.PaymentTopLineAndTextContainer p
{
    color: white;
}
.paymentdetailscontent
{
    width: 100%;
    height: fit-content;
    position: relative;
}
.AllPaymentProgressWrapper
{
    width: 95%;
    height: fit-content;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}
.HotelSelectionProgressTextContainer
{
    position: relative;
    display: flex;
}
.ProgressBarTopContainer
{
    width: 100%;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    overflow: hidden;
}
.ProgressBarTopDotted
{
    width: 100%;
    height: 100%;
    margin-top: auto;
    margin-bottom: auto;
    background-image: linear-gradient(
      to right,
      #B0BEC5 55%,
      rgba(255, 255, 255, 0) 0%
    );
    background-position: center;
    background-size: 1.1vw 0.6vw;
    background-repeat: repeat-x;
    position: absolute;

    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
}
.ProgressBarLine
{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
}

.ProgressBarWhiteBG, .ProgressBarTopDotted, .ProgressBarYellow
{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #B0BEC5;
}
.ProgressBarWhiteBG
{
    opacity: 0;
    background-color: #B0BEC5;
    transition: opacity 0.3s ease-in;
}
.ProgressBarYellow
{
    width: 0%;
    background-color: #ED7C42;
    transition: all 0.3s ease-in;
}
.ProgressBarTopDotted, .BlueNightDotLine
{
    background-color: transparent;
    background-image: linear-gradient(
      to right,
      #B0BEC5 55%,
      rgba(255, 255, 255, 0) 0%
    );
    background-position: center;
    background-size: 1.1vw 0.6vw;
    background-repeat: repeat-x;
    transition: opacity 0.3s ease-in;
}
.BlueNightDotLine
{
    background-image: linear-gradient(
      to right,
      #2494D9 55%,
      rgba(255, 255, 255, 0) 0%
    );
}
.ProgressStepTextContainer
{
    display: flex;
}
.ProgressStepNumberContainer
{
    border-radius: 100%;
    background-color: white;
    display: flex;
    margin: auto 0;

    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
}
.ProgressStepNumberContainer p
{
    width: fit-content;
    height: fit-content;
    margin: auto;
    color: #2494D9;
}
.StepTextP
{
    margin: auto 0;
}

.PaymentTopLineAndTextContainer.CurrentProgressPayment .ProgressStepNumberContainer
{
    background-color: #ED7C42;
}
.PaymentTopLineAndTextContainer.CurrentProgressPayment .ProgressStepNumberContainer p
{
    color: white;
}
.PaymentTopLineAndTextContainer.CurrentProgressPayment .ProgressBarYellow
{
    width: 100%;
}
.PaymentTopLineAndTextContainer.CurrentProgressPayment .ProgressBarTopDotted
{
    opacity: 0;
}
.PaymentTopLineAndTextContainer.CurrentProgressPayment .ProgressBarWhiteBG
{
    opacity: 1;
}
.PaymentTopLineAndTextContainer.CurrentProgressPayment + .PaymentTopLineAndTextContainer .ProgressBarWhiteBG
{
    opacity: 1;
}


/* .PaymentTopLineAndTextContainer:not(.CurrentProgressPayment) .ProgressBarWhiteBG
{
    opacity: 0;
}
.PaymentTopLineAndTextContainer:not(.CurrentProgressPayment) .ProgressBarYellow
{
    width: 0%;
}

.PaymentTopLineAndTextContainer.CurrentProgressPayment .ProgressBarYellow
{
    width: 100%;
} */

@media screen and (max-width: 560px)
{
    .ProgressStepMainContainer
    {
        height: 10vw;
    }
    .paymentdetailscontent
    {
        margin-top: 32vw;
    }
    .ProgressBarTopContainer
    {
        height: 0.5vw;
        margin-left: 1vw;
        margin-right: 1vw;
    }
    .HotelSelectionProgressTextContainer
    {
        width: fit-content;
        height: 13vw;
    }
    .BlueNightDotLine
    {
        width: 20vw;
        height: 0.3vw;
    }
    .BluDotWrapper
    {
        margin: 0 2vw;
        margin-top: 3vw;
    }
    .ProgressStepNumberContainer
    {
        min-width: 4.2vw;
        min-height: 4.2vw;
        margin-right: 1vw;
    }
    .StepTextP
    {
        text-align: center;
    }
}
@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .ProgressStepMainContainer
    {
        height: calc(45px + 0.5vw);
    }
    .paymentdetailscontent
    {
        margin-top: calc(120px + 6vw);
    }
    .ProgressBarTopContainer
    {
        height: 2px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .HotelSelectionProgressTextContainer
    {
        width: fit-content;
        height: calc(50px + 1vw);
    }
    .BlueNightDotLine
    {
        width: 12vw;
        height: 1.6px;
        background-size: 1vw 1.6px;
    }
    .BluDotWrapper
    {
        margin: 0 calc(2px + 0.5vw);
        margin-top: calc(8px + 0.5vw);
    }
    .ProgressStepNumberContainer
    {
        width: calc(18px + 0.5vw);
        height: calc(18px + 0.5vw);
        margin-right: 0.5vw;
    }
    .PaymentTopLineAndTextContainer p
    {
        white-space: nowrap;
    }
}

@media screen  and (min-width: 1201px)
{
    .ProgressStepMainContainer
    {
        height: 52px;
    }
    .paymentdetailscontent
    {
        margin-top: 195px;
    }
    .ProgressBarTopContainer
    {
        height: 2px;
        margin-left: 8px;
        margin-right: 8px;
    }
    .HotelSelectionProgressTextContainer
    {
        width: fit-content;
        height: fit-content;
    }
    .BlueNightDotLine
    {
        width: 110px;
        height: 1.6px;
        background-size: 5px 1.6px;
    }
    .BluDotWrapper
    {
        margin: 0 10px;
        margin-top: 15px;
    }
    .ProgressStepNumberContainer
    {
        width: 26px;
        height: 26px;
        margin-right: 5px;
    }
    .PaymentTopLineAndTextContainer p
    {
        white-space: nowrap;
    }
}

/* ------------------------------------ ORANGE SELECTED BUTTON ------------------------------ */

.SelectedSortOrangeWrapper
{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;

    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    -o-transition: left 0.2s ease;
    -ms-transition: left 0.2s ease;
    transition: left 0.2s ease;
}
.SelectedSortOrange
{
    background-color: #ED7C42;
    margin: 0 auto;
}

@media screen and (max-width: 560px)
{
    .SelectedSortOrangeWrapper
    {
        width: 25%;
        height: 100%;
    }
    .SelectedSortOrange
    {
        width: 90%;
        height: 100%;
    }
}
@media screen and (max-width: 960px) and (min-width: 561px)
{
    .SelectedSortOrangeWrapper
    {
        width: 25%;
        height: 100%;
    }
    .SelectedSortOrange
    {
        width: 90%;
        height: 100%;
    }
}
@media screen and (min-width: 961px)
{
    .SelectedSortOrangeWrapper
    {
        width: 25%;
        height: 100%;
    }
    .SelectedSortOrange
    {
        width: 90%;
        height: 100%;
    }
}

/* ---------------------------------- BASIC SPACING --------------------------------- */

@media screen and (max-width: 560px)
{
    .BasicChildMargin > *:not(:last-child)
    {
        margin-right: 1vw;
    }
    .BasicChildMargin2 > *:not(:last-child)
    {
        margin-right: 0.5vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .BasicChildMargin > *:not(:last-child)
    {
        margin-right: calc(3px + 0.5vw);
    }
    .BasicChildMargin2 > *:not(:last-child)
    {
        margin-right: 0.5vw;
    }
}

@media screen  and (min-width: 1201px)
{
    .BasicChildMargin > *:not(:last-child)
    {
        margin-right: 10px;
    }
    .BasicChildMargin2 > *:not(:last-child)
    {
        margin-right: 5px;
    }
}

/* ====================== TYPE OF MASK ==================================== */

.BasicGradientTopBottomMask
{
    -webkit-mask-box-image: linear-gradient(to bottom, transparent, 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),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),transparent);
}


/* =================================== LIST =============================== */

.BasicListContainer
{
  list-style: none;
  counter-reset: my-counter;
  margin: 0;
  padding: 0;
}
.BasicListContainer li
{
  display: flex;
  align-items: flex-start;
}
.BasicListContentWrapper
{
    flex: 1;
    height: fit-content;
}
.BasicListContentWrapper p
{
    text-align: justify;
}

/* ---------- Basic Dot ---------- */

.DottedCounterUL > li::before
{
  content: "•";
  color: black;
}

/* ---------- Basic Number ---------- */

.NumberCounterUL > li
{
  counter-increment: my-counter;
}
.NumberCounterUL > li::before
{
  content: counter(my-counter) ". ";
}


/* ---------- Roman Number ---------- */


.RomanCounterUL > li
{
  counter-increment: roman-counter;
}

.RomanCounterUL > li::before
{
  content: counter(roman-counter, upper-roman) ". ";
}


/* ---------- Basic Alphabet ---------- */


.AlphabetCounterUL > li
{
  counter-increment: alphabet-counter;
}

.AlphabetCounterUL > li::before
{
  content: counter(alphabet-counter, upper-alpha) ". ";
}


/* ---------- Multiple Section With Alphabet Beginning ---------- */

.MultiSectionWithAlphaBegOL /* Main -------- */
{
  counter-reset: section;
  list-style: none;
}

.MultiSectionWithAlphaBegOL > li
{
  counter-increment: section;
}

.MultiSectionWithAlphaBegOL > li::before
{
  content: counter(section, upper-alpha) ". ";
  font-weight: bold;
}

.MultiSectionWithAlphaBegOL ol /* Subsections -------- */
{
  counter-reset: subsection;
  list-style: none;
}

.MultiSectionWithAlphaBegOL ol > li
{
  counter-increment: subsection;
}

.MultiSectionWithAlphaBegOL ol > li::before
{
  content: counter(section, upper-alpha) counter(subsection) ". ";
}

.MultiSectionWithAlphaBegOL ol ol /* Subsubsections -------- */
{
  counter-reset: subsubsection;
}

.MultiSectionWithAlphaBegOL ol ol > li
{
  counter-increment: subsubsection;
}

.MultiSectionWithAlphaBegOL ol ol > li::before
{
  content: counter(section, upper-alpha) counter(subsection) "." counter(subsubsection) " ";
}


@media screen and (max-width: 560px)
{
    .BasicListContainer li, .BasicMarginList
    {
        margin-bottom: 2vw;
    }
    .BasicMarginTopList
    {
        margin-top: 2vw;
    }
    .BasicMarginLR
    {
        margin-left: 2vw;
        margin-right: 2vw;
    }
    .SmallMarginList
    {
        margin-bottom: 1vw;
    }
    .BigMarginList
    {
        margin-bottom: 2.5vw;
    }
    .DottedCounterLi::before
    {
        font-size: 2.2vw;
        margin-right: 1vw;
        margin-top: 0.1vw;
    }
    .DottedCounterLiBig::before
    {
        font-size: 2.8vw;
        margin-right: 0.6vw;
        margin-top: 0.1vw;
    }
    .DottedCounterLiBigger::before
    {
        font-size: 3.2vw;
        margin-right: 0.5vw;
        margin-top: -0.2vw;
    }
    .DottedCounterLiBiggest::before
    {
        font-size: 3.5vw;
        margin-right: 0.4vw;
        margin-top: -0.2vw;
    }
    .BasicAlphaNumberLi::before
    {
        font-size: 2.2vw;
        margin-top: 0.4vw;
        margin-right: 1vw;
    }
    .BasicAlphaNumberLiBig::before
    {
        font-size: 2.6vw;
        margin-top: 0.2vw;
        margin-right: 0.6vw;
    }
    .BasicAlphaNumberLiBigger::before
    {
        font-size: 2.8vw;
        margin-top: 0.1vw;
        margin-right: 0.5vw;
    }
    .BasicAlphaNumberLiBiggest::before
    {
        font-size: 3.2vw;
        margin-top: 0.1vw;
        margin-right: 0.5vw;
    }
    .PaddingLeftLi
    {
        padding-left: 0.5em;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 560px)
{
    .BasicListContainer li, .BasicMarginList
    {
        margin-bottom: 8px;
    }
    .BasicMarginTopList
    {
        margin-top: 8px;
    }
    .BasicMarginLR
    {
        margin-left: 8px;
        margin-right: 8px;
    }
    .SmallMarginList
    {
        margin-bottom: 4px;
    }
    .BigMarginList
    {
        margin-bottom: calc(8px + 0.5vw);
    }
    .DottedCounterLi::before
    {
        font-size: calc(6px + 0.5vw);
        margin-right: calc(5px + 0.5vw);
        margin-top: 0.2vw;
    }
    .DottedCounterLiBig::before
    {
        font-size: calc(9px + 0.5vw);
        margin-right: calc(3px + 0.5vw);
        margin-top: 0vw;
    }
    .DottedCounterLiBigger::before
    {
        font-size: calc(12px + 0.5vw);
        margin-right: calc(0px + 0.5vw);
        margin-top: -0.1vw;
    }
    .DottedCounterLiBiggest::before
    {
        font-size: calc(14px + 0.5vw);
        margin-right: calc(0px + 0.5vw);
        margin-top: 0vw;
    }
    .BasicAlphaNumberLi::before
    {
        font-size: calc(6px + 0.5vw);
        margin-top: 0.2vw;
        margin-right: calc(5px + 0.5vw);
    }
    .BasicAlphaNumberLiBig::before
    {
        font-size: calc(8px + 0.5vw);
        margin-top: 0.2vw;
        margin-right: calc(3px + 0.5vw);
    }
    .BasicAlphaNumberLiBigger::before
    {
        font-size: calc(10px + 0.5vw);
        margin-top: 0.2vw;
        margin-right: calc(1px + 0.5vw);
    }
    .BasicAlphaNumberLiBiggest::before
    {
        font-size: calc(11px + 0.5vw);
        margin-top: 0.4vw;
        margin-right: calc(1px + 0.5vw);
    }
    .PaddingLeftLi
    {
        padding-left: 0.5em;
    }
}

@media screen  and (min-width: 1201px)
{
    .BasicListContainer li, .BasicMarginList
    {
        margin-bottom: 8px;
    }
    .BasicMarginTopList
    {
        margin-top: 8px;
    }
    .BasicMarginLR
    {
        margin-left: 8px;
        margin-right: 8px;
    }
    .SmallMarginList
    {
        margin-bottom: 4px;
    }
    .BigMarginList
    {
        margin-bottom: 18px;
    }
    .DottedCounterLi::before
    {
        font-size: 14px;
        margin-top: -1px;
        margin-right: 8px;
    }
    .DottedCounterLiBig::before
    {
        font-size: 16px;
        margin-top: -2px;
        margin-right: 7px;
    }
    .DottedCounterLiBigger::before
    {
        font-size: 18px;
        margin-top: -2px;
        margin-right: 5px;
    }
    .DottedCounterLiBiggest::before
    {
        font-size: 20px;
        margin-right: 2px;
        margin-top: 0vw;
    }
    .BasicAlphaNumberLi::before
    {
        font-size: 12px;
        margin-top: 1px;
        margin-right: 8px;
    }
    .BasicAlphaNumberLiBig::before
    {
        font-size: 14px;
        margin-top: 1px;
        margin-right: 8px;
    }
    .BasicAlphaNumberLiBigger::before
    {
        font-size: 16px;
        margin-top: 0px;
        margin-right: 6px;
    }
    .BasicAlphaNumberLiBiggest::before
    {
        font-size: 18px;
        margin-top: 3px;
        margin-right: 7px;
    }
    .PaddingLeftLi
    {
        padding-left: 0.5em;
    }
}

.NoMarginLi::before
{
    margin-right: 0;
}
.HideLiPointer::before
{
    opacity: 0;
}

/* ============================ BLUE TOP ================================ */

.BlueTopBigContainer
{
    flex: 1;
    height: fit-content;
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(
        to left,
        #50A9E1,
        #0077C2,
        #1A6899
    );
}

div:has(.BlueTopBigContainer) + .MinusMarginDueToBlue
{
    z-index: 1;
    position: relative;
}


@media screen and (max-width: 560px)
{
    .BlueTopBigContainer
    {
        padding: 7vw 5vw;
        padding-bottom: 13vw;
    }
    div:has(.BlueTopBigContainer) + .MinusMarginDueToBlue
    {
        margin-top: -7vw;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .BlueTopBigContainer
    {
        padding: calc(50px + 0.5vw) calc(20px + 0.5vw);
        padding-bottom: calc(70px + 0.5vw);
    }
    div:has(.BlueTopBigContainer) + .MinusMarginDueToBlue
    {
        margin-top: calc(-40px - 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .BlueTopBigContainer
    {
        padding: 60px 40px;
        padding-bottom: 100px;
    }
    div:has(.BlueTopBigContainer) + .MinusMarginDueToBlue
    {
        margin-top: -60px;
    }
}


/* ============================ CHANGE ICON BASED ON BUTTON ================================ */

.SendPaperPlaneBtnIconWhite
{
    content:url(/Assets/ButtonIcon/send-paperplane-white-icon.svg);
}

.ButtonUnselectable .SendPaperPlaneBtnIconWhite
{
    content:url(/Assets/ButtonIcon/send-paperplane-dark-grey-icon.svg);
}


.PlusIconWhiteButton
{
    content:url(/Assets/ButtonIcon/plushcirclewhite.svg);
}

.ButtonUnselectable .PlusIconWhiteButton
{
    content:url(/Assets/ButtonIcon/plushcircleinvalid.svg);
}


.AddReferralIcon
{
    content:url(/Assets/ButtonIcon/check-mark-blue.svg);
}

.ButtonUnselectable .AddReferralIcon
{
    content:url(/Assets/ButtonIcon/check-mark-grey.svg);
}

.AddReferralButtonSuccess .AddReferralIcon
{
    content:url(/Assets/ButtonIcon/check-mark-white.svg);
}



/* ================================= COLLABSIBLECONTENT ================================= */


.wrap-collabsible
{
    margin: 0 0;
}

.collapsible-content
{
    max-height: 0px;
    overflow: hidden;
    transition:max-height .25s ease-in-out;
}
.wrap-collabsible:has(.CollapsibleToggleInput:checked) .collapsible-content
{
    max-height: 1000px;
}

.ExpandWrapIcon
{
    object-fit: contain !important;
    object-position: center !important;
    content:url("/Assets/ButtonIcon/plushcircleblue.svg") !important;
}

.wrap-collabsible:has(.CollapsibleToggleInput:checked) .ExpandWrapIcon
{
    content:url("/Assets/ButtonIcon/minuscircleblue.svg") !important;
}

/* ============================ REFERRAL INPUT =========================== */

.ReferralWrapperTopSection
{
    background-color: #2494D9;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ReferralWrapperBottomSection
{
    background-color: #ED7C42;
    display: flex;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.RefPrizeIconMyProfile
{
    object-fit: contain !important;
    object-position: center !important;
}

@media screen and (max-width: 560px)
{
    .ReferralInputAndButtonContainer
    {
        margin-bottom: 4vw;
    }
    .ReferralInputAndButtonContainer .BasicTextButton
    {
        margin-left: 1.5vw;
    }
    .ReferralWrapperTopSection
    {
        padding: 1.8vw 2vw;
    }
    .ReferralWrapperTopSection .SmallPanelDropDownContainer
    {
        margin-right: 1.8vw;
    }
    .ReferralWrapperTopSection .InputFieldInsideSmallPanel
    {
        padding: 1.4vw 1.5vw;
    }
    .ReferralWrapperBottomSection
    {
        padding: 1.5vw 2vw;
    }
    .RefPrizeIconMyProfile
    {
        width: 4vw;
        height: 4vw;
        margin-right: 1vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .ReferralInputAndButtonContainer
    {
        margin-bottom: calc(15px + 0.5vw);
    }
    .ReferralInputAndButtonContainer .BasicTextButton
    {
        margin-left: calc(5px + 0.5vw);
    }
    .ReferralWrapperTopSection
    {
        padding: calc(4px + 0.5vw) calc(6px + 0.5vw);
    }
    .ReferralWrapperTopSection .SmallPanelDropDownContainer
    {
        margin-right: calc(5px + 0.5vw);
    }
    .ReferralWrapperTopSection .InputFieldInsideSmallPanel
    {
        padding: calc(3.7px + 0.5vw) calc(4px + 0.5vw);
    }
    .ReferralWrapperBottomSection
    {
        padding: calc(3px + 0.5vw) calc(6px + 0.5vw);
    }
    .RefPrizeIconMyProfile
    {
        width: calc(15px + 0.5vw);
        height: calc(15px + 0.5vw);
        margin-right: 0.5vw;
    }
}

@media screen  and (min-width: 1201px)
{
    .ReferralInputAndButtonContainer
    {
        margin-bottom: 20px;
    }
    .ReferralInputAndButtonContainer .BasicTextButton
    {
        margin-left: 10px;
    }
    .ReferralWrapperTopSection
    {
        padding: 8px 10px;
    }
    .ReferralWrapperTopSection .SmallPanelDropDownContainer
    {
        margin-right: 10px;
    }
    .ReferralWrapperBottomSection
    {
        padding: 6px 10px;
    }
    .RefPrizeIconMyProfile
    {
        width: 25px;
        height: 25px;
        margin-right: 2px;
    }
}



/* ---------------------------------- */

.MaintenanceMainParent
{
    width: 100%;
    height: 100%;
    background-color: #F2F4F7;
    display: flex;
    flex-direction: column;
}
.MaintenanceContentWrapper
{
    height: fit-content;
    margin: auto auto;
    display: flex;
}
.MaintenanceTextWrapper
{
    flex: 1;
    height: fit-content;
    margin-top: auto;
}

.MaintenanceIMG
{
    height: fit-content;
}


@media screen and (max-width: 560px)
{
    .MaintenanceContentWrapper
    {
        width: 85%;
    }
    .MaintenanceIMG
    {
        width: 60vw !important;
        margin: auto;
    }
    .MaintenanceTextWrapper
    {
        margin-top: 8vw;
    }
    .MaintenanceTextWrapper .LabelGreyHeaderText
    {
        margin-top: 4vw !important;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .MaintenanceContentWrapper
    {
        width: 92%;
    }
    .MaintenanceIMG
    {
        width: calc(320px + 10vw);
        margin-left: calc(60px + 0.5vw);
    }
    .MaintenanceTextWrapper
    {
        padding-top: calc(20px + 0.5vw);
    }
    .MaintenanceTextWrapper .LabelGreyHeaderText
    {
        margin-top: calc(10px + 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .MaintenanceContentWrapper
    {
        width: 90%;
    }
    .MaintenanceIMG
    {
        width: 500px;
        margin-left: calc(100px + 0.5vw);
    }
    .MaintenanceTextWrapper .LabelGreyHeaderText
    {
        margin-top: 15px;
    }
}


@media screen and (max-width: 900px)
{
    .MaintenanceContentWrapper
    {
        flex-direction: column;
    }
    .MaintenanceTextWrapper
    {
        order: 1;
    }
    .MaintenanceIMG
    {
        width: calc(300px + 0.5vw);
        margin: 0 auto;
    }
    .MaintenanceTextWrapper > p
    {
        margin: 0 auto;
        text-align: center;
    }
}


/* ------------------------------------- PAGINATION ------------------------------------ */

.BasicYellowPaginationContainer
{
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    position: relative !important;
}
.BasicYellowPaginationContainer .swiper-pagination-bullet, .ExpandingCircleOrange, .BasicYellowPaginationContainer .swiper-pagination-bullet-active, .OrangeCircleBasic, .ExpandingCircleOrangeAnimate
{
    background-color: #ED7C42;
}

@media screen and (max-width: 560px)
{
    .BasicYellowPaginationContainer
    {
        margin-top: 1.2vw;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet, .OrangeCircleBasic
    {
        width: 1.5vw;
        height: 1.5vw;
        border-radius: 100%;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet:not(:last-child)
    {
        margin-right: 1vw;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet-active, .ExpandingCircleOrange, .ExpandingCircleOrangeAnimate
    {
        width: 8vw;
        height: 1.5vw;
        border-radius: 1vw;
    }
}

@media screen  and (max-width: 1200px)  and (min-width: 561px)
{
    .BasicYellowPaginationContainer
    {
        margin-top: calc(2px + 0.5vw);
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet, .OrangeCircleBasic
    {
        width: calc(5px + 0.5vw);
        height: calc(5px + 0.5vw);
        border-radius: 25px;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet:not(:last-child)
    {
        margin-right: 0.5vw;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet-active, .ExpandingCircleOrange, .ExpandingCircleOrangeAnimate
    {
        width: calc(40px + 0.5vw);
        height: calc(5px + 0.5vw);
        border-radius: 25px;
    }
}

@media screen  and (min-width: 1201px)
{
    .BasicYellowPaginationContainer
    {
        margin-top: 10px;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet, .OrangeCircleBasic
    {
        width: 10px;
        height: 10px;
        border-radius: 25px;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet:not(:last-child)
    {
        margin-right: 5px;
    }
    .BasicYellowPaginationContainer .swiper-pagination-bullet-active, .ExpandingCircleOrange, .ExpandingCircleOrangeAnimate
    {
        width: 50px;
        height: 10px;
        border-radius: 25px;
    }
}