button {
  font-weight: 500;
  font-family: @specialFontFamily;
}

input, textarea, select, .uneditable-input {
  color: @textColor;
  border: 1px solid @formElementBorder;
  border-radius: 4px;
  padding: 4px;
  width: 220px;
}

.placeholder(@gray);

input, textarea {
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  @transition: border linear .2s, box-shadow linear .2s;
  .transition(@transition);
}

input:focus, textarea:focus {
  .placeholder(transparent);
  border-color: rgba(82,168,236,.8);
  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  .box-shadow(@shadow);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
}

input[type=search]:focus {
  border-color: red;
  @shadow: inset 0 1px 1px @white, 0 0 8px red;
  .box-shadow(@shadow);
}

.search-query {
  padding: 4px 14px;
  margin-bottom: 0; // remove the default margin on all inputs
  .border-radius(14px);
  #gradient > .vertical(@grayLighter, @softwhite);
  color: @blueDark;
  font-weight: normal;
}

.box {
  width: 99%;
}
.halfbox {
  width: 49%;
}

.block {
  fieldset {
    border: 1px solid #DBDBDC;
    padding: 10px;
    margin-bottom: 10px;
  }
  input {
    vertical-align: baseline;
  }
  legend {
    margin-bottom: @baseLineHeight;
    font-size: @baseFontSize ;
    line-height: @baseLineHeight;
    color: @grayDark;
    border-bottom: none;
    font-weight: bold;
    width: inherit;
  }
  label {
    font-weight: bold;
  }
  .element,
  .halfelement {
    float: left;
    padding-right: 10px;
    input[type="text"] {
      width: 150px;
    }
  }
}

.buttonblock {
  margin-top: 10px;
  margin-bottom: 20px;
  input {
    display: inline-block;
    width: auto;
  }
}

select[name="FromVersion"], select[name="ToVersion"] {
  width: 60px;
}

.form-success {
  color: #468847;
  text-align: center;
  font-weight: bold;
}


.control-group {
  margin-bottom: 45px;
}

input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
  > label,.help-block,.help-inline {
    color: @textColor;
    font-weight: normal;
  }
  input,select,textarea {
    color: @textColor;
    border-color: @borderColor;
    padding: 4px;
    &:focus {
      border-color: darken(@borderColor, 10%);
      .box-shadow(0 0 6px lighten(@borderColor, 20%));
    }
  }
}

.control-group.error {
  .formFieldState(#B94A48, #B94A48, #B94A48);
}

// only for contact form
.control-group textarea {
  width: 100%;
  margin-bottom: 20px;
}