@import url("https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&display=swap");

/* secondary color: #DC3545
    tertiary color: #0f5e0a
*/

.home-body,
.blue-body {
    background-color: #EEF1F7;
    max-width: 1400px;
    margin: auto;
}

.blue-body .login,
.blue-body .register {
    background-image: url("../img/slider/login.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
}

.gray-body {
    background: #f2f2f2;
    max-width: 1400px;
    margin: 0 auto;
}

.gray-body #topHeader .header-title h2 {
    color: #fff;
    font-size: 48px;
    font-weight: bold;
}

.grab_spin .card-footer a,
.grab_spin .card-footer button {
    background: red;
    color: #fff;
    width: 46%;
    text-align: center;
    border-radius: 50px;
    padding: 7px 0;
    border: none;
}

.card-body.grab-body img {
    width: 180px;
    margin: 0 auto;
}

.grab_spin .card-footer button {
    background: green;
}

#userDetails .profile-img img {
    max-width: 100%;
    height: auto;
}

#userDetails .profile-img {
    padding-left: 40px;
}

/* topHeader starts */

#profileHeader {
    /*background-color: #fff;*/
}

#profileHeader .back-home {
    color: #1aaf1a;
    position: absolute;
    right: 0;
}

#profileHeader .back-home i {
    color: #ffffff !important;
}
#grabBanner h5, #grabBanner p {
    color: #198754;
}

#topHeader {
    background-color: #364759;
    z-index: 999999999999999;
    margin: 15px 13px;
    border-radius: 50px;
    /* height: 85px; */
}
#topHeaderRegister {
    /* background-color: #364759; */
    z-index: 999999999999999;
    margin: 15px 13px;
    border-radius: 50px;
    /* height: 85px; */
}
#topHeaderLogin {
    /* background-color: #364759; */
    z-index: 999999999999999;
    margin: 15px 13px;
    border-radius: 50px;
    /* height: 85px; */
}
.topHeader {
    height: 85px;
}

#topHeader header {
    position: relative;
}

#topHeader .header-title h2 {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
}

#topHeader .header-right {
    /* position: absolute;
    right: 0; */
    height: 100%;
    align-items: center;
    /* top: 0; */
    margin-right: 10px;
    margin-left: 10px;
    color: #fb7701;
    font-weight: 500;
}
.max-w-fit {
    max-width: fit-content;
    padding: 4px 12px;
}

/* topHeader ends */

/* banner starts */

#banner {
    padding-top: 60px;
}

.product-hall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.product-hall a {
    flex: 0 0 48%;
    /* padding: 8px; */
}

.dec.col-lg-12.col-12 {
    padding: 10px;
}

#banner .carousel-inner {
    border-radius: 8px;
}

#banner img {
    width: 100%;
    max-height: 280px;
}

#banner .notice {
    /* color: #dc3545; */
    color: black;
    margin-top: 15px;
    /* background: #fff0e4; */
    background: rgba(206, 201, 201, 0.694);
    padding: 10px 20px;
    border-radius: 10px;
}

#banner .notice .notice-row {
    display: flex;

    align-items: center;
}

#banner .notice .notice-icon {
    width: 10%;
}

#banner .notice .notice-text {
    width: 90%;
}

#banner .notice .notice-text p {
    margin-bottom: 0px;

    font-size: 18px;
}

/* banner ends */

/* routeTabs starts */

#routeTabs {
    margin-top: 20px;
}

#routeTabs .deposit {
    /*background: url(../img/deposit.png);   */
}

.submit_btn_deposit a {
    display: block;
    width: 100%;
    background: #0cab00;
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 18px;
    border-radius: 10px;
    font-weight: bold;
    transition: 0.3s;
    text-decoration: none;
}

.withdrawal.new_item {
    padding: 0.266667rem;
    margin-top: 60px;
}

.withdrawal.new_item .withdrawal_amount_box {
    padding-left: 0.4rem;
    line-height: 1.066667rem;
    color: #344059;
}

.withdrawal.new_item .withdrawal_amount_box .withdrawal_amount {
    font-weight: 700;
}

.withdrawal.new_item .withdrawal_amount_box .withdrawal_rate {
    font-size: 0.32rem;
}

.withdrawal.new_item .withdrawal_amount_box .withdrawal_rate {
    color: #ff5767;
    display: inline-block;
}

.withdrawal.new_item .withdrawal_input {
    font-size: 0.42667rem;
}

.withdrawal.new_item .withdrawal_input {
    width: 94%;
    margin: 0 auto 0.266667rem;
    box-sizing: border-box;
    background: #eef1f7;
    font-weight: 700;
}

.withdrawal.new_item .van-cell-group {
    background-color: #fff;
}

.withdrawal.new_item .van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.26667rem 0.42667rem;
    overflow: hidden;
    color: #323233;
    font-size: 13px;
    line-height: 0.64rem;
    background-color: #fff;
    font-weight: 600;
    padding: 15px 11px;
}

.withdrawal.new_item .van-cell:after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0.42667rem;
    bottom: 0;
    left: 0.42667rem;
    border-bottom: 0.02667rem solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.withdrawal.new_item .offline-pay-aisle,
.withdrawal.new_item .offline-title {
    color: #198754;
    font-weight: 500;
}

.wa_page.withdrawal_wrap {
    background: #fff;
    padding: 20px 0px;
    margin-top: 50px;
}

.withdrawal_wrap .page_contain form {
    /* padding: 10px; */
    /* background: #fff0e4; */
    border-radius: 10px;
}
input.form-control.van-field__control {
    background: #eef1f7;
    border: none;
    margin: 11px 0;
}

.withdrawal.new_item .dust_bg {
    padding-bottom: 0.533333rem;
}

.withdrawal.new_item .withdrawal__bottom-hint {
    border-radius: 0.16rem;
    margin-top: 0.266667rem;
    padding: 0.266667rem 0.533333rem;
    background: #fff;
    color: #344059;
}

.withdrawal.new_item .withdrawal__bottom-hint .wb__title {
    font-size: 14px;
}

.withdrawal.new_item i.fas.fa-chevron-right {
    position: absolute;
    right: 10px;
    color: #cbc9c9;
}

button.withdrawal_btn {
    width: 95%;
    border: none;
    background: #198754;
    color: #fff;
    padding: 10px 0;
    border-radius: 50px;
    margin: 16px auto;
}

.withdrawal__sure {
    text-align: center;
}

.withdrawal.new_item .withdrawal__bottom-hint .wb__title {
    padding-left: 0.8rem;
    width: 150px;
    background: url(data:image/png;base64,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);
    background-size: 100% 100%;
    margin-bottom: 20px;
    line-height: 43px;
    color: #fff;
}

.withdrawal.new_item .withdrawal__bottom-hint p {
    margin-bottom: 18px;
    line-height: 16px;
}

#routeTabs .withdraw {
    /*background: url(../img/withdraw.png);*/
}

#routeTabs .depowith {
    display: block;
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: cover; */
    padding: 10px 0;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    background: #498056;
    text-align: center;
    margin-bottom: 14px;
}
.withdrawal_input input, .withdrawal_input select, .withdrawal_input input, .withdrawal_input textarea {
    border: none !important;
    padding: 10px 12px !important;
    /* font-size: 14px; */
    color: #686868;
    background: #eef1f7;
    /* border-radius: 10px; */
}

#routeTabs .withdraw {
    background: #498056 !important;
}

#routeTabs .company-links {
    margin-top: 30px;

    margin-bottom: 30px;
}

/* routeTabs ends */

/* business hall */

#businessHall {
    margin-bottom: 25px;
}

#businessHall a {
    text-decoration: none;
}

#businessHall .row {
    margin-left: 0px;

    margin-right: 0px;

    border-radius: 15px;

    align-items: center;

    margin-bottom: 20px;
}

#businessHall .unavailable-hall {
    background: #364759;
    border-radius: 25px;
}

.available-hall {
    background: #364759;
    border-radius: 12px;
}

.text-diff {
    color: black !important;
    font-size: 1.4rem !important;
    font-weight: bold;
}

#businessHall .row .col-lg-3 {
    padding-left: 0px;
}

#businessHall p {
    color: #fff;

    margin-bottom: 0px;

    font-size: 13px;
}

#businessHall .lock {
    text-align: center;
}

#businessHall .lock i {
    font-size: 25px;

    color: #757575;
}

/* business ends */

/* useCommission starts */

#useCommission {
    margin-top: 60px;
    margin-bottom: 80px;
}

#useCommission img {
    max-width: 100%;
}

#useCommission .commision-wrapper {
    background-color: #fff;
    padding: 20px 10px 10px;
    border-radius: 8px;
    box-shadow: 0 0 20px #c6c6c6;
}

.item.df.df_ac .img {
    width: 45px;
    height: 45px;
    display: block;
}

.item.df.df_ac .img img {
    width: 100%;
    border-radius: 50px;
    box-shadow: 0 0 5px #2f2d2d;
}

.item.df.df_ac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.item.df.df_ac .text p {
    font-size: 13px;
    color: #000;
}

#useCommission .row {
    align-items: center;

    border-bottom: 1px solid #a2a2a2;

    padding-bottom: 15px;

    padding-top: 15px;
}

#useCommission .row:last-of-type {
    border-bottom: none;
}

#useCommission .row h5 {
    color: #fff;
}

/* useCommission ends */

/* bottomHeader starts */

#bottomHeader {
    background: #498056;
    max-width: 1400px;
    margin: auto;
    /* border-radius: 12px; */
}

#bottomHeader a {
    color: whitesmoke;

    text-align: center;
}

#bottomHeader .grab-link {
    position: relative;

    width: 90px;
}

/* #bottomHeader a .grab {
    background: #fff;
    height: 70px;
    width: 70px;
    display: inline-block;
    line-height: 60px;
    margin-bottom: 0px;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 10px;
    border: 5px solid gray;
} */
#bottomHeader a .grab {
    background: #fed813 !important;
    height: 70px;
    width: 70px;
    display: inline-block;
    line-height: 60px;
    margin-bottom: 0px;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 10px;
    border: 5px solid #487d56;
    color: #000 !important;
}

/* bottomHeader ends */

/* grab page starts */

#grabBanner {
    padding-top: 80px;
}

#grabBanner .grab-spinner {
    background-image: url(../img/gift-bg1.png);

    background-size: 100% 100%;

    background-position: center;

    height: 200px;
}

#grabBanner .grab-spinner .contain {
    overflow: hidden;

    justify-content: space-between;

    height: 100%;

    position: relative;

    justify-content: space-evenly;
}

#grabBanner .animation_item {
    position: relative;

    min-width: 2rem;

    width: 20%;

    text-align: center;

    padding-top: 0.533333rem;

    height: 44.266667rem;

    text-align: center;
}

#grabBanner .animation_item .img_box div {
    margin-top: 40px;
}

#grabBanner .animation_item .img_box div:first-of-type {
    top: -110px;

    position: absolute;
}

#grabBanner .animation_item .img_box div:last-of-type {
    top: 110px;

    position: absolute;
}

#grabBanner .animation_item .img_box {
    padding: 0.133333rem 0;

    width: 4.6rem;

    height: 4.92rem;

    margin: 0 auto;

    top: 20px;

    transition: 0.8s;

    /* animation-name: updown; */

    animation-duration: 2s;

    /* animation-iteration-count: 1; */

    animation-delay: 0s;
}

.animate {
    /* animation-name: updown; */

    animation-duration: 2s;

    /* animation-iteration-count: 1; */

    animation-delay: 0s;
}

@keyframes updown {
    0% {
        top: 20px;
    }

    /* 25%  {top: -50px;} */

    50% {
        top: -1200px;
    }

    /* 75%  {top: -0px;} */

    100% {
        top: 20px;
    }
}

.animation_item img {
    width: 4.6rem;

    height: 4.92rem;

    display: inline-block;

    -o-object-fit: contain;

    object-fit: contain;
}

.animation_item .img_box:first-child,
.animation_item .img_box:last-child {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);
}

#grabBanner .commission-rate span {
    color: #dc3545;
    font-weight: bold;
}

.grab-links a {
    display: block;

    text-decoration: none;

    text-align: center;

    color: #fff;

    padding: 15px 10px;

    font-size: 17px;

    font-weight: bold;

    border-radius: 15px;
}

.grab-links .depo_upgrade {
    background: #198754;
}

.transaction_password h3 {
    font-size: 18px;
    padding-bottom: 8px;
}

.transaction_password {
    padding: 16px 12px 0;
}

input.form-control.password_box {
    background-color: #eef1f7;
    border: none;
    border-radius: 0px;
    width: 46px;
    height: 50px;
    margin-bottom: 5px;
    flex: 0 0 14.3%;
}

.input_box_item_password {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
}

input.form-control.password_box:focus {
    box-shadow: none;
}

section.transaction_password_ac {
    margin-top: 56px;
    text-align: center;
}

button.btn.btn-danger.submit_password {
    background: green;
    border: none;
    width: 50%;
    border-radius: 50px;
    padding: 10px 0;
    font-size: 18px;
}

#grabBanner .white-wrapper {
    padding-bottom: 0;
}

.grab-links .auto_grab {
    background: #1fb36f;
}

/* .autograbPopUp starts */

.autograbPopUp {
    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    transform: scale(1.1);

    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.autograbPopUp .modal-content {
    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: white;

    width: 24rem;

    border-radius: 0.5rem;
}

.autograbPopUp .grab-body .grab-img {
    border: 1.5px solid #dbdbdb;

    padding: 10px;

    border-radius: 10px;
}

.autograbPopUp .grab-body .grab-title {
    font-size: 16px;
}

.autograbPopUp .grab-body .grab-detail {
    font-size: 13px;
}

.autograbPopUp .popup-btn {
    background-color: #dc3545;
    border-radius: 5px;
    color: #fff;
    padding: 5px 10px;
    width: 40%;
    text-align: center;
    border: none;
}

button.popup-btn.popup-confirm {
    background: green;
}

.autograbPopUp .close-button:hover {
    background-color: darkgray;
}

.show-modal {
    opacity: 1;

    visibility: visible;

    transform: scale(1);

    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.autograbPopUp .card-header {
    background: #fb7701;
    color: #fff;
    text-align: center;
    padding: 5px 0 6px 0px;
    display: inline-block;
}

.autograbPopUp .card-header h6 {
    color: #fff;
}

/* .autograbPopUp ends */

/* .countDownPopUp starts */

.countDownPopUp {
    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    transform: scale(1.1);

    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.count-slide {
    width: 250px;

    /*background-image: url(../img/countdown-bg.png);*/
    background-image: url(../img/gift.png);

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-position: center;

    height: 280px;

    margin: 0 auto;
}

.count-slide .count-number {
    margin-top: 120px;
}

.count-slide .count-number img {
    max-width: 45px;
}

.countDownPopUp .modal-content {
    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #fff0;

    width: 24rem;

    border-radius: 0.5rem;
}

.countDownPopUp .modal-content .card {
    background: transparent;
}

.countDownPopUp .popup-btn {
    background-color: #4187f9;

    border-radius: 5px;

    color: #fff;

    padding: 5px 10px;
}

.countDownPopUp .close-button:hover {
    background-color: darkgray;
}

.show-modal {
    opacity: 1;

    visibility: visible;

    transform: scale(1);

    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.countDownPopUp .card-header {
    background: gainsboro;

    color: #636363;

    text-align: center;

    padding: 5px 0 6px 0px;

    display: inline-block;
}

/* .countDownPopUp ends */

/* grab banner ends */

/* grab achivements starts */

#grabAchive {
    margin-bottom: 10px;

    margin-top: 30px;
}

#grabAchive .reload {
    color: #7a7a7a;
}

#grabAchive .achive-box {
    border-radius: 18px;
    text-align: center;
    background: #364759;
    padding: 20px 10px;
    height: 100%;
    box-shadow: 0px 3px 12px #c5c4c4;
}

#grabAchive .achive-box p {
    margin-bottom: 5px;
    font-size: 13px;
    color: white;
}

#grabAchive .achive-box h4 {
    color: #198754;
}

.profile-list {
    padding: 12px 22px;
    background-color: #e8e6e6;
    margin-top: 15px;
    /* border-radius: 8px; */
}
.profile-list i {
    font-size: 21px;
    color: #498056;
}
.product-list span {
    color: #498056;
}
.profile-list > i {
    font-size: 15px;
}
/* grab achivements ends */

/* grabRules starts */

#grabRules {
    background: #fff;
    box-shadow: 0px 3px 12px #c5c4c4;
    width: 90%;
    margin: 0 auto 100px;
    border-radius: 15px;
}

#grabRules button {
    border: none;

    padding: 10px 20px;

    background: #ff9a23;

    color: #fff;

    border-radius: 0px 20px 0px 20px;
}

#grabRules .rules-list {
    margin-top: 20px;
}

.logo img {
    width: 100%;
}

.login-reg-wrapper .logo {
    width: 180px;
    text-align: center;
    margin: 0 auto;
}

#grabRules .rules-list p {
    margin-bottom: 0px;
}

/* grabRules ends */

/* grab page ends */

/* online page starts */

.available-asset .btn.btn-primary {
    background: green;
    border: none;
}

.available-asset .btn.btn-danger {
    border: none;
    background: red;
}

.page-notice {
    background-color: #d9e5f9;
    margin-top: 15px;
    padding: 10px;
    margin-bottom: 35px;
    border-radius: 10px;
}

#onlineContact {
    padding-bottom: 69px;
    margin-bottom: 30px;
}

#onlineContact a {
    text-decoration: none;
}

#onlineContact .contact-box {
    text-align: center;

    background-color: #fff;

    border-radius: 15px;
}

#onlineContact .contact-box h4 {
    color: #333;

    padding: 10px 0;

    font-size: 20px;
}

#onlineContact .contact-box img {
    max-width: 100%;

    min-width: 100%;

    max-height: 180px;

    border-radius: 0px 0px 15px 15px;
}

/* online page ends */

/* order page */

.eye-open {
    display: none;
}

#orderData {
    margin-bottom: 80px;
    /* padding: 0px 15px; */
}

#orderData .record_nav {
    /* border-radius: 10px; */
    /* background: #fb770126; */
    background: #FFFFFF;
}

#orderData .nav {
    justify-content: space-between;
    margin-top: 40px;
    /* padding: 5px 15px; */
}

/* #orderData .nav button {
    width: 25%;
    padding-top: 5px;
    padding-bottom: 5px;
} */
#orderData .nav button {
    width: 25%;
    padding-top: 15px;
    padding-bottom: 15px;
}

#orderData .nav-link {
    background-color: transparent;

    border: none;

    color: #999;
}

.product-list {
    padding: 20px 20px 20px;
    /* font-family: 'Nunito Sans', sans-serif; */
    margin-top: 0;
}

.order-time {
    /* display: flex;
    justify-content: space-between; */
    padding-bottom: 26px;
}

.flex_is {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.product-list > ul {
    margin: 0 -10px;
    padding: 0;
    list-style: none;
    display: flex;
}

.product-list > ul > li {
    width: 25%;
    padding: 10px;
}

.white-box {
    border-radius: 5px;
    box-shadow: 0 0 11px 0 rgb(192 192 192 / 100%);
    background-color: #ffffff;
    padding: 15px 15px 20px;
    transition: all 0.5s ease-in-out;
    position: relative;
}

.wishlist-icon img {
    width: 20px;
    height: 20px;
}

.product-img {
    min-height: 135px;
}

.product-img img {
    max-width: 100%;
    max-height: 130px;
    display: block;
    margin: 0 auto;
    width: 150px;
}

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

.product-name {
    font-size: 20px;
    /* color: #dc3545; */
    color: black;
    text-align: start;
    margin: 10px 0 10px;
    font-weight: 600;
    overflow: hidden;
}

.price {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    /* color: #dc3545; */
    color: black;
    text-align: start;
    font-family: "Open Sans", sans-serif;
    padding-bottom: 8px;
}

.wishlist-icon a {
    background: #198754;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    padding: 6px 0;
    margin: 11px 0 0;
    border-radius: 50px;
}

.blue-btn {
    background: #13cfdf;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    max-width: 132px;
    margin: 10px auto 0;
    display: block;
    text-align: center;
    text-decoration: none;
}

.price .line-through {
    font-size: 14px;
    color: #999999;
    font-weight: 400;
    vertical-align: 1px;
    display: inline-block;
    text-decoration: line-through;
    margin-left: 4px;
}

/* #orderData .nav-link.active {
    border-radius: none;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 2px solid #dc3545;
    color: #dc3545;
} */
#orderData .nav-link.active {
    border-radius: none;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 4px solid #498056;
    color: #fff;
    background: #498056;
}

#orderData .box {
    width: 200px;

    height: 300px;

    position: relative;

    border: 1px solid #bbb;

    background: #eee;

    float: left;

    margin: 20px;
}

#orderData .ribbon {
    position: absolute;

    right: -5px;

    top: -5px;

    z-index: 1;

    overflow: hidden;

    width: 90px;

    height: 90px;

    text-align: right;
}

#orderData .ribbon span {
    font-size: 0.8rem;

    color: #fff;

    text-transform: uppercase;

    text-align: center;

    font-weight: bold;

    line-height: 32px;

    transform: rotate(45deg);

    width: 120px;

    display: block;

    background: #79a70a;

    background: linear-gradient(#9bc90d 0%, #79a70a 100%);

    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);

    position: absolute;

    top: 17px;

    right: -29px;
}

.table_ai_row span {
    display: block;
    padding-bottom: 5px;
}

/* .ai_details_table {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #f2f2f2;
    border-radius: 8px;
} */
.ai_details_table {
    background: #fff;
    padding: 15px 25px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 0 10px #ddd;
}

.table_ai_body {
    text-align: right;
    flex: 0 0 50%;
}

.table_ai_body strong {
    display: block;
    padding-bottom: 3px;
}

.table_ai_row {
    flex: 0 0 50%;
}

#orderData .ribbon-pending span {
    /*background-color: #f29339;*/

    /*background: linear-gradient(#f29339 0%, #d26600 100%);*/
}

.complete-green.wishlist-icon a {
    background: green;
}

#orderData .ribbon-cancelled span {
    /*background-color: #f29339;*/

    /*background: linear-gradient(#ef1401 0%, #c31001 100%);*/
}

#orderData .ribbon span::before {
    content: "";

    position: absolute;

    left: 0px;
    top: 100%;

    z-index: -1;

    border-left: 3px solid #79a70a;

    border-right: 3px solid transparent;

    border-bottom: 3px solid transparent;

    border-top: 3px solid #79a70a;
}

#orderData .ribbon-pending span::before {
    border-left: 3px solid #f29339;

    border-top: 3px solid #f29339;
}

#orderData .ribbon-cancelled span::before {
    border-left: 3px solid #ef1401;

    border-top: 3px solid #ef1401;
}

#orderData .ribbon span::after {
    content: "";

    position: absolute;

    right: 0%;
    top: 100%;

    z-index: -1;

    border-right: 3px solid #79a70a;

    border-left: 3px solid transparent;

    border-bottom: 3px solid transparent;

    border-top: 3px solid #79a70a;
}

#orderData .ribbon-pending span::after {
    border-right: 3px solid #f29339;

    border-top: 3px solid #f29339;
}

#orderData .ribbon-cancelled span::after {
    border-right: 3px solid #ef1401;

    border-top: 3px solid #ef1401;
}

#orderData .card .card-body .d-flex {
    align-items: center;
}

#orderData .card .card-feature-img {
    max-width: 30%;

    padding: 15px;

    text-align: center;
}

#orderData .card .card-img {
    max-width: 150px;
}

#orderData .card .card-title {
    max-width: 70%;
}

#orderData .card .card-title span {
    font-size: 24px;
}

#orderData .tab-content h4 {
    color: #999;

    font-size: 22px;
}

#bottomHeader a .grab img {
    /* width: 32px;
     */
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* order ends */

/* profile css starts */

#userDetails h6 {
    font-size: 18px;
    color: #000;
}

#userDetails {
    background: #fff;
    padding-top: 40px;
}

input#file-input {
    display: none;
}

.van-cell__title.van-field__label {
    flex: 0 0 30%;
    font-size: 15px;
}

.van-field__body.address_trc {
    display: flex;
    align-items: center;
}

a.copybtn {
    background: #f29339;
    color: #fff;
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 4px;
    margin-left: -65px;
}
.user-info .top-middle h6, .user-info .top-middle h5 {
    color: #a16d45 !important;
}

.user.ms-4 a {
    color: #FFF;
    text-decoration: none;
    background: #498056;
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 12px;
}

#userDetails .user .user-level {
    background: #2f2fad;
    padding: 5px 25px;
    border-radius: 20px;
    color: #fff;
    font-style: italic;
    font-size: 15px;
    margin-left: 5px;
}

#userDetails .user h5 {
    margin-bottom: 10px;
}

#userDetails .user #inviteCode {
    font-weight: bold;
}

/* user info starts */

.user-info {
    position: relative;
}

.dashboard_profile select {
    background: #ffc107;
    border: none;
    border-radius: 50px;
    color: #fff;
}

.profile_bg {
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.profile_bg::before {
    background: url(../img/slider/bgImg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 256px;
    content: "";
    z-index: -1;
}

.middle-part.mt-4 {
    /* background: #fb7701;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 3px 12px #c5c4c4; */
}

.last-part_ h5,
h6 {
    color: #0f5e0a;
}

.middle-part h6 {
    color: #fff !important;
}

.last-part_ {
    padding: 10px 13px 0;
}

/* .user-info .top-middle {
    background: url(../img/profile-bg.png);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 20px;

    padding-top: 40px;

    padding-bottom: 40px;

    border-top-right-radius: 30px;

    border-top-left-radius: 30px;

    margin-top: 32px;
} */
.user-info .top-middle {
    background: url(../img/profile-bg2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    padding-top: 40px;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    margin-top: 50px;
    box-shadow: 0 0 12px #828282;
}

.user-info .top-middle .user-buttons {
    /* display: flex;
    justify-content: space-between; */
}

.user-info .top-middle h6, .user-info .top-middle h5{
    color: #a16d45;
}

.user-balance {
    /* border: 1px solid #fff;
    padding: 10px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    margin: 0 auto 20px; */
}

.user-balance i.fa-solid.fa-eye-slash {
    color: #8e613f;
}

.user-balance h6.area_new {
    color: black;
    font-size: 17px !important;
    margin-bottom: 0;
}

.user-balance {
    /* border: 1px solid #fff;
    padding: 10px;
    text-align: center;
    width: 80%;
    box-shadow: 0px 3px 12px #c5c4c4; */
}

.user-info .top-middle i {
    color: #8e613f;
}

.user-info .top-middle .user-buttons a {
    text-decoration: none;

    padding: 8px 20px;

    border-radius: 20px;

    text-align: center;

    color: #fff;

    font-weight: bold;
}

.user-info .top-middle .user-buttons .deposit {
    background: #198754;
    margin-right: 10px;
}

.user-info .top-middle .user-buttons .withdraw {
    background: red;
}

.user-info .middle-part,
.user-info .last-part {
    /*display: none;*/
}

/* top middle part ends */

.user-info .last-part {
    background: #c7c7c7;
    padding: 20px;
}

/* ends last part */

.user-info .toggle-down-arrow {
    position: absolute;

    bottom: 0;

    left: 50%;

    right: 50%;

    cursor: pointer;

    color: #999;

    font-size: 18px;

    padding: 10px;
}

.user-info .toggle-up-arrow {
    position: absolute;

    bottom: 0;

    left: 50%;

    right: 50%;

    cursor: pointer;

    color: #fff;

    font-size: 18px;

    padding: 10px;

    display: none;
}

.user.ms-4 h6 {
    color: #fff;
}

/* user info ends */

/* user details ends */

/* userLinks starts */

#userLinks {
    padding: 16px 0 80px;
    background: #fff;
}

#userLinks .user-box {
    /* box-shadow: 0.026667rem 0.026667rem 0.106667rem rgb(51 51 51 / 30%); */
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0px 3px 12px #c5c4c4;
}

#userLinks .user-box img {
    max-width: 65px;
}

#userLinks .user-box h6 {
    color: black;
    margin-top: 8px;
}

#userLinks .link-item {
    text-decoration: none;
}

.login-reg-wrapper.loginpage {
    padding-top: 45px;
}

/* userLinks ends */

/* profile css ends */

/* login register page css */

#loginReg {
    max-width: 500px;

    margin: 0 auto;

    padding-top: 20px;

    padding-bottom: 0px;
}

button.btn.btn-primary.submit-btn {
    background: #498056 !important;
    border: none;
}

#loginReg h2 {
    font-weight: bold;

    font-size: 42px;
}

.login-reg-wrapper {
    /*background: #fff;*/

    padding: 20px;

    border-radius: 15px;
}

#loginReg form .form-control {
    padding: 14px;

    border-radius: 30px;
}

#loginReg .phone-input {
    padding-left: 50px !important;
}

#loginReg .submit-btn {
    display: block;

    width: 100%;

    font-size: 28px;

    padding-top: 3px;

    padding-bottom: 8px;

    font-weight: bold;

    border-radius: 35px;

    background-color: #003f5e;
}

.capcha {
    position: relative;
}

#loginReg form .form-control {
    padding: 10px;
    border-radius: 5px;
    background: #e7e6e6;
    border: none;
    position: relative;
}

.d-flex.align-items-center.area_login_header select {
    width: auto;
    border-radius: 50px;
    /* background: #fb7701; */
}

.d-flex.align-items-center.area_login_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d-flex.align-items-center.area_login_header a i {
    color: #198754 !important;
}

#loginReg .forgot-link a {
    text-decoration: none;

    color: #dc3545;

    font-size: 18px;

    display: block;

    padding-bottom: 0px;
}

#loginReg .is-account a {
    text-decoration: none;

    color: #dc3545;

    font-size: 18px;

    display: inline-block;

    padding-top: 10px;
}

#loginReg .verification-code {
    font-family: "Herr Von Muellerhoff", cursive;

    padding: 15px;

    font-size: 32px;

    margin-bottom: 0px;

    text-shadow: 2px 2px #232162;

    font-weight: bold;
}

/* login register page css ends */

/* personalinfo page starts */

#topHeader .back-btn {
    color: #fff;

    font-size: 18px;
}

.infolist_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
}

.infolist_single_item h5 {
    margin: 0 0;
    font-weight: 600;
    color: #fb7701;
}

a.accountInfo_method {
    text-decoration: none;
}

.bankcard_wrap .bankcard_item {
    border-radius: 0.266667rem;
    position: relative;
    font-weight: 600;
    color: #fff;
    height: 75px;
    padding-top: 8px;
}

.bankcard_wrap .bankcard_item,
.bankcard_wrap .bankcard_item:first-child {
    background: url(../img/bnck_bg_1.10fc877c.png) no-repeat;
    background-size: 100% 100%;
}

.bankcard_wrap .common_submit a {
    color: #fff;
    text-decoration: none;
}


form.van-form.add_wallet_area {
    margin: 55px 0;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin-top: 70px;
}

.add_wallet_area .van-cell.van-field {
    display: flex;
    align-items: center;
    justify-content: start;
    border-bottom: 1px solid #e7e5e5;
    padding-bottom: 7px;
    margin-bottom: 6px;
    gap: 15px;
}

.add_wallet_area input.van-field__control {
    border: none;
}

.add_wallet_area
    button.van-button.van-button--info.van-button--normal.van-button--block.van-button--round {
    width: 100%;
    background: #198754;
    border: none;
    color: #fff;
    padding: 8px 0;
    text-transform: capitalize;
    border-radius: 50px;
    margin-top: 15px;
}

.withdrawal_method .common_submit {
    width: 60%;
    box-shadow: 0.026667rem 0.026667rem 0.106667rem rgba(51, 51, 51, 0.3);
    padding: 0.4rem 0;
    color: #fff;
    background: linear-gradient(#198754, #29910d);
    font-weight: 600;
    text-align: center;
    border-radius: 50px;
    margin: 0.266667rem auto 17px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

section.bankcard_wrap.common_wrap.withdrawal_method {
    margin-top: 60px;
    padding: 15px;
}

.bankcard_wrap .bankcard_item:nth-child(2) {
    background: url(../img/bnck_bg_2.7fd9d41b.png) no-repeat;
    background-size: 100% 100%;
}

.bankcard_wrap .bankcard_item:nth-child(3) {
    background: url(../img/bnck_bg_3.21bedd5d.png) no-repeat;
    background-size: 100% 100%;
}

.bankcard_wrap .bankcard_item:nth-child(4) {
    background: url(../img/bnck_bg_4.98ff2e00.png) no-repeat;
    background-size: 100% 100%;
}

.bankcard_wrap .bankcard_item + .bankcard_item {
    margin-top: 0.266667rem;
}

.bankcard_wrap .bankcard_item .title {
    padding-left: 1.066667rem;
    height: 1.013333rem;
    line-height: 1.013333rem;
}

.bankcard_wrap .bankcard_item .card_number {
    text-align: center;
    min-height: 1.333333rem;
    padding: 0.266667rem 1.2rem;
    box-sizing: border-box;
    word-break: break-word;
    line-height: 0.533333rem;
    color: #198754;
}

.bankcard_wrap .bankcard_item .lock_wrap.locked .lock_icon {
    color: #fff;
}

.bankcard_wrap .bankcard_item .lock_wrap .lock_icon {
    position: relative;
    z-index: 2;
    margin-left: 0.133333rem;
    margin-top: 0.053333rem;
    color: #bbb;
}

.bankcard_wrap .bankcard_item .delete {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0.4rem;
}

.bankcard_wrap .common_submit {
    margin-top: 1.333333rem;
    padding: 0.4rem 0.266667rem;
}

.bankcard_wrap .exp {
    line-height: 0.64rem;
    padding: 0.533333rem 0.266667rem 0;
}

#accountInfo {
    width: 95%;
    margin: 80px auto 20px;
    /* background: url(../img/a2add608d554c6ed69cd370221c6c752.png); */
    background: #fb7701;
    border: 5px solid #ffc107;
    box-shadow: 0px 19px 20px #cacaca;
}

.van-cell.van-cell--clickable.infoaccount_method {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.van-cell.van-cell--clickable.infoaccount_method {
    background: #fb7701;
    border: 5px solid #ffc107;
    box-shadow: 0px 19px 20px #cacaca;
    width: 95%;
    margin: 0 auto;
    padding: 9px 12px;
    color: #fff;
}

#accountInfo a {
    text-decoration: none;
}

#accountInfo h5 {
    padding: 10px 0;
    color: #fff;
}

#accountInfo .user-value {
    color: #fff;
}

/* personalinfo page ends */

/* changePass page starts */

#changePass {
    margin: auto;

    margin-top: 80px;

    max-width: 700px;
}

#changePass .container {
    padding: 20px;
}

#changePass form .form-control {
    padding: 10px 15px;

    border-radius: 20px;
}

#changePass .submit-btn {
    display: block;

    width: 100%;

    font-size: 22px;

    padding-top: 3px;

    padding-bottom: 8px;

    border-radius: 35px;

    background-color: #232162;
}

/* changePass page ends */

/* withdrawInfo page starts */

#withdrawInfo {
    margin: auto;

    margin-top: 80px;

    max-width: 700px;

    padding-top: 30px;

    padding-bottom: 50px;
}

#withdrawInfo .container {
    padding: 20px;
}

#withdrawInfo form .form-control,
#withdrawInfo form .form-select {
    padding: 10px 15px;

    border-radius: 20px;
}

#withdrawInfo form .phone-input {
    padding-left: 50px;
}

#withdrawInfo .submit-btn {
    display: block;

    width: 100%;

    font-size: 22px;

    padding-top: 3px;

    padding-bottom: 8px;

    border-radius: 35px;

    background-color: #232162;
}

/* withdrawInfo page ends */

/* announcement starts */

#announcement {
    /* padding: 40px 0; */
    margin-top: 50px;
}

#announcement a {
    text-decoration: none;
}

#announcement .announcement-title h2 {
    font-size: 28px;

    text-align: center;

    color: #999;
}

#announcement .announcement-img img {
    border-radius: 20px;
}

#announcement .not-found-data {
    color: #1e1e1e;
}

/* announcement ends */

/* tutorial page starts */

#tutorial {
    background: #fff;
    width: 90%;
    margin: 80px auto 20px;
    border-radius: 10px;
    padding-bottom: 50px;
    box-shadow: 0px 3px 12px 3px #c5c4c4;
}

#tutorial p b {
    color: #fb7701;
    padding: 7px 0;
    display: block;
}

#bottomHeader a i {
    font-size: 16px;
}

#companyProfile,
#promotionReward {
    background: #fff;
    width: 90%;
    margin: 80px auto 20px;
    border-radius: 10px;
    padding-bottom: 50px;
    box-shadow: 0px 3px 12px 3px #c5c4c4;
}

#companyProfile b,
#promotionReward b {
    color: #fb7701;
    padding-bottom: 10px;
    display: block;
}

/* tutorial page ends */

/* deposit page starts */

#depositOptions {
    margin-top: 50px;
    padding: 30px 15px;
    background: #fff;
}

#depositOptions a {
    text-decoration: none;
}

#depositOptions h5 {
    text-decoration: none;

    color: #fb7701;

    margin-bottom: 0px;
}

.deposit-method-new h5 {
    text-align: center;
    /* border-bottom: 1px solid #fb7701; */
    width: auto;
    display: inline-block;
    /* margin: 0 auto; */
    color: #198754;
}

.deposit-method-new {
    text-align: center;
}

form.deposit_limit_recharge .form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

form.deposit_limit_recharge .form-group input {
    /* flex: 0 0 41%; */
    border: none;
    background: transparent;
}

form.deposit_limit_recharge {
    padding-bottom: 30px;
}

.button_radio_limit {
    float: left;
    margin: 0 5px 0 0;
    width: 100px;
    height: 33px;
    position: relative;
    color: #fff;
    border-radius: 50px;
    line-height: 11px;
    padding: 17px 0px;

}

.button_radio_limit label,
.button_radio_limit input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.button_radio_limit input[type="radio"] {
    opacity: 0.011;
    z-index: 100;
}

.button_radio_limit input[type="radio"]:checked + label {
    background: #fb7701;
    border-radius: 25px;
}

.button_radio_limit label {
    cursor: pointer;
    z-index: 90;
    /* line-height: 1.8em; */
    color: #fff;
}

.deposit-recharge-ammount-box .d_box {
    background: #198754;
    flex: 0 0 48%;
    text-align: center;
    color: #fff;
    padding: 4px 0;
    border-radius: 18px;
}

.deposit_limit_nmbr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.submit_btn_deposit {
    margin-top: 20px;
}

.btn.btn-danger.limit_recharge {
    background: #fb7701;
    width: 100%;
    border: none;
    color: #fff;
}

.select-deposit-method {
    margin-top: 56px;
    padding: 15px;
}

.select-deposit-method h5 {
    color: #198754;
    font-size: 15px;
    margin-bottom: 14px;
}

.trc20-select-item a {
    display: flex;
    justify-content: space-between;
    background: #fff6ef;
    padding: 15px;
    color: #fb7701;
    text-decoration: none;
    border-radius: 10px;
}

.deposit-method-new {
    text-align: center;
}

.info-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: 80px;
}

.info-box h2 {
    margin-bottom: 15px;
    text-align: center;
    color: #333;
}

.info-box p {
    margin: 10px 0;
    font-weight: bold;
}

.info-box span {
    font-weight: normal;
    color: #555;
}

.info-box a {
    text-decoration: none;
    background-color: #198754;
    color: #fff;
    display: block;
    text-align: center;
    padding: 10px 5px;
    border-radius: 10px;
    font-weight: normal;
}

.search-box {
    margin-bottom: 20px;
}
.search-box input[type="date"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.account-table-container {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}
.account_table {
    width: 100%;
    border-collapse: collapse;
}
.account_table,
.account_table{
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
.account_table th,
.account_table td{
    padding: 10px;
    text-align: left;
}
.account_table th {
    /* background-color: #0a0a09; */
    color: #000;
}
/* payForm */

#payForm {
    margin-top: 70px;

    padding: 40px 0;
}

#payForm form {
    margin-top: 0px;
}

#payForm .form-control {
    padding-top: 10px;

    padding-bottom: 10px;
}

#payForm form .btn {
    border-radius: 30px;

    padding: 15px 25px;

    font-weight: bold;

    margin-bottom: 20px;
}

#payForm .toggle-show-btn {
    text-decoration: none;

    font-size: 17px;
}

#payForm .remind-btn {
    background: #ff9a23;

    padding: 15px 20px;

    color: #fff;

    border-radius: 0px 15px 0px 15px;

    font-weight: bold;
}

#payForm .remind-text {
    margin-top: 20px;
}

#payForm .remind-text p {
    margin-bottom: 0px;
}

#payForm .depo-add {
    position: relative;
}

#payForm .depo-add .copybtn {
    position: absolute;

    right: 0;

    top: 0px;

    background-color: #4187f9;

    color: #fff;

    padding: 10px 20px;

    border-radius: 10px;

    text-decoration: none;

    cursor: pointer;
}

/* deposit page ends */

/* inviteFriend page starts */

#inviteTopHeader {
    background-color: #364759;
}

#inviteTopHeader .header-title h2 {
    color: #fff;

    font-size: 18px;

    font-weight: normal;
}

#inviteTopHeader i {
    color: #fff;

    font-size: 18px;
}

#inviteHeader {
    border-bottom-right-radius: 50%;

    border-bottom-left-radius: 50%;

    padding-top: 0px;
}

#inviteHeader img {
    max-width: 100%;
}

#inviteHeader a {
    text-decoration: none;
    background: #198754;
    color: #fff;
    padding: 15px 0;
    border-radius: 30px;
    font-weight: bold;
}

.home-body .tutorial-page#topHeader {
    background-color: #fb7701;
}

.qr_image_invite img {
    width: 100px;
    margin: 0 auto;
    position: absolute;
    top: 54%;
    left: 46%;
    transform: translate(-50%, -50%);
}

.qr_image_invite {
    background: url("../img/invite_bg.png");
    background-position: center;
    background-size: 100% 100%;
    height: 300px;
    position: relative;
    z-index: 2;
    text-align: center;
    width: 335px;
    margin: 0 auto;
}

#invitationLink {
    padding: 0px 0;
}

#invitationLink .invite-way p {
    font-size: 18px;
}

#invitationLink .invite-way .copy-btn {
    background-color: #198754;
    color: #fff;
    padding: 3px 23px;
    border-radius: 30px;
    border: none;
    margin-top: 10px;
}

.invite-way.text-center {
    background: #fff;
    padding: 17px 10px;
    box-shadow: 0px 3px 12px #c5c4c4;
    border-radius: 10px;
}

/* inviteFriend page ends */

/* teamReport page starts */

#teamReport {
    margin-top: 60px;

    padding: 0px 0;
}

#teamReport .search-bar .form-control {
    border-radius: 30px;
}

#teamReport .search-bar .btn {
    margin-left: -74px;

    background: #4187f9;

    color: #fff;

    border-radius: 30px;

    z-index: 9999;
}

.home-body.welcome #topHeader {
    background: #fff0e4;
}

#announcement .accordion-item {
    margin-bottom: 13px;
    box-shadow: 0px 3px 12px #c5c4c4;
}

.accordion-button:focus {
    border-color: #fb7701;
    box-shadow: none;
}

#announcement .accordion-item h2 button {
    font-size: 13px;
    padding: 14px 11px;
}

#teamReport .box {
    border-radius: 20px;
    padding: 0.266667rem 0;
    background: #fff;
    padding: 20px 10px;
    height: 100%;
    box-shadow: 0px 3px 12px #c5c4c4;
}

.text-green {
    color: #17c071;
}

#teamReport .box h5 {
    font-size: 14px;
    color: #198760;
}

/* teamReport page ends */

/* accountingDetails starts */

#accountingDetails {
    padding: 45px 20px;
    background: #fff;
    width: 90%;
    margin: 60px auto;
    box-shadow: 0px 3px 12px #c5c4c4;
    border-radius: 10px;
}

#accountingDetails .search-bar .form-control {
    border-radius: 5px;
    border: 1px solid #198754;
    margin-bottom: 6px;
}

.container.mt-0.accountdetails-nav-tab {
    background: #f2f2f2;
}

#accountingDetails .search-bar .btn {
    background: #198754;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 5px;
}

#accountingDetails .nav {
    justify-content: space-between;
    margin-top: 0px;
}

#accountingDetails .nav button {
    padding-top: 9px;
    padding-bottom: 9px;
}

#accountingDetails .nav-link {
    border: none;
    color: #198754;
    background: none;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
}

#accountingDetails .nav-link.active {
    border-radius: none;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 2px solid #fb7701;
    color: #fb7701;
}

#accountingDetails .tab-content h4 {
    color: #999;

    font-size: 22px;
}

/* accountingDetails ends */

/* rechargeRecord starts */

#rechargeRecord {
    margin-top: 60px;

    padding: 45px 0;
}

#rechargeRecord .nav {
    justify-content: space-between;

    margin-top: 0px;

    background: #fff;
}

#rechargeRecord .nav button {
    width: 45%;

    padding-top: 15px;

    padding-bottom: 15px;
}

#rechargeRecord .nav-link {
    background-color: #fff;

    border: none;

    color: #999;
}

#rechargeRecord .nav-link.active {
    border-radius: none;

    border-top: 0px;

    border-left: 0px;

    border-right: 0px;

    border-bottom: 4px solid #5028c1;

    color: #5028c1;
}

#rechargeRecord .tab-content h4 {
    color: #999;

    font-size: 22px;
}

/* accountingDetails ends */

/* company profile starts */

#companyProfile,
#promotionReward {
    margin: 70px auto;
}

/* company profile ends */

/* adp page css starts */

#afp {
    background-color: #003f5e;

    min-height: 200px;

    padding-top: 80px;

    border-bottom-right-radius: 50%;
}

#afp .profit-details .box {
    background: #f4f0ff;

    box-shadow: 0.026667rem 0.026667rem 0.106667rem rgb(51 51 51 / 30%);

    text-align: center;

    padding: 20px 5px;

    border-radius: 10px;

    height: 100%;
}

#afp .profit-details .box h5 {
    font-size: 17px;
}

#afp .color-yellow {
    color: #ff9a23;
}

.balance-transfer-form .transfer-option button {
    background-color: #ff9a23;

    padding: 5px 12px;

    margin-left: 5px;

    border-radius: 20px;

    color: #fff;
}

.balance-transfer-form .transfer-into {
    background-color: #003f5e;

    color: #fff;

    padding: 10px 15px;

    border-radius: 10px;
}

/* adp page css ends */

/* common css starts */

.white-wrapper {
    border-radius: 15px;

    padding-top: 15px;

    padding-bottom: 30px;
}

.font-18 {
    font-size: 18px;
}

.font-24 {
    font-size: 24px;
}

.text-blue {
    color: #4187f9;
}

#loginRegHeader {
    /*background-color: #003f5e;*/
}

.container.white-wrapper.order-mark {
    background: #498056;
    border: 2px solid #e0e0e0;
    margin: 0 10p;
    width: 90%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.393);
}

/* .commission-table.text-center.py-2 {
    border: 1px solid #fff;
    border-radius: 10px;
    color: #fff;
    background-color: #409e56;
} */
.commission-table.text-center.py-2 {
    /* border: 1px solid #fff;
    border-radius: 10px; */
    color: #fff;
    /* background-color: #409e56; */
}

.available-asset.text-center {
    color: #fff;
    /* font-size: 25px; */
}

.available-asset.text-center h4 {
    font-size: 17px;
}

.asset-commission p.font-24 {
    color: #02ff02;
}

i.fa-solid.fa-eye-slash {
    color: #fff;
}

/* #pageHeader {
    background: #fff0e4;
    min-height: 250px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    padding-top: 60px;
} */
#pageHeader {
    background: #498056;
    min-height: 250px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    padding-top: 20px;
}

h3.order_heading {
    color: gray;
    padding-top: 20px;
    font-size: 30px;
    margin-top: 20px;
}

.container.white-wrapper.order-mark {
    background: #498056;
    width: 90%;
}

.commission-table.text-center.py-2 {
    /* border: 1px solid #fff; */
    border-radius: 10px;
    color: #fff;
}

.valid-amount {
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-col-4 {
    width: 33.33333%;
}

.custom-col-2 {
    width: 16.6666666667%;
}

.custom-col-6 {
    width: 50%;
}

.color-red {
    color: red;
}

.not-found-data {
    font-size: 20px;
}

.hide-container {
    display: none;
}

img.logo_home {
    width: 180px;
    margin-top: 25px;
}

#topHeader .header-title {
    justify-content: start !important;
    padding: 0 15px;
}

/* common css ends */

/*spin css*/

/* WRAPPER */
#wrapper {
    margin: 40px auto 0;
    width: 100%;
    position: relative;
    text-align: center;
}

#txt {
    display: none;
}

/* WHEEL */
#wheel {
    width: 343px;
    height: 343px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 8px solid #eae6d0;
    box-shadow: rgba(55, 51, 42, 0.2) 0px 0px 10px,
        rgba(55, 51, 42, 0.05) 0px 3px 0px;
    transform: rotate(0deg);
    margin: 0 auto;
}

#wheel:before {
    content: "";
    position: absolute;
    /*border: 5px solid rgba(55, 51, 42, 0.1);*/
    width: 333px;
    height: 333px;
    border-radius: 50%;
    z-index: 1000;
}

#inner-wheel {
    width: 100%;
    height: 100%;

    -webkit-transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
    -moz-transition: all 6 cubic-bezier(0, 0.99, 0.44, 0.99);
    -o-transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
    -ms-transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
    transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
}

/* This will manipulate the slice sizes... now to figure out how. Read this: https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/. You'll need to figure out the numbers for EACH pie chart depending on how many pie slices there are and how big the circle is... This is going to be a doozy. But get a foundation of how to do it first! */
#wheel div.sec {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 200px 83px 0;
    border-color: #88c2b0 transparent;
    transform-origin: 83px 200px;
    left: 84px;
    top: -36px;
    opacity: 1;
}

#wheel div.sec:nth-child(1) {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-color: #d54227 transparent;
}

#wheel div.sec:nth-child(2) {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -mos-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    border-color: #c0702b transparent;
}

#wheel div.sec:nth-child(3) {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    border-color: #c98f2a transparent;
}

#wheel div.sec:nth-child(4) {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    border-color: #898e36 transparent;
}

#wheel div.sec:nth-child(5) {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(255deg);
    border-color: #138d6c transparent;
}

#wheel div.sec:nth-child(6) {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    border-color: #81b999 transparent;
}

#wheel div.sec:nth-child(7) {
    transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    border-color: #926c6c transparent;
}

#wheel div.sec:nth-child(8) {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    border-color: #d67260 transparent;
}

#wheel div.sec .fas {
    margin-top: -125px;
    color: rgba(55, 51, 42, 0.2);
    position: relative;
    z-index: 10000000;
    display: block;
    text-align: center;
    font-size: 36px;
    margin-left: -20px;

    text-shadow: rgba(234, 230, 208, 0.1) 0px -1px 0px,
        rgba(55, 51, 42, 0.2) 0px 1px 0px;
}

#spin {
    width: 68px;
    height: 68px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    box-shadow: rgba(55, 51, 42, 0.1) 0px 3px 0px;
    z-index: 1000;
    background: #eae6d0;
    cursor: pointer;
    font-family: "Overpass", sans-serif;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#spin:after {
    content: "SPIN";
    font-size: 20px;
    text-align: center;
    line-height: 68px;
    color: #bfbba6;
    text-shadow: 0 2px 0 #f2eedd, 0 -2px 0 rgba(55, 51, 42, 0.3);
    position: relative;
    z-index: 100000;
    width: 68px;
    height: 68px;
    display: block;
}

#spin:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent #f2eedd transparent;
    top: -12px;
    left: 14px;
}

#inner-spin {
    width: 54px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: red;
    z-index: 999;
    box-shadow: rgba(234, 230, 208, 1) 0px -2px 0px inset,
        rgba(234, 230, 208, 1) 0px 2px 0px inset, rgba(0, 0, 0, 0.4) 0px 0px 5px;

    background: rgb(234, 230, 208);
    /* Old Browsers */
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(211, 208, 193, 1) 100%
    );
    /* FF3.6+ */
    background: -webkit-gradient(
        radial,
        center center,
        0px,
        center center,
        100%,
        color-stop(0%, rgba(234, 230, 208, 1)),
        color-stop(100%, rgba(211, 208, 193, 1))
    );
    /* Chrome, Safari 4+ */
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(211, 208, 193, 1) 100%
    );
    /* Chrome 10+, Safari 5.1+ */
    background: -o-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(211, 208, 193, 1) 100%
    );
    /* Opera 12+ */
    background: -ms-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(211, 208, 193, 1) 100%
    );
    /* IE10+ */
    background: radial-gradient(
        ellipse at center,
        rgba(234, 230, 208, 1) 0%,
        rgba(211, 208, 193, 1) 100%
    );
    /* W3C */
    /* Remove this if not necessary */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAE6D0', endColorstr='#D3D0C1', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

#spin:active #inner-spin {
    box-shadow: rgba(55, 51, 42, 0.4) 0px 0px 5px inset;
}

#spin:active:after {
    font-size: 18px;
}

#shine {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(234, 230, 208, 0.99) 1%,
        rgba(234, 230, 208, 0.91) 9%,
        rgba(234, 230, 208, 0) 100%
    );
    /* FF3.6+ */
    background: -webkit-gradient(
        radial,
        center center,
        0px,
        center center,
        100%,
        color-stop(0%, rgba(234, 230, 208, 1)),
        color-stop(1%, rgba(234, 230, 208, 0.99)),
        color-stop(9%, rgba(234, 230, 208, 0.91)),
        color-stop(100%, rgba(234, 230, 208, 0))
    );
    /* Chrome, Safari 4+ */
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(234, 230, 208, 0.99) 1%,
        rgba(234, 230, 208, 0.91) 9%,
        rgba(234, 230, 208, 0) 100%
    );
    /* Chrome 10+, Safari 5.1+ */
    background: -o-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(234, 230, 208, 0.99) 1%,
        rgba(234, 230, 208, 0.91) 9%,
        rgba(234, 230, 208, 0) 100%
    );
    /* Opera 12+ */
    background: -ms-radial-gradient(
        center,
        ellipse cover,
        rgba(234, 230, 208, 1) 0%,
        rgba(234, 230, 209, 0.99) 1%,
        rgba(234, 230, 208, 0.91) 9%,
        rgba(234, 230, 208, 1) 100%
    );
    /* IE10+ */
    background: radial-gradient(
        ellipse at center,
        rgba(234, 230, 208, 1) 0%,
        rgba(234, 230, 208, 0.99) 1%,
        rgba(234, 230, 208, 0.91) 9%,
        rgba(234, 230, 208, 0) 100%
    );
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE 6-9 fallback on horizontal gradient */

    opacity: 0.1;
}

/* ANIMATION of the tab clicking to the side as the pie edges come around. When I added more pie slice, it looked glitchy, so we'll not have this for now. */
/* @-webkit-keyframes hh {
  0%, 100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

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

@keyframes hh {
  0%, 100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50% {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}
*/
.spin {
    -webkit-animation: hh 0.1s;
    /* Chrome, Safari, Opera */
    animation: hh 0.1s;
}

#spin.grab_spin {
    position: unset;
    margin: 0;
    width: 100%;
    border-radius: 50px;
    background: #0a9f0a;
    font-family: system-ui;
    height: auto;
}

#spin.grab_spin::after {
    content: "";
    height: auto;
    text-shadow: none;
}

#exampleModal.modal.fade .modal-dialog {
    transform: scale(0.8);
}

#exampleModal.modal.fade.show .modal-dialog {
    transform: scale(1);
}

.modal-dialog.grab_spin {
    margin: 10rem auto;
    width: 95%;
}

.mobile-prefix {
    position: absolute;
    top: 6px;
    left: 7px;
    width: auto;
    background: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 4px 7px;
}

.phone_nmbr {
    position: relative;
    z-index: 2;
}

input#phoneNumber {
    padding-left: 20px !important;
}

.iti {
    width: 100%;
    display: flex;
}

.iti__flag-container {
    position: unset;
}

#loginReg form .form-control:focus {
    box-shadow: none;
}

.van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.van-popup--bottom.van-popup--round {
    border-radius: 4.26667vw 4.26667vw 0 0;
}

.van-popup--bottom.van-popup--round {
    border-radius: 5.33333vw 5.33333vw 0 0;
}

.van-popup--bottom {
    bottom: 0;
    left: 0;
    width: 100%;
}

.van-popup {
    position: fixed;
    max-height: 100%;
    overflow-y: auto;
    background-color: #fff;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-overflow-scrolling: touch;
}

.area-wrap {
    color: #333;
}

.area-wrap .query-bar {
    display: flex;
    align-items: center;
    margin: 2.66667vw 4vw 0;
    padding: 0 1.33333vw;
    height: 10.66667vw;
    border-radius: 1.6vw;
    background: #f5f5f5;
}

.area-wrap .query-bar .icon {
    font-size: 6.4vw;
    color: #bbbcc1;
}

.area-wrap .query-bar input {
    flex: 1;
    border: 0;
    background: none;
    line-height: 10.66667vw;
    font-size: 3.73333vw;
}

.area-wrap ul {
    height: 60vw;
    overflow: auto;
    margin: 0 4vw;
}

.area-wrap li {
    display: flex;
    padding: 2.93333vw 0;
    border-bottom: 1px solid #e8edf3;
}

.area-wrap li .icon {
    margin-right: 2.66667vw;
}

.area-wrap li .icon img {
    height: 4.26667vw;
}

.area-wrap .label {
    flex: 1;
    font-size: 3.73333vw;
}

.modal#statusSuccessModal .modal-content,
.modal#statusErrorsModal .modal-content {
    border-radius: 30px;
}

.modal#statusSuccessModal .modal-content svg,
.modal#statusErrorsModal .modal-content svg {
    width: 100px;
    display: block;
    margin: 0 auto;
}

.modal#statusSuccessModal .modal-content .path,
.modal#statusErrorsModal .modal-content .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.modal#statusSuccessModal .modal-content .path.circle,
.modal#statusErrorsModal .modal-content .path.circle {
    -webkit-animation: dash 0.9s ease-in-out;
    animation: dash 0.9s ease-in-out;
}

.modal#statusSuccessModal .modal-content .path.line,
.modal#statusErrorsModal .modal-content .path.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash 0.95s 0.35s ease-in-out forwards;
    animation: dash 0.95s 0.35s ease-in-out forwards;
}

.modal#statusSuccessModal .modal-content .path.check,
.modal#statusErrorsModal .modal-content .path.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check 0.95s 0.35s ease-in-out forwards;
    animation: dash-check 0.95s 0.35s ease-in-out forwards;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url(../img/flags.png);
    }
}

.iti-mobile .iti--container {
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
}

.iti__country-list {
    bottom: -81px;
    max-height: 400px !important;
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }

    100% {
        stroke-dashoffset: 900;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }

    100% {
        stroke-dashoffset: 900;
    }
}

.box00 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.container.modal_goup_alert {
    padding-bottom: 100px;
}

/* responsive css */

@media only screen and (min-width: 1400px) {
    .container {
        max-width: 980px;
    }
}