﻿
.col-sm-12 {
    padding: 0;
}

.wallchart-container {
    max-width: 918px;
    /* margin: auto; */
    /* background: url('https://webshell.emfeuro.eu/upload/xlarge/a3_qWkfy.jpeg') no-repeat center center fixed; */
    /* background-size: cover; */
    /* backdrop-filter: blur(3px); */
    background: #181818;
    padding: 0 0 1px 0;
}
@media only screen and (min-width: 900px) {
    .wallchart-container {
        margin: 0 5px;
    }
}

    .wallchart-container .message-error, .wallchart-container .message-error ul li {
        color: red;
        text-align: center;
    }

    .wallchart-container .cardx {
        max-width: 80%;
        margin: auto;
        position: relative;
    }

    @media only screen and (max-width: 700px) {

        .wallchart-container .cardx {
            max-width: 100%;
            margin: 20px;
        }

        .wallchart-container.wc-result .cardx {
            margin: 0px;
        }

        .wallchart-container.wc-result .tcards .tcard-body {
            min-width: 80px;
            padding: 3px 3px;
            MARGIN: 0 5px;
        }

        .wallchart-container.wc-result ul.cteams li {
            padding: 3px 3px !important;
        }

            .wallchart-container.wc-result ul.cteams li img {
                width: 27px !important;
                height: 27px !important;
            }
    }



    .wallchart-container .wtitle {
        background: #398bcb;
        background: url('//static.btolat.com/images/wallcharbanner.png');
    }

        .wallchart-container .wtitle > div {
            background: #398bcb;
            opacity: 0.9;
        }

        .wallchart-container .wtitle h1 {
            text-align: center;
            color: #fff;
            /* box-shadow: 0 0 1px rgb(0 0 0 / 15%); */
            font-size: 22px !important;
            font-family: 'Cairo';
            padding: 55px 0 55px 0;
            font-size: inherit;
            margin: 0;
        }

    .wallchart-container .whead {
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        background: linear-gradient(180deg, #222222,#222222, #222222);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 20px 0;
        color: #fff;
    }

    .wcard-body {
        /*   padding: 25px 0;*/
    }


    .wallchart-container .btn-success {
        background-color: #388bcb !important;
        border-color: #4088cb !important;
        /* width: 10%; */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        box-shadow: 0 0 10px 2px #4088cb;
    }


    .wallchart-container .wgroups {
        display: flex;
        justify-content: space-evenly;
        /* flex-wrap: wrap; */
        margin: 20px 5px;
    }

    .wallchart-container a i {
        font-size: 20px;
    }


    .wallchart-container ul.wgroups li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 5px 0;
        text-align: center;
    }


    /*Ggroup stage*/


    .wallchart-container ul.wselector li .img-container {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        margin: 5px auto;
        border: 0px solid #e5e5e5;
        /* box-shadow: 0 0 10px 6px #000000;*/
        position: relative;
        background: #1A1A1A;
    }

        .wallchart-container ul.wselector li .img-container img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 0px solid #e5e5e5;
            margin: 10px 0;
            /* box-shadow: 0 0 10px 6px #000000;*/
        }


    .wallchart-container ul.wselector li.gselected .selectedposition, .wallchart-container ul.round16 li .wfixture.gselected .selectedposition {
        background: #388BCB6B;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        text-align: center;
        color: white;
        line-height: 25px;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 29px;
        font-weight: 700;
        border: 1px solid #388BCB;
        padding: 30%;
    }


    /* .wallchart-container ul.round16 li .wfixture.gselected img {
    background: rgb(0 0 0 / 57%);
    border: 3px solid #2196f3;
    box-shadow: 0 0 10px 2px #03a9f4;
}


*/
    /*Ggroup stage*/






    .wallchart-container ul.wselector li:nth-child(2n+2) {
        /* background: rgb(3 144 244 / 33%);*/
    }




    .wallchart-container ul.wselector li a {
        color: #fff;
        font-size: 14px;
        /* font-weight: 700; */
        width: 100%;
        text-align: center;
    }





        .wallchart-container ul.wselector li a span {
            display: block;
        }







    .wallchart-container .card {
        color: #fff;
        border-radius: 0.25rem;
        margin: 0px 0 15px 0;
        box-shadow: 0 0 1px rgba(0,0,0,.15);
        padding: 0;
        border-radius: 5px;
        background: #1e1e1e;
        /* background: linear-gradient(180deg, #1a64ac,#193c7e, #192b6a);*/
        /* backdrop-filter: blur(3px); */
        /*width: calc((100% / 2) - 3px);*/
    }



    .wallchart-container .leagueTable {
        font-size: 12px;
        color: #fff;
    }

        .wallchart-container .leagueTable tr > th {
            background: inherit;
            box-shadow: 0 2px 2px -1px rgb(0 0 0 / 40%);
            padding: 5px;
            border-bottom: 1px solid white;
            color: #fff;
            font-size: 14px;
        }

        .wallchart-container .leagueTable tr {
        }

            .wallchart-container .leagueTable tr td {
                text-align: right;
            }

            .wallchart-container .leagueTable tr:first-child:hover, .wallchart-container .leagueTable tr:hover {
                background: #4191d5;
            }


    /*--------------------round16-------------------------------*/

    .wallchart-container .wselector.round16 {
        flex-wrap: wrap;
    }

    .wallchart-container ul.round16 li {
        width: 100%;
        padding: 25px 0;
        border-bottom: 1px solid #2b2b2b;
    }

        .wallchart-container ul.round16 li .wfixture {
            display: flex;
            width: 100%;
            text-align: start;
            gap: 3px;
        }

            .wallchart-container ul.round16 li .wfixture:first-child {
                direction: ltr;
            }


        .wallchart-container ul.round16 li .r-vs img {
            width: 80px;
            margin: 85% 0px;
        }

        .wallchart-container ul.round16 li .r-vs:last-child {
            display: none;
        }



        /*
    .wallchart-container ul.round16 li .selectedposition {
        border-radius: 0;
    }
*/
        .wallchart-container ul.round16 li:hover, .wallchart-container ul.round16 li.gselected {
            background: inherit !important;
        }





    /*        .wallchart-container ul.round16 li div:hover, */


    /*.wallchart-container ul.wselector li .gselected .selectedposition {
    background: #4caf50;
    color: #fff;
}
*/

    /*--------------------round16-------------------------------*/





    .wallchart-container .breadcrumb {
        margin: 0px 0 25px 0;
        color: #fff;
        padding: 15px;
        background: #222;
        display: flex;
        justify-content: space-evenly;
    }

        .wallchart-container .breadcrumb a {
        }

        .wallchart-container .breadcrumb li {
            padding: 5px 0px;
            color: #fff;
            font-size: 14px;
        }

            .wallchart-container .breadcrumb li.active {
                position: relative;
                /* background: linear-gradient(180deg, #03a9f4,#388bcb, #03a9f4); */
            }

                .wallchart-container .breadcrumb li.active::after {
                    position: absolute;
                    content: '';
                    top: 110%;
                    width: 60%;
                    left: 23%;
                    background: #4088cb;
                    height: 5px;
                    /* background: linear-gradient(180deg, #03a9f4,#388bcb, #03a9f4); */
                    box-shadow: 0 4px 9px #388bcb;
                    border-radius: 5px;
                }







    /*--------------------tournament-card -------------------------------*/

    .tournament-card li img {
        opacity: .3;
    }




    .tournament-card {
        background: linear-gradient(180deg, #1a64ac,#193c7e, #192b6a);
        padding: 0 0 30px 0;
    }

    .tcards {
        display: flex;
        /* flex-wrap: wrap; */
        justify-content: space-evenly;
    }

        .tcards .tcard-body {
            min-width: 100px;
            background: rgb(24 24 24 / 38%);
            padding: 5px 10px;
            border-radius: 5px;
            max-width: 100px;
        }


    .wallchart-container ul.cteams {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

        .wallchart-container ul.cteams li {
            justify-content: space-between;
            width: 50%;
            padding: 5px;
            text-align: center;
        }

            .wallchart-container ul.cteams li img {
                width: 25px;
                height: 25px;
                border-radius: 50%;
            }


    .wallchart-container ul li {
        color: #fff
    }

        .wallchart-container ul li.po1 {
        }


    .trounds {
        display: flex;
        margin: 20px 0;
        justify-content: space-around;
    }

    .wallchart-container .trounds > ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        width: 100%;
    }


        .wallchart-container .trounds > ul li img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        .wallchart-container .trounds > ul.kteams li span {
            font-size: 9px;
            display: block;
            padding: 5px 0px;
            text-align: center;
            color: #bcb8b8;
        }

    .tournament-card li img.selected {
        opacity: 1;
    }

        .tournament-card li img.selected.winner {
            width: 65px;
            height: 65px;
            border: 2px solid #ffc107;
        }



    ul.kteams {
        position: relative;
    }

    ul.kup::after {
        content: "";
        position: absolute;
        top: 113%;
        height: 6px;
        width: 50%;
        margin: 0 auto;
        border: 1px solid #697b8d;
        border-top: none;
    }

    ul.kdown::before {
        content: "";
        position: absolute;
        top: -10px;
        height: 6px;
        width: 50%;
        margin: 0 auto;
        border: 1px solid #697b8d;
        border-bottom: none;
    }


    .wbuttons {
        display: flex;
        margin: 15px 0;
        gap: 15px;
    }

        .wbuttons .btn-wshare {
            width: 100%;
            background: #1e1e1e;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            padding: 20px 0;
        }

            .wbuttons .btn-wshare i {
                color: #f89c22;
                font-size: 20px;
                display: block;
            }

    .wcopywrights {
        justify-content: center;
        gap: 10px;
        margin: 30px 0;
        /* justify-content: center; */
        height: 46px;
        align-items: center;
    }

        .wcopywrights img {
            height: 25px;
        }

        .wcopywrights .splitter {
            width: 1px;
            background: #eee;
            display: block;
        }



    .bto-logo {
        margin: 0px 0px 15px 0;
        top: 0;
        left: 0;
        background: #181818;
        width: 100%;
    }

        .bto-logo .wcopywrights {
            margin: 0;
        }

    footer {
        border-top: 1px solid #555 !important;
    }


    .bto-widget {
        display: flex;
        width: 95%;
        justify-content: space-evenly;
        margin: 0;
    }

        .bto-widget img {
            height: 23px;
            margin: 3px 0 0 0;
        }

        .bto-widget .bto-text {
            color: #dadada;
            font-weight: 700;
            font-size: 10px;
        }

        .bto-widget p {
            margin-bottom: 0 !important;
        }



.wallchart-container .breadcrumb li.blob::after {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 #f89c22;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgb(230, 226, 16, 0.00);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}