:root {
	--black: #000000;
	--white: #ffffff;
	--gray: #323232;
	--red: #9d3232;
	--green: #659d32;
	--gray-with-opacity: rgba(50,50,50,0.15);
	--red-with-opacity: rgba(157,50,50,0.15);
	--green-with-opacity: rgba(101,157,50,0.15);
	--golden-ratio: 161.8%;
}

body {
	margin: 12px;
	font-family: Arial;
	font-weight: normal;
	font-size: 14px;
	color: var(--gray);
	background-image: url("background3.jpg");
}

.container {
	margin: auto;
	border: none;
}

form {
	max-width: 440px;
	border: 1px solid var(--gray-with-opacity);
	border-radius: 3px;
	box-shadow: 3px 3px 3px var(--gray-with-opacity);
	background-color: var(--white);
	margin: auto;
	padding: 12px;
}

fieldset {
	border: none;
	padding: 24px 0px 0px 0px;
}

input[type="text"], input[type="password"] {
	width: 100%;
	padding: 10px;
	display: inline-block;
	border: 1px solid #f0f0f0;
	border-radius: 3px;
	box-sizing: border-box;
}

input[type=submit] {
	background-color: var(--gray);
	color: var(--white);
	padding: 10px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	width: 100%;
	opacity: 0.9;
}

input[type=submit]:hover {
	opacity: 1;
}

input[type="radio"]:disabled + label {
	color: var(--gray);
}

input {
	margin-bottom: 12px;
}

input:last-child {
	margin-bottom: 0px;
}

.logo {
	height: 100px;
}

#mySidenav a {
	position: absolute;
	left: -125px;
	transition: 0.3s;
	padding: 15px;
	width: 160px;
	text-align: right;
	text-decoration: none;
	font-size: 20px;
	color: var(--white);
	background-color: var(--gray);
	border-radius: 0px 6px 6px 0px;
}

#mySidenav a:hover {
	left: 0px;
}

#mySidenav img {
	margin-left: 15px;
	height: 40px;
}

#item1 {
	top: 10px;
}

#item2 {
	top: 95px;
}

#item3 {
	top: 180px;
}

.logout {
	color: var(--red);
	display: inline-block;
	letter-spacing: 1px;
}

@media only screen and (max-width: 880px) {
	#mySidenav {
		display: none;
	}
}