/* =====================================================
   STATISTIK AGAMA
===================================================== */

.agama-card{

    display:flex;

    flex-direction:column;

}

/* ==========================
   Chart
========================== */

.agama-card .chart-box{

    position:relative;

    width:100%;

    height:230px;

    margin-bottom:15px;

}

.agama-card canvas{

    width:100%!important;

    height:100%!important;

}

/* ==========================
   Legend
========================== */

.agama-card .stats-legend{

    margin-top:5px;

    flex:1;

}

.agama-card .legend-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:6px 0;

    border-bottom:1px solid #f2f2f2;

    font-size:15px;

}

.agama-card .legend-item:last-child{

    border-bottom:none;

}

.agama-card .legend-color{

    width:12px;

    height:12px;

    border-radius:50%;

    flex-shrink:0;

}

.agama-card .legend-item strong{

    margin-left:auto;

    color:#222;

}

.agama-card .legend-item small{

    margin-left:6px;

    color:#777;

}


/* ==========================
   Responsive
========================== */

@media(max-width:768px){

    .agama-card .chart-box{

        height:200px;

    }

}