.TopReferralSectionButtonContainer
{
    margin: 0 auto;
}
.RewardMainWrapper
{
    flex: 1;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
}
.RewardFilterWrapper
{
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0 auto;
}
.RewardGridContainer
{
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-rows: repeat(auto-fit);
    position: relative;
    margin: 0 auto;
}
.KodeVoucherWrapper
{
    flex: 1;
    height: fit-content !important;
    display: flex;
    background-color: white;
}
.CopyCodeContainer
{
    flex: 1;
    height: 100%;
    background-color: #F1F1F1;
    display: flex;
}
.KodeVoucherWrapper p
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.CopyCodeContainer p
{
    margin: auto !important;
    margin-right: 0 !important;
}

.CopyCodeContainer button
{
    display: none;
}

.BlueFilterSortContainerReward
{
    background: linear-gradient(90deg, #50A9E1 0%, #7CBFE8 100%);
    flex: 1;
    height: fit-content;
    display: flex;
}
.BlueFilterSortContainerReward .SmallPanelDropDownContainer
{
    flex: 1;
    margin: auto 0;
}
.RewardGridAndLoadMoreButtonContainer
{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.TopRewardSection
{
    position: relative;
}

@media screen and (max-width: 560px)
{
    .TopReferralSectionButtonContainer
    {
        display: none !important;
    }
    .RewardMainWrapper
    {
        padding: 3vw 4vw;
    }
    .RewardFilterWrapper
    {
        margin-bottom: 1vw;
    }
    .VoucherImageContainer
    {
        height: 25vw;
    }
    .TopRewardSection
    {
        display: flex;
        border-bottom: 0.4vw solid rgb(198, 198, 198);overflow: hidden;
    }
    .VoucherInfoWrapper .LabelGreyHeaderSmallerText2
    {
        font-size: 3.3vw;
        line-height: 3.5vw;
    }
    .VoucherInfoWrapper
    {
        position: absolute;
        top: 0;
        right: 0;
        width: 65%;
        height: 100%;
        padding: 0;
        background-color: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: column;
    }
    .VoucherInfoWrapper p
    {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .VoucherInfoWrapper .BasicChildMargin2
    {
        padding: 2vw;
        margin: 0;
    }
    .VoucherInfoWrapper > .BasicChildMargin2
    {
    }
    .RewardInfoSeparatorWrapper
    {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .PoinWithIconWrapper
    {
        flex: 1;
        width: auto;
        background-color: #f7f7f7;
    }
    .RewardInfoSeparatorWrapper .PoinWithIconWrapper:last-of-type
    {
        border-top: 0.4vw dashed #DDDDDD;
    }
    .PoinWithIconWrapper img
    {
        margin-bottom: 0;
        margin-top: 0.2vw;
    }
    .RewardFilterWrapper > *:not(:last-child)
    {
        margin-right: 1vw;
    }
    .RewardFilterWrapper > button
    {
        padding: 1vw 2.5vw;
    }
    .RewardGridContainer
    {
        grid-template-columns: repeat(1, 1fr);
        column-gap: 3vw;
        row-gap: 3vw;
    }
    .KodeVoucherWrapper
    {
        height: fit-content;
        margin-top: auto;
        flex: 0;
    }
    .KodeVoucherWrapper .LabelGreyHeaderSmallerText2
    {
        margin: auto 1vw;
        margin-left: 1vw !important;
    }
    .KodeVoucherWrapper .SmallerRoomDescriptionText
    {
        display: none;
    }
    .CopyCodeContainer
    {
        height: fit-content;
        padding: 1vw 1vw;
    }
    .CopyRewardIcon
    {
        display: none;
    }
    .CopyCodeContainer button
    {
        display: flex;
    }
    .BlueFilterSortContainerReward
    {
        padding: 2vw;
        margin-bottom: 3vw;
    }
    .ShortenedBtnTxt
    {
        display: block;
    }
    .LengthyBtnTxt
    {
        display: none;
    }
    .RewardFilterWrapper .FilterTextContainer
    {
        display: none;
    }
    .RewardGridAndLoadMoreButtonContainer
    {
        max-height: 80vw;
        padding: 4vw 0.5vw;
    }
    .RewardGridAndLoadMoreButtonContainer > button
    {
        margin-top: 4vw !important;
    }
}

@media screen and (max-width: 1200px)  and (min-width: 561px)
{
    .TopReferralSectionButtonContainer
    {
        width: 80%;
    }
    .RewardMainWrapper
    {
        padding: 3vw 4vw;
        /* padding: calc(20px + 0.5vw) calc(30px + 0.5vw); */
    }
    /* .RewardFilterWrapper
    {
        margin-bottom: calc(8px + 0.5vw);
    } */
    .RewardFilterWrapper > *:not(:last-child)
    {
        margin-right: calc(2px + 0.5vw);
    }
    .RewardFilterWrapper > button
    {
        padding: calc(2px + 0.5vw) calc(10px + 0.5vw);
    }
    .RewardGridContainer
    {
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(15px + 0.5vw);
        row-gap: calc(15px + 0.5vw);
        margin-bottom: calc(20px + 0.5vw);
    }
    .KodeVoucherWrapper
    {
        border-top: 1.89px dashed #DDDDDD;
    }
    .CopyCodeContainer
    {
        padding: calc(5px + 0.5vw) calc(5px + 0.5vw);
    }
    .KodeVoucherWrapper p
    {
        margin: auto calc(5px + 0.5vw);
    }
    .PoinWithIconWrapper 
    {
        width: 100%;
    }
    .RewardInfoSmallWrapper
    {
        flex: 1;
        display: flex;
    }
    .BlueFilterSortContainerReward
    {
        display: none;
    }
    .ShortenedBtnTxt
    {
        display: block;
    }
    .LengthyBtnTxt
    {
        display: none;
    }
    .RewardGridAndLoadMoreButtonContainer
    {
        max-height: calc(1000px + 0.5vw);
        padding: calc(8px + 0.5vw) 0.5vw;
    }
    .RewardGridAndLoadMoreButtonContainer > button
    {
        margin-top: calc(2px + 0.5vw);
    }
}

@media screen  and (min-width: 1201px)
{
    .TopReferralSectionButtonContainer
    {
        width: 60%;
    }
    .RewardMainWrapper
    {
        padding: 30px 50px;
    }
    /* .RewardFilterWrapper
    {
        margin-bottom: 15px;
    } */
    .RewardFilterWrapper > *:not(:last-child)
    {
        margin-right: 5px;
    }
    .RewardFilterWrapper > button
    {
        padding: 6px 15px;
    }
    .RewardGridContainer
    {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 22px;
        row-gap: 22px;
        margin-bottom: 30px;
    }
    .KodeVoucherWrapper
    {
        border-top: 1.89px dashed #DDDDDD;
    }
    .CopyCodeContainer
    {
        padding: 10px 10px;
    }
    .KodeVoucherWrapper p
    {
        margin: auto 10px;
    }
    .PoinWithIconWrapper 
    {
        width: 100%;
    }
    .RewardInfoSmallWrapper
    {
        flex: 1;
        display: flex;
    }
    .ReferralContentWrapper
    {
        width: 95%;
    }
    .BlueFilterSortContainerReward
    {
        display: none;
    }
    .ShortenedBtnTxt
    {
        display: none;
    }
    .LengthyBtnTxt
    {
        display: block;
    }
    .RewardGridAndLoadMoreButtonContainer
    {
        max-height: 600px;
        padding: 15px 0.5vw;
    }
    .RewardGridAndLoadMoreButtonContainer > button
    {
        margin-top: 5px !important;
    }
}