/* 
 * FlowupLabels Basic Stylesheet 
 * -----------------------------
 * This style sheet is marked with comments indicating 
 * what should and what shouldn't be changed for your 
 * styling purposes.
 */

/*.FlowupLabels {
  float: left;
}*/
.fl_wrap {
  position: relative;
  margin-bottom: 1.5rem;
}
.fl_wrap > span, .fl_wrap > input {
    transition: all 0.2s;
    touch-action: manipulation;
}
.floating-label{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0px 0 0 0px;
  transition: all 200ms;
  opacity: 1;
  font-size: 13px;
  color: #777777;
  pointer-events: none;
}

.inputText:focus + .floating-label,
.inputText:valid + .floating-label {
  left: 0;
  transform: translate3d(0, -150%, 0);
  opacity: 1;
}
#order .inputText:focus + .floating-label,
#order .inputText:valid + .floating-label {
  left: 10px;
  top: 5px;
}

#order .FlowupLabels .floating-label { left: 20px;top: 17px;}
@media (max-width:480px)  {
.FlowupLabels #order-delivery-address .form-right .fl_wrap.focused .floating-label,
.FlowupLabels #order-delivery-address .form-right .fl_wrap.populated .floating-label { left: 26px; }
.FlowupLabels #order-delivery-address .form-right .floating-label {left: 41px;}

.FlowupLabels #order-invoice-address .form-right .fl_wrap.focused .floating-label,
.FlowupLabels #order-invoice-address .form-right .fl_wrap.populated .floating-label { left: 27px; }
.FlowupLabels #order-invoice-address .form-right .floating-label {left: 41px;}
}


/*authentication page css*/
#authentication  .floating-label { left: 15px; top: 17px; font-size: 13px; color: #999999;}
#authentication #create-account_form .floating-label {top: 15px;}
#authentication .inputText:focus + .floating-label, 
#authentication .inputText:valid + .floating-label {left: 1px; top: 5px;  font-size: 12px;color: #000000;}
#authentication #create-account_form .inputText:focus + .floating-label, 
#authentication #create-account_form .inputText:valid + .floating-label {top: 4px; }

/*My information page css*/

#identity  .floating-label { left: 13px; top: 14px; font-size: 13px; color: #000000;  }
#identity .inputText:focus + .floating-label, 
#identity .inputText:valid + .floating-label {left: 0px; top: 5px;  font-size: 12px; }

/*address page*/
#address  .floating-label { font-size: 13px; color: #000000; }
#address .inputText:focus + .floating-label, 
#address .inputText:valid + .floating-label {left: 0px; top: 5px;  font-size: 12px; }

/*password page*/
#password  .floating-label { font-size: 13px; color: #999999; top: 15px;}
#password .inputText:focus + .floating-label, 
#password .inputText:valid + .floating-label {left: 0px; top: 5px;  font-size: 12px; color: #000000; }