@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");300;400;500;700;900&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
    font-size: 14px;
    margin: 0 auto;
    color: #ffffff;
    background: #101010;
    padding-top: 100px;
    width: 100%;
    min-height: 100%;
    min-width: 980px;
}

a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    a:hover,
    a:focus,
    button:focus,
    button:hover,
    input:focus,
    select:focus {
        color: #fff;
        text-decoration: none;
        outline: none;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

ul,
ol,
li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

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

img {
}

button {
    boder: none;
    background: none;
}

    button:hover,
    button:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
    color: #000;
    width: 100%;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    z-index: 10000000000;
}

::-webkit-scrollbar-track-piece {
    background-color: #242424;
    -webkit-border-radius: 6px;
    z-index: 10000000000;
}

::-webkit-scrollbar-thumb {
    background: #02d46d;
    z-index: 10000000000;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #02d46d;
        z-index: 10000000000;
    }

/**********Header*************/
.bg-nav {
    background: url("../images/common/header-bg.jpg") repeat;
    background-size: 100% 100%;
}

.nav {
    position: fixed;
    box-sizing: content-box;
    top: 0;
    background: #000000;
    width: 100%;
    /* height:60px; */
    transition: all 0.3s ease-out;
    z-index: 1000;
}

.nav-small {
    position: fixed;
    box-sizing: content-box;
    top: 0;
    background: #001638;
    width: 100%;
    height: 47px;
    transition: all 0.3s ease-out;
    z-index: 100;
    background: #161616;
}

    .nav-small .nav-logo {
        height: 35px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        position: relative;
        /* margin-left: 36%; */
    }

.nav-logo {
    height: 75px;
    width: auto;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.header-top {
    display: flex;
    align-items: center;
    height: 59px;
    justify-content: space-between;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.nav-small .header-top {
    height: 45px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin-left: 30px;
}

.SlideDownMenu {
    border-bottom: 2px solid #02d46d;
    position: fixed;
    top: 45px;
    width: 100%;
    z-index: 999;
    /* border-top: 2px solid #634d23; */
}

    .SlideDownMenu .menu-small {
        background-color: #000000;
        display: none;
        height: 41px;
        top: 0;
    }

.NavTab {
    border-radius: 0 0 5px 5px;
    height: 40px;
    text-align: center;
    /* width: 243px; */
    display: flex;
}

    .NavTab a {
        position: relative;
    }

        .NavTab a:before {
            content: "";
            position: absolute;
            top: 16px;
            left: 0;
            width: 25px;
            height: 0.125em;
            border-top: 0.9em double rgb(255 255 255 / 40%);
            border-bottom: 0.2em solid rgb(255 255 255 / 40%);
        }

.SlideDownMenu ul {
    list-style: outside none none;
    margin: 0;
    padding: 22px 0;
    text-align: center;
}

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

        .SlideDownMenu ul li a {
            position: relative;
            z-index: 1;
            display: block;
            padding: 12px 20px;
            text-decoration: none;
            color: #fff;
        }

            .SlideDownMenu ul li a:hover {
                color: #fff;
            }

            .SlideDownMenu ul li a:after {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                width: 100%;
                height: 1px;
                content: '.';
                color: transparent;
                visibility: none;
                opacity: 0;
                z-index: -1;
                transition: all .5s;
            }

            .SlideDownMenu ul li a:hover:after {
                opacity: 1;
                visibility: visible;
                height: 100%;
            }

@-webkit-keyframes fill {
    0% {
        width: 0%;
        height: 1px;
    }

    50% {
        width: 100%;
        height: 1px;
    }

    100% {
        width: 100%;
        height: 100%;
        background: #333;
    }
}

@-webkit-keyframes circle {
    0% {
        width: 1px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: 1px;
        z-index: -1;
        background: #eee;
        border-radius: 100%;
    }

    100% {
        background: #aaa;
        height: 5000%;
        width: 5000%;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 0;
    }
}

.nav-small .menu-bar {
    visibility: visible;
}

.nav .menu-bar {
    justify-content: space-between;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.1s;
    display: none;
}

.nav-small .menu-bar-lg {
    display: none;
}

.menu-bar-lg {
    width: 100%;
    /* background: #101010; */
    border-bottom: 2px solid #02d46d;
}

.menu-in ul li a {
    color: #fff;
    height: 41px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.menu-in ul li {
}

.menu-in ul {
    display: flex;
    height: 40px;
    align-items: center;
    /* justify-content:center; */
    gap: 10px;
}

.btn-promo {
    position: absolute;
    top: -2px;
    right: 0px;
}

.menu-in ul li a.active,
.menu-in ul li a:hover {
    color: #02d46d;
    background: none;
}

.menu-in {
    margin: 0px auto;
    position: relative;
}

ul.right-top {
    display: flex;
    align-items: center;
}

.btn-log {
    border: 1px solid #02d46d;
    color: #02d46d;
    padding: 5px 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}

    .btn-log:hover {
        background: #02d46d;
        border: 1px solid #02d46d;
        color: #161616;
    }

.form-log {
    display: flex;
}

    .form-log .btn-reg {
        background: #02d46d;
        color: rgb(22 22 22);
        padding: 5px 20px;
        font-size: 12px;
        text-transform: uppercase;
        border: 1px solid #02d46d;
        font-weight: bold;
    }

.btn-reg:hover {
    border: 1px solid #02d46d;
    background: none;
    color: #02d46d;
}

ul.right-top li:first-child {
    border: none;
}

ul.right-top li {
    box-sizing: border-box;
    box-shadow: 1px 0 0 rgb(255 255 255 / 10%);
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .74);
    font-size: 10px;
}

.btn-lang:not(:disabled):not(.disabled).active,
.btn-lang:not(:disabled):not(.disabled):active,
.show > .btn-lang {
    color: rgba(255, 255, 255, .74);
    background-color: #000000;
    border-color: #c69500;
}

.btn-lang {
    color: #212529;
    background: none;
    border-color: #ffc107;
    border: none !important;
    color: rgba(255, 255, 255, .74);
    font-size: 10px;
    padding: 7px 11px;
    display: flex;
    align-items: center;
    border-radius: 0px;
}

.btn.btn-lang:focus {
    box-shadow: none;
    border: none;
    outline: none;
}

.btn-lang img {
    height: 10px;
    margin-right: 7px;
}

.btn-lang:hover {
    color: rgba(255, 255, 255, .74);
}

ul.right-top li:last-child {
    padding: 0px;
}

.drop-bg {
    padding: 0px;
    border-radius: 0px;
    background: #000000;
    margin: 0px;
    min-width: 8rem;
    box-shadow: 0px 0px 8px #00000054;
}

    .drop-bg li {
        box-shadow: none !important;
        display: flex;
        align-items: center;
    }

        .drop-bg li img {
            height: 9px;
            position: relative;
            top: -2px;
            margin-right: 10px;
        }

        .drop-bg li a {
            display: flex;
            align-items: center;
            color: rgba(255, 255, 255, .74);
        }

        .drop-bg li.active {
            background: #02d46d;
        }

        .drop-bg li:hover {
            background: #02d46d;
        }

        .drop-bg li:last-child {
        }

    .drop-bg p {
        font-size: 10px;
        text-align: center;
        padding: 7px;
        color: rgba(255, 255, 255, .74);
        text-transform: uppercase;
    }

.arw-caret {
    transform: rotateX(180deg);
    font-weight: 100;
    margin-left: 5px;
}

.dropdown.show .arw-caret {
    transform: rotateX(0deg);
}

ul.ht-top li img {
    height: 20px;
}

ul.right-top li img {
    height: 13px;
}

.clr-box {
    background: #c38a2c;
    position: absolute;
    font-size: 9px;
    width: 11px;
    height: 11px;
    text-align: center;
    border-radius: 15px;
    top: 3px;
    right: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.right-top li a {
    padding: 0px 10px;
    width: 100%;
    color: rgba(255, 255, 255, .74);
    text-align: center;
}

.blnc {
    font-size: 8px;
}

    .blnc p {
        line-height: 9px;
        font-size: 10px;
        text-align: right;
    }

p.clr-yll {
    font-size: 9px;
    text-align: right;
    color: #02d46d;
}

span.ico-drp {
    margin-right: 10px;
    width: 15%;
}

.user-info p {
    text-align: left;
    padding: 0px 7px;
    font-size: 9px;
}

.user-info {
    padding: 6px 0px;
    background: #02d46d4d;
}

p.txt-clr {
    color: #02d46d;
    font-size: 10px;
}

.btn-lang i {
    font-size: 13px;
}

.arw-caret i {
    font-size: 7px !important;
}

ul.right-top li a i {
    margin-right: 5px;
}

/**********Slider*************/
.owl-item {
    color: white;
    text-align: center;
}

.owl-prev,
.owl-next {
    display: inline-block;
}

.owl-next {
    float: right;
}

.slider-counter {
    text-align: left;
    position: absolute;
    top: 18px;
    z-index: 102;
    width: 125px;
    /* margin:0px auto; */
    left: 19%;
    right: 0px;
    font-size: 15px;
    display: flex;
    background: #000000a1;
    justify-content: space-between;
    align-items: center;
    height: 42px;
    border-radius: 35px;
}

.info {
    text-align: center;
    margin-top: 110px;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    min-width: 1920px;
    margin: 0px auto;
}

.owl-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 160px;
}

button.owl-prev span {
    font-size: 45px;
    background: #00000052;
    padding: 5px 20px;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 0px;
}

button.owl-next span {
    font-size: 45px;
    background: #00000052;
    padding: 5px 20px;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 0px;
}

/**********annoucement*************/
.annouce-in {
    display: flex;
    align-items: center;
    height: 37px;
}

.annou-bar {
    background: #000000;
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 99;
    padding: 2px;
}

.slider-wrap {
    position: relative;
}

.runningtext {
    width: 100%;
    display: flex;
    align-items: end;
    font-size: 14px;
    color: #02d46d;
}

.annouce-in.icon {
}

.annouce-in .icon {
    font-size: 14px;
    padding-right: 10px;
    color: #02d46d;
}

.top-annou .annou-bar {
    top: 0px;
    bottom: auto;
}

/**********index category*************/
.idx-prod ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.buttonfx {
    color: black;
    outline: none;
    border: none;
    letter-spacing: 0.0625em;
    padding: 8px 10px;
    text-transform: uppercase;
    font: bold 16px 'Bitter', sans-serif;
    line-height: 2;
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    width: 100%;
    transition: all .5s;
    text-align: center;
    font-size: 12px;
    z-index: 10;
}

    .buttonfx:before,
    .buttonfx:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        z-index: -1;
        transform: translate3D(0, -100%, 0);
        transition: all .5s;
        background: #02d46d;
    }

    .buttonfx:before {
        background: #000000;
        z-index: -2;
        transform: translate3D(0, 0, 0);
        /* color: #154690; */
        background: #2e2e2e;
    }

    .buttonfx:hover {
        color: white;
    }

        .buttonfx:hover:after {
            transform: translate3D(0, 0, 0);
            transition: all .5s;
        }

.bouncein:hover:before,
.bouncein:hover:after {
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66) !important;
}

.idx-prod ul li .hvr-scl {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    top: 0px;
}

.idx-prod ul li:hover .buttonfx:after {
    transform: translate3D(0, 0, 0);
    transition: all .5s;
}

.idx-prod ul li:hover .buttonfx:after {
    transform: translate3D(0, 0, 0);
    transition: all .5s;
}

.idx-prod ul li:hover .bouncein:before,
.idx-prod ul li:hover .bouncein:after {
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66) !important;
}

.hvr-scl p {
    transition: 0.3s;
    position: absolute;
    bottom: 50px;
    font-size: 14px;
    padding: 0px 10px;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px #ef1dff, 1px 1px 2px #29012c, 1px 1px 2px #29012c, 1px 1px 2px #ef1dff; */
}

.hvr-scl:hover p {
    transform: scale(1.1);
}

.hvr-scl img {
    transition: 0.3s;
    position: relative;
    font-size: 17px;
}

.idx-prod {
    margin-top: 30px;
}

.hvr-scl:hover img {
    transform: scale(1.1);
}

.bg-in {
    background: #101010;
    height: 220px;
    position: absolute;
    width: 100%;
    bottom: 0px;
}

.idx-prod ul li:hover .hvr-scl img {
    transform: scale(1.1);
}

.idx-prod ul li:hover .hvr-scl p {
    transform: scale(1.1);
}

/**********index slot*************/
.content {
    position: relative;
    width: 100%;
    max-width: 527px;
    margin: auto;
    overflow: hidden;
    cursor: pointer;
}

.inx-lby-in3 .content {
    max-width: 715px;
}

.content .content-overlay {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    border: 1px solid #02d46d;
}

.content:hover .content-overlay {
    opacity: 1;
}

.content-image {
    width: 100%;
}

.content-details {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content:hover .content-details {
    top: 50%;
    left: 50%;
    opacity: 1;
}

.fadeIn-left {
    left: 20%;
}

.fadeIn-right {
    left: 80%;
    margin-top: 15px;
}

.btn-ixply {
    background: #02d46d;
    padding: 8px;
    width: 120px;
    margin-bottom: 5px;
}

.btn-ixplyf {
    background: #2e2e2e;
    padding: 8px;
    width: 120px;
}

.inx-slot-wrap {
    margin-top: 35px;
    margin-bottom: 35px;
}

.inx-slot h4 {
    font-size: 20px;
    color: #02d46d;
    font-weight: bold;
}

.buttonfx a {
    color: #ffffff;
}

.inx-lby ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.slt-nm {
    background: #2e2e2e;
    padding: 10px;
    color: #ffffff;
    border: 1px solid #53535385;
    border-top: none;
    text-transform: uppercase;
}

.idx-prod li:hover .buttonfx a {
    color: #fff;
}

/**********footer *************/
footer {
    background: #000000;
}

.footer-in-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #ffffff1c;
    padding-top: 50px;
}

.social-ico ul {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}

    .social-ico ul li img {
        width: 30px;
    }

.footer-r {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.social-ico ul li {
    margin-left: 10px;
}

.ico-et {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .03);
    box-shadow: 0 0 1px rgba(255, 255, 255, .28)inset;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 42px;
}

.call-ico {
    margin-bottom: 25px;
}

.btn-fdk2 {
    background: 0 0;
    border: 1px solid #f7f7f766;
    color: #fff;
    height: 32px;
    padding: 0 18px;
    font-size: 12px;
}

.btn-fdk {
    height: 32px;
    padding: 0 18px;
    font-size: 12px;
    border: 1px solid #02d46d;
    background: #02d46d;
    color: #fff;
    text-transform: uppercase;
    transition: 300ms color, 300ms background, 300ms border;
}

    .btn-fdk:hover {
        background: #161616;
        border: 1px solid #02d46d;
    }

.btn-fdk2:hover {
    background: #02d46d;
    border: 1px solid #3aa188;
    color: #fff;
}

.qr-ftr img {
    height: 117px;
    margin-top: 30px;
}

.ftr-box p {
    font-size: 18px;
    margin-bottom: 15px;
}

.footer-l {
    display: flex;
}

.ftr-box {
    margin-right: 100px;
}

    .ftr-box ul li a {
        color: rgba(255, 255, 255, .75);
    }

    .ftr-box ul li {
        margin-bottom: 15px;
    }

.footer-prv {
    padding-top: 25px;
    width: 100%;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #ffffff1c;
    flex-direction: column;
}

    .footer-prv ul li {
    }

    .footer-prv ul {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        /* grid-template-columns:repeat(12,1fr); */
        gap: 10px;
        align-items: center;
    }

.pay-icxo {
    padding: 25px;
}

.footer-prv h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 15px 0px;
}

ul.fb-pg {
    display: flex;
    width: 375px;
    flex-wrap: wrap;
}

/**********Jacktop *************/
.owl-carousel .owl-wrapper:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: ".";
    line-height: 0;
}

.owl-carousel {
    position: relative;
    display: none;
    width: 100%;
    -ms-touch-action: pan-y;
}

    .owl-carousel .owl-wrapper {
        position: relative;
        display: none;
        -webkit-transform: translate3d(0px, 0px, 0px);
    }

    .owl-carousel .owl-wrapper-outer {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

        .owl-carousel .owl-wrapper-outer.autoHeight {
            -webkit-transition: height 500ms ease-in-out;
            -moz-transition: height 500ms ease-in-out;
            -ms-transition: height 500ms ease-in-out;
            -o-transition: height 500ms ease-in-out;
            transition: height 500ms ease-in-out;
        }

    .owl-carousel .owl-item {
        float: left;
        min-height: 165px;
    }

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    cursor: pointer;
}

.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.grabbing {
    cursor: url(../images/grabbing.png) 8 8, move;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

.owl-theme .owl-controls {
    margin-top: 10px;
    text-align: center;
}

/* * Owl Carousel CSS3 Transitions * v1.3.2 */
.owl-origin {
    -webkit-perspective: 1200px;
    -webkit-perspective-origin-x: 50%;
    -webkit-perspective-origin-y: 50%;
    -moz-perspective: 1200px;
    -moz-perspective-origin-x: 50%;
    -moz-perspective-origin-y: 50%;
    perspective: 1200px;
}

.owl-fade-out {
    z-index: 10;
    -webkit-animation: fadeOut .7s both ease;
    -moz-animation: fadeOut .7s both ease;
    animation: fadeOut .7s both ease;
}

.owl-fade-in {
    -webkit-animation: fadeIn .7s both ease;
    -moz-animation: fadeIn .7s both ease;
    animation: fadeIn .7s both ease;
}

.owl-backSlide-out {
    -webkit-animation: backSlideOut 1s both ease;
    -moz-animation: backSlideOut 1s both ease;
    animation: backSlideOut 1s both ease;
}

.owl-backSlide-in {
    -webkit-animation: backSlideIn 1s both ease;
    -moz-animation: backSlideIn 1s both ease;
    animation: backSlideIn 1s both ease;
}

.owl-goDown-out {
    -webkit-animation: scaleToFade .7s ease both;
    -moz-animation: scaleToFade .7s ease both;
    animation: scaleToFade .7s ease both;
}

.owl-goDown-in {
    -webkit-animation: goDown .6s ease both;
    -moz-animation: goDown .6s ease both;
    animation: goDown .6s ease both;
}

.owl-fadeUp-in {
    -webkit-animation: scaleUpFrom .5s ease both;
    -moz-animation: scaleUpFrom .5s ease both;
    animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
    -webkit-animation: scaleUpTo .5s ease both;
    -moz-animation: scaleUpTo .5s ease both;
    animation: scaleUpTo .5s ease both;
}

@-webkit-keyframes empty {
    0% {
        opacity: 1
    }
}

@-moz-keyframes empty {
    0% {
        opacity: 1
    }
}

@keyframes empty {
    0% {
        opacity: 1
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes backSlideOut {
    25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px);
    }

    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%);
    }

    100% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%);
    }
}

@-moz-keyframes backSlideOut {
    25% {
        opacity: .5;
        -moz-transform: translateZ(-500px);
    }

    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%);
    }

    100% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%);
    }
}

@keyframes backSlideOut {
    25% {
        opacity: .5;
        transform: translateZ(-500px);
    }

    75% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%);
    }

    100% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%);
    }
}

@-webkit-keyframes backSlideIn {

    0%, 25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(200%);
    }

    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0) translateX(0);
    }
}

@-moz-keyframes backSlideIn {

    0%, 25% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(200%);
    }

    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateZ(0) translateX(0);
    }
}

@keyframes backSlideIn {

    0%, 25% {
        opacity: .5;
        transform: translateZ(-500px) translateX(200%);
    }

    75% {
        opacity: .5;
        transform: translateZ(-500px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0) translateX(0);
    }
}

@-webkit-keyframes scaleToFade {
    to {
        opacity: 0;
        -webkit-transform: scale(.8);
    }
}

@-moz-keyframes scaleToFade {
    to {
        opacity: 0;
        -moz-transform: scale(.8);
    }
}

@keyframes scaleToFade {
    to {
        opacity: 0;
        transform: scale(.8);
    }
}

@-webkit-keyframes goDown {
    from {
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes goDown {
    from {
        -moz-transform: translateY(-100%);
    }
}

@keyframes goDown {
    from {
        transform: translateY(-100%);
    }
}

@-webkit-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

@-moz-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -moz-transform: scale(1.5);
    }
}

@keyframes scaleUpFrom {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
}

@-webkit-keyframes scaleUpTo {
    to {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

@-moz-keyframes scaleUpTo {
    to {
        opacity: 0;
        -moz-transform: scale(1.5);
    }
}

@keyframes scaleUpTo {
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

.owl-theme .owl-controls .owl-buttons div {
    display: inline-block;
    margin: 5px;
    padding: 3px 10px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    color: #FFF;
    font-size: 12px;
    opacity: 0.5;
    filter: Alpha(Opacity=50);
    zoom: 1;
    display: inline;
}

.owl-theme .owl-controls.clickable .owl-buttons div:hover {
    text-decoration: none;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.owl-theme .owl-controls .owl-page {
    display: inline-block;
    zoom: 1;
    display: inline;
}

    .owl-theme .owl-controls .owl-page span {
        display: block;
        margin: 5px 7px;
        width: 12px;
        height: 12px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background: #869791;
        opacity: 0.5;
        filter: Alpha(Opacity=50);
    }

/* 11062025 */
.deposit-icon {
    width: 60px;
}




















.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.owl-theme .owl-controls .owl-page span.owl-numbers {
    padding: 2px 10px;
    width: auto;
    height: auto;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    color: #FFF;
    font-size: 12px;
}

.owl-item.loading {
    min-height: 150px;
    background: url(../images/AjaxLoader.gif) no-repeat center center
}

.carousel-container {
    width: 100%;
}

.item {
}

    .item img {
        width: 100%;
    }

    .item h4 {
        margin-top: 10px;
        color: #333;
        padding: 10px;
        font-family: 'Montserrat', sans-serif;
    }

    .item p {
        color: #333;
    }



.customNavigation {
    margin-top: 5px;
    margin-right: 11px;
    text-align: right;
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
}

    .customNavigation .btn {
        position: relative;
        display: inline-block;
        overflow: visible;
        margin: -1.9px;
        padding: 0.8em 1.1em;
        border: 0;
        box-shadow: none;
        color: #fff;
        text-transform: uppercase;
        text-shadow: none;
        font-size: 20px;
        cursor: crosshair;
        -webkit-transition: all .1s ease-in 0s;
        -moz-transition: all .1s ease-in 0s;
        -o-transition: all .1s ease-in 0s;
        transition-property: all .1s ease-in 0s;
        -webkit-font-smoothing: antialiased;
        background: #333;
    }

        .customNavigation .btn:hover {
            background: #222;
        }

.hoverfx {
}

    .hoverfx img {
        position: absolute;
        left: 0;
        width: 100%;
    }

    .hoverfx:before {
        display: inline-block;
        padding-top: 60%;
        vertical-align: middle;
    }

    .hoverfx .figure {
        position: relative;
        z-index: 2;
        display: inline-block;
        padding: 10px 15px;
        max-width: 60%;
        border: 3px solid #e9e9e9;
        color: #ecf0f1;
        vertical-align: middle;
        text-transform: uppercase;
        font-size: 1.2rem;
        opacity: 0;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition-property: all .3s ease;
    }

        .hoverfx .figure:hover {
            background: #e9e9e9;
            color: #333;
        }

    .hoverfx .overlay {
        position: absolute;
        top: 0;
        z-index: 1;
        padding: 50%;
        background: rgba(0, 0, 0, .7);
        opacity: 0;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition-property: all .3s ease;
    }

.item:hover .figure,
.item:hover .overlay {
    opacity: 1;
}

.jck-ttl ul {
    float: left;
    width: 100%;
    display: table;
    color: #e09d2e;
    font: 700 14px/16px Roboto, Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

    .jck-ttl ul li {
        display: table-cell;
        vertical-align: top;
        padding: 0 24px;
        width: 1%;
        box-sizing: border-box;
        position: relative;
    }

        .jck-ttl ul li:first-child,
        .jck-ttl ul li:last-child {
            width: 48px;
        }

        .jck-ttl ul li.line-ttl:before {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            position: absolute;
            left: 0;
            top: 7px;
            background: #02d46d;
            z-index: 5;
            transform: translate3d(0, 0, 0);
        }

.jck-ttl {
    width: 100%;
    padding: 15px 0px;
}

li.bg-ttl {
    background: #1c1c1c;
    color: #02d46d;
}

.bg-l a {
    font-size: 12px !important;
    color: #cd9731;
    background: none !important;
    padding: 10px;
}

.jackpot-wrap {
    background: #1c1c1c;
    position: relative;
}

.bg-l {
    position: absolute;
    right: 0px;
    top: 12px;
    background: #000000;
    z-index: 10;
}

.jck-in p {
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    margin: 0px;
}

.jacktop-nm h1 {
    font-size: 98px;
    letter-spacing: 25px;
}

.jacktop-nm {
    display: flex;
    justify-content: center;
}

    .jacktop-nm span {
        font-size: 20px;
        font-weight: bold;
        position: relative;
        top: 24px;
    }

.bg-l a:hover,
.bg-l a:focus {
    color: #a5752670;
}

/**********Lobby *************/
.inx-lby-in ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.inx-lby-in2 ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 20px;
}

.inx-lby-in3 ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
}

button.btn-go {
    bottom: 0%;
    border: none;
    padding: 10px 50px;
    font-size: 29px;
    color: #ffffff;
    right: 0;
    left: 0;
    margin: 0px auto;
    text-align: center;
    border-radius: 0px;
    background: #02d46d;
    font-weight: bold;
}

    button.btn-go:hover {
        background: #02d46d;
        color: #fff;
    }

.blk-center {
    display: flex;
    justify-content: center;
    margin: 0px auto;
    position: absolute;
    bottom: 40%;
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
}

/**********Promo *************/
#filter-box {
    width: 1272px;
    margin: 0px auto;
    padding-top: 30px;
}

.promo-bg {
    /* background: #002255; */
    padding-bottom: 50px;
}

.mix {
    display: none;
}

.filter-menu-bar {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    background: #000;
    /* border-bottom: 1px solid #00a2ff; */
    width: 1024px;
    margin: 0px auto;
    margin-bottom: 30px;
}

.pmbox {
    color: #ffffff;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 0px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    align-items: center;
}

    .pmbox:hover,
    .pmbox.active {
        background: none;
        color: #02d46d;
    }

.promo-content {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 15px;
}

.pm-boxer {
    display: flex;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    max-width: 100%;
    height: auto;
    align-content: center;
    color: #fff;
    flex-direction: column;
    justify-content: center;
}

.pm-boxer_inner {
    height: 85px;
    padding: 10px 20px;
}

h4.ttl-promo {
    color: #21276d;
    font-size: 17px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

.promo-per {
    color: #e40080;
    display: flex;
    margin-top: 20px;
}

.pm-boxer_inner_sec {
    display: flex;
    align-items: flex-end;
}

.moreinfo_btn {
    background: #ffc000;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    width: 100px;
    height: 30px;
    font-size: 13px;
}

.apply_btn {
    background: linear-gradient(to bottom, #b60000 0%, #5a0500 100%, #f1e767 100%);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    width: 100px;
    height: 30px;
    font-size: 13px;
}

.text_red {
    color: #e40080;
    margin-left: 10px;
    font-weight: bold;
}

.text_blue {
    color: #9a7922;
}

.modal-dialog.promo {
    max-width: 800px !important;
}

.modal-content.promo {
    border: 1px solid #dd2e87;
    border-radius: 0px;
}

button.close-promo {
    background: none;
    border: none;
    font-size: 19px;
    padding: 13px;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    right: 5px;
    top: 10px;
    color: #ffffffa3;
}

.grlist {
    color: #ffffff;
}

.pm-title-wrapper {
    font-size: 20px;
    color: #ffffff;
    padding: 15px 20px;
    background: #02d46d;
    border-bottom: 1px solid #02d46d;
    font-weight: bold;
}

.pmtable-wrapper {
}

table.promo-table tr th {
    color: #fff;
    background: #000000;
    padding: 10px 0px;
    border: 1px solid #2e2e2e;
    text-align: center;
}

table.promo-table tr td {
    border: 1px solid #2e2e2e;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    background: #535353;
}

.gr-title {
    margin-top: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
}

.grlist ul {
    padding-left: 20px;
    margin-top: 5px;
}

    .grlist ul li {
        padding-bottom: 8px;
        font-size: 14px;
        list-style: disc;
    }

.promo-pop-cont {
    padding: 15px;
    background: #2e2e2e;
    color: #fff;
}

.pm-boxer img {
    width: 100%;
}

/**********AFTER LOGIN page *************/
.account-sec .container {
    width: 1366px;
    max-width: 1670px;
    display: block;
    margin: 0px auto;
    padding: 0px;
}

.account-sec {
    padding: 28px 0px;
    color: #fff;
}

.wallet-cotent {
    display: grid;
    grid-template-columns: 27% auto;
    grid-gap: 5px;
}

.wallet-left {
    color: #fff;
    height: auto;
    padding: 10px;
    background: #1a1a1a;
}

.wallet-head {
    border-bottom: 2px solid #02d46d;
    text-align: center;
    padding: 10px 0 15px;
    margin-bottom: 10px;
}

.wb-title {
    font-size: 20px;
    color: #02d46d;
}

.wallet-balance {
    font-size: 20px;
}

.table-wallet-wrap {
    margin-bottom: 15px;
}

table.wallet-table tr td {
    vertical-align: top;
    padding: 6px 1px;
    text-align: right;
}

    table.wallet-table tr td:first-child {
        text-align: left;
    }

span.plus-icon {
    margin-left: 5px;
}

.subgame {
    padding: 10px 0 0 15px;
}

button.out-btn {
    background: none;
    border-radius: 2px;
    border: 1.5px solid #fce151;
    padding: 0;
    line-height: 1;
    color: #fce151;
    font-size: 9px;
    text-transform: uppercase;
    height: 20px;
    width: 30px;
}

button.in-btn {
    background: none;
    border-radius: 2px;
    border: 1.5px solid #299D82;
    padding: 0;
    line-height: 1;
    color: #299D82;
    font-size: 9px;
    text-transform: uppercase;
    height: 20px;
    width: 30px;
}

.total-wrap {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 2px solid #02d46d;
}

button.transfer-all {
    background: #02d46d;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    width: 100%;
    border: none;
    border-radius: 3px;
    padding: 7px 2px;
    text-transform: uppercase;
}

    button.transfer-all:hover {
        filter: brightness(1.1);
    }

.wallet-right {
    min-height: 500px;
    height: auto;
    background: #1a1a1a;
    color: #fff;
}

.player-vip-status {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    align-items: center;
    background: linear-gradient(to bottom, rgba(102, 102, 102, 1) 0%, rgba(35, 35, 35, 1) 75%, rgba(65, 65, 65, 1) 100%);
    border-left: 3px solid #02d46d;
    border-right: 3px solid #02d46d;
    height: 85px;
}

.pvbox {
    position: relative;
    font-size: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pvbox::after {
        content: '';
        height: 48px;
        border-right: 1px dotted #fff;
        position: absolute;
        right: 0;
        top: 19px;
    }

    .pvbox:last-child::after {
        content: none;
    }

.vipflex {
    display: flex;
    align-items: center;
}

.pvtext2 {
    color: #02d46d;
    text-transform: uppercase;
    font-weight: 600;
}

.withdrawal-tip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px 10px;
    width: 230px;
    font-size: 90%;
    display: none;
    left: 90px;
    z-index: 1;
}

.vip-value {
    color: #cf2c89;
}

.tips {
    cursor: pointer;
    vertical-align: middle;
    font-size: 18px;
    color: #fff;
}

    .tips:hover ~ .withdrawal-tip {
        display: block;
    }

.account-title {
    padding: 20px;
    font-size: 30px;
}

    .account-title span {
        border-bottom: 1px dotted #02d46d;
    }

.depo-wrap {
    padding: 0 15px;
}

.deposit-option {
    display: flex;
    margin-bottom: 15px;
}

.dobox {
    text-align: center;
    max-width: 120px;
    margin-right: 20px;
}

span.depname {
    display: block;
}

.dobox a {
    border: 2px solid transparent;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    filter: grayscale(1);
}

    .dobox a.active {
        border: 2px solid #02d46d;
        filter: none;
    }

        .dobox a.active::after {
            content: '';
            background: url("../images/common/tick-corner.png")no-repeat center;
            background-size: 100%;
            width: 20px;
            height: 20px;
            z-index: 1;
            position: absolute;
            bottom: 0px;
            right: 0;
        }

.bank-choice {
    display: flex;
    margin-bottom: 15px;
}

.bankbox {
    cursor: pointer;
    margin-right: 40px;
    display: flex;
    align-items: center;
}

    .bankbox .bankc {
        position: relative;
        border: 2px solid transparent;
        overflow: hidden;
        border-radius: 5px;
        display: inline-block;
        margin-right: 5px;
        filter: grayscale(1);
    }

        .bankbox .bankc img {
            height: 38px;
        }

    .bankbox.active .bankc,
    .bankbox:hover .bankc {
        border: 2px solid #02d46d;
        filter: none;
    }

        .bankbox.active .bankc::after,
        .bankbox:hover .bankc::after {
            content: '';
            background: url("../images/common/tick-corner.png")no-repeat center;
            background-size: 100%;
            width: 20px;
            height: 20px;
            z-index: 1;
            position: absolute;
            bottom: 0px;
            right: 0;
        }

.bank-depo-detail {
    border: 2px solid #02d46d;
    border-radius: 10px;
    padding: 10px;
    width: 650px;
}

table.bank-depo-table tr td {
    padding: 3px 8px;
}

    table.bank-depo-table tr td:first-child {
        border-right: 1px solid #B4B4B4;
    }

span.highlight-depo {
    background-color: #02d46d;
    padding: 4px 4px;
    margin-left: -4px;
}

a.copy-icon {
    color: #00a2ff;
    font-size: 18px;
    margin-left: 5px;
}

.tutorial-wrap {
    border: 2px solid #02d46d;
    border-radius: 10px;
    padding: 6px;
    margin-top: 20px;
    width: max-content;
    margin-bottom: 10px;
}

table.tutorial-table tr td:first-child {
    border-right: 1px solid #B4B4B4;
}

table.tutorial-table tr td {
    padding: 3px 8px;
}

    table.tutorial-table tr td:last-child {
        padding-left: 25px;
    }

a.watchnow {
    background: #02d46d;
    color: #fff;
    display: inline-block;
    padding: 9px 15px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
    margin: 2px 0;
}

table.depo-table tr td {
    padding: 3px 8px;
    vertical-align: top;
}

    table.depo-table tr td:first-child {
        border-right: 1px solid #B4B4B4;
    }

    table.depo-table tr td:last-child {
        padding-left: 25px;
    }

table.history-table tr:nth-child(odd) {
    background: #000000;
}

input.depo-input,
select.depo-input {
    background: #434343;
    border: none;
    border-radius: 4px;
    margin-bottom: 5px;
    padding: 5px 10px;
    min-width: 300px;
    color: #fff;
    height: 30px;
    max-width: 300px;
}

.choose-amount {
    display: flex;
    margin: 6px 0;
    max-width: 300px;
}

.amt-num {
    background: #232323;
    color: #afafaf;
    border-radius: 4px;
    border: 1px solid transparent;
    width: 62px;
    height: 38px;
    display: flex;
    justify-content: center;
    padding: 11px 2px;
    margin-right: 7px;
    cursor: pointer;
}

    .amt-num:last-child {
        margin: 0;
    }

    .amt-num.active,
    .amt-num:hover {
        border: 1px solid #fce151;
    }

.date-receipt {
    display: flex;
    max-width: 450px;
}

    .date-receipt input,
    .date-receipt select {
        background: #232323;
        border: none;
        border-radius: 4px;
        margin-bottom: 5px;
        padding: 5px 10px;
        color: #fff;
        height: 30px;
        margin-right: 10px;
    }

.radio-custom {
    opacity: 0;
    position: absolute;
}

.radio-custom,
.radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-custom-label {
    position: relative;
}

.radio-custom + .radio-custom-label:before {
    content: '';
    background: #000;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    color: #fff;
    font-size: 11px;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

button.submit-depo-btn {
    background: #02d46d;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: none;
    height: 30px;
    padding: 0 20px;
    border-radius: 2px;
}

    button.submit-depo-btn:hover {
        filter: brightness(1.1);
    }

.wd-bank {
    display: flex;
}


.htr-type {
    display: flex;
    margin-bottom: 10px;
}

.htrbox {
    cursor: pointer;
    border-radius: 4px;
    border: 1.5px solid #afafaf;
    line-height: 1;
    color: #afafaf;
    font-size: 13px;
    padding: 5px 10px;
    margin-right: 9px;
}

    .htrbox.active,
    .htrbox:hover {
        color: #fff;
        border: 1.5px solid #02d46d;
    }

.history-date {
    display: flex;
    align-items: center;
}

    .history-date input.depo-input {
        min-width: auto;
    }

.nav-tabs.nav-account {
    margin: 15px 10px;
    border: none;
}

.account-wrapper .nav {
    position: relative;
    background: none;
    z-index: auto;
}

.nav-tabs.nav-account .nav-link {
    border-radius: 8px;
    font-size: 23px;
    padding: 5px 15px;
    color: #fff;
    border: 1px solid #00a2ff;
    background: #172c4d;
}

    .nav-tabs.nav-account .nav-item.show .nav-link,
    .nav-tabs.nav-account .nav-link.active {
        color: #fff;
        background-color: #02d46d;
        border: 1px solid #02d46d;
    }

.nav-tabs.nav-account .nav-item {
    margin-bottom: -1px;
    margin-right: 16px;
}

.acc-wrap {
    padding: 0 10px;
}

.membervip {
    display: flex;
    align-items: center;
}

span.vip-acc {
    margin: 0 10px;
}

    span.vip-acc img {
        height: 38px;
    }

a.current-status {
    display: inline-block;
    background: #02d46d;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 7px 10px;
    border-radius: 3px;
    line-height: 1;
}

table.depo-table.acct tr td {
    height: 38px;
}

.dob-field {
    display: flex;
    align-items: center;
}

.dobbox {
    display: flex;
    margin-right: 4px;
    align-items: center;
}

select.dob_day {
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    padding: 7px 4px;
    margin: 0 4px;
    border-radius: 5px;
}

.yellow {
    color: #fce151;
}

.green {
    color: #299D82;
}

a.password-btn {
    color: #fff;
    padding: 0 10px;
    display: inline-block;
    margin-bottom: 15px;
}

table.depo-table.mypromo {
    margin-bottom: 15px;
}

    table.depo-table.mypromo tr td {
        vertical-align: middle;
    }

        table.depo-table.mypromo tr td a i {
            font-size: 18px;
            vertical-align: bottom;
        }

.promo-info {
    padding: 5px 10px;
    line-height: 1.4;
}

a.claim-btn {
    background: #02d46d;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: none;
    height: 30px;
    padding: 7px 20px;
    border-radius: 2px;
    margin: 5px 0px;
}

.history-table-wrap {
    margin: 15px 0;
    overflow: auto;
}

table.history-table {
    text-align: center;
    font-size: 13px;
}

    table.history-table tr th {
        background: #02d46d;
        padding: 7px 2px;
        font-weight: 400;
        border-right: 1px solid #2b1e38;
    }

        table.history-table tr th:last-child {
            border: none;
        }

    table.history-table tr td {
        padding: 7px 2px;
        background: #cdcdcd1a;
    }

/** Inbox **/
.nav-tabs.nav-mail {
    border-bottom: none;
    margin-bottom: 10px;
}

    .nav-tabs.nav-mail .nav-item {
        margin-right: 8px;
    }

    .nav-tabs.nav-mail .nav-link {
        border: 1px solid #c90303;
        border-radius: 0;
        color: #fff;
        padding: 8px 24px;
    }

        .nav-tabs.nav-mail .nav-item.show .nav-link,
        .nav-tabs.nav-mail .nav-link.active {
            color: #fff;
            background-color: #c90303;
            border-color: #c90303;
        }

table.mail-table tr th {
    background: #02d46d;
    color: #fff;
    padding: 10px 7px;
    text-align: center;
    border-left: 2px solid #000;
}

    table.mail-table tr th:first-child {
        text-align: left;
        border: none;
    }

table.mail-table tr td {
    background: #000;
    color: #fff;
    padding: 10px 7px;
    cursor: pointer;
}

    table.mail-table tr td:last-child {
        text-align: right;
    }

    table.mail-table tr td.delete-box a {
        color: #575757;
        padding: 0 10px;
    }

        table.mail-table tr td.delete-box a:hover {
            color: #fff;
        }

table.mail-table tr:hover td {
    background: #02d46d33;
}

.checkwrap {
    display: inline-block;
    position: relative;
    padding-left: 29px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkwrap input {
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #000;
}

.checkwrap:hover input ~ .checkmark {
    background-color: transparent;
}

.checkwrap input:checked ~ .checkmark {
    background: transparent;
    border: 1px solid #000;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkwrap input:checked ~ .checkmark:after {
    display: block;
}

.checkwrap .checkmark:after {
    left: 8px;
    top: 2px;
    width: 8px;
    height: 16px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

table.mail-table tr td .checkwrap input:checked ~ .checkmark {
    border: 1px solid #B4B4B4;
}

table.mail-table tr td .checkmark {
    border: 1px solid #B4B4B4;
}

.checkwrap input[type="checkbox"] {
    position: relative;
}

table.mail-table tr td .checkwrap .checkmark:after {
    left: 8px;
    top: 2px;
    width: 8px;
    height: 16px;
    border: solid #B4B4B4;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mail-btm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 15px;
}

.num-mail {
    font-size: 13px;
    color: #8c8c8c;
}

a.delete-btn {
    display: inline-block;
    background: #02d46d;
    color: #fff;
    padding: 7px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgb(0 0 0 / 80%);
}

a.mailpage-arrow {
    padding: 2px;
}

a.paginate_button {
    padding: 5px;
}

    a.paginate_button.current {
        background: #929292;
    }

.inbox {
    background: #262626;
    border: 1px solid #02d46d;
}

.close-inbox {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 23px;
    right: 6px;
    top: 5px;
    z-index: 2;
}

.inbox-title-top {
    background: #02d46d;
    padding: 10px;
    font-weight: bold;
}

.inbox-content {
    padding: 10px;
}

.content-about {
    width: 100%;
}

/** Transaction pending **/
.trans-sec {
    padding: 15px 0;
    color: #fff;
    min-height: 600px;
}

.websocial-box {
    display: flex;
    align-items: flex-end;
    width: 700px;
    margin: 0 auto;
    position: relative;
}

.quote-left {
    position: absolute;
    left: -80px;
    top: 0;
}

.quote-right {
    position: absolute;
    right: -80px;
    bottom: 0;
}

.offical {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 5px;
}

.social-box {
    width: 50%
}

.website-box {
    width: 50%;
}

ul.pending-websites li {
    padding-bottom: 7px;
}

    ul.pending-websites li span {
        display: inline-block;
    }

        ul.pending-websites li span.weblink {
            width: 180px;
        }

        ul.pending-websites li span i {
            color: #258B73;
            vertical-align: middle;
            font-size: 16px;
        }

.pending-title {
    position: relative;
    font-weight: 600;
    font-size: 20px;
    padding: 30px 0;
    margin-top: 10px;
}

    .pending-title::before {
        content: '';
        width: 72px;
        height: 4px;
        background: #fce151;
        position: absolute;
        top: 0;
        left: 0;
    }

.refer-wrap {
    padding: 20px;
}

.refer-qr img {
    width: 200px;
}

/********Info *********/
.info-menu-wrapper {
    background: #202328;
    overflow: hidden;
    line-height: 1.2;
    padding: 30px;
    color: #727272;
    min-height: 400px;
}

    .info-menu-wrapper a {
        color: #fff;
        text-shadow: 1px 1px 1px #000;
        display: block;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 600;
        padding: 12px 15px;
        border-left: 4px solid #dd2e8700;
    }

        .info-menu-wrapper a:last-child {
            border-bottom: none;
        }

        .info-menu-wrapper a.active,
        .info-menu-wrapper a:hover {
            background: #000000;
            color: #02d46d;
        }

.info-wrapper {
    background: #202328;
    border-radius: 7px;
    padding: 25px 30px;
    margin-bottom: 30px;
    min-height: 500px;
    line-height: 25px;
    color: #636f7b;
}

    .info-wrapper strong {
        color: #02d46d;
        margin-top: 20px;
        display: block;
    }

.info-menu-wrapper p {
    margin-bottom: 20px;
}

.info-menu-wrapper strong {
    color: #02d46d;
}

.contact-wrap {
    min-height: 400px;
}

.info-menu-wrapper h3 {
    color: #02d46d;
    border-bottom: 1px solid #02d46d;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

ol.faq {
    padding: 0 0 0 15px;
}

.info-wrapper h3 {
    border-bottom: 1px solid #02d46d;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #02d46d;
}

.about-sec-in {
    display: flex;
    padding-top: 20px;
    gap: 20px;
}

ol.faq li {
    padding-bottom: 13px;
}

button.btn-tnc {
    background: #000000;
    width: 100%;
    text-align: left;
    font-size: 16px;
    padding: 8px 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
    position: relative;
}

    button.btn-tnc.collapsed {
        background: #000000;
        color: #fff;
    }

    button.btn-tnc:focus {
        outline: none;
    }

.tnc-card {
    margin-bottom: 5px;
}

.tnc-body {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 20px 10px;
    border-radius: 4px;
    margin-top: 2px;
    line-height: 1.3;
}

    .tnc-body ol {
        padding-left: 15px;
    }

        .tnc-body ol li {
            padding-bottom: 8px;
        }

.bank-table tr.trans td {
    background: rgb(68 68 68 / 50%);
    color: #fff;
    border: 1px solid #02d46d;
    padding: 2px;
}

.bank-table tr.trans1 td {
    background: rgb(68 68 68 / 50%);
    color: #fff;
    border: 1px solid #02d46d;
    padding: 2px;
}

.bank-table tr.dwbox td {
    background: #000000;
    color: #fff;
    font-weight: 600;
    padding: 2px;
    border: 1px solid #02d46d;
}

button.btn-tnc::after {
    content: '>';
    font-size: 16px;
    line-height: 1;
    position: absolute;
    right: 17px;
    top: 10px;
    transform: rotate(270deg);
    transition: all 0.3s;
}

button.btn-tnc.collapsed::after {
    content: '>';
    transform: rotate(90deg);
    transition: all 0.3s;
}

.if-content .container {
    width: 1366px;
    max-width: 1366px;
    display: block;
    margin: 0px auto;
    padding: 0px;
}

.bank-table {
    margin-top: 10px;
}

#button.show {
    opacity: 1;
    visibility: visible;
}

.contact-wrap a {
    color: #02d46d;
}

p.clr-pnk {
    color: #02d46d;
}

/*******joinnow*********/
.joinnow .modal-dialog {
    width: 1000px;
    max-width: 1000px;
}

.joinnow .modal-dialog {
    max-width: 780px;
    background: none;
}

.joinnow .modal-content {
    background: none;
    border: none;
}

.join-cnt {
    display: flex;
    padding-bottom: 20px;
}

.joinnow .close-x {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    color: #ffffffa6;
    font-size: 20px;
}

.join-r-top {
    display: flex;
    justify-content: space-between;
}

.join-r {
    background: #2e2e2e;
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450px;
    /* border-radius: 10px; */
}

.join-l {
    width: 400px;
    background: #2e2e2e;
    padding: 10px;
}

.join-ttl {
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
}

.join-r-cnt {
    padding: 0px 15px;
}

.flag-ttl {
    display: flex;
    padding-right: 15px;
}

    .flag-ttl img {
        max-width: 20px;
    }

    .flag-ttl i {
        font-size: 13px;
        color: #fff;
    }

.reg-sec {
    padding: 30px 0;
}

.fg-wrapper {
    padding: 30px;
    max-width: 959px;
    margin: auto;
    display: grid;
    grid-template-columns: 34% auto;
    grid-gap: 30px;
    background: #222548;
    border: 1px solid #21276d;
}

.fg-form {
    max-width: 400px;
}

.enter-remind {
    border: 1px solid #DDDDDD;
    padding: 20px;
    font-size: 17px;
    height: 120px;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.bk-title {
    color: #fff;
    padding: 8px 15px;
    font-size: 16px;
    margin-bottom: 15px;
    background: linear-gradient(to bottom, rgba(169, 211, 32, 1) 0%, rgba(56, 131, 18, 1) 100%);
    box-shadow: inset 0px 0px 5px #fff;
}

.regfield {
    display: grid;
    grid-template-columns: 145px auto;
    grid-gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}

.rgfeild {
    position: relative;
}

.regfield .label {
    align-self: center;
    color: #fff;
}

span.manred {
    color: red;
    float: right;
}

.regfield input {
    font-size: 13px;
    padding: 3px 10px;
    border: 1px solid #d6d6d6;
    height: 34px;
}

.vericode {
    position: absolute;
    top: 5px;
    right: 7px;
}

button.reg-btn {
    background: #c22323;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 20px;
    width: 110px;
    height: 30px;
    font-size: 13px;
    box-shadow: inset 0px 0px 5px #fff;
}

    button.reg-btn:hover {
        filter: brightness(0.5);
    }

.logo-reg img {
    width: 60%;
    margin: 0px auto;
    margin-top: 30px;
    display: block;
}

.join-r h5 {
    text-align: center;
    color: rgba(255, 255, 255, .32);
    margin-top: 10px;
}

.join-r p {
    text-align: center;
    color: rgb(255 255 255 / 74%);
}

.login-box .form-control {
    background: none;
    border: 1px solid #ffffff30;
    border-radius: 0px;
    font-size: 12px;
    color: #fff;
}

    .login-box .form-control:focus {
        box-shadow: 0px 0px 2px #ff36c0;
    }

.login-box {
    margin-top: 30px;
}

.recaptcha-v3 {
    color: rgba(255, 255, 255, .32);
    font-size: 11px;
    text-align: center;
    margin-bottom: 20px;
}

.form-check a {
    color: #ffffff75;
}

.recaptcha-v3 a {
    color: #ffffff75;
}

.btn-create {
    width: 100%;
    border: none;
    background: #02d46d;
    color: #fff;
    padding: 8px;
}

.alrdy {
    text-align: center;
    padding-top: 18px;
    font-size: 12px;
    color: rgba(255, 255, 255, .32);
    margin-bottom: 30px;
}

    .alrdy a {
        color: #02d46d;
        text-decoration: underline;
    }

.login-md .close-x {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #ffffffa6;
    font-size: 20px;
    top: 10px;
}

.modal-dialog.login-md {
    width: 360px;
    background: none;
}

.modal.show .modal-content {
    background: none !important;
    border: none;
}

.form-check {
    padding: 0px;
    margin: 0 auto;
    width: 400px;
}

.recaptcha {
    display: flex;
    color: rgba(255, 255, 255, .32);
    margin-bottom: 15px;
}

    .recaptcha a {
        font-size: 11px;
        color: rgba(255, 255, 255, .32);
    }

.btn-crt {
    margin-right: 30px;
}

/********SLIDER***********/
.swiper-button-prev,
.swiper-button-next {
    color: #fff !important;
    position: relative !important;
    width: 102px !important;
    margin: 0px !important;
}

.swiper-button-prev {
    left: 0px;
    top: 0px !important;
    background: none;
}

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px;
        content: "\f061";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

.swiper-pagination {
    position: relative !important;
    left: 0px !important;
    bottom: 0px;
}

.swiper-button-next {
    right: 0px !important;
    top: 0px !important;
    background: none;
}

.swiper-button-prev:after {
    font-size: 20px;
    content: "\f060";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* 02102024 */
.download-qr img {
    max-width: 125px;
    margin-top: 20px;
}

.app-content {
    position: absolute;
    top: 30px;
    right: 135px;
    text-align: center;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {
        -webkit-appearance: menulist-button !important;
        line-height: 24px !important;
    }
}

.modal-backdrop.show {
    opacity: .8;
}

.container {
    width: 1670px;
    max-width: 1670px;
    display: block;
    margin: 0px auto;
    padding: 0px;
}

@media (min-width:1345px) {
    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 21%;
        right: 0;
    }
}

@media (min-width:1200px) and (max-width: 1450px) {
    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 0%;
        right: 0;
    }

    #filter-box {
        /* width:1024px; */
        max-width: 1320px;
        display: block;
        margin: 0px auto;
        padding: 0px;
        padding-top: 30px;
    }

    .container {
        width: 960px;
        max-width: 100%;
        display: block;
        margin: 0px auto;
        padding: 0px;
    }

    .download-qr img {
        max-width: 85px;
        margin-top: 12px;
    }


    .app-content {
        position: absolute;
        top: 18px;
        right: 70px;
        text-align: center;
    }

        .app-content span {
            color: #fff;
            font-size: 37px !important;
            !i;
            !;
            font-weight: 700;
        }
}

@media (min-width:1440px) and (max-width: 1600px) {
    .container {
        width: 1200px;
        max-width: 100%;
        display: block;
        margin: 0px auto;
        padding: 0px;
    }

    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 0%;
        right: 0;
    }

    .download-qr img {
        max-width: 108px;
        margin-top: 15px;
    }

    .app-content {
        position: absolute;
        top: 18px;
        right: 135px;
        text-align: center;
    }
}

@media (min-width:1660px) {
    .container {
        width: 1400px;
        max-width: 1400px;
        display: block;
        margin: 0px auto;
        padding: 0px;
    }

    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 19%;
        right: 0;
    }

    .app-content {
        position: absolute;
        top: 18px;
        right: 70px;
        text-align: center;
    }
}

@media (min-width:1920px) {
    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 13%;
        right: 0;
    }

    .container {
        width: 1400px;
        max-width: 1680px;
        display: block;
        margin: 0px auto;
        padding: 0px;
    }

    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        /* left:15%; */
        right: 0;
    }
}

@media (min-width:1921px) {
    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 15%;
        right: 0;
    }
}

@media (max-width:1200px) {
    .MenuTab {
        width: 800px;
        position: absolute;
        top: -44px;
        left: 0%;
        right: 0;
    }

    #filter-box {
        width: 1024px;
        max-width: 1320px;
        display: block;
        margin: 0px auto;
        padding: 0px;
        padding-top: 30px;
    }

    .container {
        width: 1180px;
        max-width: 1180px;
        display: block;
        margin: 0px auto;
        padding: 0px;
        width: 100%;
        min-height: 100%;
        min-width: 980px;
    }
}


/*********28022022**********/
.reg-content {
    background: url("../images/common/bg-register.jpg") center top no-repeat;
    height: 720px;
}

.reg-content-2 {
    background: url("../images/common/bg-thank.jpg") center top no-repeat;
    height: 720px;
}

.reg-form {
    width: 790px;
    display: flex;
    justify-content: flex-end;
    margin: 0px auto;
    padding-top: 3%;
}

.reg-form-2 {
    position: relative;
    height: 720px;
}

.reg-form-box {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px auto;
    text-align: center;
    top: 28%;
}

    .reg-form-box h1 {
        font-weight: bold;
        font-size: 76px;
        text-shadow: 0 0 11px #cf2c89, 0 0 11px #cf2c89, 0 0 11px #cf2c89;
    }

    .reg-form-box h4 {
        text-shadow: 0 0 11px #cf2c89, 0 0 11px #cf2c89, 0 0 11px #cf2c89;
        font-weight: bold;
        font-size: 42px;
    }

    .reg-form-box p {
        text-shadow: 0 0 11px #001eff, 0 0 11px #001eff, 0 0 11px #001eff;
        font-size: 24px;
        margin-top: 20px;
    }

.btn-plynow {
    margin: 0px auto;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    width: 215px;
    bottom: 15%;
    background: #dd2e87;
    color: #fff;
    padding: 10px;
    font-size: 20px;
    border: none;
    font-weight: bold;
}

    .btn-plynow:hover {
        background: #b11262;
    }




/*********01022022**********/
.step-wrap ul {
    display: flex;
    color: #fff;
    padding: 0px;
    justify-content: space-between;
    margin: 0px;
    position: relative;
    width: 250px;
    flex-direction: row;
    border: none;
}

    .step-wrap ul li {
        list-style: none;
        /* margin: 0px 41px; */
        z-index: 10;
    }

.btn-step-act {
    background: #d7b556 !important;
}

.step-wrap ul li a {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px !important;
    background: #1a1a1a;
    z-index: 10;
    border: 1px solid #02d46d !important;
    color: #fff !important;
}

.step-wrap {
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

    .step-wrap ul::after {
        content: '';
        background-color: #02d46d;
        position: absolute;
        top: 32%;
        left: 0;
        height: 4px;
        width: 100%;
        z-index: 1;
        margin: 0px auto;
        right: 0;
    }

.af-wrap {
    width: 530px;
    display: block;
    margin: 0px auto;
}

.af-deposit ul {
    display: flex;
    justify-content: center;
}

ul.afterlogin_deposit {
    display: grid;
    /* justify-content: center; */
    grid-template-columns: repeat(7,1fr);
    padding: 0px;
    gap: 10px;
    position: relative;
    z-index: 100;
    white-space: nowrap;
}

.step-wrap ul li a.active,
.step-wrap ul li a:hover {
    background: #02d46d !important;
}

.ab-top {
    display: block;
    /* margin:0px auto; */
}

.afterlogin_deposit a.active {
    background: #02d46d;
    color: #ffffff;
    border: 1px solid #02d46d;
}

ul.afterlogin_deposit li {
    list-style: none;
}

.btn-wrap {
    display: flex;
    /* justify-content:center; */
    gap: 10px;
}

.submit_btn2 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 500;
    min-width: 132px;
    border: none;
    min-height: 39px;
    border-radius: 34px;
    background: #d7b556;
    margin: 0px auto;
    display: block;
}

.btn-wrap button {
    /* margin:0px 10px; */
}


.afterlogin_deposit a {
    padding: 10px 25px;
    display: flex;
    text-align: center;
    color: #ffffff;
    border: 1px solid #02d46d;
    border-radius: 5px;
    min-height: 45px;
    justify-content: center;
    align-items: center;
    background: #000000;
}

.af-detail {
    max-width: 706px;
    margin: 0px auto;
    border: 1px solid #02d46d;
    padding: 10px;
    margin-bottom: 30px;
    border-radius: 5px;
    margin-top: 20px;
}

    .af-detail ol {
        padding-left: 20px;
    }

        .af-detail ol li {
            margin-bottom: 10px;
            list-style: auto;
        }

.af-content {
    display: flex;
    padding: 8px 20px;
    align-items: center;
    position: relative;
    color: #fff;
    /* margin: 0px -15px; */
}

.form-group .af-content {
    background: #ffffff5e;
}

.af-cpy {
    position: absolute;
    right: 0px;
}

.btn-cpy {
    border: none;
    background: #02d46d;
    padding: 8px 15px;
    color: #fff;
}

.submit-rest-btn {
    background: #000000;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: none;
    height: 30px;
    padding: 0 20px;
    border-radius: 2px;
}

.bank-type img {
    width: 150px;
}

/*Lotto result*/
.fourDBg {
    background: url(../images/4d/fourdbg.jpg) no-repeat;
    background-size: auto, 100%;
    background-position: top;
}

.dBannerMain {
    position: relative;
}

.dBtn {
    position: absolute;
    right: -3px;
    bottom: 14px;
}

.bannerBtnBlue {
    background: url(../images/4d/bannerBlue.png) no-repeat;
    height: 40px;
    width: 152px;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
    background-size: 100% 100%;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.bannerBtnYellow {
    background: url(../images/4d/bannerYellow.png) no-repeat;
    height: 40px;
    width: 152px;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
    background-size: 100% 100%;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.grid-fourD {
    display: flex;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-fourD-div1 {
}

.grid-fourD-div2 {
    grid-area: 1 / 2 / 2 / 5;
}

.grid-fourD-div3 {
}

.grid-fourD-div4 {
}

.grid-fourD-div5 {
}

.grid-fourD-div6 {
}

.grid-fourD-div7 {
}

.grid-fourD-div8 {
}

.fourD-item {
    float: left;
    width: 255px;
    background-color: #2f2f2f;
    padding: 0px 8px;
    margin-bottom: 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.fourD-item02 .fd-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.fourD-item02 .fd-top-left {
    float: left;
    width: 70px;
    padding-left: 10px;
    padding-top: 5px;
    height: 35px;
}

.fourD-titleBG {
    background-color: #1c1c1c;
    padding: 5px;
    height: 30px;
}

.fourD-item .fd-title-01 {
    padding-top: 2px;
    padding-left: 3px;
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

.fourD-item .fd-title-02 {
    float: left;
    padding-left: 3px;
    width: 95px;
    font-size: 11px;
    font-weight: bold;
    color: #000;
}

.fourD-item .fd-title-03 {
    float: left;
    font-size: 11px;
    color: #000;
}

.fd-title-01w {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
}

.fourD-item .fd-title-02w {
    float: left;
    padding-left: 3px;
    width: 120px;
    font-size: 13px;
    color: #fff;
}

.fourD-item .fd-title-03w {
    float: right;
    font-size: 13px;
    color: #fff;
    text-align: right;
}

.fourD-item02 .fd-top-right {
    float: right;
    display: inline-block;
    padding-top: 10px;
    padding-right: 10px;
}

.fourD-item .fd-row-01,
.fourD-item .fd-row-02 {
    margin-top: 7px;
}

.fourD-item .fd-row-bg {
}

.fd-bg {
    background: url("../images/common/4d/4d-img.png")center no-repeat;
    border-radius: 12px;
    position: relative;
    height: 344px;
    display: flex;
    width: 784px;
    justify-content: space-between;
}

.fd-co {
    width: 457px;
    position: relative;
}

.fd-date {
    padding: 42px 11px 11px 11px;
}

.fd-btn {
    bottom: 11px;
    left: 50px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: baseline;
    bottom: 0px;
}

.date-time {
    background-color: #3b3941;
    border-radius: 20px;
    padding: 7px;
    text-align: center;
    margin-bottom: 20px;
}

.lotto-app {
    margin-top: 625px;
}

.container-fd {
    width: 1570px;
    margin: 0px auto;
}

.fd-row-01 table tr td {
    color: #fff;
    padding: 1px;
    border: 2px solid #2f2f2f;
}

td.fourD-topTxtthree {
    color: #fff;
    padding: 2px;
}

.fourD-title {
    color: #fff;
    /* padding: 5px; */
}

.fourD-wrap .container {
    width: 1320px;
    max-width: 1320px;
}

.btn-clr {
    background: url("../images/common/4d/drawNumBg.png") no-repeat center;
    height: 52px;
    width: 59px;
    background-size: contain;
    display: flex;
    justify-content: center;
    font-size: 25px;
    color: #000;
    font-weight: bold;
    padding-top: 10px;
}

.drwn-nm {
    display: flex;
}

.btn-draw {
    padding: 0px 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border-radius: 20px;
    width: 100%;
    border: none;
    text-align: center;
    justify-content: center;
}

#betnow {
    display: flex;
    justify-content: space-between;
}

.btn-draw i {
    position: absolute;
    color: #000;
    top: 2px;
}

.wrap-lotto {
    background: linear-gradient(to bottom, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 26%, rgba(248, 181, 0, 1) 51%, rgba(189, 104, 6, 1) 100%);
    border-radius: 30px;
    height: 45px;
    padding: 0px 10px;
    width: 134px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 23px;
}

.fd-wrap {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin: 0px auto;
    width: 1120px;
}

.fd-wrap-in {
    display: flex;
    gap: 10px;
}

    .fd-wrap-in button {
        padding: 8px;
        height: 55px;
        width: 215px;
        font-size: 18px;
        font-weight: bold;
    }

.btn-lgo img {
    display: block;
    margin: auto;
}

.btn-payout:hover {
    background: #02d46d;
    border: 1px solid #02d46d;
}

.btn-bet:hover {
    background: none;
    border: 1px solid #02d46d;
}

.fd-wrap-in button:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

.btn-bet {
    color: #fff;
    background: #02d46d;
    border: 1px solid #02d46d;
}

.btn-payout {
    background: none;
    border: 1px solid #02d46d;
    color: #fff;
}

.btn-lotto-ply {
    background: linear-gradient(to bottom, rgba(244, 20, 20, 1) 0%, rgba(138, 7, 7, 1) 42%, rgba(138, 7, 7, 1) 78%, rgba(193, 5, 5, 1) 100%);
    color: #fff;
    border-right: 5px solid #de1111 !important;
}

.modal-payout .modal-header {
    border-bottom: 1px solid #d5b048;
    display: block;
    background: linear-gradient(to bottom, rgba(249, 228, 123, 1) 0%, rgba(215, 152, 50, 1) 68%, rgba(236, 206, 123, 1) 100%);
}

.modal-payout .modal-title {
    margin: 0;
    line-height: 1.42857143;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
}

.modal-payout .modal-header .close {
    padding: 10px;
    color: #000000;
    font-weight: 400;
    text-shadow: none;
}

.modal-payout .modal-content {
    background-color: #000000;
    border: 1px solid #d5b048;
}

.modal-payout .modal-table2 table tr td {
    border: 1px solid #555555;
    padding: 5px 15px;
    vertical-align: top;
    text-align: center;
}

.modal-payout .trTitle {
    /* background: #292929; */

    color: #FFF;
}

.modal-payout .fd-btn {
    bottom: 11px;
    left: 33px;
    position: absolute;
    display: flex;
}

.modal-payout .drwn-nm {
    display: inline-flex;
    height: 70px;
    margin-left: 20px;
}

.close-X {
    color: #705723;
    margin: 14px;
    opacity: 1;
    text-shadow: none;
}

.modal-payout .modal-body {
    padding: 0px;
}

    .modal-payout .modal-body h3 {
        background: #02d46d;
        padding: 10px 20px;
        color: #fff;
        font-weight: bold;
        text-align: center;
    }

.payout-container {
    padding: 15px;
    background: #161616;
}

table.payoutTable {
    text-align: center;
    border: 1px solid #02d46d;
}

    table.payoutTable th,
    table.payoutTable td {
        padding: 4px;
    }

    table.payoutTable th {
        text-align: inherit;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        border: 1px solid #f5b152;
        background: #c87f1a;
    }

    table.payoutTable td {
        border: 1px solid #02d46d;
        font-size: 14px;
        color: #fff;
    }

        table.payoutTable td img {
            margin-left: 10px;
        }

.prize-text {
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.modal-payout {
    max-width: 580px;
}

.forecast-table {
    margin-bottom: 10px;
}

.lotto-guide strong {
    font-size: 18px;
}

.lotto-guide {
    font-size: 16px;
}

    .lotto-guide img {
        margin-top: 15px;
    }

/*Download*/
.downloadTab .nav {
    position: relative;
    background: none;
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 10px;
}

.downloadTab {
    margin: 20px 0;
    display: flex;
    width: 100%;
    gap: 20px;
}

    .downloadTab .nav-pills .nav-link {
        background: #161616;
        margin-bottom: 5px;
        height: 50px;
        color: #ffffff;
        align-items: center;
        display: flex;
        border: 1px solid #02d46d;
        /* border-radius:30px; */
        justify-content: center;
    }

        .downloadTab .nav-pills .nav-link.active,
        .downloadTab .nav-pills .nav-link:hover {
            background: #02d46d;
            color: #fff;
            border: 1px solid #02d46d;
        }

.downloadbody {
    text-align: center;
}

.downloadbox {
    text-align: center;
    width: 23%;
    margin: 0 5px;
    display: inline-block;
    height: 173px;
}

.ndl-btn {
    background: #02d46d;
    color: #ffffff;
    font-size: 13px;
    padding: 5px 10px;
    font-weight: 700;
    border-radius: 30px;
    display: block;
    margin: auto;
    margin-top: 4px;
    width: 78%;
}

    .ndl-btn:hover,
    .ndl-btn:focus {
        color: #ffffff;
        background: #0f0a16;
    }

.adl-btn {
    background: #02d46d;
    color: #ffffff;
    font-size: 13px;
    padding: 5px 10px;
    font-weight: 700;
    border-radius: 30px;
    display: block;
    margin: auto;
    margin-top: 4px;
    width: 78%;
}

    .adl-btn:hover,
    .adl-btn:focus {
        color: #ffffff;
        background: #0f0a16;
    }

.dl {
    max-width: 500px;
    margin: auto;
    margin-top: 20px;
}

    .dl table {
        border-collapse: collapse;
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
        overflow: hidden;
    }

        .dl table th {
            border: 1px solid #02d46d;
            text-align: center;
            padding: 16px;
            background: #02d46d;
            color: #fff;
            text-transform: uppercase;
            font-weight: 500;
        }

        .dl table td {
            text-align: left;
            padding: 8px;
            background-color: #1c2029;
            border: 1px solid #02d46d;
            color: #ffffff;
        }

    .dl .username_custom {
        color: #02d46d;
    }

.downloadboxContent {
    padding: 50px 10px;
    border: 1px solid #02d46d;
    background: #101010;
    border-radius: 5px;
    width: 70%;
}

.downloadbox img {
    height: 130px;
    margin-bottom: 7px;
}

.tab-mn {
    width: 20%;
}


.about-menu {
    max-width: 285px !important;
    display: block;
    width: 330px;
    flex: auto;
}

.list-prod .swiper_wrap {
    height: 100%;
    width: 100%;
    position: relative;
    display: block;
    text-align: left;
}

.list-prod .swiper-button-next {
    margin-top: 0px;
    position: absolute !important;
    top: 50% !important;
    right: -70px !important;
    width: 45px;
    height: 45px;
    transform: translateY(-50%);
    background: none !important;
}

.list-prod .swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    left: -75px;
    width: 45px;
    height: 45px;
    transform: translateY(-50%);
    margin-top: 0px;
    background: none !important;
}

.swiper_wrap.list-prod {
    position: relative;
    padding-top: 30px;
}

img {
    max-width: 100%;
}

/* 03082023 */

.hm-content {
    padding: 30px 0;
}

.reg-page {
    width: 1140px;
    display: block;
    background: #00000080;
    padding: 20px;
    border-radius: 13px;
    margin: 0 auto;
}

.reg-wrap {
    background: url("../images/common/register/register-bg.jpg") no-repeat top center;
    height: 800px;
}

.reg-wrp {
    display: flex;
}

.reg-step {
}

.reg-step2 {
    background: url("../images/common/rtep-2.png") no-repeat top center;
    width: 658px;
}

.reg-step3 {
    background: url("../images/common/rtep-3.png") no-repeat top center;
    width: 658px;
}

.reg-step4 {
    background: url("../images/common/rtep-4.png") no-repeat top center;
    width: 658px;
}

.reg-wrap .container {
    width: 1120px;
    max-width: 1120px;
}

.reg-step ul li {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reg-step ul {
    padding: 0px;
    display: grid;
    height: 44px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0px auto;
    width: 500px;
}

li {
}

.ttl-reg {
    padding-left: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.ttl-nm {
    color: #fff;
    font-weight: bold;
    padding-right: 8px;
    position: relative;
    top: 2px;
}

.reg-step ul li {
    padding-right: 14px;
    background: url("../images/common/gold-arrow.png") no-repeat;
    width: 184px;
}

    .reg-step ul li:hover,
    .reg-step ul li.active {
        padding-right: 14px;
        background: url("../images/common/gold-arrow-act.png") no-repeat
    }

    .reg-step ul li:first-child:hover,
    .reg-step ul li:first-child.active {
        padding-right: 14px;
        background: url("../images/common/gold-arrow-act.png") no-repeat
    }

    .reg-step ul li:nth-child(2):hover,
    .reg-step ul li.active {
        padding-right: 14px;
        background: url("../images/common/gold-arrow-middle-act.png") no-repeat
    }

    .reg-step ul li:nth-child(3):hover,
    .reg-step ul li.active {
        padding-right: 14px;
        background: url("../images/common/gold-arrow-middle-act.png") no-repeat
    }

    .reg-step ul li:last-child:hover,
    .reg-step ul li.active {
        padding-right: 14px;
        background: url("../images/common/gold-end-act.png") no-repeat
    }

    .reg-step ul li:nth-child(2) {
        padding-right: 14px;
        background: url("../images/common/gold-arrow-middle.png") no-repeat;
        position: relative;
        margin-left: -20px;
        padding-left: 25px;
    }

    .reg-step ul li:nth-child(3) {
        padding-right: 14px;
        background: url("../images/common/gold-arrow-middle.png") no-repeat;
        position: relative;
        margin-left: -23px;
        padding-left: 25px;
    }

    .reg-step ul li:last-child {
        padding-right: 13px;
        background: url("../images/common/gold-end.png") no-repeat;
        position: relative;
        margin-left: -22px;
        padding-left: 30px;
    }

    .reg-step ul li a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
    }

    .reg-step ul li.active:nth-child(3),
    .reg-step ul li:hover:nth-child(3) {
        filter: none;
        background: url("../images/common/gold-arrow-middle-act.png") no-repeat;
    }

    .reg-step ul li.active:nth-child(2),
    .reg-step ul li:hover:nth-child(2) {
        filter: none;
        background: url("../images/common/gold-arrow-middle-act.png") no-repeat;
    }

    .reg-step ul li.active:last-child,
    .reg-step ul li:hover:last-child {
        filter: none;
        background: url("../images/common/gold-end-act.png") no-repeat;
    }

.form-wrap {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
    background: none;
}

.inp-txt {
    width: 210px;
    padding-left: 15px;
}

.inp-box input {
    margin: 0px;
    width: 100%;
    height: 40px;
    background: #383838;
    border: none;
    color: #fff;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    padding-left: 10px;
}

.inp-box {
    width: 100%;
    display: flex;
    padding-left: 20px;
}

.inp-box-birth {
    width: 100%;
    display: flex;
    padding-left: 60px;
}

.reg-box img {
    margin-bottom: 10px;
    padding: 10px;
}

.reg-box2 {
    margin: 20px 0px;
    position: relative;
}

.btn-sub {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

    .btn-sub .jms-link {
        font-size: 16px;
    }

.wrap-reg {
    margin-top: 25px;
    position: relative;
}

select.form-nm {
    background: #210609;
    color: #fff;
    border: none;
    padding: 0px 0px;
    margin-right: 10px;
    width: 30%;
}

    select.form-nm:focus {
        border: none;
        outline: none;
    }

.reg-step ul li:hover .ttl-reg,
.reg-step ul li.active .ttl-reg {
    color: #000;
}

.reg-step ul li:hover .ttl-nm,
.reg-step ul li.active .ttl-nm {
    color: #000 !important;
}

.reg-box2 {
    width: 560px;
}

span.red {
    color: #ff001e;
    padding-left: 5px;
}

.reg-box {
    width: 47%;
}

.jms-link {
    background: #02d46d;
    border: none;
    font-size: 14px;
    padding: 10px 35px;
    border-radius: 5px;
    color: #fff;
    transition: 400ms;
    font-weight: bold;
}

.phone-verify {
    background: #383838;
}

.form-field {
    display: block;
    padding: 10px;
    border-radius: 5px;
    height: 53px;
    width: 450px;
}

.value.tel-num {
    display: flex;
}

.value {
    float: left;
    padding: 3px;
    width: 75%;
    position: relative;
}

select.telco {
    width: 100px;
    border: none;
    color: #fff;
    background: none;
    font-size: 16px;
}

.form-field .value input {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
}

input.tel-input {
    margin-left: 15px;
}

.afterlogin {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0px;
    gap: 10px;
}


.copy-icon {
    padding-left: 10px;
}

.af-wrap {
    margin: 0;
    padding: 0 15px;
}

.dobox.active .depname::after,
.dobox:hover .depname::after {
    content: '';
    background: url(../images/common/tick-corner.png)no-repeat center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    z-index: 1;
    position: absolute;
    bottom: 0px;
    right: 0;
}

.clr-box-message {
    background: #c38a2c;
    position: absolute;
    font-size: 9px;
    width: 11px;
    height: 11px;
    text-align: center;
    border-radius: 15px;
    top: 2px;
    left: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.benefit-right {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 auto;
}

.benefit-text {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 auto;
    width: 80%;
    font-size: 20px;
}

.vip-bg {
    background: url(../images/common/vip/background.jpg) no-repeat center;
    background-size: cover;
}

.vip-table {
    width: 100%;
    background-color: #1b1b1b;
    border-radius: 10px;
}

    .vip-table tr td {
        padding: 10px;
        border: 1px solid #02d46d;
        color: #fff;
        text-align: center;
        font-size: 12px;
        width: 100px;
    }

.vip-level {
    padding-top: 34px;
    padding-bottom: 30px;
    z-index: 100;
    position: relative;
}

    .vip-level p {
        color: #02d46d;
        padding: 10px;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }

.vip-benefit-wrap h2 {
    padding: 45px;
    margin: 0 auto;
    text-align: center;
    font-weight: 700;
    font-size: 50px;
}

.uppercase {
    text-transform: uppercase;
    text-align: left !important;
}

table tr:first-child th {
    border-top: 0;
}

table tr:last-child td {
    border-bottom: 0;
}

table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}

table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

table tr td:first-child {
    border-top: none;
    /* width:300px; */
}

table tr td:nth-last-child(6) {
    border-top: none;
}

table tr td:nth-last-child(5) {
    border-top: none;
}

table tr td:nth-last-child(4) {
    border-top: none;
}

table tr td:nth-last-child(3) {
    border-top: none;
}

table tr td:nth-last-child(2) {
    border-top: none;
}

table tr td:last-child {
    border-top: none;
}

.SlideDownMenu .menu-small {
    display: block;
}

.send-otp {
    border: none;
    color: #fff;
    white-space: nowrap;
    background: #02d46d;
    display: flex;
    justify-content: center;
    padding: 10px;
}

.f-table {
    padding: 10px;
    width: 80%;
    margin: 0 auto;
    background-color: #1b1b1b;
    border-radius: 10px;
}

/* 05092023 */

.slider-wrap {
    padding-top: 30px;
}

.header-top {
    height: 60px;
}

.bg-nav {
    /* height:100px; */
}

.nav-logo {
    height: 60px;
}

/* 08092023 */

.vip_status_wrap {
    padding: 10px;
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
    z-index: 100;
}

    .vip_status_wrap img {
        width: 235px;
    }

/* .progress-bar{
    position: relative;
    overflow: hidden;
    height: 30px;
    margin-top: 10px;
    border-radius: 30px;
    background: #1b1b1b;
} */
/* .progress-bar>span{
    position: relative;
    display: block;
    height: 100%;
}
.progress-bar>span:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #02d46d;
    border-radius: 16px;
} */
.current-status-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.current-status h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.status-bottom h6 {
    margin: 0;
    padding: 39px 0 0px;
    position: relative;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

    .status-bottom h6:before {
        width: 1px;
        height: 27px;
        position: absolute;
        background: #fff;
        bottom: 20px;
        left: 50%;
        content: "";
        transform: translateX(-50%);
    }

.status-bottom p {
    color: #707070;
    font-size: 13px;
    padding: 7px 0 0;
    line-height: 13px;
    text-align: center;
    font-weight: bold;
}

.vip span {
    text-shadow: 1px 3px 4px #000;
}

.status-bottom span {
    display: block;
}

.progress_percent_bronze {
    width: 15%;
}

.progress_percent_silver {
    width: 24%;
}

.progress_percent_gold {
    width: 42%;
}

.progress_percent_platinum {
    width: 55%;
}

.progress_percent_diamond {
    width: 78%;
}

.progress_percent_elite {
    width: 100%;
}

/* 11092023 */

.clr-box-message-o {
    background: #f26c4f;
    position: absolute;
    font-size: 9px;
    width: 10px;
    height: 10px;
    text-align: center;
    border-radius: 15px;
    top: 2px;
    left: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-verify {
    max-width: 300px;
    margin: auto;
    background: #464646;
}

.value.tel-num {
    display: flex;
}

.value {
    float: left;
    padding: 3px;
    width: 75%;
    position: relative;
}

select.telco {
    width: 100px;
    border: none;
    color: #fff;
    background: none;
    font-size: 16px;
    background: #464646;
}

.form-field .value input {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
}

input.tel-input {
    margin-left: 15px;
}

/* 12092023 */

.depo-bank-table {
    border: 1px solid #02d46d;
    padding: 10px;
}

    .depo-bank-table tr td {
        border: 1px solid #02d46d;
        padding: 10px;
    }

/* 13092023 */

.modal-dialog.login-md {
    width: 450px;
    background: none;
}

/* 26092023 */
.vip-icon {
    width: 250px;
}

.vip-benefit-img {
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

.line-container {
    margin-top: 10px;
    display: flex;
    width: 100%;
    z-index: 99999;
    position: relative;
}

    .line-container .progress-line {
        position: relative;
        margin: 0 auto;
        border-radius: 10px;
        width: 91%;
        background: grey;
        height: 2px;
        z-index: -1;
        display: flex;
        justify-content: space-between;
    }

        .line-container .progress-line .progress {
            position: absolute;
            width: 75%;
            height: 100%;
            background: #02d46d;
            transition: width 1s ease-in-out;
        }

    .line-container .status {
        position: relative;
        top: -11.5px;
    }

        .line-container .status .dot {
            background: url(../images/common/vip/vip-lock.png);
            width: 26px;
            height: 28px;
            cursor: pointer;
        }

            .line-container .status .dot.completed {
                background: url(../images/common/vip/vip-tick.png);
                position: relative;
            }

.status-bottom .active:before {
    width: 1px;
    height: 27px;
    position: absolute;
    background: #02d46d;
    bottom: 20px;
    left: 52%;
    content: "";
    transform: translateX(-50%);
}

@media screen and (min-width: 1800px) {
    .status-bottom .active:before {
        width: 1px;
        height: 27px;
        position: absolute;
        background: #02d46d;
        bottom: 20px;
        content: "";
        transform: translateX(-50%);
    }

    .status-bottom .l1:before {
        left: 57%;
    }

    .status-bottom .l2:before {
        left: 54%;
    }

    .status-bottom .l3:before {
        left: 52%;
    }

    .status-bottom .l4:before {
        left: 48%;
    }

    .status-bottom .l5:before {
        left: 46%;
    }

    .status-bottom .l6:before {
        left: 42%;
    }
}

/* 29092023 */

.depo-bank-table {
    border: 1px solid #02d46d !important;
    padding: 10px;
    margin-bottom: 10px;
}

    .depo-bank-table tr td {
        border: 1px solid #02d46d !important;
        padding: 10px;
    }

table.depo-bank-table tr td:last-child {
    padding-left: 10px;
}

/* 03102023 */

.vip-table tr td {
    border: none;
}

table.depo-bank-table tr td:first-child {
    width: 180px;
}

/* 13102023 */
/* contact */
.contactlist_sec {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    width: 100%;
    margin: auto;
}

.contactlist_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* lotto */
.promo_img {
    width: 9%;
    margin-top: -15px;
    margin-left: 6px;
}

.close-X {
    color: #fff;
}

/* 28052024 */

.container-m {
    background: url(../images/common/background.jpg) no-repeat top center;
    background-size: 100%;
}

/* 06062024 */
.hot-icon {
    position: relative;
}

    .hot-icon img {
        position: absolute;
        max-width: 18px;
        bottom: 18px;
    }

/* 29092024 */
.app-banner {
    position: relative;
}

    .app-banner img {
        width: 100%;
    }

.app-content .app-version {
    background: linear-gradient(0deg, rgba(243, 93, 8, 1) 0%, rgba(245, 138, 22, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.app-content span {
    color: #fff;
    font-size: 47px;
    font-weight: 700;
}

.app-cont {
    line-height: 1;
}

/* 09122024 */
.announcementpopupimg img {
    /* width: 400px; */
    margin: auto;
    border-radius: 5px;
}

#announcementpopup .carousel-control-prev {
    left: -22px;
}

#announcementpopup .carousel-control-next {
    right: -22px;
}

.announcementmodal.modal {
    z-index: 999999;
}

.announcementmodal .modal-content {
    position: relative;
}

.announcementmodal .close {
    right: 0;
    top: 5px;
    color: #fff;
    opacity: 1;
    position: absolute;
    z-index: 111;
    text-align: center;
    right: 15px;
    font-size: 27px;
    font-weight: 100;
    /* border: 2px solid #fff; */
    /* border-radius: 100%; */
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.announcementmodal.detectannouncementmodal02 .close {
    position: absolute;
    right: 55px;
    top: 20px;
}

.announcementmodal .modal-content {
    background-color: transparent;
    border: none;
}


.announcementmodal .modal-dialog {
    max-width: 500px;
}

.annou-pop {
    border-radius: 20px;
    /* background: #000; */
    /* padding: 20px; */
    color: #fff;
    /* border: 1px solid #02d46d; */
}

.annou-ttle {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid #02d46d;
    padding-bottom: 7px;
    background: #02d46d;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
}

.annou-content {
    /* padding-top: 25px; */
    font-size: 12px;
}

.announcementmodal .modal_close {
    z-index: 10;
    color: #fff;
    opacity: 1;
}

.annou-content img {
    display: block;
    margin: 0px auto;
}

.annou-pop p {
    margin-top: 20px;
    margin-bottom: 0px;
}

.round {
    position: relative;
    margin-right: 10px;
    height: 16px;
}

    .round label {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        height: 16px;
        left: 0;
        position: absolute;
        top: 0;
        width: 16px;
        margin: 0px;
    }

        .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 6px;
            left: 1px;
            opacity: 0;
            position: absolute;
            top: 3px;
            transform: rotate(-45deg);
            width: 12px;
        }

    .round input[type="checkbox"] {
        visibility: hidden;
    }

        .round input[type="checkbox"]:checked + label {
            background-color: #2283f6;
            border-color: #2283f6;
        }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }

.cls-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-size: 12px;
}

.announcementpopupimg {
    box-shadow: 0px 0px 6px 0px #02d46d;
    border-radius: 10px;
}

/* 16122024 */
.mission-sec {
    margin: 50px 0px;
    position: relative;
}

.page-title {
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#mission-tabs {
    border-bottom: unset;
    /* background-color: #282c35; */
    border-radius: 5px;
    padding: 14px 0px;
    display: inline-flex;
    width: 100%;
    /* margin-bottom: 30px; */
    /* justify-content: space-around; */
    gap: 15px;
}

    #mission-tabs .nav-item {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        /* padding: 0 10px; */
        flex: 1;
        /* border-right: 1px solid #fff; */
    }

.mission-content .nav {
    position: relative;
    z-index: 1;
    margin-top: 80px;
}

.nav-link.nav-mission-link.active,
.nav-link.nav-mission-link:hover {
    background: linear-gradient(180deg, rgba(0, 179, 91, 1) 0%, rgba(0, 60, 31, 1) 100%);
    width: 100%;
    border-radius: 25px;
    border: none;
    color: #fff;
}

.nav-link.nav-mission-link {
    font-weight: 700;
    font-size: 20px;
    color: #02d46d;
    background: #313131;
    width: 100%;
    border-radius: 25px;
}

.mission-countdown {
    font-size: 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(14, 203, 255, 1) 0%, rgba(65, 106, 255, 1) 100%);
    border-radius: 25px;
    padding: 8px;
    margin-top: 10px;
}

    .mission-countdown img {
        max-width: 20px;
    }

.mission-task img {
    max-width: 80px;
}

.progress-bar {
    /* width: 100%; */
    background-color: #ffffff;
    border-radius: 25px;
    margin: 10px 0;
    position: relative;
}

.progress-bar-fill {
    height: 15px;
    background: #02d46d;
    transition: width 0.5s;
    border-radius: 25px;
}

.mission-task {
    padding: 15px;
    background: #212121;
    margin-top: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mission-login p,
.mission-login span {
    text-align: center;
}

.deposit-btn button {
    background: linear-gradient(180deg, rgba(0, 179, 91, 1) 0%, rgba(0, 60, 31, 1) 100%);
    color: #fff;
    border: none;
    padding: 7px 40px;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0px 0px 10px 0px #000;
    font-weight: 500;
}

.deposit-btn {
    text-align: center;
}

.mission-login {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.mission-value {
    background: linear-gradient(180deg, rgba(14, 203, 255, 1) 0%, rgba(65, 106, 255, 1) 100%);
    padding: 3px 15px;
    border-radius: 5px;
    margin: 15px;
}

.deposit-process {
    width: 100%;
}

.progress-bar span {
    position: absolute;
    left: 50%;
    transform: translate(-50px, 0px);
    top: 0;
    right: 0;
    color: #000;
}

.mission-login span {
    font-size: 12px;
}

/* 23012024 */
#mission-tnc .promo-pop-cont p {
    font-size: 25px;
    margin-bottom: 10px;
}

#mission-tnc tr td:nth-child(2),
#mission-tnc tr th:nth-child(2) {
    text-align: left;
    padding-left: 10px;
}

#mission-tnc .grlist ul li {
    list-style: decimal;
}

#mission-tnc .gr-title {
    margin-bottom: 15px;
}

.mission-content {
    padding-top: 30px;
}

.deposit-btn .tnc-btn button {
    background: none;
    border: 1px solid #007f41;
    margin-top: 5px;
}

/* 24032025 */
.menu-in li img {
    width: 24px;
    margin-right: 5px;
}

/* deposit */
.for_float_use {
    position: relative;
}

.afterloginbodymain {
    display: grid;
    grid-template-columns: 230px auto;
    padding: 45px 0px;
    margin-top: 0;
}

.main_profile {
    background-color: #000;
    border: 1px solid #9e9e9e;
    padding: 5px 0;
    border-radius: 5px;
}

.user_main {
    margin-top: 20px;
}

.cam.fa-camera {
    background: #126e51;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 2px solid #ffffff;
}

.user_profile_img {
    position: relative;
    cursor: pointer;
}

    .user_profile_img img {
        /* border-radius: 50%; */
        /* width: 100px; */
        height: 100px;
    }

.cam_icon {
    position: absolute;
    bottom: 0;
    right: 48px;
    display: none;
}

.name_profile {
    display: grid;
    grid-template-columns: auto auto;
    margin: 10px 0;
}

.main_btn_short {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    word-break: break-all;
    grid-gap: 10px;
    margin-top: 20px;
}

.main_btn_short_custom {
    cursor: pointer;
}

    .main_btn_short_custom a, .menu_account a, .main_btn_short_custom a:hover {
        text-decoration: none;
        color: #fff;
    }

        .main_btn_short_custom a .main_text {
            color: #fff;
            font-size: 12px;
            font-weight: 500;
        }

        .main_btn_short_custom a.active .main_text, .main_btn_short_custom a:hover.main_text {
            color: #fff;
        }

    .main_btn_short_custom img {
        width: 35px;
    }

.afteractive {
    display: none;
}

.main_btn_short_custom a.active .beforeactive {
    display: none;
}

.main_btn_short_custom a.active .afteractive {
    display: block;
    margin: auto;
}

.main_btn_short_custom:hover a .beforeactive {
    display: none;
}

.main_btn_short_custom:hover a .afteractive {
    display: block;
    margin: auto;
}

.main_btn_short_custom:hover a .main_text {
    color: #fff;
}

.menu_account {
    margin: 12px 0 0;
}

    .menu_account a {
        color: #fff;
        font-weight: 500;
        padding: 13px 15px 13px 31px;
        font-size: 13px;
        text-align: left;
    }

.menu_account_inner {
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
}

.menu_account a.active {
    background-color: #000000;
    border-left: 4px solid #126e51;
}

    .menu_account a.active .beforeactive {
        display: none;
    }

    .menu_account a.active .afteractive {
        display: block;
    }

    .menu_account a.active .main_text {
        color: #02d46d;
    }

        .menu_account a.active .main_text .copy_btn {
            background-color: #126e51;
        }

.menu_account a.menu_account_inner:hover .beforeactive {
    display: none;
}

.menu_account a.menu_account_inner:hover .afteractive {
    display: block;
}

.menu_account a.menu_account_inner:hover .main_text {
    color: #02d46d;
}

    .menu_account a.menu_account_inner:hover .main_text .copy_btn {
        background-color: #02d46d;
    }

.main_profile_right {
    background-color: #000;
    padding: 30px 20px;
    margin-left: 10px;
    border-radius: 5px;
    border: 1px solid #9e9e9e;
}

    .main_profile_right.main_profile_right_withdraw {
        background-color: transparent;
        padding: 0;
    }

.main_profile_right_sec {
    background-color: #000;
    padding: 30px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.afterlogin_deposit.nav-tabs {
    border: none;
    border-bottom: 1px solid #02d46d;
}

.afterlogin_deposit.nav .nav-item .nav-link {
    min-width: auto;
    border-radius: 0px;
    text-align: center;
    background: none;
    color: #8d8d8d;
    height: 80px !important;
    border: none;
    font-size: 14px;
    text-transform: uppercase;
    flex-direction: column;
}

    .afterlogin_deposit.nav .nav-item .nav-link.active,
    .afterlogin_deposit.nav .nav-item .nav-link:hover {
        background: none;
        color: #02d46d;
        border: none;
        border-bottom: 1px solid #fff;
    }

.afterlogin_deposit.nav-tabs .nav-item {
    margin-right: 0px;
}

.main_profile_title {
    font-size: 15px;
    font-weight: 700;
    margin: 5px 0px;
    color: #fff;
}

.bank-input-wrap.method {
    padding: 9px 9px;
    border-radius: 8px;
    width: max-content;
    padding-left: 0;
}

.bank-input-wrap label {
    margin: 0 0px;
    margin-bottom: 0;
}

    .bank-input-wrap label [type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.bank-type {
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 10px 5px;
    color: #484848;
    font-weight: 500;
    width: 126px;
    height: auto;
}

.bank-input-wrap label .bank-type {
    border-radius: 10px;
    color: #fff;
    border: 1px solid #9e9e9e;
    border-radius: 5px;
}

.bank-input-wrap label [type="radio"] + .bank-type {
    cursor: pointer;
}

.bank-input-wrap label [type="radio"]:checked + .bank-type {
    background-position: right bottom;
    transition: none;
    color: #fff;
    /* -webkit-box-shadow: 0px 0px 6px 0px rgb(203,182,152,0.7); */
    -moz-box-shadow: 0px 0px 6px 0px rgb(203, 182, 152, 0.7);
    /* box-shadow: 0px 0px 6px 0px rgb(203,182,152,0.7); */
    border: 1px solid #126e51;
    border-radius: 5px;
    background-image: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
}

.bank-input-wrap label [type="radio"] + .bank-type img {
    cursor: pointer;
    /* filter: grayscale(0.8); */
    border-radius: 10px;
    width: 40px;
}

.bank-input-wrap label [type="radio"]:checked + .bank-type img {
    filter: grayscale(0);
}

.bnk-info {
    /* box-shadow: inset 0px 1px 5px -1px rgba(0,0,0,0.62); */
    border-radius: 5px;
    width: 450px;
    padding: 10px;
    border: 1px solid #9e9e9e;
}

    .bnk-info ul {
        list-style: disc;
        padding-left: 25px;
        color: #000000;
        margin-top: 10px;
        font-size: 14px;
    }

.copy_btn {
    color: #000;
    background-color: #02d46d;
    border-radius: 20px;
    padding: 3px 10px;
    margin-left: 10px;
    cursor: pointer;
}

.submit_btn {
    color: #ffffff;
    font-size: 19px;
    font-weight: 500;
    min-width: 132px;
    border: none;
    min-height: 39px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
}

.afterloginform .form-control {
    background-color: #f8f9fb;
    border-radius: 0;
}

.transfer_title_main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.transfer_title {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.allout_btn {
    background-image: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
    min-width: 117px;
    color: #fff;
    border: none;
    min-height: 34px;
    border-radius: 20px;
}

    .allout_btn:hover {
        background-image: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
    }

.form-inline .form-control {
    width: 156px;
    background-color: #f8f9fb;
}

.transfer_main {
    margin-top: 20px;
}

.form-inline .form-control label {
    font-size: 13px;
    color: #6a718e;
    font-weight: 500;
}

.btn_transfer {
    font-size: 13px;
    border-radius: 26px;
    color: #ffffff;
    min-height: 36px;
    background-image: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
    border: none;
}

    .btn_transfer:hover {
        background-image: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
        color: #ffffff;
    }

.box-prov {
    padding: 10px 0px 10px 0px;
    border-radius: 8px;
    margin-top: 5px;
}

    .box-prov ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        list-style: none;
        padding: 0;
        grid-gap: 15px;
    }

        .box-prov ul li {
            /* margin-left: 10px; */
            border: 1px solid #dadada;
            min-width: 124px;
            padding: 10px;
            text-align: left;
            /* margin-bottom: 10px; */
            border-radius: 5px;
            cursor: pointer;
            background-color: #ffffff;
            color: #000000;
            font-weight: 500;
            font-size: 12px;
        }

            .box-prov ul li a {
                color: #6a718e;
                font-weight: 500;
            }

                .box-prov ul li a:hover {
                    text-decoration: none;
                }

.prov-amot {
    background: none;
    border-radius: 5px;
    border: 2px solid #ffffff;
    margin: 0px 0px;
    margin-top: 5px;
    word-break: break-all;
    color: #000000;
}

.box-prov ul li.active,
.box-prov ul li:hover {
    background: linear-gradient(180deg, rgba(2,212,109,1) 0%, rgba(0,64,33,1) 100%);
    border: 1px solid #02d46d;
    color: #fff;
}

    .box-prov ul li.active .prov-amot,
    .box-prov ul li:hover .prov-amot {
        border: none;
        color: #fff;
    }

.transfer_main label {
    color: #fff;
    font-weight: 500;
}

.form-group b {
    color: #fff;
    font-size: 13px;
}

.afteractive {
    filter: brightness(0) saturate(100%) invert(73%) sepia(39%) saturate(6475%) hue-rotate(107deg) brightness(99%) contrast(98%);
}

.bnk-info ul li {
    color: #fff;
    margin-bottom: 10px;
}

.btn_history {
    border: 1px solid #dedede;
    background-color: #f8f9fb;
    height: 35px;
    color: #b7b7b7;
    width: 123px;
}

    .btn_history.active {
        color: #000000;
        background: #fff;
    }

.history_custom {
    display: grid;
    grid-template-columns: 450px 450px auto;
}

.form-inline.history_custom .form-control {
    width: 300px;
    border-radius: 0;
}

.history_table {
    /* -webkit-box-shadow: 0px 0px 6px 0px rgb(203,182,152,0.7); */
    -moz-box-shadow: 0px 0px 6px 0px rgb(203, 182, 152, 0.7);
    /* box-shadow: 0px 0px 6px 0px rgb(203,182,152,0.7); */
}

.history_table_main {
    margin-top: 30px;
}

table.history_table thead tr td,
table.history_table tbody tr td {
    padding: 12px 5px;
}

table.history_table thead {
    background-color: #a1a2a3;
    color: #040404;
    font-weight: 500;
    font-size: 13px;
}

table.history_table tbody tr:nth-child(2n) {
    background-color: #f8f9fb;
    color: #000;
}

table.history_table tbody tr td {
    border-right: 1px solid #a1a2a3;
    font-weight: 500;
}

    table.history_table tbody tr td:last-child {
        border: none;
    }

.history_green {
    color: #129c80;
}

.history_red {
    color: #ff112d;
}

.date_history {
    font-size: 13px;
    line-height: initial;
}

.date_history_time {
    font-size: 15px;
}

/*inbox*/
.afterlogin_inbox.nav-tabs {
    border: none;
    border-bottom: 1px solid #02d46d;
    position: relative;
}

.afterlogin_inbox.nav .nav-item .nav-link {
    min-width: 207px;
    border-radius: 0px;
    text-align: center;
    background: transparent;
    color: #b7b7b7;
    height: 43px;
    border: none;
    font-size: 14px;
    /* border-bottom: 1px solid #dddddd; */
}

    .afterlogin_inbox.nav .nav-item .nav-link.active,
    .afterlogin_inbox.nav .nav-item .nav-link:hover {
        /* background: linear-gradient(to bottom,#f1d6bf 5%,#d2b7a0 100%); */
        color: #fff;
        height: 43px;
        /* border: 1px solid #c9b69a; */
        border-bottom: 1px solid #fff;
    }

.inbox_tab table {
    /* -webkit-box-shadow: 0px 0px 6px 0px rgb(204,203,201,0.7); */
    -moz-box-shadow: 0px 0px 6px 0px rgb(204, 203, 201, 0.7);
    /* box-shadow: 0px 0px 6px 0px rgb(204,203,201,0.7); */
}

    .inbox_tab table tbody tr td {
        padding: 10px 10px;
        font-weight: 500;
        font-size: 13px;
    }

        .inbox_tab table tbody tr td .fa-envelope {
            color: #3b3b3b;
        }

    .inbox_tab table tbody tr.noread {
        /* background-color: #f8f9fb; */
    }

    .inbox_tab table tbody tr {
        cursor: pointer;
        border-bottom: 1px solid #dddddd;
    }

.notice_main {
    position: relative;
}

.notification_NOTICE {
    position: absolute;
    top: 8px;
    right: 36px;
    padding: 0px 7px;
    border-radius: 50%;
    background-color: #ff0057;
    color: white;
}

.inbox_box {
    display: grid;
    grid-template-columns: 30% 70%;
}

.inbox_box_content {
    -webkit-box-shadow: 0px 0px 6px 0px rgb(204, 203, 201, 0.7);
    -moz-box-shadow: 0px 0px 6px 0px rgb(204, 203, 201, 0.7);
    box-shadow: 0px 0px 6px 0px rgb(204, 203, 201, 0.7);
    border-top: 3px solid #6a718e;
    padding-top: 15px;
}

.inbox_box table tbody tr td {
    font-size: 13px;
}

.inbox_box_back a {
    font-size: 23px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #6a718e;
}

    .inbox_box_back a:hover {
        text-decoration: none;
    }

.inbox_title {
    font-weight: 700;
}

.inbox_content {
    font-size: 12px;
}

.delete_btn {
    min-height: 30px;
    min-width: 120px;
    font-size: 15px;
}

    .delete_btn a {
        color: #ffffff;
    }

        .delete_btn a:hover {
            text-decoration: none;
        }

.inbox_box table tbody tr.active,
.inbox_box table tbody tr:hover {
    background-color: #6a718e;
    color: #ffffff;
}

#profilemodal.modal .modal-dialog {
    max-width: 500px;
}

#profilemodal.modal .modal-header {
    background-image: linear-gradient(to bottom, #126e51 0%, #083e2d 100%);
    -moz-box-shadow: 0px 3px 7px 0px #ccc;
    -webkit-box-shadow: 0px 3px 7px 0px #ccc;
    box-shadow: 0px 3px 7px 0px #ccc;
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    justify-content: center;
}

    #profilemodal.modal .modal-header img {
        margin: 0 auto;
        width: 200px;
    }

    #profilemodal.modal .modal-header .close {
        position: absolute;
        right: 20px;
    }

.user_select_img {
    max-width: 125px;
    max-height: 125px;
    margin: auto;
}

    .user_select_img img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }

.user_select_img_item {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    grid-row-gap: 10px;
}

    .user_select_img_item img {
        border-radius: 100px;
        max-width: 70px;
        cursor: pointer;
    }

.upload.fa-camera {
    background: #f8f9fb;
    border-radius: 50%;
    height: 67px;
    width: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6a718e;
    border: 2px solid #6a718e;
    font-size: 24px;
}

.upload_profile {
    cursor: pointer;
}

.btn_history:hover {
    color: #000;
    background: #fff;
}

.btn_history {
    background: #f8f9fba6;
    color: #000;
}

/* 14042025 */
.btn-collapse {
    margin-top: 10px;
}

/* 28052025 */
.gs1-iframe iframe {
    width: 100%;
    min-height: 700px;
    border: none;
}

.gs1-iframe {
    padding: 10px;
}