@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    /* background-color: #0a172a; */
    background-color: #e3e1e2;
    line-height: 1;
    font-family: sans-serif;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

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

*:focus {
    outline: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    /* width: 100%; */
    height: auto;
}

input {
    border: none;
}

input:focus {
    outline: none;
}

button {
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}

button:focus {
    outline: none;
}

/* bootstrap */
.fade {
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
/* .fade {
    opacity: 0;
    transition: opacity .15s linear;
} */

@media (prefers-reduced-motion: reduce) {
    .fade {
        -webkit-transition: none;
        transition: none;
    }
}

.fade:not(.show) {
    opacity: 0;
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        -webkit-transition: none;
        transition: none;
    }
}

.modal-open {
    overflow: hidden
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px)
}

@media(prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        -webkit-transition: none;
        transition: none
    }
}

.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none
}

.modal-dialog-scrollable {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: calc(100% - 1rem)
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem)
}

.modal-dialog-centered::before {
    display: block;
    height: calc(100vh - 1rem);
    content: ""
}

.modal-dialog-centered.modal-dialog-scrollable {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: none
}

.modal-dialog-centered.modal-dialog-scrollable::before {
    content: none
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .5
}

/* .modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem
} */
.modal-header .closes {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5
}

.modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem
}

.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.modal-footer>:not(:first-child) {
    margin-left: .25rem
}

.modal-footer>:not(:last-child) {
    margin-right: .25rem
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media(min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem)
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem)
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem)
    }

    .modal-dialog-centered::before {
        height: calc(100vh - 3.5rem)
    }

    .modal-sm {
        max-width: 300px
    }
}

@media(min-width: 992px) {

    .modal-lg,
    .modal-xl {
        max-width: 800px
    }
}

@media(min-width: 1200px) {
    .modal-xl {
        max-width: 1140px
    }
}

.list-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0
}

.list-group-item-action {
    width: 100%;
    color: #495057;
    text-align: inherit
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    z-index: 1;
    color: #495057;
    text-decoration: none;
    background-color: #f8f9fa
}

.list-group-item-action:active {
    color: #212529;
    background-color: #e9ecef
}

.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125)
}

.list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.list-group-item.disabled,
.list-group-item:disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.list-group-horizontal {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0
}

.list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0
}

.list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: 0
}

@media(min-width: 576px) {
    .list-group-horizontal-sm {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-sm .list-group-item {
        margin-right: -1px;
        margin-bottom: 0
    }

    .list-group-horizontal-sm .list-group-item:first-child {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-sm .list-group-item:last-child {
        margin-right: 0;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: 0
    }
}

@media(min-width: 768px) {
    .list-group-horizontal-md {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-md .list-group-item {
        margin-right: -1px;
        margin-bottom: 0
    }

    .list-group-horizontal-md .list-group-item:first-child {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-md .list-group-item:last-child {
        margin-right: 0;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: 0
    }
}

@media(min-width: 992px) {
    .list-group-horizontal-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-lg .list-group-item {
        margin-right: -1px;
        margin-bottom: 0
    }

    .list-group-horizontal-lg .list-group-item:first-child {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-lg .list-group-item:last-child {
        margin-right: 0;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: 0
    }
}

@media(min-width: 1200px) {
    .list-group-horizontal-xl {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-xl .list-group-item {
        margin-right: -1px;
        margin-bottom: 0
    }

    .list-group-horizontal-xl .list-group-item:first-child {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-xl .list-group-item:last-child {
        margin-right: 0;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: 0
    }
}

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0
}

.list-group-flush .list-group-item:last-child {
    margin-bottom: -1px
}

.list-group-flush:first-child .list-group-item:first-child {
    border-top: 0
}

.list-group-flush:last-child .list-group-item:last-child {
    margin-bottom: 0;
    border-bottom: 0
}

.list-group-item-primary {
    color: #004085;
    background-color: #b8daff
}

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
    color: #004085;
    background-color: #9fcdff
}

.list-group-item-primary.list-group-item-action.active {
    color: #fff;
    background-color: #004085;
    border-color: #004085
}

.list-group-item-secondary {
    color: #383d41;
    background-color: #d6d8db
}

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
    color: #383d41;
    background-color: #c8cbcf
}

.list-group-item-secondary.list-group-item-action.active {
    color: #fff;
    background-color: #383d41;
    border-color: #383d41
}

.list-group-item-success {
    color: #155724;
    background-color: #c3e6cb
}

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
    color: #155724;
    background-color: #b1dfbb
}

.list-group-item-success.list-group-item-action.active {
    color: #fff;
    background-color: #155724;
    border-color: #155724
}

.list-group-item-info {
    color: #0c5460;
    background-color: #bee5eb
}

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
    color: #0c5460;
    background-color: #abdde5
}

.list-group-item-info.list-group-item-action.active {
    color: #fff;
    background-color: #0c5460;
    border-color: #0c5460
}

.list-group-item-warning {
    color: #856404;
    background-color: #ffeeba
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
    color: #856404;
    background-color: #ffe8a1
}

.list-group-item-warning.list-group-item-action.active {
    color: #fff;
    background-color: #856404;
    border-color: #856404
}

.list-group-item-danger {
    color: #721c24;
    background-color: #f5c6cb
}

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
    color: #721c24;
    background-color: #f1b0b7
}

.list-group-item-danger.list-group-item-action.active {
    color: #fff;
    background-color: #721c24;
    border-color: #721c24
}

.list-group-item-light {
    color: #818182;
    background-color: #fdfdfe
}

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
    color: #818182;
    background-color: #ececf6
}

.list-group-item-light.list-group-item-action.active {
    color: #fff;
    background-color: #818182;
    border-color: #818182
}

.list-group-item-dark {
    color: #1b1e21;
    background-color: #c6c8ca
}

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
    color: #1b1e21;
    background-color: #b9bbbe
}

.list-group-item-dark.list-group-item-action.active {
    color: #fff;
    background-color: #1b1e21;
    border-color: #1b1e21
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: .9
}

.tooltip .arrow {
    position: absolute;
    display: block;
    width: .8rem;
    height: .4rem
}

.tooltip .arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^=top] {
    padding: .4rem 0
}

.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^=top] .arrow {
    bottom: 0
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #000
}

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^=right] {
    padding: 0 .4rem
}

.bs-tooltip-right .arrow,
.bs-tooltip-auto[x-placement^=right] .arrow {
    left: 0;
    width: .4rem;
    height: .8rem
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before {
    right: 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #000
}

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^=bottom] {
    padding: .4rem 0
}

.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^=bottom] .arrow {
    top: 0
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #000
}

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^=left] {
    padding: 0 .4rem
}

.bs-tooltip-left .arrow,
.bs-tooltip-auto[x-placement^=left] .arrow {
    right: 0;
    width: .4rem;
    height: .8rem
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^=left] .arrow::before {
    left: 0;
    border-width: .4rem 0 .4rem .4rem;
    border-left-color: #000
}

.tooltip-inner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    max-width: 276px;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem
}

.popover .arrow {
    position: absolute;
    display: block;
    width: 1rem;
    height: .5rem;
    margin: 0 .3rem
}

.popover .arrow::before,
.popover .arrow::after {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-popover-top,
.bs-popover-auto[x-placement^=top] {
    margin-bottom: .5rem
}

.bs-popover-top>.arrow,
.bs-popover-auto[x-placement^=top]>.arrow {
    bottom: calc((0.5rem + 1px) * -1)
}

.bs-popover-top>.arrow::before,
.bs-popover-auto[x-placement^=top]>.arrow::before {
    bottom: 0;
    border-width: .5rem .5rem 0;
    border-top-color: rgba(0, 0, 0, .25)
}

.bs-popover-top>.arrow::after,
.bs-popover-auto[x-placement^=top]>.arrow::after {
    bottom: 1px;
    border-width: .5rem .5rem 0;
    border-top-color: #fff
}

.bs-popover-right,
.bs-popover-auto[x-placement^=right] {
    margin-left: .5rem
}

.bs-popover-right>.arrow,
.bs-popover-auto[x-placement^=right]>.arrow {
    left: calc((0.5rem + 1px) * -1);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0
}

.bs-popover-right>.arrow::before,
.bs-popover-auto[x-placement^=right]>.arrow::before {
    left: 0;
    border-width: .5rem .5rem .5rem 0;
    border-right-color: rgba(0, 0, 0, .25)
}

.bs-popover-right>.arrow::after,
.bs-popover-auto[x-placement^=right]>.arrow::after {
    left: 1px;
    border-width: .5rem .5rem .5rem 0;
    border-right-color: #fff
}

.bs-popover-bottom,
.bs-popover-auto[x-placement^=bottom] {
    margin-top: .5rem
}

.bs-popover-bottom>.arrow,
.bs-popover-auto[x-placement^=bottom]>.arrow {
    top: calc((0.5rem + 1px) * -1)
}

.bs-popover-bottom>.arrow::before,
.bs-popover-auto[x-placement^=bottom]>.arrow::before {
    top: 0;
    border-width: 0 .5rem .5rem;
    border-bottom-color: rgba(0, 0, 0, .25)
}

.bs-popover-bottom>.arrow::after,
.bs-popover-auto[x-placement^=bottom]>.arrow::after {
    top: 1px;
    border-width: 0 .5rem .5rem;
    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: 1rem;
    margin-left: -.5rem;
    content: "";
    border-bottom: 1px solid #f7f7f7
}

.bs-popover-left,
.bs-popover-auto[x-placement^=left] {
    margin-right: .5rem
}

.bs-popover-left>.arrow,
.bs-popover-auto[x-placement^=left]>.arrow {
    right: calc((0.5rem + 1px) * -1);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0
}

.bs-popover-left>.arrow::before,
.bs-popover-auto[x-placement^=left]>.arrow::before {
    right: 0;
    border-width: .5rem 0 .5rem .5rem;
    border-left-color: rgba(0, 0, 0, .25)
}

.bs-popover-left>.arrow::after,
.bs-popover-auto[x-placement^=left]>.arrow::after {
    right: 1px;
    border-width: .5rem 0 .5rem .5rem;
    border-left-color: #fff
}

.popover-header {
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px)
}

.popover-header:empty {
    display: none
}

.popover-body {
    padding: .5rem .75rem;
    color: #212529
}

/* bootstrap end */

.wrapper {
    position: relative;
    min-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    font-family: "Catamaran", sans-serif;
}

.container {
    width: 1300px;
    height: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

/* top */
#header {
    position: relative;
}

.header-top {
    /* background: #0a0a0a; */
    background: #e3e1e2;
    padding: 10px 0;
    height: 60px;
}

.header-top>.container,
.header-bottom>.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.topbar-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.topbar-left img {
    width: 230px;
    height: 56px;
    height: 75px;
}

.lang-items {
    font-size: 0;
    opacity: 0.5;
    margin-right: 10px;
}

.lang-items>img {
    height: 26px;
    width: 26px;
}

.lang-active {
    opacity: 1;
}

.current-time {
    color: #f8f8f8;
    color: #2c2b2b;
    font-size: 12px;
    font-family: 'Catamaran', sans-serif;
    margin-left: 15px;
    opacity: 0.8;
}

.topbar-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.member-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.member-btn .btn,
.casino-button .btn,
.lottery-button .btn.play-btn {
    display: block;
    width: 100px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Thonburi', sans-serif;
    text-align: center;
    margin-right: 2px;
}

/* login button */
.member-btn .btn:hover svg,
.recommend-button .btn:hover svg {
    stroke-dasharray: 50, 285;
    stroke-dashoffset: 178;
}

.member-btn .btn:hover rect,
.recommend-button .btn:hover rect {
    stroke-dasharray: 50, 285;
    stroke-dashoffset: 178;
}
.member-btn i.fa{
    margin-right: 5px;
}
svg {
    position: absolute;
    top: 0;
    left: 0;
}

rect {
    stroke-width: 2;
    stroke-dasharray: 225, 0;
    stroke-dashoffset: 0;
    transition: all 600ms ease;
}


/* login button end */
/* login & register form */
.login-wrapper,
.register-wrapper {
    position: relative;
}

.container_reg{
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
    padding: 50px 0;
}
.origin-register-form{
    opacity: 1 !important;
    display: block !important;
    background-color: #e5e2df;
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    font-family: "Catamaran", sans-serif;
    padding: 47px 43px 50px 36px;
    -webkit-transition: all .4s;
    transition: all .4s;
    /* background-color: #007bff; */
}
.origin-register-form .input-group{
    width: 95%;
}
.origin-register-form .register-input{
    margin: auto;
    margin-bottom: 16px;
    width: 87%;
}
.origin-register-form .register-text{
    margin: auto;
    margin-bottom: 16px;
    width: 87%;
}
.origin-register-form .input-group>input{
    width: 100%;
}
.origin-register-form .register-input .f-captcha{
    display: flex;
}
.origin-register-form .f-captcha input{
    width: 73%;
}
.origin-register-form .f-captcha .captcha-code{
    width: 25%;
}
.origin-register-form .form-btn-group{
    display: flex;
    justify-content: center;
    width: 100%;
}
.origin-register-form .form-btn.btn{
    width: 88%;
}
.login-form,
.register-form {
    background-color: #e5e2df;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: none;
    opacity: 0;
    top: 60px;
    right: 0;
    font-family: "Catamaran", sans-serif;
    position: absolute;
    padding: 47px 43px 50px 36px;
    width: 384px;
    z-index: 101;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.login-form:before,
.register-form:before {
    content: '';
    position: absolute;
    top: -16px;
    right: 23px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-width: 0 8px 16px 8px;
    border-style: solid;
    border-color: transparent transparent #e5e2df transparent;
}

.close_img {
    cursor: pointer;
    top: 22px;
    right: 13px;
    position: absolute;
    width: 18px;
}

.login-form h2,
.register-form h2,
.origin-register-form h2 {
    color: #040911;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
}

.login-form p,
.register-form p,
.origin-register-form p {
    color: #040911;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.63;
    letter-spacing: -0.36px;
    padding-bottom: 21px;
    padding-left: 25px;
    text-align: center;
}

.login-input,
.register-input,
.input-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.login-input,
.register-input {
    margin-bottom: 16px;
}

#passwordEye {
    cursor: pointer;
}

.fullname-text {
    color: #040911;
    padding-left: 45px;
    margin: -8px 0 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Catamaran", sans-serif;
    line-height: 1.08;
    letter-spacing: -0.22px;
}

.icon-img {
    margin-right: 5px;
    max-height: 20px;
    max-width: 20px;
    position: relative;
}

.input-group {
    position: relative;
}

.input-label {
    position: absolute;
    z-index: 1;
    top: 0;
    color: rgba(4, 9, 17, 0.6);
    text-align: left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    transition: .4s cubic-bezier(.25, .8, .25, 1);
    font-family: "Catamaran", sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 10px;
    padding: 18px 0 11px 9px;
    pointer-events: none;
}

.input-focus-value .input-label {
    transform: translateY(-6px) scale(1);
    color: #dcad18;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: 0.23px;
    padding: 0 1px 0 1px;
}

.input-value .input-label {
    display: none;
}

.input-group>input {
    background-color: rgba(4, 9, 17, 0.12);
    box-shadow: inset 2px -2px 6px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    border: solid 0.8px rgba(4, 9, 17, 0.08);
    /* color: #0c1a2f; */
    padding: 14px 0 12px 21px;
    font-family: "Catamaran", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.23px;
    height: 45px;
    width: 280px;
}

.input-group select {
    background-color: rgba(4, 9, 17, 0.12);
    box-shadow: inset 2px -2px 6px 0 rgba(0, 0, 0, 0.08);
    width: 280px;
    padding: 13px;
    border-radius: 5px;
}

.input-focus-bg {
    display: block;
    background-color: transparent;
}

.input-focus-value .input-focus-bg {
    background-color: #e5e2df;
    padding: 10px;
    width: 75px;
    position: absolute;
    top: -9px;
    left: 6px;
    z-index: 0;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.input-focus-value .input-focus-bg.input-confirm-bg {
    width: 120px;
}

.input-focus-value .input-focus-bg.input-mobile-bg {
    width: 110px;
}

.input-focus-value .input-focus-bg.input-birth-bg {
    width: 90px;
}

.input-focus-value .input-focus-bg.input-line-bg {
    width: 60px;
}

.input-focus-value .input-focus-bg.th-user-bg {
    width: 60px;
}

.input-focus-value .input-focus-bg.th-psw-bg {
    width: 70px;
}

.input-focus-value .input-focus-bg.th-confirm-bg {
    width: 130px;
}

.input-focus-value .input-focus-bg.th-fullname-bg {
    width: 90px;
}

.input-focus-value .input-focus-bg.th-mobile-bg {
    width: 170px;
}

.input-focus-value .input-focus-bg.th-birth-bg {
    width: 60px;
}

.input-focus-value .input-focus-bg.input-referral-bg {
    width: 90px;
}

.input-focus-value .input-focus-bg.th-referral-bg {
    width: 150px;
}

.input-focus-value input {
    background-color: #e5e2df;
    border-radius: 4px;
    border: solid 1.2px #dcad18;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.input-group>img {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 14px;
    max-height: 20px;
    max-width: 20px;
}

.register-wrapper .form-btn-group {
    padding-left: 25px;
}

.form-btn.btn {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
    color: #191919;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 0 10px 0;
    height: 44px;
    opacity: 0.4;
    width: 100%;
}

.visible-click.form-btn.btn {
    opacity: 1;
    cursor: pointer;
}

.forgot-wrapper {
    position: relative;
    text-align: right;
}

.forgot-psw-btn {
    color: #040911;
    display: inline-block;
    padding-top: 14px;
    opacity: 0.6;
    font-family: "Catamaran", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.2px;
}

.form-left {
    bottom: 6px;
    color: #040911;
    display: block;
    left: 14px;
    position: absolute;
    opacity: 0.8;
    font-family: "Catamaran", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.form-right {
    bottom: 6px;
    color: #040911;
    display: block;
    right: 14px;
    position: absolute;
    opacity: 0.8;
    font-family: "Catamaran", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

/* date picker */
#reg-birth_root {
    top: 45px;
}

select.picker__select--year {
    padding: .3em;
    width: 30%;
}

select.picker__select--month {
    padding: .3em;
    width: 35%;
}

/* date picker end */
.register-text {
    color: #040911;
    font-family: "Catamaran", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.2px;
    padding-left: 14px;
    margin-bottom: 17px;
    width: 100%;
    line-height: 8px;
    display: flex;
    align-items: center;
}

.register-text a {
    color: #b70606;
    text-decoration: underline;
}

.login-input.input-focus-value path,
.register-input.input-focus-value path {
    fill: #dcad18;
}

.login-input.is-valid path,
.register-input.is-valid path {
    fill: #58a40b;
}

.login-input.is-invalid path,
.register-input.is-invalid path {
    fill: #b70606;
}

.login-input.is-valid .input-group>input,
.register-input.is-valid .input-group>input {
    border: solid 1.2px #58a40b;
}

.login-input.is-invalid .input-group>input,
.register-input.is-invalid .input-group>input {
    border: solid 1.2px #b70606;
}

.is-invalid.input-focus-value .input-label {
    color: #b70606;
}

.is-valid.input-focus-value .input-label {
    color: #58a40b;
}

.is-valid .feedback-text {
    font-family: "Catamaran", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.17;
    color: #58a40b;
}

.is-invalid .feedback-text {
    font-family: "Catamaran", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.17;
    color: #b70606;
}

#passwordEye,
#regPswEye,
#regConfirmPswEye {
    position: absolute;
    right: 10px;
    top: 14px;
}

.register-input .eye,
.login-input .eye {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 14px;
    background: url(../images/icon/eye-close.png) center no-repeat;
    background-size: contain;
}

.register-input .eye.cur,
.login-input .eye.cur {
    background: url(../images/icon/eye-show.png) center no-repeat;
    background-size: contain;
}

#changePswEye {
    cursor: pointer;
    position: absolute;
    right: 10px;
}

#changeConfirmPswEye {
    cursor: pointer;
}

#passwordEye svg,
#regPswEye svg,
#regConfirmPswEye svg,
#changePswEye svg,
.wallet-dropdown svg {
    position: relative;
}

.wallet-dropdown path {
    fill: #000;
}

.member-btn .btn.login-btn {
    /* background-color: #0a0a0a; */
    background-color: #ffc107;
    border-radius: 4px;
    color: #f1cc50;
    color: #ffc107;
    color: #000000;
    display: inline-block;
    position: relative;
    margin-right: 10px;
    font-weight: 600;
}
/* login & register form end */
/* register button */
.affiliate-btn {
    padding: 10px;
    margin: 0 5px;
}

.member-btn .btn.register-btn,
.affiliate-btn,
.casino-button .btn.play-btn,
.lottery-button .btn.play-btn,
.member-btn .btn.form-btn {
    /* color: #0b131f; */
    background-image: -webkit-gradient(linear, left bottom, left top, from(#efc544), to(#f2f283));
    background-image: linear-gradient(to top, #efc544, #f2f283), linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    background: #dc3545;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    font-weight: 600;
    color: #fff;
}

#btnLogout {
    width: 115px;
    white-space: nowrap;
}

.member-btn .btn.register-btn:active,
.affiliate-btn:active,
.casino-button .btn.play-btn:active,
.lottery-button .btn.play-btn:active,
.member-btn .btn.form-btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#efc544), to(#f2f283));
    background-image: linear-gradient(to bottom, #efc544, #f2f283), linear-gradient(to bottom, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    background: #dc3545;
}

.member-btn .btn.register-btn::after,
.casino-button .btn.play-btn::after,
.lottery-button .btn.play-btn::after,
.member-btn .btn.form-btn::after {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffa7), to(#f1cc50));
    background-image: linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    background: #ffe588;
    border-radius: 4px;
    content: '';
    display: block;
    position: absolute;
    bottom: -1.2px;
    top: -1.2px;
    right: -1.2px;
    left: -1.2px;
    z-index: -1;
}

/* register button end */
/* login form info msg - Prompt Layout */
.prompt-layout {
    display: none;
}

.prompt-layout.show {
    display: block;
    position: absolute;
    z-index: 101;
    top: 50px;
    right: -5px;
    width: 190px;
    font-family: sans-serif;
    border-radius: 10px;
    box-shadow: 2px 3px 2px 0 rgba(0, 0, 0, 0.3);
    background: -webkit-linear-gradient(#e9e5e5, #c9cbcc);
    padding: 10px;
}

.prompt-layout::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -15px;
    right: 14px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #ccc;
    border-bottom-color: #e9e5e5;
}

.prompt-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.prompt-msg {
    width: 100%;
    font-size: 12px;
    text-align: center;
}

/* login form info msg  - Prompt Layout end */
/* forgot msg - Prompt Layout */
.forgot-prompt-layout {
    display: none;
}

.forgot-prompt-layout.show {
    display: block;
    position: absolute;
    text-align: left;
    z-index: 101;
    top: 40px;
    right: 0;
    width: 190px;
    font-family: sans-serif;
    border-radius: 10px;
    box-shadow: 2px 3px 2px 0 rgba(0, 0, 0, 0.3);
    background: -webkit-linear-gradient(#e9e5e5, #c9cbcc);
    padding: 10px;
}

.forgot-prompt-layout::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -15px;
    right: 25px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #ccc;
    border-bottom-color: #e9e5e5;
}

.forgot-prompt-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.forgot-prompt-msg {
    width: 100%;
    font-size: 12px;
    text-align: center;
}

/* forgot msg - Prompt Layout end */
/* login & register error or correct msg */
.form-feedback {
    margin-top: 2px;
    padding-left: 45px;
    margin-bottom: -6px;
}

.form-feedback img {
    vertical-align: middle;
    margin-right: 3px;
    height: 12px;
    width: 12px;
}

.feedback-text {
    color: #040911;
    font-family: "Catamaran", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.17;
    letter-spacing: -0.2px;
    opacity: 0.9;
    color: #b70606;
}

/* login & register error or correct msg end */
/* after login */
.after-login .top-dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 5px 0;
}

.member-btn .wallet-dropdown .btn.register-btn {
    padding: 10px;
    width: 130px;
}

.invite-text {
    color: #18458a;
    cursor: pointer;
    font-family: "PingFangTC", sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-right: 19px;
}

.invite-text:hover {
    color: #f1cc50;
}

.invite-text svg {
    position: relative;
    margin-right: 7px;
}

.invite-text:hover path {
    fill: #f1cc50;
}

#referlink {
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    padding: 6px 12px;
    font-size: 14px;
    margin-top: 5px;
    width: 100%;
}

#referInput {
    width: 10px;
    height: 10px;
    opacity: 0;
    position: absolute;
    left: -9999px;
}

#copylinkBtn {
    border-width: 0.4px;
    margin-left: 0;
    height: 40px;
    width: 100px;
}

.user-dropdown,
.balance-dropdown {
    cursor: pointer;
    margin-right: 20px;
}

.balance-dropdown:hover .balance-menu,
.user-dropdown:hover .user-setting-menu,
.wallet-dropdown:hover .wallet-menu {
    display: block;
}

.balance-dropdown:hover .wallet-text,
.user-dropdown:hover .wallet-text

/* ,.wallet-dropdown:hover .wallet-text */
    {
    color: #f1cc50;
    color: #000000;
}

.balance-dropdown:hover .balance-img,
/*.wallet-dropdown:hover .wallet-img,*/
/*.wallet-img-hover,*/
.balance-img-hover {
    display: none;
}

.balance-dropdown:hover .balance-img-hover

/*,.wallet-dropdown:hover .wallet-img-hover */
    {
    display: block;
}

.after-login .top-dropdown img,
.wallet-dropdown svg {
    margin-right: 8px;
    height: 16px;
    width: 16px;
}

.wallet-text {
    display: inline-block;
    color: #d9d9d9;
    color: #000000;
    font-family: "PingFangTC", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.wallet-text i {
    padding-left: 7px;
}

.user-dropdown .user-setting-menu,
.wallet-dropdown .wallet-menu {
    width: 130px;
}

.wallet-dropdown .wallet-menu {
    top: 40px;
    top: 40px;
}

.top-menu {
    border-radius: 2px;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.3);
    background-image: linear-gradient(to top, #d1d3d4, #f3f4f4 48%, #e5e2df);
    display: none;
    position: absolute;
    top: 24px;
    right: -35px;
    transition: all .2s;
    -webkit-transition: all .2s;
    z-index: 101;
}

.user-setting-menu,
.wallet-menu {
    padding: 15px 0;
}

.user-setting-menu li:hover,
.wallet-menu li:hover {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    border-image-slice: 1;
    background-image: linear-gradient(to top, #efc544, #f2f283);
    font-size: 14px;
    font-weight: 600;
}

.user-setting-menu li a,
.wallet-menu li a {
    color: #040911;
    display: block;
    font-family: "Catamaran", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.2px;
    padding: 5px 13px;
}

.balance-menu {
    min-width: 176px;
    padding: 18px 14px 7px;
    font-family: "Catamaran", sans-serif;
}

.balance-menu li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main-text,
.total-text {
    color: #040911;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -0.23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main-text {
    border-bottom: 1px solid rgba(25, 25, 25, .6);
    padding-bottom: 9px;
}

li.product-text:first-child {
    padding-top: 7px;
}

.product-text {
    color: rgba(4, 9, 17, .8);
    font-size: 14px;
    line-height: 1.14;
    padding-bottom: 4px;
}

li.product-text:last-child {
    padding-bottom: 6px;
}

.total-text {
    border-top: 1px solid rgba(25, 25, 25, .6);
    padding-top: 9px;
}

.wallet-dropdown {
    cursor: pointer;
    margin-right: 37px;
    margin-right: 13px;
}

/* step */
.step-wrapper {
    background-color: #0c1a2f;
    background-color: #2e354d;
    background-image: linear-gradient(to right, #e3e1e2, #dc3545, #e3e1e2);
    /* background-image: linear-gradient(to right, #df7681,#e4616e, #df7681); */
}

/* after login end */
.header-bottom {
    background: #0b131f;
    background: #e7c9c9;
    background-image: linear-gradient(to right, #bf1414, #dc3545, #b00b0b);
    height: 80px;
}

/* h1#logo {
    padding: 12px 0;
    text-indent: 101%;
    overflow: hidden;
}

h1#logo a {
    display: block;
    width: 230px;
    height: 56px;
    background-image: url(../images/home/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
} */

/* navbar */
.navbar-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.navbar-list>li {
    padding: 29px 15px;
    font-weight: bold;
    /* position: relative; */
}

.navbar-list>li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position:relative;
}

.navbar-list>li:hover>a img.orig-img,
.navbar-list>li.active>a img.orig-img {
    display: none;
}

.navbar-list>li>a img.hover-img {
    display: none;
}

.navbar-list>li:hover>a img.hover-img,
.navbar-list>li.active>a img.hover-img {
    display: block;
}

.navbar-list>li>a img {
    display: block;
    /* height: 22px; */
    width: 25px;
    margin-right: 8px;
}

.navbar-list>li>a>span {
    color: #fff;
    font-size: 20px;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Thonburi', sans-serif;
    display: inline-block;
    text-transform: lowercase;
    text-wrap: nowrap;
}
.navbar-list>li>a>span:first-letter {
    text-transform: uppercase;
}
.navbar-list>li:hover>a span,
.navbar-list>li.active>a span {
    color: #f1cc50;
}

/* navbar end */
/* sub navbar */
.sub-navbar {
    /* background: rgba(11, 19, 31, 0.94); */
    background: rgb(104 113 127 / 94%);
    /* background: #ebb9b9; */
    border: solid 1px rgba(151, 151, 151, 0.1);
    display: none;
    position: absolute;
    top: 140px;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.navbar-list li:hover .sub-navbar {
    display: block;
}

.sub-navbar>.sub-navbar-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sub-navbar-list>li {
    background-color: transparent;
    transition: all .2s;
    width: calc(100% / 6);
}

.sub-navbar-list>li:hover {
    background-color: rgba(11, 19, 31, 0.7);
    background-color: #ebb9b9;
    background-color: #ebb9b98c;
}

.sub-navbar-items {
    display: block;
    font-size: 14px;
    font-weight: 800;
    padding: 9px 31px 11px;
    margin: 0 auto;
    transition: all .2s;
}

.sub-navbar-list>li:hover .sub-navbar-items img {
    opacity: 1;
}

.sub-navbar-items img {
    display: block;
    opacity: 0.6;
    transition: all .2s;
    width: 150px;
    height: 112px;
    /* height: 140px;
        height: 125px; */
    margin-bottom: 12px;
}

.sub-navbar-items span {
    border-radius: 4px;
    border: solid 1px #f1cc50;
    background-color: transparent;
    color: #f1cc50;
    /* color: #; */
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding-top: 9px;
    padding-bottom: 10px;
    text-align: center;
    position: relative;
    z-index: 1;
    -webkit-transition: all .4s cubic-bezier(0.42, 0, 0.58, 1);
    transition: all .4s cubic-bezier(0.42, 0, 0.58, 1);
}

.sub-navbar-items:hover span {
    color: #0b131f;
    font-weight: 800;
}

.sub-navbar-items:hover span:before {
    width: 100%;
    right: auto;
    left: 0;
}

.sub-navbar-items span:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#efc544), to(#f2f283));
    background-image: linear-gradient(to top, #efc544, #f2f283), linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    background: #ffe588;
    color: #2c2b2b !important;
    -webkit-transition: all .4s cubic-bezier(0.42, 0, 0.58, 1);
    transition: all .4s cubic-bezier(0.42, 0, 0.58, 1);
}

.sub-navbar-items span:active:before {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#f2f283), to(#efc544));
    background-image: linear-gradient(to top, #f2f283, #efc544), linear-gradient(to top, #ffffa7, #f1cc50 20%, #ffffa7 50%, #efc544 74%, #ffffa7);
}

.sub-navbar>.justify-content-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

/* sub navbar end */
/* top end */

/* banner */
.banner-wrapper {
    position: relative;
    background-color: #101010;
    overflow: hidden;
}

.banner-wrapper .banner-list {
    max-width: 1920px;
    margin: 0 auto;
    font-size: 0;
}

.banner-wrapper .banner-list li {
    display: inline-block;
}

.banner-wrapper .banner-list li img {
    width: 100%;
    display: block;
}

.banner-button-prev {
    position: absolute;
    top: 46%;
    left: 90px;
    z-index: 99;
    width: 24px;
    height: 42px;
    background-image: url(../img/index/banner_arrow.svg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    cursor: pointer;
    opacity: .18;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.banner-button-prev:hover {
    opacity: .4;
}

.banner-button-next {
    position: absolute;
    top: 46%;
    right: 90px;
    z-index: 99;
    width: 24px;
    height: 42px;
    background-image: url(../img/index/banner_arrow.svg);
    cursor: pointer;
    opacity: .18;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.banner-button-next:hover {
    opacity: .4;
}

/* banner end */

/* banner swiper */
.swiper-pagination {
    bottom: 35px !important;
}

.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    margin: 0 10px !important;
    background-color: #f8f8f8;
    opacity: 0.3;
}

.swiper-pagination-bullet-active {
    background-color: #f1cc50;
    opacity: 0.9;
}

/* banner swiper end */

/* index marquee */
.marquee-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    margin: 0 auto;
    background-color: rgba(11, 19, 31, 0.7);
    overflow: hidden;
    padding: 8px 0;
}

.marquee-wrapper>.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.marquee-text {
    color: #f1cc50;
    font-family: "PingFangTC", sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-right: 5px;
    white-space: nowrap;
}

.container marquee {
    color: #fff;
    font-size: 13px;
    padding: 4px;
}

.marquee-img {
    background: url("../images/icon/announce.svg") top center no-repeat;
    margin-right: 10px;
    height: 16px;
    min-width: 16px;
}

.marquee-list {
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-list li {
    display: inline-block;
    padding: 5px;
    font-size: 14px;
    color: #f8f8f8;
    letter-spacing: 0.3px;
    opacity: 0.6;
}

/* index marquee end */

/* main content */
#main {
    /* background-color: #0a172a; */
}



.step-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.step-item a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #d9d9d9;
    width: 318px;
}

.step-list li a {
    height: 90px;
}

.step-item>a>span {
    color: #f1cc50;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
    font-size: 60px;
    font-weight: 500;
    padding-left: 32px;
    padding-right: 19px;
}

.step-item:hover .step-item-text {
    color: #f1cc50;
}

.step-item-text {
    color: #d9d9d9;
    font-family: "Thonburi", sans-serif;
}

.step-item-text>h2 {
    padding-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
}

.step-item-text>span {
    line-height: 1.25;
    font-size: 16px;
}

.right-item:hover a {
    background-color: transparent;
    background-image: linear-gradient(to top, #d1d3d4, #f3f4f4 48%, #e5e2df);
}

.right-item:hover a .right-item-text {
    color: #0f2e5e;
}

.right-item:hover .right-item-button {
    border: solid 1.5px transparent;
    background-image: linear-gradient(to top, #0e2c59, #0f2e5e);
    color: #d9d9d9;
}

.right-item svg {
    position: relative;
}

.right-item a:hover path {
    fill: #0f2e5e;
}

.right-item a {
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #f1cc50;
    font-family: "Thonburi", sans-serif;
    padding: 16px 37px 10px 14px;
    height: 90px;
    width: 326px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.step-img {
    margin-right: 19px;
    height: 50px;
    width: 57px;
}

.right-item-text {
    /* color: #0c1a2f; */
    height: 100%;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.right-item-top {
    line-height: 1;
    font-size: 22px;
    font-family: "Catamaran", sans-serif;
    margin-bottom: 4px;
}

.right-item-button {
    border-radius: 4px;
    /* border: solid 1.5px #0c1a2f; */
    text-align: center;
    line-height: 1.14;
    letter-spacing: -0.2px;
    /* font-size: 14px; */
    font-size: 10px;
    font-family: "Catamaran", sans-serif;
    padding: 11px 5px 7px;
    white-space: nowrap;
}

/* step end */
/* main top content */
.main-top-wrapper {
    /* background-color: #0a172a; */
    padding-top: 41px;
    padding-bottom: 12px;
}

.main-top-wrapper>.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* upcoming sports */
.upcoming-wrapper {
    background: url(../images/home/sport_bg.png) top center no-repeat;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    height: 380px;
    width: 478px;
}

.upcoming-wrapper h2 {
    color: #f1cc50;
    font-family: "Thonburi", sans-serif;
    font-size: 28px;
    font-weight: bold;
    padding-top: 24px;
    padding-bottom: 19px;
    height: 79px;
    text-align: center;
}

.match-wrapper {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
    background-color: rgba(193, 193, 193, 0.12);
    padding-bottom: 12px;
    height: 200px;
}

.match-title {
    color: #d9d9d9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "Thonburi", sans-serif;
    font-size: 24px;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 26px;
}

.match-title img {
    margin-right: 8px;
    height: 30px;
    width: 30px;
}

.match-team {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 20px;
}

.match-team span {
    color: #f8f8f8;
    opacity: 0.9;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-family: "DevanagariSangamMN", sans-serif;
    font-size: 40px;
    font-weight: bold;
    margin-left: 35px;
    margin-right: 34px;
    width: 55px;
    height: 42px;
}

.match-img-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.match-img-wrapper img {
    min-height: 65px;
    min-width: 65px;
}

.match-img-wrapper span {
    color: #f8f8f8;
    opacity: 0.9;
    font-family: "Catamaran", sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding-top: 8px;
    padding-bottom: 12px;
    margin: 0;
    line-height: 1.13;
    letter-spacing: -0.2px;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.match-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 12px;
    height: 100px;
    overflow: hidden;
}

.match-details h3 {
    color: #d9d9d9;
    font-family: "Thonburi", sans-serif;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 7px;
}

.match-time {
    color: #f1cc50;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-family: "Thonburi", sans-serif;
    font-size: 16px;
    font-weight: bold;
}

/* upcoming sports end */
/* casino banner */
.casino-wrapper {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    position: relative;
    height: 380px;
    width: 780px;
    overflow: hidden;
}

.casino-wrapper .casino-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

#casino-ag {
    background: url(../images/home/casino-img-ag.png) top center no-repeat;
    background-size: contain;
}

#casino-evo {
    background: url(../images/home/casino-img-evo.png) top center no-repeat;
    background-size: contain;
}

#casino-sa {
    background: url(../images/home/casino-img-sa.png) top center no-repeat;
    background-size: contain;
}

.casino-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.casino-logo {
    margin-top: 11px;
    margin-left: 17px;
    height: 43px;
}

.casino-game-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.game-img {
    margin-right: 6px;
    height: 24px;
    width: 24px;
}

.like-img {
    margin-right: 23px;
    height: 18px;
    width: 20px;
}

.casino-game-wrapper span {
    color: #c1c1c1;
    margin-right: 26px;
    font-family: "PingFangTC", sans-serif;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.5;
}

.casino-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}

.casino-bottom-wrapper {
    position: absolute;
    bottom: 84px;
    right: 70px;
    max-width: 260px;
    font-family: "Thonburi", sans-serif;
}

.casino-bottom-wrapper h2 {
    color: #f1cc50;
    line-height: 1.09;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 12px;
}

.casino-bottom-wrapper>span {
    color: rgba(248, 248, 248, 0.9);
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.14;
    letter-spacing: 0.4px;
    margin-bottom: 24px;
}

.casino-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.casino-button .btn.try-btn {
    border-radius: 4px;
    color: #f1cc50;
    display: inline-block;
    position: relative;
    margin-right: 17px;
    font-weight: 600;
}

.casino-button-prev {
    position: absolute;
    top: 46%;
    left: 20px;
    z-index: 99;
    width: 24px;
    height: 28px;
    background-image: url(../img/index/arrow.svg);
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    cursor: pointer;
    opacity: .2;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.casino-button-prev:hover {
    opacity: .4;
}

.casino-button-next {
    position: absolute;
    top: 46%;
    right: 20px;
    z-index: 99;
    width: 24px;
    height: 28px;
    background-image: url(../img/index/arrow.svg);
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .2;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.casino-button-next:hover {
    opacity: .4;
}

/* casino banner end */
/* casino banner swiper */
.casino-pagination.swiper-pagination {
    bottom: 35px !important;
}

.casino-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
    background-color: rgba(248, 248, 248, 0.4);
    opacity: 0.3;
}

.casino-pagination .swiper-pagination-bullet-active {
    background-color: rgba(241, 204, 80, 0.4);
    opacity: 0.9;
}

/* casino banner swiper end */
/* main top content end */
/* main center content */
.main-center-wrapper {
    /* background-color: #0a172a; */
}

.main-center-content {
    background-color: rgba(4, 9, 17, 0.6);
    border-radius: 20px;
    padding: 17px 21px 20px 23px;
    margin-bottom: 65px;
    margin-top: 20px;
}

.top-slots-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 19px;
}

/* recommend games */
.recommend-games {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width: 100%;
    max-width: 736px;
    max-height: 368px;
}

.recommend-game-items {
    border-radius: 20px;
    max-height: 176px;
    margin-right: 14px;
    margin-bottom: 15px;
    position: relative;
    width: calc((100% - 28px) / 3);
    overflow: hidden;
}

.top-slots-wrapper .recommend-game-items:nth-child(3n) {
    margin-right: 0;
}

.slots-new-text {
    display: block;
    position: absolute;
    top: 10px;
    right: -30px;
    width: 120px;
    color: #f8f8f8;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.6);
    background: -webkit-linear-gradient(#c30b0b, #82181c);
    background: linear-gradient(#c30b0b, #82181c);
    text-align: center;
    transform: rotate(39deg);
    padding: 8px;
    z-index: 1;
}

.recommend-game-text {
    background-color: rgba(11, 19, 31, 0.9);
    /* background-color: rgb(104 113 127 / 94%); */
    bottom: 0;
    position: absolute;
    text-align: center;
    top: 76.7%;
    right: 0;
    left: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 2;
}

.recommend-game-items:hover .recommend-game-text {
    top: 0;
}

.recommend-game-items:hover .recommend-game-text>span,
.recommend-game-items:hover .recommend-game-text>a {
    display: none;
}

.recommend-game-text>span {
    color: #f1cc50;
    display: block;
    padding: 15px 10px 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.13;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommend-game-text a {
    bottom: 0;
    right: 0;
    padding: 15px 0 8px;
    position: absolute;
}

.recommend-game-text a .like-img {
    margin-right: 11px;
}

.recommend-btn-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}

.recommend-button {
    width: 100%;
}

.recommend-button>.btn {
    top: 50px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.recommend-button .btn.try-btn {
    border-radius: 4px;
    color: #f1cc50;
    position: relative;
    margin: 0 auto 12px;
    max-width: 100px;
    font-weight: 600;
    display: block;
}

.recommend-button .btn.play-btn {
    /* color: #0b131f; */
    cursor: pointer;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#efc544), to(#f2f283));
    background-image: linear-gradient(to top, #efc544, #f2f283), linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    border-radius: 4px;
    position: relative;
    max-width: 100px;
    margin: 0 auto;
    font-weight: 600;
    display: block;
}

.recommend-button .btn.play-btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#efc544), to(#f2f283));
    background-image: linear-gradient(to bottom, #efc544, #f2f283), linear-gradient(to bottom, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
}

.recommend-game-items:hover .recommend-button>.btn {
    top: 0;
}

.recommend-button .btn.play-btn::after {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffa7), to(#f1cc50));
    background-image: linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    border-radius: 4px;
    content: '';
    display: block;
    position: absolute;
    bottom: -1.2px;
    top: -1.2px;
    right: -1.2px;
    left: -1.2px;
    z-index: -1;
}

.recommend-text-wrapper {
    bottom: -50px;
    color: #f8f8f8;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    padding-left: 10px;
    width: 100%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.recommend-text-wrapper span {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.recommend-text-wrapper img {
    height: 10px;
    width: 16px;
}

.recommend-game-items:hover .recommend-text-wrapper {
    bottom: 10px;
    left: 0;
}

.recommend-game-wrapper {
    padding-right: 6px;
}

/* lottery wrapper */
.bottom-slots-wrapper,
.lottery-img,
.lottery-img img {
    height: 368px;
    width: 737px;
}

.bottom-slots-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.lottery-img {
    position: relative;
    margin-right: 14px;
}

.lottery-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    max-width: 260px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.lottery-wrapper h2 {
    color: #f1cc50;
    font-family: "Thonburi", sans-serif;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.09;
}

.lottery-wrapper span {
    color: #f8f8f8;
    margin: 14px 45px 16px 0;
    font-family: "Thonburi", sans-serif;
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 0.4px;
}

.recommend-bottom-games {
    max-width: 486px;
    max-height: 368px;
}

.recommend-bottom-items {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
}

.recommend-bottom-items:nth-child(even) {
    margin-right: 0;
}

/* lottery wrapper end */
/* recommend games end */
/* mini games */
.mini-games-wrapper {
    padding-bottom: 41px;
}

.mini-games-wrapper h2 {
    color: #f1cc50;
    color: #000000;
    font-family: "Thonburi", sans-serif;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 21px;
}

.game-list-wrapper {
    position: relative;
    overflow: hidden;
}

.game-list-wrapper button {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: none;
}

.game-list-wrapper button.game-list-prev {
    left: 12px;
    z-index: 99;
}

.game-list-wrapper button.game-list-next {
    right: 12px;
    z-index: 99;
}

.game-list-wrapper button span.prev {
    background-image: url(../img/index/transparent_arrow.svg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: block;
    opacity: .2;
    height: 40px;
    width: 40px;
}

.game-list-wrapper button span.next {
    background-image: url(../img/index/transparent_arrow.svg);
    display: block;
    opacity: .2;
    height: 40px;
    width: 40px;
}

.game-list-wrapper button.game-list-prev:hover span {
    opacity: .4;
}

.game-list-wrapper button.game-list-next:hover span {
    opacity: .4;
}

.game-list {
    width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}

.game-list li {
    /* width: 308px !important;
    width: 304px !important;
    margin-right: 16px; */
    position: relative;
    text-align: center;
    cursor: pointer;
}

.game-list-img {
    display: block;
}

.game-list-img img {
    max-height: 169px;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* Slider end */
/* Slider loading */
.slick-loading .slick-list {
    background: #fff url("ajax-loader.gif") center center no-repeat;
}

/* Slider loading end */
/* mini games end */
/* main center content end */
/* footer guide sub bar */
.guide-sub-bar {
    background-color: #0c1a2f;
    padding: 20px 0 14px;
}

.guide-sub-bar ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.guide-sub-bar ul li:not(:first-child) {
    padding-left: 19px;
}

.guide-sub-bar ul li:not(:last-child) {
    border-right: 1px solid rgba(241, 204, 80, 0.6);
    height: 20px;
    padding-right: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.guide-sub-bar ul li a {
    color: #f1cc50;
    /* color: #2c2b2b; */
    display: block;
    font-family: "PingFangTC", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.2px;

}

.guide-sub-bar ul li a:hover {
    color: #d9d9d9;
}

/* footer guide sub bar end */
/* main content end */

/* footer */
#footer {
    background-color: #040911;
    /* background-color: #2e354d; */
    /* padding: 41px 0 12px; */
}

.footer-content,
.footer-text-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 20px;
}

.footer-left-content {
    max-width: 453px;
    margin-right: 59px;
}

.footer-left-content h2,
.footer-right-content h2 {
    color: #F8F8F8;
    opacity: 0.3;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 9px;
    line-height: 1.17;
    letter-spacing: -0.4px;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.footer-left-content p {
    color: #F8F8F8;
    opacity: 0.2;
    font-family: "PingFangTC", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.2px;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.footer-text-content {
    border-left: 1px dotted rgba(248, 248, 248, 0.2);
    padding: 0 14px 14px;
    min-width: 152px;
    min-width: 165px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.footer-right-content:hover .footer-text-content {
    border-left: 1px dotted rgba(248, 248, 248, 1);
}

.footer-text-content:last-child {
    border-right: 1px dotted rgba(248, 248, 248, 0.2);
}

.footer-text-content h4 {
    color: #F8F8F8;
    opacity: .22;
    /*-webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 5px;
}

.footer-text-content ul li a {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #F8F8F8;
    opacity: 0.16;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.footer-text-content span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
    padding-bottom: 4px;
    color: #F8F8F8;
    opacity: 0.16;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.payment-img {
    padding-bottom: 21px;
    font-size: 0;
    opacity: 0.2;
    /*  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.payment-img img {
    max-height: 28px;
    margin-right: 8px;
}

.bank-img {
    opacity: 0.2;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.bank-img img {
    max-height: 24px;
    margin-right: 5px;
}

.contact-wrapper {
    margin-bottom: 27px;
}

.contact-wrapper h4 {
    font-size: 16px;
    font-weight: 600;
    color: #F8F8F8;
    opacity: 0.2;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.contact-img {
    font-size: 0;
}

.contact-img a {
    display: inline-block;
    font-size: 0;
    margin-right: 5px;
}

.contact-img a:last-child {
    margin-right: 0;
}

.contact-img a img {
    opacity: .2;
    height: 20px;
    width: 20px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.suggested-browser h4 {
    white-space: nowrap;
}

.browser-img {
    opacity: 0.2;
    /*  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.browser-img img {
    height: 26px;
    width: 26px;
}

.povider-wrapper {
    color: #F8F8F8;
    opacity: 0.2;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all .2s;
    transition: all .2s;*/
    margin-top: 62px;
    margin-bottom: 12px;
}

.copyright {
    font-family: "PingFangTC", sans-serif;
    font-size: 14px;
    text-align: center;
    color: #F8F8F8;
    padding: 25px 0 19px;
    opacity: 0.2;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    -webkit-transition: all .2s;
    transition: all .2s;
}

.footer-left-content:hover h2,
.footer-left-content:hover p,
.footer-right-content:hover h2,
.footer-right-content:hover .footer-text-content h4,
.footer-right-content:hover .footer-text-content ul li a,
.footer-right-content:hover .footer-text-content span,
.footer-right-content:hover .contact-wrapper h4 {
    opacity: 1;
    /*  -webkit-filter: grayscale(0%);
    filter: grayscale(0%);*/
}

.footer-right-content:hover .payment-img,
.footer-right-content:hover .bank-img,
.footer-right-content:hover .browser-img {
    opacity: 1;
    /* -webkit-filter: grayscale(0%);
    filter: grayscale(0%);*/
}

.footer-right-content:hover .contact-img a img {
    opacity: 1;
}

.povider-hover-group:hover .povider-wrapper,
.povider-hover-group:hover .copyright {
    opacity: 1;
    /* -webkit-filter: grayscale(0%);
    filter: grayscale(0%);*/
}

/* footer end */

/* left aside */
.aside-left {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
    background-color: #f1cc50;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    position: fixed;
    padding: 23px 18px 20px 16px;
    top: 47%;
    left: 0;
    width: 70px;
    z-index: 99;
}

.aside-left img {
    width: 36px;
}

.aside-left-text {
    /* color: #0c1a2f; */
    transform: rotate(180deg);
    text-align: center;
    font-family: "PingFangTC", sans-serif;
    font-size: 26px;
    font-weight: 600;
    position: relative;
}

.aside-left-text span {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-left: 2px;
}

/* left aside end */

/* right aside */
.aside-right {
    position: fixed;
    top: 47%;
    text-align: center;
    font-family: "PingFangTC", sans-serif;
    right: 0;
    z-index: 99;
}

.aside-right-top,
.aside-right-bottom {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
    background-color: #f1cc50;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 6px 4px;
}

.aside-right-top {
    margin-bottom: 12px;
    width: 112px;
}

.aside-right-bottom {
    right: 0;
    position: fixed;
    width: 60px;
}

.aside-right-wrapper {
    position: relative;
}

.aside-right-close {
    cursor: pointer;
    left: 4px;
    position: absolute;
    width: 14px;
}

.line-text {
    /* color: #0c1a2f; */
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.line-bg {
    background-color: #fff;
    border-radius: 999em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 4px 0 6px;
    height: 104px;
    width: 104px;
}

.line-bg img {
    box-shadow: 2px 3px 2px 0 rgba(0, 0, 0, 0.1);
    height: 72px;
    width: 72px;
}

.line-id {
    /* color: #0c1a2f; */
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.6px;
    text-align: center;
}

.aside-right-top.closed {
    right: -120px;
    opacity: 0;
}

.aside-right-bottom img {
    height: 36px;
    width: 36px;
}

.aside-right-bottom span {
    /* color: #0c1a2f; */
    font-size: 12px;
    font-weight: bold;
}

/* right aside end */

/* casino & slots pages style */
.casino-banner-wrapper {
    position: relative;
}

.banner {
    max-width: 1920px;
    margin: 0 auto;
}

.banner img {
    display: block;
}

.content_lobby.slots {
    /* background-color: #0A172A; */
}

.content_lobby {
    background: #0a172a;
}

.content_lobby.slots-game {
    /* background-color: #0A172A; */
}

.content_lobby.casino {
    background-image: url(../images/casino/casino_bg.jpg);
    background-color: #040911;
    background-size: cover;
    background-repeat: no-repeat;
}

.content_lobby.slots>.container {
    padding-top: 42px;
}

.casino .container {
    padding-top: 42px;
}

.content_lobby.slots-game>.container {
    padding-top: 30px;
}

/* slots, casino cards satrt */
@-webkit-keyframes animated-flip {
    form {
        -webkit-transform: perspective(3000px) rotate3d(0, 180, 0, 370deg);
        transform: perspective(3000px) rotate3d(0, 180, 0, 370deg);
    }

    to {
        -webkit-transform: perspective(3000px) rotate3d(0, 180, 0, 360deg);
        transform: perspective(3000px) rotate3d(0, 180, 0, 360deg);
    }
}

@keyframes animated-flip {
    form {
        -webkit-transform: perspective(3000px) rotate3d(0, 180, 0, 370deg);
        transform: perspective(3000px) rotate3d(0, 180, 0, 370deg);
    }

    to {
        -webkit-transform: perspective(3000px) rotate3d(0, 180, 0, 360deg);
        transform: perspective(3000px) rotate3d(0, 180, 0, 360deg);
    }
}

.cards-list {
    font-size: 0;
}

.cards-list li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 408px;
    height: 374px;
    margin-top: 46px;
    margin-right: 28px;
    font-size: 1rem;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    -webkit-transform: rotate3d(0, 180, 0, 180deg);
    transform: rotate3d(0, 180, 0, 180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cards-list li:hover .cards-btn {
    visibility: visible;
    opacity: 1;
}

.cards-list li:hover .cards-btn .cards-btn-icon,
.cards-list li:hover .cards-btn span {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.cards-list li:hover .cards-title {
    opacity: 0.3;
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

.cards-list li:hover .cards-content h3,
.cards-list li:hover .cards-content p {
    opacity: 0.3;
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

.cards-list li:hover .cards-content img {
    opacity: 0.8;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

.cards-list li.animated-flip {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(3000px) rotate3d(0, 180, 0, 360deg);
    transform: perspective(3000px) rotate3d(0, 180, 0, 360deg);
    -webkit-animation-name: animated-flip;
    animation-name: animated-flip;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

.cards-list li:nth-child(-n+3) {
    margin-top: 0;
}

.cards-list li:nth-child(3n) {
    margin-right: 0;
}

.cards-title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding-top: 68px;
    padding-left: 33px;
    text-align: left;
}

.cards-title h2 {
    color: #f8f8f8;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.04;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    opacity: 0.96;
}

.cards-title p {
    margin-top: 8px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.07;
    color: #f8f8f8;
    opacity: 0.96;
}

.cards-content {
    -webkit-transition: -webkit-transform 0.8s;
    transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cards-content img {
    width: 100%;
}

.cards-content h3 {
    margin-top: 12px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.14;
    color: #f1cc50;
}

.cards-content p {
    padding: 5px;
    font-size: 16px;
    line-height: 1.25;
    color: rgba(248, 248, 248, 0.8);
}

.cards-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cards-btn a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-top: 120px;
    text-align: center;
}

.cards-btn a .cards-btn-icon,
.cards-btn a span {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.cards-btn a .cards-btn-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 86px;
    height: 86px;
    margin: 0 auto;
    border: solid 3px #f1cc50;
    border-radius: 50%;
}

.cards-btn a .cards-btn-icon img {
    width: 60px;
}

.cards-btn a span {
    display: inline-block;
    padding-top: 5px;
    font-size: 32px;
    line-height: 1.06;
    color: #f1cc50;
}

/* slots, casino cards end */
.guide-sub-bar.casino {
    background-color: transparent;
    margin-top: 58px;
}

.guide-sub-bar.slots {
    margin-top: 61px;
}

/* casino & slots pages style end */

/* sports pages */
.sports-wrapper {
    background: url(../images/lobby/sport/sports-bg.jpg) center no-repeat;
    background-size: cover;
    min-height: 615px;
}

.number-wrapper {
    background: url(../images/lobby/number/number-bg.jpg) center no-repeat;
    background-size: cover;
    min-height: 615px;
}

.number-wrapper .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.number-content {
    border-radius: 12px;
    box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.2);
    background-color: rgba(193, 193, 193, 0.1);
    font-family: "Catamaran", sans-serif;
    padding: 25px 20px 16px 47px;
    height: 180px;
    width: 488px;
}

.sports-wrapper .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.sports-content {
    border-radius: 12px;
    box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.2);
    background-color: rgba(193, 193, 193, 0.1);
    font-family: "Catamaran", sans-serif;
    padding: 25px 20px 16px 47px;
    height: 180px;
    width: 488px;
}

.sports-content.sbobet {
    margin: 40px 50px 24px 0;
}

.sports-content.onebook {
    margin: 0 50px 24px 0;
}

.sports-content.cmd {
    margin: 0 50px 50px 0;
}

.sports-content h2 {
    color: #f1cc50;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.33;
}

.sports-content p {
    color: rgba(248, 248, 248, 0.8);
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 11px;
    line-height: unset;
}

.sports-content a {
    border-radius: 4px;
    border: solid 1.5px #f1cc50;
    color: #f1cc50;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    padding: 12px 0 8px;
    text-align: center;
    height: 40px;
    /* width: 120px; */
    width: 160px;
}

.guide-sub-bar.sports {
    background-color: #040911;
}

/* sports pages end */

/* slot games */
.slots-menu {
    border-radius: 33px;
    background-color: #080f1a;
    max-height: 66px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.slots-category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 18px 0 33px;
}

.slot-category-item a {
    color: #979797;
    display: block;
    font-family: "Thonburi", sans-serif;
    font-size: 18px;
    font-weight: bold;
    padding: 24px 13px 22px;
}

.slot-category-item a.active {
    color: #f1cc50;
    border-bottom: 1px solid rgba(241, 204, 80, 0.9);
}

.search-wrapper {
    border-radius: 22px;
    border: solid 1.4px rgba(151, 151, 151, 0.4);
    margin: 11px 18px;
    width: 264px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.search-wrapper img {
    margin: 0 12px 0 21px;
    height: 24px;
    opacity: 0.8;
}

.search-wrapper.focus img {
    margin: 0 12.4px 0 20px;
}

#search-game {
    background: transparent;
    color: rgb(217, 217, 217);
}

.search-wrapper.focus {
    border: solid 2px #efc544;
}

#search-game::-webkit-input-placeholder {
    color: rgba(151, 151, 151, 0.4);
    font-family: "Catamaran", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

/* firefox 19+ */
#search-game::-moz-placeholder {
    color: rgba(151, 151, 151, 0.4);
    font-family: "Catamaran", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

/* ie */
#search-game:-ms-input-placeholder {
    color: rgba(151, 151, 151, 0.4);
    font-family: "Catamaran", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

input#search-game:-moz-placeholder {
    color: rgba(151, 151, 151, 0.4);
    font-family: "Catamaran", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.provider-menu-wrapper {
    margin-top: 26px;
    margin-bottom: 42px;
    padding: 0 70px;
}

.game-provider-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.game-provider-items:not(:last-child) {
    margin-right: 26px;
}

.game-provider-items a {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
    /* background-color: #0b131f; */
    border-radius: 999em;
    display: block;
    position: relative;
    height: 60px;
    width: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.game-provider-items a.active {
    box-shadow: inset 0 0 0 2px #f1cc50;
}

.game-provider-items a img {
    top: 10px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    position: absolute;
    max-width: 40px;
}

.game-hover {
    opacity: 0;
    /* background-color: #0b131f; */
    border-radius: 999em;
    font-family: "Catamaran", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #f8f8f8;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 5px;
    right: 5px;
    left: 5px;
    bottom: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .4s;
    transition: all .4s;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.game-provider-menu li:hover .game-hover {
    -webkit-transition: all .4s;
    transition: all .4s;
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    opacity: 1;
}

.slots-list-wrapper .recommend-games {
    max-height: 100%;
    max-width: 100%;
}

.slots-list-wrapper .recommend-game-items {
    background: #080f1a;
    text-align: center;
    width: calc((100% - 56px) / 5);
}

.slots-list-wrapper .recommend-game-items:nth-child(5n) {
    margin-right: 0;
}

/* no game style */
.slots-no-games {
    display: none;
    text-align: center;
}

.slots-no-games img {
    display: block;
    width: 90px;
    padding-top: 24px;
    padding-bottom: 24px;
    margin: 0 auto;
}

.slots-no-games p {
    padding-bottom: 25px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    color: #d9d9d9;
    opacity: 0.8;
}

/* no game style */
/* pagination start */
.slots-game-pagination-wrapper {
    margin-top: 50px;
    text-align: center;
}

.slots-game-pagination-wrapper .slots-game-pagination {
    font-size: 0;
}

.slots-game-pagination-wrapper .slots-game-pagination li {
    display: inline-block;
    font-size: 16px;
}

.slots-game-pagination-wrapper .slots-game-pagination li:last-child a.page-fl {
    margin-right: 0;
}

.slots-game-pagination-wrapper .slots-game-pagination li a {
    cursor: pointer;
    display: block;
    height: 38px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: rgba(151, 151, 151, 1);
    border: solid 1px rgba(248, 248, 248, 0.4);
    border-radius: 6px;
    line-height: 36px;
}

.slots-game-pagination-wrapper .slots-game-pagination li a:hover {
    background-color: #191919;
    border: solid 1px #f1cc50;
    color: #f1cc50;
}

.slots-game-pagination-wrapper .slots-game-pagination li a:hover.active {
    /* color: #0c1a2f; */
}

.slots-game-pagination-wrapper .slots-game-pagination li a.disabled {
    color: rgba(248, 248, 248, 0.4);
    background-color: transparent;
    border: solid 1px rgba(248, 248, 248, 0.4);
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.slots-game-pagination-wrapper .slots-game-pagination li a.active {
    font-weight: 600;
    border: solid 1px transparent;
    background-color: #f1cc50;
    -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    /* color: #0c1a2f; */
}

.slots-game-pagination-wrapper .slots-game-pagination li a.page-item {
    width: 38px;
    font-size: 18px;
    margin-right: 10px;
    border-radius: 999em;
}

.slots-game-pagination-wrapper .slots-game-pagination li a.page-fl {
    margin-right: 10px;
    width: 64px;
}

.slots-game-pagination-wrapper .slots-game-pagination li a.page-pn {
    margin-right: 10px;
    width: 88px;
}

.slots-game-pagination-wrapper .slots-game-pagination li a.page-prev {
    margin-right: 14px;
}

.slots-game-pagination-wrapper .slots-game-pagination li a.page-next {
    margin-left: 4px;
}

/* pagination end */
.content_lobby.slots-game .guide-sub-bar.slots {
    margin-top: 42px;
}

/* slot games end */

/* lottery pages */
.content_lobby.lotto>.container {
    padding-top: 43px;
}

.lotto-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.lotto-wrapper li:not(:last-child) {
    margin-right: 23px;
}

.lotto-wrapper li {
    cursor: pointer;
    font-family: "Catamaran", sans-serif;
    text-align: center;
    width: calc((100% - 69px) / 3);
    min-height: 300px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.lotto-wrapper li:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.lotto-wrapper li img {
    max-height: 206px;
    max-width: 302px;
}

.lotto-wrapper li h2 {
    color: #f1cc50;
    margin: 12px auto 5px;
    line-height: 1.14;
    font-size: 28px;
    font-weight: 600;
}

.lotto-wrapper li p {
    color: #f8f8f8;
    line-height: 1.22;
    font-size: 18px;
}

.guide-sub-bar.lotto {
    margin-top: 59px;
}

/* lottery pages end */

/* promotions */
.promotion-wrapper .container {
    margin: 30px auto
}
.promotion-wrapper{
    background: #000;
}
.promo-bg {
    border-radius: 12px;
    /* background-color: rgba(216, 216, 216, 0.1); */
    padding: 36px 42px;
}

.promotion-menu {
    padding-left: 241px;
    padding-right: 241px;
    margin-bottom: 48px;
    font-size: 0;
    background-image: linear-gradient(to top, #0a172a, #0c1a2f);
    border-radius: 8px;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(25, 25, 25, 0.3), 0 -1px 2px 0 rgba(25, 25, 25, 0.1);
    box-shadow: 2px 2px 6px 0 rgba(25, 25, 25, 0.3), 0 -1px 2px 0 rgba(25, 25, 25, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.promotion-menu li {
    width: calc(100%/6);
    display: inline-block;
    font-size: 1rem;
}

.promotion-menu li a {
    display: block;
    padding: 24px 0 20px 0;
    font-size: 18px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    color: #d9d9d9;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.promotion-menu li a:hover,
.promotion-menu li a.active {
    border-radius: 2px;
    -webkit-box-shadow: inset 3px 4px 6px 0 rgba(0, 0, 0, 0.12);
    box-shadow: inset 3px 4px 6px 0 rgba(0, 0, 0, 0.12);
    border-style: solid;
    border-width: 1.2px;
    border-image-source: linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    background-image: linear-gradient(to top, #efc544, #f2f283), linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    color: #191919;
    height: 64px;
}

.promotion-no-games {
    text-align: center;
}

.promotion-no-games img {
    display: block;
    width: 90px;
    padding-top: 16px;
    padding-bottom: 24px;
    margin: 0 auto;
}

.promotion-no-games p {
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    color: #191919;
    opacity: 0.8;
}

.promotion-card-list {
    font-size: 0;
}

.promotion-card-list>li {
    display: inline-block;
    width: calc((100% - 68px) / 3);
    margin-right: 33px;
    font-size: 1rem;
    background-color: #0c1a2f;
    -webkit-box-shadow: 3px 3px 5px 0 rgba(25, 25, 25, 0.6);
    box-shadow: 3px 3px 5px 0 rgba(25, 25, 25, 0.6);
    border-radius: 5px;
}

.promotion-card-list>li:hover .card-img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.promotion-card-list>li:nth-child(3n) {
    margin-right: 0;
}

.promotion-card-list>li:not(:nth-child(-n+3)) {
    margin-top: 38px;
}

.promotion-card-list>li .card-img {
    overflow: hidden;
    height: 140px;
}

.promotion-card-list>li .card-img img {
    display: block;
    -webkit-transition: all .2s;
    transition: all .2s;
    height: 100%;
}

.promotion-card-list>li .card-text {
    padding: 13px 15px 18px 15px;
}

.promotion-card-list>li .card-text h3 {
    color: #f1cc50;
    font-size: 20px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promotion-card-list>li .card-text p {
    color: rgba(217, 217, 217, 0.8);
    height: 60px;
    padding-top: 15px;
    font-size: 16px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/* list-group start */
.tab-content>.tab-pane {
    display: none;
}

.tab-content>.active {
    display: block;
}

/* list-group end */
.promotion-btn-list {
    margin-top: 33px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.promotion-btn-list li {
    width: 50%;
}

.promotion-btn-list li:first-child {
    margin-right: 14px;
}

.promotion-btn-list li a {
    display: block;
    width: 100%;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.promotion-btn-list li .outline-btn {
    border-radius: 4px;
    border: solid 1px rgba(217, 217, 217, 0.8);
    color: rgba(217, 217, 217, 0.8);
    font-family: "PingFangTC", sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.promotion-btn-list li .outline-btn:hover {
    background: #d9d9d9;
    color: #0a172a;
}
.promotionModal .modal-body .join-btn,
.promo-pop .modal-body .join-btn{
    display: block;
    margin-top: 40px;
    margin-left: auto;
    height: 40px;
    width: 180px;
}

.promotion-btn-list li .btn,
.promotionModal .modal-body .join-btn,
.promo-pop .modal-body .join-btn {
    border-radius: 4px;
    background-color: #f1cc50;
    border: 1px solid transparent;
    /* color: #0b131f; */
    font-family: "PingFangTC", sans-serif;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promotion-btn-list li .btn:hover,
.promotionModal .modal-body .join-btn:hover,
.promo-pop .modal-body .join-btn:hover {
    background-color: transparent;
    border: 1px solid #f1cc50;
    color: #f1cc50;
}

.guide-sub-bar.promo {
    /* background-color: #0a172a; */
    border-top: 1px solid rgba(216, 216, 216, 0.1);
}

/* promotion modal start */
.promotionModal .modal-dialog {
    max-width: 1100px;
    -webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.4);
}

.promo-content {
    border-radius: 12px;
    background-color: rgba(217, 217, 217, 0.16);
}

.promo-wrapper {
    background-color: rgba(12, 26, 47, 0.8);
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6), -2px -2px 4px 0 rgba(0, 0, 0, 0.6);
    margin: 12px;
}

.promotionModal .close {
    position: absolute;
    right: 0;
    margin: 4px 14px 0 auto;
    -webkit-transition: cubic-bezier(0.175, 0.885, 0.52, 1.575) 0.2s;
    transition: cubic-bezier(0.175, 0.885, 0.52, 1.575) 0.2s;
}

.promotionModal .close:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.promotionModal .close img {
    display: block;
    width: 24px;
    height: 24px;
}

.promotionModal .modal-header {
    border: none;
    padding: 0;
    height: 230px;
}

.promotionModal .modal-body {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6), -2px -2px 4px 0 rgba(0, 0, 0, 0.6);
    /* background-color: rgba(12, 26, 47, 0.8); */
    padding: 11px 30px 20px;
    font-family: "Catamaran", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: #d9d9d9;
}

.promotionModal .modal-body .promotion-title {
    color: #f1cc50;
    padding-top: 10px;
    margin-bottom: 18px;
    font-size: 28px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
}

.promotionModal .modal-body .promotion-subtitle {
    margin-top: 18px;
    margin-bottom: 6px;
    font-size: 18px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
}

.promotionModal .modal-body .promotion-text {
    font-family: "Catamaran", sans-serif;
    color: #212121;
    letter-spacing: 0.2px;
    line-height: 1.38;
}

.promotionModal .modal-body .promotion-text .bold-text {
    display: block;
    font-weight: bold;
}

.promotionModal .modal-body .promotion-text-list {
    margin-left: 29px;
    list-style-type: decimal;
}


/* promotion modal end */
/* promotions end */

/* article page */
.article-wrapper {
    /* background-color: #0c1a2f; */
}

.article-wrapper>.container {
    padding-top: 60px;
}

.article-content {
    border-radius: 8px;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px rgba(217, 217, 217, 0.12);
    background-color: rgba(217, 217, 217, 0.06);
    color: #d8d8d8;
    font-family: "Catamaran", sans-serif;
    padding: 30px 25px 69px 40px;
    background-color: #fff;
    margin-bottom: 35px;
}

.article-content h2 {
    color: #f1cc50;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.6px;
}

.article-content h3 {
    color: #f1cc50;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.11;
}

.article-content h4 {
    color: #d8d8d8;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.13;
    letter-spacing: 0.6px;
}

.article-content p {
    color: #d8d8d8;
    color: #000;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
}

.guide-sub-bar.article {
    padding: 83px 0 30px;
}

/* article page end */

/* wallet */
.wallet-board {
    background-color: rgba(25, 25, 25, 0.18);
    border-radius: 6px;
    -webkit-box-shadow: 4px 4px 2px 0 rgba(25, 25, 25, 0.1);
    box-shadow: 4px 4px 2px 0 rgba(25, 25, 25, 0.1);
}

.wallet-header {
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    background-color: rgba(4, 9, 17, 0.6);
    margin-bottom: 8px;
    padding-top: 17px;
    padding-bottom: 17px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.wallet-header-title:not(:last-child) {
    margin-right: 126px;
}

.wallet-header-title .refresh-icon {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.wallet-header-title .refresh-icon:hover img {
    -webkit-animation: refresh .75s linear infinite;
    animation: refresh .75s linear infinite;
}

.wallet-header-title .refresh-icon img {
    display: inline-block;
    width: 18px;
    height: 18px;
}

.wallet-header-title span {
    color: #f8f8f8;
    display: inline-block;
    vertical-align: middle;
}

.wallet-header-title span:first-child {
    font-family: "PingFangTC", sans-serif;
    margin-right: 12px;
    font-size: 18px;
    font-weight: 500;
    color: #f1cc50;
}

.wallet-header-title span:nth-child(2) {
    font-size: 14px;
    color: #f8f8f8;
}

.wallet-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.wallet-list li {
    width: calc((100% - 56px) / 8);
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 12px;
    font-family: "Catamaran", sans-serif;
    color: #f8f8f8;
    border-radius: 4px;
    border: solid 1px rgba(241, 204, 80, .4);
}

.wallet-list li:nth-child(-n+8) {
    margin-bottom: 8px;
}

.wallet-list li:not(:nth-child(8n)) {
    margin-right: 8px;
}

.wallet-list li .wallet-name {
    font-size: 14px;
    font-weight: 600;
    opacity: .7;
}

.wallet-list li .wallet-currency {
    margin-right: 6px;
    font-size: 12px;
    opacity: .5;
}

.wallet-list li .wallet-amount {
    opacity: 0.4;
    font-family: "Catamaran", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 0.8;
    color: #f8f8f8;
}

.wallet-list li .wallet-amount.active {
    opacity: .5;
}

.thb-text {
    font-family: "Catamaran", sans-serif;
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: -0.2px;
    color: rgba(248, 248, 248, .6);
    padding-right: 11px;
}

/* wallet end */

/* profile */
.member-wrapper>.container {
    padding: 104px 0 105px;
}

.balance-wrapper {
    border-radius: 10px;
    box-shadow: 4px 4px 2px 0 rgba(25, 25, 25, 0.8);
    border: solid 2px rgba(241, 204, 80, .1);
    padding: 9px 8px;
    margin-bottom: 61px;
}

.member-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.member-menu {
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px rgba(217, 217, 217, .4);
    margin-top: 10px;
    width: 264px;
    border-radius: 8px;
}

.member-menu li a {
    display: block;
    padding: 11px 23px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(217, 217, 217, 0.6);
    border-bottom: solid 1px rgba(217, 217, 217, .4);
}

.member-menu li a:hover,
.member-menu li a.active {
    color: #0a172a;
    background-color: #f1cc50;
    -webkit-box-shadow: 0 -2px 4px 0 rgba(25, 25, 25, 0.2);
    box-shadow: 0 -2px 4px 0 rgba(25, 25, 25, 0.2);
}

.member-menu li a:hover .menu-icon,
.member-menu li a.active .menu-icon {
    opacity: 1;
}

.member-menu li span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 600;
}

.member-menu li .menu-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin-right: 20px;
}

.member-menu li:first-child a {
    border-radius: 8px 8px 0 0;
}

.member-menu li:last-child a {
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}

.member-content {
    width: calc(100% - 264px - 85px);
    margin-left: 85px;
}

.member-content>h2 {
    margin-bottom: 26px;
    font-size: 28px;
    font-family: "Catamaran", sans-serif;
    font-weight: 800;
    color: #d9d9d9;
}

.withdrawal-msg {
    color: #b70606;
    font-size: 14px;
    width: 415px;
}

/* profile end */

/* member page form start */
@-webkit-keyframes refresh {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

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

@keyframes refresh {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

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

/*.form-group {
    margin-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}*/

.withdrawal-msg-group {
    margin-bottom: 26px;
    font-size: 28px;
    font-family: "Catamaran", sans-serif;
    font-weight: 800;
    color: #d9d9d9;
}

.form-group .col-1 {
    width: 125px;
    margin-right: 28px;
    font-size: 14px;
    font-weight: 600;
    color: #d9d9d9;
    text-align: right;
}

.form-group .col-2 {
    width: 412px;
}

.form-group .col-2 select,
.form-group .col-2 input {
    width: 100%;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
}

.form-group .col-2 select {
    height: 38px;
    border-radius: 4px;
    border: solid 0.5px #d9d9d9;
    background-color: transparent;
    color: #d9d9d9;
    padding: 7px 14px;
}

.form-group .col-2 select option,
.form-group .col-2 select optgroup,
.form-group select option {
    color: #000;
}

.form-group .col-2 input {
    width: 100%;
    padding: 7px 14px;
    font-family: "Catamaran", sans-serif;
    border-radius: 4px;
    border: solid 0.5px #d9d9d9;
    background-color: transparent;
    color: #d9d9d9;
}

/*.form-group .col-2 input:focus {*/
/*    border: solid 1px #fdd609;*/
/*}*/
.form-group .col-2 input[type=file] {
    font-family: "Catamaran", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    letter-spacing: -0.7px;
    color: rgba(217, 217, 217, .4);
}

.form-group .col-2 input[type=file]::-webkit-file-upload-button {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 12px;
    /* color: #0c1a2f; */
    font-weight: 500;
    font-family: "PingFangTC", sans-serif;
    line-height: 1.17;
    background-color: rgba(25, 25, 25, 0.7);
    border: none;
    border-radius: 2px;
    background-color: #d9d9d9;
}

.form-group .col-2 input.password-input {
    padding-right: 35px;
}

.form-group .col-2 input::-webkit-input-placeholder {
    opacity: .6;
}

.form-group .col-2 input:-ms-input-placeholder {
    opacity: .6;
}

.form-group .col-2 input::-ms-input-placeholder {
    opacity: .6;
}

.form-group .col-2 input::placeholder {
    opacity: .6;
}

.form-group .col-2 input:disabled {
    cursor: not-allowed;
    border-radius: 4px;
    border: solid 0.5px rgba(217, 217, 217, 0.6);
    background-color: rgba(217, 217, 217, 0.1);
    font-family: "Catamaran", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: -0.2px;
    color: rgba(217, 217, 217, .3);
}

.input-wrapper {
    position: relative;
}

.input-wrapper .input-element {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.input-wrapper .copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: rgba(248, 248, 248, 0.8);
    background-color: rgba(25, 25, 25, 0.8);
    border: solid 0.8px rgba(248, 248, 248, 0.3);
    border-radius: 0 4px 4px 0;
}

.input-wrapper .copy-btn img {
    width: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 9px;
}

.input-wrapper .psw-icon {
    position: absolute;
    top: 0;
    right: 13px;
    bottom: 0;
    width: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.disabled-text {
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: #191919;
    opacity: .8;
}

.disabled-text.bigger {
    font-size: 16px;
}

.submit-btn {
    width: 150px;
    height: 42px;
    margin-top: 15px;
    margin-left: 153px;
    font-size: 16px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    color: rgba(25, 25, 25, 0.8);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    border-image-slice: 1;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#efc544), to(#f2f283)), -webkit-gradient(linear, left bottom, left top, from(#ffffa7), to(#f1cc50));
    background-image: linear-gradient(to top, #efc544, #f2f283), linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    background-origin: border-box;
    background-clip: content-box, border-box;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.submit-btn:active {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#f2f283), to(#efc544)), -webkit-gradient(linear, left bottom, left top, from(#f1cc50), to(#ffffa7));
    background-image: linear-gradient(to bottom, #efc544, #f2f283), linear-gradient(to bottom, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
}

.submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.eye-wrapper {
    position: absolute;
    top: 10px;
    right: 30px;
}

.eye-wrapper path {
    fill: rgba(248, 248, 248, .8);
}

.member-menu li a path {
    fill: rgba(217, 217, 217, .6);
}

.member-menu li a.active path,
.member-menu li a:hover path {
    fill: #0a172a;
}

.copy-btn path {
    fill: rgba(217, 217, 217, .8);
}

/* Deposit */
.bank-details-wrapper {
    padding: 14px 14px 10px;
    border-radius: 4px;
    border: solid 0.8px #d9d9d9;
    background-color: rgba(217, 217, 217, 0.1);
}

.bank-details-wrapper .bank-details {
    margin-bottom: 12px;
}

.bank-details-wrapper .bank-details p {
    color: rgba(217, 217, 217, .8);
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 14px;
    font-family: catamaran, sans-serif;
    font-weight: 500;
}

.bank-details-wrapper .bank-details p span {
    font-weight: 800;
}

.bank-details-wrapper .copy-btn {
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    color: rgba(217, 217, 217, .8);
}

.bank-details-wrapper .copy-btn .copy-img {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    margin-right: 8px;
    position: relative;
}

.currency-icon {
    width: 63px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    color: #d9d9d9;
    border: solid 0.5px #d9d9d9;
    border-radius: 4px 0 0 4px;
    opacity: .8;
    text-align: center;
    line-height: 38px;
}

.input-wrapper #amount {
    padding-left: 76px
}

.time-select-wrapper {
    font-size: 0
}

.time-select-wrapper input {
    font-size: 1rem
}

.time-select-wrapper input[type=date] {
    display: inline-block;
    width: 236px;
    height: 38px;
    margin-right: 22px
}

.time-select-wrapper input[type=time] {
    display: inline-block;
    width: calc(100% - 258px);
    height: 38px
}

.hide {
    display: none !important;
}

.form-text {
    margin-left: 153px;
    width: 412px;
}

.deposit_check {
    cursor: pointer;
}

.form-text a {
    color: #d9d9d9;
    text-decoration: underline;
}

.deposit-info {
    color: #f1cc50;
}

/* Deposit end */
/* history page start */
.history-header {
    margin-left: 85px;
}

.history-header label {
    color: #d9d9d9;
    font-size: 14px;
    font-weight: 600;
    margin-right: 28px;
}

.form-group input,
.form-group select {
    width: 210px;
    height: 34px;
    padding: 7px 14px;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: #333;
    background-color: transparent;
    border: solid 0.5px #d9d9d9;
    border-radius: 4px;
}

.form-group .form-date {
    margin-right: 20px;
}

.search-btn {
    width: 80px;
    height: 34px;
    margin-left: 30px;
    margin-top: 0;
}

.history-table {
    width: 700px;
    margin-top: 20px;
    border-top: 1px solid rgba(216, 216, 216, 0.1);
}

/*.history-table.statement tbody tr td:last-child {*/
/*    text-indent: 35px;*/
/*}*/
.history-table.transfer tbody tr td:nth-child(4),
.history-table.transaction tbody tr td:nth-child(4) {
    text-indent: 16px;
}

.history-table table {
    width: 100%;
    font-size: 16px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: #d9d9d9;
}

.history-table table thead tr th {
    padding: 15px 12px;
    font-weight: 700;
    text-align: left;
}

.history-table table tbody tr td {
    padding: 10px 12px;
}

.history-table table tbody tr:nth-child(odd) {
    background-color: rgba(217, 217, 217, 0.1);
    border: solid 0.8px rgba(25, 25, 25, 0.1);
}

.pagination {
    width: 700px;
    margin-top: 38px;
    text-align: center;
}

.pagination ul {
    display: inline-block;
}

.pagination ul li {
    display: inline-block;
}

.pagination ul li a {
    display: block;
    width: 22px;
    height: 22px;
    font-size: 24px;
    font-weight: 500;
    color: #d9d9d9;
    opacity: .4;
}

.pagination ul li:hover a,
.pagination ul li.active a {
    opacity: .8;
}

.pagination ul .paginationjs-prev a {
    position: relative;
    -webkit-transform: translate(14px, 15px);
    transform: translate(14px, 15px);
    display: inline;
    margin-right: 12px;
}

.pagination ul .paginationjs-prev a:before,
.pagination ul .paginationjs-prev a:after {
    display: block;
    position: absolute;
    left: 0;
    content: '';
    width: 2px;
    height: 8px;
    background-color: transparent;
}

.pagination ul .paginationjs-prev a:before {
    top: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pagination ul .paginationjs-prev a:after {
    top: 0px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.pagination ul .paginationjs-next a {
    position: relative;
    width: 15px;
    height: 22px;
    -webkit-transform: translate(6px, 15px);
    transform: translate(6px, 15px);
    display: inline;
    margin-left: 12px;
}

.pagination ul .paginationjs-next a:before,
.pagination ul .paginationjs-next a:after {
    display: block;
    position: absolute;
    left: 0;
    content: '';
    width: 2px;
    height: 8px;
    background-color: transparent;
}

.pagination ul .paginationjs-next a:before {
    top: -5px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.pagination ul .paginationjs-next a:after {
    top: 0px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* history page end */
/* member page form end */

/* member error msg */
.error-message-wrapper {
    color: #b70606;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    margin: 0 0 5px 155px;
}

.text-danger {
    margin-bottom: 5px;
    margin-top: 7px;
}

.text-danger img {
    width: 14px;
    height: 14px;
    margin: 0 6px 4px 0;
    vertical-align: middle;
}

/* member error msg end */

/* change password */
.feedback-group {
    display: none;
    margin: 0 0 15px 155px;
    color: #b70606;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.feedback-group span {
    display: inline-block;
    margin-bottom: 5px;
}

.feedback-group img {
    width: 14px;
    height: 14px;
    margin: 0 6px 4px 0;
    vertical-align: middle;
}

.feedback-correct {
    display: none;
    margin-left: 155px;
    color: #58a40b;
    font-size: 14px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.feedback-correct img {
    width: 14px;
    height: 14px;
    margin: 0 6px 4px 0;
    vertical-align: middle;
}

/* end */

/* download modal start */
.download-modal {
    overflow: hidden;
}

.download-modal .modal-dialog {
    min-width: 1250px;
}

.download-modal .close {
    margin: 6px 6px 0 auto;
    -webkit-transition: cubic-bezier(0.175, 0.885, 0.52, 1.575) 0.2s;
    transition: cubic-bezier(0.175, 0.885, 0.52, 1.575) 0.2s;
}

.download-modal .close:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.download-modal .close img {
    display: block;
    width: 18px;
    height: 18px;
}

.download-modal .modal-content {
    background-color: #f8f8f8;
    border-radius: 10px;
    -webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.4);
    opacity: .98;
}

.download-modal .modal-body {
    padding: 0 40px 40px;
    text-align: center;
}

.download-modal .modal-title {
    color: #191919;
    font-size: 40px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    opacity: .8;
}

.download-modal .modal-text {
    color: #191919;
    font-size: 18px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    opacity: .6;
}

.download-modal .download-btn {
    margin-top: 55px;
    font-size: 0;
}

.download-modal .download-btn li {
    display: inline-block;
    width: calc((100% - 45px) / 2);
}

.download-modal .download-btn li:first-child {
    margin-right: 45px;
}

.download-modal .download-btn li a {
    display: block;
    padding-top: 17px;
    padding-bottom: 13px;
    font-size: 20px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: rgba(25, 25, 25, 0.6);
    border: solid 1.6px rgba(25, 25, 25, 0.4);
    border-radius: 6px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.download-modal .download-btn li a:hover,
.download-modal .download-btn li a.active {
    color: rgba(25, 25, 25, 0.8);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#feaa06), to(#fdd609));
    background-image: linear-gradient(to top, #feaa06, #fdd609);
    border: solid 1.6px rgba(247, 147, 30, 0.4);
}

.download-modal .download-content {
    position: relative;
    padding: 34px 36px 29px;
    margin-top: 22px;
    border-radius: 8px;
    background-color: rgba(25, 25, 25, 0.9);
    overflow: hidden;
}

.download-modal .download-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.download-modal .download-list>li {
    width: 309px !important;
    padding: 20px 22px 27px;
    margin-left: 20px;
    border-radius: 6px;
    border: solid 2px rgba(248, 248, 248, 0.2);
}

.download-modal .download-list>li:first-child {
    margin-left: 0;
}

.download-modal .download-list>li.download-large-wrapper {
    width: 400px !important;
}

.download-modal .download-list>li .download-logo {
    height: 77px;
}

.download-modal .download-list>li .download-pc-text {
    margin-top: 30px;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    color: #fdd609;
}

.download-modal .download-list>li .download-text {
    margin-top: 25px;
    margin-bottom: 22px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}

.download-modal .download-list>li .download-text p {
    height: 20px;
}

.download-modal .download-list>li .download-text p:first-child {
    margin-bottom: 10px;
}

.download-modal .download-list>li .download-text .text-gray {
    color: rgba(248, 248, 248, 0.6);
}

.download-modal .download-list>li .download-text .text-link {
    margin-left: 6px;
    margin-right: 6px;
    font-size: 20px;
    color: #fdd609;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.download-modal .download-list>li .download-text .text-link:hover {
    color: #f8f8f8;
}

.download-modal .download-list>li .download-text .download-text-title {
    margin-right: 15px;
    color: rgba(248, 248, 248, 0.6);
    font-size: 18px;
}

.download-modal .download-list>li .download-text .download-text-yellow {
    color: #fdd609;
    font-size: 20px;
}

.download-modal .download-list>li .download-text .download-text-white {
    color: #f8f8f8;
    font-size: 20px;
}

.download-modal .download-list>li .download-img-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.download-modal .download-list>li .download-img-wrapper .download-img {
    width: calc((100% - 20px) / 2);
}

.download-modal .download-list>li .download-img-wrapper .download-img:first-child {
    margin-right: 20px;
}

.download-modal .download-list>li .download-link {
    margin-top: 25px;
}

.download-modal .download-list>li .download-link a {
    display: block;
    width: 168px;
    padding-top: 49px;
    padding-bottom: 44px;
    margin: 0 auto;
    background-color: rgba(248, 248, 248, 0.1);
    border: solid 1.2px rgba(248, 248, 248, 0.2);
    border-radius: 4px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.download-modal .download-list>li .download-link a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.download-modal .download-list>li .download-link a img {
    display: block;
    width: 129px;
    margin: 0 auto;
}

.download-modal .download-list>li .download-img {
    width: 168px;
    height: 197px;
    padding: 17px 19px;
    margin: 0 auto;
    background-color: rgba(248, 248, 248, 0.1);
    border: solid 1.2px rgba(248, 248, 248, 0.2);
    border-radius: 4px;
}

.download-modal .download-list>li .download-img .download-icon-wrapper {
    margin-bottom: 9px;
    font-family: "Catamaran", sans-serif;
    font-weight: 500;
    color: #f8f8f8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.download-modal .download-list>li .download-img .download-icon-wrapper span {
    font-size: 18px;
    white-space: nowrap;
}

.download-modal .download-list>li .download-img .download-icon {
    height: 25px;
    margin-right: 4px;
}

.download-modal .download-list>li .download-img .download-qrcode {
    display: block;
    width: 130px;
    max-width: 130px;
    margin: 0 auto;
}

.download-modal .download-list>li .download-url-list {
    margin-top: 25px;
    text-align: left;
}

.download-modal .download-list>li .download-url-list li {
    padding: 10px;
    border: solid 1px rgba(248, 248, 248, 0.2);
    border-radius: 4px;
}

.download-modal .download-list>li .download-url-list li:not(:first-child) {
    margin-top: 14px;
}

.download-modal .download-list>li .download-url-list li h5 {
    color: rgba(248, 248, 248, 0.4);
    font-size: 16px;
    font-family: "Catamaran", sans-serif;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.download-modal .download-list>li .download-url-list li a {
    margin-top: 2px;
    display: block;
    color: #fdd609;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    line-height: 1.13;
    word-break: break-all;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.download-modal .download-list>li .download-url-list li a:hover {
    color: #f8f8f8;
}

/* download modal end */

/* download mobile modal carousel start */
.download-mobile-wrapper {
    width: 1097px;
    padding: 15px 20px;
    background-color: rgba(25, 25, 25, 0.4);
    border-radius: 6px;
    overflow: hidden;
}

.download-mobile-wrapper .download-mobile-list li {
    height: auto;
}

.download-mobile-wrapper .button-prev {
    position: absolute;
    top: 298px;
    left: 6px;
    z-index: 99;
    width: 24px;
    height: 42px;
    background-image: url(../img/icon_arrow.svg);
    cursor: pointer;
    opacity: .2;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.download-mobile-wrapper .button-prev:hover {
    opacity: 1;
}

.download-mobile-wrapper .button-next {
    position: absolute;
    top: 298px;
    right: 6px;
    z-index: 99;
    width: 24px;
    height: 42px;
    background-image: url(../img/icon_arrow.svg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    cursor: pointer;
    opacity: 0.2;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.download-mobile-wrapper .button-next:hover {
    opacity: 1;
}

.modal {
    overflow: auto !important;
}

.modal-header {
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: none;
}

/* download mobile modal carousel end */

/* loading icon start */
@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
        transform: scale(1);
    }
}

.spinner-container {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.spinner-container .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #FDD609;
    border-radius: 100%;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner-container .spinner:nth-child(1) {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner-container .spinner:nth-child {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.spinner-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

/* loading icon end */

/* 請登入alert */
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    position: fixed;
    top: 50%;
    left: 50%;
    color: #000;
    background-color: #fff;
    border-radius: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0.9;
    z-index: 999;
}

/* end */
/*pop up start*/
#popupModal.modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

@media (min-width: 1920px) {
    #popupModal .modal-dialog {
        max-width: 42%;
    }
}

@media (max-width: 1919px) {
    #popupModal .modal-dialog {
        max-width: 40%;
    }
}

#popupModal .modal-body {
    position: relative;
}

#popupModal .popup-img {
    width: 100%;
}

#popupModal .modal-content {
    background-color: transparent;
}

#popupModal .popup-close {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 33%;
    right: 14%;
    background-color: transparent;
    border: none;
    opacity: 0.4;
    cursor: pointer;
    transition: all .5s;
}

#popupModal .popup-close:hover {
    opacity: 1;
}

#popupModal .popup-close img {
    display: inline-block;
    width: 26px;
    height: 26px;
    transform-style: flat;
    transition: all .8s;
}

#popupModal .popup-close:hover img {
    transform: rotate(360deg);
}

#popupModal.modal.fade .modal-dialog {
    opacity: 0.2;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-360deg);
    -moz-transform: rotateX(-360deg);
    -ms-transform: rotateX(-360deg);
    transform: rotateX(-360deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    transition: all 1.2s;
}

#popupModal.modal.show .modal-dialog {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/*pop up end*/


.t-game {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding: 10px 0;
    display: block;
}

.game-home {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    /* color: #f1cc50; */
    color: #2c2b2b;
    padding: 10px 0;
    display: block;
}

.input-group .captcha-input {
    width: 148px;
}

.input-group .captcha-code {
    width: 125px;
    height: 45px;
    margin-left: 8px;
    background-image: linear-gradient(to top, #efc544, #f2f283), linear-gradient(to top, #ffffa7, #efc544 20%, #ffffa7 50%, #f1cc50 74%, #ffffa7);
    border-radius: 5px;
    text-align: center;
    color: #000;
    font-weight: bold;
    float: right;
    line-height: 60px;
}

/* alert_login */
.remind-modal-wrapper {
    width: 414px;
    margin: 100px auto 0 auto;
}

.remind-modal-wrapper .remind-modal-container {
    width: 414px;
    background: #ffffff;
    border-radius: 6px;
    border: none;
}

.remind-modal-wrapper .remind-modal-container>.remind-header {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    background: #f1cc50;
    border-radius: 5px 5px 0 0;
    padding: 10px 10px;
}

.remind-modal-wrapper .remind-modal-container>.remind-text {
    width: 100%;
    height: 90px;
    font-size: 18px;
    color: #000000;
    /* color: #fff; */
    padding: 15px;
    margin: 0;
}

.remind-modal-wrapper .remind-modal-container>button {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 10px;
    width: 80px;
    min-height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    /* background: linear-gradient(to top, #feaa06, #fdd609); */
    background: #f1cc50;
    border: none;
    border-radius: 10px;
    pointer-events: c;
}

.remind-modal-wrapper .remind-modal-container>button:active {
    /* background: linear-gradient(to bottom, #feaa06, #fdd609); */
    background: #f1cc50;
}

/* contact_us */
.side-contact-show {
    right: 0 !important;
}

.side-contact {
    position: fixed;
    top: 30%;
    right: -238px;
    z-index: 99;
    background: #d0a74e;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: all .3s;
}

.side-contact-menu {
    cursor: pointer;
    align-items: center;
    background: linear-gradient(90deg, #d6c675, #d0a74e);
    border-radius: 10px 0 0 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    height: auto;
    justify-content: center;
    left: -50px;
    padding: 20px 0;
    position: absolute;
    top: 110px;
    transform: translateY(-50%);
    width: 50px;
    z-index: 1;
}

.side-contact-menu span {
    color: #fff;
    line-height: 50px;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    font-size: 27px;
}

.side-contact-content {
    width: 236px;
    padding: 0.2rem 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.side-contact-content a {
    margin: 5px 0;
    display: flex;
    align-items: center;
}

.side-contact-img {
    width: 40px;
    margin: 10px 15px 0;
}

.side-contact-content a p {
    display: flex;
    flex-direction: column;
    line-height: 150%;
}

.side-contact-content a span,
.side-contact-content p {
    color: #fff;
}


/* test-style */
.gsdfsdfs {
    background-image: linear-gradient(to right, #e3e1e2, #dc3545, #e3e1e2);
    color: #0a172a;
    color: #0b131f;
    color: #0a0a0a;
    color: #0c1a2f;
    color: #212529;
    color: #2c2b2b;
    color: #dc3545;
    color: #ffc107;
    color: #0a0a0a;
}

/* end */

.hover-menu {
    background: #ffe588;
}

.color-game {
    color: #dc3545;
}



/* download-app */
.modal-lg {
    width: 900px;
}

.modal-app-inline {
    display: inline-block;
    width: 45%;
    text-align: center
}

.modal-app-inline-first {
    width: 50%
}

#app-info-modal .modal-contents {
    background: #252525;
    border: 0;
    border-radius: 10px;
    color: #999
}

#app-info-modal .modal-content {
    width: 900px;
}

#app-info-modal .modal-body {
    background: #252525 !important;
}

.promo-info-modal .modal-body {
    background: #252525 !important;
}
#app-info-modal .modal-contents {
    background: #252525;
    border: 0;
    border-radius: 10px;
    color: #999
}

#app-info-modal .modal-content {
    width: 900px;
}

#app-info-modal .modal-body {
    background: #252525 !important;
}

.promo-info-modal .modal-body {
    background: #252525 !important;
}

#app-info-modal h1,
#app-info-modal h3 {
    color: #fff;
    font-size: 15px;
}

.icon-64.btn-close {
    width: 22px;
    height: 20px;
    background-position: -724px -150px;
    margin-left: -35px;
    margin-top: 0px;
    background-color: none;
    z-index: 99999;
}

.icon-64 {
    background: url(../images/icon/icon_sprite.png) no-repeat;
    width: 64px;
    height: 64px;
    display: inline-block;
    text-align: center;
}
.close span {
    font-size: 2.5rem;
    position: absolute;
    right: 15px;
    top: 15px;
    font-weight: 500;
}
hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.promo-info-modal-container .btn-join-now,
.promo-info-modal-container .btn-join-now:focus,
.promo-info-modal-container .btn-join-now:hover,
.promo-info-modal-container .btn-join-now:active,
.promo-info-modal-container .btn-join-now:active:focus,
.promo-info-modal-container .btn-join-now:active:hover,
.promo-info-modal-container .btn-close-footer {
    background: #fd0;
    border: 0;
    padding: 10px 40px;
    box-shadow: none;
    font-weight: bold;
    outline: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #000
}

.modal-header .close:hover,
.modal-header .close:focus {
    opacity: 1 !important;
}

.promo-info-modal-container .modal-header {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top: 10px solid #FFDD00;
    border-bottom: none;
}
.modal-header {
    background: #252525;
}
.aside-left {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
    background-color: #f1cc50;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    position: fixed;
    padding: 23px 18px 20px 16px;
    top: 47%;
    top: 30%;
    left: 0;
    width: 70px;
    z-index: 99;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
/* #app-info-modal .modal-content .modal-body{
    flex-grow: 1;
    overflow-y: scroll;
    height: 500px;
    overflow-x: hidden;
} */
/* .banner-slots{
    background: #000;
} */


/* .navbar ul li:hover>a {
    color: #fff
} */
.navbars ul li a.hot:before{
    content: "";
    background: url(../images/icon/hot.svg) no-repeat 50%;
    background-size: contain;
    width: 30px;
    height: 20px;
    position: absolute;
    right: -10px;;
    top: -15px;
    -webkit-animation: lightAnimation .3s ease-in-out infinite;
    animation: lightAnimation .3s ease-in-out infinite;
}
@-webkit-keyframes lightAnimation {
    0% {
        -webkit-filter: brightness(1);
        filter: brightness(1)
    }

    50% {
        -webkit-filter: brightness(1.2);
        filter: brightness(1.2)
    }

    to {
        -webkit-filter: brightness(1);
        filter: brightness(1)
    }
}

/****Cockfight****/
.wrapper {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}
.form-row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.cockfight-lobby {
    margin-top: 30px;
}
.pptop {
    padding-top: 100px;
}
.cockfight_card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.cockfight-lobby {
    margin-top: 30px;
}
.cockfight-bg {
    width: 100%;
    background-size: cover;
    background-image:url(../images/lobby/cockfight/bg.jpg);
    min-height: 628px;
    padding: 15px 10px 20px 10px;
}
.box-cock {
    width: 100%;
    height: auto;
    margin: 5px auto;
    text-align: center;
    position: relative;
    display: block;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.box-cock:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}
.cockfight-lobby h3 {
    color: #FF9800;
    font-size: 30px;
    padding: 8px;
    border-left: 7px solid #FF9800;
    padding-left: 15px;
    margin: 10px 0px;
    background: rgb(127 93 157 / 49%);
    box-shadow: 0px 3px 3px #231025;
}
.cock_tittle {
    font-size: 24px;
    display: block;
    color: #ff9f00;
    text-shadow: 2px 8px 6px #212529, 0px -5px 35px rgb(105 72 72);
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}
.register {
    width: 770px;
    padding: 20px 100px 40px;
    overflow: hidden;
    background: url(../images/register-bg.png) center 470px no-repeat;
    margin: 0 auto;
}

/* width */
::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #f1cc50;
    /* background: #000; */
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #f1cc50;
}

.signup-modal-container{

}
.signup-modal-container .modal-content{
    background: url(../images/register_bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 25px 10px;
}
.signup-form .form-group{
    width: 48%;
    margin-right: 10px;
    float: left;
    height: 80px;
    position: relative;
}
.signup-form .form-group label{
    display: block;
    font-size: 13px;
    margin: 5px 5px;
    color: #1174c3;
}
.signup-form .form-group .requried{
    color: red;
    font-size: 16px;
    margin-right: 5px;
}
.signup-form .form-group input{
    width: 100%;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5.1px 5.1px 0 rgba(0,0,0,0.25);
    border: 1px solid #fff;
}
.form-group-submit{
    display: block;
    width: 100%;
    text-align: center;
}
.signup-form .form-group-submit .btn-signup{
    width: 200px;
    background: #dc3545;
    border-radius: 20px;
}
.signup-form .register-contant-code{
    border-radius: 20px;
    height: 35px;
    position: absolute;
    right: 0;
    top: 23px;
}
.signup-modal-container .modal-header{
    background: none;
    text-align: center;
    padding: 20px 0px;
}
.signup-modal-container .modal-header img{
    width: 275px;
}
.btn-close{
    width: 35px;
    height: 35px;
    position: absolute;
    right: -14px;
    top: -16px;
    opacity: 1;
}
.signup-form .err_div{
    text-align: left;
    color: #4f4f4f;
    font-size: 14px;
    padding: 4px 5px;
}
.signup-modal-container .modal-header .partner {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 10px 50px;
}
.signup-modal-container .modal-header .partner img{
        padding: 0px 10px;
}
.signup-form .fa-star{
    color: red;margin-right: 5px;
}
#loading{
    height: 100%;
    background: rgba(0,0,0,.2);
    position: absolute;
    z-index: 99999;
    width: 100%;
    display: none;
}
.loadImg{
    background: url('../images/loading.gif') no-repeat;
    background-size: contain;
    width: 48px;
    height:48px;
    text-align: center;
    position: absolute;
    left: 45%;
    top: 38%;
    margin: auto;
}
.signup-form #togglePass, .signup-form #toggleConfirmPass {
    color: #000;
    position: absolute;
    top: 32px;
    right: 10px;
    cursor: pointer;
}
.fish-games{
    height: 732px;
    overflow: scroll;
}