@import "patientPhoto";

.edit-patient,.new-patient,.visit-patient{
  position:relative;
}
.edit-patient{
  span{
    &.text-only{
      display:inline-block;
      margin:8px 5px 8px 5px;
    }
    &.uneditable-input{
      width: 5.7em;
    }
  }
  .related-identifier-label{
    width: 14em !important;
  }
}

form .form-field{
  @media (max-width : 768px) {
    .field-value {
      @media (max-width : 580px) {
        float: none;
      }
      input{
        float: none !important;
        display: block;
      }
      input[type="checkbox"]{
        float: left !important;
      }
    }
    .field-attribute {
      @media (max-width : 580px) {
        float: none;
      }
      label{
        width: 17em !important;
        @media (max-width : 580px) {
          text-align: left !important;
          float: none;
          //width: auto !important;
        }
      }
    }
  }
  input[type="checkbox"]{
    margin-top: 9px;
    margin-left: 0;
  }
  label[for = "smokingHistory"]{
    @media (max-width : 990px) {
      width: auto !important;
    }
  }
}

section.form-field-inline{
  @include clearfix();
  margin: 0 -1.04167%;
  @media (max-width : 768px){
    margin-bottom: 0;
  }
  .mylegend{
    &.registraion_Basic_info{
      width: auto;
    }
  }
  article{
    &.form-field{
      .field-attribute{
        label{
          width: 15em;
          @media (max-width : 990px) {
            text-align: left;
          }
          @media (max-width : 768px) {
            text-align: right;
          }
          @media (max-width : 580px) {
            text-align: left;
          }
        }
      }
    }
    @include column(6);
    @media (max-width : 768px){
      @include column(12);
    }
  }
  &.form-field-inline-one-col{
    article{
      @include column(12);
      &.form-field{
        .field-attribute{
          label{
            width: auto;
            @media (max-width : 768px){
              width: 17em;
            }
          }
        }
      }
    }
  }
}

.mylegend {
  background: $lightestGray;
  line-height: 16px;
  margin-bottom:20px;
  padding: 3px 0;
  border-radius: 3px;
  border:1px solid $lightGray;
  span{
    display:inline-block;
    padding:2px 10px;
    font-weight:bold;
  }
  &.registraion_Basic_info{
    width: auto;
  }
}

.patient-common-info-container{
  input, textarea, ul.select{
    min-width: 0;
  }
  .patient-name-wrapper{
    @include clearfix();
    input[type="text"]{
      margin-right: 5px;
    }
    label#casteSameAsLastNameCheckLabel{
      width: auto;
    }
    .patient-name span{
      @include clearfix();
      float:left;
      @media (max-width : 768px) {
        display:block;
        float:none;
      }
    }
  }
}

.age-wrapper{
  .age-field{
    .input-prepend{
      margin: 5px 5px 0px 0px;
      .add-on{
        min-width: 0;
        background-color: $lightestGray!important;
        height: 19px;

      }
      input[type="number"]{
        width: 40px !important;
        &#ageMonths{
          @media (max-width : 768px){
            width: 53px !important;
          }
        }
      }
    }
  }
  .dob-birthtime-wrapper{
    .estimate-check {
      margin-top: 10px;
      margin-left: 7px;
      @media (max-width : 768px){
        margin-left: 0px;
      }
    }
    .estimated-label{
      label{
        @media (min-width : 990px) {
          width: auto !important;
          margin-top: 1em;
        }
      }
    }
    .birth-time-label{
       label{
         @media (max-width : 990px) {
           width: auto;
           margin: 1em 0.8em 0em 0em
         }
       }
    }
    .showOn-small-screen{
      @media (max-width : 768px){
        float: left;
        width: 100%;

      }
    }
    #birthtime{
      @media (min-width: 581px) and (max-width : 768px) {
        width: 12.5em;
      }
    }
  }
}

.submit-btn-container{
  margin-top: 20px;
  .submit-btn{
    margin-right: 10px;
  }
}

.selectGender{
  border: 1px solid $lighterGray;
  border-radius: 5px;
  ul{
    li{
      display: inline-block;
      a{
        padding: 5px 20px;
        display: block;
        border-right: 1px $lighterGray solid;
        color: #363463;
        &:hover ,&:active{
          background: $lightestGray;
        }
        &:focus{
          outline: 2px solid $clinicalFormFocus;
          background: $lightestGray;
        }
      }
      &:last-child a{
        border-right: none;
      }
    }
  }
}

.new-patient{
  form{
    input[type="checkbox"]{
      &#hasOldIdentifier{
        margin-top: 9px;
        margin-left: 0;
        margin-bottom: 0;
      }
    }
    .form-field{
      &.existing-patient{
        .field-attribute{
          &.hasOldIdentifier-field-attribute{
            label{
              width: auto;
              @media (max-width: 990px) {
                width: 15em;
              }
            }
          }
        }
      }
      #patientID{
        margin-right: 10px;
        @media (max-width: 768px) {
          margin-right:0;
        }
      }
    }
  }
  .field-value.field-value-has-identifier{
    @media (max-width : 990px) {
      clear:both;
      float:none;
      width: auto;
      display: table;
    }
    #registrationNumber{
      @media (max-width : 990px) {
        width: 10.8em;
        float:right !important;
        min-width: initial;
      }
      @media (max-width : 800px) {
        width:9.8em;
      }
      @media (max-width : 768px) {
        width: 10.8em;
      }
      @media screen and (max-width: 580px) {
        float:none !important;
        width: 12.5em;
      }
    }
  }
  #registrationNumber{
    margin-right: 10px;
  }
}


.addressContainer ,.otherInfoContainer ,.additional-info-wrapper{
  .form-field .field-attribute label{
    @media (max-width : 990px) {
      text-align: left;
    }
    @media (max-width : 768px) {
      text-align: right;
    }
  }
}

.oldId-wrapper{
  float: left;
}

.registration-dialog-message{
  padding: 15px 0 10px;
}


