.document-upload {
  font-size: 14px;
  .upload-header, .upload-header header {
    background: $bahmniSecondaryColor;
  }
  header {
    ul li {
      float: left;
      .back-btn {
        font-size: 16px;
        line-height: 1.1em;
      }
    }
    .header-logo {
      position: static;
    }
    h1.patient-details {
      font-size: 16px;
    }
  }
  .main {
    &.opd-content-wrapper {

    }
    h5 {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      background: linear-gradient(to bottom, $white, $lightestGray);
      border: 1px solid $lightGray;
      padding: 0 5px;
      margin: 0;
      cursor: pointer;
      i.state {
        color: $mediumGray;
        font-size: 18px;
        padding: 0;
      }
      small {
        font-size: 90%;
        color: $bahmniSecondaryColor;
      }
      .currentVisitMarker {
        color: $clinicalCurrentVist;
        float: right;
      }
    }
    .reg-srch-btn {
      margin-right: 0;
    }
    .tab-content {
      padding-right: 0;
    }
    .containsImageMarker {
      color: $bahmniLinkColor;
      float: right;
    }
    .visit-content {
        padding: 10px 10px 15px 10px;
        label.btn {
            border-radius: 3px;
            background: linear-gradient(to bottom, $white, $lightestGray);
            background-color: $lightestGray;
            border: 1px solid $lightGray;
            padding: 21px 30px;
            display: inline-block;
            line-height: 1.2em;
            color: $darkGray;
            cursor: pointer;
            min-width: 0;
            max-width: 300px;
            text-decoration: none;
            @media screen and (max-width: 480px) {
            width: 49%;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            padding: 20px 0;
            margin-top: 8px;
            }
        }
        button[disabled] {
          position: relative;
          top: 1px;
          color: $lightestGray;
        }
        .btn {
          padding: 20px 30px;
          &.btn-primary {
            background: $bahmniSecondaryColor;
            color: $white;

            &[disabled] {
              background: grey;
            }
          }
          @media screen and (max-width: 480px) {
            width: 49%;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            padding: 20px 0;
            margin-top: 8px;
          }
        }
        .files > li {
          clear: both;
          overflow: auto;
          border-bottom: 1px solid $lightestGray;
          padding:10px 0;
          &:last-child {
            border-bottom: 0;
          }
          .upload-inline-buttons {
            float: left;
          }
          img {
            float: left;
            width: 50px;
            height: 50px;
            background: $lightestGray;
            padding: 5px;
            margin-right: 10px;
          }
          .concept-name {
            min-width: 200px;
            margin: 0;
          }
          .concept-name.saved {
            font-family: $OpenSansBoldFont;
            border: 1px solid $lightGray;
            width: 200px;
          }
          .placeholder {
            width: 50px;
            height: 50px;
            padding: 2px;
            float: left;
            margin: 5px 20px 5px 2px;
            text-align: center;
            i {
              color: green;
              font-size: 20px;
              line-height: 55px;
              width: 40px;
            }
          }
          .file {
            overflow: auto;
            float: left;
            width: 95%;
            padding-right: 10px;
            box-sizing: border-box;
            @media screen and (max-width: 480px) {
              width: 80%;
            }
            .obs-comment-section{
              box-sizing: border-box;
              width:100% ;
            }
          }
          .file-actions {
            clear: right;
            float: right;
            padding: 10px 0;
            @media screen and (max-width: 480px) {
              width: 100%;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
            }
          }
          .file-remove {
            float: right;
            .row-remover{
              margin-top:0;
              span.fa-undo {
                color: $darkGray;
              }
            }
          }
        }
    }
    input:invalid {
      border: solid 2px $clinicalFormInvalid; 
    }
    select:invalid {
      border: solid 2px $clinicalFormInvalid;
    }

    @media screen and (max-width: 480px) {
      .field-value, form select {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
    }
    .form-field {
      clear: both;
    }
  }

  .reg-search-wrapper {
    h1 {
      font-size: 18px;
      padding: 0 5px;
      margin-bottom: 20px;
    }
    label {
      display: none;
    }
    input[type="text"] {
      height: 23px;
    }
    .reg-srch-btn {
      margin: 4px 0 0 5px;
    }
    h2 {
      font-size: 16px;
      margin: 10px 0 0 0;
      padding: 10px 5px;
      border-top: 1px solid $lightGray;
      border-bottom: 1px solid $lightGray;
      background: $lightestGray;
    }
    .patients {
      li {
        display: block;
        position: relative;
        border-bottom: 1px solid $lightGray;
        height: 65px;
        &:hover, &:focus, &:active {
          cursor: pointer;
          background: $lightestGray;
          .fa-user, h3 {
            color: $bahmniSecondaryColor;
          }
        }
        i {
          position: absolute;
          left: 5px;
          top: 10px;
          color: $mediumGray;
          & + div {
            position: absolute;
            left: 35px;
            top: 12px;
            h3 {
              font-size: 18px;
              margin-bottom: 7px;
            }
            .id {
              margin-right: 5px;
            }
            .name {
              margin-right: 5px;
            }
            .village {
              font-size: 14px;
            }
            .gender, .age {
              font-size: 14px;
              display: inline-block;
              padding: 3px;
              background: $lightestGray;
              border-radius: 3px;
              width: 20px;
              text-align: center;
            }
          }
        }
        .registration {
          font-size: 12px;
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
      }
    }
  }
}
.doc-upload-accordion {
  margin: 5px;
  background: $white;
}
button.mfp-close {
  font-size: 50px;
  color: $white;
  opacity: 1!important;
  &:before {
    content: "Close";
    font-size: 24px;
    position: relative;
    bottom: 10px;
    right: 10px;
  }
}
button.mfp-close:hover {
  background: none!important;
  cursor: pointer!important;
}
.white-popup {
  button.mfp-close {
    width: auto;
  }
}
.mfp-arrow {
  top: initial;
}
.visit-content form p {
  margin-bottom: 0;}

.document-upload {
  .patient-details {
    position: fixed;
    z-index: 111111;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    color: $lightestGray;
    font-size:16px;
    right:auto;
  }
}

@media screen and (max-width: 1024px) {
    .document-upload {
      .main.opd-content-wrapper {

      }
      header h1.patient-details {
        font-size: 14px;
        position: absolute;
      }
	    .doc-upload-accordion {
		    padding-top: 20px;
	    }

	    .messages {
		    .error-message, .info-message {
			    top: 70px;
		    }
	    }
    }
}

@media screen and (max-width: 760px) {
  .document-upload {
    .patient-details {
      top: 53px;
      color: $mediumGray;
      background: $white;
      padding: 5px;
      width: 100%;
      text-align: left;
      left: 50%;
      border-bottom: 1px solid $lightGray;
      font-size: 16px;
      padding-left: 40px;
      width: 87%;
    }
    .main .visit-content .files > li {
      .life {
        width: 100%;
      }
      .concept-name.saved {
        width: 170px;
        min-width: 100px;
      }
    }
  }
}
