@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,800");


* {
	margin: 0px;
	padding: 0px;
}
*, *:before, *:after {
	-ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html {
	/* height: 100%; */
}
body {
	background-color: rgb(231, 214, 196);
	color: rgb(26, 57, 75);

	min-height: 100vh;
	/* padding: 2vw 5vw 5vw 5vw; */
	/* padding: 0vw 5vw 5vw 5vw; */
	font-family: 'Roboto', Arial;
	font-size: 14px;
	}

a {
	text-decoration: none;
	color: #2c4a68;
}
a:hover {
	/* text-decoration: underline; */
	text-decoration: none;
	/* color: #458bcc; */
	color: #3175b9;
	
}


#wrap-header {
	padding: 0vw 5vw 0 5vw;
	background-color: rgb(231, 214, 196);
}
#header {
	/* background-color: #80ffce; */
	/* background-color: #fff; */
	display: flex;
	justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
	width: 100%;
	/* max-width: 1200px; */
	margin: 0 auto 50px;
	text-align: left;
	height: 100px;
	/* border-bottom: 2px solid #474747; */
	/* position: sticky; */
	top: 0px;
	/* background-color: #ffffff; */
	/* border-bottom: 0.5px solid #000; */
	margin-bottom: 20px;
	padding: 10px 0;
}
	#logo {
		padding: 0 20px;
	}
		#logo img {
			height: 80px;
		}
	.header-inside-left {
		display: flex;
		justify-content: flex-start;
		/* align-items: flex-start; */
		/* background-color: #fff; */
		/* width: 500px; */
	}
		.header-inside-left > div {
			margin-right: 20px;
		}
	.header-inside-right {
		display: flex;
		justify-content: flex-end;
		/* align-items: center; */
		/* background-color: #fff; */
		/* width: 500px; */
	}
		.header-inside-right > div {
			margin-left: 20px;
		}
		


#main {
	padding: 0vw 5vw 0 5vw;
}
#footer2 {
	padding: 0 5vw;
}


h1 {
	margin: 30px 0px 20px 0px;
	color: #2c4a68;
}
	h1 > span {
		color: #666;
		font-weight: 100;
	}
h2 {
	margin: 30px 0px 20px 0px;
	color: #2c4a68;
}
	/* h2 > span {
		color: #666;
		font-weight: 100;
	} */
h3 {
	margin: 20px 0px 10px 0px;
	color: #2c4a68;
}

	#logo {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#logo img {
		/* height: 50px; */
		/* margin: 15px 15px 12px 15px; */
		/* filter: sepia(50%);
		filter: opacity(80%); */
	}

	#system_name {
		font-size: 170%;
		color: #4f87bb;
	}

	.filter {
		/* margin: 10px; */
	}
	/*input[type="date"]:valid, select:valid {
		background-color: #99eebb;
	}*/

	table, th, td {
		border: 1px solid #666;
		/* border: 1px solid #000000; */
		border-collapse: collapse;
		padding: 5px 10px;
	}


@media screen and (max-width: 700px) {
	#header {
		display: block;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		/* max-width: 1200px; */
		margin: 0 auto 50px;
		text-align: left;
		height: 100px;
		/* border-bottom: 2px solid #474747; */
		/* position: sticky; */
		top: 0px;
		/* background-color: #ffffff; */
		/* border-bottom: 0.5px solid #000; */
		margin-bottom: 20px;
		padding: 10px 0;

		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		height: auto;
	}
	.header-inside-left {
		order: 2;
		display: flex;
		justify-content: center;
        flex-direction: column;
		
	}
	#logo {
		order: 1;
		margin-bottom: 10px;
	}
	.header-inside-right {
		order: 3;
		display: flex;
		justify-content: center;
        flex-direction: column;
	}

	.header-inside-left > div {
			margin-right: 0px;
			text-align: center;
			padding: 5px;
		}
	.header-inside-right > div {
		margin-left: 0px;
		text-align: center;
		padding: 5px;
	}
}