/*--------- Raadix 2024 STYLESHEET ------------*/
/*--------- Hadrion: 13 maart 2024 ------------*/
/*------------- Dialog styling ----------------*/

dialog {
  border: 2mm solid var(--theme-color);
	border-radius: 2mm;
  background-color: white;
  min-width: 50mm;
	max-width: 100%;
	min-height: 50mm;
	max-height: 90%;
	padding: 0;
	resize: both;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.24);
}
dialog::backdrop {
  background-color: rgba(135, 135, 135, 0.6);
}
dialog #title-dialog {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	height: 8mm;
	font-size: 4.4mm;
	line-height: 8mm;
	padding: 0 2mm;
	color: white;
	background-color: var(--theme-color);
	outline: 2mm solid var(--theme-color);
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}

dialog #exit-dialog {
	position: absolute;
	top: 0;
	right: 0;
	width: 10mm;
	height: 8mm;
	border: none;
	font-size: 5mm;
	line-height: 8mm;
	cursor: pointer;
	text-align: center;
	padding: 0;
	margin: 0;
	color: white;
	background-color: var(--theme-color);
}
dialog #exit-dialog:hover {
	background-color: var(--red-color);
}

dialog #content-dialog, .content-dialog {
	position: absolute;
	left: 0;
	top: 10mm;
	right: 0;
	bottom:12mm;
	width: 100%;
	padding: 2mm 4mm;
	overflow-x: auto;
	overflow-y: auto;
}

dialog #buttonbar-dialog {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 4mm;
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	right: 0;
	height: 12mm;
	border-top: 1px solid black;
	background-color: white;
	padding: 2mm 4mm;
}

dialog .dialog-btn {
  min-width: 20mm;
	border: none;
	border-radius: 2mm;
	font-size: 5mm;
	line-height: 8mm;
	cursor: pointer;
	text-align: center;
	padding: 0;
	margin: 0;
}
dialog .dialog-btn:hover {
	outline: 0.7mm solid var(--yellow-color);
}
dialog .dialog-btn:active {
	outline: 1.4mm solid var(--yellow-color);
}

dialog fieldset {
	border: 1px solid var(--grey-text);
	border-radius: 1mm;
	padding: 1mm 2mm;
	margin: 4mm 0;
}
dialog legend {
	font-size: 3.6mm;
	line-height: 4.0mm;
	padding: 0 2mm;
	margin: 0;
	color: var(--grey-text);	
}
dialog label {
	font-size: 3.6mm;
	cursor: pointer;
	margin: 0;
}

dialog input[type="checkbox"] {
	margin: 0 1mm 0 0;
	padding: 0;
	transform: translateY(16%);
}

dialog hr {
	margin: 4mm 0;
}

dialog #explain-dialog {
	width: 100%;
	min-height: 16mm;
	border: 1px solid var(--grey-color);
	border-radius: 1mm;
	font-size: 3.6mm;
	background-color: white;
	margin: 2mm 0;
	padding: 2mm 3mm;
	font-weight: normal;
	color: var(--grey-text);
}
dialog .warning {
	color: var(--red-color);
	border-color: var(--red-color);
	font-weight: bold;
}

/*====== table ======*/
dialog table {
	margin: 4mm 0;
}
dialog tr:nth-child(2n) {
	background-color: white;
	color: #575757;
}
dialog tr:nth-child(2n+1) {
	background-color: var(--light-grey-color);
	color: black;
}
dialog th,td {
	min-width: 10mm;
	text-align: left;
	border: 1px solid #575757;
	padding: 2mm 3mm;
	font-size: 3mm;
}
dialog th {
	background-color: #82368C;
	color: white;
}
dialog table tr:hover {
	outline: 0.7mm solid var(--yellow-color);
}

#mfa-qr-canvas {
	display: block;
	background-color: white;
	margin: 0 auto;
	padding: 0;
}
#mfa-next-text {
	font-weight: bold;
}
#dlg-copy-btn {
	display: inline-block;
	padding: 3mm;
	margin: 2mm;
	font-size: 3.6mm;
	color: white;
	background-color: var(--grey-color);
	border-radius: 2mm;
	border: none;
}
#dlg-copy-btn:hover {
	outline: 0.7mm solid var(--yellow-color);
}
#dlg-copy-btn:active {
	outline: 1.4mm solid var(--yellow-color);
}