/* /Layout/MainLayout.razor.rz.scp.css */
/*.layout-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}*/

/*.top-card-container {
    width: 100%;
    position: sticky;*/ /* Changed back to sticky */
    /*top: 0;*/ /* Keeps it at the top when scrolling */
    /*z-index: 1000;*/ /* Higher z-index to stay on top */
    /*background-color: white;*/ /* Ensures content doesn't show through */
/*}*/

/*.content-container {
    display: flex;
    flex: 1;
    position: relative;
    margin-top: 0;*/ /* Remove margin since we have sticky positioning */
/*}*/

/*.nav-container {
        flex-shrink: 0;*/
/*    width: 50vh;*/
    /*position: sticky;
    top: 10vh;
    height: calc(100vh - 10vh);
    overflow-y: auto;
    z-index: 900;
}*/

/*.main-content {
    flex: 1;
    position: relative;
    overflow: auto;
    padding: 1rem;
    z-index: 1;
    margin-top: 1rem;
}
*/
/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
}*/

/*main {
    flex: 1;
}
*/
/*.sidebar {*/
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    /*background-image: linear-gradient(180deg, rgb(0, 77, 64) 0%, #004d40 70%);
}*/

.top-row[b-15dp98c8cs] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-15dp98c8cs]  a, .top-row[b-15dp98c8cs]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-15dp98c8cs]  a:hover, .top-row[b-15dp98c8cs]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-15dp98c8cs]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-15dp98c8cs] {
        justify-content: space-between;
    }

    .top-row[b-15dp98c8cs]  a, .top-row[b-15dp98c8cs]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-15dp98c8cs] {
        flex-direction: row;
    }

    .sidebar[b-15dp98c8cs] {
        width: 250px;
        height: calc(100vh - 10vh); /* Adjust based on TopCard height */
        position: sticky;
        top: 10vh;
    }

    .top-row[b-15dp98c8cs] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-15dp98c8cs]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-15dp98c8cs], article[b-15dp98c8cs] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/*.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {*/
        /* Never collapse the sidebar for wide screens */
        /*display: block;
    }
    
    .nav-scrollable {*/
        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

.nav-footer {
    margin-top: 20px;*/ /* Add some space between menu and footer */
    /*font-size: 0.8rem;*/ /* Make the text smaller */
    /*text-align: center;*/ /* Center the footer text */
    /*color: gray;*/ /* Optional: set the text color */
    /*padding: 10px 0;*/ /* Optional: padding for aesthetics */
/*}*/
/* /Layout/ProfileCard.razor.rz.scp.css */
/* Components/ProfileViewer.razor.css */
/*.profile-viewer {
    width: 80%;
    height: 8vh;
    background-color: brown;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.player-stats {
    font-size: 1.1rem;
    font-weight: 500;
}

.player-coins {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
*/
/* /Layout/TopBar.razor.rz.scp.css */
/*.top-card {
    width: 100%;
    height: 10vh;
    background-color: red;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.profile-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-name {
    font-weight: 500;
    font-size: 1.1rem;
}
*/

@keyframes gentle-pulse-b-kvbxyp5bdz {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.animate-gentle-pulse[b-kvbxyp5bdz] {
    animation: gentle-pulse-b-kvbxyp5bdz 2.5s ease-in-out infinite;
}

@keyframes subtleFloat-b-kvbxyp5bdz {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

.animate-subtle-float[b-kvbxyp5bdz] {
    animation: subtleFloat-b-kvbxyp5bdz 2.5s ease-in-out infinite;
}
/* /Pages/AboutUs.razor.rz.scp.css */
/* About Us Page Styles */
/*.about-us {
    padding: 20px;
    font-family: 'Poppins', sans-serif;
    max-width: 100%;
}*/

/* Image Style */
/*.intro-image {
    width: 100%;
    max-width: 250px;*/ /* Limits image size */
    /*height: auto;
    display: block;
    margin: 20px auto;*/ /* Centers the image */
/*}*/

/* Header Section */
/*.header-section {
    background-color: #f0f4f8;
    text-align: center;
    padding: 30px 20px;
}

.header-title {
    font-size: 2rem;
    margin-bottom: 8px;
}

.header-subtitle {
    font-size: 1.5rem;
    color: #666;
}*/

/* Introduction Section */
/*.introduction-section {
    padding: 20px;
    background-color: #fff;
    text-align: center;*/ /* Center all text for mobile */
/*}*/

/* Intro Content */
/*.intro-content {
    display: flex;
    flex-direction: column;*/ /* Stack content vertically on mobile */
    /*align-items: center;
    justify-content: center;
}*/

/* Intro Text */
/*.intro-text {
    padding: 10px;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.6;
    color: #4a4a4a;
}*/

/* Call to Action Button */
/*.cta-button {
    padding: 12px 20px;
    font-size: 1rem;
    background-color: #3da9fc;
    color: white;
    text-transform: uppercase;
    border-radius: 5px;
    margin-top: 15px;
    text-decoration: none;
    display: inline-block;
}*/

/* Mobile Responsiveness */
/*@media (max-width: 768px) {*/
    /* Adjust header padding */
    /*.header-section {
        padding: 30px 20px;
    }*/

    /* Adjust text size for better readability */
    /*h2 {
        font-size: 2rem;
    }

    .intro-text {
        font-size: 1rem;
        padding: 15px;
    }*/

    /* Ensure the CTA button is larger and more tappable */
    /*.cta-button {
        padding: 15px 25px;
        font-size: 1.1rem;
    }*/

    /* Intro image */
    /*.intro-image {
        max-width: 100%;
    }*/

    /* Stack content vertically */
    /*.intro-content {
        flex-direction: column;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 1.8rem;
    }

    .intro-text {
        font-size: 0.9rem;
        line-height: 1.5;
        padding: 10px;
    }*/

    /* Larger buttons for mobile */
    /*.cta-button {
        padding: 15px 25px;
        font-size: 1.1rem;
    }*/

    /* Responsive image */
    /*.intro-image {
        max-width: 200px;*/ /* Reduce image size further */
    /*}*/

    /* Adjust sections for smaller screens */
    /*.intro-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
}*/
/* /Pages/CashOutForm.razor.rz.scp.css */
.registration-container[b-ruyh91nm2c] {
    padding: 20px;
}

.button-container[b-ruyh91nm2c] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-ruyh91nm2c] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth hover effect */
}

    .centered-button:hover[b-ruyh91nm2c] {
        background-color: #267724;
    }

    .centered-button:disabled[b-ruyh91nm2c] {
        background-color: #d3d3d3;
        color: #a9a9a9;
        cursor: not-allowed;
    }
    .centered-button:active[b-ruyh91nm2c] {
        transform: scale(0.85); /* Scale down slightly when clicked */
    }

input[type="checkbox"][b-ruyh91nm2c] {
    margin-right: 5px; /* Space between checkbox and label */
    transform: scale(1.5); /* Enlarge the checkbox */
}

.cash-out-display[b-ruyh91nm2c] {
    text-align: center;
    font-size: 1.2rem;
    color: #333;
    background: linear-gradient(135deg, #dff0d8, #f0f4f8);
    padding: 5px 20px;
    border-radius: 12px;
    border: 2px solid #28a745;
    margin: 0px 0px 20px 0px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
    opacity: 0; /* Start invisible */
    animation: slowAppear-b-ruyh91nm2c 5s ease forwards; /* Slow fade-in over 2 seconds */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover transition */
}

    .cash-out-display:hover[b-ruyh91nm2c] {
        transform: translateY(-5px); /* Lift on hover */
        box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
        background: linear-gradient(135deg, #c3e6cb, #f0f4f8); /* Subtle color change */
    }

    .cash-out-display:active[b-ruyh91nm2c] {
        transform: translateY(2px); /* Push effect when active */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Softer shadow when clicked */
    }

/* Slow Appear Animation */
@keyframes slowAppear-b-ruyh91nm2c {
    0% {
        opacity: 0; /* Start invisible */
    }

    100% {
        opacity: 1; /* Fully visible at the end */
    }
}

.cash-out-amount[b-ruyh91nm2c] {
    font-weight: bold;
    color: #28a745; /* Green color for the amount */
    font-size: 1.4rem;
    padding-left: 10px;
}

.attention-message[b-ruyh91nm2c] {
    font-weight: bold;
    color: #d9534f; /* Bright red for text */
    background-color: #f8f9fa; /* Light background for contrast */
    padding: 15px; /* More padding for a spacious feel */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Centered text */
    border: 3px dashed #5cb85c; /* Thicker dashed border */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    animation: shake-b-ruyh91nm2c 0.5s ease infinite; /* Shake animation */
}

/* Shake Animation */
@keyframes shake-b-ruyh91nm2c {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(-2px, 0);
    }

    50% {
        transform: translate(2px, 0);
    }

    75% {
        transform: translate(-2px, 0);
    }

    100% {
        transform: translate(0);
    }
}

.icon[b-ruyh91nm2c] {
    font-size: 1.5rem; /* Larger size for the icon */
    margin-right: 10px; /* Space between icon and text */
}

.naira-rain-overlay[b-ruyh91nm2c] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to go through the overlay */
    overflow: hidden; /* Ensures symbols don’t go outside */
    z-index: 100; /* Ensures it appears over other elements */
}

.naira-symbol[b-ruyh91nm2c] {
    position: absolute;
    top: -50px; /* Start above the viewport */
    left: 0;
    font-size: 24px; /* Adjust size as needed */
    color: green;
    animation: fall-b-ruyh91nm2c 4s linear infinite;
    opacity: 0.8; /* Slight transparency for effect */
}

@keyframes fall-b-ruyh91nm2c {
    0% {
        top: -50px;
        opacity: 0;
        transform: translateX(0);
    }

    10% {
        opacity: 1;
    }

    100% {
        top: 100vh; /* Falls to bottom of viewport */
        transform: translateX(20px); /* Slight sideways drift */
        opacity: 0;
    }
}

    /* Randomize fall animations with delays */
    .naira-symbol:nth-child(1)[b-ruyh91nm2c] {
        left: 10%;
        animation-duration: 4s;
        animation-delay: 0s;
    }

    .naira-symbol:nth-child(2)[b-ruyh91nm2c] {
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .naira-symbol:nth-child(3)[b-ruyh91nm2c] {
        left: 30%;
        animation-duration: 4.5s;
        animation-delay: 0.5s;
    }

    .naira-symbol:nth-child(4)[b-ruyh91nm2c] {
        left: 40%;
        animation-duration: 4.8s;
        animation-delay: 1.2s;
    }

    .naira-symbol:nth-child(5)[b-ruyh91nm2c] {
        left: 50%;
        animation-duration: 5.5s;
        animation-delay: 0.8s;
    }

    .naira-symbol:nth-child(6)[b-ruyh91nm2c] {
        left: 60%;
        animation-duration: 3.8s;
        animation-delay: 1.5s;
    }

    .naira-symbol:nth-child(7)[b-ruyh91nm2c] {
        left: 70%;
        animation-duration: 3.2s;
        animation-delay: 1.9s;
    }

    .naira-symbol:nth-child(8)[b-ruyh91nm2c] {
        left: 80%;
        animation-duration: 4.1s;
        animation-delay: 0.9s;
    }

    .naira-symbol:nth-child(9)[b-ruyh91nm2c] {
        left: 90%;
        animation-duration: 5.1s;
        animation-delay: 2.1s;
    }

    .naira-symbol:nth-child(10)[b-ruyh91nm2c] {
        left: 100%;
        animation-duration: 4.7s;
        animation-delay: 1.3s;
    }
/* Repeat for more naira symbols if needed */
/* /Pages/CountDownPage.razor.rz.scp.css */
.center-content[b-pbha3pqw3y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.frame[b-pbha3pqw3y] {
    border-radius: 20px;
    background-color: #F0F8FF;
    padding: 10px;
    border: 1px solid #D3D3D3;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    margin: 10px 10px 40px 10px;
    text-align: center;
    animation: pulse-b-pbha3pqw3y 2s infinite;
}

.vertical-stack-layout[b-pbha3pqw3y] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.stack-layout[b-pbha3pqw3y] {
    padding: 5px;
    text-align: center;
}

.countdown-label[b-pbha3pqw3y] {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
}

.countdown-unit[b-pbha3pqw3y] {
    font-size: 0.8em;
    color: gray;
    display: block;
}

.days-label[b-pbha3pqw3y] {
    color: #1E90FF;
}

.hours-label[b-pbha3pqw3y] {
    color: #32CD32;
}

.minutes-label[b-pbha3pqw3y] {
    color: #FFA500;
}

.seconds-label[b-pbha3pqw3y] {
    color: #FF6347;
}

.button-container[b-pbha3pqw3y] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-pbha3pqw3y] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2; /* Optional: Button color */
    color: white;
    border: none;
    border-radius: 10px; /* Rounded corners for a modern look */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

    .centered-button:hover[b-pbha3pqw3y] {
        background-color: #267724; /* Darker shade on hover */
    }

    .centered-button:disabled[b-pbha3pqw3y] {
        background-color: #d3d3d3; /* Grey background for disabled state */
        color: #a9a9a9; /* Light grey text for disabled state */
        cursor: not-allowed; /* Change cursor to indicate disabled state */
    }

.entry-container[b-pbha3pqw3y] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Adjusts spacing between input and button */
    gap: 10px; /* Adds space between input and button */
    margin-top: 10px; /* Optional: Adds some space above the container */
}
.entry[b-pbha3pqw3y] {
    flex-grow: 1; /* Ensures input takes up available space */
    padding: 8px; /* Adds some padding to the input */
    font-size: 16px; /* Optional: Adjusts font size */
}

/* Container for the countdown */
.countdown-container[b-pbha3pqw3y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.countdown-logo[b-pbha3pqw3y] {
    width: 100px;
    height: 100px;
    display: block;
    margin: auto;
}

/* Countdown title */
.countdown-title[b-pbha3pqw3y] {
    font-size: 2.0rem;
    color: indianred;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    padding: 2px;
    font-family: 'Vladimir';
    animation: glow-b-pbha3pqw3y 3s infinite alternate;
}

/* Animation for glowing effect */
@keyframes glow-b-pbha3pqw3y {
    from {
        text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00ffcc;
    }

    to {
        text-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, 0 0 40px #00ffcc;
    }
}

/* Countdown animation effect */
@keyframes pulse-b-pbha3pqw3y {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}
/* /Pages/CustomAlertDialog.razor.rz.scp.css */
/*.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dialog-content {
    background-color: white;
    border-radius: 10px;
    border: 1px solid green;
    padding: 20px;
    text-align: center;
    width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dialog-title {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

.dialog-message {
    font-size: 16px;
    margin-bottom: 20px;
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.primary-button, .secondary-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.primary-button {
    background-color: green;
}

.secondary-button {
    background-color: gray;
}
*/
/* /Pages/GameCard.razor.rz.scp.css */
.game-image-animation:hover[b-ffm2qi7vfu] {
    animation: wobble-b-ffm2qi7vfu 0.5s ease;
}

@keyframes wobble-b-ffm2qi7vfu {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-25deg);
    }

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

    45% {
        transform: rotate(-25deg);
    }

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

    75% {
        transform: rotate(-25deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
/* /Pages/GamePlayLayout.razor.rz.scp.css */
.chat-container[b-trtz04r7wr] {
    max-width: 600px;
    margin: auto;
    padding: 10px;
    font-family: Arial, sans-serif;
}

p[b-trtz04r7wr] {
    background: #f1f1f1;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0;
    width: fit-content;
}

.text-right[b-trtz04r7wr] {
    background: #d1f0d1;
    margin-left: auto;
    text-align: right;
}

@keyframes marquee-b-trtz04r7wr {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-200%);
    }
}

.animate-marquee[b-trtz04r7wr] {
    animation: marquee-b-trtz04r7wr 8s linear infinite;
}

/* Hide scrollbar */
.hide-scrollbar[b-trtz04r7wr]::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar[b-trtz04r7wr] {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
/* /Pages/GlobalChat.razor.rz.scp.css */
ul[b-0pzoujztye] {
    list-style-type: none;
    padding: 0;
}

li[b-0pzoujztye] {
    background: #f0f0f0;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
}

small[b-0pzoujztye] {
    display: block;
    font-size: 0.8em;
}
/* chat.css */
.message-list[b-0pzoujztye] {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 400px;  /* Use max-height instead of height */
    overflow-y: auto;
    display: block;  /* Ensure the list is treated as a block element */
}

.message-item[b-0pzoujztye] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.avatar-image[b-0pzoujztye] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.message-time[b-0pzoujztye] {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}
.emoji-btn[b-0pzoujztye] {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .emoji-btn:hover[b-0pzoujztye] {
        transform: scale(1.2);
    }

/*.emoji-picker {
    position: absolute;
    bottom: 60px;
    left: 10px;
    z-index: 100;
}*/

.modal-scroll[b-0pzoujztye]::-webkit-scrollbar {
    width: 6px;
}

.modal-scroll[b-0pzoujztye]::-webkit-scrollbar-thumb {
    background-color: #c3e956;
    border-radius: 4px;
}

.modal-scroll[b-0pzoujztye]::-webkit-scrollbar-track {
    background: #e0f2e9;
}

.modal-scroll[b-0pzoujztye]::-webkit-scrollbar-thumb:hover {
    background-color: #c3e957;
}
/* /Pages/HeadsOrTails.razor.rz.scp.css */
/*.game-info {
    display: grid;
    grid-template-columns: 1fr 1fr;*/ /* Two columns */
    /*margin-bottom: 10px;*/ /* Adjust space between rows */
    /*border: 1px solid #ccc;*/ /* Optional: border for clarity */
    /*border-radius: 10px;*/ /* Optional: rounded corners */
    /*background-color: #f9f9f9;*/ /* Optional: background color */
    /*padding: 10px;*/ /* Add padding */
    /*row-gap: 10px;*/ /* Adjust this value for spacing between rows */
/*}*/

.player-info[b-f8sukay17h] {
    display: flex; /* Use flexbox for player info */
    align-items: center; /* Center items vertically */
}

    .player-info img[b-f8sukay17h] {
        margin-right: 3px; /* Space between image and text */
        width: 40px;
        height: 40px;
        border-radius: 50%; /* Circular image */
    }
    .player-info p[b-f8sukay17h] {
        margin: 0px; /* Reduce the margin for paragraph elements */
    }
    /* Style for PlayerName */
    .player-info .player-name[b-f8sukay17h] {
        font-size: 1.0rem; /* Larger size for player name */
        font-weight: bold; /* Make the name bold */
    }

    /* Style for PlayerChoice */
    .player-info .player-choice[b-f8sukay17h] {
        font-size: 0.75rem; /* Smaller size for player choice */
        color: gray; /* Optional: make it gray for distinction */
    }

.giveaway-info[b-f8sukay17h] {
    text-align: right; /* Align text to the right */
}
    .giveaway-info p[b-f8sukay17h] {
        margin: 0px; /* Reduce the margin for paragraph elements */
        line-height: 1.2; /* Tighter line spacing */
    }
    .giveaway-info .giveaway-balance[b-f8sukay17h] {
        font-size: 1.1em;
        color: green;
        font-weight: bold;
    }
    .giveaway-info .sponsored-link[b-f8sukay17h] {
        font-size: 0.7em;
        margin: 0px; /* Reduce the margin for paragraph elements */
        color: blue; /* Link color */
        text-decoration: underline; /* Underline for links */
        cursor: pointer; /* Pointer cursor for interactivity */
    }
.winning-info p[b-f8sukay17h] {
    margin: 0px;
    line-height: 1.2; /* Tighter line spacing */
}
.funds[b-f8sukay17h]{
    color: green;
}

/*=========================
    Reset Hearts
==========================*/
.resets-left[b-f8sukay17h] {
    text-align: center; /* Center the text */
    margin-top: 5px; /* Add some top margin for spacing */
    vertical-align: middle; /* Ensure images align properly vertically */
}
.hearts[b-f8sukay17h] {
    width: 10px;
    height: auto;
    display: inline-block;
    margin: -0.5px; /* Remove any margin */
    padding: 0px; /* Remove any padding */
}
    .hearts.heart-drop[b-f8sukay17h] {
        animation: heartDrop-b-f8sukay17h 3s ease-in-out;
        position: relative;
    }

@keyframes heartDrop-b-f8sukay17h {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(300px) rotate(360deg);
        opacity: 0;
    }
}


/*=========================
    Reset Hearts End
==========================*/

/*=========================
    Side Selection
==========================*/
.side-choice-section[b-f8sukay17h] {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center vertically (optional for more precise alignment) */
    text-align: center; /* Center text inside the section */
}

.coin-images[b-f8sukay17h] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

    .coin-images img[b-f8sukay17h] {
        width: auto;
        height: 70px;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

.coin.selected[b-f8sukay17h] {
    animation: rotate-b-f8sukay17h 3s linear infinite; /* Continuous rotation */
    transform: scale(1.2); /* Magnify */
}

@keyframes rotate-b-f8sukay17h {
    from {
        transform: scale(1.2) rotate(0deg); /* Start position */
    }

    to {
        transform: scale(1.2) rotate(360deg); /* Full rotation */
    }
}

/*=========================
    Side Selection End
==========================*/
/*=========================
    Percentage Bars
==========================*/
/*.grid-layout {
    display: flex;*/ /* Use flexbox to lay out the columns side by side */
    /*justify-content: center;*/ /* Center the content horizontally */
    /*gap: 2px;*/ /* 2px space between the columns */
/*}*/

.bar-column[b-f8sukay17h] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bar-frame[b-f8sukay17h] {
    /*display: flex;*/ /* Make the bar frame a flex container */
    /*justify-content: flex-end;*/ /* Align items to the bottom */
    /*width: 60px;
    height: 100px;
    margin: 2px;
    border: 1px solid #ccc;*/ /* Optional frame border */
    /*border-radius: 10px;
    position: relative;
    overflow: hidden;*/ /* Prevent overflowing content */
}
    .bar-frame.highlight[b-f8sukay17h] {
        border: 2px solid #FFD700; /* Golden border to highlight */
        /*box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);*/ /* Optional glowing effect */
        animation: pulse-b-f8sukay17h 1.5s infinite; /* Pulsing effect */
    }
@keyframes pulse-b-f8sukay17h {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(255, 215, 0, 1);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    }
}
.bar[b-f8sukay17h] {
    width: 100%;
    background-color: #80CBC4; /* Default color */
    transition: height 0.3s ease; /* Smooth height transition */
    position: absolute; /* Position the bar absolutely */
    bottom: 0; /* Start filling from the bottom */
    border-bottom-left-radius: 10px; /* Round bottom-left corner */
    border-bottom-right-radius: 10px; /* Round bottom-right corner */
}

    /* Custom color for Tails bar */
    .bar:nth-child(2) .bar[b-f8sukay17h] {
        background-color: #CE93D8;
    }
    .bar.tails-bar[b-f8sukay17h] {
        background-color: #CE93D8;
    }

.label[b-f8sukay17h], .count-label[b-f8sukay17h] {
    font-size: 14px;
    text-align: center;
}
/*=========================
    Percentage Bars Ended
==========================*/


.progress-container[b-f8sukay17h] {
    width: 80%; /* Set the desired width, e.g., 80% of the parent */
    max-width: 600px; /* Optional: Set a maximum width for larger screens */
    margin: 0 auto 15px; /* Center the container with left and right auto margins, and 20px bottom margin */
    position: relative; /* Positioning for absolute child elements */
}

.round-label[b-f8sukay17h] {
    position: absolute; /* Position it absolutely within the container */
    width: 100%; /* Take full width */
    text-align: center; /* Center the text */
    z-index: 1; /* Ensure the label is above the progress bar */
    color: #333; /* Dark color for visibility */
    font-weight: bold; /* Bold text for emphasis */
    font-size: 1.0em;
    font-weight: bold;
}

.progress-bar[b-f8sukay17h] {
    background-color: rgba(224, 224, 224, 0.7); /* Light gray background with transparency */
    border-radius: 5px; /* Rounded corners */
    border: 2px solid #ccc;
    height: 20px; /* Height of the progress bar */
    overflow: hidden; /* Hide overflow */
    position: relative; /* Relative positioning for child elements */
    margin-top: 5px; /* Space between label and progress bar */
}

.progress-fill[b-f8sukay17h] {
    background-color: rgba(70, 143, 162, 0.5);
    height: 100%; /* Full height of the parent */
    transition: width 0.5s ease; /* Smooth transition for width changes */
}


/*=========================
    Coin Flipping
==========================*/
.coin-container[b-f8sukay17h] {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    perspective: 1000px; /* Enables 3D perspective for flipping */
}

/*.coin-image {
    width: 100px;
    height: 100px;
    transition: transform 0.1s ease-in-out;*/ /* Smooth transition for each flip */
/*}*/

.flipping[b-f8sukay17h] {
    animation: spin-b-f8sukay17h 0.5s ease-in-out infinite; /* Continuous spinning animation */
}

/*=========================
  Reset Count Fading
==========================*/
.fade-in[b-f8sukay17h] {
    opacity: 1;
    transition: opacity 3s ease-in;
}

.fade-out[b-f8sukay17h] {
    opacity: 0;
    transition: opacity 3s ease-out;
}
/*=========================
  Reset Count Fading End
==========================*/


/* Keyframes for flipping the coin */
@keyframes spin-b-f8sukay17h {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}
/*=========================
    Coin Flipping Ended
==========================*/

.selected[b-f8sukay17h] {
    transform: scale(1.2); /* Scale up the selected coin */
}

.transition-fade[b-f8sukay17h] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s; /* Delay visibility to allow fade-out */
    height: 0;
    overflow: hidden;
}

    .transition-fade.show[b-f8sukay17h] {
        opacity: 1;
        visibility: visible;
        transition: opacity 1.5s ease-in-out, visibility 0s; /* No delay for showing */
        height: auto;
        overflow: visible;
    }

    .transition-fade.hidden[b-f8sukay17h] {
        opacity: 0;
        visibility: hidden;
        transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s; /* Fade out, then hide */
        height: 0;
        overflow: hidden;
        display: none; /* Will not take space when hidden */
    }

/*.gameplay-content-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
}
    .gameplay-content-centered img {
        width: 130px;
        height: 130px;
        object-fit: cover;
    }*/

.button-container[b-f8sukay17h] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 0px; /* Optional: Add some spacing at the top */
}

.centered-button[b-f8sukay17h] {
    margin-top: 20px; /* Add spacing above the button */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2; /* Optional: Button color */
    color: white;
    border: none;
    border-radius: 10px; /* Rounded corners for a modern look */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth hover effect */
}

    .centered-button:hover[b-f8sukay17h] {
        background-color: #267724; /* Darker shade on hover */
    }

    .centered-button:disabled[b-f8sukay17h] {
        background-color: #d3d3d3; /* Grey background for disabled state */
        color: #a9a9a9; /* Light grey text for disabled state */
        cursor: not-allowed; /* Change cursor to indicate disabled state */
    }

    .centered-button:active[b-f8sukay17h] {
        transform: scale(0.85); /* Scale down slightly when clicked */
    }

/* Back button */
/*.back-button {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    align-content: end;
    transition: background-color 0.3s ease, transform 0.1s ease;*/ /* Smooth hover effect */
/*}

    .back-button img.back-icon {
        width: 60px;
        height: auto;
        transition: opacity 0.3s ease;
    }

        .back-button img.back-icon:hover {
            content: url('images/back_icon_hover.png');*/ /* Image on hover */
            /*opacity: 0.8;*/ /* Optional: add an effect */
        /*}
    .back-button:active {
        transform: scale(0.85);*/ /* Scale down slightly when clicked */
    /*}*/

/*=========================
    Score Label
==========================*/
.score-display[b-f8sukay17h] {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
    padding: 5px; /* Space inside the box */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    margin: 10px 0; /* Space around the score box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

/*.score-text {
    font-size: 1.1rem;*/ /* Larger text for better visibility */
    /*color: white;*/ /* Text color */
    /*font-family: 'Press Start 2P';*/ /* Example game-like font */
    /*margin-bottom: 0;
}*/

/*.score-value {
    font-weight: bold;*/ /* Make the score bold */
    /*padding: 2px 5px;*/ /* Space around the score */
    /*border-radius: 5px;*/ /* Slightly rounded corners */
/*}

    .score-value.positive {
        background-color: green;*/ /* Background color for positive scores */
        /*color: white;*/ /* Text color for positive scores */
    /*}

    .score-value.negative {
        background-color: red;*/ /* Background color for negative scores */
        /*color: white;*/ /* Text color for negative scores */
    /*}*/
/*=========================
    Score Label Ended
==========================*/

/*=========================
    Coin Image Shake
==========================*/
/* Define the shake animation */
@keyframes shake-b-f8sukay17h {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Style the image and apply the shake effect */
.shake-effect[b-f8sukay17h] {
    animation: shake-b-f8sukay17h 0.5s; /* Animation duration */
}
/*=========================
    Coin Image Shake Ended
==========================*/

@keyframes bounceIn-b-f8sukay17h {
    0% {
        transform: translateY(100%); /* Start below the screen */
        opacity: 0; /* Start invisible */
    }

    50% {
        opacity: 1; /* Become visible */
        transform: translateY(-30px); /* Move up slightly */
    }

    100% {
        transform: translateY(0); /* Settle back to original position */
    }
}

@keyframes bounceOut-b-f8sukay17h {
    0% {
        transform: translateY(0); /* Start from original position */
        opacity: 1; /* Fully visible */
    }

    100% {
        transform: translateY(100%); /* Move down and disappear */
        opacity: 0; /* Fade out */
    }
}

.end-round-message[b-f8sukay17h] {
    position: fixed; /* Stay fixed on the screen */
    bottom: -100px; /* Start below the viewport */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment */
    padding: 10px 20px; /* Extra padding for a better appearance */
    border-radius: 8px; /* Slightly more rounded corners */
    font-size: 1.2rem; /* Adjust font size as needed */
    color: white; /* White text for contrast */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 1000; /* Ensure it appears above other elements */
    display: none; /* Hidden by default */
}
    .end-round-message.animate[b-f8sukay17h] {
        display: block; /* Make it visible */
        animation: slideInUp-b-f8sukay17h 0.6s forwards, fadeOut-b-f8sukay17h 0.5s 5s forwards; /* Slide in from below, fade out after 5s */
    }
    /* Green background for win */
    .end-round-message.win[b-f8sukay17h] {
        background-color: rgba(0, 128, 0, 0.9); /* Dark green for win */
    }

    /* Red background for loss */
    .end-round-message.loss[b-f8sukay17h] {
        background-color: rgba(255, 0, 0, 0.8); /* Red for loss */
    }

    /* Grayish-blue background for bingo */
    .end-round-message.bingo[b-f8sukay17h] {
        background-color: rgba(70, 130, 180, 0.9); /* Steel blue for draw */
    }

/* Slide up from the bottom */
@keyframes slideInUp-b-f8sukay17h {
    0% {
        bottom: -100px;
        opacity: 0;
    }

    100% {
        bottom: 20px;
        opacity: 1;
    }
}

/* Fade out after showing */
@keyframes fadeOut-b-f8sukay17h {
    0% {
        bottom: 20px;
        opacity: 1;
    }

    100% {
        bottom: -100px;
        opacity: 0;
    }
}
/* Styles for the prompt message */
.prompt-message[b-f8sukay17h] {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 25px;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    color: white;
    border-radius: 8px;
    font-size: 1.2rem;
    text-align: center;
    opacity: 0; /* Hidden initially */
    z-index: 1000;
}

    .prompt-message.show[b-f8sukay17h] {
        animation: fadeInPrompt-b-f8sukay17h 1s forwards, fadeOutAndSlideUpPrompt-b-f8sukay17h 1s 3s forwards;
    }

/* Fade in animation */
@keyframes fadeInPrompt-b-f8sukay17h {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Slide and fade out animation */
@keyframes fadeOutAndSlideUpPrompt-b-f8sukay17h {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-100vh); /* Moves it completely off the screen */
    }
}

.game-over-message[b-f8sukay17h] {
    position: fixed; /* Keeps it in a fixed position on the screen */
    top: 50%; /* Vertical center */
    left: 50%; /* Horizontal center */
    transform: translate(-50%, -50%); /* Adjust position for perfect centering */
    font-size: 5rem; /* Big, readable font */
    font-weight: bold; /* Bold for emphasis */
    color: black; /* White text for visibility */
    background-color: #e74c3c; /* Red background for the game over message */
    padding: 10px 20px; /* Padding for a larger button-like feel */
    border-radius: 10px; /* Rounded corners */
    z-index: 1000; /* Ensure it overlays everything */
    opacity: 0.9; /* Start as invisible */
    animation: fadeInOut-b-f8sukay17h 5s forwards; /* Apply fade-in and fade-out animation */
    text-align: center; /* Center the text within the box */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Add shadow for better visibility */
}
/* Keyframes for fading in and out with a slide off the screen */
@keyframes fadeInOut-b-f8sukay17h {
    0% {
        opacity: 0; /* Initially invisible */
        transform: translate(-50%, -50%) scale(0.8); /* Start smaller and centered */
    }

    50% {
        opacity: 0.8; /* Fully visible */
        transform: translate(-50%, -50%) scale(1.1); /* Slightly bigger and centered */
    }

    100% {
        opacity: 0; /* Fade out */
        transform: translate(-50%, 150%) scale(0.8); /* Move off the bottom of the screen */
        display: none
    }
}
/* /Pages/HeadsOrTailsDemoPage.razor.rz.scp.css */
.game-info[b-0hayu8urj9] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    margin-bottom: 10px; /* Adjust space between rows */
    border: 1px solid #ccc; /* Optional: border for clarity */
    border-radius: 10px; /* Optional: rounded corners */
    background-color: #f9f9f9; /* Optional: background color */
    padding: 10px; /* Add padding */
    row-gap: 10px; /* Adjust this value for spacing between rows */
}

.player-info[b-0hayu8urj9] {
    display: flex; /* Use flexbox for player info */
    align-items: center; /* Center items vertically */
}

    .player-info img[b-0hayu8urj9] {
        margin-right: 5px; /* Space between image and text */
        width: 40px;
        height: 40px;
        border-radius: 50%; /* Circular image */
    }

    .player-info p[b-0hayu8urj9] {
        margin: 0px; /* Reduce the margin for paragraph elements */
    }

.giveaway-info[b-0hayu8urj9] {
    text-align: right; /* Align text to the right */
}

    .giveaway-info p[b-0hayu8urj9] {
        margin: 0px; /* Reduce the margin for paragraph elements */
    }

    .giveaway-info .giveaway-balance[b-0hayu8urj9] {
        font-size: 1.2em;
        color: green;
    }

    .giveaway-info .sponsored-link[b-0hayu8urj9] {
        font-size: 0.7em;
        margin: 0px; /* Reduce the margin for paragraph elements */
        color: blue; /* Link color */
        text-decoration: underline; /* Underline for links */
        cursor: pointer; /* Pointer cursor for interactivity */
    }

.winning-info p[b-0hayu8urj9] {
    margin: 0px;
}

.funds[b-0hayu8urj9] {
    color: green
}

/*=========================
    Reset Hearts
==========================*/
.resets-left[b-0hayu8urj9] {
    text-align: center; /* Center the text */
    margin-top: 5px; /* Add some top margin for spacing */
    vertical-align: middle; /* Ensure images align properly vertically */
}

.hearts[b-0hayu8urj9] {
    width: 10px;
    height: auto;
    display: inline-block;
    margin: -0.5px; /* Remove any margin */
    padding: 0px; /* Remove any padding */
}

    .hearts.heart-drop[b-0hayu8urj9] {
        animation: heartDrop-b-0hayu8urj9 3s ease-in-out;
        position: relative;
    }

@keyframes heartDrop-b-0hayu8urj9 {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(300px) rotate(360deg);
        opacity: 0;
    }
}


/*=========================
    Reset Hearts End
==========================*/

/*=========================
    Side Selection
==========================*/
.side-choice-section[b-0hayu8urj9] {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center vertically (optional for more precise alignment) */
    text-align: center; /* Center text inside the section */
}

.coin-images[b-0hayu8urj9] {
    display: flex;
    gap: 10px; /* Add space between the coin images */
    justify-content: center; /* Center the coin images */
}

    .coin-images img[b-0hayu8urj9] {
        width: auto;
        height: 70px;
    }

.coin[b-0hayu8urj9] {
    transition: transform 0.3s ease; /* Smooth scaling animation */
}
/*=========================
    Side Selection End
==========================*/
/*=========================
    Percentage Bars
==========================*/
.grid-layout[b-0hayu8urj9] {
    display: flex; /* Use flexbox to lay out the columns side by side */
    justify-content: center; /* Center the content horizontally */
    gap: 2px; /* 2px space between the columns */
}

.bar-column[b-0hayu8urj9] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bar-frame[b-0hayu8urj9] {
    display: flex; /* Make the bar frame a flex container */
    justify-content: flex-end; /* Align items to the bottom */
    width: 60px;
    height: 100px;
    margin: 2px;
    border: 1px solid #ccc; /* Optional frame border */
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* Prevent overflowing content */
}

.bar[b-0hayu8urj9] {
    width: 100%;
    background-color: Green; /* Default color */
    transition: height 0.3s ease; /* Smooth height transition */
    position: absolute; /* Position the bar absolutely */
    bottom: 0; /* Start filling from the bottom */
    border-bottom-left-radius: 10px; /* Round bottom-left corner */
    border-bottom-right-radius: 10px; /* Round bottom-right corner */
}

    /* Custom color for Tails bar */
    .bar:nth-child(2) .bar[b-0hayu8urj9] {
        background-color: Orange;
    }

    .bar.tails-bar[b-0hayu8urj9] {
        background-color: Orange;
    }

.label[b-0hayu8urj9], .count-label[b-0hayu8urj9] {
    font-size: 14px;
    text-align: center;
}
/*=========================
    Percentage Bars Ended
==========================*/

/*=========================
    Coin Flipping
==========================*/
.coin-container[b-0hayu8urj9] {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    perspective: 1000px; /* Enables 3D perspective for flipping */
}

.coin-image[b-0hayu8urj9] {
    width: 100px;
    height: 100px;
    transition: transform 0.1s ease-in-out; /* Smooth transition for each flip */
}

.flipping[b-0hayu8urj9] {
    animation: spin-b-0hayu8urj9 0.5s ease-in-out infinite; /* Continuous spinning animation */
}

/*=========================
  Reset Count Fading
==========================*/
.fade-in[b-0hayu8urj9] {
    opacity: 1;
    transition: opacity 3s ease-in;
}

.fade-out[b-0hayu8urj9] {
    opacity: 0;
    transition: opacity 3s ease-out;
}
/*=========================
  Reset Count Fading End
==========================*/


/* Keyframes for flipping the coin */
@keyframes spin-b-0hayu8urj9 {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}
/*=========================
    Coin Flipping Ended
==========================*/

.selected[b-0hayu8urj9] {
    transform: scale(1.2); /* Scale up the selected coin */
}

.transition-fade[b-0hayu8urj9] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s; /* Delay visibility to allow fade-out */
    height: 0;
    overflow: hidden;
}

    .transition-fade.show[b-0hayu8urj9] {
        opacity: 1;
        visibility: visible;
        transition: opacity 1.5s ease-in-out, visibility 0s; /* No delay for showing */
        height: auto;
        overflow: visible;
    }

    .transition-fade.hidden[b-0hayu8urj9] {
        opacity: 0;
        visibility: hidden;
        transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s; /* Fade out, then hide */
        height: 0;
        overflow: hidden;
        display: none; /* Will not take space when hidden */
    }

.gameplay-content-centered[b-0hayu8urj9] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
}

    .gameplay-content-centered img[b-0hayu8urj9] {
        width: 130px;
        height: 130px;
        object-fit: cover;
    }

.button-container[b-0hayu8urj9] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 0px; /* Optional: Add some spacing at the top */
}

.centered-button[b-0hayu8urj9] {
    margin-top: 20px; /* Add spacing above the button */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2; /* Optional: Button color */
    color: white;
    border: none;
    border-radius: 10px; /* Rounded corners for a modern look */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

    .centered-button:hover[b-0hayu8urj9] {
        background-color: #267724; /* Darker shade on hover */
    }

    .centered-button:disabled[b-0hayu8urj9] {
        background-color: #d3d3d3; /* Grey background for disabled state */
        color: #a9a9a9; /* Light grey text for disabled state */
        cursor: not-allowed; /* Change cursor to indicate disabled state */
    }

/*=========================
    Score Label
==========================*/
.score-display[b-0hayu8urj9] {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
    padding: 5px; /* Space inside the box */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    margin: 10px 0; /* Space around the score box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

.score-text[b-0hayu8urj9] {
    font-size: 1.1rem; /* Larger text for better visibility */
    color: white; /* Text color */
    font-family: 'Press Start 2P'; /* Example game-like font */
    margin-bottom: 0;
}

.score-value[b-0hayu8urj9] {
    font-weight: bold; /* Make the score bold */
    padding: 2px 5px; /* Space around the score */
    border-radius: 5px; /* Slightly rounded corners */
}

    .score-value.positive[b-0hayu8urj9] {
        background-color: green; /* Background color for positive scores */
        color: white; /* Text color for positive scores */
    }

    .score-value.negative[b-0hayu8urj9] {
        background-color: red; /* Background color for negative scores */
        color: white; /* Text color for negative scores */
    }
/*=========================
    Score Label Ended
==========================*/

/*=========================
    Coin Image Shake
==========================*/
/* Define the shake animation */
@keyframes shake-b-0hayu8urj9 {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Style the image and apply the shake effect */
.shake-effect[b-0hayu8urj9] {
    animation: shake-b-0hayu8urj9 0.5s; /* Animation duration */
}
/*=========================
    Coin Image Shake Ended
==========================*/

/* Back button */
.back-button[b-0hayu8urj9] {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    align-content: end;
}

    .back-button img.back-icon[b-0hayu8urj9] {
        width: 60px;
        height: auto;
        transition: opacity 0.3s ease;
    }

        .back-button img.back-icon:hover[b-0hayu8urj9] {
            content: url('images/back_icon_hover.png'); /* Image on hover */
            opacity: 0.8; /* Optional: add an effect */
        }


@keyframes bounceIn-b-0hayu8urj9 {
    0% {
        transform: translateY(100%); /* Start below the screen */
        opacity: 0; /* Start invisible */
    }

    50% {
        opacity: 1; /* Become visible */
        transform: translateY(-30px); /* Move up slightly */
    }

    100% {
        transform: translateY(0); /* Settle back to original position */
    }
}

@keyframes bounceOut-b-0hayu8urj9 {
    0% {
        transform: translateY(0); /* Start from original position */
        opacity: 1; /* Fully visible */
    }

    100% {
        transform: translateY(100%); /* Move down and disappear */
        opacity: 0; /* Fade out */
    }
}

.end-round-message[b-0hayu8urj9] {
    position: fixed; /* Stay fixed on the screen */
    bottom: -100px; /* Start below the viewport */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment */
    padding: 10px 20px; /* Extra padding for a better appearance */
    border-radius: 8px; /* Slightly more rounded corners */
    font-size: 1.2rem; /* Adjust font size as needed */
    color: white; /* White text for contrast */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 1000; /* Ensure it appears above other elements */
    display: none; /* Hidden by default */
}

    .end-round-message.animate[b-0hayu8urj9] {
        display: block; /* Make it visible */
        animation: slideInUp-b-0hayu8urj9 0.6s forwards, fadeOut-b-0hayu8urj9 0.5s 5s forwards; /* Slide in from below, fade out after 5s */
    }
    /* Green background for win */
    .end-round-message.win[b-0hayu8urj9] {
        background-color: rgba(0, 128, 0, 0.9); /* Dark green for win */
    }

    /* Red background for loss */
    .end-round-message.loss[b-0hayu8urj9] {
        background-color: rgba(255, 0, 0, 0.8); /* Red for loss */
    }

    /* Grayish-blue background for bingo */
    .end-round-message.bingo[b-0hayu8urj9] {
        background-color: rgba(70, 130, 180, 0.9); /* Steel blue for draw */
    }

/* Slide up from the bottom */
@keyframes slideInUp-b-0hayu8urj9 {
    0% {
        bottom: -100px;
        opacity: 0;
    }

    100% {
        bottom: 20px;
        opacity: 1;
    }
}

/* Fade out after showing */
@keyframes fadeOut-b-0hayu8urj9 {
    0% {
        bottom: 20px;
        opacity: 1;
    }

    100% {
        bottom: -100px;
        opacity: 0;
    }
}
/* Styles for the prompt message */
.prompt-message[b-0hayu8urj9] {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 25px;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    color: white;
    border-radius: 8px;
    font-size: 1.2rem;
    text-align: center;
    opacity: 0; /* Hidden initially */
    z-index: 1000;
}

    .prompt-message.show[b-0hayu8urj9] {
        animation: fadeInPrompt-b-0hayu8urj9 1s forwards, fadeOutPrompt-b-0hayu8urj9 1s 3s forwards;
    }

/* Fade in animation */
@keyframes fadeInPrompt-b-0hayu8urj9 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Fade out animation */
@keyframes fadeOutPrompt-b-0hayu8urj9 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.game-over-message[b-0hayu8urj9] {
    position: fixed; /* Keeps it in a fixed position on the screen */
    top: 50%; /* Vertical center */
    left: 50%; /* Horizontal center */
    transform: translate(-50%, -50%); /* Adjust position for perfect centering */
    font-size: 5rem; /* Big, readable font */
    font-weight: bold; /* Bold for emphasis */
    color: black; /* White text for visibility */
    background-color: #e74c3c; /* Red background for the game over message */
    padding: 10px 20px; /* Padding for a larger button-like feel */
    border-radius: 10px; /* Rounded corners */
    z-index: 1000; /* Ensure it overlays everything */
    opacity: 0.9; /* Start as invisible */
    animation: fadeInOut-b-0hayu8urj9 5s forwards; /* Apply fade-in and fade-out animation */
    text-align: center; /* Center the text within the box */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Add shadow for better visibility */
}
/* Keyframes for fading in and out with a slide off the screen */
@keyframes fadeInOut-b-0hayu8urj9 {
    0% {
        opacity: 0; /* Initially invisible */
        transform: translate(-50%, -50%) scale(0.8); /* Start smaller and centered */
    }

    50% {
        opacity: 0.8; /* Fully visible */
        transform: translate(-50%, -50%) scale(1.1); /* Slightly bigger and centered */
    }

    100% {
        opacity: 0; /* Fade out */
        transform: translate(-50%, 150%) scale(0.8); /* Move off the bottom of the screen */
        display: none
    }
}
/* /Pages/HeadsOrTailsInstructionsPage.razor.rz.scp.css */
/* Full-screen overlay to darken the background */
.popup-container[b-7ass6cbwfd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Make sure it's on top of everything else */
}

/* Modal box */
.popup-frame[b-7ass6cbwfd] {
    background-color: white;
    border-radius: 10px;
    border: 1px solid green; /* Green border */
    padding: 20px;
    width: 300px;
    max-height: 600px;
    overflow-y: auto; /* Scroll if content exceeds height */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for 3D effect */
    z-index: 1001;
    flex-direction: column; /* Ensure the content and footer are stacked */
}

/* Title styling */
.popup-title[b-7ass6cbwfd] {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

/* Footer with button */
.popup-footer[b-7ass6cbwfd] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.popup-content[b-7ass6cbwfd] {
    padding: 10px;
    flex-grow: 1; /* Take up available space */
    overflow-y: auto; /* Make content scrollable */
    margin-bottom: 60px; /* Add margin to ensure content does not go under the button */
}

/* Ensure the content doesn't affect the rest of the page */
body.modal-open[b-7ass6cbwfd] {
    overflow: hidden; /* Disable scrolling when modal is open */
}

.button-container[b-7ass6cbwfd] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-7ass6cbwfd] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2; /* Optional: Button color */
    color: white;
    border: none;
    border-radius: 10px; /* Rounded corners for a modern look */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

    .centered-button:hover[b-7ass6cbwfd] {
        background-color: #267724; /* Darker shade on hover */
    }

    .centered-button:disabled[b-7ass6cbwfd] {
        background-color: #d3d3d3; /* Grey background for disabled state */
        color: #a9a9a9; /* Light grey text for disabled state */
        cursor: not-allowed; /* Change cursor to indicate disabled state */
    }

/* Center the h3 and give it some visual appeal */
h3[b-7ass6cbwfd] {
    text-align: center; /* Center the text */
    font-size: 1.0rem; /* Increase font size */
    font-weight: bold; /* Make the text bold */
    color: #2c3e50; /* Darker color for contrast */
    background-color: #d3d3d3; /* Light background for contrast */
    padding: 5px 5px; /* Add padding to make it stand out */
    border-radius: 8px; /* Smooth corners */
    border: 1px solid green; /* Green border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 5px auto; /* Margin for spacing */
    max-width: 100%; /* Limit width */
}

/* Center the h4 and give it some visual appeal */
h4[b-7ass6cbwfd] {
    text-align: center; /* Center the text */
    font-size: 1.0rem; /* Increase font size */
    font-weight: bold; /* Make the text bold */
    color: #2c3e50; /* Darker color for contrast */
    background-color: #f4f4f9; /* Light background for contrast */
    padding: 5px 0px; /* Add padding to make it stand out */
    border-radius: 8px; /* Smooth corners */
    border: 1px solid green; /* Green border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 5px auto; /* Margin for spacing */
    max-width: 80%; /* Limit width */
}

.instructions-section[b-7ass6cbwfd] {
    padding-bottom: 20px;
}

/* Footer Section for the Close Button */
.fixed-footer[b-7ass6cbwfd] {
    position: sticky;
    bottom: 0;
    background-color: #f5f5f5;
    padding: 10px;
    border-top: 1px solid #ccc;
    text-align: center;
}
/* /Pages/LoadingScreen.razor.rz.scp.css */
/* Common Overlay Styling */
.loading-overlay[b-5vgvewou7u] {
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'Arial', sans-serif;
    color: #fff;
    text-align: center;
}

    /* Full-Screen Overlay */
    .loading-overlay.full-screen[b-5vgvewou7u] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(143, 188, 143, 1), rgba(60, 100, 60, 1));
    }

    /* Centered Rectangle Overlay */
    .loading-overlay.center-rectangle[b-5vgvewou7u] {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 75%;
        height: 15%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(143, 188, 143, 1), rgba(60, 100, 60, 1));
        border-radius: 10px; /* Optional: Rounded corners */
    }

/* Loading Text */
/*.loading-text {
    font-size: 1.5rem;
    margin-bottom: 20px;
    animation: fade 1.5s ease-in-out infinite;
}
    .loading-text.center-rectangle-text {
        font-size: 1rem;
        margin-bottom: 10px;
        animation: fade 1.5s ease-in-out infinite;
    }*/

/* Spinner Styling */
/*.game-spinner {
    position: relative;
    width: 80px;
    height: 80px;
}
    .game-spinner.center-rectangle-spinner {
        position: relative;
        width: 55px;
        height: 55px;
    }

.spinner-part {
    position: absolute;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}

.part-1 {
    width: 100%;
    height: 100%;
    border-top-color: #4caf50;
}

.part-2 {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: #a5d6a7;
    animation-duration: 2s;
}

.part-3 {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-top-color: #1b5e20;
    animation-duration: 2.5s;
}*/

/* Animations */
/*@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}*/

/*@keyframes fade {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
*/
/* Loading animation styles */ 
@keyframes pulse-b-5vgvewou7u {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.animate-pulse[b-5vgvewou7u] {
    animation: pulse-b-5vgvewou7u 2s infinite ease-in-out;
}

/* Progress bar animation */ 
/*Temp animation before adding actual logic*/
@keyframes progress-b-5vgvewou7u {
    0% {
        width: 15%;
    }

    100% {
        width: 100%;
    }
}

.auto-progress[b-5vgvewou7u] {
    animation: progress-b-5vgvewou7u 5s linear forwards;
}
/* /Pages/MainPage.razor.rz.scp.css */
/* Main container */
.main-container[b-p7vusjkw25] {
    max-width: 400px; /* Restrict to a phone-like width */
    margin: 0 auto; /* Center align */
    padding: 10px; /* Add some padding */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Top section */
.top-section[b-p7vusjkw25] {
    margin-bottom: 30px; /* Reduced margin for better spacing */
}

.game-info[b-p7vusjkw25] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    margin-bottom: 10px; /* Adjust space between rows */
    border: 1px solid #ccc; /* Optional: border for clarity */
    border-radius: 10px; /* Optional: rounded corners */
    background-color: #f9f9f9; /* Optional: background color */
    padding: 10px; /* Add padding */
    row-gap: 10px; /* Adjust this value for spacing between rows */
}

.avatar-container[b-p7vusjkw25] {
    display: flex;
    align-items: center;
}

.avatar-image[b-p7vusjkw25] {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular image */
}

.ref-code[b-p7vusjkw25] {
    text-align: right; /* Align text to the right */
    font-size: 0.8rem;
}

    .ref-code p[b-p7vusjkw25] {
        margin: 0px; /* Reduce the margin for paragraph elements */
        line-height: 1.2; /* Tighter line spacing */
    }

.copy-button[b-p7vusjkw25] {
    margin-top: 0px;
    padding: 0px 5px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #348C31;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .copy-button:hover[b-p7vusjkw25] {
        background-color: #2c7228; /* Slightly darker shade on hover */
    }
    .copy-button:active[b-p7vusjkw25] {
        transform: scale(0.85); /* Scale down slightly when clicked */
    }

.info-icon[b-p7vusjkw25] {
    position: absolute; /* Position the info icon absolutely */
    top: 5px; /* Adjust the vertical offset from the top */
    left: 5px; /* Adjust the horizontal offset from the left */
    width: 25px; /* Set a specific width for the icon */
    height: 25px; /* Set a specific height for the icon */
    cursor: pointer; /* Change cursor to pointer to indicate interactivity */
    animation: bounce-b-p7vusjkw25 1s ease-in-out 0s 3; /* Animation runs 3 times */
    transition: transform 0.1s ease; /* Smooth hover effect */
}
    .info-icon:active[b-p7vusjkw25] {
        transform: scale(1.5);
    }

@keyframes bounce-b-p7vusjkw25 {
    0%, 100% {
        transform: translateY(0); /* Original position */
    }

    50% {
        transform: translateY(-10px); /* Moves icon up */
    }
}

.player-info[b-p7vusjkw25] {
    margin-left: 5px;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
}
    .player-info p[b-p7vusjkw25] {
        margin: 0px; 
        line-height: 1.2; 
    }
    /* Style for PlayerName */
    .player-info .player-name[b-p7vusjkw25] {
        font-size: 1.0rem; /* Larger size for player name */
        font-weight: bold; /* Make the name bold */
    }
    .player-info .player-bonus[b-p7vusjkw25]{
        font-size: 0.8rem;
        font-weight: bold;
    }

/* Games title */
.games-title[b-p7vusjkw25] {
    font-size: 1.5rem; /* Responsive font size */
    font-weight: bold;
    color: #008000;
    text-align: left;
    margin-bottom: 5px;
    position: relative; /* Allows the element to be moved */
    animation: moveSideToSide-b-p7vusjkw25 2s ease-in-out infinite; /* Add the animation */
}

/* Animation for side-to-side movement */
@keyframes moveSideToSide-b-p7vusjkw25 {
    0%, 100% {
        left: 0; /* Start and end at original position */
    }

    50% {
        left: 10px; /* Move 10px to the right */
    }
}

/* Games grid */
/*.games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;*/ /* Two columns */
    /*gap: 2px;*/ /* Space between cards */
/*}*/

/*.game-card {
    position: relative;  Set relative positioning for absolute children 
    background: MintCream;
    border: 1.5px solid #348C31;
    border-radius: 10px;
    padding: 20px;  Adjust padding to accommodate the absolute-positioned icon 
    text-align: center;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);  Add a shadow for visual depth 
    max-width: 300px;  Optional: set a max width for a consistent layout 
    margin: 5px auto;  Optional: center align the card on the page 
}*/

    .game-card img.game-image[b-p7vusjkw25] {
        height: 10vh;
        width: auto; /* Maintain the aspect ratio */
        margin-top: 0px; /* Create some space between the icon and the image */
        cursor: pointer; /* Change cursor to indicate interactivity */
        transition: transform 0.2s ease; /* Smooth transition back to original */
    }

.game-image-animation:hover[b-p7vusjkw25] {
    animation: wobble-b-p7vusjkw25 0.5s ease;
}
        .game-card img.game-image:active[b-p7vusjkw25] {
            animation: wobble-b-p7vusjkw25 0.5s ease;
        }

    .game-card span.game-label[b-p7vusjkw25] {
        font-size: 1rem; /* Responsive font size */
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }

    .game-card button.play-button[b-p7vusjkw25] {
        background-color: #348C31;
        color: #ffffff;
        border: none;
        border-radius: 5px; /* Rounded corners */`
        padding: 10px;
        cursor: pointer;
        font-size: 1rem; /* Responsive font size */
        width: 100%;
        transition: transform 0.1s ease; /* Smooth hover effect */
    }

        .game-card button.play-button:hover[b-p7vusjkw25] {
            background-color: #2c7228; /* Slightly darker color on hover */
        }

        .game-card button.play-button:disabled[b-p7vusjkw25] {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .game-card button.play-button:active[b-p7vusjkw25] {
            transform: scale(0.85); /* Scale down slightly when clicked */
        }

@keyframes wobble-b-p7vusjkw25 {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-25deg);
    }

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

    45% {
        transform: rotate(-25deg);
    }

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

    75% {
        transform: rotate(-25deg);
    }

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

/* Logout button */
/*.logout-button {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    align-content: end;
}
    .logout-button img.logout-icon {
        width: 60px;
        height: auto;
        transition: opacity 0.3s ease;
    }
        .logout-button img.logout-icon:hover {
            content: url('images/logout_icon_hover.png');*/ /* Image on hover */
            /*opacity: 0.8;*/ /* Optional: add an effect */
        /*}*/

/* Loading indicator */
.loading-indicator[b-p7vusjkw25] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Responsive font size */
}

.button-container[b-p7vusjkw25] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0px;
}

.centered-button[b-p7vusjkw25] {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;  Smooth hover effect 
}

    .centered-button:hover[b-p7vusjkw25] {
        background-color: #267724;
    }

    .centered-button:disabled[b-p7vusjkw25] {
        background-color: #d3d3d3;
        color: #a9a9a9;
        cursor: not-allowed;
    }

/*     Click (active) effect */
    .centered-button:active[b-p7vusjkw25] {
        transform: scale(0.85);  Scale down slightly when clicked 
    }

.falling-symbols[b-p7vusjkw25] {
    position: absolute;
    width: 30px; /* Adjust to fit symbol size */
    height: auto;
    top: -50px; /* Start above the viewport */
    animation: fall-b-p7vusjkw25 4s linear infinite;
    opacity: 0.8; /* Slight transparency for effect */
    z-index: 100;
}
    .falling-symbols img[b-p7vusjkw25] {
        width: 30px; /* Set width for each image */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Prevent scaling beyond container */
    }

@keyframes fall-b-p7vusjkw25 {
    0% {
        top: -50px;
        opacity: 0;
        transform: translateX(0);
    }

    10% {
        opacity: 1;
    }

    100% {
        top: 90vh; /* Falls to bottom of viewport */
        transform: translateX(15px); /* Increased sideways drift */
        opacity: 0;
    }
}

/* Randomize fall animations with delays */
.falling-symbols:nth-child(1)[b-p7vusjkw25] {
    left: 5vw;
    animation-duration: 4s;
    animation-delay: 0s;
}

.falling-symbols:nth-child(2)[b-p7vusjkw25] {
    left: 15vw;
    animation-duration: 5s;
    animation-delay: 1s;
}

.falling-symbols:nth-child(3)[b-p7vusjkw25] {
    left: 25vw;
    animation-duration: 4.5s;
    animation-delay: 0.5s;
}

.falling-symbols:nth-child(4)[b-p7vusjkw25] {
    left: 35vw;
    animation-duration: 4.8s;
    animation-delay: 1.2s;
}

.falling-symbols:nth-child(5)[b-p7vusjkw25] {
    left: 45vw;
    animation-duration: 5.5s;
    animation-delay: 0.8s;
}

.falling-symbols:nth-child(6)[b-p7vusjkw25] {
    left: 55vw;
    animation-duration: 3.8s;
    animation-delay: 1.5s;
}

.falling-symbols:nth-child(7)[b-p7vusjkw25] {
    left: 65vw;
    animation-duration: 3.2s;
    animation-delay: 1.9s;
}

.falling-symbols:nth-child(8)[b-p7vusjkw25] {
    left: 75vw;
    animation-duration: 4.1s;
    animation-delay: 0.9s;
}

.falling-symbols:nth-child(9)[b-p7vusjkw25] {
    left: 80vw;
    animation-duration: 5.1s;
    animation-delay: 2.1s;
}

.falling-symbols:nth-child(10)[b-p7vusjkw25] {
    left: 85vw;
    animation-duration: 4.7s;
    animation-delay: 1.3s;
}

.modal-scroll[b-p7vusjkw25]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modal-scroll[b-p7vusjkw25]::-webkit-scrollbar-thumb {
    background-color: #c3e956;
    border-radius: 4px;
}

.modal-scroll[b-p7vusjkw25]::-webkit-scrollbar-track {
    background: #e0f2e9;
}

.modal-scroll[b-p7vusjkw25]::-webkit-scrollbar-thumb:hover {
    background-color: #c3e957;
}

.scrollbar-hide[b-p7vusjkw25]::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide[b-p7vusjkw25] {
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}
/* /Pages/Modal.razor.rz.scp.css */
/*.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);*/ /* Transparent background */
    /*display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}*/

/*.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}*/

    .modal-scroll[b-yvfy7hkwp8]::-webkit-scrollbar {
        width: 6px;
    }

.modal-scroll[b-yvfy7hkwp8]::-webkit-scrollbar-thumb {
    background-color: #c3e956;
    border-radius: 4px;
}

    .modal-scroll[b-yvfy7hkwp8]::-webkit-scrollbar-track {
        background: #e0f2e9;
    }

.modal-scroll[b-yvfy7hkwp8]::-webkit-scrollbar-thumb:hover {
    background-color: #c3e957;
}


/*.modal-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
*/
/*.modal-body {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}*/

/*.sponsor-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sponsor-avatar {
    width: 50px;
    height: auto;
    margin-right: 10px;
}

.sponsor-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.modal-footer {
    display: flex;
    justify-content: center;
}

.modal-close-btn {
    background-color: #468fa2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
}

    .modal-close-btn:hover {
        background-color: #267724;
    }
*/
/* /Pages/NotifyBanner.razor.rz.scp.css */

.version-banner[b-emzwf3ae51] {
    position: fixed;
    top: 50%; /* Move to the middle of the screen vertically */
    left: 50%; /* Move to the middle of the screen horizontally */
    transform: translate(-50%, -50%); /* Shift it back to center */
    background-color: yellow;
    color: black;
    text-align: center;
    padding: 10px;
    z-index: 1000;
    box-sizing: border-box; /* Ensure padding is included in width */
}
/* /Pages/Settings.razor.rz.scp.css */
.button-container[b-4hszxmkty4] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-4hszxmkty4] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: slideEffect 1.8s ease-in-out infinite alternate;
}

    .centered-button:hover[b-4hszxmkty4] {
        background-color: #267724;
    }

    .centered-button:disabled[b-4hszxmkty4] {
        background-color: #d3d3d3;
        color: #a9a9a9;
        cursor: not-allowed;
    }

    /* Click (active) effect */
    .centered-button:active[b-4hszxmkty4] {
        transform: scale(0.85); /* Scale down slightly when clicked */
    }
/* /Pages/SignIn.razor.rz.scp.css */
.button-container[b-c916leesc5] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-c916leesc5] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: slideEffect-b-c916leesc5 1.8s ease-in-out infinite alternate;
}

@keyframes slideEffect-b-c916leesc5 {
    from {
        transform: translateX(-15px);
    }

    to {
        transform: translateX(15px);
    }
}

.centered-button:hover[b-c916leesc5] {
    background-color: #267724;
}

.centered-button:disabled[b-c916leesc5] {
    background-color: #d3d3d3;
    color: #a9a9a9;
    cursor: not-allowed;
    animation: none; /* Stop sliding effect when disabled */
}
.password-container[b-c916leesc5] {
    position: relative;
}

.entry[b-c916leesc5] {
    padding-right: 30px; /* Add padding so text doesn't overlap with icon */
}

.password-toggle-icon[b-c916leesc5] {
    position: absolute;
    right: 10px; /* Adjust for positioning */
    top: 50%; /* Vertically center */
    transform: translateY(-50%);
    cursor: pointer;
}

.eye-icon[b-c916leesc5] {
    font-size: 1.5rem; /* Adjust the size of the icon */
    color: #888; /* Change the color as needed */
}
/* /Pages/SignUp.razor.rz.scp.css */
.registration-container[b-br9367ga38] {
    padding: 20px;
}

.password-container[b-br9367ga38] {
    position: relative;
}

.password-criteria[b-br9367ga38] {
    margin-top: 5px;
    padding: 5px; /* Reduce padding around the container */
}

    .password-criteria .error-text[b-br9367ga38] {
        color: red;
        margin: 3px 0; /* Reduce vertical spacing between criteria */
        font-size: 0.8rem; /* Slightly decrease font size if needed */
    }

.button-container[b-br9367ga38] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-br9367ga38] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: slideEffect-b-br9367ga38 1.8s ease-in-out infinite alternate;
}

@keyframes slideEffect-b-br9367ga38 {
    from {
        transform: translateX(-15px);
    }

    to {
        transform: translateX(15px);
    }
}

.centered-button:hover[b-br9367ga38] {
    background-color: #267724;
}

.centered-button:disabled[b-br9367ga38] {
    background-color: #d3d3d3;
    color: #a9a9a9;
    cursor: not-allowed;
    animation: none; /* Stop sliding effect when disabled */
}

.password-container[b-br9367ga38] {
    position: relative;
}

.entry[b-br9367ga38] {
    padding-right: 30px; /* Add padding so text doesn't overlap with icon */
}

.password-toggle-icon[b-br9367ga38] {
    position: absolute;
    right: 10px; /* Adjust for positioning */
    top: 50%; /* Vertically center */
    transform: translateY(-50%);
    cursor: pointer;
}

.eye-icon[b-br9367ga38] {
    font-size: 1.5rem; /* Adjust the size of the icon */
    color: #888; /* Change the color as needed */
}
/* /Pages/ToastMessage.razor.rz.scp.css */
.toast-notification[b-3scvw1re7v] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(211, 211, 211, 0.8);
    color: #333;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: slide-in-b-3scvw1re7v 0.5s ease-in-out;
    z-index: 999999;
}

.toast-message[b-3scvw1re7v] {
    margin-right: 10px;
}

@keyframes slide-in-b-3scvw1re7v {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


.toast[b-3scvw1re7v] {
}

.toast-success[b-3scvw1re7v] {
    background-color: green;
}

.toast-error[b-3scvw1re7v] {
    background-color: red;
}

.toast-info[b-3scvw1re7v] {
    background-color: dodgerblue;
}

.toast-warning[b-3scvw1re7v] {
    background-color: orange;
}
/* /Pages/WeeklyGiveaway.razor.rz.scp.css */
.game-container[b-0y4xad8m43] {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /*6 columns */
    grid-template-rows: repeat(6, 1fr); /*6 rows */
    gap: 3px;
    justify-items: center;
}
.game-info[b-0y4xad8m43] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    margin-bottom: 10px; /* Adjust space between rows */
    border: 1px solid #ccc; /* Optional: border for clarity */
    border-radius: 10px; /* Optional: rounded corners */
    background-color: #f9f9f9; /* Optional: background color */
    padding: 10px; /* Add padding */
    row-gap: 10px; /* Adjust this value for spacing between rows */
}

.player-info[b-0y4xad8m43] {
    display: flex; /* Use flexbox for player info */
    align-items: center; /* Center items vertically */
}

    .player-info img[b-0y4xad8m43] {
        margin-right: 3px; /* Space between image and text */
        width: 40px;
        height: 40px;
        border-radius: 50%; /* Circular image */
    }

    .player-info p[b-0y4xad8m43] {
        margin: 0px; /* Reduce the margin for paragraph elements */
    }
    /* Style for PlayerName */
    .player-info .player-name[b-0y4xad8m43] {
        font-size: 1.0rem; /* Larger size for player name */
        font-weight: bold; /* Make the name bold */
    }

    /* Style for PlayerChoice */
    .player-info .player-choice[b-0y4xad8m43] {
        font-size: 0.75rem; /* Smaller size for player choice */
        color: gray; /* Optional: make it gray for distinction */
    }

.giveaway-info[b-0y4xad8m43] {
    text-align: right; /* Align text to the right */
}

    .giveaway-info p[b-0y4xad8m43] {
        margin: 0px; /* Reduce the margin for paragraph elements */
        line-height: 1.2; /* Tighter line spacing */
    }

    .giveaway-info .sponsored-link[b-0y4xad8m43] {
        font-size: 0.7em;
        margin: 0px; /* Reduce the margin for paragraph elements */
        color: blue; /* Link color */
        text-decoration: underline; /* Underline for links */
        cursor: pointer; /* Pointer cursor for interactivity */
    }

/* Main Container */
.image-container[b-0y4xad8m43] {
    display: flex;
    flex-wrap: wrap;
    padding: 1px;
    /*background: #f2f2f2;*/
    border-radius: 5px;
    justify-content: center;
}

/* Image Wrapper */
.image-wrapper[b-0y4xad8m43] {
    position: relative;
    width: 50px; /* Adjust size as needed */
    height: auto;
}

/* Game Images */
.game-image[b-0y4xad8m43] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Grayscale Effect */
.gray-scale .game-image[b-0y4xad8m43] {
    filter: grayscale(100%);
    opacity: 0.5;
}
.red-x-overlay[b-0y4xad8m43] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    color: white;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

/* Overlay Count */
.image-count[b-0y4xad8m43] {
    position: absolute;
    bottom: 20px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0px 4px;
    font-size: 12px;
    border-radius: 50%;
    font-weight: bold;
}

.giveaway-items[b-0y4xad8m43] {
    text-align: center; /* Center the text */
    margin-top: 5px; /* Add some top margin for spacing */
    vertical-align: middle; /* Ensure images align properly vertically */
}
    .giveaway-items img[b-0y4xad8m43] {
        width: 40px;
        height: 40px;
    }

.square[b-0y4xad8m43] {

}

.inner[b-0y4xad8m43] {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.6s;

    transform: rotateY(0deg);
}

.square .inner.flipped[b-0y4xad8m43] {
    transform: rotateY(180deg);
}

.front[b-0y4xad8m43], .back[b-0y4xad8m43], .back-winner[b-0y4xad8m43] {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
}

.front[b-0y4xad8m43] {
    background: #4CAF50;
    width: 20px;
}

.back[b-0y4xad8m43] {
    background: url('images/sad_face_daily.png') center no-repeat;
    background-size: contain;
    transform: rotateY(180deg);
}
.back-winner[b-0y4xad8m43] {
    background: url('images/happy_face_daily.png') center no-repeat;
    background-size: contain;
    transform: rotateY(180deg);
}

/* Styles for the circular timer */
.timer-wrapper[b-0y4xad8m43] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0px auto;
}

.timer-circle[b-0y4xad8m43] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid #ddd;
    background: conic-gradient( #4caf50 @ProgressPercentage%, #ffeb3b @ProgressPercentage%, #ff6347 @ProgressPercentage%);
    transform: rotate(0deg); /* Rotate it so the progress starts from top */
    transition: background 1s linear; /* Smooth transition for the progress */
    animation: pulse-b-0y4xad8m43 4s infinite alternate;
}

@keyframes pulse-b-0y4xad8m43 {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}

.timer-text[b-0y4xad8m43] {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    font-family: 'Arial', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.winning-image[b-0y4xad8m43] {
    width: 80px;
    height: auto;
    transition: opacity 0.3s ease;
}


@media (max-width: 600px) {
    .square[b-0y4xad8m43] {
        width: 16vw;
        height: 16vw;
    }

    .timer-wrapper[b-0y4xad8m43] {
        width: 80px;
        height: 80px;
    }

    .timer-text[b-0y4xad8m43] {
        font-size: 15px;
    }
}

.modal-scroll[b-0y4xad8m43]::-webkit-scrollbar {
    width: 6px;
}

.modal-scroll[b-0y4xad8m43]::-webkit-scrollbar-thumb {
    background-color: #c3e956;
    border-radius: 4px;
}

.modal-scroll[b-0y4xad8m43]::-webkit-scrollbar-track {
    background: #e0f2e9;
}

.modal-scroll[b-0y4xad8m43]::-webkit-scrollbar-thumb:hover {
    background-color: #c3e957;
}
/* /Pages/WeeklyGiveawayInstructions.razor.rz.scp.css */
/* Full-screen overlay to darken the background */
.popup-container[b-9m19hvs6nq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Make sure it's on top of everything else */
}

/* Modal box */
.popup-frame[b-9m19hvs6nq] {
    background-color: white;
    border-radius: 10px;
    border: 1px solid green; /* Green border */
    padding: 20px;
    width: 300px;
    max-height: 600px;
    overflow-y: auto; /* Scroll if content exceeds height */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for 3D effect */
    z-index: 1001;
    flex-direction: column; /* Ensure the content and footer are stacked */
}

/* Title styling */
.popup-title[b-9m19hvs6nq] {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

/* Footer with button */
.popup-footer[b-9m19hvs6nq] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.popup-content[b-9m19hvs6nq] {
    padding: 10px;
    flex-grow: 1; /* Take up available space */
    overflow-y: auto; /* Make content scrollable */
    margin-bottom: 60px; /* Add margin to ensure content does not go under the button */
}

/* Ensure the content doesn't affect the rest of the page */
body.modal-open[b-9m19hvs6nq] {
    overflow: hidden; /* Disable scrolling when modal is open */
}

.button-container[b-9m19hvs6nq] {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button */
    width: 100%; /* Optional: Make container full width */
    margin-top: 20px; /* Optional: Add some spacing at the top */
}

.centered-button[b-9m19hvs6nq] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #468fa2; /* Optional: Button color */
    color: white;
    border: none;
    border-radius: 10px; /* Rounded corners for a modern look */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

    .centered-button:hover[b-9m19hvs6nq] {
        background-color: #267724; /* Darker shade on hover */
    }

    .centered-button:disabled[b-9m19hvs6nq] {
        background-color: #d3d3d3; /* Grey background for disabled state */
        color: #a9a9a9; /* Light grey text for disabled state */
        cursor: not-allowed; /* Change cursor to indicate disabled state */
    }

/* Center the h3 and give it some visual appeal */
h3[b-9m19hvs6nq] {
    text-align: center; /* Center the text */
    font-size: 1.0rem; /* Increase font size */
    font-weight: bold; /* Make the text bold */
    color: #2c3e50; /* Darker color for contrast */
    background-color: #d3d3d3; /* Light background for contrast */
    padding: 5px 5px; /* Add padding to make it stand out */
    border-radius: 8px; /* Smooth corners */
    border: 1px solid green; /* Green border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 5px auto; /* Margin for spacing */
    max-width: 100%; /* Limit width */
}

/* Center the h4 and give it some visual appeal */
h4[b-9m19hvs6nq] {
    text-align: center; /* Center the text */
    font-size: 1.0rem; /* Increase font size */
    font-weight: bold; /* Make the text bold */
    color: #2c3e50; /* Darker color for contrast */
    background-color: #f4f4f9; /* Light background for contrast */
    padding: 5px 0px; /* Add padding to make it stand out */
    border-radius: 8px; /* Smooth corners */
    border: 1px solid green; /* Green border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 5px auto; /* Margin for spacing */
    max-width: 80%; /* Limit width */
}

.instructions-section[b-9m19hvs6nq] {
    padding-bottom: 20px;
}

/* Footer Section for the Close Button */
.fixed-footer[b-9m19hvs6nq] {
    position: sticky;
    bottom: 0;
    background-color: #f5f5f5;
    padding: 10px;
    border-top: 1px solid #ccc;
    text-align: center;
}
/* /Pages/WithdrawJgCoins.razor.rz.scp.css */
.modal-scroll[b-fhg6u4v8xf]::-webkit-scrollbar {
    width: 6px;
}

.modal-scroll[b-fhg6u4v8xf]::-webkit-scrollbar-thumb {
    background-color: #c3e956;
    border-radius: 4px;
}

.modal-scroll[b-fhg6u4v8xf]::-webkit-scrollbar-track {
    background: #e0f2e9;
}

.modal-scroll[b-fhg6u4v8xf]::-webkit-scrollbar-thumb:hover {
    background-color: #c3e957;
}