* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scrollbar-width: none;

    font-size: 14px;
}

body {
    user-select: none;
}

#container {
    width: 100%;
    height: 100vh;
    background-color: #0e0111;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#homeScreen {
    display: flex;
}

#dividedContainerDiv {
    width: 100%;
    height: 100%;
    display: flex;
}

#mainContainerDiv {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0e0111;
    /* No change needed here */
}

#scrollDivCon {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    scroll-behavior: smooth;
    overflow-y: auto;
}

#sideContainerDiv {
    width: 50%;
    height: 100%;
    display: flex;
    background-color: #0d020f;
}

#headerDiv {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #0e0111;
}

#profileAvaterDiv {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1c0b2c;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#profileAvaterImg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#userNameAndWelcomeDiv {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#userName {
    font-size: 1.2rem;
    font-weight: 600;
    font-family: monospace;
}

#welcomeText {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

#notificationDiv {
    margin-left: auto;
    cursor: pointer;
    background-color: #1c0b2c;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

#notificationBadge {
    position: absolute;
    top: 30px;
    right: 15px;
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    display: none;
}

#balanceDivCon {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#balanceDiv {
    width: 80%;
    height: 250px;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#balanceTextAndBalanceDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#balanceText {
    font-size: 1.2rem;
    color: #aaa;
    font-family: monospace;
}

#balanceAmount {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}
#balanceAmountDiv {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}
#coinImg {
    height: 45px;
    width: 45px;
}
#withdrawBtn,
#transferMoneyBtn {
    width: 150px;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

@media (max-width: 768px) {

    #withdrawBtn,
    #transferMoneyBtn {
        width: 120px;
        height: 40px;
        font-size: 0.9rem;
    }

    #addMoneyBtn {
        width: 120px;
        height: 40px;
        font-size: 0.9rem;
    }
}

#withdrawBtn i {
    font-size: 1.2rem;
}

#withdrawBtn:hover {
    background-color: #800080cc;
    transition: all 0.3s ease;
}

#withdrawBtn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#dailyCheckinDiv {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    padding: 0 20px;
}

#dailyCheckinDiv div {
    width: 200px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
    flex-direction: column;
    cursor: pointer;
}

#dailyCheckinDiv img {
    width: 80px;
    height: 80px;
}

#dailyCheckInText,
#spinAndWinText,
#referAndEarnText {
    font-size: 1.2rem;
    color: #aaa;
    font-family: monospace;
    font-weight: bold;
}

#dailyCheckinDiv div:hover {
    background-color: #2a0f3b;
    transition: all 0.3s ease;
}

#dailyCheckinDiv div:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#bottomMenuDiv {
    width: 100%;
    height: 100px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #0e0111;
    position: sticky;
    bottom: 0;
    left: 0;
    padding: 10px;
    z-index: 100;
}

.menuItemDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    color: #aaa;
}

.menuItemDiv i {
    font-size: 1.5rem;
}

.menuText {
    font-size: 0.9rem;
    font-family: monospace;
}

.active {
    color: purple;
}

@media (max-width: 787px) {
    #bottomMenuDiv {
        height: 70px;
    }

    .menuItemDiv i {
        font-size: 1.2rem;
    }

    .menuText {
        font-size: 0.8rem;
    }
}

.screen {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    gap: 20px;
    color: white;
    font-family: monospace;
}

#withdrawErrorDiv {
    text-align: center;
}

#giftCardWithdrawErrorDiv {
    text-align: center;
}

#taskDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: white;
    font-family: monospace;
    padding: 20px;
}

#taskTitle {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: monospace;
}

#taskListDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.taskItem {
    width: 100%;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.taskIconDiv {
    width: 60px;
    height: 60px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.taskTextDiv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 20px;
    flex: 1;
}

.taskName {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
}

.taskDesc {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

.taskRewardDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.taskRewardAmount {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}

.amountOfAdsLeft {
    font-size: 0.8rem;
    color: #aaa;
    font-family: monospace;
}

.taskActionBtn {
    width: auto;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    font-family: monospace;
}

@media (max-width: 768px) {
    #dividedContainerDiv {
        flex-direction: column;
    }

    #mainContainerDiv,
    #sideContainerDiv {
        width: 100%;
    }

    #sideContainerDiv {
        display: none;
    }

    #bottomMenuDiv {
        height: 70px;
    }

    #dailyCheckinDiv div {
        width: 100%;
        height: auto;
        padding: 5px;
        text-align: center;
    }

    #dailyCheckinDiv {
        height: auto;
        padding: 10px;
        gap: 10px;
    }

    #dailyCheckinDiv img {
        width: 40px;
        height: 40px;
    }

    .taskItem {
        flex-direction: column;
        align-items: center;
        text-align: center;

    }

}

a,
div,
button,
span i {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

#firstTimeEarnBonusDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#firstTimeEarnBonusDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#firstTimeEarnBonusHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#firstTimeEarnBonusCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#firstTimeEarnBonusContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#firstTimeEarnBonusTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#firstTimeEarnBonusDesc {
    font-size: 1rem;
    color: #aaa;
    text-align: center;
    font-family: monospace;
}

#claimFirstTimeEarnBonusBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#claimFirstTimeEarnBonusBtn:hover {
    background-color: #800080cc;
    transition: all 0.3s ease;
}

#claimFirstTimeEarnBonusBtn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#dailyCheckInDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#dailyCheckInDivInner {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#dailyCheckInHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#dailyCheckInCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#dailyCheckInContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#dailyCheckInTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#dailyCheckInDesc {
    font-size: 1rem;
    color: #aaa;
    text-align: center;
    font-family: monospace;
}

#checkInDayAndAmountDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#checkInDay {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#checkInAmount {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
}

#checkInCountDown {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

#checkInBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#referFriendDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#referFriendDiv {
    width: 90%;
    max-width: 450px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#referFriendHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#referFriendTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#referFriendCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
}

#referFriendContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#referFriendDesc {
    font-size: 1rem;
    color: #aaa;
    text-align: center;
    font-family: monospace;
}

#referralLinkDiv {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#referralLinkText {
    flex: 1;
    font-size: 0.9rem;
    color: #00ff00;
    word-break: break-all;
    font-family: monospace;
}

#copyReferralLinkBtn {
    background-color: purple;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    font-family: monospace;
}

#copyReferralLinkBtn:hover {
    background-color: #800080cc;
    transition: all 0.3s ease;
}

#copyReferralLinkBtn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#referalHeader {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #0e0111;
    justify-content: center;
}

#referalTitle {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: monospace;
}

#referalContentDiv {
    flex: 1 1 0;
    min-height: 0;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

}

#referalList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.referralItem {
    width: 100%;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.profileImg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.referralName {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
}

.referralAmount {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
    margin-left: auto;
}

.referralItem:hover {
    background-color: #2a0f3b;
    transition: all 0.3s ease;
}

.referralItem:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#leaderboardHeader {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #0e0111;
    justify-content: center;
}

#leaderboardTitle {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: monospace;
}

#leaderboardContentDiv {
    flex: 1 1 0;
    min-height: 0;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

#appStatusDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    background-color: #1c0b2c;
    border-radius: 20px;
    padding: 20px;

}

#onlineUsersDiv {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#onlineUsersText {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}

#totalEarningsDiv {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#totalEarningsText {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}

#leaderBoardFirstSecondAndThirdDiv {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.leaderboardTopUser {
    width: 150px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.leaderboardTopUser:hover {
    background-color: #2a0f3b;
    transition: all 0.3s ease;
}

.leaderboardTopUser:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.leaderboardTopUserRank {
    font-size: 1.5rem;
    font-weight: bold;
    color: gold;
    font-family: monospace;
}

.leaderboardTopUserImg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.leaderboardTopUserName {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
}

.leaderboardTopUserAmount {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
}
.leaderboardTopUserAmountDiv {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.placementIcon {
    height: 25px;
    width: 25px;
}
.leaderboardListItem {
    width: 100%;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

#leaderboardList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboardListRank {
    font-size: 1.2rem;
    font-weight: bold;
    color: #aaa;
    font-family: monospace;
}

.leaderboardListImg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.leaderboardListName {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
}

.leaderboardListAmount {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
}
.leaderboardListAmountDiv {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
        margin-left: auto;
}
.leaderboardListAmountImg {
    height: 20px;
    width: 20px;
}
.leaderboardListItem:hover {
    background-color: #2a0f3b;
    transition: all 0.3s ease;
}

.leaderboardListItem:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

@media (max-width: 768px) {
    #leaderBoardFirstSecondAndThirdDiv {
        gap: 10px;
    }

    .leaderboardTopUser {
        width: 120px;
        padding: 5px;
        gap: 5px;
    }

    .leaderboardTopUserRank {
        font-size: 1.2rem;
    }

    .leaderboardTopUserImg {
        width: 60px;
        height: 60px;
    }

    .leaderboardTopUserName {
        font-size: 1rem;
    }

    .leaderboardTopUserAmount {
        font-size: 0.9rem;
    }
}

#profileHeader,
#gameHeader {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #0e0111;
    justify-content: center;
}

#profileTitle,
#gameTitle {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: monospace;
}

#profileContentDiv,
#gameContentDiv {
    flex: 1 1 0;
    min-height: 0;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

#profileInfoDiv {
    width: 100%;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 10px;
    text-align: center;
}

#profileImg {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

#profileName {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: monospace;
}

#profileEmail {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

#profileIdDiv {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#profileIdLabel {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

#profileUid {
    font-size: 0.9rem;
    color: white;
    font-family: monospace;
}

#copyUidDiv {
    font-size: 1rem;
    color: purple;
    cursor: pointer;
}

#logoutBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#editProfileBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#becomeAnAdvertiserBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
    display: none;
}

#adsManagerBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
    display: none;
}

#withdrawDetailsBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#settingsBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#customerServiceBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#logoutBtn:hover,
#editProfileBtn:hover,
#withdrawDetailsBtn:hover {
    background-color: #800080cc;
    transition: all 0.3s ease;
}

#logoutBtn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#onlineSocialTaskDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#onlineSocialTaskDiv {
    width: 90%;
    max-width: 500px;
    max-height: 80%;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    padding: 20px;
    flex-direction: column;
}

#onlineSocialTaskHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#onlineSocialTaskTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#onlineSocialTaskCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#onlineSocialTaskContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-height: 100%;
    overflow-y: auto;
    margin-top: 20px;
}

#onlineSocialTaskList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onlineSocialTaskItem {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.onlineSocialTaskIconDiv {
    width: 60px;
    height: 60px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.onlineSocialTaskIcon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.descriptionAndAmountDiv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 20px;
    flex: 1;
}

.onlineSocialTaskDesc {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
    color: white;
}

.onlineSocialTaskReward {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}

.onlineSocialTaskLinkDiv button {
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px;
    font-family: monospace;
}

.socialTaskTimer {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

#questionAndAnswerDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#questionAndAnswerDiv {
    width: 90%;
    max-width: 500px;
    max-height: 80%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
    margin-top: 10px;
    z-index: 10;
    position: fixed;
}

#questionAndAnswerHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#questionAndAnswerTitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#questionAndAnswerCancelBtn {
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#submitAnswerBtn {
    width: 100%;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
    display: none;
}

#nextQuestionBtn {
    width: 100%;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#questionAndAnswerContentDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#questionAndAnswerShowDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: auto;
    overflow-y: auto;
}

#redoTask {
    width: 100%;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

.questionText {
    font-size: 1rem;
    color: white;
    font-family: monospace;
    text-align: center;
    margin-top: 10px;
}

.answersDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;

}

.radioDiv {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radioDiv {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-family: monospace;
    padding: 8px 16px;
    border-radius: 12px;
    background: #1c0b2c;
    transition: background 0.2s;
    margin-bottom: 6px;
}

.answerRadio:hover {
    background: #2a0f3b;
}

.radioDiv input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid purple;
    border-radius: 50%;
    background: #0e0111;
    margin-right: 12px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
}

.radioDiv input[type="radio"]:checked {
    border-color: #00ff00;
    background: #2a0f3b;
}

.radioDiv input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}

.answerTextDiv {
    font-size: 1rem;
    color: white;
    font-family: monospace;
}

.questionNavDiv {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.questionNavDiv button {
    width: 100px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

@media (max-width: 768px) {
    #onlineSocialTaskDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

    #onlineSocialTaskHeader {
        gap: 6px;
        padding: 0 4px;
    }

    #onlineSocialTaskTitle {
        font-size: 1.05rem;
    }

    #onlineSocialTaskCancelBtn {
        font-size: 1.1rem;
    }

    #onlineSocialTaskContentDiv {
        gap: 6px;
        margin-top: 6px;
        height: 100%;
    }

    .onlineSocialTaskItem {
        padding: 8px;
        gap: 8px;
        border-radius: 10px;
    }

    .onlineSocialTaskIconDiv {
        width: 26px;
        height: 26px;
    }

    .descriptionAndAmountDiv {
        margin-left: 6px;
        gap: 2px;
    }

    .onlineSocialTaskDesc,
    .onlineSocialTaskReward {
        font-size: 0.9rem;
    }

    .onlineSocialTaskLinkDiv a {
        padding: 5px 10px;
        font-size: 0.85rem;
        border-radius: 12px;
    }

    .socialTaskTimer {
        font-size: 0.75rem;
    }

    .radioDiv {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    .answerTextDiv {
        font-size: 0.9rem;
        text-align: left;
        margin-left: 10px;
    }

    .questionText {
        font-size: 0.9rem;
    }
}

#earnerGroupChatDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#earnerGroupChatHeader {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #0e0111;
    justify-content: center;
}

#earnerGroupChatTitle {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: monospace;
}

#earnerGroupChatContentDiv {
    flex: 1 1 0;
    min-height: 0;
    scroll-behavior: smooth;
    gap: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#chatMessagesDiv {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#chatInputMenuDiv {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#chatInput {
    flex: 1;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    resize: none;
}

#sendChatBtn {
    width: 100px;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#sendChatBtn:hover {
    background-color: #800080cc;
    transition: all 0.3s ease;
}

#sendChatBtn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.chatMessageItem {
    max-width: 100%;
    padding: 10px 20px;
    font-size: 1rem;
    line-height: 1.4;
    word-wrap: break-word;
    font-family: monospace;
    color: white;
    background-color: #2a0f3b;
}

/* Odd messages */
.chatMessageItem:nth-child(odd) {
    background-color: #2a0f3b;
}

/* Even messages */
.chatMessageItem:nth-child(even) {
    background-color: #0e0111;
}

.chatMsgName {
    font-weight: bold;
    margin-bottom: 5px;
    font-family: monospace;
    color: #00ff00;
}

.chatMsgHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.chatMsgTime {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 5px;
    text-align: right;
    font-family: monospace;
    margin-left: auto;
}

.chatMsgText {
    white-space: pre-wrap;
    font-family: monospace;
    margin-top: 5px;
}

.chatMsgReplyPreview {
    margin-top: 10px;
    font-family: monospace;
    background-color: #1c0b2c;
    padding: 5px 10px;
    border-left: 4px solid #00ff00;
    cursor: pointer;
}

.chatMsgReplyName {
    font-weight: bold;
    font-family: monospace;
    color: purple;
}

.chatMsgReply {
    margin-top: 5px;
    font-family: monospace;
    margin-left: auto;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: right;
    width: fit-content;
}

.chatMsgReplyIcon {
    background-color: black;
    text-align: right;
    width: 0;
    margin-right: 10px;
}

.chat-input:hover {
    cursor: text;
}

.chat-input:empty:before {
    content: attr(placeholder);
    color: #aaa;
}

.chat-reply-highlight {
    color: blue;
    font-weight: 600;
}

.chat-input {
    color: white !important;
}

#scrollDownBtn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

#newMessageCount {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: none;
    justify-content: center;
    align-items: center;
}

#withdrawBalanaceDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#withdrawBalanaceDiv {
    width: 90%;
    max-width: 400px;
    height: 100%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-height: 90%;
    overflow-y: auto;
}

#withdrawBalanaceHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#withdrawBalanaceTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#withdrawBalanaceCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#withdrawBalanaceContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    #withdrawBalanaceDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

}

#withdrawFormDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#withdrawAmountDiv, #convertedAmountDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


#withdrawAmountLabel, #convertedAmountLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

#withdrawAmountInput, #convertedAmountInput {
    width: 100%;
    height: 40px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#withdrawBankDropDiv {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #0d020f;
    color: white;
    border: 1px solid #555;
    border-radius: 10px;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
}

#withdrawBankDropDiv:hover {
    background-color: #2a0f3b;
    transition: all 0.3s ease;
}

#withdrawBankDropDiv:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#withdrawAccountNumberDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#withdrawAccountNumberLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

#withdrawAccountNumberInput {
    width: 100%;
    height: 40px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#accountNamePreviewDiv {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#submitWithdrawBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#withdrawBanksDropdownDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 301;
}

#withdrawBankDropdownDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#withdrawBankDropdownHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#withdrawBankDropdownTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#withdrawBankDropdownCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#withdrawBankOptionsDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

#withdrawBankOptionList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
}

.withdrawBankOptionItem {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 20px;
    cursor: pointer;
    color: white;
}

#mobileGroupChatIconDiv {
    display: none;
    position: fixed;
    bottom: 120px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: purple;
    justify-content: center;
    align-items: center;
}

#mobileGroupChatIconDiv img {
    width: 50%;
    height: 50%;
    cursor: pointer;
}

#mobileGroupChatIconDiv:hover {
    background-color: #800080cc;
    transition: all 0.3s ease;
}

#mobileGroupChatIconDiv:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

#earnerGroupChatCloseBtn {
    display: none;
}

button:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

@media (max-width: 768px) {
    #mobileGroupChatIconDiv {
        display: flex;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 150;
    }

    #sideContainerDiv {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 400;
    }

    #sendChatBtn {
        width: 80px;
        height: 40px;
        margin-right: 10px;
    }

    #earnerGroupChatCloseBtn {
        display: block;
    }

    #earnerGroupChatHeader {
        justify-content: space-between;
    }
}

#spinAndWinDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#spinAndWinDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#spinAndWinHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#spinAndWinTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#spinAndWinCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#spinAndWinContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#wheelContainerDiv {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wheelCanvas {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #2a0f3b;
    display: block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#spinButtonDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#spinButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: purple;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

#spinButton:active {
    transform: translate(-50%, -50%) scale(0.95);
    transition: all 0.1s ease;
}

#wheelPointer {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 28px solid gold;
    z-index: 3;
}

#prizeListDiv {
    display: none;
    /* Hide the static prize list, prizes are drawn on the wheel */
}

@media (max-width: 400px) {

    #wheelContainerDiv,
    #wheelCanvas {
        width: 220px;
        height: 220px;
    }

    #spinButton {
        width: 60px;
        height: 60px;
        font-size: 1rem;
    }

    #wheelPointer {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 18px solid gold;
        top: -12px;
    }
}

#spinResultDiv {
    color: #00ff00;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    font-family: monospace;
}

#remainingSpinDiv {
    display: flex;
    align-items: center;
    gap: 5px;
}

#remainingSpinDiv img {
    width: 20px;
    height: 20px;
}

#remainingSpinText {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

#notificationScreenDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#notificationScreenDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#notificationHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#notificationTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#notificationCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#notificationContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#notificationList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    text-align: center;
}

.notificationItem {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
    text-align: left;
}

.notificationItem:hover {
    background-color: #3a1f4b;
    transition: all 0.3s ease;
}

.notificationItem:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.notificationTitle {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
    color: white;
}

.notificationBody {
    font-size: 1rem;
    font-family: monospace;
    color: #aaa;
}

.notificationTime {
    font-size: 0.8rem;
    color: #555;
    text-align: right;
    font-family: monospace;
}

#clearAll {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

.noNotifications {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

.questionProgressDiv {
    color: white;
}

#questionFeedbackDiv {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    #notificationScreenDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

    #notificationContentDiv {
        gap: 6px;
        margin-top: 6px;
        height: 100%;
    }

    #notificationList {
        max-height: 83%;
    }

    #questionAndAnswerDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

    .questionNavDiv button {
        width: 80px;
        height: 35px;
        font-size: 0.9rem;
    }

    #questionFeedbackDiv {
        font-size: 0.9rem;
        text-align: center;
    }

    .answerContainer {
        padding: 6px 12px;
    }
}

/* Loading bubbles */
.allLoadingBubbleDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.bubble {
    width: 10px;
    height: 10px;
    background-color: purple;
    border-radius: 50%;
    animation: bubbleBounce 1.2s infinite ease-in-out;
}

.bubble:nth-child(1) {
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    animation-delay: 0.2s;
}

.bubble:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bubbleBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

#editProfileDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#editProfileDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#editProfileHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#editProfileTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#editProfileCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#usernameInputDivDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#editProfileNameLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#editProfileContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#editUserNameInputDiv {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#editProfileNameInput {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#noticeDiv {
    display: flex;
    gap: 5px;
    align-items: center;
}

#noticeIcon {
    color: yellow;
    font-size: 1.2rem;
}

#noticeText {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

#saveProfileChangesBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#editProfileErrorDiv {
    font-size: 1rem;
    color: #ff4444;
    font-family: monospace;
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    #editProfileDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

    #editProfileContentDiv {
        height: 100%;
    }

    #saveProfileChangesBtn {
        margin-top: auto;
    }

    #editProfileErrorDiv {
        font-size: 0.9rem;
    }

}

#localBankTansferOrGiftCardOption {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    cursor: pointer;
    color: white;
    flex-direction: column;
}

.withdrawOption {
    margin-top: 10px;
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    cursor: pointer;
    color: white;
    flex-direction: column;
}

.recommendation {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

.withdrawOptionImg {
    width: 80px;
    height: 80px;
}

.withdrawOptionText {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
    text-align: center;
}

#learnMoreAboutGiftCardLink,
#learnMoreAboutBankTransferLink {
    font-size: 1rem;
    color: #00ffff;
    font-family: monospace;
    text-decoration: underline;
    cursor: pointer;
}

#proceedToWithdrawViaGiftCardBtn,
#proceedToWithdrawViaBankTransferBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#noteDiv {
    display: flex;
    gap: 5px;
}

#noteDiv i {
    color: yellow;
    font-size: 1.2rem;
}

#noteText {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

#bankTransferDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#bankTransferDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#bankTransferHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#bankTransferTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#bankTransferCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#accountNamePreviewDiv {
    color: white;
    font-size: 1rem;
}

#emailVerificationCodeDiv {
    width: 100%;
    height: auto;
    display: flex;
    gap: 10px;
}

#emailVerificationCodeInput {
    flex: 1;
    height: 40px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#sendEmailVerificationCodeBtn {
    width: 150px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#verifyEmailVerificationCodeBtn {
    width: 150px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    display: none;
}

#withdrwaSucessfulApprovalDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#withdrwaSucessfulApprovalDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    align-items: center;
}

#withdrawSuccessfulHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#withdrawSuccessfulTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#withdrawSuccessfulCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#withdrawSuccessfulContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#withdrwaSucessTiltle {
    font-size: 1.2rem;
    color: #00ff00;
    font-family: monospace;
    text-align: center;
}

#withdrawSuccessfulMessage {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

#closeWithdrawSuccessfulBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

@media (max-width: 768px) {
    #bankTransferDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

    #emailVerificationCodeInput {
        width: 100px;
        font-size: 0.9rem;
    }
}

#surveyTaskDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#surveyTaskDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#surveyTaskHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#surveyTaskTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#surveyTaskCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#surveyTaskContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#surveyTaskList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

#giftCardWithdrawDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#giftCardWithdrawDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#giftCardWithdrawHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#giftCardWithdrawTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#giftCardWithdrawCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#giftCardWithdrawContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#giftCardWithdrawFormDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#giftCardWithdrawAmountNairaDiv {
    width: 100%;
    height: auto;
    display: flex;
}

.dollarIcon,
.nairaIcon {
    width: 70px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 1.2rem;
    color: white;
}

#giftCardWithdrawAmountNairaInput,
#giftCardWithdrawAmountDollarInput {
    flex: 1;
    height: 40px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#giftCardWithdrawAmountDollarDiv {
    width: 100%;
    height: auto;
    display: flex;
}

#giftCardEmailVerificationCodeDiv {
    width: 100%;
    height: auto;
    display: flex;
    gap: 10px;
}

#giftCardEmailVerificationCodeInput {
    flex: 1;
    height: 40px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#sendGiftCardEmailVerificationCodeBtn {
    width: 150px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#verifyGiftCardEmailVerificationCodeBtn {
    width: 150px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    display: none;
}

#submitGiftCardWithdrawBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

@media (max-width: 768px) {
    #giftCardWithdrawDiv {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
        max-height: none;
        padding: 10px;
    }

    #giftCardEmailVerificationCodeInput {
        width: 100px;
        font-size: 0.9rem;
    }
}

#btnDiv {
    display: flex;
    gap: 10px;
}

#addMoneyBtnDiv {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#addMoneyBtn {
    width: 150px;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#referalCountAndLinkDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: #2a0f3b;
    width: 80%;
    height: auto;
    padding: 20px;
    border-radius: 20px;
}

#referalCountDiv,
#totalMoneyEarnedText {
    font-size: 1.2rem;
    color: white;
    font-family: monospace;
    display: flex;
    gap: 10px;
    font-family: 'Courier New', Courier, monospace;
}

#referalLinkAndCopyBtn {
    display: flex;
    gap: 10px;
    width: 100%;
    background-color: #0d020f;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 10px;
}

#copyReferalLinkBtn {
    background-color: purple;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    padding: 5px 10px;
}

#referalLinkTextFromScreen {
    flex: 1;
    font-size: 1rem;
    color: purple;
    font-family: monospace;
    word-break: break-all;
}

@media (max-width: 768px) {
    #referalCountAndLinkDiv {
        width: 100%;
    }

    #referalLinkTextFromScreen {
        font-size: 0.9rem;

    }
}

#becomeAnAdvertiserDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#becomeAnAdvertiserDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#becomeAnAdvertiserHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#becomeAnAdvertiserTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#becomeAnAdvertiserCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#becomeAnAdvertiserContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#becomeAnAdvertiserDesc {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

#signUpAsAdvertiserBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#acceptPrivacyAndPolicyDiv {
    display: flex;
    align-items: center;
    gap: 10px;
}

#acceptPrivacyAndPolicyDiv {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaa;
    font-family: monospace;
    cursor: default;
}

/* Custom checkbox matching app styles */
#acceptPrivacyAndPolicyDiv input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid purple;
    border-radius: 6px;
    background: #0e0111;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.08s;
    flex: 0 0 20px;
}

/* hover / active */
#acceptPrivacyAndPolicyDiv input[type="checkbox"]:hover {
    background: #2a0f3b;
}

#acceptPrivacyAndPolicyDiv input[type="checkbox"]:active {
    transform: scale(0.96);
}

/* focus visible */
#acceptPrivacyAndPolicyDiv input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(128, 0, 128, 0.12);
}

/* checked state: purple background and green tick */
#acceptPrivacyAndPolicyDiv input[type="checkbox"]:checked {
    background: purple;
    border-color: purple;
}

#acceptPrivacyAndPolicyDiv input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #00ff00;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Links styling to match app look */
#privacyPolicyLink,
#termsOfServiceLink {
    color: #00ffff;
    text-decoration: underline;
    cursor: pointer;
    font-family: monospace;
    display: inline-block;
    line-height: 1;
}

/* Ensure the small inline blocks don't disrupt layout */
#acceptPrivacyAndPolicyDiv>div {
    display: inline-block;
}

#addMoneyDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#addMoneyDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#addMoneyHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#addMoneyTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#addMoneyCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#addMoneyContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#accountNumberAndNameDiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

#accountNumberDiv {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #2a0f3b;
    width: 80%;
    height: auto;
    padding: 10px;
    border-radius: 20px;
}

#accountNumber {
    flex: 1;
    font-size: 1rem;
    color: white;
    font-family: monospace;
    word-break: break-all;
}

#copyAccountNumberBtn {
    width: 150px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#accountNameDiv,
#accountBankNameDiv {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #2a0f3b;
    width: 80%;
    height: auto;
    padding: 10px;
    border-radius: 20px;
    margin-top: 10px;
    text-align: center;
}

#accountName,
#accountBankName {
    flex: 1;
    font-size: 1rem;
    color: white;
    font-family: monospace;
    word-break: break-all;
}

#knowYourCustomerDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#knowYourCustomerDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#knowYourCustomerHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#knowYourCustomerTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#knowYourCustomerCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#knowYourCustomerContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#kycInstructionsDiv {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

#bvnInputDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#bvnLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#bvnInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#bvnNameDiv {
    font-size: 1rem;
    color: white;
    font-family: monospace;
}

#submitKycBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#adsManagerDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#adsManagerDiv {
    width: 90%;
    max-width: 800px;
    height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#adsManagerHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#adsManagerTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#adsManagerCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#adsManagerContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
}

#createAdCampaignBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
    margin-top: auto;
}

#adCampaignListDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

#createAdsCampaignDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

#createAdsCampaignDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    max-height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#createAdsCampaignHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#createAdsCampaignTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#createAdsCampaignCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#createAdsCampaignContentDiv {
    display: flex;
    gap: 10px;
    height: 100%;
    width: 100%;
    overflow: auto;
}

#adsType {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adsTypeOptions {
    display: flex;
    gap: 10px;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    flex-direction: column;
    background-color: #2a0f3b;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.adsTypeOptions:active {
    scale: 0.98;
}

.adsTypeIcon {
    font-size: 2rem;
    color: white;

}

.adsTypeText {
    font-size: 1.2rem;
    color: white;
    font-family: monospace;
    text-align: center;
}

.adsTypeDisc {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

.adsTypeActive {
    border: 5px solid purple;
}

#proceedToCreateAdCampaignBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#adsCampaignPostForm {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    gap: 10px;
}

#adCampaignTitleDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adCampaignTitleLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#adCampaignTitleInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#adCampaignDescriptionDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adCampaignDescriptionLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#adCampaignDescriptionInput {
    width: 100%;
    height: 100px;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
    resize: none;
}

#adCampaignBudgetDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adCampaignBudgetLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#adCampaignBudgetInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#adCampaignDurationDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adCampaignDurationLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#adCampaignDurationInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#adsCampaignLinkDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adsCampaignLinkLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#adsCampaignLinkTypeDisc {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#adsCampaignLinkInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#numberOfUserNeededToCompleteAdsTaskDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#numberOfUserNeededToCompleteAdsTaskLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#numberOfUserNeededToCompleteAdsTaskInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#totalNumberOfMoneyNeededToPayDiv {
    font-size: 1.2rem;
    color: white;
    font-family: monospace;
}

#totalNumberOfMoneyNeededToPayLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#totalNumberOfMoneyNeededToPayValue {
    font-size: 1.2rem;
    color: #00ff00;
    font-family: monospace;
}

#submitAdCampaignBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#backToAdTypeSelectionBtn {
    width: 100%;
    height: 50px;
    background-color: #555;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#adsCampaignPostSucessFulCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 400;
}

#adsCampaignPostSucessFulDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    align-items: center;
}

#adsCampaignPostSucessFulHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#adsCampaignPostSucessFulTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#adsCampaignPostSucessFulCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#adsCampaignPostSucessFulContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#adsCampaignPostSucessFulMessage {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

#closeAdsCampaignPostSucessFulBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

.adsManagerItem {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    gap: 10px;
    cursor: pointer;
}

.adsManagerItem:hover {
    background-color: #3b1a52;
}

.adsManagerItem:active {
    scale: 0.98;
    transition: scale 0.1s;
}

.adsManagerItemIconWrap {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.adsManagerItemIconImage {
    width: 40px;
    height: 40px;
}

.adsManagerMeta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.adsManagerTitle {
    font-size: 1.2rem;
    color: white;
    font-family: monospace;
    font-weight: bold;
}

.adsManagerStatus {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
}

.adsManagerInfoRow {
    display: flex;
    gap: 10px;
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

.adsManagerFinishedCount {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

.adsManagerPostedDate {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

.adsManagerActions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adsManagerDotsBtn {
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    background-color: transparent;
    border: none;
}

#otherTask {
    display: none;
}

#gameList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#gameList div {
    font-size: 3rem;
    color: red;

}

#transferMoneyDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#transferMoneyDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#transferMoneyHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#transferMoneyTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#transferMoneyCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#transferMoneyContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#recipientPhoneDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#recipientPhoneLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#recipientIdInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#transferAmountDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#transferAmountLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#transferAmountInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#recipientNameDisplay {
    font-size: 1rem;
    color: white;
    font-family: monospace;
}

#submitTransferBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#transferSucessfulDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

#transferSucessfulDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    align-items: center;
}

#transferSuccessfulHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#transferSuccessfulCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#transferSuccessfulTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#transferSuccessfulContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#transferSuccessfulMessage {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

#viewDetails {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#closeTransferSuccessfulBtn {
    width: 100%;
    height: 50px;
    background-color: #555;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#withdrawDetailsDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 400;
}

#withdrawDetailsDiv {
    width: 90%;
    max-width: 700px;
    height: auto;
    max-height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#withdrawDetailsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#withdrawDetailsTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#withdrawDetailsCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#withdrawDetailsContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    overflow: auto;
}

#withdrawReceiptMenuBar {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;

}

.withdrawDetails {
    background-color: #2a0f3b;
    width: 100%;
    height: 60px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: monospace;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
}

.withdrawDetails:active {
    scale: 0.98;
}

.withdrawDetailsActive {
    background-color: purple;
}

#withdrawReceiptMenuScreenDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

.withdrawReceiptMenuScreen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

#bankTransferDetailsList {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    text-align: center;
    color: white;
}

#giftCardDetailsList {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    text-align: center;
    color: white;
}

.withdrawDetailItem {
    background-color: #2a0f3b;
    width: 100%;
    height: auto;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    cursor: pointer;
}

.withdrawDetailTitle {
    font-size: 1.2rem;
    color: white;
    font-family: monospace;
    font-weight: bold;
}

.withdrawDetailMeta {
    display: flex;
    gap: 10px;
}

.withdrawDetailLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.withdrawTime {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

.withdrawAmount {
    font-size: 1rem;
    color: #00ff00;
    font-family: monospace;
}

@media (max-width: 768px) {
    #withdrawDetailsDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }

    .withdrawDetails {
        height: 50px;
        font-size: 1rem;
    }

}

#transferDetailsBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    margin-top: 10px;
}

#transferDetailsDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

#transferDetailsDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    max-height: 80%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#transferDetailsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#transferDetailsTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#transferDetailsCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#transferDetailsContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: auto;
}

#withdrawFullDetailsDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 600;
}

#withdrawFullDetailsDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    user-select: text;
}

#withdrawFullDetailsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#withdrawFullDetailsHeader {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#withdrawFullDetailsTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#withdrawFullDetailsCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#withdrawFullDetailsContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#withdrawFullDetailsList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.withdrawFullHeader {
    font-size: 1.2rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

.withdrawFullRow {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: white;
    font-family: monospace;
    padding: 5px 0;
}

.withdrawFullLabel {
    font-weight: bold;
}

.withdrawFullValue {
    color: #00ff00;
}

.withdrawFullNoteRow {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    #withdrawFullDetailsDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#transferDetailsList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    color: white;
}

.transferDetailItem {
    background-color: #2a0f3b;
    width: 100%;
    height: auto;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    cursor: pointer;
}

.transferLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.transferWho {
    font-size: 1.2rem;
    color: white;
    font-family: monospace;
    font-weight: bold;
}

.transferTime {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

.transferRight {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}

.transferAmount {
    font-size: 1.2rem;
    color: #00ff00;
    font-family: monospace;
}

@media (max-width: 768px) {
    #transferDetailsDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#transferFullDetailsDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 700;
}

#transferFullDetailsDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    max-height: 80%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    user-select: text;
}

#transferFullDetailsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#transferFullDetailsTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#transferFullDetailsCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#transferFullDetailsList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    color: white;
}

#transferFullDetailsContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.transferFullRow {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: white;
    font-family: monospace;
    padding: 5px 0;
}

.transferFullLabel {
    font-weight: bold;
}

.transferFullValue {
    color: #00ff00;
}

@media (max-width: 768px) {
    #transferFullDetailsDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#naijaEarnGiftCardLearnMoreScreenDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 800;
}

#naijaEarnGiftCardLearnMoreScreenDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    max-height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#naijaEarnGiftCardLearnMoreHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#naijaEarnGiftCardLearnMoreTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#naijaEarnGiftCardLearnMoreCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#naijaEarnGiftCardLearnMoreContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: auto;
}

#naijaEarnGiftCardLearnMoreDesc {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#naijaEarnGiftCardLearnMoreDesc p {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    #naijaEarnGiftCardLearnMoreScreenDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#naijaEarnBankTransferLearnMoreScreenDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 800;
}

#naijaEarnBankTransferLearnMoreScreenDiv {
    width: 90%;
    max-width: 600px;
    height: auto;
    max-height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#naijaEarnBankTransferLearnMoreHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#naijaEarnBankTransferLearnMoreTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#naijaEarnBankTransferLearnMoreCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#naijaEarnBankTransferLearnMoreContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: auto;
}

#naijaEarnBankTransferLearnMoreDesc {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#naijaEarnBankTransferLearnMoreDesc p {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    #naijaEarnBankTransferLearnMoreScreenDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#settingsDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 900;
}

#settingsDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#settingsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#settingsTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#settingsCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#settingsContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.settingsOptionBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#version {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}

@media (max-width: 768px) {
    #settingsDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }

    #version {
        position: absolute;
        bottom: 10px;
    }

    #settingsContentDiv {
        gap: 20px;
    }
}

#changePasswordDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#changePasswordDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#changePasswordHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#changePasswordTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#changePasswordCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#changePasswordContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#currentPasswordDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#currentPasswordLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#currentPasswordInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#newPasswordDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#newPasswordLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#newPasswordInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#confirmNewPasswordDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#confirmNewPasswordLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#confirmNewPasswordInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#sendAndVerifyRequestForNewPasswordCodeDiv {
    width: 100%;
    height: auto;
    display: flex;
    gap: 10px;
}

#newPasswordVerificationCodeInput {
    flex: 1;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#sendNewPasswordVerificationCodeBtn {
    width: 150px;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#verifyNewPasswordCodeBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
    display: none;
}

#submitChangePasswordBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#changePasswordErrorDiv {
    font-size: 1rem;
    color: red;
    font-family: monospace;
    text-align: center;
}

@media (max-width: 768px) {
    #changePasswordDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }

    #newPasswordVerificationCodeInput {
        width: 50px;
    }

    #verifyNewPasswordCodeBtn {
        width: 150px;
    }

}

#notificationSettingDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

#notificationSettingDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#notificationSettingHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#notificationSettingTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#notificationSettingCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#notificationSettingContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.notificationSettingItem {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notificationSettingText {
    font-size: 1rem;
    color: white;
    font-family: monospace;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

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

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

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: purple;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

@media (max-width: 768px) {
    #notificationSettingDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#deleteAccountDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1200;
}

#deleteAccountDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#deleteAccountHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#deleteAccountTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#deleteAccountCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#deleteAccountContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#deleteAccountWarningText {
    font-size: 1rem;
    color: red;
    font-family: monospace;
    text-align: center;
}

#reauthenticateDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#reauthenticateLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: left;
}

#reauthenticatePasswordInput {
    width: 100%;
    height: 50px;
    border: none;
    padding: 0 20px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    color: white;
    outline: none;
    font-size: 1.2rem;
    border: 1px solid #555;
    border-radius: 10px;
}

#confirmDeleteAccountDiv {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: monospace;
    color: white;
    font-size: 14px;
    user-select: none;
}

#confirmDeleteAccountCheckbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid purple;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}

#confirmDeleteAccountCheckbox:hover {
    border-color: #8e44ad;
    box-shadow: 0 0 5px rgba(155, 89, 182, 0.4);
}

#confirmDeleteAccountCheckbox:checked {
    background-color: purple;
    border-color: purple;
}

#confirmDeleteAccountCheckbox:checked::after {
    content: "✔";
    color: white;
    font-size: 13px;
    position: absolute;
    left: 3px;
    top: 0px;
    font-weight: bold;
}

#confirmDeleteAccountBtn {
    width: 100%;
    height: 50px;
    background-color: red;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#deleteAccountErrorDiv {
    font-size: 1rem;
    color: red;
    font-family: monospace;
    text-align: center;
}

@media (max-width: 768px) {
    #deleteAccountDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }

    #confirmDeleteAccountDiv {
        font-size: 0.6rem;
    }

    #confirmDeleteAccountCheckbox {
        width: 18px;
        height: 18px;
    }
}

#superTapperTaskDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1300;
    overflow: hidden;
}

#superTapperTaskDiv {
    width: 90%;
    max-width: 700px;
    height: 100%;
    max-height: 97%;
    background-color: #1c0b2c;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

#superTapperTaskHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#superTapperTaskTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#superTapperTaskCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#superTapperTaskContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
}

#tapAnimationStartUpDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    margin-top: 10px;
}

/* === ANIMATION SECTION === */
#tapAnimationStartUp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    position: relative;
    height: 100%;
}

/* Hand Icon Area */
#tapAnimationHandIconDiv {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: containerShake 2s ease-in-out infinite;
}

/* Hand icon itself */
.tapAnimationHandIcon {
    font-size: 6rem;
    color: #00c3ff;
    transform-origin: bottom center;
    animation: tapMotion 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px #00e1ff);
}

/* Big rolling glowing ring */
.rollingRing {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 4px solid #00c3ff;
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    animation: rollAround 3s linear infinite;
    box-shadow: 0 0 20px #00e1ff, 0 0 40px #00e1ff inset;
    opacity: 0.9;
}

/* Tap puff spray (glow effect) */
#tapAnimationHandIconDiv::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.5) 0%, transparent 70%);
    opacity: 0;
    animation: puffSpray 1.5s ease-out infinite;
}

/* Title bubbles */
#superTapperTitle {
    display: flex;
    gap: 5px;
    color: #fff;
    font-weight: bold;
    font-family: monospace;
    text-shadow: 0 0 10px #00c3ff;
    margin-top: 15px;
}

#superTapperTitle span {
    display: inline-block;
    animation: letterBubble 1.5s ease-in-out infinite;
    font-size: 2.2rem;
}

/* Make letters bubble one after another */
#superTapperTitle span:nth-child(1) {
    animation-delay: 0s;
}

#superTapperTitle span:nth-child(2) {
    animation-delay: 0.1s;
}

#superTapperTitle span:nth-child(3) {
    animation-delay: 0.2s;
}

#superTapperTitle span:nth-child(4) {
    animation-delay: 0.3s;
}

#superTapperTitle span:nth-child(5) {
    animation-delay: 0.4s;
}

#superTapperTitle span:nth-child(6) {
    animation-delay: 0.5s;
}

#superTapperTitle span:nth-child(7) {
    animation-delay: 0.6s;
}

#superTapperTitle span:nth-child(8) {
    animation-delay: 0.7s;
}

#superTapperTitle span:nth-child(9) {
    animation-delay: 0.8s;
}

#superTapperTitle span:nth-child(10) {
    animation-delay: 0.9s;
}

#superTapperTitle span:nth-child(11) {
    animation-delay: 1s;
}

#superTapperTitle span:nth-child(12) {
    animation-delay: 1.1s;
}

/* ========================= ANIMATIONS ========================= */

/* tapping motion + shake */
@keyframes tapMotion {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    20% {
        transform: translateY(12px) rotate(-10deg);
    }

    40% {
        transform: translateY(0) rotate(10deg);
    }

    60% {
        transform: translateY(15px) rotate(-8deg);
    }

    80% {
        transform: translateY(0) rotate(0deg);
    }
}

/* container shakes slightly with each tap */
@keyframes containerShake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }

    75% {
        transform: rotate(2deg);
    }
}

/* glowing ring roll */
@keyframes rollAround {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* bubble letters */
@keyframes letterBubble {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.8;
        color: #00ffff;
        text-shadow: 0 0 25px #00ffff;
    }
}

/* puff spray glow */
@keyframes puffSpray {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.2;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

#superTapperTitle {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00ffff;
    font-family: monospace;
    text-shadow: 0 0 15px #00ffff;
    gap: 3px;
}

/* Make each letter animate individually */
#superTapperTitle span {
    display: inline-block;
    animation: bubbleBounce 5s ease-in-out infinite;
}

/* Stagger animation for wave effect */
#superTapperTitle span:nth-child(odd) {
    animation-delay: 0s;
}

#superTapperTitle span:nth-child(even) {
    animation-delay: 0.5s;
}

/* Bouncing + glowing motion */
@keyframes bubbleBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
        text-shadow: 0 0 10px #00ffff;
        color: #00ffff;
    }

    25% {
        transform: translateY(-10px) scale(1.2);
        text-shadow: 0 0 20px #00ffff;
        color: #ffffff;
    }

    50% {
        transform: translateY(5px) scale(0.9);
        text-shadow: 0 0 15px #00e1ff;
        color: #00e1ff;
    }

    75% {
        transform: translateY(-5px) scale(1.1);
        text-shadow: 0 0 25px #00ffff;
        color: #ffffff;
    }
}

/* ========================= Container ========================= */
#tapContainer {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    width: 100%;
}

/* ========================= Tap Balance ========================= */
#tapBalance {
    width: 270px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 0 15px #00f0ff, 0 0 25px #00c3ff inset;
    transition: 0.3s;
}

#tapBalance:hover {
    box-shadow: 0 0 25px #00f0ff, 0 0 35px #00c3ff inset;
}

#tapBalance i {
    font-size: 1.8rem;
    color: #00f0ff;
    animation: handGlow 1.5s infinite alternate;
}

#tapCountDisplay {
    font-size: 1.6rem;
    color: #ffffff;
    font-family: 'Courier New', monospace;
}

#tapRoundTapClicker {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.0) 60%, rgba(0, 195, 255, 0.2) 100%);
    box-shadow: 0 0 25px #00f0ff, 0 0 50px #00c3ff inset;
    overflow: visible;
}

.tapClickerIcon {
    font-size: 50px;
    color: #00f0ff;
    position: absolute;
    z-index: 3;
}

#totalTapped {
    position: absolute;
    font-size: 22px;
    top: 50%;
    color: #fff;
    font-weight: 600;
    z-index: 5;
}

/* Circle progress */
.tap-progress-ring {
    position: absolute;
    top: 12;
    left: 12;
    transform: rotate(-90deg);
    /* Start progress from top */
    z-index: 1;
}

.tap-ring-bg {
    fill: none;
    stroke: rgba(0, 240, 255, 0.2);
    stroke-width: 15;
}

.tap-ring-progress {
    fill: none;
    stroke: #00f0ff;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 848;
    /* 2πr (≈ 2 * π * 135) */
    stroke-dashoffset: 848;
    transition: stroke-dashoffset 0.5s ease;
    filter: drop-shadow(0 0 10px #00f0ff);
}

#tapRoundTapClicker:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px #00f0ff, 0 0 70px #00c3ff inset;
}

/* Star animation inside clicker */
#tapRoundTapClicker::before {
    content: '';
    position: absolute;
    font-size: 1.5rem;
    color: #00f0ff;
    background: radial-gradient(circle, #00f0ff 1%, transparent 2%) repeat;
    background-size: 20px 20px;
    animation: rotateStars 10s linear infinite;
    opacity: 0.7;
    z-index: 0;
}

.super-tap-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.super-tap-disabled:hover {
    cursor: not-allowed;
}

#tapRoundTapClicker i {
    font-size: 6rem;
    color: #00f0ff;
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #00c3ff, 0 0 30px #00f0ff, 0 0 50px #00c3ff;
    position: relative;
    z-index: 1;
    animation: pulse 1.5s infinite alternate;
}

#totalTapped {
    font-size: 2rem;
    color: white;
    font-family: 'Courier New', monospace;
    position: absolute;
    bottom: 15px;
}

#tapInstruction {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;

}

#tapLimit {
    font-size: 1rem;
    color: red;
    font-family: monospace;
    text-align: center;
    display: none;
}

#tapsLeftForAdDisplay {
    font-size: 1rem;
    color: #00f0ff;
    font-family: monospace;
    text-align: center;
}

/* ========================= Next Goal ========================= */
#nextGoalCount {
    width: 320px;
    height: 55px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00f0ff;
    font-size: 1.3rem;
    font-weight: bold;
    gap: 15px;
    box-shadow: 0 0 15px #00f0ff inset;
}

/* ========================= Claim Button ========================= */
#claimTapBalanceBtn {
    width: 220px;
    height: 55px;
    background: linear-gradient(45deg, #8e2de2, #4a00e0);
    border: none;
    border-radius: 30px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 15px #8e2de2, 0 0 25px #4a00e0 inset;
    transition: all 0.3s ease;
}

#claimTapBalanceBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px #8e2de2, 0 0 50px #4a00e0 inset;
}

/* ========================= Animations ========================= */
@keyframes pulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 10px #00f0ff, 0 0 20px #00c3ff;
    }

    100% {
        transform: scale(1.15);
        text-shadow: 0 0 20px #00f0ff, 0 0 40px #00c3ff, 0 0 60px #00f0ff;
    }
}

@keyframes handGlow {
    0% {
        color: #00f0ff;
        text-shadow: 0 0 10px #00f0ff;
    }

    100% {
        color: #00fff0;
        text-shadow: 0 0 20px #00fff0, 0 0 40px #00c3ff;
    }
}

@keyframes rotateStars {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    #superTapperTaskDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }

    #claimTapBalanceBtn {
        width: 90%;
    }

    #superTapperTitle {
        font-size: 1.8rem;
    }

    #tapRoundTapClicker {
        width: 250px;
        height: 250px;
        margin-top: 30px;
    }

    #nextGoalCount {
        margin-top: 30px;
    }

    #tapAnimationStartUp {
        justify-content: center;
    }
}

#showingAdsInFiveSecondDivAlert {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 30px;
    font-size: 1rem;
    font-family: monospace;
    box-shadow: 0 0 15px #00f0ff, 0 0 25px #00c3ff inset;
    display: none;
    z-index: 1500;
    width: auto;
    animation: slideFromUpIn 6s ease forwards;
}

#showingAdsInFiveSecondTextAlert {
    margin: 0;
}

@keyframes slideFromUpIn {
    0% {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }

    10% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    90% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    #showingAdsInFiveSecondDivAlert {
        width: 90%;
        font-size: 0.9rem;
        bottom: 150px;
    }

}

#dailyTaskDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1400;
}

#dailyTaskDiv {
    width: 90%;
    max-width: 500px;
    height: auto;
    max-height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#dailyTaskHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#dailyTaskTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#dailyTaskCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#dailyTaskContentDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: auto;
}

#dailyTasks {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dailyTasksItem {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    gap: 15px;
}

.dailyTaskIconDiv {
    width: 50px;
    height: 50px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.dailyTaskTextDiv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.dailyTaskName {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
    color: white;
}

.dailyTaskDesc {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

.dailyTaskRewardDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.dailyTaskRewardAmount {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}

.dailyTaskActionBtn {
    width: auto;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    font-family: monospace;
}

@media (max-width: 768px) {
    #dailyTaskDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }
}

#updateAppDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1600;
}

#updateAppDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    text-align: center;
}

#updateAppHeader {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#updateAppContentDiv {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
    display: flex;
    padding: 10px;
    flex-direction: column;
    gap: 15px;
}

#updateAppBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#superTapperBottomMenu {
    display: none;
    width: 100%;
    height: 70px;
    bottom: 0;
    left: 0;
    z-index: 500;
    align-items: center;
    justify-content: space-around;
    background-color: #1c0b2c;
}

.superTapperMenuItemDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-family: monospace;
    font-size: 1.2rem;
    cursor: pointer;
    gap: 5px;
}

.tapperMenuActive {
    color: #00f0ff;
}

#tapperBoostDiv {
    height: 100%;
    width: 100%;
}

#tapperBoostTitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
    text-align: center;
}

#tapperBoostOptionsDiv {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tapperBoostOption {
    width: 100%;
    height: auto;
    background-color: #2a0f3b;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-top: 10px;
    flex-direction: column;
}

.tapperOptionWrapper {
    display: flex;
    width: 100%;
    align-items: center;
}

.tapperOptionBoostIcon {
    width: 50px;
    height: 50px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.tapperOptionBoostInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    margin-left: 15px;
}

.tapperOptionBoostTitle {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: monospace;
    color: white;
}

#dailyTapperBoostDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.tapperErrorDiv {
    font-size: 1rem;
    color: red;
    font-family: monospace;
    text-align: center;
}

#refilDailyGoalDiv {
    width: 70%;
    height: auto;
    background-color: #2a0f3b;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

#refilDailyGoalDiv:active {
    transform: scale(0.98);
}

.dailyBoostIcon {
    width: 40px;
    height: 40px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

#refilDailyGoalText {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
}

#refilDailyGoalDesc {
    font-size: 0.9rem;
    color: #777;
    font-family: monospace;
    text-align: center;
}

#alreadyUsedDiv {
    font-size: 1rem;
    color: red;
    font-family: monospace;
    text-align: center;
}

.tapperOptionBoostDesc {
    font-size: 0.9rem;
    color: #aaa;
    font-family: monospace;
}

.tapperOptionBoostActionDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tapperOptionBoostPrice {
    font-size: 1rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}

.tapperOptionBoostBtn {
    width: auto;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    font-family: monospace;
}

#tapperLevelDiv {
    height: 100%;
    width: 100%;
    background-color: #2a0f3b;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 15px;
    flex-direction: column;
}

#tapperLevelIcon {
    width: 50px;
    width: 50px;
}

#tapperLevelText {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
    text-align: center;
}

#tapperLevelFillDiv {
    width: 80%;
    height: 25px;
    background-color: #1c0b2c;
    border-radius: 15px;
    overflow: hidden;
}

#tapperLevelFillBar {
    width: 0%;
    height: 100%;
    background-color: purple;
    border-radius: 15px;
    transition: width 0.5s ease;
}

@media (max-width: 768px) {
    .tapperOptionBoostTitle {
        font-size: 0.9rem;
    }

    .tapperOptionBoostDesc {
        font-size: 0.6rem;
    }

    #dailyTapperBoostDiv {
        width: 100%;
    }

    #refilDailyGoalDiv {
        width: 100%;
    }
}

#customerServiceDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1700;
}

#customerServiceDiv {
    width: 100%;
    max-width: 80%;
    max-height: 90%;
    height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

#customerServiceHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#customerServiceTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#customerServiceCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#customerServiceContentDiv {
    display: flex;
    width: 100%;
    align-items: center;
    overflow-y: auto;
    height: 100%;
}

#startNewChatBtn {
    width: 50px;
    height: 50px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: fixed;
    bottom: 90px;
    right: 52%;
    z-index: 1800;
}

#startNewChatBtn:hover {
    transform: scale(1.1);
}

#startNewChatBtn:active {
    transform: scale(0.95);
}

#customerServiceChatListDiv {
    width: 50%;
    height: 100%;
    overflow-y: auto;
}

#customerServiceChatWindowDiv {
    width: 50%;
    height: 100%;
    background-color: #2a0f3b;
}

#openChatDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

#openChatTitle {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
    text-align: center;
}

#openChatDiv i {
    font-size: 4rem;
    color: purple;
}

#customerServiceChatWindow {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
}

#customerServiceChatHeader {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: #3a1f4b;
}

#customerServiceChatBackBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    font-family: monospace;
}

#customerServiceChatAvatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

#customerServiceChatTitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#customerServiceMessagesDiv {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#customerServiceInputDiv {
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: #3a1f4b;
    align-items: center;
    justify-content: center;
    height: 60px;
}

#uploadImgDiv {
    width: 40px;
    height: 40px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

#customerServiceMessageInput {
    flex: 1;
    height: 40px;
    border: none;
    padding: 0 15px;
    font-size: 1rem;
    font-family: monospace;
    background-color: transparent;
    outline: none;
    color: white;
    resize: none;
    display: flex;
}

#sendCustomerServiceMessageBtn {
    width: 50px;
    height: 40px;
    background-color: purple;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.chatBubble {
    max-width: 75%;
    padding: 10px 14px;
    margin: 8px;
    border-radius: 18px;
    position: relative;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chatBubble.received {
    background-color: #f1f0f0;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid #ccc;
    margin-left: 30px;
}

.chatBubble.sent {
    background-color: #4a00e0;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    margin-right: 30px;
}

.chatBubbleText {
    white-space: pre-wrap;
    font-size: 1rem;

}

.customerChatItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #3a1f4b;
}

.customerChatAvatarWrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.customerChatAvatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customerChatMeta {
    display: flex;
    flex-direction: column;
}

.customerChatName {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

.customerChatTicket {
    font-size: 0.8rem;
    color: #aaa;
    font-family: monospace;
}

.chatBubbleImage {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.chatBubbleImage img {
    max-width: 100%;
    border-radius: 10px;
}

.chatBubbleTime {
    font-size: 0.7rem;
    color: #ccc;
    text-align: right;
    margin-left: auto;
}

.chatBubbleTimeAndSeen {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 5px;
}

#customerScrollDownBtn {
    position: absolute;
    bottom: 20%;
    right: 170px;
    width: 40px;
    height: 40px;
    background-color: purple;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1900;
    display: none;
    border: none;
}

#customerServiceScrollCount {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: red;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-family: monospace;
    z-index: 1900;
}

@media (max-width: 768px) {
    #customerServiceChatWindowDiv {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2000;
        display: none;
    }

    #customerServiceChatListDiv {
        width: 100%;
        height: 100%;
    }

    #customerServiceDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    #startNewChatBtn {
        right: 20px;
    }

    #customerScrollDownBtn {
        right: 20px;
        bottom: 80px;
    }

}

#imageViewDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#imageViewDiv {
    width: 50%;
    max-width: 80%;
    max-height: 90%;
    height: 90%;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;

}

#imageViewHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#imageViewCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#imageViewContentDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#imageViewModalImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 90%;
}

@media (max-width: 768px) {
    #imageViewDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}

#smallDeviceDownloadAppDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2100;
}

#smallDeviceDownloadAppDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    text-align: center;
}

#smallDeviceDownloadAppHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

#smallDeviceDownloadAppTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}

#smallDeviceDownloadAppCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}

#smallDeviceDownloadAppContentDiv {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
    display: flex;
    padding: 10px;
    flex-direction: column;
    gap: 15px;
}

#smallDeviceDownloadAppDesc {
    font-size: 0.9rem;
    color: #777;
    font-family: monospace;
}

#smallDeviceDownloadAppDesc ul {
    text-align: left;
    padding-left: 20px;
}

#smallDeviceDownloadAppDesc li {
    margin-bottom: 5px;
}

#downloadNaijaEarnAppBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}

#customerChatList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    text-align: center;
    font-weight: bold;
}

#payGasFeeToEarnMoreDivCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2200;
}

#payGasFeeToEarnMoreDiv {
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: #1c0b2c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    text-align: center;
}

#payGasFeeToEarnMoreHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
#payGasFeeToEarnMoreTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    font-family: monospace;
}
#payGasFeeToEarnMoreCancelBtn {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    font-family: monospace;
    margin-left: auto;
}
#payGasFeeToEarnMoreContentDiv {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
    text-align: center;
    display: flex;
    padding: 10px;
    flex-direction: column;
    gap: 15px;
}
#gasFeeBenefitsDiv {
    text-align: left;
}
.gasFeeBefit {
    margin-bottom: 10px;
}
.gasFeeBefit i {
    color: #00f0ff;
    margin-right: 10px;
}
.gasFeeBefit div {
    display: inline;
}
#gasFeeAmountDiv {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}
#gasFeeLabel {
    font-size: 1rem;
    color: #aaa;
    font-family: monospace;
}
#gasFeeAmount {
    font-size: 1.5rem;
    font-weight: bold;
    color: #00ff00;
    font-family: monospace;
}
#payGasFeeBtn {
    width: 100%;
    height: 50px;
    background-color: purple;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    font-family: monospace;
}
@media (max-width: 768px) {
    #payGasFeeToEarnMoreDiv {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}