admin-panel {
  display: block;
}

admin-panel .panel-group .panel {
  margin-bottom: 0;
}

admin-panel .panel .panel-body {
  padding: 15px 10px 20px 15px;
}

admin-panel .panel-heading .dropdown-menu button.list-item-link {
  width: 100%;
  text-align: left;
}
regular-care-form {
  .regular-care-form-fields-patient-is-rc {
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    opacity: 1;
    will-change: opacity;
  }

  &[data-patient-is-registered="false"] {
    .regular-care-form-fields-patient-is-rc {
      opacity: 0;
      pointer-events: none;
      height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  }
}
annotatable-card-notes {
  display: block;

  .list-and-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;

    > .notes-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
  }

  .actions {
    display: flex;
    flex-direction: column;

    @media (min-width: 768px) {
      margin-left: auto;
      width: calc(50% - 0.5rem);
    }
  }

  button.btn-link {
    border: none;
    padding: 0;
  }
}
edit-annotatable-note-form {
  display: block;

  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }
  &[data-loading] {
    form {
      display: none;
    }
  }

  form {
    *:not([type="hidden"]) + textarea {
      margin-top: 1rem;
    }
  }
}
/* Styles moved to shared-dialog component */
.billing-report-pdf {
  .doctor-fields {
    background-color: #ddd;
    display: flex;
    margin-bottom: 1.5rem;
    padding: 1rem;
  
    .doctor-name-address {
      flex: 1;
    }
  
    .report-number-period {
      flex: 1;
      text-align: right;
    }
  
    .doctor-name, .report-number {
      font-weight: bold;
    }
  } 

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1rem;
    text-align: center;
    width: 100%;
    margin-bottom: 3rem;
    table-layout: auto;

    th, td {
      padding: 1rem;
    }

    td.value {
      font-family: monospace;
      font-size: 0.9rem;
    }

    td.money-value {
      text-align: right;
    }

    th {
      background-color: #aaa;
      font-weight: 600;
      color: white;
    }

    tbody {
      tr:nth-child(odd) {
        background-color: #f8f8f8;
      }

      tr:nth-child(even) {
        background-color: #fdfdfd;
      }

      tr.pseudo-footer {
        background-color: white;

        td.total-title {
          font-weight: bold;
          text-align: right;
        }      
      }
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
  }

  h2 {
    font-size: 1.8rem;
    margin-bottom: 1.7rem;
  }

  h3 {
    font-size: 1.5rem;
    margin-bottom: 1.6rem;
  }

  p {
    margin-bottom: 1rem;
  }
}
.billing-report-pdf-footer {
  font-size: 0.7rem;
  width: 100%;

  .disclaimer-and-page-number {
    display: flex;
    margin-bottom: 1rem;
  }

  .disclaimer {
    flex: 1;
  }

  .page-number {
    flex: 1;
    text-align: right;
  }
}
.billing-report-pdf-header {
  font-size: 1rem;
  width: 100%;

  .invoice-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
  }

  .practice-info {
    display: flex;
    margin-bottom: 1rem;
  }

  .practice-logo {
    flex: 1;
    height: 20mm;
  }

  .practice-address-contact {
    flex: 1;
    text-align: right;

    .practice-name {
      font-weight: bold;
    }
  }
}
call-recording-embedded-list {
  display: block;

  &[data-item-count="0"] {
    display: none;
  }
}
li.allocate-dropdown-li {
  &> a {
    display: flex;
  }
}

cancellation-requests-search {
  display: block;
}
clinical-panel--allergy-status-component {
  display: block;
}
clinical-panel {
  display: block;
}

clinical-panel .panel-group .panel {
  margin-bottom: 0;
}

clinical-panel .panel .panel-body {
  padding: 15px 10px 20px 15px;
}

clinical-panel .sub-section-indicator svg.glyphicon {
  width: 2.7rem;
}
prescriptions-active-group {
  display: block;
  margin-bottom: 1.5em;
}

prescriptions-active-group .active-group-header {
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 5px 5px 0 0;
  display: flex;
  font-weight: bold;
  gap: 5px;
  padding: 0.25em 8px;
  text-align: left;
}

prescriptions-active-group .prescription-header-title {
  flex: 1;
}

prescriptions-active-group .active-group-subheader {
  display: block;
  text-align: center;
}

prescriptions-active-group .active-group-subheader.warning {
  background-color: #ee9b15;
  color: #fff;
}

prescriptions-active-group .active-group-subheader.danger {
  background-color: #c33a07;
  color: #fff;
}

prescriptions-active-group .active-group-body {
  padding: 1em 10px;
  background-color: #fbfbfb;
  border-radius: 0 0 5px 5px;
}
.prescriptions-list-prescribed-product {
  display: flex;
  align-items: center;
  gap: 5px;
}

.prescriptions-list-prescribed-product-name {
  flex: 1 90%;
  text-align: left;
}

.prescriptions-list-prescribed-products-tab-link {
  text-align: center;
}

.prescriptions-list-link-button {
  width: 100%;
  display: inline-block;
}

.prescriptions-list-link-button button {
  background-color: transparent;
  border: none;
  display: inline-block;
  padding: 5px 15px;
  color: black;
  text-align: left;
  text-wrap: nowrap;
  width: 100%;
}

.prescriptions-list-link-button button:hover,
.prescriptions-list-link-button button:active,
.prescriptions-list-link-button button:focus {
  text-decoration: none;
  color: black;
  background-color: #f5f5f5;
}

.prescriptions-list-link-button button[disabled] {
  color: #777;
  cursor: not-allowed;
}

.prescriptions-list-link-button button.red {
  color: #c33a07;
}

prescriptions-list section {
  max-width: 640px;
}
prescriptions-pending-group {
  display: block;
  margin-bottom: 1.5em;
}

prescriptions-pending-group .pending-group-header {
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 5px 5px 0 0;
  display: flex;
  gap: 5px;
  padding: 0.25em 8px;
  text-align: left;
}

prescriptions-pending-group .prescription-header-title {
    flex: 1;
}

prescriptions-pending-group .prescription-header-title .label.label-default {
  background-color: #fff;
  color: #333;
}

.pending-group-prescribed-product-name button {
  text-align: left;
}

prescriptions-pending-group .pending-group-body {
  padding: 1rem 10px;
  background-color: #fbfbfb;
  border-radius: 0 0 5px 5px;
}

prescriptions-pending-group {
  .pending-group-confirm-delete-content { display: none; }

  &[data-mode="confirming-delete"] .pending-group-confirm-delete-content {
    display: flex;
  }
}
prescribed-product-summary .prescribed-product-summary-primary-attributes,
prescribed-product-summary .prescribed-product-summary-secondary-attributes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

prescribed-product-summary .prescribed-product-summary-secondary-attributes {
  gap: 0;
}

prescribed-product-summary .prescribed-product-summary-secondary-attributes {
  border-top: 2px solid #eee;
  padding-top: 1rem;
}

prescribed-product-summary hr {
  border-top: 2px solid #eee;
}
reissue-prescription-token-modal[mode="email"] .send-e-prescription-phone-number {
  display: none;
}

reissue-prescription-token-modal[mode="sms"] .send-e-prescription-email-address {
  display: none;
}
report-list {
  .existing-reports {
    report {
      &.panel {
        border-radius: 5px;
        display: block;
      }
      &.panel + report.panel {
        margin-top: 0.75em;
      }
    }
  }
}
collapsible-widget .collapsible-widget--header {
  display: flex;
  align-items: center;

  .icon-and-text {
    flex: 1;
  }
}
cancel-modal {
  display: block;

  .modal-body label {
    margin: 0 0 1rem 0;
  }
}
dashboard-shift-management-doctor-card .row label {
  margin: 0;
}

dashboard-shift-management-doctor-card p {
  line-height: 1.4em;
  margin-bottom: 0.1em;
}

dashboard-shift-management-doctor-card label {
  margin: 0;
}

dashboard-shift-management-doctor-card h3 {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

dashboard-shift-management-doctor-card
  .shift-management-doctor-card--warning-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

dashboard-shift-management-doctor-card
  .shift-management-doctor-card--warning-display
  > * {
  margin-bottom: 2px;
}
dashboard-task-counter-badge {
  display: inline-block;

  &[data-count="0"] {
    display: none;
  }
}
dashboard-todos-index {
  display: block;

  .modal-body label {
    margin: 0 0 1rem 0;
  }

  todos-list {
    margin-top: 1rem;
  }

  .todos-index-header {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

    .new-task-button {
      margin-left: auto;
    }
  }
}
dashboard-todos-top-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: flex-end;

  @media (max-width: 480px) {
    .btn {
      flex: 1;
    }
  }

  .btn.new-todo-button {
    max-width: 50%;
  }
}
cancellation-request-cancellation-fee-message {
  display: block;
}
cancellation-requests-card.card {
  display: block;
  margin-bottom: 1rem;

  .call-card--header--icon {
    background-color: unset;
  }

  .call-card--content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;

    @media (min-width: 768px) {
      flex-direction: row;

      > * {
        flex: 1 1 50%;
      }
    }

    @media (min-width: 992px) {
      flex-direction: column;
    }

    @media (min-width: 1200px) {
      flex-direction: row;
    }

    .details {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .summary {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
    }
  }

  .card-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;

    .dropdown-menu li button {
      width: 100%;
      text-align: left;
    }
  }


  &.claimed {
    button.claim-button {
      display: none;
    }

    &.claimed-by-current-user {
      .claimed-other-info {
        display: none;
      }
    }
    &:not(.claimed-by-current-user) {
      .claimed-group {
        display: none;
      }
    }
  }

  &:not(.claimed) {
    .claimed-group {
      display: none;
    }
    .claimed-other-info {
      display: none;
    }
  }

  &.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  &.requires-action {
    border-color: #ea645f !important;
    animation-name: glow_animation;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
  }
}
cancellation-requests-card-notes {
  display: block;

  &[data-item-count="0"] {
    display: none;
  }
}
cancellation-request-found-visit-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  svg {
    margin-right: 0.5rem;
  }
}
cancellation-requests-list {
  &[data-item-count="0"] {
    .items-list {
      display: none;
    }
  }
  &:not([data-item-count="0"]) {
    .no-items-message {
      display: none;
    }
  }
}
mark-cancellation-request-as-complete-form {
  display: block;

  cancellation-request-found-visit-info {
    margin-bottom: 1.4rem;
  }

  &:not(.cancellation-fee-applies) {
    .cancellation-fee-and-waived {
      display: none;
    }
  }


  &.cancellation-fee-is-waived {
    .cancellation-fee-messages {
      display: none;
    }
  }

  &:not(.cancellation-fee-is-waived) {
    .cancellation-fee-waived-reason, .cancellation-fee-message-waived {
      display: none;
    }
  }

  &[data-cancellation-type="patient_initiated"] {
    .dna-fee-message {
      display: none;
    }
  }

  &[data-cancellation-type="did_not_attend"] {
    .cancellation-fee-message {
      display: none;
    }
    cancellation-request-period-before-eta {
      display: none;
    }
  }

  &:not([data-should-send-sms="true"]) {
    .phone-number-info {
      display: none;
    }
  }

  .shifts-dropdown {
    position: relative;

    .shifts-dropdown-button {
      border: none;
      background: transparent;
      padding: 0;
      margin-left: 4px;
      text-align: left;
    }

    .dropdown-menu {
      margin-left: -8px;
    }
  }

  .panel-form-group, radio-group, cancellation-request-period-before-eta, .phone-number-info {
    display: flex;
    margin: 1rem 0 0 0;
    &:first-child {
      margin-top: 0;
    }
  }

  cancellation-request-period-before-eta, .phone-number-info {
    margin-left: 2rem;
  }
}
mark-cancellation-request-as-complete-modal {
  display: block;

  .modal-body label {
    margin: 0 0 1rem 0;
  }
}
cancellation-request-patient-options-for-shift {
  display: block;
}
cancellation-request-period-before-eta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  svg {
    margin-right: 0.5rem;
  }
}
dashboard-appointment-requests-top-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;

  @media (max-width: 480px) {
    .btn {
      flex: 1;
    }
  }

  @media (min-width: 481px) {
    justify-content: flex-end;
  }

  .show-triage-protocol-button {
    svg.glyphicon {
      transform: rotate(-90deg);
    }
  }
}
triage-protocol-modal {
  .modal-dialog {
    @media (min-width: 768px) {
      width: 750px;
    }

    @media (min-width: 1024px) {
      width: 974px;
    }
  }
}
dashboard-appointments {
  display: block;

  .loading-spinner {
    display: none;
  }

  &[data-loading] {
    .loading-spinner {
      display: block;
    }

    dashboard-appointments-shifts {
      display: none;
    }
  }

  .shift-options {
    padding: Max(7px, 1.75%)
  }

  .shift-options-group {
    margin-top: 1rem;
  }

  .ended-shifts-bubble {
    margin: 0;
  }

  .select-shift-label {
    margin-top: 0;
  }

  .shifts-dropdown {
    margin-top: 0.5rem;
  }

  .shifts-dropdown-button-has-incomplete {
    border-color: #ea645f !important;
    animation-name: glow_animation;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
  }
}
dashboard-appointments-shifts {
  display: block;
}
document-card {
  display: block;

  &.card {
    padding: 0;
  }

  > animatable-accordion {
    > .header {
      align-items: center;
      cursor: pointer;
      display: flex;
      gap: 0.75rem;
      padding: 1rem;

      .chevron {
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
      }

      .document-info {
        flex: 1;
        min-width: 0;

        .date, .document-title {
          font-weight: bold;
        }

        .document-subtitle {
          font-size: 0.9em;
          color: #666;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }

    > .accordion-body {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0 1rem;
    }


    &[open] {
      > .header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      > .accordion-body {
        padding: 0 1rem 1rem 1rem;
      }
    }
  }

  document-header-menu {
    margin-left: auto;
  }

  .document-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  document-content {
    background-color: #f7f7f7;
    padding: 1rem;
  }

  .heading {
    font-weight: bold;
  }

  hr.separator {
    border-top: 1px solid #cacaca;
    margin: 1rem 0 0 0;
    width: 100%;
  }

  .other-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    other-todo {
      padding: 1rem;
    }
  }
}
document-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  .attachments-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .attachment-container {
      border: none;
      margin: 0;

      &:last-child {
        margin-bottom: 0;
      }

      iframe {
        border-radius: 4px;
      }

      img.attachment {
        margin-top: 0;
        max-width: 100%;
      }
    }
  }

  .description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: white;
    padding: 1rem;
    position: relative;

    .description-heading {
      font-weight: bold;
    }

    .description-body {
      white-space: pre-wrap;
      transition: max-height 0.3s ease;

      /* When content needs truncation (set by JS) */
      &[data-truncatable] {
        max-height: 6em; /* ~4 lines */
        overflow: hidden;

        + .description-toggle {
          display: flex;
        }
      }

      /* When expanded (set by JS - max-height set dynamically) */
      &[data-expanded] + .description-toggle {
        background: transparent;
        position: static;
        padding-top: 0.5rem;
        width: 100%;

        .svg-icon {
          transform: rotate(180deg);
        }
      }
    }

    .description-uploaded-by {
      font-style: italic;
    }

    .description-toggle {
      align-items: center;
      background: linear-gradient(to top, white 0%, white 50%, transparent 100%);
      border: none;
      bottom: 1rem;
      color: #2489fd;
      cursor: pointer;
      display: none;
      font-weight: bold;
      gap: 0.25rem;
      justify-content: center;
      padding: 1.5rem 0 0;
      position: absolute;
      left: 1rem;
      right: 1rem;

      .svg-icon {
        transition: transform 0.2s ease;
      }
    }
  }
}
document-list {
  .existing-attachments {
    x-document {
      &.panel {
        border-radius: 5px;
        display: block;
      }
      &.panel + x-document.panel {
        margin-top: 0.75em;
      }
    }
  }
}
edit-document-comment-form {
  display: block;

  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }
  &[data-loading] {
    form {
      display: none;
    }
  }
}
edit-document-form-fields {
  display: block;

  .existing-assigned-todo-users {
    margin-top: 1rem;

    .mini-todo-list {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      width: 50%;
      
      li {
        background-color: #f1f1f1;
        padding: 0.5rem;
      }
    }
  }

  &:not([data-should-notify]) .todo-fields {
    display: none;
    visibility: hidden;
  }
}
edit-document-form {
  display: block;

  &[data-loading] form {
    display: none;
  }
}
edit-document-pane-form {
  display: block;

  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }

  &[data-loading] {
    form {
      display: none;
    }
  }
}
document-header-menu {
  display: block;

  .dropdown-menu button {
    text-align: left;
    width: 100%;
  }
}
documents-index {
  display: block;
  max-width: 640px;
}
documents-list {
  display: block;

  .results-page {
    margin-top: 1rem;
  }

  &[data-loaded] {
    .loading-notice {
      display: none;
      visibility: hidden;
    }
  }

  &:not([data-loaded]) {
    .no-items-notice {
      display: none;
      visibility: hidden;
    }
  }

  &[data-item-count="0"] {
    .no-items-notice {
      display: block;
    }
  }

  &:not([data-item-count="0"]) {
    .no-items-notice {
      display: none;
    }
  }
}
.file-fields .file-field-container:first-of-type .delete-link,
.file-fields .file-field-container:first-of-type .link-separator {
  display: none;
}
.erx-message-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.erx-message-card-metadata, .erx-message-card-data {
  flex: 1;
}

.erx-message-card-data pre {
  font-size: 1rem;
}

.erx-message-card-metadata-datum {
  display: flex
}

.erx-message-card-metadata-label {
  flex: 1;
  flex-grow: 0.4;
  font-weight: bold;
}

.erx-message-card-metadata-value {
  flex: 1;
}
fees-quoting-form {
  affiliated-practices {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #f9fafb;
  }

  .submodal-header {
    height: 1rem;
    position: sticky;
  }

  ul, li {
    list-style-type: circle;
  }

  ul {
    padding-left: 2rem;
  }
}
show-modal-button {
  button {
    padding: 0;
    margin: 0;
    border: none;
    text-align: left;
    background: inherit;
 }
}
fees-quoting-table {
  table {
    width: 100%;
    text-align: center;
    background: #eee;
    border: 10px solid #eee;

    thead {
      font-weight: bold;
    }
  }
}
.panel-form-group {
  display: flex;
  gap: 1rem;

  .field-star {
    min-width: 1.2rem;
  }

  .starred-fields {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem;

    > * {
      margin: 0;
    }
  }
}
show-visit .visit-note-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

show-visit .visit-note-overlay-container {
  position: relative;
}
.hi-service-message-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.hi-service-message-card-metadata, .hi-service-message-card-data {
  flex: 1;
}

.hi-service-message-card-data pre {
  font-size: 1rem;
}

.hi-service-message-card-metadata-datum {
  display: flex
}

.hi-service-message-card-metadata-label {
  flex: 1;
  flex-grow: 0.25;
  font-weight: bold;
}

.hi-service-message-card-metadata-value {
  flex: 1;
}
.review-actions-medicare-no-ihi table.patient-details {
  margin: 2em 0 0 0;
}

.review-actions-medicare-no-ihi .proceed-body {
  margin: 1em 0 0 0;
}

.review-actions-medicare-no-ihi .actions {
  margin: 1em 0 0 0;
}
.review-actions-non-medicare-no-ihi table.patient-details {
  margin: 2em 0 0 0;
}

.review-actions-non-medicare-no-ihi .proceed-body {
  margin: 1em 0 0 0;
}

.review-actions-non-medicare-no-ihi .actions {
  margin: 1em 0 0 0;
}
complete-investigation-todo-form {
  display: block;
}
@keyframes loadingMap
{
  0%   { left: 0; }
  50% { left: 100%; }
  100%   { left: 0; }
}

.widget map-container .splash-screen {
  top: -20%;
}

map-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  position: relative;

  &:not(.with-splash-screen) .splash-screen {
    display: none;
  }

  &.with-splash-screen .splash-screen--container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

    .splash-screen {
      position: relative;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      font-weight: bold;
    }

    .splash-screen--text {
      padding: 0.7em 2em 1em;
    }

    .splash-screen--progress-bar-container {
      width: 100%;
      padding-right: 8px;
    }

    .splash-screen--progress-bar {
      width: 8px;
      height: 4px;
      background: #118000;
      position: relative;
      left: 0;
      animation: loadingMap 1s ease-out;
      animation-iteration-count:infinite;
    }
  }

  &.with-blurred-splash-screen .splash-screen--container {
    backdrop-filter: blur(4px);

    .splash-screen {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }

  .map {
    flex-grow: 1;
    width: 100%;
    height: 48vh;
  }

  .shift-table {
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 2px;
        margin: 0;

        span {
          line-height: 1.1em;
        }

        .crosshair {
          width: 18px;
          height: 18px;
          color: white;
          margin: 0 6px 0 0;
        }
      }
    }
  }
}

.full-screen-map {
  map-container {
    height: 100vh;
  }
}
notices-drawer-drawer-content {
  --is-wide-screen: 0;

  align-items: flex-start;
  background-color: #f3f4f6;
  display: flex;
  flex: 1;
  justify-content: center;

  .notices-list {
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100%;

    .results-page {
      background-color: #f3f4f6;
    }
  }

  .pagination-section {
    background-color: white;
    min-height: 2rem;
  }

  .pagination-sentinel {
    display: flex;
    justify-content: center;
    padding: 1rem;

    &:not([data-url]) {
      display: none;
    }
  }

  .loading-dots {
    display: flex;
    gap: 0.4rem;

    span {
      width: 0.5rem;
      height: 0.5rem;
      background-color: #777;
      border-radius: 50%;
      animation: dot-pulse 1.2s ease-in-out infinite;

      &:nth-child(2) { animation-delay: 0.2s; }
      &:nth-child(3) { animation-delay: 0.4s; }
    }
  }

  @keyframes dot-pulse {
    0%, 80%, 100% {
      opacity: 0.3;
      transform: scale(0.8);
    }
    40% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .notices-drawer-notice-item[selected] {
    .notice-header {
      /* Need to set background color explitity so it doesn't appear transparnet in sticky state. */
      background-color: #f3f4f6
    }
  }

  .notices-drawer-notice-item:not([selected]) {
    background-color: white;
  }

  .detail-area-empty-state {
    display: none;
  }

  .empty-state {
    width: 100%;
    padding: 2rem 0;
  }

  @media (min-width: 768px) {
    --is-wide-screen: 1;
    justify-content: flex-start;
    position: relative;

    .detail-area-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: var(--drawer-width);
      right: 0;
      bottom: 0;
      background-color: #f3f4f6;
      color: #6b7280;
      padding: 1rem;

      p {
        margin-top: 0.5rem;
        font-size: 1.4rem;
      }
    }

    /* Hide empty state when a notice is selected */
    &:has(.notices-drawer-notice-item[selected]) .detail-area-empty-state {
      display: none;
    }

    .notices-list:has(> .results-page .notices-drawer-notice-item:last-of-type[selected]) .pagination-section {
      content: "";
      border-top-right-radius: 1.2rem;
      display: block;
      overflow: hidden;
    }

    .notices-drawer-notice-item[selected] {
      border-bottom: none;
    }

    .notices-drawer-notice-item[selected] + .notices-drawer-notice-item:not([selected]) {
      border-top-right-radius: 1.2rem;
      overflow: hidden;
    }

    .notices-drawer-notice-item:not([selected]):has(+ .notices-drawer-notice-item[selected]) {
      border-bottom-right-radius: 1.2rem;
      overflow: hidden;
    }
  }

  .notice-placeholder {
    display: grid;
    grid-template-areas:
      "indicator content timestamp"
      "indicator sub-message sub-message";
    grid-template-columns: 1rem auto 2fr;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid #e5e7eb;

    .placeholder-unread-indicator {
      grid-area: indicator;
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
      background-size: 200% 100%;
      animation: placeholder-shimmer 1.5s infinite;
      align-self: center;
    }

    .placeholder-content {
      grid-area: content;
      display: flex;
      gap: 0.5rem;
    }

    .placeholder-line {
      height: 1.4rem;
      border-radius: 0.25rem;
      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
      background-size: 200% 100%;
      animation: placeholder-shimmer 1.5s infinite;

      &.placeholder-line-short {
        width: 6rem;
        grid-area: timestamp;
        justify-self: end;
      }

      &.placeholder-line-medium {
        width: 60%;
        grid-area: sub-message;
      }

      &.placeholder-line-long {
        width: 20rem;
      }
    }
  }

  @keyframes placeholder-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
notices-drawer-filter-dropdown-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  &[selected] {
    background-color: #e8e8e8;
  }

  &:not([data-total-count-text]) .filter-count,
  &[data-total-count-text=""] .filter-count,
  &[data-total-count-text="0"] .filter-count,
  &:not([show-count]) .filter-count {
    display: none;
  }
}
notices-drawer-filter-select {
  display: block;
  height: auto;
  min-width: 19rem;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .filter-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    width: max-content;
    min-width: 100%;
  }
}
.notices-drawer-notice-item {
  display: grid;
  grid-template-rows: 1fr;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out, border-bottom-width 0.2s ease-out;

  > * {
    overflow: hidden;
    min-height: 0;
  }

  &[data-archiving] {
    grid-template-rows: 0fr;
    opacity: 0;
    border-bottom-width: 0;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
  }

  &[data-read] {
    .unread-indicator {
      display: none;
    }
  }

  &:not([data-read]) {
    .mark-notice-unread-button, .archive-notice-button {
      display: none;
    }
  }

  &[data-archived] {
    .archive-notice-button, .mark-notice-unread-button {
      display: none;
    }
  }

  &:not([data-archived]) {
    .unarchive-notice-button {
      display: none;
    }
  }

  &:not([data-read]) .notice-message {
    font-weight: 600;
  }

  .notice-header {
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    display: grid;
    grid-template-areas:
      "icons message date"
      "icons sub-message actions";
    grid-template-columns: 2rem auto 2fr;
    padding: 1.2rem 1.6rem;
  }

  .unread-indicator {
    align-self: center;
    grid-area: icons;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
    justify-self: center;
  }

  .notice-message {
    grid-area: message;
    font-size: 1.4rem;
    color: #374151;
  }

  .notice-timestamp {
    grid-area: date;
    font-size: 1.2rem;
    color: #9ca3af;
    justify-self: end;
    white-space: nowrap;
  }

  .notice-sub-message {
    color: #6b7280;
    font-size: 1.3rem;
    grid-area: sub-message;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .notice-actions {
    grid-area: actions;
    display: flex;
    gap: 0.8rem;
    justify-content: end;
  }

  .notice-action-button {
    padding: 0.3rem;
    border-radius: 0.3rem;

    &:hover {
      background-color: #eaeaea;
    }

    svg.svg-icon {
      width: 2.7rem;
      height: 2.7rem;
    }

    svg.noun-project-archive-box-4898145 {
      margin-bottom: -1px; /* Icon appears slightly off-center, this visually centers it */
    }

    &[disabled] {
      cursor: not-allowed;

      svg.svg-icon {
        opacity: 0.5;
      }
    }
  }

  .archive-notice-button, .unarchive-notice-button, .mark-notice-unread-button {
    font-size: 1.4rem;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;

    &:hover {
      color: #374151;
    }
  }

  .notice-body {
    padding: 0 1.6rem 1.2rem;
  }

  animatable-accordion[open] {
    .notice-header {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .notice-message {
      white-space: normal;
    }
  }

  .notice-deleted-message {
    font-size: 1.4rem;
    color: #9ca3af;
    font-style: italic;
  }

  /* Selected state styling (used on wide screens for master-detail view) */
  &[selected] {
    background-color: #f3f4f6;
  }

  &[selected] .notice-message {
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .notices-drawer-notice-item {
    /* Selected item's body is absolutely positioned in the detail area */
    animatable-accordion[open] .notice-body {
      display: block;
      position: absolute;
      top: 0;
      left: var(--drawer-width);
      right: 0;
      bottom: 0;
      overflow-y: auto;
      background-color: #f3f4f6;
      padding: 1rem;
      z-index: 1;
    }

    animatable-accordion[closing] .notice-body {
      display: none;
    }
  }
}
notices-drawer {
  --drawer-width: 37rem;
  --detail-panel-width: 40rem;
  --header-height: 6.5rem;
  --drawer-transition-duration: 0.2s;

  background-color: white;
  bottom: 0;
  display: flex;
  flex-direction: column;
  top: 6.9rem;
  min-width: var(--drawer-width);
  overflow-y: auto;
  position: fixed;
  z-index: 1041;
  right: calc(-1 * var(--drawer-width));
  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
  transition: right var(--drawer-transition-duration) ease,
              width var(--drawer-transition-duration) ease;

  &[data-open] {
    right: 0;
  }

  .drawer-header {
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .notices-header-title {
      font-weight: bold;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      justify-content: flex-end;
    }

    .completed-tasks-notices-info {
      display: none;

      .info-bubble {
        width: 100%;

        .completed-tasks-count-message {
          display: block;
        }

        .archive-completed-task-notices-link {
          padding: 0;
          font-size: inherit;
        }
      }
    }

    &[data-has-completed-tasks] .completed-tasks-notices-info {
      display: block;
    }
  }

  .empty-state {
    .svg-icon {
      color: #9ca3af;
    }
  }

  notices-drawer-drawer-content {
    .notices-list {
      width: var(--drawer-width);
    }
  }


  @media (min-width: 768px) {
    /* Always show full width (list + detail area) on wide screens */
    width: calc(var(--drawer-width) + var(--detail-panel-width));

    /* Hide fully off-screen when closed (account for wider width) */
    &:not([data-open]) {
      right: calc(-1 * (var(--drawer-width) + var(--detail-panel-width)));
    }

    .drawer-header {
      .info-bubble {
        .completed-tasks-count-message {
          display: inline;
        }
      }
    }

    notices-drawer-drawer-content {
      flex-shrink: 0;
      /* Explicit width ensures absolutely positioned children (like .notice-body)
       * can use right: 0 to account for scrollbar width */
      width: 100%;
    }
  }
}

notices-drawer-todo-notice-item.notices-drawer-notice-item {
  .notice-header {
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    display: grid;
    grid-template-areas:
      "icons message message date"
      "icons sub-message sub-message actions"
      "icons todo-actionable-icon task-badges task-badges";
    grid-template-columns: 2rem auto auto 2fr;
    padding: 1.2rem 1.6rem;
  }

  .notice-type-icon {
    align-self: start;
    grid-area: icons;

    svg {
      fill: #6b7280;
    }
  }

  .notice-task-badges {
    align-self: center;
    grid-area: task-badges;
    display: flex;
    gap: 0.5rem;
    justify-self: end;

    .label {
      font-size: 1rem;
      text-transform: uppercase;
    }
  }

  &:not([data-todo-urgent]) .notice-task-urgent-badge {
    display: none;
  }

  &[data-todo-completed] {
    .notice-task-urgent-badge, .notice-task-new-badge {
      display: none;
    }
  }

  &:not([data-todo-status=new]) .notice-task-new-badge {
    display: none;
  } 

  .todo-actionable-icon {
    align-self: center;
    grid-area: todo-actionable-icon;
    margin-left: -3px;

    svg {
      fill: #6b7280;
    }
  }

  &:not([data-todo-completed]) .notice-task-completed-badge {
    display: none;
  }
}
notices-drawer-unread-counter-badge {
  &[data-count="0"] {
    display: none;
  }
}
.affiliations-edit-mims-tsandcs {
  background-color: #fff;
  overflow-y: scroll;
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  max-height: 30vh;
}
patient-allergies-cautions-badge {
  &[data-count="0"] {
    display: none;
  }

  .badge-button {
    padding: 0.2rem 0.3rem 0.2rem 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
    color: #ee9b15;
    background: none;
    border: 1px solid #ee9b15;
    border-radius: 0.4rem;
    cursor: pointer;

    svg {
      width: 1.5rem;
      height: 1.5rem;
      fill: #ee9b15;
    }

    &:hover {
      background-color: #ee9b15;
      color: white;

      svg {
        fill: white;
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid #ee9b15;
      outline-offset: 2px;
    }
  }
}
patient-allergies-cautions-dialog {
  .allergies-section,
  .cautions-section {
    margin-top: 1.5rem;

    &[data-count="0"] {
      display: none;
    }
  }

  .section-title {
    margin: 0;
  }

  .allergies-list,
  .cautions-list {
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;

    li {
      background-color: #f7f7f7;
      border-radius: 0;
      border-style: none;
      padding: 0.8rem;
      color: #444;
      margin-top: 0;

      & + li {
        margin-top: 0.3rem;
      }
    }
  }
}
patient-allergies-cautions-dialog-content {
  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }

  &[data-loading] {
    .patient-allergies-cautions-dialog-content-body {
      display: none;
    }
  }
}
.patient-badges {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;

  &:has(patient-regular-gp-badge:not([data-has-regular-gp])):has(patient-allergies-cautions-badge[data-count="0"]) {
    display: none;
  }
}
patient-do-not-book-warning {
  display: block;

  .info-bubble {
    margin: 1rem 0 0 0;
  }
}
patient-main-card-tab {
  display: block;

  patient-header {
    display: block;
    margin-top: 0.4rem;
  }

  .extra-info, .contact-bar {
    margin-top: 1rem;
  }
}
.patient-name-and-badges {
  flex-wrap: wrap;

  .patient-name {
    margin-bottom: 0;
  }
}
patient-regular-gp-badge {
  display: inline-block;
  text-transform: uppercase;

  &:not([data-has-regular-gp]) {
    display: none;
  }

  .label {
    background-color: #777;
  }
}
search-by-proximity-results li {
  padding: 0.5em;
  margin-bottom: 0 !important;
}

search-by-proximity-results li:hover {
  background: #f7f7f7;
  cursor: pointer;
}
search-result-card {
  patient-header {
    display: block;
    margin-top: 0.4rem;
  }
 }
supplied-ihi-link {
  background-color: #f1f1f1;
  display: block;
  padding: 1em;
  width: 100%;
}
unified-search-result-card {
  patient-header {
    display: block;
    margin-top: 0.4rem;
  }
 }
button.unlock-section {
  border: none;
  color: #2489fd;
  padding: 0;
}

edit-prescribed-product-form {
  display: flex;

  error-panel.errors {
    margin-bottom: 1em;
  }
}
edit-prescribed-product-pane {
  /* Form body brings its own styles. Scoped rules added here if needed. */
}
.prescription-eop-body {
  font-family: sans-serif;
  height: 99mm;
  padding: 10mm;
}

.prescription-eop {
  border: 1px solid #000;
  display: grid;
  grid-template-columns: 66% 34%;
  grid-template-rows: 100%;
  height: 100%;
}

.prescription-eop-cell {
  font-size: 0.9rem;
  padding: 0.7mm;
}

.prescription-eop .prescribed-item-section {
  border-right: 1px solid #000;
  display: grid;
  grid-column: 1/2;
  grid-template-columns: 33% 67%;
  grid-template-rows: 20% 6.66% 6.66% 6.66% 60.02%;
}

.prescribed-item-drug-details {
  border-bottom: 1px solid #000;
  grid-column: 1/3;
}

.prescribed-item-section .details-title {
  border-bottom: 1px solid #000;
  grid-column: 1/3;
}

.prescribed-item-section .prescribed-date-title {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

.prescribed-item-section .prescribed-date {
  border-bottom: 1px solid #000;
}

.prescribed-item-section .repeats-authorised-title {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.prescribed-item-section .repeats-authorised {
  border-bottom: 1px solid #000;
}

.prescribed-item-annotations {
  grid-column: 1/3;
}

.prescribed-item-annotations .token-notice {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.prescribed-item-annotations .privacy-notice {
  font-size: 0.5rem;
}

/* this should be 1/4 of the width */
.prescription-eop .prescriber-section {
  display: grid;
  grid-column: 2/3;
  grid-template-columns: 67% 33%;
  grid-template-rows: 20% 30% 50%;
}

.prescriber-section .prescriber-doctor-name {
  grid-column: 1/2;
  grid-row: 1/2;
}

.prescriber-section .prescriber-practice-details {
  grid-column: 1/2;
  grid-row: 2/3;
}

.prescriber-section .prescription-qr-image {
  grid-column: 1/2;
  grid-row: 3/4;
  font-size: 0.5rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.prescription-qr-image svg {
  width: auto;
  height: 65%;
  margin-bottom: 5px;
}

.prescriber-section .prescriber-ntbs {
  color: #aaa;
  grid-column: 2/3;
  grid-row: 1/4;
  justify-self: center;
  writing-mode: vertical-rl;
  text-align: center;
}

prescribed-product-authority-section {
  &[hidden] {
    display: none;
  }

  .prescribed-product-authority-locked-info {
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;

    .prescription-number-and-change-button {
      align-items: flex-start;
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
    }
  }

  &:not([locked]) .prescribed-product-authority-locked-info {
    display: none;
  }

  &[locked] .prescribed-product-authority-form {
    display: none;
  }

  .prescribed-product-authority-number-and-button,
  .prescribed-product-authority-approval-and-button {
    display: flex;
    gap: 8px;
  }

  .prescribed-product-authority-prescription-number-readonly {
    padding: 8px;
  }

  .prescribed-product-authority-prescription-number-readonly,
  .prescribed-product-authority-approval-number {
    flex: 1 70%;
  }

  .prescribed-product-detach-authority-btn,
  .prescribed-product-confirm-authority-btn {
    flex: 1 30%;
    min-width: 120px;
  }
}
prescribed-product-brand-section[hidden] {
  display: none;
}

prescribed-product-brand-section[mode="lemi"] .prescribed-product-brand-lmbc,
prescribed-product-brand-section[mode="lmbc"] .prescribed-product-brand-lemi,
prescribed-product-brand-section[mode="other"] .prescribed-product-brand-lmbc,
prescribed-product-brand-section[mode="other"] .prescribed-product-brand-lemi {
  display: none;
}

prescribed-product-brand-section:not([mode="lmbc"]) .prescribed-product-brand-clinically-necessary-options {
  display: none;
}
prescribed-product-directions-section[hidden] {
  display: none;
}

prescribed-product-directions-section[mode=specify] .prescribed-product-freeform-directions,
prescribed-product-directions-section[mode=freeform] .prescribed-product-directions-specify {
  display: none;
}

.directions-spec-row > input, .directions-spec-row > clearable-input {
  display: block;
  flex: 1;
}

.directions-dose-row,
.directions-frequency-row,
.directions-duration-row,
.directions-route-row {
  display: block;
  position: relative;
}

.prescribed-product-directions-specify searchable-field-results {
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.prescribed-product-directions-specify searchable-field-results ul:empty {
  display: none;
}

.prescribed-product-directions-specify searchable-field-results ul {
  border: 1px solid #aaaaaa;
}

.prescribed-product-directions-specify searchable-field-results ul li {
  cursor: pointer;
  padding: 9px 1em 9px 0.4em;
}

prescribed-product-directions-section .frequency-search-term-and-prn,
prescribed-product-directions-section .duration-search-term-and-ongoing {
  display: flex;
  gap: 1em;
  justify-content: space-between;
}

prescribed-product-directions-section .frequency-search-term-and-prn > clearable-input,
prescribed-product-directions-section .duration-search-term-and-ongoing > clearable-input {
  flex: 1 66%;
}

prescribed-product-directions-section .frequency-prn-field,
prescribed-product-directions-section .ongoing-duration-field {
  flex: 1 33%;
  padding: 4px;
}
prescribed-product-other-section[hidden] {
  display: none;
}
prescribed-product-schedule-section .prescribed-product-pbs-code-list {
  background-color: #f1f1f1;;
  padding: 1em;
  margin-bottom: 1em;
  display: block;
}

prescribed-product-schedule-section[mode="private"] .prescribed-product-pbs-code-list {
  display: none;
}

prescribed-product-schedule-section .prescribed-product-pbs-code-list .summary {
  margin-bottom: 1em;
}

prescribed-product-schedule-section .prescribed-product-pbs-code-list .restriction {
  background-color: white;
  margin-bottom: 1em;
  padding: 1em;
}

.prescribed-product-pbs-restriction .prescribed-product-pbs-restriction-text {
  position: relative;
}

.prescribed-product-pbs-restriction .prescribed-product-pbs-restriction-show-moreless-btn {
  padding: 0.5em 1em;
  width: 100%;
  border: 0;
  background: transparent;
  font-weight: bold;
  color: #2489fd;
}

.prescribed-product-pbs-restriction.showing-less .prescribed-product-pbs-restriction-text {
  max-height: 7.5em;
  overflow: hidden;
}

.prescribed-product-pbs-restriction.showing-less[data-truncated] .prescribed-product-pbs-restriction-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-image: linear-gradient(to top, white 0%, transparent 100%);
  pointer-events: none;
}

.prescribed-product-pbs-restriction.showing-less .prescribed-product-pbs-restriction-show-moreless-btn::before {
  content: '▾ show more';
}

.prescribed-product-pbs-restriction.showing-more .prescribed-product-pbs-restriction-show-moreless-btn::before {
  content: '▴ show less';
}

.prescribed-product-pbs-restriction.showing-less:not([data-truncated]) .prescribed-product-pbs-restriction-show-moreless-btn {
  display: none;
}

.prescribed-product-pbs-select-restriction-btn {
  width: 100%;
}

.prescribed-product-extemp-pbs-code {
  margin-bottom: 0.5em;
}
.prescribed-product-product-search-term-and-results {
  position: relative;
}

prescribed-product-product-search clearable-input {
  display: block;
}

prescribed-product-product-search clearable-input .svg-icon {
  fill: #aaa;
  stroke: #aaa;
}
prescribed-product-product-search-results {
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1;
}

prescribed-product-product-search-results ul:empty {
  display: none;
}

prescribed-product-product-search-results ul {
  border: 1px solid #aaaaaa;
}

prescribed-product-product-search-results ul li {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  cursor: pointer;
  padding: 9px 1em 9px 0.4em;
}

prescribed-product-product-search-results .searchable-field-result:hover {
  background: #f7f7f7;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

prescribed-product-product-search-results .prescribed-product-product-search-no-results {
  cursor: auto;
}

prescribed-product-product-search-more-btn {
  width: 100%;
}
prescribed-product-product-section {
  &[mode="search"] .prescribed-product-custom-text {
    display: none;
  }

  &[mode="custom"] prescribed-product-product-search {
    display: none;
  }

  &[product-locked] .prescribed-product-product-source {
    display: none;
  }

  &:not([product-locked]) .prescribed-product-locked {
    display: none;
  }

  prescribed-product-product-search {
    display: block;
    position: relative;
  }

  .prescribed-product-locked {
    align-items: flex-start;
    background-color: #f1f1f1;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 1em;
  }

  .prescribed-product-dose-form-row {
    position: relative;
  }

  .prescribed-product-custom-name {
    margin-bottom: 1rem;
  }
}
prescribed-product-schedule-section {
  &[hidden] {
    display: none;
  }

  &[pbs-schedule-locked] .prescribed-product-scheme {
    display: none;
  }

  .prescribed-product-pbs-schedule-locked {
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;

    .pbs-code-and-change-button {
      align-items: flex-start;
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
    }

    .prescribed-product-pbs-restriction.showing-less[data-truncated] .prescribed-product-pbs-restriction-text::after {
      background-image: linear-gradient(to top, #f1f1f1 0%, transparent 100%);
    }

    .prescribed-product-pbs-restriction.showing-less:not([data-truncated]) .prescribed-product-pbs-restriction-show-moreless-btn {
      display: none;
    }
  }

  &:not([pbs-schedule-locked]) .prescribed-product-pbs-schedule-locked {
    display: none;
  }
}
prescribed-product-supply-section[hidden] {
  display: none;
}

.supply-spec-row {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  margin-bottom: 0.5em
}

.supply-spec-row > input {
  flex: 1 50%;
}

button.prescribed-product-quantity-calculate-btn {
  border: none;
  text-align: left;
  white-space: normal;
}
prescribed-product-supply-units {
  flex: 1 50%;
  padding: 8px;
}
.printable-prescription {
  display: grid;
  grid-template-columns: 105mm 105mm;
}

.printable-prescription-label {
  font-family: sans-serif;
  line-height: 0.9;
}

.printable-prescription-value {
  font-family: monospace;
  box-sizing: border-box;
}

.printable-prescription-pharmacist-copy {
  grid-column: 1;
  border-right: 1px dotted gray;
}

.printable-prescription-medicare-copy {
  grid-column: 2;
}

.printable-prescription-copy {
  display: grid;
  grid-template-rows: 30mm 54.5mm 71mm 30mm
}

.printable-prescription-header {
  align-items: center;
  border-bottom: 1pt solid black;
  display: grid;
  grid-template-columns: 20mm 32mm 10mm 39mm;
  grid-template-rows: 19mm 10mm;
  gap: 1mm;
  padding-left: 1mm;
}

.printable-prescription-header .printable-prescription-label {
  font-size: 9pt;
}

.printable-prescription-prescriber-address {
  align-self: normal;
  font-size: 11pt;
  grid-column: 1 / 5;
}

.printable-prescription-prescriber-address-address {
  font-size: 9.5pt;
}

.printable-prescription-patient-section {
  /* Section height is 54.5mm overall */
  display: grid;
  grid-template-columns: 104mm;
  grid-template-rows: 7.5mm 18mm 4.5mm 12mm 4.5mm 8mm;
  padding-left: 1mm;
}

.printable-prescription-patient-section .printable-prescription-label {
  font-size: 8pt;
}

.printable-prescription-patient-medicare {
  align-items: center;
  display: grid;
  gap: 1mm;
  grid-template-columns: 30mm 72mm;
  grid-template-rows: 7.5mm;
}

.printable-prescription-patient-pben {
  align-items: center;
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 8mm 31mm 8mm 33mm;
  grid-template-rows: 7mm 8mm;
}

.printable-prescription-patient-pben-number {
  grid-column: 2/6;
}

.printable-prescription-patient-pben .printable-prescription-patient-concessional-label {
  font-size: 6.5pt;
}

.printable-prescription-patient-pben-number,
.printable-prescription-patient-sn,
.printable-prescription-patient-concessional,
.printable-prescription-brandsub {
  border: 1pt solid black;
  height: 8mm;
  padding: 6pt;
}

.printable-prescription-name-dob {
  align-items: center;
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 50mm 33mm;
  grid-template-rows: 4.5mm;
}

.printable-prescription-address {
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 84mm;
  grid-template-rows: 12mm;
}

.printable-prescription-date {
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 84mm;
  grid-template-rows: 4.5mm;
}

.printable-prescription-pbs-rpbs-brandsub {
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 22mm 8mm 52mm;
  grid-template-rows: 8mm;
}

.printable-prescription-pbs-label, .printable-prescription-pbs-xout {
  grid-column: 1/2;
  grid-row: 1;
}

.printable-prescription-rpbs-label, .printable-prescription-rpbs-xout {
  grid-column: 2/3;
  grid-row: 1;
}

.printable-prescription-brandsub-label {
  align-self: center;
  font-weight: bold;
}

.printable-prescription-items-section {
  background-color: #ccffee;
  column-gap: 2mm;
  display: grid;
  grid-template-columns: [margin-start] 22mm [items-section-start] 81mm [items-section-end];
  grid-template-rows: 71% 13% 16%;
}

.printable-prescription-items-margin {
  background-color: #f0f0f0;
  grid-row-start: 1;
  grid-row-end: 4;
}

.printable-prescription-items {
  grid-column-start: 2;
  grid-row-start: 1;
}

.printable-prescription-item {
  margin-bottom: 2pt;
  border-bottom: 1px solid black;
}

.printable-prescription-item-name {
  font-weight: bold;
}

.printable-prescription-prescriber-name {
  grid-column-start: 2;
  grid-row-start: 2;
}
.printable-prescription-prescriber-signature {
  grid-column-start: 2;
  grid-row-start: 3;
}

.printable-prescription-barcode-section, .printable-prescription-declaration-section {
  display: grid;
  grid-template-columns: 104mm;
  padding-left: 1mm;
}

.printable-prescription-barcode-section {
  grid-template-rows: 10mm 20mm
}

.printable-prescription-barcode-header {
  padding: 1pt;
}

.printable-prescription-doctor-instruction {
  background-color: #cfe;
  padding: 3pt 8pt;
  color: white;
  display: inline-block;
  font-weight: bold;
  font-size: 8pt;
}

.printable-prescription-barcode-body {
  align-items: center;
  display: grid;
  font-family: monospace;
  font-weight: bold;
  grid-template-columns: 20mm 70mm;
  grid-template-rows: 10mm 4mm;
  text-align: center;
}

.printable-prescription-barcode-erx-label {
  font-size: 11pt;
  grid-column: 1;
  text-align: right;
}

.printable-prescription-barcode-image {
  grid-column: 2;
}

.printable-prescription-barcode-text {
  grid-column: 2;
  font-size: 8pt;
}

.printable-prescription-barcode-image svg {
  height: 10mm
}

.printable-prescription-declaration-section {
  grid-template-rows: 8mm 10mm 12mm;
}

.printable-prescription-additional-erx-logo {
  position: absolute;
  right: 10mm;
  top: 12mm;
}

.printable-prescription-erx-logo {
  width: 11mm;
}
review-prescribed-product-pane {
  /* Pending-group body and form-chrome bring their own styles. */
}
send-e-prescription-pane[paperless-mode="email"] .send-e-prescription-phone-number,
send-e-prescription-pane[paperless-mode="print_eop"] .send-e-prescription-phone-number {
  display: none;
}

send-e-prescription-pane[paperless-mode="sms"] .send-e-prescription-email-address,
send-e-prescription-pane[paperless-mode="print_eop"] .send-e-prescription-email-address {
  display: none;
}

send-e-prescription-pane[mode="paper"] .send-e-prescription-paperless-fields {
  display: none;
}
remote-link {
  display: inline;
}

remote-link button {
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
  background: inherit;
}

remote-link .text {
  color: #2489fd;
}

remote-link .text:hover {
  text-decoration: underline;
}
reports-index {
  display: block;
  max-width: 640px;
}
.report-pdf-progress {
  display: none;
  font-style: italic;
  font-size: 0.75em;
  text-align: center;
} 
billing-line {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: flex-start;
  padding: 1rem;
}

billing-line .description {
  font-weight: bold;
  text-align: right;
  width: 7rem;
}

billing-line .charge {
  flex-grow: 2;
  text-align: left;
}

billing-line .status-action {
  align-self: flex-end
}

service-list-item {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  align-items: center;
  width: 100%;
  max-width: var(--max-element-width);
  margin: 1rem 0;
  overflow: hidden;
}

service-list-item .line-item-cost {
  background: rgba(0, 0, 0, 0.1);
}

service-list-item .gap {
  background: rgba(0, 0, 0, 0.05);
}

sign-in-form {
  .input {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:focus {
      border-color: #66afe9;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0.8rem rgba(102, 175, 233, 0.6);
    }
  }
}
gaps-table th {
  font-size: 90%;
  min-width: 8rem;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}

gaps-table td {
  border-top: 1px dotted #ddd;
  font-size: 90%;
  height: 5rem;
  padding: 0;
}
accordion {
  display: block;
  margin: 1rem 0;

  summary {
    margin-top: 0;
    cursor: pointer;
    padding: 1rem;
    position: relative;
    user-select: none;
    background-color: #eee;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  details[open] .svg-icon {
    transform: rotate(90deg);
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  details {
    border: 1px solid #ddd;
  }

  details[open] {
    transition: .25s transform ease;
  }

  .content {
    padding: 1rem;
  }
}
animatable-accordion {
  display: flex;
  flex-direction: column;

  > .header {
    cursor: pointer;
    > .chevron {
      .svg-icon {
        transition: transform 0.3s ease;
      }
    }
  }

  &[open] {
    > .header {
      > .chevron .svg-icon {
        transform: rotate(90deg);
      }
    }
  }
}
/*
 * Safari ignores width/height on native checkboxes — the layout box resizes
 * but the rendered checkbox stays at the OS default (~16px). Use transform
 * to scale the visual to roughly match the layout box set by the tw:size-* utilities.
 * @supports (-webkit-hyphens: none) is the standard WebKit-only
 * feature query.
 */
@supports (-webkit-hyphens: none) {
  ac-checkbox[data-size="md"] input[type="checkbox"] {
    transform: scale(1);
  }

  ac-checkbox[data-size="sm"] input[type="checkbox"] {
    transform: scale(0.9);
  }
}
date-input-group {
  display: block;
  position: relative;

  .input-group {
    display: flex;

    .display-input {
      flex: 1 1 auto;
      min-width: 0;
      cursor: text;
      background-color: #fff;
      position: relative;
      z-index: 1;
    }

    .input-group-addon {
      cursor: pointer;
      flex: 0 0 auto;
      width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      border-left: none;
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }

    .native-date-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      cursor: pointer;

      /* Make the text completely transparent but keep the input functional */
      color: transparent;
      background: transparent;
      border: none;
      outline: none;
      /* Ensure it takes the same styling as the display input for layout */
      margin: 0;
      box-sizing: border-box;

      /* Hide the calendar icon that browsers add */
      &::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        opacity: 0;
      }

      &::-webkit-datetime-edit-day-field {
        opacity: 0;
      }
    }
  }
}
body:has(shared-dialog dialog[open]) {
  overflow: hidden;
}

shared-dialog {
  dialog:modal {
    padding: 0;
    border: none;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-width: 600px;
    max-height: calc(100vh - 2rem);
    width: calc(100% - 2rem);

    &::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
    }

    .dialog-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem;
      background-color: #444;
      border-bottom: 1px solid #e5e5e5;

      .dialog-title {
        margin: 0;
        font-size: 1.8rem;
        color: #fff;
      }

      .close {
        background: none;
        border: none;
        color: #fff;
        font-size: 2.8rem;
        font-weight: bold;
        line-height: 1;
        opacity: 0.8;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }
    }

    .dialog-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 1.5rem;
      position: relative;

      .info-bubble {
        margin: 0;
      }
    }

    .dialog-footer ~ .scroll-to-bottom {
      position: absolute;
      bottom: 9.5rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: #777;
      color: white;
      display: flex;
      flex-direction: row;
      gap: 2px;
      align-items: center;
      text-decoration: none;
      cursor: pointer;
      width: fit-content;
      border: 1px solid;
      padding: 0.3rem 0.8rem 0.3rem 1rem;
      border-radius: 1.5rem;
      height: 3rem;
      font-size: 1.4rem;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.15s ease-out;
      pointer-events: none;

      .chevron-down {
        display: flex;
        align-items: center;
      }

      &:hover .chevron-down {
        animation: dialog-bob 0.6s ease-in-out infinite;
      }
    }

    &[data-has-scroll] .scroll-to-bottom {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    @keyframes dialog-bob {
      0%, 50%, 100% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(1px);
      }
      75% {
        transform: translateY(-1px);
      }
    }

    .dialog-footer {
      flex-shrink: 0;
      padding: 1.5rem;
      border-top: 1px solid #e5e5e5;
      text-align: left;

      .btn + .btn {
        margin-left: 0.5rem;
      }
    }
  }
}
ac-dropdown-item {
  display: contents;
}
shared-embedded-comment {
  display: block;

  .item {
    background-color: white;
    padding: 1rem;

    .item-header {
      display: grid;
      grid-template-columns: auto 2fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "heading actions"
        "user-and-timestamp user-and-timestamp";
      row-gap: 0.25rem;

      .heading {
        grid-area: heading;
        font-weight: bold;
      }

      .actions {
        align-items: center;
        grid-area: actions;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: end;

        button {
          border: none;
          padding: 0;
        }
      }

      .user-and-timestamp {
        grid-area: user-and-timestamp;
        opacity: 0.6;
        font-size: 1.2rem;
      }
    }

    .item-body {
      margin-top: 0.5rem;
      white-space: pre-wrap;
    }
  }
}
shared-embedded-comments {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* Common toggle styles */
  .earlier-items-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .show-earlier-button {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--muted-text-color, #6c757d);
      font-size: 1.2rem;
      border: none;

      svg {
        width: 1.2rem;
        height: 1.2rem;
        transition: transform 0.3s ease;
      }
    }
  }

  /* Double chevron style (pill button with border lines) */
  .earlier-items-toggle {
    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 5px;
      border: 1px solid var(--border-color, #dee2e6);
      border-left: none;
      border-right: none;
    }

    &::before {
      flex: 0 0 auto;
      width: 1rem;
    }

    &::after {
      flex: 1 1 auto;
      min-width: 0;
    }

    .show-earlier-button {
      background: white;
      border: 1px solid var(--border-color, #dee2e6);
      border-radius: 999px;
      padding: 0.5rem 0.6rem 0.5rem 1rem;

      .chevron-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .glyphicon-chevron-up {
          margin-top: 0.4rem;
        }

        .glyphicon-chevron-down {
          margin-top: -0.5rem;
        }
      }
    }
  }

  .earlier-items {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: none;
    flex-direction: column;
    gap: 1rem;
  }

  &[data-show-earlier] {
    .earlier-items-toggle {
      .show-earlier-button svg {
        transform: rotate(180deg);
      }
    }

    .earlier-items {
      visibility: visible;
      display: flex;
    }
  }

  &[data-earlier-expanded] {
    .earlier-items-toggle {
      display: none;
    }

    .earlier-items {
      height: auto;
    }
  }

  button.btn-link {
    border: none;
    padding: 0;
  }

  .info-bubble {
    margin: 0;
  }

  .input-box {
    .input-wrapper {
      position: relative;

      .input-textarea {
        resize: none;
        min-height: 4rem;
        overflow-y: hidden;
        padding-right: 6rem; /* Fallback - JS will override with precise value */
      }

      .submit-button {
        padding: 0.5rem 0.75rem;
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        opacity: 0.5;
        pointer-events: none;
      }
    }

    &[data-has-content] {
      .submit-button {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}
shared-friendly-date {
  display: inline;
}
shared-friendly-time {
  display: inline;
}
ac-toast-host {
  display: flex;
  ac-toast {
    display: flex;
    transform: translateX(calc(100% + 1rem));
    transition: transform 150ms ease-out;

    &[data-state="visible"] {
      transform: translateX(0);
    }

    &[data-state="leaving"] {
      transform: translateX(calc(100% + 1rem));
      transition: transform 100ms ease-in;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ac-toast-host ac-toast,
  ac-toast-host ac-toast[data-state="leaving"] {
    transition: none;
  }
}
shift-dropdown-item {
  display: flex;
  font-size: 1.5rem;
  gap: 0.5rem;

  .driver-avatar {
    margin-top: -0.75rem;
  }

  .accepting-subzones {
    text-wrap: auto;

    .zone-serviced-check {
      vertical-align: middle;
    }
  }

  .shift-doctor-name {
    text-wrap: auto;
  }

  .shift-date-and-capacity {
    display: flex;
    gap: 0.25rem;

    .shift-short-date {
      min-width: 16rem;
    }

    .shift-capacity {
      min-width: 6rem;
      display: flex;
      gap: 0.3rem;
    }
  }
}
shift-select {
  .shifts-dropdown-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-menu {
    @media (max-width: 430px) {
      right: 0;
      left: auto;
    }
    @media (min-width: 431px) {
      left: 0;
      right: auto;
    }
  }
}
side-navigation > nav {
  height: 100lvh;
  width: 27.2rem;
  z-index: 1041;
  animation: slide-in 0.1s forwards;
  left: -27.2rem;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
}

@keyframes slide-in {
  100% {
    left: 0;
  }
}

side-navigation > nav.hiding {
  animation: slide-out 0.1s forwards;
  left: 0;
}

@keyframes slide-out {
  100% {
    left: -27.2rem;
  }
}

side-navigation .sub-menu > li:first-child {
  margin-top: 0.8rem;
}

side-navigation .sub-menu > li:last-child {
  margin-bottom: 0.8rem;
}

side-navigation > nav ul li a {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}
li.tasks li a {
  text-wrap: nowrap;
}

li.tasks li span.badge {
  margin-left: .4rem;
  position: relative;
  top: -1px;
}
send-sms-menu-item {
  cursor: pointer;
  padding: 5px 15px;
  display: block;
}

send-sms-menu-item[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

send-sms-menu-item:hover {
  background-color: #f5f5f5;
}
/* When the page hosts a split-screen, make the layout chain from <body>
   down a flex column so the split-screen-container fills whatever vertical
   space the top-nav (and any other content) doesn't claim — no magic
   numbers, no knowledge of the top-nav height. Scoped to pages that
   actually render a split-screen so other pages keep their current
   block layout (padding, max-width, natural scroll). */
body:has(split-screen-container) {
  display: flex;
  flex-direction: column;
  /* Drop the global body bottom padding (160px, see application.css) — it was
     added in 2019 to scroll iOS form fields above the virtual keyboard, but
     it shortens the body's content box, leaving dead space below the split.
     The left pane has its own overflow-y: auto so fields can scroll into
     view without relying on body-level scroll space. */
  padding-bottom: 0;
}

body:has(split-screen-container) main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body:has(split-screen-container) .custom-container {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

split-screen-container {
  --split-screen-min-width: 800px;
  --split-screen-default-open-min-width: 1280px;
  --form-min-width-narrow: 390px;
  --form-min-width-wide: 800px;

  display: flex;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;

  /* Smoothly animate flex-basis changes (e.g. mode transitions). Sizing,
     position, overflow, min-width are all on the HAML element via tw:*. */
  .left-pane {
    transition: flex-basis 380ms cubic-bezier(.32, .72, 0, 1);
  }

  /* Default flex of the right-pane — basis 0 before JS sets data-mode.
     Other static styles (overflow, background, position, min-width) are
     on the HAML element via tw:*. Mode-conditional rules below override
     this flex declaration. */
  .right-pane {
    flex: 0 0 0;
  }

  &[data-mode="hidden"] {
    .right-pane { display: none; }
  }

  &[data-mode="collapsed"] {
    .right-pane { flex: 0 0 0; }
  }

  &[data-mode="open"] {
    .left-pane  { flex: 1 1 0; }
    .right-pane { flex: 0 0 var(--right-pane-px); }
  }

  &[data-form-min-width="narrow"] .right-pane { min-width: var(--form-min-width-narrow); }
  &[data-form-min-width="wide"]   .right-pane { min-width: var(--form-min-width-wide); }

  &[data-dragging] {
    .left-pane, .right-pane { transition: none !important; }
  }

  /* Static visuals for .ssm-divider / .grip / .ssm-collapse-btn are on the
     HAML elements via tw:* utilities (with the divider acting as a tw:group
     so descendants react to its :hover and .dragging state).
     Only state-conditional rules tied to the container's data-mode and the
     ::before hit-area extension live here. */

  /* Widen the drag hit-area beyond the visible 6-8px so the divider is
     easier to grab. Scoped to open mode only — in collapsed mode drag is
     disabled and the divider sits flush right, so a right-extending pseudo
     would overflow the viewport. */
  &[data-mode="open"] .ssm-divider::before {
    content: '';
    position: absolute;
    inset: 0 -14px;
  }

  @media (hover: none), (pointer: coarse) {
    &[data-mode="open"] .ssm-divider::before { inset: 0 -18px; }
  }

  /* Icon visibility on the collapse button is driven by the container's
     data-mode and data-form-loaded — too many ancestor conditions to
     express cleanly as utilities on each icon. */
  &[data-mode="collapsed"] .ssm-collapse-btn .icon-expand { display: block; }
  &[data-mode="open"]:not([data-form-loaded]) .ssm-collapse-btn .icon-collapse { display: block; }
  &[data-mode="open"][data-form-loaded] .ssm-collapse-btn .icon-modalize { display: block; }
  &[data-mode="form-as-modal"] .ssm-collapse-btn .icon-expand { display: block; }

  &[data-mode="collapsed"] .ssm-divider .grip { display: none; }
  &[data-mode="hidden"] .ssm-divider { display: none; }

  /* .plus-fab styling is on the HAML element via tw:* utilities. The class
     name is retained so JS selectors in container.js still find the button.
     The 45° rotation when the menu opens is driven off the menu's [hidden]
     attribute — no JS state-sync needed. */
  .left-pane:has(split-screen-plus-menu:not([hidden])) .plus-fab {
    transform: rotate(45deg);
  }

  split-screen-plus-menu {
    bottom: 7rem;
    right: 1.6rem;
  }

  .replace-confirm-overlay { display: none; }
  &[data-confirming-replace] .replace-confirm-overlay { display: flex; }

  /* The .left-pane stays in the render tree in these modes — the position:fixed
     .right-pane covers it visually, and container.js applies `inert` +
     aria-hidden for focus and assistive tech. Don't be tempted to `display:none`
     it: re-painting the left-pane after returning to a non-overlay mode is
     unreliable on iOS WebKit, and content without its own compositing layer
     (plain text, headings) fails to repaint until the user scrolls. */
  &[data-mode="fullscreen-overlay"],
  &[data-mode="form-as-modal"] {
    .ssm-divider { display: none; }
    .right-pane {
      position: fixed;
      inset: 0;
      flex: 0 0 100%;
      background: #fff;
    }
  }

  /* The .ssm-restore-pane-btn lives inside split-screen-form-chrome's header;
     form_chrome.css styles its appearance and hides it by default. This rule
     reveals it whenever the container is in form-as-modal mode. */
  &:not([data-mode="form-as-modal"]) .ssm-restore-pane-btn {
    display: none;
  }

  /* Loading-state placeholder. Lives in .right-pane as one possible slot
     occupant of .split-pane-chrome-host. The fade-in delay is tunable via
     the --ssm-loading-delay custom property: 0ms by default (loading shows
     immediately), bump to e.g. 150ms to avoid flashing on fast responses. */
  --ssm-loading-delay: 0ms;

  .loading-state {
    opacity: 0;
    animation: ssm-loading-fade-in 120ms ease-out forwards;
    animation-delay: var(--ssm-loading-delay);

    .loading-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 3px solid rgba(0, 0, 0, 0.08);
      border-top-color: var(--color-primary, #2563eb);
      animation: ssm-loading-spin 0.75s linear infinite;
    }
  }
}

@keyframes ssm-loading-fade-in {
  to { opacity: 1; }
}

@keyframes ssm-loading-spin {
  to { transform: rotate(360deg); }
}

body.ssm-dragging,
body.ssm-dragging * {
  cursor: col-resize !important;
  user-select: none !important;
}
/* The chrome is a flex column. Header and footer are flex children that
   stay put; the body sits between them and scrolls on overflow. Scrollbar
   styling itself lives on the HAML element via tw:scrollbar-* utilities. */
split-screen-form-chrome {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;

  .dialog-header {
    flex-shrink: 0;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;

    .dialog-title {
      font-size: var(--tw-text-base);
      margin: 0;
      font-weight: 600;
    }
  }

  /* Icon buttons grouped on the right of the header. .close-pane-button is
     always visible; .ssm-restore-pane-btn is visible by default, and
     container.css hides it whenever the container isn't in form-as-modal
     mode. The button rule below intentionally omits `display` so it doesn't
     override container.css's hide rule. */
  .dialog-header-actions {
    button {
      border-radius: 6px;
      border: 0;
      cursor: pointer;
      padding: 0;
    }
  }

  .dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .dialog-footer {
    flex-shrink: 0;
    border-top: 1px solid #e5e7eb;
    justify-content: flex-end;
  }
}
split-screen-plus-menu {
  position: absolute;

  &[hidden] { display: none; }

  .menu-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1px solid #e5e7eb;
    width: 30rem;
    padding: 0.4rem 0;
    overflow: hidden;
  }

  .plus-menu-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
  }

  .plus-menu-item:hover { background: #f8fafc; }

  .item-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .item-label {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1c1917;
  }

  .item-sub {
    font-size: 1.2rem;
    color: #64748b;
    margin-top: 0.1rem;
  }
}
x-tab {
  display: block;
  padding-top: 15px;
}
x-tabs nav {
  border-bottom: 1px solid #ddd;
}

x-tabs nav .tab-title {
  padding: 5px 15px 10px;
  border-bottom: 5px solid transparent;
  cursor: pointer;
}

x-tabs nav .tab-title:not([data-active]) {
  opacity: 0.7;
}

x-tabs nav .tab-title:not([data-active]):hover {
  opacity: 1;
}

x-tabs nav .tab-title[data-active] {
  font-weight: bold;
  border-bottom-color: #aaa;
}
.todo-card {
  &.card {
    display: block;
    padding: 0;
    transition: border-color 150ms ease;
  }

  &:has(animatable-accordion[open]) {
    border-color: #cacaca;
  }

  > animatable-accordion > .accordion-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;

    > todo-card-body {
      padding: 0 1rem 1rem 1rem;
    }
  }

  .attachment-icon, .appointment-type-icon, .document-icon {
    opacity: 0.7;
  }
}
todo-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  .section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .section-heading {
      font-weight: bold;
    }

    .section-body {
      background-color: #f7f7f7;
      padding: 1rem;

      &.other-tasks-list {
        background-color: transparent;
        padding: 0;

        other-todo {
          padding: 1rem;
        }
      }
    }
  }

  .next-appointment-summary {
    .appointment-cal-icon, .appointment-type-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;

      svg {
        top: -0.2rem;

        &.glyphicon-video {
          top: -0.1rem;
        }
      }
    }
  }

  .task-details-section {
    .assignment-info {
      column-gap: 0.5rem;
      display: grid;
      grid-template-areas:
        "assigner menu"
        "assignee menu";
      font-size: 1.2rem;
      color: #666;

      .assigner {
        grid-area: assigner;
        font-weight: bold;

        .assigner-name {
          font-weight: bold;
        }

        .assigned-at-part {
          display: inline;
        }
      }

      .assignee {
        grid-area: assignee;

        .assignee-name {
          display: inline;
          font-weight: bold;
        }
      }

      .menu {
        grid-area: menu;
        justify-self: end;

        .dropdown-toggle {
          .glyphicon-set-down {
            margin: 0 -0.5rem 0 0;
          }
        }

        .dropdown-menu {
          button {
            text-align: right;
            width: 100%;
          }
          li.selection-group-header {
            font-size: 1.3rem;
            padding-right: 1.5rem;
            text-align: right;
          }
        }
      }
    }

    hr.separator {
      margin: 1rem 0;
    }
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
  }

  .other-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  hr.separator {
    border-top: 1px solid #cacaca;
    margin: 1rem 0 0 0;
    width: 100%;
  }
}
todo-card-header {
  display: grid;
  column-gap: 0.3rem;
  grid-template-columns: 1.5rem 2.5rem 5fr 1fr 0.5fr 0.5fr;
  grid-template-rows: repeat(6, min-content);
  grid-template-areas:
    "chevron avatar date badges badges badges"
    "chevron avatar patient-name patient-name patient-name attachment-icon"
    "chevron avatar title title title title"
    "chevron avatar actionable-summary actionable-summary actionable-summary actionable-summary"
    "chevron avatar reply-summary reply-summary reply-summary reply-summary"
    "chevron avatar activity-summary activity-summary activity-summary activity-summary";
  padding: 1rem;

  &:not([show-patient-name]) {
    grid-template-rows: repeat(5, min-content);
    grid-template-areas:
      "chevron avatar date badges badges badges"
      "chevron avatar title title title attachment-icon"
      "chevron avatar actionable-summary actionable-summary actionable-summary actionable-summary"
      "chevron avatar reply-summary reply-summary reply-summary reply-summary"
      "chevron avatar activity-summary activity-summary activity-summary activity-summary";
  }

  &:not([data-urgent]) .urgent-label {
    display: none;
    visibility: hidden;
  }

  .status-label, .urgent-label {
    text-transform: uppercase;
  }

  .chevron {
    display: block;
    grid-area: chevron;
  }

  .avatar {
    grid-area: avatar;
    justify-self: end;
  }

  .badges {
    align-self: start;
    display: flex;
    gap: 0.5rem;
    grid-area: badges;
    justify-self: end;
  }

  .patient-link {
    grid-area: patient-name;

    .admin-panel--todos &, .clinical-panel--attachments &, .clinical-panel--investigations &, other-todos-for-document & {
      display: none;
    }

    a {
      display: inline-block;
    }
  }

  .next-appointment-summary {
    grid-area: next-appointment-summary;
    opacity: 0.7;

    .appointment-cal-icon, .appointment-type-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;

      svg {
        top: -0.2rem;

        &.glyphicon-video {
          top: -0.1rem;
        }
      }
    }
  }

  .attachment-icon {
    grid-area: attachment-icon;
    justify-self: end;

    svg {
      width: 2rem;
      height: 2rem;
    }

    svg.glyphicon {
      margin-right: -3px;
    }

    svg.icon-microscope {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  .title {
    grid-area: title;
    display: -webkit-box;
    font-weight: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .review-actionable-summary {
    grid-area: actionable-summary;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .review-actionable-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;

      svg.glyphicon {
        transform: rotate(90deg)
      }
    }
  }

  .reply-summary {
    grid-area: reply-summary;
    opacity: 0.7;

    .reply-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;
    }
  }

  .activity-summary {
    grid-area: activity-summary;
    opacity: 0.7;

    .activity-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;
    }
  }
}
todo-details-and-actions {
  &.card-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .assignment-info {
    column-gap: 0.5rem;
    display: grid;
    grid-template-areas:
      "assigner menu"
      "assignee menu";
    font-size: 1.2rem;
    color: #666;

    .assigner {
      grid-area: assigner;
      font-weight: bold;

      .assigner-name {
        font-weight: bold;
      }

      .assigned-at-part {
        display: inline;
      }
    }
    
    .assignee {
      grid-area: assignee;

      .assignee-name {
        display: inline;
        font-weight: bold;
      }
    }

    .menu {
      grid-area: menu;
      justify-self: end;

      .dropdown-toggle {
        .glyphicon-set-down {
          margin: 0 -0.5rem 0 0;
        }
      }

      .dropdown-menu {
        button {
          text-align: right;
          width: 100%;
        }
        li.selection-group-header {
          font-size: 1.3rem;
          padding-right: 1.5rem;
          text-align: right;
        }
      }
    }
  }

  .description {
    background-color: white;
    padding: 1rem;
    position: relative;

    .instructions-heading {
      font-weight: bold;
    }

    .instructions-body {
      white-space: pre-wrap;

      /* When content needs truncation (set by JS) */
      &[data-truncatable] {
        max-height: 6em; /* ~4 lines */
        overflow: hidden;

        + .instructions-toggle {
          display: block;
        }
      }

      /* When expanded (set by JS - max-height set dynamically) */
      &[data-expanded] + .instructions-toggle {
        background: transparent;
        position: static;
        padding-top: 0.5rem;
        width: 100%;

        .svg-icon {
          transform: rotate(180deg);
        }
      }
    }

    .instructions-toggle {
      align-items: center;
      background: linear-gradient(to top, white 0%, white 50%, transparent 100%);
      border: none;
      bottom: 1rem;
      color: #2489fd;
      cursor: pointer;
      display: none;
      font-weight: bold;
      gap: 0.25rem;
      justify-content: center;
      padding: 1.5rem 0 0;
      position: absolute;
      left: 1rem;
      right: 1rem;

      .svg-icon {
        transition: transform 0.2s ease;
      }
    }
  }

  shared-embedded-comments {
    margin-left: 1rem;

    .reply {
      background-color: white;
    }
  }

  hr.separator {
    margin: 1rem 0;
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
  }

  .completed-statement {
    opacity: 0.6;
  }
}
todo-details-and-actions-document {
  display: block;

  animatable-accordion {
    gap: 1rem;

    > .header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;

      .chevron {
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
      }

      .document-icon {
        display: flex;
        align-items: center;
      }

      .document-info {
        flex: 1;
        min-width: 0;

        .document-title {
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .document-subtitle {
          font-size: 0.9em;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }

    &[open] {
      > .header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}
edit-todo-form {
  display: block;

  &[data-loading] {
    form {
      display: none;
    }
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}
todos-filter-dropdown-item {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  &[selected] {
    background-color: #e8e8e8;
  }

  &:not([data-total-count-text]) .filter-count,
  &[data-total-count-text=""] .filter-count,
  &[data-total-count-text="0"] .filter-count,
  &:not([show-count]) .filter-count {
    display: none;
  }
}
todos-filter-select {
  display: block;
  height: auto;
  min-width: 0;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .filter-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    width: max-content;
    min-width: 100%;
  }
}
todos-filters-and-sorts {
  display: grid;
  flex-grow: 1;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
todo-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;

  &[assignment-mode="role"], &[assignment-mode="none"] {
    .user-search-area {
      display: none;
    }
  }

  &:not([assigned-to-user-selected]) {
    .address-summary {
      display: none;
    }
  }

  &[assigned-to-user-selected] {
    input[name="user_search"] {
      display: none;
    }
  }

  .panel-form-group {
    margin: 0;
  }

  .panel-form-group.tuck {
    margin-top: -0.8rem;
  }

  .panel-form-group .starred-fields .document-attachment-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-left: 0.8rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    background: #f8f8f8;
    border-radius: 4px;

    .document-icon {
      flex-shrink: 0;
    }

    .document-info {
      flex-grow: 1;
      min-width: 0;
    }

    .document-title {
      font-weight: 500;
    }

    .document-subtitle {
      font-size: 0.9em;
      color: #666;
    }
  }
}
todos-index {
  display: block;
  max-width: 640px;

  .todos-index-header {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

    .new-task-button {
      margin-left: auto;
    }
  }
}
.todo-like-list {
  display: block;

  &:not([has-errors]) {
    .errors.list-errors {
      display: none;
      visibility: hidden;
    }
  }

  &:not([data-item-count="0"]), &:not([data-loaded]) {
    .no-todos-notice {
      display: none;
      visibility: hidden;
    }
  }

  .pagination-link-next {
    background-color: #777;
    color: white;
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    margin: 1rem auto 0;
    width: fit-content;
    border: 1px solid;
    padding: 0.3rem 0.8rem 0.3rem 1rem;
    border-radius: 1.5rem;
    height: 3rem;

    .chevron-down {
      display: block;
    }

    &:hover:not(.loading) .chevron-down {
      animation: bob 0.6s ease-in-out infinite;
    }

    &.loading {
      opacity: 0.6;
      cursor: default;
      pointer-events: none;

      .chevron-down {
        display: none;
      }

      &::after {
        content: "";
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        margin: 0.1rem 0 0 0.3rem;
        border: 3px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
      }
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes bob {
    0%, 50%, 100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(1px);
    }
    75% {
      transform: translateY(-1px);
    }
  }
}

todos-list {
  display: block;

  .results-page {
    margin-top: 1rem;
  }

  &[data-patient-id] .results-page {
    margin-top: 0;
  }
}

.todo-card-placeholder {
  .placeholder-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    height: 10.5rem;
    padding: 1rem;
  }

  &.compact {
    .placeholder-header {
      height: 9rem;
    }

    .placeholder-second-line {
      display: none;
    }
  }

  .placeholder-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: placeholder-shimmer 1.5s infinite;
    flex-shrink: 0;
  }

  .placeholder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .placeholder-line {
    height: 0.875rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: placeholder-shimmer 1.5s infinite;

    &.placeholder-line-short {
      width: 30%;
    }

    &.placeholder-line-medium {
      width: 60%;
    }

    &.placeholder-line-long {
      width: 85%;
    }
  }
}

@keyframes placeholder-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

other-todo {
  display: block;
  background-color: #f7f7f7;

  animatable-accordion {
    gap: 1rem;

    > .header {
      align-items: center;
      display: grid;
      column-gap: 0.3rem;
      grid-template-columns: 1.5rem 2.5rem 5fr 1fr 1fr;
      grid-template-rows: repeat(2, min-content);
      grid-template-areas:
        "chevron avatar date badges badges"
        "chevron avatar title title title";

      > .chevron {
        align-self: start;
        grid-area: chevron;

        .svg-icon {
          width: 1.5rem;
          height: 1.5rem;
          opacity: 0.6;
        }
      }

      > .avatar {
        align-self: start;
        grid-area: avatar;
      }

      .date {
        grid-area: date;
        font-weight: bold;
      }

      .badges {
        display: flex;
        gap: 0.3rem;
        grid-area: badges;
        justify-self: end;

        .label {
          font-size: 1.1rem;
          white-space: nowrap;
        }
      }

      .title {
        grid-area: title;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  &:not([data-urgent]) .urgent-label {
    display: none;
    visibility: hidden;
  }
}
other-todos-for-document {
  display: block;

  .other-todos-heading {
    font-weight: bold;
    margin-top: 1rem;
  }

  .other-todos-list {
    margin-top: 1rem;

    todo-card.card {
      border: none;
      border-left: 8px solid #eee;
      border-radius: 0;
      box-shadow: none;

      .widget & {
        box-shadow: none;
      }

      animatable-accordion .accordion-body {
        padding: 0 0 0 1rem;
      }

      animatable-accordion[open] .accordion-body {
        padding: 1rem 0 1rem 1rem;
      }

      todo-card-body {
        border-left: none;
        padding-left: 0;
      }
    }

    animatable-accordion {
      .header, .accordion-body {
        padding-right: 0;
      }
    }
  }
}
other-todos-for-actionable {
  display: block;

  .other-todos-heading {
    font-weight: bold;
    margin-top: 1rem;
  }

  .other-todos-list {
    margin-top: 1rem;

    todo-card.card {
      border: none;
      border-left: 8px solid #eee;
      border-radius: 0;
      box-shadow: none;

      .widget & {
        box-shadow: none;
      }

      animatable-accordion .accordion-body {
        padding: 0 0 0 1rem;
      }

      animatable-accordion[open] .accordion-body {
        padding: 1rem 0 1rem 1rem;
      }

      todo-card-body {
        border-left: none;
        padding-left: 0;
      }
    }

    animatable-accordion {
      .header, .accordion-body {
        padding-right: 0;
      }
    }
  }
}
todos-sort-select {
  display: block;
  height: auto;
  min-width: 0;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .sort-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .sort-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    min-width: 100%;
  }
}
todos-user-filter-select {
  display: block;
  height: auto;
  min-width: 0;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .user-filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .user-filter-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    width: max-content;
    min-width: 100%;
  }
}
nav-bar-avatar-menu-component .dropdown-menu > li > a {
  padding: 0;
}

@media (max-width: 1149px) {
  nav-bar-avatar-menu-component .dropdown-menu {
    font-size: 150%;
  }
}
top-navigation-toggle-notices-drawer {
  notices-drawer-unread-counter-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    background-color: #ef4444;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button {
    background: transparent;
    border: none;
    padding: 0;
    position: relative;

    &:focus,
    &:focus-visible {
      outline: none;
      border: none;
      box-shadow: none;
    }
  }
}
top-navigation {
  display: block;
  z-index: 1041;
}

top-navigation .page-title {
  align-self: center;
  font-size: 1.8rem;
  flex-grow: 1;
}
triage-protocol {
  &.card {
    display: block;
    margin: 0;
    padding: 0.5rem;
  }

  .triage-protocol-heading {
    svg.glyphicon.glyphicon-random {
      transform: rotate(-90deg);
    }
  }

  .triage-protocol-body {
    padding: 0.5rem;
  }
}
.user-licenses-index-item {
  background-color: #fff;
  overflow-y: scroll;
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  max-height: 70vh;
}

.user-licenses-index-agree-disagree-options {
  display: flex;
  gap: 1rem;
}
billing-items {
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

billing-selections {
  height: 100%;

  ul.nav-tabs li {
    display: flex;

    a {
      padding: 8px;
      text-align: center;
    }
  }
}

.billing-summary {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  align-items: center;
  width: 100%;
  max-width: var(--max-element-width);
  margin: 1rem 0;
  overflow: hidden;
}

.billing-summary .total {
  background: rgba(0, 0, 0, 0.1);
  font-weight: bold;
}
charging-gap-line {
  display: flex;
  gap: 0.5rem;
}
medical-info {
  .form-section-grid {
    display: grid;
    gap: 1rem;

    .medical-info-medical-problem-at-booking {
      grid-area: main;
    }

    .medical-info-triage-response {
      grid-area: secondary;
    }

    .triage-proto-container {
      grid-area: side;
    }

    @media (max-width: 999px) {
      grid-template-areas:
        "main"
        "side"
        "secondary";
      grid-template-columns: 1fr;

      triage-protocol {
        max-width: 640px;
      }
    }


    @media (min-width: 1000px) {
      grid-template-areas:
        "main side"
        "secondary side";
        grid-template-columns: minmax(0, 640px) 1fr;
        grid-template-rows: auto 1fr;
    }

    triage-protocol {
      &.card {
        @media (min-width: 1000px) {
          /* This little hack is so when it appears to the right of a labelled element (the reason for appointment field),
           * it aligns with the top of that field, not the label.
           * The sizes are derived from [body line height] * [body font-size] + [padding top + bottom] */
          margin-top: calc(2rem + 5px);
        }
      }
    }
  }
}
visit-mini-card {
  display: block;

  .workflow-row {
    margin-top: 0.6rem;
  }
}
propose-bulk-billing ul {
  padding: 2rem 0;
}

propose-bulk-billing aside {
  padding: 2rem 0;
  font-size: 90%;
}

schedule-visit-form-address {
  .badges {
    text-align: right;

    .label {
      white-space: nowrap;
    }
  }
}
schedule-visit-form-shifts {
  .shifts-dropdown {
    position: relative;

    .shifts-dropdown-button {
      border: none;
      background: transparent;
      padding: 0;
      margin-left: 4px;
      text-align: left;
    }

    .dropdown-menu {
      margin-left: -8px;
    }
  }
}
/*

 */

table.patient-details th:first-of-type {
  white-space: nowrap;
  width: 15%;
}