article.clinical-allergies {
  padding-bottom: 0;

  .current-status {
    font-weight:  normal;
    padding-left: 0;
  }

  .panel {
    margin: 2rem 0 .6rem 0;
    padding: 0.5rem 0;

    .flex-container {
      align-items: center;
      flex-align: stretch;
      justify-content: center;
      margin: 0 1rem;

      &.disabled {
        opacity: .5;
        pointer-events: none;
      }

      input {
        margin: 0;
      }

      label {
        flex: 10;
      }
    }
  }
}

.lozenge {
  padding: 0 .3rem;

  ul {
    li {
      background-color: $light-grey;
      border: 0;
      border-radius: 0.3rem;
      display: inline-block;
      // margin: 0.1rem 0.3rem 0.2rem 0;
      margin: 0.1rem .6rem .2rem 0;
      padding: 0.3rem 0.3rem 0 .2rem;
      padding: 0;
      //padding: .2em .3rem 0 .3rem;
    }
  }
}

.clinical-header {
  background-color: $disabled-colour;
  padding: 0 .2em .2em .6em;

  @media print {
    display: none;
  }

  &.lozenge {
    background-color: $white;
    padding: 0 .3rem .2em .3rem;

    ul {
      li {
        background-color: $light-grey;
        border: 0;
        border-radius: 0.3rem;
        margin: 0.1rem 0.3rem 0.2rem 0;
        padding: 0.3rem 0.3rem;
      }
    }

    dl {
      font-size: 0.9rem;
      line-height: 0.8rem;
      margin: 0;
      padding: 0;
    }
  }

  ul {
    margin: 0;
    padding: 0;

    li {
      border-bottom: 1px solid $winter-sky;
      display: inline-block;
      margin: 0.2rem .6rem .2rem 0;
      padding: 0
    }
  }

  dl {
    font-size: 0.9rem;
    line-height: 0.8rem;
    margin: 0;
    padding: 0;

    dt,
    dd {
      display: inline-block;
      margin: 0;
      padding: 0;
    }

    dt {
      font-weight: normal;
    }

    dd {
      font-weight: bold;
      padding-left: 0.2rem;

      &.date {
        color: $muted-dark-grey;
        font-style: italic;
        font-weight: normal;
      }

      &.empty {
        display: none;
      }
    }
  }
}

.patient-alerts--sticky {
  /*
  Using  position: sticky is in Chrome 56 and recent Firefox and will not work in IE11
  but is a simple way for us to fix the alerts under the patient banner when the user
  has scroll downn, so they are always there
  https://gedd.ski/post/position-sticky/
  */
  position: sticky;
  top: 0;
  z-index: 1;
}

.patient-alerts {
  color: $white;
  background-color: transparent;

  @media print {
    display: none;
  }

  &.lozenge {
    ul {
      margin: 0;
      //margin-top: 1px;
      //font-size: 0.9rem;

      li {
        background-color: $nhs-orange;
        color: $white;
        display: inline-block;
        margin: 0 .3rem 0 0;
        margin: 0.1rem 0.3rem 0.1rem 0;
        padding: 0 .4rem;
        line-height: 1.7rem;

        &:hover {
          background-color: darken($nhs-orange, 5);
        }

        &.urgent {
          background-color: $nhs-red;

          &:hover {
            background-color: darken($nhs-red, 7);
          }
        }

        &.covid_19 {
          background-color: $nhs-yellow;
          color: $dark-grey;

          &:hover {
            background-color: darken($nhs-yellow, 7);
          }

          .actions i:before {
            color: $dark-grey;
          }
        }

        &.research-study-participant {
          background-color: darken($nhs-green, 3);
          color: $white;

          &:hover {
            background-color: darken($nhs-green, 5);
          }

          a {
            border-bottom: 1px solid $white;;
            color: $white
          }

          .date {
            border-left: 1px solid $mid-grey;
          }

          span {
            color: $white;
          }
        }

        span {
          padding: 0 .4rem;
        }

        .body,
        .external_application_link {
          padding-left: 0;
        }

        .date,
        .author,
        .actions {
          border-left: 1px solid $winter-sky;
          font-style: italic;
          white-space: nowrap;

          .fa,
          .fas,
          .far {
            color: $light-grey;
            &:hover {
              color: $white;
            }
          }
        }

        .actions {
          padding-left: .6rem;
          padding-right: .1rem;
        }
      }
    }
  }
}