/*doc
---
title: Form
name: Form
category: Layout - Form
---

Form is following the below structure:

```html_example
<form>
    <section class="form-field">
      <article class="form-field">
          <div class="field-attribute">
            <label>Postalcode
            </label>
          </div>
          <div class="field-value">
              <input type="text" id="postalCode">
          </div>
      </article>
      <article class="form-field">
          <div class="field-attribute">
            <label>Postalcode
                <span class="asterick">*</span>
            </label>
          </div>
          <div class="field-value">
              <input type="text" id="postalCode" value="incorrect value" class="illegalValue">
          </div>
      </article>
    </section>
</form>
```


*/



/*doc
---
title: Two column Layout Form
name: two_column_layout_form
category: Layout - Form
---

Form is following the below structure:

```html_example
<form>
    <section class="form-field-inline">
      <article class="form-field">
          <div class="field-attribute">
            <label>Postalcode
            </label>
          </div>
          <div class="field-value">
              <input type="text" id="postalCode">
          </div>
      </article>
      <article class="form-field right-form-field">
          <div class="field-attribute">
            <label>Postalcode
                <span class="asterick">*</span>
            </label>
          </div>
          <div class="field-value">
              <input type="text" id="postalCode" value="incorrect value" class="illegalValue">
          </div>
      </article>
    </section>
</form>
```


*/



/*doc
---
title: Multi Column Layout
name: multi_column_layout
category: Layout - Form
---


```html_example
    <form>
      <div class="row">
          <div class="col col1 form-field">
              <div class="field-attribute">
                   <label>Sample</label>
              </div>
              <div class="field-value">
                  <select>
                    <option value="" selected="selected">Select Relationship Type</option>
                    <option label="Doctor" value="doctor">Doctor</option>
                  </select>
              </div>
           </div>
           <div class="col col1 form-field">
              <div class="field-attribute">
                   <label>Label</label>
              </div>
              <div class="field-value">
                  <select>
                    <option value="" selected="selected">Select Relationship Type</option>
                    <option label="Doctor" value="doctor">Doctor</option>
                  </select>
              </div>
           </div>
           <div class="col col1 form-field">
              <div class="field-attribute">
                   <label>Till</label>
              </div>
              <div class="field-value">
                 <select>
                    <option value="" selected="selected">Select Relationship Type</option>
                    <option label="Doctor" value="doctor">Doctor</option>
                  </select>
              </div>
           </div>
      </div>
    </form>
```


*/

/******** form element styling start********/

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

form, .form {
    fieldset {
        display: inline-block;
        min-width: 60%;
        border:none;
        padding:0px;
        width:100%;
    }
    .form-field {
        @include clearfix();
        .field-attribute{
            float:left;
            label {
                width:15em;
                float:left;
                text-align:right;
                margin:0.7em 0.8em 0em 0em;
            }
        }
        .field-value {
            float: left;
            input[type="text"], input[type="password"],input[type="date"] {
                float: left;
                width: 12.5em;
                @media (max-width : 800px) {
                  width: 11.5em;
                }
                @media (max-width : 768px) {
                  width: 12.5em;
                }
            }

            input[type="number"] { width: 8em; }

            .value-text-only {
                display: inline-block;
                margin: 0.5em 0.8em 0em 0em;
            }
        }
        .offset-label {
            clear: both;
            width: 100%;
            box-sizing: border-box;
            padding-left: 240px;
        }
        .add-more {
            display: inline-block;
            margin-left: 5px;
            margin-top:9px;
            float:left;
            font-size: 13px;
            button {
              padding: 2px 0px;
              color: $black;
              i {
                color: green;
                padding: 0;
              }
            }
            @media screen and (max-width: 850px) and (min-width: 596px) {
              margin-top:13px;
            }
          @media screen and (max-width: 1024px) {
            margin-top: 0 ;
          }
        }
        textarea {
            height: 35px;
            width: 807px;;
            transition: height 0.1s ease;
            box-sizing: border-box;
            margin-top: 5px;
            &:focus {
                height: 75px;
            }
            &.consultation-img-comments {
                width: 100%;
            }
            @media screen and (max-width: 1130px) {
              width:600px;
            }
            @media screen and (max-width: 768px){
              width:275px;

            }
        }
    }
    .input-prepend {
        float:left;

        input{
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
            float:left;
            margin:0px !important;
        }

        .add-on{
            @extend input;
            border-radius: 3px;
            height: 21px;
            min-width: 17px;
            padding: 4px 5px;
            background-color: $lightestGray;
            border: 1px solid $lightGray;
        }
    }
    .input-prepend .add-on:first-child, .input-prepend .btn:first-child {
        border-radius: 4px 0 0 4px;
    }
    .input-prepend .add-on, .input-prepend .btn {
      margin-right:-1px;
    }
    input[disabled], select[disabled], textarea[disabled], input[readonly],
    select[readonly], textarea[readonly], .select-arrow select[disabled] {
        cursor: not-allowed;
        background-color: $lightestGray;
        color: $mediumGray;
        &:focus {
            cursor: not-allowed;
            background-color: $lightestGray;
            outline: none;
        }
    }
    .form-button-wrapper {
        margin-top:10px;
        padding-left:14em;
    }
}


.transparent { opacity: 0.2; }
.opaque { opacity: 1; }


/********* form element styling end***********/



form, .form {
  input, select, textarea, ul.select {
    color: $text;
    padding: 2px 10px;
    @media (max-width: 1024px) {
      padding: 5px 10px;
    }
    @media (max-width: 768px) {
      padding: 7px 10px;
    }
    margin: 0;
    margin-top: 5px;
    background-color: #FFF;
    border: 1px solid #DDD;
    &:focus {
      outline: 2px solid $link;
      background: $focus;
    }
  }
  input[type="date"]{
    padding: 1px 10px;
    @media (max-width: 1024px) {
      padding: 5px 10px;
    }
    @media (max-width: 768px) {
      padding: 7px 10px;
    }
  }


  select {
    min-width: 197px;
    width: 197px;
    height: 25px;
    font-family: $primaryFont;
    @media (max-width : 1024px){
      height: 31px;
    }
    @media (max-width : 800px){
      min-width: 183px;
      width:183px;
    }
    @media (max-width : 768px){
      width: 210px;
      height: 36px;
      min-width: 210px;
    }
    float: left;
  }

  select[disabled] {
    background: $lightestGray;
    border: $lightGray 1px solid;
    color: $lightGray;
    font-style: normal;
  }

  .select-arrow {
    position: relative;
    display: inline-block;
    cursor: pointer;

    &:after {
      position: absolute;
      display: inline-block;
      right: 7px;
      top: 0;
      height: 34px;
      content: "\f0d7";
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      font-family: "FontAwesome";
      pointer-events: none;
      margin-top: 5px;
      padding-left: 5px;
      line-height: 2.2em;
      border-left: 1px solid $lightGray;
    }

    select {
      -webkit-appearance: none;
      border-radius: 0;
      background: $white;
      cursor: pointer;
    }

    select[disabled] {
      background: $lightestGray;
      border: $lightGray 1px solid;
      color: $lightGray;
      font-style: normal;
      cursor: default;
    }
  }

  ul.select {
    margin-top: 0;
  }

  fieldset {


    legend {
      text-align: left;
      padding: 0 10px;
      font-weight: 300;
      //text-transform: uppercase;
    }
  }

  label {
    display: block;
    text-align: left;
    margin-bottom: 0px;
    margin-top: 8px;
  }

  p {
    text-align: left;
    strong {
      display: block;
      text-align: left;
      clear: both;
    }

    &.radio {
      label {
        margin-top: 0;
      }
    }

    &.radio-btn {
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px 20px 0;
      input {
        display: inline-block;
      }
      label {
        display: inline-block;
        margin: 0;
      }
    }
  }

  input[type="checkbox"], input[type="radio"] {
    min-width: 0;
    margin: 2px 5px;
    float: left;
  }

  input[type="checkbox"] {
    @include check-box;
  }
  input[type="date"]{
    padding: 1px 10px !important;
    @media (max-width: 1024px) {
      padding: 4px 10px !important;
    }
    @media (max-width: 768px) {
      padding: 6px 10px !important;
    }
  }
}

ul.select {
  text-align: left;
  margin: 0 20px;
  padding: 0;
  font-size: 0.8em;

  li {
    margin: 0 10px;
    text-align: left;
    display: inline-block;
    width: 250px;
    padding: 5px;
    color: $link;
    background-color: $white;
    border-bottom: 1px solid #EFEFEF;

    &:hover {
      background-color: $link;
      color: $white;
      cursor: pointer;
    }

    &.selected {
      background-color: $link;
      color: $white;
      border-color: transparent;
    }
  }
}

form p strong, .form p strong { display: inline; }

.computed-field {
    background: $lightestGray;
    border: 2px solid darken($bahmniPrimaryBtnColor, 5%);
    box-sizing: border-box;
    outline: 0;
    &:focus {
        background: $white;
    }
}

.compute-btn, .btn-small {color: darken($bahmniPrimaryBtnColor, 15%);}
.btn-small{
  color: $black;
  i{
    color: green;
  }
}


/* form invalid error */
form.submitted-with-error {
  .ng-invalid:enabled, .ng-invalid:focus {
    outline: none !important;
    border: 2px solid darken($clinicalFormInvalid, 30%);
    background: $clinicalFormInvalid;
  }
}

.illegalValue, buttons-radio.illegalValue button, concept input:invalid.illegalValue {
  &, &:focus {
    border: 2px solid darken($clinicalFormInvalid, 30%) !important;
    background: $clinicalFormInvalid !important;
    outline: 0;
  }
}
buttons-radio.illegalValue { border: 0 !important; background: none !important;}

.illegalValue{
  &:focus {
    border: 2px solid darken($clinicalFormInvalid, 30%) !important;
    background: $clinicalFormInvalid !important;
    outline: 0 !important;
  }
}

input[type="time"]{
  padding: 1px 10px;
  margin-left: 2px;
  @media (max-width: 768px) {
    padding: 7px 10px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  form .form-field .add-more, .form .form-field .add-more{
    @media screen and (max-width: 850px) and (min-width: 596px) {
      margin-top:24px;
    }
  }
}

div.duration.checkbox-inline {
  margin-top: -10px;
  @media screen and (max-width: 850px) and (min-width: 596px) {
    margin-top: 0;
    margin-left: 150px;
  }
  @media screen and (max-width: 595px) {
    margin-left: 10px;
    margin-top: 0;
    float: left;
  }
  input.duration-value {
    width: 52px;
    margin: 0 10px;
    padding: 5px;
    box-sizing: border-box;
  }
  select.duration-unit {
    margin-left: 10px;
    min-width: 180px;
  }
}

.checkbox-inline {
  padding: 10px 0 0 0;
  float: left;
  @media screen and (max-width: 685px) and (min-width: 600px) {
    padding: 0;
    margin-left: 221px;
  }
  @media screen and (max-width: 595px) {
    float: right;
    margin-right: 16%;
    padding: 0;
  }
  input[type="checkbox"] {
    margin-left: 10px!important;
  }
  span {
    display: inline-block;
    margin-top: 2px;
    &.for-separator {
      font-size: 12px;
      padding-top: 10px;
      @media screen and (max-width: 1024px) {
        padding-top: 16px;
      }
    }
  }
}
.grid-row {
  padding: 2px;
}
.grid-row-element {
  font-size: 12px;
  padding-left: 15px;
  padding-right: 15px;
  .fa-ok {
    display: none;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    line-height: inherit;
  }
}
.grid-row-element.active {
  color: $bahmniTertiaryColor;
  padding-left: 3px;
  .fa-ok {
    display: inline-block;
  }
}


#removeClonedObs.fa-remove {
  margin-top: 9px;
  margin-bottom: 3px;
  margin-left: 9px;
  margin-right: 4px;
  color: #9D0101;
  border-radius: 3px;
  background: $lighterGray;
  border: 1px solid $lighterGray;
  width: 18px;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  @media screen and (max-width: 850px) and (min-width: 596px) {
    margin-top:13px;
  }
}

.accept-btn-wrapper {
  margin: 7px 5px 0 20px;
  @media screen and (max-width: 1024px){
    margin: 7px 5px 0 0;
  }
  button{
    @media screen and (max-width: 768px){
      padding-left: 6px;
      padding-right: 6px;
    }
  }
}

.accept-btn-wrap-smallScreen{
   @media screen  and (max-width: 800px) and (min-width: 596px){
      margin-left:176px;
      clear:both;
   }
}

