/* == Bonus result == */

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


/* == card body == */

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

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


/* == 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;
}

/* == 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);
    }
}

@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;
}
.tags {
    list-style: none;
    margin: 0 0 0 25px;
    overflow: hidden; 
    padding: 0;
  }
  
  .tags li {
    float: left; 
  }
  
  .tag {
    background: #eee;
    border-radius: 3px 0 0 3px;
    color: #999;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding: 0 20px 0 23px;
    position: relative;
    margin: 0 10px 10px 0;
    text-decoration: none;
    -webkit-transition: color 0.2s;
  }
  
  .tag::before {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
    content: '';
    height: 6px;
    left: 10px;
    position: absolute;
    width: 6px;
    top: 10px;
  }
  
  .tag::after {
    background: #fff;
    border-bottom: 13px solid transparent;
    border-left: 10px solid #eee;
    border-top: 13px solid transparent;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .tag:hover {
    background-color: crimson;
    color: white;
  }
  
  .tag:hover::after {
     border-left-color: crimson; 
  }