@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap');

body, html {
  font-family: 'Signika', sans-serif;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  color: black;
}
.background {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height:100vh;
	min-height:100vh;
	padding: 0px;
	margin: 0px;	
	overflow: hidden;
	z-index: -1;
	background-color: #fff;
}
.background #background_logo{
	position: absolute;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	padding:10px;
	margin:10px;
	background-repeat: no-repeat;
	background-image: url("../images/logo.svg");
}
.background #background_banner_top {
	position: absolute;
	left: calc(100vw - 70px);
	height: 105px;
	width: 70px;
	background-repeat: repeat-y;
	background-image: url("../images/banner.svg");	
}
.background #background_banner_logo {
	position: absolute;
	left: calc(100vw - 70px);
	top: 108px;
	height: 100vh;
	width: 70px;
	background-repeat: no-repeat;
	background-image: url("../images/bannerlogo.svg");	
}
.background #background_banner_bottom {
	position: absolute;
	left: calc(100vw - 70px);
	top: 225px;
	height: 100vh;
	width: 70px;
	background-repeat: repeat-y;
	background-image: url("../images/banner.svg");	
}
.page {
  display: none;
}
#busy_overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height:100%;
  padding: 0px;
  margin: 0px;
  background-color: #008bd210;
  z-index: 99;
  display: none;
}
#busy_overlay_wheel{
  width:200px;
  height:200px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-100px 0 0 -100px;
} 
#screen_login{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
	.login {
	  width: 100vw;
	  height: 250px;
	  margin-top:100px;
	  padding: 40px;
	}
	.result {
	  width: 100vw;
	  margin-top: 100px;
	  padding: 40px;
	}
	.background {
		left: 0px;
		top: 0px;
		padding: 0px;
		margin: 0px;
		z-index: -1;
		overflow: hidden;
		height: 100vh;
		min-height: 100vh;
		width: 100vw;
		position:absolute;
		overflow:hidden;
	}
	.background img{
		margin: 10px;
	}
	.background div{
		display: block;
		min-height:100vh;
		width: 50px;
		float: right;
		background-image: url("../images/banner.svg");
		background-repeat: repeat-y;
	}
	.background div img{
		position: relative;
		top: 50px;
		left: -8px;
	}	
}

@media (min-width: 601px) {
	.login {
	  width: 500px;
	  height: 250px;
	  text-align: center;
	  margin: auto;
	  margin-top:100px;
	  padding: 20px;
	  background-color: #008bd210;
	  border-radius:5px;
	  border: 1px solid #008bd2ff;
	}
	.result {
	  width: 500px;
	  text-align: left;
	  margin: auto;
	  margin-top:100px;
	  padding: 20px;
	  background-color: #008bd210;
	  border-radius:5px;
	  border: 1px solid #008bd2ff;
	}

	.background {
		left: 0px;
		top: 0px;
		padding: 0px;
		margin: 0px;
		z-index: -1;
		overflow: hidden;
		min-height: 100vh;
		height: 100vh;
		width: 100vw;
		position:fixed;
		overflow:hidden;	
	}
	.background img{
		margin:10px;
	}
	.background div{
		display: block;
		min-height:100%;
		width: 50px;
		float: right;
		background-image: url("../images/banner.svg");
		background-repeat: repeat-y;
	}
	.background div img{
		position: relative;
		top: 50px;
		left: -8px;
	}
}

#result_nextmoment{
  margin-top: 20px;
}
.entry_table_class td{
    text-align: center;
}
#screen_result_error {
  color: #f00;
  font-weight: 600;
}
#login_message {
  color: #f00;
  font-weight: 600;
}
#screen_result {
  display: none;
}
input {
  margin: 10px;
  padding: 5px;
  border-radius:5px;
  border: 1px solid #008bd2ff;
  color: black;
  background-color: white;
}
input::placeholder {
  color: #555;
}
input:autofill {
  color: black;
  background-color:#008bd210;
}
textarea {
  margin: 10px;
  padding: 5px;
  border-radius:5px;
  border: 1px solid #008bd2ff;
  background-color: white;
}
button {
  margin: 10px;
  padding: 5px;
  border-radius:5px;
  background-color: #008bd210;
  border: 1px solid #008bd2ff;
  transition: 0.3s;
  color: black;
  cursor: pointer;
}
button:hover {
  background-color: #008bd230;
}
button:active {
  background-color: #008bd250;
}