/* == Bonus result == */

.table.table-bonus thead tr th {
    width: 25%;
}


/* == card body == */

.card-table-body {
    background-color: #fff;
}

.small-label-xs {
    display: none;
}


/* == Font Size == */

.fs-13 {
    font-size: 13px !important;
}
.fs-16 {
    font-size: 16px !important;
}


/* == text description == */

.text-description {
    font-size: 14px;
    margin: 10px 0 0 0;
    text-align: center;
    width: 100%;
    letter-spacing: 0.4px;
    color: #767679;
}

    .text-description.disabled {
        color: #ccc;
    }

.input-group-alternative .form-control::-webkit-input-placeholder {
    font-size: 1.542rem;
}

.input-group-alternative .form-control::-moz-input-placeholder {
    font-size: 1.542rem;
}

.input-group-alternative .form-control::-ms-input-placeholder {
    font-size: 1.542rem;
}

.card-table-body.card-table-outline {
    height: 348px !important;
}


/* == dropdown size height == */

.lotto-cat-wrap.dropdown .dropdown-menu {
    max-height: 344px;
    overflow-y: auto;
}

.dropdown-menu.dropdown-menu-lotto-cat {
    margin-top: 5px;
}


/*== yeekee favorite == */

.box-label-item-sm {
    width: 30px;
    height: 30px;
    top: 7.5px;
    position: relative;
}


/* == border == */

.border-none {
    border: 0;
}


/* == border-radius == */

.border-radius-15 {
    border-radius: 15px !important;
}

.border-radius-top-15 {
    border-radius: 15px 15px 0 0 !important;
}

.border-radius-bottom-15 {
    border-radius: 0 0 15px 15px !important;
}


/* == pattern == */


/* == border == */

.border-bt {
    border-bottom: 1px solid #ebebeb;
}

    .border-bt.primary {
        border-bottom: 1px solid #ebebeb;
    }

.border-t {
    border-top: 1px solid #ebebeb;
}

    .border-t.primary {
        border-top: 1px solid #ebebeb;
    }

.border-l {
    border-left: 1px solid #ebebeb;
}

    .border-l.primary {
        border-left: 1px solid #ebebeb;
    }

.border-r {
    border-right: 1px solid #ebebeb;
}

    .border-r.primary {
        border-right: 1px solid #ebebeb;
    }


/* == card bg == */

.card-bg-default {
    background-color: #fafafa;
}


/* == underline == */

.under-line {
    text-decoration: underline;
}


/* == yeekee mobile == */

#yeekee_mobile_wrapper {
    display: none;
}

.card-body.card-body-sm .card-table-header-item {
    padding: 0.575rem 0;
}

.btn-check-mobile {
    position: absolute;
    right: 15px;
    top: 15px;
    height: 25px;
    width: auto;
    padding: .375rem .75rem;
    border: 1px solid #6ab04d;
    font-size: 12px;
    color: #fff;
    background-color: #6ab04d;
}

.btn-check-mobile {
    font-size: 10px;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-package-title {
    height: 45px;
    width: 100%;
    position: relative;
    padding: 0 45px;
    display: block;
    text-align: center;
}

.package-title-inner {
    width: 100%;
    position: relative;
    height: 100%;
}

.package-icon.package-icon-view {
    left: 5px;
    border: 1px solid #6ab04d !important;
    background-color: #6ab04d !important;
}

.package-icon {
    height: 33px;
    width: 33px;
    float: left;
    position: absolute;
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    padding: 6px;
    background-color: #ebebeb;
    cursor: pointer;
}

.package-icon-circle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background-color: #ebebeb;
    border-radius: 50%;
    color: #fff;
}

.package-title-text {
    height: 45px;
    position: relative;
    line-height: 45px;
    font-size: 15px;
}

.package-icon.package-icon-view .package-icon-circle {
    background-color: #ffffff !important;
    color: #6ab04d !important;
}

    .package-icon.package-icon-view .package-icon-circle i {
        color: #6ab04d !important;
        font-size: 11px;
    }

.package-icon.package-icon-cancel {
    right: 5px;
    border: 1px solid #b01d25 !important;
    background-color: #b01d25 !important;
}

    .package-icon.package-icon-cancel .package-icon-circle {
        background-color: #ffffff !important;
        color: #b01d25 !important;
    }

.card .description.desc-xs {
    font-size: 12px;
}

.btn-popover-xs {
    font-size: 12px !important;
}

.btn.btn-popover-head.btn-popover-xs i {
    font-size: 18px;
    position: relative;
    top: -3px;
}

.input-group-alternative .form-control.form-control-xs {
    height: 70px;
}

.card-body.card-body-xs {
    padding: 0 !important;
}

.btn.btn-ft-xs {
    min-width: 150px;
    font-size: 12px;
}

.card-alter.card-alter-xs .card-alter-item:first-child {
    display: block;
    justify-content: center;
    width: 55%;
}

.card-alter.card-alter-xs .card-alter-item:last-child {
    width: 30%;
}

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control {
        font-size: 11px;
    }

.card-alter.card-alter-xs .card-alter-item:first-child .badge-outer--icon {
    display: block;
    height: 18px;
    width: 18px;
}

.card-alter.card-alter-xs .card-alter-item:first-child .badge.badge-label {
    padding: 0 0 0 0;
}

.card-alter.card-alter-xs .card-alter-item:first-child .badge-outer--icon .badge-inner--icon {
    height: 12px;
    width: 12px;
}

.time-stamp.time-stamp-xs {
    font-size: 11px;
}

.card-alter-item.disabled .card-alter-body-text {
    color: #ccc;
}

.card.card-soft {
    border-radius: 0.25rem !important;
}

.jconfirm-content-pane .card-body.card-body-sm {
    padding: 0;
}

.btn-icon-xs {
    height: 45px;
}

.btn-wrappe-fluid {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-wrappe-fluid .btn-fluid-lg {
        width: 100%;
    }

.btn-inner--label {
    border: 1px solid #ebebeb;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #454545;
    font-weight: 600;
}

.btn-icon.btn-icon-white {
    background-color: #fff !important;
    border: 1px solid #fff !important;
    color: #999;
}

.btn-with-label {
    position: relative;
}

    .btn-with-label .btn-inner--label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 7.5px;
    }

.btn.btn-icon-white:hover,
.btn.btn-icon-white:focus {
    color: #999 !important;
}

.open-yeekee-predict .btn-predict-alter.active {
    background-color: #b01d25 !important;
    border: 1px solid #b01d25 !important;
    color: #fff !important;
}

    .open-yeekee-predict .btn-predict-alter.active:hover,
    .open-yeekee-predict .btn-predict-alter.active:focus {
        background-color: #9c191f !important;
        border: 1px solid #9c191f !important;
        color: #fff !important;
    }

    .open-yeekee-predict .btn-predict-alter.active .btn-inner--label {
        color: #fff;
    }

.card-table-body.none-border {
    border: 0;
}

.pd-0 {
    padding: 0 !important;
}

.bt-0 {
    border-top: 0;
}

.btn-cancel-head.btn-head-xs {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: inherit;
    right: 43px;
}

.order-predict-list .card-table-body-text .card-table-body-check {
    line-height: 21px;
}

.card-body.card-body-sm .card-table-header-item .card-table-header-text.text-xs {
    font-size: 13px;
}

.btn-wrap-predict .btn-icon:nth-of-type(1) {
    margin: 0 2.5px 0 0;
}

.btn-wrap-predict .btn-icon:nth-of-type(2) {
    margin: 0 0 0 2.5px;
}

.card-table-header-item.head-item-xs {
    padding: 0.475rem 0;
}

.box-number-typing.box-number-xs {
    border-radius: 0.25rem;
    padding: 15px 80px;
    height: 75px;
    margin-bottom: 30px;
    margin-top: 15px;
}

.btn-flat-xs {
    border-radius: 0.25rem;
}

.input-typing.input-typing-xs::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    color: #ccc;
    font-weight: 300;
    font-size: 0.975rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
}

.input-typing.input-typing-xs::-moz-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    color: #ccc;
    font-weight: 300;
    font-size: 0.975rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
}

.input-typing.input-typing-xs::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    color: #ccc;
    font-weight: 300;
    font-size: 0.975rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
}

.input-typing.input-typing-xs::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.box-number-item .element.element-xs {
    height: 35px;
    font-size: 27px;
}

.input-typing.input-typing-xs {
    height: 42px;
}

.card-table-header.radius-xs {
    border-radius: 0.25rem 0.25rem 0 0;
}

.card-table-body.radius-xs {
    border-radius: 0 0 0.25rem 0.25rem;
}


/* == set height default box == */

.pack-body-default {
    min-height: 230px;
}

.predict-type-default {
    min-height: 230px;
}

.card-order-default {
    min-height: 230px;
}

.rating-default {
    min-height: 230px;
}


/* == Action == */


/* == When you click Predict or Shoot number */

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict {
    display: block;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-shoot {
    display: none;
}

#yeekee_mobile_wrapper.open-yeekee-shoot .yeekee-outer-predict {
    display: none;
}

#yeekee_mobile_wrapper.open-yeekee-shoot .yeekee-outer-shoot {
    display: block;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict.open-yeekee-package #yeekee_package_wrap {
    display: block;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict.open-yeekee-package #yeekee_predict_wrap {
    display: none;
}


/* After select package */

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict.open-yeekee-predict #yeekee_package_wrap {
    display: none;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict.open-yeekee-predict #yeekee_predict_wrap {
    display: block;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict .card-components-predict.open-result-number .lotto-predict-wrap {
    display: block;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict .card-components-predict.open-result-number .lotto-order-wrap {
    display: none;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict .card-components-predict.open-result-orderlist .lotto-predict-wrap {
    display: none;
}

#yeekee_mobile_wrapper.open-yeekee-predict .yeekee-outer-predict .card-components-predict.open-result-orderlist .lotto-order-wrap {
    display: block;
}


/* == cursor == */

.rounded-list {
    cursor: default;
}

    .rounded-list .rounded-subtitle {
        cursor: default;
    }

    .rounded-list .rounded-btn.closed {
        cursor: pointer;
    }

    .rounded-list:hover {
        background-color: #f5f6f8;
    }

    .rounded-list.continue .rounded-btn.opened:hover {
        color: #fff;
        background-color: #b01d25;
        border: 1px solid #b01d25;
    }

    .rounded-list.continue .rounded-btn.opened,
    .rounded-list.continue .rounded-btn.opened:hover {
        transition: all 0.25s;
    }

    .rounded-list.closed .rounded-btn.closed:hover {
        color: #fff;
        background-color: #3598db;
        border: 1px solid #3598db;
    }

    .rounded-list.closed .rounded-btn.closed,
    .rounded-list.closed .rounded-btn.closed:hover {
        transition: all 0.25s;
    }

.rounded-btn.shoot {
    background-color: #b5b4ba;
    border: 1px solid #b5b4ba;
    color: #ffffff;
}

.rounded-list.shoot .rounded-btn.shoot:hover,
.rounded-list.shoot .rounded-btn.shoot:focus {
    cursor: pointer;
    background-color: #ffac17;
    border: 1px solid #ffac17;
    color: #ffffff;
}

.rounded-list.shoot .rounded-btn.closed {
    display: none;
}

.rounded-list.shoot .rounded-btn.opened {
    display: none;
}

.rounded-list.shoot .rounded-btn.shoot {
    display: block;
}

.rounded-list.shoot .rounded-btn-outline.closed {
    display: none;
}

.rounded-list.shoot .rounded-btn-outline.shoot {
    display: flex;
}

.rounded-btn-outline.shoot .icon {
    background-color: #f90;
}

.rounded-list.continue .rounded-btn.shoot {
    display: none;
}

.rounded-list.continue .rounded-btn.shoot {
    display: none;
}

.rounded-list.continue .rounded-btn-outline.shoot {
    display: none;
}

.rounded-list.active .rounded-btn-outline.shoot {
    display: none;
}

.rounded-list.active .rounded-btn.shoot {
    display: none;
}


/* == new payout rate == */

.card-table-header.radius-none {
    border-radius: 0;
}

.card-above-header {
    display: flex;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    flex-wrap: wrap;
    border: 1px solid #ebebeb;
    border-bottom: 0;
    border-radius: 15px 15px 0 0;
    padding: 0.782rem 0;
    justify-content: center;
    align-items: center;
}

.card-table-header-item.card-table-header-md {
    padding: 0.813rem 0;
}

.payout-rate-card .card-table-body {
    padding: 0;
}

.payout-rate-card .card-table-header .card-table-header-item {
    max-width: 33.33333%;
}

.payout-rate-card .card-table-body .card-table-body-row {
    height: 50px;
    border-bottom: 1px solid #ebebeb;
}

    .payout-rate-card .card-table-body .card-table-body-row:last-child {
        border: 0;
    }

    .payout-rate-card .card-table-body .card-table-body-row .card-table-body-item {
        border-right: 1px solid #ebebeb;
    }

        .payout-rate-card .card-table-body .card-table-body-row .card-table-body-item:last-child {
            border: 0;
        }

.payout-rate-card .card-above-header {
    background-color: #fafafa;
}

.payout-rate-card .card-table-header {
    background-color: #fafafa;
}

.btn-popover-head {
    /* top: 18px; */
}

.btn-popover-head {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-body .card-table-body-text {
    color: #999;
    font-size: 13px;
}

.rating-body .card-table-inner--text.card-table-inner--bold {
    color: #999;
    font-size: 13px;
}


/* == round page == */

.btn.btn-yellow {
    color: #fff !important;
    background-color: #ffb129;
    border: 1px solid #ffb129;
}

    .btn.btn-yellow:hover,
    .btn.btn-yellow:focus {
        color: #fff !important;
        background-color: #f69d00 !important;
        border: 1px solid #f69d00 !important;
    }


/* == loading dot == */

.loading {
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.loading-dot {
    float: left;
    width: 4px;
    height: 4px;
    margin: 0 4px;
    background: #ffab16;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    -webkit-box-shadow: 0 0 2px #ffd12a;
    -moz-box-shadow: 0 0 2px #ffd12a;
    -ms-box-shadow: 0 0 2px #ffd12a;
    -o-box-shadow: 0 0 2px #ffd12a;
    box-shadow: 0 0 2px #ffd22d;
    -webkit-animation: loadingFade 1s infinite;
    -moz-animation: loadingFade 1s infinite;
    animation: loadingFade 1s infinite;
}

    .loading-dot:nth-child(1) {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        animation-delay: 0s;
    }

    .loading-dot:nth-child(2) {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .loading-dot:nth-child(3) {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .loading-dot:nth-child(4) {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

@-webkit-keyframes loadingFade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes loadingFade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loadingFade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}


/* == pagination == */

.pagination.pagination-order-list {
    display: block;
    float: left;
    width: 100%;
}

    .pagination.pagination-order-list .pagination-inner {
        float: left;
        width: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

        .pagination.pagination-order-list .pagination-inner .pagination-list {
            float: left;
            width: 40px;
            height: 52px;
            margin: 2.5px 2.5px 2.5px 2.5px;
            border: 1px solid #ebebeb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 600;
            color: #999;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 0.25s;
        }

            .pagination.pagination-order-list .pagination-inner .pagination-list .pagination-text {
                font-size: 15px;
                font-weight: 600;
            }

            .pagination.pagination-order-list .pagination-inner .pagination-list:hover,
            .pagination.pagination-order-list .pagination-inner .pagination-list:focus {
                color: #767679;
                transition: all 0.25s;
                background-color: #ebebeb;
            }

            .pagination.pagination-order-list .pagination-inner .pagination-list.disabled {
                border: 1px solid transparent;
                cursor: default;
            }

                .pagination.pagination-order-list .pagination-inner .pagination-list.disabled:hover,
                .pagination.pagination-order-list .pagination-inner .pagination-list.disabled:focus {
                    background-color: transparent;
                }

.pagination-list.active {
    background-color: #ebebeb;
    color: #767679;
}

    .pagination-list.active:hover,
    .pagination-list.active:focus {
        background-color: #ebebeb;
        color: #767679;
    }


/* == order list == */

.card-header.card-header-xxl {
    padding: 1.1rem 1rem !important;
}

.card.card-radius-default .card-header {
    border-radius: 15px;
}

.card.card-radius-default .card-body {
    border-radius: 0;
}

.card.card-radius-default .card-footer {
    border-radius: 0 0 15px 15px;
}

.card-right-header {
    float: right;
    width: auto;
    padding-right: 45px;
    height: 40px;
}

.card-left-header {
    float: left;
}

    .card-left-header > .card-profile-stats {
        height: 40px;
        justify-content: center;
        align-items: center;
    }

.box-refresh {
    width: 40px;
    height: 40px;
    border: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e2e2;
    cursor: pointer;
    border-radius: 50%;
    float: left;
    background-color: #fff;
    transition: all 0.25s;
}

    .box-refresh:hover,
    .box-refresh:focus {
        color: #ccc;
        background-color: #f8f7f7;
        transition: all 0.25s;
    }

    .box-refresh.rotation i {
        transform: rotate(240deg);
        font-size: 14px;
    }

.lotto-cat-wrap.lotto-cat-small .lotto-cat-button {
    border: 1px solid #ebebeb;
    color: #999;
    height: 40px;
    min-width: 200px;
}

.lotto-cat-wrap.lotto-cat-small .lotto-cat-icon {
    color: #ccc;
    height: 40px;
}

    .lotto-cat-wrap.lotto-cat-small .lotto-cat-icon ._i {
        color: #ccc;
        height: 40px;
        width: 40px;
        line-height: 40px;
    }

.lotto-cat-wrap.lotto-cat-small {
    float: left;
}

.lotto-date-wrap.lotto-date-small {
    float: left;
}

    .lotto-date-wrap.lotto-date-small .date-wrapper.date.date-lotto {
        width: 200px;
        min-width: 200px;
    }

        .lotto-date-wrap.lotto-date-small .date-wrapper.date.date-lotto .input-group.date.input-date-outline {
            border: 1px solid #ebebeb;
            height: 40px;
            width: 200px;
        }

            .lotto-date-wrap.lotto-date-small .date-wrapper.date.date-lotto .input-group.date.input-date-outline .date-text {
                color: #999;
                height: 40px;
            }

            .lotto-date-wrap.lotto-date-small .date-wrapper.date.date-lotto .input-group.date.input-date-outline .arrow-icon.input-group-addon ._i {
                height: 40px;
                width: 40px;
                color: #ccc;
                line-height: 40px;
            }

.lotto-search-wrap.lotto-search-small {
    float: left;
}

    .lotto-search-wrap.lotto-search-small .form-group-search {
        border: 1px solid #ebebeb;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 200px;
        width: 200px;
        height: 40px;
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        color: #fff;
        cursor: pointer;
        padding-right: 40px;
        position: relative;
        outline: none !important;
    }

        .lotto-search-wrap.lotto-search-small .form-group-search .form-control {
            border: 0;
            width: 100%;
            outline: none !important;
            box-shadow: none !important;
            border-radius: 50%;
            color: #999;
            text-align: center;
            font-size: 16px;
        }

            .lotto-search-wrap.lotto-search-small .form-group-search .form-control::-webkit-input-placeholder {
                font-size: 0.85rem;
                color: #999;
            }

            .lotto-search-wrap.lotto-search-small .form-group-search .form-control::-moz-input-placeholder {
                font-size: 0.85rem;
                color: #999;
            }

            .lotto-search-wrap.lotto-search-small .form-group-search .form-control::-ms-input-placeholder {
                font-size: 0.85rem;
                color: #999;
            }

        .lotto-search-wrap.lotto-search-small .form-group-search .input-group-append {
            position: absolute;
            right: 0;
            height: 38px;
            width: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #545559;
            cursor: pointer;
            border: 0;
            outline: none !important;
            box-shadow: none !important;
        }

            .lotto-search-wrap.lotto-search-small .form-group-search .input-group-append i {
                font-size: 12px;
                color: #fff;
            }

        .lotto-search-wrap.lotto-search-small .form-group-search .form-control:focus {
            outline: none !important;
        }

.card-table-header.card-header-orderlist {
    width: 100%;
    background-color: #fafafa;
    display: block;
    float: left;
    border-bottom: 1px solid #ebebeb;
}

    .card-table-header.card-header-orderlist .card-table-header-item {
        float: left;
        width: 14.28571%;
    }

.card-table-body.card-body-orderlist {
    display: block;
    float: left;
    width: 100%;
    border-radius: 0 0 15px 15px;
}

    .card-table-body.card-body-orderlist .card-table-body-row {
        height: 50px;
    }

        .card-table-body.card-body-orderlist .card-table-body-row:last-child {
            border-bottom: 0;
        }

        .card-table-body.card-body-orderlist .card-table-body-row .card-table-body-item {
            float: left;
            width: 14.28571%;
            padding: 14.5px 0;
            border-right: 1px solid #ebebeb;
        }

            .card-table-body.card-body-orderlist .card-table-body-row .card-table-body-item:last-child {
                border-right: 0;
            }

.text-yellow {
    color: #ffad18 !important;
}

.datepicker.datepicker-dropdown {
    z-index: 1 !important;
}

.order-predict-list {
    width: 100%;
    float: left;
    margin-bottom: 2px !important;
}


/* == icons == */

.card-table-body-icon {
    display: block;
    float: left;
    width: auto;
    height: 20px;
}

    .card-table-body-icon .card-icon {
        float: left;
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin: 0 8.5px;
        font-size: 15px;
        color: #999;
    }

    .card-table-body-icon.center {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .card-table-body-icon .card-icon i,
    .card-table-body-icon .card-icon svg {
        font-size: 15px;
        color: #ccc;
    }

.card-table-semihead.seven-col .card-element {
    width: 14.28571%;
    float: left;
    text-align: center;
    padding: 12.5px 0;
    border-right: 1px solid #ebebeb;
    border-top: 0;
}

.card-element.seven-col > .element {
    width: 14.28571%;
}

.card-element > .element > .element-text.small {
    font-size: 14px;
}

.radius-0 {
    border-radius: 0 !important;
}


/* == nav == */

.navbar-wrap {
    background-color: #9c191f !important;
}

.userinfo-wrap {
    min-width: 65%;
}

.nav-top {
    min-width: 67%;
}

.nav-top {
    background-color: #ba2e37;
}

.userinfo-wrap {
    background-color: #da2c36;
}

.navbar-wrap {
    background-color: #a22930 !important;
}

.navmenu-link {
    background-color: #a22930;
}


/*************************************************************************
Create element for flexibility
**************************************************************************/


/* == new element == */

.element-text {
    font-size: 16px;
    color: #000;
}

.card-table-head {
    border-radius: 15px 15px 0 0;
}

    .card-table-head .card-element {
        width: 100%;
        float: left;
        text-align: center;
        padding: 15px 0;
        border: 1px solid #ebebeb;
        border-radius: 15px 15px 0 0;
    }

.card-table-semihead {
    border: 1px solid #ebebeb;
    border-bottom: 0;
    border-top: 0;
}

    .card-table-semihead.four-col .card-element {
        width: 25%;
        float: left;
        text-align: center;
        padding: 12.5px 0;
        border-right: 1px solid #ebebeb;
        border-top: 0;
    }

        .card-table-semihead.four-col .card-element:last-child {
            border-right: 0;
        }

.card-table-element {
    width: 100%;
}

.card-element {
    position: relative;
    border-top: 1px solid #ebebeb;
}

    .card-element > .element {
        float: left;
        text-align: center;
        position: relative;
        padding: 8.64px 0;
        border-right: 1px solid #ebebeb;
    }

        .card-element > .element.xl {
            padding: 14.5px 0;
        }

    .card-element.four-col > .element {
        width: 25%;
    }

    .card-element > .element > .element-text {
        font-size: 16px;
        color: #767679;
        font-weight: 300;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word;
    }

        .card-element > .element > .element-text.bold {
            font-weight: 600;
        }

    .card-element.jackpot > .element > .element-text {
        font-weight: bold;
        color: #6ab04d;
    }

.card-table-body > .card-element:last-child {
    border-bottom: 0;
}

.card-element > .element:last-child {
    border-right: 0;
}

.element-label {
    margin: 0 0.5rem;
    border-radius: 0.25rem;
    font-size: 13px;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
}

    .element-label.danger {
        color: #fff;
        background-color: #d72f39;
    }

.single {
    width: 85px;
    height: 40px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #ebebeb;
    margin: 0 0.25rem 0.25rem;
    font-size: 25px;
    font-weight: 600;
}

    .single.large {
        width: 130px;
    }

.element-single {
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-triple {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single.small {
    width: 40px;
}

.element-double {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .element-double.space:first-child {
        margin-top: 15px;
    }

    .element-double.space .single.large:first-child {
        margin-right: 20px;
    }

    .element-double.space .single.large:last-child {
        margin-left: 20px;
    }

.pd-t {
    padding-top: 15px;
}

.element-title {
    height: 40px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    font-size: 16px;
    font-weight: 600;
}

.element-fivetimes {
    display: block;
    position: relative;
    float: left;
}

    .element-fivetimes.text {
        padding: 0 0 0 150px;
    }

        .element-fivetimes.text > .element-title {
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px;
            width: 150px;
            max-height: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.single.superlarge {
    width: 60px;
    height: 80px;
    font-size: 50px;
    margin: 0 0.15rem;
}

.single.bg-default {
    background-color: #ebebeb;
}

.green {
    color: #6ab04d;
}

.blue {
    color: #3598db;
}


/* forward to p'kaw already  */


/* == laos style ==  */

.flex-rows.laos-result .flex-col.last-two {
    width: 30%;
}

.flex-rows.laos-result .flex-col.big-boney {
    width: 40%;
}


/* == hourglass == */

#hourglass {
    height: 50px;
    animation: hourglass 3s linear infinite;
}

#sabbia1 {
    animation: uppercup 3s ease-in infinite;
}

#sabbia2 {
    animation: lowercup 3s ease-in infinite;
}

@keyframes hourglass {
    0% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@keyframes uppercup {
    0% {
        y: 0px;
    }

    100% {
        y: 11px;
    }
}

@keyframes lowercup {
    0% {
        y: 11;
    }

    100% {
        y: 0;
    }
}


/* == dot spinner == */

.pending-box {
    display: block;
    width: 320px;
    margin: 150px auto;
}

.pending-box-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pending-box-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-box-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-box {
    position: relative;
    height: 50px;
    border: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 50px;
    width: 100%;
    border-radius: 25px;
}

.loading-text {
    font-size: 14px;
    text-align: center;
}

.loading-icon {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .loading-icon #loading-spinner {
        top: -1px;
        position: relative;
    }

#loading-spinner {
    animation: loading-spinner 1s linear infinite;
}

@keyframes loading-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.red {
    color: #d62e38;
}

.single.width {
    width: 115px;
}

.single.height {
    height: 49px;
    margin: 0;
}

.overfolw-hidden {
    overflow: hidden;
}

.border-radius-top-0 {
    border-radius: 0 0 15px 15px !important;
}


/* == forward to p'kaw already == */

.ellipsis-icon {
    text-align: center;
}

    .ellipsis-icon i,
    .ellipsis-icon svg {
        font-size: 30px;
        color: #555;
        padding: 0 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.pt-3.ellipsis-icon {
    padding-top: 7.5px !important;
}

.card-table-semihead.seven-col .card-element:last-child {
    border-right: 0;
}

.card-table-semihead.border-top {
    border-top: 1px solid #ebebeb;
}

.border-top-radius-15 {
    border-radius: 15px 15px 0 0;
}

.element-number {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single.semi {
    width: 60px;
}


/* == table table box == */

.table.table-box {
    border-radius: 10px;
    border: 1px solid #ebebeb;
    display: table;
    overflow: hidden;
    border-spacing: 0;
    border-collapse: inherit !important;
}

    .table.table-box .thead-light th {
        color: #495057;
        background-color: #fafafa;
        padding: 13px 8px;
    }

    .table.table-box .single.small {
        margin: 0.25rem;
    }

    .table.table-box > thead > tr > th,
    .table.table-box > tbody > tr > th,
    .table.table-box > tfoot > tr > th,
    .table.table-box > thead > tr > td,
    .table.table-box > tbody > tr > td,
    .table.table-box > tfoot > tr > td,
    .table.table-box > thead > tr > th,
    .table-bordered {
        border-right: 1px solid #ebebeb;
    }

    .table.table-box > thead > tr > th,
    .table.table-box > tbody > tr > th,
    .table.table-box > tfoot > tr > th,
    .table.table-box > thead > tr > td,
    .table.table-box > tbody > tr > td,
    .table.table-box > tfoot > tr > td,
    .table.table-box > thead > tr > th,
    .table-bordered {
        padding: 10px 8px;
    }

    .table.table-box .element-text {
        min-height: 30px;
    }

    .table.table-box > tbody > tr:last-child {
        border-radius: 0 0 15px 15px;
    }

        .table.table-box > tbody > tr:last-child > td:last-child {
            border-radius: 0 0 15px 0;
        }

    .table.table-box .thead-light th {
        border-width: 0 1px 0 0 !important;
    }

    .table.table-box > tbody > tr:last-child {
        border-bottom: 1px solid #ebebeb;
    }

    .table.table-box > tbody > tr > th:first-child {
        border: 1px solid #ebebeb;
        border-width: 1px 1px 0 0;
    }

    .table.table-box > thead > tr > th:first-child {
        border: 1px solid #ebebeb;
    }

.loading {
    float: left;
}

.table.table-box .element-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #767679;
}

    .table.table-box .element-text.icon {
        cursor: pointer;
    }

.table.table-box .single {
    font-weight: 400;
    color: #444;
}

.table.table-box thead > tr > th .icon {
    font-size: 22px;
}

.table.table-box .element-text.element-text-center {
    height: 49px;
}

.table.table-box thead .element-text {
    font-size: 16px;
    color: #333;
}

.table.table-box .element-text.element-text-center .icon-desc-check {
    font-size: 16px;
}

.table.table-box .thead-light th:last-child {
    border: 1px solid #ebebeb;
    border-width: 0 0 0 0 !important;
}

.table.table-box > thead > tr > th:first-child {
    border-width: 0 1px 0 0 !important;
}

.table.table-box > tbody > tr > td:last-child {
    border: 1px solid #ebebeb;
    border-width: 1px 0 0 0;
}

.table.table-box.table-box-none-radius {
    border-radius: 0 !important;
}

.text-center.table-box.border-custom > thead > tr > th {
    border-width: 1px 1px 0 !important;
}

.table.table-box.table-box-none-radius > thead > tr > th:last-child {
    border-width: 1px 1px 0 0 !important;
}

.table.table-box.border-custom > tbody > tr > td {
    border-width: 0 1px 0 0 !important;
}

.table.table-box.border-custom > tbody > tr:first-child {
    border-width: 1px 0 0 !important;
}

.text-center.table-box.border-custom > thead > tr > th {
    border-width: 1px 1px 1px 0 !important;
}

    .text-center.table-box.border-custom > thead > tr > th:last-child {
        border-width: 1px 1px 1px 0 !important;
    }

.table.table-box.border-custom > tbody > tr > th:first-child {
    border-width: 0 1px 0 0 !important;
}

.empty-space {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
}

.table.table-box .element-text.icon i {
    font-size: 20px;
}


/* == Test == */

.c-spinner {
    --spinner-duration: 1.4s;
    --spinner-color: #9E9E9E;
    --spinner-size: 32px;
    --spinner-width: 2px;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    height: var(--spinner-size);
    width: var(--spinner-size);
    animation: spinner-reveal var(--spinner-duration) steps(1, end) infinite, spinner-rotation var(--spinner-duration) ease-in-out infinite;
    clip-path: inset(0 0 0 50%);
}

    .c-spinner::before,
    .c-spinner::after {
        box-sizing: border-box;
        content: "";
        width: 100%;
        height: 100%;
        border: var(--spinner-width) solid var(--spinner-color);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 50% 0 0);
        animation: spinner-rotation-a var(--spinner-duration) linear infinite;
        transition: border-color .5s ease-out;
    }

    .c-spinner::after {
        animation-name: spinner-rotation-b;
    }

.c-spinner--big {
    --spinner-size: 64px;
}


/***
       * Animations
       */

@keyframes spinner-rotation {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-rotation-a {
    40%, 60% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(540deg);
    }
}

@keyframes spinner-rotation-b {
    40% {
        transform: rotate(180deg);
    }

    80% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(540deg);
    }
}

@keyframes spinner-reveal {
    40% {
        clip-path: inset(0 0 0 0);
    }

    80% {
        clip-path: inset(0 50% 0 0);
    }
}


/* Edit */

.section-wrapper {
    padding: 20px 0 10px 0;
}

.card .description {
    font-size: 16px;
}

.card.shadow.card-default .card-header {
    background-color: #fff;
    border-bottom: none;
    padding: 1.2rem 1rem;
    position: relative;
}

.table-gray,
.table-gray > td,
.table-gray > th {
    background-color: #fafafa !important;
    color: #000;
    font-weight: 600;
    font-size: 16px;
}

.table-lotto > tbody {
    color: #797979;
    background-color: #fff;
}

    .table-lotto > tbody > tr > td,
    .table-lotto > tbody > tr > th,
    .table-lotto > tfoot > tr > td,
    .table-lotto > tfoot > tr > th,
    .table-lotto > thead > tr > td,
    .table-lotto > thead > tr > th {
        padding: 12.5px 0;
    }

.table-lotto > tfoot {
    color: #797979;
    font-weight: 600;
    background-color: #fff;
}

.order-show-xs {
    display: none;
}

.lotto-date-wrap.lotto-date-small .date-wrapper.date.date-lotto .input-group.date.input-date-outline .date-text {
    color: #999;
    height: 40px;
    cursor: pointer;
}


/* pagination */

.pagination-table .pagination > li > a,
.pagination-table .pagination > li > span {
    position: relative;
    float: left;
    padding: 14px 12px;
    margin: 2.5px;
    min-width: 40px;
    height: 52px;
    line-height: 22px;
    font-size: 15px;
    font-weight: 600;
    color: #999;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 0.25rem;
    margin-bottom: 5px;
}

.pagination-table .pagination > .active > a,
.pagination-table .pagination > .active > span,
.pagination-table .pagination > .active > a:focus,
.pagination-table .pagination > .active > span:focus {
    background-color: #ebebeb;
    border-color: #ebebeb;
}

    .pagination-table .pagination > .active > a:hover,
    .pagination-table .pagination > .active > span:hover {
        z-index: 3;
        color: #767679;
        cursor: default;
        background-color: #ebebeb;
        border-color: #ebebeb;
    }

.pagination-table .pagination > li > a:hover,
.pagination-table .pagination > li > span:hover,
.pagination-table .pagination > li > a:focus,
.pagination-table .pagination > li > span:focus {
    background-color: #ebebeb;
}

.pagination-table .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: unset;
}

.pagination-table .pagination > li > span.ellipse {
    border: none;
}

    .pagination-table .pagination > li > span.ellipse:hover {
        background-color: #fff;
        border: none;
    }

.pagination-table .pagination .prev,
.pagination-table .pagination .next {
    font-weight: 500;
    font-size: 32px;
    line-height: 20px;
}

.pagination-table .pagination > .disabled > span,
.pagination-table .pagination > .disabled > span:hover,
.pagination-table .pagination > .disabled > span:focus,
.pagination-table .pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination-table .pagination > .disabled > a:focus {
    color: #999;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ebebeb;
}


/* */

.table.table-lotto .element-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #767679;
}

.table.table-lotto .loading {
    padding: 5px 0;
}

.text-last-two {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* == arrow icon == */

.input-group.date.input-date-outline .arrow-icon.input-group-addon ._i {
    line-height: 26px !important;
}

.date-wrapper.date.date-lotto .arrow-icon.input-group-addon ._i {
    /* line-height: 19px !important; */
}


/* == number laos result == */

.text-last-two {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* == card == */

.card.shadow.card-default .card-header {
    border-bottom: 1px solid #e8eced !important;
}

.single.small.none-border {
    border: 0;
}

.single.small.free-width {
    width: auto;
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.single.semi-large {
    width: 50px;
}


/* == table == */

.table.table-set {
    display: block;
    border: 1px solid #ebebeb;
    border-width: 1px 1px 0px 1px;
    border-radius: 15px;
}

    .table.table-set thead.thead-light tr th {
        display: block;
        float: left;
    }

    .table.table-set thead.thead-light {
        width: 100%;
        display: block;
    }

        .table.table-set thead.thead-light tr {
            width: 100%;
            display: block;
        }

            .table.table-set thead.thead-light tr th:first-child {
                width: 4%;
            }

            .table.table-set thead.thead-light tr th:nth-of-type(2) {
                width: 17%;
            }

            .table.table-set thead.thead-light tr th:nth-of-type(3) {
                width: 31%;
            }

            .table.table-set thead.thead-light tr th:nth-of-type(4) {
                width: 16%;
            }

            .table.table-set thead.thead-light tr th:nth-of-type(5) {
                width: 16%;
            }

            .table.table-set thead.thead-light tr th:nth-of-type(6) {
                width: 16%;
            }

    .table.table-set tbody {
        display: block;
        float: left;
        width: 100%;
    }

        .table.table-set tbody tr {
            display: block;
            width: 100%;
            float: left;
        }

            .table.table-set tbody tr th,
            .table.table-set tbody tr td {
                display: block;
                float: left;
            }

            .table.table-set tbody tr td {
                display: block;
            }

                .table.table-set tbody tr th:first-child,
                .table.table-set tbody tr td:first-child {
                    width: 4%;
                }

                .table.table-set tbody tr td:nth-of-type(1) {
                    width: 17%;
                }

                .table.table-set tbody tr th:nth-of-type(2),
                .table.table-set tbody tr td:nth-of-type(2) {
                    width: 31%;
                }

                .table.table-set tbody tr th:nth-of-type(3),
                .table.table-set tbody tr td:nth-of-type(3) {
                    width: 16%;
                }

                .table.table-set tbody tr th:nth-of-type(4),
                .table.table-set tbody tr td:nth-of-type(4) {
                    width: 16%;
                }

                .table.table-set tbody tr th:nth-of-type(5),
                .table.table-set tbody tr td:nth-of-type(5) {
                    width: 16%;
                }

                .table.table-set tbody tr th:nth-of-type(6),
                .table.table-set tbody tr td:nth-of-type(6) {
                    width: 14%;
                }

    .table.table-set.table-gov thead.thead-light tr th:nth-of-type(4) {
        width: 12%;
    }

    .table.table-set.table-gov thead.thead-light tr th:nth-of-type(5) {
        width: 18%;
    }

    .table.table-set.table-gov thead.thead-light tr th:nth-of-type(6) {
        width: 18%;
    }

    .table.table-set.table-gov tbody tr th:nth-of-type(3),
    .table.table-set.table-gov tbody tr td:nth-of-type(3) {
        width: 12%;
    }

    .table.table-set.table-gov tbody tr th:nth-of-type(4),
    .table.table-set.table-gov tbody tr td:nth-of-type(4) {
        width: 18%;
    }

    .table.table-set.table-gov tbody tr th:nth-of-type(5),
    .table.table-set.table-gov tbody tr td:nth-of-type(5) {
        width: 18%;
    }


/* == number == */

.single.medium {
    margin: 0.25rem;
}

.single.superlarge.free-width {
    width: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.single.superlarge.superlarge-width {
    width: 117.81px;
}

.single.superlarge.superlarge-semiwidth {
    width: 89.2px;
}

.card-left-header {
    padding-right: 15px;
}

.card.shadow.card-default .card-header {
    border-bottom: inherit;
}

.card .description {
    font-size: 18px;
}

.card.shadow.card-default .card-header.bg-red {
    background-color: #b01d25;
}


/* == Idexpage :: This table result of gov result will show display on desktop size and mobile size will show on 767px == */

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}


/* == This total result will show display on desktop size and mobile size will show on 767px == */

#total_result_desktop {
    display: block;
}

#total_result_mobile {
    display: none;
}


/* == section checklist == */

.h-card {
    font-size: 16px;
    color: #000;
    width: 100%;
    text-align: left;
    margin-bottom: 0.75rem;
    font-weight: 600;
    float: left;
    display: block;
    text-align: center;
    line-height: 22px;
}

.date-lotto i {
    border-radius: 50%;
    padding: 9px;
    width: 30px;
    height: 30px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
}

.checklist .top-checkbox h2 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 7.5px;
}

.checklist .top-checkbox h3 {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-bottom: 7.5px;
}

.checklist h4,
.checklist .top-checkbox h4 {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    margin-bottom: 7.5px;
}

.checklist h4 {
    margin-bottom: 15px;
}

.checklist .top-checkbox {
    border-radius: 10px;
    text-align: center;
    padding: 15px;
    border: 1px solid #ebebeb;
    width: 100%;
    float: left;
}

    .checklist .top-checkbox hr {
        border: 0.5px solid #e8e8e8;
        width: 100%;
        float: left;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

.checklist .bigprize {
    display: table;
    margin: auto;
    padding: 0;
}

    .checklist .bigprize .lottonumber {
        background: #fff;
        border-radius: 0.25rem;
        margin: 5px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ebebeb;
        font-weight: 600;
    }

    .checklist .bigprize .first {
        font-size: 26px !important;
        width: 35px !important;
        height: 35px !important;
    }

    .checklist .bigprize li {
        float: left;
    }

    .checklist .bigprize ul {
        display: table;
        margin: auto;
        padding: 0;
    }

    .checklist .bigprize .second {
        font-size: 20px;
        width: 28px;
        height: 28px;
    }


/* == tabs == */

.nav.nav-pills.nav-pills-custom {
    -ms-flex-direction: inherit !important;
    flex-direction: inherit !important;
}

    .nav.nav-pills.nav-pills-custom.nav-fill .nav-item {
        margin: 0 5px;
        border: 0;
        box-shadow: none;
    }

    .nav.nav-pills.nav-pills-custom .nav-link.active,
    .nav.nav-pills.nav-pills-custom .show > .nav-link {
        background-color: #da2c36;
        color: #fff;
    }

.nav-pills.nav-pills-custom .nav-link {
    color: #000;
    background-color: #e2e3e7;
    border-radius: 25px;
    font-size: 14px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-pills.nav-pills-custom .nav-link i {
        margin: 0 7px 0 0;
    }


/* == nav yeekee == */

.nav-yeekee {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
    flex-wrap: wrap;
}

    .nav-yeekee li {
        position: relative;
        -ms-flex: none;
        flex: none;
        width: 11.3% !important;
        height: auto !important;
        padding: 3px 0;
        text-align: center;
        vertical-align: top;
        margin-right: 1.5px;
        margin-left: 1.5px;
        margin-bottom: 3px;
        text-indent: 0px;
    }

    .nav-yeekee li {
        background-color: #e2e3e7;
        border-radius: 0.25rem;
        color: #444;
        font-size: 14px;
    }

        .nav-yeekee li.active {
            background-color: #a22930;
            color: #fff;
        }


/* == custom-carousel == */

.custom-carousel .carousel-indicators {
    position: relative;
    margin-bottom: 10px;
    margin-left: -10px;
    margin-right: -10px;
    flex-wrap: wrap;
    z-index: inherit;
}

    .custom-carousel .carousel-indicators li {
        color: #fff;
        height: 28px;
        background-color: #b2b2b2;
        text-indent: inherit;
        text-align: center;
        border-radius: 0.25rem;
        line-height: 28px;
        border-top: 0;
        border-bottom: 0;
        margin-bottom: 5.5px;
        width: 28px;
        font-size: 13px;
        margin-left: 2.5px;
        margin-right: 2.5px;
    }

        .custom-carousel .carousel-indicators li span {
            color: #fff;
        }

.custom-carousel .carousel-control-next,
.custom-carousel .carousel-control-prev {
    position: relative;
    color: #000;
}

.custom-carousel .carousel-control-next,
.custom-carousel .carousel-control-prev {
    float: left;
    background-color: #c0c0c2;
    padding: 5.5px 7.5px;
    margin-bottom: 10px;
    border-radius: 0.25rem;
    width: 13%;
    display: none;
}

.custom-carousel .carousel-control-next {
    float: right;
}

.custom-carousel .carousel-control-next-icon,
.custom-carousel .carousel-control-prev-icon {
    background-size: contain;
    width: 13px;
}

.custom-carousel .carousel-indicators .active {
    background-color: #da2c36 !important;
}


/* == header filter == */

.card-filter-header {
    float: right;
    width: 420px;
    height: 40px;
}

    .card-filter-header .lotto-cat-wrap .lotto-cat-button {
        min-width: 149px;
        width: 200px;
        float: left;
        position: relative;
        margin: 0 5px;
        height: 40px;
    }

    .card-filter-header .lotto-cat-wrap ._i {
        height: 40px;
        width: 40px;
        line-height: 40px;
        right: 7.5px;
    }

    .card-filter-header .lotto-date-wrap .date-wrapper.date.date-of-lotto {
        min-width: 200px;
        width: 200px;
        margin: 0 5px;
        height: 40px;
    }

        .card-filter-header .lotto-date-wrap .date-wrapper.date.date-of-lotto .input-group.date.input-date-outline {
            height: 40px;
        }

    .card-filter-header .date-wrapper.date-of-lotto .input-group .date-text {
        height: 36px;
    }

    .card-filter-header .date-of-lotto .input-group.date.input-date-outline ._i {
        height: 40px;
        width: 38px;
        line-height: 40px !important;
    }

.date-wrapper.date.date-lotto.date-lotto-small {
    height: 40px !important;
    margin: 0;
    margin-bottom: 15px;
}

    .date-wrapper.date.date-lotto.date-lotto-small .input-group.date.input-date-outline {
        height: 40px;
        background-color: #fff;
        position: relative;
    }

        .date-wrapper.date.date-lotto.date-lotto-small .input-group.date.input-date-outline .date-text {
            color: #000;
            height: 37px !important;
            line-height: 40px;
            font-size: 14px;
        }

        .date-wrapper.date.date-lotto.date-lotto-small .input-group.date.input-date-outline .arrow-icon.input-group-addon {
            position: absolute;
            top: 0;
            right: 0;
            height: 36px;
            width: 36px;
            text-align: center;
        }

            .date-wrapper.date.date-lotto.date-lotto-small .input-group.date.input-date-outline .arrow-icon.input-group-addon ._i {
                color: #000;
                height: 36px;
                line-height: 20px !important;
                text-align: center;
                margin: 0;
            }

body.open-date .datepicker.datepicker-dropdown {
    margin-top: 10px;
}

.btn.btn-danger.btn-flat.btn-regis {
    margin: 0 0.25rem;
}


/* == date == */

/*.datepicker.datepicker-dropdown {
    margin-top: 10px;
    right: 33px !important;
    left: inherit !important;
}*/

.color-green {
    color: #6ab04d;
}

.video-display {
    min-width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

    .video-display iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.shadow {
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1) !important;
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1) !important;
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1) !important;
}

.features-box p {
    text-indent: 0 !important;
}

.card.shadow.card-default .card-header {
    border-bottom: 1px solid #e5e5e5;
}

.line-flat {
    width: 180px;
    position: absolute;
    top: inherit;
    left: 39px;
    bottom: 5%;
    height: 135px;
    flex-wrap: wrap;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
}

.line-list {
    display: flex;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
}

.btn.btn-flat.btn-line {
    margin: 0 0 5px 0;
    border-radius: 0.55rem !important;
    background-color: #01e401;
    color: #fff;
    min-width: 100px;
    width: 165px;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding: 0 10px;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.btn.btn-default-reounded {
    border: 1px solid #e5e5e5;
    background-color: transparent;
    color: #b1b1b1;
}

    .btn.btn-default-reounded:hover,
    .btn.btn-default-reounded:focus {
        border: 1px solid #e5e5e5 !important;
        background-color: #e5e5e5 !important;
        color: #000 !important;
    }

/* == badge box == */
.badge-slider.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 20px;
}

.badge-img {
    width: 100%;
    height: 230px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
    border-radius: 0.55rem;
    overflow: hidden;
}

    .badge-img img {
        max-width: 100%;
    }

.badge-label {
    color: #fff;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    padding: 5px 15px 5px 15px;
    margin: 0;
    border-radius: 0.25rem;
    font-weight: 600;
}

    .badge-label.bg-red {
        background-color: #fe0000;
    }

.badge-body {
    border-radius: 0.55rem;
    overflow: hidden;
}

.badge-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.badge-text {
    padding: 15px 0;
}

.badge-paragraph {
    height: 66px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #555;
    font-size: 16px;
    line-height: 22px;
}

    .badge-paragraph p {
        color: #454545;
        font-size: 16px;
        line-height: 22px;
    }

/* == policy box == */
.policy-box {
    padding: 0 15px 0 0;
    max-height: 1215px;
}

/* == web content == */
.webcontent-wrap label,
.webcontent-wrap p,
.webcontent-wrap span {
    color: #454545;
}

.webcontent-wrap .full-with-inner > p > a {
    color: #a22930;
    font-weight: 600;
}

/* == features box == */
.features-box-body p,
.features-box-body p span,
.features-box-body ul,
.features-box-body ul li,
.features-box-body ul li a,
.features-box-body span {
    color: #000;
    font-size: 16px;
}

.features-box-body h1,
.features-box-body h2,
.features-box-body h3,
.features-box-body h4,
.features-box-body h5,
.features-box-body h6 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.list-content-rate li {
    margin-bottom: 7.5px;
}

    .list-content-rate li span {
        width: 100px;
        display: inline-block;
        font-weight: 600;
    }

    .list-content-rate li i {
        font-size: 7px;
        position: relative;
        top: -2px;
        margin-right: 7.5px;
    }

.card-posted-thumbnail {
    display: block;
    width: 125px;
    height: 75px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    top: 15px;
    border-radius: 6px;
}

.card-posted-image {
    width: auto;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.card-posted {
    background-color: transparent;
    height: 115px;
    overflow: hidden;
    padding: 15px 15px 15px 160px;
    font-size: 0.96rem;
    line-height: 24px;
    font-weight: 500;
    text-decoration: none;
    color: #000;
}

    .card-posted:hover {
        text-decoration: none;
        border: 1px solid #da2c36;
        color: #da2c36;
    }

        .card-posted:hover .card-posted-text {
            color: #b91e27;
        }

.card-posted-text {
    color: #000;
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 120px;
    font-size: 14px;
    line-height: 18px;
}

/* == box link == */
.box-link {
    display: inline-block;
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
}

    .box-link .box-link-left {
        width: 50%;
        float: left;
    }

    .box-link .box-link-right {
        width: 50%;
        float: left;
        padding: 0 25px;
    }

/* == features-box img == */
.features-box .image-center {
    position: relative;
}

    .features-box .image-center img {
        position: relative;
        max-width: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

.input-number-note {
    display: none;
    border: 1px solid #ebebeb;
    border-radius: 10px;
}

    .input-number-note p {
        color: #767679;
        font-size: 18px;
        padding: 10px;
    }

.bet-type-box {
    display: none;
}

.badge-slider .slick-prev.slick-arrow, .badge-slider .slick-next.slick-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: rgba(156, 25, 31, 0.5);
    border-radius: 50%;
    border: 2px solid rgba(217, 45, 55, 0.8);
    transition: all 0.15s ease-in-out;
}

    .badge-slider .slick-prev.slick-arrow:hover, .badge-slider .slick-next.slick-arrow:hover {
        background-color: rgba(156, 25, 31, 0.8);
        border: 2px solid #ad060e;
    }

    .badge-slider .slick-prev.slick-arrow:focus, .badge-slider .slick-next.slick-arrow:focus {
        background-color: rgba(156, 25, 31, 0.8);
        border: 2px solid #ad060e;
    }

.badge-slider .slick-prev.slick-arrow {
    top: 150px;
    left: 20px;
}

.badge-slider .slick-next.slick-arrow {
    top: 150px;
    right: 20px;
}

.badge-slider .slick-prev.slick-arrow::before {
    background-image: url(../images/arrow_lotto/arrow_left_white.png?v=1);
}

.badge-slider .slick-next.slick-arrow::before {
    background-image: url(../images/arrow_lotto/arrow_right_white.png?v=1);
}

.badge-slider .slick-next.slick-arrow::before, .badge-slider .slick-prev.slick-arrow::before {
    content: '';
    position: absolute;
    height: 25px;
    width: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
}

.badge-slider .slick-prev.slick-arrow {
    left: -45px;
}

.badge-slider .slick-next.slick-arrow {
    right: -45px;
}


@media screen and (max-width:1690px) {
    .badge-slider .slick-prev.slick-arrow {
        left: 15px;
    }

    .badge-slider .slick-next.slick-arrow {
        right: 15px;
    }

    .badge-slider .slick-prev.slick-arrow, .badge-slider .slick-next.slick-arrow {
        background-color: rgb(173, 6, 14);
        border: 2px solid rgb(173, 6, 14);
    }
}


.news-slider .slick-prev.slick-arrow, .news-slider .slick-next.slick-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: rgba(156, 25, 31, 0.5);
    border-radius: 50%;
    border: 2px solid rgba(217, 45, 55, 0.8);
    transition: all 0.15s ease-in-out;
}

    .news-slider .slick-prev.slick-arrow:hover, .news-slider .slick-next.slick-arrow:hover {
        background-color: rgba(156, 25, 31, 0.8);
        border: 2px solid #ad060e;
    }

    .news-slider .slick-prev.slick-arrow:focus, .news-slider .slick-next.slick-arrow:focus {
        background-color: rgba(156, 25, 31, 0.8);
        border: 2px solid #ad060e;
    }

.news-slider .slick-prev.slick-arrow {
    top: 150px;
    left: 20px;
}

.news-slider .slick-next.slick-arrow {
    top: 150px;
    right: 20px;
}

.news-slider .slick-prev.slick-arrow::before {
    background-image: url(../images/arrow_lotto/arrow_left_white.png?v=1);
}

.news-slider .slick-next.slick-arrow::before {
    background-image: url(../images/arrow_lotto/arrow_right_white.png?v=1);
}

.news-slider .slick-next.slick-arrow::before, .news-slider .slick-prev.slick-arrow::before {
    content: '';
    position: absolute;
    height: 25px;
    width: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
}

.news-slider .slick-prev.slick-arrow {
    left: -45px;
}

.news-slider .slick-next.slick-arrow {
    right: -45px;
}


@media screen and (max-width:1690px) {
    .news-slider .slick-prev.slick-arrow {
        left: 15px;
    }

    .news-slider .slick-next.slick-arrow {
        right: 15px;
    }

    .news-slider .slick-prev.slick-arrow, .news-slider .slick-next.slick-arrow {
        background-color: rgb(173, 6, 14);
        border: 2px solid rgb(173, 6, 14);
    }
}

@media screen and (max-width:991px) {
    .badge-img {
        height: 170px;
    }
}


@media screen and (max-width:768px) {
    .badge-img {
        height: 120px;
    }
}

@media screen and (max-width:480px) {
    .badge-img {
        height: 188px;
    }

    .badge-slider {
        padding-top: 22.5px;
    }

        .badge-slider .slick-next.slick-arrow {
            top: -12.5px;
        }

        .badge-slider .slick-prev.slick-arrow {
            top: -12.5px;
            right: 65px;
            left: inherit;
        }
}

/* style */
.section-wrapper {
    min-height: 550px;
}

.card-alter-row .badge.badge-label {
    top: 0 !important;
    left: 0 !important;
}




/*=======================================================2020=========================================================*/
.userinfo-wrap {
    background-color: #c8000a !important;
}

.nav-top {
    background-color: #ad060e !important;
}

.navbar-wrap {
    background-color: #930008 !important;
}

.navmenu-link {
    background-color: #930008 !important;
}

.bubbly-button {
    background-color: #fd1b27 !important;
}

.user-toggle {
    border-color: #c6010b !important;
}

.icon-arrows {
    background-color: #c8000a !important;
}

.nav-menu {
    background-color: #930008;
}


/* */
.cstabs {
    position: relative;
    overflow: visible;
    margin: 0 auto;
    width: 100%;
    font-weight: 300;
}

    .cstabs nav {
        width: 100%;
        margin: 0 auto;
    }

        .cstabs nav .nav-tabs-custom {
            border-bottom: 0;
            position: relative;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: flex;
            margin: 0 auto;
            padding: 0;
            list-style: none;
            -ms-box-orient: horizontal;
            -ms-box-pack: center;
            -webkit-flex-flow: row wrap;
            -moz-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            border-radius: 0.25rem 0.25rem 0 0;
            overflow: hidden;
        }

            .cstabs nav .nav-tabs-custom .nav-link:hover {
                border-color: transparent transparent transparent;
            }

            .cstabs nav .nav-tabs-custom .nav-item {
                position: relative;
                /* z-index: 1; */
                display: block;
                margin: 0;
                text-align: center;
                -webkit-flex: 1;
                -moz-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }

                .cstabs nav .nav-tabs-custom .nav-item a {
                    color: #fff;
                    font-weight: 600;
                    padding: 12px 0;
                    background-color: #ad060e;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    border-right: 1px solid #930008;
                }

                .cstabs nav .nav-tabs-custom .nav-item.tab-current a {
                    color: #fcfcfc;
                    font-weight: 100;
                    padding: 11.5px 0;
                    font-size: 12px;
                    background-color: #c30000;
                    border-left: 1px solid rgb(43, 43, 45);
                }

                .cstabs nav .nav-tabs-custom .nav-item a.active {
                    color: #ffffff;
                    background-color: #c8000a;
                    border-color: #c8000a #c8000a #c8000a;
                }

                .cstabs nav .nav-tabs-custom .nav-item:last-child a {
                    border-right: 0;
                }

        .cstabs nav .tab-content {
            background-color: #fff;
            padding: 15px;
            border-radius: 0 0 0.25rem 0.25rem;
            display: block;
            width: 100%;
            float: left;
        }

.table.table-box .thead-light th {
    background-color: #f5f6fa;
}

.table.table-box .thead-light th {
    padding: 10px 8px;
}

.cstabs nav .tab-content .btn.btn-red {
    background-color: #c8000a;
}

.btn.btn-inverse {
    margin: 7.5px;
    border-radius: 25px;
    height: 50px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-inverse {
    color: #999;
    border: 1px solid #e8eced;
    background-color: #f5f6fa;
}

    .btn.btn-inverse:hover,
    .btn.btn-inverse:focus {
        color: #000 !important;
        border: 1px solid #e8eced;
        background-color: #e8eced;
    }

    .btn.btn-inverse.dropdown-cat .dropdown-toggle span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        float: left;
    }

        .btn.btn-inverse.dropdown-cat .dropdown-toggle span i {
            font-size: 18px;
            margin: 0 15px 0 !important;
        }

.dropdown.dropdown-cat .dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

.btn.btn-inverse.submit.dropdown {
    padding: 0;
}

    .btn.btn-inverse.submit.dropdown .dropdown-toggle {
        height: 100%;
    }

.dropdown.dropdown-cat .dropdown-menu {
    width: 100%;
}

.btn.btn-inverse.submit.dropdown .dropdown-menu.scroll.show {
    top: 28% !important;
    right: 0;
    left: 0 !important;
    transform: translate3d(-0px, 38px, 0px) !important;
    width: 295px;
    padding: 0;
    box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
    border: 0;
}

.btn.btn-inverse.submit.dropdown .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: #c8000a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
}

    .btn.btn-inverse.submit.dropdown .dropdown-item.active p {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

.btn.btn-inverse.submit.dropdown .dropdown-item {
    padding: .75rem 1.5rem;
}

    .btn.btn-inverse.submit.dropdown .dropdown-item p {
        margin: 0;
        text-align: center;
    }

    .btn.btn-inverse.submit.dropdown .dropdown-item:hover,
    .btn.btn-inverse.submit.dropdown .dropdown-item:focus {
        color: #16181b;
        text-decoration: none;
        background-color: #f5f6fa;
    }

.lotto-date-wrap.cat .date-wrapper {
    min-width: auto;
    width: 195px;
}

    .lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline {
        color: #999;
        border: 1px solid #e8eced;
        background-color: #f5f6fa;
    }

        .lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline .material-icons._i {
            display: flex;
            align-items: center;
            justify-content: center;
        }

.table.table-box .single {
    font-weight: 600;
}

.lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline .date-text {
    color: #999;
    line-height: 50px;
    height: 50px;
    font-weight: 600;
}

.lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline .material-icons._i {
    color: #999;
}

.lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline i.icon-desc-check {
    float: initial;
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    font-size: 18px;
}

.lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline:hover,
.lotto-date-wrap.cat .date-wrapper .input-group.date.input-date-outline:focus {
    color: #999;
    border: 1px solid #e8eced;
    background-color: #e8eced;
    cursor: pointer !important;
    transition: all 0.15s;
}

.btn.btn-inverse.submit.dropdown .dropdown-item:hover p, .btn.btn-inverse.submit.dropdown .dropdown-item:focus p {
    color: #999;
}

.btn.btn-inverse.submit.dropdown .dropdown-item.active:hover, .btn.btn-inverse.submit.dropdown .dropdown-item.active:focus {
    background-color: #c8000a;
}

    .btn.btn-inverse.submit.dropdown .dropdown-item.active:hover p, .btn.btn-inverse.submit.dropdown .dropdown-item.active:focus p {
        color: #fff;
    }

.btn.btn-inverse.submit.dropdown .dropdown-toggle::after {
    display: none;
}


/*  load  */
.dots-container {
    padding: 0;
    text-align: center;
    top: 50%;
    width: 100%;
    height: 320px;
    padding-top: 260px;
}

.text-container {
    margin-bottom: 200px;
}

.dots-container .dots {
    animation: bounce 1.5s infinite linear;
    background: #c8000a;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    text-align: center;
    width: 20px;
}

    .dots-container .dots:nth-child(1) {
        animation-delay: .2s;
    }

    .dots-container .dots:nth-child(2) {
        animation-delay: .4s;
    }

    .dots-container .dots:nth-child(3) {
        animation-delay: .6s;
    }

    .dots-container .dots:nth-child(4) {
        animation-delay: .8s;
    }

    .dots-container .dots:nth-child(5) {
        animation-delay: 1s;
    }

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(-15px);
    }

    30% {
        transform: translateY(0);
    }
}

.promo-thumbnail img {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    width: auto;
    height: 100%;
    max-width: inherit;
}

.promo-thumbnail img {
    height: auto;
    width: 100% !important;
}

/* menu live */
.navmenu-list {
    position: relative;
}

.notify {
    position: absolute;
    top: 1px;
    right: -3px;
    -webkit-animation: Fade 1.5s ease infinite;
    animation: Fade 1.5s ease infinite;
}

.heartbit {
    font-size: 10px;
    color: #fff;
}

.notify .point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fd1b27;
    background: #ffae1a;
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 3px;
}

@-webkit-keyframes Fade {
    0% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

@keyframes Fade {
    0% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

.player-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.player-body-title {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.m-r-10 {
    margin-right: 10px;
}

.btn-play.right {
    float: right;
    margin-right: 5px;
}

.social.social-square .social-list {
    border-radius: 6px;
}

.btn-play {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

    .btn-play i {
        position: relative;
        top: 2px;
    }

.btn.btn-radius {
    border-radius: 6px;
}

.btn.btn-danger-light {
    background-color: #e30b18 !important;
    border-color: #e30b18 !important;
    color: #fff;
}

    .btn.btn-danger-light:hover,
    .btn.btn-danger-light:focus {
        background-color: #ad060e !important;
        border-color: #ad060e !important;
        color: #fff;
    }

.icon-small {
    font-size: 8px;
    float: left;
    line-height: 10px;
}

.player-box-desc-detail.offline .btn.btn-danger-light {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    color: #fff;
}

.player-box-desc-detail.offline .text-red {
    color: #a0a0a0 !important;
}

.player-body-item {
    width: 100%;
    float: left;
    padding: 15px;
    cursor: pointer;
}

    .player-body-item.active,
    .player-body-item.active:hover,
    .player-body-item:hover {
        background-color: #f4f5f7;
    }


.player-title-header {
    margin-bottom: 15px;
}

.player-body-left {
    width: 60%;
    float: left;
}

.player-body-right {
    width: 40%;
    float: left;
}

.player-body-desc {
    padding-top: 15px;
}

    .player-body-desc p, .player-body-desc span {
        margin-bottom: 0;
        font-size: 14px;
        float: left;
    }

.text-gray-light {
    color: #a5a5a5;
}

.player-box-desc .live-status {
    font-size: 14px;
}

.player-body-item.offline .btn.btn-danger-light {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    color: #fff;
}

    .player-body-item.offline .btn.btn-danger-light:hover,
    .player-body-item.offline .btn.btn-danger-light:focus {
        background-color: #696868 !important;
        border-color: #696868 !important;
        color: #fff;
    }

.player-body-item.offline .btn.btn-play {
    border: 1px solid #d7d7d7 !important;
    background-color: #d7d7d7 !important;
    color: #fff;
}

    .player-body-item.offline .btn.btn-play:hover,
    .player-body-item.offline .btn.btn-play:focus {
        border: 1px solid #a4a1a1 !important;
        background-color: #a4a1a1 !important;
        color: #fff;
    }

.player-box-desc {
    width: 100%;
    display: inline-block;
}

.player-box {
    width: 100%;
    float: left;
    height: 685px;
    position: relative;
    overflow: hidden;
    background-color: #000;
    margin-bottom: 15px;
}


.player-related {
    position: relative;
    background-color: #fff;
    padding-top: 15px;
}

.scroll-box {
    width: 100%;
    height: 847px;
    overflow-y: scroll;
}

    .scroll-box::-webkit-scrollbar {
        width: .4em;
    }

    .scroll-box::-webkit-scrollbar,
    .scroll-box::-webkit-scrollbar-thumb {
        overflow: visible;
        border-radius: 4px;
    }

    .scroll-box::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
    }

.scroll-bar-wrap:hover .cover-bar {
    opacity: 0;
    -webkit-transition: all .5s;
}

.cover-bar {
    position: absolute;
    background: #fff;
    ;
    height: 100%;
    top: 0;
    right: 0;
    width: .4em;
    -webkit-transition: all .5s;
    opacity: 1;
}
/* MAGIC HAPPENS HERE */
.player-related:hover .cover-bar {
    opacity: 0;
    -webkit-transition: all .5s;
}

.social.social-square .social-list .social-link:hover,
.social.social-square .social-list .social-link:focus {
    border-radius: 6px;
}

.social.social-detail > .social-list.sharelink {
    background-color: #26d367;
}

    .social.social-detail > .social-list.sharelink .social-link:hover {
        background-color: #16b552;
    }

/* resize */
@media screen and (max-width: 1440px) {
    .player-body-title {
        font-size: 16px;
    }

    .player-body-desc p, .player-body-desc span {
        font-size: 14px;
    }

    .player-body-title .btn {
        padding: 5px;
        font-size: 10px;
    }

    .icon-small {
        font-size: 4px;
        float: left;
        line-height: 3px;
    }

    .btn-play {
        height: 27px;
        width: 27px;
    }

    .player-body-left {
        width: 100%;
    }

    .player-body-right {
        width: 100%;
    }

    .player-box {
        height: 500px;
    }

    .scroll-box {
        height: 660px;
    }
}


@media screen and (max-width: 1024px) {
    .player-box {
        height: 300px;
    }

    .player-body-title {
        font-size: 12px;
    }

    .player-body-desc p,
    .player-body-desc span {
        font-size: 12px;
    }

    .player-body-item {
        padding: 7.5px 0 15px 7.5px;
    }

    .player-title {
        font-size: 14px !important;
    }

    .player-body-title .btn {
        padding: 0 2px;
    }

    .btn-play {
        height: 20px;
        width: 20px;
    }

    .player-body-title {
        margin-bottom: 5px !important;
    }

    .none-pd-xs {
        padding: 0 !important;
    }

    .scroll-box {
        height: 450px;
    }

    .social.social-square .social-list {
        height: 35px;
        width: 35px;
    }

        .social.social-square .social-list .social-link {
            height: 35px;
            width: 35px;
        }

            .social.social-square .social-list .social-link i {
                font-size: 12px;
            }

    .player-box-desc-detail {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }

    .player-box-desc-social {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }

        .player-box-desc-social .social.social-detail {
            margin-top: 0;
            padding-top: 0;
        }

    .box-detail-title {
        width: 100%;
        float: left;
    }
}



@media screen and (max-width: 767px) {
    .scroll-box {
        height: auto;
    }

    .cover-bar {
        display: none;
    }
}


@media screen and (max-width: 480px) {
    .player-box {
        height: 194px;
    }
}

/* cat slider */
.cat-slider button {
    display: block !important;
}

    .cat-slider button.slick-prev {
        left: -30px;
        z-index: 1;
    }

        .cat-slider button.slick-prev:before {
            font-size: 30px;
            color: #282828;
        }

    .cat-slider button.slick-next {
        right: -21px;
        z-index: 1;
    }

        .cat-slider button.slick-next:before {
            font-size: 30px;
            color: #282828;
        }

.cat-slider .slick-prev.slick-arrow::before {
    background-image: url(../images/2020/arrow/arrow-left.png?v=1);
}

.cat-slider .slick-next.slick-arrow::before {
    background-image: url(../images/2020/arrow/arrow-right.png?v=1);
}

.cat-slider .slick-next.slick-arrow::before,
.cat-slider .slick-prev.slick-arrow::before {
    content: '';
    position: absolute;
    height: 25px;
    width: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
}

.cat-slider .slick-prev.slick-arrow {
    left: -35px;
}

.cat-slider .slick-next.slick-arrow {
    right: -45px;
}

/* news slider */
.news-slider button {
    display: block !important;
}

.news-slider .slick-prev.slick-arrow::before {
    background-image: url(../images/arrow-left.png?v=1);
}

.news-slider .slick-next.slick-arrow::before {
    background-image: url(../images/arrow-right.png?v=1);
}

.news-slider .slick-next.slick-arrow::before,
.news-slider .slick-prev.slick-arrow::before {
    content: '';
    position: absolute;
    height: 25px;
    width: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
}

.news-slider .slick-prev.slick-arrow {
    left: -35px;
}

.news-slider .slick-next.slick-arrow {
    right: -45px;
}

/* footer */
.box-bottom {
    background-color: #ad040c;
    border-bottom: 1px solid #ac080e;
}

.footer-widgets {
    background-color: #930006;
}

.box-bottom.red {
    background-color: #c8000a !important;
    border-bottom: 1px solid #c8000a !important;
}

footer .social-link {
    background-color: #c60009;
    border: 1px solid #c60008;
}

.social-list.youtube:hover .social-link {
    background-color: #460406;
    border: 1px solid #460406;
}

@media screen and (max-width:1720px) {
    .container {
        max-width: 1500px;
    }
}



/* ----------------------- สไตล์รวม ----------------------- */

/* breadcrumbs */
.section-breadcrumb.bg-white {
    background-color: #460406 !important;
}

    .section-breadcrumb.bg-white .breadcrumb {
        background-color: #460406 !important;
        margin-bottom: 5px;
    }

        .section-breadcrumb.bg-white .breadcrumb li {
            color: #fff !important;
        }

            .section-breadcrumb.bg-white .breadcrumb li a {
                color: #fff !important;
                padding: 0 5px 0 0;
            }

                .section-breadcrumb.bg-white .breadcrumb li a.active {
                    color: #fff;
                }

                .section-breadcrumb.bg-white .breadcrumb li a .icons {
                    color: #fff !important;
                }

.bg-title .pages-title {
    color: rgb(247, 248, 249);
    font-weight: 600;
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
}

.bg-title {
    border-bottom: 1px solid #460406;
    overflow: hidden;
    padding: 7px 15px 6px;
    margin-left: -25.5px;
    margin-right: -25.5px;
}

    .bg-title .breadcrumb {
        background: 0 0;
        margin-bottom: 0;
        float: right;
        padding: 0;
        margin-top: 8px;
    }

        .bg-title .breadcrumb > li + li:before {
            padding: 0 5px;
            color: #ccc;
            content: "/\00a0";
        }



/* section selection */
.section-wrapper.section-selection {
    background-color: #ad040c;
    margin-bottom: 15px;
    padding-bottom: 5px;
    padding-top: 20px;
    min-height: auto !important;
    width: 100%;
    float: left;
}

/* date */
.form-control.input-group.date {
    height: 45px;
    background-color: #dc000c;
    border: 1px solid #dc000c;
}

.form-control.input-group.date {
    border-radius: 4px;
    font-size: 12px;
    line-height: 34px;
}

    .form-control.input-group.date .date-field {
        width: 100%;
        font-size: 14px;
    }

    .form-control.input-group.date .date-field {
        background-color: transparent;
        border: 0;
        outline: none;
        color: #fff;
    }

    .form-control.input-group.date i {
        line-height: 45px;
        color: #ae030e;
        font-size: 20px;
        width: 40px;
        text-align: right;
        right: 0;
    }

.datepicker-dropdown.datepicker-orient-top:before {
    display: none;
}

.datepicker-dropdown.datepicker-orient-top:after {
    display: none;
}

.input-group.input-group-custom {
    height: 45px;
}

    .input-group.input-group-custom .form-control {
        height: 45px;
        background-color: #8e0207;
        border: 1px solid #8d0006;
        color: #fff;
    }

.datepicker .prev {
    width: 40px;
}

/* PLACEHOLDER  */
.input-group.input-group-custom .form-control::-webkit-input-placeholder {
    color: #fff;
}

.input-group.input-group-custom .form-control:-moz-placeholder {
    color: #fff;
}

.input-group.input-group-custom .form-control::-moz-placeholder {
    color: #fff;
}

.input-group.input-group-custom .form-control:-ms-input-placeholder {
    color: #fff;
}

.input-group.input-group-custom .form-control:focus::-webkit-input-placeholder {
    color: white;
}

.input-group.input-group-custom .input-group-btn {
    background-color: #dc000c;
    width: 50px;
    text-align: center;
    border-radius: 0 4px 4px 0;
}

    .input-group.input-group-custom .input-group-btn .btn-danger {
        background-color: transparent !important;
        border: 0 !important;
        height: 45px;
        width: 50px;
    }

/* == PLACEHOLDER == */
input.btn-select-type::-webkit-input-placeholder {
    color: #fff;
}

input.btn-select-type:-moz-placeholder {
    color: #fff;
}

input.btn-select-type::-moz-placeholder {
    color: #fff;
}

input.btn-select-type:-ms-input-placeholder {
    color: #fff;
}

input.btn-select-type:focus::-webkit-input-placeholder {
    color: white;
}

.table.table-box.table-danger {
    border-radius: 4px;
    border: 0;
}

    .table.table-box.table-danger .thead-light th {
        background-color: #e30a18;
    }

        .table.table-box.table-danger .thead-light th .element-text {
            color: #fff;
        }

    .table.table-box.table-danger > thead > tr > th,
    .table.table-box.table-danger > tbody > tr > th,
    .table.table-box.table-danger > tfoot > tr > th,
    .table.table-box.table-danger > thead > tr > td,
    .table.table-box.table-danger > tbody > tr > td,
    .table.table-box.table-danger > tfoot > tr > td,
    .table.table-box.table-danger > thead > tr > th,
    .table.table-box.table-danger.table-bordered {
        border-right: 1px solid #ec2a36;
        border-top: 1px solid #c8000a;
        background-color: #c8000a;
        padding: 11px 8px 10px 8px;
    }

    .table.table-box.table-danger .thead-light th:first-child {
        border: 1px solid #ea2734;
    }

    .table.table-box.table-danger > tbody > tr > td:last-child {
        border-top: 0 !important;
    }

    .table.table-box.table-danger > tbody > tr:last-child > td:last-child {
        border-radius: 0 0 4px 0;
    }

    .table.table-box.table-danger > tbody > tr > td:last-child {
        border-right: 1px solid #ad040a;
    }

.section-result {
    background-color: #ad040c;
}

.btn-select-wrap .btn-group.bootstrap-select.btn-select-type .btn.dropdown-toggle.btn-danger .caret {
    color: #ad040b;
}

.btn.dropdown-toggle.btn-danger {
    background-color: #dc000c !important;
    font-size: 14px;
}

.btn-danger.btn-custom-md {
    height: 47px;
    border-radius: 4px;
}

.redbox {
    background-color: #e30a18;
    border: 1px solid #e30a18;
    color: #fff !important;
    height: 35px !important;
}

.single.semi {
    width: 50px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
    display: none;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
    display: none;
}

.perform-wrapper {
    background-image: url(../images/2020/bg/bg-13.png?v=1);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0 100px 0 0;
    background-color: #fff;
}

.desc-present-inner.padding-left {
    padding-left: 100px;
}

.desc-perform-inner {
    padding: 91px 0 91px 0;
}

    .desc-perform-inner.padding-left {
        padding-left: 120px;
    }

    .desc-perform-inner.padding-left {
        float: right;
        position: relative;
        right: 0;
        transform: translateX(100%);
    }

.btn-more-info {
    border-radius: 4px;
    background-color: #e30a18 !important;
    border-color: #e30a18 !important;
    color: #fff;
    width: 160px;
    font-size: 14px;
    height: 45px;
    padding: .675rem .75rem;
}

.text-info-title {
    font-size: 20px;
    font-weight: 600;
}

.desc-wrapper {
    background-image: url(../images/2020/bg/bg-12.png?v=1);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 100px;
    background-color: #fff;
}

.desc-present-inner {
    padding-right: 50px;
    width: 100%;
    float: left;
}

.bootstrap-select.btn-select-type .btn:hover {
    color: #fff !important;
    border-color: #e30a18 !important;
}

.m-r-15 {
    margin-right: 15px;
}

.social.social-left {
    justify-content: left;
}

.box-selection {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.box-sumresult {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
}

.datepicker.datepicker-dropdown {
    z-index: 6 !important;
}

.datepicker.datepicker-dropdown {
    width: 275px;
}

.demos-post-closed {
    background-color: #e30a18;
}

.box-bottom {
    background-color: #ad040c;
    border-bottom: 1px solid #ac080e;
}




.btn-method-group {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .btn-method-group .btn.btn-method {
        width: 100%;
        margin: 0 7.5px;
        padding: 0;
        height: 45px;
        display: block;
        align-items: center;
        justify-content: center;
        background-color: #b4100f;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        border-radius: 3px;
        cursor: pointer;
        outline: none;
        position: relative;
        border: 0;
        padding-left: 50px;
        line-height: 45px;
        overflow: hidden;
    }

.btn.btn-method.bg-warning {
    background-color: #e6a210 !important;
}

    .btn.btn-method.bg-warning .icon-method {
        background-color: #db8e0b;
    }

.btn.btn-method.bg-danger {
    background-color: #e30a18 !important;
}

    .btn.btn-method.bg-danger .icon-method {
        background-color: #d0070d
    }

.icon-method-rounded {
    width: 23px;
    height: 23px;
    background-color: #000;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 25px;
    border-radius: 50%;
    background-color: #fff;
}

.btn.btn-method.bg-warning .icon-method i {
    color: #db8e0b;
}

.btn.btn-method.bg-danger .icon-method i {
    color: #d0070b;
}

.btn-method-group .btn.btn-method:not(:first-child) {
    margin-right: 0;
}

.btn-method-group .btn.btn-method:not(:last-child) {
    margin-left: 0;
}

.btn-method-group .btn.btn-method {
    padding-left: 45px;
    position: relative;
    border: 0;
}

    .btn-method-group .btn.btn-method.bg-warning .icon-method {
        background-color: #db8e0b;
    }

    .btn-method-group .btn.btn-method.bg-danger .icon-method {
        background-color: #d0070d;
    }

.lotto-status-online .btn.btn-method.bg-warning {
    background-color: #c5c5c5 !important;
    cursor: default;
}

    .lotto-status-online .btn.btn-method.bg-warning .icon-method {
        background-color: #b7b7b7 !important;
    }

        .lotto-status-online .btn.btn-method.bg-warning .icon-method i {
            color: #b7b7b7;
        }

.btn-method-group .btn.btn-method {
    height: 45px;
    padding-left: 39px;
    line-height: 45px;
    font-size: 12px;
}

.icon-method {
    height: 45px;
    width: 45px;
    line-height: 45px;
    background-color: #fff;
    border-radius: 2px 0 0 2px;
    margin: 0 10px 0 0;
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: -1px;
}

.btn.btn-danger.button-login {
    background-color: #ad060e !important;
    border-color: #ad060e !important;
}








@media screen and (max-width:1720px) {
    .container {
        max-width: 1500px;
    }
}


/* เพิ่มเติม */
.dropdown.bootstrap-select.btn-select-type .dropdown-item.active,
.dropdown.bootstrap-select.btn-select-type .dropdown-item:active,
.dropdown.bootstrap-select.btn-select-type .dropdown-item.active:hover,
.dropdown.bootstrap-select.btn-select-type .dropdown-item:hover {
    background-color: #c8000a;
    border-radius: 0;
    color: #fff;
}

.dropdown.bootstrap-select.btn-select-type .dropdown-menu.show {
    padding-top: 0;
    padding-bottom: 0
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom {
    z-index: 1000 !important;
}

@media screen and (max-width: 1690px) {
    .card .description.label-text {
        font-size: 11px;
        display: none;
    }

    .icon-desc-check {
        top: 0;
    }

    .rating-head .card-table-header-text {
        font-size: 12px;
    }

    .card .description {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .stock-nikkei-number li:nth-of-type(1), .stock-singapore-number li:nth-of-type(1) {
        width: 50px !important;
    }

    .stock-nikkei-number li, .stock-singapore-number li {
        min-width: 50px;
    }
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100% !important;
}

.bootstrap-select .btn:hover {
    color: #fff !important;
    border-color: #dc000c !important;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px dashed;
    border-bottom: 4px solid\9;
}

.btn .caret {
    margin-left: 0;
}

.bootstrap-select.btn-group .dropdown-toggle .caret {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -2px;
    vertical-align: middle;
}


.dropup .dropdown-toggle::after {
    display: none;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
    box-shadow: none !important;
    outline: none !important;
}

.form-control:focus {
    box-shadow: none;
    border-color: #f0f1f3;
}

.bootstrap-select.btn-group .dropdown-menu li a {
    cursor: pointer;
}

.dropdown-menu > li > a {
    padding: 9px 20px;
}

.dropdown-menu > li > a {
    display: block;
    padding: 10.5px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    background-color: #ffffff;
    outline: none !important;
    font-size: 14px;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
    position: static;
    float: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bootstrap-select.btn-group .dropdown-menu {
    min-width: 100%;
    z-index: 1035;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    background-color: #f5f6f8;
    padding: 0;
}

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
}

.open > .dropdown-menu {
    display: block;
}

.dropdown-menu {
    border: 1px solid rgba(120,130,140,.21);
    border-radius: 3px;
    box-shadow: 0 3px 12px rgba(0,0,0,.05) !important;
    -webkit-box-shadow: 0 !important;
    -moz-box-shadow: 0 !important;
    padding-bottom: 8px;
    margin-top: 0;
}

.btn.dropdown-toggle.btn-danger.btn-custom-md {
    height: 45px;
}

    .btn.dropdown-toggle.btn-danger.btn-custom-md:hover, .btn.dropdown-toggle.btn-danger.btn-custom-md:focus {
        box-shadow: none !important;
        outline: 0 !important;
    }

.visible-xs {
    display: none;
}

@media screen and (max-width:767px) {
    .visible-xs {
        display: block;
    }

    .date-wrapper.date.date-lotto.date-lotto-small .input-group.date.input-date-outline {
        width: 295px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* เพิ่มเติม */
.dropdown-toggle::after {
    color: #c8000a;
}


@media screen and (max-width:991px) {
    .work-list-right {
        height: auto !important;
    }

    .round-white-box-item-inner .title {
        font-size: 14px;
    }
}



.dropdown-toggle::after {
    color: #c8000a;
}

@media screen and (max-width:991px) {
    .work-list-right {
        height: auto !important;
    }

    .round-white-box-item-inner .title {
        font-size: 14px;
    }
}


/* ทายผล */

@media screen and (max-width:991px) {
    /* เพิ่มเติม */
    .section-breadcrumb.bg-white {
        margin-bottom: 15px;
    }

    .mobile-wrap .btn-m-prev, .mobile-wrap .btn-m-next {
        background-color: #ad040c !important;
        font-size: 14px;
        height: 40px;
    }

    .mobile-wrap .btn-m-prev--icon {
        height: 40px;
    }

    .mobile-wrap .btn-m-prev i {
        font-size: 18px;
    }

    .mobile-wrap .card-header {
        padding: 5px 7px !important;
    }

    .mobile-wrap .m-select-predict .nav-item {
        height: 40px;
    }

        .mobile-wrap .m-select-predict .nav-item:first-child .nav-link {
            height: 40px;
            font-size: 12px;
        }

        .mobile-wrap .m-select-predict .nav-item .nav-link {
            height: 40px;
            font-size: 12px;
        }

    .mobile-wrap .card.shadow.card-default .card-header.active .card-profile-stats {
        height: 40px;
    }

    .card .description {
        font-size: 12px;
    }

    .m-package--icon {
        width: 17px;
        height: 17px;
    }

        .m-package--icon i {
            font-size: 8px;
        }

    .mobile-wrap .btn-m-next--icon {
        height: 40px;
    }

    .btn-cancel-package {
        top: 71px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .mobile-wrap .card.shadow.card-default .card-header .card-profile-stats {
        height: 40px;
    }

    .m-package--icon {
        width: 18px;
        height: 18px;
    }

        .m-package--icon i {
            font-size: 8px;
        }

    .card .description {
        font-size: 12px;
    }

    .mobile-wrap .card.shadow.card-default .card-header {
        padding: 7px 7px !important;
    }

    .mobile-wrap .m-package-slider .slick-next, .mobile-wrap .m-package-slider .slick-prev {
        top: 25px;
    }

    .mobile-wrap .m-package-slider .slick-prev {
        left: 7px;
    }

    .mobile-wrap .m-package-slider .slick-next {
        right: 54px;
    }

    .mobile-wrap .btn-show-package {
        height: 38px;
        width: 38px;
        top: 72px;
        right: 7px;
    }

    .mobile-wrap .btn-show-package {
        top: 72px;
    }

    .mobile-wrap .btn-m-prev,
    .mobile-wrap .btn-m-next {
        height: 45px;
        line-height: 45px;
        border-radius: 6px;
    }

    .mobile-wrap .m-package-slider .slick-next,
    .mobile-wrap .m-package-slider .slick-prev {
        height: 38px;
        width: 38px;
        top: 27px;
    }

    .btn-split.open {
        background-color: #ad040c;
    }
}

@media screen and (max-width:991px) {
    .btn-group-xs .bubbly-button {
        height: 50px;
        font-size: 14px;
        line-height: 25px;
    }
}

.check-package--icon {
    top: 73px;
}

.card.card-default .card-header .btn-cancel-header {
    right: 15px;
}


@media screen and (max-width:1920px) {
    .container {
        max-width: 1590px !important;
    }
}

@media screen and (max-width:1440px) {
    .check-package--icon {
        width: 40px;
        height: 40px;
        top: 72px;
        right: 15px;
    }

    .package-wrapper.checked .cancel-package--icon {
        top: 70px;
    }

    .cancel-package--icon .badge-inner--icon i {
        transform: translate(-50%, -60%);
    }

    .btn.btn-cancel-head .icon-cancel--i {
        margin-right: 2.5px;
        width: 12px;
        height: 12px;
    }

    .icon-cancel--i i {
        font-size: 8px;
    }
}

@media screen and (max-width:991px) {
    .form-button-info .btn {
        font-size: 10px;
    }

    .mobile-wrap .m-package-slider .slick-next, .mobile-wrap .m-package-slider .slick-prev {
        height: 30px;
        width: 30px;
        top: 27px;
    }

    .mobile-wrap .m-package-slider .slick-prev {
        left: 15px;
    }

    .mobile-wrap .btn-show-package {
        height: 30px;
        width: 30px;
        right: 15px;
    }

    .nav.navbar-menu {
        background-color: #e00f1c;
    }
}

@media screen and (max-width:767px) {
    .lang-toggle {
        padding: 0 5px 0 0 !important;
    }
}


@media screen and (max-width:480px) {
    .card-alter-body-text {
        font-size: 8px;
    }


    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-webkit-input-placeholder {
        font-size: 10px;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-moz-input-placeholder {
        font-size: 10px;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-ms-input-placeholder {
        font-size: 10px;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-ms-input-placeholder {
        font-size: 10px;
    }

    .input-typing.input-typing-xs::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }
}




.check-package--icon {
    top: 72px;
}

.card.card-default .card-header .btn-cancel-header {
    right: 15px;
}


@media screen and (max-width:1920px) {
    .container {
        max-width: 1590px !important;
    }
}

@media screen and (max-width:1440px) {
    .check-package--icon {
        width: 40px;
        height: 40px;
        top: 72px;
        right: 15px;
    }

    .package-wrapper.checked .cancel-package--icon {
        top: 70px;
    }

    .cancel-package--icon .badge-inner--icon i {
        transform: translate(-50%, -60%);
    }

    .btn.btn-cancel-head .icon-cancel--i {
        margin-right: 2.5px;
        width: 12px;
        height: 12px;
    }

    .icon-cancel--i i {
        font-size: 8px;
    }
}

@media screen and (max-width:991px) {
    .form-button-info .btn {
        font-size: 10px;
    }
    li.a1 {
        width: 24%;
        display: block;
        overflow: hidden;
    }

        li.a1 img {
            vertical-align: bottom;
            width: 100% !important;
        }
    .mobile-wrap .m-package-slider .slick-next, .mobile-wrap .m-package-slider .slick-prev {
        height: 30px;
        width: 30px;
        top: 27px;
    }

    .mobile-wrap .m-package-slider .slick-prev {
        left: 15px;
    }

    .mobile-wrap .btn-show-package {
        height: 30px;
        width: 30px;
        right: 15px;
    }

    .nav.navbar-menu {
        background-color: #e00f1c;
    }
}

@media screen and (max-width:750px) {
    .lang-toggle {
        padding: 0 5px 0 0 !important;
    }
}



@media screen and (max-width:480px) {

    .video{
        display:block;
        overflow:hidden;
        margin:40px 0 0;
    }
    .card-alter-body-text {
        font-size: 8px;
    }

    .style_band_ ul li {
        width: 100% !important;
    }

    img.imgg-howto {
        width: 100%;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-webkit-input-placeholder {
        font-size: 10px;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-moz-input-placeholder {
        font-size: 10px;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-ms-input-placeholder {
        font-size: 10px;
    }

    .card-alter.card-alter-xs .card-alter-item:last-child .form-control::-ms-input-placeholder {
        font-size: 10px;
    }

    .input-typing.input-typing-xs::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }
}





/* ////////   */

.desc-present-inner p {
    color:#a5a5a5 !important;
    font-size: 16px !important;
}
.desc-present-inner .full-with-inner{
    color:#a5a5a5 !important;
}
.desc-present-inner .full-with-inner h4{
    color:#000 !important;
    font-size: 20px;
    font-weight: 600;
}
.desc-perform-inner.padding-left p {
    font-size: 16px;
}
.desc-wrapper {
    padding: 50px 65px 50px 65px;
}
.perform-wrapper {
    padding: 0 65px 0 0;
}
.bg-title {
    margin-left: -20.5px !important;
    margin-right: -20.5px !important;
}




@media screen and (max-width:1440px){
    .nav-top .bubbly-button.btn-squre.btn-border {
        right: 10px !important;
    }
    .desc-wrapper {
        padding: 50px 25px 50px 25px;
    }

    .perform-wrapper {
        padding: 0 25px 0 0;
    }
    
    .bg-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

@media screen and (max-width:991px){
    .section-breadcrumb.bg-white {
        margin-bottom: 0;
    }
    .btn.btn-signin {
        border: 1px solid #930005;
        background-color: #930005;
    }
    
    .perform-wrapper {
        padding: 0 25px 0 25px;
    }
    .policy-box {
        max-height: initial;
    }

    
}


@media screen and (max-width:780px){
    .lotto-cat-button.lotto-cat-small {
        background-color: #c8000a;
        border: 2px solid #c8000a;
    }

    .lotto-cat-button.lotto-cat-small {
        border-radius: 6px;
    }
}

@media screen and (max-width:480px){
    .btn-more-info {
        width: 100%;
        margin-right: 0;
    }
}




/* /////////////////////////////////////////////////////////////////////////////////////////////// */
.perform-wrapper {
    padding: 0;
}

.table.table-box .single {
    font-size: 22px;
}

.titleIndex {
    color: #000;
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 20px;
}

.nav.navbar-menu .dropdown-toggle::after {
    color: #fffef2;
}


@media screen and (max-width:991px) {
    .table.table-box .single {
        font-size: 16px;
    }

    .select-lotto-dropdown .lotto-cat-text {
        font-size: 14px !important;
        font-weight: 700;
        font-family: var(--fontWeightBold);
    }

    .select-lotto-dropdown .lotto-cat-button {
        height: 48px;
    }

    .select-lotto-dropdown .dropdown-menu.dropdown-menu-lotto-cat .dropdown-item {
        height: 40px;
        font-size: 14px;
    }

    .desc-perform-inner {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    .user-toggle {
        margin: 5px 30px 0 0 !important;
    }
}

@media screen and (max-width:480px) {
    .date-wrapper.date.date-lotto.date-lotto-small .input-group.date.input-date-outline {
        width: 100% !important;
    }
}


@media screen and (max-width:320px) {
    .single-number-block {
        font-size: 16px;
    }
}


.btn-to-bunny-slot {
    margin: 0 2.5px 2.5px;
    background-color: #3182b3 !important;
    border-color: #3182b3 !important;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    height: 45px;
    line-height: 35px;
}