@import "../../scss/lib/bootstrap/variables";
@import "../../scss/lib/bootstrap/mixins";
@import "../../scss/lib/bootstrap/forms";

form {
  fieldset {
    legend {
      color: lighten($black, 20%);
      padding: 0;
      font-weight:700;
    }
  }
  input[type="checkbox"],
  input[type="radio"] {
    margin: 0 5px 0 0;
    border:none;
  }
  dt > label {
    font-weight: bold;
    color: $grayDarker;
  }
  dd {
    label { display: inline-block; /*margin-right: 10px;*/}
    input, textarea, .uneditable-input {
      width: 100%;
    }
    input, textarea, select, .uneditable-input {
      @include box-sizing(border-box);
    }
    input[type="text"],
    input[type="password"], input[type="datetime"],
    input[type="datetime-local"], input[type="date"],
    input[type="month"], input[type="time"], input[type="week"],
    input[type="number"], input[type="email"],
    input[type="url"], input[type="search"],
    input[type="tel"], input[type="color"], .uneditable-input {
      height: $baseLineHeight + 10px;
    }
    input.date {width: 120px;}
  }
  textarea {
    overflow: auto;
    min-height: 110px;
  }
  .label_description {
    font-weight:normal;
    margin-left:10px;
    font-size: 11px;
    line-height: 12px;
    color:#666;
  }
  dd.date-time-range-group {
    tr:nth-child(odd) td {border-bottom: solid silver 1px}
    td {
      padding: 10px 5px; vertical-align: top;
      label { margin-top: 3px;}
    }
  }
}
input[type="text"], input[type="password"], input[type="tel"], select, textarea {
  border: 1px solid $inputBorder;
  padding: 3px;
  margin: 0;
}
select {width: auto;}
input[type="checkbox"], input[type="radio"] {padding: 0;}
.checkboxlist td { padding-right: 20px;}

// Custom Forms
// -----------------------------------------------------------------
.form_header {
  font-weight: 700;
  font-size: $baseFontSize * 1.4;
  line-height: $baseLineHeight * 2;
  border-bottom: 1px solid #e5e5e5;
  color: $headingsColor;
}
dl {
  margin: 0;
  > dd { margin:0 0 ($baseLineHeight / 2) 0;}
}
input.autocomplete_not_found {background-color:#FFDEDE}

#submitGroup-element {
  margin:0;
  fieldset {
    padding:0;
    margin:0;
    border:0;
  }
  dl { text-align:center;}
  dd { display:inline-block;}
}

// Captcha
// -----------------------------------------------------------------
a.loading_captcha img {visibility:hidden}
a.loading_captcha {background: url('../../images/loading.gif') no-repeat center center}
input.captcha {width:150px;}
a.captcha_refresh {margin: 0 0 12px;}
.captcha_refresh img { border: 1px solid $inputBorder; @include border-radius($inputBorderRadius);}
.defaultHint_element {color:#656565;}

// Spam protection: hidden field
// -----------------------------------------------------------------
.alternative_email_address { display: none;}

// Filters
// -----------------------------------------------------------------
.filter_form, .sorter_form {
  margin-bottom: $baseLineHeight;
  dl {
    dt, dd { float:left; margin: 0 5px 0 0;}
    dd {margin: 0 10px 0 0;}
    dd#btnSearch-element, dd#btnCancel-element {padding-right: 0;}
    label { display:inline; line-height: $baseLineHeight * 1.2;}
    #query-element {width:300px;}

  }
}
#ecommerce-filter-form{
  dd#query-element {width:270px;}
  dd#submitGroup-element{
    /*clear: both; width: 100%;*/
    fieldset{
      dd{float: none;}
    }
  }
  dd#userId-element { width: 180px}
}

// DatePicker
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {margin-top: -0.9em !important; top: 50% !important; cursor: pointer;}

// Pager
// -----------------------------------------------------------------
.pagination .pull-left { line-height: 30px;}

// Form Element Decorator FckEditor
// -----------------------------------------------------------------
textarea.htmleditor {display:none;}
div.htmleditor_preview {
  height:190px;
  overflow:auto;
  border:solid silver 1px;
  padding:2px;
  @include border-radius(3px);
  @include box-sizing(border-box);
}
div.ck_toolbar {padding:5px; text-align:right; @include box-sizing(border-box);}
.ckeditor_edit div.ck_toolbar, .ckeditor_edit div.htmleditor_preview {display:none;}

.ui-datepicker-trigger { vertical-align:middle; cursor:pointer; margin:0 5px;}