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

.FlowupLabels .fl_wrap {
  /* Can change */

  height: 60px;

  /* Don't change */
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* initial label state */
.FlowupLabels .fl_label {
  /* Can change */
  top: 18px;
  left: 20px;

  font-size: 14px;
  /* Don't change */
  position: absolute;
  z-index: 3; /* This can be removed but then the labels must be placed after the inputs in the HTML */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


.FlowupLabels .fl_input {
  /* Can change */
  background: none;
  border-color: #7c81af;
  font-size: 14px;
 padding-left: 20px;
 padding-right: 20px;
padding-top: 22px;
  height: 100% !important;
  /* Don't change */
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  width: 100%;
  z-index: 2; /* This can be removed but then the labels must be placed after the inputs in the HTML */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.FlowupLabels select.fl_input{
  padding-left: 15px;
  padding-right: 15px;
}

/* Focus & populated label styling */
.FlowupLabels .fl_wrap.active .fl_label,
.FlowupLabels .fl_wrap.focused .fl_label,
.FlowupLabels .fl_wrap.populated .fl_label{
  top: 10px;
  font-size: 14px;
  color: #7c81af;
}
/* and graceful degradation */
.no-js .FlowupLabels .fl_label {
  /* Can change */
  top: 10px;
  font-size: 14px;
  color: #323232;
}
.FlowupLabels .fl_wrap.focused .fl_label {
  /* Can change */
  color: #7c81af;
}
.FlowupLabels .fl_wrap .fa{
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -10px;
  font-size: 18px;
  color: #7c81af;
  z-index: 22;
}


.FlowupLabels .fl_wrap .fa.out-icon{
  display: none;
  font-size: 25px;
  /*right: -35px;*/
  right: -26px;
    margin-top: -12px;
}
.FlowupLabels .fl_wrap.has-success .fa.out-icon{
  display: block;
  color: #92e786;
}
.FlowupLabels .fl_wrap.has-error .fa.out-icon{
  display: block;
  color: #ed7154;
}
.FlowupLabels .fl_wrap.has-error .fl_input{
  border-color: #ed7154;
}

.FlowupLabels .fl_wrap.select-dropdown .fl_label{
 top: 10px;
}
.FlowupLabels .fl_wrap.fl_wrap.active.yen .form-control{
  padding-left: 35px;
}
.FlowupLabels .fl_wrap.select-dropdown{
  border:1px solid #7c81af; 
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-left: 16px;
  padding-right: 15px;
  padding-top:20px;
}
.FlowupLabels .fl_wrap.select-dropdown select.fl_input{
  
  border:none !important;
  padding:0 !important;
   position:static;
   box-shadow:none;
   
   -webkit-box-shadow:none;  
   appearance:none;
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
      background: url('../../../images/drop-down-arrow.png') no-repeat;  /*Adds background-image*/
      background-position: right center!important;  /*Position of the background-image*/ 
      text-indent: 0.01px; /* Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/
   
  
}
.FlowupLabels .fl_wrap.select-dropdown select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}
.FlowupLabels .fl_wrap.select-dropdown.has-error {
    border-color: #ed7154;
}
.FlowupLabels .fl_wrap.select-dropdown.has-success {
    border-color: #468847; 
}
