:root {
	/* --color-blue: #4e7b9f; */
	/* --color-blue-light: #7ca1bf; */
	--color-green: #367636;
	--color-green-light: #5aa55a;
	--color-red: #a51616;
	--color-red-light: #d35c5c;
	--color-grey: #4e4e4e;
	--color-grey-light: #7c7c7c;
	/* --color-orange: hsl(40deg 99% 43%); */
	/* --color-orange-light: #ebb039; */
	/* --color-orange-dark: #c38303; */
}

body {
	background-color: #EEE;
	font-family: sans-serif;
	margin: 0 auto;
	padding: 0 auto;
	width: 30%;
}
html, body {
	height: 90%;
}
html {
	margin: 0;
	padding: 0;
}
.logo {
	display: block;
	height: auto;
	width: 130px;
	margin: 30px auto 0 auto;
	image-rendering: -webkit-optimize-contrast;
}
.icon {
	width: auto;
	height: 20px;
	image-rendering: -webkit-optimize-contrast;
	vertical-align: middle;
}
p {
	line-height: 1.4;
}
h1 {
	text-align: center;
	margin-top: 6px;
	color: #57595B;
	font-size: 30pt;
}
h2.result_heading {
	font-size: 40pt;
	line-height: 40pt;
	margin: 0;
	position: relative;
	/* top: -21pt; */
	cursor: default;
}
h2.result_heading::selection { background: transparent; }
h2.result_heading::-moz-selection { background: transparent; }
h3 {
	font-size: 20pt;
}
h4 {
	font-size: 16pt;
	margin-top: 4px;
	margin-bottom: 15px;
	overflow-wrap: break-word;
}
.result {
	/* color: white; */
	padding: 20px;
	border-radius: 8px;
	/* -webkit-box-shadow: 0 4px 6px rgb(0 0 0 / 4%), 0 8px 15px rgb(0 0 0 / 3%), 0 8px 30px rgb(0 0 0 / 19%); */
	        /* box-shadow: 0 4px 6px rgb(0 0 0 / 4%), 0 8px 15px rgb(0 0 0 / 3%), 0 8px 30px rgb(0 0 0 / 19%); */
	overflow: hidden;
	/* border-left-width: 20px; */
	/* border-left-style: solid; */
}
.login_line {
	text-align: center;
}
.login_line a {
	color: grey !important;
}
input[type="text"], input[type="password"], textarea {
	padding: 10px;
	font-family: monospace;
	color: #888;
	background-color: #FFF;
	width: calc(100% - 20px);
	border-radius: 4px;
	border: 1px solid lightgrey;
}
/* input[type="password"], input[type="password"] {
	margin-top: 32px;
	padding: 0 10px;
	height: 28px;
	width: calc(100% - 20px);
} */
input[type="checkbox"] {
	margin-top: 32px;
	margin-right: 14px;
}
.button, input[type="submit"] {
	display: block;
	cursor: default;
	margin-top: 32px;
	width: 150px;
	height: 40px;
	background-color: #57595B;
	color: white;
	border: none;
	border-radius: 4px;
}
.button, input[type="submit"]:hover {
	background-color: #555;
}
table {
	width: 100%;
}
table tr:nth-child(odd) {
	background-color: var(--color-orange-dark);
}
table tr:not(:first-child):hover {
	background-color: var(--color-orange-light);
}
table tr th {
	text-align: left;
}
table tr th,
table tr td {
	padding: 4px 8px;
}
@media only screen and (max-width : 1400px) {
	body {
		width: 50%;
	}
}
@media only screen and (max-width : 1100px) {
	body {
		width: 65%;
	}
}
@media only screen and (max-width : 900px) {
	body {
		width: 80%;
	}
}
@media only screen and (max-width : 600px) {
	body {
		width: 90%;
	}
}