@medplum/react 0.9.16 → 0.9.19

package/dist/esm/styles.css

@@ -1,8 +1,8 @@
 .medplum-input {
   border: 0.1px solid var(--medplum-gray-300);
-  border-radius: 3px;
+  border-radius: 2px;
   background: var(--medplum-surface);
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   color: var(--medplum-gray-800);
   font-size: var(--medplum-font-normal);
   height: 34px;
@@ -12,6 +12,10 @@
   width: 100%;
 }
 
+.medplum-input::placeholder {
+  color: var(--medplum-gray-600);
+}
+
 .medplum-input:focus {
   background: var(--medplum-surface);
   color: var(--medplum-gray-900);
@@ -31,26 +35,6 @@
   color: red;
 }
 
-input[type='checkbox'],
-input[type='radio'] {
-  border: 0.1px solid var(--medplum-gray-300);
-  border-radius: 0;
-  background: var(--medplum-surface);
-  margin: 4px;
-}
-
-input[type='checkbox']:focus,
-input[type='radio']:focus {
-  background: var(--medplum-surface);
-  color: var(--medplum-gray-900);
-  border: 0.1px solid var(--medplum-blue-300);
-}
-
-input[type='checkbox']:disabled,
-input[type='radio']:disabled {
-  background: var(--medplum-gray-100);
-}
-
 .medplum-input-row {
   display: flex;
   width: 100%;
@@ -62,7 +46,7 @@ input[type='radio']:disabled {
 select.medplum-select {
   background: var(--medplum-surface);
   padding: 4px 8px;
-  margin: 1px;
+  margin: 1px 1px 1px 0;
   line-height: 28px;
   border-radius: 3px;
 }
@@ -70,7 +54,7 @@ select.medplum-select {
 select.medplum-select:not([size]) {
   border: 0.1px solid var(--medplum-gray-300);
   border-radius: 3px;
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   color: var(--medplum-gray-800);
   font-size: var(--medplum-font-normal);
   height: 34px;
@@ -98,14 +82,15 @@ select.medplum-select:disabled {
   font-size: var(--medplum-font-normal);
   line-height: 24px;
   color: var(--medplum-gray-800);
-  margin: 1px 2px;
+  margin: 1px 2px 1px 0;
   padding: 4px 12px;
   cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
 }
 
 .medplum-button:hover {
   background: var(--medplum-gray-200);
+  text-decoration: none;
 }
 
 .medplum-button:active {
@@ -191,7 +176,7 @@ select.medplum-select:disabled {
   border: 0.1px solid var(--medplum-gray-300);
   border-radius: 3px;
   background: var(--medplum-surface);
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   outline: 2px var(--medplum-surface);
   position: relative;
   cursor: text;
@@ -229,10 +214,10 @@ select.medplum-select:disabled {
 
 .medplum-autocomplete-container li.medplum-autocomplete-item.choice {
   margin: 1px 0 1px 4px;
-  padding: 0 6px;
-  border: 0.1px solid var(--medplum-orange-200);
+  padding: 2px 6px 0 6px;
+  border: 0.1px solid var(--medplum-gray-400);
   border-radius: 4px;
-  background-color: var(--medplum-gray-50);
+  background-color: var(--medplum-gray-200);
   cursor: move;
   line-height: 22px;
 }
@@ -244,7 +229,7 @@ select.medplum-select:disabled {
 .medplum-autocomplete-container li.medplum-autocomplete-item input {
   color: var(--medplum-gray-800);
   display: inline-block;
-  width: 80px;
+  width: 100%;
   height: 28px;
   line-height: 26px;
   padding: 0 0 0 4px;
@@ -375,31 +360,42 @@ select.medplum-select:disabled {
   text-decoration: none;
 }
 
-fieldset {
-  border: 0;
-  margin: 6px 0 16px 0;
-  padding: 2px 0 8px 0;
+.medplum-checkbox-form-section {
+  display: flex;
+  justify-content: space-between;
 }
 
-fieldset.bordered {
-  border: 0.1px solid var(--medplum-gray-300);
-  border-radius: 6px;
-  margin: 6px 0 16px 0;
-  padding: 2px 8px 8px 8px;
+.medplum-checkbox-form-section-checkbox-container {
+  width: 30px;
 }
 
-fieldset label,
-fieldset legend {
-  display: block;
-  margin: 2px 0 4px 0;
-  font-size: var(--medplum-font-small);
+.medplum-checkbox-form-section-details-container {
+  flex: 1;
+  width: 100%;
 }
 
-fieldset small {
+.medplum-checkbox-form-section-details-container > label {
+  font-weight: 500;
+}
+
+fieldset.medplum-form-section {
+  border: 0;
+  margin: 6px 0 12px 0;
+  padding: 2px 0 8px 0;
+}
+
+fieldset.medplum-form-section > label,
+fieldset.medplum-form-section > legend {
   display: block;
-  margin: 2px 0 4px 0;
-  padding: 2px 0 4px 0;
-  font-size: var(--medplum-font-small);
+  margin: 1px 0 3px 0;
+  line-height: 1.75;
+  font-weight: 500;
+}
+
+fieldset.medplum-form-section > p {
+  margin: 1px 0 4px 0;
+  padding: 1px 0 4px 0;
+  line-height: 1.75;
 }
 
 dl.medplum-description-list {
@@ -425,17 +421,41 @@ dl.medplum-description-list.compact dd {
   border: 0;
 }
 
+input[type='checkbox'],
+input[type='radio'] {
+  background: var(--medplum-surface);
+  padding: 10px;
+  margin: 4px;
+  transform: scale(1.25);
+}
+
+input[type='checkbox']:focus,
+input[type='radio']:focus {
+  color: var(--medplum-gray-900);
+  border: 0.1px solid var(--medplum-blue-300);
+}
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled {
+  background: var(--medplum-gray-100);
+}
+
 .medplum-textarea {
   background: var(--medplum-surface);
   border: 0.1px solid var(--medplum-gray-300);
   border-radius: 3px;
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   color: var(--medplum-foreground);
   line-height: 18px;
-  padding: 2px 4px;
+  padding: 8px 12px;
   margin: 0;
 }
 
+.medplum-textarea.monospace {
+  font-family: var(--medplum-monospace-font-family);
+  padding: 2px 4px;
+}
+
 .medplum-textarea:focus {
   background: var(--medplum-surface);
   color: var(--medplum-gray-900);
@@ -772,147 +792,383 @@ table.medplum-diff-table td {
 }
 
 .medplum-document textarea {
-  line-height: 18px;
   margin: 0;
-  min-height: 300px;
-  padding: 2px 4px;
+  min-height: 100px;
   width: 100%;
 }
 
-.medplum-footer {
-  text-align: center;
-  font-size: 12px;
+.modal-dialog {
+  background: var(--medplum-gray-600);
+  border: 0.1px solid var(--medplum-gray-700);
+  color: var(--medplum-foreground);
+  padding: 0;
+  position: absolute;
+  z-index: 21;
+  box-shadow: var(--medplum-shadow) 0 2px 6px;
+  outline: 0;
 }
 
-.medplum-footer a {
-  color: var(--medplum-gray-500);
-  margin: 0 8px;
+.modal-dialog a,
+.modal-dialog a:link,
+.modal-dialog a:visited {
+  color: var(--medplum-blue-800);
+  cursor: pointer;
 }
 
-header {
-  min-height: 50px;
-  line-height: 24px;
-  margin: 0 0 2px 0;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--medplum-navbar);
-  box-shadow: 0 1px 2px 0 var(--medplum-shadow);
-  color: white;
+.modal-dialog-bg {
+  background: rgba(0, 0, 0, 0.5);
+  left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
 }
 
-header > div {
+.modal-dialog-title {
+  background: var(--medplum-gray-800);
+  color: var(--medplum-surface);
+  cursor: pointer;
+  padding: 6px;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding: 0 8px 0 4px;
 }
 
-header svg {
-  margin-right: 8px;
+.modal-dialog-title-close {
+  cursor: pointer;
+  vertical-align: middle;
 }
 
-header a {
-  text-decoration: none;
-  padding: 0 8px 0 4px;
-  color: white;
-  font-weight: bold;
+.modal-dialog-title-close:hover {
+  background-color: var(--medplum-gray-700);
 }
 
-header a:hover {
-  text-decoration: none;
+.modal-dialog-title-close > svg {
+  width: 20px;
+  height: 20px;
 }
 
-header a:focus {
-  outline: none;
+.modal-dialog-content {
+  text-align: center;
+  background-color: var(--medplum-surface);
+  padding: 8px;
 }
 
-.medplum-nav-search-container {
-  border: 0;
-  border-radius: 3px;
-  background-color: var(--medplum-navbar-textbox);
-  box-shadow: none;
-  position: relative;
-  margin: 0;
-  cursor: text;
-  height: 32px;
-  width: 250px;
-  line-height: 28px;
-  margin-left: 32px;
+.modal-dialog-buttons {
+  text-align: right;
+  background-color: var(--medplum-gray-100);
+  border-top: 1px solid var(--medplum-gray-400);
+  padding: 8px;
 }
 
-@media (max-width: 700px) {
-  #medplum-header-logo {
-    display: none;
-  }
+.modal-dialog-buttons button {
+  padding: 1px 6px;
+}
 
-  .medplum-nav-search-container {
-    width: 200px;
-    margin-left: 16px;
-  }
+.medplum-filter-editor {
+  text-align: left;
+  width: 900px;
+  max-width: 900px;
 }
 
-.medplum-nav-search-container.focused {
-  background: var(--medplum-surface);
-  color: var(--medplum-gray-900);
-  border: 0.1px solid var(--medplum-blue-300);
-  box-shadow: 0 0 0 2px var(--medplum-blue-200);
+.medplum-filter-editor-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.medplum-nav-search-container > ul {
-  margin: 0;
+.medplum-menu-separator {
+  border-top: 0.1px solid var(--medplum-gray-400);
+  margin: 4px 0;
   padding: 0;
-  list-style-type: none;
-  overflow: hidden;
-  cursor: text;
-  height: 32px;
 }
 
-.medplum-nav-search-container > ul > li {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  list-style: none;
-  white-space: nowrap;
+.medplum-submenu-arrow {
+  color: var(--medplum-foreground);
+  left: auto;
+  padding-right: 6px;
+  position: absolute;
+  right: 0;
+  text-align: right;
   user-select: none;
 }
 
-.medplum-nav-search-container > ul > li.choice {
-  margin: 1px 0 1px 4px;
-  padding: 0 6px;
-  border: 0.1px solid var(--medplum-orange-200);
-  border-radius: 4px;
-  background-color: var(--medplum-gray-50);
-  cursor: move;
-  line-height: 22px;
+.medplum-title-bar {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  padding: 15px;
+  justify-content: space-between;
+  background: var(--medplum-surface);
+  border-bottom: 2px solid var(--medplum-gray-200);
   color: var(--medplum-gray-800);
 }
 
-.medplum-nav-search-container > ul > li.unstructured {
-  border: 0.1px dashed var(--medplum-red-700) !important;
+.medplum-title-bar > div {
+  display: flex;
+  align-items: center;
 }
 
-.medplum-nav-search-container > ul > li > input {
-  display: inline-block;
-  width: 80px;
-  line-height: 26px;
-  padding: 0 0 0 6px;
-  margin: 2px 0 0 2px;
-  outline: none;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  height: 28px;
-  color: var(--medplum-navbar-placeholder);
+.medplum-title-bar h1 {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 4px 0 1px;
+  margin: 0 4px 0 1px;
+  color: var(--medplum-gray-800);
 }
 
-.medplum-nav-search-container > ul > li > input::placeholder {
-  color: var(--medplum-navbar-placeholder);
+.medplum-search-control {
+  max-width: 100%;
+  overflow: auto;
+  text-align: left;
+  margin-bottom: 20px;
+  background: var(--medplum-surface);
 }
 
-.medplum-nav-search-container.focused > ul > li > input::placeholder {
-  color: var(--medplum-gray-500);
+.medplum-search-control .medplum-search-summary {
+  line-height: 28px;
+  padding: 2px 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/*
+ * Table styles
+ */
+
+.medplum-search-control > table {
+  width: 100%;
+  clear: both;
+  border-top: 0.1px solid var(--medplum-gray-300);
+  border-collapse: collapse;
+}
+
+.medplum-search-control > table tr {
+  border-bottom: 0.1px solid var(--medplum-gray-300);
+}
+
+.medplum-search-control > table td,
+.medplum-search-control > table th {
+  padding: 7px 10px;
+  cursor: pointer;
+}
+
+.medplum-search-control > table td.c {
+  text-align: center;
+}
+
+.medplum-search-control > table td.r {
+  text-align: right;
+}
+
+/* Header cells */
+
+.medplum-search-control > table thead th {
+  text-align: left;
+  background-color: var(--medplum-blue-50);
+  white-space: nowrap;
+  color: var(--medplum-gray-700);
+  border: 0.1px solid var(--medplum-gray-300);
+  position: relative;
+}
+
+.medplum-search-control > table thead th:hover {
+  background-color: var(--medplum-blue-200);
+}
+
+.medplum-search-control > table thead th.filters {
+  background-color: var(--medplum-gray-100);
+  text-align: center;
+  color: var(--medplum-gray-600);
+}
+
+.medplum-search-control > table thead th svg {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+}
+
+/* Body cells */
+
+.medplum-search-control > table tbody tr {
+  background-color: var(--medplum-surface);
+}
+
+.medplum-search-control > table tbody tr.high-priority {
+  background-color: var(--medplum-gray-300);
+}
+
+.medplum-search-control > table tbody tr.duplicate {
+  background-color: var(--medplum-gray-100);
+}
+
+.medplum-search-control > table tbody tr:hover {
+  background-color: var(--medplum-yellow-100);
+}
+
+.medplum-search-control > table tbody td {
+  color: var(--medplum-gray-800);
+  border-right: 0.1px solid var(--medplum-gray-100);
+}
+
+.medplum-search-control .medplum-empty-search {
+  background: var(--medplum-gray-100);
+  border: 0.1px solid var(--medplum-gray-300);
+  color: var(--medplum-gray-500);
+  text-align: center;
+  padding: 40px;
+  font-size: var(--medplum-font-big);
+}
+
+.medplum-search-icon-cell {
+  padding: 0 !important;
+  text-align: center !important;
+  width: 32px !important;
+  min-width: 32px !important;
+  max-width: 32px !important;
+}
+
+.medplum-search-icon-cell input[type='checkbox'] {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+}
+
+.medplum-footer {
+  text-align: center;
+  font-size: 12px;
+}
+
+.medplum-footer a {
+  color: var(--medplum-gray-500);
+  margin: 0 8px;
+}
+
+header {
+  min-height: 50px;
+  line-height: 24px;
+  margin: 0 0 2px 0;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--medplum-navbar);
+  box-shadow: 0 1px 2px 0 var(--medplum-shadow);
+  color: white;
+}
+
+header > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 0 4px;
+}
+
+header svg {
+  margin-right: 8px;
+}
+
+header a {
+  text-decoration: none;
+  padding: 0 8px 0 4px;
+  color: white;
+  font-weight: bold;
+}
+
+header a:hover {
+  text-decoration: none;
+}
+
+header a:focus {
+  outline: none;
+}
+
+.medplum-nav-search-container {
+  border: 0;
+  border-radius: 3px;
+  background-color: var(--medplum-navbar-textbox);
+  box-shadow: none;
+  position: relative;
+  margin: 0;
+  cursor: text;
+  height: 32px;
+  width: 250px;
+  line-height: 28px;
+  margin-left: 32px;
+}
+
+@media (max-width: 700px) {
+  #medplum-header-logo {
+    display: none;
+  }
+
+  .medplum-nav-search-container {
+    width: 200px;
+    margin-left: 16px;
+  }
+}
+
+.medplum-nav-search-container.focused {
+  background: var(--medplum-surface);
+  color: var(--medplum-gray-900);
+  border: 0.1px solid var(--medplum-blue-300);
+  box-shadow: 0 0 0 2px var(--medplum-blue-200);
+}
+
+.medplum-nav-search-container > ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  overflow: hidden;
+  cursor: text;
+  height: 32px;
+}
+
+.medplum-nav-search-container > ul > li {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  list-style: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.medplum-nav-search-container > ul > li.choice {
+  margin: 1px 0 1px 4px;
+  padding: 2px 6px 0 6px;
+  border: 0.1px solid var(--medplum-orange-200);
+  border-radius: 4px;
+  background-color: var(--medplum-gray-50);
+  cursor: move;
+  line-height: 22px;
+  color: var(--medplum-gray-800);
+}
+
+.medplum-nav-search-container > ul > li.unstructured {
+  border: 0.1px dashed var(--medplum-red-700) !important;
+}
+
+.medplum-nav-search-container > ul > li > input {
+  display: inline-block;
+  width: 100%;
+  line-height: 26px;
+  padding: 0 0 0 6px;
+  margin: 2px 0 0 2px;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  height: 28px;
+  color: var(--medplum-navbar-placeholder);
+}
+
+.medplum-nav-search-container > ul > li > input::placeholder {
+  color: var(--medplum-navbar-placeholder);
+}
+
+.medplum-nav-search-container.focused > ul > li > input::placeholder {
+  color: var(--medplum-gray-500);
 }
 
 .medplum-nav-search-container > ul > li > input::-moz-focus-inner {
@@ -1087,7 +1343,7 @@ div.medplum-nav-menu-container {
 }
 
 .medplum-questionnaire-builder .section > .top-actions {
-  top: 0;
+  top: 1px;
   padding: 4px;
   color: var(--medplum-gray-500);
 }
@@ -1099,7 +1355,7 @@ div.medplum-nav-menu-container {
 .medplum-questionnaire-builder .section > .top-actions,
 .medplum-questionnaire-builder .section > .bottom-actions {
   position: absolute;
-  right: 0;
+  right: 4px;
 }
 
 .medplum-questionnaire-builder .section > .top-actions a,
@@ -1114,292 +1370,145 @@ div.medplum-nav-menu-container {
   color: var(--medplum-blue-500);
 }
 
-.medplum-blame-container {
-  overflow-x: auto;
+.medplum-status {
+  padding: 1px 6px;
+  font-size: 80%;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 8px;
 }
 
-.medplum-blame {
-  border: 0.1px solid var(--medplum-gray-100);
-  border-collapse: collapse;
-  border-radius: 4px;
-  border-spacing: 0;
-  width: 100%;
-}
+/*
+ * Request status: https://hl7.org/fhir/valueset-request-status.html
+ * draft, active, on-hold, revoked, completed, entered-in-error, unknown
+ *
+ * Publication status: https://hl7.org/fhir/valueset-publication-status.html
+ * draft, active, retired, unknown
+ *
+ * Observation status: https://www.hl7.org/fhir/valueset-observation-status.html
+ * registered, preliminary, final, amended, cancelled, entered-in-error, unknown
+ *
+ * DiagnosticReport status: https://hl7.org/fhir/valueset-diagnostic-report-status.html
+ * registered, preliminary, final, amended, corrected, appended, cancelled, entered-in-error, unknown
+ *
+ * Task status: https://hl7.org/fhir/valueset-task-status.html
+ * draft, requested, received, accepted, rejected, ready, cancelled, in-progress, on-hold, failed, completed, entered-in-error
+ */
 
-.medplum-blame .start-row {
-  border-top: 0.1px solid var(--medplum-gray-100);
-}
-
-.medplum-blame .normal-row {
-  border-top: 0;
-}
-
-.medplum-blame .details {
-  border-right: 0.1px solid var(--medplum-gray-100);
-  padding: 4px;
-  font-size: 10px;
-  line-height: 10px;
-  vertical-align: top;
+.medplum-status-active,
+.medplum-status-draft,
+.medplum-status-preliminary,
+.medplum-status-registered,
+.medplum-status-requested {
+  background-color: var(--medplum-blue-50);
+  border: 0.01px solid var(--medplum-blue-300);
+  color: var(--medplum-blue-800);
 }
 
-.medplum-blame .line-number {
-  background-color: var(--medplum-gray-50);
-  border: 0;
-  color: var(--medplum-gray-500);
-  font-family: monospace;
-  padding: 4px 8px;
-  text-align: right;
+.medplum-status-on-hold {
+  background-color: var(--medplum-orange-50);
+  border: 0.01px solid var(--medplum-orange-300);
+  color: var(--medplum-orange-800);
 }
 
-.medplum-blame .line {
-  font-family: monospace;
-  padding: 4px 8px;
+.medplum-status-completed {
+  background-color: var(--medplum-green-50);
+  border: 0.01px solid var(--medplum-green-300);
+  color: var(--medplum-green-800);
 }
 
-.medplum-blame .line-pre {
-  margin: 0;
+.medplum-status-cancelled,
+.medplum-status-rejected,
+.medplum-status-revoked,
+.medplum-status-entered-in-error {
+  background-color: var(--medplum-red-50);
+  border: 0.01px solid var(--medplum-red-300);
+  color: var(--medplum-red-800);
 }
 
-.medplum-search-control {
-  max-width: 100%;
-  overflow: auto;
-  text-align: left;
-  margin-bottom: 20px;
-  background: var(--medplum-surface);
+.medplum-status-unknown {
+  background-color: var(--medplum-gray-50);
+  border: 0.01px solid var(--medplum-gray-500);
+  color: var(--medplum-gray-800);
 }
 
-.medplum-search-control .medplum-search-summary {
-  line-height: 28px;
-  padding: 2px 6px;
-  font-size: 12px;
-  white-space: nowrap;
+.medplum-request-group {
+  padding: 4px;
 }
 
-/*
- * Table styles
- */
-
-.medplum-search-control > table {
+.medplum-request-group-task {
+  display: flex;
+  flex-direction: row;
   width: 100%;
-  clear: both;
-  border-top: 0.1px solid var(--medplum-gray-300);
-  border-collapse: collapse;
-}
-
-.medplum-search-control > table tr {
-  border-bottom: 0.1px solid var(--medplum-gray-300);
-}
-
-.medplum-search-control > table td,
-.medplum-search-control > table th {
-  padding: 7px 10px;
-  cursor: pointer;
-}
-
-.medplum-search-control > table td.c {
-  text-align: center;
-}
-
-.medplum-search-control > table td.r {
-  text-align: right;
+  margin-bottom: 16px;
 }
 
-/* Header cells */
-
-.medplum-search-control > table thead th {
-  text-align: left;
-  background-color: var(--medplum-blue-50);
-  white-space: nowrap;
+.medplum-request-group-task-checkmark {
   color: var(--medplum-gray-700);
-  border: 0.1px solid var(--medplum-gray-300);
-  position: relative;
+  font-size: 24px;
+  width: 40px;
 }
 
-.medplum-search-control > table thead th:hover {
-  background-color: var(--medplum-blue-200);
+.medplum-request-group-task-details {
+  flex: 1;
+  line-height: 1.75;
 }
 
-.medplum-search-control > table thead th.filters {
-  background-color: var(--medplum-gray-100);
-  text-align: center;
-  color: var(--medplum-gray-600);
+.medplum-request-group-task-title {
+  font-size: 14px;
+  font-weight: bold;
 }
 
-.medplum-search-control > table thead th svg {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 14px;
-  height: 14px;
+.medplum-request-grou-task-actions {
+  width: 100px;
 }
 
-/* Body cells */
-
-.medplum-search-control > table tbody tr {
-  background-color: var(--medplum-surface);
+.medplum-blame-container {
+  overflow-x: auto;
 }
 
-.medplum-search-control > table tbody tr.high-priority {
-  background-color: var(--medplum-gray-300);
+.medplum-blame {
+  border: 0.1px solid var(--medplum-gray-100);
+  border-collapse: collapse;
+  border-radius: 4px;
+  border-spacing: 0;
+  width: 100%;
 }
 
-.medplum-search-control > table tbody tr.duplicate {
-  background-color: var(--medplum-gray-100);
+.medplum-blame .start-row {
+  border-top: 0.1px solid var(--medplum-gray-100);
 }
 
-.medplum-search-control > table tbody tr:hover {
-  background-color: var(--medplum-yellow-100);
+.medplum-blame .normal-row {
+  border-top: 0;
 }
 
-.medplum-search-control > table tbody td {
-  color: var(--medplum-gray-800);
+.medplum-blame .details {
   border-right: 0.1px solid var(--medplum-gray-100);
+  padding: 4px;
+  font-size: 10px;
+  line-height: 10px;
+  vertical-align: top;
 }
 
-.medplum-search-control .medplum-empty-search {
-  background: var(--medplum-gray-100);
-  border: 0.1px solid var(--medplum-gray-300);
+.medplum-blame .line-number {
+  background-color: var(--medplum-gray-50);
+  border: 0;
   color: var(--medplum-gray-500);
-  text-align: center;
-  padding: 40px;
-  font-size: var(--medplum-font-big);
-}
-
-.medplum-search-icon-cell {
-  padding: 0 !important;
-  text-align: center !important;
-  width: 32px !important;
-  min-width: 32px !important;
-  max-width: 32px !important;
-}
-
-.medplum-search-icon-cell input[type='checkbox'] {
-  margin: 0;
-  padding: 0;
-  border: 0.1px solid var(--medplum-gray-600);
-  outline: 0;
-}
-
-/*
- * Filter editor
- */
-
-.medplum-filter-editor {
-  text-align: left;
-  min-width: 800px;
-}
-
-.medplum-filter-editor-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.modal-dialog {
-  background: var(--medplum-gray-600);
-  border: 0.1px solid var(--medplum-gray-700);
-  color: var(--medplum-foreground);
-  padding: 0;
-  position: absolute;
-  z-index: 21;
-  box-shadow: var(--medplum-shadow) 0 2px 6px;
-  outline: 0;
-}
-
-.modal-dialog a,
-.modal-dialog a:link,
-.modal-dialog a:visited {
-  color: var(--medplum-blue-800);
-  cursor: pointer;
-}
-
-.modal-dialog-bg {
-  background: rgba(0, 0, 0, 0.5);
-  left: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 20;
-}
-
-.modal-dialog-title {
-  background: var(--medplum-gray-800);
-  color: var(--medplum-surface);
-  cursor: pointer;
-  padding: 6px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.modal-dialog-title-close {
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.modal-dialog-title-close:hover {
-  background-color: var(--medplum-gray-700);
-}
-
-.modal-dialog-title-close > svg {
-  width: 20px;
-  height: 20px;
-}
-
-.modal-dialog-content {
-  text-align: center;
-  background-color: var(--medplum-surface);
-  padding: 8px;
-}
-
-.modal-dialog-buttons {
-  text-align: right;
-  background-color: var(--medplum-gray-100);
-  border-top: 1px solid var(--medplum-gray-400);
-  padding: 8px;
-}
-
-.modal-dialog-buttons button {
-  padding: 1px 6px;
-}
-
-.medplum-menu-separator {
-  border-top: 0.1px solid var(--medplum-gray-400);
-  margin: 4px 0;
-  padding: 0;
-}
-
-.medplum-submenu-arrow {
-  color: var(--medplum-foreground);
-  left: auto;
-  padding-right: 6px;
-  position: absolute;
-  right: 0;
+  font-family: monospace;
+  padding: 4px 8px;
   text-align: right;
-  user-select: none;
 }
 
-.medplum-title-bar {
-  display: flex;
-  width: 100%;
-  height: 50px;
-  padding: 15px;
-  justify-content: space-between;
-  background: var(--medplum-surface);
-  border-bottom: 2px solid var(--medplum-gray-200);
-  color: var(--medplum-gray-800);
-}
-
-.medplum-title-bar > div {
-  display: flex;
-  align-items: center;
+.medplum-blame .line {
+  font-family: monospace;
+  padding: 4px 8px;
 }
 
-.medplum-title-bar h1 {
-  font-size: 14px;
-  font-weight: bold;
-  padding: 0 4px 0 1px;
-  margin: 0 4px 0 1px;
-  color: var(--medplum-gray-800);
+.medplum-blame .line-pre {
+  margin: 0;
 }
 
 .medplum-signin {