:root {
    /* Brand colors */
    --bs-primary: #19A4A7;
    --bs-primary-2: #A1A7A7;
    --bs-secondary: #4E5255;
    --bs-success: #2ec4b6;
    --bs-danger: #e63946;
    --bs-background: #151B1B;
    --pag-color1: #2f2e2e;
    --pag-color2: #4E5255;
    --pag-color3: #151B1B;

    /* Typography */
    --bs-body-font-family: 'Inter', system-ui, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;

    /* Layout */
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;

    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary);

    /* Background */
    --bs-body-bg: #151B1B;
    --bs-body-color: #19A4A7;
}


.app-wrapper {
    max-width: 520px;   /* mobile feel */
    width: 100%;
    min-height: 100vh;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

.barDiv {
    background-color: var(--bs-primary);

}

.barDiv i {
    align-self: center;
    color: var(--bs-background);
    font-size: 2.35rem;
}

.verLogText {
    font-family: Texturina, "Grenze Gotisch",'Lato','Oswald','Montserrat', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.1rem;
}

.titleDiv h6 {
    font-size: 1.14rem;
}

.nav-pills {
    background-color: #4E525555;
    position: fixed;   /* removes it from normal flow */
    bottom: 5%;            /* sticks to bottom */
    left: 0;
    width: 85%;
    max-width: 520px;
    color: #4E5255;
    z-index: 1000;        /* ensures it stays on top */
}

.nav-pills i {
    font-size: 1.15rem;
    font-weight: bolder;
}

.pageTitle2 {
    color: var(--bs-primary-2);
}


.statsDiv {
    border: none;
    border-radius: 7px;
    background-color: indianred;
    height: 124px;
    width: 90px;
    margin: 10px 9px;
    color: #47474B;
}

.statsDiv .bi {
    transform: scale(1.8);
}

.statsValue{

}

.statsLbl {
    font-size: 10px;
}

.statsColour1 {
    background-color: #FFD7D7;
}

.statsColour2 {
    background-color: #EFE4FC;
}

.statsColour3 {
    background-color: #E2E7FA;
}

.statsColour4 {
    background-color: #f5cc5b;
}

.statsColour5 {
    background-color: #D4D3DF;
}

.statsColour6 {
    background-color: #F2A19A;
}

.statsColour7 {
    background-color: #f8954d;
}

.statsColour8 {
    background-color: #BEE0EC;
}

.statsColour9 {
    background-color: #e6ed4b;
}

.todayGameStats {
    height: 33px;
    border: none;
    border-radius: 12px;
    background-color: #4E5255;
    color: #0CE5EE;
    padding: 6px 0;
}

.todayStatsCol {
    color: #A1A7A7;
}

.todayGameFont {
    font-size: 13px;
}

.hisTableHeaders {
    font-size: 12px;
    font-weight: bold;
}

.hisTableValue {
    background-color: #CDE2E0;
    color: #000000;
    font-size: 11px;
    padding: 3px 0;
    margin-top: 5px;
    margin-bottom: 12px;
    border: none;
    border-radius: 7px;
}


@media (min-width: 521px) { /* tablets and up */
    .nav-pills {
        position: fixed;   /* footer sticks at page bottom, scrollable */
        bottom: 5%;
        left: 50%;
        transform: translateX(-55%); /* center in viewport */
        max-width: 500px;     /* match your mobile wrapper width */
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
        margin-left: auto;
        margin-right: auto;
        z-index: 1000;
    }
}



.betBlue {
    color: #53A2EF;
}

.betAmber {
    color: #E9DDAD;
}

.betRed {
    color: red;
}

.betGreen {
    color: #05AA71;
}

.betGrey {
    color: #b9b9b9;
}

.betDarkGrey {
    color: #9D9D9D;
}

.betWhite {
    color: #ffffff;
}

.profitBlue {
    background-color:  #53A2EF;
    color: black;
    border: solid 1px  #53A2EF;
    border-radius: 7px;
    padding: 4px 5px;
    font-size: 17px;
}

.profitGreen{
    background-color:   #05AA71;
    color: black;
    border: solid 1px   #05AA71;
    border-radius: 7px;
    padding: 4px 5px;
    font-size: 17px;
}

.profitAmber {
    background-color:  #E9DDAD;
    color: black;
    border: solid 1px  #E9DDAD;
    border-radius: 7px;
    padding: 4px 5px;
    font-size: 17px;
}

i {
    font-style: normal; !important;
}

.bold {
    font-weight: bold;
    font-size: 14px;
}

.bolds {
    font-weight: bold;
    font-size: 12px;
    padding-top: 6px;
}

.racSelect {
    padding-top: 7px;
    font-size: 9px;
    border: none;
    color: #0CE5EE;
}

.racHeaders {
    padding-top: 11px;
    font-size: 10px;
    font-weight: bold;
}

.racHeaders section {
    color: #D0D1D1;
}

.racValue {
    padding-top: 4px;
    font-size: 10px;
    padding-bottom: 10px;
    border-bottom-left-radius: 7px;
    font-weight: bold;
    border-bottom-right-radius: 7px;
}

.upperDiv {
    background-color: #2C3232;
    cursor: pointer;
    border: none;
}

.lowerDiv {
    background-color: #444949;
    cursor: pointer;
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.racDetail {
    padding-top: 10px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 13px;
    border: none;
    color: #FFFFFF;
}



/* Sets the login theme*/
.agreement-checkbox, #registration_form_agreeTerms {
    font-size: large;
    margin: 10px 10px;
}

/* Sets the login theme*/
.loginDiv {
    background-color: var(--bs-background);
    padding: 3% 5%;
    text-align: center;
}

/* Sets username and password icon theme colour*/
.welIcons {
    background-color: var(--bs-primary);
    color: var(--bs-background);
    border: solid 1px var(--bs-primary);
}


/* Sets username and password text area theme colour*/
.loginDiv input {
    background-color: var(--bs-background);
    color: var(--bs-primary);
    font-size: 17px;
    padding: 12px;
    border: solid 1px var(--bs-primary);
}

/* Sets the login button theme*/
.signUpBtn {
    background-color: var(--bs-primary);
    color: var(--bs-background);
    font-size: 15px;
    border: none;
    border-radius: 8px;
    padding: 6px 122px;

}

.signUpBtn:hover {
    background-color: rgba(0,0,4,0.8); /* Set hover faded effect */
    color: var(--bs-background);
}

.alternateSignUpBtn {
    background-color: var(--bs-background);
    color: var(--bs-primary);
    font-size: 15px;
    border: solid 1px var(--bs-primary);
    border-radius: 8px;
    text-align: center;
    padding: 6px 40px;
}

.alternateSignInBtn {
    background-color: var(--bs-background);
    color: var(--bs-primary);
    font-size: 15px;
    border: solid 1px var(--bs-primary);
    border-radius: 8px;
    text-align: center;
    padding: 6px 50px;
}

.alternateGuestBtn {
    background-color: var(--bs-background);
    color: var(--bs-primary);
    font-size: 17px;
    border: solid 1px var(--bs-primary);
    border-radius: 8px;
    text-align: center;
    padding: 10px 37%;
}

.alternateSignUpBtn:hover, .alternateSignInBtn:hover {
    background-color: rgba(0,0,4,0.8); /* Set hover faded effect */
    color: var(--bs-background);
}

.tableRow {
    background-color: #2C3232;
    color: #ffffff;
}

.tableRow1 {
    background-color: #444949;
    color: #ffffff;
}

.pagination-summary {
    color: var(--bs-primary);
    font-size: 12px;
}

a.page-link {
    background-color: var(--bs-primary);
    border: solid 1px var(--pag-color1);
    color: var(--bs-background);
    font-size: 12px;
}

a.page-link:hover {
    background-color: var(--pag-color2);
    border: solid 1px var(--pag-color1);;
    color: var(--bs-background);
    font-size: 12px;
}

.fesLas span {
    background-color: var(--pag-color3) ! important;
    border: solid 1px var(--bs-primary) ! important;
    border-bottom-left-radius: 7px ! important;
    border-top-left-radius: 7px ! important;
    color: var(--bs-primary) ! important;
    font-size: 12px;
}

.fesLas1 span {
    background-color: var(--pag-color3) ! important;
    border: solid 1px var(--bs-primary) ! important;
    border-bottom-left-radius: 7px ! important;
    border-top-left-radius: 7px ! important;
    color: var(--bs-primary) ! important;
    font-size: 12px;
}

.dis span {
    border: none !important;
    background-color: var(--pag-color1) ! important;
    font-size: 12px;
}

.des span {
    background-color: var(--pag-color2) ! important;
    color: var(--bs-primary-2) ! important;
    border: solid 1px var(--pag-color2) ! important;
    font-size: 12px;
}