/* global */
	* {
		margin:0px;
		padding:0px;
		font-family:Arial;
	}
	body {
		padding:20px;
		padding-top:0px;
	}
	table {
		border-spacing:0px;
		border-collapse:collapse;
	}
	th {
		text-align:left;
		background-color:#BBBBBB;
	}
	th, td {
		padding:5px;
		border:1px solid #000000;
	}
	h1 > a {
		text-decoration:underline;
	}
	h1 > a:hover {
		text-decoration:none;
	}
	h1, h2, h3, h4, h5, h6 {
		margin-top:20px;
		margin-bottom:10px;
	}
	button {
		padding:5px 15px;
		font-weight:bold;
	}
	.scroller {
		max-height:200px;
		overflow:auto;
	}
	.smallscroller {
		max-height:100px;
		overflow:auto;
	}
	.bigscroller {
		max-height:800px;
		overflow:auto;
	}

	.tableFix {
		position: relative;
		overflow: auto;
		max-height: 800px;
	}
	.tableFix table {
		/* width: 100%; */
		border-collapse: collapse;
	}

	.tableFix th,
	.tableFix td {
		padding: 2px;
		text-align: left;
	}

	.tableFix thead th {
		position: sticky;
		top: 0px;
		background: ##f1f1f1;
	}

	.center {
		text-align:center;
	}
	.nowrap {
		white-space:nowrap;
	}
	.info {
		border:1px solid #FF0000;
		color:#FF0000;
		padding:5px;
		margin-bottom:10px;
		font-weight:bold;
	}
	.right {
		text-align:right;
	}

/* form */
	.form  {
		margin-left:40px;
		font-size:16px;
		line-height:26px;
		margin-right: 1cm;
		max-width: calc(100% - 1cm); /* ensures the right margin is respected */
	}
	.form * {
		margin:0px;
		padding:0px;
	}
	.form td, .form th {
		border:none;
	}
	.form input[type="text"], .form input[type="number"], .form input[type="date"], .form input[type="email"], .form textarea {
		background-color:#FFFF99;
		border:1px solid #000000;
	}
	.form input[type="number"] {
		width:70px;
	}
	.form input[readonly="readonly"] {
		background-color:#C5D9F1;
	}
	.form textarea {
		width:100%;
		height:150px;
	}
	.form input.error {
		background-color: #ffdddd; /* Roter Hintergrund */
		border-color: #ff0000; /* Roter Rahmen */
	}	

	.form input.valid:not(:read-only):not([readonly]) {
		background-color: #ddffdd; /* Grüner Hintergrund für gültige Felder */
		border-color: #00ff00; /* Grüner Rahmen */
	}
	
	.form .hinweis {
		color: #000000;
		text-decoration: underline;
		font-style: italic;
	}
	
	.form .comment, .form .comment * {
		vertical-align:text-top;
	}
	.form .comment textarea {
		width:600px;
		height:40px;
	}
	.form ul, .form ol {
		display:inline-block;
		list-style-type:none;
		vertical-align:top;
	}
	.form li {
		display:inline-block;
		vertical-align:top;
		margin-left:20px;
	}
	.form ol > li {
		display:list-item;
	}
	.form ol.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;	
	}
	.form h1 {
		background-color:#A6A6A6;
		text-align:center;
		border:1px solid #000000;
		margin-top:20px;
		font-size:26px;
		line-height:38px;
	}
	.form h2 {
		background-color:#BFBFBF;
		border:1px solid #000000;
		margin-top:20px;
		font-size:20px;
		line-height:32px;
		padding:0px 20px;
	}
	.form h3 {
		font-size:18px;
		line-height:26px;
	}
	.form h4 {
		color:#FF0000;
		font-style:normal;
		font-weight:normal;
		text-indent:20px;
		border:1px solid #000000;
		margin-top:20px;
	}
	.form div.container {
		border:1px solid #000000;
		border-top:none;
		padding:10px 20px;
	}
	.form * div.cell {
		display:table-cell;
		padding-right:5px;
	}
	.form div.cell.error {
		background-color: #ffdddd; /* Roter Hintergrund */
		border-color: #ff0000; /* Roter Rahmen */
	}	

	.form div.controls {
		margin-top:20px;
		text-align:center;
	}
	.form div.border {
		border:1px solid #000000;
		padding:5px;
		margin-top:5px;
	}
	.form div.gray {
		background-color:#F2F2F2;
	}
	.form div.indent {
		margin-left:40px;
	}
	.form b {
		display:inline-block;
	}
	.form td {
		padding:0px 10px;
	}
	.form td.border {
		border:1px solid #000000;
	}
	.form button {
		padding:10px 30px;
		font-size:20px;
		font-weight:bold;
	}
	.form span.span {
		display:inline-block;
	}
	.form div.haushalt span {
		min-width:350px;
	}
	.form div.gebaudeart li {
		min-width:300px;
	}
	.form div.zustand span {
		min-width:200px;
	}
	.form div.fenster span {
		min-width:150px;
	}
	.form div.energie span {
		min-width:600px;
	}
	.form div.baujahr li {
		min-width:150px;
	}
	.form div.sanierung span {
		min-width:400px;
	}
	.form div.protokoll span {
		float:right;
	}
	.form div.protokoll input {
		width:600px;
	}
	.form td.highlight {
		/* empty */
	}
	.form td.highlight2 {
		background-color:#FF0000;
	}

.required.error {
  background-color: #ffdddd; /* Roter Hintergrund für Fehler */
  border: 1px solid #ff0000; /* Optional: Roter Rahmen */
}

.required.valid {
  background-color: #ddffdd; /* Grüner Hintergrund für gültige Felder */
  border: 1px solid #00ff00; /* Optional: Grüner Rahmen */
}

/* legende */
	.legende th {
		background:none;
	}
	.legende th, .legende td {
		font-size:12px;
	}
	.legende td {
		border:2px dotted #5DD1F5;
		border-top:none;
		border-bottom:none;
	}

/* supervisors */
	.supervisorbox {
		padding-right:10px;
		padding-bottom:10px;
		float:left;
	}
	.minion {
		text-indent:15px;
	}
	.explanation {
		font-size:12px;
		margin-top:10px;
		margin-left:10px;
		border:1px dotted #999999;
		padding:5px;
		max-width:470px;
	}
	.formh4 {
		  font-weight: 600;          /* Semi-bold for emphasis */
		  color: #333;               /* Dark grey for good readability */
		  margin: 1rem 0 0.5rem;     /* Space above and below */
		  padding-bottom: 0.25rem;   /* Small space below */
		  border-bottom: 2px solid #ddd; /* Subtle underline for structure */
		  letter-spacing: 0.5px;     /* Slight spacing for clarity */
	}
	
input[type="radio"]:disabled:checked {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid yellow;
    border-radius: 50%;
    background-color: yellow;
    opacity: 1;
    position: relative;
}

input[type="radio"]:disabled:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #B8860B; /* darker yellow for the inner dot */
}

input[type="checkbox"]:disabled:checked {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid yellow;
    border-radius: 3px; /* slightly rounded corners for checkbox */
    background-color: yellow;
    opacity: 1;
    position: relative;
}

input[type="checkbox"]:disabled:checked::before {
    content: '✓'; /* checkmark symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #B8860B; /* darker yellow for the checkmark */
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}