/*[ Component ]*/
.input_animation_div{
  width: 100%;
  position: relative;
  border-bottom: 3px solid #cdcdcd;
  margin-bottom: 40px;
}

.input_animation_placeholder{
	position: absolute; 
	bottom: 10px; 
	pointer-events: none; 
	color: #777;
}

.input_animation_placeholder > i {
	width: 20px;
	text-align: center;
}

.input_animation {
	outline: none;
	border: none;
	font-size: 18px;
	color: #555555;
	width: 100%;
	height: 35px;
	padding-left: 50px;
}

.focus-input {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  pointer-events: none;
  overflow: visible !important;
  white-space: nowrap;
}

.focus-input::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  /* Input Underline Color */
  background: rgba(219,21,99,1);
  background: -webkit-linear-gradient(45deg, #402656, #564162);
  background: -o-linear-gradient(45deg, #402656, #564162);
  background: -moz-linear-gradient(45deg, #402656, #564162);
  background: linear-gradient(45deg, #402656, #564162);
}

.focus-input::after {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  font-size: 13px;
  color: #999999;
  line-height: 1.2;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.alert-underline.focus-input.alert-underline-danger::before {
  /* Input Underline Color When alert*/
  background: rgba(219,21,99,1);
  background: -webkit-linear-gradient(45deg, #d5007d, #e53935);
  background: -o-linear-gradient(45deg, #d5007d, #e53935);
  background: -moz-linear-gradient(45deg, #d5007d, #e53935);
  background: linear-gradient(45deg, #d5007d, #e53935);
}
.alert-underline.focus-input.alert-underline-success::before {
  /* Input Underline Color When alert*/
  background: rgba(124,252,0,1);
  background: -webkit-linear-gradient(45deg, #32CD32, #00FF00);
  background: -o-linear-gradient(45deg, #32CD32, #00FF00);
  background: -moz-linear-gradient(45deg, #32CD32, #00FF00);
  background: linear-gradient(45deg, #32CD32, #00FF00);
}

/*---------------------------------------------*/
/* Underline animation */
.input_animation + .focus-input::after {
  top: 16px;
  left: 0;
}

.input_animation:focus + .focus-input::after {
  top: -13px;
}

.input_animation:focus + .focus-input::before {
  width: 100%;
}

.has-val.input_animation + .focus-input::after {
  top: -13px;
}

.has-val.input_animation + .focus-input::before {
  width: 100%;
}

.input_animation + .alert-underline.focus-input::before {
  width: 100%;
}

/*------------------------------------------------------------------
[ Alert validate ]*/
.input_alert_msg{
	position: absolute; 
	color: red; 
	margin-top: 5px;
	margin-left: 50px;
}

.input_alert_icon{
	position: absolute; 
	top: 20%; 
	text-align: right; 
	width: 100%; 
	padding-right: 10px; 
	pointer-events: none; 
}

@keyframes input_validation_fadein {
    from { translateY(60%); opacity: 0; }
    to   { translateY(0%); opacity: 1; }
}

.input_alert_icon{
	-webkit-animation: input_validation_fadein 0.5s; 
	-moz-animation: input_validation_fadein 0.5s; 
	-ms-animation: input_validation_fadein 0.5s; 
	-o-animation: input_validation_fadein 0.5s;
	animation: input_validation_fadein 0.5s;
}