.floating-label {
  position: relative;
}

.floating-label.floating-label-inline-block {
  display: inline-block;
}

/* This adds some margin to a field in the event they are too close together (it would only be used if the divider between the fields was a label) */
.floating-label-spacing {
  margin-top: 15px;
}

.floating-label label {
  visibility: hidden;
  position: absolute;
  top: 13px;
  left: 16px;
  font-size: 14px;
  margin: auto 0px;
  color: #999;
}

/*
  Bootstrap columns add padding which messes up the positioning of the labels.
  To fix this, we will update the label to include padding
*/
.floating-label.col-xs-1 label, .floating-label.col-sm-1 label, .floating-label.col-md-1 label, .floating-label.col-lg-1 label,
.floating-label.col-xs-2 label, .floating-label.col-sm-2 label, .floating-label.col-md-2 label, .floating-label.col-lg-2 label,
.floating-label.col-xs-3 label, .floating-label.col-sm-3 label, .floating-label.col-md-3 label, .floating-label.col-lg-3 label,
.floating-label.col-xs-4 label, .floating-label.col-sm-4 label, .floating-label.col-md-4 label, .floating-label.col-lg-4 label,
.floating-label.col-xs-5 label, .floating-label.col-sm-5 label, .floating-label.col-md-5 label, .floating-label.col-lg-5 label,
.floating-label.col-xs-6 label, .floating-label.col-sm-6 label, .floating-label.col-md-6 label, .floating-label.col-lg-6 label,
.floating-label.col-xs-7 label, .floating-label.col-sm-7 label, .floating-label.col-md-7 label, .floating-label.col-lg-7 label,
.floating-label.col-xs-8 label, .floating-label.col-sm-8 label, .floating-label.col-md-8 label, .floating-label.col-lg-8 label,
.floating-label.col-xs-9 label, .floating-label.col-sm-9 label, .floating-label.col-md-9 label, .floating-label.col-lg-9 label,
.floating-label.col-xs-10 label, .floating-label.col-sm-10 label, .floating-label.col-md-10 label, .floating-label.col-lg-10 label,
.floating-label.col-xs-11 label, .floating-label.col-sm-11 label, .floating-label.col-md-11 label, .floating-label.col-lg-11 label,
.floating-label.col-xs-12 label, .floating-label.col-sm-12 label, .floating-label.col-md-12 label, .floating-label.col-lg-12  label {
  padding-left: 16px;
}

/*
  As with above, it messes up when the div is an input group, so this fixes that
*/
.input-group.floating-label.col-xs-1 label, .input-group.floating-label.col-sm-1 label, .input-group.floating-label.col-md-1 label, .input-group.floating-label.col-lg-1 label,
.input-group.floating-label.col-xs-2 label, .input-group.floating-label.col-sm-2 label, .input-group.floating-label.col-md-2 label, .input-group.floating-label.col-lg-2 label,
.input-group.floating-label.col-xs-3 label, .input-group.floating-label.col-sm-3 label, .input-group.floating-label.col-md-3 label, .input-group.floating-label.col-lg-3 label,
.input-group.floating-label.col-xs-4 label, .input-group.floating-label.col-sm-4 label, .input-group.floating-label.col-md-4 label, .input-group.floating-label.col-lg-4 label,
.input-group.floating-label.col-xs-5 label, .input-group.floating-label.col-sm-5 label, .input-group.floating-label.col-md-5 label, .input-group.floating-label.col-lg-5 label,
.input-group.floating-label.col-xs-6 label, .input-group.floating-label.col-sm-6 label, .input-group.floating-label.col-md-6 label, .input-group.floating-label.col-lg-6 label,
.input-group.floating-label.col-xs-7 label, .input-group.floating-label.col-sm-7 label, .input-group.floating-label.col-md-7 label, .input-group.floating-label.col-lg-7 label,
.input-group.floating-label.col-xs-8 label, .input-group.floating-label.col-sm-8 label, .input-group.floating-label.col-md-8 label, .input-group.floating-label.col-lg-8 label,
.input-group.floating-label.col-xs-9 label, .input-group.floating-label.col-sm-9 label, .input-group.floating-label.col-md-9 label, .input-group.floating-label.col-lg-9 label,
.input-group.floating-label.col-xs-10 label, .input-group.floating-label.col-sm-10 label, .input-group.floating-label.col-md-10 label, .input-group.floating-label.col-lg-10 label,
.input-group.floating-label.col-xs-11 label, .input-group.floating-label.col-sm-11 label, .input-group.floating-label.col-md-11 label, .input-group.floating-label.col-lg-11 label,
.input-group.floating-label.col-xs-12 label, .input-group.floating-label.col-sm-12 label, .input-group.floating-label.col-md-12 label, .input-group.floating-label.col-lg-12 label {
  padding-left: 0px;
}


.floating-label.label-placeholder label {
  visibility: visible;
}

.floating-label input, .floating-label select {
  height: 46px;
}

.floating-label textarea {
  padding-top: 12px;
}

/*******  Focused/Inputted  *********/

.floating-label-active input {
  padding-top: 15px;
  padding-bottom: 4px;
}

.floating-label-active textarea {
  padding-top: 19px;
  padding-bottom: 4px;
}

.floating-label-active select {
  padding-top: 15px;
  padding-bottom: 4px;
}

.floating-label-active label {
  visibility: visible;
  position: absolute;
  top: 3px;
  left: 16px;
  font-size: 12px;
  z-index: 3;
  -webkit-transition: visibility 0.5s ease, top 0.5s ease, opacity 0.5s ease;
     -moz-transition: visibility 0.5s ease, top 0.5s ease, opacity 0.5s ease;
      -ms-transition: visibility 0.5s ease, top 0.5s ease, opacity 0.5s ease;
          transition: visibility 0.5s ease, top 0.5s ease, opacity 0.5s ease;
}

.floating-label-active.floating-label-focus label, .floating-label-force-small.floating-label-focus label {
  color: #287c96;
}

/* This is so we force the label to appear at all times */
.floating-label.floating-label-force-small label {
  visibility: visible;
  position: absolute;
  top: 3px;
  left: 16px;
  font-size: 12px;
  z-index: 3;
}

.floating-label.floating-label-force-small input {
  padding-top: 15px;
  padding-bottom: 4px;
}

.floating-label.floating-label-force-small textarea,
.floating-label.floating-label-force-small .pseudo-textarea {
  padding-top: 19px;
  padding-bottom: 4px;
  min-height: 47px;
  height: auto;
}

.floating-label.floating-label-force-small .pseudo-textarea {
  padding-left: 12px;
  padding-right: 12px; /* to match form-control */
  margin-bottom: 0px;
  border: none;
}


.floating-label.floating-label-force-small select {
  padding-top: 15px;
  padding-bottom: 4px;
}

/* This class only gets added if there are no labels */
.floating-label-no-label input, .floating-label-no-label textarea, .floating-label-no-label select
.floating-label-no-label.floating-label-active input, .floating-label-no-label.floating-label-active textarea, .floating-label-no-label.floating-label-active select{
  padding-top: 4px;
}