/*==========================================================
GOOGLE FONT
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body{
    font-family:'Inter',sans-serif;
    background:#F8FAFC;
    color:#111827;
}

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

.layanan-wrapper,
.statistik-wrapper{

    border:1px solid #E6ECF5;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(16,24,40,.04);

}

.card-header{

    background:#fff;
    padding:18px 22px;
    border-bottom:1px solid #EEF2F7;

}

.card-header h5,
.card-header h6{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#173EA5;

}

.card-header small{

    font-size:12px;

    font-weight:500;

    color:#6B7280;

}

/*==========================================================
BUTTON
==========================================================*/

.btn-primary{

    background:#155EEF;
    border:0;
    border-radius:8px;

    padding:8px 16px;

    font-size:12px;

    font-weight:600;

}

.btn-primary:hover{

    background:#0B4FD9;

}

/*==========================================================
LAYANAN
==========================================================*/

.layanan-card{

    border:1px solid #E6ECF5;

    border-radius:10px;

    background:#fff;

    height:150px;

    padding:16px 12px;

    text-align:center;

    transition:.25s;

}

.layanan-card:hover{

    border-color:#155EEF;

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(21,94,239,.08);

}

.layanan-icon{

    width:42px;

    height:42px;

    border-radius:8px;

    margin:0 auto 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:20px;

}

.layanan-card h6{

    font-size:15px;

    font-weight:700;

    color:#111827;

    line-height:22px;

    margin-bottom:8px;

    min-height:42px;

}

.layanan-card p{

    margin:0;

    font-size:12px;

    color:#6B7280;

    line-height:18px;

}

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

.stat-box{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:98px;

    padding:5px;

    transition:.2s;

    background:#fff;

}

.stat-box:hover{

    background:#F8FAFC;

}

.stat-box h4{

    margin:0;

    font-size:14px;

    font-weight:700;

    color:#111827;

    line-height:1;

}

.stat-box small{

    display:block;

    margin-top:6px;

    font-size:12px;

    color:#6B7280;

    line-height:18px;

    font-weight:500;

}

.stat-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    flex-shrink:0;

}

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

.bg-primary{

    background:#EAF2FF!important;
    color:#2F6BFF!important;

}

.bg-success{

    background:#EAF8EF!important;
    color:#28A745!important;

}

.bg-warning{

    background:#FFF4E6!important;
    color:#F59E0B!important;

}

.bg-danger{

    background:#FFEAF0!important;
    color:#EC4899!important;

}

.bg-info{

    background:#E8F8FF!important;
    color:#06B6D4!important;

}

.bg-purple{

    background:#F3ECFF!important;
    color:#7C3AED!important;

}

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

.border-end{

    border-right:1px solid #EEF2F7!important;

}

.border-bottom{

    border-bottom:1px solid #EEF2F7!important;

}

/*==========================================================
FOOTER
==========================================================*/

.card-footer{

    background:#fff;

    border-top:1px solid #EEF2F7;

    padding:14px;

}

.card-footer a{

    color:#155EEF;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

}

.card-footer a:hover{

    color:#0B4FD9;

}

/*==========================================================
LINK
==========================================================*/

a{

    text-decoration:none;

}

a:hover{

    text-decoration:none;

}

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

@media(max-width:992px){

.layanan-card{

    height:155px;

}

.stat-box{

    min-height:92px;

}

}

@media(max-width:768px){

.card-header{

    padding:15px;

}

.card-header h5,
.card-header h6{

    font-size:16px;

}

.btn-primary{

    font-size:11px;

    padding:7px 12px;

}

.layanan-card{

    height:auto;

    min-height:150px;

}

.layanan-card h6{

    font-size:14px;

}

.layanan-card p{

    font-size:11px;

}

.stat-box{

    padding:15px;

}

.stat-box h4{

    font-size:4px;

}

.stat-box small{

    font-size:11px;

}

.stat-icon{

    width:40px;

    height:40px;

    font-size:18px;

}

}
.icon-penduduk{
    background:#EAF2FF;
    color:#2F6BFF;
}

.icon-rumah{
    background:#EAF8EF;
    color:#22C55E;
}

.icon-pria{
    background:#FFF4E5;
    color:#F59E0B;
}

.icon-wanita{
    background:#FFEAF1;
    color:#EC4899;
}

.running-news{

    display:flex;

    align-items:center;

    background:#fff;

    border:1px solid #F3E2C7;

    border-radius:10px;

    overflow:hidden;

    margin-bottom:25px;

}

.running-title{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:190px;

    padding:14px 20px;

    background:#FFF8EF;

    border-right:1px solid #F3E2C7;

    color:#222;

    font-size:15px;

    font-weight:700;

}

.running-title i{

    color:#F59E0B;

    font-size:18px;

}

.running-content{

    flex:1;

    padding:0 15px;

    font-size:14px;

}

.running-content marquee{

    height:48px;

    line-height:48px;

}

.news-item{

    margin-right:50px;

    white-space:nowrap;

}

.news-item a{

    color:#444;

    text-decoration:none;

}

.news-item a:hover{

    color:#155EEF;

}

.dot{

    color:#F59E0B;

    font-size:18px;

    margin-right:10px;

}

.running-more{

    min-width:150px;

    text-align:center;

    border-left:1px solid #F3E2C7;

}

.running-more a{

    display:block;

    padding:14px;

    color:#155EEF;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

}

.running-more a:hover{

    background:#F8FAFC;

}
   <style>
        .running-news{

    display:flex;

    align-items:center;

    background:#fff;

    border:1px solid #F3E2C7;

    border-radius:10px;

    overflow:hidden;

    margin-bottom:25px;

}

.running-title{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:190px;

    padding:14px 20px;

    background:#FFF8EF;

    border-right:1px solid #F3E2C7;

    color:#222;

    font-size:15px;

    font-weight:700;

}

.running-title i{

    color:#F59E0B;

    font-size:18px;

}

.running-content{

    flex:1;

    padding:0 15px;

    font-size:14px;

}

.running-content marquee{

    height:48px;

    line-height:48px;

}

.news-item{

    margin-right:50px;

    white-space:nowrap;

}

.news-item a{

    color:#444;

    text-decoration:none;

}

.news-item a:hover{

    color:#155EEF;

}

.dot{

    color:#F59E0B;

    font-size:18px;

    margin-right:10px;

}

.running-more{

    min-width:150px;

    text-align:center;

    border-left:1px solid #F3E2C7;

}

.running-more a{

    display:block;

    padding:14px;

    color:#155EEF;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

}

.running-more a:hover{

    background:#F8FAFC;

}
        </style>



/*==================================================
SECTION DASHBOARD
==================================================*/

.dashboard-card{

    border:1px solid #E8EDF5;
    border-radius:14px;
    background:#fff;
    box-shadow:0 2px 10px rgba(15,23,42,.05);
    overflow:hidden;
    transition:.25s;

}

.dashboard-card:hover{

    box-shadow:0 8px 24px rgba(15,23,42,.08);

}

/*==================================================
HEADER
==================================================*/

.dashboard-card .card-header{

    background:#fff;
    border-bottom:1px solid #EEF2F7;

    padding:18px 20px;

}

.dashboard-card .card-header h5{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#173EA5;

}

.dashboard-card .card-header small{

    display:block;

    margin-top:5px;

    font-size:12px;

    color:#6B7280;

    font-weight:500;

}

.lihat-link{

    color:#155EEF;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

}

.lihat-link:hover{

    color:#0B4FD9;

}

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

.dashboard-card .card-body{

    padding:18px;

}

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

#grafikPenduduk{

    width:100%!important;
    height:290px!important;

}

/*==================================================
PETA
==================================================*/

.dashboard-card img{

    border-radius:10px;

}

.dashboard-card .text-end{

    margin-top:10px;

}

/*==================================================
AGENDA
==================================================*/

.agenda-item{

    display:flex;

    align-items:center;

    padding:16px 18px;

    border-bottom:1px solid #EEF2F7;

    transition:.25s;

}

.agenda-item:last-child{

    border-bottom:none;

}

.agenda-item:hover{

    background:#F8FAFC;

}

.agenda-date{

    width:58px;

    height:58px;

    border-radius:10px;

    background:#EEF4FF;

    text-align:center;

    margin-right:16px;

    flex-shrink:0;

    padding-top:7px;

}

.agenda-date span{

    display:block;

    font-size:22px;

    font-weight:700;

    color:#155EEF;

    line-height:20px;

}

.agenda-date small{

    display:block;

    margin-top:4px;

    font-size:11px;

    font-weight:700;

    color:#155EEF;

    letter-spacing:.5px;

}

.agenda-content{

    flex:1;

    padding-right:10px;

}

.agenda-content h6{

    margin:0 0 4px;

    font-size:14px;

    font-weight:600;

    line-height:21px;

}

.agenda-content h6 a{

    color:#111827;

    text-decoration:none;

}

.agenda-content h6 a:hover{

    color:#155EEF;

}

.agenda-content p{

    margin:0;

    font-size:12px;

    color:#6B7280;

    line-height:18px;

}

.agenda-time{

    min-width:88px;

    text-align:right;

    font-size:12px;

    color:#6B7280;

    white-space:nowrap;

}

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

@media(max-width:992px){

.dashboard-card{

    margin-bottom:20px;

}

}

@media(max-width:768px){

.dashboard-card .card-header{

    padding:15px;

}

.dashboard-card .card-header h5{

    font-size:17px;

}

.dashboard-card .card-body{

    padding:15px;

}

.agenda-item{

    padding:14px;

}

.agenda-date{

    width:50px;
    height:50px;

}

.agenda-date span{

    font-size:18px;

}

.agenda-content h6{

    font-size:13px;

}

.agenda-content p{

    font-size:11px;

}

.agenda-time{

    display:none;

}

#grafikPenduduk{

    height:240px!important;

}

}