.arrear-plugin.pro{max-width:1100px;padding:18px;border-radius:6px;background:#0e6aa7;color:#fff;font-family:Arial;margin:12px auto}
.arrear-plugin.pro h2{background:#0e6aa7;padding:12px;border-radius:6px 6px 0 0;margin:0 0 12px 0}
.arrear-plugin.pro .row{display:flex;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.arrear-plugin.pro label{min-width:180px;font-weight:600}
.arrear-plugin.pro input[type="text"], .arrear-plugin.pro input[type="number"], .arrear-plugin.pro input[type="month"], .arrear-plugin.pro select{flex:1;padding:8px;border:1px solid #ccc;border-radius:4px}
.arrear-plugin.pro .actions{margin-top:12px}
.arrear-plugin.pro button{padding:10px 14px;margin-right:8px;border-radius:6px;border:none;background:#1b3b66;color:#fff;cursor:pointer}
.arrear-plugin.pro button#resetBtn{background:#b24f4f}
#results{background:#fff;color:#000;margin-top:18px;padding:12px;border-radius:6px}
.sheet-header{background:#0f78b4;color:#fff;padding:10px;border-radius:4px;margin-bottom:8px}
.sheet-table{width:100%;border-collapse:collapse;font-size:12px}
.sheet-table th, .sheet-table td{border:1px solid #d6bfa8;padding:6px;text-align:center}
.sheet-table thead th{background:#a05a0a;color:#fff}
.sheet-table tfoot th{background:#e9e2d8;text-align:left}
.row.arrear-period {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.row.arrear-period .field-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
}

.row.arrear-period label {
    font-weight: 600;
    margin-bottom: 5px;
}

.input-date,
.input-month,
.input-number {
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}
/* Create the flex container */
.form-row {
  display: flex; /* This is the key! It makes children line up horizontally. */
  gap: 20px;     /* This creates a nice 20px space between the items. */
  margin-bottom: 15px; /* Adds some space below the row */
}

/* This is the container for each label/input pair */
.form-group {
  flex: 1; /* This tells each group to grow and take up equal space. */
}

/* Style for the labels */
.form-label {
  display: block; /* Makes the label take its own line above the input */
  margin-bottom: 5px; /* Adds a little space between the label and the input box */
  font-weight: bold;
  color: white; /* As in your design */
}

/* Style for the text boxes */
.form-input {
  width: 100%; /* Makes the input box fill the entire .form-group container */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Important! Ensures padding doesn't add to the width */
}