.align{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.grid{margin-left:auto;margin-right:auto;max-width:320px;max-width:20rem;width:90%}.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.icons{display:none}.icon{display:inline-block;fill:#606468;font-size:16px;font-size:1rem;height:1em;vertical-align:middle;width:1em}*{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:100%;height:100%}body{background-color:#f1f1f1;color:#606468;font-family:open sans,sans-serif;font-size:14px;font-size:.875rem;font-weight:400;height:100%;line-height:1.5;margin:0;min-height:100vh}a{color:#eee;outline:0;text-decoration:none}a:focus,a:hover{text-decoration:underline}input{background-image:none;border:0;color:inherit;font:inherit;margin:0;outline:0;padding:0;-webkit-transition:background-color .3s;transition:background-color .3s}input[type=submit]{cursor:pointer}.form{margin:-14px;margin:-.875rem}.form input[type=password],.form input[type=text],.form input[type=submit]{width:100%}.form__field{display:-webkit-box;display:-ms-flexbox;display:flex;margin:14px;margin:.875rem}.form__input{-webkit-box-flex:1;-ms-flex:1;flex:1}.login{color:#eee}.login label,.login input[type=text],.login input[type=password],.login input[type=submit]{border-radius:.25rem;padding:16px;padding:1rem}.login label{background-color:#999;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:20px;padding-left:1.25rem;padding-right:20px;padding-right:1.25rem}.login input[type=password],.login input[type=text]{background-color:#aaa;border-bottom-left-radius:0;border-top-left-radius:0}.login input[type=password]:focus,.login input[type=password]:hover,.login input[type=text]:focus,.login input[type=text]:hover{background-color:#aaa}.login input[type=submit]{background-color:#6495ed;color:#eee;font-weight:700;text-transform:uppercase}.login input[type=submit]:focus,.login input[type=submit]:hover{background-color:#6495ed}p{margin-bottom:24px;margin-bottom:1.5rem;margin-top:24px;margin-top:1.5rem}.text--center{text-align:center}

/* laoding */
#modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

/* .loading {
	background: url('../images/loading.gif') repeat-x left top;
    height: 5px;
    margin: 1px 0;
	display: none;
} */
.box {
	position: relative;
	line-height: 22px;
}

#box_message {
	min-height: 36px;
	line-height: 30px;
	text-align: center;
	font-family: 'Calibri';
	font-weight: bold;
	font-size: 16px;
	color: rgba(90,116,0, 0.8);
	
}

#box_message.red{
	color: #f00;
}

#box_message.green{
	color: #008C23;
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
    url('../images/loading.gif')
    50% 50%
    no-repeat;
}
body.loading {
    overflow: hidden;
}
body.loading .modal {
    display: block;
}

#clock {
	background: url("../images/login/clock_bg.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    height: 102px;
    margin: 23px auto 0;
    width: 218px;
    display: block;
    text-align: center;
	font-family: 'Times New Roman';
	font-weight: 700;
	font-size: 48px;
	line-height: 102px;
}

#clock span  {
	display: block;
	float: left;
}

#clock span.min{
	margin-left: 50px;
	width: 52px;
}

#clock span.sec{
	width: 52px;
}
#clock .blink  {
	margin-top: -5px;
}
 .blink {
  -moz-animation-duration: 500ms;
  -moz-animation-name: blink;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  
  -webkit-animation-duration: 500ms;
  -webkit-animation-name: blink;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  
  animation-duration: 500ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@-moz-keyframes blink {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

@-webkit-keyframes blink {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

@keyframes blink {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

@media screen and (max-width: 450px) {
	
	body{
		min-width: 320px;
		min-height: 333px;
	}
    .loginBox{
		width: 320px;
		height: 333px;
		margin-left: -160px;
		margin-top: -167px;
	}
	
	.locked_key {
		display: none;
	}
	
	#box_message {
		min-height: 36px;
		line-height: 19px;
		text-align: center;
		font-family: 'Calibri';
		font-weight: bold;
		font-size: 14px;
		color: rgba(90,116,0, 0.8);
	}
}