@import url("ubuntu-mono/ubuntu-mono.css");

html {
	padding: 0;
	background-color: #000000;
	color: white;
	font-size: 1.25rem;
	font-family: "Ubuntu Mono", monospace;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	width: 100%;
	min-height: 100vh;

	& > body {
		justify-self: center;
		align-self: center;
		width: calc(100vw - 20px);
		max-width: 1200px;
		border-radius: 1rem;
		border: 3px solid white;
		
		& > section {
			background-color: #101010;
			padding: 2rem;
			
			&.first {
				border-top-left-radius: 1rem;
				border-top-right-radius: 1rem;
				
			}
			&.last {
				border-bottom-left-radius: 1rem;
				border-bottom-right-radius: 1rem;
				
			}
			& > *:first-child {margin-top: 0;}
			& > *:last-child {margin-bottom: 0;}
		}
	}
	
}

p#javascriptwarning {
	color: red;
	font-size: 1.5rem;
}

input[type=text], select {
	font-family: "Ubuntu Mono", sans-serif;
	width: 100%;
	padding: 16px 24px;
	margin: 8px 0;
	display: inline-block;
	background-color: #202020;
	color: white;
	border: none;
	border-radius: 32px;
	box-sizing: border-box;
}

pre {
	background-color: black;
	border-radius: 8px;
	padding: 8px !important;
	overflow-x: scroll;
	font-size: 0.65rem;
}

table {
	font-size: 0.75rem;
	display: block;
	overflow-x: scroll !important;
	grid-gap: 0;
	
	& tr:nth-child(odd) {background-color: #282828 !important;}
	& tr:nth-child(even) {background-color: #181818 !important;}
	th, td {padding: 0.5rem;}
	th {text-decoration: underline;}
}

span.status {
	background-color: white;
	color: black;
	padding: 4px 8px;
	border-radius: 8px;
	display: inline-block;
	
	&.status-ok, &.status-0 {background-color: #2a8e40; color: white;}
	&.status-mid, &.status-1 {background-color: #e58a1b; color: white;}
	&.status-bad, &.status-2 {background-color: #ba332c; color: white;}
	&.status-3 {background-color: #7445e0; color: white;}
	&.status-4 {background-color: #005cb2; color: white;}
}

p#fieldcounts > span {margin: 0.5rem !important;}