body {
    background-image: url(../images/bg-white.jpg);
}

.avatar {
    background-color: var(--333);
}

:root {
    --color: #4833d2;
    --color-lg: linear-gradient(to bottom, #5a42fc, #2e19b2);
    --orange: #ffc557;
    --orange-lg: linear-gradient(to bottom, #ffd563, #ff8f34);
    --light-lg: linear-gradient(to bottom, #e1e3ec, #ffffff);
    --shadow: 0 3px 6px var(--000-1);
}

.ico-fluent-1st {
    background-image: url(../images/ico/1st_place_medal_color.svg);
}

.ico-fluent-2nd {
    background-image: url(../images/ico/2nd_place_medal_color.svg);
}

.ico-fluent-3rd {
    background-image: url(../images/ico/3rd_place_medal_color.svg);
}

.ico-fluent-anguished {
    background-image: url(../images/ico/anguished_face_color.svg);
}

.ico-fluent-backhand {
    background-image: url(../images/ico/backhand_index_pointing_left_color_default.svg);
}

.ico-fluent-logout {
    background-image: url(../images/logout.png);
}
.ico-fluent-exchangsport {
    background-image: url(../images/ico/ico-fluent-exchang_sport.png);
}
.ico-fluent-9wicket {
    background-image: url(../images/ico/ico-fluent-9wicket.png);
}
.ico-fluent-bonus {
    background-image: url(../images/bonus.png);
}

.ico-fluent-history {
    background-image: url(../images/ico/history.png);
}

.ico-fluent-change_pass {
    background-image: url(../images/change_pass.png);
}
body[data-dir="855test"] .ico-fluent-basketball{
    background-image: url(../images/ico/basketball_855test.png) !important;
}
.ico-fluent-basketball {
    background-image: url(../images/ico/basketball_color.svg);
}
.ico-fluent-basketball_ {
    background-image: url(../images/ico/fafa9898.png);
}
.ico-fluent-fafabaemy_t {
    background-image: url(../images/ico/fafabaemy.png);
}
.ico-fluent-beaming {
    background-image: url(../images/ico/beaming_face_with_smiling_eyes_color.svg);
}

.ico-fluent-boy {
    background-image: url(../images/ico/boy_color_default.svg);
}

.ico-fluent-cardfile {
    background-image: url(../images/ico/card_file_box_color.svg);
}

.ico-fluent-carddivider {
    background-image: url(../images/ico/card_index_dividers_color.svg);
}

.ico-fluent-clapping {
    background-image: url(../images/ico/clapping_hands_color_default.svg);
}

.ico-fluent-club {
    background-image: url(../images/ico/club_suit_color.svg);
}

.ico-fluent-coin {
    background-image: url(../images/ico/coin_color.svg);
}

.ico-fluent-confetti {
    background-image: url(../images/ico/confetti_ball_color.svg);
}
.ico-fluent-free-promo {
    background-image: url(../images/ico/free-promo.png);
}
.ico-fluent-challenges {
    background-image: url(../images/ico/challenges.png);
}
.ico-fluent-crown {
    background-image: url(../images/ico/crown_color.svg);
}

.ico-contact-us {
    background-image: url(../images/ico/contact-us.svg);
}

.ico-fluent-diamond {
    background-image: url(../images/ico/diamond_suit_color.svg);
}

.ico-fluent-dollar {
    background-image: url(../images/ico/dollar_banknote_color.svg);
}

.ico-fluent-euro {
    background-image: url(../images/ico/euro_banknote_color.svg);
}

.ico-fluent-fire {
    background-image: url(../images/ico/fire_color.svg);
}

.ico-fluent-disc {
    background-image: url(../images/ico/flying_disc_color.svg);
    height: 40px;
}

.ico-fluent-die {
    background-image: url(../images/ico/game_die_color.svg);
}

.ico-fluent-handshake {
    background-image: url(../images/ico/handshake_color.svg);
}

.ico-fluent-hearton {
    background-image: url(../images/ico/heart_on_fire_color.svg);
}

.ico-fluent-heartsuit {
    background-image: url(../images/ico/heart_suit_color.svg);
}

.ico-fluent-heartwith {
    background-image: url(../images/ico/heart_with_ribbon_color.svg);
}

.ico-fluent-joystick {
    background-image: url(../images/ico/joystick_color.svg);
}

.ico-fluent-key {
    background-image: url(../images/ico/key_color.svg);
}

.ico-fluent-label {
    background-image: url(../images/ico/label_color.svg);
}

.ico-fluent-ledger {
    background-image: url(../images/ico/ledger_color.svg);
}

.ico-fluent-bulb {
    background-image: url(../images/ico/light_bulb_color.svg);
}

.ico-fluent-locked {
    background-image: url(../images/ico/locked_color.svg);
}

.ico-fluent-lockedkey {
    background-image: url(../images/ico/locked_with_key_color.svg);
}

.ico-fluent-megaphone {
    background-image: url(../images/ico/megaphone_color.svg);
}

.ico-fluent-bag {
    background-image: url(../images/ico/money_bag_color.svg);
}

.ico-fluent-money {
    background-image: url(../images/ico/money_with_wings_color.svg);
}

.ico-fluent-orangeheart {
    background-image: url(../images/ico/orange_heart_color.svg);
}

.ico-fluent-popper {
    background-image: url(../images/ico/party_popper_color.svg);
}

.ico-fluent-partying {
    background-image: url(../images/ico/partying_face_color.svg);
}

.ico-fluent-pencil {
    background-image: url(../images/ico/pencil_color.svg);
}

.ico-fluent-pool {
    background-image: url(../images/ico/pool_8_ball_color.svg);
}

.ico-fluent-pound {
    background-image: url(../images/ico/pound_banknote_color.svg);
}

.ico-fluent-ribbon {
    background-image: url(../images/ico/ribbon_color.svg);
}

.ico-fluent-ring {
    background-image: url(../images/ico/ring_buoy_color.svg);
}

.ico-fluent-scroll {
    background-image: url(../images/ico/scroll_color.svg);
}

.ico-fluent-slot {
    background-image: url(../images/ico/slot_machine_color.svg);
}

.ico-fluent-soccer {
    background-image: url(../images/ico/soccer_ball_color.svg);
}

.ico-fluent-softball {
    background-image: url(../images/ico/softball_color.svg);
}

.ico-fluent-spade {
    background-image: url(../images/ico/spade_suit_color.svg);
}

.ico-fluent-sparkling {
    background-image: url(../images/ico/sparkling_heart_color.svg);
}

.ico-fluent-starstruck {
    background-image: url(../images/ico/star-struck_color.svg);
}

.ico-fluent-telephone {
    background-image: url(../images/ico/telephone_receiver_color.svg);
}

.ico-fluent-thumbsdown {
    background-image: url(../images/ico/thumbs_down_color_default.svg);
}

.ico-fluent-thumbsup {
    background-image: url(../images/ico/thumbs_up_color_default.svg);
}

.ico-fluent-ticket {
    background-image: url(../images/ico/ticket_color.svg);
}

.ico-fluent-fish {
    background-image: url(../images/ico/tropical_fish_color.svg);
}

.ico-fluent-lottery {
    background-image: url(../images/ico/lottery-01.svg);
}

.ico-fluent-poker {
    background-image: url(../images/ico/poker-01.svg);
}

.ico-fluent-number {
    background-image: url(../images/ico/number-01.svg);
}

.ico-fluent-cock {
    background-image: url(../images/ico/cockfight-01.svg);
}

.ico-fluent-download {
    background-image: url(../images/ico/download.png);
}

.ico-fluent-mobile {
    background-image: url(../images/ico/mobile.png);
}
.ico-fluent-crescent {
    background-image: url(../images/ico/waning_crescent_moon_color.svg);
}

.ico-fluent-gibbous {
    background-image: url(../images/ico/waning_gibbous_moon_color.svg);
}

.ico-fluent-woman {
    background-image: url(../images/ico/woman_red_hair_color_default.svg);
}

.ico-fluent-gift {
    background-image: url(../images/ico/wrapped_gift_color.svg);
}

.ico-fluent-yen {
    background-image: url(../images/ico/yen_banknote_color.svg);
}

.ico-fluent-crash {
    background-image: url(../images/ico/crash.png);
}

.ico-fluent-arcade {
    background-image: url(../images/ico/arcade.png);
}

.ico-lang-america {
    background-image: url(../images/lang/america.svg);
}

.ico-lang-arab {
    background-image: url(../images/lang/arab.svg);
}

.ico-lang-bangladesh {
    background-image: url(../images/lang/bangladesh.svg);
}

.ico-lang-brazil {
    background-image: url(../images/lang/brazil.svg);
}

.ico-lang-cambodia {
    background-image: url(../images/lang/cambodia.svg);
}

.ico-lang-canada {
    background-image: url(../images/lang/canada.svg);
}

.ico-lang-china {
    background-image: url(../images/lang/china.svg);
}

.ico-lang-english {
    background-image: url(../images/lang/english.svg);
}

.ico-lang-france {
    background-image: url(../images/lang/france.svg);
}

.ico-lang-germany {
    background-image: url(../images/lang/germany.svg);
}

.ico-lang-hongkong {
    background-image: url(../images/lang/hongkong.svg);
}
.ico-lang-taiwan {
    background-image: url(../images/lang/taiwan.svg);
}

.ico-lang-india {
    background-image: url(../images/lang/india.svg);
}

.ico-lang-indonesia {
    background-image: url(../images/lang/indonesia.svg);
}

.ico-lang-japan {
    background-image: url(../images/lang/japan.svg);
}

.ico-lang-korea {
    background-image: url(../images/lang/korea.svg);
}

.ico-lang-kurdistan {
    background-image: url(../images/lang/kurdistan.svg);
}

.ico-lang-malaysia {
    background-image: url(../images/lang/malaysia.svg);
}

.ico-lang-philippines {
    background-image: url(../images/lang/philippines.svg);
}

.ico-lang-portugal {
    background-image: url(../images/lang/portugal.svg);
}

.ico-lang-republika {
    background-image: url(../images/lang/republika.svg);
}

.ico-lang-russia {
    background-image: url(../images/lang/russia.svg);
}

.ico-lang-spain {
    background-image: url(../images/lang/spain.svg);
}

.ico-lang-thailand {
    background-image: url(../images/lang/thailand.svg);
}

.ico-lang-vietnam {
    background-image: url(../images/lang/vietnam.svg);
}

.ico-fluent-affiliate {
    background-image: url(../../images/affiliate.png);
    background-repeat: no-repeat;
}

.ico-fluent-promocode {
    background-image: url(../../images/promo_code.png);
    background-repeat: no-repeat;
}

.ico-fluent-giftpoint {
    background-image: url(../../images/gift_point.png);
    background-repeat: no-repeat;
}

.ico-fluent-ach {
    background-image: url(../../images/achivement.png);
    background-repeat: no-repeat;
}

.contant {
    min-width: 0;
    flex: 1;
    height: 100%;
    overflow: auto;
}

.item {
    display: none;
}

.item.active {
    display: block;
}

.subject {
    margin-bottom: 60px;
}

.clause {
    width: 100%;
    height: 100%;
    padding-top: 80px;
    animation-delay: 0.5s;
    display: flex;
}

.sider {
    width: 250px;
    height: 100%;
    background-image: url(../images/sider.jpg);
    background-size: cover;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.sider-search {
    background-color: var(--222) !important;
    padding: 0 10px;
    border-radius: 100px;
}

.sider-search input {
    height: 40px;
    color: var(--orange);
}

.sider-search a,
.sider-search button {
    color: var(--orange);
}

.sider-list {
    flex: 1;
    overflow: auto;
    padding-bottom: 200px;
}

.sider-list::-webkit-scrollbar {
    width: 0;
}

.sider-list li {
    margin: 10px 0;
    transition-duration: 0s;
    opacity: 1;
    float: none;
    text-align: left;
}

.sider-list li a {
    background-image: var(--light-lg);
    border-radius: 7px;
    padding: 10px;
    display: flex;
    align-items: center;
    position: relative;
}

.sider-list li a em {
    width: 0;
    height: 100%;
    background-image: var(--color-lg);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px;
}

.sider-list li a i {
    width: 50px;
    height: 50px;
    margin: 0 10px;
    position: relative;
}

.sider-list li a h5 {
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sider-list li.active a em,
.sider-list li:hover a em {
    width: 100%;
}

.sider-list li.active a i,
.sider-list li:hover a i {
    transform: rotateY(180deg);
}

.sider-list li.active a h5,
.sider-list li:hover a h5 {
    color: #fff;
}

.im {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 210px;
    margin: 20px;
}

.im:hover {
    transform: translateY(-5px);
}

.im > img {
    width: 80%;
    margin: auto;
    display: block;
}

.im-cont {
    background-image: var(--color-lg);
    padding: 5px;
    transform: rotate(180deg);
    border-radius: 10px;
    display: block;
}

.im-cont .im-cont {
    border-radius: 5px;
    position: relative;
    padding: 10px 0 10px 60px;
}

.im-cont i {
    width: 80px;
    height: 80px;
    position: absolute;
    left: -25px;
    top: -15px;
}

.im-cont h5 {
    color: var(--orange);
}

.im-cont h6 {
    display: block;
    text-transform: uppercase;
    color: #fff;
}

pop-main {
    border-radius: 10px;
    max-width: 800px;
}

pop-cont {
    max-height: 70vh;
    overflow: auto;
}

.btn {
    border-radius: 5px;
    background-image: var(--color-lg);
    box-shadow: var(--shadow);
    font-weight: 700;
}

.btn-orange {
    background-image: var(--orange-lg);
}

.btn-flex {
    padding: 20px 0;
}

.btn-flex .btn {
    margin: 10px;
    flex: none;
    padding: 0 40px;
}

.btn-empty {
    background: 0 0;
    border-width: 2px;
    border-radius: 100px;
}

.head {
    height: 80px;
    background-image: var(--light-lg);
    box-shadow: 0 0 10px var(--000-1);
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

.head u {
    flex: 1;
}

.head-nav {
    display: flex;
}

.head-nav li {
    margin: 5px;
}

.head-nav li a {
    background-color: #fff;
    width: 85px;
    height: 70px;
    display: block;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
}

.head-nav li a i {
    width: 31px;
    height: 34px;
    display: inline-block;
}

.head-nav li a h6 {
    text-transform: uppercase;
    line-height: 100%;
    white-space: nowrap;
    font-size: 12px;
}

.head-nav li a:hover {
    background-color: var(--color);
    color: #fff;
}

.head-cont {
    display: flex;
    align-items: center;
}

.head-cont a {
    text-transform: capitalize;
    color: #fff;
    margin: 5px;
    height: 40px;
    padding-left: 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.head-cont a i {
    width: 30px;
    /* height: 40px; */
    display: inline-block;
}

.head-user {
    display: flex;
    align-items: center;
}

.head-user .avatar {
    width: 90px;
    height: 60px;
    margin: 10px;
}

.head-bet {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--333);
    border-radius: 100px;
}

.head-bet i {
    width: 30px;
    height: 30px;
    display: block;
    margin: 5px;
}

.head-bet h6 {
    color: var(--orange);
}

.logo {
    width: 250px;
    height: 70px;
    background-image: url(../images/name-black.svg);
    animation-delay: 0.5s;
}

hop {
    margin: 5px !important;
}

hop a {
    width: 50px;
    height: 50px;
    overflow: hidden;
}

hop > a {
    background-color: #fff;
    border-radius: 100%;
}

hop > a:hover {
    transform: rotate(360deg);
}

hop a i {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 100%;
    margin: 5px;
}

hop-cont {
    width: 50px !important;
    top: 80px !important;
}

hop-cont a {
    border: 0;
}

hop-cont a:hover {
    background-color: var(--f7);
}

.color > a i {
    background-image: conic-gradient(
        at 50% 50%,
        var(--red) 0,
        var(--orange) 25%,
        var(--green) 50%,
        var(--blue) 75%,
        var(--purple) 100%
    );
}

.light {
    height: 300px;
    position: relative;
}

.light cite {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to right, #fff, transparent);
    z-index: 1;
}

.light cite:last-child {
    right: 0;
    left: auto;
    transform: rotate(180deg);
}

.swiper-coverflow {
    animation-delay: 1s;
}

.swiper-coverflow {
    height: 300px;
    padding-bottom: 40px;
}

.swiper-coverflow .swiper-slide {
    border-radius: 10px;
    width: 900px;
    height: 260px;
    opacity: 0.5;
    transform: scale(0.95) !important;
}

.swiper-coverflow .swiper-slide-active {
    opacity: 1;
    transform: scale(1) !important;
}

.list {
    overflow: inherit;
}

.list li {
    width: 25%;
    float: left;
    padding: 10px;
    border: 0;
    transition-duration: 0s;
    opacity: 0;
}

.list li a {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: var(--shadow);
}

.list li a em {
    /*height: 180px;*/
    display: block;
    background-size: cover;
    position: relative;
}

.list li a em i {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
}

.list li a h6 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

.list li a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px var(--color);
}

.list li a:hover h6 {
    background-color: var(--color);
    color: #fff;
}

.list li a:hover em i {
    transform: rotateY(180deg);
}

/*  */

#promo_ li a {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: var(--shadow);
}

#promo_ li a em {
    /*height: 180px;*/
    display: block;
    background-size: cover;
    position: relative;
}

#promo_ li a em i {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
}

#promo_ li a h6 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

#promo_ li a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px var(--color);
}

#promo_ li a:hover h6 {
    background-color: var(--color);
    color: #fff;
}

#promo_ li a:hover em i {
    transform: rotateY(180deg);
}

/*  */

.list-many li {
    width: 16.66%;
}

.list-many li a em {
    height: 240px;
}

.crumb {
    padding: 10px;
}

.crumb i {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.crumb marquee a {
    padding: 0 100px;
}

.crumb marquee a:hover {
    color: var(--color);
}

.info {
    display: flex;
    align-items: center;
    background-color: var(--color);
    padding: 20px;
    border-radius: 10px;
}

.info em {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 50px;
}

.info:hover em {
    transform: rotateY(180deg);
}

.info-cont {
    flex: 1;
    color: #fff;
}

.info-cont p {
    padding: 10px 0;
}

.info-bet {
    display: flex;
    padding: 0 30px 30px;
}

.info-bet i {
    width: 70px;
    height: 70px;
    display: block;
}

.info-bet i:hover {
    transform: translateY(-5px);
}

.info-more1 {
    position: absolute !important;
    right: 40px;
    bottom: 0;
    border-radius: 10px 10px 0 0 !important;
}

.info-more1 i.ico {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 10px 0 -5px;
}

.info-more1:hover {
    transform: translate(10px, 0);
}

.foot {
    margin-top: 100px;
    background-color: #fff;
    border-top-width: 1px;
}

.foot-cont {
    display: flex;
    padding: 30px 0;
}

.foot-cont h4 {
    padding: 10px 5px;
    text-transform: uppercase;
}

.foot-cont ul {
    padding: 10px 0;
}

.foot-cont li {
    float: left;
    padding: 5px;
}

.foot-cont li a {
    box-shadow: var(--shadow);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foot-cont li a:hover {
    transform: translateY(5px);
    opacity: 0.8;
}

.foot-partnerships {
    flex: 1;
}

.foot-partnerships li a {
    background-image: var(--light-lg);
    width: 70px;
    height: 70px;
}

/* .foot-partnerships li a img {
    max-width: 80%;
    max-height: 80%
} */

.foot-payment {
    flex: 1;
}

.foot-service li a {
    box-shadow: 0 0 0;
    display: block;
}

.foot-service li a i {
    width: 80px;
    height: 80px;
    border-width: 1px;
    display: block;
    border-radius: 10px;
    background-size: 70%;
}

.foot-service li a h6 {
    text-align: center;
    padding: 5px 0;
}

.foot-copy {
    height: 50px;
    background-color: var(--color);
    border-radius: 20px 20px 0 0;
    padding: 10px 100px;
    position: relative;
    display: flex;
    justify-content: space-evenly;
}

.foot-copy span i {
    width: 50px;
    height: 50px;
    position: absolute;
}

.foot-copy span i:nth-child(1) {
    left: 20%;
    bottom: 30px;
    transform: rotate(-130deg);
}

.foot-copy span i:nth-child(2) {
    right: 15%;
    bottom: 30px;
}

.foot-copy span i:nth-child(3) {
    right: 3%;
    bottom: 10px;
}

.foot-copy span i:nth-child(4) {
    left: 3%;
    bottom: 10px;
}

.foot-copy p {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}
.foot-copy a {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

.foot-copy p a {
    color: #fff;
}

.foot-copy p a:hover {
    color: var(--orange);
}

.discount {
    padding-bottom: 60px;
    display: none;
}

.discount li {
    margin: 20px 0;
    opacity: 0;
    transition-duration: 0s;
}

.discount li a {
    display: block;
}

.discount li a h5 {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 20px;
}

.discount li a h5 i {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.discount li a h5 span {
    flex: 1;
}

.discount li a h5 em {
    color: var(--orange);
    font-size: 20px;
    font-weight: 400;
}

.discount li a cite {
    width: 100%;
    height: 200px;
    background-size: cover;
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    padding: 40px 300px 40px 40px;
}

.discount li a:hover {
    color: var(--color);
}

.discount li a:hover cite {
    transform: translateY(5px);
}

.discount-pop pop-main {
    max-width: 1000px;
}

.discount-cont {
    padding: 20px;
}

.discount-cont cite {
    display: flex;
    align-items: center;
    background-size: cover;
    width: 100%;
    height: 140px;
    font-size: 22px;
    padding: 0 120px 0 20px;
    border-radius: 10px;
    color: #fff;
}

article,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article p {
    padding: 10px 0;
}

article li {
    padding: 5px 0;
}

.amount {
    padding: 20px 50px;
}

.sum-input {
    background-color: var(--f7);
    border-radius: 10px;
}

.sum-input {
    text-align: center;
    font-size: 42px;
    height: 90px;
    font-weight: 700;
    color: var(--orange);
}

.sum-input::-webkit-input-placeholder {
    color: var(--orange);
}

.sum-btn {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.sum-btn a {
    background-color: var(--f7);
    font-size: 18px;
    line-height: 50px;
    display: block;
    flex: 1;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
}

.sum-btn a:hover {
    background-color: var(--eee);
}

.sum-btn a:not(:last-child) {
    margin-right: 10px;
}

.sum-btn a.active {
    background-image: var(--orange-lg);
    color: #fff;
}

.amount-discount {
    overflow: hidden;
}

.amount-discount li {
    width: 33.33%;
    float: left;
    padding: 5px;
}

.amount-discount li a {
    background-color: var(--f7);
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    border: 2px var(--f7) solid;
}

.amount-discount li a i {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.amount-discount li a span {
    font-size: 16px;
    font-weight: 700;
}

.amount-discount li a span em {
    color: var(--orange);
    margin-right: 10px;
}

.amount-discount li a.active {
    border-color: var(--orange);
}

.amount-list li {
    border-bottom-width: 1px;
    padding: 10px 0;
    line-height: 200%;
    display: flex;
    align-items: center;
}

.amount-list li h6 {
    flex: 1;
}

.amount-list li span {
    font-weight: 700;
}

.amount-list li b {
    font-size: 30px;
    color: var(--orange);
}

.amount-bank {
    display: flex;
    align-items: center;
    background-color: var(--f7);
    padding: 20px;
}

.amount-bank i {
    width: 90px;
    border-radius: 90px;
    padding: 15px;
    background-color: var(--eee);
}

.amount-bank i img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}

.amount-bank h5 {
    flex: 1;
    padding: 0 20px;
}

.amount-bank h5 span {
    display: flex;
    font-size: 22px;
    color: var(--orange);
    font-weight: 400;
}

.amount-bank a {
    padding: 0 30px;
}

.warning {
    background-color: var(--red);
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    margin: 20px 0;
}

.title {
    padding: 20px 0;
}

page {
    padding: 20px 0;
}

page *,
page .ico {
    border-radius: 100px;
}

.user-pop pop-main {
    max-width: 1000px;
}

.user {
    padding: 10px;
}

.user tab {
    display: flex;
}

.user tab tab-list {
    width: 200px;
    background-image: url(../images/sider.jpg);
    background-size: cover;
    border-radius: 10px;
    padding: 0 10px;
    margin-right: 10px;
}

.user tab tab-list li {
    margin: 10px 0;
    float: none;
}

.user tab tab-list li a {
    background-image: var(--light-lg);
    padding: 10px;
    border-radius: 7px;
    text-align: left;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    position: relative;
}

.user tab tab-list li a u {
    width: 0;
    height: 100%;
    background-image: var(--color-lg);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px;
}

.user tab tab-list li a i {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    position: relative;
}

.user tab tab-list li a span {
    position: relative;
}

.user tab tab-list li.active a u,
.user tab tab-list li:hover a u {
    width: 100%;
}

.user tab tab-list li.active a span,
.user tab tab-list li:hover a span {
    color: #fff;
}

.user tab tab-cont {
    padding: 10px;
    flex: 1;
    min-width: 0;
}

.user-info .avatar {
    width: 120px;
    height: 120px;
    margin: auto;
}

.user-info h4 {
    text-transform: inherit;
    text-align: center;
    padding: 10px 0;
    font-size: 26px;
    color: var(--orange);
    font-weight: 400;
}

.user-info input {
    text-align: center;
    font-size: 20px;
    background-color: var(--color);
    color: #fff;
    border-radius: 100px;
    width: 50%;
    margin: auto;
    display: block;
}

.user-tip {
    border-top-width: 1px;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
}

.user-tip a {
    color: var(--orange);
}

.user-tip a:hover {
    text-decoration: underline;
}

.user-notice {
    padding: 50px 0;
}

.user-notice i {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto 50px;
    animation: emptyico 1s infinite linear;
}

.user-notice h3 {
    color: var(--ddd);
    font-weight: 400;
}

@keyframes emptyico {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}

.user-clip em {
    width: 120px;
    height: 120px;
    display: block;
    margin: auto;
}

.user-clip input {
    background-color: var(--f7);
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
}

.night body {
    background-image: url(../images/bg-black.jpg);
}

.night .head {
    background-image: linear-gradient(to bottom, #000, var(--333));
}

.night .logo {
    background-image: url(../images/name-white.svg);
}

.night .head-nav li a {
    background-color: var(--333);
}

.night .head-nav li a:hover {
    background-color: var(--color);
}

.night .head-nav li a h6 {
    color: #fff;
    font-weight: 400;
}

.night hop > a {
    background-color: var(--333);
}

.night .light cite {
    background-image: linear-gradient(to right, var(--222), transparent);
}

.night .list li a {
    background-color: var(--333);
}

.night .list li a h6 {
    color: #fff;
}

.night .foot {
    background-color: var(--222);
    border-width: 0;
}

.night .foot h4 {
    color: #fff;
}

.night .foot-service li a i {
    border-color: var(--333);
}

.night .foot-service li a h6 {
    color: var(--666);
    font-weight: 400;
}

.foot-logo2 {
    padding-top: 35px;
    width: 200px;
    left: 0;
    right: 0;
    top: -100px;
    margin: auto;
}
.license {
    padding-top: 45px;
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
}

.license img {
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 5px;
    display: block;
    width: 100px;
    height: auto;
    transition: transform 0.2s ease-in-out;
}

.license:hover img {
    transform: scale(1.03);
}

.popup-license {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}

.poplicense {
    position: absolute;
    width: 65%;
}

.popup-license img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    position: relative;
}

.popup-license span {
    right: -5px;
    top: -20px;
    position: absolute;
    color: black;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    z-index: 1002;
}

.popup-license span:hover {
    opacity: 1;
}

.footer_license {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-start: 2;
    grid-column-end: 3;
}

.night .crumb marquee,
.night .crumb marquee a {
    color: #fff;
}

.night .discount li a h5 span {
    color: #fff;
}

.blue {
    --color: #4833d2;
    --color-lg: linear-gradient(to bottom, #5a42fc, #2e19b2);
}
.sharp-blue {
    --color: var(--sharpblue);
    /* --color-lg: var(--sharpblue); */
    --color-lg: linear-gradient(to bottom, var(--sharpblue), var(--sharpblue));
}
.oragegradien {
    --color: var(--oragegradien);
    --color-lg: linear-gradient(to bottom, var(--oragegradien), var(--oragegradien));
}
.sharpcyan {
    --color: var(--sharpcyan);
    --color-lg: linear-gradient(to bottom, var(--sharpcyan), var(--sharpcyan));
}
.sharpred {
    --color: var(--sharpred);
    --color-lg: linear-gradient(to bottom, var(--sharpred), var(--sharpred));
}
.sharpgreen {
    --color: var(--sharpgreen);
    --color-lg: linear-gradient(to bottom, var(--sharpgreen), var(--sharpgreen));
}
.sharpblack {
    --color: var(--sharpblack);
    --color-lg: linear-gradient(to bottom, var(--sharpblack), var(--sharpblack));
}

.sapphire {
    --color: #642ef7;
    /* --color-lg: #642ef7; */
    --color-lg: linear-gradient(to bottom, #642ef7, #642ef7);
}

/* orange */

.orange {
    --color: var(--oragegradien);
    --color-lg: linear-gradient(to bottom, var(--oragegradien), var(--oragegradien));
}
.cyan {
    --color: var(--cyan);
    --color-lg: linear-gradient(to bottom, var(--cyan), var(--cyan));
}

.violet {
    --color: #a34fe4;
    /* --color-lg: #a34fe4; */
    --color-lg: linear-gradient(to bottom, #a34fe4, #a34fe4);
}

.yellow {
    --color: #fe0;
    /* --color-lg: #fe0; */
    --color-lg: linear-gradient(to bottom, #fe0, #fe0);
}

.black {
    --color: #1e2230;
    --color-lg: linear-gradient(to bottom, #1e2230, #1e2230);
}

.deep {
    --color: var(--deep);
    --color-lg: linear-gradient(to bottom, var(--deep), var(--deep));
}

.green {
    --color: var(--green);
    --color-lg: linear-gradient(to bottom, var(--green), #34be87);
}

/* .orange {
    --color: var(--orange);
    --color-lg: var(--orange-lg)
} */

.im-cont h5 {
    color: #fff;
}

.red {
    --color: var(--red);
    --color-lg: linear-gradient(to bottom, var(--red), #db1d33);
}

.sapphire {
    --color: var(--sapphire);
    --color-lg: linear-gradient(to bottom, var(--sapphire), #453db4);
}

.img-lang {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 100%;
    margin: 5px;
}

.img-lang2 {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 100%;
}

.title h2 {
    font-size: 25px;
}

.login-input-group {
    margin-bottom: 15px;
}

.login-input-group input {
    border: 1px solid #cfcfcf;
    padding-left: 20px;
    border-radius: 10px;
}

.login-input-group select {
    border: 1px solid #cfcfcf;
    padding-left: 20px;
    border-radius: 10px;
}

.login-input-group input::placeholder {
    color: #000;
}

.login-input-group input.code {
    width: 440px !important;
    border-radius: 10px 0 0 10px;
}

.captcha-text {
    width: 153px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #333;
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
}

.login-input-group .captcha-group {
    display: flex;
}

.login-input-group input:focus {
    border: 1px solid red;
}

.login-bottom-text {
    text-align: center;
}

.ico-login {
    margin-top: 5px;
    padding: 3px;
}

.center1 input {
    background-color: #0000 !important;
}

.ico-search {
    width: 35px;
    margin-right: 5px;
}

.avt {
    width: 100%;
}

.img-hot {
    height: 100%;
    width: 100%;
}

.avt1 {
    margin: 10px;
}

.slots-games {
    background: 0 0 !important;
}

.slots-games .slots-games-items .brand-list {
    background: 0 0 !important;
}

.slots-games .slots-games-items .brand-list li {
    color: rgb(19 19 19);
}

.slots-games-items .brand-list li span {
    color: #131313 !important;
}

.night .slots-games-items .brand-list li span {
    /* color: #fff!important */
}

.night .slots-nav a {
    color: #fff !important;
}

.night .total_of_slots {
    color: #fff !important;
}

.night .slot_search_box .search_input {
    color: #fff !important;
}

.slots-home li {
    width: 19.888% !important;
}

.sider-list li a h5 {
    font-size: 14px;
}

#contactSwiper .swiper-slide img {
    width: 70px !important;
    height: 70px !important;
}

.con-us {
    display: flex;
    align-content: center;
    justify-content: space-evenly;
}

#contactSwiper .swiper-wrapper {
    width: 30%;
}
#contactSwiper.swiper-free-mode > .swiper-wrapper {
    margin: 0 !important;
}
.contact1 {
    overflow-x: hidden;
}

#contactSwiper .swiper-slide {
    width: 80% !important;
}
.swiper-container.amount {
    padding: 20px 5px;
}

.more-games-pop .list li {
    padding-left: 0;
    opacity: 1;
}

.more-games-pop .amount {
    padding: 20px 20px;
}

.more-games-pop .amount .list {
    overflow: inherit;
}

.more-games-pop .amount .list .slick-prev {
    left: -10px !important;
}

.more-games-pop .amount .list .slick-next {
    right: 0 !important;
}

.slick-prev:before,
.slick-next:before {
    color: var(--color) !important;
}

.more-games-pop .slider {
    width: 100%;
    margin: 10px auto;
    margin-left: 10px;
}

.more-games-pop .slick-slide {
    margin: 0px 20px;
}

.more-games-pop .slick-slide img {
    width: 100%;
}

.more-games-pop .slick-slide {
    transition: all ease-in-out 0.3s;
    opacity: 0.2;
}

.more-games-pop .slick-active {
    opacity: 0.5;
}

.more-games-pop .slick-current {
    opacity: 1;
}

.more-games-pop .item {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent center no-repeat;
    background-size: contain;
    box-sizing: border-box;
    font-family: uigg;
    border-color: var(--eee);
    border-style: solid;
    float: left;
    padding: 10px;
    -webkit-tap-highlight-color: transparent;
    transition-duration: 0.3s;
}

.more-games-pop .item a {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: var(--shadow);
}

.more-games-pop .item a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px var(--color);
}

.more-games-pop .item a:hover h6 {
    background-color: var(--color);
    color: #fff;
}

.more-games-pop .item a h6 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

button.owl-prev {
    float: left;
    top: 50%;
    position: absolute;
    left: -15px;
    margin-top: -30px !important;
}

button.owl-next {
    float: right;
    top: 50%;
    position: absolute;
    right: -15px;
    margin-top: -30px !important;
}

button.owl-prev span,
button.owl-next span {
    font-size: 30px;
    color: var(--color);
}

.owl-carousel .owl-dots {
    display: none;
}

.owl-theme .owl-nav [class*="owl-"]:hover {
    transform: scale(1.5);
    background: transparent !important;
}

.more-games-pop {
    z-index: 99999;
}

.head-nav li a.info_icon {
    display: inline-block;
    width: 50px;
    margin: 0 5px;
    border-radius: 100%;
    height: 50px;
    position: relative;
    vertical-align: middle;
    top: 10px;
}

.head-nav a.info_icon:hover {
    transform: scale(1.1);
}

.head-cont .btn {
    font-size: 14px;
}

#game_popup_left {
    background: #fff;
    padding: 12px 12px 0 12px;
    width: 358px;
    min-height: 200px;
    left: -360px;
    position: fixed;
    cursor: pointer;
    color: #808080;
    bottom: 5px;
    box-shadow: var(--shadow);
    transition: left 0.5s ease 0s, margin-left 0.6s ease 0s, opacity 0.4s ease 0s;
    transition-delay: 1s;
    /*    display: none;*/
}

.game_popup_content h2 {
    color: #343434;
    font-size: 18px;
    padding: 12px 0;
}

.game_popup_body {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.game_popup_body img {
    width: 180px;
    padding-right: 5px;
}

.game_popup_content .p_close {
    position: absolute;
    right: 0;
    top: 0;
    background: #ccc;
    height: 35px;
    width: 35px;
    display: inline-block;
    line-height: 40px;
    color: #000;
}

.game_popup_body_detail {
    width: 100%;
}

.game_popup_body_detail h3 {
    font-size: 20px;
    text-align: left;
    width: 100%;
    padding-left: 50px;
}

.winner_amount {
    text-align: left;
    width: 100%;
    padding-left: 50px;
    color: red;
}

.slots_active {
    transition-delay: 0.8s !important;
    left: 0px !important;
}

.game_3d .arcade {
    position: relative;
    display: inline-block;
    min-height: 585px;
}

.game_title {
    width: 100%;
    display: inline-block;
    padding: 0 13px;
}

.game_title h5 {
    display: inline-block;
}

.game_title a {
    display: block;
    float: right;
    font-size: 15px;
    color: #00379d;
    padding-right: 8px;
}

.load_more:before {
    content: "";
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    display: inline-block;
    margin-left: 10px;
}

#load_more {
    display: block;
    text-align: center;
    margin-bottom: 8px;
    display: none;
    position: relative;
    top: 50px;
}

#load_more a {
    display: inline-block;
    cursor: pointer;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.provider-seo {
    margin: auto;
    text-align: center;
    padding-bottom: 35px;
}

.provider-seo ul li {
    display: inline-block;
    margin: 5px;
    background-color: #f2d4d1;
    padding: 8px 15px;
    border-radius: 10px;
}
.provider-seo ul li:hover {
    background-color: #9e5045;
}
.provider-seo ul li:hover h6 {
    color: #f2d4d1;
}
.provider-seo ul li h6 {
    color: #9e5045;
    font-size: 12px;
}
.show_more {
    position: absolute;
    bottom: -36px;
    left: 0;
    right: 0;
    cursor: pointer;
}

pop_register,
pop_register > x {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
pop_register {
    position: fixed;
    background-color: var(--000-8);
    z-index: 333;
    display: none;
}
.promo-register pop-cont {
    background-color: #000000ba;
    border: 2px solid var(--color);
    border-radius: 20px;
}
.promo-register .full {
    /* width: 100% !important; */
    /* height: 40% !important; */
}
.promo-register pop-title {
    background-color: #000000ba;
    border-bottom-width: 0px;
}
.register_img {
    width: 50%;
    padding: 20px;
    margin: auto;
}
.register_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.register_title h4 {
    font-size: 18px;
    color: #faf58f;
    font-weight: bold;
}
.register_title p {
    color: #8f8f8b;
}
.account-wrap {
    background-color: var(--color);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 13px;
}
.account-wrap span {
    padding: 4px;
    font-size: 17px;
    color: #fff;
}
.btnView {
    background-color: var(--color);
    color: #fff;
    border-radius: 25px;
    padding: 10px 25px;
    display: block;
    position: absolute;
    left: 30%;
}
a.msgbox {
    position: relative;
    display: block;
    background-size: contain;
    text-decoration: none;
    font-size: 36px;
    /* top: -9px; */
    color: var(--color);
}
.msgnum {
    position: absolute;
    right: -9px;
    top: -24px;
    color: #fff;
    /* width: 50px; */
    padding: 10px;
    font-size: 13px;
    background: url("../images/msgcont.png") center;
    background-repeat: repeat;
    background-size: auto;
    background-size: 23px;
    background-repeat: no-repeat;
}
.left-gif {
    position: fixed;
    right: 0;
    top: 60%;
    z-index: 999;
}
.social-media {
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 999;
    padding: 0 10px;
}
.Foote_logo img {
    width: 75%;
    margin-left: 30px;
}

#achievement_data table thead tr th {
    color: #000 !important;
}
#achievement_data table td {
    color: #000 !important;
}
.btn-check-turnover-tn {
    width: 150px !important;
    border-radius: 4px !important;
    line-height: 30px !important;
}
.refresh-turnover {
    height: 78px !important;
    border-radius: 4px !important;
}
html:lang(th) .btn-check-turnover-tn {
    font-size: 14px !important;
}
html:lang(cn) .btn-check-turnover-tn,
html:lang(ca) .btn-check-turnover-tn,
html:lang(tw) .btn-check-turnover-tn {
    height: 78px !important;
    line-height: 57px !important;
}
#arcade_games .list li a em {
    width: 210px !important;
}
#arcade_games .slots-home li {
    width: 17.888% !important;
}
html:lang(th) *:not(.ico):not(.far):not(.fa) {
    box-sizing: border-box;
    font-family: "Prompt", sans-serif !important;
    font-weight: 400;
}

.slots-games-items .brand-list a {
    width: auto !important;
}
.maintenance {
    border-radius: 10px;
}
/* Intro guid */

    .highlight {
        position: relative;
        box-shadow: inset 0 0 1px 3px #ffffff;
        z-index: 1001 !important;
        border: 3px solid #100f23;
        outline: 2px solid #fff;
        background-image: var(--lg);
        overflow: hidden;
        font-weight: bold;
        padding: 8px 12px !important;
    }
    .skip-btn,
    .next-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        line-height: 18px !important;
    }

    .skip-btn {
        background-color: #2f2d59;
        color: #ffffff;
    }

    .next-btn {
        background-color: #e51177;
        color: white;
        margin: auto;
    }
    .dot.active {
        background-color: #4400ff;
    }
    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #introModal {
        background: rgba(0, 0, 0, 0.5);
        z-index: 99 !important;
    }
    /* .highlight#logointro{
    background: #fff;
  } */
    .highlight#game-section {
        max-height: 65%;
        border-radius: 34px;
        /* animation-name:unset !important; */
    }
    section.anime-fade-in {
        animation-name: unset !important;
    }
    .clause_top {
        padding-top: 0px;
    }
    .remove-z-index {
        z-index: unset !important;
        position: relative !important;
    }
    .promo-register pop-cont {
        height: 360px;
        background-color: #000000ba;
        border: 2px solid var(--color);
        border-radius: 20px;
    }
    .modal-content.step-5-pseudo::before {
        content: "";
        position: absolute;
        top: 58px !important;
        left: -6% !important;
        transform: translateX(-50%);
        border: 19px solid transparent !important;
          border-right-color: transparent ;
        border-right-color: white !important;
      }

.fa-redo:before {
    content: " " !important;
}
body[data-pages=challenges] .container{
    padding: 0 30px;
}