@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

body {
    font-family: "Lato", sans-serif;
    line-height: 1.2;
    font-size: 15px;
    color: #fff;
    background: #01050a url("/event/assets/wbet/images/match-prediction/bg.jpg")no-repeat top center;
    background-size: cover;
}

a {
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    a:hover, a:focus, button:focus, button:hover, select:focus {
        text-decoration: none;
        outline: none;
    }

img {
    max-width: 100%;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], textarea, select {
    color: #666;
    width: 100%;
}

.t-body {
    overflow: hidden;
}

.max-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
}

.top-sec {
    position: relative;
    padding: 15px 0 45px;
    text-align: center;
}

.title-top {
    margin: -4% auto 0;
}

button.comm-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0 20px;
}

    button.comm-btn:hover, button.history-btn:hover {
        transform: scale(0.97);
        filter: brightness(1.07);
    }

.predict-btn-wrap {
    position: relative;
    max-width: 1085px;
    margin: 0 auto -3%;
}

.token-wrap {
    position: absolute;
    top: -15%;
    left: 0;
}

.token-num {
    position: absolute;
    left: 33%;
    right: 0;
    top: 17%;
    font-size: 42px;
    font-weight: 600;
}

.mytk {
    position: absolute;
    left: 31%;
    right: 0px;
    bottom: 18%;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

button.history-btn {
    background: none;
    border: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: -15%;
}

.prediction-container {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.prediction-wrapper {
    background: rgb(30,87,158,0.2);
    padding: 10px 10px;
}

.match-box {
    padding: 10px 0 0;
}

.predict-game {
    display: grid;
    grid-template-columns: 50% 50%;
    position: relative;
}

.league-img {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    background: url(/event/assets/wbet/images/match-prediction/league.png)no-repeat;
    background-size: 100% 100%;
    width: 186px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    z-index: 3;
    pointer-events: none;
    padding-bottom: 0.7%;
    padding-right: 1%;
}

.match-info {
    position: absolute;
    left: 0;
    right: 0;
    top: 21%;
    text-align: center;
    z-index: 3;
    pointer-events: none;
}

.mdate {
    padding-bottom: 2px;
}

.fbteam {
    margin: 0 -1px;
    position: relative;
    z-index: 2;
}

.team-btn {
    background: url("/event/assets/wbet/images/match-prediction/left-b.png")no-repeat;
    background-size: 100% 100%;
    max-width: 485px;
    height: 67px;
    width: 100%;
    margin: 0 auto;
}

    .team-btn.team2 {
        background: url("/event/assets/wbet/images/match-prediction/right-b.png")no-repeat;
        background-size: 100% 100%;
    }

.input-hide input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    outline: none;
    cursor: pointer;
}

    .input-hide[type="radio"],
    .input-hide input[type="checkbox"] {
        appearance: none;
        display: none;
    }

    .input-hide input:active + .team-btn, .input-hide input:checked + .team-btn {
        background: url("/event/assets/wbet/images/match-prediction/left-b-active.png")no-repeat;
        background-size: 100% 100%;
    }

        .input-hide input:active + .team-btn.team2, .input-hide input:checked + .team-btn.team2 {
            background: url("/event/assets/wbet/images/match-prediction/right-b-active.png")no-repeat;
            background-size: 100% 100%;
        }

.group-left {
    display: grid;
    grid-template-columns: 67px auto;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: -8px;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 15%;
}

.group-right {
    display: grid;
    grid-template-columns: auto 67px;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: -8px;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
    padding-right: 15%;
}

.game-btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0 0;
}

.token-bet-wrap {
    position: relative;
    width: 114px;
    margin-right: 8px;
}

.token-icon {
    position: absolute;
    left: -3px;
    top: -2px;
}

.token-input {
    background: #082675;
    border: 1px solid #3eb7df;
    height: 40px;
    padding-left: 35px;
    color: #fff;
    font-size: 20px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.submit-btn {
    background: none;
    padding: 0;
    border: none;
}

    button.submit-btn:hover {
        transform: scale(0.97);
        filter: brightness(1.07);
    }

.redeem-token-wrapper {
    position: relative;
    margin: -2% auto 25px;
}

.sub-img {
    margin-bottom: -4%;
}

button.redeem-btn {
    background: none;
    border: none;
    padding: 0;
}

button.redeem-btn {
    background: none;
    border: none;
    padding: 0;
}

    button.redeem-btn:hover {
        transform: scale(0.97);
        filter: brightness(1.07);
    }



@media(max-width: 991px) {
    .logo {
        max-width: 40%;
        margin: 0 auto;
    }

    .token-wrap {
        position: relative;
        top: -15%;
        left: 0;
        max-width: 300px;
        margin: 0 auto;
    }

    button.history-btn {
        position: initial;
    }

    .league-img {
        max-width: 19vw;
        font-size: 1.4vw;
    }
}

@media(max-width: 767px) {
    .team-btn {
        height: 60px;
    }

    .gbadge img {
        max-height: 65px;
    }

    .group-left {
        display: flex;
        justify-content: left;
        grid-gap: 6px;
        padding-left: 5%;
        margin-top: -4px;
    }

    .group-right {
        display: flex;
        justify-content: right;
        grid-gap: 6px;
        padding-right: 5%;
        margin-top: -4px;
    }

    .gname {
        font-size: 15px;
    }

    .match-box {
        padding: 74px 0 0;
    }

    .league-img {
        left: 0;
        right: 0;
        top: -62px;
        margin: 0 auto;
        font-size: 14px;
        max-width: max-content;
        background: rgb(0,0,0,0.3);
        height: 23px;
        padding: 1px 12px;
        border-radius: 3px;
    }

    .match-info {
        top: -39px;
    }
}

@media(max-width: 480px) {
    body {
        background-size: 360%;
    }

    .logo {
        max-width: 50%;
    }

    button.comm-btn {
        max-width: 64%;
    }

    button.history-btn {
        max-width: 75%;
    }

    .league-img {
        font-size: 13px;
    }

    .match-info {
        font-size: 14px;
        top: -37px;
    }

    .team-btn {
        height: 53px;
    }

    .group-left {
        padding-left: 0;
        margin-top: -2px;
    }

    .group-right {
        padding-right: 0;
        margin-top: -2px;
    }

    .gname {
        font-size: 3vw;
    }

    .gbadge img {
        max-height: 55px;
    }

    .token-bet-wrap {
        width: 92px;
    }

    .token-icon {
        max-width: 38px;
    }

    .token-input {
        height: 30px;
        padding-left: 26px;
        font-size: 18px;
    }

    button.submit-btn img {
        max-height: 41px;
    }
}

.float-whatsapp {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99;
}

a.whatsapp-btn {
    background: #26b200;
    color: #fff;
    height: 65px;
    width: 65px;
    font-size: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgb(0,0,0,0.75);
}

    a.whatsapp-btn:hover {
        transform: scale(1.07);
        filter: brightness(1.07);
    }

@media(max-width: 767px) {
    a.whatsapp-btn {
        height: 50px;
        width: 50px;
        font-size: 28px;
    }

    .sub-img {
        margin-bottom: -6%;
    }

    button.redeem-btn {
        max-width: 64%;
    }
}

/** Update 14/8/2024 **/
@media(max-width: 991px) {
    button.comm-btn {
        width: 49%;
        margin: 0 auto;
    }

    .predict-btn-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto 2%;
        max-width: 600px;
    }

    .predict-title {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
        margin-bottom: -6%;
    }

    .token-wrap {
        top: 0;
    }
}

@media(max-width: 600px) {
    .token-num {
        font-size: 6.6vw;
    }

    .mytk {
        font-size: 2vw;
    }
}

@media(max-width: 480px) {
    button.history-btn {
        max-width: 100%;
    }
}