body {
    overflow-x: hidden;
}


.buttonHolder{
    width: 60%;
    text-align: center;
    border: solid 1px #13232d;
    border-radius: 8px;
    table-layout: fixed;
}

@media only screen and (max-width: 1100px) {
    .buttonHolder{
        width: 100%;
        text-align: center;
        border: solid 1px #13232d;
        border-radius: 8px;
    }
}
.dateBtn {
    padding: 6px;
}
.datesHolder {
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    gap: 5px;
    width: 100%;
    height: auto;    
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.datesHolder::-webkit-scrollbar {
    display: none;
}

@media only screen and (max-width: 1100px) {
    .datesHolder {
        width: 100%;
    }
}

.countryList{
    display: block;
    overflow-x: visible;
    overflow-y: visible;
    width: 60%;             /* this changed */
    height: auto;
    
}
#loadMarkets {
    width: 60%;
}
@media only screen and (max-width: 1100px) {
    .countryList{
        width: 100%;
    }
    #loadMarkets {
        width: 100%;
    }
}
.countryItem{
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-align: left;
    padding: 0px;
    cursor: pointer;
    font-size: 14px;
}
.checked{
    background: #0077db;
}
.leagueList{
    width: 100%;
    background: #121f27;
}

@media only screen and (max-width: 1100px) {
    .leagueList{
        width: 100%;
    }
}
.leagueItem {
background: #121f27;
        padding: 5px 8px;
    width: 100%;
    text-align: left;
    border-radius: 0px 0px 5px 5px;
}
.leagueHeader, .marketHeader{
background: #203743;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
    width: 100%;
    border-radius: 5px;
}
.fixturesContainer {
        display: flex;
    flex-wrap: wrap;
    gap: 0px 8px;
    justify-content: left;
    text-align: left;
}
.fixtureItem{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    margin-bottom: 0px;
    padding: 12px;
    background: #203743;
    border-top: solid 1px #395565;
    cursor: pointer;
    transition: all 0.2s;
}
.fixtureItem:hover {
    background: #243f4c;
    transition: all 0.2s;
}

.fixtureItem table {
    width: 50%;
}

.groupDate table {
    width: 100%;
}
@media only screen and (max-width: 768px) {
    .fixtureItem table {
        width: 100%;
        margin-bottom: 10px;
    }
    .groupDate table {
        margin-bottom: 0px;
    }
}

.fixtureTitleTeams {
    text-align: center;
    position: relative;
    top: -168px;
    background: #1a2e39d4;
    width: 50%;
    border-radius: 10px;
    padding: 10px;
}

@media only screen and (max-width: 768px) {
    .fixtureTitleTeams {
        text-align: center;
        position: relative;
        top: -165px;
        background: #090f136b;
        padding: 10px;
        width: 100%;
        border-radius: 0px;
    }
}

@media only screen 
  and (min-width: 480px) 
  and (min-width: 768px) 
  and (max-width: 1024px)
  and (orientation: portrait) {
    .fixtureItem {
        width:100%;
        float: left;
    }
}

.homeTeam {
    margin: 2.5px 0px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.awayTeam {
    margin: 2.5px 0px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.kickoff {
color: #9fbed0;
    margin: 0px 0px 10px;
}

.matchCount {
font-weight: bold;
    border: solid 1px #395565;
    padding: 0px 6px;
    border-radius: 23%;
    background: #324b59;
    color: #969c9f;
    font-size: 11px;
}



@media only screen and (max-width: 768px) {
    .oddsWrapper {
        height: fit-content;
        position: relative;
        top: -105px;
    }
}

.backToFixtures {
    background: #395565;
    padding: 11px 16px;
        border-radius: 10px;
    color: #fff;
    font-size: 14px;

}



.imgIdentify {
width: 18px;
    vertical-align: middle;
    border-radius: 7px;
    margin-right: 4px;
}

/* country header flag */
.countryHeader img.countryFlag {
    width: 16px;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 2px;
}



#searchBar {
    width: 100%;
    box-sizing: border-box;
}

#searchBarHolder {
    display: inline-block;
}
@media only screen and (max-width: 768px) {
    #searchBarHolder {
        position: fixed;
        width: 100%;
        left: 0px;
        top: 67px;
        display: block;
        background: #13232d;
        text-align: center;
        color: #fff;
        padding: 0px;
        outline: none;
        z-index: 7;
    }
}

@media screen and (max-width: 768px) {
    input[type="date"] {
        width: 100%;
        padding: 9.5px;
        box-sizing: border-box;

    }
}


.banner_fixture {
    background-image: url('./img/banner_fixture.png');
    background-repeat: no-repeat;
    background-position: 50% 35%;
    background-size: cover;
    background-color: #203743;
    height: 190px;
    border-radius: 10px;
        margin-top: 20px;
}

.fieldBackgroundMobile {
    display: none;
}

@media only screen and (max-width: 768px) {
    .fieldBackgroundMobile {
        display: block;
        width: 100%;
        position: relative;
        top: 25px;
        border: solid 1px #3955654a;
        padding: 5px;
        background: #3955654a;
        border-radius: 12px;
    }
    .banner_fixture {
        display: none;
    }
}




.oddsContainer {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border-top: solid 2px #395565;
    padding: 8px;
}

.marketsSearchContainer {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    top: -145px;
}
@media only screen and (max-width: 768px) {
    .marketsSearchContainer {
        top: -120px;
    }
}

.oddsWrapper {
    top: -140px;
    position: relative;
}
@media only screen and (max-width: 768px) {
    .oddsWrapper {
        top: -113px;
    }
}

.marketTabsHolder {
     display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 12px;
    border: solid 1px #00000052;
    background: #00000052;
    padding: 5px;
    border-radius: 50px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.marketTabsHolder::-webkit-scrollbar {
    display: none;
}

.marketTabBtn {
    flex-shrink: 0;
    background: transparent;
    color: #ffffff;
    border: solid 1px #121f27;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    padding: 10px;
    font-size: 14px;
}

.marketTabBtn:hover {
    background: #1a2e39;
    border: solid 1px #1a2e39;
}

.marketTabBtn.checked {
background: #395565;
    border-color: #395565;
}

.marketItem {
    background: #203743;
    border-radius: 5px;
    margin-bottom: 5px;
    box-shadow: 0 0 5px #13232d;
}
.marketItem.hidden-market {
    display: none;
}
#marketSearchBar {
    width: 100%;
    margin-bottom: 12px;
    box-shadow: 0 0 4px #13232d;
}


#betSlipWeb {
    width: 300px;
    background: #0076d8;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
    z-index: 2;
}
#betSlipWeb img {
       width: 20%;
    vertical-align: middle;
    filter: drop-shadow(0px 0px 0px #fff);
}
.betSlipText {
    font-weight: bold;
}

#betSlipLoader {
    height: 71vh;
    overflow-x: auto;
}

@media only screen and (max-width: 768px) {
    #betSlipWeb {
        display: none;
    }    
}
#betSlipCountWeb {
font-weight: bold;
    background: #fff;
    border-radius: 5px;
    color: #0076d8;
    padding: 1px 7px;
    font-size: 13px;
}
#betSlipWebContent {
    width: 300px;
    background: #13232d;
    position: fixed;
    top: 60px;
    height: 95vh;
    text-align: center;
    z-index: 1;
    overflow-y: auto;
    right: 0;
    display: none;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0.35s ease;
}
#betSlipWebContent.is-open,
#betSlipWebContent.open {
    display: flex !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
#betSlipWebContent.is-closing {
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
}
@media only screen and (max-width: 768px) {
    #betSlipWebContent{
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;

        height: 95vh;
        max-height: 95vh;
        transform: translateY(110%);
    }
    #betSlipWebContent.is-open,
    #betSlipWebContent.open {
        transform: translateY(0);
    }
    #betSlipWebContent.is-closing {
        transform: translateY(110%);
    }
}

#betSlipsHolder {
    width: 95%;
    margin-top: 8px;
    padding: 5px;
}
.closeBtn2 {
    border: solid 1px #324b59;
    background: #324b59;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
}
.textbox2 {
    padding: 10px;
    font-size: 14px;
    background: #324b59;
    border: solid 1px #324b59;
    border-radius: 4px;
    color: #fff;
    outline: none;
}

.betslipItem {
    background: #203743;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 10px;
}
.betslipItemMatches{
    border-top: solid 2px #13232d;
    margin-top: 5px;
    padding-top: 10px;
}


.groupDate {
    font-size: 12px;
    padding: 2px 7px;
    background: #203742;
    color: #9fbed0;
}
.groupDate:hover {
    background: #203742;
}
.groupDate .material-symbols-outlined {
    font-size: 13px;
    vertical-align: middle;
    -webkit-vertical-align: middle;
    -moz-vertical-align: middle;
    color: #9fbed0;
}


#menuLeftDiv{
    width: 300px;
    background: #13232d;
    position: fixed;
    top: 60px;
    height: 95vh;
    text-align: center;
    z-index: 1;
    overflow-y: auto;
    left: 0;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-110%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0.35s ease;
    margin-top: -3px;
}
#menuLeftDiv.open-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
#menuLeftDiv.open-menu-mobile {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
#menuLeftDiv.close-top-menu {
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
}
@media only screen and (max-width: 768px) {
    #menuLeftDiv{
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        height: 95vh;
        max-height: 95vh;
        transform: translateY(110%);
    }
    #menuLeftDiv.open-menu-mobile {
        transform: translateY(0);
    }
    #menuLeftDiv.open-menu {
        transform: translateX(0);
    }
}





.oddBtn {
    border: solid 1px #16252d;
    background: #16252d;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
    color: #f7fafc;
    border-radius: 5px;
     transition: ease-in-out 0.2s;
}
.oddBtn:hover {
    background: #0077db;
    border: solid 1px #0077db;
    color: #fff;
    transition: ease-in-out 0.2s;
}

.upcomingpage {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}


label input[type="radio"]:checked + .oddBtn,
.oddBtn.checked {
    border: solid 1px #0077db;
    background: #0077db !important;
    color: #fff !important;
    transition: ease-in-out 0.2s;
    box-shadow: 0 0 10px #0077db69;
}

em {
    font-weight: bold;
    color: #64b2fa;
    transition: ease-in-out 0.2s;
}

.oddBtn:hover em {
    color: #fff !important;
    transition: ease-in-out 0.2s;
}
label input[type="radio"]:checked + .oddBtn em,
.oddBtn.checked em {
    color: #fff !important;
    transition: ease-in-out 0.2s;
    filter: drop-shadow(0px 0px 1px gold);
}