.live-matches .live-header {
    background: #3c3b3bc4;
    color: #fff;
    font-size: 11px;
    align-items: center;
}

    .live-matches .live-header .league-checkbox {
        padding-left: 10px;
    }

        .live-matches .live-header .league-checkbox input {
            margin-top: 7px;
        }

.live-header {
    display: grid;
    grid-template-columns: 0.1fr 2.5fr 0.4fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "league-checkbox league-name league-togge";
}

    .live-header > .league-checkbox {
        grid-area: league-checkbox;
    }

    .live-header > .league-name {
        grid-area: league-name;
    }

        .live-header > .league-name img {
            height: 23px;
            width: 21px;
            display: inline-block;
            margin-right: 6px;
            margin-top: -1px;
        }

    .live-header > .league-togge {
        grid-area: league-toggle;
    }

.live-football-row {
    display: grid;
    grid-template-columns: 0.4fr 0.7fr 2.2fr 0.4fr 2.2fr 0.4fr 0.5fr 0.4fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "match-favorite match-state match-home-team match-score match-away-team match-half-time match-play match-iddaa-icon";
    align-items: center;
}
    
    .live-football-row > .match-favorite {
        grid-area: match-favorite;
    }

    .live-football-row > .match-state {
        grid-area: match-state;
        margin: 1px 0px 0 3px;
    }

        .live-football-row > .match-state .minute:after {
            content: "'";
            animation: blink 1.2s infinite;
        }

    .live-football-row.live > .match-state {
        color: red;
    }

    .live-football-row > .match-home-team {
        text-align: right;
        grid-area: match-home-team;
        margin: 0 4px 0 0;
        cursor:pointer;
    }

    .live-football-row > .match-away-team {
        text-align: left;
        grid-area: match-away-team;
        margin: 0px 0 0px 4px;
        cursor:pointer;
    }

    .live-football-row > .match-score {
        text-align: center;
        grid-area: match-score;
        cursor:pointer;
    }

    .live-football-row.live > .match-score {
        color: red;
    }

    .live-football-row > .match-half-time {
        grid-area: match-half-time;
    }

    .live-football-row > .match-iddaa-icon {
        text-align: center;
        grid-area: match-iddaa-icon;
        background: url(../images/iddaa-icon.png) no-repeat center center;
    }

    .live-football-row > .match-iddaa-icon.hide {
        grid-area: match-iddaa-icon;
        background: none;
    }

    .live-football-row.live > .match-iddaa-icon.iddaaLive {
        background: url(../images/iddaa-icon-red.png) no-repeat center center;
    }

@media (max-width: 415px) {
    .live-header {
        grid-template-columns: 0.3fr 2.5fr 0.2fr;
    }

    .live-football-row {
        grid-template-columns: 0.4fr 2.5fr 0.4fr 0.4fr 0.3fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "match-favorite match-home-team match-state match-score match-iddaa-icon" "match-favorite match-away-team match-state match-score match-iddaa-icon";
    }

        .live-football-row > .match-half-time {
            grid-area: match-half-time;
            display: none;
        }

        .live-football-row > .match-home-team {
            text-align: left;
        }

        .live-football-row > .match-away-team {
            margin: 0px 0 0px 0px;
        }

    .live-football-header > .league-name img {
        margin: 0 0px 0px 6px;
    }
    
}


@media (min-width:320px) and (max-width:410px) {
    .live-football-row > .match-state {
        grid-area: match-state;
        margin: 1px 0px 0 -32px;
    }
    
}
    @media (max-width: 766px) {
        
        .live-football-header > .league-name {
            grid-area: league-name;
            margin: 0 0 0 2px;
        }

    }

    .calendar {
        margin-left: 0;
        white-space: nowrap;
        background-color: transparent;
    }

    .calendar {
        background-color: #414141;
    }

    .calendar__nav {
        flex: 0 0 10px;
        color: #a3a3a3;
    }

    .calendar__direction {
        background-color: #2d2d2d;
        justify-content: center;
        width: 17px;
    }

        .calendar__direction:after {
            content: "";
            border-style: solid;
            display: inline-block;
            width: 8px;
            height: 8px;
            position: relative;
            transform: rotate(-45deg) translate(-1px,1px);
        }

    .calendar__direction--yesterday:after {
        margin-left: 2px;
        border-width: .15625em 0 0 .15625em;
        top: -1px;
    }

.calendar__datepicker {
    position: relative;
    padding-left: 9px;
    padding-right: 9px;
    width: 100%;
    justify-content: center;
    background-color: #c0c0c0;
    order-right: 1px solid var(--dark);
    border-left: 1px solid var(--dark);
    color: #0f0f0f;
}

    .calendar__datepicker, .calendar__direction, .calendar__nav {
        height: 37px;
        cursor: pointer;
    }

    .calendar, .calendar__datepicker, .calendar__direction, .calendar__nav {
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .calendar__direction--tomorrow:after {
        margin-right: 2px;
        border-width: 0 .15625em .15625em 0;
        top: -1px;
    }

    .calendar__direction:after {
        content: "";
        border-style: solid;
        display: inline-block;
        width: 8px;
        height: 8px;
        position: relative;
        transform: rotate(-45deg) translate(-1px,1px);
    }

   @media (min-width: 280px) and (max-width: 456px) {
        .calendar {
            width: 440px !important;
        }
    }

.canlisonuclarmenu {
    display: grid;
    grid-template-columns: 1.7fr 1.7fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "soccer basket";
    font-weight: 600;
    margin-bottom: 1px;
    background-color: #cececee6;
    height: 40px;
    text-align: center;
    align-items: center;
    color: #0f0f0f;
    font-weight: 600;
}
    /*.canlisonuclarmenu div:hover {
        background-color: #888888;
        color: #fff;
        font-weight: 600;
    }
    .canlisonuclarmenu div:active {
        background-color: #888888;
        color: #fff;
        font-weight: 600;
    }*/

    .canlisonuclarmenu div.basket.active {
        background-color: #e75d17eb;
        color: #fff;
        padding: 6px;
    }
    .canlisonuclarmenu div.soccer.active {
        background-color: #346714eb;
        color: #fff;
        padding: 6px;
    }

        .canlisonuclarmenu div.active a span {
            color: #fff;
        }


   /* .canlisonuclarmenu div:hover {
        background-color: #888888;
        padding: 6px;
        color: #fff;
    }*/
    .canlisonuclarmenu div.soccer:hover {
        background-color: #346714eb;
        padding: 6px;
        color: #fff;
    }

    .canlisonuclarmenu div.basket:hover {
        background-color: #e75d17eb;
        padding: 6px;
        color: #fff;
    }

        .canlisonuclarmenu div:hover a span {
            color: #fff;
        }

    .canlisonuclarmenu.soccer {
        grid-area: soccer;
    }

    .canlisonuclarmenu.basket {
        grid-area: basket;
    }

    @media (max-width:478px){
        .canlisonuclarmenu div.active {
            padding: 9px;
            margin: -1px 0px 0 0px;
        }
    }


   

   /* kupon*/
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "coupon";
}

.coupon {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.5fr 0.3fr;
    gap: 0px 0px;
    grid-template-areas:
        "coupon-head"
        "coupon-cont"
        "coupon-total";
    grid-area: coupon;
    position: relative;
    padding: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 6px;
    margin: 0 0 8px 0px;
    background: #0f0f0f;
}

.coupon-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "author-detail coupon-info coupon-status";
    grid-area: coupon-head;
}

.author-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "author-photo author-name";
    grid-area: author-detail;
}

.author-photo {
    grid-area: author-photo;
    width: 95px;
}


.author-name {
    grid-area: author-name;
    margin: auto;
    color: #ffffff;
    text-align: center;
}

.coupon-info {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "coupon-daily"
        "coupon-date";
    grid-area: coupon-info;
    color: #ffffff;
}

.coupon-daily {
    grid-area: coupon-daily;
    margin: auto;
    color: #ffffff;
    text-align: center;
}

.coupon-date {
    grid-area: coupon-date;
    margin: auto;
    color: #ffffff;
}

.coupon-status {
    grid-area: coupon-status;
}

.coupon-cont {
    display: grid;
    grid-template-columns: 2fr 0.6fr 0.4fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "coupon-teams match-odd match-status";
    grid-area: coupon-cont;
    position: relative;
    float: left;
    background: #F1F3F3;
    width: 100%;
    border-radius: 6px;
}

.coupon-teams {
    grid-area: coupon-teams;
    margin-top: 2px;
    color: #1e2021;
    font-weight: bold;
    font-size: 12px;
    padding: 0 0 0 13px;
}
.tahmin {
    color: gray;
    font-size: 12px;
    padding-bottom: 1px;
    padding-top: 0;
    padding-left: 20px;
}
.match-odd {
    grid-area: match-odd;
    position: relative;
    margin: 0px auto;
    width: 59px;
    height: 41px;
    text-align: center;
    margin-top: 7px;
    margin-bottom: 2px;
    padding-top: 9px;
    padding-bottom: 7px;
    border: 1px solid #D6D5C9;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: white;
}

.match-status {
    grid-area: match-status;
}

.coupon-total {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr;
    grid-template-rows: 0.2fr;
    gap: 0px 0px;
    grid-template-areas:
        "coupon-text total-odd";
    grid-area: coupon-total;
}

.coupon-text {
    grid-area: coupon-text;
    right: -10px;
    font-size: 16px;
    color: #ffffff;
}

.total-odd {
    grid-area: total-odd;
    left: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.author-combo-item-detail-odd img {
    width: 42px;
    top: 9px;
    position: relative;
}

.author-combo-item-detail-odds img {
    width: 49px;
    top: 17px;
    position: relative;
    left: 109px;
}
@media (max-width:767px) {
    .author-combo-item-detail-odds img {
        left: 45px !important;
    }
}
/* For presentation only, no need to copy the code below */
.grid-container * {
    /*border: 1px solid red;*/
    position: relative;
}

.coupon-1 {
    background: #0f0f0f;
}

.coupon-2 {
    background: rgb(0, 134, 65);
}

.coupon-3 {
    background: #d40404;
}

@media only screen and (max-width: 768px) {
    .searchFilter {
        width: 175px;
        margin-top: 2px;
    }
}

@media (min-width: 540px) and (max-width:767px) {
    .searchFilter {
        width: 440px;
        margin-bottom: 2px;
    }
    .input-group {
        width: 525px;
        margin-bottom: 2px;
    }
}

@media (min-width: 400px) and (max-width:539px) {
    .searchFilter {
        width: 440px;
        margin-bottom: 2px;
    }
    .input-group {
        width: 395px;
        margin-bottom: 2px;
    }
}

@media (min-width: 375px) and (max-width: 399px) {
    .searchFilter {
        width: 440px;
        margin-bottom: 2px;
    }

    .input-group {
        width: 360px;
        margin-bottom: 2px;
    }
}

@media (min-width: 360px) and (max-width: 374px) {
    .searchFilter {
        width: 440px;
        margin-bottom: 2px;
    }

    .input-group {
        width: 345px;
        margin-bottom: 2px;
    }
}

@media (min-width: 320px) and (max-width: 359px) {
    .searchFilter {
        width: 440px;
        margin-bottom: 2px;
    }
    .input-group {
        width: 305px;
        margin-bottom: 2px;
    }
}

@media (min-width: 280px) and (max-width: 319px) {
    .searchFilter {
        width: 440px;
        margin-bottom: 2px;
    }
    .input-group {
        width: 263px;
        margin-bottom: 2px;
    }
}

.searchFilter {
    margin-left: auto;
    background: #282828;
    height: 32px;
    border-radius: 20px;
    border: 0;
}

    .searchFilter .input {
        float: left;
        background: transparent;
        width: calc(100% - 46px);
        height: 32px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        padding: 0 18px;
        outline: none;
        border: 0;
    }

    .searchFilter .submit {
        float: right;
        width: 46px;
        cursor: pointer;
        height: 32px;
        background: url(../images/search.png) no-repeat center center;
        text-indent: -9999px;
        padding: 9px 0;
        border: 0;
    }
    /*kupon*/