/*
File: style.css
Author: Gijs de Jong
*/

body {
background-color: #fff;
}

/*---------------------------------------------------------------------------------------------------*/

#wrapper {
width: 100%;
height: 100vh;
overflow: hidden;
font-family: Open Sans,sans-serif;
display: none;
}

#loading {
width: 0px;
height: 4px;
position: absolute;
background-color: #444;
}

/*---------------------------------------------------------------------------------------------------*/

#lockcontainer {
width: 500px;
height: 400px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
}

.logintext {
text-align: center;
margin-top: 30px;
font-size: 20pt;
color: #444;
}

.arrow {
width: 38px;
height: 38px;
position: absolute;
top: 52px; left: 0px; right: 0px;
margin-left: auto; margin-right: auto;
animation: arrow 3s infinite;
}

@keyframes arrow {
0% {
	top: 52px;
	opacity: 0;
}
25% {
	top: 52px;
	opacity: 1;
}
60% {
	top: 52px;
	opacity: 1;
}
100% {
	top: 64px;
	opacity: 0;
}
}

#lock {
width: 200px;
height: 200px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #eee;
border: 4px solid #ccc;
border-radius: 50%;
cursor: pointer;
display: none;
}

.lockimage, .unlockimage {
width: 120px;
height: 120px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

.footertext {
text-align: center;
margin-top: 270px;
margin-left: 78px;
font-size: 14pt;
color: #444;
}

.register, .forgotpassword {
transition: 0.3s;
cursor: pointer;
}

.register:hover, .forgotpassword:hover {
color: #7ec0ee;
}

/*---------------------------------------------------------------------------------------------------*/

#login {
width: 320px;
height: 400px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

#loginform {
width: 320px;
height: 210px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #eee; /*#7ec0ee*/
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

#register {
width: 675px;
height: 455px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

#registerform {
width: 320px;
height: 265px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: 95px 0px 0px 0px;
background-color: #eee; /*#7ec0ee*/
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

#passwordrequirements {
width: 330px;
height: 150px;
background-color: #fff;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: 95px 0px 0px 345px; /*179px 0px 0px 345px*/
box-shadow: 0px 0px 3px #444;
border-radius: 2px;
}

.prtext {
color: #444;
font-size: 14pt;
margin-top: 10px;
margin-bottom: 15px;
text-align: center;
}

.passwordrequirementslist {
list-style-type: disc;
margin-bottom: 10px;
margin-left: 30px;
color: #666;
font-size: 12pt;
}

#forgotpassword {
width: 320px;
height: 400px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

#forgotpasswordform {
width: 320px;
height: 210px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #eee; /*#7ec0ee*/
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

.formtext {
color: #444;
font-size: 18pt;
margin-top: 50px;
margin-bottom: 2px;
text-align: center;
}

.input {
width: 252px;
height: 40px;
margin-left: 25px;
margin-bottom: 15px;
padding-left: 8px;
padding-right: 8px;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
}

.submit {
width: 270px;
height: 40px;
margin-left: 25px;
background-color: #fff;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
cursor: pointer;
}

.input:hover, .submit:hover {
box-shadow: 0 0 5px #444 !important;
}

.input:focus {
border: 1px solid #7ec0ee;
box-shadow: 0 0 3px #444;
}

.submit:active {
border: 1px solid #7ec0ee;
box-shadow: 0 0 3px #444;
}

.back {
color: #444;
font-size: 14pt;
width: 84px;
margin: 250px auto;
text-align: center;
cursor: pointer;
transition: 0.3s;
display: none;
}

.back:hover {
color: #6ca6cd;
}

/*---------------------------------------------------------------------------------------------------*/

#sqlinput {
width: 420px;
height: 468px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
}

.sqlinputtext {
color: #444;
font-size: 18pt;
margin-top: 50px;
margin-bottom: 2px;
text-align: center;
}

#sqlinputform {
width: 420px;
height: 278px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #eee; /*#7ec0ee*/
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

.sqlinputarea {
width: 352px;
height: 165px;
font-family: 'Inconsolata', ;
margin-top: 26px;
margin-left: 25px;
margin-bottom: 15px;
padding-left: 8px;
padding-right: 8px;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
resize: none;
}

.sqlsubmit {
width: 370px;
height: 40px;
margin-left: 25px;
background-color: #fff;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
cursor: pointer;
}

.sqlinputarea:hover, .sqlsubmit:hover {
box-shadow: 0 0 5px #444 !important;
}

.sqlinputarea:focus {
border: 1px solid #7ec0ee;
box-shadow: 0 0 3px #444;
}

.sqlsubmit:active {
border: 1px solid #7ec0ee;
box-shadow: 0 0 3px #444;
}

.logout {
color: #444;
font-size: 14pt;
width: 84px;
margin: 330px auto;
text-align: center;
cursor: pointer;
transition: 0.3s;
}

.logout:hover {
color: #6ca6cd;
}