/* DOWNTIMERS */
#lotto-video-area {
    background: rgb(13, 27, 34);
}

    #lotto-video-area p.downTimers, #lotto-video-area p.flashInstall {
        position: relative;
        top: 49.8%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 28px;
        color: #fff;
        line-height: 44px;
        letter-spacing: 2px;
        word-spacing: 8px;
    }

    #lotto-video-area p.autoContent {
        position: absolute;
        top: 49.8%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 38px;
        line-height: 40px;
        color: #ecf0f1;
        overflow: hidden;
        font-weight: 400;
        width: 100%;
        height: 100%;
    }

        #lotto-video-area p.autoContent i {
            font-size: 40px;
        }
/* BONUCE BG COLOR */
body .bonuce1 {
    cursor: pointer;
    background: rgb(255,152,0);
    background: linear-gradient(0deg, rgba(255,152,0,1) 0%, rgba(255,177,61,1) 100%);
}

body .bonuce2 {
    cursor: pointer;
    background: rgb(63,81,181);
    background: linear-gradient(0deg, rgba(63,81,181,1) 0%, rgba(83,98,184,1) 100%);
}

body .bonuce3 {
    cursor: pointer;
    background: rgb(233,30,99);
    background: linear-gradient(0deg, rgba(233,30,99,1) 0%, rgba(237,61,121,1) 100%);
}
/* BONUCE TEXT COLOR */
body .text-bonuce1 {
    color: #ff9800;
}

body .text-bonuce2 {
    color: #3f51b5;
}

body .text-bonuce3 {
    color: #e91e63
}
/* AWARD-TOP */
.award-top {
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}

    .award-top > div {
        margin: 0 0;
        padding: 6px 4px;
        line-height: 22px;
        font-size: 18px;
        color: #fff;
    }

        .award-top > div i {
            font-size: 12px
        }

    .award-top .info > span {
        padding: 0px 5px
    }

    .award-top .info > i {
        font-size: 24px
    }

    .award-top .info {
        text-transform: uppercase;
        font-size: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        background: rgb(44,0,51);
        background: linear-gradient(0deg, rgba(44,0,51,1) 0%, rgba(61,1,70,1) 100%);
    }

    .award-top .tulum {
        background: rgb(114,181,35);
        background: linear-gradient(0deg, rgba(114,181,35,1) 0%, rgba(154,207,93,1) 100%);
    }

    .award-top .extra {
        font-size: 14px;
        color: #1d1d1d;
        background: rgb(235,235,235);
        background: linear-gradient(0deg, rgba(235,235,235,1) 0%, rgba(255,255,255,1) 100%);
    }

        .award-top .extra > .fa-trophy {
            font-size: 18px;
            padding: 0px 5px
        }

/* LOTTO USER COMMING */
.lotto-user {
    margin: 0 0;
    padding: 0 0;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 2px;
}

    .lotto-user > .balls-content {
        width: 100%;
        margin: -10px 0 0 0;
        padding: 0 0;
        vertical-align: middle;
    }

        .lotto-user > .balls-content > .user-coming > h3 {
            font-size: 16px;
            float: left;
            margin-right: 10px;
            font-weight: 600;
        }

            .lotto-user > .balls-content > .user-coming > h3 > strong {
                color: #ffeb3b
            }

        .lotto-user > .balls-content > .user-coming {
            text-transform: uppercase;
            padding-bottom: 10px;
            background: rgba(13, 27, 34, 0.25);
            padding-top: 10px;
            padding-left: 20px;
            border-bottom: 1px solid #0a0a0a;
            border-radius: 6px;
        }
/* LAST-NUMBER */
.lotto-last {
    z-index: 1;
    border: 1px solid rgba(10, 11, 11, 1);
    position: relative;
    margin: 0 0;
    padding: 0 0;
    width: 100%;
    height: 55px;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 10px;
}

    .lotto-last > div {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 0;
        padding: 0 1% 0 1%;
        width: 20%;
        height: 100%;
        line-height: 50px;
        text-align: center;
        vertical-align: middle;
        background: #ffd75e;
        color: #402e00;
        font-weight: 700;
    }

    .lotto-last > ul {
        z-index: -1;
        width: 77%;
        margin: 0 0;
        padding: 0 0;
        vertical-align: middle;
        overflow: hidden;
        float: right
    }

        .lotto-last > ul > li {
            padding: 1% 1%;
            float: left;
            margin-top: 3px;
            margin-bottom: 50px;
            margin-left: 5px;
            margin-right: 5px;
        }

            /* BALL-AREA */
            .ball-area ul > li > span, .lotto-user > .balls-content > .user-coming > span, .lotto-last > ul > li .circle, body span.ball {
                margin: 2% 2%;
                padding: 8px 0px;
                font-size: 14px;
                font-weight: 700;
                width: 32px;
                height: 32px;
                display: inline-block;
                text-align: center;
                color: #111;
                border: 2px solid rgba(255, 255, 255, 0.50);
                /* GRADIENT COLOR */
                background: rgba(255,255,255,1);
                background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 50%, rgba(209,209,209,1) 51%, rgba(255,255,255,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
                /* RADIUS */
                border-radius: 200px 200px 200px 200px;
                -moz-border-radius: 200px 200px 200px 200px;
                -webkit-border-radius: 200px 200px 200px 200px;
            }

            .ball-area ul > li.bg-circle > span, .lotto-last > ul > li .circle, body .bg-circle > span.ball {
                color: #402e00;
                /* GRADIENT COLOR */
                background: rgb(255,235,165);
                background: linear-gradient(135deg, rgba(255,235,165,1) 0%, rgba(255,189,6,1) 48%, rgba(255,226,157,1) 48%, rgba(255,200,6,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb0707', endColorstr='#bb0707', GradientType=1 );
            }

.ball-area ul > li.bg-circle-order1 > span {
    color: #fff;
    background: rgb(255,0,0);
    background: linear-gradient(120deg, rgba(255,0,0,1) 0%, rgba(140,0,0,1) 48%, rgba(255,0,0,1) 48%, rgba(140,0,0,1) 100%);
}

.ball-area ul > li.bg-circle-order2 > span {
    color: #fff;
    background: rgb(0,0,255);
    background: linear-gradient(120deg, rgba(0,0,255,1) 0%, rgba(0,0,140,1) 48%, rgba(0,0,255,1) 48%, rgba(0,0,140,1) 100%);
}

.ball-area ul > li.bg-circle-order3 > span {
    color: #fff;
    background: rgb(0,175,0);
    background: linear-gradient(135deg, rgba(0,175,0,1) 0%, rgba(0,125,0,1) 49%, rgba(0,175,0,1) 49%, rgba(0,125,0,1) 100%);
}
.ball-area ul > li.bg-circle-order4 > span {
    color: #fff;
    background: rgb(173,0,167);
    background: linear-gradient(130deg, rgba(173,0,167,1) 0%, rgba(173,0,167,1) 48%, rgba(69,0,66,1) 48%, rgba(173,0,167,1) 100%);
}

.ball-area ul > li.bg-circle-order5 > span {
    color: #fff;
    background: rgb(153,86,0);
    background: linear-gradient(130deg, rgba(153,86,0,1) 0%, rgba(48,27,0,1) 48%, rgba(153,86,0,1) 48%, rgba(48,27,0,1) 100%);
}

.ball-area ul > li.bg-circle-bounce1 > span {
    color: #fff;
    background: rgb(255,152,0);
    background: linear-gradient(0deg, rgba(255,152,0,1) 0%, rgba(255,177,61,1) 100%);
}
.ball-area ul > li.bg-circle-bounce2 > span {
    color: #fff;
    background: rgb(63,81,181);
    background: linear-gradient(0deg, rgba(63,81,181,1) 0%, rgba(83,98,184,1) 100%);
}
.ball-area ul > li.bg-circle-bounce3 > span {
    color: #fff;
    background: rgb(233,30,99);
    background: linear-gradient(0deg, rgba(233,30,99,1) 0%, rgba(237,61,121,1) 100%);
}

.ball-area, .ball-area ul, .ball-area ul > li, body .big-ball-active > div.inner {
    width: 100%;
    height: 100%;
    margin: 0 0;
    padding: 0 0;
}

.ball-area {
    margin-top: 10px;
    margin-left: 6px;
    margin-bottom: 2px;
    padding: 0px 0px;
    width: auto;
    height: auto;
    display: block;
    overflow: hidden
}

    .ball-area > ul > li {
        width: 6.5%;
        padding: 0.5% 0.8%;
        float: left
    }

        .ball-area > ul > li > span {
            margin: 2% 5%;
            padding: 6px 0px;
            font-size: 14px;
            width: 30px;
            height: 30px;
            z-index: 1;
        }

    /* BIG-BALL-INNER */
    .ball-area div.inner {
        display: none;
    }

/* BIG-BALL-ACTIVE */
body .big-ball-active > div.inner {
    display: block;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 5;
    /* GRADIENT BG */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

    body .big-ball-active > div.inner > span {
        position: absolute;
        top: 20%;
        left: 37%;
        font-size: 60px;
        padding: 24px 0px;
        width: 120px;
        height: 120px;
    }

body .l-bingo {
    padding-top: 200px;
    background: url(images/bg-bingo-hd-en-v2.jpg) center top no-repeat rgba(35, 0, 41, 0.75);
    background-size: cover;
    height: 100%;
    width: 100%;
}

    body .l-bingo .container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        background-origin: content-box
    }

.nav-tabs {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #111;
}

    .nav-tabs > li {
        float: left;
        margin-bottom: -1px;
        width: 49.99%;
        background-color: #29002c;
        border-bottom: #38013c solid 1px;
        box-shadow: 0px 2px #29002c;
        cursor: pointer;
    }

        .nav-tabs > li a:hover, .nav-tabs > li.active a:hover {
            color: #402e00;
            background-color: #ffd75e;
            border-color: #c79500;
        }

        .nav-tabs > li > a {
            color: #fff;
            cursor: pointer;
        }

            .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
                color: #171717;
                cursor: pointer;
            }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus {
            color: #fff;
            cursor: default;
            background-color: #38013c;
            border: 1px solid #29002c;
            border-bottom-color: transparent;
            cursor: pointer;
        }

/* RESPONSIVE */
@media (max-width: 1024px) {
    /* AWARD-TOP */
    .award-top > div {
        padding: 3px 2px;
        line-height: 15px;
        font-size: 12px;
    }

        .award-top > div i {
            font-size: 10px;
        }

    .award-top .info > i {
        font-size: 24px
    }

    .award-top .info {
        padding-top: 11px;
        padding-bottom: 10px;
        font-size: 16px;
    }

    .award-top .extra, .award-top .extra > .fa-trophy {
        font-size: 12px;
    }
    /* BALL-AREA */
    .ball-area {
        margin-top: 2px;
        margin-left: 2px;
    }

        .ball-area ul > li > span {
            margin: 1% 1%;
            padding: 4px 4px;
            font-size: 12px;
            width: 24px;
            height: 24px;
        }

    body .big-ball-active > div.inner > span {
        top: 10%;
        left: 34%;
    }

    .nav-tabs {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    body .l-bingo {
        padding-top: 110px;
    }
    /* AWARD-TOP */
    .award-top > div {
        padding: 3px 2px;
        line-height: 15px;
        font-size: 10px;
    }

        .award-top > div i {
            font-size: 8px;
        }

    .award-top .info > i {
        font-size: 14px
    }

    .award-top .info {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 12px;
    }

    .award-top .extra, .award-top .extra > .fa-trophy {
        font-size: 10px;
    }
    /* LOTTO USER COMMING */
    .lotto-user > .balls-content > .user-coming > h3 {
        margin-top: 10px;
        font-size: 12px;
    }

    .lotto-user > .balls-content > .user-coming > span {
        margin: 1% 1%;
        padding: 5px 5px;
        font-size: 14px;
        width: 28px;
        height: 28px;
    }
    /* BALL-AREA */
    .ball-area {
        margin-top: 2px;
        margin-left: 35px;
    }

        .ball-area ul > li > span {
            margin: 1% 1%;
            padding: 3px 3px;
            font-size: 12px;
            width: 24px;
            height: 24px;
        }

    body .big-ball-active > div.inner > span {
        top: 10%;
        left: 38%;
    }

    .nav-tabs {
        font-size: 12px;
    }
}

@media (max-width: 425px) {
    /* BALL-AREA */
    .ball-area {
        margin-top: 2px;
        margin-left: 5px;
    }

        .ball-area ul > li > span {
            margin: 1% 1%;
            padding: 2px 2px;
            font-size: 10px;
            width: 18px;
            height: 18px;
        }

    body .big-ball-active > div.inner > span {
        top: 0;
        left: 28%;
    }
    /* LAST NUMBER */
    .lotto-last {
        height: 50px;
    }

    #lotto-video-area p.autoContent {
        font-size: 20px;
    }

        #lotto-video-area p.autoContent i {
            font-size: 24px;
        }
}

/* MODAL */
.modal {
    text-align: center;
}

    .modal .modal-content {
        max-width: 750px;
        color: #fff;
        background: rgba(44,0,51,0.75);
    }

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }

    .modal .modal-content {
        background: rgba(44,0,51,0.90);
    }
}

.modal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}