/* CSS Document */
/* =========================================================
   BOT CHAIN DARK THEME FOR ADMINLTE
   ========================================================= */

:root{

    /* MAIN COLORS */
    --bot-primary: #12d6c5;
    --bot-primary-dark: #0da89b;
    --bot-secondary: #6eff8d;
    --bot-blue: #4d5dff;

    /* BACKGROUNDS */
    --bot-bg: #090b12;
    --bot-bg2: #111522;
    --bot-card: #151a2d;
    --bot-card2: #1b2138;

    /* TEXT */
    --bot-text: #ffffff;
    --bot-text-light: #c7d2ff;
    --bot-muted: #7f8cb2;

    /* BORDER */
    --bot-border: rgba(18,214,197,0.15);

    /* SHADOW */
    --bot-shadow:
        0 0 15px rgba(18,214,197,0.15);

}

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

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

.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-bg) !important;
}

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

.main-sidebar{
    background: #0b0f1c !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;
}

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

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover{
    background:
        linear-gradient(
            90deg,
            rgba(18,214,197,0.2),
            rgba(77,93,255,0.15)
        ) !important;

    color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active{
    background:
        linear-gradient(
            90deg,
            var(--bot-primary),
            var(--bot-blue)
        ) !important;

    color: #fff !important;

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

/* =========================================================
   NAVBAR
   ========================================================= */

.main-header{
    background: #0d1220 !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: 16px !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-title{
    color: #fff;
    font-weight: 600;
}

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

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

.small-box{
    border-radius: 18px !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;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary{
    background:
        linear-gradient(
            90deg,
            var(--bot-primary),
            var(--bot-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:
        linear-gradient(
            90deg,
            #19d37e,
            #6eff8d
        ) !important;

    border: none !important;
}

.btn-danger{
    background:
        linear-gradient(
            90deg,
            #ff4b6e,
            #ff6b81
        ) !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: #0f1424 !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: #121827 !important;
    border: 1px solid var(--bot-border) !important;
    border-radius: 12px !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-blue)
        ) !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-blue)
        );

    border-radius: 20px;
}

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

.login-page,
.register-page{
    background:
        radial-gradient(circle at top left,
        rgba(18,214,197,0.1),
        transparent 30%),

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

        #080b13 !important;
}

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

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

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