#payroll {
		background-color: LightGray; /*Gainsboro */
		}
@media (max-width: 480px) {
  #payroll {
    padding-top: 40px; /* or whatever max height your wrapped menu reaches */
  }
}

#payroll.container-action {
		display: flex;
		flex-wrap: wrap;
		align-items: center; 
		padding: 0.5em;
		background-color: #a9a9a9; /* Dark Grey */
	}

#payroll tr { text-align: center; }

#payroll table {margin-bottom:2em;}

#payroll tr.payroll.head {font-size:small; font-weight:bold;}


#payroll .payroll.name {field-sizing:content;}

#payroll .payroll.pay {width:3em;}

#payroll tr.payroll.summary {font-size:small; font-weight:bold;}

#payroll input:read-only {
		background-color: lightgray;
		color: black; /* Optional: ensure text remains readable */
		border: 1px solid #ccc; /* Optional: subtle border */
		cursor: not-allowed;    /* Optional: visual cue for non-editable */
	}
	
#payroll .payroll:focus:not([readonly]) {background-color:Yellow;}
#payroll .payroll { border: 1px solid #808080;/* Grey */ }

#payroll textarea.auto-resize {
	width:100%; 
	min-height: 2em;
	resize:none; 
	overflow:hidden;
	}
#payroll textarea.auto-resize:read-only {
		background-color: lightgray;
		min-height: 2em;
		color: black; /* Optional: ensure text remains readable */
		border: 1px solid #ccc; /* Optional: subtle border */
		cursor: not-allowed;    /* Optional: visual cue for non-editable */
	}