/* ORANGE */
.buy-orange {
    border: 1px solid #eb4100;
    background: #ff4e00;
}
/* GREEN */
.buy-green {
    border: 1px solid #4d8011;
    background: #72b523;
}
/* PURPLE */
.buy-purple {
    border: 1px solid #3b206d;
    background: #4f2a93;
}
/* BLUE */
.buy-blue {
    border: 1px solid #0b76b1;
    background: #0288D1;
}
/* RED */
.buy-red {
    border: 1px solid #9b2222;
    background: #C62828;
}
/* BLACK */
.buy-black {
    border: 1px solid #354390;
    background: #3f51b5;
}
/* GRAY */
.buy-gray {
    border: 1px solid #575757;
    background: #757575;
}
/* YELLOW */
.buy-yellow {
    border: 1px solid #ed8200;
    background: #ff9800;
}
/* ORANGE */
.buy-orange {
    border: 1px solid #eb4100;
    background: #ff4e00;
}
/* GREEN */
.buy-green {
    border: 1px solid #4d8011;
    background: #72b523;
}

/* ORANGE */
.lotto-box.lotto-orange .lotto-title > .name, .lotto-box.lotto-orange .lotto-inner ul li, .lotto-box.lotto-orange .lotto-inner .buy a {
    border: 1px solid #eb4100;
    background: #ff4e00;
}
/* GREEN */
.lotto-box.lotto-green .lotto-title > .name, .lotto-box.lotto-green .lotto-inner ul li, .lotto-box.lotto-green .lotto-inner .buy a {
    border: 1px solid #4d8011;
    background: #72b523;
}
/* PURPLE */
.lotto-box.lotto-purple .lotto-title > .name, .lotto-box.lotto-purple .lotto-inner ul li, .lotto-box.lotto-purple .lotto-inner .buy a {
    border: 1px solid #3b206d;
    background: #4f2a93;
}
/* BLUE */
.lotto-box.lotto-blue .lotto-title > .name, .lotto-box.lotto-blue .lotto-inner ul li, .lotto-box.lotto-blue .lotto-inner .buy a {
    border: 1px solid #0b76b1;
    background: #0288D1;
}
/* RED */
.lotto-box.lotto-red .lotto-title > .name, .lotto-box.lotto-red .lotto-inner ul li, .lotto-box.lotto-red .lotto-inner .buy a {
    border: 1px solid #9b2222;
    background: #C62828;
}
/* BLACK */
.lotto-box.lotto-black .lotto-title > .name, .lotto-box.lotto-black .lotto-inner ul li, .lotto-box.lotto-black .lotto-inner .buy a {
    border: 1px solid #354390;
    background: #3f51b5;
}
/* GRAY */
.lotto-box.lotto-gray .lotto-title > .name, .lotto-box.lotto-gray .lotto-inner ul li, .lotto-box.lotto-gray .lotto-inner .buy a {
    border: 1px solid #575757;
    background: #757575;
}
/* YELLOW */
.lotto-box.lotto-yellow .lotto-title > .name, .lotto-box.lotto-yellow .lotto-inner ul li, .lotto-box.lotto-yellow .lotto-inner .buy a {
    border: 1px solid #ed8200;
    background: #ff9800;
}

/* LOTTO-CARDS BOOTSTRAPT START-RESET */
.lotto-cards > .col-xs-12, .lotto-cards > .col-xs-6, .lotto-cards > .col-xs-4, .lotto-cards > .col-xs-3, .lotto-cards > .col-xs-2
.lotto-cards > .col-sm-12, .lotto-cards > .col-sm-6, .lotto-cards > .col-sm-4, .lotto-cards > .col-sm-3, .lotto-cards > .col-sm-2
.lotto-cards > .col-md-12, .lotto-cards > .col-md-6, .lotto-cards > .col-md-4, .lotto-cards > .col-md-3, .lotto-cards > .col-md-2
.lotto-cards > .col-lg-12, .lotto-cards > .col-lg-6, .lotto-cards > .col-lg-4, .lotto-cards > .col-lg-3, .lotto-cards > .col-lg-2
.lotto-cards > .col-sm-offset-3, .lotto-cards > .col-lg-4, .lotto-cards > .col-md-offset-3, .lotto-cards > .col-lg-offset-3 {
    padding: 4px 4px
}
/* LOTTO-CARDS BOOTSTRAPT END-RESET */

/* LOTTO BOX */
.lotto-box {
    width: 100.1%;
    height: auto;
    margin: 10px 0;
    padding: 0 0;
    border: 0px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

    .lotto-box .lotto-title {
        text-align: left;
        margin-top: 20px;
        width: auto;
        height: 18px;
        font-size: 12px;
        color: #fff;
        font-weight: 400;
        z-index: -2
    }

        .lotto-box .lotto-title > .name {
            text-transform: uppercase;
            padding: 4px 6px;
            border-radius: 5px 5px 0 0
        }

        .lotto-box .lotto-title > .count {
            text-transform: uppercase;
            float: right
        }

        .lotto-box .lotto-title i {
            color: #ffeb3b
        }

    .lotto-box .lotto-inner {
        overflow: hidden;
        position: relative;
        width: 100.2%;
        padding: 0px 0px;
        text-align: center;
        vertical-align: middle;
        font-weight: 700;
        border: 0px solid #f5f5f5;
        background: #fff;
    }

        .lotto-box .lotto-inner ul {
            background: #fff;
            margin: 0px 0px;
            padding: 0px 0px;
        }

            .lotto-box .lotto-inner ul li {
                width: 11.11111%;
                color: #fff;
                float: left;
                height: 30px;
                min-height: 100%;
                display: flex;
                flex-direction: column;
                margin: 0px auto;
            }

            .lotto-box .lotto-title > .name, .lotto-box .lotto-inner ul li {
                color: #fff;
                border: 1px solid rgb(0, 0, 0);
            }

                .lotto-box .lotto-inner ul li.bg {
                    color: #111;
                    background: #fff;
                }

                .lotto-box .lotto-inner ul li span {
                    line-height: 28px
                }

                .lotto-box .lotto-inner ul li.bg-circle span {
                    display: inline-block;
                    position: relative;
                    top: 50%;
                    width: 100%;
                    height: 100%;
                    color: #fff;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                    /*GRADIENT BG*/
                    background: rgb(174,188,191); /* Old browsers */
                    background: -moz-linear-gradient(-45deg, rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%); /* FF3.6-15 */
                    background: -webkit-linear-gradient(-45deg, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Chrome10-25,Safari5.1-6 */
                    background: linear-gradient(135deg, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
                }

    /* LOTTO BUY */
    .lotto-box:hover .lotto-inner .buy {
        bottom: 0;
        border-radius: 0;
    }

        .lotto-box:hover .lotto-inner .buy a {
            margin-top: 0;
            text-transform: uppercase;
        }

    .lotto-box .lotto-inner .buy {
        -moz-transition: 0.01s;
        -o-transition: 0.01s;
        -webkit-transition: 0.01s;
        transition: 0.01s;
        bottom: -100%;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        border-radius: 100%;
    }

        .lotto-box .lotto-inner .buy a {
            text-transform: uppercase;
            -moz-transition: all 0.01s;
            -o-transition: all 0.01s;
            -webkit-transition: all 0.01s;
            transition: all 0.01s;
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            display: inline-block;
            padding: 15px 40px;
            color: #fff;
            font-size: 28px;
            margin-top: 100px;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    /*--- EXTRA ---*/
    .lotto-box.purchased .lotto-inner:after {
        content: 'Purchased';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        text-align: center;
        line-height: 90px;
        color: #fff;
        font-size: 22px;
        font-weight: 700;
    }

    .lotto-box.purchased .buy {
        display: none;
    }
/*--- EXTRA END ---*/

.cardHeader input, .cardHeader button, .cardHeader a {
    font-size: 16px;
    font-weight: 700;
}

    .cardHeader button.selected {
        background: #000000;
        border: 1px dashed #ccc;
    }

.scrollViewCards {
    overflow-y: scroll;
    height: 590px;
}

.scrollViewMoreBets {
    overflow-y: auto;
    height: max-content;
    max-height: 765px;
}

.scrollBetSlip {
    overflow-y: scroll;
    height: 291px;
}

.list-group {
    padding-left: 0;
    margin-bottom: 5px;
    font-size: 16px;
}

    .list-group .list-group-item {
        background-color: transparent;
        border: 0px;
        border-bottom: 0px dashed #111;
        color: #fff;
        line-height: normal;
    }

#moreBetsOdds .list-group .list-group-item {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f5f5f5;
    color: #000;
}

.list-group > .list-group-item:focus, .list-group > .list-group-item:hover, .list-group > .list-group-item:focus .text-yellow, .list-group > .list-group-item:hover .text-yellow, .list-group > .list-group-item:focus .text-gray, .list-group > .list-group-item:hover .text-gray {
    background-color: #ffeb3b !important;
    color: rgba(10,14,10,1) !important;
}

#moreBetsOdds .list-group .list-group-item.active, #moreBetsOdds .list-group .list-group-item.active:focus, #moreBetsOdds .list-group .list-group-item.active:hover,
.list-group .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #000 !important;
    background-color: #ffeb3b;
    border-color: #585858;
    font-weight: 600;
}

.list-group > .list-group-item span.badge {
    color: #000 !important;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    font-weight: 600;
    font-size: 16px;
}

.list-group > .list-group-item:hover span.badge, .list-group > .list-group-item:focus span.badge {
    color: #fff !important;
    background-color: #2f2f2f;
    border-color: #2f2f2f;
    font-weight: 600;
}

/* RESIZE */
@media (max-width: 1600px) {
    .scrollViewCards {
        overflow-y: scroll;
        height: 575px;
    }
    .scrollViewMoreBets {
        overflow-y: scroll;
        height: 725px;
    }
}

@media (max-width: 1400px) {
    .scrollViewCards {
        overflow-y: scroll;
        height: 550px;
    }
    .scrollViewMoreBets {
        overflow-y: scroll;
        height: 700px;
    }
}

@media (max-width: 1024) {
    .list-group {
        font-size: 14px;
    }
    /* LOTTO-LISTS */
    .lotto-box > .lotto-inner ul li {
        height: 34px;
    }

        .lotto-box > .lotto-inner ul li span {
            line-height: 32px;
            font-size: 14px;
        }
    /*--- EXTRA ---*/
    .lotto-box.purchased .lotto-inner:after {
        line-height: 105px;
        font-size: 20px;
    }

    .scrollViewCards {
        overflow-y: scroll;
        height: 550px;
    }

    .scrollViewMoreBets {
        overflow-y: scroll;
        height: 600px;
    }
}

@media (max-width: 767px) {
    .cardHeader input, .cardHeader button, .cardHeader a {
        font-size: 14px;
        font-weight: 700;
    }

    .scrollViewCards {
        overflow-y: scroll;
        height: 450px;
    }

    .scrollViewMoreBets {
        overflow-y: scroll;
        height: 550px;
    }

    /* LOTTO-LISTS */
    .lotto-box > .lotto-inner ul li {
        height: 36px;
    }

        .lotto-box > .lotto-inner ul li span {
            line-height: 34px;
            font-size: 14px;
        }
    /*--- EXTRA ---*/
    .lotto-box.purchased .lotto-inner:after {
        line-height: 100px;
        font-size: 18px;
    }
    /* MODAL */
    body .modal .modal-content .lotto-box > .lotto-inner ul li {
        height: 28px;
    }

        body .modal .modal-content .lotto-box > .lotto-inner ul li span {
            line-height: 26px;
            font-size: 14px;
        }
}

@media (max-width: 425px) {
    /* LOTTO-NUMBER */
    .lotto-box > .lotto-inner ul li {
        height: 42px;
    }

        .lotto-box > .lotto-inner ul li span {
            line-height: 40px;
            font-size: 14px;
        }
    /*--- EXTRA ---*/
    .lotto-box.purchased .lotto-inner:after {
        line-height: 108px;
        font-size: 22px;
    }
}

@media (max-width: 320px) {
    /* LOTTO-NUMBER */
    .lotto-box > .lotto-inner ul li {
        height: 38px;
    }

        .lotto-box > .lotto-inner ul li span {
            line-height: 36px;
            font-size: 14px;
        }
    /*--- EXTRA ---*/
    .lotto-box.purchased .lotto-inner:after {
        line-height: 108px;
        font-size: 22px;
    }
}