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

.chat-box-left .chat-body-left {
    height: 640px !important;
}
.chat-box-right .chat-body {
    height: 520px !important;
}

/* ======================================
   Admin Monochrome Theme (Gray-based)
   ====================================== */

/* Override primary color to gray */
:root {
    --admin-gray-100: #f8f9fa;
    --admin-gray-200: #e9ecef;
    --admin-gray-300: #dee2e6;
    --admin-gray-400: #ced4da;
    --admin-gray-500: #adb5bd;
    --admin-gray-600: #6c757d;
    --admin-gray-700: #495057;
    --admin-gray-800: #343a40;
    --admin-gray-900: #212529;
    --admin-primary: #495057;
    --admin-primary-light: #6c757d;
    --admin-primary-dark: #343a40;
}

/* Primary Button */
.btn-primary {
    background-color: var(--admin-gray-700) !important;
    border-color: var(--admin-gray-700) !important;
    box-shadow: 0 1px 2px 0 rgba(73, 80, 87, 0.35) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--admin-gray-800) !important;
    border-color: var(--admin-gray-800) !important;
}

/* Outline Primary Button */
.btn-outline-primary {
    color: var(--admin-gray-700) !important;
    border-color: var(--admin-gray-700) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--admin-gray-700) !important;
    border-color: var(--admin-gray-700) !important;
    color: #fff !important;
}

/* Sidebar (Startbar) */
.startbar {
    background-color: var(--admin-gray-900) !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link {
    color: var(--admin-gray-400) !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active {
    color: #fff !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active::before,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover::before {
    border-color: var(--admin-gray-500) !important;
    background-color: var(--admin-gray-500) !important;
}
.startbar .startbar-menu .navbar-nav .menu-label {
    color: var(--admin-gray-600) !important;
}
.startbar .brand {
    background-color: var(--admin-gray-900) !important;
}

/* Topbar */
.topbar {
    background-color: var(--admin-gray-800) !important;
}
.topbar-custom {
    background-color: var(--admin-gray-800) !important;
}
.topbar .welcome-text h3 {
    color: #fff !important;
}
.topbar .nav-link,
.topbar .nav-icon {
    color: var(--admin-gray-300) !important;
}
.topbar .nav-link:hover,
.topbar .nav-icon:hover {
    color: #fff !important;
}

/* Auth Header Box (Login page) */
.auth-header-box {
    background-color: var(--admin-gray-800) !important;
}
.auth-header-box .text-muted {
    color: var(--admin-gray-300) !important;
}

/* Links */
a {
    color: var(--admin-gray-700);
}
a:hover {
    color: var(--admin-gray-900);
}

/* Form Controls Focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--admin-gray-500) !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

/* Form Switch */
.form-switch-primary .form-check-input:checked {
    background-color: var(--admin-gray-700) !important;
    border-color: var(--admin-gray-700) !important;
}

/* Pagination */
.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active a:focus,
.datatable-pagination .datatable-active a:hover,
.datatable-pagination .datatable-active button,
.datatable-pagination .datatable-active button:focus,
.datatable-pagination .datatable-active button:hover,
.dataTable-pagination .active a,
.dataTable-pagination .active a:focus,
.dataTable-pagination .active a:hover {
    background-color: var(--admin-gray-700) !important;
    border-color: var(--admin-gray-700) !important;
}

/* Nav Tabs */
.nav-tabs-custom .nav.nav-tabs .nav-link.active {
    background-color: rgba(108, 117, 125, 0.08) !important;
    border-color: var(--admin-gray-700) !important;
    color: var(--admin-gray-700) !important;
}
.nav-tabs-custom .nav.nav-tabs .nav-link.active i {
    color: var(--admin-gray-700) !important;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-bottom: 1px solid var(--admin-gray-700) !important;
}

/* Cards */
.card {
    border: 1px solid var(--admin-gray-200) !important;
}

/* Progress Bar */
.bg-primary {
    background-color: var(--admin-gray-700) !important;
}

/* Text Primary */
.text-primary {
    color: var(--admin-gray-700) !important;
}

/* Badge Primary */
.badge.bg-primary {
    background-color: var(--admin-gray-700) !important;
}

/* Selectr */
.selectr-tag {
    background: var(--admin-gray-700) !important;
}

/* Datepicker */
.datepicker-cell.focused:not(.selected),
.datepicker-cell:not(.disabled):hover {
    background-color: var(--admin-gray-700) !important;
}

/* Modal Header */
.modal-header {
    background-color: var(--admin-gray-800) !important;
}

/* Menu Icons */
.startbar .startbar-menu .navbar-nav .nav-item .nav-link .menu-icon {
    color: var(--admin-gray-500) !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover .menu-icon,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active .menu-icon {
    color: #fff !important;
}

/* Alert Primary */
.alert-primary {
    background-color: var(--admin-gray-200) !important;
    border-color: var(--admin-gray-300) !important;
    color: var(--admin-gray-800) !important;
}

/* List Arrow */
.list-arrow::before {
    color: var(--admin-gray-700) !important;
}

/* Dashboard Item Action */
.uppy-Dashboard-Item-action--remove {
    color: var(--admin-gray-700) !important;
}
.uppy-Dashboard-Item-action--remove:focus,
.uppy-Dashboard-Item-action--remove:hover {
    color: var(--admin-gray-900) !important;
}