/* CSS Document */
/* =========================================================
   THEME FOR ADMINLTE
   ========================================================= */

:root{

    /* ===================================
       BRAND COLORS
    =================================== */

    --bot-primary: #3b82f6;
    --bot-primary-hover: #2563eb;
    --bot-primary-dark: #1d4ed8;

    --bot-secondary: #5ecb5e;
    --bot-secondary-hover: #48b748;
    --bot-secondary-dark: #33963a;

    --bot-accent: #4fc3ff;
    --bot-gold: #e6bf53;

    --bot-success: #4ade80;
    --bot-warning: #f5b942;
    --bot-danger: #ef4444;
    --bot-info: #38bdf8;

    /* ===================================
       BACKGROUNDS
    =================================== */

    --bot-bg: #071018;
    --bot-bg2: #0d1826;

    --bot-sidebar: #08131f;
    --bot-navbar: #0c1725;

    --bot-card: #2a415f;
    --bot-card2: #203854;
    --bot-card-hover: #4a709d;

    --bot-input: #324a6d;
    --bot-input-focus: #3b5d86;

    /* ===================================
       TEXT
    =================================== */

    --bot-text: #ffffff;
    --bot-text-light: #dce7f5;
    --bot-muted: #a5b7ca;

    /* ===================================
       BORDER
    =================================== */

    --bot-border: rgba(255,255,255,.08);
    --bot-border-active: rgba(59,130,246,.35);
    --bot-border-success: rgba(94,203,94,.30);

    /* ===================================
       SHADOWS
    =================================== */

    --bot-shadow:
        0 18px 45px rgba(0,0,0,.45);

    --bot-shadow-soft:
        0 8px 24px rgba(0,0,0,.28);

    --bot-shadow-primary:
        0 0 18px rgba(59,130,246,.18);

    --bot-shadow-success:
        0 0 18px rgba(94,203,94,.16);

    /* ===================================
       GRADIENTS
    =================================== */

    --bot-gradient-body:
        linear-gradient(135deg,#071018,#0d1826);

    --bot-gradient-sidebar:
        linear-gradient(180deg,#0d1b2d,#071018);

    --bot-gradient-card:
        linear-gradient(180deg,#41658f,#35557d);

    --bot-gradient-primary:
        linear-gradient(135deg,#4fc3ff,#3b82f6);

    --bot-gradient-secondary:
        linear-gradient(135deg,#72db72,#48b748);

    --bot-gradient-active:
        linear-gradient(90deg,#3b82f6,#5ecb5e);

    --bot-gradient-button:
        linear-gradient(90deg,#3b82f6,#5ecb5e);

    --bot-gradient-blue:
        linear-gradient(135deg,#0f6fff,#52c6ff);

    --bot-gradient-success:
        linear-gradient(135deg,#0fff2b,#52ff61);

    --bot-gradient-danger:
        linear-gradient(135deg,#ff0f0f,#ff7a52);

    /* ===================================
       CHARTS
    =================================== */

    --chart-primary: #3b82f6;
    --chart-secondary: #5ecb5e;
    --chart-third: #4fc3ff;
    --chart-fourth: #e6bf53;
    --chart-danger: #ef4444;
}

/* =========================================================
   BODY
   ========================================================= */

body{
    background: var(--bot-bg) !important;
    color: var(--bot-text) !important;
    font-family: 'Poppins', sans-serif;
}

a{
    color: #a3c38f !important;
}

.content-wrapper{
    background:
        radial-gradient(circle at top left,
        rgba(18,214,197,0.08),
        transparent 25%),

        radial-gradient(circle at bottom right,
        rgba(77,93,255,0.08),
        transparent 25%),

        var(--bot-bg2) !important;
}

.content-wrapper::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(173, 173, 173, 0.1);
    z-index: 0;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.main-sidebar{
    background:var(--bot-gradient-sidebar) !important;
    border-right: 1px solid var(--bot-border);
}

.brand-link{
    border-bottom: 1px solid var(--bot-border) !important;
    background: rgba(18,214,197,0.05);
}

.brand-text{
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
}

.sidebar-dark-primary .nav-sidebar > .nav-item{
    margin: 2px 0;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link{
    color: var(--bot-text-light);
    border-radius: 3px;
    /*margin: 4px 10px;*/
    transition: 0.3s;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover{
    background:var(--bot-secondary);

    color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active{
    background: linear-gradient(90deg, #2fd13d, #2f6dd1) !important;
    border: 1px solid #24695d;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    color: #fff !important;

    box-shadow: var(--bot-shadow);
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active, 
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus, 
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover{
    color: var(--bot-bg) !important;
}
/* =========================================================
   NAVBAR
   ========================================================= */

.main-header{
    background: var(--bot-gradient-sidebar) !important;
    border-bottom: 1px solid var(--bot-border) !important;
}

.main-header .nav-link{
    color: var(--bot-text-light) !important;
}

.main-header .nav-link:hover{
    color: #fff !important;
}

/* =========================================================
   CARDS
   ========================================================= */

.card{
    background: linear-gradient(
        180deg,
        var(--bot-card),
        var(--bot-card2)
    ) !important;

    border: 1px solid var(--bot-border) !important;

    border-radius: 5px !important;

    box-shadow: var(--bot-shadow);

    overflow: hidden;
}

.card-header{
    background: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid var(--bot-border) !important;
}

.card-header .img-fluid{
    height: 100px;
    width: auto;
}

.card-title{
    color: #fff;
    font-weight: 600;
}

.card-body{
    color: var(--bot-text-light);
}
.card.bg-info{
    background: var(--bot-gradient-blue) !important;
}
.card.bg-success{
    background: var(--bot-gradient-success) !important;
}
.card.bg-primary{
    background: var(--bot-gradient-primary) !important;
}

.card.bg-danger{
    background: var(--bot-gradient-danger) !important;
}

/* =========================================================
   SMALL BOXES / DASHBOARD CARDS
   ========================================================= */

.small-box{
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid var(--bot-border);

    background:
        linear-gradient(
            135deg,
            rgba(18,214,197,0.15),
            rgba(77,93,255,0.15)
        ) !important;

    box-shadow: var(--bot-shadow);
}

.small-box h3,
.small-box p{
    color: #fff !important;
}

.small-box .icon{
    color: rgba(255,255,255,0.15) !important;
}
.small-box.bg-info{
    background: linear-gradient(
        180deg,
        #17a2b8,
        var(--bot-card)
    ) !important;
}
.small-box.bg-success{
    background: linear-gradient(
        180deg,
        #28a745,
        var(--bot-card)
    ) !important;
}
.small-box.bg-primary{
    background: linear-gradient(
        180deg,
        var(--bot-primary),
        var(--bot-card)
    ) !important;
}

.small-box.bg-danger{
    background: linear-gradient(
        180deg,
        #dc3545,
        var(--bot-card)
    ) !important;
}

.home-box{
    border-radius: 5px !important;
    overflow: hidden;
    border: 1px solid #cfa14a61;

    background:
        linear-gradient(
            135deg,
            rgba(18,214,197,0.15),
            rgba(77,93,255,0)
        ) !important;

    box-shadow: var(--bot-shadow);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px 10px;
}
.home-box .icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 7px 9px;
    font-size: 25px;
}

.home-box.bg-info{
}
.home-box.bg-info .icon{
    color: #19d9e3;
    background: transparent;
    border: 1px solid #00f2fe;
    box-shadow: 0px 0px 5px 2px #3eb6a1;
}
.home-box.bg-success{

}
.home-box.bg-success .icon{
    color: #19e334;
    background: transparent;
    border: 1px solid #00fe1e;
    box-shadow: 0px 0px 5px 2px #3eb652;

}
.home-box.bg-danger{

}
.home-box.bg-danger .icon{
    color: #e31c19;
    background: transparent;
    border: 1px solid #fe2200;
    box-shadow: 0px 0px 5px 2px #b63e3e;
}
.home-box.bg-primary{

}
.home-box.bg-primary .icon{
    color: #e3ad19;
    background: transparent;
    border: 1px solid #fed800;
    box-shadow: 0px 0px 5px 2px #b6a23e;
}
.home-box.bg-primary .icon{

}

.home-box .inner{
}

.home-box .inner p{
    margin: 10px 0 0 0;
    font-size: 0.8rem;
}

.home-box .inner h3{
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.home-card{
    border-radius: 5px !important;
    overflow: hidden;
    min-height: 200px;
    border: 1px solid var(--bot-border);
    box-shadow: var(--bot-shadow);
}
.home-card .card-header a{
    float: right;
    color: var(--bot-primary);
}
.income-card{
    list-style: none;
    margin: 0;
    padding: 0;
}

/* .income-card li{
    padding: 5px 0px;
    border: 0;
    margin: 5px 0;
    padding: 5px;
    font-size: 0.8rem;
}
.income-card li span{
    float: right;
    color: #76ce81;
    font-size: 1rem;
}
.income-card li:last-child{
    border-top: 5px solid var(--bot-border);
    font-size: 1rem;
    border-bottom: 0;
}
.income-card li:last-child span{
    float: right;
    color: #ffce81;
    font-size: 1.2rem;
} */

.recent-income{
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent-income li{
    padding: 5px 0px;
    border-bottom: 1px solid var(--bot-border);
    margin: 5px 0;
    padding: 5px;
    font-size: 0.8rem;
}
.recent-income li:nth-child(odd){
    border: 0;
    margin-top: 0px;
    margin-bottom: -15px;
    font-size: 1rem;
}
.recent-income li:nth-child(even){
}
.recent-income li:last-child{
    border: 0; 
}
.recent-income li .income-type{

}
.recent-income li .income-meta{

}
.recent-income li .income-amount{
    float: right;
    color: #76ce81;

}
.recent-income li .income-date{
    float: right;
}

.profile-card{
    overflow: hidden;

    /* background:
        linear-gradient(
            135deg,
            rgba(18,214,197,0.15),
            rgba(77,93,255,0)
        ) !important;

    box-shadow: var(--bot-shadow); */
    display: flex;
    align-items: flex-start;
    gap: 35px;
    padding: 20px 0 20px 20px;
}
.profile-card .profile-image{
    text-align: center;
}
.profile-card .profile-image img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.profile-card .profile-image img.bg-success{
    border: 2px solid #40bc40;
    box-shadow: 0px 0px 5px 2px #42ce42;
}
.profile-card .profile-image img.bg-danger{
    border: 2px solid #bc4c40;
    box-shadow: 0px 0px 5px 2px #ce4442;
}
.profile-card .profile-image h3{
    font-size: 0.8rem;
    margin: 2px 0;
}
.profile-card .profile-image h4{
    font-size: 1rem;
}
.profile-card .profile-data {
}
.profile-card .profile-data p{
    margin: 5px 0;
    font-size: 1rem;
}
.profile-card .profile-data p span{
    float: right;
}
.profile-card .status-btn{
    background: transparent !important;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 0.6rem !important;
}
.profile-card .status-btn.btn-success{
    border: 1px solid #0f0 !important;
    box-shadow: 0px 0px 5px 1px #0f0;
    color: #67ff2c !important;
}
.profile-card .status-btn.btn-danger{
    border: 1px solid rgb(255, 38, 0) !important;
    box-shadow: 0px 0px 5px 1px rgb(255, 55, 0);
    color: #ff562c !important;
}
.profile-card .input-group{
    
}
.profile-card .input-group input{
    border: 0 !important;
    background-color: #192b3d !important;
    border-radius: 5px;
}
.profile-card .input-group button{
    border-radius: 5px;
}
.network-card {
    /* background:
        linear-gradient(
            135deg,
            rgba(18,214,197,0.15),
            rgba(77,93,255,0)
        ) !important; */
        height: 100%;
}
.network-card ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.network-card h5{
    color:#f5c94b;
    font-size:15px;
    margin-bottom:10px;
    letter-spacing:1px;
    font-weight:500;
}

.network-card ul li{
    padding: 5px 0px;
    border: 1px solid var(--bot-border);
    margin: 5px 0;
    padding: 10px 5px;
    border-radius: 5px;
    font-size: 0.7rem;
}
.network-card ul li i{
    color: var(--bot-accent);
}
.network-card ul li span{
    float: right;
    color: #ffffff;
    font-size: 1rem;
    margin-top: -4px;
}
.progress-card{
    /* background:
        linear-gradient(
            135deg,
            rgba(18,214,197,0.15),
            rgba(77,93,255,0)
        ) !important; */
        height: 100%;;
}
.progress-box{
    padding:10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-box h5{
    color:#f5c94b;
    font-size:15px;
    margin-bottom:10px;
    letter-spacing:1px;
    font-weight:500;
}
/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary{
    background: var(--bot-gradient-blue) !important;

    border: none !important;

    color: #fff !important;

    border-radius: 10px;

    box-shadow: 0 0 12px rgba(18,214,197,0.3);
}

.btn-primary:hover{
    transform: translateY(-1px);

    box-shadow:
        0 0 18px rgba(18,214,197,0.45);
}

.btn-success{
    background: var(--bot-gradient-success) !important;
    color: var(--bot-card) !important;
    border: none !important;
}

.btn-danger{
    background: var(--bot-gradient-danger) !important;
    color: var(--bot-card) !important;
    border: none !important;
}

.btn-warning{
    background: var(--bot-gradient-primary) !important;

    border: none !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.table{
    color: var(--bot-text-light);
}

.table thead th{
    border-bottom: 1px solid var(--bot-border) !important;
    color: #fff;
    background: rgba(255,255,255,0.03);
}

.table td{
    border-color: rgba(255,255,255,0.05) !important;
}

.table-hover tbody tr:hover{
    background: rgba(18,214,197,0.05) !important;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-control{
    background: #303a5a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-radius: 10px;
}

.form-control:focus{
    border-color: var(--bot-primary) !important;

    box-shadow:
        0 0 0 0.15rem rgba(18,214,197,0.15) !important;
}

.input-group-text{
    background: #13192c !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu{
    background: var(--bot-gradient-sidebar) !important;
    border: 1px solid var(--bot-border) !important;
    border-radius: 5px !important;
}

.dropdown-item{
    color: var(--bot-text-light) !important;
}

.dropdown-item:hover{
    background:
        rgba(18,214,197,0.1) !important;

    color: #fff !important;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-content{
    background: #121827 !important;
    border: 1px solid var(--bot-border) !important;
    border-radius: 18px !important;
}

.modal-header{
    border-bottom: 1px solid var(--bot-border) !important;
}

.modal-footer{
    border-top: 1px solid var(--bot-border) !important;
}

/* =========================================================
   BADGES
   ========================================================= */

.badge-primary{
    background: var(--bot-primary) !important;
}

.badge-success{
    background: #19d37e !important;
}

.badge-danger{
    background: #ff4b6e !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.page-link{
    background: #121827 !important;
    border: 1px solid var(--bot-border) !important;
    color: var(--bot-text-light) !important;
}

.page-item.active .page-link{
    background:
        linear-gradient(
            90deg,
            var(--bot-primary),
            var(--bot-brown)
        ) !important;

    border: none !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track{
    background: #0b0f1c;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            var(--bot-primary),
            var(--bot-brown)
        );

    border-radius: 20px;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page,
.register-page{
    
}

.login-box .card,
.register-box .card{
    backdrop-filter: blur(10px);
}

/* =========================================================
   CHART BOXES
   ========================================================= */

.chart-container,
.chart-box{
    background:
        linear-gradient(
            180deg,
            #141b2f,
            #101522
        );

    border-radius: 16px;
    padding: 15px;
    border: 1px solid var(--bot-border);
}

/* =========================================================
   CUSTOM GLOW EFFECTS
   ========================================================= */

.glow-primary{
    box-shadow:
        0 0 20px rgba(18,214,197,0.35);
}

.glow-blue{
    box-shadow:
        0 0 20px rgba(77,93,255,0.35);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

.card,
.small-box,
.btn{
    transition: all 0.25s ease;
}

.small-box:hover{
    transform: translateY(-2px);

    box-shadow:
        0 0 20px rgba(18,214,197,0.25);
}

.dark-text{
    color: var(--bot-card) !important;
}
.table thead th{
    border: 0;
    padding: 5px 10px;
}
@media (max-width: 992px) {
    .profile-card .profile-data{
        width: 70%;
    }
}
@media (max-width: 576px) {
    .profile-card{
        align-items: center;
        padding: 20px 5px;
        flex-direction: column;
    }
    .profile-card .profile-data{
        width: 95%;
    }
}