.PaymentInfoWrapper
{
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex
}
.PaymentInfoLeftSection, .PaymentSectionWrapper
{
    flex: 1;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
}
.PaymentInfoRightSection
{
    position: relative;
    height: fit-content;
}
.GreyContainerInfoPadding
{
    flex-grow: 1;
    height: fit-content;
    background-color: #F2F4F7;
}
.ApplyReferralInputTextWrapper
{
    flex: 1;
    height: fit-content;
}
.ApplyReferralInputTextWrapper p
{
    margin-left: 0;
}
.RoomImagePreviewRightPayment
{
    width: 100%;
    overflow: hidden;
}
.PaymentInfoWrapper:has(.PaymentInfoLeftSection #PaymentLeftSection1[style*="display: none"]) .RoomImagePreviewRightPayment
{
    display: none;
}
.PaymentInfoWrapper:has(.PaymentInfoLeftSection #PaymentLeftSection1[style*="display: none"]) .PaymentInfoRightSection
{
    pointer-events: none;
}
.ExpandCloseContentCheck
{
    max-height: 0;
    overflow: hidden;
}
.PoinWithIconWrapper
{
    width: fit-content;
    height: fit-content;
    margin-left: auto;
    display: flex;
}
.PoinWithIconWrapper img
{
    margin: auto 0;
}
.PaymentChooseForm
{
    flex-grow: 1;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.PaymentChoiceWrapper
{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.PaymentChoiceImage
{
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 100%;
}
.PaymentMethodButton
{
    display: flex;
}
.PaymentMethodButton:has(input:checked)
{
    background-color: #1D76AE;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.PaymentMethodButton:has(input:checked) .LabelGreyHeaderSmallerText
{
    color: white !important;
    font-family: 'Inter Bold' !important;
}
.MainInformationPaymentContainer
{
    flex: 1;
}
.MainInformationPaymentWrapper, .BluPaymentInputWrapper
{
    flex: 1;
}
.PaymentFinalListContainer p
{
    color: #000000;
}
.TopPaymentMainInformationWrapper
{
    flex: 1;
    height: fit-content;
    display: flex;
}
.TopPaymentInfoLeft
{
    height: fit-content;
}
.TopPaymentInfoRight
{
    width: fit-content;
    height: fit-content;
    margin-left: auto;
}
.AlreadyPayBlueContainer
{
    flex: 1;
    background-color: #D3EAF7;
}
.PaymentSectionVer1 .GuestInfoSectionPayment
{
    display: none;
}
.PaymentSectionVer2 .SearchTopNonIndexSection, .PaymentSectionVer2 .HoverableContentInsideInputField
{
    pointer-events: none;
}
.PaymentSectionVer2 #RoomQuotaTypeDropDownButton, .PaymentSectionVer2 .RoomImagePreviewRightPayment, .PaymentSectionVer2 .MaxDiscountWrapperPayment,
.ShowDetailsPriceON .OriginalPriceToHideOnOff, .ShowDetailsPriceOFF .OriginalPriceToHideOnOn
{
    display: none;
}

.ShowDetailsPriceON .OriginalPriceFullDetailsMainContainer
{

}

@media screen and (max-width: 560px)
{
    .GreyContainerInfoPadding
    {
        padding: 2vw 2.5vw;
    }
    .AllContentMarginPayment
    {
        margin-bottom: 1.5vw;
    }
    .GreyContainerInfoPadding .InputFieldMargin:not(:last-child)
    {
        margin-bottom: 0.1vw;
    }
    .ApplyReferralInputTextWrapper
    {
        margin: auto 1vw;
    }
    .ApplyReferralInputTextWrapper p
    {
        margin-bottom: 1vw;
    }
    .ApplyReferralInputTextWrapper p:nth-child(2)
    {
        margin-bottom: 1vw;
    }
    .RoomImagePreviewRightPayment
    {
        height: 20vw;
    }
    .PoinWithIconWrapper img
    {
        width: 2vw;
        height: 2vw;
        margin: auto 0.8vw;
    }
    .PaymentChoiceWrapper
    {
        margin-top: 2vw;
    }
    .PaymentChoiceWrapper:nth-child(3)
    {
        margin-bottom: 3vw;
    }
    .PaymentChoiceWrapper .LabelGreyHeaderSmallerText2
    {
        font-size: 2.5vw;
        margin-bottom: 1vw;
    }
    .PaymentChoiceImage
    {
        width: 5vw;
        height: 5vw;
        outline: 0.1vw solid rgb(217, 217, 217);
        outline-offset: -0.1vw;
        margin: 0.5vw 1vw;
        margin-right: 1.5vw;
    }
    .PaymentMethodButton
    {
        box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.2);
        margin-bottom: 1.5vw;
    }
    .MainInformationPaymentContainer
    {
        outline: 0.1vw solid rgb(217, 217, 217);
        outline-offset: -0.1vw;
        box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.2);
    }
    .MainInformationPaymentWrapper, .BluPaymentInputWrapper
    {
        padding: 4vw 3vw;
    }
    .PaymentFinalListContainer
    {
        /* margin-left: 3.5vw; */
    }
    .PaymentFinalListContainer li:not(:last-child)
    {
        margin-bottom: 2vw;
    }
    .PaymentFinalListContainer p
    {
        line-height: 3.5vw;
    }
    .TopPaymentMainInformationWrapper
    {
        margin-bottom: 3.5vw;
    }
    .TopPaymentInfoLeft
    {
        width: 40%;
    }
    .TopPaymentInfoLeft p:not(:last-child),.TopPaymentInfoRight p:not(:last-child)
    {
        margin-bottom: 0.2vw;
    }
    .AlreadyPayBlueContainer
    {
        padding: 3vw 2.5vw;
    }
}


@media screen and (max-width: 900px)
{
    .PaymentInfoWrapper
    {
        flex-direction: column;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .PaymentInfoRightSection
    {
        width: 100% !important;
        margin-left: 0 !important;
        order: 1;
    }
    .PaymentInfoLeftSection
    {
        order: 2;
    }
    .TwoPartSeparatorCheckInOut .HoverableContentInsideInputField
    {
        width: 49.5%;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 560px)
{
    .PaymentInfoRightSection
    {
        width: calc(350px + 0.5vw);
        margin-left: 1.5vw;
    }
    .GreyContainerInfoPadding
    {
        padding: calc(6px + 0.5vw) calc(8px + 0.5vw);
    }
    .AllContentMarginPayment
    {
        margin-bottom: calc(2px + 0.5vw);
    }
    .GreyContainerInfoPadding .InputFieldMargin:not(:last-child)
    {
        margin-bottom: 0.1vw;
    }
    .ApplyReferralInputTextWrapper
    {
        margin: auto calc(2px + 0.5vw);
    }
    .ApplyReferralInputTextWrapper p
    {
        margin-bottom: 0.2vw;
    }
    .ApplyReferralInputTextWrapper p:nth-child(2)
    {
        margin-bottom: calc(1px + 0.5vw);
    }
    .RoomImagePreviewRightPayment
    {
        height: calc(160px + 0.5vw);
    }
    .PoinWithIconWrapper img
    {
        width: calc(8px + 0.5vw);
        height: calc(8px + 0.5vw);
        margin: auto 0.3vw;
    }
    .PaymentChoiceWrapper
    {
        margin-top: calc(8px + 0.5vw);
    }
    .PaymentChoiceWrapper:nth-child(3)
    {
        margin-bottom: calc(10px + 0.5vw);
    }
    .PaymentChoiceWrapper .LabelGreyHeaderSmallerText2
    {
        margin-bottom: calc(3px + 0.5vw);
    }
    .PaymentChoiceImage
    {
        width: calc(23px + 0.5vw);
        height: calc(23px + 0.5vw);
        outline: 1.5px solid rgb(217, 217, 217);
        outline-offset: -1px;
        margin: auto calc(1.5px + 0.5vw);
        margin-right: calc(2px + 0.5vw);
    }
    .PaymentMethodButton
    {
        box-shadow: 0 0.1vw calc(0px + 0.5vw) rgba(0, 0, 0, 0.2);
        margin-bottom: calc(2px + 0.5vw);
    }
    .MainInformationPaymentContainer
    {
        outline: 1px solid rgb(217, 217, 217);
        box-shadow: 0 0.1vw calc(0px + 0.5vw) rgba(0, 0, 0, 0.2);
        outline-offset: -1px;
    }
    .MainInformationPaymentWrapper, .BluPaymentInputWrapper
    {
        padding: calc(18px + 0.5vw) calc(15px + 0.5vw);
    }
    .PaymentFinalListContainer
    {
        /* margin-left: calc(12px + 0.5vw); */
    }
    .PaymentFinalListContainer li:not(:last-child)
    {
        margin-bottom: calc(5px + 0.5vw);
    }
    .PaymentFinalListContainer p
    {
        line-height: calc(12px + 0.5vw);
    }
    .TopPaymentMainInformationWrapper
    {
        margin-bottom: calc(18px + 0.5vw);
    }
    .TopPaymentInfoLeft
    {
        width: 38%;
    }
    .TopPaymentInfoLeft p:not(:last-child),.TopPaymentInfoRight p:not(:last-child)
    {
        margin-bottom: 0.2vw;
    }
    .AlreadyPayBlueContainer
    {
        padding: calc(10px + 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .PaymentInfoRightSection
    {
        width: 400px;
        margin-left: 20px;
    }
    .GreyContainerInfoPadding
    {
        padding: 13px 18px;
    }
    .AllContentMarginPayment
    {
        margin-bottom: 12px;
    }
    .GreyContainerInfoPadding .InputFieldMargin:not(:last-child)
    {
        margin-bottom: 5px;
    }
    .ApplyReferralInputTextWrapper
    {
        margin: auto 10px;
    }
    .ApplyReferralInputTextWrapper p
    {
        margin-bottom: 4px;
    }
    .ApplyReferralInputTextWrapper p:nth-child(2)
    {
        margin-bottom: 8px;
    }
    .RoomImagePreviewRightPayment
    {
        height: 200px;
    }
    .PoinWithIconWrapper img
    {
        width: 14px;
        height: 14px;
        margin: auto 5px;
    }
    .PaymentChoiceWrapper
    {
        margin-top: 15px;
    }
    .PaymentChoiceWrapper:nth-child(3)
    {
        margin-bottom: 20px;
    }
    .PaymentChoiceWrapper .LabelGreyHeaderSmallerText2
    {
        margin-bottom: 10px;
    }
    .PaymentChoiceImage
    {
        width: 32px;
        height: 32px;
        outline: 1px solid rgb(217, 217, 217);
        outline-offset: -1px;
        margin: auto 7px;
        margin-right: 8px;
    }
    .PaymentMethodButton
    {
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
    }
    .MainInformationPaymentContainer
    {
        outline: 1px solid rgb(239, 239, 239);
        outline-offset: -1px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
    
    .MainInformationPaymentWrapper, .BluPaymentInputWrapper
    {
        padding: 25px 20px;
    }
    .PaymentFinalListContainer
    {
        /* margin-left: 18px; */
    }
    .PaymentFinalListContainer li:not(:last-child)
    {
        margin-bottom: 12px;
    }
    .PaymentFinalListContainer p
    {
        line-height: 18px;
    }
    .TopPaymentMainInformationWrapper
    {
        margin-bottom: 25px;
    }
    .TopPaymentInfoLeft
    {
        width: 40%;
    }
    .TopPaymentInfoLeft p:not(:last-child),.TopPaymentInfoRight p:not(:last-child)
    {
        margin-bottom: 3px;
    }
    .AlreadyPayBlueContainer
    {
        padding: 15px;
    }
}