body {
    margin: 0;
    font-family: Arial;
}

.print-btn {
    margin: 10px;
}

/* MAIN FORM */
.form-container {
    position: relative;
    width: 210mm;
    height: 297mm;
    margin: auto;

    background-image: url('./form-bg.png'); /* safer path */
    background-size: cover;
    background-repeat: no-repeat;
}

/* COMMON INPUT STYLE */
.field, .sign, .g-info, .g-field, .g-content,
.p-wage, .p-amount, .p-paisa, .p-adj, .p-date, .p-remark {
    position: absolute;
    border: none;
    background: transparent;
    font-size: 12px;
}

/* TOP FIELDS */
.office { top: 120px; left: 180px; width: 500px; }
.month { top: 150px; left: 200px; width: 40px; }
.year { top: 150px; left: 260px; width: 80px; }

.ddo { top: 180px; left: 200px; width: 150px; }
.desc { top: 180px; left: 400px; width: 300px; }

.personnel { top: 210px; left: 200px; width: 150px; }
.empname { top: 210px; left: 400px; width: 300px; }

.cnic { top: 240px; left: 200px; width: 250px; }
.grade { top: 270px; left: 200px; width: 60px; }

/* RADIO */
.radio {
    position: absolute;
}
.start { top: 270px; left: 400px; }
.stop { top: 270px; left: 470px; }

/* GENERAL DATA ROWS */
<?php for($i=0;$i<5;$i++): ?>
.g-info.g<?= $i ?> { top: <?=320 + ($i*30)?>px; left: 50px; width: 100px; }
.g-field.g<?= $i ?> { top: <?=320 + ($i*30)?>px; left: 170px; width: 100px; }
.g-content.g<?= $i ?> { top: <?=320 + ($i*30)?>px; left: 300px; width: 350px; }
<?php endfor; ?>

/* PAYMENT ROWS */
<?php for($i=0;$i<5;$i++): ?>
.p-wage.p<?= $i ?> { top: <?=520 + ($i*30)?>px; left: 40px; width: 120px; }
.p-amount.p<?= $i ?> { top: <?=520 + ($i*30)?>px; left: 170px; width: 100px; }
.p-paisa.p<?= $i ?> { top: <?=520 + ($i*30)?>px; left: 280px; width: 80px; }
.p-adj.p<?= $i ?> { top: <?=520 + ($i*30)?>px; left: 370px; width: 60px; }
.p-date.p<?= $i ?> { top: <?=520 + ($i*30)?>px; left: 440px; width: 120px; }
.p-remark.p<?= $i ?> { top: <?=520 + ($i*30)?>px; left: 570px; width: 200px; }
<?php endfor; ?>

/* SIGNATURES */
.prepared { top: 750px; left: 80px; width: 200px; }
.checked { top: 750px; left: 350px; width: 200px; }
.verified { top: 750px; left: 600px; width: 200px; }

/* PRINT */
@media print {
    .print-btn {
        display: none;
    }

    input {
        border: none;
    }
}