#index-bg{	background: transparent url(../img/bg/) center center no-repeat fixed;  background-size: cover;}
#header{ background:rgba(255, 255, 255, 0.65) url(../img/client-logo.png) center center no-repeat;  position: relative;  height: 100px;  width: 100%;  margin-bottom: 30px;}
#footer-box{  width: 100%;  height: 50px;  position: absolute;  bottom: 0;}
#loginshade{ height:100vh; overflow-x:hidden; overflow:hidden; background-color:rgba(0, 0, 0, 0.35);}
#appindexclock {min-width:50vw; color: #fff; display:table; bottom:20px; left:20px; position:fixed; padding:10px 10px 10px 10px; text-align:left; font-family:psyssegoeui; font-weight:lighter; }

/* BOX LOGIN */
.box{	position: relative;	margin: auto;	min-height: 410px;  top: 80px;	left: 0;	z-index: 200;	right: 0;	width:400px;	color:#666;	border-radius: 3px;  margin-bottom: 100px;  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);  background-color:rgba(0, 0, 0, 0.45);  overflow: hidden;}
.footer-text{  color: #cfd8dc;}
.box h1{  margin-left: 20px;  margin-top: 0;	font-size: 24px;  font-weight: 300;  color: #cfd8dc;  line-height: 35px;}
.box p{	font-size:14px;	text-align:center;}
.group {   position:relative;   margin-bottom: 35px;   margin-left: 40px; margin-right:40px; overflow:hidden;}
input{	outline: none;	padding:8px;	-moz-border-radius: 0;	-webkit-border-radius: 0;	border-radius: 0;	color: #000;	background: #fff;	border: 1px solid #ebebeb;	-webkit-box-shadow: inset 0 0 0 #fff, inset 0 0 0 #fff;	box-shadow: inset 0 0 0 #fff, inset 0 0 0 #fff;    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.inputOTP {  font-size:18px;  padding:12px 12px 12px 7px;  display:block;  width:220px;  border:none;  border-bottom:1px solid #757575; background-color:rgba(255, 255, 255, 0.25); color:#fff;}
.inputMaterial {  font-size:18px;  padding:13px 12px 12px 7px;  display:block;  width:319px;  border:none;  border-bottom:1px solid #757575; background-color:rgba(255, 255, 255, 0.25); color:#fff;}
.inputOTP:focus { outline:none;}
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label {  top:-2px;  font-size:11px;  color: #fff; font-weight:normal;}
.inputMaterial:focus { outline:none;}
/* LABEL ======================================= */
label{  color:#fff;   font-size:14px;  font-weight:normal;  position:absolute;  pointer-events:none;  left:25px;  top:12px;  transition:0.2s ease all;   -moz-transition:0.2s ease all;   -webkit-transition:0.2s ease all;}
/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before {  left:50%;}
.bar:after {  right:50%; }
/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {  width:50%;}
/* active state */
.inputMaterial:focus ~ .highlight {  -webkit-animation:inputHighlighter 0.3s ease;  -moz-animation:inputHighlighter 0.3s ease;  animation:inputHighlighter 0.3s ease;}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {	from { background:#5264AE; }  to 	{ width:0; background:transparent; }}
@-moz-keyframes inputHighlighter {	from { background:#5264AE; }  to 	{ width:0; background:transparent; }}
@keyframes inputHighlighter {	from { background:#5264AE; }  to 	{ width:0; background:transparent; }}
@keyframes bounce-nds{    from {opacity: 0;}    to {opacity: 1; transform: scale(1);}}
@keyframes bounce-out-nds{    from {opacity: 1; transform: scale(1);}    to {opacity: 0; transform: scale(0);}}