/*LAYOUT STARTS HERE*/
:root{
    --background: #f4f6f1;
    --second: #5e7e36;
    --hoverbutton: #f3f5f1;
    --border: #a24d25;
    --header: #d9974b;
    --boldfont:#333333;
    --solidfont:#111111;
    --danger:#FF9999;
    --success:#cae7c7;
    --whitefont:#FFFFFF ;
    --maingridbackground:#e1e2df;
    --outlet: #495f2e;
}
.c1{
    color:var(var(--boldfont));
}

.c2{
    color: var(--header);
}

.c3{
    color: var(--second);
}

.c4{
    color: var(--border);
}

.c5{
    color: var(--hoverbutton);
}


.left {
    background-color: var(--background);
}

.right {
    background-color: var(--background);
}

body {
    background-color: #edf1e9;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}

.header-bottom {
    background-color: var(--header);
}

footer {
    background-color: var(var(--boldfont));
}

.footer-content{
    text-align: center;
}

.footer-content a {
    text-transform: uppercase;
    text-decoration: underline;
    color:var(--whitefont);
}

.footer-content a:hover {
    background-color: var(--header);
}


.footer-top {
    background-color: var(--second);
    margin:0 auto; display:
        flex;align-items:center;
    justify-content: space-around;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--whitefont);

}

.footer-bottom{
    color: white;
    text-align: center;
    background-color: var(--header);
}

.center {
    background-color: var(--whitefont);
}
header {
    height: 48px;
    background: linear-gradient(to bottom, var(--header) 24px, var(--second) 24px, var(--second));
    text-align: center;
    color: var(--whitefont);
    position: sticky;
    top: 0px;
    z-index: 10;
}

.fa-purple{
    color:var(--hoverbutton);
}


.logo{
    background-color: var(--whitefont);
    width: 100px;
    border-radius: 6px;
    padding-top: 5px;
    height: 100%;
}

.content-header{
    padding-top:5px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;

}

.banner{
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

.main-header .title{
    margin:0 auto;
    padding-top:10px;
    padding-bottom:10px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.streaming-menu{
    background-color:var(--maingridbackground);
    margin-bottom: 10px;
    text-align: center;
    padding: 5px;
    font-weight: bold;
}

.stream .title{
    float: left;
    font-size: 14px;
    margin-top: 12px;
}

.streaming-image{
    cursor: pointer;
}

.stream-player{
    display: block;
}


.streaming-button{
    background-color: var(--header);
    border-radius: 5px;
    cursor: pointer;
    float:left;
    font-size: 14px;
    padding: 10px 5px 10px 5px;
    margin: 10px 5px 10px 5px;
    min-width:80px;
}

.streaming-na{
    font-weight: bold;
    font-size: 14px;
    float: left;
    padding: 10px 0px 10px 0px;
    margin: 10px 5px 10px 5px;
    min-width:80px;
    color: var(--second);
}

.news-block{
    font-size: 14px;
}

.paginator-button{
    background-color: var(--header);
    border-radius: 5px;
    cursor: pointer;
    float:left;
    font-size: 14px;
    padding: 10px 5px 10px 5px;
    margin: 10px 5px 10px 5px;
}

.paginator-button-num{
    border-radius: 5px;
    cursor: pointer;
    float:left;
    border:1px solid var(--header);
    font-size: 14px;
    padding: 10px 5px 10px 5px;
    margin: 10px 5px 10px 5px;
}

.paginator-button-num.selected{
    background-color: var(--header);
    border-radius: 5px;
    cursor: pointer;
    float:left;
    font-size: 14px;
    padding: 10px 5px 10px 5px;
    margin: 10px 5px 10px 5px;
}


#main-menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;


}

#main-menu li {
    float: left;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom:5px;
    padding-right: 10px;



}

.toggler{
    display: none;
}

#main-menu li a {
    text-transform: uppercase;
    text-decoration: underline;
    color:var(--whitefont);
}

#main-menu li a:hover {
    background-color: var(--second);

}

#main-submenu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

#main-submenu li {
    float: left;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom:5px;
    padding-right: 10px;


}

#main-submenu li a {
    text-transform: uppercase;
    text-decoration: underline;
    color:var(--whitefont);
}

#main-submenu li a:hover {
    background-color: var(--hoverbutton);
}

.link-register{
    color: white;
    display: none;
}

.error{
    color: #FF0000;
    font-weight: bold;
}


.form-inline{
    display: flex;
    padding-top: 2px;
    flex-flow: row wrap;
    align-items: center;
    display: none;

}

.form-inline input{
    vertical-align: middle;
    width: 75px;

}

.form-inline > .submit{
    width: 70px;

}

.form-inline button{
    background-color:  var(--hoverbutton);
    border: none;
}

.align-center{
    width: 100%;
    align-self: center;
}

.clearfix{
    clear: both;
}

.toggle-category{
    display: none;
}

.outlet-heading {
    color:var(--outlet);
    font-weight: bolder;
    font-size: large;
    text-align: center;
}
.outlet {
    border-collapse: collapse;
    width: 100%;
}
.outlet  th{
    border: 1px solid #dddddd;
    text-align: center;
    font-weight: bold;
    background-color: var(--hoverbutton);
    padding: 8px;
    color:var(--outlet);
}

.smiley{
    color: var(--header);
}

.outlet  td{
    border: 1px solid #dddddd;
    text-align: -moz-center;
    padding: 8px;
    text-align: center;
}

.outlet  tr:nth-child(4n+2),.outlet  tr:nth-child(4n+3) {
    background-color: var(--maingridbackground);
    text-align: center;

}

.news-heading,.center-heading {
    color:var(--border);
    font-weight: bolder;
    font-size: large;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.news-single{
    border-bottom: 1px solid #000000;
    margin-top: 20px;
}

.news-home-single{
    border-bottom: 1px solid #000000;
    margin-top: 5px;
}

.news-image-box{
    width: 25%;
    float: left;
}

.news-image{
    margin-left:5px;
    margin-right:5px;
    height: 90%;
    width: 90%;
    object-fit: contain
}

.news-text-box{
    width: 70%;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

.news-home-text-box{
    width: 100%;
    float: left;
    padding-right: 3px;
    padding-left: 3px;
    font-size: 12px;
    padding-bottom: 3px;
}

.news-home-title{
    font-size: 12px;
    font-weight: bold;
}
.news-home-title > a{
    text-decoration: none;
    font-weight: bold;
}

.news-header{
    background-color: var(--second);
    padding:5px;
    color: var(--whitefont);
    font-weight: bold;
    font-size:12px;
}
.news-title{
    font-size: 16px;
    font-weight: bold;
}

.news-title > a{
    text-decoration: none;
}

.news-text{
    text-align: justify;
    margin-bottom: 10px;
}

.single-news-text-box{
    margin-left: 5px;
    margin-right: 5px;
}

.readmore{
    background-color: var(--header);
    border-radius: 5px;
}

.map-row{
    display: none;
}

.showmap{
    cursor:pointer;
}
.gmap{
    width: 80%;
    height:400px;
    background-color: black;
    margin: 0 auto;

}


.race-table{
    border: 1px solid black;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom: 10px;
}

.race-table .header-row{
    background-color: var(--header);
    color: var(--whitefont);
    height: 55px;
    overflow: hidden;
}

.race-table .header-row .left{
    width: 15%;
    float: left;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
    background-color: var(--header);
}

.race-table .fixture-toggle{
    cursor: pointer;
}

.race-table .title{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    float: right;
    width:75%;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.race-table .title i{
    float: right;
}

.race-table .title .subtitle{
    font-size: 14px;
    text-align: left;
}

.race-table .header{
    background-color: var(--second);
    color: white;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 16px;
}

.race-table .header .number{
    width: 10%;
    float: left;
    text-align: center;
}

.race-table .header .horse {
    width: 60%;
    float: left;
    text-align: center;
}

.race-table .header .odds{
    width: 15%;
    float: left;
    text-align: center;
}

.race-table .row .number{
    width: 10%;
    float: left;
    text-align: center;
}

.race-table .row .horse {
    width: 60%;
    float: left;
    text-align: center;
}

.race-table .row .odds{
    width: 15%;
    float: left;
    text-align: center;
}

.race-table .row{
    height: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.horsetype{
    font-weight: bold;
}

.race-table .row:nth-of-type(2n+1){
    background-color: var(--background);

}


.football-table{
    border: 1px solid black;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom: 10px;
}

.football-table .header-row{
    background-color: var(--header);
    color: var(--whitefont);
    height: 25px;
    overflow: hidden;
}

.football-table .fixture-toggle{
    cursor: pointer;
}

.football-table .title{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    float: left;
    width:90%;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.football-table .title i{
    float: right;
}

.football-table .title .subtitle{
    font-size: 14px;
    text-align: left;
}

.football-table .header{
    background-color: var(--second);
    color: white;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 16px;
}

.football-table .header .number{
    width: 5%;
    float: left;
    text-align: center;
}

.football-table .header .time{
    width: 10%;
    float: left;
    text-align: center;
}

.football-table .header .match {
    width: 85%;
    float: left;
    text-align: center;
}

.football-table .header .odds{
    width: 5%;
    float: right;
    text-align: center;
}

.football-table .row .number{
    width: 5%;
    float: left;
    text-align: center;
}



.football-table .row .time{
    width: 10%;
    float: left;
    text-align: center;
}

.football-table .row .team-home{
    float: left;
    width: 35%;
    position: relative;

}

.football-table .row .team-draw{
    float: left;
    width: 15%;
    position: relative;
}

.football-table .row .team {
    text-align: center;
    border-bottom: none;

}

.football-table .row .draw {
    float: left;
    text-align: center;
    border-bottom: none;
}

.football-table .row .odds{
    float: right;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top:0px;
    right: 5px;
}

.football-table .row{
    height: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.football-table .row:nth-of-type(2n+1){
    background-color: var(--background);

}

.no-fixture{
    padding-top: 10px;
    text-align: center;
    margin:0 auto;
    font-size: 16px;
    font-weight: bold;
}

.help{
    display: none;
    margin: 10px;
}

.help h1{
    color:var(--header);
    font-size: 18px;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
}

.visible{
    display: block;
}
.help h2{
    color:var(--boldfont);
    font-size: 14px;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
}

.help h3{
    color:var(--boldfont);
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.5rem;
}

.help h4{
    color:var(--second);
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.5rem;
}

.help p{
    margin-bottom: 5px;
    margin-top: 5px;
    line-height: 1.5rem;
}

.help strong{
    font-weight: bold;
}

.help em{
    font-style: italic;
}

#left-menu a{
    text-decoration: none;
}

#left-menu a:visited{
    text-decoration: none;
    color: #0B61A4;
}



/*LARGE SCREENS */
@media only screen and (min-width: 1400px) {

    .grid-container {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: 1fr 250px 3fr 250px 1fr;
        width: 90vw;
        min-height: 800px;
    }

    .grid-container-admin {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: 1fr 250px 3fr 0px 1fr;
        width: 90vw;
        min-height: 800px;
    }
    .grid-item {
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 10px;
    }

    .grid-header {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: 1fr 120px 80px 3fr 300px 1fr;
        width: 90vw;
        z-index: 5;
    }

    .grid-header-item {
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .grid-header-item.logo {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 3;
    }



    .grid-header-item.menu {
        grid-column-start: 3;
        grid-column-end: 5;
        min-width: 90%;
    }

    .grid-header-row{
        display: contents;
    }

    .grid-header-row > .grid-header-item{
    }


    .center {
        min-width: 50%;
    }

    .admin-center{
        margin-left: 20px;
        min-width: 500px;
    }

    .mapmobile{
        display: none;
    }

    .footer-betslip{
        display: none;
    }

}



/*SMALLER SCREENS */
@media only screen and (max-width: 1400px) {

    .grid-container {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns:250px 2fr 250px;
        width:100%;
        min-height: 800px;
    }

    .grid-container-admin {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns:250px 2fr 0px;
        width:100%;
        min-height: 800px;
    }

    .grid-item {
        margin-top: 10px;
        margin-left: 5px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 10px;

    }

    .grid-header {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns:100px auto 300px ;
        width: 100%;
    }

    .grid-header-item {
        margin:0px;

    }

    .grid-header-item.logo {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .grid-header-item.menu {
        min-width: 300px;
    }


    .advert-left,.advert-right,.dummy-left,.dummy-right{
        display: none;
    }

    .center{
        min-width: 500px;
    }

    .admin-center{
        margin-left: 20px;
        min-width: 500px;
    }
    .mapmobile{
        display: none;
    }

    .race-table .row{
        height: 32px;
    }

    .footer-betslip{
        margin-left: auto;
        margin-right: auto;
        display: none;
        height: 70px;
        background-color: var(--header);
        width:calc(100% - 20px);
        position: fixed;
        bottom: 0;
        z-index: 100;
        padding: 5px;
        color: var(--whitefont);
        border: 5px solid var(--second);
    }

    .footer-betslip h3{
        margin-top: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        margin-right: 70px;
    }

    .footer-betslip .row{
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        margin-right: 70px;
    }

    .footer-betslip .stake{
        width: 70px;
    }

}
/*LAYOUT ENDS HERE*/



/* MENU LEFT */

.smsfootball-banner{
    text-align: center;
    background-color: #fff;
    padding: 1px;
    margin-bottom:5px;
}
.left-header{
    background-color: var(--second);
    padding:5px;
    color: var(--whitefont);
    font-weight: bold;
}

.left-category-block{
    border-bottom:1px solid var(--maingridbackground) ;
    cursor: pointer;
}

.left-category{
    height: 18px;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;

}

.left-category > .category{
    padding-left: 5px;
    display: block;
    float: left;
    padding-bottom: 5px;
}

.left-category > i {
    float: right;
    padding-right: 5px;
}

.category-subcategory{
    display: block;
}

.left-subcategory{
    border-bottom:1px solid var(--whitefont) ;
    background-color: var(--maingridbackground);
    padding-bottom:5px;
    padding-top: 5px;

}

.left-subcategory:hover{
    background-color:  var(--hoverbutton);
}

.left-subcategory > .subcategory{
    padding-left: 15px;
}

/*MENU LEFT ENDS HERE*/

/*CENTER*/
.refresh:hover{
    text-decoration: underline;
    background-color: var(--second);
}

.refresh:hover{
    cursor: pointer;
}

.main-advert{
    min-height: 10px;
    text-align: center
}

.match-menu{

    background-color:var(--header);

}

.match-menu-item{
    float:left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--whitefont);
}

.match-menu-item.refresh{
    float:right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--whitefont);
}

.match-menu-item:hover{
    background-color: var(--second);
    color: var(--solidfont);

}

.match-menu-item.selected{
    background-color: var(--hoverbutton);
    color: var(--solidfont);
}

.market-menu{
    background-color:var(--second);
}

.market-menu-item{
    padding: 0px;
    color: var(--whitefont);
    float:left;
}

.market-menu-item.selected{
    background-color:  var(--hoverbutton);
    color: var(--solidfont);
}

.menu-date{
    float:left;
    cursor:pointer;
    text-align:center;
    padding:5px;
    border-right: 1px solid var(--whitefont)
}

.menu-date.selected{
    background-color:var(--hoverbutton);
    color:#000000;
}

.main-subcategory-title{
    background-color: var(--maingridbackground);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    color: var(--second);
}

.main-match-block{
    background-color:var(--whitefont);
}



/*BET SLIP */
.betslip-container{
    position: sticky;
    top:50px;
}
.betslip-toggler{
    display: none;
}

#betslip-icon{
    display: none;
}

#betslip-block{
    position: sticky;
    top:70px
}

#betslip-block > .title{
    text-align: center;
    font-weight: bold;
    background-color: var(--second);
    padding:5px;
    color: var(--whitefont);
    font-weight: bold;
}


#magazine-block{
    padding-top:20px;
}

#magazine-block > .title{
    text-align: center;
    font-weight: bold;
    background-color: var(--second);
    padding:5px;
    color: var(--whitefont);
    font-weight: bold;
}

.betslip-remove{
    top: 2px;
    right: 15px;
    position: absolute;
}

.betslip-match{
    float: left;
    padding: 2px;
}

.betslipodds{
    font-weight: bold;
}

.betslip-match-name{
    font-weight: bold;
}

.betslip-selection{
    width: 100%;
    padding: 2px;
    border: var(--border) 1px solid;
    background-color: var(--whitefont);
    position: relative;
}
.popup{
    position: relative;
}

.ssingle,.stakeaccumulator,.stakefullcover{
    width: 65px;
    padding-top: 2px;
    padding-bottom: 2px;
    border:1px solid var(--solidfont);
    height: 22px;
}

.input-block{
    margin-top: 2px;
    float: left;

}

.po{
    background-color: var(--hoverbutton);
    position: absolute;
    top:10px;
    left:20px;
    padding:5px;
    border-radius: 3px;
    border:1px solid var(--solidfont);
    font-weight: bold;
}

#betslip-selection{
    max-height: 50vh;
    overflow-y:scroll;
    overflow-x:hidden;
}

.book-single-btn{
    margin-top: 2px;
    background-color: var(--hoverbutton) ;
    font-weight: bold;
    font-size: smaller;
    border-radius: 3px;
    border: 1px solid var(--solidfont);
    height: 28px;

}

.book-single-btn:hover{
    cursor: pointer;
    background-color: var(--second);
    transform: scale(1.1);
}

#betslip-clearall{
   padding: 2px;
    text-align: right;
    display: none;
}


#betslip-clearall:hover{
    cursor: pointer;
}

#betslip-summary{
    font-size:medium;
    display: none;
}

#placeBet{
    display: none;
}

.input-block-btn{
    width: 50px;
    float: left;
}

.input-label{
    width: 20px;
    float: left;
    margin-top: 8px;
}

.book-single:hover{
    cursor:pointer;

}

.bet-name{
    font-weight: bold;
}
.book-single{
    margin-top: 0px;
    padding-top: 2px;

}


/*BETSLIP VALIDATION*/
.text-center{
    text-align: center;
}

#printticket{
    font-size:large;
    padding: 5px;
}

.coupon-number{
    background-color:  var(--hoverbutton);
    font-weight: bold;
    padding: 3px;
}

#betslip-summary{
    padding: 5px;
    text-align: center;
    background-color: var(--solidfont);
    color: var(--whitefont);
}

#printticket.alert-danger{
    background-color: var(--danger);
}


.result-subcategory-title{
    background-color: var(--header);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    color: white;
}
.result-match-market{
    background-color: var(--maingridbackground);
    display: none;
}
.result-match-time{
    font-size: x-small;
    align-content: center;
    text-align: center;
    font-weight: bold;
    padding-top: 7px;
    width: 10%;
    float: left;
    height: 20px;
}
.result-match-selection{
    float: left;
    padding: 6px 0px 0px 3px ;
}

.result-more{
    float: right;
}

.result-more > .button-more{
    float:left;
    color:  var(--second);
    padding:5px 5px 5px 10px;
    margin: inherit;
}
.result-ft{
    float: right;
    font-weight: bold;
    padding: 6px 10px 0px 10px;
}.result-ht{
     float: right;
     font-weight: bold;
     padding: 6px 10px 0px 10px;
 }
.result-match-market-title{
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    float: left;
}
.result-match-selections{
    float: left;
    padding: 6px 10px 0px 10px;
}

.result-expand{
    float: right;width: 20px
}

.ticket-lost{
    background-color: var(--danger);
    padding: 5px;
    height: 100%;
    width: 50%;
}
.ticket-won{
    background-color: var(--success);
    padding: 5px;
    height: 100%;
    width: 50%;
}

/*MOBILE*/
@media only screen and (max-width: 600px) {

    #main-menu{
        background-color: var(--header);
        position: fixed;
        top: 47px;
        left: 0;
        z-index: 15;
        width: 100%;
        display: none;
        height: 100vh;
    }


    .menu-toggle .toggler{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 20;
        cursor: pointer;
        width: 48px;
        height: 48px;
        opacity: 50%;
        padding: 0px;
        margin: 0px;
        opacity: 0%;
    }

    .logo{
        margin-left: 60px;
        margin-top: 3px;
    }

    .menu-toggle .toggler:checked + .hamburger > div{
        transform: rotate(135deg);
    }

    .menu-toggle .toggler:checked + .hamburger > div:before,
    .menu-toggle .toggler:checked + .hamburger > div:after{
        top:0;
        transform: rotate(90deg);
    }

    .menu-toggle .toggler:checked:hover + .hamburger > div{
        transform:rotate(225deg);
    }

    .menu-toggle .hamburger{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 17;
        width: 16px;
        height: 16px;
        padding:1rem;
        background-color: var(--header);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-toggle .hamburger > div {
        position: relative;
        width: 100%;
        height: 2px;
        background-color: var(--hoverbutton);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;

    }

    .menu-toggle .hamburger > div:after {
        content:'';
        position: absolute;
        z-index: 17;
        top: -10px;
        width: 100%;
        height: 2px;
        background-color: inherit;
    }

    .menu-toggle .hamburger > div:before {
        content:'';
        position: absolute;
        z-index: 17;
        top: 10px;
        width: 100%;
        height: 2px;
        background-color: inherit;
    }

    .menu-toggle .toggler:checked ~ #main-menu{
        display: block;
    }


    .grid-container{
        z-index: 10;
    }

    #main-menu li{
        float:none;
        display:block;
        border-bottom: var(--second) 1px solid;

    }

    #main-menu li a{
        width: 100%;
        display: block;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    body {
        max-width: 600px;
    }

    .grid-container,.grid-header{
        display:inline-block;
    }

    .center{
        margin-left: 5px;;
        margin-right: 5px;;
        min-width: 0px;
    }

    #left-menu{
        display: none;
    }

    .left-header{
        padding: 10px;
        padding: 10px;
    }

    .left-subcategory{
        padding: 10px;
        padding: 10px;
    }



    .toggle-category{
        display: inline;
    }


    .betslip-container{
        position: fixed;
        top:0;
        right: 0;
        z-index: 11;
        width: 50px;
        height: 50px;

    }


    #betslip-block{
        position: absolute;
        top:50px;
        right: 0;
        z-index: 11;
        background-color: var(--background);
        width: 100vw;
        display: none;
        height: 100vh;
    }

    #magazine-block{
        display:none;
    }

    #betslip-block > div{
        background-color: var(--background);
    }

    .betslip-toggler{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 12;
        width: 47px;
        height:47px;
        background-color: red;
        opacity: 0%;
        padding: 0;
        margin: 0;
    }

    #betslip-icon{
        display: block;
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 70px;
        height:43px;
        background-color: var(--hoverbutton);
        font-weight: bold;
        text-align: center;
        padding-top:5px;

    }

    .betslip-toggler:checked ~ #betslip-block{
        display: block;
        min-height: 50px;
        background-color: var(--background);
    }



    .race-table{
        border: 1px solid black;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        margin-top:10px;
        margin-bottom: 10px;
    }

    .race-table .header-row{
        background-color: var(--header);
        color: var(--whitefont);
        height: 55px;
        overflow: hidden;
    }

    .race-table .header-row .left{
        width: 20%;
        float: left;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
        background-color: var(--header);
    }

    .race-table .fixture-toggle{
        cursor: pointer;
    }

    .race-table .title{
        font-size: 14px;
        font-weight: bold;
        text-align: left;
        float: right;
        width:70%;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .race-table .title i{
        float: right;
    }

    .race-table .title .subtitle{
        font-size: 12px;
        text-align: left;
    }

    .race-table .header{
        background-color: var(--second);
        color: white;
        padding-top: 2px;
        padding-bottom: 2px;
        height: 16px;
    }

    .race-table .header .number{
        width: 10%;
        float: left;
        text-align: center;
    }

    .race-table .header .horse {
        width: 50%;
        float: left;
        text-align: center;
    }

    .race-table .header .odds{
        width: 15%;
        float: left;
        text-align: center;
    }

    .race-table .row .number{
        width: 10%;
        float: left;
        text-align: center;
    }

    .race-table .row .horse {
        width: 60%;
        float: left;
        text-align: center;
    }

    .race-table .row .odds{
        width: 15%;
        float: left;
        text-align: center;
    }

    .race-table .row{
        height: 16px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .race-table .row:nth-of-type(2n+1){
        background-color: var(--background);

    }


    .football-table{
        border: 1px solid black;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        margin-top:10px;
        margin-bottom: 10px;
    }

    .football-table .header-row{
        background-color: var(--header);
        color: var(--whitefont);
        height: 25px;
        overflow: hidden;
    }

    .football-table .fixture-toggle{
        cursor: pointer;
    }

    .football-table .title{
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        float: left;
        width:90%;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .football-table .title i{
        float: right;
    }

    .football-table .title .subtitle{
        font-size: 14px;
        text-align: left;
    }

    .football-table .header{
        background-color: var(--second);
        color: white;
        padding-top: 2px;
        padding-bottom: 2px;
        height: 16px;
    }

    .football-table .header .number{
        width: 5%;
        float: left;
        text-align: center;
    }

    .football-table .header .time{
        width: 10%;
        float: left;
        text-align: center;
    }

    .football-table .header .match {
        width: 85%;
        float: left;
        text-align: center;
    }

    .football-table .header .odds{
        width: 5%;
        float: right;
        text-align: center;
    }

    .football-table .row .number{
        width: 5%;
        float: left;
        text-align: center;
    }

    .football-table .row .time{
        width: 10%;
        float: left;
        text-align: center;
    }

    .football-table .row .team-home{
        float: left;
        width: 35%;
        position: relative;

    }

    .football-table .row .team-draw{
        float: left;
        width: 15%;
        position: relative;
    }

    .football-table .row .team {
        text-align: center;
        border-bottom: none;

    }

    .football-table .row .draw {
        float: left;
        text-align: center;
        border-bottom: none;
    }

    .football-table .row .odds{
        font-weight: bold;
        position: relative;
        float: none;
    }

    .football-table .row .odds-home{
        text-align: right;
    }

    .football-table .row .odds-draw{
        text-align: center;
    }

    .football-table .row .odds-away{
        text-align: left;
    }

    .football-table .row .name-home{
        margin-right: 5px;
        text-align: right;
    }

    .football-table .row .name-away{
        text-align: left;
    }

    .football-table .row{
        height: 32px;
        padding-top: 2px;
        padding-bottom: 2px;
        text-align: center;
    }

    .football-table .row:nth-of-type(2n+1){
        background-color: var(--background);

    }

    .map{
        display: none;
    }

    .mapmobile{
        padding-top:5px;
        display: block;
    }

    .race-table .row{
        height: 16px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

}