.form-group { margin-bottom: 10px; }

input[type="text"],input[type="email"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], textarea.form-control { @include box-shadow(none); @include border-radius(0px); @include transition(.3s); @include box-shadow(0px 1px 1px rgba(0,0,0,.2) inset); -webkit-appearance: none; background-color: $color-grey-light; border: none; font-size: 14px; outline: none !important; padding: 10px 9px 11px 9px; width: 100%; height: inherit;
  &:active, &:focus { @include box-shadow(inset 0px 1px 1px rgba(0,0,0,.2)); }
  &:hover { background-color: rgba(0,0,0,.02); }
}

.btn, select { @include box-shadow(none); @include border-radius(0px); @include transition(.3s); @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); background-color: $color-grey-light; border: none; color: $color-grey-medium; font-size: 14px; outline: none !important; padding: 10px 9px 9px 9px; width: auto;
  &:hover { background-color: darken($color-grey-light, 3%); color: $color-grey-medium; }
  &:active, &:focus { @include box-shadow(0px 1px 2px rgba(0,0,0,0), inset 0px 2px 2px rgba(0,0,0,.2)); background-color: darken($color-grey-light, 3%); color: $color-grey-medium;  }

  &.btn-default { @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); @include transition(.2s); background-color: $color-default; color: #fff;
    &:hover { background-color: darken($color-default, 3%); }
    &:active { @include box-shadow(0px 2px 2px rgba(0,0,0,0), inset 0px 2px 2px rgba(0,0,0,.2)); }
  }
  &.btn-grey-dark { background-color: $color-grey-dark; color: #fff;
    &:hover { background-color: lighten($color-grey-dark, 6%); }
  }
  &.btn-danger { background-color: #C9302C; color: #fff;
    &:hover { background-color: darken(#C9302C, 5%); }
  }
  &.btn-success { background-color: #5CB85C; color: #fff;
    &:hover { background-color: darken(#5CB85C, 5%); }
  }
  &.btn-info { background-color: #31B0D5; color: #fff;
    &:hover { background-color: darken(#31B0D5, 5%); }
  }
  &.btn-warning { background-color: #EC971F; color: #fff;
    &:hover { background-color: darken(#EC971F, 5%); }
  }

  &.small { font-size: 12px; padding: 5px 12px 5px; }

  &.large { font-size: 18px; padding: 15px 20px; }
}

// Checkboxes

.checkbox, .radio { padding-left: 0px; }

.checkbox {
  &.switch { margin: 0; padding: 0; z-index: 2;
    .icheckbox { @include border-radius(3px); @include box-shadow(none); @include transition(.3s); border: 2px solid #cdcdcd; background-color: #fff; display: inline-block; height: 25px; margin-left: 10px; position: relative; width: 45px; top: -1px;
      &:hover { border-color: $color-default;
        &:before { @include opacity(1); }
      }
      &:after { @include transition(.3s); @include opacity(0); @include font-awesome; color: $color-default-darker; content: "\f00c"; font-size: 11px; position: absolute; left: 5px; line-height: 20px; }
      &:before { @include transition(.3s); @include border-radius(2px); background-color: $color-default; content: ""; height: 17px; width: 17px; position: absolute; left: 2px; top: 2px; }
      &.checked { border-color: $color-default;
        &:before { @include opacity(1); background-color: $color-default-darker; left: 22px; }
      }
    }
  }
  .icheckbox { @include box-shadow(inset 0px 1px 1px rgba(0,0,0,.2)); position: relative; display: inline-block; vertical-align: middle; background-color: $color-grey-light; display: inline-block; height: 20px; margin-right: 10px; position: relative; width: 20px; top: -1px;
    &:after { @include transition(.3s); @include opacity(0); @include font-awesome; color: $color-grey-dark; content: "\f00c"; position: absolute;  line-height: 20px; left: 4px; }
    &.checked {
      &:after { @include opacity(1); }
    }
  }
}

.iradio { @include shadow-inner; @include border-radius(50%); position: relative; display: inline-block; vertical-align: middle; background-color: $color-grey-light; height: 20px; margin-right: 10px; position: relative; width: 20px; top: -1px;
  &:after { @include transition(.3s); @include opacity(0); @include border-radius(50%); width: 8px; height: 8px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; background-color: $color-grey-dark; }
  &.checked {
    &:after { @include opacity(1); }
  }
}

.input-group-addon { @include border-radius(0px); border: none; }

.input-group {
  .search { @include box-shadow(none); position: relative; width: 40px; z-index: 2; }
}

.form-group { position: relative; }

form {
  #form-status { line-height: 1; position: relative; top: -28px;
    #valid { position: relative; top: -10px;
      .icon { font-size: 24px; margin-right: 10px; vertical-align: middle; }
    }
    #invalid { color: red; position: relative; top: -10px; }
  }
  label.error { background-color: red; bottom: -30px; color: #fff;  font-size: 12px; left: 0;  padding: 5px; position: absolute; z-index: 2;
    &:before { border-style: solid; border-width: 0 3.5px 5px 3.5px; border-color: transparent transparent red transparent; content: ""; height: 0px; left: 5px; position: absolute; top: -5px; width: 0px; }
  }
}

.form-submit {
  .file-input { border: 2px solid $color-grey-light; padding: 15px; position: relative; width: 100%;
    .file-preview { @include border-radius(0px); border: none; padding: 0; margin-bottom: 20px;
      .close { position: absolute; right: 10px; top: 5px; }
      .file-preview-frame { @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); border: none; height: inherit;
        .file-preview-image { height: 100px; }
      }
    }
  }
}

// SELECT

.bootstrap-select { width: 100% !important; margin-bottom: 0 !important;
  .selectpicker { @include box-shadow(none); @include border-radius(0px); @include transition(.3s); @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); background-color: $color-grey-light; color: $color-grey-medium;
    &:focus, &:active { @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); outline: none !important; }
    &:hover { background-color: darken($color-grey-light, 3%); }
    .caret { border: none;
      &:after { @include font-awesome; color: $color-default; content: "\f107"; font-size: 18px; position: absolute; top: -7px; right: -2px; }
    }
    .filter-option { @include transition(.3s); padding-left: 0px; position: relative;
      &:before { @include opacity(0); @include font-awesome; @include transition(.3s); color: $color-default; content: "\f00c"; font-size: 14px; position: absolute; left: 0px; top: 2px; }
    }
  }
  &.show-menu-arrow {
    .dropdown-toggle {
      &:after { bottom: -5px; }
      &:before { border: none; }
    }
  }
  .dropdown-menu { @include border-radius(0px);  border: none; margin-top: 3px; padding: 0; padding-left: 0 !important;
    &.selectpicker { background-color: #fff !important; }
    li {
      &:first-child, &.selected {
        a { background-color: transparent; color: #9c9c9c; padding-left: 15px;
          &:hover { background-color: transparent; padding-left: 15px; }
        }
      }
      a { @include transition(.2s); color: $color-grey-medium; padding: 8px 15px;
        &:hover { background-color: $color-grey-light; padding-left: 20px; }
      }
    }
  }
  &.open {
    .selectpicker { @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); @include transition(.3s); }
  }
}

.form-search {
  .bootstrap-select {
    .selectpicker { font-weight: bold; }
  }
}

// DISPLAY TICK ICON AFTER OPTION IS SELECTED

.selected-option-check-a {
  padding-left: 20px;
  &:before { @include opacity(1); }
}
.selected-option-check {
  .selectpicker {
    .filter-option { padding-left: 20px;
      &:before { @include opacity(1); }
    }
  }
}

.jslider { font-family: 'Roboto', sans-serif; top: 12px;
  .jslider-value { background-color: transparent; color: #fff;  font-size: 12px; font-weight: bold; }
  .jslider-bg {
    i { height: 2px; }
    .l { background: none; background-color: #fff; }
    .f { background: none; background-color: #fff;  }
    .r { background: none; background-color: #fff; }
    .v { background: none; background-color: $color-default; height: 2px; }
  }
  .jslider-pointer { @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); background: url("../img/price-range-dragger.png") no-repeat 50% 50% $color-default; height: 14px; width: 14px; top: 12px;
    &:before { border-style: solid; border-width: 0 7px 8px 7px; border-color: transparent transparent $color-default transparent; content: ""; height: 0px;  width: 0px; position: absolute; top: -8px; left: 0; }
  }
  .jslider-label { color: #fff; }
}

.price-range { @include transition(.3s); @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); background-color: $color-grey-light; margin-bottom: 20px; padding: 15px 15px 10px;
  .jslider-label, .jslider-value { color: $color-grey-medium; }
}

// SEARCHBOX

.search-box-wrapper { z-index: 100; }
.search-box { @include transition(.4s); @include opacity(0); padding-right: 15px; position: absolute; width: 100%; z-index: 1;
  &.show-search-box { @include opacity(1); }
  h2 { border: none; padding-bottom: 0; }
  .btn { width: 100%; }
  .nav-pills {
    li {
      a { @include border-radius(0px); background-color: transparent; color: $color-grey-dark; }
    }
  }
  .form-map { @include transition(.4s); background-color: rgba(255,255,255,.3); padding: 5px 10px 1px 10px;
    &:hover { background-color: rgba(255,255,255,.9); }
    input[type="text"],input[type="email"], input[type="search"], input[type="password"], input[type="number"], textarea, select, .selectpicker, .price-range {
       background-color: $color-default-darker; border: none; color: #fff; font-size: 14px; font-weight: bold; min-height: 40px; padding: 10px 9px 9px 9px; width: 100%;
        &:hover { background-color: darken($color-default-darker, 3%); }
    }
    .selectpicker {
      .caret {
        &:after { color: #fff; }
      }
    }
    .price-range { @include transition(.3s); @include box-shadow(0px 1px 1px rgba(0,0,0,.2)); margin-bottom: 20px; padding: 15px 15px 10px; }
    .jslider-label, .jslider-value { color: #fff; }
  }
}
.horizontal-search {
  .search-box-wrapper { padding: 20px 0; position: relative !important; top: inherit !important; background-color: $color-default; //background-color: $color-default-darker;
    .search-box { padding-right: 0; position: relative;
      hr { margin-bottom: 10px; margin-top: 10px; }
      .advanced-search-toggle { padding: 10px 0px; color: #fff; position: absolute; top: 0; right: 0; //float: right;
        .fa { color: $color-default-darker; margin-left: 5px;  }
      }
      .nav-pills {
        li {
          &.active {
            a { @include opacity(1); background-color: $color-default-darker; color: #fff;
              &:after { @include opacity(1); }
            }
          }
          a { @include transition(.4s); color: #fff; position: relative;
            &:after { @include opacity(0); @include transition(.4s); width: 0; border-style: solid; border-width: 5px 3.5px 0 3.5px; border-color: $color-default-darker transparent transparent transparent; content: ""; position: absolute; left: 0; right: 0; margin: auto; bottom: -5px; }
          }
        }
      }
      .form-map { background-color: transparent; padding: 0; margin-top: 20px;
        input[type="text"],input[type="email"], input[type="search"], input[type="password"], input[type="number"], textarea, select, .selectpicker, .price-range {
          background-color: #fff; color: $color-grey-medium;
          &:hover { background-color: $color-grey-light; }
        }
        button { background-color: $color-default-darker; }
        .selectpicker {
          .caret {
            &:after { color: $color-default; }
          }
        }
        .jslider-label, .jslider-value { color: $color-grey-medium; }
      }
      .advanced-search  { padding-bottom: 20px;
        h3 { margin-top: 0; }
      }
    }
  }
}
.horizontal-search-float {
  .search-box { padding-right: 0; position: inherit;
    .nav-pills {
      li {
        &.active {
          a { @include opacity(1); background-color: rgba(255,255,255,.9); color: $color-default-darker; }
        }
        a { @include opacity(.7); @include transition(.4s); background-color: rgba(255,255,255,.9); color: $color-grey-medium; }
      }
    }
    .form-map { background-color: rgba(255,255,255,.9); padding: 15px 15px 5px 15px;
      &:hover { background-color: rgba(255,255,255,1); }
      input[type="text"],input[type="email"], input[type="search"], input[type="password"], input[type="number"], textarea, select, .selectpicker, .price-range {
        background-color: $color-default-darker; border: none; color: #fff; font-size: 14px; font-weight: bold; min-height: 40px; padding: inherit; padding-left: 10px; width: 100%;
        &:hover { background-color: darken($color-default-darker, 3%); }
      }
      .price-range {  margin-bottom: 0; padding: 15px 15px 10px; }
      .jslider-label, .jslider-value { color: #fff; }
    }
  }
}

// FADE IN

.animation-fade-in { @include animation-name(animation-fade-in); @include animation-duration(.2s); @include keyframes(animation-fade-in); }
@include keyframes(animation-fade-in) {
  0% {
    @include opacity(0);
  }
  100% {
    @include opacity(1);
  }
}

// FADE OUT

.animation-fade-out { @include animation-name(animation-fade-out); @include animation-duration(.2s); @include keyframes(animation-fade-out); }
@include keyframes(animation-fade-out) {
  0% {
    @include opacity(1);
  }
  100% {
    @include opacity(0);
  }
}