a{
    color: white;
    text-decoration: none;
}

@media screen and (min-width:310px) and (max-width:3000px) {
    .match_main{
        color: white;
        margin: 0 .6rem;
        max-width: 800px;
    }
    .ovf-el{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .select_panel{
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap:40px 10px;
        margin: .8rem 1rem 0.8rem .8rem;
    }
    .select_panel .select_item{
        font-size: 1rem;
        width: 30vw;
        line-height: 3rem;
        height: 3rem;
        border-radius: 5px;
        background-color: #292F37;
    }
    .match_main .v3-match-item .f-row-1{
        display: grid;
        grid-gap: 2vw;
        grid-template-columns: 10% 1fr 6%;
        padding-bottom: 0;margin-top: 12px;margin-bottom: 12px;
        align-items: center;
        background-color: #1A1D23;
    }
    .match_main .v3-match-item .f-row-4{
        display: grid;
        background-color: #292F37;
        height: 36px;
        line-height: 36px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        text-align: center;
        grid-gap: 10px;

    }
    .match_main .v3-match-item .f-row-4 a{
        color: #AFB4BA;
        flex: 1;
        text-align: center;
    }
    .f-row-1 .col-1 .time-str{
        color: #AFB3BA;
    }

    .f-row-1 .col-2{
        font-size: 1.2rem;
        display: grid;
        grid-gap: .8rem;
    }
    .f-row-1 .col-3{
        text-align: center;
    }
    .f-row-1 .col-2 .c2-row-1{
        display: grid;
        grid-template-columns: 1fr 15vw 1fr;
        grid-gap: 3px;
        font-size: 1rem;
        align-items: center;
        text-align: center;
    }
    .f-row-1 .col-2 .c2-row-3{
        text-align: center;
        font-size: 1rem;
    }
    .f-row-1 .col-2 .c2-row-1 .c2-row-1-col1 .ac-col1-content{
        display: flex;
        justify-content: space-around;
    }
     .f-row-1 .col-2 .c2-row-1 .c2-row-1-col2{
         font-size: 1rem;
    }
    .f-row-1 .col-2 .c2-row-1 .c2-row-1-col2 .gray{
        color: #AFB3BA;
    }
    .f-row-1 .col-2 .c2-row-1 .c2-row-1-col2 .red{
        color: #FF3A3A;
    }
    .f-row-1 .col-2 .c2-row-1 .c2-row-1-col3 .ac-col1-content{
         display: flex;
        justify-content: space-around;
    }
    .f-row-1 .col-2 .c2-row-2{
        display: grid;
        grid-template-columns: 1fr 16vw 1fr;
        grid-gap: 3px;

        align-items: center;
        text-align: center;
    }
    .f-row-1 .col-2 .c2-row-2 .home-name{
        text-align: right;
    }
    .f-row-1 .col-2 .c2-row-2 .guest-name{
        text-align: left;
    }
    .f-row-1 .col-2 .c2-row-2 .info{
        background-color: #23262c;
        padding: 0.2rem 0;
    }
    .f-row-1 .col-2 .c2-row-2 .score{
        color: red;
        font-weight: bold;
    }
    .f-row-1 .col-2 .c2-row-2 .vs{
        color: white;
        font-weight: bold;
    }
    .match-icon-img img{
        display: inline-block;
        border: none;
        vertical-align: middle;
    }
    .srcImg img{
        content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAMAAAAhxq8pAAAAAXNSR0IArs4c6QAAAFpQTFRFAAAA/2s8/2w5/2w8/2s8/2s9/2w9/2w8/2w9/2w9/2w9/20//3JF/3JG/3pQ/3tR/4dh/5d2/5h3/5x8/7We/8Cs/9HC/9PF/9PG/+Pa/+/q/+/r//j2////JMX/8gAAAAp0Uk5TACYora7u7vHz9D2xirsAAABySURBVBjTbZBZDoAwCESpuOK+r9z/mhq1tBLnB3gJDABgMCVPKQYAJiKl2AC6qn8jguttJzsBhDXHYFOB9cadhsXKXCmYz3xr9OH4sCX/zqSKeS2VEXW819qdhqMRI1l+am2WuDN76cH/h1yvy3yUhAGcRuIOJANgUc0AAAAASUVORK5CYII=)
    }
    .srcImg2 img{
        content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAMAAAAhxq8pAAAAAXNSR0IArs4c6QAAAE5QTFRFAAAAOXH/M4D/LnT/NXX/Nnn/OXn/OXj/O3r/OXr/OXn/OXn/OXr/OXr/Onn/OXr/OXn/Onr/Onr/Onn/Onr/OXr/Onr/Onr/OXn/Onr/x4SzjgAAABl0Uk5TAAkKCxgmKDFFR6Ktra61trvGx+7u8fHz9HzQOdUAAABoSURBVBjTbZDhDoAgCISv0iy11ErN93/RnFvOjPsDfIwdAHAVU6OoZoCfqdPFoWuBN9GIfxhrZgWE7doHM9iZq7DwVeYol0oKHEOOYaDg9IX9eJHLRqYxIlYilvf0meRDwPXdIr/NeADv0RnLaESmcQAAAABJRU5ErkJggg==);
    }



    .date_panel{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        background-color: #1A1C22;
        align-items: center;
        max-width: 800px;
        margin: auto;
    }
    .date_panel .date_item{
        padding: 1rem 0;
        text-align: center;
    }
    .date_panel .date_item.active a{
        color: #3A7AFF;

    }
    .date_panel .date_item.active{
        border-bottom: 2px solid #3A7AFF;
    }
}

@media screen and (min-width:800px) and (max-width:3000px) {
    .match_main{
        color: white;
        margin: auto;
        max-width: 800px;
    }
    .select_panel{
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: auto;
        max-width: 800px;
    }
    .select_panel .select_item{
        width: auto;
    }
}