body{
    background: #f5f7fa;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #222;
    margin: 0;
}

/* CONTAINER */
.container{
    max-width: 1100px;
}

/* HEADER */
.header-area{
    background: #fff;
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
}

.logo-daerah{
    width: 72px;
    height: auto;
}

.header-text{
    padding-left: 8px;
}

/* JUDUL */
.judul-besar{
    font-size: 34px;
    font-weight: 700;
    color: #0d5e20;
    margin: 0;
    line-height: 1.1;
}

.judul-kecil{
    font-size: 18px;
    color: #1d5729;
    margin-top: 4px;
}

/* CARD */
.card-box{
    border-radius: 8px;
    border: 1px solid #e7e7e7 !important;
    box-shadow: none !important;
}

.card-body{
    padding: 14px !important;
}

/* SECTION */
.section-title{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}

.section-title i{
    color: #198754;
    margin-right: 5px;
}

/* FORM */
.form-label{
    font-size: 13px;
    margin-bottom: 4px;
}

.form-control{
    height: 42px;
    font-size: 14px;
    border-radius: 6px;
}

.form-control::placeholder{
    font-size: 13px;
    color: #999;
}

small{
    font-size: 12px;
}

/* BUTTON */
.btn-success{
    height: 42px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
}

/* PRINT BUTTON */
#btnPrint{
    background: #5fb878 !important;
    border-color: #5fb878 !important;
    color: #fff !important;

    height: 32px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    padding: 0 12px;
}

#btnPrint:hover{
    background: #4da76a !important;
    border-color: #4da76a !important;
}

/* ALERT */
.alert{
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 0;
}

/* TABLE */
.table{
    margin-bottom: 0;
}

/* HEADER TABEL HIJAU SOFT */
.table-green th{
    background: #5fb878 !important;
    color: white !important;
    border-color: #52aa6d !important;
}

.table th{
    padding: 10px;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}

.table td{
    padding: 8px;
    font-size: 13px;
    vertical-align: middle;
}

/* BADGE */
.badge{
    font-size: 10px;
    padding: 5px 7px;
    border-radius: 5px;
}

/* FOOTER */
.footer-area{
    text-align: center;
    padding: 14px;
    color: #777;
    font-size: 12px;
}

/* MOBILE */
@media(max-width:768px){

    .container{
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-area{
        padding: 10px 0;
    }

    .logo-daerah{
        width: 50px;
        margin-bottom: 8px;
    }

    .header-text{
        padding-left: 4px;
    }

    .judul-besar{
        font-size: 22px;
        text-align: left;
    }

    .judul-kecil{
        font-size: 13px;
        text-align: left;
    }

    .card-body{
        padding: 12px !important;
    }

    .btn-success{
        margin-top: 12px;
    }

    .table th,
    .table td{
        font-size: 12px;
        padding: 7px;
    }

    .alert{
        font-size: 12px;
    }

}