:root {
	--colour-strong:           #ddddf4;
	--colour-weak:             #f0f0ff;
	--colour-border:           #c0c0e0;
	--colour-bg:               #ffffff;
	--label:                   #45466C;
}


body {
	font-family:               arial;
	background:                var(--colour-bg);
	padding:                   0;
}

[role="tablist"] {
	margin-top: 5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1rem;
}

[aria-selected="true"] {
	text-decoration-thickness: 0.25em;
	text-underline-offset: 0.5em;
	color: orangered;
}


.paertoNode:hover {
	fill: #ffffff;
}

header {
	position:                  fixed;
	top:                       0;
	left:                      0;
	/*height:                    4rem;*/
	padding:                   0.2rem;
	width:                     100%;
	margin:                    0;
	border-bottom:             1px solid var(--colour-border);
	background:                var(--colour-weak);
}

nav {
	position:                  fixed;
	top:                       3.2rem;
	left:                      0;
	margin-top:                4rem;
	padding:                   0.2rem;
	width:                     100%;
	margin:                    0;
	border-bottom:             1px solid var(--colour-border);
	background:                var(--colour-weak);
}


label:not([for="binSize"]) {
	background-color:          var(--label);
	color:                     #FFFFFF;
	font-family:               Phantomsans, sans-serif;
	font-size:                 small;
	display:                   inline-block;
	width:                     4rem;
	text-align:                right;
	padding:                   0.5em;
	margin-right:              0;
	border-top-left-radius:    1em;
	border-bottom-left-radius: 1em;
}

input, select {
	margin:                    0.3em 0.3em 0.3em 0;
}

input[type="datetime-local"] {
	font-size:                 small;
}


input[type="datetime-local"] {
	cursor:                    pointer;
}

select {
	-webkit-appearance:        none;
	-moz-appearance:           none;
	-ms-appearance:            none;
	appearance:                none;
  	font-family:               Phantomsans, sans-serif;
	font-size:                 small;
	align-items:               center;
	height:                    2.265rem;
	color:                     white;
	padding:                   3px;
	padding-inline:            30px 40px;
	border-radius:             1.5em;
	border:                    2px solid indigo;
	cursor:                    pointer;
	background: var(--label) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A")
    right 10px center / 20px no-repeat;
	transition:                300ms;
}


/*select:hover {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A")
    right 10px center / 20px no-repeat, linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    outline: 0;
}*/

aside {
	font-size:                 small;
	display:                   block;
	position:                  absolute;
	background:                rgba(192, 192, 0, 0.6);
	border:                    1px outset #000;
}

aside p {
	margin:                    0;
}

main {
	padding:                   0;
	margin:                    0;
	margin-top:                6rem;
}

main h1 {
	font-size:                 medium;
	margin:                    2em 0.2em 0 0;
	text-align:                left;
	font-weight:               normal;
	background:                linear-gradient(0.25turn, var(--colour-strong), var(--colour-weak), var(--colour-bg));
	border-top-left-radius:    1em;
	padding-left:              1em;
}

svg {
	width:                     100%;
	max-height:                70vh;
	margin:                    0;
	/*border:                    1px outset #d0d0d0;*/

}

table {
	margin:                    auto;
	border-collapse:           collapse;
}

th {
	background:                var(--colour-strong);
}

td, th {
	padding:                   0.5em;
}

table, td, th {
	border-bottom:             1px solid #808080;
	border-right:              1px solid #e0e0e0;
	text-align:                center;
}

td.headerRow {
	background:                var(--colour-weak);
}


tr.highlightedRow {
	background:                var(--colour-strong);
}