html {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    background: url(../images/bg_parlayarea.png?20140404);
    height: 100%
}

body {
    background: url(../images/bg_parlayarea.png?20140404);
    font-family: Arial;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

*, *:before, *:after {
    box-sizing: inherit
}

a {
    text-decoration: none
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none
}

h1, h3 {
    margin: 0;
    padding: 0
}

.loading {
    position: fixed;
    z-index: 20001;
    height: 100%;
    width: 100%;
    text-align: center;
    top: 0
}

    .loading .loader {
        margin: 21% auto;
        width: 90px;
        height: 80px;
        padding-top: 24px;
        background-color: rgba(0,0,0,.7);
        text-align: center;
        border-radius: 10px
    }

@media screen and (orientation:landscape) {
    .loading .loader {
        margin: 9% auto
    }
}

.copyRight {
    width: 100%;
    height: 25px;
    padding: 8px 0 0;
    text-align: center;
    display: block;
    margin: 0 auto;
    float: left
}

    .copyRight p {
        font-size: 7px;
        font-family: AppleGothic;
        color: #959595;
        margin: 0
    }

.clear {
    clear: both;
    height: 0;
    overflow: hidden
}

hr {
    height: 1px;
    background: rgba(65,65,65,.3);
    padding: 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #fff
}

.login {
    width: 100%;
    height: 225px;
    position: relative;
    bottom: 2px;
    background-color: #e4e5e5;
    background: -webkit-linear-gradient(top,#d4dbdf 0,#FFF 100%);
    background: -moz-linear-gradient(top,#d4dbdf 0,#FFF 100%);
    background: -ms-linear-gradient(top,#d4dbdf 0,#FFF 100%);
    background: -o-linear-gradient(top,#d4dbdf 0,#FFF 100%);
    background: -linear-gradient(top,#d4dbdf 0,#FFF 100%);
    border-top: 1px solid #777
}

@media screen and (orientation:portrait) {
    .login {
        height: 100%
    }
}

.login .radialbg {
    width: 100%;
    height: 175px;
    position: absolute;
    background: -webkit-gradient(radial,center center,0,center center,100%,color-stop(0%,#FFF),color-stop(70%,rgba(255,255,255,0)),color-stop(99%,rgba(255,255,255,0)));
    background: -moz-gradient(radial,center center,0,center center,100%,color-stop(0%,#FFF),color-stop(70%,rgba(255,255,255,0)),color-stop(99%,rgba(255,255,255,0)));
    background: -ms-gradient(radial,center center,0,center center,100%,color-stop(0%,#FFF),color-stop(70%,rgba(255,255,255,0)),color-stop(99%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center,ellipse cover,#FFF 0,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 99%);
    background: -moz-radial-gradient(center,ellipse cover,#FFF 0,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 99%);
    background: -ms-radial-gradient(center,ellipse cover,#FFF 0,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 99%);
    top: -35px;
    z-index: 1
}

.login .wrap {
    position: relative;
    z-index: 2;
    height: 100%;
    float: left;
    width: 100%;
    top: -20px
}

.login h1 {
    width: 155px;
    height: 49px;
    margin: 15px auto 0;
    text-indent: -99999px;
    margin-top: 30px;
    padding-top: 20px
}

.logo-en, .logo-vi_vn, .logo-id_id, .logo-th_th, .logo-ko_kr, .logo-my_mm {
    background: url(../images/logo2020/logo.png) no-repeat;
    background-size: contain
}

.sbotop_logo-en, .sbotop_logo-vi_vn, .sbotop_logo-id_id, .sbotop_logo-th_th, .sbotop_logo-ko_kr, .sbotop_logo-my_mm {
    background: url(../images/logo2020/sbotop-logo.png) no-repeat;
    background-size: contain
}

.logo-zh_cn, .logo-zh_tw {
    background: url(../images/logo2020/logo-cn.png) no-repeat;
    background-size: contain
}

.sbotop_logo-zh_cn, .sbotop_logo-zh_tw {
    background: url(../images/logo2020/sbotop-logo-cn.png) no-repeat;
    background-size: contain
}

.new-logo-zh_cn, .new-logo-zh_tw {
    background: url(../images/logo2020/logo-cn.png) no-repeat;
    background-size: contain
}

.sbotop_new-logo-zh_cn, .sbotop_new-logo-zh_tw {
    background: url(../images/logo2020/sbotop-logo-cn.png) no-repeat;
    background-size: contain
}

.login hr {
    height: 5px;
    border: 0;
    background: url(../images/bg_indexhr.png?20140404) center center no-repeat;
    background-size: 280px auto
}

.login .lang {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #3f5c98;
    padding: 3px 0 4px
}

    .login .lang select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        padding-right: 15px;
        border: 0;
        background: 0;
        background-position: 98% 60%
    }

.login .kind {
    font-weight: 700;
    width: 50%;
    margin: 0 auto;
    display: block;
    margin-bottom: 7px
}

.login .selectBGKind {
    display: block
}

.login .selectBGKind {
    width: 100%;
    height: 35px;
    margin: 0 auto;
    background: url(../images/select_icon_kind.png?20140404) no-repeat 98% 55%;
    background-size: 13px 10px;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3)
}

.login .kind select {
    width: 100%;
    height: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    font-size: 13px;
    font-weight: 700;
    color: #5a5a5a;
    padding-left: 1%;
    background: 0
}

.login .form {
    /* width: 90%;
    padding: 7px;
    border-radius: 4px;
    background: #f5f5f5;
    border: 1px solid #858595;
    box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    margin: 0 auto 20px;
    position: relative*/
}

.formArea-item {
    margin: 1rem 0;
}

    .formArea-item label {
        font-size: 12px;
        font-family: Roboto, Browallia New, sans-serif !important;
        font-weight:unset;
    }

.formInput {
    position: relative;
}





.loginInput {
    width: 100%;
    padding: 1.1rem;
    border: 1px solid #efefef;
    color: #7c7c7c;
    background-color: #efefef;
    border-radius: .5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: .5rem;
    position: relative;
}

.login .form .input {
    line-height: 35px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    background: #fff;
    font-size: 15px;
    margin: 0 0 5px
}

    .login .form .input span {
        color: #6189c0;
        padding: 0 0 0 2%;
        min-width: 105px;
        display: inline-block
    }

    .login .form .input input {
        border: 0;
        font-family: Arial;
        color: #5a5a5a;
        width: 50%;
        overflow: hidden;
        font-size: 14px;
        padding-left: 2px
    }

.login .form input.verif {
    font-size: 12px;
    color: #888;
    padding-left: 5px;
    margin-bottom: 7px;
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
    height: 30px;
    width: 40%
}

.login .form .code {
    display: inline-block;
    margin-left: 5px;
    width: 117px;
    height: 35px;
    margin-top: 3px;
    width: 50%
}

    .login .form .code img {
        vertical-align: middle;
        margin: 0 2px;
        width: 85px;
        height: 25px
    }

    .login .form .code .refresh {
        display: inline-block;
        vertical-align: middle;
        width: 21px;
        height: 21px;
        background: url(../images/imgAll.png) -116px 2px no-repeat;
        background-size: 414px auto;
        margin-left: 4px
    }

.login .form button {
    border-radius: 5px;
    padding: 1.2rem 1rem;
    font-size: 16px;
    background-color: #14346d;
    color: #fff;
    font-weight: 700;
    width: 100%;
    background: linear-gradient(1turn, #183596, #2699fb);
    color: #fff;
    border: unset;
    border-bottom: 2px solid #26304c;
}

.link-group {
    margin-bottom: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}

.loginModal-link {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #14346d;
}

.login .remember {
    /* width: 145px; */
    height: 25px;
    line-height: 20px;
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items:end;
}

/* Hide the original checkbox */
.checkbox-item input[type="checkbox"] {
    display: none;
}

/* Create the custom checkbox */
.custom-checkbox {
    display: inline-block;
    margin-right:5px;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #dedede;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.3s;
}
    .custom-checkbox::after {
        content: "";
        transform: translate(-50%, -50%) rotate(-45deg);
        position: absolute;
        left: 50%;
        top: 45%;
        z-index: 1;
        width: 1.4rem;
        height: .8rem;
        border: 3px solid #fff;
        border-top-style: none;
        border-right-style: none;
    }


/* Checked state */
.checkbox-item input[type="checkbox"]:checked + .custom-checkbox {
    background-color: #2298f8;
}




.login .remember span {
    font-size: 12px;
    color: #6289c1
}

.login .footer {
    width: 100%;
    padding: 8px 0 10px;
    text-align: center
}

    .login .footer button.old {
        width: 27%;
        padding: 7px 2px;
        font-size: 12px;
        font-weight: 100;
        font-family: Arial;
        color: #666;
        border-radius: 3px;
        border: 1px solid #999;
        background-color: #f5f5f5;
        background: -webkit-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -moz-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -ms-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -o-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: linear-gradient(to bottom,#f5f5f5 0,#FFF 100%);
        box-shadow: 0 1px 1px rgba(0,0,0,.3);
        margin: 0 auto;
        margin-right: 2px
    }

    .login .footer button.new {
        width: 280px;
        padding: 7px 2px;
        font-size: 12px;
        font-weight: 100;
        font-family: Arial;
        color: #666;
        border-radius: 3px;
        border: 1px solid #999;
        background-color: #f5f5f5;
        background: -webkit-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -moz-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -ms-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -o-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: linear-gradient(to bottom,#f5f5f5 0,#FFF 100%);
        box-shadow: 0 1px 1px rgba(0,0,0,.3);
        margin: 0 auto
    }

    .login .footer span a {
        display: block;
        margin: 26px auto 0;
        font-size: 9px;
        color: #5b82bb;
        text-align: center
    }

        .login .footer span a img {
            height: auto;
            position: relative;
            top: 1px;
            width: 7px
        }

    .login .footer .copyRight p {
        padding: 0 3px 0 0
    }

    .login .footer p {
        font-size: 7px;
        font-family: AppleGothic;
        color: #959595
    }

.leagueList .live. name .cell .inner {
    color: #f96
}

.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000
}

.parlayDialog .set {
    padding: 10px 0 10px 25px;
    border-top: 2px dashed #111
}

    .parlayDialog .set span {
        float: left;
        display: block;
        height: 39px;
        line-height: 39px;
        color: #fff;
        font-family: Arial;
        font-weight: bolder;
        font-size: 18px
    }

.parlayDialog .bet {
    background: #003e5a;
    padding: 18px 0;
    position: relative
}

    .parlayDialog .bet .input {
        width: 93%;
        line-height: 50px;
        background: #fff;
        -webkit-border-radius: 66px;
        -moz-border-radius: 66px;
        -ms-border-radius: 66px;
        border-radius: 66px;
        margin: 0 20px;
        padding: 7px 0;
        box-shadow: inset 0 2px 5px rgba(30,30,30,.5);
        position: relative
    }

        .parlayDialog .bet .input .currency {
            font-family: Arial;
            font-size: 24px;
            color: #8c8c8c;
            margin: 0 20px 0 30px
        }

        .parlayDialog .bet .input input {
            font-family: Arial;
            color: #000;
            font-size: 46px;
            width: 90%;
            border: 0;
            font-weight: bolder;
            padding: 0;
            margin-top: 8px
        }

        .parlayDialog .bet .input button {
            width: 200px;
            height: 68px;
            text-align: center;
            border: #646464;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            -ms-border-radius: 50px;
            -o-border-radius: 50px;
            border-radius: 50px;
            background: #000;
            position: absolute;
            right: 8px;
            top: 9px;
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0,0,0,.8);
            font-size: 30px;
            font-weight: bolder;
            background-color: #79a0d7;
            background: -webkit-linear-gradient(top,#79a0d7 0,#547bb4 100%);
            background: -moz-linear-gradient(top,#79a0d7 0,#547bb4 100%);
            background: -ms-linear-gradient(top,#79a0d7 0,#547bb4 100%);
            background: -o-linear-gradient(top,#79a0d7 0,#547bb4 100%);
            background: linear-gradient(to bottom,#79a0d7 0,#547bb4 100%)
        }

    .parlayDialog .bet .quickBet {
        margin: 20px 0 0 20px
    }

        .parlayDialog .bet .quickBet button {
            margin-right: 4px;
            width: 116px;
            height: 65px;
            background-color: #f5f5f5;
            background: -webkit-linear-gradient(top,#f5f5f5 0,#FFF 100%);
            background: -moz-linear-gradient(top,#f5f5f5 0,#FFF 100%);
            background: -ms-linear-gradient(top,#f5f5f5 0,#FFF 100%);
            background: -o-linear-gradient(top,#f5f5f5 0,#FFF 100%);
            background: linear-gradient(to bottom,#f5f5f5 0,#FFF 100%);
            color: #000;
            font-size: 14px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            border-radius: 6px;
            font-weight: bolder;
            font-family: Arial
        }

    .parlayDialog .bet .addParlay {
        position: absolute;
        right: 20px;
        top: 112px;
        width: 226px;
        height: 65px;
        font-size: 26px;
        color: #004a6d;
        background-color: #f5f5f5;
        background: -webkit-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -moz-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -ms-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -o-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: linear-gradient(to bottom,#f5f5f5 0,#FFF 100%);
        box-shadow: 0 1px 5px rgba(0,0,0,.8);
        border-radius: 8px;
        font-weight: bolder
    }

.parlayDialog .betInfo {
    padding: 12px 0
}

    .parlayDialog .betInfo p {
        display: inline-block;
        font-size: 24px;
        color: #fff;
        margin-left: 25px;
        font-weight: 700
    }

        .parlayDialog .betInfo p span {
            font-family: Arial;
            color: #a3c5f5;
            font-weight: bolder
        }

.parlayDialog .footer {
    height: 60px;
    background-color: #003e5a;
    background: -webkit-linear-gradient(top,#003e5a 0,#012c40 100%);
    background: -moz-linear-gradient(top,#003e5a 0,#012c40 100%);
    background: -ms-linear-gradient(top,#003e5a 0,#012c40 100%);
    background: -o-linear-gradient(top,#003e5a 0,#012c40 100%);
    background: linear-gradient(to bottom,#003e5a 0,#012c40 100%);
    border-top: 1px solid #144d67
}

.balance {
    line-height: 56px;
    padding-left: 24px;
    font-family: Arial
}

    .balance b {
        font-size: 24px;
        color: #fff
    }

    .balance .currency {
        font-size: 24px;
        color: #fff;
        padding-left: 5px
    }

    .balance .money {
        font-size: 30px;
        color: #fff;
        padding-left: 5px;
        font-weight: 700
    }

.parlayinList {
    position: relative
}

.parlayDialog .bet.mixparlayStyle .quickBet button {
    width: 31%
}

.mixparlay .empty {
    font-family: Arial;
    font-weight: bolder;
    font-size: 48px;
    color: rgba(0,0,0,.2);
    text-shadow: -1px -1px 1px rgba(0,0,0,.1),1px 1px 0 #fff;
    text-align: center;
    padding-top: 300px;
    min-height: 500px
}

.BetVoid {
    text-decoration: line-through
}

.listArea {
    overflow: auto
}

    .listArea ul {
        display: table;
        width: 100%
    }

        .listArea ul li {
            display: table-row
        }

            .listArea ul li .itemNum {
                display: table-cell;
                vertical-align: middle;
                width: 30px;
                text-align: center;
                font-size: 26px;
                color: #fff;
                text-shadow: 0 -1px 0 rgba(0,0,0,.8);
                background-color: #bebebe;
                background: -webkit-linear-gradient(left,#bebebe 0,#AAA 100%);
                background: -moz-linear-gradient(left,#bebebe 0,#AAA 100%);
                background: -o-linear-gradient(left,#bebebe 0,#AAA 100%);
                background: -ms-linear-gradient(left,#bebebe 0,#AAA 100%)
            }

    .listArea .list, .statement .block .list {
        border-top: 2px dashed #bebebe;
        padding: 20px 16px
    }

    .listArea ul li .list .listSportIcon {
        float: left;
        margin-top: 4px
    }

    .listArea ul li .list h3, .statement .block .list h3 {
        font-size: 24px;
        font-family: Arial;
        font-weight: bolder;
        color: #4a4a4a;
        margin-bottom: 3px;
        width: 88%;
        float: left;
        overflow: hidden;
        display: inline;
        margin-left: 7px
    }

.listH3 {
    color: #5e85bd
}

.listArea ul li.delete .list h3, .listArea ul li.delete .list h3 .listH3, .listArea ul li.delete .list h4, .listArea ul li.delete .list h4 .red, .listArea ul li.delete .list .list_2, .listArea ul li.delete .list .list_2 {
    color: #b7b7b7
}

.listH3 {
    color: #5e85bd
}

    .listH3.changed {
        color: #b3b3b3;
        text-decoration: line-through
    }

.listArea ul li .list h4, .statement .block .list h4 {
    width: 500px;
    float: left;
    font-size: 24px;
    color: #4a4a4a;
    overflow: hidden;
    display: inline;
    margin-left: 7px;
    margin-bottom: 3px
}

.listArea ul li .list .list_2 {
    font-size: 20px;
    color: #7b7b7b
}

.listArea ul li .list {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ababab;
    width: auto;
    position: relative
}

    .listArea ul li .list p {
        color: #7b7b7b;
        font-size: 20px;
        margin: 0
    }

        .listArea ul li .list p span {
            color: #5e85bd
        }

    .listArea ul li .list .category {
        padding-bottom: 10px;
        width: 94%
    }

.listArea ul li.delete {
    background-color: #dfdfdf
}

.listArea ul li .list .category .item {
    width: 50px;
    height: 50px;
    background: url(../images/bg_parlayitem.png?20140404);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding: 7px 0 0;
    margin: 10px 0 0 15px;
    float: left
}

    .listArea ul li .list .category .item .img {
        width: 45px;
        height: 45px;
        margin: 0 auto
    }

.listArea ul li .list .category .name {
    margin: 20px 0 0 5px;
    float: left
}

    .listArea ul li .list .category .name p {
        margin: 0;
        font-size: 20px;
        color: #282828;
        font-weight: bolder
    }

    .listArea ul li .list .category .name span {
        font-family: Arial;
        font-weight: bolder;
        color: #8c8c8c
    }

.listArea ul li .list .status {
    padding: 10px 0 10px 15px
}

    .listArea ul li .list .status p {
        margin: 0;
        font-size: 20px;
        color: #424b5e;
        font-family: Arial
    }

        .listArea ul li .list .status p b {
            font-size: 20px;
            margin-right: 10px;
            font-weight: 400
        }

    .listArea ul li .list .status span {
        font-family: Arial;
        color: #8c8c8c
    }

.listArea ul li .list .delBtn {
    position: absolute;
    top: 40px;
    right: 20px
}

    .listArea ul li .list .delBtn a {
        display: block;
        width: 42px;
        height: 42px;
        line-height: 42px;
        background-color: #d66868;
        background: -webkit-linear-gradient(top,#d66868 0,#962828 100%);
        background: -moz-linear-gradient(top,#d66868 0,#962828 100%);
        background: -ms-linear-gradient(top,#d66868 0,#962828 100%);
        background: -o-linear-gradient(top,#d66868 0,#962828 100%);
        background: linear-gradient(to bottom,#d66868 0,#962828 100%);
        -webkit-border-radius: 42px;
        border-radius: 42px;
        text-align: center;
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        font-family: Arial;
        border: 1px solid #be5050
    }

.listArea .list h4 .red, .statement .block .list h4 .red {
    color: #a36060
}

.mixparlay .removeBtn {
    padding-top: 17px;
    text-align: center
}

    .mixparlay .removeBtn button {
        width: 320px;
        line-height: 60px;
        font-size: 30px;
        font-weight: 100;
        font-family: Arial;
        color: #666;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #999;
        background-color: #f5f5f5;
        background: -webkit-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -moz-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -ms-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: -o-linear-gradient(top,#f5f5f5 0,#FFF 100%);
        background: linear-gradient(to bottom,#f5f5f5 0,#FFF 100%);
        box-shadow: 0 2px 2px rgba(0,0,0,.3)
    }

    .mixparlay .removeBtn p {
        font-size: 14px;
        font-family: AppleGothic;
        color: #959595
    }

.mixparlayGMT {
    font-size: 14px;
    font-family: AppleGothic;
    color: #959595;
    width: 100%;
    text-align: center
}

.myBets .switchTab {
    margin-bottom: 20px
}

.myBets .block, .statement .list .subList .block {
    width: 96%;
    margin: 0 auto 25px;
    background-color: #fff;
    background: -webkit-linear-gradient(top,#FFF 0,#eaeaea 100%);
    background: -moz-linear-gradient(top,#FFF 0,#eaeaea 100%);
    background: -ms-linear-gradient(top,#FFF 0,#eaeaea 100%);
    background: -o-linear-gradient(top,#FFF 0,#eaeaea 100%);
    background: linear-gradient(to bottom,#FFF 0,#eaeaea 100%);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    border: 1px solid #bebebe;
    border-radius: 4px
}

    .myBets .block, .statement .list .subList .block.tran .otherInfo div:nth-child(1) {
        float: left
    }

    .myBets .block, .statement .list .subList .block.tran .otherInfo div:nth-child(2) {
        float: right;
        font-size: 30px;
        color: #000
    }

.statement .block.tran .title .content .betsInfo_2 {
    font-size: 24px;
    font-weight: 400;
    margin-top: 8px;
    width: 80%;
    display: inline-block
}

.myBets .block, .statement .list .subList .block.tran .otherInfo div:nth-child(2) b {
    color: #597cb4
}

    .myBets .block .title {
        padding: 20px 16px;
        position: relative
    }

        .myBets .block .title .item {
            width: 54px;
            height: 50px;
            background: url(../images/bg_parlayitem.png?20140404);
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: 4px 0 0;
            float: left;
            margin-right: 10px
        }

            .myBets .block .title .item .img {
                width: 45px;
                height: 45px;
                margin: 0 auto
            }

        .myBets .block .title .content {
            position: relative
        }

            .myBets .block .title .content p {
                margin: 0
            }

            .myBets .block .title .content .betsInfo_1, .statement .block .title .content .betsInfo_1 {
                font-size: 24px;
                font-family: Arial;
                width: 336px;
                overflow: hidden;
                font-weight: 700;
                color: #4a4a4a;
                margin-bottom: 5px
            }

                .myBets .block .title .content .betsInfo_1 b, .statement .block .title .content .betsInfo_1 b {
                    color: #5e85bd
                }

                .myBets .block .title .content .betsInfo_1 span, .myBets .block .title .content .betsInfo_2 span, .myBets .block .list h3 .small {
                    font-size: 18px
                }

            .myBets .block .title .content .betsInfo_2, .statement .block .title .content .betsInfo_2 {
                font-size: 30px;
                font-family: Arial;
                width: 100%;
                overflow: hidden;
                font-weight: 700;
                color: #4a4a4a
            }

.selectBG {
    display: block
}

.selectHid {
    display: block;
    overflow: hidden
}

    .selectHid option {
        padding-right: 3px;
        text-align: center;
        font-size: 22px
    }

    .selectHid select {
        background: 0
    }

.login .selectBG {
    width: 162px;
    height: 27px;
    margin: 0 auto;
    background: url(../images/select_icon_lang.png?20140404) no-repeat 86% 50%;
    background-size: 12px
}

.login .selectHid {
    display: block;
    overflow: hidden
}

.join-now {
    text-align: center;
    margin-bottom: 7px
}

    .join-now a {
        font-size: 11px;
        line-height: 30px;
        vertical-align: middle;
        color: #49628f;
        text-decoration: underline;
        display: inline-block;
        margin-right: 10px
    }

        .join-now a img {
            height: 29px;
            position: relative;
            top: 10px;
            margin: 0 7px 0 0;
            width: 29px
        }

.kind .selectHid {
    height: 35px;
    display: block;
    overflow: hidden
}

.login .selectHid select {
    text-align: left;
    float: left;
    width: 150px
}

.kind .selectHid select {
    text-align: left;
    width: 110%
}

.addHome {
    position: fixed;
    bottom: 20px;
    width: 100%;
    height: 90px;
    z-index: 10;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 1
}

    .addHome > div {
        margin: 0 auto;
        width: 250px;
        height: 90px;
        background: url(../images/imgAll.png?20140404) 16px -278px no-repeat
    }

    .addHome a.close {
        display: block;
        width: 27px;
        height: 27px;
        background: url(../images/imgAll.png?20140404) -57px -204px no-repeat;
        position: relative;
        left: 220px;
        top: -10px
    }

    .addHome h3 {
        font-size: 9px;
        color: #515151;
        font-family: Arial;
        font-weight: bolder;
        margin-left: 75px;
        padding-right: 20px;
        margin-top: -5px
    }

    .addHome p {
        margin-left: 75px;
        margin-top: 0;
        font-size: 9px;
        color: #515151;
        padding-right: 20px
    }

        .addHome p b {
            font-size: 10px;
            color: #272727
        }

.alert {
    position: fixed;
    width: 280px;
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    top: 7.5%;
    left: 50%;
    margin-left: -140px;
    z-index: 30001
}

    .alert .msg {
        text-align: center;
        padding: 9px 0
    }

        .alert .msg p {
            font-size: 16px;
            color: #000;
            font-family: Arial;
            font-weight: bolder;
            margin: 0;
            padding-left: 16px;
            padding-right: 16px
        }

            .alert .msg p span {
                font-family: Arial,sans-serif;
                display: block;
                font-size: 14px;
                margin: 8px auto 0;
                font-weight: 100
            }

.msg .msg_2 {
    font-family: Arial,sans-serif;
    display: block;
    font-size: 10px;
    color: #6289c1;
    margin-top: 16px;
    width: 80%;
    margin: 8px auto 0
}

.alert .footer {
    vertical-align: bottom;
    background: #ebebeb;
    padding: 10px 5px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-top: 1px dashed #bebebe
}

    .alert .footer button {
        width: 100%;
        height: 35px;
        text-align: center;
        border-radius: 3px;
        background-color: #7aa1d8;
        background: -webkit-linear-gradient(top,#7aa1d8 0,#537ab3 100%);
        background: -moz-linear-gradient(top,#7aa1d8 0,#537ab3 100%);
        background: -ms-linear-gradient(top,#7aa1d8 0,#537ab3 100%);
        background: -o-linear-gradient(top,#7aa1d8 0,#537ab3 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.7);
        border: 1px solid #336;
        font-size: 19px;
        color: #fff
    }

div.checker {
    width: 22px;
    height: 22px;
    float: left;
    position: relative;
    margin-right: 5px;
    background-image: url(../images/imgAll.png);
    background-size: 414px auto;
    background-position: -108px -56px;
    background-repeat: no-repeat
}

    div.checker.checked {
        background-image: url(../images/imgAll.png);
        background-position: -151px -56px
    }

select {
    outline: 0
}

.productSwitcher {
    display: flex;
    height: 65px;
    position: relative;
    border-top: 1px solid #ddd;
    background: linear-gradient(to bottom,#e9f6fe 5%,rgba(138,176,229,0.8) 100%)
}

    .productSwitcher > div {
        flex: 1;
        height: 65px;
        padding-top: 6px;
        font-size: 10px;
        line-height: 22px !important;
        text-align: center;
        color: #546eb2;
        font-weight: 700;
        cursor: pointer;
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        letter-spacing: -1px
    }

        .productSwitcher > div > div:last-child {
            position: relative;
            font-size: 10px !important;
            line-height: 11px !important;
            height: 22px;
            width: 100%;
            left: 50%;
            margin-top: 15px;
            transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%)
        }

        .productSwitcher > div.hover {
            color: #546eb2;
            background: linear-gradient(to bottom,#eef8fe 0%,#f4f5f5 100%);
            height: 65px;
            border-left: 1px solid #79a0d7;
            border-right: 1px solid #79a0d7
        }

    .productSwitcher > .hot {
        position: relative
    }

        .productSwitcher > .hot::after {
            position: absolute;
            display: block;
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 100px;
            background-color: red;
            top: 7px;
            right: 9px;
            animation: rubberBounceDown .3s linear infinite alternate
        }

@keyframes rubberBounceDown {
    0% {
        transform: translateY(-5px)
    }

    65% {
        transform: translateY(0)
    }

    70% {
        transform: translateY(20%)
    }

    80% {
        transform: translateY(-10%)
    }

    90% {
        transform: translateY(5%)
    }

    100% {
        transform: translateY(0)
    }
}

.kindBg {
    width: 100%;
    height: 25px;
    border-top: 2px solid #3c437a
}

.kind.outline {
    position: relative;
    top: 15px
}

.annc-ip-sg-bsi {
    width: 100%;
    background-color: #fff;
    padding: 7px 10px;
    margin: 10px 0;
    font-family: Arial;
    font-size: 12px;
    color: #6e6e6e
}

.bannerBox {
    width: 100%
}

    .bannerBox > div {
        background-size: cover !important;
        width: 280px;
        height: 100px;
        -ms-border-radius: 10px;
        border-radius: 10px;
        -webkit-appearance: none;
        -webkit-box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
        -ms-box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
        box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
        margin: 0 auto 20px;
        border: 4px solid #fff
    }

        .bannerBox > div a {
            width: 280px;
            height: 200px
        }

#androidBannerBox.bannerBox a {
    display: inline-block;
    height: 100%;
    width: 100%
}

    #androidBannerBox.bannerBox a > img {
        width: 100%;
        height: 100%;
        -ms-border-radius: 6px;
        border-radius: 6px
    }

.gamesBanner01-en {
    background: url(../images/games/GamesIcon01_en.jpg?v20160205) no-repeat
}

.ShowPointer {
    cursor: pointer;
    border-radius: 0
}

.sports-icon {
    background: url(../images/sports2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.esports-icon {
    background: url(../images/esports.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.casino-icon {
    background: url(../images/live-casino2.png?v=20190121a) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.games-icon {
    background: url(../images/games2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.racing-icon {
    background: url(../images/racing2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.virtualsports-icon {
    background: url(../images/virtual-sports2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.sports-icon2 {
    background: url(../images/sports2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.esports-icon2 {
    background: url(../images/esports.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.casino-icon2 {
    background: url(../images/live-casino2.png?v=20190121a) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.games-icon2 {
    background: url(../images/games2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.racing-icon2 {
    background: url(../images/racing2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.virtualsports-icon2 {
    background: url(../images/virtual-sports2.png) no-repeat;
    height: 33px;
    width: 33px;
    margin: 0 auto;
    background-size: contain
}

.raceBannerBox > div {
    background-size: cover;
    width: 300px;
    height: 148px;
    border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    margin: 0 auto 20px;
    border: 4px solid #fff
}

.raceBanner {
    background: url(../images/racing/racing3.jpg?v20170714) no-repeat
}

.virtualSportsBannerBox > div, .virtualSportsCompetitionBannerBox > div {
    width: 280px;
    height: 100px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    box-shadow: inset 0 0 1px #fff,0 7px 15px rgba(0,0,0,.3);
    margin: 0 auto 20px;
    border: 4px solid #fff
}

.virtualSportsBanner {
    background: url(../images/virtualSports/VSPromo-Competition-20190523-en.jpg?v20190522) no-repeat;
    background-size: 100% !important
}

.virtualSportsPrizeBanner {
    background: url(../images/virtualSports/VSPromo-Prizes-20190523-en.jpg?v20190522) no-repeat;
    background-size: 100%
}

.license li {
    display: inline-block
}

.Above18, .Above21, .IOM, .RGAW, .GamblingCareIe {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 15px;
    height: 18px;
    float: left
}

.Above18 {
    background-image: url(../../images/Above18.png);
    background-size: 15px auto;
    width: 15px
}

.Above21 {
    background-image: url(../../images/Above21.png);
    background-size: 15px auto;
    width: 15px
}

.RGAW {
    background-image: url(../../images/tc-responsible-gaming.png);
    background-size: 36px auto;
    background-position: 0 0;
    width: 36px;
    height: 36px
}

.IOM {
    background-image: url(../../images/IOM.png);
    background-size: 23px auto;
    width: 23px
}

.GamblingCareIe {
    background-image: url(../../images/GamblingCareIe.png);
    background-size: 15px auto;
    width: 15px;
    margin-right: 15px
}

.forgot-pw {
    text-align: center
}

    .forgot-pw a {
        font-size: 12px;
        line-height: 26px;
        vertical-align: middle;
        font-weight:700;
        color: #49628f;
        text-decoration: underline
    }

.jnow-popt {
    margin: 0 auto;
    display: block
}

.tc-links {
    font-family: Arial;
    font-size: 7px;
    color: #49628f;
    display: block;
    width: 100%;
    padding: 15px 0
}

    .tc-links > a {
        color: #49628f
    }

.promo-link-cont {
    text-align: center;
    margin: -15px 15px 7px 0
}

.promo-link-bsi {
    font-size: 11px;
    line-height: 30px;
    color: #49628f;
    text-decoration: underline
}

.promo-link-img {
    width: 29px;
    height: 28px;
    margin-right: 7px;
    position: relative;
    top: 10px
}

@import "https://fonts.googleapis.com/css?family=Ek+Mukta:400,300,500,700,800";

.coinWrap {
    position: absolute;
    top: 5px;
    right: 5px;
    transform: scale(.1)
}

.coin {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: coin 2s linear infinite
}

    .coin .front {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1
    }

    .coin .back {
        width: 100%;
        height: 100%;
        background: #f7941e;
        border-radius: 50%;
        transform: rotateY(180deg) translateZ(10px);
        -webkit-transform: rotateY(180deg) translateZ(10px);
        -ms-transform: rotateY(180deg) translateZ(10px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .coin .front_b {
        width: 100%;
        height: 100%;
        background: #f7941e;
        border-radius: 50%;
        transform: translateZ(-1px);
        -webkit-transform: translateZ(-1px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2
    }

    .coin .back_b {
        width: 100%;
        height: 100%;
        background: #f7941e;
        border-radius: 50%;
        transform: translateZ(-9px);
        -webkit-transform: translateZ(-9px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2
    }

    .coin:before {
        content: "";
        margin-left: -5px;
        width: 10px;
        height: 100%;
        background: #f7941e;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        -webkit-transform: rotateY(-90deg);
        -webkit-transform-origin: 100% 50%;
        transform: rotateY(-90deg);
        transform-origin: 100% 50%
    }

    .coin .front_b:before {
        content: "";
        width: 100%;
        height: 100%;
        border: 10px solid #fbb041;
        border-radius: 50%;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3
    }

    .coin .front_b:after {
        content: "$";
        padding: 12px 0 0;
        width: 100%;
        height: 100%;
        font-size: 7em;
        font-weight: 700;
        color: #fbb041;
        line-height: 1;
        text-align: center;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4
    }

    .coin .back:before {
        content: "";
        width: 100%;
        height: 100%;
        border: 10px solid #fbb041;
        border-radius: 50%;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -3
    }

    .coin .back:after {
        content: "100";
        padding: 27px 0 0;
        width: 100%;
        height: 100%;
        font-size: 4em;
        font-weight: 700;
        color: #fbb041;
        line-height: 1;
        text-align: center;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -4
    }

@keyframes coin {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(360deg)
    }
}

.sbetMenu-Header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 4.7rem;
    display: flex;
    justify-content: space-between;
    align-content: center;
    background-image: linear-gradient(180deg, #2699fb, #194d8c 56%, #093879);
    padding: .8rem 1rem;
    z-index: 1000;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .3);
}

.switchLangguage {
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
}

._native {
    border: none;
    color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.switchLangguage-select {
    height: 32px;
    background-color: #26304c;
    padding: .5rem 1rem;
    border-radius: 10rem;
    font-size: 12px;
    line-height: 1.5;
    padding-right: 40px;
    margin-top: -2px;
}

option {
    font-weight: normal;
    display: block;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    white-space: nowrap;
}

.svgIcon {
    fill: #fff;
    /* transform: translate(.5rem, .2rem); */
    transition: .5s;
    border-radius: 10rem;
    position: absolute;
    right: 1rem;
    /* top: 0.3rem; */
    /* width: 1rem; */
    /* height: 1rem; */
    margin: 0 .3rem;
    pointer-events: none;
    margin-top: -5px;
}

.hamburger-icon-box {
    display: inline-block;
    width: 2.5rem;
    height: 2.4rem;
    margin-top: -2px;
    margin-left: -5px;
}

.hamburger-icon-inner {
    position: absolute;
    width: 2.4rem;
    height: .3rem;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    border-radius: .3rem;
    /* background-color: #fff;*/
}

.productThumbnail {
    padding: 0.6rem;
    overflow-y: hidden;
    background-color: #fff;
}

.productThumbnail-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.productThumbnail-item {
    width: 50%;
    padding: .5rem;
    position: relative;
}

    .productThumbnail-item img {
        width: 100%
    }

.productThumbnail-item-title {
    position: absolute;
    top: 1rem;
    right: .7rem;
    bottom: .5rem;
    font-size: 16px;
    font-weight: 900;
    width: 45%;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    text-shadow: 0 3px 3px rgba(0, 0, 0, .8);
    font-style: italic;
    justify-content: center;
}

.bsiBottomFunction {
    z-index: 1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    /*padding: 1rem 5rem;*/
    background-color: #f6faff;
    background-size: 100%;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.button {
    border-radius: .5rem;
    padding: 1rem 0.5rem;
    font-size: 1.6rem;
    background-color: #14346d;
    color: #fff;
    font-weight: 700;
    width: 98%;
}
@media (max-width: 767px) {
    .button {
        width: 95%;
    }
}

.button-primary {
    background: linear-gradient(296deg, #183596, #40a1f4);
    color: #fff;
    border: unset;
    border-bottom: .2rem solid #26304c;
    margin: 0.5rem;
}

.button-secondary {
    background: #fefefe;
    color: #26304c;
    border: .1rem solid #efefef;
    border-bottom: .2rem solid #999fb2;
    margin: 0.5rem;
}

.footer-En {
    background-color: #08264e;
    color: #fff;
    padding-bottom: 20rem;
}

.footer-content {
    display: flex;
    padding: 2rem 1rem 1rem;
}



.copyright {
    text-align: center;
    padding: 1rem;
    /*font-size: 0.8rem*/
}

.footer-content-support {
    margin-left: 1rem;
    flex: 1;
}

    .footer-content-support button {
        background-color: #fff;
        color: #2699fb;
        padding: .5rem 1rem .5rem .7rem;
        border-radius: 3px;
        margin: 1rem 0;
        font-weight: 700;
        font-size: 13.333px;
        font-family: Arial;
        display: flex;
        align-items: center;
    }

.footer-content-link {
    flex: 1
}

    .footer-content-link ul {
        padding: .5rem;
        /*font-size: 0.8rem;*/
    }

    .footer-content-link li {
        margin: .5rem 0;
    }

.footer-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    flex-direction: column;
    margin-bottom:0;
}

.footer-link-license img {
    width: 2.9rem;
    height: 2.9rem;
    background-size: contain;
    margin: 0 .5rem;
}

.loginModal {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    align-content:center;
  
}

.mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,.7);
}

.loginModal-dialog {
    position: relative;
    width: auto;
    margin: 1.5rem;
    display: flex;
    align-items: center;
    min-height: calc(100%-3rem);
}

.loginModal-content {
    background: url(../Images/bg-login-header.png) 0 0 no-repeat, url(../Images/bg-login-footer.png) 100% 100% no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    width: 90%;
    background-color: #fff;
    color: #26304c;
    border-radius: 1rem;
    z-index: 10001;
    /* margin-top: 100px; */
    padding: 1.5rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .2);
    /* margin-left: auto; */
    /* margin-right: auto; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto auto;
    height: fit-content;
    right: 0;
}

.loginModal-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    font-family: Roboto, Browallia New, sans-serif !important;
}

.login-h1 {
    font-weight: 700;
    flex: 1;
    text-indent: unset !important;
    width: unset !important;
    height: unset !important;
    margin: unset !important;
    text-indent: unset !important;
    margin-top: unset !important;
    padding-top: unset !important;
    font-size: 2.4rem !important;
    font-family: Roboto, Browallia New, sans-serif !important;
}

.promotionArea {
    padding: 2rem 1rem;
}

.promotionTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: .5rem;
}

    .promotionTitle h2 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-top: unset !important;
        margin-bottom: unset !important;
    }

.promotionTitle-more {
    display: flex align-items:center;
}

    .promotionTitle-more span {
        vertical-align: middle;
        font-size: 1em;
    }

.promotionTemplate {
    display: flex;
}

.promotionTemplate-mainItem {
    flex: 1;
    margin-top: .5rem;
}

.promotionTemplate img {
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
}

.promotionTemplate-otherItem {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: .5rem;
}

.promotionTemplate-item {
    -webkit-box-flex: 47%;
    -ms-flex: 47%;
    flex: 47%;
    margin-top: .5rem;
}

    .promotionTemplate-item img {
        width: 98%
    }

.promotionArea._casino {
    color: #fff;
    background-color: #26304c;
}

.dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #26304c;
}

@keyframes bigToSmall {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes smallToBig {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.7);
    }

    100% {
        transform: scale(1);
    }
}


.container .dot:nth-last-child(1) {
    animation: bigToSmall 1s 0.1s ease-in infinite;
}

.container .dot:nth-last-child(2) {
    animation: smallToBig 1s 0.2s ease-in infinite;
}

.container .dot:nth-last-child(3) {
    animation: bigToSmall 1s 0.3s ease-in infinite;
}

.preloader img {
    width: 100px;
    height: 100px;
}

.hamburger {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 900;
    padding-top: 4.6rem;
    background-color: #f6faff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: scroll;
    vertical-align: middle;
    display: none;
}

.hamburger-content {
    background-image: url(../Images/bg-login-footer.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    padding-bottom: 5rem;
    flex-grow: 1;
}

.hamburger-list {
    background-color: #fff;
    padding: 0;
    margin-bottom: 1rem;
}

.hamburger-item {
    position: relative;
    color: #14346d;
    padding: 1.4rem 2rem;
    font-size: 1.4rem;
}

.border-element {
    width: 100%; /* Adjust this value as needed */
    border-top: 2px solid #c2deff;
    display: block;
    margin-top: 15px
}

input:focus {
    border: 1px solid #14346d !important;
    box-shadow: 0 0 .4rem .4rem #81a5da !important;
}
/* Redefine to default state for :focus-visible */
input:focus-visible {
    outline: none; /* Default browser outline */
    box-shadow: none; /* No box-shadow */
    /* Any other properties reset to default state */
}