@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

body {
    font-family: "Barlow";
}

.display-none {
    display: none;
}

.error {
    color: rgba(239,77,86)!important;
    font-size: .875em;
}
.text-usdt {
    color: #27a17b;
}

.wallet-header {
    font-size: 2.5rem;
}

.wallet-header-currency {
    font-size: 1.5rem;
    font-weight: bold;
}

.plan_none {

}

.plan_a {
    background: #f5f5f5;
    color: #000;
}

.plan_b {
    background: #1e90ff;
    color: #fff;
}

.plan_c {
    background: #008080;
    color: #fff;
}

.plan_d {
    background: #fa8072;
    color: #fff;
}

.plan_e {
    background: linear-gradient(45deg, #7F462C 0%, #B87333 45%, #D9A066 70%, #B87333 85%, #7F462C 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(184, 115, 51, 0.6);
    color: #000000;
}

.plan_f {
    background: linear-gradient(45deg, #A8A8A8 0%, #C0C0C0 45%, #E0E0E0 70%, #C0C0C0 85%, #A8A8A8 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.6);
    color: #000000;
}

.plan_g {
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(255, 223, 0, 0.6);
    color: #000000;
}
@keyframes highRankAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


select.goog-te-combo {
    width: 150px;
}

.box_change_status {
    padding: 10px;
}

.border-open {
    border-color: #4290d8;
}

.border-grey {
    border-color: #b3b3b3;
}
.btn-open {
    background: #4290d8;
    color: #fff;
}

.btn-open:hover, .btn-open:active {
    background: #76c0ff !important;
    color: #fff !important;
}

.border-yellow {
    border-color: #9f882c;
}

.border-muted {
    border-color: #f6f6f6 !important;
}

.btn-yellow {
    background: #9f882c;
    color: #fff;
}

.btn-yellow:hover, .btn-yellow:active {
    background: #d1b12f !important;
    color: #fff !important;
}

.text-crimson {
    color: #8c1919;
}
.border-crimson {
    border-color: #8c1919;
}

.btn-crimson {
    background: #8c1919;
    color: #fff;
}

.btn-crimson:hover, .btn-crimson:active {
    background: #d31f1f !important;;
    color: #fff !important;;
}

.bg-gray-10 {
    background: #efefef;
}
.bg-default {
    background: #3384d7;
    color: #fff;
}
.bg-default:hover, .bg-default:active {
    background: #3893f3 !important;
    color: #fff !important;;
}

.border-default {
    border-color: #3384d7 !important;
}

.text-default {
    color: #3384d7;
}

.bg-end {
    background: #757575;
    color: #fff;
}

.bg-end:hover, .bg-end:active {
    background: #9f9f9f !important;
    color: #fff !important;;
}
/*
* public
 */
.stepBar {
    display: flex;
    max-width: 400px;
    position: relative;
    margin: 0px auto;
    text-align: center;
}
.stepBar p.description {
    font-size: 10px;
    font-weight: normal;
}
.stepBar li {
    font-size: 14px;
    list-style: none;
    position: relative;
    width: 33.333%;
    font-weight: 600;
}
.stepBar li:after {
    background: #D0E1F9;
    content: "";
    width: calc(100% - 30px);
    height: 2px;
    position: absolute;
    left: calc(-50% + 15px);
    top: 14px;
}
.stepBar li:first-child:after {
    display: none;
}
.stepBar li span {
    background: #e3e3e3;
    color: #ffffff;
    display: inline-block;
    height: 30px;
    margin-bottom: 5px;
    line-height: 30px;
    width: 30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.stepBar .visited:after {
    background: #3384d7;
}
.stepBar .visited span {
    background: #3384d7;
}


input.number-form {
    width: 40px;
    text-align: center;
    font-size: 35px;
    font-weight:500;

    /*border: 1px solid #f1f1f1;*/
    border: 1px solid #fff;
    padding: 10px 0px !important;
}

input.number-form::placeholder {
    color: #e4e4e4;
}

input.special-form::placeholder {
    color: #e4e4e4;
}

.amount {
    font-size: 40px;
    font-weight: 600;
}

.slide-in {
    animation: slideIn 0.4s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
    }
}
.slide-in-left {
    animation: slideInLeft 0.4s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

input.no-zoom,
select.no-zoom {
    font-size: 16px;
}