/* =========================================
   HAS FRAMEWORK 1.0
   File : 10-statistik.css
   Website : haldi.my.id
   Author : Haldi Ali Syukur
========================================= */


/* =========================================
   PERJALANAN HALDI.MY.ID
========================================= */

.mini-dashboard{

    max-width:1200px;

    margin:70px auto;

    padding:45px;

    background:var(--white);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/* =========================================
   JUDUL
========================================= */

.mini-dashboard h2{

    text-align:center;

    font-size:36px;

    color:var(--primary);

    margin-bottom:35px;

}


/* =========================================
   GRID
========================================= */

.dash-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:25px;

}


/* =========================================
   CARD
========================================= */

.dash-item{

    background:#f7fbff;

    border-left:6px solid var(--primary);

    border-radius:18px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:.35s;

}


/* =========================================
   HOVER
========================================= */

.dash-item:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(21,101,192,.15);

}


/* =========================================
   ICON
========================================= */

.dash-item i{

    font-size:34px;

    color:var(--primary);

}


/* =========================================
   EMOJI
========================================= */

.dash-item .emoji{

    font-size:34px;

}


/* =========================================
   LABEL
========================================= */

.dash-item small{

    display:block;

    color:#777;

    font-size:15px;

    margin-bottom:6px;

}


/* =========================================
   VALUE
========================================= */

.dash-item strong{

    display:block;

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}


/* =========================================
   CATATAN
========================================= */

.dash-note{

    margin-top:35px;

    text-align:center;

    color:#777;

    font-size:18px;

    font-style:italic;

}


/* =========================================
   STATUS ONLINE
========================================= */

.online{

    color:#2e7d32;

    font-weight:700;

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

.mini-dashboard{

    margin:35px 15px;

    padding:25px;

}

.mini-dashboard h2{

    font-size:30px;

}

.dash-grid{

    grid-template-columns:1fr;

}

.dash-item{

    padding:18px;

}

.dash-item i,

.dash-item .emoji{

    font-size:28px;

}

.dash-item strong{

    font-size:20px;

}

.dash-note{

    font-size:16px;

}

}