$VFORM_INPUT_HEIGHT: 28px;
$form-grid-columns: floor($blueprint-grid-columns / 2);
$input-grid-columns: ceil(2 * $form-grid-columns / 3);
$label-grid-columns: floor($form-grid-columns / 3);

.v-form select {
  background-color: $WHITE_BACKGROUND_COLOR;
}

form.v-form {
  display: block;
  float: none;

  h1 {
    font-weight: bold;
    color: $PRIMARY_FONT_COLOR;
    font-size: 2em;
  }

  h3 {
    font-weight: bold;
    color: $PRIMARY_FONT_COLOR;
    font-size: 16px;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    & + fieldset {
      margin-top: 16px;
    }
    &.no-header {
      .control-group:first-child {
        padding-top: 0;
      }
    }
  }
  fieldset.two-column {
    @include column($label-grid-columns + $input-grid-columns);
    margin-top: 0;
    .control-group {
      .control-label, .controls {
        clear: both;
      }
    }
    .input-suffix {
      display: inline-block;
      margin-top: 23px;
    }
    .alert-icon {
      display: block;
    }
  }
  fieldset.two-column:nth-child(even) {
    @include column($label-grid-columns + $input-grid-columns, last);
  }
  fieldset.two-column:nth-child(n+3) {
     margin-top: 16px;
  }

  .form-header {
    @include column($label-grid-columns + $input-grid-columns, last);
    font-weight: bold;
    color: $SUCCESS_COLOR;
    text-transform: uppercase;
    .tooltip-icon {
      line-height: $LARGE_FONT_SIZE;
      height: $LARGE_FONT_SIZE;
      position: relative;
      right: 7px;
      &:before {
        line-height: $LARGE_FONT_SIZE;
      }
    }
    .form-heading-suffix {
      float: right;
      height: $LARGE_FONT_SIZE;
      line-height: $LARGE_FONT_SIZE;
    }
  }

  hr {
    @include column($label-grid-columns + $input-grid-columns);
    margin: 8px 0;
    height: 1px;
    border: 0;
    background-color: $PRIMARY_BORDER_COLOR;
    clear: both;
    &.footer {
      @include column($blueprint-grid-columns, last);
    }
  }

  .control-group {
    @include clearfix();
    clear: both;
    padding: 8px 0;
    &.wide-field {
      .control-label, input[type="text"], input[type="password"], input[type="email"], textarea, .help-block, .controls {
        @include column($form-grid-columns);
        clear: both;
      }
      >.control-label {
        line-height: inherit;
        padding-top: 0px;
        padding-bottom: 3px;
      }
    }
  }
  .control-group.footer {
    padding-top: 5px;
    padding-bottom: 10px;
    @include box-sizing(border-box);
    @include prepend($label-grid-columns);
    button, a {
      margin: 0 10px 0 0;
    }
  }

  .control-column {
    @include column(3);
    .control-label:first-child {
      padding-top: 0px;
    }
    .control-label {
      font-weight: bold;
      padding-top: 20px;
      @include column($label-grid-columns * 2);
    }
  }
  .control-column:last-child {
    @include column(3, last);
  }

  .geopicker {
    .map-footer {
      width: 458px;
      background-color: $PRIMARY_BACKGROUND_COLOR;
      border: 1px solid $PRIMARY_BORDER_COLOR;
      border-top: 0px;
      vertical-align: middle;
      .map-action {
        padding: 6px 0px;
        height: 18px;
        .action-link {
          font-weight: bold;
          font-size: $MEDIUM_FONT_SIZE;
          color: $LINK_COLOR;
          cursor: pointer;
          margin: 0px 6px;
        }
        .right {
          font-weight: normal;
          margin-left: 210px;
        }
      }
      .map-note {
        padding: 6px 0px 0px 6px;
        color: $SECONDARY_FONT_COLOR;
        font-size: $DEFAULT_FONT_SIZE;
      }
    }
    .map {
      width: 458px;
      height: 300px;
      border: 1px solid $PRIMARY_BORDER_COLOR;
      display: block;
    }
    .lock-icon {
      position: absolute;
      margin-left: 480px;
    }
    label {
      font-size:12px;
      padding:0px;
    }
  }

  .alert-icon {
    max-width: span($form-grid-columns);  // For wrapping the message if required.
    font-size: 1.333em;
    vertical-align: bottom;
    line-height: $VFORM_INPUT_HEIGHT;
  }

  .tooltip-icon {
    line-height: $VFORM_INPUT_HEIGHT;
    &:before {
      line-height: $VFORM_INPUT_HEIGHT;
    }
  }

  .status-icon {
    font-size: $DEFAULT_ICON_SIZE;
    line-height: $VFORM_INPUT_HEIGHT;
    padding: 0px;
    float:left;
    &:before {
      line-height: $VFORM_INPUT_HEIGHT;
    }
  }

  .lock-icon {
    font-size: $DEFAULT_ICON_SIZE;
    line-height: $VFORM_INPUT_HEIGHT;
    float: left;
    &:before {
      line-height: $VFORM_INPUT_HEIGHT;
    }
  }

  .input-suffix {
    position: absolute;
    margin-left: -43px;
    margin-right: 27px;
  }

  .checkbox-suffix {
    margin-right: 20px;
  }

  .countrystate-state {
    margin-top: 16px;
  }

  .controls {
    @include column($input-grid-columns);

    .input-append {
      margin-bottom: 7px;
      &:last-child {
        margin-bottom: 0;
      }

      .alert-icon, .status-icon, .lock-icon {
        position: absolute;
        margin-left: 20px;
      }
      // align vtax status icons 20px to the right of the field
      .vtax-status {
        width: 460px;
        margin-left: 51px;
      }

    }
    .remove-item {
      @include common-clickable-font-icon('\e061');  // x icon
      color: $SECONDARY_FONT_COLOR;
      font-size: $MEDIUM_FONT_SIZE;
      &:hover:before {
        color: $SECONDARY_FONT_COLOR;
        content: '\e063';  // x with circle around it icon
      }
      line-height: $VFORM_INPUT_HEIGHT;
      padding-left: $DEFAULT_ICON_SIZE/2;
    }

    .remove-item-multi {
      @include common-clickable-font-icon('\e061');  // x icon
      color: $SECONDARY_FONT_COLOR;
      font-size: $MEDIUM_FONT_SIZE;
      &:hover:before {
        color: $SECONDARY_FONT_COLOR;
        content: '\e063';  // x with circle around it icon
      }
      line-height: $VFORM_INPUT_HEIGHT;
      position: absolute;
      padding-top: 8px;
      margin-left: -20px;
    }

    .select2-container {
      width: $blueprint-grid-width * ($input-grid-columns + 1);
    }

    .vtax {
      position: relative;

      .vtax-tooltip {
        @include border-radius($DEFAULT_BORDER_RADIUS);
        display: none;
        position: absolute;
        z-index: 1000;
        background: $WHITE_BACKGROUND_COLOR;
        border: 1px solid $PRIMARY_BORDER_COLOR;
        padding: 6px;
        left: $blueprint-grid-width * ($input-grid-columns + 1) + $blueprint-grid-margin;
        white-space: nowrap;
      }

      .input-suffix {
        float: right;
        margin-right: 7px;
        margin-left: 8px;
      }

      &:hover .vtax-tooltip {
        display: block;
      }

      select, .select2-container {
        margin-right: 5px;
        margin-bottom: 5px;
        width: $blueprint-grid-width * ($input-grid-columns + 1) - $blueprint-grid-margin - $DEFAULT_ICON_SIZE;
      }

      &.first, &.non-removeable {
         .select2-container {
          width: $blueprint-grid-width * ($input-grid-columns + 1) - $blueprint-grid-margin - $DEFAULT_ICON_SIZE;
        }
      }

      select.normal {
        width: $blueprint-grid-width * ($input-grid-columns + 1);
      }

      span {
        float: left;
        select {
          width: ($blueprint-grid-width * ($input-grid-columns + 1)) - $blueprint-grid-margin - $DEFAULT_ICON_SIZE;
        }
        select.normal {
          margin-right: 0px;
          width: $blueprint-grid-width * ($input-grid-columns + 1) - $DEFAULT_ICON_SIZE;
        }
        &.indent-icon:before {
          margin-top: 5px;
          float: left;
        }
        & + span {
          select {
            width: ($blueprint-grid-width * ($input-grid-columns + 1)) - $blueprint-grid-margin - ($DEFAULT_ICON_SIZE * 2);
          }
          select.normal {
            margin-right: 0px;
            width: $blueprint-grid-width * ($input-grid-columns + 1) - ($DEFAULT_ICON_SIZE * 2);
          }
          margin-left: $DEFAULT_ICON_SIZE;
        }
      }
    }

    &.file-input {
      .preview {
        border: 1px solid $PRIMARY_BORDER_COLOR;
        margin-bottom: 10px;
        position: relative;
        text-align: center;
        padding: 10px;

        .error-icon-wrapper {
          background: $WHITE_FONT_COLOR;
          @include border-radius(10px);
          height: 15px;
          width: 18px;
          position: absolute;
          right: -9px;
          top: -7px;

          .error-icon {
            cursor: pointer;
            font-size: 22px;
            position: absolute;
            right: -2px;
            top: -4px;
          }
        }

        a {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .button {
        position: relative;
        overflow: hidden;

        input[type="file"] {
          @include opacity(0);
          position: absolute;
          top: 0;
          left: 0;
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
          &::-webkit-file-upload-button {
            cursor: pointer;
          }
        }
      }

      .help-block {
        white-space: pre-wrap;
      }
    }

    &.imageinput {
      @extend .file-input;

      // TODO - This should be remove when the preview-image class that exists in the vForm image upload template is
      // changed. For now this has to exist due to different release cycles of VFF and vForm.
      .preview-image {
        border: 1px solid $PRIMARY_BORDER_COLOR;
        margin-bottom: 10px;
        position: relative;
        text-align: center;
        padding: 10px;

        .error-icon-wrapper {
          background: $WHITE_FONT_COLOR;
          @include border-radius(10px);
          height: 15px;
          width: 18px;
          position: absolute;
          right: -9px;
          top: -7px;

          .error-icon {
            cursor: pointer;
            font-size: 22px;
            position: absolute;
            right: -2px;
            top: -4px;
          }
        }

        img {
          max-height: 230px;
          max-width: span($input-grid-columns) - 20;
        }
      }
    }
  }
  .controls:last-child {
    @include column($input-grid-columns, last);
  }

  label {
    font-size: $MEDIUM_FONT_SIZE;
    font-weight: normal;
    color: $PRIMARY_FONT_COLOR;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
    width: auto;
  }

  .control-label {
    @include column($label-grid-columns);
  }

  input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="time"],
  input[type="datetime"], input[type="number"], textarea, select {
    @include column($input-grid-columns);
    @include box-sizing(border-box);
    padding-left: 5px;
    padding-right: 5px;
    height: $VFORM_INPUT_HEIGHT;
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-size: $DEFAULT_FONT_SIZE;
    border: 1px solid $PRIMARY_BORDER_COLOR;
    @include border-radius($DEFAULT_BORDER_RADIUS);
    @include transition(border linear 0.2s, box-shadow linear 0.2s);
    @include placeholder {
      color: $TERTIARY_FONT_COLOR;
      font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
      font-size: $DEFAULT_FONT_SIZE;
    };
    &.input-with-tooltip {
      padding-right: $VFORM_INPUT_HEIGHT;
    }
    &:disabled {
      background-color: $PRIMARY_BACKGROUND_COLOR;
    }
  }
  select.error {
    color: $ERROR_COLOR;
  }
  input[type="checkbox"] {
    width: 20px;
    margin: 0 7px 0 0;
    &:disabled {
      background-color: $PRIMARY_BACKGROUND_COLOR;
    }
  }

  .input-append {
    // Can't use the regular compass clearfix in this case, because it sets overflow: hidden, and we have no
    // margin/padding on this particular div (and don't want any for easy layout). We want the overflow to show for our
    // glow effect.
    @include pie-clearfix();

    .multiple-input-note {
      @include border-left-radius($DEFAULT_BORDER_RADIUS);
      @include border-right-radius(0px);
      float: left;
      padding: 0 8px;
      margin-right: -1px;
      background-color: $SECONDARY_BACKGROUND_COLOR;
      color: $SECONDARY_FONT_COLOR;
      font-size: $LARGE_FONT_SIZE;
      line-height: $VFORM_INPUT_HEIGHT - 2;
      border: 1px solid $PRIMARY_BORDER_COLOR;
    }
    .multiple-input-note.long-note {
      font-size: 12px;
      margin-left: 5px;
    }

    input {
      width: 274px;
      margin-right: 0px;
      @include border-left-radius(0px);
      @include border-right-radius($DEFAULT_BORDER_RADIUS);
    }

    &:nth-of-type(n+10){
      input {
        width: 265px;
      }
    }
  }

  .add-field {
    float: right;
    font-size: $DEFAULT_FONT_SIZE;
    &.plus-icon:before {
      font-size: $DEFAULT_ICON_SIZE;
      vertical-align: text-bottom;
    }
  }

  textarea {
    height: 95px;
    border-radius: $DEFAULT_BORDER_RADIUS;
    border-width:1px;
    border-color: $PRIMARY_BORDER_COLOR;
  }

  .wide-button, .upload-progress, .progress-indicator {
    width: span($input-grid-columns) - 20;
    display: inline-block;
    text-align: center;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .upload-progress {
    color: $WHITE_FONT_COLOR;
    position: relative;
    text-align: left;
    z-index: 0;
    cursor: auto;

    .progress-indicator {
      @include border-radius($DEFAULT_BORDER_RADIUS 0 0 $DEFAULT_BORDER_RADIUS);
      background-color: $LINK_COLOR;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0;
      min-width: 0;
      z-index: -1;
      cursor: auto;

      &.complete {
        @include border-radius($DEFAULT_BORDER_RADIUS);
      }
    }
  }

  #form-link {
    margin-left: 160px;
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .required:after {
    content: " *";
    color: $ERROR_COLOR;
  }

  .cancel-link {
    font-weight: bold;
    font-size: $MEDIUM_FONT_SIZE;
    color: $LINK_COLOR;
    margin-left: 15px;
  }

  .required-note {
    font-size: $MEDIUM_FONT_SIZE;
    color: $ERROR_COLOR;
    float: right;
    line-height: 30px;
  }

  .help-block {
    @include clearfix();
    @include column($input-grid-columns);
    color: $SECONDARY_FONT_COLOR;
    font-size: 1em;
    padding-top: 8px;
  }

  .section-description {
    @extend .help-block;
    @include column($form-grid-columns);
  }

  tinymce {
    margin-right: 20px;
    float: left;
  }

  .v-button-group {
    label {
      float: none;
      clear: none;
    }
  }
  hoo {
    float: left;
    margin-right: 20px;
    .hoo-hours-type {
      height: 24px;
      margin-bottom: 10px;
      label {
        height: 100%;
        width: 228px;
        line-height: 24px;
        padding-top: 0px;
        color: $SECONDARY_FONT_COLOR;
      }
    }
    .hoo-entries {
      width: 460px;
      .add-hours {
        margin-bottom: 10px;
        padding: 5px 10px;
        height: auto;
      }
      .lock-icon {
        position: absolute;
        margin-left: 480px;
      }
      .hoo-entry {
        background-color: $GREEN_BACKGROUND_COLOR;
        border-radius: $DEFAULT_BORDER_RADIUS;
        padding: 5px 10px;
        margin-bottom: 10px;
        position: relative;
        font-size: $MEDIUM_FONT_SIZE;
        color: $SECONDARY_FONT_COLOR;
        min-height: 20px;
        .hoo-entry-days {
          width: 280px;
          display: inline-block;
        }
        .hoo-entry-time {
          text-align: left;
        }
        .hoo-entry-remove {
          position: absolute;
          top: 50%;
          margin-top: -10px;
          right: 5px;
        }
        .hoo-entry-description {
          display: block;
          color: $TERTIARY_FONT_COLOR;
          font-size: $DEFAULT_FONT_SIZE;
          font-style: italic;
          margin-top: 5px;
          margin-right: 20px;
          word-wrap: break-word;
        }
      }
      .hoo-preview {
        background-color: $SECONDARY_BACKGROUND_COLOR;
        color: $LINK_COLOR;
      }
    }
    .entry-form {
      position: relative;

      .dropdown {
        width: 438px;
      }
      .day-input {
        height: 30px;
        margin-bottom: 10px;

        .days-button-group {
          width: 350px;
          float: left;
        }

        .holiday-button-group {
          float: right;
          width: 85px;

          label {
            border-radius: $DEFAULT_BORDER_RADIUS;
          }
        }
      }

      .time-entry {
        margin-bottom: 10px;

        select {
          width: 53px;
          margin-right:2px;
          margin-left:2px;
          padding-right: 0;
          float:none;
          &:first-child {
            margin-left: 0px;
          }
        }

        span {
          font-weight: bolder;
        }

        .side-expand-icon {
          vertical-align: middle;
        }
      }

      .time-options {
        margin-bottom: 10px;

        input {
          width: initial;
          margin: 0px 3px;
          float: none;
        }

        label {
          float: none;
        }

        span {
          font-weight: bolder;
          margin-right: 5px;
        }

        .option-control {
          label {
            margin: 0px;
          }
        }
      }

      .hoo-description-input {
        width: 440px;
        @include box-sizing(border-box);
        margin-bottom: 10px;
        font-size: $MEDIUM_FONT_SIZE;
        font-style: italic;
        border-radius: $DEFAULT_BORDER_RADIUS;
        border: 1px solid $PRIMARY_BORDER_COLOR;
        padding:5px 10px;
        color: $SECONDARY_FONT_COLOR;
      }

      .add-button {
        margin-right: 10px;
      }

      .errors {
        margin-bottom:5px;
        .alert-icon {
          font-size:$MEDIUM_FONT_SIZE;
        }
      }
    }

    .no-hours {
      width: 460px;
      text-align: center;
      font-style: italic;
      font-size:$MEDIUM_FONT_SIZE;
      color:$TERTIARY_FONT_COLOR;
    }
  }
}

//custom style for when inside a v-box-heading container
.v-box-heading {
  .v-form {
    width: 100%;
    @include box-sizing(border-box);
    padding: 10px 10px 0 10px;
    .alert-icon {
      // The default styling on .alert-icon is max-width: span($form-grid-columns).
      // We are subtracting 22px here (20px for the above padding and 2px for a border on either side)
      // so the alert messages wrap correctly.
      max-width: span($form-grid-columns) - 22;
    }
    .footer {
      width: 100%;
    }
  }
}

.select2-results .vtax-parent {
  color: $TERTIARY_FONT_COLOR;
}

.select2-results .select2-highlighted {
  background-color: $DARK_BLUE !important; // This is flagged as important since we're overriding the colors from select2's CSS
}

.select2-dropdown-custom {
  width: 450px !important;
}

.multiselect {
  .multiselect-select2 {
    width: 300px;
    &.select2-container-active {
      .select2-choices {
        border-radius: $DEFAULT_BORDER_RADIUS $DEFAULT_BORDER_RADIUS 0 0;
        box-shadow: 0 0 5px $INPUT_HIGHLIGHT_COLOR;
        border: solid $INPUT_HIGHLIGHT_COLOR;
        border-width: 1px 1px 0;
      }
    }
    .select2-choices {
      background-image: none;
      border: 1px solid $PRIMARY_BORDER_COLOR;
      border-radius: $DEFAULT_BORDER_RADIUS;
      .select2-search-choice {
        div{
          line-height: 17px;
        }
        .select2-search-choice-close {
          top:5px;
          transition: none;
        }
      }
    }
  }
}

form.v-form .star-rating {
  display: inline-block;

  .star-icon {
    font-size: 60px;
    width: 64px;
    cursor: pointer;

    &.unselected {
      color: $TERTIARY_BACKGROUND_COLOR;
    }

    &:last-child {
      margin-right: 32px;
    }
  }

  & + .star-rating-message {
    display: inline-block;
    vertical-align: top;
    font-size: $MEDIUM_FONT_SIZE;
    line-height: 78px;
    color: $TERTIARY_FONT_COLOR;
  }
}

form.v-form .star-rating ~ .alert-icon {
  vertical-align: top;
  line-height: 78px;
}

.select2-drop.select2-multi-dropdown-custom.select2-drop-active{
  border-radius: 0px 0px $DEFAULT_BORDER_RADIUS $DEFAULT_BORDER_RADIUS;
  box-shadow: 0 0 5px $INPUT_HIGHLIGHT_COLOR;
  border: solid $INPUT_HIGHLIGHT_COLOR;
  border-width: 0px 1px 1px;
  .select2-results{
    margin-top: -5px;
    margin-right: 0px;
    padding-top: 5px;
    background-color: $WHITE_BACKGROUND_COLOR;
  }
  &.select2-drop-above{
    border-radius: $DEFAULT_BORDER_RADIUS $DEFAULT_BORDER_RADIUS 0px 0px;
    border-width: 1px 1px 0px;
    padding-top: 5px;
  }
}

// bug in select2 library, this adds a missing border
.select2-drop.select2-drop-above.select2-drop-active {
  border-bottom: 1px solid $ICON_COLOR_TWO;
}

form.v-filter {
  @extend .v-box-heading;
  @include column(3);
  @include box-sizing(border-box);

  fieldset {
    border: none;
    padding: 0;
    margin: 0;

    .control-group {
      color: $SECONDARY_FONT_COLOR;
      padding: 5px 10px;

      label {
        // These overwrite VFF's form.label styles
        font-weight: normal;
        margin: 0;
        width: auto;
        float: none;
      }
      .controls {
        display: inline;
        label {
          display: block;
        }
      }

      input, .filter-item-right {
        float: right;
      }

      select {
        width: 100%;
      }

      .line-separator {
        display: block;
        border: 0;
        height: 1px;
        background-color: $PRIMARY_BORDER_COLOR;
        margin: 0 -10px;
      }
      .text-separator {
        cursor: default;
      }
    }
  }

  .form-header {
    @extend h3;
    margin: 0px;
    padding: 7px;
    font-size: $MEDIUM_FONT_SIZE;
    background-color: $PRIMARY_BACKGROUND_COLOR;
    line-height: 16px;

    span {
      margin-right: 6px;
    }
  }

  .input-search {
    @include search-box;
    width: 100%;
    input {
      width: 175px;
    }
  }

  & + .v-feed {
    @include column(9, last);
  }
}

#vform-form .control-group.footer {
  padding-top: 10px;
  padding-left: 0px;
  border-top: 1px solid $PRIMARY_BORDER_COLOR;
  margin-top: 20px;
}
#vform-form .control-group.footer.footer-fixed {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  bottom: 0px;
  width: 940px;
  padding: 10px 0px 10px 0px;
  background-color: $WHITE_BACKGROUND_COLOR;
}
#vform-form .control-group.footer.footer-fixed.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear, visibility 0s linear;
}
#vform-form hr.footer {
  visibility: hidden;
}
#vform-form .footer-placeholder {
    margin-bottom: 80px;
}