:root{
--accent:#0b63a3;
--muted:#666;
--bg:#f7f9fb}

body{
font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; 
margin:0; 
background:var(--bg); 
color:#111}

.container{
max-width:1000px;
margin:28px auto;
padding:24px;
background:#fff;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,.06)}
    
h1,h2{
color:var(--accent);
margin:0 0 12px}
    
p.lead{
color:var(--muted);
margin-top:0}
    
fieldset{
border:1px solid #e3e6ea;
padding:16px;
border-radius:8px;
margin-bottom:16px}
    
legend{
font-weight:700;
color:var(--accent)}
    
label{
display:block;
margin:8px 0 4px;
font-weight:600}
    
input[type="text"], input[type="number"], input[type="email"], select, textarea, input[type="date"]{
      width:100%;
      padding:8px;
      border-radius:6px;
      border:1px solid #d6dbe0;
      background:#fff;
      box-sizing:border-box
}
    
.row{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
    
.col{
    flex:1;
    min-width:200px
}
    
.small{
    font-size:.9rem;
    color:var(--muted)
}
    
.checkbox-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:8px
}
    
.doc-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: #fbfdff;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px dashed #e6eef7;
    font-size: 1rem;
    box-sizing: border-box;
    min-height: 90px;
}

.doc-item input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--accent);
    align-self: flex-start;
    cursor: pointer;
}

.doc-item input[type="file"] {
    margin-top: 4px;
    font-size: .95em;
}

#photo_warning {
    color: red;
    font-size: 0.9em;
    display: block; /* Tampilkan pesan jika perlu */
}

.file-warning {
    color: red;
    font-size: 0.9em;
    display: block; /* Tampilkan pesan jika perlu */
}

.doc-item input[type="checkbox"]:disabled {
    opacity: .6;
    cursor: not-allowed;
}
    
.actions{
display:flex;
gap:8px;justify-content:flex-end;
margin-top:12px}
    
button{
background:var(--accent);
color:#fff;
border:0;
padding:10px 14px;
border-radius:8px;
cursor:pointer}
    
button.secondary{
background:#eee;
color:#333}
    
.note{
font-size:.9rem;
color:var(--muted);
margin-top:8px}
    
table{
width:100%;
border-collapse:collapse}
    
table td, table th{
border:1px solid #eef2f5;
padding:6px}
    
.signature{height:80px;
border:1px dashed #ccc;
border-radius:6px;
padding:8px;background:#fafafa;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted)}
    
footer{
font-size:.85rem;
color:var(--muted);
text-align:center;
margin-top:12px}
    
@media (max-width:700px){.row{flex-direction:column}}