// material ui scss classes
// material - input field
.mui-input-group { 
	position: relative; 
	margin-bottom: 2.7em; 
}

.mui-input {
	font-size: 1.12em;
	padding: 10px 0;
	-webkit-appearance: none;
	display: block;
  width: 100%;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid black;
}


.mui-input:focus { outline: none; border-bottom: 1px solid transparent; }

.mui-input-label {
	color: #999; 
	font-size: 1.12em;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: all 0.2s ease;
}

/* active */

.mui-input:focus ~ .mui-input-label, .mui-input.used ~ .mui-input-label {
	top: -20px;
  //transform: scale(.75); 
  font-size: 80%;
  left: -2px;
	/* font-size: 14px; */
	color: #0079ff;
}

.mui-input-error
{
  color: red;
  position:absolute;
  right: 0;
  width: 0.9em;
  height: 0.9em;
  text-align: center;
  align-self: center;
  top: 10px;
  border: 1px solid red;
  border-radius: 50%;
  padding: 5px;
}

.mui-input-error-msg
{
  color:red;
  font-size: 0.9em;
  height:1.5em;
}

/* Underline */

.mui-bar {
	position: relative;
	display: block;
	width: 100%;
}

.mui-bar:before, .mui-bar:after {
	content: '';
	height: 1px; 
	width: 0;
	bottom: 1px; 
	position: absolute;
	background:  #0079ff; 
	transition: all 0.2s ease;
}

.mui-bar:before { left: 50%; }

.mui-bar:after { right: 50%; }


/* active */

.mui-input:focus ~ .mui-bar:before, .mui-input:focus ~ .mui-bar:after { width: 50%; }


/* Highlight */

.mui-highlight {
	position: absolute;
	height: 60%; 
	width: 100px; 
	top: 25%; 
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}


/* active */

.mui-input:focus ~ .mui-highlight {
	animation: inputHighlighter 0.3s ease;
}


/* Animations */

@keyframes inputHighlighter {
	from { background: #4a89dc; }
	to 	{ width: 0; background: transparent; }
}