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

.home-body,
.blue-body {

    background-color: #fff;
    max-width: 980px;
    margin: auto;

}

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

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

.gray-body #topHeader .header-title h2 {

    color: #0cab00;

    font-size: 22px;

    font-weight: normal;

}

.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: 44px !important;
}


#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;
}

#topHeader {
    background-color: #fff0e4;
    z-index: 999999999999999;
    max-width: 980px;
    margin: auto;
}

#topHeader header {

    position: relative;

}

#topHeader .header-title h2 {
    color: #0cab00;
    font-size: 22px;
    font-weight: bold;
}

#topHeader .header-right {
    position: absolute;
    right: 0;
    height: 100%;
    align-items: center;
    top: 0;
    margin-right: 10px;
    color: #fb7701;
    font-weight: 500;
}

/* 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: #fb7701;
    margin-top: 15px;
    background: #fff0e4;
    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: .266667rem;
    margin-top: 60px;
}

.withdrawal.new_item .withdrawal_amount_box {
    padding-left: .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: .32rem;
}

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

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

.withdrawal.new_item .withdrawal_input {
    width: 94%;
    margin: 0 auto .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: .26667rem .42667rem;
    overflow: hidden;
    color: #323233;
    font-size: 13px;
    line-height: .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: .42667rem;
    bottom: 0;
    left: .42667rem;
    border-bottom: .02667rem solid #ebedf0;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.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 20px;
    margin-top: 50px;
}

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


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

.withdrawal.new_item .withdrawal__bottom-hint {
    border-radius: .16rem;
    margin-top: .266667rem;
    padding: .266667rem .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: .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: #fb7701;
    text-align: center;
    margin-bottom: 14px;
}

#routeTabs .withdraw {
    background: #0cab00 !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: linear-gradient(45deg, #fb7701, #ffc107);
}

.available-hall {
    background: linear-gradient(45deg, #fb7701, #f69745);
}


#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: #fb7701;
    max-width: 980px;
    margin: auto;
}

#bottomHeader a {

    color: #fff;

    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 #ffc107;
}

/* 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: .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: .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: #fb7701;
    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: #1fb36f;
}

.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.0);

    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.0);

    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: #fff;
    padding: 20px 10px;
    height: 100%;
    box-shadow: 0px 3px 12px #c5c4c4;
}

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

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

/* 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;
}

#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-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 / 40%);
    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: #fb7701;
    text-align: center;
    margin: 10px 0 10px;
    font-weight: 600;
    overflow: hidden;
}

.price {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fb7701;
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 8px;
}

.wishlist-icon a {
    background: #dc3545;
    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 #fb7701;
    color: #fb7701;
}

#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;
    /* border: 1px solid #1fbd74; */
    padding: 10px;
    background: #f2f2f2;
    border-radius: 8px;
}

.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;
}


/* order ends */

/* profile css starts */

#userDetails h6 {
    font-size: 13px;
}

#userDetails {
    /* background: #fff; */
    padding-top: 50px;
    color: #fff;
    font-size: 13px;
}




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.ms-4 a {
    text-decoration: none;
    background: #ff0000;
    color: #fff;
    padding: 6px 17px;
    line-height: 31px;
    border-radius: 5px;
}

#userDetails .user .user-level {
    background: #1aaf1a;
    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/shape_profile.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    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: #fb7701;
}

.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 .user-buttons {
    display: flex;
    justify-content: space-between;
}

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

.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: #fb7701;
}

.user-balance h6.area_new {
    color: #fb7701;
    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: #fb7701;
    flex: 0 0 50%;
}

.user-info .top-middle .user-buttons .withdraw {
    background: #1aaf1a;
    flex: 0 0 48%;
}

.user-info .middle-part,
.user-info .last-part {

    /*display: none;*/

}

/* top middle part ends */

.user-info .last-part {

    /*background: #cfaa8e;*/

    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: #fb7701;
}

#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: #fb7701 !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: #fb7701;

    font-size: 18px;

    display: block;

    padding-bottom: 0px;

}

#loginReg .is-account a {

    text-decoration: none;

    color: #ff9a23;

    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: #0cab00;

    font-size: 22px;

}

.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: .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: #29910d;
    border: none;
    color: #fff;
    padding: 8px 0;
    text-transform: capitalize;
    border-radius: 50px;
    margin-top: 15px;
}

.withdrawal_method .common_submit {
    width: 60%;
    box-shadow: .026667rem .026667rem .106667rem rgba(51, 51, 51, .3);
    padding: .4rem 0;
    color: #fff;
    background: linear-gradient(#198754, #29910d);
    font-weight: 600;
    text-align: center;
    border-radius: 50px;
    margin: .266667rem auto 17px;
    -webkit-transition: all .5s;
    transition: all .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: .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: .266667rem 1.2rem;
    box-sizing: border-box;
    word-break: break-word;
    line-height: .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: .133333rem;
    margin-top: .053333rem;
    color: #bbb
}

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

.bankcard_wrap .common_submit {
    margin-top: 1.333333rem;
    padding: .4rem .266667rem
}

.bankcard_wrap .exp {
    line-height: .64rem;
    padding: .533333rem .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: 22px;
}

#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;
}

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

.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;
    background: #198754;
    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: #0cab00;
    border-radius: 5px;
}

.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: #fb7701;
    color: #fff;
    display: block;
    text-align: center;
    padding: 10px 5px;
    border-radius: 10px;
}

.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 th, .account_table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
.account_table th {
    background-color: #fb7701;
    color: white;
}
/* 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: #fb7701;
}

#inviteTopHeader .header-title h2 {

    color: #fff;

    font-size: 22px;

    font-weight: normal;

}

#inviteTopHeader i {

    color: #fff;

    font-size: 22px;

}

#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: #efb710;
    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: #fb7701;
}

/* 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 #fb7701;
    margin-bottom: 6px;
}

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

#accountingDetails .search-bar .btn {
    background: #1fbd74;
    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: #1fbd74;
    background: none;
    padding: 0;
}

#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: #fb7701;
    margin: 0 10p;
    width: 90%;
}

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

.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;
}

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

.container.white-wrapper.order-mark {
    background: #fb7701;
    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: 70px;
}

#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, .99, .44, .99);
    -moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
    -o-transition: all 6s cubic-bezier(0, .99, .44, .99);
    -ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
    transition: all 6s cubic-bezier(0, .99, .44, .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, .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 .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .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;

    }

}