* {
    user-select: none; /* Prevents selection */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE/Edge */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#components-reconnect-modal,
.components-reconnect,
.components-reconnect-show,
.components-reconnect-failed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

div.latpay-flex {
    padding-bottom: 0% !important;
}


div.deposit-page-container div.latpay-elements-field > input {
    padding: 10px !important;
    background: rgba(0, 29, 38, 0.6) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    width: 100%;
}

div.deposit-page-container div.latpay-elements-field > label {
    color: rgba(255, 255, 255, 0.6) !important;
}

div.deposit-page-container div.latpay-elements-field > input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

div.deposit-page-container div.latpay-elements-field > input:focus {
    outline: none !important;
    border-color: rgba(143, 210, 60, 0.6) !important;
}


div.deposit-page-container .form-group {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-right: 5px;
}

.loading-placeholder-main {
    background-color: #001d25;
    height: 50vh;
    margin-top: 12vh;
    margin-left: 14vw;
    margin-right: 22vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.betslip-warning-container {
    all: unset;
    margin-top: .5vw;
    height: 4vh;
    background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;
    font-size: 10px;
}

.betslip-warning-text-content {
    display: flex;
    align-items: center;
}

.betslip-warning-red-circle {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .5vw;
    margin-right: .5vw;
    font-size: 8px; /* Ensures the ❌ fits properly */
    color: white;
}

.betslip-warning-bold-text {
    font-weight: bold;
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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





.odds-up {
    background-color: rgba(255, 0, 0, 0.2) !important;
    color: white !important;
}

.odds-down {
    background-color: rgba(144, 211, 61, 0.2) !important;
    color: white !important;
}

/* Container styles */
.each-way-container {
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 5.5vh;
    background-color: #394a51;
    padding: .7vh .6vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: .5vw;
}

/* Header with checkbox and label */
.each-way-header {
    display: flex;
    align-items: center;
    gap: 0.5vw;
}

/* Checkbox styles */
.each-way-checkbox {
    appearance: none;
    width: 1.8vh;
    height: 1.8vh;
    border: 1px solid grey;
    background-color: grey;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 0;
}

    /* Checkbox checked state */
    .each-way-checkbox:checked {
        background-color: #90d33d;
    }

        .each-way-checkbox:checked::after {
            content: "✔";
            color: white;
            font-size: 0.8vh;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


/* Label for checkbox */
.each-way-label {
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
    color: white;
}

/* Description text */
.each-way-description {
    font-size: 10px;
    font-family: 'Nunito', sans-serif;
    color: white;
}



h1 {
    border: none;
    outline: none;
}

.nav-link {
    all: unset;
    padding: 0px;
}

    .nav-link:hover {
        all: unset;
        cursor: pointer;
    }

    .nav-link:visited {
        all: unset;
    }

/* For Webkit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

/* For Firefox */
* {
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* For older versions of IE */
}

/* Hide arrows in number input for Chrome, Safari, Edge, and Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in number input for Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}


body {
    font-family: 'Poppins', sans-serif;
    margin: 0px;
    background-color: #001d26;
}

.stake-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0.5% 0;
}

.stake-container-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5%;
}

.stake-container-left-text {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: white;
}

.stake-container-right-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.footerComponent {
    bottom: 0;
    height: 60vh;
    background-color: #001d26;
    margin-left: 14vw;
    margin-right: 22vw;
    overflow: hidden;
}

.footerLogo {
    margin-top: 6vh;
    height: 6vh;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.footerLogosRow {
    display: flex;
    justify-content: center; /* Centers logos in the row */
    gap: 3vw; /* Space between logos */
    margin-top: 4vh; /* Margin between rows */
}

.footerText {
    margin-top: 4vh;
    font-family: 'Nunito', sans-serif; /* Nunito font */
    font-size: 12px;
    color: #ffffff; /* White text */
    line-height: 1.5; /* Improve readability */
    width: 80%; /* Text width for readability */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Individual Logo Styles (if customization is needed) */
.plus18 {
    height: 4vh;
}

.gamblingCare {
    height: 4vh;
}

.gambleAware {
    height: 3vh;
    margin-top: .5vh;
}

.visa {
    margin-top: .5vh;
    height: 3vh;
}

.paypal {
    height: 4vh;
}

.mastercard {
    height: 5vh;
}

.singles-container {
    display: inline-block; /* Wraps content and underline neatly */
    text-align: center; /* Aligns everything neatly */
}

.singles-text {
    color: white; /* Text color */
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.singles-underline {
    width: -webkit-fill-available;
    height: 2px;
    background-color: #90d33d; /* Line color */
    margin: 2px auto 0; /* Small spacing between text and line */
}

.scroll-wrapper {
    height: 78%;
    overflow-y: scroll; /* Enable vertical scrolling */
    -ms-overflow-style: none; /* Hide scrollbars in Internet Explorer and Edge */
    scrollbar-width: none; /* Hide scrollbars in Firefox */
    padding-top: 1%;
}

    /* Hide scrollbars in Chrome, Safari, and WebKit browsers */
    .scroll-wrapper::-webkit-scrollbar {
        display: none;
    }
/* General Container Styling */
#bestlip-multiples-container {
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: .5vh;
    padding-top: 1vh;
    color: white;
    font-family: 'Poppins', sans-serif;
}

/* Header Styling */
#bestlip-multiples-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1vh;
    padding-left: 1vw;
    padding-right: 1vw;
}

#bestlip-multiples-arrow {
    width: 16px;
    height: 16px;
    margin-right: .5vw;
    transition: transform 0.3s ease;
}

#bestlip-multiples-header-text {
    flex-grow: 1;
    font-size: 12px;
    color: white;
    font-family: 'Poppins', sans-serif;
}

#bestlip-multiples-header-odds {
    font-size: 12px;
    color: white;
    font-family: 'Poppins', sans-serif;
}

/* Expanded/Collapsed Arrow Styling */
#bestlip-multiples-header.bestlip-multiples-2-expanded .bestlip-multiples-2-arrow {
    transform: rotate(180deg);
}

/* Expandable Content Styling */
#bestlip-multiples-content {
    display: block;
    padding-left: .5vw;
    padding-right: .5vw;
    padding-top: .5vh;
    transition: all 0.3s ease-in-out;
    padding-bottom: .5vh
}

#bestlip-multiples-row {
    display: flex;
    margin: 1vh 0;
}

#bestlip-multiples-input {
    width: 4vw;
    height: 5.5vh;
    border: 0.5px solid #ccc;
    background-color: white;
    color: rgba(0, 29, 38, 0.8);
    text-align: center;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
}

#bestlip-multiples-returns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: white;
    margin-left: auto;
}

    #bestlip-multiples-returns div {
        margin-top: 0.2vh;
    }

#bestlip-multiples-bet-info {
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    color: white;
}


.main-racing-mobile-only {
    display: none;
}








.racing-panel-races-container {
    display: flex;
    margin-top: 0vh;
    margin-bottom: 0vh;
    width: 100%;
}

.racing-panel-races {
    background-color: #394a51;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-right: 0.5%;
}

    .racing-panel-races:last-child {
        margin-right: 0;
    }


.racing-container-scrollable-view {
    display: flex; /* Arrange children in a row */
    overflow-x: scroll; /* Enable horizontal scrolling */
    -ms-overflow-style: none; /* Hides scrollbar on IE and Edge */
    scrollbar-width: none; /* Hides scrollbar on Firefox */
    width: 63%;
    margin-left: 14.5%;
}

.racing-panel-races-header {
    display: flex; /* Flexbox for header layout */
    align-items: center; /* Center items vertically */
    padding: 10px; /* Padding for header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Faint white bottom border */
}

    .racing-panel-races-header img {
        width: 1.5vw; /* Width of the flag icon */
    }

    .racing-panel-races-header .racing-panel-races-race-time {
        margin-left: .6vw; /* Left margin for race time */
        color: white; /* Text color */
        font-family: 'Poppins', sans-serif; /* Font for race time */
        font-size: 12px; /* Font size */
        font-weight: bold; /* Bold font */
        display: flex; /* Flexbox for time and odds alignment */
        align-items: center; /* Center items vertically */
    }

.racing-panel-races-odds-label {
    color: white; /* Text color */
    font-family: 'Poppins', sans-serif; /* Font for odds */
    font-size: 10px; /* Font size */
    font-weight: bold; /* Bold font */
    margin-left: 1vw; /* Margin for spacing */
}

.racing-panel-races-odds-info {
    color: white; /* Text color */
    font-family: 'Nunito', sans-serif; /* Font for odds */
    font-size: 10px; /* Font size */
    margin-left: 5px; /* Margin for spacing */
}

.racing-panel-races-row {
    display: flex; /* Flexbox for row layout */
    align-items: center; /* Center items vertically */
    padding: 10px 0; /* Padding for rows */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional divider line */
}

.racing-panel-races-row-number {
    color: white; /* Text color */
    font-family: 'Poppins', sans-serif; /* Font for row number */
    font-size: 12px; /* Font size */
    font-weight: bold; /* Bold font */
    margin-left: 2vw;
}

.racing-panel-races-row-left {
    margin-left: 1vw; /* Left margin */
    flex-grow: 1; /* Allow this section to take available space */
}

.racing-panel-races-horse-name {
    color: white; /* Text color */
    font-family: 'Poppins', sans-serif; /* Font for horse name */
    font-size: 12px; /* Font size */
    font-weight: bold; /* Bold font */
}

.racing-panel-races-jockey-name {
    color: white; /* Text color */
    font-family: 'Nunito', sans-serif; /* Font for jockey name */
    font-size: 12px; /* Font size */
}

.racing-panel-races-odds-box {
    background-color: #001d26; /* Background color */
    color: #90d33d; /* Text color */
    padding: 1vw; /* Padding */
    font-family: 'Nunito', sans-serif; /* Font for odds */
    font-size: 12px; /* Font size */
    display: flex; /* Center content */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border-radius: 4px; /* Rounded corners */
    margin-right: 1vw; /* Right margin */
    width: 50px; /* Fixed width for odds box */
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 1s ease-in-out;
}

    .racing-panel-races-odds-box:hover {
        border: 1px solid rgba(255, 255, 255, 0.5); /* Faint white border */
        color: #90d33d;
    }

    .racing-panel-races-odds-box.selected {
        background-color: rgba(143, 210, 60, 0.6) !important;
        color: white;
    }

    .racing-panel-races-odds-box:hover.selected {
        background-color: rgba(143, 210, 60, 0.6) !important;
        color: white;
    }


.racing-panel-races-footer {
    height: 4vh; /* Footer height */
    padding-top: 2%;
    display: flex; /* Flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    color: white; /* Text color */
    font-family: 'Nunito', sans-serif; /* Font for footer */
    font-size: 12px; /* Font size */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Optional top border */
    cursor: pointer;
}

.next-races-title {
    align-items: center;
    margin-top: 2.5vh;
    margin-left: 15vw;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: white;
    margin-bottom: 0vh;
}

.racing-container {
    width: 63%;
    height: auto;
    padding-top: .5%;
    display: flex;
    flex-direction: column;
    background-color: #001d25;
    margin-left: 14.5%;
    padding-bottom: .5%;
}


.racing-container-scrollable-view::-webkit-scrollbar {
    display: none; /* Hides scrollbar on WebKit browsers */
}

.racing-panel {
    all: unset;
    background-color: #394a51; /* Unselected background color */
    color: white; /* Unselected text color */
    text-align: center; /* Center the text */
    border-radius: 6px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
    margin-right: 1%;
    min-width: 20%;
    padding: 1%;
}

    .racing-panel.selected {
        background-color: #90d33d; /* Selected background color */
        color: #001d26; /* Selected text color */
    }

.racing-panel-section {
    padding: 1vh 0vw; /* 4vw top and bottom, 5vw left and right */
    background-color: #394a51; /* Unselected background color */
    color: white; /* Unselected text color */
    text-align: center; /* Center the text */
    border-radius: 6px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
    margin-right: 1%;
    min-width: 32.66%;
}

    .racing-panel-section:last-child {
        margin-right: 0;
    }

.time {
    font-size: 12px; /* Larger font size for time */
}

.location {
    font-size: 12px; /* Smaller font size for location */
}


a {
    text-decoration: none; /* Remove the underline */
    color: inherit; /* Inherit the text color */
    cursor: pointer; /* Show the pointer cursor */
}

    a:hover, a:active {
        color: inherit; /* No change on hover or active state */
        text-decoration: none; /* Keep no underline on hover */
    }


body.no-scroll {
    overflow: hidden; /* Prevent body scrolling */
}

.full-link {
    display: block; /* Makes the link take the full width and height of the td */
    color: inherit; /* Inherit the text color from the parent td */
    text-decoration: none; /* Remove the default underline */
    padding: 10px; /* Optional: add padding for better click area */
    height: 100%; /* Make sure it fills the height of the td */
    width: 100%; /* Make sure it fills the width of the td */
}

/* Desktop Menu Styles */
.desktop-menu {
    width: 14vw;
    position: fixed;
    top: 12vh;
    left: 0;
    background-color: #001d25; /* Or any preferred color */
    color: white;
    padding-left: 1vw;
    padding-bottom: 14vh;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    height: 100%; /* Make it take full height of the screen */
    overflow-y: auto; /* Enable vertical scrolling */
}

    .desktop-menu::-webkit-scrollbar {
        width: 0; /* Remove scrollbar width */
        background: transparent; /* Optional: make background transparent */
    }


.menu-heading {
    color: #90d33d; /* Heading color */
    padding-left: 1rem;
    padding-bottom: 3vh;
    font-size: 16px;
    padding-top: 3vh;
}

.sports-list {
    list-style-type: none;
    margin: 0;
}


ul {
    padding-left: 0px;
}






.football-container {
    background-color: #394a51;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 1vw;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.arrow {
    margin-left: 1vw;
    width: 10px;
    height: 10px;
}

.sports-partial-container {
    background-color: #001d26;
    width: 62%;
    margin-left: 15%;
}








/* Table container styling */
.football-table {
    border-collapse: collapse; /* Remove double borders */
    table-layout: fixed;
    width: 100%;
}

/* Table Header styling */
.football-header {
    border: 0.5px solid rgba(255, 255, 255, 0.2); /* Faint border around header */
}
/* Table Header styling */
.football-header-main {
    border: 0px;
}

.football-header th {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    padding: .5vw;
    text-align: left; /* Left align header text */
}

.football-header-main th {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    padding-bottom: 1vw;
    padding-left: .5vw;
    text-align: left; /* Left align header text */
}

/* Specific styles for header */
.football-header th:first-child {
    color: #90d33d; /* UEFA Champions League color */
}

.football-header th:not(:first-child) {
    color: white; /* Other header values in white */
    text-align: center;
}

/* Table Row styling */
.football-row td {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: white; /* Default color for text */
    padding: 8px;
    text-align: left; /* Left align first column text */
}


/* Specific styles for match details and odds */
.match-details {
    color: white; /* Match details in white */
    font-size: 12px;
    font-family: 'Nunito';
}

.football-box {
    background-color: #001d26; /* Background color for boxes */
    color: #90d33d; /* Text color for odds */
    padding: 0; /* Remove padding, will use flexbox */
    height: 6vh;
    width: 90%; /* Equal width for 5 boxes with 8px space in between */
    display: flex; /* Enable flexbox */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    border-radius: 3px; /* Rounded corners */
    font-size: 12px;
    font-family: 'Nunito';
    margin: 5%; /* Remove margin for equal width */
    cursor: pointer;
    border: 1px solid transparent;
}

    .football-box:hover {
        border: 1px solid rgba(255, 255, 255, 0.5); /* Faint white border */
        color: #90d33d;
    }

    .football-box.selected {
        background-color: rgba(143, 210, 60, 0.6) !important;
        color: white;
    }

    .football-box:hover.selected {
        background-color: rgba(143, 210, 60, 0.6) !important;
        color: white;
    }

/* Styles for lines in odds boxes */
.odds-label {
    color: white; /* O 3.5 and U 3.5 in white */
}

/* Score styling */
.football-score {
    text-align: right; /* Right align last row in second column */
    padding: 8px; /* Add padding for the last column */
    color: #90d33d; /* Score color */
    font-size: 12px;
    font-family: 'Nunito';
}

.football-arrow {
    width: 12px;
    height: 12px;
    margin-left: 5px; /* Space between text and arrow */
    vertical-align: middle; /* Align arrow with text */
}

.odds-content {
    display: flex; /* Enable flexbox for this container */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Center text horizontally */
    height: 100%; /* Fill the height of the parent .football-box */
    line-height: .8;
}

.last-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Faint white border */
}

    .last-row td {
        border-bottom: none; /* Remove any default borders from cells */
        padding-left: 0.8vw;
    }






.sport-item {
    display: flex;
    align-items: center;
    margin: 0.5rem 0; /* Space between items */
}

.menu-sport-icon {
    width: 1.5vw; /* Adjust icon size */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between icon and name */
}

.mobile-menu::-webkit-scrollbar {
    width: 0; /* Remove scrollbar width */
    background: transparent; /* Optional: make background transparent */
}

.mobile-menu .close-menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Show mobile menu when it's open */
#mobile-menu.active {
    display: block; /* Show menu when active */
}








.modal-body {
    /* Ensure all modal-body elements are hidden by default */
    display: none;
    gap: 1%;
    background-color: #394a51;
}

    .modal-body.visible {
        display: flex;
        padding: 6%;
        padding-bottom: 8%;
    }

    .modal-body.hidden {
        display: none; /* Elements with 'hidden' class are hidden */
    }


/* Registration Modal Content Styling */
.registration-modal, .login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000; /* Above everything */
    justify-content: center;
    overflow-y: auto;
}

.modal-content {
    background-color: #394a51;
    border-radius: 8px;
    width: 33%;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}


/* Step Indicator Styling */
.step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.step {
    display: flex;
    align-items: center;
    margin-right: 10%; /* Margin between steps */
}

    .step:last-child {
        margin-right: 0; /* No margin on the last step */
    }

    .step .circle {
        border: 2px solid #8fd23c; /* Default border color */
        color: #8fd23c; /* Default text color */
        border-radius: 50%;
        padding: 10px;
        width: 30px; /* Increased for better visibility */
        height: 30px; /* Increased for better visibility */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease; /* Smooth transition for state changes */
    }

        .step .circle.active {
            background-color: #8fd23c; /* Active background color */
            color: white; /* Active text color */
        }

        .step .circle.inactive {
            border-color: #ccc; /* Inactive border color */
            color: #ccc; /* Inactive text color */
        }

    .step span {
        font-family: 'Poppins', sans-serif;
        color: #8fd23c; /* Default text color */
        font-size: 14px;
        font-weight: bold;
        transition: color 0.3s ease; /* Smooth transition for text color */
        margin-left: 1vh;
    }

        .step span.inactive {
            color: #ccc; /* Inactive text color */
        }

.checkbox-group label {
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}


/* Title Options */
.title-options {
    display: flex;
}

.title-option {
    width: 6vw;
    padding: 12px;
    text-align: center;
    border: 1px solid white;
    background-color: #394a51;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .title-option:hover, .title-option.selected {
        background-color: white;
        color: #001d26;
    }

/* Name Inputs Styling */
.name-inputs {
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

.input-container input {
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
}

label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: white;
}

input {
    padding: 0.8em;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #001d26;
}

/* Currency Input Styling */
.currency-input {
    display: flex;
    margin-bottom: 20px;
}

#currency {
    padding: 0.5em;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #001d26;
    width: 100%;
    height: 6vh; /* Match the height of text inputs */
}

/* Mobile Input Styling */
.mobile-input {
    display: flex;
    margin-bottom: 20px;
}

#phone-prefix {
    padding: 0.5em;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #001d26;
    width: 30%;
    height: 6vh;
    margin-right: 8px;
}

#mobile-number {
    padding: 0.5em;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #001d26;
    width: 70%;
}

/* Continue Button */
.btn-modal {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.6em 0em;
    background-color: #8fd23c;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
}

.error-btn-modal {
    opacity: .8;
    background-color: red;
}

/* Close Modal */
.close-modal {
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
}



.hero-container {
    display: flex;
    margin-top: 12vh;
    width: 64vw; /* 75% of the viewport width */
    height: 40vh; /* 30% of the viewport height */
    background: linear-gradient(to top right, white, #90d33d);
    overflow: hidden;
    margin-left: auto;
    margin-right: 22vw;
}

.hero-left-section {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    width: 50%; /* Adjust width as needed */
}

.hero-title {
    font-size: 34px; /* You can adjust the size as needed */
    margin-left: auto;
    margin-right: auto;
}

.hero-bonus {
    margin: 10px 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
}

.bold {
    font-weight: bold; /* Poppins Bold */
}

.hero-register-button {
    background-color: #90d33d;
    color: white;
    border: none;
    padding: 15px 30px; /* Double the size: padding is now 20px top/bottom and 40px left/right */
    cursor: pointer;
    border-radius: 25px; /* Increased rounded corners */
    font-size: 16px; /* Increased font size */
    font-weight: bold; /* Ensure text is bold */
    margin-top: 15px; /* Space above button */
    transition: background-color 0.3s;
    width: 35vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vh;
    justify-content: center;
    display: flex;
}

    .hero-register-button:hover {
        background-color: #78c732; /* Darken on hover */
    }

.hero-right-section {
    display: flex;
    align-items: end;
    margin-left: auto;
}

.hero-image {
    height: 35vh; /* Fill the height of the container */
    width: auto; /* Maintain aspect ratio */
}


/* Container for the sports section */
.sports-container {
    width: 62%;
    padding-top: 1%;
    display: flex;
    flex-direction: column;
    background-color: #001d25;
    margin-left: 15%;
}

/* Title row container */
.title-row {
    display: flex;
    gap: 2vw;
    align-items: center;
    margin-top: 1%;
    margin-left: 15vw;
    margin-bottom: 1%;
}

/* Title container */
.title-container {
    position: relative;
    display: inline-block; /* Keep inline flow and ensure underline is tied to title length */
    cursor: pointer;
    outline: none; /* Remove the default focus outline */
}

/* Title styles */
.title {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #fff;
    margin: 0;
}

/* Underline beneath the title */
.title-underline {
    height: 2px;
    background-color: #90d33d;
    width: 0; /* Initially hide the underline */
    transition: width 0.3s ease; /* Smooth underline appearance */
    margin-top: .5vh;
}


/* Selected state: underline stays visible */
.title-container.selected .title-underline {
    width: 100%; /* Keep the underline visible for selected items */
}

/* Scrollable view for sports panels */
.scrollable-view {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* Hide scrollbar in IE */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

    .scrollable-view::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Webkit-based browsers */
    }

/* Each sport panel */
.sport-panel {
    all: unset;
    background-color: #394a51;
    color: white;
    margin-right: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    padding: 1.2%;
    border-radius: 4px;
}

/* Small rectangle in the top corner with the number */
.sport-panel-header {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #001d26;
    color: white;
    padding: 2px 5px;
    font-size: 8px;
}

/* Content of each sport panel (icon and name) */
.sport-panel-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Sport icon */
.sport-icon {
    height: 4vh;
    margin-right: 5px;
    transition: opacity 0.3s;
}

/* Sport name */
.sport-name {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: white;
    transition: color 0.3s;
    margin-right: auto;
    margin-left: auto;
}


/* When the panel is selected */
.sport-panel.selected {
    background-color: #90d33d;
    color: #001d26;
}

/* When the panel is selected, change the text color */
.sport-panel.selected .sport-name {
    color: #001d26;
}



/* Header Styling */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 12vh;
    background: linear-gradient(to top right, #8dde2a, #007166);
    display: flex;
    align-items: center;
    padding: 0 2%;
    z-index: 1000;
}

/* Hamburger Menu Styling */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 2000;
}

    .hamburger-menu .bar {
        width: 25px;
        height: 3px;
        background-color: white;
    }

/* Logo Styling */
.logo {
    height: 8vh;
    margin: 1vh 0;
}

/* Header Buttons Styling */
.header-buttons {
    display: flex;
    gap: 1em;
    margin-left: auto;
}

/* Styling for Logged-In Buttons */
.logged-in-buttons {
    display: flex;
    align-items: center;
    gap: 2vw;
    margin-left: auto;
}

.logged-in-buttons .icon1 {
    height: 44px;
}

.logged-in-buttons .icon2 {
    height: 40px;
}

.my-bets-link {
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    text-decoration: none;
}

.logged-in-buttons .divider {
    border-left: .5px solid white;
    height: 50px;
}

.logged-in-buttons .balance {
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    text-decoration: none;
    padding: 1vw;
}


.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.6em 1.5em;
    border: none;
    cursor: pointer;
    color: white;
}

    .btn:hover {
        color: #8fd23c;
    }

.login-btn {
    background: transparent;
}

    .login-btn:hover {
        color: #001d26;
    }

.join-btn::before {
    content: 'JOIN NOW' !important;
}

.join-btn::after {
    content: '';
}

.join-btn {
    background-color: #001d26;
    border: none;
}



/* Mobile Menu Styling */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100vh;
    background-color: #001d26;
    z-index: 9999;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    padding-bottom: 4vh;
    color: white;
    overflow-y: auto;
}

.mobile-menu-wrapper {
    width: 80%;
    height: 91vh;
    overflow-y: auto;
    padding-bottom: 8vh;
}
/* Open Mobile Menu */
.mobile-menu.open {
    display: block;
    transform: translateX(0);
}

/* Close Menu (X icon) and Aligned Logo */
.close-menu-container {
    position: relative;
    width: 100%;
    height: 9vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.close-menu {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.mobile-logo {
    height: 4vh;
    margin-left: 31%;
}
/* Login Modal Styling */
.login-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 2000; /* Above everything */
    justify-content: center;
    align-items: center;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h2 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        margin: 0;
    }

/* Close Modal Icon */
.close-modal {
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Betting Panel Styles */
.betting-panel {
    position: fixed; /* Position it relative to the header */
    right: 0; /* Align to the right of the screen */
    width: 22vw; /* Panel width */
    height: calc(100% - 12%); /* Fill the rest of the height */
    background-color: #394a51;
    padding: 1%; /* Padding for the panel */
    color: white; /* Text color */
    overflow: hidden;
}
/* Specific styles for desktop only */
@media (min-width: 1200px) {
    .betting-panel {
        top: 12%; /* Only apply top for desktop */
    }
}

/* Panel Header */
.panel-header {
    display: flex;
    align-items: center;
    background-color: rgba(0, 29, 38, 0.8); /* 80% opacity */
    padding: 15px 20px; /* Padding for header */
    pointer-events: none;
}

.betting-panel-footer {
    position: absolute;
    margin-bottom: 1.5vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.betting-panel-square {
    height: 7vh;
    width: 7vh;
    background-color: #90d33d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.betting-panel-square img {
    max-width: 40%;
    max-height: 40%;
}

.betting-panel-login-button {
    height: 7vh;
    background-color: rgba(0, 29, 38, 0.8);
    color: #ffffff;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2vw;
    border: none;
    cursor: pointer;
    width: 16.5vw;
}

.panel-header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    margin: 0;
    font-size: 15px;
}

.bet-count {
    background-color: red; /* Red circle */
    border-radius: 50%; /* Make it round */
    color: white;
    width: 20px; /* Width of the circle */
    height: 20px; /* Height of the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-left: 5px;
    font-size: 10px;
}

/* Betslip Empty Section */
.betslipEmpty {
    text-align: center;
    margin: 20% 0; /* Margin top and bottom */
}

.betslip-icon {
    width: 12vh; /* Icon size */
}

.betslipEmpty p {
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-top: 2vh;
}

/* Divider */
.divider {
    height: 0.5px; /* Divider height */
    background-color: #ccc; /* Divider color */
    border: none; /* No border */
}

/* Quick Links Text */
.quick-links {
    font-family: 'Poppins', sans-serif;
    color: white;
    text-align: left; /* Center text */
    margin: 10% 5%; /* Margin for spacing */
    font-size: 20px;
}

/* Button Container */
.button-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: left; /* Center buttons */
}

/* Button Styles */
.quick-link-btn {
    background-color: rgba(143, 210, 60, 0.6); /* 60% opacity */
    color: white; /* Text color */
    font-family: 'Nunito', sans-serif;
    font-weight: bold; /* Bold text */
    width: 90%; /* Button width */
    padding: 12px; /* Padding for buttons */
    margin: 1%; /* Margin for spacing (2% vertical spacing between buttons) */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
    font-size: 12px;
    text-align: left;
    padding-left: 20px;
}

    .quick-link-btn:hover {
        background-color: rgba(143, 210, 60, 0.8); /* Darker on hover */
    }

.arrow-up,
.arrow-down {
    display: none; /* Hide by default */
}

/* Betting Panel Bet Container */
.betting-panel-bet {
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: .5vh;
    padding: 1vh .5vw;
    color: white;
    font-family: 'Poppins', sans-serif;
}

/* First Line Row */
.betting-panel-bet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1vh;
}

/* Checkbox Styling */
.betting-panel-bet-checkbox {
    appearance: none; /* Remove default checkbox style */
    width: 2vh;
    height: 2vh;
    border: 1px solid grey;
    background-color: grey;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.betting-panel-bet-checkbox:checked {
    background-color: #90d33d; /* Green background when checked */
}

.betting-panel-bet-checkbox:checked::after {
    content: "✔";
    color: white;
    font-size: 0.8vh;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Team Name Text */
.betting-panel-bet-team {
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: white;
    margin-left: .5vw;
    flex: 1;
}

/* Odds Section (Right Aligned) */
.betting-panel-bet-odds {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    font-size: 12px;
}

.betting-panel-bet-close {
    all: unset;
    font-size: 16px;
    cursor: pointer;
}

/* Match Details Text */
.betting-panel-bet-details {
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    color: white;
    margin-bottom: 1vh;
}

/* Bottom Row: Input and Returns */
.betting-panel-bet-bottom {
    display: flex;
    align-items: center;
}

/* Input Field (Square) */
.betting-panel-bet-input {
    width: 4vw;
    height: 5.5vh;
    border: .5px solid #ccc; /* Darker Grey Border */
    background-color: white;
    color: rgba(0, 29, 38, 0.8);
    text-align: center;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
}

/* Returns Section */
.betting-panel-bet-returns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: white;
    margin-left: auto;
}

.betting-panel-bet-returns div {
    margin-top: 0.2vh;
}



/* Login Modal Styling */
.login-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 2000; /* Above everything */
    justify-content: center;
    align-items: center;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    color: white; /* Log In text color */
    text-align: center; /* Centered Log In text */
    font-size: 24px;
}

/* Close Modal Icon */
.close-modal {
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

/* Modal Body Styling */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1em; /* Space between inputs and buttons */
}

label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px; /* Regular text size */
    color: white; /* Label text color */
}

input {
    padding: .5em;
    font-size: 1rem;
    border: .5px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #001d26;
}

/* Button Styling */
.btn-modal {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.6em .5em;
    border: none;
    cursor: pointer;
}

.login-btn-modal {
    background-color: #8fd23c; /* Login button background color */
    color: white; /* Text color */
    margin-top: 10px;
}

.join-btn-modal {
    background-color: #001d26; /* Join button background color */
    border: .5px solid #ccc;
    color: white;
}

/* Divider */
.or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em 0;
}

.or-divider hr {
    flex: 1; /* Stretch line */
    height: .5px;
    background-color: #ccc;
}

.or-divider span {
    margin: 0 1em; /* Space around OR text */
    font-size: 12px; /* Regular text size */
    color: white; /* OR text color */
    text-transform: lowercase; /* Lowercase OR text */
}

/* Modal Footer */
.modal-footer {
    text-align: center; /* Center text in footer */
    margin-top: 6% /* Space above footer */
}

.help-text {
    color: #ccc;
    font-size: 12px; /* Regular text size */
    margin-left: auto;
    margin-right: auto;
}

.contact-link {
    color: white;
    text-decoration: underline;
}



/* Responsive Styles */



/* Mobile Styles */

@media (max-width: 600px) {

    .modal-content {
        width: 100%;
        padding: 4%;
        z-index: 2;
    }

    .racing-panel-section {
        margin-right: 2%;
        min-width: 96%;
        margin-left: 2%;
    }

    .footerComponent {
        height: 80vh;
        margin-left: 14vw;
        margin-right: 14vw;
        margin-bottom: 7vh;
    }

    .footerText {
        width: 100%;
    }

    .footerLogo {
        height: 5vh;
        margin-top: 7vh;
    }

    .plus18 {
        height: 2vh;
    }

    .gamblingCare {
        height: 2vh;
    }

    .gambleAware {
        height: 1vh;
        margin-top: .5vh;
    }

    .visa {
        margin-top: .5vh;
        height: 2vh;
    }

    .paypal {
        height: 3vh;
    }

    .mastercard {
        height: 3vh;
    }

    .loading-placeholder-main {
        height: 50vh;
        margin-top: 20vh;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 18vh;
    }

    .betslip-warning-container {
        margin-top: 3vw;
    }

    .betslip-warning-red-circle {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .each-way-container {
        height: 7vh;
        margin-left: 2.8vw;
        padding: 1.1vh 2vw;
    }

    .each-way-label {
        margin-left: 1vw;
    }

    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        padding-bottom: 10%;
    }

    .sports-list {
        margin-left: 4vw;
    }

    .menu-sport-icon {
        width: 6vw;
    }

    .racing-panel {
        min-width: 30%;
        padding: 2%;
        margin-right: 2%;
    }

    .football-box {
        font-size: 10px;
        margin-top: 20%;
    }

    .main-racing-mobile-only {
        display: block;
        font-size: 10px;
        font-family: 'Nunito';
        margin-right: 30px;
    }

        .main-racing-mobile-only p {
            padding: 0;
            margin: 0;
            float: left;
        }

    .racing-panel-section:last-child {
        all: unset;
        padding: 1vh 0vw;
        background-color: #394a51;
        color: white;
        text-align: center;
        border-radius: 6px;
        transition: background-color 0.3s, color 0.3s;
        margin-right: 2%;
        min-width: 96%;
        margin-left: 2%;
    }

    .modal-body.visible {
        padding-bottom: 8%;
    }

    .time {
        font-size: 10px;
    }

    .location {
        font-size: 10px;
    }

    .sports-container {
        padding: 1vh;
        height: auto;
        width: 100%;
        margin-left: 0;
    }

    .racing-container-scrollable-view {
        width: 100%;
        margin-left: 0;
    }

    .racing-panel-races-footer {
        font-size: 10px;
    }

    .racing-panel-races-odds-info {
        font-size: 10px;
    }

    .racing-panel-races-odds-box {
        padding: 3vw;
        font-size: 10px;
    }

        .racing-panel-races-odds-box.selected {
            background-color: rgba(143, 210, 60, 0.6) !important;
            color: white;
        }

        .racing-panel-races-odds-box:hover.selected {
            background-color: rgba(143, 210, 60, 0.6) !important;
            color: white;
        }

    .racing-panel-races-jockey-name {
        font-size: 10px;
    }

    .racing-panel-races-horse-name {
        font-size: 12px;
    }

    .racing-panel-races-row-number {
        margin-left: 5vw;
        margin-right: 5vw;
        font-size: 10px;
    }

    .racing-panel-races-header img {
        width: 5vw;
        font-size: 10px;
    }

    .racing-panel-races-header .racing-panel-races-race-time {
        margin-left: 2vw;
    }

    .racing-panel-races-odds-label {
        margin-left: auto;
    }

    .racing-panel-races-container {
        display: flex;
        margin-left: 0vw;
    }

    .next-races-title {
        margin-left: 2vw;
    }

    .racing-container {
        width: 100%;
        height: auto;
        padding: 2%;
        margin-left: 0vw;
        margin-right: 0vw;
    }

    .mobile-hide {
        display: none;
    }

    .title-row {
        margin-left: 2vw;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .football-header th {
        font-size: 10px;
    }

    .football-header-main th {
        font-size: 10px;
    }

    .football-row td {
        font-size: 10px;
    }

    .football-header th:first-child {
        padding-left: 10px;
    }

    .last-row td {
        padding-left: 10px;
    }

    a {
        font-size: 12px;
    }

    .football-arrow {
        width: 10px;
        height: 10px;
    }

    .match-details {
        font-size: 10px;
    }

    .sports-partial-container {
        width: 98vw;
        margin: 1vw;
        margin-bottom: 4vh;
    }

    .title {
        font-size: 12px;
    }

    .sport-icon {
        height: 3vh;
    }

    .sport-name {
        font-size: 14px;
    }

    .sport-panel {
        padding: 3%;
        margin-right: 2%;
    }

    .sport-panel-header {
        top: 0px;
        right: 0px;
        font-size: 6px;
    }

    .football-header-main th {
        font-size: 10px !important;
    }

    .hero-container {
        flex-direction: column;
        width: 100%;
        height: 86vh;
        Margin-top: 9%;
    }

    .hero-left-section {
        width: 96%;
        padding: 2%;
        margin-top: 4vh;
    }

    .hero-right-section {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-grow: 1;
    }

    .hero-image {
        height: auto;
        width: 100%;
    }

    .hero-title {
        font-size: 24px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25%;
    }

    .hero-register-button {
        margin-top: 8vh;
    }

    .step .circle {
        width: 10px;
        height: 10px;
        font-size: 12px;
    }

    .step span {
        font-size: 12px;
    }

    .logged-in-buttons .icon2 {
        height: 30px;
        width: 30px;
    }

    header {
        height: 9%;
        padding: 0 4%;
    }

    .title-option {
        width: 16vw;
    }

    .header-buttons {
        gap: 0em;
        margin-left: auto;
    }

    .logo {
        height: 4vh;
        margin-left: 22%;
    }

    .btn {
        font-size: 0.8rem;
        padding: 0.6em 0.6em;
    }

    .join-btn::before {
        content: 'JOIN' !important;
    }

    .hamburger-menu {
        display: flex;
        position: absolute;
        left: 4%;
        top: 50%;
        transform: translateY(-50%);
    }

    .betting-panel {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 9%;
        background-color: #394a51;
        padding: 1%;
        color: white;
        overflow: hidden;
        transition: height 0.3s ease;
        z-index: 9990;
    }

    #bestlip-multiples-input {
        width: 18vw;
        height: 7vh;
    }

    .betting-panel-bet-input {
        width: 18vw;
        height: 7vh;
    }

    #bestlip-multiples-content {
        padding: 3%;
    }

    .betting-panel-bet {
        padding: 3%;
    }

    #bestlip-multiples-header {
        padding-left: 3vw;
        padding-right: 3vw;
        gap: 1vw;
    }

    .scroll-wrapper {
        padding: 2%;
        height: 72%;
    }

    .betting-panel-bet-row {
        gap: 1vw;
    }

    .betting-panel-bet-odds {
        gap: 2vw;
    }

    .stake-container {
        padding: 3%;
        height: 8.5%;
    }

    .betting-panel-square {
        height: 8vh;
        width: 10vh;
    }

    .betting-panel-login-button {
        height: 8vh;
        width: 100%;
    }

    .betting-panel-footer {
        margin-left: 1%;
        margin-right: 0%;
        width: 96%;
        margin-bottom: 1%;
    }

    .betslipEmpty {
        display: none;
    }

    .betting-panel.expanded {
        height: 91%;
        margin-top: 9%;
        z-index: 1;
    }

        .betting-panel.expanded .betslipEmpty {
            display: block;
        }

    .panel-header {
        display: flex;
        align-items: center;
        height: 100%;
        pointer-events: all;
    }

        .panel-header.expanded {
            display: flex;
            align-items: center;
            height: 9%;
        }

        .panel-header h2 {
            font-family: 'Nunito', sans-serif;
            font-weight: bold;
            margin: 0;
            font-size: 15px;
        }

    .bet-count {
        background-color: red;
        border-radius: 50%;
        color: white;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        margin-left: 5px;
        font-size: 10px;
    }

    .arrow-up,
    .arrow-down {
        display: inline;
        color: white;
        font-size: 18px;
        cursor: pointer;
        margin-left: auto;
        height: 16px;
    }

    .betslipEmpty {
        text-align: center;
        margin: 18% 0;
    }

    .betslip-icon {
        width: 10vh;
    }

    .betslipEmpty p {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    .divider {
        height: 0.5px;
        background-color: #ccc;
        border: none;
    }

    .quick-links {
        font-family: 'Poppins', sans-serif;
        color: white;
        text-align: left;
        margin: 10% 5%;
        font-size: 15px;
    }

    .button-container {
        display: flex;
        flex-direction: column;
        align-items: left;
    }

    .quick-link-btn {
        background-color: rgba(143, 210, 60, 0.6);
        color: white;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        width: 90%;
        padding: 12px;
        margin: 1%;
        border: none;
        cursor: pointer;
        font-size: 12px;
        text-align: left;
        padding-left: 20px;
        margin-left: auto;
        margin-right: auto;
    }

        .quick-link-btn:hover {
            background-color: rgba(143, 210, 60, 0.8); /* Darker on hover */
        }
}



/* Small Tablet Styles */

@media screen and (min-width: 601px) and (max-width: 899px) {

    div.deposit-page-container div.latpay-elements-field > input {
        font-size: 16px !important;
        padding: 1em !important;
    }


    input {
        padding: 1em;
    }

    .btn-modal {
        padding: .5em;
        font-size: 1.5em;
    }

    label {
        font-size: 16px;
    }

    .help-text {
        font-size: 20px;
    }

    .modal-header h2 {
        font-size: 32px;
    }

    .close-menu {
        font-size: 3em;
        left: 7%;
    }

    .close-modal {
        font-size: 3rem;
    }

    .menu-heading {
        font-size: 24px;
        padding-left: 3rem;
    }

    #phone-prefix {
        height: 4.5vh;
    }

    .hamburger-menu .bar {
        width: 35px;
        height: 3px;
    }

    .betslipEmpty p {
        font-size: 24px;
        margin-top: 2vh;
    }

    .sport-item {
        margin: 1rem 0;
    }

    .or-divider span {
        font-size: 16px;
    }

    #currency {
        height: 4.5vh;
    }

    .panel-header {
        padding: 15px 40px;
    }

    .footerText {
        font-size: 18px;
    }

    .modal-content {
        width: 80%;
        padding: 4%;
        z-index: 2;
    }

    .racing-panel-section {
        margin-right: 1%;
        min-width: 70%;
        margin-left: 1%;
    }

    .footerComponent {
        height: 76vh;
        margin-left: 14vw;
        margin-right: 14vw;
        margin-bottom: 7vh;
    }

    .footerText {
        width: 100%;
    }

    .footerLogo {
        height: 4vh;
        margin-top: 6vh;
    }

    .plus18 {
        height: 2vh;
    }

    .gamblingCare {
        height: 2vh;
    }

    .gambleAware {
        height: 1vh;
        margin-top: .5vh;
    }

    .visa {
        margin-top: .5vh;
        height: 2vh;
    }

    .paypal {
        height: 3vh;
    }

    .mastercard {
        height: 3vh;
    }

    .loading-placeholder-main {
        height: 50vh;
        margin-top: 20vh;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 18vh;
    }

    .betslip-warning-container {
        margin-top: 3vw;
    }

    .betslip-warning-red-circle {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .each-way-container {
        height: 7vh;
        margin-left: 2.8vw;
        padding: 1.1vh 2vw;
    }

    .each-way-label {
        margin-left: 1vw;
        font-size: 16px;
    }

    .each-way-description {
        font-size: 16px;
    }

    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        padding-bottom: 10%;
        width: 55%;
    }

    .sports-list {
        margin-left: 4vw;
    }

    .menu-sport-icon {
        width: 3vw;
    }

    .racing-panel {
        min-width: 30%;
        padding: 2%;
        margin-right: 2%;
    }

    .football-box {
        font-size: 16px;
        margin-top: 20%;
    }

    .main-racing-mobile-only {
        display: block;
        font-size: 16px;
        font-family: 'Nunito';
        margin-right: 30px;
    }

        .main-racing-mobile-only p {
            padding: 0;
            margin: 0;
            float: left;
        }

    .racing-panel-section:last-child {
        all: unset;
        padding: 1vh 0vw;
        background-color: #394a51;
        color: white;
        text-align: center;
        border-radius: 6px;
        transition: background-color 0.3s, color 0.3s;
        margin-right: 2%;
        min-width: 70%;
        margin-left: 1%;
    }

    .racing-panel-section:first-child {
        all: unset;
        padding: 1vh 0vw;
        background-color: #394a51;
        color: white;
        text-align: center;
        border-radius: 6px;
        transition: background-color 0.3s, color 0.3s;
        margin-right: 1%;
        min-width: 70%;
        margin-left: 2%;
    }

    .modal-body.visible {
        padding-bottom: 8%;
    }

    .time {
        font-size: 16px;
    }

    .location {
        font-size: 16px;
    }

    .sports-container {
        padding: 1vh;
        height: auto;
        width: 100%;
        margin-left: 0;
    }

    .racing-container-scrollable-view {
        width: 100%;
        margin-left: 0;
    }

    .racing-panel-races-footer {
        font-size: 10px;
    }

    .racing-panel-races-odds-info {
        font-size: 10px;
    }

    .racing-panel-races-odds-box {
        padding: 3vw;
        font-size: 16px;
        width: 90px;
    }

        .racing-panel-races-odds-box.selected {
            background-color: rgba(143, 210, 60, 0.6) !important;
            color: white;
        }

        .racing-panel-races-odds-box:hover.selected {
            background-color: rgba(143, 210, 60, 0.6) !important;
            color: white;
        }

    .racing-panel-races-jockey-name {
        font-size: 16px;
    }

    .racing-panel-races-horse-name {
        font-size: 16px;
    }

    .racing-panel-races-row-number {
        margin-left: 5vw;
        margin-right: 5vw;
        font-size: 20px;
    }

    .racing-panel-races-header img {
        width: 5vw;
        font-size: 16px;
    }

    .racing-panel-races-header .racing-panel-races-race-time {
        margin-left: 2vw;
        font-size: 16px;
    }

    .racing-panel-races-odds-label {
        margin-left: auto;
        font-size: 16px;
    }

    .racing-panel-races-container {
        display: flex;
        margin-left: 0vw;
    }

    .next-races-title {
        margin-left: 2vw;
    }

    .racing-container {
        width: 100%;
        height: auto;
        padding: 2%;
        margin-left: 0vw;
        margin-right: 0vw;
    }

    .mobile-hide {
        display: none;
    }

    .title-row {
        margin-left: 2vw;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .football-header th {
        font-size: 16px;
    }

    .football-header-main th {
        font-size: 10px;
    }

    .football-row td {
        font-size: 10px;
    }

    .football-header th:first-child {
        padding-left: 10px;
    }

    .last-row td {
        padding-left: 10px;
    }

    a {
        font-size: 12px;
    }

    .football-arrow {
        width: 16px;
        height: 16px;
    }

    .match-details {
        font-size: 20px;
    }

    .sports-partial-container {
        width: 98vw;
        margin: 1vw;
        margin-bottom: 8vh;
    }

    .title {
        font-size: 20px;
    }

    .sport-icon {
        height: 3vh;
    }

    .sport-name {
        font-size: 20px;
    }

    .sport-panel {
        padding: 3%;
        margin-right: 2%;
    }

    .sport-panel-header {
        top: 0px;
        right: 0px;
        font-size: 6px;
    }

    .football-header-main th {
        font-size: 20px !important;
    }

    .hero-container {
        flex-direction: column;
        width: 100%;
        height: 86vh;
        Margin-top: 9%;
    }

    .hero-left-section {
        width: 96%;
        padding: 2%;
        margin-top: 10vh;
    }

    .hero-right-section {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-grow: 1;
    }

    .hero-image {
        height: auto;
        width: 100%;
        margin-top: 10vh;
        margin-right: 1vw;
    }

    .hero-title {
        font-size: 40px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
    }

    .hero-bonus {
        font-size: 32px;
    }

    .hero-register-button {
        margin-top: 5vh;
    }

    .hero-register-button {
        padding: 20px 35px;
        font-size: 20px;
    }

    .step .circle {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .step span {
        font-size: 22px;
    }

    .logged-in-buttons .icon2 {
        height: 4.5vh;
        width: 4.5vh;
    }

    header {
        height: 9%;
        padding: 0 4%;
    }

    .title-option {
        width: 16vw;
    }

    .header-buttons {
        gap: 0em;
        margin-left: auto;
    }

    .logo {
        height: 4vh;
        margin-left: 22%;
    }

    .btn {
        font-size: 1.3rem;
        padding: 0.6em 0.6em;
    }

    .join-btn::before {
        content: 'JOIN' !important;
    }

    .hamburger-menu {
        display: flex;
        position: absolute;
        left: 4%;
        top: 50%;
        transform: translateY(-50%);
    }

    .betting-panel {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 9%;
        background-color: #394a51;
        padding: 1%;
        color: white;
        overflow: hidden;
        transition: height 0.3s ease;
        z-index: 9990;
    }

    #bestlip-multiples-input {
        width: 14vw;
        height: 7vh;
        font-size: 24px;
    }

    .betting-panel-bet-input {
        width: 14vw;
        height: 7vh;
        font-size: 24px;
    }

    .betting-panel-bet-odds {
        font-size: 20px;
    }

    .betting-panel-bet-close {
        font-size: 20px;
    }

    .betting-panel-bet-returns {
        font-size: 20px;
    }

    #bestlip-multiples-content {
        padding: 3%;
    }

    .betting-panel-bet {
        padding: 3%;
    }

    #bestlip-multiples-header {
        padding-left: 3vw;
        padding-right: 3vw;
        gap: 1vw;
    }

    #bestlip-multiples-returns {
        font-size: 20px;
    }

    #bestlip-multiples-header-text {
        font-size: 20px;
    }

    #bestlip-multiples-header-odds {
        font-size: 20px;
    }

    #bestlip-multiples-bet-info {
        font-size: 20px;
    }

    .scroll-wrapper {
        padding: 2%;
        height: 72%;
    }

    .betting-panel-bet-row {
        gap: 1vw;
    }

    .betting-panel-bet-odds {
        gap: 2vw;
    }

    .stake-container {
        padding: 2%;
        height: 8.5%;
        padding-left: 6%;
        padding-right: 6%;
    }

    .betting-panel-square {
        height: 8vh;
        width: 10vh;
    }

    .betting-panel-login-button {
        height: 8vh;
        width: 100%;
        font-size: 22px;
    }

    .betting-panel-footer {
        margin-left: 1%;
        margin-right: 0%;
        width: 96%;
        margin-bottom: 1%;
    }

    .betslipEmpty {
        display: none;
    }

    .betting-panel.expanded {
        height: 91%;
        margin-top: 9%;
        z-index: 1;
    }

        .betting-panel.expanded .betslipEmpty {
            display: block;
        }

    .panel-header {
        display: flex;
        align-items: center;
        height: 100%;
        pointer-events: all;
    }

        .panel-header.expanded {
            display: flex;
            align-items: center;
            height: 9%;
        }

        .panel-header h2 {
            font-family: 'Nunito', sans-serif;
            font-weight: bold;
            margin: 0;
            font-size: 20px;
        }

    .stake-container-left-text {
        font-size: 22px;
    }

    .stake-container-right-text {
        font-size: 22px;
    }

    .betting-panel-bet-team {
        font-size: 20px;
    }

    .singles-text {
        font-size: 22px;
    }

    .betting-panel-bet-details {
        font-size: 20px;
    }

    .bet-count {
        background-color: red;
        border-radius: 50%;
        color: white;
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        margin-left: 5px;
        font-size: 16px;
    }

    .arrow-up,
    .arrow-down {
        display: inline;
        color: white;
        font-size: 18px;
        cursor: pointer;
        margin-left: auto;
        height: 30px;
    }

    .betslipEmpty {
        text-align: center;
        margin: 14% 0;
    }

    .betslip-icon {
        width: 15vh;
    }

    .betslipEmpty p {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    .divider {
        height: 0.5px;
        background-color: #ccc;
        border: none;
    }

    .quick-links {
        font-family: 'Poppins', sans-serif;
        color: white;
        text-align: left;
        margin: 5% 5%;
        font-size: 24px;
    }

    .button-container {
        display: flex;
        flex-direction: column;
        align-items: left;
    }

    .quick-link-btn {
        background-color: rgba(143, 210, 60, 0.6);
        color: white;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        width: 90%;
        padding: 20px;
        margin: 1%;
        border: none;
        cursor: pointer;
        font-size: 16px;
        text-align: left;
        padding-left: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .quick-link-btn:hover {
        background-color: rgba(143, 210, 60, 0.8); /* Darker on hover */
    }
}



/* Large Tablet Styles */

@media screen and (min-width: 900px) and (max-width: 1199px) {

    div.deposit-page-container div.latpay-elements-field > input {
        font-size: 16px !important;
        padding: 1em !important;
    }

 
    input {
        padding: 1em;
    }

    .btn-modal {
        padding: .5em;
        font-size: 1.5em;
    }

    label {
        font-size: 16px;
    }

    .help-text {
        font-size: 20px;
    }

    .modal-header h2 {
        font-size: 32px;
    }

    .close-menu {
        font-size: 3em;
        left: 7%;
    }

    .close-modal {
        font-size: 3rem;
    }

    .menu-heading {
        font-size: 24px;
        padding-left: 3rem;
    }

    #phone-prefix {
        height: 4.5vh;
    }

    .hamburger-menu .bar {
        width: 40px;
        height: 4px;
    }

    .betslipEmpty p {
        font-size: 24px;
        margin-top: 2vh;
    }

    .sport-item {
        margin: 1rem 0;
    }

    .or-divider span {
        font-size: 16px;
    }

    #currency {
        height: 4.5vh;
    }

    .panel-header {
        padding: 15px 40px;
    }

    .footerText {
        font-size: 20px;
    }

    .modal-content {
        width: 80%;
        padding: 4%;
        z-index: 2;
    }

    .racing-panel-section {
        margin-right: 1%;
        min-width: 58%;
        margin-left: 1%;
    }

    .footerComponent {
        height: 76vh;
        margin-left: 14vw;
        margin-right: 14vw;
        margin-bottom: 7vh;
    }

    .footerText {
        width: 100%;
    }

    .footerLogo {
        height: 4vh;
        margin-top: 10vh;
    }

    .plus18 {
        height: 2vh;
    }

    .gamblingCare {
        height: 2vh;
    }

    .gambleAware {
        height: 1vh;
        margin-top: .5vh;
    }

    .visa {
        margin-top: .5vh;
        height: 2vh;
    }

    .paypal {
        height: 3vh;
    }

    .mastercard {
        height: 3vh;
    }

    .loading-placeholder-main {
        height: 50vh;
        margin-top: 20vh;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 18vh;
    }

    .betslip-warning-container {
        margin-top: 3vw;
    }

    .betslip-warning-red-circle {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .each-way-container {
        height: 7vh;
        margin-left: 2.8vw;
        padding: 1.1vh 2vw;
    }

    .each-way-label {
        margin-left: 1vw;
        font-size: 16px;
    }

    .each-way-description {
        font-size: 16px;
    }

    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        padding-bottom: 10%;
        width: 55%;
    }

    .sports-list {
        margin-left: 4vw;
    }

    .menu-sport-icon {
        width: 3vw;
    }

    .racing-panel {
        min-width: 30%;
        padding: 2%;
        margin-right: 2%;
    }

    .football-box {
        font-size: 16px;
        margin-top: 20%;
    }

    .main-racing-mobile-only {
        display: block;
        font-size: 16px;
        font-family: 'Nunito';
        margin-right: 30px;
    }

        .main-racing-mobile-only p {
            padding: 0;
            margin: 0;
            float: left;
        }

    .racing-panel-section:last-child {
        all: unset;
        padding: 1vh 0vw;
        background-color: #394a51;
        color: white;
        text-align: center;
        border-radius: 6px;
        transition: background-color 0.3s, color 0.3s;
        margin-right: 2%;
        min-width: 58%;
        margin-left: 1%;
    }

    .racing-panel-section:first-child {
        all: unset;
        padding: 1vh 0vw;
        background-color: #394a51;
        color: white;
        text-align: center;
        border-radius: 6px;
        transition: background-color 0.3s, color 0.3s;
        margin-right: 1%;
        min-width: 58%;
        margin-left: 2%;
    }

    .modal-body.visible {
        padding-bottom: 8%;
    }

    .time {
        font-size: 16px;
    }

    .location {
        font-size: 16px;
    }

    .sports-container {
        padding: 1vh;
        height: auto;
        width: 100%;
        margin-left: 0;
    }

    .racing-container-scrollable-view {
        width: 100%;
        margin-left: 0;
    }

    .racing-panel-races-footer {
        font-size: 10px;
    }

    .racing-panel-races-odds-info {
        font-size: 10px;
    }

    .racing-panel-races-odds-box {
        padding: 3vw;
        font-size: 16px;
        width: 90px;
    }

        .racing-panel-races-odds-box.selected {
            background-color: rgba(143, 210, 60, 0.6) !important;
            color: white;
        }

        .racing-panel-races-odds-box:hover.selected {
            background-color: rgba(143, 210, 60, 0.6) !important;
            color: white;
        }

    .racing-panel-races-jockey-name {
        font-size: 16px;
    }

    .racing-panel-races-horse-name {
        font-size: 16px;
    }

    .racing-panel-races-row-number {
        margin-left: 5vw;
        margin-right: 5vw;
        font-size: 20px;
    }

    .racing-panel-races-header img {
        width: 5vw;
        font-size: 16px;
    }

    .racing-panel-races-header .racing-panel-races-race-time {
        margin-left: 2vw;
        font-size: 16px;
    }

    .racing-panel-races-odds-label {
        margin-left: auto;
        font-size: 16px;
    }

    .racing-panel-races-container {
        display: flex;
        margin-left: 0vw;
    }

    .next-races-title {
        margin-left: 2vw;
    }

    .racing-container {
        width: 100%;
        height: auto;
        padding: 2%;
        margin-left: 0vw;
        margin-right: 0vw;
    }

    .mobile-hide {
        display: none;
    }

    .title-row {
        margin-left: 2vw;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .football-header th {
        font-size: 20px;
    }

    .football-header-main th {
        font-size: 10px;
    }

    .football-row td {
        font-size: 10px;
    }

    .football-header th:first-child {
        padding-left: 10px;
    }

    .last-row td {
        padding-left: 10px;
    }

    a {
        font-size: 16px;
    }

    .football-arrow {
        width: 16px;
        height: 16px;
    }

    .match-details {
        font-size: 20px;
    }

    .sports-partial-container {
        width: 98vw;
        margin: 1vw;
        margin-bottom: 8vh;
    }

    .title {
        font-size: 20px;
    }

    .sport-icon {
        height: 3vh;
    }

    .sport-name {
        font-size: 20px;
    }

    .sport-panel {
        padding: 3%;
        margin-right: 2%;
    }

    .sport-panel-header {
        top: 0px;
        right: 0px;
        font-size: 6px;
    }

    .football-header-main th {
        font-size: 20px !important;
    }

    .hero-container {
        flex-direction: column;
        width: 100%;
        height: 86vh;
        Margin-top: 9%;
    }

    .hero-left-section {
        width: 96%;
        padding: 2%;
        margin-top: 10vh;
    }

    .hero-right-section {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-grow: 1;
    }

    .hero-image {
        height: auto;
        width: 100%;
        margin-top: 8vh;
        margin-right: 1vw;
    }

    .hero-title {
        font-size: 50px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
    }

    .hero-bonus{
        font-size:40px;
    }

    .hero-register-button {
        margin-top: 5vh;
    }

    .hero-register-button {
        padding: 20px 35px;
        font-size: 30px;
    }

    .step .circle {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .step span {
        font-size: 22px;
    }

    .logged-in-buttons .icon2 {
        height: 4.5vh;
        width: 4.5vh;
    }

    header {
        height: 9%;
        padding: 0 4%;
    }

    .title-option {
        width: 16vw;
    }

    .header-buttons {
        gap: 0em;
        margin-left: auto;
    }

    .logo {
        height: 4vh;
        margin-left: 22%;
    }

    .btn {
        font-size: 1.5rem;
        padding: 0.6em 0.6em;
    }

    .join-btn::before {
        content: 'JOIN' !important;
    }

    .hamburger-menu {
        display: flex;
        position: absolute;
        left: 4%;
        top: 50%;
        transform: translateY(-50%);
    }

    .betting-panel {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 9%;
        background-color: #394a51;
        padding: 1%;
        color: white;
        overflow: hidden;
        transition: height 0.3s ease;
        z-index: 9990;
    }

    #bestlip-multiples-input {
        width: 14vw;
        height: 7vh;
        font-size: 24px;
    }

    .betting-panel-bet-input {
        width: 14vw;
        height: 7vh;
        font-size: 24px;
    }

    .betting-panel-bet-odds {
        font-size: 20px;
    }

    .betting-panel-bet-close {
        font-size: 20px;
    }

    .betting-panel-bet-returns {
        font-size: 20px;
    }

    #bestlip-multiples-content {
        padding: 3%;
    }

    .betting-panel-bet {
        padding: 3%;
    }

    #bestlip-multiples-header {
        padding-left: 3vw;
        padding-right: 3vw;
        gap: 1vw;
    }

    #bestlip-multiples-returns {
        font-size: 20px;
    }

    #bestlip-multiples-header-text {
        font-size: 20px;
    }

    #bestlip-multiples-header-odds {
        font-size: 20px;
    }

    #bestlip-multiples-bet-info {
        font-size: 20px;
    }

    .scroll-wrapper {
        padding: 6%;
        height: 72%;
    }

    .betting-panel-bet-row {
        gap: 1vw;
    }

    .betting-panel-bet-odds {
        gap: 2vw;
    }

    .stake-container {
        padding: 2%;
        height: 8.5%;
        padding-left: 6%;
        padding-right: 6%;
    }

    .betting-panel-square {
        height: 8vh;
        width: 10vh;
    }

    .betting-panel-login-button {
        height: 8vh;
        width: 100%;
        font-size: 22px;
    }

    .betting-panel-footer {
        margin-left: 1%;
        margin-right: 0%;
        width: 96%;
        margin-bottom: 1%;
    }

    .betslipEmpty {
        display: none;
    }

    .betting-panel.expanded {
        height: 91%;
        margin-top: 9%;
        z-index: 1;
    }

        .betting-panel.expanded .betslipEmpty {
            display: block;
        }

    .panel-header {
        display: flex;
        align-items: center;
        height: 100%;
        pointer-events: all;
    }

        .panel-header.expanded {
            display: flex;
            align-items: center;
            height: 9%;
        }

        .panel-header h2 {
            font-family: 'Nunito', sans-serif;
            font-weight: bold;
            margin: 0;
            font-size: 24px;
        }

    .stake-container-left-text {
        font-size: 22px;
    }

    .stake-container-right-text {
        font-size: 22px;
    }

    .betting-panel-bet-team {
        font-size: 20px;
    }

    .singles-text {
        font-size: 22px;
    }

    .betting-panel-bet-details {
        font-size: 20px;
    }

    .bet-count {
        background-color: red;
        border-radius: 50%;
        color: white;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        margin-left: 5px;
        font-size: 20px;
    }

    .arrow-up,
    .arrow-down {
        display: inline;
        color: white;
        font-size: 18px;
        cursor: pointer;
        margin-left: auto;
        height: 30px;
    }

    .betslipEmpty {
        text-align: center;
        margin: 14% 0;
    }

    .betslip-icon {
        width: 15vh;
    }

    .betslipEmpty p {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    .divider {
        height: 0.5px;
        background-color: #ccc;
        border: none;
    }

    .quick-links {
        font-family: 'Poppins', sans-serif;
        color: white;
        text-align: left;
        margin: 5% 5%;
        font-size: 24px;
    }

    .button-container {
        display: flex;
        flex-direction: column;
        align-items: left;
    }

    .quick-link-btn {
        background-color: rgba(143, 210, 60, 0.6);
        color: white;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        width: 90%;
        padding: 20px;
        margin: 1%;
        border: none;
        cursor: pointer;
        font-size: 16px;
        text-align: left;
        padding-left: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .quick-link-btn:hover {
        background-color: rgba(143, 210, 60, 0.8); /* Darker on hover */
    }
}