/****  floating-Lable style start ****/
.floating-label { 
  position:relative; 
}
/*.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #757575;
}*/

.floating-input:focus , .floating-select:focus {
     outline:none;
     border-bottom:2px solid #5264AE; 
}

.form-group label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  display: none;
}

.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
	top: 0px;
	height: 20px;
	line-height: 20px;
	font-size: 11px;
	color: #666;
	font-weight: 500;
	display: block;
	left: .75rem;
	z-index:2;
}

.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
	top: 0px;
	height: 20px;
	line-height: 20px;
	font-size: 11px;
	color: #666;
	font-weight: 500;
	display: block;
	left: .75rem;
}

/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}


.floating-textarea {
   padding: 1rem .75rem;
}
.cus-name:focus ~ label, .cus-name:not(:placeholder-shown) ~ label {
	left: 1.70rem !important;
}

/* active state */
.floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* animation */
@-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; }
}

/****  floating-Lable style end ****/