html, body {
	position: relative;
	width   : 100%;
	height  : 100%;
}

body {
	--label-width       : 100px;
	--input-width       : 100%;
	--label-word-spacing: unset;

	color      : #333;
	margin     : 0;
	box-sizing : border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color          : rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:visited {
	color: rgb(0,80,160);
}

b {
    font-weight: bold;
}

label {
	display: block;
}

input, button, select, textarea {
	font-family    : inherit;
	font-size      : inherit;
	-webkit-padding: 0.4em 0;
	padding        : 0.4em;
	box-sizing     : border-box;
	border         : 1px solid #ccc;
	border-radius  : 2px;
}

input:disabled {
	color: #ccc;
}
input:invalid,
input:invalid:not(output):not([data-invalid]) {
	position: relative;
	box-shadow: 0 0 1px 1px red;
}
input:invalid:focus-visible {
	box-shadow: unset;
	outline : 2px solid red;
}


button {
	margin     : 0;
	padding    : 6px 10px;
	border     : 1px solid #B1B1B1;
	color      : #000;
	background : #f8f8f9;
	outline    : none;
	cursor     : pointer;
	user-select: none;
}
button:hover {
	background: #f8f8f9;
	box-shadow: 0 0 8px #dfdfe0 inset;
}
button:active {
	background: #ddd;
}

button:disabled,
button:disabled:hover,
button:disabled:active {
	color     : #999;
	background: #f8f8f9;
	box-shadow: none;
	cursor    : default;
}

button:focus {
	border-color: #666;
}
button.button-invalid,
button.button-invalid:disabled {
	--invalid-color: hsl(0, 80%, 50%);
	color : var(--invalid-color);
	border: 1px solid var(--invalid-color);
}


.hidden {
	display: none;
}

.tooltip {
	display         : none;
	position        : absolute;
	width           : max-content;
	padding         : 5px 10px;
	font-size       : 13px;
	text-align      : center;
	background-color: white;
	border-radius   : 6px;
	box-shadow      : 0px 3px 6px gray;
	z-index         : 1;
}
.tooltip-top {
	top: -30px;
}

.fullheight {
	display       : flex;
	flex-direction: column;
	height        : 100%;
	min-height    : 0;
}