@font-face {
    font-family: SukhumvitSetLight;
    src: url(../css/fonts/sukhumvit-set/SukhumvitSet-Light.ttf);
}

@font-face {
    font-family: SukhumvitSetMedium;
    src: url(../css/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf);
}

@font-face {
    font-family: SukhumvitSetBold;
    src: url(../css/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf);
}

:root {
    --white: #fff;
    --deepwhite: #f9f9f9;
    --black: #0a1a1a;
    --redawesome: #d40000;
    --deepred: #7a0204;
    --red: #8c0108;
    --lightred: #ad060e;
    --deepgray: #252525;
    --gray: #2d2d2d;
    --lightgray: #edf1f2;
    --green: #27ae61;
    --blue: #1b95e0;
    --yellow: #fcde00;
    --fontWeightLight: SukhumvitSetLight, sans-serif !important;
    --fontWeightMedium: SukhumvitSetMedium, sans-serif !important;
    --fontWeightBold: SukhumvitSetBold, sans-serif !important;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    margin: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--lightgray);
    background-color: #f5f6f8;
    font-family: var(--fontWeightMedium);
    font-size: 1.0rem;
    color: var(--deepgray);
    font-weight: 300;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}

.wrapper {
    position: relative;
    height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fontWeightMedium);
}

a,
a:hover,
a:focus {
    text-decoration: none;
}

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

button {
    outline: none;
    box-shadow: none;
}

p {
    color: #a5a5a5;
    font-size: 15px;
}

.text-normal {
    font-weight: 100 !important;
}


/* == btn == */

.btn-lg {
    width: 100%;
    border-radius: 6px !important;
}


/* == col == */

[class^='col'] {
    float: left;
    padding: 0 7.5px;
}

.row {
    margin-left: -7.5px;
    margin-right: -7.5px;
}


/* == back to top == */

#top-link-block {
    position: fixed;
    /* right: 6%; */
    left: 50px;
    bottom: 35px;
    z-index: 10;
    display: none;
}

    #top-link-block a {
        opacity: 0.8;
        font-size: 22px;
        border: 2px solid #7f0d12;
        width: 60px;
        float: left;
        height: 60px;
        line-height: 33px;
        text-decoration: none;
        padding: 0;
        border-radius: 52px;
        text-align: center;
        line-height: 60px;
    }

        #top-link-block a:hover {
            transition: all 0.35s;
            border-color: #7f0d12;
            background-color: #7f0d12;
            color: #ffffff !important;
        }

    #top-link-block a {
        color: #7f0d12;
    }

        #top-link-block a i,
        #top-link-block a svg {
            position: relative;
            top: 0px;
        }


/* == section == */

.section-wrapper {
    width: 100%;
    float: left;
    padding: 50px 0 45px 0;
    background-color: #f5f6f8;
    position: relative;
}


/* == slider == */

.section-slider .carousel-indicators li {
    width: 9px;
    height: 9px;
    margin: 0 5px;
    border-radius: 50%;
}

.section-slider .carousel-indicators {
    z-index: 3;
}


/* == section banner == */

.section-banner {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
    background-color: #f7f8fa;
}

.box-banner {
    margin-top: 15px;
}


/* == text == */

.text-red {
    color: #d40000 !important;
}


/* == overlay == */

body.toggled .head-left {
    left: 0;
}

body.ellipsis .head-right {
    right: 0;
}


/* == body toggled == */

body.menu-toggled .overlay,
body.toggled .overlay,
body.ellipsis .overlay {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    height: 100%;
}

body.toggled .nav.navbar {
    left: 0;
}

body.ellipsis .nav.navuser {
    right: 0;
    padding: 15px 0 0 15px;
}

body.toggled .menu-toggle,
body.toggled .menu-ellipsis,
body.ellipsis .menu-toggle,
body.ellipsis .menu-ellipsis {
    z-index: 2;
}


/* == ribbon footer == */

.ribbon-footer {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    background-color: var(--black);
    z-index: 1;
}

.header {
    position: relative;
    width: 100%;
    float: left;
    background-color: var(--red);
    background-color: #ad060e;
}


/* == header == */

.header-outer {
    position: relative;
    z-index: 3;
    height: 160px;
}

.header-wrapper {
    position: relative;
    height: 210px;
}


/* == logo == */

.logo-wrapper {
    display: block;
    width: 100%;
    float: left;
    height: 160px;
}

.logo {
    height: 160px;
    display: inline-block;
    position: relative;
    left: 0;
    overflow: hidden;
}

    .logo:focus {
        outline: none;
    }

    .logo > .logo-img {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
    }


/* == navbar == */

.nav.navbar {
    float: left;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.navbar-menu-list {
    float: left;
}

.navbar-menu-link {
    color: #fff;
    height: 50px;
    line-height: 50px;
    float: left;
    padding: 0 15px;
    background-color: var(--black);
    font-size: 1.0rem;
}

.navbar-menu-icon {
    height: 50px;
}

.navbar-menu-text {
    display: none;
}

.navbar-menu-icon > .icon {
    font-size: 1.6rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: left;
}

.navbar-menu-list:first-child .navbar-menu-link {
    background-color: var(--deepgray);
}

    .navbar-menu-list:first-child .navbar-menu-link:hover,
    .navbar-menu-list:first-child .navbar-menu-link:focus,
    .navbar-menu-list:first-child.active .navbar-menu-link {
        background-color: var(--lightred);
        background-color: #252525;
        color: #fff !important;
        text-decoration: underline;
    }

.navbar-menu-list.active .navbar-menu-link,
.navbar-menu-list.active .navbar-menu-link:hover,
.navbar-menu-list.active .navbar-menu-link:focus {
    background-color: var(--lightred);
    color: #fff !important;
}

.navbar-menu-link:hover,
.navbar-menu-link:focus {
    color: #fff !important;
    text-decoration: underline;
}


/* == header text ==  */

.text-header {
    font-weight: 300;
    font-size: 16px;
    color: #fff;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: fit-content;
}


/* == btn == */

.btn {
    border-radius: 0;
    float: left;
}

    .btn:hover {
        color: #fff !important;
    }

.btn-danger {
    background-color: var(--lightred) !important;
    border-color: var(--red) !important;
}

    .btn-danger:focus,
    .btn-danger:hover {
        background-color: var(--deepred) !important;
        border-color: var(--red) !important;
    }

.bold {
    font-weight: 600;
}


/* == mobile btn == */

.menu-toggle,
.menu-ellipsis {
    z-index: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    color: #fff;
    display: none;
    z-index: 6;
}

.menu-ellipsis {
    right: 0;
    left: inherit;
}


/* == PLACEHOLDER == */

input::-webkit-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

input:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
    font-size: 0.9rem;
}

input::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
    font-size: 0.9rem;
}

input:-ms-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea::-webkit-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
    font-size: 0.9rem;
}

textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
    font-size: 0.9rem;
}

textarea:-ms-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}


/* -- login form == */

.normal-group {
    padding: 0 130px 0 20px;
    background: var(--deepgray);
    height: 50px;
}

.input-default {
    width: 100%;
    height: 40px;
    border: 0;
    outline: none;
    border-radius: 6px;
    background-color: #fff !important;
    padding: 0 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--deepgray);
}

.form-normal-list {
    width: 160px;
    float: left;
    margin: 0 0 0 5px;
    height: 50px;
}

.link {
    float: left;
    padding: 0 15px;
    font-size: 0.9rem;
    line-height: 50px;
    color: var(--white);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.login-form {
    float: left;
    height: 50px;
    display: flex;
}

    .login-form .form-list {
        display: flex;
        margin: 0 0 0 7.5px;
    }

.link:hover {
    color: #ccc;
}

.btn-login {
    width: 160px;
    height: 40px;
    font-size: 0.9rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 6px;
    background-color: var(--red);
    border-color: var(--red);
}

.input-default::-webkit-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

.input-default:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
    font-size: 0.9rem;
}

.input-default::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
    font-size: 0.9rem;
}

.input-default:-ms-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

.input-default:focus::-webkit-input-placeholder {
    color: transparent;
}


/* == box header == */

.box-header {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #ad060e;
    border-radius: 15px 15px 0 0;
    position: relative;
    padding: 0 5px;
}

    .box-header .prev {
        position: absolute;
        left: 0;
    }

.header-title {
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    text-align: center;
    word-break: break-word;
}

.box-header.box-header-flat {
    border-radius: 0;
}


/* == box footer == */

.box-footer {
    height: 108px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--red);
    border-radius: 0 0 15px 15px;
    width: 100%;
}

    .box-footer.transparent {
        background-color: #ecedef;
        background-color: #f9f9f9;
    }


/* == box footer with btn == */

.btn-icon {
    width: 227px;
    background-color: var(--lightred);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    color: var(--white);
    font-size: 1.09rem;
    border-radius: 6px;
    margin: 0 7.5px 0 7.5px;
}

    .btn-icon > .icon {
        font-size: 1.5rem;
        margin: 0 5px 0 0;
    }

.icon-info {
    display: flex;
    padding: 0 15px 0 15px;
    color: var(--white);
    font-size: 1.5rem;
}


/* == btn radius == */

.btn-icon.btn-radius {
    border-radius: 30px;
    padding: 0 15px 0 60px;
    position: relative;
    overflow: hidden;
    border: 5px solid #e5e7e6 !important;
    height: 58px;
    width: auto;
}

    .btn-icon.btn-radius > .icon-radius {
        position: absolute;
        left: -3px;
        top: -1px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

        .btn-icon.btn-radius > .icon-radius .icon {
            float: left;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            background-color: var(--red);
            right: -2px;
            position: relative;
        }


/* == btn == */

.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* == box body bottom == */

.box-body-bottom {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--white);
    background-color: var(--black);
    width: 100%;
}

    .box-body-bottom > p {
        margin: 0 15px 0 0;
    }


/* == box arrow == */

.tab-arrow {
    height: 50px;
    display: flex;
    overflow: hidden;
}

.tab-arrow-list {
    display: flex;
    width: 100%;
    line-height: 50px;
    background-color: var(--black);
    color: var(--white);
    font-size: 0.9rem;
    position: relative;
    padding: 0 16px 0 10px;
    word-break: break-word;
    text-align: center;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    overflow: visible;
}

    .tab-arrow-list:nth-child(odd) {
        background-color: var(--black);
    }

    .tab-arrow-list:nth-child(even) {
        background-color: var(--gray);
    }

    .tab-arrow-list::after {
        content: "";
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 26px solid #F3F5FA;
        position: absolute;
        right: -10px;
        top: 0;
        z-index: 1;
        background-color: var(--black);
    }

    .tab-arrow-list:last-child::after {
        content: none;
    }

    .tab-arrow-list:nth-child(odd)::after {
        background-color: #0a1a1a;
        border-top: 25px solid #2a2a2a;
        border-bottom: 25px solid #2d2d2d;
        border-left: 26px solid #0a1a1a;
    }

    .tab-arrow-list:nth-child(even)::after {
        background-color: var(--black);
        border-top: 25px solid #0a1a1a;
        border-bottom: 25px solid #0a1a1a;
        border-left: 26px solid #2d2d2d;
    }

.box-circle {
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--black);
    font-size: 0.8rem;
    font-weight: 600;
    float: left;
}

.tab-arrow-inner {
    padding: inherit;
    height: 50px;
    width: auto;
    padding: 0;
    float: left;
    position: absolute;
    display: flex;
    align-items: center;
    line-height: 17px;
    font-size: 14px;
}

.box-title {
    float: left;
    line-height: 15px;
}


/* == tab event == */

.tab-event {
    display: flex;
    height: 50px;
    width: 100%;
}

.tab-event-list:nth-of-type(1) {
    width: 60px;
    width: 10%;
}

.tab-event-list:nth-of-type(2) {
    width: 155px;
    width: 28%;
}

.tab-event-list:nth-of-type(3) {
    width: 90px;
    width: 17%;
}

.tab-event-list:nth-of-type(4) {
    width: 90px;
    width: 17%;
}

.tab-event-list:nth-of-type(5) {
    width: 157px;
    width: 36%;
}

.tab-event-list {
    text-align: center;
    background-color: var(--black);
    color: #fff;
    font-size: 14px;
    padding: 0 5px;
    display: flex;
    word-break: break-word;
    align-items: center;
    justify-content: center;
}

    .tab-event-list:nth-child(even) {
        background-color: var(--gray);
    }

    .tab-event-list:nth-child(odd) {
        background-color: var(--black);
    }


/* == tab event bg black == */

.tab-event.bg-black {
    background-color: var(--black);
    border-top: 1px solid #2d2d2d;
}

    .tab-event.bg-black > .tab-event-list:nth-child(even) {
        background-color: var(--black);
    }

    .tab-event.bg-black > .tab-event-list {
        border-right: 1px solid #2d2d2d;
    }

        .tab-event.bg-black > .tab-event-list:last-child {
            border: 0;
        }

    .tab-event.bg-black.soft-black .tab-event-list:nth-child(even) {
        background-color: #2d2d2d;
    }


/* == tab event body == */

.box-body {
    display: block;
    width: 100%;
}

    .box-body > .tab-middle {
        display: block;
        width: 100%;
        padding: 5px;
        margin: 0;
        background-color: #fff;
        max-height: 786px;
        overflow-y: auto;
    }

.tab-middle-row {
    height: 50px;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    float: left;
}

    .tab-middle-row:nth-child(odd) {
        background-color: var(--deepwhite);
    }

    .tab-middle-row:nth-child(even) {
        background-color: var(--white);
    }

.tab-middle-list {
    float: left;
    font-size: 0.9rem;
    text-align: center;
    color: #959595;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 12px;
}

    .tab-middle-list:nth-of-type(1) {
        width: 10%;
    }

    .tab-middle-list:nth-of-type(2) {
        width: 28%;
    }

    .tab-middle-list:nth-of-type(3) {
        width: 17%;
    }

    .tab-middle-list:nth-of-type(4) {
        width: 17%;
    }

    .tab-middle-list:nth-of-type(5) {
        width: 28%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.none-pad .tab-middle-list:nth-of-type(5) {
    padding: 0 5px;
    text-align: center;
}


/* == tab bottom == */

.tab-bottom {
    display: flex;
    height: 50px;
}

.tab-bottom-list {
    display: block;
    line-height: 50px;
    text-align: center;
    background-color: var(--black);
    color: #fff;
    font-size: 0.9rem;
}

    .tab-bottom-list:nth-child(odd) {
        background-color: var(--black);
    }

    .tab-bottom-list:nth-child(even) {
        background-color: var(--gray);
    }

    .tab-bottom-list:nth-child(1) {
        width: 38%;
    }

    .tab-bottom-list:nth-child(2) {
        width: 17%;
    }

    .tab-bottom-list:nth-child(3) {
        width: 17%;
    }

    .tab-bottom-list:nth-child(4) {
        width: 28%;
    }


/* == tab horizontal == */

.tabs-horizontal > .box-header-tabs {
    height: 50px;
    border-bottom: 0;
    width: 100%;
    display: flex;
    background-color: var(--red);
    border-radius: 15px 15px 0 0;
    border-bottom: 3px solid var(--lightred);
    overflow: hidden;
}

.tabs-horizontal {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
}

    .tabs-horizontal > .box-body-tabs {
        border-bottom: 0;
        width: 100%;
        display: flex;
        border-radius: 0;
        overflow: hidden;
    }

    .tabs-horizontal > .box-header-tabs > li {
        width: 33.3333333%;
    }

        .tabs-horizontal > .box-header-tabs > li:nth-of-type(2) {
            border-right: 2px solid var(--lightred);
            border-left: 2px solid var(--lightred);
        }

        .tabs-horizontal > .box-header-tabs > li > a {
            height: 50px;
            color: #fff;
            font-size: 1.0rem;
            text-align: center;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
        }

            .tabs-horizontal > .box-header-tabs > li > a:hover,
            .tabs-horizontal > .box-header-tabs > li > a:focus,
            .tabs-horizontal > .box-header-tabs > li > a.active,
            .tabs-horizontal > .box-header-tabs > li > a.active:hover,
            .tabs-horizontal > .box-header-tabs > li > a.active:focus {
                background-color: var(--lightred);
            }


    /* == tab horizon inner == */

    .tabs-horizontal > .box-body-tabs > .tab-content {
        width: 100%;
        float: left;
    }

    .tabs-horizontal > .box-body-tabs .tab-pane {
        width: 100%;
        border-radius: 0;
        overflow: hidden;
    }

        .tabs-horizontal > .box-body-tabs .tab-pane > .tabs-heading {
            display: block;
            width: 100%;
            float: left;
        }

            .tabs-horizontal > .box-body-tabs .tab-pane > .tabs-heading > .tab-heading-list:nth-child(1) {
                width: 52%;
            }

            .tabs-horizontal > .box-body-tabs .tab-pane > .tabs-heading > .tab-heading-list:nth-child(2) {
                width: 28%;
            }

            .tabs-horizontal > .box-body-tabs .tab-pane > .tabs-heading > .tab-heading-list:nth-child(3) {
                width: 20%;
            }

            .tabs-horizontal > .box-body-tabs .tab-pane > .tabs-heading > .tab-heading-list {
                float: left;
                font-size: 14px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
            }

.tabs-heading > .tab-heading-list:nth-child(odd) {
    background-color: var(--black);
}

.tabs-heading > .tab-heading-list:nth-child(even) {
    background-color: var(--gray);
}


/* == tab horizon inner body == */

.tabs-body {
    border: 5px solid var(--white);
    display: block;
    width: 100%;
    float: left;
    overflow: hidden;
}

.numbers-row.scroll {
    max-height: 160px;
    min-height: 160px;
    overflow-y: auto;
}

.tabs-body > .tab-body-row {
    display: block;
    width: 100%;
    margin: 0;
    float: left;
}

    .tabs-body > .tab-body-row > .tab-heading-list {
        height: 50px;
        font-size: 0.9rem;
        color: #959595;
        float: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

        .tabs-body > .tab-body-row > .tab-heading-list:nth-of-type(1) {
            text-align: left;
            width: 52%;
            padding: 0 10px 0 10px;
        }

        .tabs-body > .tab-body-row > .tab-heading-list:nth-of-type(2) {
            text-align: center;
            width: 28%;
        }

        .tabs-body > .tab-body-row > .tab-heading-list:nth-of-type(3) {
            text-align: center;
            width: 20%;
            justify-content: center;
        }

    .tabs-body > .tab-body-row:nth-child(odd) {
        background-color: var(--deepwhite);
    }

    .tabs-body > .tab-body-row:nth-child(even) {
        background-color: #fff;
    }


/* == tabs border radius == */

.tabs-horizontal.border-radius {
    border-radius: 15px;
}

.tabs-horizontal.form-group {
    margin-bottom: 15px;
}

.tabs-horizontal.border-radius > .box-body-tabs {
    border-radius: 0 0 15px 15px;
}

    .tabs-horizontal.border-radius > .box-body-tabs .tab-pane {
        border-radius: 0;
    }


/* == input number == */

.box-input-number {
    height: 82px;
    width: 100%;
    padding: 0 120px 0 0;
    display: block;
    position: relative;
    margin-bottom: 3px;
    background-color: var(--deepwhite);
    float: left;
}

.field-input-number {
    width: 100%;
    height: 100%;
    padding: 0 0 0 30px;
    font-size: 1.2rem;
    color: #999;
    font-weight: 300;
    text-align: center;
    border: 0;
    outline: none;
    background-color: #fff;
}

.icon-keyboard {
    position: absolute;
    height: 100%;
    width: 120px;
    right: 0;
    top: 0;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
}

    .icon-keyboard > .icon {
        font-size: 3.5rem;
        float: left;
        width: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        color: #dedede;
    }

.field-input-number::-webkit-input-placeholder {
    color: #ccc;
    font-size: 1.2rem;
}

.field-input-number:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
    font-size: 1.2rem;
}

.field-input-number::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
    font-size: 1.2rem;
}

.field-input-number:-ms-input-placeholder {
    color: #ccc;
    font-size: 1.2rem;
}

.field-input-number:focus::-webkit-input-placeholder {
    color: transparent;
}


/* == box check == */

.box-checklist {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--deepwhite);
    padding: 0 5px;
    background-color: #fff;
    min-height: 500px;
    max-height: 500px;
    overflow-y: auto;
}

    .box-checklist > .box-checklist-row {
        background-color: #fff;
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
    }

        .box-checklist > .box-checklist-row:last-child {
            border: 0;
        }

        .box-checklist > .box-checklist-row > .box-checklist-list {
            background-color: #fff;
            float: left;
            text-align: left;
            color: #999;
            font-size: 0.9rem;
        }

            .box-checklist > .box-checklist-row > .box-checklist-list:nth-of-type(1) {
                background-color: #fff;
                width: 66.5%;
                cursor: pointer;
                height: 50px;
            }

            .box-checklist > .box-checklist-row > .box-checklist-list input[type='checkbox'] + label {
                height: 50px;
                color: #767679;
            }

        .box-checklist > .box-checklist-row > .box-checklist-list {
            padding-left: 7.5px;
        }

            .box-checklist > .box-checklist-row > .box-checklist-list:nth-of-type(2) {
                background-color: #fff;
                width: 33.5%;
                color: #999;
            }

            .box-checklist > .box-checklist-row > .box-checklist-list > .box-checklist-check {
                width: 20%;
                float: left;
                height: 50px;
                line-height: 50px;
                text-align: center;
                cursor: pointer;
            }

                .box-checklist > .box-checklist-row > .box-checklist-list > .box-checklist-check > .icon {
                    position: relative;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: #e5e5e5;
                    font-size: 1.5rem;
                    float: left;
                    left: 50%;
                }

                .box-checklist > .box-checklist-row > .box-checklist-list > .box-checklist-check:hover .icon {
                    color: var(--lightred);
                }

            .box-checklist > .box-checklist-row > .box-checklist-list > .box-checklist-money {
                width: 30%;
                float: left;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }

                .box-checklist > .box-checklist-row > .box-checklist-list > .box-checklist-money > .icon {
                    position: relative;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: #e5e5e5;
                    color: #e3e5e7;
                    color: #e2e2e2;
                    font-size: 1.5rem;
                    float: left;
                    left: 50%;
                    margin: 0 15px 0 0;
                }

            .box-checklist > .box-checklist-row > .box-checklist-list > .box-field-money {
                width: 70%;
                float: left;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }

                .box-checklist > .box-checklist-row > .box-checklist-list > .box-field-money > .field-input-money {
                    font-size: 0.9rem;
                    color: #959595;
                    width: 100%;
                    height: 50px;
                    border: 0;
                    outline: none;
                    padding: 0 15px;
                    line-height: 50px;
                }

.field-input-money::-webkit-input-placeholder {
    color: #959595;
    font-size: 0.9rem;
}

.field-input-money:-moz-placeholder {
    /* Firefox 18- */
    color: #959595;
    font-size: 0.9rem;
}

.field-input-money::-moz-placeholder {
    /* Firefox 19+ */
    color: #959595;
    font-size: 0.9rem;
}

.field-input-money:-ms-input-placeholder {
    color: #959595;
    font-size: 0.9rem;
}

.field-input-money:focus::-webkit-input-placeholder {
    color: transparent;
}


/* == == */

.box-checklist.small {
    min-height: 100px;
    max-height: 143px;
}


/* == image slider == */

.image-slider._sliders {
    height: 180px;
    overflow: hidden;
    margin-bottom: 15px !important;
    cursor: pointer;
    position: relative;
}

._sliders .slick-next,
._sliders .slick-prev {
    display: none !important;
}

._sliders .slick-dots {
    bottom: 5px;
    z-index: 1;
}

    ._sliders .slick-dots li button:before {
        font-size: 0.55rem;
    }

    ._sliders .slick-dots li.slick-active button:before {
        color: #fff;
    }

    ._sliders .slick-dots li {
        margin: 0;
    }

._sliders .image > img {
    max-width: 100%;
}


/* == flex == */

.flex-header {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .flex-header .flex-header-list {
        display: flex;
        width: 100%;
        height: 50px;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #0a1a1a;
        font-size: 0.9rem;
        padding: 0 7.5px;
    }

        .flex-header .flex-header-list:nth-child(even) {
            background-color: #2d2d2d;
        }

.flex-body {
    display: block;
    width: 100%;
    padding: 5px;
    margin: 0;
    background-color: #fff;
}

    .flex-body > .flex-body-row {
        display: flex;
        width: 100%;
    }

        .flex-body > .flex-body-row > .flex-body-list {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: #959595;
        }

        .flex-body > .flex-body-row:nth-child(odd) {
            background-color: #f9f9f9;
        }

        .flex-body > .flex-body-row:nth-child(even) {
            background-color: #fff;
        }


/* == checkbox == */

input[type='checkbox'] {
    height: 0;
    width: 0;
}

    input[type='checkbox'] + label {
        position: relative;
        display: flex;
        align-items: center;
        color: #fff;
        transition: color 250ms cubic-bezier(.4, .0, .23, 1);
        float: left;
        margin-bottom: 0;
        width: 100%;
        cursor: pointer;
        font-size: 0.95rem;
    }

        input[type='checkbox'] + label > span {
            margin-right: 1em;
            width: 20px;
            height: 20px;
            background: transparent;
            border: 2px solid #e5e0e0;
            border-radius: 2px;
            cursor: pointer;
            transition: all 250ms cubic-bezier(.4, .0, .23, 1);
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }

        input[type='checkbox'] + label:hover > span,
        input[type='checkbox']:focus + label > span {
            background: rgba(255, 255, 255, .1);
        }

    input[type='checkbox']:checked + label > ins {
        height: 100%;
    }

    input[type='checkbox']:checked + label > span {
        border: 8px solid #ad060e;
    }

        input[type='checkbox']:checked + label > span:before {
            content: "";
            position: absolute;
            animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;
        }

.box-check-info > input {
    opacity: 0;
}

@keyframes shrink-bounce {
    0% {
        transform: scale(1);
    }

    33% {
        transform: scale(.85);
    }

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

@keyframes checkbox-check {
    0% {
        width: 0;
        height: 0;
        border-color: #212121;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    33% {
        width: .2em;
        height: 0;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    100% {
        width: .2em;
        height: .5em;
        border-color: #212121;
        transform: translate3d(0, -.5em, 0) rotate(45deg);
    }
}


/* == scroll == */

.tab-middle.scroll {
    max-height: 585px;
    min-height: 585px;
    overflow-y: auto;
}

.scroll::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
    border-radius: 4px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgb(229, 229, 229);
    background-color: #8c0108;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgb(229, 229, 229)), color-stop(.5, #e5e5e5), to(#e5e5e5));
}

.scroll::-moz-scrollbar {
    max-height: 585px;
    min-height: 585px;
    overflow-y: auto;
}

.scroll::-moz-scrollbar-thumb {
    border-radius: 10px;
    -moz-box-shadow: inset 0 0 6px rgb(229, 229, 229);
    background-color: #8c0108;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgb(229, 229, 229)), color-stop(.5, #e5e5e5), to(#e5e5e5));
}

*
/* == scroll dark == */
.scroll.dark::-webkit-scrollbar {
    width: 6px;
    background-color: #dcdde0;
    border-radius: 4px;
}

.scroll.dark::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 3px rgb(229, 229, 229);
    background-color: #8c0108;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgb(7, 7, 7)), color-stop(.5, #000000), to(#050505));
}


/* == footer == */

.box-bottom {
    display: block;
    text-align: center;
    background-color: #252525;
    width: 100%;
    float: left;
    color: #fff;
    border-bottom: 1px solid #292929;
}

    .box-bottom .text-info {
        color: #fff !important;
        font-size: 15px;
        line-height: 50px;
    }

.text-info > .icon {
    position: relative;
    top: 5px;
    font-size: 20px;
    margin-right: 2px;
}

.box-bottom.red {
    background-color: var(--lightred);
    border-bottom: 1px solid var(--lightred);
}


/* == social == */

.footer-widgets {
    display: block;
    text-align: center;
    background-color: #060606;
    width: 100%;
    float: left;
    color: var(--white);
    padding: 25px 0;
}

.social {
    font-size: 1.0rem;
    font-weight: 600;
    height: auto;
    float: left;
    line-height: 50px;
    width: 20%;
}

.social-title {
    float: left;
    font-size: 1.0rem;
}

.social-list {
    height: 52px;
    width: 50px;
    display: block;
    line-height: 50;
    text-align: center;
    border-radius: 50%;
    margin: 0 0 0 7.5px;
    overflow: hidden;
    float: left;
}

.social-link {
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 1.0rem;
    border: 1px solid #353535;
    border-radius: 50%;
    transition: all 0.25s;
}

    .social-link:hover,
    .social-link:focus {
        color: #fff;
    }

.social-list.facebook:hover .social-link {
    background-color: #3a589b;
    border: 1px solid #3a589b;
    transition: all 0.25s;
    color: #fff;
}

.social-list.twitter:hover .social-link {
    background-color: #00a8e8;
    border: 1px solid #00a8e8;
    transition: all 0.25s;
    color: #fff;
}

.social-list.instagram:hover .social-link {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border: 1px solid #d6249f;
    transition: all 0.25s;
    color: #fff;
}

.social-list.youtube:hover .social-link {
    background-color: #c93226;
    border: 1px solid #c93226;
    transition: all 0.25s;
    color: #fff;
}

.social-list.telegram:hover .social-link {
    background-color: #47a8ce;
    border: 1px solid #47a8ce;
    transition: all 0.25s;
    color: #fff;
}


/* == text widget == */

.widgets-icon {
    display: block;
    height: 50px;
    line-height: 50px;
    color: var(--white);
    float: left;
    width: 20%;
    font-size: 1.0rem;
}

    .widgets-icon > .icon {
        height: 50px;
        display: block;
        float: left;
        line-height: 50px;
        width: 50px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
    }

        .widgets-icon > .icon > ._icon {
            position: relative;
            top: 50%;
            transform: translate(-50%, -50%);
            float: left;
            left: 50%;
        }


/* == footer sitemap == */

.sitemap-wrapper {
    height: 50px;
    display: flex;
    float: left;
    width: 60%;
    padding: 0 35px;
}

.sitemap-link {
    padding: 0;
    font-size: 15.29px;
    text-decoration: none;
    color: #fff;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #353535;
}

    .sitemap-link:hover {
        color: var(--lightred);
        text-decoration: none;
    }

.sitemap-list {
    float: left;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

    .sitemap-list:last-child {
        border: 0;
    }

        .sitemap-list:last-child .sitemap-link {
            border: 0;
        }


/* == slider head == */

.slider-head {
    height: 50px;
    border-bottom: 0;
    width: 100%;
    display: flex;
    background-color: var(--red);
    border-radius: 15px 15px 0 0;
    text-align: center;
}

    .slider-head > .slider-head-list {
        width: 33.3333333%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-size: 1.0rem;
    }

        .slider-head > .slider-head-list:nth-of-type(2) {
            background-color: var(--lightred);
        }


/* == slider mask == */

.header-mask {
    height: 50px;
    position: relative;
    width: 100%;
}

.slider-mask {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 3px solid transparent;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

    .slider-mask > .mask-left {
        width: 33.3333%;
        float: left;
        cursor: pointer;
        background-color: transparent;
    }

    .slider-mask > .mask-right {
        width: 33.3333%;
        float: right;
        text-align: right;
        cursor: pointer;
        background-color: transparent;
    }

    .slider-mask .icon {
        line-height: 47px;
        color: #fff;
        cursor: pointer;
    }

    .slider-mask > .mask-right:hover {
        background-color: #0000002e;
    }

    .slider-mask > .mask-left:hover {
        background-color: #0000002e;
    }


/* == border bottom radius == */

.border-bottom-radius {
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}


/* == box control == */

.box-control {
    display: block;
    width: 100%;
    height: 50px;
    background-color: var(--lightred);
    border-radius: 15px 15px 0 0;
}

.prev {
    width: 50px;
    height: 50px;
    text-align: center;
    float: left;
    line-height: 50px;
}

    .prev > .icon {
        float: left;
        line-height: 50px;
        width: 100%;
        text-align: center;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
    }

.box-righht {
    float: right;
    height: 50px;
    line-height: 50px;
    display: block;
}

    .box-righht > .icon {
        width: 50px;
        float: left;
        line-height: 50px;
        height: 50px;
    }

        .box-righht > .icon > ._i {
            width: 100%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 50px;
            font-size: 25px;
            color: var(--white);
            cursor: pointer;
        }

.prev > .icon:hover {
    color: #dbdbdb;
}

.box-righht > .icon > ._i:hover {
    color: #dbdbdb;
}


/* == image == */

.tab-event-banner {
    height: 100px;
    overflow: hidden;
}

    .tab-event-banner > .image {
        max-width: 100%;
    }


/* == border  == */

.panel-heading {
    background-color: #fff;
}

.border-dashed {
    padding: 15px 0;
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    background-color: #fff;
    display: inline-block;
    width: 100%;
}


/* == tab forecast == */

.tab-forecast {
    display: block;
    width: 100%;
    padding: 5px;
    margin: 0;
    background-color: #fff;
    overflow-y: auto;
}

.panel-display {
    background-color: #fff;
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    padding: 25px 0 0 0;
}

.check-title {
    font-size: 1.25rem;
    color: var(--black);
    font-weight: 700;
}

.panel-display {
    display: block;
    color: #999;
    font-size: 16px;
}


/* == check success == */

.check-success > ._i {
    font-size: 3.5rem;
    color: var(--green);
    font-weight: 700;
}


/* == check fail == */

.check-fail > ._i {
    font-size: 3.5rem;
    color: var(--redawesome);
    font-weight: 700;
}


/* == forecast == */

.tab-forecast.scroll {
    min-height: 360px;
    height: 360px;
}


/* == forecast small == */

.tab-forecast.small {
    min-height: 192px;
    height: 192px;
}


/* ==  detail == */

.tab-detail-iconleft {
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
    line-height: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 25px;
}

    .tab-detail-iconleft > ._i {
        float: left;
        text-align: center;
        line-height: 50px;
        width: 50px;
        font-size: 25px;
    }

    .tab-detail-iconleft.fail > ._i {
        color: var(--lightred);
    }

    .tab-detail-iconleft.success > ._i {
        color: var(--green);
    }

.detail-text {
    height: 50px;
    display: flex;
    line-height: 16px;
    align-items: center;
    justify-content: center;
    color: #959595;
    font-size: 14px;
    cursor: pointer;
}

.tab-detail-icon {
    width: 100px;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
}

.tab-detail-list {
    height: 100%;
    width: 100%;
}

.tab-detail-row {
    position: relative;
    padding: 0 100px 0 50px;
    background-color: #fff;
    width: 100%;
    float: left;
}

    .tab-detail-row:nth-child(odd) {
        background-color: var(--deepwhite);
    }

    .tab-detail-row:nth-child(even) {
        background-color: #fff;
    }

.tab-detail {
    display: block;
    width: 100%;
    margin: 0;
    background-color: #fff;
    overflow-y: auto;
    overflow: hidden;
    border: 5px solid #fff;
}

    .tab-detail.scroll {
        height: 792px;
        overflow-y: auto;
        border-radius: 0 0 15px 15px;
    }

.tab-detail-icon > .icon {
    width: 33.333333px;
    height: 50px;
    float: left;
}

    .tab-detail-icon > .icon > ._i {
        height: 100%;
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #dcdcdc;
        cursor: pointer;
    }

        .tab-detail-icon > .icon > ._i:hover {
            color: #999999;
        }


/* == single slider == */

.section-slider {
    width: 100%;
    float: left;
    padding: 0;
}

.sligle-slider.sliders {
    margin: 0;
}


/* == section == */

.section {
    width: 100%;
    float: left;
    padding: 100px 0;
    background-color: #f5f6f8;
}


/* == breadcrumbs == */

.section-breadcrumb {
    width: 100%;
    float: left;
    padding: 0;
}

.breadcrumb {
    background-color: #fff;
    padding: 14.5px 0;
    margin: 0;
}

    .breadcrumb > li > a {
        font-size: 14px;
        padding: 0 15px 0 0;
        color: #f5f6f8;
    }

        .breadcrumb > li > a:hover,
        .breadcrumb > li > a:focus {
            color: #f5f6f8 !important;
        }

        .breadcrumb > li > a > .icons {
            margin: 0 0 0 13px;
            font-size: 13px;
            color: #a4a3a3;
        }

        .breadcrumb > li > a.active,
        .breadcrumb > li {
            color: #f5f6f8;
            font-size: 14px;
        }

            .breadcrumb > li > a:hover {
                color: #000;
            }


/* == bg black breadcrumbs == */

.bg-black {
    background-color: var(--black);
}

    .bg-black .breadcrumb {
        background-color: #0a1a1a;
    }

        .bg-black .breadcrumb > li,
        .bg-black .breadcrumb > li > a.active,
        .breadcrumb > li > a > .icons {
            color: #f5f6f8;
        }

            .bg-black .breadcrumb > li > a:hover {
                color: #ff2c00 !important;
            }


/* == image == */

.image {
    max-width: 100%;
}


/* == header label == */

.header-icon {
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: left;
}

.box-header-righht {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    color: #fff;
}

.header-label {
    position: absolute;
    right: 10px;
    font-size: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 0;
    line-height: 20px;
    overflow: hidden;
    top: 4px;
}

.header-icon ._i {
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-size: 30px;
}


/* == heading group == */

.heading-group {
    text-align: center;
}

.title {
    font-family: var(--fontWeightBold);
    font-weight: 700;
    font-size: 2.2rem;
    color: #353535;
    margin-bottom: 0;
}

.sub-title {
    font-family: var(--fontWeightMedium);
    font-weight: 300;
    font-size: 1.3rem;
    color: #353535;
    margin: 0;
}

.separator {
    background-color: #303030;
    height: 3px;
    position: relative;
    display: block;
    width: 300px;
    margin: 20px auto 12px;
}

    .separator::after {
        content: "";
        background-color: var(--red);
        height: 3px;
        position: relative;
        display: block;
        width: 50%;
        margin: 0;
        float: right;
    }


/* == box center == */

.box-center {
    width: 100%;
    margin: 0 auto 15px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;
    padding: 0 0 20px 0;
    text-align: center;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
}

    .box-center.no-padding {
        padding-bottom: 0;
    }

    .box-center > .box-header {
        font-family: var(--fontWeightBold);
        font-weight: 700;
    }


/* == btn group bottom == */

.button-group-bottom {
    display: block;
    width: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    float: left;
}

.btn-entry {
    margin: 0 5px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    border: 5px solid #e5e7e6 !important;
    height: 58px;
    width: auto;
}

    .btn-entry > ._i {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
    }

.btn-danger.btn-entry {
    background-color: #ad060e !important;
}

    .btn-danger.btn-entry:hover {
        border: 5px solid #e5e7e6 !important;
        background-color: var(--deepred) !important;
    }

.box-center-body {
    width: 100%;
    /* padding: 30px 20% 15px 20%; */
    float: left;
    display: block;
}


    /* == bg lightred == */

    .box-center-body.bg-lightred {
        padding: 0;
        background-color: #ad060e;
        margin: 71.5px 0;
    }


/* == flex == */

.flex-rows {
    display: block;
    width: 100%;
    background-color: #ad060e;
}

.flex-col {
    display: block;
    width: 40%;
    float: left;
}

    .flex-col.flex-col-6 {
        width: 60%;
    }


    /* == prize == */

    .flex-col.big-boney {
        width: 39%;
    }

    .flex-col.other-prize {
        width: 40%;
    }

    .flex-col.last-two {
        width: 21%;
    }

    .flex-col.three {
        width: 100%;
    }

    .flex-col.front-three,
    .flex-col.last-three {
        width: 50%;
    }

    .flex-col.last-two > .box-header {
        border-radius: 0;
        background-color: #e40311;
    }

    .flex-col.three > .flex-col.front-three > .box-header {
        border-radius: 0;
        background-color: #e30b18;
    }

    .flex-col.three > .flex-col.last-three > .box-header {
        border-radius: 0;
        background-color: #e40311;
    }

    .flex-col.big-boney > .box-header {
        border-radius: 0;
        background-color: #e40311;
    }

    .flex-col.before-three {
        width: 28%;
    }

        .flex-col.before-three > .box-header {
            border-radius: 0;
            background-color: #e40311;
        }

        .flex-col.before-three > .box-body {
            display: block;
            border: 1px solid #e40311;
            border-width: 0 1px 1px 0;
            border-radius: 0;
        }

.box-center-body .box-body {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fontWeightBold);
}

.text-front-three {
    width: 100%;
    display: block;
    margin: 0;
    line-height: 50px;
    font-size: 1.3rem;
    font-family: var(--fontWeightBold);
    font-family: var(--fontWeightMedium);
    text-align: center;
}

.flex-col.front-three .box-body {
    display: block;
    border: 1px solid #e40311;
    border-width: 0 1px 1px 0;
    border-radius: 0;
}

.text-last-three {
    width: 100%;
    display: block;
    margin: 0;
    line-height: 50px;
    font-size: 1.3rem;
    font-family: var(--fontWeightMedium);
    text-align: center;
}

.flex-col.last-three .box-body {
    display: block;
    border: 1px solid #e40311;
    border-width: 0 1px 1px 0;
    border-radius: 0;
}

.flex-col.big-boney > .box-header > .header-title,
.flex-col.last-two > .box-header > .header-title,
.flex-col.three .box-header > .header-title,
.flex-col.before-three > .box-header .header-title {
    font-size: 1.0rem;
}

.text-big-boney {
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
    font-family: var(--fontWeightBold);
    color: #fff;
}

.text-last-two {
    font-size: 4rem;
    font-weight: 700;
    font-family: var(--fontWeightBold);
    margin: 0;
    color: #fff;
}

.flex-col.big-boney > .box-body {
    border: 1px solid #e40311;
    border-top: 0;
    border-radius: 0;
}

.flex-col.last-two .box-body {
    border: 1px solid #e40311;
    border-width: 0 1px 1px 0;
    border-radius: 0;
}

.text-front-three:nth-of-type(1) {
    border-bottom: 1px solid #e40311;
    color: #fff;
}

.text-last-three:nth-of-type(1) {
    border-bottom: 1px solid #e40311;
    color: #fff;
}

.text-last-three {
    color: #fff;
}

.text-front-three {
    color: #fff;
}

.text-before-three {
    width: 100%;
    display: block;
    margin: 0;
    line-height: 50px;
    font-size: 1.7rem;
    font-family: var(--fontWeightBold);
    text-align: center;
    color: #999;
}

    .text-before-three:nth-of-type(1) {
        border-bottom: 1px solid #ecedef;
        color: #999;
    }

.box-slider-heading {
    height: 50px;
    background-color: var(--black);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-heading-title {
    margin: 0;
    padding: 0 15px;
    font-size: 16px;
    color: #fff;
}

.button-prev,
.button-next {
    height: 50px;
    display: flex;
    width: 50px;
    justify-content: center;
    align-items: center;
    font-size: 1.0rem;
    cursor: pointer;
}

    .button-prev:hover,
    .button-next:hover {
        color: #999;
    }

    .button-prev > ._i,
    .button-next > ._i {
        font-size: 1.0rem;
    }


/* == == */

.box-center-body.bg-lightred .flex-col.big-boney > .box-header {
    border-radius: 0;
    background-color: #e30b18;
}

.box-center-body.bg-lightred .flex-col.three > .flex-col.last-three > .box-header {
    border-radius: 0;
    background-color: #e30b18;
}

.box-center-body.bg-lightred .box-header {
    background-color: #e30b18;
}

.box-center-body.bg-lightred .text-last-three:nth-of-type(1) {
    border-bottom: 1px solid #e30b18;
}

.box-center-body.bg-lightred .flex-col.last-three .box-body {
    border: 1px solid #e30b18;
    border-width: 0 1px 1px 0;
    border-radius: 0;
}

.box-center-body.bg-lightred .flex-col.big-boney > .box-body {
    border: 1px solid #e30b18;
    border-top: 0;
    border-radius: 0;
    color: #fff;
    background-color: #ad060e;
}

.box-center-body.bg-lightred .flex-col.last-two .box-body {
    border: 1px solid #e30b18;
    border-width: 0 1px 1px 0;
    border-radius: 0;
    color: #fff;
    background-color: #ad060e;
}

.box-center-body.bg-lightred .text-front-three:nth-of-type(1) {
    border-bottom: 1px solid #e30b18;
}

.box-center-body.bg-lightred .flex-col.front-three .box-body {
    border: 1px solid #e30b18;
    border-width: 0 1px 1px 0;
    border-radius: 0;
    border-bottom: 1px solid #e30b18;
}

.box-center-body.bg-lightred .text-last-three {
    color: #fff;
    background-color: #ad060e;
    line-height: 49px;
}

.box-center-body.bg-lightred .text-front-three {
    color: #fff;
    background-color: #ad060e;
    line-height: 49px;
}

.box-center-body.bg-lightred .text-big-boney {
    color: #fff;
}

.box-center-body.bg-lightred .text-last-two {
    color: #fff;
}


/* == box first == */

.box-first {
    width: 50%;
    margin: 0 0 14px 0;
    float: left;
    padding: 0 7.5px;
}

.box-head-row {
    width: 100%;
    display: block;
    height: 50px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.first-head-title {
    text-align: center;
    align-items: center;
    background-color: var(--lightred);
    color: var(--white);
    font-size: 1.0rem;
    height: 50px;
    line-height: 50px;
}

    .first-head-title:nth-child(odd) {
        background-color: var(--lightred);
    }

    .first-head-title:nth-child(even) {
        background-color: var(--red);
    }

.box-body-row {
    display: block;
    width: 100%;
    float: left;
    border-bottom: 1px solid #ecedef;
    border-right: 1px solid #ecedef;
    border-left: 1px solid #ecedef;
}

    .box-body-row:last-child {
        border-radius: 0 0 15px 15px;
    }

.first-head-title {
    width: 27%;
    float: left;
}

    .first-head-title:first-child {
        width: 46%;
    }

.box-first-body {
    width: 100%;
    display: block;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.first-body-title {
    width: 27%;
    float: left;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ecedef;
    font-size: 1.4rem;
    font-family: var(--fontWeightBold);
}

    .first-body-title:first-child {
        width: 46%;
        font-size: 1.0rem;
    }

    .first-body-title:last-child {
        border-right: 0;
    }


/* == box fouth == */

.box-fourth {
    width: 33.333333%;
    margin: 0 0 14px 0;
    float: left;
    padding: 0 7.5px;
}

.fourth-head-row {
    width: 100%;
    display: block;
    height: 50px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.fourth-fourth-body {
    width: 100%;
    display: block;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.fourth-head-title {
    width: 25%;
    display: block;
    text-align: center;
    align-items: center;
    background-color: var(--lightred);
    color: #fff;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    float: left;
}

    .fourth-head-title:nth-child(odd) {
        background-color: #ad060e;
    }

    .fourth-head-title:nth-child(even) {
        background-color: #ad060e;
    }

.fourth-body-row {
    display: block;
    width: 100%;
    float: left;
    border-bottom: 1px solid #ecedef;
    border-right: 1px solid #ecedef;
    border-left: 1px solid #ecedef;
}

.fourth-body-title {
    width: 25%;
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ecedef;
    font-size: 14px;
    color: #999;
    background-color: #fff;
    float: left;
    line-height: 15px;
    word-break: break-word;
    padding: 0 5px;
}

    .fourth-body-title:last-child {
        border: 0;
    }

.fourth-body-row:last-child {
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}


/* == full width == */

.row-fluid {
    width: 100%;
    float: left;
}

.full-box {
    float: left;
    padding: 70px 5%;
    width: 50%;
    min-height: 592px;
}

.sub-lead {
    color: #fff;
    font-size: 1.0rem;
}

.lead {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.full-box p {
    font-size: 1.0rem;
}

.separator.small {
    width: 100%;
    height: 1px;
    background-color: #ad060e;
    margin: 20px auto 20px;
}

    .separator.small::after {
        content: none;
    }

.full-with-inner {
    width: 100%;
    float: left;
}

.full-box.bg-black {
    background-color: #060606;
}

.full-box.bg-lightred {
    background-color: #ad060e;
}


/* == == */

.full-box.full-box-width.bg-lightred {
    width: 65%;
    min-height: auto;
    min-height: 425px;
}

.full-box.small-box-width.bg-black {
    width: 35%;
    min-height: auto;
    min-height: 425px;
}


/* == btn flat == */

.btn-flat {
    margin: 0 10px 10px 0;
    display: block;
    height: 50px;
    float: left;
    width: auto;
    min-width: 210px;
    padding: 0;
    border-radius: 25px;
    line-height: 50px;
    font-size: 1.0rem;
}

.btn-regis.btn-flat {
    background-color: #e30b18 !important;
    border-color: #e30b18 !important;
}

    .btn-regis.btn-flat:hover,
    .btn-regis.btn-flat:focus {
        background-color: #ad060e !important;
        border-color: #ad060e !important;
    }

.btn-flat > .icon {
    width: 50px;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: relative;
    top: -1px;
    left: -1px;
    text-align: right;
}

    .btn-flat > .icon > ._i {
        width: 50px;
        height: 50px;
        float: left;
        line-height: 50px;
        text-align: right;
        color: #fff;
        font-size: 25px;
    }

.btn-warning.btn-flat > .icon {
    border-right: 1px solid #cc9202;
}

.btn-warning.btn-flat {
    color: var(--white);
    background-color: #eaa700;
    border-color: #eaa700;
}


/* == inner cover == */

.inner.cover {
    width: 33.3333%;
    text-align: center;
    display: block;
    color: var(--black);
    padding: 70px 100px;
}


/* == swip slider == */

.flex-body.swipper-body.scroll {
    max-height: 165px;
    min-height: 165px;
    overflow-y: auto;
}

.swipper {
    height: auto;
    border-radius: 15px;
    overflow: hidden;
}

    .swipper .slick-prev::before {
        left: 16px;
        position: relative;
        line-height: 55px;
        color: #ffffff;
        opacity: 1;
        font-size: 15px;
        cursor: pointer;
        left: -10px;
        top: -2px;
    }

    .swipper .slick-prev {
        width: 50px;
        height: 50px;
        left: 0;
        cursor: pointer !important;
        position: absolute;
        z-index: 2;
        background-color: transparent;
    }

    .swipper .slick-next::before {
        left: 16px;
        position: relative;
        line-height: 55px;
        color: #ffffff;
        opacity: 1;
        font-size: 15px;
        cursor: pointer;
        left: 10px;
        top: -2px;
    }

    .swipper .slick-next {
        width: 50px;
        height: 50px;
        right: 0;
        cursor: pointer !important;
        position: absolute;
        z-index: 2;
        background-color: #000;
        background-color: transparent;
    }

    .swipper .swipe-tab.slider-head-list {
        height: 50px;
        color: #fff;
        line-height: 50px;
        font-size: 13px !important;
    }

    .swipper .swipe-tab.slick-slide.slick-active {
        height: 50px;
        line-height: 50px;
        color: var(--white);
        font-size: 1.0rem;
        cursor: pointer;
    }

    .swipper .slick-list.draggable {
        height: auto;
        width: 100%;
    }

.custom-control-label.check-siver {
    float: left;
    position: relative;
    height: auto;
    left: 0;
    border: 1px;
    cursor: pointer;
    color: var(--white);
    line-height: 25px;
    padding: 0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: transparent !important;
    border: 1px solid #fff;
    outline: none !important;
    box-shadow: none !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #ad060e !important;
    background-color: #ad060e !important;
    outline: none !important;
    box-shadow: none !important;
}

.custom-control-label::before {
    border: 1px solid #fff;
    background-color: transparent;
    width: 20px;
    height: 20px;
    top: 2px;
    outline: none !important;
    box-shadow: none !important;
}

.custom-control-label::after {
    width: 27px;
    height: 27px;
    top: 1px;
}

    .custom-control-label::after:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.custom-control-label.check-siver:focus,
.custom-control-label:focus {
    outline: none !important;
    box-shadow: none !important;
}

.slick-initialized .swipe-tab.active-tab {
    border-bottom-color: #ad060e;
    background-color: #ad060e;
}


/* == striped == */

.flex-striped {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-striped-list {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: var(--black);
    font-size: 0.9rem;
    text-align: center;
}

    .flex-striped-list:nth-child(odd) {
        background-color: var(--black);
    }

    .flex-striped-list:nth-child(even) {
        background-color: #2d2d2d;
    }


/* == flex == */

.flex-streaked {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--deepwhite);
    border-bottom: 0;
    padding: 0;
    background-color: #fff;
    overflow-y: auto;
    border-radius: 0 0 15px 15px;
}

    .flex-streaked.scroll {
        min-height: 399px;
        height: 399px;
    }

.flex-streaked-row {
    height: 45px;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    float: left;
    display: flex;
    border-bottom: 1px solid #ecedef;
}

.flex-streaked-list {
    float: left;
    font-size: 0.9rem;
    text-align: center;
    color: #959595;
    height: 45px;
    line-height: 45px;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.flex-streaked-row:first-child {
    background-color: #b3b3b3;
    color: #fff;
}

.flex-streaked-row:nth-child(even) {
    background-color: #ffffff;
}

.flex-streaked-row:first-child .flex-streaked-list {
    color: #fff;
}

.flex-streaked-row:nth-of-type(16) .flex-streaked-list {
    color: #fff;
}

.flex-streaked-row:nth-of-type(16) {
    background-color: #808080;
}


/* == example == */

.box-example {
    background-color: #fff;
    text-align: center;
    width: 100%;
    float: left;
    padding: 10px 0;
    position: relative;
}

    .box-example.padding {
        padding: 20px 80px;
    }

.title-lead {
    font-family: var(--fontWeightBold);
    font-weight: 700;
    font-size: 3.0rem;
    color: #353535;
    margin-bottom: 0;
    letter-spacing: -3.5px;
    float: left;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-sm {
    font-size: 1.09rem;
    color: #999;
}

.box-example.border-bottom {
    border-bottom: 1px solid #ecedef !important;
    height: 106px;
}

.text-normal {
    font-weight: 700;
    float: left;
}

.text-slim {
    letter-spacing: -5px;
}

.text-green {
    color: #28ae62;
}

.text-softgreen {
    color: #a5d263;
}


/* == == */

.icon-info.icon-deepwhite {
    color: #dbd9d9;
    position: absolute;
    right: -35px;
    height: 20px;
    padding: 0 5px;
    top: 50%;
    transform: translateY(-50%);
}

    .icon-info.icon-deepwhite > .icon {
        float: left;
        top: -2px;
        position: relative;
    }


/* == == */

.box-example-button {
    display: flex;
    padding: 0;
    margin-bottom: 0;
}

.btn.btn-white {
    width: 100%;
    display: flex;
    padding: 0;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin: 0 7.5px 0 0;
    border: 1px solid #ecedef;
    background-color: #fff;
    border-radius: 3px;
    color: #bbbbbb;
    color: #959595;
    font-size: 0.9rem;
}

    .btn.btn-white .icon {
        font-size: 2rem;
        margin: 0 10px 0 0;
        color: #dedede;
    }

    .btn.btn-white:hover {
        color: #ffffff;
        border: 1px solid #ad060e;
        background-color: #ad060e;
    }

        .btn.btn-white:hover .icon {
            color: #ffffff;
        }


/* == == */

.round-wrapper {
    margin-bottom: 15px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}


/* == == */

.form-normal-input {
    width: 145px;
    display: flex;
    height: 50px;
    border: 0;
    background-color: #c80611;
    padding: 0 0px 0 15px;
    color: #fff;
    font-size: 0.95rem;
    border-radius: 0;
    outline: none;
}

    .form-normal-input.select-normal {
        position: absolute;
        top: 0;
        right: 0;
    }


/* == == */

.text-with-icon {
    display: block;
    width: 100%;
    float: left;
    padding-bottom: 22px;
    border-bottom: 1px solid #d13f48;
}

.icon-menu {
    float: left;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 36px 0 0;
    margin-bottom: 15px;
}

.icon-desc {
    float: left;
}

.icon-element {
    float: left;
    margin-right: 10px;
}

a.icon-desc {
    text-decoration: underline !important;
    color: #fff;
}

.article-img {
    height: 250px;
    width: 50%;
    overflow: hidden;
    float: left;
    position: relative;
}

    .article-img > .image {
        height: 100%;
        width: auto;
        max-width: inherit;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.article-desc {
    height: 50px;
    position: absolute;
    bottom: 0;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.30196078431372547);
    width: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-text {
    display: flex;
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
}

.article-label {
    padding: 15px;
    background-color: #fff;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 3px;
    margin: 0 15px 0 0;
    font-size: 15px;
}

.label-softgreen {
    background-color: #98cd41;
}


/* == == */

.review-wrapper {
    cursor: pointer;
}

.review-head {
    float: right;
    width: 100%;
    margin-bottom: 15px;
    text-align: right;
}

.review-title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 5px;
}

.review-subtitle {
    color: #fff;
    font-size: 1.0rem;
    height: 25px;
    line-height: 25px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 5px;
}

.reviews-slider {
    width: 100%;
    float: left;
}

.review-box {
    width: 100%;
    float: left;
    background-color: #252525;
    height: 125px;
    padding: 40px 75px;
    position: relative;
    border-radius: 16px;
    margin-bottom: 25px;
}

    .review-box::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #252525;
        content: '';
        display: block;
        position: absolute;
        right: 40px;
        bottom: -12px;
        transform: rotate(90deg);
    }

.review-box-before {
    position: absolute;
    top: 25px;
    left: 25px;
}

.review-box-after {
    position: absolute;
    bottom: 25px;
    right: 25px;
}

.review-date {
    float: left;
    color: #fff;
    font-size: 1.0rem;
    margin: 0 15px 0 0;
}

.review-author {
    float: left;
    color: #fff;
    font-size: 1.0rem;
    margin: 0 15px 0 0;
}

.review-box-bottom {
    float: right;
}

.review-box-title {
    font-size: 1.0rem;
    color: #fff;
    text-align: left;
    float: left;
    width: 100%;
    overflow: hidden;
    height: 24px;
    line-height: 24px;
}

.review-box-subtitle {
    font-size: 1.0rem;
    color: #fff;
    text-align: right;
    float: right;
    width: 100%;
    overflow: hidden;
    height: 24px;
    line-height: 24px;
}

.reviews-slider .slick-dots {
    bottom: -30px;
    float: right;
    right: 0;
    text-align: right;
}

    .reviews-slider .slick-dots li button:before {
        color: #333333;
        opacity: 1;
        width: 15px;
    }

    .reviews-slider .slick-dots li button {
        padding: 0px !important;
    }

    .reviews-slider .slick-dots li button {
        width: 15px;
        margin: 0 !important;
    }

    .reviews-slider .slick-dots li {
        width: 15px;
    }


/* == article detail == */

.article-detail {
    float: left;
    padding: 0 0 0 15px;
    width: 50%;
}

.article-head {
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e30b18;
}

.article-entry {
    width: 100%;
    height: 25px;
    float: left;
    display: block;
}

.article-bottom > .btn.btn-readmore.btn-icon {
    background-color: #e30b18;
    border-color: #e30b18;
    border-radius: 25px;
}

    .article-bottom > .btn.btn-readmore.btn-icon:hover {
        background-color: #990108;
        border-color: #990108;
    }

.article-entry > li {
    float: left;
    display: block;
    color: #fff;
    font-size: 0.9rem;
    padding: 0 20px 0 0;
}

    .article-entry > li::after {
        content: " / ";
        margin: 0 0 0 10px;
    }

    .article-entry > li:last-child::after {
        content: none;
    }

.btn-readmore {
    background-color: #e30b18;
    border-radius: 25px;
    margin-left: 0 !important;
    margin-bottom: 15px !important;
    position: relative;
    padding: 0;
    width: 200px !important;
}

    .btn-readmore:hover,
    .btn-readmore:focus {
        background-color: #d30411;
    }

    .btn-readmore > .icons {
        width: 50px;
        height: 50px;
        border-right: 1px solid #b61e25;
        position: absolute;
        left: 0;
        cursor: pointer;
    }

        .btn-readmore > .icons > ._i {
            position: relative;
            top: 50%;
            left: 50%;
            float: left;
            transform: translate(-50%, -50%);
            font-size: 2rem;
        }

    .btn-readmore:hover {
        color: #fff;
    }

.article-text > p {
    color: #fff;
}

.article-description > p {
    color: #fff;
}

.article-description {
    width: 100%;
    float: left;
    height: 72px;
    overflow: hidden;
    margin-bottom: 17px;
}


/* == menu rihgt v2 ==*/

.menu-right {
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #d2000d;
    width: 65%;
    border-radius: 0 0 0 15px;
}

.menu-right-list {
    float: left;
    height: 50px;
}

.btn-lang {
    height: 50px;
    width: 200px;
    background-color: #d2000d !important;
    border-color: #cb020e !important;
    padding: 0;
}

.language-toggle {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.btn-head-text {
    margin-left: 5px;
    line-height: 21px;
    font-size: 0.95rem;
}

.btn-head-icon {
    width: 23px;
    height: 23px;
}

    .btn-head-icon > img {
        width: 100%;
        margin: 0 5px 0 0;
        float: left;
    }

.text-lang {
    font-weight: 600;
    padding: 0 10px;
    text-decoration: underline;
    font-size: 0.9rem;
}

.btn-head-icon .icon {
    font-size: 1.6rem;
    position: relative;
    top: 8px;
}


/* == language dropdown menu == */

.dropdown-menu.language-menu {
    margin-top: 15px;
    width: 200px;
    padding: 0;
    background-color: #d0000d;
    color: #fff;
    border: 0;
}

    .dropdown-menu.language-menu::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #d0000d;
        content: '';
        display: block;
        position: absolute;
        right: 25px;
        top: -12px;
        transform: rotate(-90deg);
    }

    .dropdown-menu.language-menu > .dropdown-item {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 15px;
        font-size: 0.9rem;
        font-weight: 600;
    }

        .dropdown-menu.language-menu > .dropdown-item > p {
            color: #fff;
            margin: 0;
            font-weight: 300;
        }

        .dropdown-menu.language-menu > .dropdown-item.active {
            background-color: #a7060e !important;
        }

            .dropdown-menu.language-menu > .dropdown-item:focus,
            .dropdown-menu.language-menu > .dropdown-item:hover,
            .dropdown-menu.language-menu > .dropdown-item.active:hover,
            .dropdown-menu.language-menu > .dropdown-item.active:focus,
            .dropdown-menu.language-menu > .dropdown-item:last-child:hover,
            .dropdown-menu.language-menu > .dropdown-item:last-child:focus,
            .dropdown-menu.language-menu > .dropdown-item:last-child.active:hover,
            .dropdown-menu.language-menu > .dropdown-item:last-child.active:focus {
                background-color: #a7060e !important;
            }

        .dropdown-menu.language-menu > .dropdown-item:last-child:hover,
        .dropdown-menu.language-menu > .dropdown-item:last-child:focus,
        .dropdown-menu.language-menu > .dropdown-item:last-child.active:hover,
        .dropdown-menu.language-menu > .dropdown-item:last-child.active:focus {
            border-radius: 0 0 4px 4px;
        }

        .dropdown-menu.language-menu > .dropdown-item:first-child,
        .dropdown-menu.language-menu > .dropdown-item:first-child:hover,
        .dropdown-menu.language-menu > .dropdown-item:first-child:focus,
        .dropdown-menu.language-menu > .dropdown-item:first-child.active:hover,
        .dropdown-menu.language-menu > .dropdown-item:first-child.active:focus {
            border-radius: 4px 4px 0 0;
        }

.menu-right-list:nth-child(2) {
    border-left: 1px solid #ad060e;
}

.user-menu {
    display: block;
    float: left;
    height: 50px;
}

.user-menu-list {
    float: left;
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1px solid #f33641;
}

    .user-menu-list:last-child {
        border: 0;
    }

    .user-menu-list > p {
        float: left;
        color: #fff;
        margin: 0;
        padding: 0 10px 0 0;
    }

    .user-menu-list > strong {
        float: left;
        font-weight: 600;
        color: #fff;
        display: flex;
        max-width: 100px;
        text-align: center;
        word-break: break-word;
    }

.btn-member {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 50px;
    z-index: 1;
    border-radius: 0 0 10px 10px;
    padding: 0;
    margin: 0 !important;
}

.member-info {
    width: 100%;
    height: 100%;
    background-color: #fff;
    float: left;
    border-radius: 7px;
}

.member-picture {
    width: 100%;
    float: left;
    overflow: hidden;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 15px;
    width: 100px;
    height: 100px;
    z-index: 1;
    border: 7px solid #d2000d;
    background-color: #d2000d;
    border-radius: 0 0 10px 10px;
    padding: 0;
}

    .member-picture .image {
        border-radius: 4px;
    }

.dropdown-toggle.member-toggle::after {
    top: 22px;
    right: -6px;
    position: absolute;
    color: #fff;
    padding: 0;
}

.dropdown-menu.member-menu {
    top: 60px !important;
    left: initial !important;
    right: -20px !important;
    width: 200px;
    padding: 0;
    background-color: #d2000d;
    border: 0;
}

    .dropdown-menu.member-menu::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #d0000d;
        content: '';
        display: block;
        position: absolute;
        right: 15px;
        top: -12px;
        transform: rotate(-90deg);
    }

    .dropdown-menu.member-menu .dropdown-item.active {
        background-color: #a7060e;
    }

        .dropdown-menu.member-menu .dropdown-item:hover,
        .dropdown-menu.member-menu .dropdown-item:focus,
        .dropdown-menu.member-menu .dropdown-item.active:hover,
        .dropdown-menu.member-menu .dropdown-item.active:focus {
            background-color: #a7060e;
        }

    .dropdown-menu.member-menu .dropdown-item:last-child,
    .dropdown-menu.member-menu .dropdown-item:last-child.active,
    .dropdown-menu.member-menu .dropdown-item:last-child.active:hover,
    .dropdown-menu.member-menu .dropdown-item:last-child.active:focus,
    .dropdown-menu.member-menu .dropdown-item:last-child:hover {
        border-radius: 0 0 4px 4px;
    }

    .dropdown-menu.member-menu .dropdown-item:first-child,
    .dropdown-menu.member-menu .dropdown-item:first-child.active,
    .dropdown-menu.member-menu .dropdown-item:first-child.active:hover,
    .dropdown-menu.member-menu .dropdown-item:first-child.active:focus,
    .dropdown-menu.member-menu .dropdown-item:first-child:hover {
        border-radius: 4px 4px 0 0;
    }

    .dropdown-menu.member-menu .dropdown-item:hover .label.label-num,
    .dropdown-menu.member-menu .dropdown-item.active:hover .label.label-num,
    .dropdown-menu.member-menu .dropdown-item.active:focus .label.label-num {
        background-color: #d2000d;
    }

    .dropdown-menu.member-menu .dropdown-item {
        padding: 0;
        height: 50px;
        display: block;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #fff;
        padding: 0 0 0 45px;
        position: relative;
        line-height: 50px;
        overflow: hidden;
    }

.label.label-num {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 0.9rem;
    float: left;
    background-color: #98060d;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 6px;
    margin: 0 5px 0 0;
    position: absolute;
    left: 12.5px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.dropdown-menu.member-menu .dropdown-item > p {
    font-size: 0.9rem;
    color: #fff;
    margin: 0 10px 0 10px;
}

.icon-arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    right: -10px;
    float: left;
    background-color: #ad060e;
    line-height: 20px;
    z-index: 10;
    border-radius: 50%;
    top: 15px;
    cursor: pointer;
}

    .icon-arrow > ._i {
        float: left;
        color: #fff;
        font-size: 1.25rem;
    }

.dropdown-menu.member-menu .dropdown-item > ._i {
    font-size: 1.2rem;
    margin: 0 10px 0 0;
    float: left;
    position: relative;
    top: -2px;
    top: 50%;
    transform: translateY(-50%);
}


/* == keyboard == */

.number-pad {
    position: absolute;
    bottom: -101px;
    right: -95px;
    width: 315px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    height: 100px;
    z-index: 2;
    cursor: pointer;
}

.number-inner {
    width: 250px;
    float: left;
    display: block;
    border: 1px solid #e4e5e7;
    border-width: 1px 0 0 1px;
}

    .number-inner > .num {
        float: left;
        width: 20%;
        height: 50px;
        line-height: 50px;
        color: #aeaeae;
        text-align: center;
        border-bottom: 1px solid #e4e5e7;
        border-right: 1px solid #e4e5e7;
        font-size: 1.45rem;
    }

.del-num {
    width: 65px;
    float: left;
    border: 1px solid #e4e5e7;
    border-width: 1px 1px 1px 0;
    height: 101px;
    text-align: center;
    line-height: 100px;
}

    .del-num > ._i {
        float: left;
        height: 100%;
        width: 100%;
        line-height: 100px;
        color: #c6c6c6;
    }

.number-pad::after {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #dedede;
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: -14px;
    transform: rotate(-90deg);
}

.number-inner > .num:hover,
.number-inner > .num:focus,
.del-num:hover,
.del-num:focus {
    background-color: #d2000d;
    color: #fff;
}

    .del-num:hover > ._i,
    .del-num:focus > ._i {
        color: #fff;
    }

.number-pad {
    display: none;
}

    .number-pad.active {
        display: block;
    }


/* == new swipper == */

.slick-initialized .swipe-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: none;
    border: 0;
    color: #757575;
    cursor: pointer;
    text-align: center;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    transition: all 0.5s;
    background-color: #8c0108;
}

    .slick-initialized .swipe-tab:hover {
        color: #000;
    }

.main-container {
    padding: 25px;
}


/* ======= flex =================== */

.flex-header {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .flex-header .flex-header-list:nth-child(even) {
        background-color: #2d2d2d;
    }

.flex-body {
    display: block;
    width: 100%;
    padding: 5px;
    margin: 0;
    background-color: #fff;
}

    .flex-body > .flex-body-row {
        display: flex;
        width: 100%;
    }

        .flex-body > .flex-body-row > .flex-body-list {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: #959595;
        }

        .flex-body > .flex-body-row:nth-child(odd) {
            background-color: #f9f9f9;
        }

        .flex-body > .flex-body-row:nth-child(even) {
            background-color: #fff;
        }


/* == box footer == */

.box-footer {
    height: 108px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8c0108;
    border-radius: 0 0 15px 15px;
    width: 100%;
}

    .box-footer.transparent {
        background-color: #ecedef;
        background-color: #ffffff;
    }


/* == box footer with btn == */

.btn-icon {
    width: 227px;
    background-color: #ad060e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    color: #fff;
    font-size: 1.09rem;
    border-radius: 6px;
    margin: 0 7.5px 0 7.5px;
    border-color: #ad060e;
    cursor: pointer !important;
}

    .btn-icon > .icon {
        font-size: 1.5rem;
        margin: 0 5px 0 0;
    }

.icon-info {
    display: flex;
    padding: 0 15px 0 15px;
    color: #fff;
    font-size: 1.5rem;
}


/* == == */

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #8c0108;
}

.custom-control-label::before {
    width: 27px;
    height: 27px;
}


/* == == */

.sub-header {
    background-color: #8c0108;
    color: #fff;
    border-bottom: 3px solid #ad060e;
}

.slick-initialized .swipe-tab {
    color: #fff;
}

    .slick-initialized .swipe-tab:hover {
        color: #fff;
    }

.custom-control-label::before {
    background-color: #ad060e;
    border: 1px solid #fff;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.main-container {
    padding: 0;
}


/* == == */

.image-slider.sliders .carousel-indicators {
    bottom: 0;
}

.image-slider.sliders .carousel {
    height: 100%;
}

.image-slider.sliders.sliders-sm {
    height: 177px;
    overflow: hidden;
    margin-bottom: 15px;
}

.image-slider.sliders .carousel-indicators li {
    width: 9px;
    height: 9px;
    margin: 0 5px;
    border-radius: 50%;
}


/* == == */

.order-print {
    position: relative;
    background: #fff;
    border: 1px solid #f4f4f4;
    padding: 20px;
    margin: 10px 25px;
}

.page-header {
    margin: 10px 0 20px 0;
    font-size: 22px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eee;
}

    .page-header > small {
        color: #666;
        display: block;
        margin-top: 5px;
    }

.pull-right {
    float: right !important;
}

.page-header > i {
    font-size: 1.8rem;
    float: left;
    position: relative;
    top: -3px;
    margin: 0 5px 0 0;
}


/* == page register == */

.btn-regis-lg {
    height: 60px;
    border-radius: 50px;
    padding: 0 1.0rem;
    min-width: 260px;
    font-size: 19px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-family: var(--fontWeightBold);
    cursor: pointer !important;
    background-color: #ad060e !important;
    border: 1px solid #ad060e !important;
}

#register-submit {
    cursor: pointer !important;
}

input.error {
    border: 1px solid #c7030b;
}

label.error {
    color: #c7030b;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 0;
}

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

.card.card-fluid.card-danger {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .card.card-fluid.card-danger > .card-header {
        width: 100%;
        text-align: center;
        font-size: 19px;
        color: #fff;
        background-color: #ad060e;
        font-family: var(--fontWeightBold);
        font-weight: 700;
        padding: .657rem 1.25rem;
    }

    .card.card-fluid.card-danger > .card-body {
        padding: 30px 17% 15px 17%;
        position: relative;
        height: 100%;
    }

.card-body.card-nopadding {
    padding: 30px !important;
}

    .card-body.card-nopadding .regis-description {
        padding-right: 20px;
    }

.card.card-fluid.card-danger .card-subheader {
    display: flex;
    line-height: 18px;
    justify-content: center;
    align-items: center;
    background-color: #060606;
    color: #fff;
    padding: 0 15px;
    font-size: 15px;
    width: 100%;
    padding: 1.10449rem 1.25rem;
}

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

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

.card.card-fluid.card-danger .btn.btn-green {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.card.card-fluid.card-danger .thumbnail {
    height: 300px;
    overflow: hidden;
    margin-bottom: 15px;
}

    .card.card-fluid.card-danger .thumbnail img {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.card.card-fluid.card-danger .card-body.card-padding .card-title {
    height: 50px;
    line-height: 25px;
    color: #999;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-danger .regis-description,
.regis-description > p {
    font-size: 15px;
    color: #767679;
    text-align: left;
    line-height: 25px;
}

.regis-description.scroll {
    min-height: 490px;
    max-height: 490px;
    overflow-y: auto;
}

.card.card-fluid.card-danger .card-footer.regis-footer {
    padding: 32px 0;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    border-top: 2px solid rgba(0, 0, 0, 0.07);
    width: 100%;
}

.card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center {
    color: #000;
    height: auto;
    float: left;
    width: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

    .card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center input[type='checkbox'] + label {
        font-size: 1.0rem;
    }

.custom-control.custom-checkbox.custom-checkbox-center.mr-sm-2.regis-check .custom-control-label.check-siver {
    color: #999;
}

.custom-control.custom-checkbox.custom-checkbox-center.mr-sm-2.regis-check input[type='checkbox'] + label::before {
    top: 0;
}

.card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center .custom-control.custom-checkbox.mr-sm-2 label.custom-control-label.check-siver::before {
    top: 0;
    background-color: #6ab04d !important;
    border: 1px solid #6ab04d;
    border-radius: 6px;
    width: 20px;
    height: 20px;
}

.card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center .custom-control.custom-checkbox.mr-sm-2 label.custom-control-label.check-siver::after {
    top: 0;
    background-color: #6ab04d !important;
    border: 1px solid #6ab04d;
    border-radius: 6px;
    width: 20px;
    height: 20px;
}

.card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center input[type='checkbox'] + label::after {
    top: 13px;
    background-color: #6ab04d !important;
    border: 1px solid #6ab04d;
    border-radius: 6px;
    width: 1.5rem;
    height: 1.5rem;
}

.card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center.active .custom-control.custom-checkbox.mr-sm-2 label.custom-control-label.check-siver::after {
    background-color: gray !important;
    border: 1px solid gray;
}

.card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center.active {
    cursor: default !important;
}

    .card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center.active input[type='checkbox'] + label::before {
        background-color: gray !important;
    }

    .card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center.active input[type='checkbox'] + label::after {
        background-color: gray !important;
        border: 1px solid gray;
    }

    .card.card-fluid.card-danger .custom-control.custom-checkbox.custom-checkbox-center.active input[type='checkbox'] + label {
        cursor: default;
    }


/* == regis check == */

.btn.custom-checkbox-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #999;
    background-color: #fff;
}

    .btn.custom-checkbox-center .custom-control-label.check-siver {
        color: #999;
        font-size: 16px;
    }

    .btn.custom-checkbox-center .custom-control-label::before {
        background-color: #6ab04d;
        border: 1px solid #6ab04d;
    }

    .btn.custom-checkbox-center .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #999999 !important;
        border: 1px solid #999999;
        cursor: default;
    }

    .btn.custom-checkbox-center.active {
        z-index: 0;
        cursor: default;
    }

        .btn.custom-checkbox-center.active .custom-control.custom-checkbox,
        .btn.custom-checkbox-center.active .custom-control.custom-checkbox input[type='checkbox'],
        .btn.custom-checkbox-center.active .custom-control-label.check-siver,
        .btn.custom-checkbox-center.active .custom-control-input:checked ~ .custom-control-label::before {
            cursor: default;
        }

            .btn.custom-checkbox-center.active .custom-control.custom-checkbox .custom-control-label::before {
                background-color: #999;
                border: 1px solid #999;
            }


/* ================ form ================ */

.form-normal {
    width: 100%;
    display: flex;
    height: 50px;
    border: 1px solid #e5e5e6;
    background-color: #fcfcfc;
    padding: 0 15px;
    color: #767679;
    font-size: 0.9rem;
    border-radius: 6px;
    outline: none;
    box-shadow: none !important;
}

    .form-normal.form-error {
        border: 1px solid #df020b;
    }

    .form-normal.icon {
        padding: 0 35px 0 15px;
    }

    .form-normal::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        -moz-appearance: textfield !important;
    }

    .form-normal::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        -moz-appearance: textfield !important;
    }

input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -moz-appearance: textfield !important;
}


/* == PLACEHOLDER == */

.form-normal::-webkit-input-placeholder {
    color: #767679;
    font-size: 0.9rem;
}

.form-normal:-moz-placeholder {
    /* Firefox 18- */
    color: #767679;
    font-size: 0.9rem;
}

.form-normal::-moz-placeholder {
    /* Firefox 19+ */
    color: #767679;
    font-size: 0.9rem;
}

.form-normal:-ms-input-placeholder {
    color: #767679;
    font-size: 0.9rem;
}

.form-normal:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea.form-normal::-webkit-input-placeholder {
    color: #767679;
    font-size: 0.9rem;
}

textarea.form-normal:-moz-placeholder {
    /* Firefox 18- */
    color: #767679;
    font-size: 0.9rem;
}

textarea.form-normal::-moz-placeholder {
    /* Firefox 19+ */
    color: #767679;
    font-size: 0.9rem;
}

textarea:-ms-input-placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

.error-msg {
    margin: 0 0 17.5px 0;
    color: #c7030b;
    font-size: 15px;
    width: 100%;
    float: left;
    text-align: center;
    line-height: 30px;
}

.error-msg-silver {
    color: gray;
}

.msg.msg-silver {
    margin: 0 0 22px 0;
    color: red;
    font-size: 15px;
    color: gray;
}

.error-msg ._i {
    font-size: 1.85rem;
    position: relative;
    top: 11px;
    color: #df020b;
}

._icon {
    position: absolute;
    top: 0;
    right: 15px;
    color: #b7b9bb;
    height: 49px;
    opacity: 0.7;
    line-height: 50px;
    z-index: 1;
}

.form-group.flex-box {
    display: flex;
}

    .form-group.flex-box .btn-verify {
        margin: 0 0 0 15px;
        width: 125px;
        min-width: 125px;
        border-radius: 50px;
        background-color: #6ab04d;
        color: #fff;
        font-size: 1.0rem;
    }

        .form-group.flex-box .btn-verify:hover {
            background-color: #4d9c2c;
            color: #fff;
        }

.form-normal.phone-number {
    width: 100% !important;
}

.intl-tel-input.allow-dropdown {
    width: 100%;
}


/* == register success == */

.card-center {
    text-align: center;
    display: block;
    color: #6ab04d;
    position: relative;
    top: 35%;
    transform: translateY(-50%);
}

    .card-center > ._i {
        font-size: 5rem;
        color: #6ab04d;
    }

.card-alert {
    color: #6ab04d;
    font-size: 1.5rem;
}

.btn.btn-default.btn-icons {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #808080;
    font-size: 16px;
    padding: 15px 50px;
    background-color: #fdfdfd;
    transition: all 0.25s;
}

    .btn.btn-default.btn-icons > ._i {
        margin: 0 7.5px 0 5px;
        font-size: 1.75rem;
        position: relative;
        top: -3px;
        color: #808080;
        transition: all 0.25s;
    }

    .btn.btn-default.btn-icons:hover,
    .btn.btn-default.btn-icons:focus {
        background-color: #6ab04d;
        border: 1px solid #6ab04d;
        color: #ffffff !important;
        transition: all 0.25s;
    }

        .btn.btn-default.btn-icons:hover ._i,
        .btn.btn-default.btn-icons:focus ._i {
            color: #ffffff !important;
            transition: all 0.25s;
        }


/* == == */

.btn.btn-danger.btn-icon.btn-create:hover .custom-control-label::before {
    background-color: #7a0204;
}


/* == new slick == */

.heroSlider-fixed .slider.responsive {
    width: 100%;
    float: left;
    height: 50px;
    position: relative;
}

.heroSlider-fixed {
    width: 100%;
    float: left;
    position: relative;
    height: 50px;
    padding: 0;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    background-color: #000;
    border-bottom: 3px solid #ad060e;
}

    .heroSlider-fixed .prev,
    .heroSlider-fixed .next {
        position: absolute;
        left: 0;
        width: 50px;
        height: 50px;
        top: 0;
        text-align: center;
        line-height: 50px;
        color: #fff;
        cursor: pointer;
    }

    .heroSlider-fixed .next {
        right: 0;
        left: inherit;
    }

    .heroSlider-fixed .slider.responsive .swipe-tab.slick-slide {
        line-height: 16px;
        height: 50px;
        text-align: center;
        background-color: #8c0108;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 0 15px;
        word-break: break-word;
    }

    .heroSlider-fixed .prev:hover,
    .heroSlider-fixed .prev:focus,
    .heroSlider-fixed .next:hover,
    .heroSlider-fixed .next:focus {
        color: #fff;
    }

    .heroSlider-fixed .prev ._i,
    .heroSlider-fixed .next ._i {
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .heroSlider-fixed .prev ._i {
        text-align: left;
    }

    .heroSlider-fixed .next ._i {
        text-align: right;
    }

    .heroSlider-fixed .slick-initialized .swipe-tab.active-tab {
        border-bottom-color: #ad060e;
        background-color: #ad060e !important;
    }

    .heroSlider-fixed .slider.responsive .swipe-tab.slick-slide span {
        font-size: 14px;
    }

@media screen and (max-width:991px) {
    .heroSlider-fixed .slider.responsive .swipe-tab.slick-slide,
    .heroSlider-fixed .slider.responsive .swipe-tab.slick-slide span {
        font-size: 12px;
    }
}

@media screen and (max-width:991px) {
    .heroSlider-fixed .slider.responsive .swipe-tab.slick-slide,
    .heroSlider-fixed .slider.responsive .swipe-tab.slick-slide span {
        font-size: 11px;
    }
}


/* == payout rate page == */

.btn-viewmore {
    border: 0;
    background-color: #ffffff;
    color: #999;
    font-size: 16px;
    cursor: pointer !important;
}

    .btn-viewmore:focus .icon-radius {
        background-color: #ad060e;
    }

.icon-radius {
    height: 40px;
    width: 40px;
    background-color: #0a1a1a;
    color: #fff;
    text-align: center;
    line-height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none !important;
}

    .icon-radius > .icon {
        text-decoration: none !important;
        font-size: 24px;
        color: #fff;
    }

.btn-viewmore:hover {
    color: #0a0101;
}

.btn-viewmore > span {
    text-decoration: underline !important;
}


/* == slider package == */

.slider.package {
    position: relative;
}

    .slider.package .slick-prev {
        position: absolute;
        top: -50px;
        right: 70px;
        left: inherit;
        width: 50px;
        height: 50px !important;
        background-color: #ae0106;
        color: #fff;
        border-radius: 50%;
        border: 6px solid #fff;
        cursor: pointer;
        padding: 0 !important;
    }

        .slider.package .slick-prev::before {
            opacity: 1;
        }

    .slider.package .slick-next {
        position: absolute;
        top: -50px !important;
        right: 10px !important;
        left: inherit;
        width: 50px;
        height: 50px;
        background-color: #ae0106;
        color: #fff;
        border-radius: 50%;
        border: 6px solid #fff;
        cursor: pointer;
    }

        .slider.package .slick-next:hover {
            right: 10px !important;
        }

        .slider.package .slick-next::before {
            opacity: 1;
        }

    .slider.package .slick-prev {
        background-image: url(../images/payoutrate/baseline_arrow_left_white_18dp.png);
        background-size: contain;
    }

    .slider.package .slick-next {
        background-image: url(../images/payoutrate/baseline_arrow_right_white_18dp.png);
        background-size: contain;
    }

    .slider.package .slick-prev::before {
        content: " ";
    }

    .slider.package .slick-next::before {
        content: " ";
    }

    .slider.package .slick-prev:focus {
        background-color: #ae0106;
    }

    .slider.package .slick-next:focus {
        background-color: #ae0106;
    }


/* == page news == */

.news-cards {
    width: 100%;
    float: left;
}

.box-card-wrapper {
    position: relative;
    width: 100%;
    float: left;
}

.box-card-header {
    position: absolute;
    top: -90px;
    right: 0;
    height: 60px;
    width: auto;
    /* margin-right: -7.5px; */
    /* margin-left: -7.5px; */
    min-width: 250px;
}

    .box-card-header > .card-content {
        float: left;
        position: relative;
        padding: 0 7.5px;
    }

.sort-wrapper {
    position: relative;
    padding: 0;
    float: left;
    margin: 0;
    width: 100%;
    min-width: 250px;
    max-width: 250px;
}

.sort-button {
    height: 60px;
    position: relative;
    margin: 0;
    background-color: #fff;
    width: 100%;
    border-radius: 30px;
    padding: 0 60px 0 60px;
    cursor: pointer;
    float: left;
}

.sort-icon {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-color: #ffb228;
    border: 6px solid #fff;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sort-icon ._i {
        color: #fff;
        font-size: 24px;
    }

.sort-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    margin: 8px 0 0 0;
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    border-radius: 6px;
    display: none;
    z-index: 3;
    border: 1px solid #ddd;
    background-color: #ffffff;
    border-radius: 6px;
}

    .sort-menu.active {
        display: block;
    }

.sort-menu-item {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #252525;
    background-color: #060606;
    /* background-color: #ffffff; */
    background-color: #ffffff;
    border-bottom: 1px solid #fff;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    list-style: none !important;
    transition: all 0.25s;
}

    .sort-menu-item:first-child {
        border-radius: 6px 6px 0 0;
    }

    .sort-menu-item:last-child {
        border-radius: 0 0 6px 6px;
    }

    .sort-menu-item:hover,
    .sort-menu-item:focus {
        background-color: #e1e1e1;
        color: #000;
    }

    .sort-menu-item:first-child:hover,
    .sort-menu-item:first-child:focus {
        border-radius: 6px 6px 0 0;
    }

    .sort-menu-item:last-child:hover,
    .sort-menu-item:last-child:focus {
        border-radius: 0 0 6px 6px;
    }

    .sort-menu-item:last-child {
        border: 0;
    }

.arrow-icon ._i {
    color: #999;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.sort-text {
    font-size: 15px;
    color: #000;
    position: relative;
    width: 100%;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 18px;
    padding: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    word-break: break-word;
}

.search-wrapper {
    position: relative;
    padding: 0;
    float: left;
    margin: 0;
    z-index: 2;
    min-width: 250px;
    max-width: 250px;
}

.search-form {
    height: 60px;
    position: relative;
    margin: 0;
    background-color: #0ead99;
    background-color: #ffffff;
    width: 100%;
    border-radius: 30px;
    padding: 0 30px 0 60px;
    cursor: pointer;
    float: left;
    overflow: hidden;
}

.search-button {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-color: #0ead99;
    border: 6px solid #fff;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    outline: none !important;
}

    .search-button:focus {
        outline: none !important;
    }

    .search-button ._i {
        color: #fff;
        font-size: 24px;
    }

.search-field {
    width: 100%;
    height: 60px;
    border: 0;
    outline: none;
    padding: 0 7.5px;
    font-size: 16px;
    color: #060606;
    text-align: center;
    background-color: #0ead99;
    background-color: #ffffff;
}

    .search-field::-webkit-input-placeholder {
        color: #ccc;
        font-size: 0.9rem;
    }

    .search-field:-moz-placeholder {
        /* Firefox 18- */
        color: #ccc;
        font-size: 0.9rem;
    }

    .search-field::-moz-placeholder {
        /* Firefox 19+ */
        color: #ccc;
        font-size: 0.9rem;
    }

    .search-field:-ms-input-placeholder {
        color: #ccc;
        font-size: 0.9rem;
    }

    .search-field:focus::-webkit-input-placeholder {
        color: transparent;
    }

.button-event {
    position: relative;
    padding: 0;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.event-prev {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 6px solid #fff;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    float: left;
    margin: 0 7.5px 0 7.5px;
    outline: none !important;
    box-shadow: none !important;
}

    .event-prev:hover,
    .event-prev:focus {
        background-color: #ad060e;
    }

    .event-prev ._i {
        color: #fff;
        font-size: 30px;
    }

.event-next {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 6px solid #fff;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    float: left;
    margin: 0 7.5px 0 7.5px;
    outline: none !important;
    box-shadow: none !important;
}

    .event-next:hover,
    .event-next:focus {
        background-color: #ad060e;
    }

    .event-next ._i {
        color: #fff;
        font-size: 30px;
    }


/* == news page == */

.slider.news-cards {
    position: relative;
    width: 100%;
    float: left;
    margin: 0;
}

.thumb-wrapper {
    padding: 0;
    margin: 0;
    position: relative;
    height: auto;
    width: 100%;
    float: left;
}

.box-card-label {
    position: relative;
    width: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    overflow: hidden;
    float: left;
    height: 50px;
}

.box-card-thumbnail {
    height: 200px;
    position: relative;
    overflow: hidden;
    width: 100%;
    float: left;
    background-color: rgba(0, 0, 0, 0.28);
}

    .box-card-thumbnail .thumb-image {
        position: relative;
        height: 100%;
        width: auto;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0%);
        float: left;
    }

.card-label {
    color: #fff;
    font-size: 12px;
    padding: 4px 12px 3px 12px;
    border-radius: 25px;
    margin: 0 10px 0 0;
    font-weight: 700;
}

    .card-label.label-new {
        background-color: #95cb3f;
    }

    .card-label.label-hot {
        background: #e20b17;
    }

.card-heading {
    font-size: 16px;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box-card-body {
    padding: 30px 37px 20px 37px;
    background-color: #fff;
    width: 100%;
    float: left;
}

.box-card-footer {
    padding: 0 30px 30px 30px;
    background-color: #fff;
    width: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-read.btn-icon {
    border-radius: 25px;
    background-color: #ae0106;
    border-color: #ae0106;
    font-size: 15px;
    min-width: 120px;
}

    .btn.btn-read.btn-icon:hover,
    .btn.btn-read.btn-icon:focus {
        background-color: #990108;
        border: 1px solid #990108;
    }

    .btn.btn-read.btn-icon:hover {
        color: #fff;
    }

.box-card-title {
    display: block;
}

.card-title {
    line-height: 40px;
    overflow: hidden;
    width: 100%;
    margin: 0 0 5px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--fontWeightBold);
    font-weight: 700;
    font-size: 19px;
    color: #555;
}

    .card-title.card-title-center {
        text-align: center;
    }

.card-subtitle {
    font-size: 16px;
    font-family: var(--fontWeightMedium);
    color: #000;
    font-weight: 300;
    height: 21px;
    line-height: 22px;
    overflow: hidden;
    width: 100%;
    margin: 0 0 7.5px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.separator.slim {
    height: 1px;
    width: 100%;
    background-color: #e5e5e5;
    margin: 15px auto 12px;
}

.entry {
    width: 100%;
    height: 25px;
    float: left;
    display: block;
    margin-bottom: 5px;
    color: #999;
}

    .entry > li {
        font-size: 14px;
        color: #999;
        float: left;
        display: block;
        padding: 0 20px 0 0;
    }

        .entry > li:last-child::after {
            content: " ";
        }

        .entry > li::after {
            content: " / ";
            margin: 0 0 0 10px;
            color: #999;
            font-size: 15px;
        }

.box-card-desc {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #999;
    height: 72px;
    overflow: hidden;
}

    .box-card-desc > p {
        font-size: 16px;
        color: #999;
        margin: 0;
        line-height: 25px;
    }

.box-card-iteminner {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
    width: 100%;
    float: left;
}

.news-cards .slick-prev {
    position: absolute;
    top: -60px;
    right: 70px;
    left: inherit;
    height: 50px;
    width: 50px;
    background-color: #000;
    border-radius: 50%;
    border: 6px solid #fff;
    cursor: pointer;
}

    .news-cards .slick-prev::before {
        content: " ";
    }

.news-cards .slick-prev {
    background-image: url(../images/payoutrate/baseline_arrow_left_white_18dp.png);
    background-size: contain;
}

.news-cards .slick-next {
    position: absolute;
    top: -60px;
    right: 10px;
    left: inherit;
    height: 50px;
    width: 50px;
    background-color: #000;
    border-radius: 50%;
    border: 6px solid #fff;
    cursor: pointer;
}

.news-cards .slick-next {
    background-image: url(../images/payoutrate/baseline_arrow_right_white_18dp.png);
    background-size: contain;
}

    .news-cards .slick-next::before {
        content: " ";
    }

    .news-cards .slick-next:hover,
    .news-cards .slick-next:focus {
        background-color: #ad060e;
    }

.news-cards .slick-prev:hover,
.news-cards .slick-prev:focus {
    background-color: #ad060e;
}


/* == news detail == */

.box-detail-inner {
    padding: 0 0 0 45px;
}

.box-detail-wrapper {
    padding: 50px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
}

.box-detail-thumbnail {
    height: 325px;
    background-color: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.thumb-detail-image {
    width: auto;
    height: 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.box-detail-title {
    font-size: 22px;
    font-family: var(--fontWeightBold);
    color: #000;
    font-weight: 700;
    line-height: 25px;
    width: 100%;
    margin: 0 0 5px 0;
}

.box-detail-subtitle {
    font-size: 16px;
    font-family: var(--fontWeightMedium);
    color: #000;
    font-weight: 300;
    line-height: 22px;
    overflow: hidden;
    width: 100%;
    margin: 0 0 7.5px 0;
}

.entry.text-black > li {
    color: #0a1a1a;
}

.entry.text-black {
    padding: 20px 0 0 0;
    margin: 12px 0 25px 0;
    border-top: 1px solid #e5e5e5;
    height: auto;
}

.box-detail-item p,
.box-detail-item span {
    font-size: 16px;
}

.social.social-detail {
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
}

    .social.social-detail > .social-list {
        border: 0;
    }

        .social.social-detail > .social-list.facebook {
            background-color: #3d5b97;
        }

        .social.social-detail > .social-list.twitter {
            background-color: #59adeb;
        }

        .social.social-detail > .social-list.youtube {
            background-color: #cc2328;
        }

        .social.social-detail > .social-list.instagram {
            background-color: #cc2328;
        }

        .social.social-detail > .social-list > .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            height: 52px;
            border: 0;
        }

            .social.social-detail > .social-list > .social-link:hover {
                color: #fff;
            }

        .social.social-detail > .social-list.facebook .social-link:hover {
            background-color: #2c4b89;
        }

        .social.social-detail > .social-list.twitter .social-link:hover {
            background-color: #3793d7;
        }

        .social.social-detail > .social-list.youtube .social-link:hover {
            background-color: #ad151a;
        }

        .social.social-detail > .social-list.instagram .social-link:hover {
            background-color: #ad151a;
        }


/* == contact page == */

.box-contact-wrapper {
    width: 100%;
    float: left;
    background-color: #ffffff;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
    border-radius: 15px;
}

.btn.btn-send {
    min-width: 265px;
    height: 50px;
    border-radius: 25px;
    margin: 15px auto;
    background-color: #27ae61;
    border: 1px solid #27ae61;
    color: #fff;
    font-size: 16px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

    .btn.btn-send:hover,
    .btn.btn-send:focus {
        background-color: #138f48;
        border: 1px solid #138f48;
    }

.form-contact {
    width: 100%;
    float: left;
    padding: 30px 16.66667%;
}

    .form-contact .form-normal {
        background-color: #fff;
    }

    .form-contact textarea.form-normal {
        height: auto;
        padding: 15px;
    }


/* == prize page == */

.date-wrapper {
    position: relative;
    padding: 0;
    float: left;
    margin: 0;
    width: 100%;
    min-width: 250px;
}

.date-button {
    height: 60px;
    position: relative;
    margin: 0;
    background-color: #fff;
    width: 100%;
    border-radius: 30px;
    cursor: pointer;
    float: left;
}

.date-icon {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-color: #ae0106;
    border: 6px solid #fff;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

    .date-icon ._i {
        color: #fff;
        font-size: 24px;
    }

.date-text {
    font-size: 16px;
    color: #000;
    position: relative;
    width: 100%;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: none;
    box-shadow: none;
    overflow: hidden;
    border-radius: 30px;
    z-index: 0;
}

.input-group.date {
    height: 60px;
    cursor: pointer;
}


/* == prize page == */

.flex-rows.flex-otherprize > .flex-col.big-boney {
    width: 28%;
}

.flex-rows.flex-otherprize > .flex-col.other-prize {
    width: 44%;
}

    .flex-rows.flex-otherprize > .flex-col.other-prize > .flex-col.before-three {
        width: 26%;
    }

    .flex-rows.flex-otherprize > .flex-col.other-prize > .flex-col.last-two {
        width: 34%;
    }

    .flex-rows.flex-otherprize > .flex-col.other-prize > .flex-col.three {
        width: 66%;
    }

        .flex-rows.flex-otherprize > .flex-col.other-prize > .flex-col.three .flex-col.front-three .box-header {
            background-color: #e40311;
        }


/* == custom regis == */

.custom-control.custom-checkbox.custom-regis {
    width: auto;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 15px 0 35px;
}

.custom-regis .custom-control-label {
    color: #767679;
    line-height: 27px;
    font-size: 15px;
    padding: 0 0 0 15px;
}

.custom-control.custom-checkbox.custom-regis .custom-control-label::before {
    background-color: #6ab04d;
    border: 1px solid #fff;
}

.custom-control.custom-checkbox.custom-regis .custom-control-label::after {
    background-color: #6ab04d;
    border-radius: 6px;
}


/* == custom prize page box three coulmn == */

.table.table-layout thead {
    width: 100%;
    float: left;
}

    .table.table-layout thead > tr {
        width: 100%;
        float: left;
    }

.box-center-body.box-no-padding {
    padding: 50px 25px 15px 25px;
}

.box-fourth.box-header-hilight {
    padding: 0 25px;
}

    .box-fourth.box-header-hilight .fourth-head-row .fourth-head-title:nth-child(odd) {
        background-color: #ad060e !important;
    }

    .box-fourth.box-header-hilight .fourth-head-row .fourth-head-title:nth-child(even) {
        background-color: #8c0108 !important;
    }


/* == lotto lost with table == */

.tb-box {
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 0 0 15px 15px;
    background-color: #fff;
    padding: 0 0 30px 0;
}

.tb-box-responsive.table-responsive-xl {
    width: 100%;
    float: left;
    padding-bottom: 15px;
    background-color: #fff;
}

.table.table-layout {
    width: 100%;
    float: left;
    display: block;
    margin-bottom: 10px;
}

    .table.table-layout thead th.tb-status {
        background-color: #060606;
        width: 6%;
    }

    .table.table-layout thead th.track-number {
        background-color: #252525;
        width: 21%;
    }

    .table.table-layout thead th.tb-date {
        background-color: #060606;
        width: 21%;
    }

    .table.table-layout thead th.tb-time {
        background-color: #252525;
        width: 21%;
    }

    .table.table-layout thead th.tb-cat {
        background-color: #060606;
        width: 21%;
    }

    .table.table-layout thead th.tb-view {
        background-color: #252525;
        width: 5%;
    }

    .table.table-layout thead th.tb-del {
        background-color: #060606;
        width: 5%;
    }

    .table.table-layout thead th {
        padding: 0 !important;
        height: 50px;
        text-align: center;
        color: #fff;
        border: 0;
        float: left;
        display: flex;
        align-items: center;
        line-height: 20px;
        justify-content: center;
        font-size: 15px;
    }

    .table.table-layout tbody {
        width: 100%;
        float: left;
        border: 3px solid #fff;
    }

        .table.table-layout tbody > tr {
            width: 100%;
            float: left;
        }

            .table.table-layout tbody > tr > td.text-status {
                width: 6%;
            }

            .table.table-layout tbody > tr > td.text-number {
                width: 21%;
            }

            .table.table-layout tbody > tr > td.text-date {
                width: 21%;
            }

            .table.table-layout tbody > tr > td.text-time {
                width: 21%;
            }

            .table.table-layout tbody > tr > td.text-cat {
                width: 21%;
            }

            .table.table-layout tbody > tr > td.text-view {
                width: 5%;
                background-color: #27ae61;
            }

            .table.table-layout tbody > tr > td.text-del {
                width: 5%;
                background-color: #ad060e;
            }

            .table.table-layout tbody > tr > td .text.tb-text {
                color: #999;
                font-size: 14px;
            }

            .table.table-layout tbody > tr > td {
                float: left;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                line-height: 20px;
                padding: 0;
                height: 50px;
                border-top: 1px solid #f5f6f8;
            }

            .table.table-layout tbody > tr:nth-child(odd) {
                background-color: #f9f9f9;
            }

            .table.table-layout tbody > tr:nth-child(even) {
                background-color: #ffffff;
            }

.text.tb-icon {
    color: #fff;
    width: 100%;
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .text.tb-icon > ._i {
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        color: #fff;
    }

    .text.tb-icon.icon-success {
        color: #27ae61;
    }

        .text.tb-icon.icon-success > ._i {
            font-size: 24px;
            color: #27ae61;
        }

    .text.tb-icon.icon-fail {
        color: #ad060e;
    }

        .text.tb-icon.icon-fail > ._i {
            font-size: 24px;
            color: #ad060e;
        }

.tb-box .button-event {
    margin: 25px 0 0 0;
    right: inherit;
    float: left;
    left: 50%;
    transform: translateX(-50%);
}

    .tb-box .button-event .event-prev {
        background-color: #bec3c7;
        margin: 0;
    }

    .tb-box .button-event .event-next {
        background-color: #bec3c7;
        margin: 0 5px;
    }

        .tb-box .button-event .event-prev:hover,
        .tb-box .button-event .event-prev:focus,
        .tb-box .button-event .event-next:hover,
        .tb-box .button-event .event-next:focus {
            background-color: #ad060e;
        }


/* == btn search newa == */

.mobile-search {
    width: 35px;
    height: 35px;
    float: left;
    position: absolute;
    top: 5px;
    right: 0;
    text-align: center;
    cursor: pointer;
    display: none;
    z-index: 1;
    background-color: #ae0106;
    border-radius: 50%;
}

    .mobile-search ._i {
        color: #ffffff;
        font-size: 20px;
        line-height: 35px;
        width: 100%;
    }

.wrapper.bg-fadedark {
    position: fixed;
    background-color: #00000047;
    z-index: 1;
    height: 100vh;
    width: 100%;
    opacity: 1;
    top: 0;
    left: 0;
}

.work-list-select {
    margin: 0;
    border: 1px solid #000;
    border-radius: 6px;
    padding: 8.5px 15px;
    font-size: 14px;
    position: relative;
    cursor: pointer;
}

.select-label {
    font-size: 14px;
    color: #000;
}

.select-arrow {
    right: 1px;
    top: 0;
    bottom: 0;
    cursor: pointer;
    width: 28px;
    position: absolute;
}

    .select-arrow::after,
    .select-arrow::before {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 6px;
        border-bottom: 5px solid #99A3BA;
        border-bottom: 5px solid #060606;
        top: 43%;
        transition: all .3s ease;
    }

    .select-arrow::before {
        right: 12px;
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }

    .select-arrow::after {
        left: 12px;
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }

.work-list-left.open .select-arrow::before {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

.work-list-left.open .select-arrow::after {
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.work-list-select {
    display: none;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.image-slider.sliders {
    height: 222px;
    overflow: hidden;
    margin-bottom: 15px !important;
    cursor: pointer;
}

.sliders .slick-next,
.sliders .slick-prev {
    display: none !important;
}

.sliders .slick-dots {
    bottom: 15px;
    z-index: 1;
}

    .sliders .slick-dots li button:before {
        font-size: 0.55rem;
    }

    .sliders .slick-dots li.slick-active button:before {
        color: var(--white);
    }

    .sliders .slick-dots li {
        margin: 0;
    }

.sliders .image > img {
    max-width: 100%;
}

.datepicker.datepicker-dropdown {
    max-width: 100%;
    width: 265px;
    margin-top: 5px;
    border: 1px solid #eeeeee;
    margin-bottom: 5px;
}

.datepicker-dropdown:before {
    content: none;
}

.datepicker-dropdown:after {
    content: none;
}

.table-condensed {
    width: 100%;
}

.datepicker .prev {
    width: -webkit-fill-available;
    height: auto;
    text-align: -webkit-center;
}

.datepicker .next {
    padding: 0;
}

.datepicker-days .day {
    align-content: unset;
    justify-content: unset;
    display: table-cell;
    user-select: unset;
    font-weight: 100;
    color: black;
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background-color: #F44336;
    background-image: -moz-linear-gradient(to bottom, #f44336, #8c0108);
    background-image: -ms-linear-gradient(to bottom, #f44336, #8c0108);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F44336), to(#8c0108));
    background-image: -webkit-linear-gradient(to bottom, #f44336, #8c0108);
    background-image: -o-linear-gradient(to bottom, #f44336, #8c0108);
    background-image: linear-gradient(to bottom, #f44336, #8c0108);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
    border-color: #F44336 #F44336 #8c0108;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
    background-color: #F44336;
}

    .datepicker table tr td span.active,
    .datepicker table tr td span.active.disabled,
    .datepicker table tr td span.active.disabled:hover,
    .datepicker table tr td span.active:hover {
        background-color: #F44336;
        background-image: -moz-linear-gradient(to bottom, #f44336, #8c0108);
        background-image: -ms-linear-gradient(to bottom, #f44336, #8c0108);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F44336), to(#8c0108));
        background-image: -webkit-linear-gradient(to bottom, #f44336, #8c0108);
        background-image: -o-linear-gradient(to bottom, #f44336, #8c0108);
        background-image: linear-gradient(to bottom, #f44336, #8c0108);
        background-repeat: repeat-x;
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
        border-color: #F44336 #F44336 #8c0108;
        border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
        filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
    }

.article-img > .image {
    width: 100%;
}

.enter-money-field textarea:disabled,
.enter-money-field input:disabled {
    background-color: #fff;
}

.order-border.order-save {
    margin: 15px auto 15px;
}

.btn.btn-fluid {
    width: 100%;
    margin: 0;
}

.btn.btn-footer {
    height: 40px;
}

.view-bill-detail-mobile {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .order-border.order-save {
        width: 95%;
    }

        .order-border.order-save p,
        .order-border.order-save span,
        .order-border.order-save label {
            font-size: 14px !important;
        }

        .order-border.order-save .invoice-info .table-bordered td,
        .order-border.order-save .invoice-info .table-bordered th {
            font-size: 12px;
        }

    .view-bill-detail-mobile {
        display: block !important;
    }

    .view-bill-detail {
        display: none !important;
    }
}


/* == nav == */

body.active {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.wrapper.active {
    -ms-transform: translateX(300px);
    height: 100%;
}

.overlay {
    z-index: 100;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.61);
    opacity: 0;
    -webkit-transition: opacity .3s, width 0s .3s, height 0s .3s;
    transition: opacity .3s, width 0s .3s, height 0s .3s;
    overflow: hidden;
    position: fixed;
    cursor: pointer;
}

    .overlay.active {
        width: 100%;
        height: 100%;
        opacity: 0.7;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }


/* == Navtop == */

.nav-top {
    height: 160px;
    background-color: #ad060e;
    width: 100%;
}

    .nav-top > .container {
        height: 160px;
        position: relative;
    }


/* == Before login btn == */

.btn-signin {
    display: none;
}

.btn.btn-back {
    display: none;
}


/* == Logo == */

.logo-wrap {
    display: block;
    float: left;
    height: 160px;
    width: 445px;
}

    .logo-wrap .logo {
        height: 160px;
        display: inline-block;
        position: relative;
        left: 0;
        overflow: hidden;
        width: 100%;
    }

        .logo-wrap .logo:focus {
            outline: none;
        }

        .logo-wrap .logo > .logo-img {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
        }


/* == Heading == */

.heading {
    float: left;
    color: #fff;
    font-size: 1.0rem;
    margin: 0;
    position: absolute;
    top: 65%;
    left: 58%;
    transform: translate(-50%, -50%);
    text-align: center;
}


/* == Mobile toggle == */

.mobile-tolggle {
    display: none;
}


/* == Navbar wrap == */

.navbar-wrap {
    width: 100%;
    height: 50px;
    background-color: var(--black);
    z-index: 2;
}


/* == Nav menu == */

.navmenu-text {
    display: none;
}


/* == Nav menu == */

.navmenu-list {
    float: left;
    height: 50px;
}

.navmenu-link {
    height: 50px;
    float: left;
    padding: 0 25px;
    display: flex;
    align-items: center;
    font-size: 1.0rem;
    color: #fff !important;
    cursor: pointer;
    background-color: #0a1a1a;
    position: relative;
}

.navmenu-list.dropdown.open .dropdown-menu.nav-submenu {
    display: block;
}

.navmenu-link.active {
    background-color: #d2000d;
}

.navmenu-list:first-child .navmenu-link.active {
    background-color: #d2000d;
}

.navbar-icon {
    width: 50px;
    height: 50px;
    position: relative;
}

    .navbar-icon > img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.navmenu-list:first-child {
    width: 50px;
}

    .navmenu-list:first-child .navmenu-link {
        background-color: #252525;
        padding: 0;
    }

.navmenu-link:hover {
    color: #fff;
    text-decoration: underline !important;
}

.navmenu-list:first-child .navmenu-link:hover {
    background-color: #d2000d;
}

.navmenu-list:first-child.active:first-child {
    background-color: #d2000d;
    padding: 0;
}

.navmenu-list.active .navmenu-link,
.navmenu-list.active .navmenu-link:focus,
.navmenu-list.active .navmenu-link:hover {
    background-color: #d2000d;
}


/* == User info == */

.userinfo-wrap {
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    min-width: 65%;
    background-color: #d2000d;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 0 10px;
    padding: 0 350px 0 15px;
}

.userinfo {
    height: 50px;
    overflow: hidden;
    display: flex;
}

.userinfo-list {
    float: left;
    display: flex;
    padding: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    border-right: 1px solid rgba(255, 125, 125, 0.8);
}

    .userinfo-list:last-child {
        border: 0;
    }

    .userinfo-list::after {
        /*         content: " | "; */
        /*         color: #fca5a5; */
        /*         margin-left: 7.5px; */
    }

    .userinfo-list:last-child::after {
        content: none;
    }

    .userinfo-list > p {
        margin: 0;
        font-size: 15px;
        color: #fff;
        float: left;
        display: flex;
        align-items: center;
        padding: 0 7.5px;
    }

    .userinfo-list > strong {
        margin: 0;
        font-size: 15px;
        color: #fff;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 7.5px;
        font-weight: 600;
        max-width: 150px;
        word-break: break-word;
        line-height: 15px;
    }


/* == Btn user == */

.btn-user {
    height: 50px;
    /* width: 200px; */
    padding: 0;
    border: 0;
}


/* == Btn wrap == */

.btn-wrap {
    position: absolute;
    top: 0;
    right: 5%;
}

.btnlang {
    width: 100px;
    height: 50px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    margin-left: 10px;
}

.lang-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    height: 50px;
}

    .lang-toggle .text-lang {
        padding: 0 4.5px 0 7.5px;
    }

#get_langage {
    width: 32px;
}

.dropdown-toggle.lang-toggle::after {
    content: none;
    background-image: url('../images/baseline_arrow_drop_down_white_18dp.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0 !important;
    width: 24px;
    height: 24px;
    background-color: #ad060e;
    border-radius: 50%;
    text-align: center;
}

.btn-head-arrow {
    margin: 0 0 0 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ad060e;
    float: left;
    top: 15px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

    .btn-head-arrow > i {
        font-size: 1.1rem;
        position: relative;
        top: 4px;
        color: #fff;
    }

.lang-toggle .btn-head-icon {
    width: 24px;
    height: 24px;
}

.dropdown-menu.lang-menu {
    right: 5px !important;
    left: initial !important;
    width: 195px;
    padding: 0;
    border-radius: 6px;
    margin-top: 65px;
    border: 0;
    transform: initial !important;
    top: 100%;
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
}

    .dropdown-menu.lang-menu::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #d2000d;
        content: '';
        display: block;
        position: absolute;
        right: 15px;
        top: -12px;
        transform: rotate(-90deg);
    }


/* == User toggle == */

.user-toggle {
    width: 100px;
    height: 100px;
    float: right;
    padding: 0 0 0 0;
    margin: 0 40px 0 0;
    border: 7px solid #d2000d;
    border-radius: 0 0 11px 11px;
}

.user-picture {
    border-radius: 4px;
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    background-color: #ecedef;
}

    .user-picture > .image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        background-color: #000;
    }


/* == Dropdown toggle == */

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

.icon-arrows {
    margin: 0 0 0 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ad060e;
    float: left;
    position: absolute;
    top: 13px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

    .icon-arrows > ._i {
        font-size: 1.1rem;
        position: relative;
        top: 4px;
        color: #fff;
    }


/* == Dropdown menu == */

.dropdown-menu.lang-menu .dropdown-item {
    float: left;
    height: 50px;
    font-size: 0.9rem;
    background-color: #d2000d;
    color: var(--white);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #ad060e;
}

    .dropdown-menu.lang-menu .dropdown-item:hover,
    .dropdown-menu.lang-menu .dropdown-item:focus,
    .dropdown-menu.lang-menu .dropdown-item.active,
    .dropdown-menu.lang-menu .dropdown-item.active:hover,
    .dropdown-menu.lang-menu .dropdown-item.active:focus {
        background-color: #a7060e;
    }

    .dropdown-menu.lang-menu .dropdown-item > p {
        float: left;
        margin: 0;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 300;
    }

    .dropdown-menu.lang-menu .dropdown-item:last-child,
    .dropdown-menu.lang-menu .dropdown-item:last-child:hover,
    .dropdown-menu.lang-menu .dropdown-item:last-child:focus,
    .dropdown-menu.lang-menu .dropdown-item:last-child.active:hover,
    .dropdown-menu.lang-menu .dropdown-item:last-child.active:focus {
        border-radius: 0 0 4px 4px;
    }

    .dropdown-menu.lang-menu .dropdown-item:last-child {
        border-bottom: 0;
    }

    .dropdown-menu.lang-menu .dropdown-item:first-child,
    .dropdown-menu.lang-menu .dropdown-item:first-child,
    .dropdown-menu.lang-menu .dropdown-item:first-child:hover,
    .dropdown-menu.lang-menu .dropdown-item:first-child:focus,
    .dropdown-menu.lang-menu .dropdown-item:first-child.active:hover,
    .dropdown-menu.lang-menu .dropdown-item:first-child.active:focus {
        border-radius: 4px 4px 0 0;
    }


/* == Dropdown menu == */

.dropdown-menu.usermenu {
    right: 5px !important;
    left: initial !important;
    width: 195px;
    padding: 0;
    border-radius: 6px;
    margin-top: 65px;
    border: 0;
    transform: initial !important;
    top: 100%;
    min-height: 50px;
    background-color: #d2000d;
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
}

    .dropdown-menu.usermenu .dropdown-item {
        background-color: #d2000d;
        padding: 0 0 0 45px;
        height: 50px;
        color: #fff;
        font-size: 0.9rem;
        line-height: 50px;
        position: relative;
        border-bottom: 1px solid #ad060e;
    }

        .dropdown-menu.usermenu .dropdown-item.active {
            background-color: #ad060e;
        }

        .dropdown-menu.usermenu .dropdown-item ._i {
            float: left;
            margin-right: 10px;
            line-height: 50px;
            font-size: 1.2rem;
        }

        .dropdown-menu.usermenu .dropdown-item .label.label-num {
            left: 10px;
            top: 50%;
            width: auto;
            height: auto;
            min-width: 20px;
            min-height: 20px;
            font-size: 0.7rem;
            line-height: 20px;
        }

        .dropdown-menu.usermenu .dropdown-item:first-child.active {
        }

        .dropdown-menu.usermenu .dropdown-item:first-child {
            border-radius: 4px 4px 0 0;
        }

        .dropdown-menu.usermenu .dropdown-item:last-child,
        .dropdown-menu.usermenu .dropdown-item:last-child:hover,
        .dropdown-menu.usermenu .dropdown-item:last-child:focus,
        .dropdown-menu.usermenu .dropdown-item:last-child.active:hover,
        .dropdown-menu.usermenu .dropdown-item:last-child.active:focus {
            border-radius: 0 0 4px 4px;
        }

        .dropdown-menu.usermenu .dropdown-item:last-child {
            border-bottom: 0;
        }

        .dropdown-menu.usermenu .dropdown-item:hover {
            background-color: #ad060e;
        }

        .dropdown-menu.usermenu .dropdown-item:first-child,
        .dropdown-menu.usermenu .dropdown-item:first-child:hover,
        .dropdown-menu.usermenu .dropdown-item:first-child:focus,
        .dropdown-menu.usermenu .dropdown-item:first-child.active:hover,
        .dropdown-menu.usermenu .dropdown-item:first-child.active:focus {
            border-radius: 4px 4px 0 0;
        }

    .dropdown-menu.usermenu::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #d2000d;
        content: '';
        display: block;
        position: absolute;
        right: 11px;
        top: -12px;
        transform: rotate(-90deg);
    }


/* == Buttons == */

.button-login,
.button-regis {
    width: 150px;
    height: 35px;
    font-size: 0.9rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 6px;
    background-color: #ff2c00 !important;
    border-color: #ff2c00 !important;
    margin: 0 0 0 7.5px;
    line-height: 35px;
    padding: 0;
}

.input-group {
    height: 50px;
}


/* == Input field == */

.input-field {
    width: 100%;
    height: 35px;
    border: 0;
    outline: none;
    border-radius: 6px;
    background-color: #fff !important;
    padding: 0 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--deepgray);
    width: 150px;
}

form.form-normal.login-form .form-list {
    width: 160px;
    float: left;
    margin: 0 0 0 5px;
    height: 50px;
}


/* == Dropdown menu == */

.dropdown-menu.nav-submenu {
    padding: 0;
    margin-top: 10px;
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
}


    /* == Dropdown menu wrap == */

    .dropdown-menu.nav-submenu::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #d2000d;
        content: '';
        display: block;
        position: absolute;
        left: 20px;
        top: -12px;
        transform: rotate(-90deg);
    }

    .dropdown-menu.nav-submenu > li:first-child > a,
    .dropdown-menu.nav-submenu > li:first-child > a.active,
    .dropdown-menu.nav-submenu > li:first-child > a.active:hover,
    .dropdown-menu.nav-submenu > li:first-child > a.active:focus {
        border-radius: 3px 3px 0 0;
    }

        .dropdown-menu.nav-submenu > li:first-child > a.active:hover,
        .dropdown-menu.nav-submenu > li:first-child > a.active:focus {
            background-color: #ad060e;
        }

    .dropdown-menu.nav-submenu > li:last-child > a,
    .dropdown-menu.nav-submenu > li:last-child > a.active,
    .dropdown-menu.nav-submenu > li:last-child > a.active:hover,
    .dropdown-menu.nav-submenu > li:last-child > a.active:focus {
        border-radius: 0 0 3px 3px;
    }

    .dropdown-menu.nav-submenu > li > a {
        background-color: #d2000d;
        color: #fff;
        padding: 0 15px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 0.9rem;
        border-radius: 0;
    }

        .dropdown-menu.nav-submenu > li > a.active {
            background-color: #ad060e;
        }

        .dropdown-menu.nav-submenu > li > a:hover,
        .dropdown-menu.nav-submenu > li > a:focus {
            background-color: #ad060e;
        }


/* == new nav == */

.nav.navbar-menu {
    width: 100%;
    float: left;
    z-index: 6;
}

.show-xs.user-panel {
    display: none;
}

.user-panel {
    position: relative;
    width: 100%;
    padding: 0;
    background-color: #262626;
    float: left;
}

    .user-panel .user-panel-control {
        display: block;
        position: relative;
        justify-content: center;
        background-color: #000;
        margin-top: 100px;
        height: 100px;
    }

        .user-panel .user-panel-control .image {
            width: 150px;
            height: 150px;
            margin-bottom: 0;
            border: 8px solid #000;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            top: -50px;
            float: left;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
        }

            .user-panel .user-panel-control .image .image-inner {
                height: 100%;
                width: 100%;
                border: 7px solid #fff;
                border-radius: 50%;
                overflow: hidden;
            }

                .user-panel .user-panel-control .image .image-inner img {
                    height: 100%;
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

    .user-panel .info {
        padding: 0 15px 0 15px;
        margin-bottom: 0;
        background-color: #000;
        display: block;
        width: 100%;
        float: left;
        border-bottom: 1px solid #262626;
        margin-top: -30px;
    }

        .user-panel .info > p {
            margin: 15px 0 0 0;
            text-align: center;
            color: #fff;
            font-size: 14px;
            width: 100%;
            float: left;
        }

        .user-panel .info > span {
            margin: 0;
            text-align: center;
            color: #fff;
            font-size: 48px;
            width: 100%;
            float: left;
            font-family: var(--fontWeightBold);
            font-weight: bolder;
            word-break: break-word;
            line-height: 45px;
            margin-bottom: 15px;
        }

    .user-panel .list-wrapper {
        background-color: #000;
        margin: 0;
        padding: 20px 15px;
    }

        .user-panel .list-wrapper .list-title {
            color: #fff;
            font-size: 14px;
        }

        .user-panel .list-wrapper .list-text {
            color: #fff !important;
            font-size: 14px;
        }

.navmenu-list-show-xs {
    display: none;
}

.user-panel .user-panel-control .settings {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    border: 5px solid #000;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    margin: 0 7.5px;
    background-color: #fff;
    display: block;
    cursor: pointer;
    float: left;
    left: 72%;
    transform: translate(-50%, -50%);
}

    .user-panel .user-panel-control .settings > .icon {
        font-size: 24px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        float: left;
    }


/* ================================================================================================================= */

@media screen and (max-width: 9000px) {
    .userinfo-wrap {
        /*min-width: 50%;*/
    }

    .container {
        /* max-width: 2000px; */
    }

    .box-banner .image {
        width: 100%;
    }
}

@media screen and (max-width: 1790px) {
    /* == User info == */
    .userinfo-wrap {
        padding: 0 285px 0 15px;
    }

    .logo-wrap {
        width: 320px;
        position: relative;
        left: -25px;
    }

        .logo-wrap .logo {
            left: 55% !important;
            transform: translateX(-50%);
            top: 7.5px;
            left: 25px;
        }

    .btn-wrap {
        right: 0;
    }
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1470px) {
}

@media screen and (max-width: 1440px) {
    /* == Logo wrapper == */
    .logo-wrap {
        left: 0;
        width: 300px;
    }

    .user-toggle {
        width: 65px;
        height: 65px;
        margin: 0 35px 0 0;
    }

    .btn-user {
        width: 102px;
    }

    .btnlang {
        width: 80px;
    }

    .userinfo-list {
        padding: 0;
        width: 25%;
        float: left;
    }

    .userinfo-wrap {
        padding: 0 200px 0 15px;
    }

    .lang-toggle .btn-head-icon {
        width: 20px;
        height: 20px;
        margin: 0 2px 0 0;
    }

    .lang-toggle .text-lang {
        font-size: 0.75rem;
    }

    #get_langage {
        width: 20px;
        padding: 0;
    }

    .userinfo-list > p {
        font-size: 0.82rem;
        padding: 0 3.5px;
    }

    .userinfo-list > strong {
        font-size: 0.75rem;
        padding: 0 3.5px;
    }

    .dropdown-menu.lang-menu .dropdown-item {
        padding: 0 7.5px;
        font-size: 12px;
    }

        .dropdown-menu.lang-menu .dropdown-item > p {
            font-size: 12px;
        }

    .dropdown-menu.usermenu .dropdown-item {
        padding: 0 0 0 40px;
    }

        .dropdown-menu.usermenu .dropdown-item ._i {
            font-size: 16px;
        }

    .dropdown-menu.usermenu .dropdown-item {
        font-size: 12px;
    }

    .icon-arrows {
        width: 20px;
        height: 20px;
    }

        .icon-arrows > ._i {
            font-size: 17px;
            top: 2px;
        }

    .btn-head-arrow {
        width: 20px;
        height: 20px;
    }

        .btn-head-arrow > i {
            font-size: 17px;
            top: 2px;
        }
    /* == before login == */
    .before-login .userinfo-wrap {
        padding: 0 100px 0 15px;
    }
}

@media screen and (max-width:1280px) {
}

@media screen and (max-width: 1279px) {
    /* == User info == */
    .userinfo-wrap {
        height: 42px;
        padding: 0 180px 0 5px;
    }

    .user-toggle {
        width: 50px;
        height: 50px;
    }
    /* == User info == */
    .userinfo {
        height: 35px;
    }
    /* == Login form == */
    .userinfo-wrap {
        min-width: 100%;
        border-radius: 0;
        height: 42px;
    }

    .login-form {
        height: 42px;
    }

    .input-group {
        height: 42px;
    }

        .input-group .link {
            line-height: 42px;
        }

    .lang-toggle {
        height: 42px;
    }

    .login-form .form-list {
        height: 45px;
        margin: 0 0 0 5px;
    }

    .login-form .input-field {
        height: 30px;
        width: 150px;
    }

    .button-login,
    .button-regis {
        height: 30px;
        line-height: 30px;
        width: 115px;
    }
    /* == User info == */
    .userinfo {
        height: 35px;
    }

    .heading {
        font-size: 14px;
    }

    .userinfo {
        height: 42px;
    }

    .btnlang {
        height: 42px;
    }

    .btn-user {
        height: 35px;
    }

    .icon-arrows {
        top: 11px;
    }

    .logo-wrap .logo > .logo-img {
        top: 54%;
    }

    .dropdown-menu.usermenu {
        margin-top: 55px;
    }

    .dropdown-menu.lang-menu {
        margin-top: 55px;
    }

    .navmenu-link {
        font-size: 0.9rem;
    }
    /* == Before login == */
    .nav-top > .container {
        height: 135px;
    }

    .logo-wrap {
        height: 135px;
    }

    .nav-top {
        height: 135px;
    }

    .logo-wrap .logo {
        height: 100px;
        top: 61.5%;
        left: 45% !important;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    .before-login .userinfo-wrap {
        /* width: auto; */
        /* min-width: auto; */
        /* padding-right: 100px; */
    }
}

@media screen and (max-width: 1170px) {
}

@media screen and (max-width: 991px) {
    /* == side bar == */
    .pull-left.info {
        margin-top: -50px;
    }

    .user-panel .info > span {
        font-size: 38px;
    }
    /* == new nav == */
    .show-xs.user-panel {
        display: block;
    }
    /* == wrapper == */
    .wrapper {
        -webkit-transition: -webkit-transform .3s;
        transition: transform .3s;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    /* == Btns == */
    .btn-signin {
        display: block;
    }

    .btn-signin {
        height: 35px;
        width: auto;
        border: 1px solid #b01d25;
        background-color: #9c191f;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 7.5px;
        margin-right: 5px;
        text-decoration: none !important;
        border-radius: 6px;
        float: right;
        margin: 0;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        right: 77.5px;
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        margin: 0 0 0 7.54px;
    }

        .btn-signin:hover,
        .btn-signin:focus {
            color: #fff !important;
        }
    /* == lang == */
    .lang-toggle {
        height: 35px;
        border: 1px solid #9c191f;
        padding: 5px;
        display: block;
        width: 55px;
        border-radius: 6px;
        float: left;
        background-color: #9c191f;
    }

    .btn-head-arrow {
        display: none;
    }
    /* == dropdown == */
    .dropdown-menu.lang-menu::after {
        border-left: 8px solid #ad060e;
    }

    .dropdown-menu.lang-menu .dropdown-item:hover,
    .dropdown-menu.lang-menu .dropdown-item:focus,
    .dropdown-menu.lang-menu .dropdown-item.active,
    .dropdown-menu.lang-menu .dropdown-item.active:hover,
    .dropdown-menu.lang-menu .dropdown-item.active:focus {
        background-color: #ad060e;
    }

    .dropdown-menu.lang-menu .dropdown-item {
        background-color: #e30b18;
        border-bottom: 1px solid #ad060e;
    }
    /* == Nav top == */
    .user-panel .user-panel-control {
        margin-top: 109px;
        height: 75px;
    }

        .user-panel .user-panel-control .image {
            width: 120px;
            height: 120px;
            top: -60px;
        }

        .user-panel .user-panel-control .settings {
            left: 80%;
        }
    /* == Navtop == */
    .nav-top {
        height: auto;
        position: relative;
        width: 100%;
        float: left;
        z-index: 2;
    }

    .mobile-tolggle {
        display: block;
        width: 42.5px;
        height: 35px;
        position: absolute;
        top: 50px;
        left: 7.5px;
        z-index: 2;
        background-color: #9c191f;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 1.2rem;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 6px;
        border: 1px solid #9c191f;
    }

        .mobile-tolggle ._i {
            float: left;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
        }

    .nav-bottom {
        height: 45px;
        position: relative;
        width: 100%;
        float: left;
        background-color: #9c191f;
        border-bottom: 1px solid #9c191f;
        z-index: 4;
    }

    .nav-top > .container {
        top: 0;
        height: auto;
    }

    .logo-wrap {
        height: 75px;
        width: 100%;
    }

        .logo-wrap .logo {
            height: 75px;
            left: 50% !important;
            transform: translate(-50%, 0);
            top: 0;
        }

            .logo-wrap .logo > .logo-img {
                top: 47.5%;
                width: auto;
                height: 80%;
            }

    .heading {
        position: relative;
        bottom: auto;
        font-size: 0.75rem;
        height: auto;
        margin-bottom: 10px;
        top: 0;
        left: 0;
        transform: translate(0, 0%);
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .dropdown-menu.lang-menu {
        margin-top: 54px;
    }

    .dropdown-menu.usermenu {
        margin-top: 60px;
    }
        /* == == */
        .dropdown-menu.usermenu .dropdown-item:last-child {
            border-bottom: 1px solid #ad060e;
        }

    .dropdown-menu.usermenu {
        width: 300px;
        background: #000;
        height: 100%;
        max-height: 100%;
        position: fixed;
        top: 0;
        -webkit-transition: all 0.35s;
        -moz-transition: all 0.35s;
        -o-transition: all 0.35s;
        -ms-transition: all 0.35s;
        transition: all 0.35s;
        z-index: 500;
        left: -300px !important;
        /* display: block; */
        overflow-y: auto;
        margin: 0;
        border-radius: 0;
    }

        .dropdown-menu.usermenu.active {
            left: 0 !important;
        }

        .dropdown-menu.usermenu .dropdown-item:last-child,
        .dropdown-menu.usermenu .dropdown-item:last-child:hover,
        .dropdown-menu.usermenu .dropdown-item:last-child:focus,
        .dropdown-menu.usermenu .dropdown-item:last-child.active:hover,
        .dropdown-menu.usermenu .dropdown-item:last-child.active:focus {
            border-radius: 0;
        }

    .button-back {
        height: 50px;
        width: 100%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
        color: #fff;
        padding: 0 0 0 31px;
        background-color: #d2000d;
        border-bottom: 1px solid #ad060e;
        background-color: #ad060e;
    }

        .button-back > .icon {
            width: 35px;
            height: 50px;
            text-align: center;
            float: left;
            line-height: 50px;
            color: #fff;
            position: absolute;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

    .dropdown-menu.usermenu .dropdown-item {
        background-color: #9c191f;
        border-bottom: 1px solid #ad060e;
    }

        .dropdown-menu.usermenu .dropdown-item.active {
            background-color: #98060d;
        }
    /* == Aside user info == */
    .userinfo-wrap {
        display: none;
    }

    .control-sidebar {
        position: fixed;
        padding-top: 0;
        z-index: 1000;
        width: 230px;
        right: 0;
        top: 0;
        height: auto;
        height: 100vh;
    }

    .userinfo-wrap {
        display: block;
        right: -300px;
        width: 300px;
        -webkit-transition: right .35s ease-in-out;
        -o-transition: right .35s ease-in-out;
        transition: right .35s ease-in-out;
        border-radius: 0;
    }

    .control-sidebar {
        right: -300px;
        width: 300px;
        -webkit-transition: right .3s ease-in-out;
        -o-transition: right .3s ease-in-out;
        transition: right .3s ease-in-out;
    }

    .after-login.control-sidebar-open .control-sidebar {
        right: 0;
    }

    .after-login.control-sidebar-open .userinfo-wrap {
        right: 0;
    }

    .userinfo-wrap {
        width: 270px;
        top: 0;
        height: 100vh;
        position: absolute;
        padding: 0;
        overflow-y: auto;
        box-shadow: none;
        background-color: #ad060e;
    }

    .userinfo-list {
        display: block;
        width: 100%;
        padding: 15px;
        top: 0;
        transform: translateY(0);
        border-bottom: 1px solid #bf0710;
    }

    .userinfo {
        height: auto;
    }

    .userinfo-list::after {
        content: none;
    }

    .userinfo-list > p {
        width: 100%;
        padding: 0;
        display: block;
        font-size: 0.9rem;
        margin: 0 0 5px 0;
    }

    .userinfo-list > strong {
        width: 100%;
        display: block;
        padding: 0;
        font-size: 0.9rem;
    }

    .userinfo-list:last-child {
        border-bottom: 1px solid #bf0710;
    }
    /* == nav important == */
    .navmenu-list.navmenu-list-important > .navmenu-link {
        background-color: #ad060e !important;
    }

    .navmenu-list-show-xs {
        display: block;
    }

    .navmenu-list.navmenu-list-important {
        border-bottom: 1px solid #ad060e;
    }

    .navmenu-list.active .navmenu-link {
        background-color: #ad060e;
    }

        .navmenu-list.active .navmenu-link:first-child {
            background-color: #da2c36;
        }
    /* == Navbar == */
    .navbar-wrap {
        display: none;
    }

    .navbar-wrap {
        width: 300px;
        background: #060606;
        height: 100%;
        max-height: 100%;
        position: fixed;
        top: 0;
        -webkit-transition: all 0.35s;
        -moz-transition: all 0.35s;
        -o-transition: all 0.35s;
        -ms-transition: all 0.35s;
        transition: all 0.35s;
        z-index: 500;
        left: -300px;
        display: block;
        overflow-y: auto;
    }

    .wrapper.active .navbar-wrap {
        left: 0;
    }

    body.menu-toggled .navbar-wrap {
        left: 0;
    }

    .dropdown-menu.nav-submenu > li > a.active {
        background-color: #ad060e;
    }

    .dropdown-menu.nav-submenu > li > a {
        background-color: #060606;
        border-radius: 0 !important;
    }

    .dropdown-menu.nav-submenu > li {
        border-bottom: 1px solid #000 !important;
    }

        .dropdown-menu.nav-submenu > li > a::before {
            content: " ";
            width: 5px;
            height: 5px;
            margin: 0 7px 0 0;
            border-radius: 50%;
            background-color: #999;
        }

        .dropdown-menu.nav-submenu > li > a::before {
            display: none;
        }

        .dropdown-menu.nav-submenu > li > a {
            font-size: 13px;
        }

        .dropdown-menu.nav-submenu > li:first-child > a,
        .dropdown-menu.nav-submenu > li:first-child > a.active,
        .dropdown-menu.nav-submenu > li:first-child > a.active:hover,
        .dropdown-menu.nav-submenu > li:first-child > a.active:focus {
            border-radius: 0;
        }

    .navmenu-link:hover {
        text-decoration: none !important;
    }

    .nav-menu {
        width: 100%;
        z-index: 6;
    }

    .navmenu-list {
        width: 100% !important;
        border-bottom: #262626;
        height: auto;
        border-bottom: 1px solid #ad060e;
        overflow: hidden;
    }

    .navbar-icon {
        display: none;
    }

    .navmenu-text {
        display: block;
    }

    .navmenu-list:first-child.active:first-child {
        /* background-color: #262626; */
        padding: 15px;
    }

    .navmenu-link {
        width: 100%;
        height: auto;
        padding: 15px;
        background-color: #262626;
    }

        .navmenu-link.active {
            background-color: #262626;
            padding: 15px !important;
        }

    .navbar-wrap > .container {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .mobile-tolggle.menu-ellips {
        right: 10px;
        left: initial;
    }

    .mobile-tolggle.menu-ellips {
        display: none;
    }

    .btn-wrap {
        right: 7.5px;
    }

    .user-toggle {
        height: 43px;
        width: 45px;
        border: 3px solid #ad060e;
        border-radius: 6px;
    }

    .mobile-tolggle _i {
        float: left;
        text-align: center;
        line-height: 50px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.0rem;
    }
    /* == Dropdown menu == */
    .dropdown-menu.nav-submenu {
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        transform: none !important;
        left: 0 !important;
        width: 100%;
        border: 0;
        will-change: unset !important;
        background-clip: unset;
    }

        .dropdown-menu.nav-submenu::after {
            display: none;
        }

        .dropdown-menu.nav-submenu > li {
            border-bottom: 1px solid #bf0710;
            border-radius: 0 !important;
        }

            .dropdown-menu.nav-submenu > li:last-child {
                border: 0;
            }

    .dropdown-toggle.navmenu-toggle.navmenu-link::after {
        float: right;
        position: absolute;
        right: 15px;
    }

    .dropdown-toggle.navmenu-toggle.navmenu-link::after,
    .dropdown-toggle.navmenu-toggle.navmenu-link::before {
        background: #fff;
        content: '';
        height: 1px;
        right: 15px;
        position: absolute;
        top: 50%;
        width: 9px;
        transition: transform 500ms ease;
        transform: translateY(-50%);
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: .3em solid transparent;
    }

    .dropdown-toggle.navmenu-toggle.navmenu-link::before {
        transform: rotate(180deg);
    }

    .dropdown-toggle.navmenu-toggle.navmenu-link::after {
        transform-origin: center;
    }

    .dropdown-toggle.navmenu-toggle.navmenu-link::after {
        transform: rotate(90deg);
    }

    .dropdown-toggle.navmenu-toggle.navmenu-link.dropdown-click.active::after {
        transform: rotate(0);
    }

    .navmenu-list.dropdown.show .dropdown-toggle.navmenu-toggle.navmenu-link::after {
        transform: rotate(0);
    }
    /* == Lang toggle == */
    .lang-toggle .text-lang {
        position: relative;
        right: 0;
        border: 3px solid #000000;
        background-color: #000000;
        display: flex;
        text-decoration: none !important;
        font-size: 1.0rem;
        border: 0;
        padding: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 0;
        float: left;
        display: block;
        top: 50%;
        transform: translateY(-50%);
    }

    .mobile-tolggle.menu-ellips ._i {
        width: 45px;
        height: 43px;
        text-align: center;
        line-height: 43px;
        border-radius: 4px;
        background-color: #ad060e;
        cursor: pointer;
    }
    /* == Btn lang == */
    .btnlang {
        width: 70px;
        height: 45px;
        margin-left: 7.5px;
    }

    .btn-head-icon > img {
        position: relative;
        top: 0;
        margin: 0 5px 0 2px;
    }

    .lang-toggle .btn-head-icon {
        float: left;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 5px 0 0;
        width: 16px;
        height: 16px;
    }

    .btn-user {
        width: 60px;
        height: 45px;
    }

    .icon-arrows {
        border: 0;
        background: transparent;
        margin: 0;
        right: -1px;
        top: 12px;
    }

    .user-toggle {
        margin: 2.5px 17px 0 0;
    }

    .dropdown-toggle.lang-toggle::after {
        margin: 0;
        border-top: .38em solid;
        border-right: .38em solid transparent;
        border-bottom: 0;
        border-left: .38em solid transparent;
        content: " ";
        display: none;
    }

    .icon-arrows > ._i {
        top: -4px;
        font-size: 1.7rem;
    }
    /* == btn user == */
    .btn-user.dropdown.dropdown-wrapper {
        display: none;
    }
    /* == Before login == */
    .before-login .userinfo-wrap {
        z-index: 10;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 65px 15px 15px 15px;
        padding: 65px 25% 0 25%;
    }

    .before-login .userinfo-wrap {
        display: none;
    }

    body.signin-open .before-login .userinfo-wrap {
        display: block;
    }

    .before-login .button-regis {
        display: none;
    }

    .before-login .input-group {
        height: auto;
        display: block;
        width: 100%;
    }

    .before-login .login-form {
        height: auto;
        width: 100%;
        display: block;
        padding-top: 15px;
        border-radius: 6px;
    }

    .before-login .button-regis,
    .before-login .button-login {
        width: 100%;
        top: 0;
        transform: translateY(0);
        height: 45px;
        margin: 0;
        margin-bottom: 15px;
        padding: 0 15px;
        line-height: 45px;
    }

    .before-login .input-field {
        height: 45px;
        margin-bottom: 15px;
        width: 100%;
        top: 0;
        transform: translateY(0);
    }

    .before-login .login-form .form-list {
        width: 100%;
        margin: 0;
        height: auto;
    }

    .before-login .input-group .link {
        top: 0;
        transform: translateY(0);
        text-align: right;
    }

    .btn.btn-back {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        text-align: left;
        line-height: 45px;
        background-color: #9a070e;
    }

        .btn.btn-back ._i {
            position: absolute;
            height: 45px;
            top: -1px;
            left: -1px;
            width: 50px;
            text-align: center;
            line-height: 45px;
            color: var(--white);
            background-color: #9a070e;
        }
    /* == before login == */
    .before-login .btn-wrap {
        right: 15px;
    }

    .before-login .btnlang {
        width: 57px;
    }
}

@media screen and (max-width: 768px) {
    /* == Nav top == */
    .user-panel .user-panel-control {
        margin-top: 70px;
        height: 43px;
        padding-top: 0;
    }

        .user-panel .user-panel-control .image {
            width: 105px;
            height: 105px;
            top: -55.5px;
        }

        .user-panel .user-panel-control .settings {
            width: 30px;
            height: 30px;
            left: 73%;
        }

            .user-panel .user-panel-control .settings > .icon {
                font-size: 14px;
            }

    .user-panel .info {
        margin-top: -68px;
    }

        .user-panel .info > span {
            font-size: 27px;
            line-height: 22px;
            margin-bottom: 10px;
        }
    /* == == */
    .heading.heading-hide-xs {
        display: none;
    }

    .lang-toggle .btn-head-icon {
        width: 18px;
        height: 13px;
        margin: 0;
    }

    .btn-head-icon > img {
        height: 100%;
        width: auto;
    }
    /* == User toggle == */
    .user-toggle {
        height: 35px;
        width: 35px;
        margin: 4.5px 17px 0 0;
    }

    .lang-toggle .text-lang {
        font-size: 10px;
        top: 3px;
        top: 55%;
        margin-left: 3px;
    }

    .dropdown-toggle.lang-toggle::after {
        margin: 0;
        border-top: .22em solid;
        border-right: .22em solid transparent;
        border-bottom: 0;
        border-left: .22em solid transparent;
    }

    .mobile-tolggle.menu-ellips ._i {
        height: 35px;
        width: 35px;
        line-height: 35px;
        font-size: 1.22rem;
    }

    .btnlang {
        margin-left: 5px;
        width: 50px !important;
    }

    .icon-arrows > ._i {
        font-size: 17px;
        top: 2px;
    }
    /* == Dropdown menu == */
    .dropdown-menu.lang-menu {
        margin-top: 52.5px;
        right: -4px !important;
    }

    .dropdown-menu.usermenu {
        right: 54px !important;
    }

        .dropdown-menu.usermenu::after {
            right: 15px;
        }
    /* == Before login == */
    .before-login .userinfo-wrap {
        padding: 65px 5% 0 5%;
    }

    .btn-signin {
        height: 35px;
        font-size: 11px;
        right: 72px;
    }
}

@media screen and (max-width: 575px) {
}

@media screen and (max-width: 480px) {
    /* == mobile toggle ==*/
    .mobile-tolggle ._i {
        font-size: 18px;
    }
    /* == logo == */
    .logo-wrap .logo > .logo-img {
        height: 75%;
    }
}

@media screen and (max-width: 380px) {
}

@media screen and (max-width: 320px) {
}

.welcome-text {
    display: none;
}

@media screen and (max-width: 991px) {
    .nav-bottom {
        padding: 0 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .welcome-text {
        display: block !important;
    }

    .welcome-text {
        color: #fff;
        margin: 0;
        width: 100%;
        padding: 0 35px 0 15px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        line-height: 15px;
    }

        .welcome-text b {
            margin: 0 5px 0 2px;
            text-transform: uppercase;
        }

    .navmenu-list:first-child .navmenu-link {
        padding: 15px;
    }
}

@media screen and (max-width: 575px) {
    .welcome-text {
        padding: 0 15px 0 15px;
        font-size: 11px;
        line-height: 13px;
    }
}


/* == Finance == */

.features-body {
    color: #999;
    width: 100%;
    float: left;
}

.box-features {
    border-radius: 15px;
    background-color: #ffffff;
    overflow: visible;
}

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

.features-left {
    width: 33.333333333%;
    float: left;
    background-color: #fcfcfc;
    padding: 50px;
    border-radius: 15px 0 0 15px;
}

.features-right {
    width: 66.666667%;
    float: left;
    padding: 30px 0 30px 0;
}

.features-title {
    font-family: var(--fontWeightBold);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0;
}

.features-head {
    text-align: center;
    font-size: 1.0rem;
}

    .features-head > p {
        color: #767679;
    }

.icon-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
}

.icon-wrap {
    height: 190px;
    width: 190px;
    border-radius: 50%;
    background-color: #f0f1f3;
    border: 15px solid #f0f1f3;
    margin: 7.5px;
}

.icon-inner {
    background-color: #6ab04d;
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 5px solid #fff;
    padding: 25px 0;
}

    .icon-inner > img {
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
    }

.icon-text {
    width: 100%;
    float: left;
    padding: 0 25px;
    background-color: #6ab04d;
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

    .icon-text > .lg {
        font-size: 2.0rem;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word;
        line-height: 30px;
    }

.list-wrapper {
    display: block;
    margin: 15px 0;
    width: 100%;
    float: left;
}

    .list-wrapper > li {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }

        .list-wrapper > li > .list-text {
            color: #6ab04d;
            font-size: 1.0rem;
            font-size: 0.95rem;
        }

        .list-wrapper > li > .list-title {
            color: #767679;
            font-size: 1.0rem;
            font-size: 0.95rem;
        }

.separator.sm {
    background-color: #ecedef;
    width: 100%;
    height: 0;
    margin: 20px auto 20px;
    float: left;
}

.separator::after {
    content: none;
}


/* == List normal == */

.list-normal {
    display: block;
    margin: 15px 0;
    width: 100%;
    float: left;
}

    .list-normal > li {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }

        .list-normal > li > .list-text {
            color: #767679;
            font-size: 1.0rem;
            font-size: 0.95rem;
        }

        .list-normal > li > .list-title {
            color: #767679;
            font-size: 1.0rem;
            font-size: 0.95rem;
        }

.short-info {
    float: left;
    width: 100%;
    display: block;
    font-size: 0.95rem;
}

    .short-info > p {
        float: left;
        margin: 0 7.5px 0 0;
        color: #767679;
    }

    .short-info > p {
        font-size: 1.0rem;
        font-size: 0.95rem;
    }

        .short-info > p.text-green {
            color: #6ab04d !important;
        }

    .short-info > a {
        float: right;
        color: #767679;
        text-decoration: underline;
        font-size: 1.0rem;
        font-size: 0.95rem;
    }

.btn.btn-green {
    color: #fff;
}

.features-body > p {
    width: 100%;
    float: left;
}

.bank-normal {
    display: block;
}

    .bank-normal > li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        align-items: center;
        font-size: 1.0rem;
    }

        .bank-normal > li > p {
            line-height: 25px;
            margin: 0;
            padding: 0;
            font-size: 1.0rem;
            color: #767679;
            font-size: 0.95rem;
        }

        .bank-normal > li > .thumbnail {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            margin-right: 7.5px;
        }

            .bank-normal > li > .thumbnail > img {
                height: 115%;
                max-width: 115%;
                position: absolute;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

        .bank-normal > li > .btn-status {
            border-radius: 25px;
            min-width: 90px;
            font-size: 0.9rem;
        }

            .bank-normal > li > .btn-status.opened {
                cursor: default;
            }

            .bank-normal > li > .btn-status.closed {
                cursor: default;
            }

                .bank-normal > li > .btn-status.closed:hover {
                    background-color: #ad060e !important;
                }

                .bank-normal > li > .btn-status.closed:focus {
                    background-color: #ad060e !important;
                }

            .bank-normal > li > .btn-status.opened:hover {
                background-color: #6ab04d !important;
            }

            .bank-normal > li > .btn-status.opened:focus {
                background-color: #6ab04d !important;
            }

.instant-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

    .instant-wrapper > li {
        width: 100%;
        height: 50px;
        background-color: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #393939;
        position: relative;
    }

        .instant-wrapper > li:last-child {
            border-right: 0;
        }

        .instant-wrapper > li > a {
            color: #fff;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-size: 1.0rem;
        }

        .instant-wrapper > li.active {
            background-color: #ad060e;
        }

        .instant-wrapper > li:hover {
            background-color: #8c0108;
        }

        .instant-wrapper > li:hover {
            background-color: #8c0108;
        }

        .instant-wrapper > li.active > a::after {
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid #ffffff;
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: -4px;
            transform: rotate(-90deg);
        }

        .instant-wrapper > li > a > img {
            width: 24px;
            margin: 0 7.5px 0 0;
        }


/* == Feature box == */

.features-box {
    padding: 50px;
    float: left;
    width: 100%;
}

.card-form.form-info {
    display: block;
    padding: 15px 0 0 0;
    margin-bottom: 50px;
}

.text-title-sm {
    font-size: 1.09rem;
    margin: 0;
    width: 100%;
    float: left;
}

    .text-title-sm.form-group {
        margin-bottom: 15px !important;
    }

.text-gray {
    color: #454545;
}

.separator.fluid {
    width: 100%;
    height: 0;
    background-color: #ecedef;
    margin: 13px 0 15px;
    float: left;
}

.form-info-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    float: left;
}

.form-normal {
    font-size: 15px;
}

.form-info-label {
    color: #767679;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0 15px 0 0;
    min-width: 250px;
    font-size: 15.29px;
}

.form-info-control {
    color: #d2000d;
    padding: 0 5px;
    font-weight: 600;
}

.form-button-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-info-cancel {
    margin: 7.5px;
}

.btn-info-submit {
    margin: 7.5px;
}

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

.btn.btn-green {
    border: 1px solid #6ab04d !important;
    background-color: #6ab04d !important;
    color: #fff;
}

.text.center {
    margin-top: 15px;
}

    .text.center > p {
        font-size: 0.95rem;
        color: #767679;
    }


/* == Placeholder == */

.form-normal::-webkit-input-placeholder {
    color: #ccc;
    font-size: 0.95rem;
}

.form-normal:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
    font-size: 0.95rem;
}

.form-normal::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
    font-size: 0.95rem;
}

.form-normal:-ms-input-placeholder {
    color: #ccc;
    font-size: 0.95rem;
}

.form-normal:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea.form-normal::-webkit-input-placeholder {
    color: #ccc;
    font-size: 0.95rem;
}

textarea.form-normal:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
    font-size: 0.95rem;
}

textarea.form-normal::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
    font-size: 0.95rem;
}

textarea:-ms-input-placeholder {
    color: #ccc;
    font-size: 0.95rem;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}


/* == Caes select feature == */

.case-select-feature {
    display: block;
    width: 55%;
    float: left;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    margin: 15px 0;
    padding-left: 15px;
}

.case-select-item {
    display: block;
    text-align: center;
    width: 33.333333%;
    float: left;
    border-radius: 6px;
    padding: 0 15px 15px 0;
    position: relative;
    min-height: 80px;
}

.case-select-icon {
    width: 26px;
    height: 26px;
    background-color: #6ab04d;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 35px;
    position: absolute;
    top: -9.5px;
    right: -7.5px;
    display: none;
}

    .case-select-icon > ._i {
        float: left;
        text-align: center;
        font-size: 1.1rem;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.case-select-inner {
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
    border: 1px solid #e5e5e6;
    float: left;
    border-radius: 6px;
    padding: 0;
    position: relative;
    min-height: 80px;
    padding: 15px 15px 0px 15px;
    cursor: pointer;
}

.case-select-item:hover .case-select-inner,
.case-select-item:focus .case-select-inner {
    border: 1px solid #6ab04d;
}

.case-select-inner > span,
.case-select-inner > p {
    display: block;
    width: 100%;
}

.case-select-inner > span {
    font-size: 16px;
    color: #767679;
}

.case-select-inner > p {
    font-size: 14px;
}

.case-select-item.active .case-select-inner {
    border: 1px solid #6ab04d;
}

.case-select-item.active .case-select-icon {
    display: block;
}

.case-select-inner .text-green {
    color: #6ab04d;
}

.case-select-inner p.text-gray {
    color: #999;
}

.box-check-info {
    width: 100%;
    display: flex;
    overflow: hidden;
}

.form-info-text {
    color: #767679;
}

.box-check-info input[type='checkbox'] + label {
    font-size: 0.95rem;
    padding-left: 40px;
    color: #767679;
}

.box-check-info input[type='checkbox']:checked + label > span {
    border: 8px solid #6ab04d;
    position: relative;
    /* top: -1px; */
    height: 16px;
    width: 16px;
    float: left;
    display: block;
}

.box-check-info input[type='checkbox'] + label > span {
    position: relative;
    top: -1px;
    width: 16px;
    height: 16px;
    float: left;
}

.form-info-item.inner .form-info-label {
    justify-content: flex-end;
    min-width: 215px;
}

a.text-green {
    color: #6ab04d !important;
}

.text-underline {
    text-decoration: underline !important;
}

.span-bold {
    margin: 0 15px;
    font-weight: 600;
}


/* == Single calendar == */

.calendar-wrapper {
    width: 100%;
    margin-top: 7.5px;
    position: absolute;
    background-color: #fff;
    border-radius: 3px;
    top: 100%;
    z-index: 2;
    display: none;
    float: left;
}

.calendar-widget {
    position: relative;
    width: 100%;
    height: 50px;
    top: 0;
}

.input-wrapper {
    display: block;
    width: 100%;
    height: 50px;
}


    /*  .dual-calendar {
        padding: 10px 10px;
        display: flex;
        border-radius: 3px;
        box-shadow: var(--shadow-2dp);
        background-color: #252525;
        width: 100%;
        border: 2px solid #252525;
    }
    .calendar {
        width: 100%;
    }
    .calendar-header {
        position: relative;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .prev-btn, .next-btn {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50px;
        box-shadow: var(--shadow-2dp);
        background-color: #6ab04d;
        color: white
        transition: background-color 0.2s, box-shadow 0.2s;
        color: #fff;
    }
    .next-btn {
        right: 0;
    }
    .prev-btn {
        left: 0;
    }
    .month-text {
        color: var(--gray-700);
        cursor: pointer;
    }
    .date-table-header {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
    }
    .day {
        user-select: none;
        display: flex;
        align-content: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        font-weight: 700;
        color: #fff;
    }
    .day.sunday {
        color: var(--secondary);
    }
    .day.saturday {
        color: var(--green);
    }
    .date-table-row {
        display: flex;
        height: 40px;
        justify-content: space-between;
    }
    .date.empty {
        cursor: default;
        user-select: none;
    }
    .date {
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 60px;
        transition: color 0.2s;
    }
    .date.today {
        color: var(--green);
    }
    .date.today .date-text {
        color: #6ab04d;
    }
    .date.today.selected .date-text {
        color: var(--white);
    }
    .date.selected {
      color: #fff;
    }
    .date .date-ripple {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 40px;
        height: 100%;
        background-color: transparent;
        will-change: transform;
        transition: transform 0.18s cubic-bezier(0, .75, .5, 1), background-color 0.2s;
    }
    .date.selected .date-ripple {
      background-color: #6ab04d;
      transform: translate(-50%, -50%) scale(1);
    }
    .date .help-text {
        position: absolute;
        top: 0;
        display: none;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: 15px;
        font-size: 10px;
        z-index: 1;
    }
    .date .date-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 90%;
        z-index: 2;
        margin: 0;
        color: #000 !important;
        border: 0;
        outline: none;
        box-shadow: none;
        background-color: transparent;
        position: absolute;
        left: 0;
        top: 0;
        height: 60px;
        border-radius: 50px;
        overflow: hidden;
        cursor: pointer;
    } */

    .input-wrapper > .input-group.form-group {
        height: 50px;
        margin: 0;
        cursor: pointer;
    }

        .input-wrapper > .input-group.form-group .date-field {
            background-color: #fcfcfc;
            border: 1px solid #e5e5e6;
            width: 100%;
            border-radius: 6px;
            padding: 0 0 0 45px;
            cursor: pointer;
            color: #767679;
            z-index: 1;
            background-color: transparent;
        }

.col-11.sm-fluid .form-info-item.inner ._icon {
    z-index: 0;
    right: inherit;
    left: 10px;
}

.form-normal.select-normal.hour-clock {
    min-width: 100px;
}

.box-check-info.policy {
    width: auto;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.text-green.text-underline {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    float: left;
    font-size: 0.95rem;
}

.form-group.flex-box .btn-verify {
    height: 50px;
    font-size: 0.92rem;
    line-height: 16px;
}


/* == Finance history == */

.features-box-body {
    display: block;
    float: left;
    width: 100%;
}

.features-box-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 15px 0;
    width: 100%;
}

.btn-info.del {
    align-items: center;
    display: flex;
    justify-content: center;
}

    .btn-info.del > ._i {
        margin: 0 5px 0 5px;
        font-size: 1.5rem;
    }

.btn-event {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin-left: 30px;
}

.arrow-left,
.arrow-right {
    width: 40px;
    height: 40px;
    margin: 5px 2.5px;
    color: #fff;
    text-align: center;
    line-height: 40px;
}

    .arrow-left > ._i,
    .arrow-right > ._i {
        float: left;
        height: 40px;
        width: 40px;
        background-color: #808080;
        border-radius: 50%;
        line-height: 40px;
        cursor: pointer;
    }

        .arrow-left > ._i:hover,
        .arrow-left > ._i:focus,
        .arrow-right > ._i:hover,
        .arrow-right > ._i:focus {
            background-color: #606060;
        }

.expand-xs-btn {
    width: 100%;
    background-color: #252525;
    border-radius: 6px 6px 0 0;
    height: 40px;
    position: relative;
}

.expand-xs-icon {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 55px;
    margin: 0;
    background-color: #252525;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

    .expand-xs-icon > ._i {
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

.expand-xs-wrapper {
    position: relative;
    height: 50px;
    overflow: hidden;
    margin: 15px 0 0 0;
    display: none;
    width: 100%;
}


/* === Table responsive custom rendering == */

.table.table-custom-rendering thead th {
    padding: 0;
    height: 50px;
    vertical-align: middle;
    text-align: center;
    background-color: #ad060e;
    color: #fff;
    border-top: 1px solid #8c0108;
    border-right: 1px solid #8c0108;
    border-bottom: 1px solid #8c0108;
    font-weight: 300;
    font-size: 0.9rem;
    position: relative;
    width: 18% !important;
}

    .table.table-custom-rendering thead th:first-child {
        border: 1px solid #8c0108;
        outline: none;
    }

    .table.table-custom-rendering thead th.sorting {
        padding-right: 0;
        cursor: pointer;
    }

        .table.table-custom-rendering thead th.sorting ._i {
            float: right;
            height: 50px;
            line-height: 50px;
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            text-align: center;
        }

    .table.table-custom-rendering thead th.controls {
        text-align: center;
        width: 10% !important;
    }

        .table.table-custom-rendering thead th.controls ._i {
            float: left;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
        }

.table.table-custom-rendering td,
.table.table-custom-rendering td span,
.table.table-custom-rendering td ._i {
    font-size: 14px;
    text-align: center;
    height: 50px;
    padding: 0 !important;
    vertical-align: middle;
}

    .table.table-custom-rendering td span {
        vertical-align: middle;
    }

    .table.table-custom-rendering td .control-element {
        width: 100%;
        float: left;
    }

        .table.table-custom-rendering td .control-element .control-icon {
            width: 50%;
            float: left;
            text-align: center;
            cursor: pointer;
        }

.table.table-custom-rendering td {
    padding-bottom: 0 !important;
    border-top: 0;
    border-bottom: 1px solid #ebebeb;
    max-width: 100px;
    word-break: break-word;
    color: #767679;
    vertical-align: middle;
}

    .table.table-custom-rendering td ._i {
        line-height: 50px;
    }

    .table.table-custom-rendering td .control-element .control-icon ._i {
        color: #999;
        font-size: 19px;
        float: left;
        width: 100%;
    }

    .table.table-custom-rendering td span.text.text-lightgreen {
        color: #6ab04d;
    }

    .table.table-custom-rendering td span.text.text-lightyellow {
        color: #f90;
    }

    .table.table-custom-rendering td span.text.text-lightblue {
        color: #2196F3;
    }

    .table.table-custom-rendering td span.text.text-lightgray {
        color: #767679;
    }

    .table.table-custom-rendering td span.text.text-lightred {
        color: #ad060e;
    }

    .table.table-custom-rendering td span.checked ._i {
        font-size: 24px;
    }


/* == Progress point == */

a.next {
    margin-left: 25px;
}

a.prev {
    margin-right: 25px;
}

.progress-point {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    position: relative;
}

.progress-wrapper {
    overflow: hidden;
    width: 76.666666667%;
    float: left;
}

    .progress-wrapper > .buttons {
        float: left;
        text-align: center;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
    }

    .progress-wrapper > .buttons {
        display: none;
    }

.progress-point ul li {
    background-color: #d6d6d6;
    display: table-cell;
    position: relative;
    line-height: 0;
    z-index: 1;
    color: #FFF;
    text-align: center;
    transition: background-color 0.75s, color 0.5s;
    min-width: 220px;
    height: 0px;
    top: 18px;
}

    .progress-point ul li::before {
        content: '';
        width: auto;
        height: 40px;
        color: #FFF;
        line-height: 40px;
        text-align: center;
        left: -15px;
        background-color: #d6d6d6;
        border: 1px solid #d6d6d6;
        z-index: -9;
        position: absolute;
        display: flex;
        top: -10px;
        margin-right: auto;
        margin-left: auto;
        z-index: -1;
        transition: background-color 0.75s, color 0.5s;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        width: 165px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 1.0rem;
        align-items: center;
        justify-content: center;
        float: left;
        padding: 0 5px;
    }


    /* == Current step == */

    .progress-point ul li.current::before {
        border: 1px solid #6ab04d;
        /* Current Step Circle Color */
        background-color: #6ab04d;
        transition: background-color 0.75s, color 0.5s;
        width: auto;
        min-width: 165px;
        line-height: 40px !important;
        height: 40px;
    }


    /* == Complete steps == */

    .progress-point ul li.complete {
        background-color: #6ab04d;
        transition: background-color 0.75s, color 0.5s;
    }

        .progress-point ul li.complete::before {
            background-color: #6ab04d;
            border: 5px solid transparent;
            transition: background-color 0.75s, color 0.5s;
        }


    /* == Remove first step color bar line == */

    .progress-point ul li:last-of-type {
        background-color: #d6d6d6;
    }

    .progress-point ul li > span {
        position: relative;
        top: 2px;
        font-size: 0.95rem;
    }

.progress-wrapper > .progress-point > ul {
    float: left;
    height: 50px;
    margin-bottom: 5px;
    margin-top: 2px;
    position: relative;
}

.progress-point ul li.current {
    background-color: #6ab04d;
}

.progress-wrapper > .buttons > a {
    height: 35px;
    float: left;
    width: 100px;
    background-color: #6ab04d;
    margin: 0 5.5px;
    line-height: 35px;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
}

    .progress-wrapper > .buttons > a:hover,
    .progress-wrapper > .buttons > a:focus {
        background-color: #509c30;
        color: #f0f1f3;
    }

.cancel-wrapper {
    width: 23.33333333%;
    float: left;
}

.btn-cancel-lg {
    height: 50px;
    border-radius: 50px;
    padding: 0 .75rem;
    width: 180px;
    font-size: 0.95rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    top: -4.5px;
    left: 50%;
    transform: translateX(-50%);
}


/* ===================================================================================== */

@media screen and (max-width: 2000px) {
}

@media screen and (max-width: 1790px) {
    /* == Progress point == */
    .cancel-wrapper {
        width: 100%;
    }

    .progress-wrapper {
        width: 100%;
    }

    .btn-cancel-lg {
        top: 0;
    }

    .progress-wrapper > .progress-point > ul {
        left: 50%;
        position: relative;
        transform: translateX(-50%);
    }

    .btn-cancel-lg {
        height: 40px;
    }
}

@media screen and (max-width: 1600px) {
    /* == Feature left == */
    .features-left {
        padding: 50px 15px;
    }
}

@media screen and (max-width: 1470px) {
    /* == Finance history heading == */
    .table.table-custom-rendering thead th {
        text-align: left;
        padding-left: 10px;
        font-size: 12px;
        max-width: 200px;
    }

        .table.table-custom-rendering thead th:first-child {
            min-width: 80px;
        }

        .table.table-custom-rendering thead th:last-child-child {
            min-width: 100px;
        }

    .table-responsive-xl,
    .tb-box-responsive.table-responsive-xl {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .table.table-custom-rendering thead th.sorting ._i {
        font-size: 18px;
    }

    .table.table-custom-rendering thead th.sorting ._i {
        text-align: center;
    }
}

@media screen and (max-width: 1440px) {
    /* == Instant wrapper == */
    .instant-wrapper > li > a {
        font-size: 0.85rem;
    }

        .instant-wrapper > li > a > img {
            width: 19px;
        }

    .icon-outer {
        width: 50%;
        float: left;
        padding: 15px;
    }

    .icon-holder {
        display: block;
        float: left;
        margin: 0 auto;
        width: 100%;
    }

    .icon-wrap {
        margin: 0 5px 15px 5px;
        float: left;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        border: 9px solid #f0f1f3;
        width: 170px;
        height: 170px;
    }

    .features-left {
        padding: 50px 15px;
    }

    .icon-text {
        font-size: 0.85rem;
    }

        .icon-text > .lg {
            font-size: 1.00rem;
            font-weight: 600;
        }

    .list-wrapper > li {
        font-size: 0.9rem;
    }

    .list-normal > li {
        font-size: 0.9rem;
    }

    .short-info > a {
        float: left;
        font-size: 14px;
        margin: 10px 0;
        width: 100%;
    }

    .list-wrapper > li > .list-title {
        font-size: 14px;
    }

    .list-wrapper > li > .list-text {
        font-size: 14px;
    }

    .short-info,
    .short-info > p,
    .short-info > p.text-green {
        font-size: 14px;
    }

        .short-info > p {
            color: #767679;
        }

    .bank-normal > li {
        font-size: 0.9rem;
    }

        .bank-normal > li > p {
            font-size: 0.8rem;
        }

        .bank-normal > li > .thumbnail {
            width: 35px;
            height: 35px;
        }

        .bank-normal > li > .btn-status {
            font-size: 0.8rem;
            padding: .375rem .55rem;
            min-width: 70px;
        }

    .list-normal > li > .list-title {
        font-size: 14px;
    }

    .list-normal > li > .list-text {
        font-size: 14px;
    }
    /* == Form info == */
    .form-info-label {
        font-size: 14px;
    }

    .form-normal {
        font-size: 14px;
    }

    .text.center > p {
        font-size: 14px;
    }

    .box-check-info input[type='checkbox'] + label {
        font-size: 14px;
    }
    /* == Placeholder == */
    .form-normal::-webkit-input-placeholder {
        font-size: 14px;
    }

    .form-normal:-moz-placeholder {
        /* Firefox 18- */
        font-size: 14px;
    }

    .form-normal::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 14px;
    }

    .form-normal:-ms-input-placeholder {
        font-size: 14px;
    }

    .form-normal:focus::-webkit-input-placeholder {
        color: transparent;
    }

    textarea.form-normal::-webkit-input-placeholder {
        font-size: 14px;
    }

    textarea.form-normal:-moz-placeholder {
        /* Firefox 18- */
        font-size: 14px;
    }

    textarea.form-normal::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 14px;
    }

    textarea:-ms-input-placeholder {
        font-size: 14px;
    }

    textarea:focus::-webkit-input-placeholder {
        color: transparent;
    }
    /* == Feature box == */
    .features-box {
        padding: 30px 15px;
    }

    .col-11.sm-fluid {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .form-info-item.inner .form-info-label {
        justify-content: flex-start;
        min-width: 250px;
    }

    .col-11.sm-fluid .form-info-item.inner {
        height: 50px;
        margin-bottom: 15px;
    }

    .col-11.sm-fluid > .form-info-item.form-group {
        display: block;
        margin-bottom: 15px;
    }
}

@media screen and (max-width:1280px) {
    /* == Case select */
    .case-select-feature {
        width: 100%;
        margin-bottom: 0;
    }

    .icon-wrap {
        margin: 0 auto 15px;
    }

    .icon-holder {
        display: block;
    }

    .icon-wrap {
        width: 140px;
        height: 140px;
        border: 5px solid #f0f1f3;
    }

    .icon-text > .lg {
        font-size: 0.95rem;
    }
    /* == table custom == */
    .table.table-custom-rendering td span {
        font-size: 13px;
    }
}

@media screen and (max-width:1279px) {
}

@media screen and (max-width: 1170px) {
    /* == Finance heading == */
    .table.table-custom-rendering thead th.sorting ._i {
        text-align: right;
    }

    .progress-point ul li::before {
        width: 130px;
        font-size: 0.85rem;
    }

    .progress-point ul li.current::before {
        width: 130px;
        min-width: 130px;
    }

    .progress-point ul li > span {
        font-size: 0.85rem;
    }

    .progress-point ul li {
        min-width: 164px;
    }
}

@media screen and (max-width:991px) {
    /* == Container == */
    .container {
        max-width: 720px;
    }
    /* == Table custom == */
    .table.table-custom-rendering td span {
        font-size: 13px;
    }
    /* == Finance heading == */
    .instant-wrapper > li > a > img {
        display: none;
    }
    /* == Finance history == */
    .expand-xs-wrapper {
        display: block;
        margin-bottom: 5px;
    }

    .expand-xs-toggle {
        display: none;
    }

        .expand-xs-toggle.active {
            display: block;
            padding: 0 15px;
        }

    .features-left {
        width: 100%;
        padding: 15px 0 0 0;
    }

    .features-right {
        width: 100%;
        padding: 5px 0 15px 0;
    }

    .icon-outer {
        padding: 0;
    }

    .box-check-info input[type='checkbox'] + label {
        padding-left: 15px;
    }
    /* == Finance history == */
    .col.col-lg {
        /* padding: 0; */
    }

    .btn.btn-danger.btn-regis-lg {
        height: 50px;
        font-size: 14px;
        margin: 0 0 10px 0;
        width: 100%;
        border-radius: 6px;
    }

    .box-slider-heading {
        background-color: #fff;
        color: #000;
    }

    .btn.btn-danger.btn-regis-lg.btn-header-xs {
        height: auto;
        background: none !important;
        border: none !important;
        color: #000 !important;
        text-align: center;
        justify-content: flex-start;
        padding: 0;
        font-size: 18px !important;
        line-height: 25px;
        word-break: break-word;
        float: left;
        white-space: inherit;
        vertical-align: top;
        text-align: left;
    }
    /* == Finance  == */
    .table.table-custom-rendering thead th:first-child {
        min-width: 150px;
    }

    .table.table-custom-rendering thead th:last-child {
        min-width: 150px;
    }

    .table.table-custom-rendering thead th {
        min-width: 200px;
        text-align: center;
    }

        .table.table-custom-rendering thead th.sorting ._i {
            text-align: center;
        }
}

@media screen and (max-width:768px) {
}

@media screen and (max-width: 767px) {
    /* == List wrapper == */
    .list-wrapper > li > .list-title {
        font-size: 12px;
    }

    .list-wrapper > li > .list-text {
        font-size: 12px;
    }

    .short-info,
    .short-info > p,
    .short-info > p.text-green {
        font-size: 12px;
    }

    .list-normal > li > .list-title {
        font-size: 12px;
    }

    .list-normal > li > .list-text {
        font-size: 12px;
    }

    .bank-normal > li > .btn-status {
        font-size: 12px;
    }
    /* == Btn cancel == */
    .btn-cancel-lg {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .progress-wrapper > .progress-point {
        margin-bottom: 10px;
    }
    /* == Slider == */
    .slider-heading-title {
        font-size: 13px;
    }
    /* == Instance wrapper == */
    .instant-wrapper {
        border-radius: 6px 6px 0 0;
        overflow: hidden;
    }

        .instant-wrapper > li > a {
            text-align: center;
            font-size: 11px;
            line-height: 15px;
            word-break: break-word;
            padding: 0 7.5px;
        }

    .icon-text > .lg {
        font-size: 14px;
    }

    .icon-text {
        font-size: 12px;
    }
    /* == Form == */
    .features-box {
        padding: 15px;
    }

    .text-title-sm {
        font-size: 14px;
    }

    .card-form.form-info {
        padding: 0;
        /* margin-bottom: 0; */
        /* margin-bottom: 30px; */
        margin-bottom: 0;
    }

    .form-info-item {
        display: block;
    }

    .col-11.sm-fluid .form-info-item.inner {
        height: auto;
    }

        .col-11.sm-fluid .form-info-item.inner > ._icon {
            position: absolute;
            top: 19px;
            height: 39px;
            font-size: 20px;
            line-height: 40px;
        }

    .box-check-info input[type='checkbox'] + label {
        padding: 0 0 0 30px;
        display: block;
        line-height: 20px;
        height: auto;
        font-size: 13px;
    }

        .box-check-info input[type='checkbox'] + label > span {
            top: 48%;
            transform: translateY(-50%);
            position: absolute;
            left: 0;
        }

    .box-check-info input[type='checkbox']:checked + label > span {
        top: 48%;
        transform: translateY(-50%);
        position: absolute;
        left: 0;
    }

    .form-info-text {
        line-height: 45px;
        font-size: 13px;
    }

    .case-select-inner {
        padding: 5px;
        min-height: 60px;
    }

        .case-select-inner > span,
        .case-select-inner > p {
            font-size: 12px;
            margin: 0;
        }

    .case-select-item {
        min-height: 60px;
    }

    .case-select-icon {
        width: 20px;
        height: 20px;
        top: -12px;
    }

        .case-select-icon > ._i {
            font-size: 0.8rem;
        }

    .text-green.text-underline {
        font-size: 14px;
    }

    .form-group.flex-box {
        display: block;
    }

        .form-group.flex-box .btn-verify {
            margin: 15px 0 15px 0;
            font-size: 13px;
        }

    .form-info-label {
        font-size: 12px;
    }

    .form-normal {
        font-size: 13px;
        height: 40px;
    }

    .input-wrapper > .input-group.form-group {
        height: 40px;
    }

    ._icon {
        height: 40px;
        font-size: 17px;
        line-height: 40px;
    }

    .text.center,
    .text.center > p {
        font-size: 13px;
        margin: 0;
    }

    .btn-info {
        font-size: 13px;
        width: 100%;
    }

    .calendar-widget {
        height: 40px;
    }
    /* == Placeholder == */
    .form-normal::-webkit-input-placeholder {
        font-size: 12px;
    }

    .form-normal:-moz-placeholder {
        /* Firefox 18- */
        font-size: 1px;
    }

    .form-normal::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 12px;
    }

    .form-normal:-ms-input-placeholder {
        font-size: 12px;
    }

    .form-normal:focus::-webkit-input-placeholder {
        color: transparent;
    }

    textarea.form-normal::-webkit-input-placeholder {
        font-size: 12px;
    }

    textarea.form-normal:-moz-placeholder {
        /* Firefox 18- */
        font-size: 12px;
    }

    textarea.form-normal::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 12px;
    }

    textarea.form-normal:-ms-input-placeholder {
        font-size: 12px;
    }

    textarea.form-normal:focus::-webkit-input-placeholder {
        color: transparent;
    }

    .list-wrapper > li {
        font-size: 13px;
    }

    .short-info > p {
        font-size: 12px;
    }

    .short-info > a {
        font-size: 12px;
        width: 100%;
    }

    .list-normal > li {
        font-size: 13px;
    }
    /* == Form password ==  */
    .form-password ._icon {
        bottom: 0;
        top: inherit;
    }
    /* == Table custom == */
    .table.table-custom-rendering thead th:first-child {
        min-width: 75px;
        max-width: 75px;
    }

    .table.table-custom-rendering thead th {
        min-width: 125px;
        max-width: 125px;
        text-align: left;
        height: 40px;
    }

        .table.table-custom-rendering thead th.sorting ._i {
            text-align: right;
            padding-right: 7.5px;
        }

        .table.table-custom-rendering thead th:last-child {
            min-width: 50px;
        }

    .table.table-custom-rendering td {
        height: 40px;
    }

        .table.table-custom-rendering td span.text.text-action > ._i {
            line-height: inherit;
            top: 3px;
            height: 40px;
        }

        .table.table-custom-rendering td .control-element .control-icon > ._i {
            line-height: 40px;
            top: 0;
            height: 40px;
        }

        .table.table-custom-rendering td span.checked ._i {
            height: 40px;
            font-size: 17px;
            top: -2px;
        }

        .table.table-custom-rendering td span {
            height: 40px;
            line-height: 40px;
            float: left;
            width: 100%;
            font-size: 12px;
        }
    /* == Progress point == */
    .progress-point ul li::before {
        width: 65px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 20px;
        word-break: break-word;
        height: 65px;
        top: -28px;
        left: 50%;
        transform: translate(-50%, 0);
        border-radius: 50%;
    }

    .progress-wrapper > .progress-point > ul {
        height: auto;
    }

    .progress-point ul li.current::before {
        height: 65px;
        width: 65px;
        min-width: 65px;
        top: -28px;
    }

    .progress-wrapper > .progress-point {
        height: 75px;
    }

    .progress-point ul li {
        min-width: 120px;
        top: 30px;
    }

        .progress-point ul li > span {
            width: 50px;
            word-break: break-word;
            font-size: 11px;
            top: -5px;
            display: flex;
            line-height: 11px;
            background: transparent;
            height: 0;
            justify-content: center;
            left: 50%;
            transform: translateX(-50%);
        }
}

@media screen and (max-width:575px) {
}

@media screen and (max-width: 480px) {
    /* == icons circle == */
    .icon-text {
        padding: 0 15px;
    }

    .features-title {
        font-size: 16px;
    }

    .features-head > p {
        font-size: 13px;
    }
    /* == progress point == */
    .progress-point ul li::before {
        width: 65px;
        height: 65px;
        top: -32.5px;
        padding: 10px;
    }

    .progress-point ul li.current::before {
        height: 65px;
        width: 65px;
        min-width: 65px;
        top: -32.5px;
    }

    .progress-wrapper > .progress-point {
        height: 80px;
        margin-bottom: 15px;
    }

    .progress-point ul li {
        min-width: 85px;
        top: 40px;
    }

        .progress-point ul li > span {
            font-size: 11px;
            top: -8.5px;
        }
}

@media screen and (max-width: 380px) {
}

@media screen and (max-width: 360px) {
    /* == Bank normal == */
    .bank-normal > li {
        display: block;
        float: left;
        width: 100%;
        float: left;
        margin: 0 auto;
        position: relative;
    }

        .bank-normal > li > .thumbnail {
            float: left;
            margin-bottom: 15px;
        }

        .bank-normal > li > p {
            height: 40px;
            width: 100%;
            float: left;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0 75px 0 42px;
            line-height: 40px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .bank-normal > li > .btn-status {
            position: absolute;
            right: 0;
            width: 70px;
            min-width: 70px;
            max-width: 70px;
            top: 3px;
            padding: 4.5px 0;
        }
}

@media screen and (max-width: 320px) {
    /* == Progress point == */
    .progress-wrapper > .progress-point > ul {
        height: 80px;
    }

    .progress-point ul li::before {
        width: 55px;
        height: 55px;
        top: -27.5px;
        padding: 10px;
    }

    .progress-point ul li.current::before {
        height: 55px;
        width: 55px;
        min-width: 55px;
        top: -27.5px;
    }

    .progress-wrapper > .progress-point {
        height: 80px;
        margin-bottom: 0;
    }

    .progress-point ul li {
        min-width: 75px;
        top: 40px;
    }

        .progress-point ul li > span {
            font-size: 10px;
            top: -10px;
        }
    /* == text == */
    .slider-heading-title {
        font-size: 13px;
    }

    .btn.btn-danger.btn-regis-lg.btn-header-xs {
        font-size: 16px !important;
    }
}


/* == Table custom == */

table.dataTable {
    margin-top: 0 !important;
}

    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:after,
    table.dataTable thead .sorting_asc_disabled:after,
    table.dataTable thead .sorting_desc_disabled:after {
        content: " ";
        background-image: url(../images/finance/baseline_swap_vert_white_18dp.png?v=1);
        background-size: contain;
        height: 20px;
        width: 20px;
        background-repeat: no-repeat;
        position: absolute;
        top: 30%;
        right: 6px;
        transform: translateY(-0%);
        float: right;
        opacity: 1;
    }

    table.dataTable thead .sorting_desc:after {
        background-image: url(../images/finance/baseline_swap_vert_white_18dp.png?v=1);
    }

    table.dataTable thead .sorting_asc:after {
        background-image: url(../images/finance/baseline_swap_vert_white_18dp.png?v=1);
    }

.table.table-custom-rendering thead th.controls::after {
    content: none;
}

.form-inline {
    display: block;
    padding: 0 15px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    float: right;
    margin: 0 0 0 30px;
}

    div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child {
        display: block;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child {
        display: block;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button {
        width: 40px;
        height: 40px;
        overflow: hidden;
        background-color: #808080;
        color: #000;
        margin: 0 0 7.5px 7.5px;
        border-radius: 0px;
        margin: 5px 2.5px;
        position: relative;
        cursor: pointer;
        background-color: transparent;
    }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child,
        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child {
            width: 40px;
            height: 40px;
            overflow: hidden;
            background-color: #808080;
            color: #ffffff;
            margin: 0 0 7.5px 7.5px;
            border-radius: 50%;
            margin: 5px 2.5px;
            position: relative;
            cursor: pointer;
            background-color: transparent;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button > a {
            color: #000;
            line-height: 40px;
            text-align: center;
            float: left;
            width: 100%;
            font-size: 14px;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button.active > a {
            color: #ad060e;
            background: transparent;
            outline: none !important;
            box-shadow: none !important;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child::after {
            content: "";
            background-image: url(../images/finance/baseline-arrow_left-24px.svg?v=1);
            background-size: contain;
            height: 24px;
            width: 24px;
            background-repeat: no-repeat;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            z-index: 1;
            float: left;
            color: #fff;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child::after {
            content: "";
            background-image: url(../images/finance/baseline-arrow_right-24px.svg?v=1);
            background-size: contain;
            height: 24px;
            width: 24px;
            background-repeat: no-repeat;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            z-index: 1;
            float: left;
            color: #fff;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:hover,
        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:focus {
            background-color: transparent;
            color: #ad060e;
            font-weight: 700;
            outline: none !important;
            box-shadow: none !important;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child > a {
            display: none;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child > a {
            display: none;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button.active {
            color: #ad060e;
            font-weight: 700;
        }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button.active:hover,
            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button.active:focus {
                background-color: transparent;
                color: #ad060e;
                font-weight: 700;
                outline: none !important;
                box-shadow: none !important;
            }

.form-inline .row:last-child .col-sm-5 {
    width: 100%;
    display: none;
}

.form-inline .row:last-child {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    float: right;
}

    .form-inline .row:last-child .col-sm-7 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        margin: 15px 0 15px 0;
    }

@media screen and (max-width:991px) {
    /* == Form inline == */
    .form-inline .row:last-child {
        float: left !important;
    }
}

@media screen and (max-width:767px) {
    /* == Fom inline == */
    .form-inline .row:last-child {
        float: none !important;
    }
    /* == Form inline == */
    .form-inline {
        padding: 0;
    }

        .form-inline .row:last-child {
            float: none !important;
            margin: 0;
        }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        float: left;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        white-space: initial !important;
        margin: 0;
        display: block;
        float: left;
    }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button {
            float: left;
            width: 35px;
            height: 35px;
            line-height: 35px;
        }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child,
            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child {
                width: 35px;
                height: 35px;
            }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button > a {
                line-height: 35px;
                font-size: 11px;
            }
}

@media screen and (max-width:480px) {
    /* == Table custom == */
    div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button {
        float: left;
        width: 25px;
        height: 25px;
        line-height: 30px;
    }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child,
        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child {
            width: 25px;
            height: 25px;
        }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:first-child::after {
                width: 20px;
                height: 20px;
            }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:last-child::after {
                width: 20px;
                height: 20px;
            }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button > a {
            line-height: 25px;
            font-size: 11px;
        }
}


/* == Account page == */

.features-right.no-padding {
    padding: 0 0 30px 0;
}

.label-num {
    padding: 0px 4px;
    margin: 0 5px;
    color: #000;
    background-color: #fff;
    border-radius: 6px;
    font-size: 12px;
    min-width: 20px;
    line-height: 17px;
    width: auto;
    height: 16px;
    font-weight: 700;
}

.form-info-item.form-info-block {
    align-items: flex-start;
}

.form-info-paragraph {
    width: 100%;
    display: flex;
    font-size: 14px;
    color: #767679;
    float: left;
    line-height: 40px;
}

.text-paragraph {
    width: 100%;
    float: left;
    font-size: 14px;
    color: #767679;
}

    .text-paragraph > p {
        font-size: 14px;
        color: #767679;
    }

.profile-image .table {
    margin-bottom: 0;
    padding: 15px 15px 5px 0;
}

.table-cell {
    display: -webkit-box;
    vertical-align: middle;
}

#profile .profile-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profile .dashes {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    border-radius: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 1;
    overflow: hidden;
}

#profile label {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 30px;
    color: #ccc;
    opacity: 1;
    font-size: 14px;
}

#profile.dragging {
    background-image: none !important;
}

    #profile.dragging .dashes {
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-name: spin;
        animation-name: spin;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 1 !important;
    }

    #profile.dragging label {
        opacity: 0.5 !important;
    }

#profile.hasImage .dashes,
#profile.hasImage label {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.model > button {
    position: relative;
    border-radius: 4px;
    border: 1px solid #003664;
    font-size: 12px;
}

.btn-upload-image {
    width: 170px;
    height: 50px;
    font-size: 14px;
    border: 1px solid #e0e0e0 !important;
    background-color: #fcfcfc !important;
    color: #767679;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.profile-info .title {
    font-size: 14px;
    width: 100%;
    float: left;
    color: #767679;
    font-family: var(--fontWeightMedium);
    font-weight: 300;
    width: 100%;
}

#mediaFile {
    position: absolute;
    top: -1000px;
}

.profile-image {
    display: block;
    width: 200px;
    float: left;
    margin-right: 25px;
}

.setting-ele.profile-picture {
    display: block;
    width: 100%;
    align-items: center;
    float: left;
}

.profile-info {
    display: block;
    position: relative;
    width: 50%;
    float: left;
    top: 50%;
    padding-top: 90px;
}

#profile {
    height: 190px;
    width: 190px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 15px solid #f0f1f3;
    margin: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}


/* == profile sm == */

.box-profile-sm {
    height: 150px !important;
    width: 190px;
    border-radius: 6px !important;
    border: 1px solid #e5e5e6 !important;
    margin: 0 !important;
    padding: 5px !important;
    background-color: #fcfcfc !important;
}

    .box-profile-sm label {
        margin: 0;
        float: right;
        padding: 0 15px 0 0 !important;
    }

    .box-profile-sm .profile-inner {
        border: 0 !important;
        /* justify-content: flex-end !important; */
        color: #999;
    }

        .box-profile-sm .profile-inner .image-icon {
            margin: 0 7px 0 0;
            color: #e1e1e1;
            font-size: 30px;
        }

#profile.hasImage .image-icon {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* == == */

.form-info-item.form-group.form-password .form-normal.icon {
    padding: 0 50px 0 15px;
}


/* == Account edit bank == */

.box-default-holder {
    width: 100%;
}

.box-default-inner {
    display: block;
    padding: 20px 30px 5px 30px;
    border: 1px solid #e5e5e6;
    width: 100%;
    float: left;
    border-radius: 6px;
    background-color: #fcfcfc;
    margin-bottom: 15px;
    position: relative;
}

.box-bank-content {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    padding: 0 150px 0 65px;
    position: relative;
}

.box-default-inner .form-normal {
    background-color: #fff;
}

.box-bank-img {
    float: left;
    width: 50px;
    height: 50px;
    background-color: #000;
    margin: 0 0 0 0;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
}

    .box-bank-img > img {
        height: 115%;
        max-width: 115% !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.box-bank-text {
    float: left;
    display: block;
    min-height: 50px;
    padding: 0 15px;
    text-align: left;
    width: 100%;
}

.box-bank-btn {
    float: right;
    display: block;
    position: absolute;
    right: 0;
}

.box-bank-title {
    width: 100%;
    float: left;
    display: block;
    color: #767679;
    font-size: 15px;
}

.box-bank-subtitle {
    width: 100%;
    float: left;
    display: block;
    color: #999;
    font-size: 14px;
}

.btn.btn-bank-circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    background-color: #ddd;
    color: #fff;
    cursor: pointer;
    padding: 0;
    text-align: center;
}

    .btn.btn-bank-circle ._i {
        font-size: 19px;
        color: #fff;
        float: left;
        position: relative;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }

    .btn.btn-bank-circle.btn-st-success {
        background-color: #6ab04d;
        color: #fff;
    }

        .btn.btn-bank-circle.btn-st-success:hover,
        .btn.btn-bank-circle.btn-st-success:focus {
            background-color: #4d9c2c;
            color: #fff;
        }

    .btn.btn-bank-circle.btn-st-edit {
        background-color: #e7ac38;
        color: #fff;
    }

        .btn.btn-bank-circle.btn-st-edit:hover,
        .btn.btn-bank-circle.btn-st-edit:focus {
            background-color: #db9c1f;
            color: #fff;
        }

    .btn.btn-bank-circle.btn-st-delete {
        background-color: #ac060f;
        color: #fff;
    }

        .btn.btn-bank-circle.btn-st-delete:hover,
        .btn.btn-bank-circle.btn-st-delete:focus {
            background-color: #8f0109;
            color: #fff;
        }

.btn-st-grade.active {
    background-color: #3598db;
    color: #fff;
}

    .btn-st-grade:focus,
    .btn-st-grade.active:focus {
        background-color: #2b8bcc;
        color: #fff;
    }

    .btn-st-grade:hover,
    .btn-st-grade.active:hover {
        color: #fff;
    }


/* == Form dropdown custom == */

.box-dropdown-holder {
    display: block;
    width: 100%;
}

.box-dropdown-inner {
    width: 100%;
    float: left;
    position: relative;
}


/* == btn == */

.dropdown-button {
    width: 100%;
    height: 50px;
    background: #000;
    position: absolute;
    border-radius: 6px;
    z-index: 1;
    background: transparent;
    border: 0;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

.box-layout-text {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 0 50px 0 65px;
    border-radius: 6px;
    background-color: #ffffff;
    float: left;
    display: block;
    position: relative;
    height: 50px;
    cursor: pointer;
}

    .box-layout-text.box-layout {
        background-color: #fcfcfc;
    }

    .box-layout-text.box-layout-nopadding {
        padding: 0 50px 0 0;
    }

    .box-layout-text.box-layout-bg {
        background-color: #fcfcfc;
    }

.box-layout-bg {
    background-color: #fcfcfc;
}


/*     .box-layout-text.box-layout-bg.box-text-color .box-layout-default {
        color: #ccc;
    }
    .box-layout-text.box-layout-bg.box-text-color.active .box-layout-default {
        color: #767679;
    } */

.box-text-color.active .text {
    color: #767679;
}

.box-text-color .text {
    color: #ccc;
}


/*     .box-layout-paragraph .text.active {
        color: #ccc;
    } */

.box-layout-inner {
    position: relative;
}

.box-layout-img {
    width: 38px;
    height: 25px;
    float: left;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}

.box-layout-circle {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.box-dropdown-circle {
    height: 35px !important;
    width: 35px !important;
    border-radius: 50%;
    overflow: hidden;
}

.box-layout-paragraph {
    float: left;
    display: flex;
    padding: 0 15px;
    align-items: center;
    justify-content: flex-start;
    /* height: 40px; */
    font-size: 14px;
    color: #767679;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 14px;
    width: 100%;
}

    .box-layout-paragraph .text {
        color: #ccc;
    }

        .box-layout-paragraph .text.active {
            color: #767679;
        }

.box-dropdown-inner.active .text {
    color: #767679;
}

.box-layout-arrow {
    width: 38px;
    height: 38px;
    float: right;
    display: block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 0 6px 6px 0;
}

    .box-layout-arrow > ._i {
        float: left;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #767679;
    }

.box-layout-img > img {
    height: 100%;
    max-width: 100%;
    float: left;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.box-layout-menu {
    width: 100%;
    position: absolute;
    top: 50px;
    margin-top: 2.5px;
    background-color: #fcfcfc;
    z-index: 1;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

.box-dropdown-item {
    width: 100%;
    float: left;
    position: relative;
}

.box-dropdown-element {
    width: 100%;
    float: left;
    padding: 0 0 0 65px;
    position: relative;
    height: 50px;
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
}

.box-dropdown-item:last-child .box-dropdown-element {
    border: 0;
}

.box-dropdown-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    margin-top: 2px;
    z-index: 2;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    /* padding: 15px; */
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
}

.box-dropdown-menu {
    display: none;
}

.box-dropdown-inner.active .box-dropdown-menu {
    /*         display: block; */
}

.box-dropdown-menu.show {
    display: block;
}

.box-dropdown-img {
    left: 15px;
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 25px;
    width: 38px;
}

    .box-dropdown-img > img {
        height: 100%;
        max-width: 100%;
        float: left;
    }

.box-dropdown-desc {
    height: 40px;
    padding: 0 15px;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    color: #767679;
    font-size: 14px;
    line-height: 14px;
    width: 100%;
}

.box-dropdown-element.box-dropdown-nopadding {
    padding: 0 !important;
}


/* == label == */

.label-lightyellow {
    background-color: #6ab04d;
    padding: 6px 19px;
    display: block !important;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
}


/* == empty space == */

.empty-space-40 {
    margin-bottom: 40px;
}

.empty-space-30 {
    margin-bottom: 30px;
}

.empty-space-20 {
    margin-bottom: 20px;
}


/* == layout height == */

.dropdown-button.dropdown-button-height {
    height: 80px;
}

.box-dropdown-menu.box-dropdown-menuheight {
    max-height: 240px;
}

.box-layout-text.box-layout-height {
    height: 80px;
}

.box-layout-paragraph.box-layout-height {
    display: block;
}

.text.text-subtitle.text-height {
    color: #bbbbbb;
    font-size: 14px;
    width: 100%;
}

.text.text-height {
    display: block;
    font-size: 14px;
    color: #767679;
}

.box-layout-img.box-layout-imgheiaght {
    height: 50px;
    width: 50px;
}

.box-dropdown-element.box-dropdown-elementheight {
    height: 80px;
}

.box-dropdown-img.box-dropdown-imgheight {
    height: 45px !important;
    width: 45px !important;
}

.box-dropdown-desc.box-dropdown-descheight {
    display: block;
}

.text.text-height {
    width: 100%;
    font-size: 14px;
}


/* ===================================================================================== */

@media screen and (max-width: 2000px) {
}

@media screen and (max-width: 1790px) {
}

@media screen and (max-width: 1600px) {
    .btn.btn-primary.btn-upload-image {
        width: auto;
        max-width: fit-content;
        min-width: max-content;
    }
}

@media screen and (max-width: 1470px) {
}

@media screen and (max-width: 1440px) {
    #profile {
        height: 170px;
        width: 170px;
        border: 7.5px solid #f0f1f3;
    }
}

@media screen and (max-width:1280px) {
    /* == profile == */
    #profile {
        /* height: 140px; */
        /* width: 140px; */
    }
    /* == box default == */
    /*     .box-default-inner {
        padding: 15px 15px 0 15px;
    } */
}

@media screen and (max-width:1279px) {
    .profile-info {
        padding: 50px 0 0 0;
    }
}

@media screen and (max-width: 1094px) {
    .profile-info {
        padding: 0px 0 0 0;
    }

    .btn.btn-primary.btn-upload-image {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

@media screen and (max-width:991px) {
    /* == label == */
    .label-lightyellow {
        font-size: 13px;
    }
    /* */
    .btn.btn-bank-circle {
        height: 35px;
        width: 35px;
    }

        .btn.btn-bank-circle ._i {
            font-size: 17px;
        }

    .box-bank-btn {
        right: -15px;
        top: -5px;
    }

    .box-bank-content {
        padding: 0 115px 0 50px;
    }

    .box-default-inner {
        padding: 15px 20px 0 10px;
    }
}

@media screen and (max-width:768px) {
}

@media screen and (max-width: 767px) {
    /* == account == */
    .form-info-paragraph {
        font-size: 12px;
    }

    .text-paragraph > p {
        font-size: 12px;
    }
    /* == Dropdown == */
    .box-layout-text {
        height: 40px;
        font-size: 13px;
    }

    .box-dropdown-desc .text {
        font-size: 12px;
    }

    .box-dropdown-desc {
        padding: 0 0 0 5px;
    }

    .dropdown-button {
        height: 40px;
        font-size: 13px;
    }

    .box-layout-text {
        padding: 0 40px 0 45px;
    }

    .box-layout-img {
        height: 18px;
        width: 27px;
        left: 15px;
    }

    .box-layout-circle {
        height: 25px;
        width: 25px;
        border-radius: 50%;
    }

    .box-dropdown-circle {
        height: 25px !important;
        width: 25px !important;
    }

    .box-layout-paragraph {
        font-size: 13px;
        padding: 0 5px 0 15px;
    }

    .box-layout-arrow > ._i {
        font-size: 16px;
    }

    .box-dropdown-element {
        height: 40px;
        padding: 0 0 0 55px;
    }

    .box-dropdown-img {
        height: 18px;
        width: 27px;
        left: 15px;
    }

    .box-dropdown-img {
    }

    .box-dropdown-desc {
        font-size: 12px;
    }

    .box-bank-title {
        font-size: 12px;
    }

    .box-bank-subtitle {
        font-size: 12px;
    }

    .box-dropdown-nopadding {
        padding: 0 10px 0 10px !important;
    }
    /* == box layout height == */
    .box-layout-img.box-layout-imgheiaght {
        height: 25px;
        width: 25px;
    }

    .box-dropdown-img.box-dropdown-imgheight {
        height: 25px !important;
        width: 25px !important;
    }

    .text.text-height {
        font-size: 12px;
    }

    .text.text-subtitle.text-height {
        font-size: 11px;
        line-height: 11px;
    }
    /* == box default == */
    .box-default-inner {
        padding: 15px 15px;
    }

    .box-bank-content {
        min-height: 75px;
    }
    /* == box btn == */
    .box-bank-btn {
        position: absolute;
        top: -10px;
        right: -20px;
        width: 50px;
    }

    .edit-bank-wrap .form-group {
        margin-bottom: 5px !important;
    }

    .box-bank-text {
        text-align: left;
    }
    /* == label == */
    .label-lightyellow {
        font-size: 12px;
        padding: 0 5px;
        height: 25px;
        line-height: 25px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* == btn == */
    .btn.btn-bank-circle {
        height: 25px;
        width: 25px;
        margin: 0 3px 5px;
        text-align: center;
    }

        .btn.btn-bank-circle ._i {
            font-size: 13px;
            top: 47%;
        }
    /* == bank img == */
    .box-bank-img {
        width: 45px;
        height: 45px;
    }
}

@media screen and (max-width:575px) {
    .label-num {
        display: none;
    }

    .profile-image {
        width: 100%;
        float: left;
        overflow: hidden;
    }

    .setting-ele.profile-picture {
        display: block;
        margin-bottom: 15px;
        float: left;
    }

    .btn-upload-image {
        height: 40px;
        font-size: 12px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .profile-info .title {
        font-size: 10px;
        text-align: center;
    }

    .model {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .profile-image .table {
        padding: 20px 20px 5px 20px;
    }

    #profile label {
        font-size: 10px;
    }
}

@media screen and (max-width: 480px) {
    /* == == */
    .box-bank-text {
        padding-left: 0;
        padding-right: 0;
    }

    .box-layout-paragraph {
        font-size: 12px;
        line-height: 12px;
    }

    .box-bank-content {
        padding: 0 50px 0 50px;
    }

    .box-bank-img {
        width: 40px;
        height: 40px;
    }
    /* == box bottom == */
    .box-bottom .text-info {
        font-size: 12px;
        line-height: 13px !important;
    }

    .box-bottom {
        padding: 10px 0;
    }

    .social-title {
        font-size: 12px;
    }

    .sitemap-link {
        font-size: 14px;
        text-align: left;
        justify-content: center;
    }

    .widgets-icon {
        font-size: 12px;
        line-height: 30px;
    }

        .widgets-icon > .icon {
            height: 35px;
            width: 35px;
        }

            .widgets-icon > .icon > img {
                float: left;
            }
}

@media screen and (max-width: 380px) {
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 320px) {
}

.edit-bank-wrap {
    display: inline-block;
    display: none;
}

.default-bank.active .edit-bank-wrap {
    display: block;
}


/* == status == */

.default-bank .btn-st-success {
    display: none;
}

.default-bank.active .btn-st-success {
    display: block;
}

.default-bank.active .btn-st-edit {
    display: none;
}

.default-bank .btn-st-edit {
    display: block;
}


/* == box panel == */

.box-panel {
    background-color: #fff;
    border-radius: 6px;
    width: 100%;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    padding: 35px 50px 35px 50px;
    position: relative;
}

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

.box-panel-header {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0;
    position: relative;
    padding: 0 50px 0 0;
}

    .box-panel-header .header-title {
        font-size: 21px;
        font-weight: 700;
        margin: 0;
        color: #000;
        font-family: var(--fontWeightBold);
        width: 100%;
        padding-right: 40px;
        text-align: left;
        justify-content: flex-start;
    }


/* == ribbon == */

.box-panel-label {
    position: absolute;
    top: 45px;
    right: 50px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    z-index: 1;
}

.box-label-item {
    width: 30px;
    height: 30px;
    background-color: #ecf0f1;
    z-index: 1;
    cursor: pointer;
    /* border-bottom: 18px solid white; */
    cursor: pointer;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    border-radius: 50%;
}

    .box-label-item > .image {
        color: #fff;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 22px;
        float: left;
    }

    .box-label-item::after {
        content: " ";
        position: absolute;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }


/*     .box-label-item::after {
        height: 0;
        width: 0;
        bottom: -15px;
        left: 0;
        border-left: 21px solid #ecf0f1;
        border-right: 21px solid #ecf0f1;
        border-bottom: 15px solid transparent;
        cursor: pointer;
    } */

.box-panel-label.grade {
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

    .box-panel-label.grade .box-label-item {
        background-color: #ffb129;
    }


/*  .box-panel-label.grade .box-label-item::after {
        border-left: 21px solid #ffb129 !important;
        border-right: 21px solid #ffb129 !important;
    }
   .box-panel-label:hover .box-label-item {
        background-color: #c4c6c6;
    }
    .box-panel-label:hover .box-label-item::after{
        border-left: 21px solid #c4c6c6;
        border-right: 21px solid #c4c6c6;
    }*/

.btn.width {
    width: 195px;
}


/* == box sm == */

.box-panel.box-panel-sm {
    padding: 15px 30px 15px 30px;
}

.box-panel-header .header-title.header-title-sm {
    font-size: 18px;
}

.box-panel-header.box-panel-header-sm {
    height: 50px;
    margin-bottom: 0;
}

.box-panel-label-sm {
    right: 30px;
}

.box-label-item-sm {
    width: 42px;
    height: 42px;
}

    .box-label-item-sm > .image {
        height: 23px;
    }

    .box-label-item-sm::after {
        border-left: 21px solid #ecf0f1;
        border-right: 21px solid #ecf0f1;
        border-bottom: 12px solid transparent;
        bottom: -12px;
    }

.box-panel-label.box-panel-label-sm.grade .box-label-item::after {
    border-left: 20px solid #ffb129;
    border-right: 20px solid #ffb129;
}


/* == button == */

.btn.btn-default {
    color: #fff;
    background-color: #ecf0f1;
    border: 1px solid #ecf0f1;
}

    .btn.btn-default:hover,
    .btn.btn-default:focus {
        color: #fff;
        background-color: #d0d1d1;
        border: 1px solid #d0d1d1;
        transition: all 0.25s;
    }

.btn.disabled {
    color: #ccc !important;
}

    .btn.disabled:hover,
    .btn.disabled:focus {
        color: #fff !important;
        background-color: #ecf0f1 !important;
        border: 1px solid #ecf0f1 !important;
        cursor: default;
    }

.btn.btn-blue {
    color: #fff;
    background-color: #3598db;
    border: 1px solid #3598db;
}

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


/* ===================================================================================== */

@media screen and (max-width: 2000px) {
}

@media screen and (max-width: 1790px) {
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1470px) {
}

@media screen and (max-width: 1440px) {
    .box-default-sm .box-panel-label {
        right: 15px;
    }
}

@media screen and (max-width:1280px) {
    /* == label == */
    .box-panel-label {
        /* right: 15px; */
        top: 25px;
    }

    .box-panel {
        padding: 20px;
    }

    .box-label-item > .image {
        height: 20px;
    }
    /* == ribbon sm == */
    .box-panel.box-panel-sm {
        padding: 15px 30px 20px 30px;
    }

    .box-panel-label.box-panel-label-sm.grade .box-label-item::after {
        border-left: 17.5px solid #ffb129;
        border-right: 17.5px solid #ffb129;
    }

    .box-panel-label.box-panel-label-sm:hover .box-label-item::after,
    .box-panel-label.box-panel-label-sm:focus .box-label-item::after {
        border-left: 17.5px solid #ecf0f1;
        border-right: 17.5px solid #ecf0f1;
    }

    .box-panel-label.box-panel-label-sm.grade .box-label-item::after {
        border-left: 17.5px solid #ffb129;
        border-right: 17.5px solid #ffb129;
    }
    /* == round == */
    .box-default-sm {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
}

@media screen and (max-width:1279px) {
}

@media screen and (max-width: 1170px) {
}

@media screen and (max-width:991px) {
    /* == box default == */
    .box-default {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .box-panel-header {
        height: 60px;
    }
    /* == box sm == */
    .box-default-sm {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* == == */
    .box-panel-label {
        top: 33px;
        right: 15px;
    }
}

@media screen and (max-width:768px) {
}

@media screen and (max-width: 767px) {
    /* == ribbon == */
    .box-panel-header .header-title {
        font-size: 16px !important;
    }

    .box-panel-header {
        height: 40px;
    }

    .box-panel {
        margin: 0;
    }

    .box-label-item {
        width: 28px;
        height: 28px;
    }

        .box-label-item > .image {
            height: 18px !important;
        }

    .box-panel-label {
        top: 20px;
        right: 15px;
    }
    /* == box default == */
    .box-default {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .box-card-header.box-card-nomargin {
        margin: 0;
    }

    .btn-info.width {
        height: 40px;
        width: 100%;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* == box sm == */
    .box-default-sm {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .box-panel-label.box-panel-label-sm.grade .box-label-item::after {
        border-left: 15px solid #ffb129;
        border-right: 15px solid #ffb129;
    }

    .box-panel-label.box-panel-label-sm:hover .box-label-item::after,
    .box-panel-label.box-panel-label-sm:focus .box-label-item::after {
        border-left: 15px solid #ecf0f1;
        border-right: 15px solid #ecf0f1;
    }

    .box-panel-label.box-panel-label-sm.grade .box-label-item::after {
        border-left: 15px solid #ffb129;
        border-right: 15px solid #ffb129;
    }
    /* == button == */
    .btn-lg-height {
        height: 40px;
    }
}

@media screen and (max-width: 480px) {
    /* == ribbon == */
    .box-panel-header .header-title {
        font-size: 14px !important;
    }
}


/* == box header == */

.header-title {
    font-family: var(--fontWeightBold);
}

.box-header-center {
    display: block;
    width: 100%;
    height: 50px;
    background-color: #ad060e;
    border-radius: 15px 15px 0 0;
    position: relative;
    padding: 0 5px;
    position: relative;
}

    .box-header-center.box-icon-left {
        justify-content: flex-start;
    }

.box-header .prev {
    position: absolute;
    left: 0;
}

.header-title-center {
    color: #fff;
    font-size: 20px;
    margin: 0;
    display: block;
    float: left;
    word-break: break-word;
    font-family: var(--fontWeightBold);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    float: left;
}

.box-header.box-header-flat {
    border-radius: 0;
}

.box-header-icon.back-to-show-xs {
    display: block;
}


/* == modal == */

.modal .box-body-block.box-body-height {
    height: auto;
}

.modal-footer > .btn {
    border-radius: 6px;
}

.modal .predict-list.predict-list-mobile {
    display: block;
}


/* == == */

.panelflex-display {
    width: 100%;
    background-color: #fff;
    padding: 30px 0 15px 0;
    display: block;
    float: left;
    color: #999;
    font-size: 16px;
}

.check-true,
.check-false {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-bottom: 15px;
}

    .check-true > .icon {
        font-size: 55px;
        color: #6ab04d;
    }

    .check-false > .icon {
        font-size: 55px;
        color: #ad060e;
    }

.panelflex-title {
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #6ab04d;
}

    .panelflex-title.true {
        color: #6ab04d;
    }

    .panelflex-title.false {
        color: #ad060e;
    }


/* == panel dashed == */

.panel-dashed {
    padding: 15px 0;
    text-align: center;
    font-size: 18px;
    margin-bottom: 0;
    border-top: 1px dashed #ccc;
    border-bottom: 0;
    background-color: #fff;
    display: inline-block;
    width: 100%;
    float: left;
    height: 55px;
}

.plain-text {
    color: #000;
    font-size: 16px;
    line-height: 16px;
}

.text-mediumgray {
    color: #999;
}


/* == panel banner == */

.panel-banner {
    width: 100%;
    float: left;
    display: block;
    height: 120px;
    position: relative;
    padding: 0;
    margin: 0;
    background-color: #000;
    overflow: hidden;
}

    .panel-banner > .image {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


/* == box flex header == */

.box-hilight {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
    background-color: #0a1a1a;
    width: 100%;
    position: relative;
}

    .box-hilight.box-hilight-sm {
        font-size: 15px;
        line-height: 15px;
        position: relative;
        padding: 0 15px 0 15px;
        text-align: left;
    }

.box-header-block {
    position: relative;
    width: 100%;
    display: block;
    float: left;
    overflow: hidden;
}

.box-header-flexitem {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 15px;
    background-color: #000;
    color: #fff;
    width: 100%;
    border-right: 1px solid #353535;
}

    .box-header-flexitem:last-child {
        border: 0;
    }

    .box-header-flexitem.flexitem-lg {
        width: 60%;
    }

    .box-header-flexitem.flexitem-ml {
        width: 40%;
    }

    .box-header-flexitem.flexitem-md {
        width: 33.3333333%;
    }

    .box-header-flexitem.flexitem-sm {
        width: 20%;
    }


/* == breadcrumbs  == */

.section-breadcrumb.bg-white li {
    color: #ccc;
}

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

        .section-breadcrumb.bg-white li a .icons {
            color: #ccc;
        }

        .section-breadcrumb.bg-white li a:hover,
        .section-breadcrumb.bg-white li a:focus {
            color: #000 !important;
        }


/* == box flex body == */

.box-body-block {
    position: relative;
    width: 100%;
    display: block;
    float: left;
    border: 3px solid #ffffff;
    border-radius: 0 0 15px 15px;
    height: 231px;
    overflow-y: auto;
    background-color: #ffffff;
}

    .box-body-block.no-radius-bottom {
        border-radius: 0;
    }

.box-bodyitem-block {
    background-color: #fff;
    display: block;
    width: 100%;
    height: 50px;
    position: relative;
    overflow: hidden;
}

    .box-bodyitem-block:nth-child(even) {
        background-color: #f9f9f9;
    }

.box-body-flexitem {
    width: 100%;
    height: 50px;
    background-color: transparent;
    font-size: 14px;
    color: #898989;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 14px;
    font-family: var(--fontWeightBold);
    font-family: var(--fontWeightMedium);
    font-family: var(--fontWeightLigh);
    font-weight: 500;
    padding: 0 10px;
    float: left;
    word-break: break-word;
    position: relative;
}

    .box-body-flexitem.flexitem-lg {
        width: 60%;
        float: left;
    }

.flex-start {
    justify-content: flex-start;
    font-size: 13px;
}

.box-body-flexitem.flexitem-sm {
    width: 20%;
    float: left;
}

.box-bodyitem-block:nth-child(odd) {
    background-color: #fff;
}

.box-body-flexitem.flexitem-icon {
    padding: 0 20px 0 20px;
}

.flexitem-padding {
    padding: 0 25px 0 15px;
}


/* == flex item fluid == */

.box-body-flexitem.flexitem-fluid {
    width: 100%;
}

.box-bodyitem-block.block-bg {
    background-color: #f9f9f9;
}

    .box-bodyitem-block.block-bg:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .box-bodyitem-block.block-bg:nth-child(even) {
        background-color: #fff;
    }


/* == icon status == */

.icon-status {
    float: left;
    font-size: 24px;
    margin: 0 15px 0 0;
}

.status-success {
    color: #27ae61;
    font-size: 24px;
}

.status-error {
    font-size: 24px;
    color: #ad060e;
}


/* == btn == */

.box-header-icon {
    width: 50px;
    height: 50px;
    position: relative;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.box-header-center.box-header-icons {
    padding: 0 50px;
}

.box-header-icon > .icon {
    color: #fff;
    font-size: 24px;
    float: left;
    top: 50%;
    transform: translateY(-50%);
}

.box-header-icon:hover .icon {
    color: #d3d3d3;
}

.box-header-center.box-header-icons .box-header-icon {
    display: none;
}


/* == text == */

.text-space {
    margin: 0 10px;
}

.text-lightgray {
    color: #ccc;
    font-weight: 100;
    font-family: var(--fontWeightMedium);
}


/* == flex header == */

.box-header-flexitem.flexitem-xl {
    width: 80%;
}

.box-header-flexitem.flexitem-ss {
    width: 20%;
}


/* == flex body == */

.box-body-flexitem.flexitem-xl {
    width: 80%;
}

.box-body-flexitem.flexitem-md {
    width: 33.333333%;
}

.box-body-flexitem.flexitem-ss {
    width: 20%;
}


/* == box medium height == */

.box-body-block.box-body-mediumheight {
    height: 538px;
}


/* == box height more == */

.box-body-block.box-body-height {
    height: 768px;
}


/* == box height == */

.box-body-block.box-body-heightest {
    height: 717px;
}


/* == heigher == */

.box-body-block.box-body-heigher {
    height: 975px;
}


/* == heightest == */

.box-body-block.box-body-heighmore {
    height: 680px;
}


/* == box no radius == */

.box-body-block.box-no-radius {
    border-radius: 0;
}


/* == icon == */

.box-hilight-check {
    cursor: pointer;
}

    .box-hilight-check > .uncheck {
        display: block;
    }

    .box-hilight-check > .checked {
        display: none;
    }

    .box-hilight-check.active .checked {
        display: block;
    }

    .box-hilight-check.active .uncheck {
        display: none;
    }

.icon-sm {
    font-size: 22px;
    position: relative;
    top: -2px;
    margin: 0 15px 0 5px;
    cursor: pointer;
}

.icon-md {
    font-size: 20px;
    margin: 0 5px 0 0;
}


/* == checklist == */

.enter-money {
}

.checklist-list {
    width: 100%;
    position: relative;
    height: 50px;
    padding: 0 0 0 10px;
    float: left;
}

    .checklist-list input[type='checkbox'] + label {
        position: relative;
        left: 0;
        top: 0;
        height: 50px;
        width: 100%;
        display: block;
        float: left;
        transition: color 250ms cubic-bezier(.4, .0, .23, 1);
        background-color: #fff;
    }

    .checklist-list input[type='checkbox'] {
        opacity: 0;
        display: none;
    }

        .checklist-list input[type='checkbox'] + label > span {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }

        .checklist-list input[type='checkbox'] + label > p {
            margin: 0;
            position: absolute;
            width: 100%;
            padding: 0 0 0 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 14px;
            line-height: 14px;
            color: #898989;
        }

.checklist-row {
    width: 100%;
    float: left;
    border-bottom: 1px solid #f5f5f5;
}

.enter-money.checklist-md {
    width: 30%;
}

.checklist-list.checklist-lg {
    width: 60%;
}

.checklist-list input[type='checkbox'] + label:hover > span,
.checklist-list input[type='checkbox']:focus + label > span {
    background: rgba(255, 255, 255, .1);
}

.checklist-list input[type='checkbox']:checked + label > ins {
    height: 100%;
}

.checklist-list input[type='checkbox']:checked + label > span {
    border: 7px solid #ad060e;
}

    .checklist-list input[type='checkbox']:checked + label > span:before {
        content: "";
        position: absolute;
        animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;
    }

@keyframes shrink-bounce {
    0% {
        transform: scale(1);
    }

    33% {
        transform: scale(.85);
    }

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

@keyframes checkbox-check {
    0% {
        width: 0;
        height: 0;
        border-color: #212121;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    33% {
        width: .2em;
        height: 0;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    100% {
        width: .2em;
        height: .5em;
        border-color: #212121;
        transform: translate3d(0, -.5em, 0) rotate(45deg);
    }
}


/* == label == */

.noti-label {
    height: 27px;
    min-width: 27px;
    border-radius: 50%;
    background-color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 15px;
    color: #ad060e;
    top: 50%;
    transform: translateY(-50%);
}


/* == input filed == */

.input-number {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    height: 85px;
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 3px;
    background-color: #ffffff;
    padding: 0px 120px 0px 0px;
}

.field-number {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
    height: 100%;
    padding: 0 0 0 30px;
    font-size: 28px;
    color: #000;
    font-weight: 300;
    text-align: center;
    border: 0;
    outline: none;
    background-color: #fff;
    font-weight: 700;
}

    .field-number::-webkit-input-placeholder {
        color: #ccc;
        font-size: 23px;
        font-family: var(--fontWeightLight);
        font-weight: 400;
    }

    .field-number:-moz-placeholder {
        /* Firefox 18- */
        color: #ccc;
        font-size: 23px;
        font-family: var(--fontWeightLight);
        font-weight: 400;
    }

    .field-number::-moz-placeholder {
        /* Firefox 19+ */
        color: #ccc;
        font-size: 23px;
        font-family: var(--fontWeightLight);
        font-weight: 400;
    }

    .field-number:-ms-input-placeholder {
        color: #ccc;
        font-size: 23px;
        font-family: var(--fontWeightLight);
        font-weight: 400;
    }

    .field-number:focus::-webkit-input-placeholder {
        color: transparent;
    }

.icons-keyboard {
    position: absolute;
    height: 100%;
    width: 120px;
    right: 0;
    top: 0;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
}

    .icons-keyboard > .icon {
        font-size: 3rem;
        float: left;
        width: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        color: #dedede;
    }


/* == enter money == */

.enter-money {
    width: auto;
    float: left;
    position: relative;
    padding: 0 0 0 50px;
}

.enter-money-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
}

    .enter-money-icon > .icon {
        font-size: 23px;
        color: #ccc;
        position: relative;
        top: -1px;
    }

    .enter-money-icon > .text {
        /* font-size: 14px; */
        color: #ccc;
        margin: 0 5px;
    }

.enter-money-field {
    float: left;
    max-width: 130px;
    overflow: hidden;
}

.money-field {
    outline: none;
    height: 50px;
    padding: 0 5px;
    width: 100%;
    border: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    line-height: 15px;
    color: #898989;
}

    .money-field::-webkit-inner-spin-button {
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }

    .money-field::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        -moz-appearance: textfield !important;
    }

input.money-field[type="number"] {
    -moz-appearance: textfield;
}


/* == input money placeholher */

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

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

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


/* == tab options == */

.nav-options {
    height: 50px;
    background-color: #ad060e;
    background-color: #8d0008;
    border-radius: 15px 15px 0 0;
    width: 100%;
    float: left;
    position: relative;
    border: 0;
    overflow: hidden;
}

    .nav-options > li {
        width: 50%;
        float: left;
        position: relative;
    }

        .nav-options > li > a {
            display: flex;
            width: 100%;
            float: left;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 20px;
            line-height: 20px;
            font-family: var(--fontWeightBold);
            height: 50px;
            position: relative;
        }

        .nav-options > li.active > a {
            background-color: #ad060e;
        }

            .nav-options > li.active > a::after {
                width: 0;
                height: 0;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-left: 9px solid #000000;
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                bottom: -5px;
                transform: rotate(-90deg);
            }

.box-header-flexitem.flexitem-bgsoft {
    background-color: #2d2d2d;
    border-right: 1px solid #0a1a1a;
}

    .box-header-flexitem.flexitem-bgsoft:last-child {
        border-right: 0;
    }


/* == btn == */

.btn-group > .btn {
    margin: 0 7.5px 0 7.5px !important;
}

    .btn-group > .btn.btn-radius {
        border-radius: 25px !important;
    }

.btn.btn-primary {
    height: 50px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    max-width: 230px !important;
    color: #000;
    background-color: #ccc;
    border: 1px solid #ccc;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
}

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

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

.box-footer-block {
    height: 108px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8d0008;
    border-radius: 0;
    width: 100%;
    float: left;
}

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

.box-footer-block {
    padding: 0px 15px;
}

.btn.btn-red {
    color: #fff;
    border: 1px solid #ad060e;
    background-color: #ad060e;
}

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


/* == box bottom == */

.custom-control-label.label-package::before {
    width: 20px;
    height: 20px;
    left: -1.75rem;
}

.custom-control-label.label-package::after {
    width: 20px;
    height: 20px;
    top: 2px;
    left: -1.75rem;
}


/* == box arrow == */

.box-arrow-show-xs {
    display: none;
}


/* == icons == */

.icon-more {
    width: 22px;
    height: 100%;
    background-color: transparent;
    position: absolute;
    right: 1px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .icon-more > .icon {
        font-size: 24px;
        color: #ccc;
    }

    .icon-more:hover .icon {
        color: #000;
    }


/* == box expand == */

.box-expand {
    position: absolute;
    right: 0;
    height: 50px;
    float: left;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    right: -100%;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    -ms-transition: all 0.35s;
    transition: all 0.35s;
}

.more-expand.active .box-expand {
    right: 0;
}

.box-expand-sm {
    width: 25px !important;
}

.box-expand-item {
    background-color: #0a1a1a;
    float: left;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #292929;
    cursor: pointer;
    transition: all 0.25s;
}

    .box-expand-item.box-expand-md {
        width: 50px;
    }

    .box-expand-item > .icon {
        color: #898989;
        font-size: 17px;
        transition: all 0.25s;
    }

.box-expand-bgsoft {
    background-color: #2d2d2d;
}

.box-expand-item:last-child {
    border: 0;
}

.box-expand-item:hover {
    /* background-color: #ad060e; */
}

    .box-expand-item:hover .icon {
        color: #ad060e;
    }

.box-expand-bgsoft:hover {
    background-color: #292929;
}

    .box-expand-bgsoft:hover .icon {
        color: #ccc;
    }


/* == lotto slider == */

.box-slider {
    outline: none !important;
    box-shadow: none !important;
}

.lotto-slider .slick-next,
.lotto-slider .slick-prev {
    height: 100px;
    width: 100px;
    background-color: rgba(0, 0, 0, 0.19);
    z-index: 1;
    top: 46.5%;
    border-radius: 100%;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    -ms-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    border: 0;
    outline: none;
    color: transparent;
}

.lotto-slider {
    overflow: hidden;
}

    .lotto-slider .slick-prev {
        left: -75px;
    }

        .lotto-slider .slick-prev:hover {
            left: -50px;
        }

    .lotto-slider .slick-next {
        right: -75px;
    }

        .lotto-slider .slick-next:hover {
            right: -50px;
        }

        .lotto-slider .slick-next:before,
        .lotto-slider .slick-prev:before {
            content: ". ";
            color: transparent;
        }

    .lotto-slider .slick-prev:before {
        background-image: url("../images/baseline_keyboard_arrow_left_white_18dp.png");
        background-repeat: no-repeat;
        height: 43px;
        width: 43px;
        background-position: center center;
        background-size: cover;
        right: 9px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
    }

    .lotto-slider .slick-next:before {
        background-image: url("../images/baseline_keyboard_arrow_right_white_18dp.png");
        background-repeat: no-repeat;
        height: 43px;
        width: 43px;
        background-position: center center;
        background-size: cover;
        left: 9px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
    }


/* == keyboard == */

.keypad {
    width: 100%;
    margin: 0;
    float: left;
}

.keypad-display {
    margin: 0;
    border: 0;
}

.keypad-input {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 42px;
    line-height: 44px;
    font-weight: 300;
    background: #ad060e;
    background-color: #fff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid white;
    outline: none;
    color: #0a1a1a;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    height: 85px;
    border: 0;
}

input.keypad-input[type="number"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield;
}

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

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

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

.keypad-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.btn-display {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 85px;
    background-color: #fff;
}

.btn-key {
    position: relative;
    border: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    font-size: 42px;
    color: #ccc;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keypad-keyboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #353535;
    border-radius: 8px;
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, 0.3);
    margin-top: 0;
    z-index: 1;
    position: absolute;
    width: 100%;
}

.keypad-wrpper {
    display: none;
}

    .keypad-wrpper.show {
        display: block;
    }

.keypad-key {
    width: 33.33%;
}

.keypad-button {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    outline: none;
    font-size: 30px;
    line-height: 30px;
    color: white;
    font-weight: 300;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    height: 65px;
    float: left;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

    .keypad-button:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 100px;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.3);
        transform-origin: center;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    .keypad-button.active:before {
        animation: buttonPress 0.5s linear forwards;
    }

@keyframes buttonPress {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}


/* == btn create lasted == */

.grid-content-inner {
    width: 100%;
    float: left;
    position: relative;
}

    .grid-content-inner.open-package .lotto-slider {
        display: block;
    }

    .grid-content-inner .lotto-slider {
        display: none;
    }

.btn.btn-tabs {
    display: flex;
    width: 50%;
    float: left;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    font-family: var(--fontWeightBold);
    height: 50px;
    position: relative;
    background-color: #8d0008;
}

    .btn.btn-tabs.active {
        background-color: #ad060e;
    }

    .btn.btn-tabs.btn-packages {
        border-radius: 15px 0 0 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    .btn.btn-tabs.btn-predict {
        border-radius: 0 15px 0 0;
        position: absolute;
        left: 50%;
        top: 0;
        right: 0;
    }

        .btn.btn-tabs.btn-packages.active::after,
        .btn.btn-tabs.btn-predict.active::after {
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid #000000;
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: rotate(-90deg);
        }

.grid-content-inner.open-package .predict-content {
    display: none;
}

.package-content {
    margin-top: 50px;
}


/* --- start --- this style is constant ---------- */

@keyframes slider-key-next {
    0% {
        left: 100%;
    }

    100% {
        left: 0;
    }
}

@keyframes slider-key-left {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

@keyframes slider-key-previous {
    0% {
        left: -100%;
    }

    100% {
        left: 0;
    }
}

@keyframes slider-key-right {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}

.slider > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
    min-height: 1000px;
    height: auto;
    padding: 0 !important;
}

    .slider > ul > li {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        visibility: hidden;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        float: left;
        height: auto;
    }

        .slider > ul > li.active {
            visibility: visible;
            left: 0;
        }

        .slider > ul > li.left {
            animation-name: slider-key-left;
        }

        .slider > ul > li.next {
            animation-name: slider-key-next;
        }

        .slider > ul > li.right {
            animation-name: slider-key-right;
        }

        .slider > ul > li.previous {
            animation-name: slider-key-previous;
        }


/* --- end --- this style is constant ---------- */


/* -- your style here -- */

.slider {
    width: 100%;
    float: left;
    position: relative;
}

    .slider > button {
        transition: 0.3s;
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        width: 100px;
        height: 100px;
        background-color: #bebebe;
        opacity: 0.5;
        border: 0;
        outline: none;
        padding: 0;
        cursor: pointer;
        border-radius: 100%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center;
    }

        .slider > button:nth-child(3) {
            right: -70px !important;
        }

            .slider > button:nth-child(3):hover {
                right: -40px !important;
            }

        .slider > button:nth-child(2) {
            left: -70px !important;
        }

            .slider > button:nth-child(2):hover {
                left: -40px !important;
            }

        .slider > button:hover {
            opacity: 0.75;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        .slider > button > i {
            color: #fff;
            font-size: 27px;
            top: 5px;
        }

        .slider > button:nth-child(2) > i {
            right: -15px;
            position: relative;
        }

        .slider > button:nth-child(3) > i {
            right: 12px;
            position: relative;
        }

    .slider > ul > li > img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .slider > ul > li {
        padding: 0;
    }

        .slider > ul > li h1,
        .slider > ul > li p {
            position: relative;
            padding: 0 15%;
            color: #fff;
            font-family: sans-serif;
        }


/* == btn == */

.btn-show-xs {
    display: none !important;
}

.label-package {
    line-height: 24px;
}


/* == mobile size == */

.btn.btn-tabs-mobile {
    display: none !important;
}

.btn.btn-tabs-mobile {
    width: 100%;
    display: block;
    float: left;
    padding: 0;
    border-radius: 6px;
}

    .btn.btn-tabs-mobile > .btn.btn-tabs {
        width: 50%;
        float: left;
        border-radius: 0;
        margin-bottom: -7.5px;
        height: 50px;
        font-size: 16px;
        line-height: 16px;
    }

        .btn.btn-tabs-mobile > .btn.btn-tabs.active::after {
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid #f5f6f8;
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: rotate(-90deg);
        }

        .btn.btn-tabs-mobile > .btn.btn-tabs:nth-child(1) {
            border-radius: 6px 0 0 6px;
        }

        .btn.btn-tabs-mobile > .btn.btn-tabs:nth-child(2) {
            border-radius: 0 6px 6px 0;
        }

.btn.btn-tabs.btn-predict.active {
    background-color: #ad060e;
}


/* == tabs == */

.btn.box-predicts.btn-tabs.tabs-predict-mobile.active.tabs::after {
    content: none;
}

.btn.box-predicts.btn-tabs.tabs-predict-mobile.active.tabs {
    background-color: #8d0008;
}

.btn.box-predicts.btn-tabs.tabs-predict-list-mobile.tabs.open {
    background-color: #ad060e;
}

    .btn.box-predicts.btn-tabs.tabs-predict-list-mobile.tabs.open::after {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #f5f6f8;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: rotate(-90deg);
    }

.box-predicts.btn-tabs.tabs-predict-mobile.active.tabs.open {
    background-color: #ad060e !important;
}

    .box-predicts.btn-tabs.tabs-predict-mobile.active.tabs.open::after {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #f5f6f8;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: rotate(-90deg);
    }


/* == btn action == */

.btn.btn-action {
    width: 100%;
    margin-bottom: 5.5px;
    padding: 0;
    background-color: #ad060e;
    position: relative;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0 0 0 50px;
}

.btn-arrow-prev {
    width: 55px;
    height: 55px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    float: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-arrow-prev > .icon {
        font-size: 20px;
    }

    .btn-arrow-prev > p {
        color: #fff;
        font-size: 11px;
        float: left;
        margin: 0;
    }

.event-action-text {
    font-size: 18px;
    line-height: 18px;
    font-family: var(--fontWeightBold);
}

.action-wrapper {
    display: none;
}


/* == status order == */

.predict-contain.open-predict-status-mobile .predict-mobile {
    display: none;
}

.predict-contain.open-predict-status-mobile .predict-status-success {
    display: block;
    margin-bottom: 30px;
    margin-top: -15.5px;
}

.predict-contain.open-predict-status-mobile .predict-status-fail {
    display: block;
    margin-top: -15.5px;
    margin-bottom: 30px;
}

.box-header-icon > .icon {
    position: absolute;
    font-size: 15px;
    left: 10px;
}

.box-header-icon {
    justify-content: flex-start;
}

.box-header-center-icons .box-header-icon {
    display: none;
}


/* ===================================================================================== */

@media screen and (max-width: 2000px) {
}

@media screen and (max-width: 1790px) {
}

@media screen and (max-width: 1600px) {
    /* == btn group == */
    .btn-group .btn {
        display: flex;
    }

    .btn-group {
        display: flex;
    }
}

@media screen and (max-width: 1470px) {
}

@media screen and (max-width: 1440px) {
    /* == grrid == */
    .box-header-flexitem.flexitem-lg {
        width: 60%;
    }

    .box-header-flexitem.flexitem-sm {
        width: 20%;
    }

    .box-body-flexitem.flexitem-lg {
        /* width: 54%; */
    }

    .box-body-flexitem.flexitem-sm {
        width: 20%;
    }

    .box-header-flexitem.flexitem-xl {
        width: 76%;
    }

    .box-header-flexitem.flexitem-ss {
        width: 24%;
    }

    .box-body-flexitem.flexitem-xl {
        width: 76%;
    }

    .box-body-flexitem.flexitem-ss {
        width: 24%;
    }
}

@media screen and (max-width: 1280px) {
    /* == box == */
    .header-title-center {
        font-size: 18px;
    }

    .box-header-flexitem {
        font-size: 13px;
        line-height: 14px;
    }

    .box-body-flexitem {
        font-size: 12px;
        line-height: 13px;
    }

    .box-hilight.box-hilight-sm {
        font-size: 13px;
        line-height: 14px;
    }

    .icon-sm {
        font-size: 18px;
        margin: 0 10px 0 10px;
    }

    .box-hilight {
        font-size: 13px;
        line-height: 14px;
    }

    .noti-label {
        font-size: 12px;
    }

    .btn.btn-primary {
        font-size: 14px;
        line-height: 14px;
    }

    .icon-md {
        font-size: 20px;
    }

    .checklist-list input[type='checkbox'] + label > p {
        font-size: 12px;
    }

    .enter-money-icon > .icon {
        font-size: 20px;
    }
}

@media screen and (max-width:1279px) {
}

@media screen and (max-width: 1170px) {
}

@media screen and (max-width:991px) {
    /* == check list == */
    .box-body-block.box-body-heighmore {
        height: 312px;
    }

    .checklist-list {
        height: 40px;
    }

    .enter-money-icon {
        height: 40px;
    }

    .checklist-list input[type='checkbox'] + label {
        height: 40px;
    }

        .checklist-list input[type='checkbox'] + label > p {
            height: 40px;
            font-size: 12px;
            padding: 0 0 0 25px;
        }

    .enter-money-icon > .icon {
        font-size: 17px;
    }

    .money-field {
        height: 40px;
        font-size: 15px;
    }

        .money-field::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
            color: #ccc;
            font-weight: 400;
            font-size: 15px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        }

        .money-field::-moz-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
            color: #ccc;
            font-weight: 400;
            font-size: 15px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        }

        .money-field::-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
            color: #ccc;
            font-weight: 400;
            font-size: 15px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        }

        .money-field::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

    .enter-money-icon > .text {
        font-size: 15px;
    }

    .keypad-input {
        height: 65px;
        padding: 0 15px;
        font-size: 35px;
        line-height: 35px;
        font-weight: 700;
        border-bottom: 1px solid #f5f5f5;
    }
    /* == grid hide xs == */
    .grid-hide-xs {
        display: none;
    }
    /* == slider == */
    .slider > ul {
        min-height: 850px;
    }

    .slider > button:nth-child(3) {
        right: -65px !important;
    }

        .slider > button:nth-child(3):hover {
            right: -65px !important;
        }

    .slider > button:nth-child(2) {
        left: -65px !important;
    }

        .slider > button:nth-child(2):hover {
            left: -65px !important;
        }

        .slider > button:nth-child(2) > i {
            right: -25px;
        }

    .slider > button:nth-child(3) > i {
        right: 25px;
        position: relative;
    }
    /* == grid == */
    .box-body-block.box-body-heightest {
        height: 592px;
    }

    .box-body-flexitem {
        height: 40px;
        font-size: 12px;
    }

    .box-bodyitem-block {
        height: 40px;
    }

    .box-header-flexitem {
        font-size: 12px;
        line-height: 12px;
    }

    .box-hilight {
        font-size: 13px;
        line-height: 13px;
    }

    .nav-options > li > a {
        font-size: 18px;
        line-height: 18px;
    }
    /* box event == */
    .box-body-block.box-body-height {
        height: auto;
    }
    /* box event == */
    .box-body-block.box-body-heigher {
        height: auto;
    }
    /* == box == */
    .box-body-block.box-body-mediumheight {
        height: auto;
    }

    .panelflex-display {
        padding: 5px 0 10px 0;
        border-left: 1px solid #f5f5f5 !important;
        border-right: 1px solid #f5f5f5;
    }

    .check-true,
    .check-false {
        margin-bottom: 0;
        height: 35px;
    }

        .check-true > .icon {
            font-size: 32px;
        }

        .check-false > .icon {
            font-size: 32px;
        }

    .panelflex-title {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .panelflex-display > span {
        font-size: 14px;
    }

    .panel-dashed {
        padding: 10px 0;
        height: 40px;
        font-size: 14px;
    }

        .panel-dashed > p {
            font-size: 14px;
        }

    .panel-banner {
        height: 80px;
        display: none;
    }
    /* box event == */
    .box-expand {
        height: 40px;
    }

    .box-expand-item {
        height: 39px;
    }

        .box-expand-item.box-expand-md {
            width: 35px;
        }

        .box-expand-item > .icon {
            font-size: 15px;
            color: #fff;
        }

    .box-expand-sm {
        width: 35px !important;
    }

    .box-expand-item {
        background-color: #8d0008;
        border-right: 1px solid #8d0008;
    }

    .box-expand-bgsoft {
        background-color: #8d0007 !important;
    }

    .box-expand-item {
        background-color: #ad060f;
    }
    /* == slick == */
    .lotto-slider .slick-prev {
        left: -30px;
    }

    .lotto-slider .slick-next {
        right: -30px;
    }

    .lotto-slider .slick-next,
    .lotto-slider .slick-prev {
        height: 60px;
        width: 60px;
    }

        .lotto-slider .slick-next:before {
            height: 20px;
            width: 20px;
        }

        .lotto-slider .slick-next:hover {
            right: -30px;
        }

        .lotto-slider .slick-prev:before {
            height: 20px;
            width: 20px;
        }

        .lotto-slider .slick-prev:hover {
            left: -30px;
        }
    /* == key == */
    .btn-display {
        display: none;
    }

    .input-number {
        padding: 0;
        height: 65px;
    }
    /* 
}

@media screen and (max-width:768px){ */
    /* == == */
    .box-header-center-icons .box-header-icon {
        display: block;
    }
    /* == Section ==*/
    .section-wrapper {
        padding: 7.5px 0 0px 0;
        padding: 15px 0 0 0;
    }
    /* == section breadcrumb hide xs == */
    .section-breadcrumb.bg-black {
        background-color: #f5f5f5;
        /* margin-bottom: 10px; */
    }

        .section-breadcrumb.bg-black .breadcrumb {
            background-color: #f5f5f5;
        }

            .section-breadcrumb.bg-black .breadcrumb > li,
            .section-breadcrumb.bg-black .breadcrumb > li > a.active,
            .section-breadcrumb.bg-black .breadcrumb > li > a > .icons {
                color: #000;
            }
    /* == section slider hide xs == */
    .section-slider-hide-xs {
        display: none;
    }
    /* == box header hide xs == */
    .box-header-hide-xs {
        display: none;
    }
    /* == section banner hide xs == */
    .section-banner.section-banner-hide-xs {
        display: none;
    }
    /* == section predict == */
    .section-wrapper.predict-contain > .container {
        padding-right: 7.5px;
        padding-left: 7.5px;
    }
    /* == bordashed == */
    .panel-dashed {
        font-size: 12px;
        border-left: 1px solid #f5f5f5 !important;
        border-right: 1px solid #f5f5f5;
    }

        .panel-dashed > span {
            font-size: 12px;
        }
    /* == box arreow == */
    .box-hilight-hide-xs {
        display: none;
    }

    .box-arrow-show-xs {
        display: block;
    }

    .tab-arrow.tab-arrow-flex {
        height: 40px;
    }

        .tab-arrow.tab-arrow-flex .tab-arrow-list {
            line-height: 40px;
        }

            .tab-arrow.tab-arrow-flex .tab-arrow-list .tab-arrow-inner {
                height: 40px;
            }

        .tab-arrow.tab-arrow-flex .box-circle {
            position: relative;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            font-size: 10px;
            line-height: 13px;
        }

        .tab-arrow.tab-arrow-flex .tab-arrow-list:nth-child(odd)::after {
            border-top: 20px solid #2a2a2a;
            border-bottom: 20px solid #2d2d2d;
            border-left: 20px solid #0a1a1a;
            top: 0px;
            right: -8px;
        }

        .tab-arrow.tab-arrow-flex .tab-arrow-list:nth-child(even)::after {
            border-top: 20px solid #0a1a1a;
            border-bottom: 20px solid #0a1a1a;
            border-left: 20px solid #2d2d2d;
            top: 0;
            right: 0;
        }
    /* == action box == */
    .action-wrapper {
        display: block;
    }
    /* == button == */
    .slider.package .slick-prev {
        top: -60px;
    }

    .slider.package .slick-next {
        top: -60px !important;
    }
    /* == mobile size == */
    .btn.btn-tabs-mobile {
        display: block !important;
        height: 52px;
        margin-bottom: 4.5px;
    }

    .predict-wrapper.predict-mobile-wrapper.open-predict-mobile .predict-mobile {
        display: block;
    }

    .predict-contain.open-item-to-predict .predict-mobile {
        display: none !important;
    }

    .predict-wrapper.predict-mobile-wrapper.open-predict-list-mobile .predict-mobile {
        display: none;
    }

    .predict-wrapper.predict-mobile-wrapper.open-predict-list-mobile .predict-list-mobile {
        display: block;
    }

    .section-wrapper.predict-contain.open-predict-list-mobile .predict-mobile {
        display: none;
    }

    .section-wrapper.predict-contain.open-predict-list-mobile .predict-list.predict-list-mobile {
        display: block;
        margin-top: -15.5px;
        margin-bottom: 30px;
    }

    .predict-contain.open-predict-list-mobile .predict-order {
        display: block;
        margin-top: -15.5px;
        margin-bottom: 30px;
    }
    /* == box == */
    .btn.btn-tabs.btn-packages {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 7.5px;
        position: relative;
        height: 55px;
    }

    .grid-content-inner.open-predict .lotto-slider.active {
        display: block;
    }

    .btn.btn-tabs.btn-predict {
        position: relative;
        width: 100%;
        left: 0;
        border-radius: 15px 15px 0 0;
        height: 55px;
        border-radius: 6px;
        margin-bottom: 7.5px;
    }

    .btn.btn-tabs.btn-predict {
        font-size: 18px;
        line-height: 18px;
    }

        .btn.btn-tabs.btn-predict.btn-predict-xs {
            margin: 0;
            border-radius: 6px 6px 0 0;
            background-color: #ad060e;
            font-size: 16px;
            line-height: 16px;
            height: 45px;
        }

    .btn-arrow-prev {
        height: 50px;
    }

    .btn.btn-tabs.btn-predict.btn-predict-xs.active::after {
        content: " ";
        border: 0;
    }

    .box-hilight.box-hilight-xs {
        border-radius: 0 !important;
    }

    .grid-content-inner.open-package .predict-content {
        display: block;
    }

    .package-content {
        margin-top: 0;
    }

    .btn.btn-tabs.btn-packages.active::after,
    .btn.btn-tabs.btn-predict.active::after {
        border-left: 9px solid #f5f6f8;
    }

    .package-content .slider {
        border-radius: 6px;
        overflow: hidden;
    }

    .package-content .box-footer-block.radius-bottom {
        border-radius: 0 0 6px 6px !important;
    }

    .predict-wrapper .box-hilight {
        border-radius: 6px 6px 0 0;
    }

        .predict-wrapper .box-hilight.box-hilight-sm {
            border-radius: 0;
        }

    .predict-wrapper .box-footer-block.radius-bottom {
        border-radius: 0 0 6px 6px !important;
    }
    /* == open predict order mobile == */
    .predict-contain.open-mobile-predict-list .predict-mobile {
        display: none !important;
    }

    .predict-contain.open-mobile-predict-list .predict-order {
        display: block;
        margin-top: -15.5px;
        margin-bottom: 30px;
    }
    /* == btn resize == */
    .btn.btn-tabs-resize {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 7.5px;
        position: relative;
        height: 50px;
        background-color: #ad060e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 18px;
        font-family: var(--fontWeightBold);
        color: #fff;
    }

        .btn.btn-tabs-resize::after {
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid #f5f6f8;
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: rotate(-90deg);
        }
    /* == box == */
    .box-hilight.box-hilight-above {
        background-color: #ad060e;
    }

    .box-header-block.box-header-block-xs .box-header-flexitem.flexitem-bgsoft:nth-child(odd) {
        background-color: #000;
    }
    /* == action == */
    .package-content.hide {
        display: none;
    }

    .predict-wrapper.show {
        display: block;
    }
    /* == box enter number == */
    .keypad-input {
        height: 60px;
    }

    .input-number {
        height: 60px;
        border: 1px solid #f5f5f5;
        margin: 0;
    }
    /* == predict == */
    .predict-wrapper.predict-mobile-wrapper.open-predict-mobile.show {
        width: 100%;
        float: left;
        margin-top: 0;
        display: block;
    }

    .predict-list {
        display: block !important;
    }

        .predict-list.predict-list-mobile {
            display: none;
        }

    .predict-contain.open-item-to-predict .predict-list.predict-list-mobile {
        display: block;
        margin-top: -16px;
        margin-bottom: 30px;
    }

    .predict-contain.open-item-to-predict .predict-order {
        margin-top: -16.5px;
        margin-bottom: 30px;
    }

    .predict-order {
        display: none;
    }

    .predict-order-success {
        display: none;
    }

    .predict-order-fail {
        display: none;
    }

    .box-body-block.box-body-heighmore {
        height: 290px;
        height: auto;
        border: 1px solid #f5f5f5;
    }

    .predict-contain.open-predict-status-mobile .predict-mobile {
        display: none !important;
    }
    /* == box radius == */
    .predict-list .box-header-center {
        border-radius: 6px 6px 0 0;
        height: 45px;
    }

    .predict-list .box-footer-block {
        border-radius: 0 0 6px 6px !important;
    }

    .predict-order .box-header-center {
        border-radius: 6px 6px 0 0;
    }

    .predict-order .box-footer-block {
        border-radius: 0 0 6px 6px !important;
    }

    .predict-order-success .box-header-center {
        border-radius: 6px 6px 0 0;
    }

    .predict-order-success .box-header-block.radius-bottom {
        border-radius: 0 0 6px 6px !important;
    }

    .predict-order-fail .box-header-center {
        border-radius: 6px 6px 0 0;
    }

    .predict-order-fail .box-header-block.radius-bottom {
        border-radius: 0 0 6px 6px !important;
    }

    .box-header-icon {
        height: 45px;
    }

    .box-header-center.box-header-icons .box-header-icon {
        display: none;
    }
    /* == grid == */
    .box-header-flexitem {
        font-size: 11px;
        line-height: 11px;
        height: 40px;
    }

    .predict-contain.open-predict-status .predict-status-success,
    .predict-contain.open-predict-status .predict-status-fail {
        box-shadow: 3px 5px 25px 0 rgba(23, 11, 11, 0.1);
    }
    /* == bn group == */
    .btn-group > .btn-radius.btn-radius-xs,
    .btn-radius-xs {
        border-radius: 6px !important;
    }

    .btn-delete-xs {
        width: 50px !important;
    }

    .delete-text {
        display: none;
    }

    .btn-delete-xs > .icon-md {
        font-size: 24px;
        margin: 0;
        top: 0;
    }

    .btn-group.btn-group-xs {
        padding: 0 15%;
    }

    .btn-group > .btn.btn-onlyiocn-xs {
        width: 60px !important;
        display: block;
        min-width: 60px !important;
        max-width: 60px !important;
    }
    /* == status heder == */
    .box-header-center {
        border-radius: 6px 6px 0 0;
    }
    /* == lotto mobile == */
    #mobile_predict {
        display: none;
    }

    #mobile_status_success {
        display: none;
    }

    #mobile_status_fail {
        display: none;
    }

    .mobile-choose-predict #mobile_package {
        display: none;
    }

    .mobile-choose-predict #mobile_predict {
        display: block;
    }

    .mobile-choose-predict .mobile-open-predict.open-predict #mobile_predict {
        display: block;
    }

    .mobile-choose-predict .mobile-open-predict.open-predict #mobile_predict_list {
        display: none !important;
    }

    .mobile-choose-predict .mobile-open-predict.open-predict-list #mobile_predict {
        display: none !important;
    }

    .mobile-choose-predict .mobile-open-predict.open-predict-list #mobile_predict_list {
        display: block !important;
    }

    .mobile-predict-contain.mobile-status #mobile_status_success {
        display: block;
    }

    .mobile-predict-contain.mobile-status #mobile_status_fail {
        display: block;
    }

    .mobile-predict-contain.mobile-status #mobile_package {
        display: none;
    }

    .mobile-predict-contain.mobile-status #mobile_predict {
        display: none;
    }
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
    /* == grid == */
    .box-hilight {
        font-size: 12px;
        line-height: 12px;
        height: 45px;
    }

    .flexitem-padding {
        padding: 0 20px 0 15px;
    }

    .box-body-flexitem {
        font-size: 10px;
    }

    .nav-options > li > a {
        font-size: 16px;
        line-height: 16px;
        height: 45px;
    }

    .nav-options {
        height: 45px;
    }

    .box-footer-block {
        height: 75px;
    }

    .btn.btn-primary {
        height: 45px;
        font-size: 13px;
        line-height: 16px;
    }

    .icon-md {
        font-size: 20px;
        position: relative;
        top: 0;
    }

    .box-hilight.box-hilight-sm {
        font-size: 11px;
        line-height: 12px;
    }

    .icon-sm {
        font-size: 13px;
        margin: 0 7.5px 0 7.5px;
    }

    .icon-status {
        font-size: 17px;
        margin: 0 10px 0 0;
    }

    .icon-more {
        width: 15px;
    }

        .icon-more > .icon {
            font-size: 18px;
        }
    /* == box header center == */
    .box-header-center {
        height: 45px;
    }

    .header-title-center {
        font-size: 16px;
        line-height: 16px;
    }

    .noti-label {
        font-size: 11px;
    }
    /* == check == */
    .checklist-list input[type='checkbox'] + label > p {
        padding: 0 0 0 30px;
    }
    /* == box == */
    .slider > ul {
        min-height: 797px;
    }
    /* == btn == */
    .btn-group > .btn.btn-onlyiocn-xs {
        width: 50px !important;
        display: block;
        min-width: 50px !important;
        max-width: 50px !important;
    }

    #mobile_confirm_order {
        min-width: 200px;
        max-width: 200px !important;
    }
}

@media screen and (max-width: 380px) {
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 320px) {
    /* == box arreow == */
    .box-title {
        font-size: 9px;
    }

    .tab-arrow.tab-arrow-flex .box-circle {
        width: 10px;
        height: 10px;
        font-size: 8px;
        line-height: 9px;
        left: -1px;
    }

    .tab-arrow.tab-arrow-flex .tab-arrow-list:nth-child(odd)::after {
        border-left: 15px solid #0a1a1a;
        right: 0px;
    }

    .tab-arrow.tab-arrow-flex .tab-arrow-list:nth-child(even)::after {
        border-left: 15px solid #2d2d2d;
        right: 0;
    }

    .checklist-list input[type='checkbox'] + label > p {
        font-size: 10px;
    }

    .money-field {
        font-size: 15px;
    }

        .money-field::-webkit-input-placeholder {
            font-size: 15px;
        }

        .money-field::-moz-input-placeholder {
            font-size: 15px;
        }

        .money-field::-ms-input-placeholder {
            font-size: 15px;
        }

    .enter-money-icon > .icon {
        font-size: 15px;
    }
}


/* == add new style == */

.slider > ul {
    min-height: 867px;
}

.page-header > small {
    font-size: 12px;
}

.invoice-col {
    font-size: 13px;
}

    .invoice-col address {
        font-size: 13px;
    }

.invoice-info .table-bordered thead td,
.invoice-info .table-bordered thead th {
    font-size: 12px;
}

.invoice-info .table-bordered td,
.invoice-info .table-bordered th {
    font-size: 12px;
}

@media screen and (max-width: 991px) {
    .package-content .slider {
        margin: 0 !important;
    }

    .slider > ul {
        min-height: 732px;
    }

    .box-hilight-check {
        border-radius: 0 !important;
    }

    .package-content .slider {
        border-radius: 6px 6px 0 0 !important;
    }

    .package-content .box-footer-block.radius-bottom {
        margin-bottom: 15px;
    }

    .order-print {
        margin: 0;
        padding: 0 5px;
    }
}

@media screen and (max-width: 480px) {
    .slider > ul {
        min-height: 652px !important;
    }
}


/* == new 01/28/2562 == */

.package-content {
    position: relative;
}


/*  slider */

.slider > button {
    top: 5px;
    transform: translateY(0);
    height: 40px;
    width: 40px;
    border-radius: 0;
    background-color: #0a1a1a;
    opacity: 1;
    box-shadow: none;
    opacity: 0.85;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.slider > button {
    background-color: #ad060e;
    border-radius: 50%;
    padding: 0;
    border: 4px solid #8d0008;
}

    .slider > button:nth-child(2) {
        left: 5px !important;
    }

    .slider > button:nth-child(3) {
        right: 5px !important;
    }

        .slider > button:nth-child(3) > i {
            right: 0;
        }

    .slider > button:nth-child(2) > i {
        right: 0;
    }

    .slider > button > i {
        font-size: 24px !important;
        color: #fff !important;
    }

    .slider > button:nth-child(3):hover {
        right: 5px !important;
    }

    .slider > button:nth-child(2):hover {
        left: 5px !important;
    }

    .slider > button:hover {
        opacity: 1;
        box-shadow: none;
    }

.icon-sm {
    top: 0;
}

.icon-status {
    font-size: 20px;
}

.section-slider {
    background-color: #000;
}

.full-box.full-box-width.bg-lightred.mb-0 {
    min-height: 450px;
}

.full-box.small-box-width.bg-black {
    min-height: 450px;
}

.sliders .image > img {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    background-color: #000;
}

.box-body-flexitem.flexitem-lg {
    width: 60%;
}

.box-bodyitem-block {
    height: 40px;
}

.box-body-flexitem {
    height: 40px;
    font-size: 15px;
}

.box-body-block {
    height: 166px;
}

    .box-body-block.box-body-height {
        height: 492px;
    }

.box-header-flexitem.flexitem-md {
    height: 50px;
    font-size: 13px;
}

.box-body-block.box-body-heightest {
    height: 442px;
}


/*     .box-body-block.box-body-heightest {
        height: 350px;
    } */

.slider > ul {
    min-height: 592px;
}

.box-body-block.box-body-heigher {
    height: 700px;
}

.box-body-block.box-body-heighmore {
    height: 404px;
}

.panelflex-display {
    padding: 15px 0 15px 0;
}

.box-body-block.box-body-mediumheight {
    height: 357px;
}

.icon-sm {
    font-size: 20px;
}

.box-expand {
    height: 40px;
}

.box-expand-item {
    height: 40px;
}

    .box-expand-item.box-expand-md {
        width: 30px;
    }

.icon-more > .icon {
    font-size: 20px;
}

.checklist-list {
    height: 40px;
}

    .checklist-list input[type='checkbox'] + label {
        height: 40px;
    }

    .checklist-list input[type='checkbox'] + label {
    }

.enter-money-icon {
    height: 40px;
}

.enter-money-field {
    height: 40px;
}

.checklist-list input[type='checkbox'] + label > p {
    height: 40px;
    font-size: 15px;
}

.money-field {
    height: 40px;
}

.enter-money-icon > .icon {
    font-size: 20px;
}

input[type='checkbox'] + label > span {
    width: 18px;
    height: 18px;
}

.visible-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 27px;
    height: 27px;
    background-color: #fff;
    transform: translateY(-50%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.box-hilight-hide-xs {
    position: relative;
}

.visible-icon > i {
    font-size: 16px;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    float: left;
    left: 50%;
}


/* == edit == */

.box-bodyitem-block.openTextfield {
    background-color: #000;
}

.edit-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.edit-field {
    width: 100%;
    height: 30px;
    border: 0;
    border-radius: 25px;
    color: #000;
    outline: none;
    text-align: center;
}

.edit-field {
    display: none;
}

.box-bodyitem-block.openTextfield .edit-field {
    display: block;
}

.box-bodyitem-block.openTextfield .old-amount {
    display: none;
}

.box-bodyitem-block.openTextfield .icon-more {
    display: none;
}

.icon-accept {
    width: 22px;
    height: 100%;
    background-color: transparent;
    position: absolute;
    right: 1px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .icon-accept > i {
        font-size: 17px;
        color: #ccc;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.icon-accept {
    display: none;
}

.box-bodyitem-block.openTextfield .icon-accept {
    display: block;
}

.box-header-icon > .icon {
    font-size: 24px;
}

.split {
    margin: 0 3px 0 0;
    float: left;
    text-decoration: underline;
    cursor: pointer;
}

    .split:hover {
        color: #ad060e;
    }


/* == j confirm == */

.jconfirm.jconfirm-white .jconfirm-bg,
.jconfirm.jconfirm-light .jconfirm-bg {
    opacity: .5 !important;
}

.jconfirm-title-c {
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 15px;
}

    .jconfirm-title-c .jconfirm-title {
        font-weight: 700;
        font-size: 20px !important;
    }

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons .btn {
        display: flex;
        width: 100%;
        height: 50px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        max-width: 50%;
    }

.jconfirm .box-body-block.box-body-heightest {
    height: auto;
}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons .btn.btn-red {
    background-color: #ad060e;
}

.jconfirm .jconfirm-box.jconfirm-type-red {
    border-top: solid 7px #ad060e !important;
}

.jconfirm-buttons {
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.jconfirm .jconfirm-content span.text-center {
    font-size: 14px !important;
    margin-bottom: 15px;
    color: #767679;
}

.jconfirm .jconfirm-content span.bold {
    font-size: 14px;
    margin: 0 5px 0 0;
}

.jconfirm .jconfirm-content .panel-dashed {
    padding: 10px 0;
    height: auto;
}

.jconfirm .jconfirm-content .box-body-block.box-body-height {
    height: auto;
}


/* == jConfirm predict list == */

.jconfirm-box .predict-list {
    display: block;
}


/* == user info == */

.userinfo-list > p {
    max-width: 85px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/* == == */

.order-print {
    padding: 0;
}

.page-header > i {
    float: none;
    top: 9px;
    margin: 0;
    font-size: 2.0rem;
}

.order-border {
    width: 355px;
    margin: 0;
    border: 2px solid #000;
    height: auto;
}

.page-header {
    padding: 0 15px 15px 15px;
    margin-bottom: 0;
    border: 0;
    font-weight: 700;
    text-align: center;
}

.page-title {
    padding: 0 15px 15px 15px;
    text-align: center;
    color: #000;
    font-size: 14px;
    margin-bottom: 15px;
    border-bottom: 2px dashed #000;
}

    .page-title > p {
        color: #000;
        font-size: 16px;
        margin: 2px 0 2px 0;
    }

.page-footer {
    padding: 20px 15px 0 15px;
    text-align: center;
    color: #000;
    font-size: 14px;
    margin-bottom: 15px;
    border-top: 2px dashed #000;
}

    .page-footer > p {
        font-size: 16px;
        color: #000;
        margin: 0 0 2px 0;
    }

    .page-footer > span {
        margin: 23px 0;
        width: 100%;
        float: left;
        font-size: 16px;
    }

.table.table-bold {
    font-weight: 700;
}

.invoice-info .table-bordered thead td,
.invoice-info .table-bordered thead th {
    font-size: 16px;
}

.invoice-info .table-bordered td,
.invoice-info .table-bordered th {
    font-size: 16px;
    text-align: center;
}

.page-header > small {
    font-size: 15px;
    color: #000;
    font-weight: 600;
}

.invoice-info .table-responsive.box-body {
    padding: 0;
}

    .invoice-info .table-responsive.box-body .table-bold {
        margin: 0 0 20px 0;
    }


/* ===================================================================================================================== */

@media screen and (max-width: 1790px) {
    .userinfo-wrap {
        min-width: 75%;
    }

    .userinfo-list > p {
        font-size: 14px;
    }

    .userinfo-list > strong {
        font-size: 14px;
    }
}

@media screen and (max-width: 1600px) {
    /* == == */
    .btn.btn-primary {
        min-width: 45%;
        max-width: 50% !important;
    }

    .box-body-block.box-body-mediumheight {
        height: 341px;
    }
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1279px) {
    .userinfo-wrap {
        min-width: 100%;
    }

    .userinfo-list > p {
        font-size: 13px;
    }

    .userinfo-list > strong {
        font-size: 13px;
    }
    /* == item padding == */
    .flexitem-padding {
        padding: 0 25px 0 15px;
    }
}

@media screen and (max-width: 1440px) {
    .userinfo-wrap {
        /* min-width: 100%; */
    }
}

@media screen and (max-width: 991px) {
    .slider > button {
        height: 50px;
        width: 50px;
        background-color: #ad060e;
    }
}

@media screen and (max-width: 480px) {
    .slider > button {
        height: 45px;
        width: 45px;
    }

    .slider > ul {
        min-height: 480px !important;
    }

    .box-body-block.box-body-heighmore {
        height: 228px;
    }

    .box-body-block.box-body-height {
        height: 293px;
    }

    .box-body-block.box-body-mediumheight {
        height: 316px;
    }

    .box-body-block.box-body-heightest {
        height: 350px;
    }

    .box-body-flexitem {
        font-size: 10px;
    }

    .checklist-list input[type='checkbox'] + label > p {
        font-size: 10px;
    }

    .box-header-icon > .icon {
        font-size: 20px;
    }
    /* ==  breadcrumb == */
    .section-breadcrumb-hide-xs.bg-white {
        background-color: #f5f5f5 !important;
    }

        .section-breadcrumb-hide-xs.bg-white .breadcrumb {
            background-color: #f5f5f5 !important;
        }
    /* == == */
    .order-border {
        width: 100%;
    }
    /* == == */
    .full-box.small-box-width.bg-black {
        min-height: 200px;
    }
}


/* == help center == */

.work-list-left {
    width: 33.333333%;
    /* height: 100vh; */
    float: left;
    border-right: 1px solid #eeeeee;
    background-color: #fcfcfc;
    border-radius: 15px 0 0 15px;
    /* overflow: hidden; */
}

.work-list-leftinner {
    width: 100%;
    float: left;
    position: relative;
}

.work-list-right {
    width: 66.666667%;
    /* height: 100vh; */
    float: left;
}

.box-normal {
    border-radius: 15px;
    background-color: #fff;
}

.work-list-wrap {
    /* width: 100%; */
    float: left;
    /* border-radius: 15px 0 0 15px; */
    /* border-radius: 15px 0 0 15px; */
    /* overflow: hidden; */
    z-index: 3;
}

.work-list-menu {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    height: 100vh;
    min-height: 850px;
    /* border-right: 1px solid #e5e5e5; */
    /* border-radius: 15px 0 0 15px; */
    /* overflow: hidden; */
    float: left;
}

.work-list-item {
    width: 100%;
    float: left;
    z-index: 1;
}

.work-list-inner {
    height: 80px;
    width: 100%;
    float: left;
    margin: 0;
    padding: 0 35px 0 100px;
    border-bottom: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    display: block;
    position: relative;
    left: 1px;
    background-color: #fcfcfc;
    cursor: pointer;
}

.work-list-item.active .work-list-inner {
    background-color: #fff;
    border-right: 1px solid #ffffff;
}

.work-list-inner:first-child {
    border-radius: 15px 0 0 0;
}

.work-list-item:first-child.active {
    border-radius: 15px 0 0 0;
    /* padding: 15px; */
}

.work-list-item:last-child {
    border-radius: 0;
}

    .work-list-item:last-child.active {
    }

.work-list-img {
    width: 40px;
    height: 40px;
    margin: 0 35px 0 0;
    background-color: #808080;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 35px;
}

    .work-list-img > img {
        height: 22px;
    }

.work-list-text {
    width: 100%;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #767679;
    text-decoration: none;
    font-size: 15.29px;
}

.work-list-item.active .work-list-img {
    background-color: #6ab04d;
}

textarea.form-normal {
    height: auto;
    padding: 15px;
}


/* == box normal == */

.policy-box {
    /* min-height: 850px; */
    max-height: 850px;
    overflow-y: auto;
    border-bottom: 1px solid #eeeeee;
}


/* == questions == */

.box-collapsed-wrapper {
    padding: 25px 0 0 0;
}

.box-collapsed-element {
    width: 100%;
    float: left;
    display: block;
    min-height: 50px;
    line-height: 19px;
    margin-bottom: 0;
    padding: 0 60px 0 60px;
    position: relative;
}

.label-questions,
.label-answer {
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    display: flex;
    float: left;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #808080;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 14px;
    padding: 0;
    left: 15px;
}

.collapsed-text {
    height: 50px;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 20px;
    padding: 0;
    color: #767679;
    font-size: 15.29px;
}

.box-collapsed-element.box-questions {
    background-color: #f6f6f6;
    border-radius: 15px;
}

.box-collapsed-element.box-answer {
    background-color: #fcfcfc;
    padding: 15px;
    border-radius: 0 0 15px 15px;
    padding: 0 15px 0 60px;
    display: none;
}

.box-collapsed-button {
    width: 50px;
    position: absolute;
    top: 0;
    right: 15px;
    transform: translateY(0);
    left: inherit;
    height: 50px;
}

.box-collapsed-inner {
    width: 100%;
    float: left;
    background-color: #fff;
    padding: 0;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
    border-radius: 15px;
    display: block;
    position: relative;
    padding: 0;
}

.box-collapsed {
    margin-bottom: 15px;
}

.label-answer {
    background-color: #6ab04d;
    top: 15px;
    transform: translate(0, 0);
}

.box-collapsed-element.box-answer .collapsed-text {
    display: block;
    height: auto;
    position: relative;
    padding: 15px 0;
}

.btn.btn-open,
.btn.btn-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    font-size: 20px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer !important;
}

.btn.btn-close {
    display: none;
}

    .btn.btn-open ._i,
    .btn.btn-close ._i {
        font-size: 17px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        float: left;
        color: #999;
    }

.btn.btn-open {
    display: block;
}


/* == pagination == */

.pagination.pagination-square {
    display: block;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

    .pagination.pagination-square > li {
        float: left;
        height: 40px;
        width: 40px;
        display: block;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        border-top: 1px solid #e5e5e5;
    }

        .pagination.pagination-square > li > a {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #999;
            text-decoration: none !important;
            font-size: 14px;
            float: left;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
        }

            .pagination.pagination-square > li > a > i {
                float: left;
                color: #999;
                font-size: 20px;
                width: 100%;
                height: 100%;
                line-height: 40px;
            }

        .pagination.pagination-square > li:first-child {
            border: 1px solid #e5e5e5;
            border-radius: 6px 0 0 6px;
        }

        .pagination.pagination-square > li:last-child {
            border-radius: 0 6px 6px 0;
        }

        .pagination.pagination-square > li.active > a,
        .pagination.pagination-square > li > a:hover > i,
        .pagination.pagination-square > li > a:focus > i,
        .pagination.pagination-square > li > a:hover > i,
        .pagination.pagination-square > li.active > a:hover,
        .pagination.pagination-square > li.active > a:focus,
        .pagination.pagination-square > li > a:hover,
        .pagination.pagination-square > li > a:focus {
            font-weight: 600;
            color: #000;
        }


/* == == */

.box-collapsed-button.active .btn.btn-open {
    display: none;
}

.box-collapsed-button.active .btn.btn-close {
    display: block;
}

.box-collapsed-inner.active .box-collapsed-element.box-questions {
    border-radius: 15px 15px 0 0;
}

.box-collapsed-inner.active .box-collapsed-element.box-answer {
    display: block;
}


/* == review == */

.review-block {
    height: 50px;
    border: 1px solid #e5e5e6;
    border-radius: 6px;
    padding: 0 50px 0 15px;
    position: relative;
    margin-bottom: 15px;
    display: flex;
    /* align-items: center; */
    /* justify-content: space-between; */
    overflow: hidden;
}

.review-expand.active .box-control-review {
    right: -1px;
}

.expand-more {
    width: 35px;
    float: left;
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    border-radius: 0 6px 6px 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .expand-more > .icon {
        color: #999;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
        cursor: pointer;
    }

.expand-text {
    color: #767679;
    font-size: 15.29px;
}

    .expand-text.expand-date {
        float: left;
    }

    .expand-text.expand-desc {
        float: right;
        max-width: 500px;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.box-control-review {
    position: absolute;
    right: -1px;
    height: 48px;
    float: left;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    /* display: none; */
    right: -100%;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    -ms-transition: all 0.35s;
    transition: all 0.35s;
    /* border: 1px solid #000; */
}

.box-control-item {
    background-color: #0a1a1a;
    float: left;
    width: 50px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #292929;
    cursor: pointer;
    transition: all 0.25s;
}

.box-control-sm {
    width: 25px !important;
}

.box-control-bgsoft {
    background-color: #2d2d2d;
}

.box-control-item .icon {
    color: #696969;
    font-size: 19px;
    transition: all 0.25s;
}

.box-body-review {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-control-bgsoft:hover .icon {
    color: #ccc;
}

.box-control-item:hover {
    background-color: #ad060e;
}

    .box-control-item:hover .icon {
        color: #fff;
    }

.box-control-bgsoft:hover {
    background-color: #292929;
}


/* ========================================================================================================================== */

@media screen and (max-width: 991px) {
    /* == == */
    .work-list-select {
        display: block;
    }

    .work-list-wrap {
        display: none;
    }

    .work-list-left.open .work-list-wrap {
        display: block;
        overflow: hidden;
        float: left;
        /* z-index: 3; */
        top: 100%;
        margin-top: 3px;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
    }

    .work-list-left {
        width: 100%;
        border-radius: 0;
        border: 0;
        background-color: #ffffff;
    }

    .work-list-right {
        width: 100%;
    }

    .work-list-menu {
        height: auto;
        padding: 0;
        display: block;
    }

    .work-list-item {
        width: 33.333333%;
        float: left;
        padding: 7.5px;
    }

    .work-list-inner {
        padding: 0 15px 0 55px;
        border: 0;
        /* border-radius: 0; */
        left: 0;
    }

    .work-list-img {
        left: 15px;
        width: 30px;
        height: 30px;
        margin: 0;
    }

        .work-list-img > img {
            height: 15px;
        }

    .work-list-text {
        font-size: 14px;
        line-height: 16px;
    }
    /* == new == */
    .work-list-wrap {
        position: absolute;
        float: left;
        left: 0;
    }

    .work-list-menu {
        width: 100%;
        float: left;
        min-height: 100px;
        background-color: #fff;
        overflow: hidden;
        border: 0;
    }

    .work-list-left {
        position: relative;
        padding: 15px 15px 3px 15px;
    }

    .work-list-item {
        width: 100% !important;
    }
    /* }


@media screen and (max-width:768px){ */
    /* == == */
    .work-list-item {
        /* width: 33.3333333%; */
    }

    .work-list-left {
        padding: 15px 15px 0 15px;
    }

    .work-list-wrap {
        left: 0;
    }

    .work-list-menu {
    }

    .work-list-item {
        padding: 0;
        margin: 0;
        float: none;
        display: inline-block;
        min-width: auto;
        width: auto;
        border-radius: 0;
        border-bottom: 1px solid #e5e5e5;
        display: block;
        width: 100%;
        float: left;
        /* background-color: #000; */
    }

        .work-list-item:last-child {
            border: 0;
        }

    .work-list-text {
        font-size: 13px;
    }

    .work-list-inner {
        padding: 0 10px 0 46px;
        height: 40px;
        border-radius: 0 !important;
        /* background-color: #eeeeee; */
    }

        .work-list-inner:hover {
            background-color: #eeeeee;
            color: #fff;
        }

    .work-list-item.active .work-list-inner {
        border: 0 !important;
    }

    .work-list-img {
        left: 12px;
        width: 25px;
        height: 26px;
    }

        .work-list-img > img {
            height: 13px;
        }
    /* == policy == */
    .policy-box {
        min-height: auto;
        max-height: initial;
        height: auto;
        overflow-y: inherit;
        padding-bottom: 15px;
    }

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

    .policy-box p,
    .policy-box span {
        font-size: 12px !important;
        color: #767679;
    }

    .policy-box strong {
        font-size: 14px !important;
    }
    /* == question == */
    .box-collapsed-wrapper {
        padding: 0;
    }

    .label-questions,
    .label-answer {
        width: 25px;
        height: 25px;
        left: 10px;
        font-size: 12px;
    }

    .box-collapsed-element {
        padding: 0 45px 0 45px;
    }

    .collapsed-text {
        font-size: 12px;
    }

    .box-collapsed-button {
        right: 0;
    }

    .btn.btn-open,
    .btn.btn-close {
        width: 25px;
        height: 25px;
    }

        .btn.btn-open ._i,
        .btn.btn-close ._i {
            font-size: 15px;
        }
    /* == review == */
    .expand-text {
        font-size: 12px;
    }

    .review-block {
        padding: 0 35px 0 10px;
        height: 40px;
    }

    .expand-more {
        height: 38px;
    }

    .expand-text.expand-date {
        max-width: 120px;
        min-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .expand-text.expand-desc {
        max-width: 150px;
        min-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box-control-item {
        border-right: 1px solid #8d0008;
        background-color: #ad060e;
        height: 38px;
        width: 40px;
    }

    .box-control-sm {
        width: 35px !important;
        background-color: #8d0008;
        height: 38px;
    }

    .box-control-item .icon {
        color: #ffffff;
        font-size: 16px;
    }

    .box-control-review {
        height: 38px;
    }
}

@media screen and (max-width:767px) {
    .select-label {
        font-size: 12px;
    }

    .work-list-left {
        padding: 15px 15px 0 15px;
    }
}

@media screen and (max-width:480px) {
    /* == == */
    .work-list-item {
        /* width: 50%; */
    }

    .expand-text.expand-date {
        max-width: 100px;
        min-width: 100px;
    }

    .expand-text.expand-desc {
        max-width: 100px;
        min-width: 100px;
    }
}


/* == == */

.back-to-show-xs {
    display: none;
}


/* == == */

.box-split {
    height: 50px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

    .box-split > .item {
        display: flex;
        width: 50%;
        float: left;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        line-height: 20px;
        font-family: var(--fontWeightBold);
        height: 50px;
        position: relative;
        background-color: #ad060e;
        cursor: pointer;
    }

#choose_predict {
    cursor: pointer;
}

#choose_package {
    cursor: pointer;
}

    #choose_package.active {
        cursor: default;
    }

.predict-status-fail {
    display: none;
}

.predict-status-success {
    display: none;
}


/*.predict-contain.open-choose-predict #choose_package {
    cursor: default;
}*/

.predict-contain.open-choose-predict #choose_predict {
    cursor: default;
}

.box-split > .item.active {
    background-color: #8d0008;
}

    .box-split > .item.active::after {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #000000;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: rotate(-90deg);
    }

.predict-list {
    display: none;
}


/* == open predict == */

.predict-contain.open-choose-package .grid-content .predict-content {
    display: none;
}

.predict-contain.open-choose-predict .grid-content .predict-content {
    display: block;
}

.predict-contain.open-choose-package .grid-content-inner .lotto-slider {
    display: block;
}


/* == open predict list == */

.open-choose-predict.open-predict-list .predict-orders {
    display: none;
}

.open-choose-predict.open-predict-list .predict-list {
    display: block;
}


/* == open predict list == */

.predict-contain.open-predict-list .predict-orders {
    display: none;
}

.predict-contain.open-predict-list .predict-list {
    display: block;
}


/* == open status == */

.predict-contain.open-predict-status .predict-orders {
    display: none;
}

.predict-contain.open-predict-status .predict-status-success {
    display: block;
}

.predict-contain.open-predict-status .predict-status-fail {
    display: block;
}


/* == == */

.btn-press {
    width: 100%;
    margin-bottom: 7.5px;
    padding: 0;
    background-color: #ad060e;
    position: relative;
    height: 55px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0;
}

.press-wrapper {
    display: none;
}

.press-wrapper {
    width: 100%;
    float: left;
}

.btn-arrow-press {
    width: 55px;
    height: 55px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    float: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-arrow-press .icon {
        font-size: 20px;
    }

    .btn-arrow-press > p {
        color: #fff;
        font-size: 11px;
        float: left;
        margin: 0;
    }

.event-press-text {
    font-size: 20px;
    line-height: 16px;
    font-family: var(--fontWeightBold);
}


/* == box split mobile == */

.split-mobile {
    width: 100%;
    margin-bottom: 7.5px;
    padding: 0;
    background-color: #ad060e;
    position: relative;
    height: 55px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0;
    overflow: hidden;
}

.btn-split {
    width: 50%;
    background-color: #8d0008;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    font-family: var(--fontWeightBold);
    position: relative;
}

#chooose_mobile_predict {
    border-radius: 6px 0 0 6px;
}

.btn-split:first-child {
    border-radius: 6px 0 0 6px;
}

.btn-split:last-child {
    border-radius: 0 6px 6px 0;
}

.btn-split.open {
    background-color: #ad060e;
}

    .btn-split.open::after {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #ffffff;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: rotate(-90deg);
    }

.box-unable {
    width: 100%;
    height: 55px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px 0 0 6pc;
    overflow: hidden;
    display: none;
    z-index: 1;
}


/* == lotto mobile == */

.btn-heading {
    display: flex;
    width: 100%;
    float: left;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    font-family: var(--fontWeightBold);
    height: 55px;
    position: relative;
    background-color: #ad060e;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 7.5px;
}

    .btn-heading::after {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #ffffff;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: rotate(-90deg);
    }


/* ============================================================================================================================================================ */

@media screen and (max-width:991px) {
    /* == == */
    .icon-status {
        font-size: 17px;
    }

    .open-predict-status .box-header-center {
        border-radius: 6px 6px 0 0;
    }
    /* == == */
    #choose_predict {
        display: none;
    }

    .box-split > .item {
        width: 100%;
        border-radius: 6px !important;
        height: 55px;
    }

        .box-split > .item.active::after {
            border-left: 9px solid #f5f6f8;
        }

    .box-split {
        margin-bottom: 7.5px;
        border-radius: 6px !important;
        height: 55px;
    }

    .predict-orders {
        display: none;
    }

    .box-hilight.box-hilight-above {
        background-color: #ad060e;
    }

    .package-content .slider {
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 15px;
    }
    /* == btn press == */
    .predict-contain.open-choose-predict .press-wrapper {
        display: block;
    }
    /* == btn split mobile == */
    .predict-contain.open-choose-predict .split-mobile-wrapper {
        display: block;
    }
    /* == == */
    .predict-contain.open-choose-predict .box-split {
        display: none;
    }
    /* == open choose predict == */
    .open-choose-predict .predict-wrapper {
        display: block;
    }
    /* == open choose predictlist == */
    .predict-contain.open-choose-predictlist .press-wrapper {
        display: block;
    }

    .predict-contain.open-choose-predictlist .split-mobile-wrapper {
        display: block;
    }

    .predict-contain.open-choose-predictlist .box-split {
        display: none;
    }

    .open-choose-predictlist .predict-orders {
        display: block;
        margin-top: -2px;
    }

        .open-choose-predictlist .predict-orders .box-header-center {
            border-radius: 6px 6px 0 0;
        }

    .open-choose-predictlist .predict-orders {
        display: none;
    }

    .open-choose-predictlist .predict-list {
        display: block;
    }
    /* == open predict list == */
    .predict-contain.open-predict-list .press-wrapper {
        display: block;
    }

    .predict-contain.open-predict-list .split-mobile-wrapper {
        display: block;
    }

    .predict-contain.open-predict-list .box-split {
        display: none;
    }

    .predict-contain.open-predict-list .predict-list {
        margin-top: -2px;
    }

    .predict-contain.open-choose-predict .grid-content .predict-content {
        margin-top: -1px;
        border: 1px solid #eeeeee;
        border-radius: 6px;
    }

    .open-choose-predictlist .predict-orders .box-header-center {
        height: 45px;
    }

    .btn.btn-tabs.btn-predict.btn-predict-xs {
        font-weight: 700;
        font-family: var(--fontWeightBold);
        font-size: 18px;
    }

    .predict-contain.open-predict-list .btn-split.unable {
        cursor: default;
    }

    .predict-contain.open-predict-list .box-unable {
        display: none;
    }

    .radius-bottom {
        border-radius: 0 0 6px 6px !important;
    }
    /* == status == */
    .predict-contain.open-predict-status .press-wrapper {
        display: block;
    }

    .predict-contain.open-predict-status .split-mobile-wrapper {
        display: block;
    }

    .predict-contain.open-predict-status .box-split {
        display: none;
    }
    /*  */
    .predict-contain.open-predict-status .box-unable {
        display: block;
    }
    /* == == */
    .back-to-show-xs {
        display: block;
    }
    /* == lotto mobile == */
    .press-wrapper {
        display: block;
    }
}


/* == == */

#lotto_habiieki_desktop {
    display: block;
}

#lotto_habiieki_mobile {
    display: none;
}


/* == == */

.arrow-icon ._i {
    color: #999;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    float: left;
    width: 50px;
    height: 100%;
    line-height: 50px;
    text-align: center;
    line-height: 65px;
}

.box-split > .item {
    cursor: default;
}


/* == == */

.input-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.input-num::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -moz-appearance: textfield !important;
}

.input-num[type="number"] {
    -moz-appearance: textfield;
}


/* == == */

.section-wrapper {
    padding: 30px 0 30px 0;
}

.box-banner {
    margin-top: 30px;
}

.text-hilight-bold {
    margin: 23px 0;
    width: 100%;
    float: left;
    line-height: 40px;
}

.box-simple {
    background-color: #fff;
}

    .box-simple.border-bottom {
        border-bottom: 1px solid #e5e5e5 !important;
    }

.split-mobile-wrapper {
    width: 100%;
    float: left;
    padding: 0;
    position: relative;
}


/* == grid == */

.grid-list {
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    font-size: 14px;
    color: #000;
}

    .grid-list.bg-dark {
        background-color: #2d2d2d !important;
        color: #fff !important;
        border-right: 1px solid #000;
    }

        .grid-list.bg-dark:last-child {
            border: 0;
        }

.grid-row {
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #fff;
}

.grid-body {
    border: 3px solid #fff;
    position: relative;
    border-radius: 0 0 15px 15px;
}

.grid-body-scroll {
    height: 550px;
    overflow-y: auto;
}

.grid-item {
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    height: 34px;
    color: #898989;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    line-height: 22px;
    text-align: center;
}

.grid-row:nth-child(odd) {
    background-color: #fff;
}

.grid-row:nth-child(even) {
    background-color: #f9f9f9;
}

.grid-row:nth-of-type(1) .grid-item,
.grid-row:nth-of-type(16) .grid-item {
    color: #2ead04;
}


/* == box number == */

.box-number {
    width: 100%;
    float: left;
    height: 60px;
    position: relative;
    background-color: #f9f9f9;
    width: 60%;
}

.input-num {
    width: 100%;
    height: 100%;
    outline: none;
    border: 0;
    padding: 0 15px;
    text-align: center;
    font-size: 23px;
    color: #000;
}


/* == display play == */

.box-display-wrap {
    position: relative;
    padding: 0;
    background-color: #fff;
}

.box-display-inner {
    height: 60px;
}

.box-display-play {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 10px;
}

.btn.btn-playnow {
    width: 120px;
    float: left;
    border-radius: 25px;
    border: 1px solid #ad060e;
    background-color: #ad060e;
    color: #fff;
    font-size: 14px;
    padding: .575rem .75rem;
}

    .btn.btn-playnow:hover,
    .btn.btn-playnow:focus {
        color: #fff;
        border: 1px solid #8d0008;
        background-color: #8d0008;
    }

.icon-keypad {
    float: left;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin: 0 10px 0 0;
    padding: 0px 1px;
    cursor: pointer;
    height: 35px;
    z-index: 1;
}

    .icon-keypad > i {
        font-size: 41px;
        color: #ccc;
    }

.keypad-wrap {
    display: none;
}

    .keypad-wrap.show {
        display: block;
    }

.keypad-keyboard {
    border-radius: 0 0 8px 8px;
}


/* == mobile == */

.btn-heading::after {
    content: none;
}

#get_round_menu {
    min-width: 85px;
    text-align: center;
}

.btn-subheading {
    display: flex;
    width: 100%;
    float: left;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    font-family: var(--fontWeightMedium);
    height: 55px;
    position: relative;
    background-color: #ad060f;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 3px;
    font-weight: 400;
    padding: 0 15px;
    z-index: 1;
}

    .btn-subheading > i {
        margin-left: 10px;
        z-index: -1;
        /* position: relative; */
        font-size: 20px;
        display: none;
    }

.sub-arrow::after {
    content: " ";
    position: absolute;
    right: 15px;
    display: block;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    margin: -2px 0 3px 6px;
    width: 8px;
    height: 8px;
    /* top: 0; */
}


/* == roundlist == */

.round-menu-list {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: #ffffff;
    border-radius: 0 0 6px 6px;
    position: absolute;
    top: 100%;
    display: none;
    border: 1px solid #eeeeee;
    z-index: 1;
    height: 227px;
    overflow-y: auto;
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
}

.round-menu-item {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    color: #252525;
}

    .round-menu-item:last-child {
        border: 0;
    }

.round-menu {
    position: relative;
}

.round-menu-list.open {
    display: block;
}

.row-menu {
    width: 100%;
    float: left;
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    border-radius: 6px;
}

.row-list {
    width: 100%;
    float: left;
    padding: 15px 106px 15px 10px;
    margin: 0;
    height: 85px;
    border-bottom: 1px solid #e5e5e5;
    display: block;
    position: relative;
}

    .row-list:last-child {
        border: 0;
    }

.row-subtitle {
    width: 100%;
    float: left;
}

.row-btn .icon {
    background-color: #8d0008;
    font-size: 20px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 5px;
    position: absolute;
    right: 5px;
}

.row-btn {
    width: 95px;
    float: left;
    background-color: #ad060e;
    color: #fff;
    font-size: 12px;
    border-radius: 25px;
    display: block;
    text-align: center;
    line-height: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 9px;
    cursor: pointer;
    padding: 0 15px 0 0;
}

.label-subtitle {
    font-size: 14px;
    width: 100%;
    float: left;
    color: #000;
    font-weight: 600;
}

.label-small {
    font-size: 11px;
    width: 100%;
    float: left;
    margin: 0;
    color: #000;
}


/* == disable == */

.row-list.disabled {
    cursor: default;
}

    .row-list.disabled .row-btn {
        background-color: #e1e1e1;
    }

        .row-list.disabled .row-btn .icon {
            background-color: #d7d7d7;
        }


/* == mobile choose package == */

.mobile-habiieki-contain.open-package #mobile_habiieki_package {
    display: block;
}

.mobile-habiieki-contain.open-package #mobile_habiieki_predict {
    display: none;
}

.mobile-habiieki-contain.open-package #mobile_habiieki_statussuccess {
    display: none;
}

.mobile-habiieki-contain.open-package #mobile_habiieki_statusfail {
    display: none;
}


/* == mobile predict == */

.mobile-habiieki-contain.mobile-predict #mobile_habiieki_package {
    display: none;
}

.mobile-habiieki-contain.mobile-predict #mobile_habiieki_statussuccess {
    display: none;
}

.mobile-habiieki-contain.mobile-predict #mobile_habiieki_statusfail {
    display: none;
}

.habiieki-predict.habiieki-open-predict #mobile_habiieki_predict {
    display: block !important;
}

.habiieki-predict.habiieki-open-predict #mobile_habiieki_predictlist {
    display: none !important;
}


/* == mobile predict list == */

.habiieki-predict.habiieki-open-predictlist #mobile_habiieki_predict {
    display: none;
}

.habiieki-predict.habiieki-open-predictlist #mobile_habiieki_predictlist {
    display: block;
}


/* == mobile status == */

.mobile-habiieki-contain.mobile-status #mobile_habiieki_package {
    display: none;
}

.mobile-habiieki-contain.mobile-status #mobile_habiieki_predict {
    display: none;
}

.mobile-habiieki-contain.mobile-status #mobile_habiieki_statussuccess {
    display: block;
}

.mobile-habiieki-contain.mobile-status #mobile_habiieki_statusfail {
    display: block;
}


/* == desktop open package == */

.habiieki-contain.open-choose-package #habiieki-package-wrap {
    display: block;
}

.habiieki-contain.open-choose-package #habiieki-predict-wrap {
    display: none;
}

.habiieki-contain.open-choose-package #habiieki-predictlist-wrap {
    display: none;
}

.habiieki-contain.open-choose-package #habiieki-statussuccess-wrap {
    display: none;
}

.habiieki-contain.open-choose-package #habiieki-statusfail-wrap {
    display: none;
}

.habiieki-contain.open-choose-package #habiieki-predictorder-wrap {
    display: block;
}


/* == desktop open predict == */

.habiieki-contain.open-choose-predict #habiieki-package-wrap {
    display: none;
}

.habiieki-contain.open-choose-predict #habiieki-predict-wrap {
    display: block;
}

.habiieki-contain.open-choose-predict #habiieki-predictlist-wrap {
    display: none;
}

.habiieki-contain.open-choose-predict #habiieki-statussuccess-wrap {
    display: none;
}

.habiieki-contain.open-choose-predict #habiieki-statusfail-wrap {
    display: none;
}

.habiieki-contain.open-choose-predict #habiieki-predictorder-wrap {
    display: block;
}


/* == open predict list == */

.habiieki-contain.open-predictlist #habiieki-package-wrap {
    display: none;
}

.habiieki-contain.open-predictlist #habiieki-predictorder-wrap {
    display: none;
}

.habiieki-contain.open-predictlist #habiieki-predictlist-wrap {
    display: block;
}

.habiieki-contain.open-predictlist #habiieki-predict-wrap {
    display: block;
}

.habiieki-contain.open-predictlist #habiieki-statussuccess-wrap {
    display: none;
}

.habiieki-contain.open-predictlist #habiieki-statusfail-wrap {
    display: none;
}


/* == open predict status == */

.habiieki-contain.open-status #habiieki-package-wrap {
    display: none;
}

.habiieki-contain.open-status #habiieki-predict-wrap {
    display: block;
}

.habiieki-contain.open-status #habiieki-predictorder-wrap {
    display: none;
}

.habiieki-contain.open-status #habiieki-predictlist-wrap {
    display: none;
}

.habiieki-contain.open-status #habiieki-statussuccess-wrap {
    display: block;
}

.habiieki-contain.open-status #habiieki-statusfail-wrap {
    display: block;
}


/* ============================================================================================================================================================ */

@media screen and (max-width: 2000px) {
}

@media screen and (max-width: 1790px) {
}

@media screen and (max-width: 1600px) {
    /* == == */
    .btn.btn-primary {
        min-width: 45%;
        max-width: 50% !important;
    }
    /* == == */
    .btn.btn-playnow {
        padding: .575rem .25rem;
    }

    .btn.btn-playnow {
        font-size: 12px;
    }

    .box-display-play {
        padding: 0 5px;
    }
}

@media screen and (max-width: 1470px) {
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width:1280px) {
    /* == == */
    .grid-item {
        font-size: 13px;
    }

    .grid-list {
        font-size: 13px;
    }
}

@media screen and (max-width: 1279px) {
}

@media screen and (max-width: 1170px) {
}

@media screen and (max-width:991px) {
    /* == == */
    #lotto_habiieki_desktop {
        display: none;
    }

    #lotto_habiieki_mobile {
        display: block;
    }
    /* == == */
    .section-breadcrumb.bg-white {
        background-color: #f5f5f5 !important;
        /* margin-bottom: 10px; */
    }

        .section-breadcrumb.bg-white .breadcrumb {
            background-color: #f5f5f5;
        }
    /* == == */
    .section-wrapper {
        padding: 15px 0 15px 0;
    }
    /* == == */
    .arrow-icon ._i {
        line-height: 43px;
    }
}

@media screen and (max-width:480px) {
    .btn-predict-next {
        min-width: 200px !important;
        max-width: 200px !important;
    }
}


/* == btn == */

.slider.package .slick-prev {
    top: -60px;
}

.slider.package .slick-next {
    top: -60px !important;
}


/* == btn == */

.btn-rounded {
    border-radius: 30px;
}

.btn-small {
    padding: 5px 15px;
    font-size: 11px;
    line-height: 12px;
}


/* == btn next and prev == */

.tb-box .button-event .event-prev.event-prev.icon-deepgray {
    background-color: #545c69;
}

.tb-box .button-event .event-next.icon-deepgray {
    background-color: #545c69;
}

.tb-box .button-event {
    margin: 15px 0 0 0;
}


/* == btn outline == */

.btn-outline {
    color: #f5f6f8;
    background-color: transparent;
}


/* == btn rounded == */

.btn-rounded {
    border-radius: 60px;
}

.box-circle {
    border: 1px solid #fff;
}


/* == text == */

b {
    font-weight: 600;
}

.icon-small {
    font-size: 16px;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
}

.table.table-layout tbody > tr > td .text.tb-text.color-green {
    color: #6ab04d;
    font-weight: 600;
}

.table.table-layout tbody > tr > td .text.tb-text.color-deepgray {
    color: #545c69;
    font-weight: 600;
}


/* == progress == */

.box-features-padding {
    padding: 40px 15px;
}

.box-border-top {
    border-top: 1px solid #e5e5e5;
}

.box-white {
    background: #ffffff;
    padding: 0 26px 15px 26px;
    margin-bottom: 0;
    margin-top: 0;
}

.box-features-center {
    width: 72%;
    margin: 0 auto;
}


/* == progressbar == */

.btn.btn-simple {
    height: 50px;
    min-width: 100%;
    float: left;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    text-align: center;
    justify-content: center;
    overflow: visible;
}

.icon-danger {
    background-color: #ad060e;
}

.simple-icons {
    background-color: #fff;
    display: inline-block;
    margin: -6px 12px -6px -4px;
    padding: 7px 7px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    float: left;
}

.btn-danger .simple-icons > i {
    color: #ad060e;
}

.icon-rounded {
    border-radius: 50%;
}

.simple-icons > i {
    font-size: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.progressbar > li::after {
    content: ' ';
    width: 100%;
    background-color: #f0f1f3;
    line-height: 40px;
    height: 4px;
    position: absolute;
    top: 50%;
}

.progressbar {
    position: relative;
    width: 100%;
    float: left;
}

    .progressbar > li {
        width: 25%;
        position: relative;
        float: left;
        height: 50px;
        margin-bottom: 15px;
        overflow: visible;
    }

        .progressbar > li:last-child::after {
            content: none;
        }

        .progressbar > li.current::after {
            background-color: #6ab04d;
        }

        .progressbar > li.current .btn-situation {
            background-color: #6ab04d;
        }

            .progressbar > li.current .btn-situation i {
                color: #27ae61;
            }

        .progressbar > li .btn-situation {
            background-color: #fff;
            border: 1px solid #ececec;
        }

            .progressbar > li .btn-situation i {
                color: #b6bbbf;
            }

.box-features-in > .progressbar > li {
    padding: 0 15px;
}

    .box-features-in > .progressbar > li .text {
        font-size: 14px;
        color: #000;
    }

    .box-features-in > .progressbar > li::after {
        width: 100%;
    }

    .box-features-in > .progressbar > li:nth-of-type(3)::after {
        content: none;
    }

.progressbar > li.current .btn-situation .text {
    color: #fff;
}

.box-features-in > .progressbar > li.cancel-order .text {
    color: #fff;
}

.box-features-in > .progressbar > li.cancel-order .btn {
    border: 1px solid #ad060e !important;
}

.box-features-in > .progressbar > li.current .btn {
    border: 1px solid #6ab04d;
}


/* == profile image == */

.profile-image {
    overflow: hidden;
}


/* == btn success == */

.btn-success {
    background-color: #27ae61 !important;
    border-color: #27ae61 !important;
    color: #fff;
}

    .btn-success .simple-icons > i {
        color: #27ae61;
    }


/* == btn danger == */

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


/* == btn info large == */

.btn.btn-info-large {
    font-size: 16px;
}


/* == btn -gray == */

.btn-gray {
    background-color: #b6bbbf !important;
    border-color: #b6bbbf !important;
    color: #fff;
}

    .btn-gray .simple-icons > i {
        color: #b6bbbf;
    }


/* == placeholder == */

.keypad-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #b6bbbf;
    font-size: 20px;
    font-weight: 100 !important;
}

.keypad-input::-moz-placeholder {
    /* Firefox 19+ */
    color: #b6bbbf;
    font-size: 20px;
    font-weight: 100 !important;
}

.keypad-input:-ms-input-placeholder {
    /* IE 10+ */
    color: #b6bbbf;
    font-size: 20px;
    font-weight: 100 !important;
}

.keypad-input:-moz-placeholder {
    /* Firefox 18- */
    color: #b6bbbf;
    font-size: 20px;
    font-weight: 100 !important;
}


/* == breadcrumbs == */

.breadcrumb > li > a > .icons {
    /* display: none; */
}


/* == sort table == */

.table.table-layout thead th.sorting {
    padding-right: 20px !important;
    position: relative;
    cursor: pointer;
}

    .table.table-layout thead th.sorting > i {
        position: absolute;
        right: 5px;
        font-size: 20px;
        cursor: pointer;
    }


/**************************************************************************************************************************/

@media screen and (max-width:575px) {
    .progressbar > li.current .btn-situation .text {
        font-size: 12px;
        line-height: 13px;
        word-break: break-word;
    }

    .progressbar > li .btn .text {
        font-size: 12px;
        line-height: 13px;
    }

    .progressbar > li .btn .text {
        position: absolute;
        top: 50px;
        color: #000 !important;
        margin-top: 10px;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .simple-icons {
        display: block;
        margin: 0;
        width: 25px;
        height: 25px;
        padding: 0;
    }

    .box-features-in > .progressbar > li .btn {
        width: 50px;
        padding: 0;
        max-width: 50px;
    }

    .box-features-in > .progressbar > li .btn {
        width: 50px;
        max-width: 50px;
        min-width: 50px;
        height: 50px;
    }

    .progressbar > li.current .btn-situation .text {
        color: #000;
    }

    .progressbar {
        height: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
        min-height: 70px;
        padding: 0 10px;
    }

    .box-white {
        padding: 0 0 15px 0;
    }
}

@media screen and (max-width:480px) {
    .box-features-in > .progressbar > li .btn {
        width: 40px;
        padding: 0;
        max-width: 40px;
        height: 40px;
    }

    .box-features-in > .progressbar > li .btn {
        width: 40px;
        max-width: 40px;
        min-width: 40px;
    }

    .simple-icons > i {
        font-size: 16px;
    }

    .progressbar > li {
        height: 40px;
    }
}


/********** html **********/

html {
    /*scroll-behavior: smooth !important;*/
}

.body-content-wrpper {
    width: 100%;
    float: left;
}


/********** section wrapper **********/

.section-wrapper {
    background-color: #f6f8f9;
}


/********** select package **********/

.box-hilight-check > .checked {
    display: none;
}

.box-hilight-check > .uncheck {
    display: none;
}


/********** btn viewmore **********/

.btn-viewmore:hover {
    color: #000 !important;
}


/********** custom check **********/

.custom-control-label::after {
    width: 22px;
    height: 22px;
}

.custom-control-label::before {
    width: 22px;
    height: 22px;
    top: 1px;
}


/********** pages **********/

.page {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100%;
}

.page {
    height: 100%;
    position: fixed;
    background: url('../images/error-bg.jpg?v=1') no-repeat center center #fff !important;
    width: 100%;
}

.heading-large {
    margin: 0;
    font-size: 5rem;
}

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

.btn.btn-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.btn-medium {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 50px;
}

.btn-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

    .btn-icons i {
        margin: 0 5px 0 5px;
        color: #fff;
        font-size: 20px;
    }


/********** instant wrapper **********/

.instant-wrapper > li:last-child {
    border-radius: 0 15px 0 0;
}

.instant-wrapper.instant-no-radius > li:last-child {
    border-radius: 0;
}


/********** Labels **********/

.label.label-table {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label.label-table {
    letter-spacing: 0.05em;
    border-radius: 60px;
    font-weight: 500;
    padding: 7px 16px 7px;
}

.label-rounded,
.label-rouded {
    border-radius: 60px;
    padding: 4px 16px 3px;
    font-weight: 500;
}

.table-small {
    font-size: 14px;
}

.label-custom {
    background-color: #aec9cb;
}

.label-success {
    background-color: #6ab04d;
}

.label-info {
    background-color: #85b4d0;
}

.label-warning {
    background-color: #cbc3ae;
}

.label-danger {
    background-color: #ad060e;
}

.label-megna {
    background-color: #aec9cb;
}

.label-primary {
    background-color: #b5a8b9;
}

.label-purple {
    background-color: #b5a8b9;
}

.label-red {
    background-color: #fb3a3a;
}

.label-inverse {
    background-color: #b6b9a8;
}


/********** Tables **********/

.table {
    margin-bottom: 10px;
}

    .table-striped > tbody > tr:nth-of-type(odd),
    .table-hover > tbody > tr:hover,
    .table > thead > tr > td.active,
    .table > tbody > tr > td.active,
    .table > tfoot > tr > td.active,
    .table > thead > tr > th.active,
    .table > tbody > tr > th.active,
    .table > tfoot > tr > th.active,
    .table > thead > tr.active > td,
    .table > tbody > tr.active > td,
    .table > tfoot > tr.active > td,
    .table > thead > tr.active > th,
    .table > tbody > tr.active > th,
    .table > tfoot > tr.active > th {
        background-color: #f7fafc !important;
    }

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

    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > thead > tr > th {
        padding: 11px 8px;
    }

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

.table-danger,
.table-danger > td,
.table-danger > th {
    background-color: #ad060e !important;
    color: #fff;
    font-weight: 600;
}

.table-black,
.table-black > td,
.table-black > th {
    background-color: #000 !important;
    color: #fff;
    font-weight: 600;
}

.table-red,
.table-red > td,
.table-red > th {
    background-color: #9c191f !important;
    color: #fff;
    font-weight: 600;
}

.table-hover .table-danger:hover {
    background-color: #ad060e !important;
}

    .table-hover .table-danger:hover > td,
    .table-hover .table-danger:hover > th,
    .table-hover .table-danger:focus > td,
    .table-hover .table-danger:focus > th {
        background-color: #ad060e;
        color: #fff;
        font-weight: 600;
    }

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid #e4e7ea;
    position: relative;
}

.footable > thead > tr > th > span.footable-sort-indicator {
    position: absolute;
    right: 10px;
}

tbody {
    color: #797979;
}

th {
    color: #666666;
    font-weight: 500;
}

.table-bordered {
    border: 1px solid #e4e7ea;
}

table.focus-on tbody tr.focused th {
    background-color: #ff6849;
    color: #ffffff;
}

table.focus-on tbody tr.focused td {
    background-color: #ff6849;
    color: #ffffff;
}

.table-rep-plugin .table-responsive {
    border: none !important;
}

.table-rep-plugin tbody th {
    font-size: 14px;
    font-weight: normal;
}

.jsgrid .jsgrid-table {
    margin-bottom: 0px;
}

.jsgrid-selected-row > td {
    background: #f7fafc;
    border-color: #f7fafc;
}

.jsgrid-header-row > th {
    background: #ffffff;
}

.footable-odd {
    background-color: #f7fafc;
}

.footable-row-detail-name {
    font-weight: 600 !important;
}

.icon-row-custom {
    width: auto;
    border: 0;
    display: block;
    height: auto;
    font-size: inherit;
    margin: 0;
    padding: 0;
}

    .icon-row-custom:hover,
    .icon-row-custom:focus {
        color: #252525 !important;
    }

.btn-outline.icon-row-custom {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
    margin: 0 7.5px;
}

    .btn-outline.icon-row-custom i {
        font-size: 20px;
    }


/********** pagination **********/

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination > li {
        display: inline;
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
            margin-bottom: 5px;
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            z-index: 2;
            color: #252525;
            background-color: #eee;
            border-color: #ddd;
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 3;
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

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

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

    .pager li {
        display: inline;
    }

        .pager li > a,
        .pager li > span {
            display: inline-block;
            padding: 5px 14px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 15px;
        }

            .pager li > a:hover,
            .pager li > a:focus {
                text-decoration: none;
                background-color: #eee;
            }

    .pager .next > a,
    .pager .next > span {
        float: right;
    }

    .pager .previous > a,
    .pager .previous > span {
        float: left;
    }

    .pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
    }


/********** Pagination/ Pager **********/

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.pagination > li > a,
.pagination > li > span {
    color: #2b2b2b;
}

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

.pagination-split li {
    margin-left: 5px;
    display: inline-block;
    float: left;
}

    .pagination-split li:first-child {
        margin-left: 0;
    }

    .pagination-split li a {
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

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

.pager li > a,
.pager li > span {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: #2b2b2b;
}


/* == footer pagination == */

.footable > tfoot .pagination {
    margin: 15px 0 15px 0 !important;
}

.footable.no-paging .hide-if-no-paging {
    display: none;
}

.footable-row-detail {
    background-color: #f5f5f5
}

.footable-row-detail-inner {
    display: table;
}

.footable-row-detail-row {
    display: table-row;
    line-height: 1.5em;
}

.footable-row-detail-group {
    display: block;
    line-height: 2em;
    font-size: 1.2em;
    font-weight: bold;
}

.footable-row-detail-name {
    display: table-cell;
    font-weight: 500;
    padding-right: 1em;
    padding-bottom: 5px;
}

.footable-row-detail-value {
    display: table-cell;
}

.footable-odd {
    background-color: #f7f7f7;
    background-color: #ffffff !important;
}


/**************** icon *****************/

.btn-in-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    font-size: 15px;
}

    .btn-in-icon > i {
        font-size: 19px;
        margin: 0 5px 0 5px;
    }

.m-t-10 {
    margin-top: 10px !important;
}

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


/**************** jConfirm *****************/

.jconfirm-box .predict-list {
    margin-bottom: 0;
}


/**************** box hilight *****************/

.box-hilight {
    background-color: #000;
}


/**************** label in table *****************/

.label.label-transparent {
    color: #797979;
}

.label-rounded {
    border: 1px solid #e5e5e5;
}

.label.label-text-success,
.label-text-success {
    color: #6ab04d;
}

.label.label-text-blue,
.label-text-blue {
    color: #2196F3;
}

.label.label-text-default,
.label-text-default {
    color: #767679;
}

.label-icon > .small-icon {
    font-size: 17px;
    position: relative;
    top: 4px;
    margin: 0 5px 0 0;
}

.label.label-icon {
    font-size: 95%;
}

.label.text-lightyellow {
    color: #f90;
}

.label.text-lightgreen {
    color: #6ab04d;
}

    .label.text-lightgreen i {
        color: #6ab04d;
    }

.label.text-lightred {
    color: #ad060e;
}

    .label.text-lightred i {
        color: #ad060e;
    }

.label.text {
    font-size: 95%;
}


/**************** feature box *****************/

.features-box {
    padding: 30px 15px 0 15px;
}


/**************** btn upload image *****************/

.btn.btn-primary.btn-upload-image {
    width: 170px;
    max-width: 170px;
    min-width: 170px;
    height: 50px;
    font-size: 13px !important;
    border: 1px solid #e0e0e0 !important;
    background-color: #fcfcfc !important;
    color: #767679;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn.btn-primary.btn-upload-image:hover,
    .btn.btn-primary.btn-upload-image:focus {
        background-color: #ad060e !important;
        border: 1px solid #ad060e !important;
        color: #ffffff !important;
    }

.profile-info .title {
    font-size: 13px !important;
}


/**************** btn lg *****************/

.btn-regis-lg {
    /* height: 50px; */
    font-size: 18px;
}


/**************** jConfirm with table *****************/

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content .table.table-hover.table-none-boder tr td {
    border-top: 0;
}


/**************** jConfirm with table *****************/

.input-num {
    font-size: 20px;
}


/**************** panel banner *****************/

.panel-banner {
    background-color: #0b191a;
}


/**************** placeholder *****************/

.keypad-input:focus::-webkit-input-placeholder {
    color: #ccc !important;
}


/**************** footer widgets icon *****************/

.widgets-icon > .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.widgets-icon > .icon {
    border: 1px solid #353535;
}

    .widgets-icon > .icon img {
        height: 25px;
    }


/**************** nav *****************/

.welcome-text {
    display: none;
}

.welcome-text {
    height: 45px;
    position: relative;
    float: right;
    line-height: 45px;
}


/**************** btn flat *****************/

.btn-flat.form-group {
    margin-bottom: 15px !important;
}


/**************** btn hide *****************/

.hide-desktop {
    display: none;
}


/**************** bubbly button *****************/

.nav.navbar-menu {
    position: relative;
}

.bubbly-button-group {
    position: absolute;
    left: 61%;
    top: 50%;
}

.bubbly-button {
    display: inline-block;
    font-size: 17px;
    padding: 0.813em 4em;
    -webkit-appearance: none;
    appearance: none;
    background-color: #ff1901;
    color: #fff;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    box-shadow: none;
    margin: 0 5px 0 5px;
    float: left;
    border-radius: 25px;
    min-width: 180px;
    padding: 0.736em 0;
    text-align: center;
}

    .bubbly-button:hover,
    .bubbly-button:focus {
        background-color: #d2000d;
        transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
        transition: all 0.2s ease-in-out;
        outline: 0;
        color: #fff !important;
    }

    .bubbly-button:before,
    .bubbly-button:after {
        position: absolute;
        content: '';
        display: block;
        width: 140%;
        height: 100%;
        left: -20%;
        z-index: -1000;
        transition: all ease-in-out 0.5s;
        background-repeat: no-repeat;
    }


/*************** register ***************/

._icon {
    /* z-index: 2; */
    cursor: pointer;
}


/*************** icons checked ***************/

.icon-checked {
    width: 22px;
    height: 100%;
    background-color: transparent;
    position: absolute;
    right: 1px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .icon-checked > i {
        font-size: 17px;
        color: #27ae61;
    }

.icon-checked {
    display: none;
}

.box-bodyitem-block.checked.success .icon-checked {
    width: 22px;
    height: 100%;
    background-color: transparent;
    position: absolute;
    right: 1px;
    color: #27ae61;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}


/*************** heading ***************/

.heading {
    max-width: 480px;
    left: 46%;
    font-size: 17px;
    top: 65%;
}

    .heading .icon-before {
        transform: rotate(180deg);
    }

    .heading .icon-heading {
        font-size: 20px;
    }


/*************** breadcrumb bg white ***************/

.section-breadcrumb.bg-white li a {
    color: #252525;
    font-weight: 600;
}

.section-breadcrumb.bg-white li {
    color: #ad060e;
    font-weight: 600;
}

    .section-breadcrumb.bg-white li a .icons {
        color: #000;
    }


/*************** btn small  ***************/

.btn.btn-small {
    min-width: 30.3333333%;
}


/*************** jConfirm **************/

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow: inherit;
}


/*************** tabs horizontal **************/

.tabs-horizontal.form-group {
    margin-bottom: 7.5px;
}

.tabs-horizontal.border-radius {
    border-radius: 6px;
}

.tabs-horizontal > .box-header-tabs {
    border-radius: 6px;
    border-bottom: 0;
}


/*************** collapse **************/

.collapse {
    padding: 0 !important;
}


/*************** card content **************/

.card-content.card-md {
    width: 100%;
}

    .card-content.card-md .sort-wrapper {
        min-width: 100%;
        max-width: 100%;
    }

    .card-content.card-md .search-wrapper {
        min-width: 100%;
        max-width: 100%;
    }

.box-card-header {
    /* min-width: 33%; */
}


/*************** box full **************/

.full-box.full-box-width.bg-lightred.mb-0 {
    min-height: 450px;
}


/*************** nav **************/

.nav-top > .container {
    height: 150px;
}

.nav-top {
    height: 150px;
}

.logo-wrap {
    height: 150px;
}

    .logo-wrap .logo {
        height: 150px;
    }


/*************** nav **************/

.icon-arrows {
    /* display: none; */
}

.userinfo-wrap {
    /* padding: 0 310px 0 15px; */
    min-width: 67%;
}

.user-toggle {
    /* margin: 0; */
}


/*************** tab **************/

.accordion.tabs-horizontal.form-group .card .card-header {
    padding: 14.5px 0;
    background-color: #ad060e;
}

.accordion.tabs-horizontal.form-group .card {
    width: 33.33333%;
    float: left;
}

    .accordion.tabs-horizontal.form-group .card .btn {
        padding: 0;
        font-size: 12px;
        width: 100%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        outline: none;
        height: 100%;
    }

    .accordion.tabs-horizontal.form-group .card:first-of-type {
        border-radius: 6px 0 0 6px !important;
    }

    .accordion.tabs-horizontal.form-group .card:last-of-type {
        border-radius: 0 6px 6px 0 !important;
    }

    .accordion.tabs-horizontal.form-group .card .card-header:first-child {
        border-radius: 0;
    }


/*************** nav **************/

.userinfo-list > strong {
    line-height: 14px;
}


/*************** text **************/

.text-green {
    color: #6ab04d !important;
}


/*************** full image **************/

.flex-thumbnail {
    border-radius: 15px;
    overflow: hidden;
}

.image.full-image {
    width: 100%;
}


/*************** box collapsed **************/

.box-collapsed-wrapper {
    padding: 0;
}


/*************** steamline **************/

.sl-date {
    font-size: 10px;
    color: #98a6ad;
}

.text-info {
    color: #85b4d0 !important;
}

.sl-right {
    padding-left: 35px;
}

.sl-left {
    float: left;
    margin-left: -20px;
    z-index: 1;
    margin-right: 15px;
}

    .sl-left img {
        max-width: 40px !important;
    }

.img-circle {
    border-radius: 50%;
}

.steamline {
    position: relative;
    border-left: 1px solid rgba(120, 130, 140, 0.13);
    margin-left: 20px;
}

    .steamline hr {
        border-top: 1px solid rgba(120, 130, 140, 0.13);
    }


/*************** btn heading **************/

.btn-heading {
    height: 45px;
}

.btn-split {
    height: 45px;
}

.split-mobile {
    height: 45px;
}

.btn-press {
    height: 45px;
}


/*************** small-sliders **************/

.small-sliders {
    cursor: pointer;
    border-radius: 6px 6px 0 0;
}

    .small-sliders .box-hilight {
        border-radius: 6px 6px 0 0;
        overflow: hidden;
    }

    .small-sliders .box-slider {
        border-radius: 6px 6px 0 0;
    }


    /*************** small sliders **************/

    .small-sliders .slick-prev {
        top: 25px;
        left: 10px;
        z-index: 1;
    }

    .small-sliders .slick-next {
        top: 25px;
        right: 10px;
    }


/*************** user info left side **************/

.icon-text > .lg {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
}

.icon-text {
    font-size: 16px;
    padding: 0 15px;
}


/*************** mobile-tabs **************/

.mobile-tabs {
    height: 45px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    margin-bottom: 7.5px;
}

    .mobile-tabs > li {
        float: left;
        width: 33.333333%;
        height: 100%;
        display: flex;
    }

        .mobile-tabs > li > a {
            text-decoration: none !important;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background-color: #ad060e;
            color: #fff !important;
            word-break: break-word;
            cursor: pointer;
            text-align: center;
        }

        .mobile-tabs > li > a {
            border-right: 1px solid #8d0008;
            ;
        }

        .mobile-tabs > li:last-child > a {
            border: 0;
        }

        .mobile-tabs > li > a.active-link.active {
            background-color: #8d0008;
            color: #fff !important;
        }

.card-box {
    margin-bottom: 7.5px;
}

.card-text-small {
    font-size: 14px;
    color: #000;
    padding: 0 0;
    border: 0;
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    border-radius: 6px;
    overflow: hidden;
}

.card-box-in {
    margin-bottom: 7.5px;
}

.card-box .card-box-in {
    display: none;
}

.card-box.popularNumber #popularNumber_content {
    display: block;
}

.card-box.closedNumber #closedNumber_content {
    display: block;
}

.card-box.mostNumber #mostNumber_content {
    display: block;
}


/*************** promotion **************/

.box-promo-in {
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 6px 7px 50px 10px rgba(123, 123, 123, 0.09);
    width: 100%;
    float: left;
}

.promo-desc {
    padding: 15px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    width: 100%;
    float: left;
    border: 1px solid #e5e5e5;
    text-align: center;
}

.promo-thumbnail {
    margin-bottom: 15px;
    position: relative;
    height: 177px;
    overflow: hidden;
    border-radius: 15px;
}

    .promo-thumbnail img {
        max-width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #000;
    }

.promo-desc .promo-title {
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    color: #000;
}

.separator.center {
    width: 150px;
    height: 1px;
}

.promo-desc .promo-text {
    height: 45px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .promo-desc .promo-text,
    .promo-desc .promo-text p {
        color: #999;
        font-size: 14px;
        line-height: 22px;
    }

.promo-label {
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    color: #000;
    margin-bottom: 0;
}


/*===================*/


/*.section-breadcrumb{
	transition: all 0.25s;
}
.nav-bottom{
	transition: all 0.25s;
}*/

.post-listing {
    background: #FFF;
    border-bottom: 4px solid #d2000d;
    -webkit-box-shadow: 0 0 3px #CACACA;
    -moz-box-shadow: 0 0 3px #cacaca;
    box-shadow: 0 0 3px rgba(135, 135, 135, 0.37);
}

.post-listing {
    position: fixed;
    z-index: 3;
    /* top: 150px; */
    right: -350px;
    width: 300px;
    border-top: 4px solid #dd0610;
    border-bottom: 0 none;
    padding: 12px 15px 5px 15px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    /* height: 150px; */
    border-radius: 0;
    /* right: 30px; */
    bottom: 469px;
    bottom: 369px;
    bottom: 39%;
    -webkit-box-shadow: 0 6px 100px 0 rgba(135, 135, 135, 0.33);
    -moz-box-shadow: 0 6px 100px 0 rgba(135, 135, 135, 0.33);
    box-shadow: 0 6px 100px 0 rgba(135, 135, 135, 0.33);
}

#check-also-box.show-check-also,
#check-also-box.check-also-left #check-also-close {
    right: 0;
    left: auto;
}

#check-also-close {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1px 8px 0px;
    background: #dd0610;
    color: #FFF;
    font-size: 19px;
    cursor: pointer;
}

    #check-also-close i {
        font-size: 16px;
    }

#check-also-box .block-head h3 {
    text-align: center;
    margin: 0 0 15px;
    display: block;
    float: none;
    font-size: 18px;
    font-weight: 600;
}

.check-also-post .post-title {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 600;
}

.post-title {
    color: #0b1b1b;
}

.check-also-post p {
    line-height: 20px;
}


/* == btn vallet == */

.demos-post-closed {
    position: fixed;
    width: auto;
    height: auto;
    right: 0px;
    bottom: 50%;
    /* bottom: 469px; */
    /* left: 0; */
    z-index: 3;
    background-color: #fff;
    background-color: #dd0610;
    padding: 13px 15px 13px 15px;
    box-sizing: border-box;
    will-change: transform;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.09);
    /* opacity: 0; */
    width: 50px;
    text-align: center;
    border-radius: 6px 0 0 6px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.demos-post-closed {
    /* transform: translate3d(0, 0, -411px); */
    /* -webkit-transform: translate3d(0, 0, -411px); */
    -moz-transform: translate3d(0, 0, -411px);
    /* transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1); */
    /* opacity: 1; */
}

.post-closed-text {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-right: 25px;
    margin-right: 15px;
    padding: 0;
    text-align: center;
    margin: 0 0 10px 0;
}

.post-closed-section-item.post-toolbar-closed-opener-holder {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.demos-post-closed {
    cursor: pointer;
}

    .demos-post-closed.hide {
        transform: translate3d(0, 0, 411px);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 411px);
        -webkit-transition-delay: 0s;
        right: -100px;
        transform: translate3d(0, 57%, 0);
        -webkit-transform: translate3d(0, 0%, 0);
        -moz-transform: translate3d(0, 57%, 0);
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

.post-closed-text p {
    color: #272727;
    font-style: normal;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
}

    .post-closed-text p::after {
        content: '|';
        position: absolute;
        right: -3px;
        font-size: 16px;
        top: -1px;
        color: #d6d6d6;
        content: none;
    }

.post-closed-section-item.post-toolbar-closed-opener-holder svg {
    display: block;
    transform: rotate(-180deg) scale(0.8);
    -webkit-transform: rotate(-180deg) scale(0.8);
    -moz-transform: rotate(-180deg) scale(0.8);
}

.post-toolbar-closed-opener {
    position: relative;
    /* top: -1px; */
    height: 24px;
}

.work-list-menu {
    height: auto;
}

.features-box-body img {
    max-width: 100%;
}

.post-toolbar-closed-opener .icon {
    color: #fff;
}

.qode-demos-toolbar.open .post-listing {
    right: 30px;
}

.qode-demos-toolbar.open .demos-post-closed {
    /* opacity: 0; */
    right: -100px;
}


/* == icon== */

.demos-post-closed .icon:hover {
    animation: rotating 3s linear infinite;
}

@-webkit-keyframes rotating {
    from {
        transform: rotate(0deg);
    }

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


/*************** rank **************/

.box-rank-in {
    padding: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 6px 7px 50px 10px rgba(123, 123, 123, 0.09);
    width: 100%;
    float: left;
    /* background-color: #000; */
}

.rank-desc {
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    float: left;
    text-align: center;
}

.rank-thumbnail {
    height: 230px;
}

.rank-thumbnail {
    margin-bottom: 5px;
    position: relative;
    /* height: 177px; */
    overflow: hidden;
    border-radius: 15px;
    padding: 35px 15px 0 15px;
}

    .rank-thumbnail img {
        /* max-width: 100%; */
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* background-color: #000; */
    }

.rank-desc .rank-title {
    font-size: 22px;
    font-weight: 800;
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    color: #ffffff;
    font-family: var(--fontWeightBold);
    margin-bottom: 10px;
}

.rank-thumbnail-in {
    width: 190px;
    height: 190px;
    margin: 5px auto 5px;
    padding: 0px;
}

.rank-thumbnail .rank-thumbnail-in img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

.separator.center {
    width: 150px;
    height: 1px;
}

.rank-desc .rank-text {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

    .rank-desc .rank-text,
    .rank-desc .rank-text p {
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 5px;
    }

.rank-label {
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    color: #ffffff;
    margin-bottom: 0;
    text-decoration: underline;
}

.separator.black.rank {
    height: 2px;
}

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

.btn.btn-deepblue {
    color: #fff;
    background-color: #1a3a6b;
    border: 1px solid #1a3a6b;
}

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

.btn.btn-full {
    width: 100% !important;
    max-width: 100% !important;
}

.btn.btn-bold {
    font-weight: 600;
}

.btn.btn-text-large {
    font-size: 19px;
}


/* == pricing == */

.pricing-container {
    overflow: hidden;
    width: 100%;
    float: left;
    position: relative;
}

.pricing-details.pricing-detail-web {
    padding: 0 0 0 15px;
    border-radius: 0;
    overflow: hidden;
    width: 80%;
    float: left;
    background-color: transparent;
    position: relative;
}

.pricing-details.pricing-detail-side {
    padding: 0;
    overflow: hidden;
    width: 20%;
    float: left;
    background-color: #ffffff;
    position: relative;
    border-radius: 15px;
}

.pricing-section-head h3 {
    width: calc(108% - 90px);
    font-size: 16px;
    font-weight: 400;
    color: #4b4b4b;
    margin: 0 0 0 60px;
    color: #fff;
    font-family: var(--fontWeightBold);
    font-weight: 500;
}

.pricing-section-head .icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 46px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background-color: #ae0106;
    color: #fff;
    top: 0;
}

.pricing-section-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 13px 0;
    background-color: #ae0106;
}

.side-heading {
    padding: 20px 22px;
    text-align: center;
    color: #767679;
    background-color: #990002;
}

.pricing-head-in {
    height: 90px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .pricing-head-in img {
        /* height: 100%; */
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        float: left;
        max-height: 100%;
    }

.side-heading .title {
    font-size: 30px;
    margin: 10px 0 5px 0;
    color: #fff;
}

.side-heading p {
    color: #ffffff;
}

.side-heading,
.pricing-card.pricing-card-light.first .pricing-card-head,
.pricing-card.pricing-card-light.second .pricing-card-head,
.pricing-card.pricing-card-light.third .pricing-card-head,
.pricing-card.pricing-card-light.fourth .pricing-card-head {
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
}

.pricing-side-detail.pricing-side-multi {
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
}

.pricing-section-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 10.5px 0;
    background-color: #ffffff;
    border-top: 1px solid #f5f6f8;
}

    .pricing-section-list:first-child {
        border-top: 0;
    }

    .pricing-section-list .icon {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 46px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        background-color: #ffffff;
        color: #555;
        top: 0;
        font-size: 14px;
    }

    .pricing-section-list p {
        width: calc(100% - 47px);
        font-size: 15px;
        font-weight: 400;
        margin: 0 0 0 47px;
        color: #767679;
    }

.pricing-card {
    width: 100%;
    display: inline-block;
    padding: 0;
    border-radius: 15px;
    overflow: hidden;
    /* padding-bottom: 22px; */
}

.pricing-card-head {
    padding: 20px 15px !important;
    text-align: center;
    color: #767679;
}

    .pricing-card-head.box-rank-bg {
        height: 130px;
    }

.pricing-card.pricing-card-light.first .pricing-card-head {
    background: linear-gradient(to top, #132025, #527f92);
    background-color: #142229;
}

.pricing-card.pricing-card-light.first .pricing-detail-head {
    background-color: rgb(207, 207, 207);
    background-color: #223338;
}

.pricing-card.pricing-card-light.first .pricing-detail-footer {
    background-color: rgb(207, 207, 207);
}

.pricing-card.pricing-card-light.second .pricing-card-head {
    background: linear-gradient(to top, #2e230c, #d19528);
    background-color: #382c12;
}

.pricing-card.pricing-card-light.second .pricing-detail-head {
    background-color: rgb(220, 207, 198);
    background-color: #56390c;
}

.pricing-card.pricing-card-light.second .pricing-detail-footer {
    background-color: rgb(220, 207, 198);
}

.pricing-card.pricing-card-light.third .pricing-card-head {
    background: linear-gradient(to top, #1f2021, #9ea0a0);
    /* background-color: #1e1f20; */
}

.pricing-card.pricing-card-light.third .pricing-detail-head {
    background-color: rgb(204, 208, 211);
    background-color: #343434;
}

.pricing-card.pricing-card-light.third .pricing-detail-footer {
    background-color: rgb(204, 208, 211);
}

.pricing-card.pricing-card-light.fourth .pricing-card-head {
    background: linear-gradient(to top, #281734, #9d64c1);
    /* background-color: #291735; */
}

.pricing-card.pricing-card-light.fourth .pricing-detail-head {
    background-color: rgb(196, 202, 214);
    background-color: #291b32;
}

.pricing-card.pricing-card-light .pricing-card-head.box-rank-bg {
    background-size: cover;
    background-position: center center;
    padding-top: 0;
    background-repeat: no-repeat;
}

.pricing-card.pricing-card-light.first .pricing-card-head.box-rank-bg {
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Siver-s.jpg?v=1);
}

.pricing-card.pricing-card-light.second .pricing-card-head.box-rank-bg {
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Gold-s.jpg?v=1);
}

.pricing-card.pricing-card-light.third .pricing-card-head.box-rank-bg {
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Platinum-s.jpg?v=1);
}

.pricing-card.pricing-card-light.fourth .pricing-card-head.box-rank-bg {
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Diamond-s.jpg?v=1);
}

.pricing-card.pricing-card-light.fourth .pricing-detail-footer {
    background-color: #c4cad6;
}

.pricing-card-head .title {
    font-size: 26px;
    color: #fff;
}

.pricing-card-head .sub-title {
    font-size: 16px;
    color: #fff;
}

.pricing-card-head.first {
    background-color: #000;
    background: linear-gradient(to left top, rgb(79, 79, 79), rgb(141, 141, 141));
}

.pricing-detail-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 9px 0;
    background-color: rgb(207, 207, 207);
}

.pricing-detail-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 10.5px 0;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #f5f6f8;
}

    .pricing-detail-list p {
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        color: #767679;
    }

    .pricing-detail-list:nth-of-type(1) {
        border-top: 0;
    }

.pricing-detail.pricing-multi {
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
}

.pricing-detail-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 22.5px 0;
    background-color: rgb(207, 207, 207);
}

.pricing-card-desc {
    display: none;
}

.pricing-detail-head.hide-in .icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 46px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background-color: #ae0106;
    color: #fff;
    top: 0;
}

.pricing-detail-head.hide-in h3 {
    /* display: none; */
    /* width: calc(108% - 90px); */
    font-size: 16px;
    font-weight: 400;
    color: #4b4b4b;
    /* margin: 0 0 0 60px; */
    color: #fff;
    font-family: var(--fontWeightBold);
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 4px 0;
}

.pricing-card-footer {
    display: none;
}

.btn.btn-deepgray {
    color: #fff;
    background-color: #2a3a3f;
    border: 1px solid #2a3a3f;
}

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


/* == new prizing card == */

.pricing-thumbnail-in {
    width: 90px;
    height: 90px;
    margin: 0 auto;
}

    .pricing-thumbnail-in img {
        width: 100%;
    }

.btn.btn-deeporange {
    color: #fff;
    background-color: #5f400e;
    border: 1px solid #5f400e;
}

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

.btn.btn-deepgreenblue {
    color: #fff;
    background-color: #393b3c;
    border: 1px solid #393b3c;
}

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

.btn.btn-deepbluelight {
    color: #fff;
    background-color: #2b233d;
    border: 1px solid #2b233d;
}

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

.pricing-card.pricing-card-light.active .icon-info-arrow {
    transform: rotate(180deg);
}

.pricing-card.pricing-card-light .icon-info-arrow {
    margin: 0 15px;
}

.pricing-detail-list .pricing-detail-label {
    display: none;
}

.error-msg.small {
    font-size: 13px;
    text-align: left;
    margin: 0px 0 10px 0;
}

.btn-verify {
    margin: 0 0 0 15px;
    width: 125px;
    min-width: 125px;
    border-radius: 50px;
    background-color: #6ab04d;
    color: #fff;
    font-size: 1.0rem;
}

.btn-verify {
    height: 50px;
    font-size: 0.92rem;
    line-height: 16px;
}


/* == account form == */

.form-info-item.form-info-col {
    display: block;
}

.form-info-item.inner .form-info-label {
    /*justify-content: flex-start;*/
}

.form-info-item.inner .form-info-label {
    min-width: auto;
}

.form-info-label {
    min-width: auto;
}


/* == section slider hide xs == */

.section-slider-hide-xs {
    display: block;
}


/* == section slider hide xs == */

#top-link-block a {
    cursor: pointer;
}


/* == back to top == */

#top-link-block a {
    color: #ff1901;
    border: 2px solid #ff1901;
}

    #top-link-block a:hover {
        border-color: #ff1901;
        background-color: #ff1901;
    }


/* == == */

.box-body-block.box-body-heightest {
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
}


/* == nav wrap == */

.navbar-wrap {
    z-index: 3;
}

.search-wrapper {
    z-index: 2;
}

.overlay {
    z-index: 4;
}


/* == nav == */

.navbar-wrap {
    z-index: 5;
}

.status-problem {
    color: #f90;
}


/* == upload slip2 == */

#slip2 {
    height: 190px;
    width: 190px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 15px solid #f0f1f3;
    margin: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#slip2 {
    overflow: hidden;
}

#mediaFile2 {
    position: absolute;
    top: -1000px;
}

#slip2 .profile-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#slip2 .dashes {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    border-radius: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 1;
    overflow: hidden;
}

#slip2 label {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 30px;
    color: #ccc;
    opacity: 1;
    font-size: 14px;
}

#slip2.dragging {
    background-image: none !important;
}

    #slip2.dragging .dashes {
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-name: spin;
        animation-name: spin;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 1 !important;
    }

    #slip2.dragging label {
        opacity: 0.5 !important;
    }

#slip2.hasImage .dashes,
#slip2.hasImage label {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#slip2.hasImage .image-icon {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.profile-info {
    padding-top: 70px;
}

.profile-image .table {
    padding: 0 15px 5px 0;
}


/* == mb == */

.mb-50 {
    margin-bottom: 50px !important;
}


/* == jConfirm with thumb img == */

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content .table.table-hover.table-none-boder tr td.slip-thumb {
    height: 350px !important;
    overflow: hidden;
}

    .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content .table.table-hover.table-none-boder tr td.slip-thumb img {
        width: 100%;
    }


/* == == */

.card-content.card-md {
    float: left;
}


/* == search wrapper == */

.search-wrapper {
    z-index: 1;
}


/* == date picker == */

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


/**/


/**/


/* == separato == */

.separator.fluid {
    border-top: 1px solid rgba(209, 209, 209, 0.1);
}


/* == check box transfer == */

.box-check-info input[type='checkbox'] + label.transfer {
    padding: 0;
}


/* == radio group == */

.radio-control {
    position: relative;
    float: left;
    padding: 0 0 0 30px;
}

.radio-inner-group {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0;
    cursor: pointer;
}

.radio-title {
    margin: 0;
    font-size: 14px;
    color: #767679;
}

.radio-icon {
    font-size: 22px;
    color: #999;
}

.radio-checked {
    display: none;
    color: #6aaf4d;
}

.radio-item.checked .radio-inner-group .radio-checked {
    display: block;
}

.radio-item.checked .radio-inner-group .radio-uncheck {
    display: none;
}


/* == label with text == */

.label.text-red {
    color: #ad060e;
}


/* == box layout text bg == */

.box-layout-text {
    background-color: #fcfcfc;
}


/* == banner contain == */

.banner-containner {
    padding-top: 15px;
}

.sort-icon {
    background-color: #ae0106;
    cursor: default;
}

#sort_icon i {
    cursor: pointer;
}

.sort-button {
    cursor: default;
}

#datepicker .date-text {
    cursor: pointer;
}

.date-icon {
    cursor: default;
}

.search-button {
    background-color: #ae0106;
}

.box-disabled {
    opacity: 0.5;
}

    .box-disabled .btn,
    .box-disabled .btn:hover,
    .box-disabled .btn:focus {
        background-color: #edf0f1 !important;
        border: 1px solid #edf0f1 !important;
        color: #999 !important;
        cursor: default !important;
    }


/* == box disabled == */

.box-default-in {
    width: 100%;
    float: left;
    position: relative;
    background-color: #000;
    border-radius: 8px;
}

.box-default .layout-disabled {
    display: none;
}

.box-default.box-disabled .layout-disabled {
    display: block;
}

.layout-disabled {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background-color: #fbfbfc;
    opacity: 0.1;
}

.btn.btn-promo-link {
    height: 50px;
    width: 100%;
    border-radius: 0 0 15px 15px;
    background-color: #ae0106;
    color: #fff;
    display: FLEX;
    align-items: center;
    justify-content: center;
}

.box-prize-in {
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 6px 7px 50px 10px rgba(123, 123, 123, 0.09);
    width: 100%;
    float: left;
    background-color: #fff;
    text-align: center;
}

.prize-title {
    font-size: 18px;
    font-weight: 600;
    color: #767679;
    margin: 7.5px 0;
}

.prize-plaintext {
    color: #767679;
    font-size: 16px;
}

.box-prize-icon {
    width: 70%;
    margin: 15px auto 15px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 25px;
    font-weight: 600;
}

.box-prize-icon {
    color: #767679;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
}

.icon-prize-wrap {
    margin: 0 7px 0 0;
    position: relative;
}

.box-prize-btn {
    width: 50%;
    margin: 0 auto;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}

    .box-prize-btn.box-prize-info {
        color: #fff;
        background-color: #3299dc;
        border: 1px solid #3299dc;
    }

        .box-prize-btn.box-prize-info:hover,
        .box-prize-btn.box-prize-info:focus {
            color: #fff;
            background-color: #3299dc;
            border: 1px solid #3299dc;
        }

.box-prize.prize-completed .icon-prize-wrap {
    background-color: #6ab14b;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    color: #fff;
}

.box-prize-icon .icon-prize-wrap .icon {
    font-size: 18px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.box-prize-icon .text {
    font-size: 15px;
}

.box-prize.prize-completed .box-prize-icon {
    color: #6ab14b;
}

.box-prize.prize-pending .icon-prize-wrap {
    height: 25px;
}

    .box-prize.prize-pending .icon-prize-wrap .icon {
        font-size: 30px;
        color: #f90;
    }

.box-prize.prize-pending .box-prize-icon {
    color: #f90;
}

.box-prize.prize-disabled .icon-prize-wrap {
    display: none;
}

.box-prize.prize-disabled {
    opacity: 0.5;
}

    .box-prize.prize-disabled .box-prize-btn.box-prize-info {
        background-color: #edf0f1;
        border: 1px solid #edf0f1;
        color: #999;
        cursor: default;
    }


/* == rank bg == */

.box-rank-bg {
    background-size: cover;
    background-position: center center;
    padding-top: 0;
    background-repeat: no-repeat;
}

.box-rank-first .box-rank-bg {
    background-image: url(../images/banner_home/banner_5.jpg);
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Siver-l.jpg?v=1);
}

.box-rank-second .box-rank-bg {
    background-image: url(../images/banner_home/banner_5.jpg);
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Gold-l.jpg?v=1);
}

.box-rank-third .box-rank-bg {
    background-image: url(../images/banner_home/banner_5.jpg);
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Platinum-l.jpg?v=1);
}

.box-rank-fourth .box-rank-bg {
    background-image: url(../images/banner_home/banner_5.jpg);
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    background-image: url(../images/vip/Diamond-l.jpg?v=1);
}


/* == modal == */

.background-black {
    position: fixed;
    width: 100%;
    float: left;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.70);
    display: none;
    z-index: 50;
    overflow-y: scroll;
}

.background-black {
    overflow-y: scroll;
}

.nice-wrapper {
    border-radius: 8px;
    position: relative;
    background-color: #ae0106;
}

.padding-10 {
    padding: 10px;
}

.modal-heading {
    padding-right: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.get-nicer {
    position: absolute;
    top: 50%;
    max-width: 1500px;
    width: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 50;
    background-color: #ffffff;
    border-radius: 8px;
}

.icon-closemodal {
    font-size: 26px;
    float: right;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

.modal-title {
    font-size: 24px;
    color: #fff;
    margin-bottom: 2px;
    font-weight: 600;
}

.modal-subtitle {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.box-flex-end {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0;
    border: 0;
    padding-top: 15px;
}

.get-nicer .flex-col.last-two .box-body {
    border-top: 0;
}


/* == promotion page == */

.promo-plain-label {
    display: none;
}

.promo-date {
    display: none;
}

.promo-desc a {
    width: 100%;
}

.label.label-small {
    float: left;
    display: block;
    width: auto;
    padding: 4px 5px;
    margin: 0 5px 5px 7.5px;
    font-size: 9px;
}

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


/* == news page == */

.box-card-label {
    display: none;
}

.button-event {
    display: none;
}


/* == Help center == */

.work-list-wrap {
    z-index: 1;
}


/* == Lotto gov == */

.box-body-block.box-number-closed {
    height: 100px;
}

    .box-body-block.box-number-closed.scroll {
        max-height: 126px;
        min-height: 126px;
        overflow-y: auto;
    }

.box-body-block.box-number-popular {
    height: 100px;
}

    .box-body-block.box-number-popular.scroll {
        max-height: 126px;
        min-height: 126px;
        overflow-y: auto;
    }


/* == table history == */

.table-bordered > tbody > tr > .footable-visible.footable-last-column {
    width: 140px;
}

.label.label-table {
    font-size: 100%;
}


/* == lotto gov == */

.box-header-flexitem.flexitem-md {
    font-size: 16px;
}

.box-body-flexitem {
    /* font-size: 14px; */
}

    .box-body-flexitem.flexitem-lg {
        padding: 0 3px;
    }

.box-bodyitem-block.block-bg.more-expand .box-expand {
    right: 0;
}

.box-expand {
    border-radius: 0;
}

.box-expand-item {
    background-color: transparent;
    border: 0;
}


/* == lotto gov predict step == */

.icon-check-ok {
    width: 10%;
    float: left;
    position: relative;
    height: 40px;
    cursor: pointer;
}

    .icon-check-ok > i {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #ccc;
    }

    .icon-check-ok.active > i {
        color: #27ae61;
    }


/* == lottogov == */

.box-body-block.box-body-xxs .box-body-flexitem.flexitem-sm {
    width: 16.666667%;
}

.box-header-block.box-header-xxs .box-header-flexitem.flexitem-sm {
    width: 16.666667%;
}

.box-expand {
    right: 0;
}

.box-bodyitem-block.openTextfield .box-expand {
    display: none;
}


/* == label info == */

.form-info-label {
    height: 100%;
}


/* == room == */

.box-panel-label.box-panel-label-sm.grade .box-label-item::after {
    display: none;
}

.box-label-item-sm::after {
    display: none;
}

.box-panel-label {
    /*top: 15px;*/
}


/* == thumbnail == */

.box-detail-thumbnail {
    background-color: transparent;
    margin-bottom: 15px;
    height: auto;
}


/* == News page == */

.box-detail-inner {
    padding: 0;
}

.entry {
    float: none;
}

.thumb-detail-image {
    top: 0;
    transform: translate(-50%, 0);
}

.box-card-thumbnail .thumb-image {
    height: auto;
    width: 100%;
}

.news-cards {
    width: auto;
    float: none;
}


/* == btn == */

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

.mb-15 {
    margin-bottom: 15px !important;
}


/* == footer == */

.sitemap-wrapper {
    padding: 0 0px;
}


/* == news == */

.article-img > .image {
    height: auto !important;
}

.article-desc {
    background-color: #000;
}


/* == slider == */

.slide.news_slider .slick-prev.slick-arrow,
.slide.news_slider .slick-next.slick-arrow {
    display: none !important;
}

.slick-dots li button:before {
    font-size: 10px;
}

.slide.news_slider .slick-dots {
    bottom: -30px;
}


/* == pagination == */

.pagination .prev {
    width: unset;
    height: unset;
}

.pagination a.prev {
    margin-right: unset;
}


/* == worklist == */

.work-list-wrap {
    float: none;
}

.p-10 {
    padding: 10px;
}

.regis-description {
    padding-right: 15px;
    padding-left: 15px;
    word-break: break-word;
}

.card.card-regis {
    border: 0;
}

.card.card-body.card-regis.shadow.p-10 {
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1) !important;
}

.regis-description.scroll {
    min-height: 780px;
    max-height: 780px;
}

.box-card-label {
    display: flex;
}

.box-card-related .box-card-body {
    padding: 15px;
}

.card-heading {
    line-height: 25px;
}

.box-card-related .box-card-footer {
    padding: 0 15px 20px 15px;
}

.box-card-iteminner.box-card-related .card-title {
    margin: 0;
    line-height: 30px;
}

.box-card-iteminner.box-card-related .card-subtitle {
    margin: 0;
    font-size: 15px;
}

.box-card-iteminner.box-card-related .box-card-desc p {
    font-size: 15px;
}

.box-card-related .group-view {
    display: none;
}

.entry.text-black > li {
    color: #999;
}

@media screen and (max-width:991px) {
    .box-card-related .box-card-body {
        padding: 0;
    }

    .box-card-related .group-view {
        display: block;
        float: left;
    }

    .box-card-related .promo-view {
        font-size: 9px;
        color: #767679;
    }

        .box-card-related .promo-view i {
            font-size: 10px;
            margin: 0 5px;
            position: relative;
            top: 1px;
            color: #999;
        }

    .box-card-related .entry {
        display: none !important;
    }
}

.box-layout-arrow {
    background-color: #fcfcfc;
}

.dropdown-menu.usermenu .dropdown-item:hover {
    color: #fff;
}

.box-card-iteminner.box-card-related .card-title {
    color: #000;
}

.dropdown-menu.lang-menu::after {
    border-left: 8px solid #d2000d;
}

.dropdown-menu.lang-menu .dropdown-item {
    border-radius: 4px;
}

    .dropdown-menu.lang-menu .dropdown-item:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .dropdown-menu.lang-menu .dropdown-item:first-child:last-child {
        border-radius: 4px;
    }

    .dropdown-menu.lang-menu .dropdown-item:hover,
    .dropdown-menu.lang-menu .dropdown-item:focus,
    .dropdown-menu.lang-menu .dropdown-item.active,
    .dropdown-menu.lang-menu .dropdown-item.active:hover,
    .dropdown-menu.lang-menu .dropdown-item.active:focus {
        background-color: #e70412;
    }

.dropdown-menu.lang-menu:hover:after,
.dropdown-menu.lang-menu:focus:after {
    border-left: 8px solid #e70412;
}

@media screen and (max-width:991px) {
    .box-card-desc {
        display: block;
        height: 40px;
    }

        .box-card-desc p {
            line-height: 20px;
            font-size: 12px !important;
        }

    .box-card-iteminner.box-card-related .card-title {
        line-height: 23px;
    }

    .dropdown-menu.lang-menu .dropdown-item {
        background-color: #d2000d;
    }
}

.box-expand-item.shrink {
    display: none;
}

.dropdown-menu.usermenu .dropdown-item:hover {
    background-color: #e70412;
}

.dropdown-menu.usermenu:hover:after,
.dropdown-menu.usermenu:focus::after {
    border-left: 8px solid #e70412;
}

.dropdown-menu.usermenu .dropdown-item:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.dropdown-menu.usermenu .dropdown-item:first-child:last-child {
    border-radius: 4px;
}

.dropdown-menu.usermenu .dropdown-item {
    padding: 0 0 0 35px;
}

.box-default-inner .filter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 6px;
    opacity: 0.2;
    cursor: default;
    background-color: rgba(0, 0, 0, 0.32);
}

.box-default-inner.disabled {
    opacity: 0.5;
}

.box-default-inner .filter {
    display: none;
}

.box-default-inner.disabled .filter {
    display: block;
}

.nav.nav-tabs.module-tabs .nav-link.active {
    color: #ad070f;
}

.nav.nav-tabs.module-tabs .nav-link {
    color: #767679;
    font-weight: 700;
    padding: .65rem 1rem;
}

.tab-arrow-list::after {
    z-index: 0;
}

@media screen and (max-width: 991px) {
    .box-header-flexitem.flexitem-md {
        font-size: 11px;
    }

    .mobile-tabs {
        height: 35px;
    }

    .btn-heading {
        height: 40px;
        font-size: 17px;
    }

    .box-hilight {
        height: 35px;
    }

    .box-header-flexitem.flexitem-md {
        height: 35px;
    }

    .small-sliders .slick-prev {
        top: 20px;
    }

    .small-sliders .slick-next {
        top: 20px;
    }

    .btn-press {
        height: 35px;
    }

    .event-press-text {
        font-size: 17px;
    }

    .btn-split {
        height: 35px;
        font-size: 15px;
    }

    .split-mobile {
        height: 35px;
    }

    .btn.btn-tabs.btn-predict.btn-predict-xs {
        height: 35px;
        font-size: 15px;
    }

    .predict-list .box-header-center {
        height: 35px;
        font-size: 15px;
    }

    .header-title-center {
        font-size: 15px;
        line-height: 35px;
    }

    .box-header-flexitem {
        height: 35px;
    }

    .tab-arrow.tab-arrow-flex .tab-arrow-list:nth-child(odd)::after {
        display: none;
    }

    .tab-arrow.tab-arrow-flex .tab-arrow-list:nth-child(even)::after {
        display: none;
    }

    .tab-arrow.tab-arrow-flex .tab-arrow-list .tab-arrow-inner {
        height: 35px;
    }

    .tab-arrow.tab-arrow-flex .tab-arrow-list {
        height: 35px;
    }

    .tab-arrow.tab-arrow-flex {
        height: 35px;
    }

    .keypad-input {
        height: 55px;
    }

    .input-number {
        height: 55px;
    }

    .box-body-flexitem {
        display: flex;
    }
    /* == Deposit page == */
    .icon-wrap {
        width: 100%;
        border-radius: 0;
        border: 0;
        height: auto;
        margin-bottom: 0;
    }

    .icon-outer:nth-of-type(2) {
        padding: 0;
    }

    .icon-outer {
        width: 100%;
    }

    .icon-inner {
        padding: 0;
        border-radius: 0;
        padding: 10px 0;
        border: 0;
        background-color: #252525;
    }

    .icon-text {
        top: 0;
        transform: translateY(0);
        background-color: #252525;
    }

    .expand-xs-btn {
        border-radius: 0;
        height: 5px;
    }

    .expand-xs-wrapper {
        height: 20px;
    }

    #profile {
        height: 120px;
        width: 120px;
    }

        #profile label {
            padding: 0;
        }

    .btn.btn-primary.btn-upload-image {
        height: 40px;
    }

    .icon-outer:nth-of-type(1) {
        padding: 0;
    }

        .icon-outer:nth-of-type(1) .icon-inner {
            background-color: #fff;
            height: 120px;
            border-radius: 50%;
            width: 120px;
            margin: 5px auto;
            left: 50%;
            transform: translateX(-50%);
        }

        .icon-outer:nth-of-type(1) .icon-wrap {
            background-color: #fcfcfc;
        }
}

@media screen and (max-width: 767px) {
    .box-bank-content {
        min-height: 50px;
        margin: 0;
    }

    .box-bank-btn {
        top: -2.5px;
    }
}

.btn.btnsort {
    width: 100%;
    float: left;
    padding: 5px;
    height: 60px;
    position: relative;
    margin: 0;
    background-color: #0ead99;
    background-color: #ffffff;
    width: 100%;
    border-radius: 30px;
    padding: 0 30px 0 60px;
    cursor: pointer;
    float: left;
    overflow: hidden;
}

.btn-sort-icon {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-color: #ae0106;
    border: 6px solid #fff;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none !important;
}

    .btn-sort-icon i {
        color: #fff;
    }

.btn-sort-arrow {
    color: #999;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    float: left;
    width: 50px;
    height: 100%;
    text-align: center;
    line-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-toggle::after {
    display: none;
}

.sort-toggle {
    width: 100%;
    height: 100%;
    padding: 0 15px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    margin: 8px 0 0 0;
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    border-radius: 6px;
    display: none;
    z-index: 3;
    border: 1px solid #ddd;
    background-color: #ffffff;
    border-radius: 6px;
}

.icon-cancel {
    position: absolute;
    top: -10px;
    right: 0;
    color: #d1d1d1;
    color: #d2000d;
    z-index: 1;
    cursor: pointer;
}

    .icon-cancel:hover {
        color: #9b060f !important;
    }

.features-box {
    padding: 30px 50px;
}

.profile-image {
    overflow: visible;
}

@media screen and (max-width: 1440px) {
    #profile {
        width: 190px;
    }
}

@media screen and (max-width: 991px) {
    .profile-inner .icon-cancel {
        right: 5px;
    }

    .features-box {
        padding: 15px;
    }

    .nav.nav-tabs.module-tabs {
        margin-bottom: 15px;
    }

    .icon-cancel {
        right: 0px;
    }

    #profile {
        width: 100%;
    }

    .model {
        width: 100%;
    }

    .profile-image .table {
        padding: 0;
        margin-bottom: 15px;
    }

    #profile {
        margin: 10px auto;
    }
}

.text.center p,
.case-select-inner p {
    text-indent: 0;
    line-height: 15px;
}

.work-list-wrap {
    z-index: 2;
}

@media screen and (max-width: 991px) {
    .case-select-inner p {
        text-indent: 0;
    }
}

/*.features-box p {
    text-indent: 50px;
}*/

.nav.nav-tabs.module-tabs .nav-link.active {
    background-color: #ad060e;
    color: #fcfcfc;
    border: 1px solid #ad060e;
    position: relative;
}

.nav.nav-tabs.module-tabs .nav-link {
    background-color: #252525;
    color: #fff;
    font-weight: 300;
    font-size: 14px;
}

    .nav.nav-tabs.module-tabs .nav-link:hover {
        border: 1px solid #ad060e;
        color: #fcfcfc;
    }

    .nav.nav-tabs.module-tabs .nav-link.active:hover {
        border: 1px solid #960008;
        color: #fcfcfc;
    }

    .nav.nav-tabs.module-tabs .nav-link:hover {
        border: 1px solid #ad060e;
        color: #fcfcfc;
        background-color: #960008;
    }

    .nav.nav-tabs.module-tabs .nav-link.active::after {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #ffffff;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -5px;
        transform: rotate(-90deg);
    }

.nav.nav-tabs.module-tabs .nav-link {
    margin-right: 2px;
    padding: .65rem 0.75rem;
}


/*== date picker == */

.datepicker {
    border-radius: .25rem;
    direction: ltr;
}

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

.datepicker-inline {
    width: 220px;
}

.datepicker-rtl {
    direction: rtl;
}

    .datepicker-rtl.dropdown-menu {
        left: auto;
    }

    .datepicker-rtl table tr td span {
        float: right;
    }

.datepicker-dropdown {
    top: 0;
    left: 0;
    padding: 20px 22px;
    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);
}

    .datepicker-dropdown.datepicker-orient-left:before {
        left: 6px;
    }

    .datepicker-dropdown.datepicker-orient-left:after {
        left: 7px;
    }

    .datepicker-dropdown.datepicker-orient-right:before {
        right: 6px;
    }

    .datepicker-dropdown.datepicker-orient-right:after {
        right: 7px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:before {
        top: -7px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:after {
        top: -6px;
    }

    .datepicker-dropdown.datepicker-orient-top:before {
        bottom: -7px;
        border-top: 7px solid white;
        border-bottom: 0;
    }

    .datepicker-dropdown.datepicker-orient-top:after {
        bottom: -6px;
        border-top: 6px solid #fff;
        border-bottom: 0;
    }

.datepicker table {
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

    .datepicker table tr td {
        border-radius: 50%;
    }

    .datepicker table tr th {
        font-weight: 500;
        border-radius: .25rem;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        font-size: .875rem;
        width: 36px;
        height: 36px;
        transition: all .15s ease;
        text-align: center;
        border: none;
    }

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #adb5bd;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    cursor: pointer;
    background: white;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    cursor: default;
    color: #dee2e6;
    background: none;
}

.datepicker table tr td.highlighted {
    border-radius: 0;
}

    .datepicker table tr td.highlighted.focused {
        background: #ad060e;
    }

    .datepicker table tr td.highlighted.disabled,
    .datepicker table tr td.highlighted.disabled:active {
        color: #ced4da;
        background: #ad060e;
    }

.datepicker table tr td.today {
    background: white;
}

    .datepicker table tr td.today.focused {
        background: white;
    }

    .datepicker table tr td.today.disabled,
    .datepicker table tr td.today.disabled:active {
        color: #8898aa;
        background: white;
    }

.datepicker table tr td.range {
    color: #fff;
    border-radius: 0;
    background: #ad060e;
}

    .datepicker table tr td.range.focused {
        background: #ad060e;
    }

    .datepicker table tr td.range.disabled,
    .datepicker table tr td.range.disabled:active,
    .datepicker table tr td.range.day.disabled:hover {
        color: #d2000d;
        background: #ad060e;
    }

    .datepicker table tr td.range.highlighted.focused {
        background: #cbd3da;
    }

    .datepicker table tr td.range.highlighted.disabled,
    .datepicker table tr td.range.highlighted.disabled:active {
        color: #dee2e6;
        background: #e9ecef;
    }

    .datepicker table tr td.range.today.disabled,
    .datepicker table tr td.range.today.disabled:active {
        color: #fff;
        background: #ad060e;
    }

.datepicker table tr td.day.range-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.datepicker table tr td.day.range-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.datepicker table tr td.day.range-start.range-end {
    border-radius: 50%;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.highlighted:hover,
.datepicker table tr td.day.range:hover {
    color: #fff;
    background: #ad060e;
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover {
    color: #fff;
    background: #ad060e;
    box-shadow: none;
}

.datepicker table tr td span {
    line-height: 54px;
    display: block;
    float: left;
    width: 23%;
    height: 54px;
    margin: 1%;
    cursor: pointer;
    border-radius: 4px;
}

    .datepicker table tr td span:hover,
    .datepicker table tr td span.focused {
        background: #e9ecef;
    }

    .datepicker table tr td span.disabled,
    .datepicker table tr td span.disabled:hover {
        cursor: default;
        color: #dee2e6;
        background: none;
    }

    .datepicker table tr td span.active,
    .datepicker table tr td span.active:hover,
    .datepicker table tr td span.active.disabled,
    .datepicker table tr td span.active.disabled:hover {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
    }

    .datepicker table tr td span.old,
    .datepicker table tr td span.new {
        color: #8898aa;
    }

.datepicker .datepicker-switch {
    width: 145px;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
    cursor: pointer;
}

    .datepicker .datepicker-switch:hover,
    .datepicker .prev:hover,
    .datepicker .next:hover,
    .datepicker tfoot tr th:hover {
        background: #e9ecef;
    }

    .datepicker .prev.disabled,
    .datepicker .next.disabled {
        visibility: hidden;
    }

.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
    background-color: #ad060e;
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
    background-color: #ad060e;
}

@media screen and (max-width: 1280px) {
    .icon-md {
        display: none;
    }

    .nav.nav-tabs.module-tabs .nav-link {
        padding: .65rem 0.35rem;
        font-size: 12px;
    }
}

@media screen and (max-width: 991px) {
    .nav.nav-tabs.module-tabs .nav-item {
        text-align: center;
    }

        .nav.nav-tabs.module-tabs .nav-item:nth-of-type(1) {
            width: 55%;
        }

        .nav.nav-tabs.module-tabs .nav-item:nth-of-type(2) {
            width: 45%;
        }

    .regis-description {
        padding: 0;
    }

    .card.card-body.card-regis {
        padding: 0;
    }
}

@media screen and (max-width: 575px) {
    .nav.nav-tabs.module-tabs .nav-link {
        font-size: 11px;
    }
}

.datepicker table tr td.highlight {
    background-color: #42B373 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.datepicker table tr td.active.highlight {
    background-color: #ad060e !important;
}

.datepicker table tr td.today {
    background-color: #fdf59a;
}

.userinfo-wrap {
    background-color: #da2c36;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}

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

    .btn.btn-danger.button-login:hover,
    .btn.btn-danger.button-login:focus {
        background-color: #7a0204 !important;
        border-color: #7a0204 !important;
        color: #fff;
    }

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

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

.navmenu-link {
    background-color: #9c191f;
}

.navmenu-list:first-child .navmenu-link {
    background-color: #9c191f;
}

.navmenu-link.active {
    background-color: #da2c36
}

.navmenu-list:first-child .navmenu-link.active {
    background-color: #da2c36
}

.navmenu-list:first-child .navmenu-link:hover {
    background-color: #da2c36
}

.navmenu-list:first-child.active:first-child {
    background-color: #da2c36;
    padding: 0;
}

.navmenu-list.active .navmenu-link,
.navmenu-list.active .navmenu-link:focus,
.navmenu-list.active .navmenu-link:hover {
    background-color: #da2c36
}

.input-field {
    width: 166px;
}

.btn-head-arrow {
    background-color: transparent;
    margin: 0;
    width: 15px;
}

p {
    text-indent: 0px;
}

.heading {
    font-weight: 600;
    font-size: 16px;
}

.profile-image {
    overflow: hidden;
}

#problem-image {
    overflow: unset !important;
}


/* == box bg black == */

.full-box.bg-black {
    background-color: #f7f8fa;
}

    .full-box.bg-black .lead {
        color: #0a1a1a;
    }

    .full-box.bg-black .sub-lead {
        color: #000;
        font-size: 1.1rem;
        font-weight: 600;
        font-family: var(--fontWeightLight);
    }

    .full-box.bg-black p {
        color: #938f8f;
    }

    .full-box.bg-black .separator.small {
        background-color: #dadada;
    }

.btn-regis.btn-flat {
    background-color: #da2c36 !important;
    border-color: #da2c36 !important;
}

    .btn-regis.btn-flat:hover,
    .btn-regis.btn-flat:focus {
        background-color: #ad060e !important;
        border-color: #ad060e !important;
    }

.bubbly-button-group .bubbly-button:hover,
.bubbly-button-group .bubbly-button:focus {
    background-color: #9c191f !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}

.bubbly-button {
    background-color: #da2c36;
    transition: all .15s ease;
}

.user-toggle {
    border: 7px solid #da2c36;
}

.icon-arrows {
    background-color: #da2c36;
}

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

#check-also-close {
    background: #da2c36;
}

.post-listing {
    border-top: 4px solid #da2c36;
}

.review-box {
    background-color: #9c191f;
}

    .review-box::after {
        border-left: 8px solid #9c191f;
    }

.review-date {
    color: #000;
}

.review-author {
    color: #000;
    font-weight: 600;
}

.full-box.bg-lightred {
    background-color: #fff;
}

.article-img {
    border-radius: 8px;
}

.article-bottom > .btn.btn-readmore.btn-icon {
    background-color: #da2c36;
    border-color: #da2c36;
    border-radius: 25px;
    color: #fff;
}

    .article-bottom > .btn.btn-readmore.btn-icon:hover,
    .article-bottom > .btn.btn-readmore.btn-icon:focus {
        background-color: #9c191f;
        border-color: #9c191f;
        color: #fff;
    }

.review-title {
    color: #000;
}

.review-subtitle {
    color: #575757;
    font-size: 16px;
}

.article-entry > li {
    color: #575757;
    font-size: 15px;
}

.article-description > p {
    color: #767679;
    line-height: 1.5rem;
    font-size: 16px;
}


/* == footer == */

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

.footer-widgets {
    background-color: #9c191f;
}

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

.social-link {
    border: 1px solid #bf252e;
}

.widgets-icon > .icon {
    border: 1px solid #bf252e;
}

.sitemap-link {
    border-right: 1px solid #fff;
}

    .sitemap-link:hover {
        color: #cdcccc;
    }


/* == section bg secondary == */

.bg-secondary {
    background-color: #f7f8fa !important;
}

.news-wrap {
    width: 100%;
    float: left;
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    padding: 25px;
    border-radius: 15px;
    background-color: #ffffff;
}

.pd-3 {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.news-wrap .slick-dots {
    display: none !important;
}

.article-entry {
    margin-bottom: 5px;
}

.article-head {
    border-bottom: 1px solid #dcdcdc;
}

.news-wrap .slick-dotted.slick-slider {
    margin: 0;
}

.news-wrap .article-bottom > .btn.btn-readmore.btn-icon {
    margin-bottom: 0 !important;
}

.news-wrap .article-img {
    height: 255px;
}

.article-img > .image {
    height: auto !important;
    width: 120% !important;
}

.article-detail {
    padding: 0 0 0 25px;
}

.review-wrap {
    width: 100%;
    float: left;
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    padding: 25px 50px;
    border-radius: 15px;
    background-color: #ffffff;
}

    .review-wrap .slick-dotted.slick-slider {
        margin-bottom: 0 !important;
    }

    .review-wrap .slick-dots {
        display: none !important;
    }


/* == slider == */

.slick-dots li button:before {
    color: #999;
    font-size: 11px !important;
}


/* == section banner == */

.bg-default {
    background-color: #e8eced !important;
}

.section-wrapper.section-banner {
    padding: 3rem 0 2.2rem 0;
}

.banner-containner {
    padding: 0 16px;
}


/* == section content == */

.webcontent-wrap {
    width: 100%;
    float: left;
    padding: 25px 50px 25px 0;
    font-size: 16px;
}

    .webcontent-wrap p,
    .webcontent-wrap span,
    .webcontent-wrap label {
        color: #767679;
        font-size: 16px;
    }

    .webcontent-wrap .lead {
        color: #000;
    }

    .webcontent-wrap .sub-lead {
        color: #000;
        font-weight: 600;
        font-size: 17px;
    }

    .webcontent-wrap .separator.small {
        background-color: #cccccc;
    }


/* == prize == */

.box-center-body.bg-lightred .flex-col.big-boney > .box-header {
    background-color: #9c191f;
}

.box-center-body.bg-lightred .box-header {
    background-color: #9c191f;
}

.flex-col.three > .flex-col.front-three > .box-header {
    background-color: #9c191f;
}

.box-center-body.bg-lightred .flex-col.three > .flex-col.last-three > .box-header {
    background-color: #9c191f;
}

.box-center-body.bg-lightred .flex-col.big-boney > .box-body {
    background-color: #fff;
    color: #464646;
    border: 1px solid #e5e5e5;
    border-width: 1px 1px 1px 0;
}

.box-center-body.bg-lightred .text-big-boney {
    color: #464646;
}

.box-center-body.bg-lightred {
    margin: 0 0 15px 0;
    border-radius: 0;
    overflow: hidden;
    /* background-color: #ffffff; */
    border: 0;
}

    .box-center-body.bg-lightred .flex-col.last-two .box-body {
        background-color: #fff;
        border: 1px solid #e5e5e5;
        color: #464646;
        border-width: 0 1px 1px 0;
    }

    .box-center-body.bg-lightred .text-last-two {
        color: #464646;
    }

    .box-center-body.bg-lightred .flex-col.front-three .box-body {
        border: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        border-width: 0 1px 1px 0;
    }

    .box-center-body.bg-lightred .text-front-three:nth-of-type(1) {
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff;
        color: #464646;
        font-size: 27px;
    }

    .box-center-body.bg-lightred .text-front-three {
        background-color: #ffffff;
        color: #464646;
        font-size: 27px;
    }

    .box-center-body.bg-lightred .text-last-three:nth-of-type(1) {
        background-color: #fff;
        color: #464646;
        border-bottom: 1px solid #e5e5e5;
        font-size: 27px;
    }

    .box-center-body.bg-lightred .text-last-three {
        color: #464646;
        background-color: #ffffff;
        font-size: 27px;
    }

    .box-center-body.bg-lightred .flex-col.last-three .box-body {
        border: 1px solid #e5e5e5;
        border-width: 0 0 1px 0;
    }

.prize-wrap {
    width: 100%;
    float: left;
    border-radius: 15px;
    background-color: #fff;
    padding: 0 0 25px 0;
    -webkit-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 25px 0 rgba(0, 0, 0, .1);
    /* overflow: hidden; */
}

.text-with-icon {
    border-bottom: 0;
    padding: 0;
    float: right;
    width: auto;
    margin-top: 10px;
}

.icon-menu {
    float: left;
    color: #767679;
    margin-bottom: 10px;
    padding: 0 45px 0 0;
}

.icon-desc {
    color: #767679 !important;
    text-decoration: underline !important;
}

.icon-element .icon {
    font-size: 28px;
    position: relative;
    top: 3px;
    margin: 0 5px 0 0;
}

.header-red {
    background-color: #b01d25;
}

.header-expand-lg {
    padding: 26px;
    position: relative;
}

.flex-rows {
    float: left;
    background-color: #fff;
}

.flex-col.three {
    width: 101%;
}

[class*='btn-outline-'] {
    border-width: 2px;
}

.header-btn-group .btn {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color: #fff;
    font-size: 17px;
    min-width: 212px;
    font-weight: 300;
    letter-spacing: 0.75px;
}

    .header-btn-group .btn.rounded {
        border-radius: 25px !important;
    }

    .header-btn-group .btn.btn-large {
        height: 50px;
    }

.header-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .header-btn-group .btn-outline-danger {
        border-color: #c5323a;
    }

    .header-btn-group input.btn.btn-large:focus {
        background-color: #b01d25 !important;
    }

    .header-btn-group input.btn.btn-large:hover {
        background-color: #b01d25 !important;
    }

    .header-btn-group input.btn.btn-large {
        cursor: default !important;
    }


/* == date picker == */

.input-group.date.input-date-outline {
    border: 2px solid #c5323a;
    border-radius: 30px;
    height: 50px;
    display: flex;
    float: left;
}

    .input-group.date.input-date-outline .date-text {
        height: 46px;
        background-color: transparent;
        color: #fff;
    }

    .input-group.date.input-date-outline .arrow-icon.input-group-addon {
        /*height: 50px; */
    }

        .input-group.date.input-date-outline .arrow-icon.input-group-addon ._i {
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 16px;
            right: 0;
        }

.date-wrapper.date.date-lotto {
    width: 200px;
    min-width: 217px;
    height: 50px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.lotto-date-wrap {
    /* height: 50px; */
    /* position: relative; */
    float: left;
    display: flex;
}

body.open-date .datepicker.datepicker-dropdown {
    margin-top: 57px;
    /*     top: initial !important; */
}


/* == select lotto == */

.lotto-cat-wrap.dropdown .dropdown-menu {
    width: 295px;
}

.lotto-cat-button {
    border: 2px solid #c5323a;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 217px;
    height: 50px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    color: #fff;
    cursor: pointer;
}

.lotto-cat-icon {
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 16px;
}

    .lotto-cat-icon ._i {
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 16px;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        float: left;
        width: 50px;
        text-align: center;
        cursor: pointer;
    }

.dropdown-menu.dropdown-menu-lotto-cat {
    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;
    margin: 3px 0 3px 0;
    /* left: 50% !important; */
    /* transform: translate(-50%,50%) !important; */
}

    .dropdown-menu.dropdown-menu-lotto-cat .dropdown-item {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #252525;
        background-color: #060606;
        background-color: #ffffff;
        border-bottom: 1px solid #fff;
        border-bottom: 1px solid #f5f5f5;
        cursor: pointer;
        list-style: none !important;
        transition: all 0.25s;
        padding: 0;
    }

.dropdown-menu.dropdown-menu-lotto-cat {
    padding: 0;
}

    .dropdown-menu.dropdown-menu-lotto-cat .dropdown-item:hover,
    .dropdown-menu.dropdown-menu-lotto-cat .dropdown-item:focus {
        background-color: #e1e1e1;
        color: #000;
    }

    .dropdown-menu.dropdown-menu-lotto-cat .dropdown-item:last-child {
        border-bottom: 0;
    }

.dropdown-menu.usermenu {
    background-color: #da2c36 !important;
}

    .dropdown-menu.usermenu .dropdown-item.active {
        background-color: #e70412;
    }


/* == prize page == */

.flex-rows.flex-otherprize .box-header {
    background-color: #9c191f;
}

.flex-rows.flex-otherprize .flex-col.last-three .box-header {
    background-color: #9c191f;
}

.flex-rows.flex-otherprize .text-big-boney {
    color: #464646;
}

.flex-rows.flex-otherprize .text-last-two {
    color: #464646;
}

.flex-rows.flex-otherprize .text-front-three {
    color: #464646;
}

.flex-rows.flex-otherprize .text-last-three {
    color: #464646;
}

.flex-rows.flex-otherprize {
    background-color: transparent;
}

.nice-wrapper {
    background-color: #f7f8fa;
}

.modal-title {
    color: #000;
}

.modal-subtitle {
    color: #000;
}

.icon-closemodal {
    color: #9c191f;
}

@media screen and (max-width:1440px) {
    .icon-menu.icon-download {
        width: auto;
        padding-right: 25px;
    }

    .icon-menu.icon-share {
        width: auto;
        padding-right: 15px;
    }

    .icon-element {
        width: auto;
        height: auto;
        margin-right: 2px;
    }

        .icon-element .icon {
            font-size: 20px;
        }

    .webcontent-wrap {
        padding-left: 25px;
        padding: 15px 15px 50px 15px;
    }

    .review-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }

    .news-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }

    .userinfo-list {
        border: 0;
    }
}

@media screen and (max-width:1200px) {
    .col-md-6.webcontent-outer {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-md-6.prize-outer {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-sm-8.news-outer {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .col-sm-4.review-outer {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sitemap-link {
        border: 0;
    }
}

@media screen and (max-width:767px) {
    .header-expand-lg {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 25px;
        padding-bottom: 20px;
        width: 100%;
        float: left;
    }

    .header-btn-group {
        display: block;
        float: left;
        width: 100%;
        float: left;
    }

    .lotto-date-wrap {
        width: 100%;
        float: left;
    }

    .lotto-cat-wrap {
        margin-bottom: 15px;
    }

    .flex-col.last-two {
        margin-bottom: 0;
    }

    .flex-col.big-boney {
        margin-bottom: 0;
    }

    .lotto-cat-button {
        font-size: 14px;
    }

    .flex-rows.flex-otherprize .flex-col.three {
        width: 100%;
    }

    .flex-rows.flex-otherprize .big-boney > .box-body {
        border-right: 0;
    }
}

@media screen and (max-width:575px) {
    .article-detail {
        padding: 0;
    }

    .article-img > .image {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}


/* == section == */

#desktop_wrapper {
    display: block;
}

#mobile_wrapper {
    display: none;
}


/* == background == */

.bg-soft {
    background-color: #edf1f2 !important;
}


/* == text == */

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


/* == card == */

.card {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.pd-2-5 {
    position: relative;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.bb-0 {
    border-bottom: 0 !important;
}


/* == section collapse == */

.btn.btn-collapse-number .btn-inner--icon.down {
    bottom: -5px;
    top: initial;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.btn.btn-collapse-number .btn-inner--icon.top {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1px;
    display: none;
}

.section-collapse {
    padding-top: 0 !important;
    padding-bottom: 50px;
    margin-bottom: 0;
    padding-bottom: 65px;
}

.btn.btn-collapse-number {
    width: auto;
    height: 50px;
    color: #fff;
    background-color: #323234;
    border: 1px solid #323234;
    border-radius: 0 0 8px 8px !important;
    font-size: 16px;
    position: absolute;
    bottom: 15px;
}

    .btn.btn-collapse-number .btn-inner--icon i {
        font-size: 16px;
    }

    .btn.btn-collapse-number .btn-inner--icon {
        position: relative;
        top: -3px;
    }

    .btn.btn-collapse-number .btn-inner--text {
        position: relative;
        width: 100%;
        float: left;
        font-size: 14px;
        margin-bottom: 10px;
    }

.section-collapse.active {
    padding-top: 3rem !important;
}

    .section-collapse.active .btn.btn-collapse-number {
        bottom: 0;
        border-radius: 8px 8px 0 0 !important;
    }

        .section-collapse.active .btn.btn-collapse-number .btn-inner--icon.top {
            display: block;
        }

        .section-collapse.active .btn.btn-collapse-number .btn-inner--icon.down {
            display: none;
        }

        .section-collapse.active .btn.btn-collapse-number .btn-inner--text {
            margin-top: 10px;
        }

.card.shadow.card-default .card-header {
    background-color: #fff;
    border-bottom: 1px solid rgb(232, 236, 237);
    padding: 1.2rem 1rem;
    position: relative;
}

.package-wrapper.disabled .filter-blur {
    top: 63px;
}

.card.shadow.card-default .card-footer {
    background-color: #fff;
    border-top: 1px solid rgb(232, 236, 237);
    padding: 1.2rem 1rem;
    margin-top: 15px;
}

.package-wrapper .btn-group-footer {
    position: relative;
}

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

.card.card-default {
}

.card.card-overflow-hidden {
    overflow: hidden;
}

.card.card-default .card-body {
    padding: 1.0rem 13px;
}

.card-show-number .card-body {
    height: 193px;
    overflow: auto;
}

.package-slider .card-table-body {
    height: 330px;
    overflow: auto;
}


/* == reference by argon == */

.close {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    float: right;
    opacity: .5;
    color: rgba(0, 0, 0, .6);
    text-shadow: none;
}

    .close:not(:disabled):not(.disabled) {
        cursor: pointer;
    }

        .close:not(:disabled):not(.disabled):hover,
        .close:not(:disabled):not(.disabled):focus {
            text-decoration: none;
            opacity: .75;
            color: rgba(0, 0, 0, .6);
            outline: none !important;
            box-shadow: none !important;
        }

button.close {
    padding: 0;
    border: 0;
    background-color: transparent;
    -webkit-appearance: none;
}


/* == Modal == */

.modal-open {
    overflow: hidden;
}

    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
    }

.modal {
    position: fixed;
    z-index: 1050;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -25%);
}

@media screen and (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
}

.modal-dialog-centered {
    display: flex;
    min-height: calc(100% - (.5rem * 2));
    align-items: center;
}

    .modal-dialog-centered::before {
        display: block;
        height: calc(100vh - (.5rem * 2));
        content: '';
    }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 15px 35px rgba(50, 50, 93, .2), 0 5px 15px rgba(0, 0, 0, .17);
}

.modal-backdrop {
    position: fixed;
    z-index: 1040;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: .16;
    }

.modal-header {
    display: flex;
    padding: 1.25rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    align-items: flex-start;
    justify-content: space-between;
}

    .modal-header .close {
        margin: -1.25rem -1.25rem -1.25rem auto;
        padding: 1.25rem;
    }

.modal-title {
    line-height: 1.1;
    margin-bottom: 0;
}

.modal-body {
    position: relative;
    padding: 1.5rem;
    flex: 1 1 auto;
}

.modal-footer {
    display: flex;
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
    align-items: center;
    justify-content: flex-end;
}

    .modal-footer > :not(:first-child) {
        margin-left: .25rem;
    }

    .modal-footer > :not(:last-child) {
        margin-right: .25rem;
    }

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    overflow: scroll;
    width: 50px;
    height: 50px;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - (1.75rem * 2));
    }

        .modal-dialog-centered::before {
            height: calc(100vh - (1.75rem * 2));
        }

    .modal-content {
        box-shadow: 0 15px 35px rgba(50, 50, 93, .2), 0 5px 15px rgba(0, 0, 0, .17);
    }

    .modal-sm {
        max-width: 380px;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 800px;
    }
}

.modal-content {
    border: 0;
    border-radius: .3rem;
}

.modal-fluid .modal-dialog {
    margin-top: 0;
    margin-bottom: 0;
}

.modal-fluid .modal-content {
    border-radius: 0;
}

.modal-primary .modal-title {
    color: #fff;
}

.modal-primary .modal-header,
.modal-primary .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-primary .modal-content {
    color: #fff;
    background-color: #5e72e4;
}

    .modal-primary .modal-content .heading {
        color: #fff;
    }

.modal-primary .close > span:not(.sr-only) {
    color: #fff;
}

.modal-secondary .modal-title {
    color: #212529;
}

.modal-secondary .modal-header,
.modal-secondary .modal-footer {
    border-color: rgba(33, 37, 41, .075);
}

.modal-secondary .modal-content {
    color: #212529;
    background-color: #f4f5f7;
}

    .modal-secondary .modal-content .heading {
        color: #212529;
    }

.modal-secondary .close > span:not(.sr-only) {
    color: #fff;
}

.modal-success .modal-title {
    color: #fff;
}

.modal-success .modal-header,
.modal-success .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-success .modal-content {
    color: #fff;
    background-color: #2dce89;
}

    .modal-success .modal-content .heading {
        color: #fff;
    }

.modal-success .close > span:not(.sr-only) {
    color: #fff;
}

.modal-info .modal-title {
    color: #fff;
}

.modal-info .modal-header,
.modal-info .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-info .modal-content {
    color: #fff;
    background-color: #11cdef;
}

    .modal-info .modal-content .heading {
        color: #fff;
    }

.modal-info .close > span:not(.sr-only) {
    color: #fff;
}

.modal-warning .modal-title {
    color: #fff;
}

.modal-warning .modal-header,
.modal-warning .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-warning .modal-content {
    color: #fff;
    background-color: #fb6340;
}

    .modal-warning .modal-content .heading {
        color: #fff;
    }

.modal-warning .close > span:not(.sr-only) {
    color: #fff;
}

.modal-danger .modal-title {
    color: #fff;
}

.modal-danger .modal-header,
.modal-danger .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-danger .modal-content {
    color: #fff;
    background-color: #f5365c;
}

    .modal-danger .modal-content .heading {
        color: #fff;
        width: 100%;
        max-width: 100%;
        left: auto;
        top: initial;
        font-size: initial;
        font-weight: initial;
        position: initial;
        text-transform: uppercase;
        transform: translate(0%, 0%);
    }

.modal-danger .close > span:not(.sr-only) {
    color: #fff;
}

.modal-light .modal-title {
    color: #fff;
}

.modal-light .modal-header,
.modal-light .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-light .modal-content {
    color: #fff;
    background-color: #adb5bd;
}

    .modal-light .modal-content .heading {
        color: #fff;
    }

.modal-light .close > span:not(.sr-only) {
    color: #fff;
}

.modal-dark .modal-title {
    color: #fff;
}

.modal-dark .modal-header,
.modal-dark .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-dark .modal-content {
    color: #fff;
    background-color: #212529;
}

    .modal-dark .modal-content .heading {
        color: #fff;
    }

.modal-dark .close > span:not(.sr-only) {
    color: #fff;
}

.modal-default .modal-title {
    color: #fff;
}

.modal-default .modal-header,
.modal-default .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-default .modal-content {
    color: #fff;
    background-color: #172b4d;
}

    .modal-default .modal-content .heading {
        color: #fff;
    }

.modal-default .close > span:not(.sr-only) {
    color: #fff;
}

.modal-white .modal-title {
    color: #212529;
}

.modal-white .modal-header,
.modal-white .modal-footer {
    border-color: rgba(33, 37, 41, .075);
}

.modal-white .modal-content {
    color: #212529;
    background-color: #fff;
}

    .modal-white .modal-content .heading {
        color: #212529;
    }

.modal-white .close > span:not(.sr-only) {
    color: #fff;
}

.modal-neutral .modal-title {
    color: #212529;
}

.modal-neutral .modal-header,
.modal-neutral .modal-footer {
    border-color: rgba(33, 37, 41, .075);
}

.modal-neutral .modal-content {
    color: #212529;
    background-color: #fff;
}

    .modal-neutral .modal-content .heading {
        color: #212529;
    }

.modal-neutral .close > span:not(.sr-only) {
    color: #fff;
}

.modal-darker .modal-title {
    color: #fff;
}

.modal-darker .modal-header,
.modal-darker .modal-footer {
    border-color: rgba(255, 255, 255, .075);
}

.modal-darker .modal-content {
    color: #fff;
    background-color: black;
}

    .modal-darker .modal-content .heading {
        color: #fff;
    }

.modal-darker .close > span:not(.sr-only) {
    color: #fff;
}

.bg-gradient-primary {
    background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(87deg, #f4f5f7 0, #f4f4f7 100%) !important;
}

.bg-gradient-success {
    background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-info {
    background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}

.bg-gradient-warning {
    background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
}

.bg-gradient-danger {
    background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

.bg-gradient-light {
    background: linear-gradient(87deg, #adb5bd 0, #adaebd 100%) !important;
}

.bg-gradient-dark {
    background: linear-gradient(87deg, #212529 0, #212229 100%) !important;
}

.bg-gradient-default {
    background: linear-gradient(87deg, #172b4d 0, #1a174d 100%) !important;
}

.bg-gradient-white {
    background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-neutral {
    background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-darker {
    background: linear-gradient(87deg, black 0, black 100%) !important;
}


/* == popover == */

.popover {
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    position: absolute;
    z-index: 1060;
    top: 0;
    left: 0;
    display: block;
    max-width: 276px;
    text-align: left;
    text-align: start;
    white-space: normal;
    text-decoration: none;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    word-wrap: break-word;
    word-break: normal;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 0.75rem;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 .5rem 2rem 0 rgba(0, 0, 0, .2);
    text-shadow: none;
    line-break: auto;
    overflow: hidden;
}

    .popover .arrow {
        position: absolute;
        display: block;
        width: 1.5rem;
        height: .75rem;
        margin: 0 .3rem;
    }

        .popover .arrow::before,
        .popover .arrow::after {
            position: absolute;
            display: block;
            content: '';
            border-style: solid;
            border-color: transparent;
        }

.bs-popover-top,
.bs-popover-auto[x-placement^='top'] {
    margin-bottom: .75rem;
}

    .bs-popover-top .arrow,
    .bs-popover-auto[x-placement^='top'] .arrow {
        bottom: calc((.75rem + 1px) * -1);
    }

        .bs-popover-top .arrow::before,
        .bs-popover-auto[x-placement^='top'] .arrow::before,
        .bs-popover-top .arrow::after,
        .bs-popover-auto[x-placement^='top'] .arrow::after {
            border-width: .75rem .75rem 0;
        }

        .bs-popover-top .arrow::before,
        .bs-popover-auto[x-placement^='top'] .arrow::before {
            bottom: 0;
            border-top-color: transparent;
        }

        .bs-popover-top .arrow::after,
        .bs-popover-auto[x-placement^='top'] .arrow::after {
            bottom: 1px;
            border-top-color: #fff;
        }

.bs-popover-right,
.bs-popover-auto[x-placement^='right'] {
    margin-left: .75rem;
}

    .bs-popover-right .arrow,
    .bs-popover-auto[x-placement^='right'] .arrow {
        left: calc((.75rem + 1px) * -1);
        width: .75rem;
        height: 1.5rem;
        margin: .3rem 0;
    }

        .bs-popover-right .arrow::before,
        .bs-popover-auto[x-placement^='right'] .arrow::before,
        .bs-popover-right .arrow::after,
        .bs-popover-auto[x-placement^='right'] .arrow::after {
            border-width: .75rem .75rem .75rem 0;
        }

        .bs-popover-right .arrow::before,
        .bs-popover-auto[x-placement^='right'] .arrow::before {
            left: 0;
            border-right-color: transparent;
        }

        .bs-popover-right .arrow::after,
        .bs-popover-auto[x-placement^='right'] .arrow::after {
            left: 1px;
            border-right-color: #fff;
        }

.bs-popover-bottom,
.bs-popover-auto[x-placement^='bottom'] {
    margin-top: .75rem;
}

    .bs-popover-bottom .arrow,
    .bs-popover-auto[x-placement^='bottom'] .arrow {
        top: calc((.75rem + 1px) * -1);
    }

        .bs-popover-bottom .arrow::before,
        .bs-popover-auto[x-placement^='bottom'] .arrow::before,
        .bs-popover-bottom .arrow::after,
        .bs-popover-auto[x-placement^='bottom'] .arrow::after {
            border-width: 0 .75rem .75rem .75rem;
        }

        .bs-popover-bottom .arrow::before,
        .bs-popover-auto[x-placement^='bottom'] .arrow::before {
            top: 0;
            border-bottom-color: transparent;
        }

        .bs-popover-bottom .arrow::after,
        .bs-popover-auto[x-placement^='bottom'] .arrow::after {
            top: 1px;
            border-bottom-color: #fff;
        }

    .bs-popover-bottom .popover-header::before,
    .bs-popover-auto[x-placement^='bottom'] .popover-header::before {
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: 1.5rem;
        margin-left: -.75rem;
        content: '';
        border-bottom: 1px solid #fff;
    }

.bs-popover-left,
.bs-popover-auto[x-placement^='left'] {
    margin-right: .75rem;
}

    .bs-popover-left .arrow,
    .bs-popover-auto[x-placement^='left'] .arrow {
        right: calc((.75rem + 1px) * -1);
        width: .75rem;
        height: 1.5rem;
        margin: .3rem 0;
    }

        .bs-popover-left .arrow::before,
        .bs-popover-auto[x-placement^='left'] .arrow::before,
        .bs-popover-left .arrow::after,
        .bs-popover-auto[x-placement^='left'] .arrow::after {
            border-width: .75rem 0 .75rem .75rem;
        }

        .bs-popover-left .arrow::before,
        .bs-popover-auto[x-placement^='left'] .arrow::before {
            right: 0;
            border-left-color: transparent;
        }

        .bs-popover-left .arrow::after,
        .bs-popover-auto[x-placement^='left'] .arrow::after {
            right: 1px;
            border-left-color: #fff;
        }

.popover-header {
    font-size: 1rem;
    margin-bottom: 0;
    padding: .75rem .75rem;
    color: #32325d;
    border-bottom: 1px solid #f2f2f2;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    background-color: #fff;
}

    .popover-header:empty {
        display: none;
    }

.popover-body {
    padding: .75rem .75rem;
    color: #525f7f;
}

.btn-popover-head {
    position: absolute;
    top: 20px;
    right: 15px;
    color: #e4e4e4;
    padding: 0;
    margin: 0;
    height: 26px;
    cursor: pointer !important;
}

.btn.btn-popover-head i {
    font-size: 26px;
}

.btn.btn-popover-head:hover i,
.btn.btn-popover-head:focus i {
    color: #ffab18;
    color: #b01d25;
}

.icon-cancel--i {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 7.5px;
}

    .icon-cancel--i i {
        color: #b01d25;
        font-size: 10px;
    }

.btn.btn-cancel-head {
    height: 40px;
    width: 120px !important;
    min-width: 120px;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    font-size: 13px;
    padding-left: 0;
    padding-right: 0;
}


/* == btn == */

[class*='btn-outline-'] {
    border-width: 1px;
}

.btn.btn-radius-sm {
    border-radius: 0.45rem;
}

.btn.btn-text-sm {
    font-size: 14px;
    padding: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 200px;
}

    .btn.btn-text-sm .btn-inner--text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

.btn.btn-lightgreen {
    background-color: #b0d865;
    border: 1px solid #b0d865;
    color: #fff;
}

    .btn.btn-lightgreen:hover,
    .btn.btn-lightgreen:focus {
        background-color: #8db640;
        border: 1px solid #8db640;
        color: #fff;
    }

.btn.btn-group-present {
    padding: 0;
    position: relative;
    border-radius: 0.75rem !important;
    float: left;
    height: 42px;
    width: 185px;
}

    .btn.btn-group-present [class^='btn']:first-child {
        width: 70%;
    }

    .btn.btn-group-present [class^='btn']:last-child {
        width: 30%;
    }

    .btn.btn-group-present [class^='btn']:not(:first-child):not(:last-child) {
        border-radius: 0.75rem;
    }

    .btn.btn-group-present [class^='btn']:first-child:last-child {
        border-radius: 0.75rem 0 0 0;
    }

    .btn.btn-group-present .btn-lg {
        height: 40px;
        padding: 0;
        font-size: 14px;
    }

    .btn.btn-group-present [class^='btn']:not(:first-child) {
        border-radius: 0 0.45rem 0.45rem 0 !important;
    }

    .btn.btn-group-present [class^='btn'] {
        border-radius: 0.45rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: default !important;
    }

        .btn.btn-group-present [class^='btn']:not(:last-child) {
            border-radius: 0.45rem 0 0 0.45rem !important;
        }

.btn.btn-present {
    padding: 0;
    position: relative;
    border-radius: 0.75rem !important;
    float: left;
    height: 42px;
    width: 120px;
}

    .btn.btn-present [class^='btn'] {
        height: 40px;
        padding: 0;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: default !important;
        border: 0 !important;
    }

.btn-group-present .btn-green:hover,
.btn-group-present .btn-green:focus {
    color: #fff !important;
    background-color: #6ab04d !important;
    border-color: #6ab04d !important;
    cursor: default !important;
}

.btn-group-present .btn-lightgreen:hover,
.btn-group-present .btn-lightgreen:focus {
    color: #fff !important;
    background-color: #b0d865 !important;
    border-color: #b0d865 !important;
    cursor: default !important;
}

.btn-present .btn-green:hover,
.btn-present .btn-green:focus {
    color: #fff !important;
    background-color: #6ab04d !important;
    border-color: #6ab04d !important;
    cursor: default !important;
}

.btn.btn-present:not(:disabled):not(.disabled) {
    cursor: default !important;
}

.btn.btn-group-present:not(:disabled):not(.disabled) {
    cursor: default !important;
}

.tab-pane.tab-example-result {
    padding: 1.25rem;
    border-radius: .25rem;
    background-color: #f7f8f9;
}

.tab-pane.tab-example-result {
}

.badge-wrapper {
    height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 0 15px 0 15px;
}

.badge.badge-sm {
    font-size: 88%;
    color: #acacac;
}

.d-present-lg {
    padding: 0 0 0 185px;
    position: relative;
}

    .d-present-lg .btn.btn-group-present {
        position: absolute;
        top: 0;
        left: 0;
    }

.d-present-sm .btn.btn-present {
    position: absolute;
    top: 0;
    left: 0;
}

.d-present-sm {
    padding: 0 0 0 120px;
    position: relative;
}

.btn-group-footer [class^='btn'] {
    min-width: auto;
    max-width: fit-content !important;
    font-weight: 600;
    font-size: 15px;
    min-width: 160px;
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: .25rem;
    margin-right: 0.25rem;
}

    .btn-group-footer [class^='btn']:not(:last-child) {
        margin-top: .5rem;
        margin-bottom: .5rem;
        margin-right: .25rem;
    }

    .btn-group-footer [class^='btn']:not(:first-child) {
        margin-top: .5rem;
        margin-bottom: .5rem;
        margin-left: .25rem;
    }

.btn-group-footer .btn.btn-cancel-package {
    min-width: 50px !important;
    max-width: 50px !important;
}

.package-wrapper .btn.btn-cancel-package {
    background-color: #ad060e;
    border: 1px solid #ad060e;
    color: #ffffff;
    cursor: pointer !important;
}

    .package-wrapper .btn.btn-cancel-package.disabled {
        cursor: default !important;
    }

    .package-wrapper .btn.btn-cancel-package:hover,
    .package-wrapper .btn.btn-cancel-package:focus {
        background-color: #8b1117 !important;
        border: 1px solid #8b1117 !important;
        color: #ffffff !important;
    }

        .package-wrapper .btn.btn-cancel-package:hover i,
        .package-wrapper .btn.btn-cancel-package:focus i {
            color: #8b1117 !important;
        }

.btn-group-footer .btn.btn-rounded-icon .icon--text {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
}

.btn-group-footer .btn.btn-cancel-package .icon--text i {
    font-size: 12px;
    color: #ac060e;
}

.card-table-header {
    display: flex;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    flex-wrap: wrap;
    border-bottom: 0;
    border: 1px solid #ebebeb;
    border-radius: 15px 15px 0 0;
}

.card-table-header-item:last-child {
    border-radius: 0 15px 0 0;
}

.card-table-header-item:first-child {
    border-radius: 15px 0 0 0;
}

.card-table-header-item {
    text-align: center;
    flex: 1 1 auto;
    padding: 1.125rem 0;
    border-radius: 0;
}

    .card-table-header-item:not(:last-child):not(:last-child) {
        border-right: 1px solid #ebebeb;
    }

.card-table-header-text {
    font-weight: 600;
    font-size: 17px;
    color: #464646;
}

.card-table-body {
    padding: 1.0rem 5px;
    border: 1px solid #ebebeb;
    border-top: 0;
    border-radius: 0 0 15px 15px;
}

.badge-secondary {
    background-color: #b5b4ba;
}

.badge-md {
    font-size: 13px;
    font-weight: 300;
    padding: .55em .75em;
}

.card-alter-text .badge.badge-rounded {
    padding: 0.50rem 0.95rem;
    height: 50px;
}

.card-table-body-item {
    text-align: center;
    flex: 1 1 auto;
    max-width: 33.3333%;
}

.card-table-body .card-table-body-row:last-child {
    margin-bottom: 0 !important;
}

.card-table-body-text {
    display: flex;
    justify-content: center;
    font-size: 14px;
    align-items: center;
    height: 100%;
    color: #767679;
}

.card-header-slider {
    padding: 1.0rem;
    padding-bottom: 0;
}

.card-header-check {
    padding: 0 1.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57%;
    margin: 0 auto;
    height: 60px;
    border: 1px solid #ebebeb;
    border-radius: 50px;
    background-color: #fff;
}

.package-wrapper .card-header-slider.disabled .btn-inner--icon {
    background-color: #ecedef;
}

.card-header-check .btn-inner--icon {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #7bbb5d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    margin-right: 10px;
}

.card-header-check .btn-inner--text {
    font-weight: 600;
    font-size: 17px;
    color: #464646;
}

.card-table-body-text .badge {
    min-width: 127px;
    max-width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* == edit order predict == */

.order-predict-list.active {
    background-color: #e2e3e7;
    background-color: #9c191f;
    padding: 5px 0;
}

    .order-predict-list.active .edit-order-field {
        display: block;
        z-index: 1;
        filter: blur(1px);
        -webkit-filter: blur(0);
        background-color: #fff;
    }

    .order-predict-list.active .card-table-body-text.amount-text {
        display: none;
    }

.order-predict-list .edit-order-field {
    height: 28px;
    position: relative;
    top: 1px;
}

    .order-predict-list .edit-order-field::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #ccc;
        font-weight: 300;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .order-predict-list .edit-order-field::-moz-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #ccc;
        font-weight: 300;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .order-predict-list .edit-order-field::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #ccc;
        font-weight: 300;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .order-predict-list .edit-order-field::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

.order-predict-list.active .card-table-body-text {
    color: #f8f9fb;
    color: #bfbec4;
}

.order-predict-list.active .card-table-inner--text.card-table-inner--bold {
    color: #fff;
    color: #bfbec4;
}

.order-predict-list.active .badge-secondary {
    background-color: #f2f2f2;
    background-color: #880b10;
    color: #600004;
    color: #bfbec4;
}

.order-predict-list.active .card-table-inner--icon.card-table-inner--first {
    background-color: #880b10;
}

    .order-predict-list.active .card-table-inner--icon.card-table-inner--first i {
        color: #bfbec4;
    }

.order-predict-list.active .card-table-body-setting {
    display: none;
}

.order-predict-list .card-table-body-text .card-table-body-check {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
    display: none;
}

.order-predict-list.active .card-table-body-text .card-table-body-check {
    display: block;
}

.order-predict-list .card-table-body-check i {
    font-size: 10px;
    color: #b01d25;
    position: relative;
    top: 0;
}


/* == package slide == */

.package-wrapper {
    position: relative;
    overflow: hidden;
}

.package-slider {
    position: relative;
}

    .package-slider .card-body {
        /* cursor: pointer; */
    }

    .package-slider .slick-prev.slick-arrow,
    .package-slider .slick-next.slick-arrow {
        position: absolute;
        top: 46px;
        left: 30px;
        width: 50px;
        height: 50px;
        z-index: 1;
        background-color: #9c191f;
        border-radius: 50%;
        border: 1px solid #9c191f;
        transition: all 0.15s ease-in-out;
    }

    .package-slider .slick-next.slick-arrow {
        left: inherit;
        right: 30px;
    }

    .package-slider .slick-prev.slick-arrow::before {
        color: #000;
    }

    .package-slider .slick-next.slick-arrow::before {
        color: #000;
    }

    .package-slider .slick-prev.slick-arrow:hover,
    .package-slider .slick-next.slick-arrow:hover {
        background-color: #7c0c11;
        transition: all 0.15s ease-in-out;
    }


    /* == package slick button == */

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

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

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


/* == input group alternative == */

input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

.input-group-alternative .form-control {
    width: 100%;
    height: 100px;
    font-size: 2.5rem;
    color: #464646;
    font-weight: 700;
    padding: 0;
    border: 1px solid #ebebeb;
    text-align: center !important;
    border-radius: 10px;
}

.input-group.input-group-alternative {
    border: 0;
    box-shadow: none;
    height: auto;
}

.input-group-alternative .form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #7bbb5d !important;
}

.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label,
.input-group > .custom-select:focus,
.input-group > .form-control:focus {
    z-index: initial !important;
}

.input-group-alternative .form-control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    color: #ccc;
    font-weight: 300;
    font-size: 2.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
}

.input-group-alternative .form-control::-moz-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    color: #ccc;
    font-weight: 300;
    font-size: 2.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
}

.input-group-alternative .form-control::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    color: #ccc;
    font-weight: 300;
    font-size: 2.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
}

.input-group-alternative .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.card-alter-row {
    height: 50px;
}

.card-alter-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-danger {
    color: #fff;
    background-color: #b01d25;
}

.card-alter-row .card-alter-item:first-child {
    width: 40%;
}

.card-alter-row .card-alter-item:last-child {
    width: 35%;
}

.card-alter-row .card-alter-item {
    width: 25%;
    float: left;
    height: 50px;
}

.card-alter-body-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 14px;
    width: 100%;
    text-align: center;
    padding: 0 10px;
    color: #767679;
}

.badge.badge-rounded {
    border-radius: 50px;
}

.card-alter-text .badge.badge-icon {
    width: 100%;
}

.badge.badge-label {
    padding-left: 15px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 14px;
}

    .badge.badge-label .badge-outer--icon {
        position: absolute;
        left: 7.5px;
        top: 50%;
        transform: translateY(-50%);
        height: 35px;
        width: 35px;
        border-radius: 50%;
        background-color: #fff;
    }

    .badge.badge-label .badge-inner--icon {
        height: 20px;
        width: 20px;
        background-color: #ad060e;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .badge.badge-label i {
        font-size: 7px;
        position: relative;
        top: 0px;
    }

.card-alter-item.disabled .badge.badge-label {
    background-color: #e2e3e7;
}

    .card-alter-item.disabled .badge.badge-label .badge-inner--icon {
        background-color: #e2e3e7;
    }

.card-alter-item.disabled .card-alter-number .btn-alter--icon {
    background-color: #e2e3e7;
}

.btn.btn-feat.disabled {
    background-color: #e2e3e7;
    border: 1px solid #e2e3e7;
    color: #fff !important;
}

.package-wrapper .btn.btn-cancel-package.disabled:hover i,
.package-wrapper .btn.btn-cancel-package.disabled:hover i {
    color: #ecedef !important;
}

.btn-group-footer .btn.btn-cancel-package.btn-feat.disabled .icon--text i {
    color: #ecedef;
}

.btn.btn-feat.disabled:hover,
.btn.btn-feat.disabled:focus {
    background-color: #e2e3e7 !important;
    border: 1px solid #e2e3e7 !important;
    color: #fff !important;
    cursor: default;
}


/* == card alter == */

.card-alter-wrapper {
    height: 353px;
    overflow-y: auto;
}

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

.card-alter-number {
    position: relative;
    height: 50px;
}

    .card-alter-number .form-control {
        height: 50px;
        border-radius: 50px;
        border: 1px solid #ebebeb;
        font-size: 14px;
        color: #464646;
        font-weight: 300;
        padding-right: 32.5px;
    }

        .card-alter-number .form-control:focus {
            box-shadow: none !important;
            outline: none !important;
            border-color: #7bbb5d !important;
        }

        .card-alter-number .form-control::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
            color: #ccc;
            font-weight: 300;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        }

        .card-alter-number .form-control::-moz-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
            color: #ccc;
            font-weight: 300;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        }

        .card-alter-number .form-control::-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
            color: #ccc;
            font-weight: 300;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        }

        .card-alter-number .form-control::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            -moz-appearance: textfield !important;
        }

    .card-alter-number .btn-alter--icon {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #7bbb5d;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .card-alter-number .btn-alter--icon i {
            font-size: 10px;
            color: #fff;
        }


/* == table none radius == */

.card-table.large {
    margin-bottom: 13px;
}

.card-table-body.card-table-outline {
    border: 0;
    position: relative;
    overflow-y: auto;
    height: 348px;
}

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

    .card-table-header.card-table-none-radius .card-table-header-item:first-child {
        border-left: 0 !important;
    }

    .card-table-header.card-table-none-radius .card-table-header-item:last-child {
        border-right: 0 !important;
    }

.card-table-body-setting {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .card-table-body-setting .card-table-inner--icon {
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .card-table-body-setting .card-table-inner--icon i {
            font-size: 17px;
            color: #ccc;
        }

.card-table-body-row.large .card-table-body-item:not(:first-child) {
    width: 10%;
}

.card-table-body-row.large .card-table-body-item:last-child {
    width: 5%;
}

.card-table-body-row.large .card-table-body-item:first-child {
    width: 10%;
}

.card-table-body-row.large .card-table-body-item:nth-of-type(2) {
    width: 20%;
}


/* == header large == */

.card-table-header.large .card-table-header-item:not(:first-child) {
    width: 10%;
}

.card-table-header.large .card-table-header-item:first-child {
    width: 10%;
}

.card-table-header.large .card-table-header-item:last-child {
    width: 5%;
}

.card-table-header.large .card-table-header-item:first-child:not(:first-child) {
    width: 10%;
}

.card-table-header.large .card-table-header-item:nth-of-type(2) {
    width: 20%;
}

.card-table-inner--icon.card-table-inner--first {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7bbb5d;
    margin-right: 7.5px;
    position: relative;
    top: -1px;
}

.card-table-inner--text.card-table-inner--bold {
    font-weight: 600;
    font-size: 14px;
    color: #767679;
}

.card-table-inner--icon.card-table-inner--first i {
    color: #fff;
    font-size: 10px;
}


/* == package disabled == */

.package-wrapper.disabled .filter-blur {
    display: block;
}

.package-wrapper.disabled .card-body {
    background-color: #f9fafc;
}

.package-wrapper.disabled .card-header-slider {
    background-color: #f9fafc;
}

.package-wrapper.disabled .card-header {
    background-color: #f9fafc !important;
}

.package-wrapper.disabled .btn-popover-head {
    color: #e4e4e4 !important;
}

.package-wrapper.disabled .card-footer {
    background-color: #f9fafc !important;
}

.package-wrapper.disabled .package-slider .slick-prev.slick-arrow,
.package-wrapper.disabled .package-slider .slick-next.slick-arrow {
    background-color: #f9fafc;
    border: 1px solid #f2f2f2;
    cursor: default;
    z-index: 0;
    opacity: 1;
    display: none !important;
}

    .package-wrapper.disabled .package-slider .slick-prev.slick-arrow::before,
    .package-wrapper.disabled .package-slider .slick-prev.slick-arrow::after {
        border-bottom: 5px solid #bfbec4;
    }

    .package-wrapper.disabled .package-slider .slick-next.slick-arrow::before,
    .package-wrapper.disabled .package-slider .slick-next.slick-arrow::after {
        border-bottom: 5px solid #bfbec4;
    }

.package-wrapper.disabled .card-footer {
}

    .package-wrapper.disabled .card-footer .btn {
        background-color: #e2e3e7;
        border: 1px solid #e2e3e7;
        color: #ffffff;
        cursor: default;
    }

.package-wrapper.disabled .btn.btn-cancel-package {
    background-color: #ad060e;
    border: 1px solid #ad060e;
    color: #ffffff;
    cursor: pointer !important;
    z-index: 1;
    position: absolute;
    right: -60px;
}

.package-wrapper.disabled .card-footer .btn.btn-cancel-package:hover,
.package-wrapper.disabled .card-footer .btn.btn-cancel-package:focus {
    background-color: #7d070e !important;
    border: 1px solid #7d070e !important;
    color: #ffffff !important;
}

    .package-wrapper.disabled .card-footer .btn.btn-cancel-package:hover .icon--text i,
    .package-wrapper.disabled .card-footer .btn.btn-cancel-package:focus .icon--text i {
        color: #7d070e !important;
    }

.package-wrapper.disabled .btn.btn-cancel-package .icon--text i {
    color: #ad060e;
}

.package-wrapper.disabled .card-footer .btn:hover,
.package-wrapper.disabled .card-footer .btn:focus {
    background-color: #e2e3e7 !important;
    border: 1px solid #e2e3e7 !important;
    color: #ffffff !important;
}

.package-wrapper.disabled .card-table {
    background-color: #fff;
    border-radius: 15px;
}

.package-wrapper.disabled .card-header-check .btn-inner--icon {
    background-color: #7bbb5d;
}


/* == lotto predict disabled == */

.lotto-predict-wrapper {
    position: relative;
    overflow: hidden;
}

    .lotto-predict-wrapper.disbled .filter-blur {
        top: 63px;
    }

    .lotto-predict-wrapper.disbled .filter-blur {
        display: block;
    }

    .lotto-predict-wrapper.disbled .badge-danger {
        background-color: #e2e3e7;
    }

    .lotto-predict-wrapper.disbled .badge.badge-label .badge-inner--icon {
        background-color: #e2e3e7;
    }

    .lotto-predict-wrapper.disbled .card-alter-body-text {
        color: #e2e3e7;
    }

    .lotto-predict-wrapper.disbled .card-alter-number .form-control {
        color: #e2e3e7;
        border: 1px solid #f2f2f2;
        background-color: #ffffff !important;
    }

        .lotto-predict-wrapper.disbled .card-alter-number .form-control:focus {
            box-shadow: none !important;
            outline: none !important;
            border-color: #f2f2f2 !important;
        }

    .lotto-predict-wrapper.disbled .input-group-alternative .form-control {
        border: 1px solid #f2f2f2;
    }

    .lotto-predict-wrapper.disbled .card-alter-number .form-control::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #f2f2f2;
        font-weight: 300;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .lotto-predict-wrapper.disbled .card-alter-number .form-control::-moz-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #f2f2f2;
        font-weight: 300;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .lotto-predict-wrapper.disbled .card-alter-number .form-control::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #f2f2f2;
        font-weight: 300;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .lotto-predict-wrapper.disbled .card-alter-number .btn-alter--icon {
        background-color: #f2f2f2;
    }

    .lotto-predict-wrapper.disbled .input-group-alternative .form-control:focus {
        box-shadow: none !important;
        outline: none !important;
        border-color: #f2f2f2 !important;
    }

    .lotto-predict-wrapper.disbled .input-group-alternative .form-control::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #f2f2f2;
        font-weight: 300;
        font-size: 3rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .lotto-predict-wrapper.disbled .input-group-alternative .form-control::-moz-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #f2f2f2;
        font-weight: 300;
        font-size: 3rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .lotto-predict-wrapper.disbled .input-group-alternative .form-control::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #f2f2f2;
        font-weight: 300;
        font-size: 3rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .lotto-predict-wrapper.disbled .input-group-alternative .form-control::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

.form-control:disabled,
.form-control[readonly] {
    background-color: #ffffff;
}

.lotto-predict-wrapper.disbled .card-footer .btn {
    color: #fff;
    border: 1px solid #e2e3e7;
    background-color: #e2e3e7;
    cursor: default;
}

    .lotto-predict-wrapper.disbled .card-footer .btn:hover,
    .lotto-predict-wrapper.disbled .card-footer .btn:focus {
        color: #fff !important;
        border: 1px solid #e2e3e7 !important;
        background-color: #e2e3e7 !important;
    }


/* == lotto order disabled == */

.lotto-order-wrapper {
    position: relative;
    overflow: hidden;
}

    .lotto-order-wrapper.disabled .filter-blur {
        top: 63px;
    }

    .lotto-order-wrapper.disabled .filter-blur {
        display: block;
    }

    .lotto-order-wrapper.disabled .card-footer .btn {
        background-color: #e2e3e7;
        border: 1px solid #e2e3e7;
        color: #fff;
        cursor: default;
    }

        .lotto-order-wrapper.disabled .card-footer .btn:hover,
        .lotto-order-wrapper.disabled .card-footer .btn:focus {
            background-color: #e2e3e7 !important;
            border: 1px solid #e2e3e7 !important;
            color: #fff !important;
        }

    .lotto-order-wrapper.disabled .btn.btn-cancel-head {
        color: #fff;
        border: 1px solid #e2e3e7;
        background-color: #e2e3e7;
    }

        .lotto-order-wrapper.disabled .btn.btn-cancel-head .icon-cancel--i i {
            color: #e2e3e7;
        }


/* == filter disabled == */

.filter-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1;
    filter: blur(1px);
    -webkit-filter: blur(1px);
    display: none;
}


/* == bill predict == */

.card-bill-wrapper {
    height: 574.38px;
    overflow-y: auto;
}

.card-bill-row {
    padding-right: 50px;
    position: relative;
    height: 45px;
}

.card-bill-item.setting {
    position: absolute;
    right: 0;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.card-bill-item {
    position: relative;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    text-align: center;
    color: #767679;
    padding-right: 10px;
}

.card-bill-inner--icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

    .card-bill-inner--icon i {
        font-size: 17px;
        color: #ccc;
    }

.btn-bill--icon {
    width: 20px;
    height: 20px;
    background-color: #7bbb5d;
    font-size: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 5px;
    float: left;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.card-bill-body-text {
    padding-left: 27px;
    width: 100%;
    text-align: left;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* == mobile lotto gov == */

.m-bg {
    background-color: #fff;
}

.mobile-wrap .card-header {
    background-color: #fff;
    border-radius: 0 !important;
    border-bottom: 0;
    position: relative;
    padding: 1.2rem 1.25rem 1.2rem 1.25rem;
}

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

.mobile-wrap .card-footer {
    padding: 0;
}

.mobile-wrap .card {
    margin-bottom: 0 !important;
    border-radius: 8px !important;
}

.mobile-wrap .m-package-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.mobile-wrap .card-table-inner--icon {
    width: 30px;
}

.mobile-wrap .m-predict-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.mobile-wrap .btn-m-prev,
.mobile-wrap .btn-m-next {
    padding: 0;
    height: 45px;
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    background-color: #b01d25 !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-wrap .card.shadow.card-default .card-header {
    border-bottom: 0;
}

.mobile-wrap .btn-m-prev--icon {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.mobile-wrap .btn-m-prev i {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.mobile-wrap .card-footer {
    padding-top: 7.5px !important;
    padding-bottom: 7.5px !important;
    background-color: #fff;
}

.mobile-wrap .btn-m-next {
    padding: 0;
    height: 40px;
    position: relative;
    width: 50%;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    border-radius: 25px;
    cursor: pointer;
    width: 135px;
    margin: 5px 5px;
}

    .mobile-wrap .btn-m-next i {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }

.mobile-wrap .btn-m-prev--icon {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.mobile-wrap .btn-show-package {
    height: 45px;
    width: 120px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #b01d25;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 40px;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    padding-left: 5px;
}

.mobile-wrap .package--icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 7.5px;
    background-color: #fff;
    transform: translateY(-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 700;
    color: #ad060e;
}

.mobile-wrap .card.card-default .card-body {
    padding: 0 0 1rem 0;
}

.mobile-wrap .card-mobile .card-table-body {
    border: 0;
    padding: 1.0rem 0;
}

.mobile-wrap .card-mobile .card-table-header {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.mobile-wrap .m-package-slider .slick-dots {
    bottom: -5px;
}

    .mobile-wrap .m-package-slider .slick-dots li button {
        padding-right: 2.5px;
        padding-left: 2.5px;
        width: 15px;
    }

        .mobile-wrap .m-package-slider .slick-dots li button:before {
            font-size: 7px !important;
        }

    .mobile-wrap .m-package-slider .slick-dots li.slick-active button:before {
        color: #b01d25 !important;
    }

    .mobile-wrap .m-package-slider .slick-dots li {
        margin: 0 1.5px;
    }

.mobile-wrap .m-package-slider.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 10px;
}

.mobile-wrap .card-alter-number .form-control {
    font-size: 12px;
}


/* == Mobile Predict and Predict list == */

.mobile-wrap .m-select-predict {
    width: 100%;
    -ms-flex-direction: initial !important;
    flex-direction: initial !important;
    margin-bottom: 0;
}

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

        .mobile-wrap .m-select-predict .nav-item:first-child,
        .mobile-wrap .m-select-predict .nav-item:last-child {
            width: 50%;
        }

            .mobile-wrap .m-select-predict .nav-item:first-child .nav-link {
                border-radius: 50px 0 0 50px !important;
                border: 1px solid #f2f2f2;
                border-right: 0;
            }

        .mobile-wrap .m-select-predict .nav-item .nav-link.active {
            color: #ffffff;
            background-color: #a80106;
        }

.mobile-wrap .m-predict-wrap .card-header {
    padding: 1rem 1rem 0.5rem 1rem;
}

.mobile-wrap .m-predict-wrap .card-body {
    padding: 0.5rem 1rem 1rem 1rem;
}

    .mobile-wrap .m-predict-wrap .card-body .card-body {
        padding: 0.5rem 0 1rem 0;
    }

    .mobile-wrap .m-predict-wrap .card-body .card-table-body-text {
        margin: 0 0 7.5px 0 !important;
    }

.mobile-wrap .m-predict-wrap {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-wrap .m-select-predict .nav-item .nav-link {
    background-color: #fff;
    color: #464646;
    font-weight: 600;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-wrap .m-select-predict .nav-item:last-child .nav-link {
    border-radius: 0 50px 50px 0;
    border: 1px solid #f2f2f2;
    border-left: 0;
}

.mobile-wrap .badge-select-pack .btn-inner--icon {
    position: absolute;
    right: 7.5px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    color: #7bbb5d;
    font-weight: 600;
    font-size: 14px;
}

.mobile-wrap .badge.badge-md.badge-select-pack {
    position: relative;
    height: 30px;
    padding: 0.55em 2.8em 0.55em 1.55em;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7bbb5d;
    margin: 0 11px;
}

.mobile-wrap .badge-select-pack .btn-inner--icon i {
    font-size: 8px;
    color: #000;
}

.mobile-wrap .text-inner--text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 14px;
    color: #767679;
}

.mobile-wrap .input-group-alternative .form-control {
    border-radius: 50px;
}

.mobile-wrap .card-alter-row .card-alter-item:first-child {
    width: 70%;
    justify-content: flex-start;
}

    .mobile-wrap .card-alter-row .card-alter-item:first-child .card-alter-body-text {
        justify-content: flex-start;
        font-size: 12px;
    }

.mobile-wrap .pb-lg-0 {
    padding-bottom: 0 !important;
}

.mobile-wrap .card-horizontal .card-table-body-item:first-child {
    width: 10% !important;
}

.mobile-wrap .card-horizontal .card-table-header-item:last-child {
    width: 15% !important;
}

.mobile-wrap .card-horizontal .card-table-header-item:not(:last-child):not(:last-child) {
    width: 25%;
}

.mobile-wrap .card-horizontal .card-table-header-item:first-child {
    width: 10% !important;
}

.mobile-wrap .card-horizontal .card-table-body-item:last-child {
    width: 15%;
}

.mobile-wrap .card-horizontal .card-table-body-item:not(:last-child):not(:last-child) {
    width: 25%;
}

.badge-rounded--icon {
    width: 22px;
    height: 22px;
    background-color: #89080e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.badge-rounded-inner--icon {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #b01d25;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-rounded--icon i {
    font-size: 10px;
    color: #fff;
}

.mobile-wrap .m-package-slider .slick-next,
.mobile-wrap .m-package-slider .slick-prev {
    content: '';
    position: absolute;
    top: -23px;
    cursor: pointer !important;
    height: 37px;
    width: 37px;
    border-radius: 50%;
    background-color: #9c191f;
    border: 5px solid #fff;
}

.mobile-wrap .m-package-slider .slick-next {
    right: 3px;
}

    .mobile-wrap .m-package-slider .slick-next::before,
    .mobile-wrap .m-package-slider .slick-prev::before {
        content: '';
        position: absolute;
        height: 17px;
        width: 17px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-size: contain;
    }

    .mobile-wrap .m-package-slider .slick-next::before {
        background-image: url(../images/arrow_lotto/arrow_right_white.png?v=1);
        left: 52%;
    }

.mobile-wrap .m-package-slider .slick-prev::before {
    background-image: url(../images/arrow_lotto/arrow_left_white.png?v=1);
    left: 50%;
}

.mobile-wrap .m-package-slider .slick-prev {
    left: 3px;
}

.mobile-wrap .card-footer {
    border-top: 1px solid rgb(232, 236, 237) !important;
}

.mobile-wrap hr {
    border-top: 1px solid rgb(232, 236, 237) !important;
}

.mobile-wrap .m-order-predict-check {
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    background-color: #7bbb5d;
    border-radius: 50%;
    position: relative;
    top: 3px;
}

    .mobile-wrap .m-order-predict-check i {
        font-size: 8px;
        color: #fefefe;
        position: relative;
        top: -3px;
    }

.mobile-wrap .m-card-predict-list.active .card-table-body-setting {
    display: none;
}

.mobile-wrap .m-card-predict-list.active .m-order-predict-check {
    display: block;
}

.mobile-wrap .m-card-predict-list .m-order-predict-check {
    display: none;
}

.mobile-wrap .m-card-predict-list.active .m-amount-text {
    display: none;
}

.mobile-wrap .m-card-predict-list.active .m-edit-field.m-edit-order-field {
    width: 85px;
    height: 26px;
    border-radius: 50pc;
    outline: none;
    text-align: center;
    font-size: 12px;
    color: #464646;
    border: 1px solid #e5e5e5;
    display: block;
}

    .mobile-wrap .m-card-predict-list.active .m-edit-field.m-edit-order-field::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #ccc;
        font-weight: 300;
        font-size: 12px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .mobile-wrap .m-card-predict-list.active .m-edit-field.m-edit-order-field::-moz-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #ccc;
        font-weight: 300;
        font-size: 12px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .mobile-wrap .m-card-predict-list.active .m-edit-field.m-edit-order-field::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        color: #ccc;
        font-weight: 300;
        font-size: 12px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    }

    .mobile-wrap .m-card-predict-list.active .m-edit-field.m-edit-order-field::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

.mobile-wrap .m-card-predict-list.active {
    padding: 4px 0px;
    background-color: #b01f27;
}

    .mobile-wrap .m-card-predict-list.active .card-table-body-text {
        color: #bfbec4;
    }

.mobile-wrap .m-edit-field.m-edit-order-field {
    display: none;
}


/* == btn rounded == */

.btn.rounded {
    border-radius: 50px !important;
}


/* == mobile action == */

.mobile-predict-outer {
    display: none;
}

.mobile-predictlist-outer {
    display: none;
}

.mobile-wrap.show-predict .mobile-package-outer {
    display: none;
}

.mobile-wrap.show-predict .mobile-predict-outer {
    display: block;
}

.mobile-wrap.show-predict .mobile-predictlist-outer {
    display: none;
}

.mobile-wrap.show-package.mobile-package-outer {
    display: block;
}

.mobile-wrap.show-package .mobile-predict-outer {
    display: none;
}

.mobile-wrap.show-package .mobile-predictlist-outer {
    display: none;
}

.mobile-wrap.show-predictlist .mobile-predict-outer {
    display: none;
}

.mobile-wrap.show-predictlist .mobile-predictlist-outer {
    display: block;
}

.mobile-wrap.show-predictlist .mobile-package-outer {
    display: none;
}


/* == Fake button slider == */

.fake-btn-group {
    position: absolute;
    top: 63px;
    left: 0;
    width: 100%;
}

.fake-btn-left,
.fake-btn-right {
    width: 50px;
    height: 50px;
    float: left;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #f2f2f2;
    z-index: 1;
    opacity: 0.9;
}

.fake-btn-right {
    right: 0;
    left: initial;
}

    .fake-btn-left::before,
    .fake-btn-right::before {
        content: '';
        position: absolute;
        width: 17px;
        height: 17px;
        z-index: 1;
        background-color: #f9fafc;
        border-radius: 50%;
        border: 1px solid #f9fafc;
        transition: all 0.15s ease-in-out;
        background-size: contain;
        opacity: 0.1;
    }

.fake-btn-left::before {
    background-image: url(../images/arrow_lotto/arrow_left_black.png?v=1);
    left: 50%;
    transform: translateX(-50%);
}

.fake-btn-right::before {
    background-image: url(../images/arrow_lotto/arrow_right_black.png?v=1);
    left: 50%;
    transform: translateX(-50%);
}

.fake-btn-left {
    left: 30px;
    top: 22px;
}

.fake-btn-right {
    right: 30px;
    top: 22px;
}

.package-wrapper .fake-btn-group {
    display: none;
}

    .package-wrapper .fake-btn-group.disabled {
        display: block;
    }

.package-wrapper.disabled .fake-btn-group {
    display: block;
}

.package-wrapper.active .package-slider {
    background-color: #f9fafc;
}

    .package-wrapper.active .package-slider .card-body .card-table {
        background-color: #fff;
    }

.package-wrapper.active .card-footer {
    background-color: #f9fafc !important;
}

.badge-rounded--icon {
    display: block;
    align-items: inherit;
    justify-content: inherit;
    position: relative;
}

.badge-rounded-inner--icon {
    display: block;
    align-items: inherit;
    justify-content: inherit;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.badge-rounded--icon i {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    float: left;
}

.icon-inner > img {
    max-width: inherit;
}

.card-show-number .card-body {
    margin-bottom: 15px;
}

.btn-cancel-header {
    height: 40px !important;
    width: 120px !important;
    min-width: 120px !important;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    font-size: 13px !important;
    padding-left: 0;
    padding-right: 0;
}

.input-group-alternative .form-control {
    border-radius: 10px !important;
}

.card.shadow.card-default .card-footer {
    margin-top: 0 !important;
}

.input-wrapper > .input-group.form-group .date-field {
    padding: 0 0 0 15px !important;
}

.progressbar {
    left: 12.5%;
    margin-top: 35px;
}

.box-white {
    padding-bottom: 0;
}

.features-box {
    padding: 20px 50px 30px 50px;
}

.sl-left img {
    height: 40px;
}

.features-right {
    padding-top: 0;
    border-radius: 0 15px 15px 0;
    overflow: hidden;
}

.search-icon ._i {
    font-size: 24px;
    transform: rotate(90deg);
    top: 0;
    width: 40px;
}

.search-form {
    padding: 0 45px 0 60px;
}

.card.shadow.card-default .card-footer {
    margin-top: 0;
}

.text.text-subtitle.text-height {
    margin-top: 4px;
}

.package-slider .slick-next.slick-arrow {
    right: 125px;
}

.package-slider .slick-prev.slick-arrow {
    left: 125px;
}

.card-header-check .btn-inner--text {
    font-size: 16px;
}

.card-header-check {
    width: 63%;
}

.package-slider .slick-prev.slick-arrow,
.package-slider .slick-next.slick-arrow {
    width: 40px;
    height: 40px;
}

.package-wrapper.checked .card.card-default .card-body {
    background-color: #f6f7f9 !important;
}

.package-wrapper.checked .card-header-slider {
    /* background-color: #f9fafc; */
}

.package-wrapper.checked .card.card-default .card-body {
    background-color: #f6f7f9 !important;
}

.package-wrapper.checked .package-desktop .card-body {
    /*background-color: #f6f7f9;*/
    background-color: #fff;
}

    .package-wrapper.checked .package-desktop .card-body .card-table.d-block {
        background-color: #fff;
    }

.package-wrapper .package-desktop .card-body .card-table.d-block {
    border-radius: 15px;
}

.package-wrapper.checked .card-footer {
    /* background-color: #f8f9fa !important; */
}

.fake-btn-left {
    left: 118px;
}

.fake-btn-right {
    right: 117px;
}

.check-package--icon {
    width: 50px;
    height: 50px;
    float: left;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #7bbb5d;
    z-index: 1;
    opacity: 1;
    top: 85px;
    right: 52px;
    cursor: pointer;
    background-color: #7bbb5d;
}

    .check-package--icon .badge-inner--icon {
        width: 25px;
        height: 25px;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
    }

        .check-package--icon .badge-inner--icon i {
            font-size: 11px;
            position: relative;
            left: 50%;
            top: 55%;
            transform: translate(-50%, -50%);
            float: left;
            color: #7bbb5d;
        }

.package-wrapper.checked .check-package--icon {
    display: none;
}

.package-wrapper.checked .fake-btn-group.disabled {
    display: none;
}

.package-wrapper.checked .card-table-body-text .badge {
    background-color: #7bbb5d;
}

.card-table-body.card-table-outline {
    height: 346px;
}

.card-alter-wrapper {
    height: 352px;
}

.cancel-package--icon {
    width: 50px;
    height: 50px;
    float: left;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #9c191f;
    z-index: 1;
    opacity: 1;
    top: 75px;
    right: 52px;
    cursor: pointer;
    background-color: #9c191f;
}

    .cancel-package--icon .badge-inner--icon {
        width: 25px;
        height: 25px;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        float: left;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .cancel-package--icon .badge-inner--icon i {
            font-size: 11px;
            position: relative;
            left: 50%;
            top: 55%;
            transform: translate(-50%, -50%);
            float: left;
            color: #9c191f;
        }

.package-wrapper.checked .card-header-check {
    background-color: #7bbb5d;
}

    .package-wrapper.checked .card-header-check .btn-inner--text {
        color: #fff;
    }

    .package-wrapper.checked .card-header-check .btn-inner--icon {
        background-color: #fff;
    }

        .package-wrapper.checked .card-header-check .btn-inner--icon i {
            color: #7bbb5d;
        }


/* == when none package == */

.package-wrapper .card-footer .cancel-this-package {
    display: none;
}

.package-wrapper .card-footer .select-this-package {
    display: block;
}


/* == when select package == */

.package-wrapper.checked .card-footer .cancel-this-package {
    display: block;
}

.package-wrapper.checked .card-footer .select-this-package {
    display: none;
}


/* == when none package == */

.cancel-package--icon {
    display: none;
}

.package-wrapper.checked .cancel-package--icon {
    display: block;
}


/* == when none package == */

.package-wrapper .card-footer .cancel-this-package {
    display: none;
}

.package-wrapper .card-footer .select-this-package {
    display: block;
}


/* == when select package == */

.package-wrapper.checked .card-footer .cancel-this-package {
    display: block;
}

.package-wrapper.checked .card-footer .select-this-package {
    display: none;
}

.package-wrapper.checked {
    cursor: default;
}

    .package-wrapper.checked .package-slider {
        cursor: default;
    }

    .package-wrapper.checked .d-block {
        cursor: default !important;
    }

    .package-wrapper.checked .package-slider .card-body {
        cursor: default !important;
    }

.card-bill-wrapper {
    height: 575px;
}

.contact-inner {
    float: left;
}

    .contact-inner > [class^='col'] {
        float: right;
    }

.icon-inner > img {
    height: auto;
}

.header-expand-lg {
    border-radius: 15px 15px 0 0;
}

.icon-inner > .imageProfile {
    height: 120%;
}

#box-register {
    min-height: 1309px;
}

.card-bill-row {
    padding-right: 60px;
}

.card-bill-inner--icon {
    width: 30px;
}

.card-bill-item.setting {
    width: 60px;
}

.overlay {
    z-index: 5;
}

.post-listing {
    bottom: 30%;
    z-index: 4;
}

.mobile-wrap .btn-show-package {
    height: 45px;
    width: 45px;
    padding: 0;
    background-color: #7bbb5d;
    top: 81px;
    z-index: 1;
}

.mobile-wrap .package--icon {
    right: inherit;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

    .mobile-wrap .package--icon i,
    .mobile-wrap .package--icon svg {
        font-size: 10px;
        color: #7bbb5d;
    }

.btn-cancel-package {
    position: absolute;
    right: 15px;
    transform: translateY(-50%);
    background-color: #b01d25;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 40px;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    padding-left: 5px;
    height: 45px;
    width: 45px;
    padding: 0;
    top: 81px;
    z-index: 1;
}

.mobile-wrap .btn-cancel-package i,
.mobile-wrap .btn-cancel-package svg {
    font-size: 10px;
    color: #b01d25;
}

.mobile-wrap .btn-cancel-package {
    display: none;
}

.mobile-wrap .btn-show-package {
    display: block;
}

.mobile-wrap .btn-m-cancel {
    display: none;
}

.mobile-wrap .btn-m-select {
    display: block;
    line-height: 40px;
}

.btn-m-select.disabled {
    background-color: #e2e3e7 !important;
}

.icon-socials-rounded {
    position: absolute;
    bottom: 55px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-display-inner {
    position: relative;
    overflow: hidden;
}

.icon-socials-rounded li {
    width: 55px;
    height: 55px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 5px;
}

    .icon-socials-rounded li a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-socials-rounded li.facebook {
        background-color: #3d5b97;
    }

    .icon-socials-rounded li.twitter {
        background-color: #59adeb;
    }

    .icon-socials-rounded li.youtube {
        background-color: #cc2328;
    }

    .icon-socials-rounded li.instagram {
        background-color: #e24361;
    }

    .icon-socials-rounded li.line {
        background-color: #1ac022;
    }

    .icon-socials-rounded li i,
    .icon-socials-rounded li svg {
        color: #fff;
        font-size: 17px;
    }

.sl-left img {
    width: auto;
    min-width: 40px;
}

#register-success {
    transform: none;
}

.btn-wrap {
    z-index: 10;
}

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

.group-btn-number {
    display: none;
}

.card-mobile.select-package .slick-arrow {
    display: none !important;
}

.time-stamp {
    top: 50%;
    position: absolute;
    right: 50px;
    transform: translateY(-50%);
    color: #767679;
    font-size: 13px;
}

.post-listing {
    z-index: 10;
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
    user-select: none;
}

    .custom-select-wrapper select {
        display: none;
    }

.custom-dropdown {
    position: relative;
    width: 100%;
    display: inline-block;
}

.custom-select-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 84px 0 15px;
    font-size: 14px;
    font-weight: 300;
    color: #ccc;
    line-height: 48px;
    background: #fcfcfc;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}

    .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        top: 50%;
        right: 16px;
        margin-top: -3px;
        border-bottom: 1.4px solid #767679;
        border-right: 1.4px solid #767679;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
    }

.custom-dropdown.opened .custom-select-trigger:after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 200px;
    overflow: hidden;
    overflow-y: auto;
    margin: 2px 0;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
    transition: all .4s ease-in-out;
    z-index: 2;
    box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
}

.custom-dropdown.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.option-hover:before {
    background: #f9f9f9;
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px;
    border-bottom: 1px solid #eeeeee;
    font-size: 14px;
    font-weight: 300;
    color: #767679;
    line-height: 49px;
    cursor: pointer;
    transition: all .4s ease-in-out;
}

    .custom-option:first-of-type {
        border-radius: 6px 6px 0 0;
    }

    .custom-option:last-of-type {
        border-bottom: 0;
        border-radius: 0 0 6px 6px;
    }

    .custom-option:hover,
    .custom-option.selection {
        background: #f9f9f9;
    }

.flex-rows.laos-result .flex-col.big-boney.laos-last-three {
    width: 25%;
}

.flex-col.big-boney.laos-last-three > .box-body {
    border: 1px solid #e40311;
    border-width: 0 1px 1px 0;
}

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

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

#input-password {
    -webkit-text-security: disc;
}

    #input-password.form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: unset;
    }

.dropdown-menu.nav-submenu {
    width: 13rem;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0;
}

    .dropdown-menu.nav-submenu > li > a.active {
        background-color: #e70412;
    }

    .dropdown-menu.nav-submenu > li:first-child > a:hover,
    .dropdown-menu.nav-submenu > li:first-child > a.active:hover,
    .dropdown-menu.nav-submenu > li:first-child > a.active:focus {
        background-color: #e70412 !important;
    }

    .dropdown-menu.nav-submenu > li {
        border-bottom: 1px solid #ad060e;
    }

        .dropdown-menu.nav-submenu > li:last-child {
            border-bottom: 0;
        }

        .dropdown-menu.nav-submenu > li > a:hover,
        .dropdown-menu.nav-submenu > li > a:focus {
            background-color: #e70412 !important;
        }

.box-card-related .entry {
    display: block !important;
}

.navmenu-list.mobile {
    display: none;
}

.navmenu-list.dropdown {
    display: block;
}

.table.bordered {
    border-bottom: 1px solid #ebebeb !important;
}

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

.box-detail-content p,
.box-detail-content ul,
.box-detail-content ul li,
.box-detail-content ul li a,
.box-detail-content span {
    color: #333;
}

.policy-box p,
.policy-box p span,
.policy-box ul,
.policy-box ul li,
.policy-box ul li a,
.box-detail-content span {
    color: #333;
    font-size: 15px;
}

.features-box h1,
.features-box h2,
.features-box h3,
.features-box h4,
.features-box h5,
.features-box h6 {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
}

.features-box img {
    max-width: 100% !important;
    height: auto !important;
}

.features-box p {
    overflow: hidden !important;
}

.features-box .sl-left img {
    max-width: 40px !important;
}

.btn.btn-default.disabled {
    background-color: #9c191f;
    border: 1px solid #ecf0f1;
    color: #fff !important;
}

.btn.btn-note-head {
    width: 120px !important;
    min-width: 120px;
    position: absolute;
    margin: 0;
    top: 50%;
    right: 180px;
    transform: translateY(-50%);
    font-size: 13px;
    padding-left: 0;
    padding-right: 0;
    height: 40px;
}

    .btn.btn-note-head i {
        margin-right: 4px;
    }

.btn.btn-note-head-edit {
    height: 32px;
    width: 120px !important;
    min-width: 120px;
    position: absolute;
    margin: 0;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    font-size: 13px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 25px !important;
    padding: 0;
}

    .btn.btn-note-head-edit i {
        font-size: 20px;
        margin: 0 3px 0 0;
    }

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content h4 {
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    font-family: var(--fontWeightBold);
}



/* ****** */
.box-header-flexitem.flexitem-sm:first-child {
    width: 10%;
}

.box-body-flexitem.flexitem-sm:first-child {
    width: 10%;
}

.box-header-flexitem.flexitem-sm:nth-of-type(2) {
    width: 30%;
}

.box-header-flexitem {
    font-size: 12px;
}

.box-body-flexitem.flexitem-sm:nth-of-type(2) {
    width: 30%;
}

.box-body-flexitem {
    min-height: 45px;
    font-size: 12px;
    text-align: center;
}

.box-bodyitem-block {
    min-height: 45px;
}

.box-header-block .box-header-flexitem.flexitem-sm {
    width: 20%;
}

.invoice-info .table-bordered thead td, .invoice-info .table-bordered thead th {
    font-size: 12px;
}

.invoice-info .table-bordered td, .invoice-info .table-bordered th {
    font-size: 12px;
}

.jconfirm-box .predict-list .box-header-block .box-header-flexitem:first-child {
    width: 10%;
}

.jconfirm-box .predict-list .box-header-block .box-header-flexitem:nth-of-type(2) {
    width: 30%;
}

.box-body-flexitem {
    padding-left: 2.5px;
    padding-right: 2.5px;
}

.box-body-heightest .box-body-flexitem.flexitem-sm:nth-of-type(2) {
    width: 20%;
}

.box-body-flexitem.flexitem-lg {
    text-align: center;
    justify-content: center;
}

.box-header-block {
    margin-top: 15px;
}