* { box-sizing:border-box; }

/* basic stylings ------------------------------------------ */
.inputMaterialDesign                {
background-color: rgba(0,0,0,0);
  
  display:block;
  width:80px;
  border:none;
  border-bottom:1px solid #ccd1d9;
}

.inputMaterialDesign2                {
background-color: rgba(0,0,0,0);
  
  display:block;
  width:80px;
  border:none;
  border-bottom:1px solid rgba(.20);
}

.inputMaterialDesign:focus      { outline:none; }


/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:80px; }
.bar:before, .bar:after     {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#008ac4; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.inputMaterialDesign:focus ~ .bar:before, .inputMaterialDesign:focus ~ .bar:after {
  width:50%;
}