@CHARSET "UTF-8";
html { height: 100%; }
body { display: flex; flex-flow: column; align-items: center; width: 100%; height: 100%;
	background: linear-gradient(to bottom, #689f38 0%,#90c761 27%,#689f38 100%);
}

/* === LAYOUT === */
#login-container { display: flex; flex-flow: column; justify-content: center; background: url('images/login_computer.png') no-repeat; background-position: 0px 80px; }
#login-header { display: flex; align-items: center; justify-content: center; padding: 100px 0 30px 0; }
#login-header img { margin: 0 30px; }
#login-form {
	background-color: #ECF0F1; padding: 20px; margin: 0 230px; border-radius: 5px; width: 300px; box-shadow: 0px 0px 80px 0px rgba(30, 30, 30, 0.45);
	border: 20px solid rgba(30, 30, 30, .35); background-clip: padding-box;
}
#copyright { text-align: center; color: #a9de7c; font-size: 0.8rem; padding: .5rem 0; }
#login-form-progress {display: none; text-align: center; color: #444; padding: 50px 0; }

#nipevs { font-size: 2.7rem; font-weight: bold; font-family: openSansBold; color: #afe384; }
#sprava { font-size: 1.6rem; color: #fff; margin: 0 0 0 50px; }

/* === INPUTY, BUTTON === */
input[type='text'], input[type='password'] {
	border: 1px solid #ECF0F1; padding: .6rem 1rem .6rem 2.1rem; font-size: 1.2rem; border-radius: 3px; transition: all 0.3s ease-in-out;
	font-weight: 300; box-sizing : border-box; width: 100%; color: #555;
}
input[type='text']:focus, input[type='password']:focus { border: 1px solid #689F38; }

#login-div { margin-bottom: 15px; position: relative; }
#login-div:after { position: absolute; left: 7px; top: 11px; font-family: FontAwesome; content: '\f007'; font-size: 1.3rem; color: #bbb; }
#password-div { margin-bottom: 15px; position: relative; }
#password-div:after { position: absolute; left: 7px; top: 11px; font-family: FontAwesome; content: '\f023'; font-size: 1.3rem; color: #bbb; }
#at-div { margin-bottom: 15px; position: relative; }
#at-div:after { position: absolute; left: 7px; top: 11px; font-family: FontAwesome; content: '\f1fa'; font-size: 1.3rem; color: #bbb; }

.button-block {
	width: 100%; text-align: center; background-color: #689F38; color: #fff; border: 0; border-radius: 3px; font-size: 1rem; font-weight: 700; padding: 10px 0;
	transition: all 0.3s ease-in-out; cursor: pointer;
}
.button-block:hover { background-color: #91c464; }

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }  /* Firefox 18- */
::-moz-placeholder { color: #999; }  /* Firefox 19+ */
:-ms-input-placeholder { color: #999; }

/* === loading === */
#noTrespassingOuterBarG{
height:10px;
margin: 10px auto;
width:80px;
border:1px solid #689f38;
overflow:hidden;
background-color:#ECF0F1}

.noTrespassingBarLineG{
background-color:#689f38;
float:left;
width:7px;
height:60px;
margin-right:12px;
margin-top:-14px;
transform:rotate(45deg);
}

.noTrespassingAnimationG{
width:118px;
animation-name:noTrespassingAnimationG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}

#noTrespassingFrontBarG{
}

@keyframes noTrespassingAnimationG{
	0%{margin-left:0px;}
	100%{margin-left:-19px;}
}