:root {
    --yellow: #FFCD00;
    --green: #019380;
    --darkbackground: #2B3B3B;
    --blackgreen: #0A0C00;
    --darkblue: #5585C3;
    --darkdarkblue: #4575B3;
    --lightblue: #75A5F3;
    --radius: 0.4rem;
    --buttonradius: 0.3rem;
    --gradient-blue-1: #3570b6;
    --gradient-blue-2: #22446f;
    --gradient-blue-3: #0f1828;
    --shield-svg: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.23 83.02">\
       <path  fill="none" stroke="white" stroke-width="2" d="M3.97 10.66l0 40.4 0.08 0.39c2.12,10.36 7.92,18.08 17.27,22.96 6.07,3.17 11.99,4.24 14.26,4.54l0.54 0.08 0.53 -0.08c2.27,-0.3 8.19,-1.36 14.27,-4.54 9.34,-4.88 15.15,-12.6 17.26,-22.96l0.08 -0.39 0 -40.4 -32.14 -6.61 -32.15 6.61z"/>\
    </svg>');
    --shield-svg-hover: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.23 83.02">\
       <path  fill="white" stroke="white" stroke-width="2" d="M3.97 10.66l0 40.4 0.08 0.39c2.12,10.36 7.92,18.08 17.27,22.96 6.07,3.17 11.99,4.24 14.26,4.54l0.54 0.08 0.53 -0.08c2.27,-0.3 8.19,-1.36 14.27,-4.54 9.34,-4.88 15.15,-12.6 17.26,-22.96l0.08 -0.39 0 -40.4 -32.14 -6.61 -32.15 6.61z"/>\
    </svg>');
    --shield-svg-selected: url('data:image/svg+xml,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.23 83.02">\
            <defs>\
                <linearGradient id="grad" gradientUnits="userSpaceOnUse">\
                    <stop offset="0" style="stop-opacity:1;stop-color:#3570B6"/>\
                    <stop offset="0.3" style="stop-opacity:1;stop-color:#22446F"/>\
                    <stop offset="0.95" style="stop-opacity:1;stop-color:#0F1828"/>\
                    <stop offset="1" style="stop-opacity:1;stop-color:#0F1828"/>\
                </linearGradient>\
            </defs>\
            <path  fill="url(#grad)" stroke="white" stroke-width="2" d="M3.97 10.66l0 40.4 0.08 0.39c2.12,10.36 7.92,18.08 17.27,22.96 6.07,3.17 11.99,4.24 14.26,4.54l0.54 0.08 0.53 -0.08c2.27,-0.3 8.19,-1.36 14.27,-4.54 9.34,-4.88 15.15,-12.6 17.26,-22.96l0.08 -0.39 0 -40.4 -32.14 -6.61 -32.15 6.61z"/>\
        </svg>');
}

* {
    font-family: "Acrom-web", "Calibri", "Arial", "sans-serif";
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    background-color: var(--darkbackground);
    background-image: url("/images/background.jpg");
    background-size: cover;

    /* background-size: cover; */
    background-origin: border-box;
    /*    background: var(--green);
    background-image: linear-gradient(to right bottom, #019380, #019380, #015B51, #015B51);*/
}



.background-stadium {
    height: 100vh;
    background-image: url("/images/background.jpg");
    width: 100%;
    min-height: 100%;
    background-origin: border-box;
    background-position: center;
    background-size: 100% auto;
    top: 0;
    right: 0;
    position: fixed;
    z-index: -100;
}


.background-circle {
    width: 20rem;
    height: 20rem;
    border-bottom-left-radius: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: -100;
    background: radial-gradient(circle at 100% 0%, #002d27b5, #06f5da65);
}


.bck-w {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius);
}

.bck-dark {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius);
}

/*Borders block*/
.brd-r {
    border: 1px red solid;
}
.brd-b {
    border: 1px blue solid;
}
.brd-v {
    border: 1px solid violet;
}
.brd-g {
    border: 1px DarkGoldenRod solid;
}
.brd-w {
    border: 1px white solid;
}
.brd-y {
    border: 1px yellow solid;
}

/*Timer block*/
.timer {
    width: 4.5rem;
    margin: 0.3rem;
}
.text-yellow {
    color: var(--yellow);
}
.timer-number {
    color: #FFCD00;
    font-size: 2.2rem;
    font-family: "Aqum-web";
    text-align:center;
}

.logo {
    max-width: 20rem;
    height: auto;
}

.tooltip {
    --bs-tooltip-bg: var(--yellow);
    --bs-tooltip-color: black;
}







/*Main navigation bar*/
.nav .nav-item .nav-link {
    padding: 0 2rem;
}
.nav .nav-item:not(:last-child) .nav-link {
    border-right: 2px solid white;
}
    .nav  .nav-link {
        color: white;
    }
        .nav .nav-link:hover {
            color: var(--yellow);
        }
        .nav  .nav-link.active, .navbar-nav .nav-link.show {
            color: black;
            background-color: var(--yellow);
        }

/*User Info block*/
.info-title {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 0.3rem;
}



.icon-round {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    border-radius: 50% 50%;
    background-color: var(--yellow);
    color: black;
    text-align: center;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    padding: 0.3rem;
}


/*New lottery ticket*/
.new-ticket .info button {
    width: 4rem;
    height: 4rem;
    font-size:2rem;
}


.new-ticket .bets .bet-pair {
    border: solid 0.3rem var(--darkdarkblue);
    border-radius: 0 0 1rem 1rem;
    background: linear-gradient(to right bottom, var(--darkblue), var(--darkblue), var(--lightblue));
}


    .bet-pair .sport-name {
        font-size: 1rem;
         min-width: 10rem;
        font-weight: 600;
    }

    .bet-pair .sport-date {
        font-size: 0.7rem;
    }

    .bet-pair .team-name {
        width: 10rem;
        font-size: 0.8rem;
        margin:0.5rem;
    }

        .bet-pair .team-name.selected {
            background: linear-gradient(45deg, rgba(53,112,182,1) 0%, rgba(34,68,111,1) 30%, rgba(15,24,40,1) 94%, rgba(15,24,40,1) 100%);
            color:var(--yellow);
        }

        .bet-pair .team-name.selected:hover {
            color: white;
        }


.info-text {
    border: solid white 0.1rem;
    width: auto;
    margin: 0.3rem;
    border-radius: 0.5rem;
    padding: 0.2rem 0.2rem 0.2rem 1rem;
    text-align: left;
    font-size: 1rem;
    width:17rem;
}

.info-text-value {
    background-color: var(--yellow);
    border-radius: 0.5rem;
    text-align: center;
}



.info-text .badge {
    font-size: 1.1rem;
    background-color: var(--yellow);
    color: black;
    margin: 0.2rem;
}




.info-text-group-horizontal .list-group-item {
    display: inline-block;
    border: white solid 0.1rem;
    padding: 0.2rem;
    color: white;
    margin-left: -1rem;
    border-right-width: 0;
}


.basket-block ul {
    padding-left:1rem;
}


.info-text-group-horizontal .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    padding-left: 0.5rem;
    width: 12rem;
}

    .info-text-group-horizontal .list-group-item:last-child {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        border-bottom-left-radius: 0;
        border-right-width: 0.1rem;
        background-color: var(--yellow);
        text-align:center;
        color: black;
        font-weight: 700;
        width: 6rem;
    }














.bets {
    margin-bottom:7rem;
}


.superprizeamount {
    font-family:sans-serif;
}





.rndbutton {
    width: 5rem;
    height: 5rem;
    padding:0.3rem;
}

    .rndbutton:active {
        border: none;
    }

    .rndbutton-icon {
        fill: white;
    }

@media screen and (min-width: 768px) {
    .rndbutton:hover {
        background-color: white;
    }

        .rndbutton:hover .rndbutton-icon {
            fill: black;
        }

    .bet-button-team:hover {
        background-color: darkgray;
        border: solid 1px black;
        color: black;
        cursor:pointer;
    }

    .bet-button-draw:hover .button-draw-icon {
        fill: darkgray;
        cursor: pointer;
    }


}





    .bet-buttons {
        margin-top: 0.3rem;
        height: 3rem;
    }


    .bet-button-team:active {
        background-color: transparent !important;
    }

    .bet-button-team.selected {
        background-color: darkgray;
        border: solid 3px #0F9687;
        color: black;
    }



    .bet-button-team img {
        width: 2rem;
        height: 2rem;
    }



    .bet {
        background: gray;
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 0.5rem;
    }

    .bet-title {
        font-size: 1rem;
    }

        .bet-title i {
            margin-right: 1rem;
        }

    .bet-footer i {
        margin-right: 0.5rem;
    }

    .bet-button-team {
        width: 12rem;
        border: solid 1px black;
        padding: 0.3rem;
        text-align: center;
        border-radius: 0.4rem;
        transition: .5s ease-in-out 0s;
    }

    .bet-footer {
        margin-top: 0.5rem;
        color: black;
    }

    .bet-button-draw {
        background: none;
        width: 4rem;
        height: 3.4rem;
        border: none;
    }

    .button-draw-icon {
        fill: none;
        stroke: black;
        stroke-width: 4;
        transition: .5s ease-in-out 0s;
    }


    .button-draw-icon-cross {
        fill: black;
    }


    .bet-button-draw.selected .button-draw-icon-shield {
        fill: darkgray;
        stroke-width: 15;
        stroke: #0F9687;
    }











    /*    .new-ticket .team-draw {
        background: var(--shield-svg) no-repeat center;
        background-size: contain;
        border: none;
    }

.new-ticket .team-draw:hover {
    background: var(--shield-svg-hover) no-repeat center;
}


    .new-ticket .team-draw.selected {
        background: url("/images/shield-selected.svg") no-repeat center;
        color: var(--yellow);
    }

    .new-ticket .team-draw.selected:hover {
        color: white;
    }


.default-team {
    margin:0 0 0.5em;
}
*/

    /*My Cards tab*/

    .accordion-button {
        padding: 0;
        background-color: transparent;
    }

        .accordion-button:not(.collapsed) {
            background-color: transparent;
            box-shadow: none;
        }

        .accordion-button .collapsed {
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: none;
            border: none;
        }

    .accordion-flush .accordion-item {
        border-radius: 0.4rem;
    }

    .accordion-header {
        background-color: transparent;
    }

    .card-purchased-date {
        font-size: 0.8rem;
    }


    .accordion-flush [class*=" gb-i-"], .accordion-flush [class^=gb-i-] {
        color: var(--green);
    }

    .accordion-body {
        padding: 0.2rem;
    }

    hr {
        margin: 0 0 0.5rem;
    }

    .accordion-body i {
        border: solid 0.1rem var(--green);
        border-radius: 0.3rem;
        padding: 0.2rem;
        background-color: white;
    }

    .accordion-body .stakes i {
        color: transparent;
        margin: 0.1rem;
        width: 2rem;
        height: 2rem;
        text-align: center;
        padding: 0.4rem;
    }

    .accordion-body i.checked {
        color: var(--green);
    }

    .accordion-body i.matched {
        background-color: var(--green);
        color: white;
    }

    .card-teams {
        font-size: 1.1rem;
    }

    .card-teams-date {
        font-size: 0.7rem;
    }

    .card-stake {
        font-size: 1rem;
    }

    .card-teams-row {
        font-size: 2rem;
        width: 2.5rem;
        text-align: center;
    }


    .lottery-card {
        width: 35rem;
    }


    .claim-prize:hover {
        background-color: var(--yellow);
        color: black
    }

.pending-results img {
    width: 2rem;
    height: auto;
    margin: 0.3rem
}

    .pending-results .teams {
        display: flex;
    }

    .pending-results .sport {
        margin-left: 0.2rem;
        margin-right: 0.2rem;
        min-width: 9rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .pending-results .sport .sport-name {
            font-weight: 400;
        }

        .pending-results .sport .sport-date {
            font-size: 0.7rem;
        }

    .pending-results .team {
        min-width: 11rem;
        border: 0.1rem solid white;
        display: flex;
        margin: 0.5rem 0;
        justify-content: center;
        align-items: center;
        border-radius: 0.3rem;
    }

    .pending-results .teams .icon {
        width: 3rem;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
    }

.pending-results .team.winner {
    background-color: darkgray;
    color: black;
    border: solid 3px #0F9687;
}

.pending-results .icon.winner {
    background-color: darkgray;
    background-clip: text;
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 0.1rem;
    -webkit-text-stroke-color: #0F9687;
}

        .pending-results .icon.winner .bi::before {
            content: "\f535";
        }

    .pending-results .icon .bi::before {
        content: "\f53e";
    }


    .rules.table {
        --bs-table-color: white;
        --bs-table-bg: transparent;
        --bs-table-striped-color: white;
        --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.2);
    }


    .bg-sp-yellow {
        background-color: var(--yellow);
    }

    .rules .checked::before {
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        font-size: 1.5rem;
        vertical-align: -.125em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\F271";
    }

    .rules thead {
        border-top: solid white 1px;
    }

    .superrpize {
        font-size: 2.5rem;
    }

    /*

xs <576px 
sm ≥576px 
md ≥768px 
lg ≥992px 
xl ≥1200px 
xxl ≥1400px

*/



    .fab-container, .cards-filter {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        user-select: none;
        position: fixed;
        bottom: 70px;
        right: 20px;
        color: white;
    }

        .fab-container:hover {
            height: 100%;
        }

            .fab-container:hover .sub-button:nth-child(2) {
                transform: translateY(-80px);
            }

            .fab-container:hover .sub-button:nth-child(3) {
                transform: translateY(-140px);
            }

            .fab-container:hover .sub-button:nth-child(4) {
                transform: translateY(-200px);
            }

            .fab-container:hover .sub-button:nth-child(5) {
                transform: translateY(-260px);
            }

            .fab-container:hover .sub-button:nth-child(6) {
                transform: translateY(-320px);
            }

        .fab-container .fab, .cards-filter .fab {
            position: relative;
            height: 50px;
            width: 50px;
            width: 50px;
            background-color: var(--green);
            box-shadow: 0 -1px 12px black;
            border-radius: 50%;
            z-index: 2;
        }

            .fab-container .fab::before, .cards-filter .fab::before {
                content: " ";
                position: absolute;
                bottom: 0;
                right: 0;
                height: 25px;
                width: 25px;
                background-color: inherit;
                border-radius: 0 0 10px 0;
                z-index: -1;
            }

            .fab-container .fab .fab-content, .cards-filter .fab .fab-content {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
                border-radius: 50%;
                color: white;
                font-size: 0.9rem;
            }

    .fab-expand {
        height: 50px;
        width: 50px;
        position: absolute;
        background-color: var(--green);
        bottom: 0;
        border-radius: 100%;
        left: -2.7rem;
        z-index: -100;
        box-shadow: 0 -1px 12px black;
    }


        .fab-expand::before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: inherit;
            border-radius: 10px 0 0 0 ;
            z-index: -1;
        }

.fab-bonus {
    left:-40px;
}
    .fab-bonus::before {
        border-radius: 0 0 0 10px !important;
        left:0;

    }

.bottom-info-panel {
    border-radius: 1rem;
    position: fixed;
    padding: 1rem;
    height: 7rem;
    bottom: 4.5rem;
    right: 2rem;
    background-color: var(--green);
    box-shadow: 0 -1px 12px black;
    max-width: 23rem;
    transition: all 0.5s ease;
}


        .bottom-info-panel.hidden {
            opacity: 0;
            transform: translate(28%,15%) scaleX(0) scaleY(0);
        }

















    .fab-container .sub-button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 0px;
        right: 0px;
        height: 50px;
        width: 3rem;
        background-color: #4ba2ff;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

        .fab-container .sub-button:hover {
            cursor: pointer;
        }




    .cards-filter[data-filter="all"] .sub-button[data-cards-filter="all"],
    .cards-filter[data-filter="pending"] .sub-button[data-cards-filter="pending"],
    .cards-filter[data-filter="winners"] .sub-button[data-cards-filter="winners"],
    .cards-filter[data-filter="notclaimed"] .sub-button[data-cards-filter="notclaimed"] {
        color: var(--yellow);
    }





    .cards-filter .sub-button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: left;
        bottom: 0px;
        font-size: 1rem;
        right: 0px;
        height: 3rem;
        width: 12rem;
        padding: 0.5rem;
        background-color: var(--green);
        border-radius: 0.5rem;
        box-shadow: 0 -1px 12px black;
        transform: scaleX(0.1);
        transform-origin: bottom right;
        opacity: 0;
        transition: all 0.3s ease;
    }


        .cards-filter .sub-button:hover {
            cursor: pointer;
            color: black;
        }

    .cards-filter:hover {
        height: 20rem;
        width: 12rem;
    }

    .cards-filter {
        align-items: end;
        width: 3rem;
        bottom: 1rem;
    }







        .cards-filter:hover .sub-button:nth-child(2) {
            transform: translateY(-80px) scaleX(1);
            opacity: 1;
        }

        .cards-filter:hover .sub-button:nth-child(3) {
            transform: translateY(-140px) scaleX(1);
            opacity: 1;
        }

        .cards-filter:hover .sub-button:nth-child(4) {
            transform: translateY(-200px) scaleX(1);
            opacity: 1;
        }

        .cards-filter:hover .sub-button:nth-child(5) {
            transform: translateY(-260px) scaleX(1);
            opacity: 1;
        }

        .cards-filter:hover .sub-button:nth-child(6) {
            transform: translateY(-320px) scaleX(1);
            opacity: 1;
        }

    .main-nav {
        font-size: 1.3rem;
    }







    .left-watermark {
        position: fixed;
        left: 0;
        top: 0;
        width: 200px;
        height: 100%;
        background-image: url("/images/watermark-left.png");
        background-repeat: repeat-y;
        background-size: 200px auto;
        z-index: -1;
        opacity: 0.7;
    }

    .right-watermark {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 300px;
        height: 413px;
        background-image: url("/images/watermark-right.png");
        background-repeat: no-repeat;
        background-size: 300px auto;
        z-index: -100;
        opacity: 1;
    }


    @media screen and (max-width: 992px) {
        .main-nav {
            font-size: 0.9rem;
        }


        .buy-cards {
            width: 5.6rem;
            font-size: 0.7rem;
        }


        .list-group-item-lable {
            display: none;
        }



        .info-text-group-horizontal .list-group-item {
            font-size: 0.8rem;
            padding: 0.2rem;
        }

            .info-text-group-horizontal .list-group-item:first-child {
                border-bottom-left-radius: 0.3rem;
                border-top-left-radius: 0.3rem;
                padding-left: 0.1rem;
                width: 2rem;
            }

            .info-text-group-horizontal .list-group-item:last-child {
                border-top-right-radius: 0.3rem;
                border-bottom-right-radius: 0.3rem;
                width: 4.2rem;
            }
    }

    @media screen and (max-width: 768px) {



        .background-circle {
            width: 15rem;
            height: 15rem;
        }

        .left-watermark {
            width: 100px;
            background-size: 100px auto;
        }

        .right-watermark {
            bottom: 5rem;
            width: 200px;
            height: 275px;
            background-size: 200px auto;
        }

        .new-ticket .info button {
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1rem;
            padding: 0.5rem;
        }


        .lottery-card {
            width: 30rem;
        }

        .tooltip-inner {
            font-size: 0.8rem;
        }

        .main-nav {
            display: none;
        }

        .logo {
            max-width: 12rem;
        }

        .superrpize {
            font-size: 2rem;
        }

        .bet-pair .team-name {
            width: auto;
            font-size: 0.8rem;
        }

        .bet-pair .sport-name {
            font-size: 0.8rem;
            min-width: 8rem;
            font-weight: 600;
        }

        .default-team {
            font-size: 0.9rem;
        }

        .nav__menu {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: var(--blackgreen);
            box-shadow: 0 -1px 12px black;
            width: 100%;
            height: 4rem;
            padding: 0 1rem;
            display: grid;
            align-content: center;
            border-radius: 1.5rem 1.5rem 0 0;
            transition: .7s;
        }


        .nav__item .badge {
            font-size: 0.5rem;
            transform: translateY(-180%) translateX(50%);
            position: relative;
            z-index: 1000;
        }

        #tab-bottom-cards i {
            width: 0.5rem;
            height: 1rem;
        }

        .cards-filter {
            bottom: 5rem;
        }
    }

    @media screen and (max-width: 575px) {


        .background-stadium {
            background-size: auto 100%;
        }


        .rndbutton {
            width: 4rem;
        }



        .bet-buttons {
            height: auto;
        }

        .bet-button-team {
            width: 8rem;
            font-size: 0.8rem;
            height: 4rem;
        }


        .bet-title, .bet-footer {
            font-size: 0.8rem;
        }

        .bottom-info-panel {
            max-width: 19rem;
            width: 19rem;
            right: 1.5rem;
        }

        .bet {
            padding: 0.5rem;
        }

        .bet-button img {
            display: block;
            margin: 0 auto;
        }


        .info-text-group-horizontal .list-group-item {
            margin-left: -0.8rem;
        }

        .bottom-info-panel .info-text-group-horizontal .list-group-item:first-child {
            width: 1.4rem;
            font-size: 0.6rem;
        }

        .bottom-info-panel .info-text-group-horizontal .list-group-item:last-child {
            width: 3.5rem;
            font-size: 0.6rem;
        }




        .combinations {
            font-size: 0.7rem;
        }


            .combinations span {
                font-size: 0.8rem;
                margin: 0.1rem;
            }

        .lottery-card {
            width: 20rem;
        }

        .vtext span {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            text-align: left;
            max-height: 8rem;
        }

        .logo {
            max-width: 10rem;
        }

        .timer {
            width: 2.7rem;
            margin: 0.1rem;
        }

        .timer-number {
            font-size: 1.1rem;
        }

        .countdown-title {
            font-size: 0.6rem;
        }

        .countdown-label {
            font-size: 0.6rem;
        }

        .superrpize {
            font-size: 1.2rem;
        }

        .info h5 {
            font-size: 1rem;
            margin-bottom: 0;
        }

        .info h6 {
            font-size: 0.9rem;
            margin-bottom: 0;
        }



        .bet-pair .sport-name {
            font-size: 0.8rem;
            min-width: 7rem;
            font-weight: 600;
        }

        .default-team {
            font-size: 0.7rem;
        }

        .card-teams {
            font-size: 0.7rem;
        }

        .accordion-body .stakes i {
            width: 1.2rem;
            height: 1.2rem;
            font-size: 0.8rem;
            padding: 0.2rem;
        }


        .accordion-header {
            font-size: 0.8rem;
        }

        .card-teams-row {
            min-width: 2rem;
            width: 2rem;
            font-size: 1.2rem;
        }

        .card-purchise-date {
            font-size: 0.8rem;
        }

        .bet-pair .team-name {
            font-size: 0.8rem;
        }

        .new-ticket .bets .bet-pair {
            border: solid 0.2rem var(--darkdarkblue);
            border-radius: 0 0 1rem 1rem;
            background: linear-gradient(to right bottom, var(--lightblue), var(--darkblue) 20%, var(--darkblue));
        }

        .nav__item .badge {
            font-size: 0.5rem;
            transform: translateY(-180%) translateX(50%);
            position: relative;
            z-index: 1000;
        }

        #tab-bottom-cards i {
            width: 0.5rem;
            height: 1rem;
        }
    }

    @media screen and (max-width: 319px) {



        .lottery-card {
            width: 15rem;
        }

        .logo {
            max-width: 8rem;
        }

        .countdown-title {
            font-size: 0.6rem;
        }

        .timer {
            width: 2.7rem;
            margin: 0.1rem;
        }

        .timer-number {
            font-size: 1.1rem;
        }

        .superrpize {
            font-size: 1rem;
        }


        .nav__name {
            display: none;
        }
    }



    .nav_m {
        height: 4rem;
        align-items: center;
    }

        .nav_m ul {
            list-style: none;
            display: flex;
        }


    .nav__list,
    .nav__link {
        display: flex;
    }

    .nav__link {
        flex-direction: column;
        align-items: center;
        row-gap: 2px;
        color: white;
        font-weight: 600;
    }

    .nav__list {
        justify-content: space-around;
    }

    .nav__name {
        font-size: .625rem;
    }

    .nav__link.active {
        color: var(--yellow);
        transition: .3s;
    }


    @media screen and (min-width: 576px) {
        .nav__list {
            justify-content: center;
            column-gap: 3rem;
        }
    }