:root {
	timeline-scope: --scroll;
	animation: --scroll forwards;
	animation-timeline: --scroll;
	container-name: --scroll;
  }


  @keyframes --scroll {
	0%, to { --scroll: 1; }
  }
  
  @container --scroll style(--scroll: 1) {
	/* Styles applied when vertical overflow exists */
	.indicator { display: block; }
  }

select {
	font-size: 1.0em;
}

input {
	font-size: 1.0em;
}

.happy {
	color: green;
	font-weight: bold;
	font-size: 1.1em;
}

.error {
	color: red;
	font-weight: bold;
	font-size: 1.1em;
}

.tableview {
	display: block;
	border-collapse: collapse;
	border-spacing: 1px;
	border-radius: 0.5rem;
	border: 1px solid #acacb2;
	max-height: 40rem;
	width: fit-content;
}

th {
	position: sticky;
	top: 0;
	background-color: #fff;
	z-index: 10;
}

.tableview td {
	padding: 0.5rem;
	border-left: 1px solid #aeaeba;
	border-right: 1px solid #aeaeba;
	border-bottom: 1px solid #aeaeba;
	vertical-align: middle;
}

.tableview th {
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
	background-color: #8d1bb7;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

/* Remove right border from the last column */
table th:last-child,
table td:last-child {
	border-right: none;
}

table th:first-child,
table td:first-child {
	border-left: none;
}


.tableview tr:hover {
	background-color: #DDDDEC;
}

/* Table Drag'n'Drop default while-dragging style */
.tableview tr.tDnD_whileDrag,
tr.tDnD_whileDrag:hover {
	background-color: #8080ff;
}


.tableview th a {
	font-weight: bold;
	color: #FFFFFF;
}

.tableview th a:hover {
	font-weight: bold;
	background-color: #00346A;
	color: #3D90E9;
}

.tableedit {
	color: black;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 0.8em;
	border: 0px;
	border-collapse: collapse;
	/*	width: 100%;*/
}

.tableedit td {
	padding: 2px;
	vertical-align: middle;
}

.tableedit th {
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
	/*background-color: #1B86B7; */
	background-color: #1B86B7;
	padding: 1px;
	vertical-align: top;
}

/* Replacement for tableedit */
.editor {
	color: black;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 0.8em;
	border: 0px;
	border-collapse: collapse;
	width: 95%;
}

.editor td {
	padding: 2px;
}

/* vertical align top, then use top padding to bring it down
 * so that the text is in the middle of the first line compared
 * to an input box */
.editor td.label {
	/*	width: 25%;*/
	text-align: right;
	/*	padding-right: 5px;
	padding-top: 5px;*/
	vertical-align: top;
}

.editor td.input {
	/*	width: 75%;*/
	text-align: left;
	vertical-align: middle;
}

.editor th {
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
	background-color: #1B86B7;
	padding: 1px;
	vertical-align: top;
}

/* A default class so we can nest tables (i know bad) but revert
 * inheritance */
.default td {
	border: 0px;
}