.h5p-metadata-changelog {
  width: 100%;
}
.h5p-metadata-changelog .field-name-change {
  &.expanded .content {
    display: flex;
    flex-wrap: wrap;
  }

  .field-name-date {
    width: 49%;
    margin-bottom: 0.5em;
    margin-right: 1%;
    margin-top: 0;
    span {
      width: 100%;
    }
  }

  .field-name-author {
    width: 49%;
    margin-bottom: 0.5em;
    margin-left: 1%;
    margin-top: 0;
  }

  .field-name-log {
    width: 100%;
  }

  .h5p-add-author:before {
    content: "+";
    margin-right: 0.7em;
  }

  .h5p-cancel {
    margin-right: 10px;
  }

  .h5p-metadata-changelog-buttons {
    width: 100%;
  }

  .h5p-metadata-logged-changes {
    width: 100%;
    margin-top: 1em;

    // Hide the change log table while editing
    &.editing {
      display: none;
    }

    .h5peditor-field-description {
      margin-bottom: 0;
    }
  }

  .h5p-metadata-log-wrapper {
    margin-top: 1em;
    border: solid 1px #ced6e3;
    border-radius: 0.208em;
    max-height: 15.917rem;
    overflow-y: auto;
    padding: 0 0.5em;
  }

  .h5p-metadata-log {
    display: flex;
    margin-top: 0.5em;
    padding-bottom: 0.5em;

    .h5p-metadata-delete {
      margin-left: 2em;

      &:after {
        font-family: 'h5p-metadata-icons';
        content: "\e902";
        font-size: 1.2em;
      }
    }

    .h5p-metadata-edit {
      &:after {
        font-family: 'h5p-metadata-icons';
        content: "\e904";
        font-size: 1.2em;
      }
    }
  }

  .h5p-metadata-log-buttons {
    min-width: 3em;
    line-height: 2.5;
  }

  .h5p-metadata-log:not(:last-child) {
    border-bottom: solid 1px #ced6e3;
  }

  .h5p-metadata-log-date {
    min-width: 25%;
    font-size: 0.85em;
    font-style: italic;
    line-height: 2.5;
  }

  .h5p-metadata-description-wrapper {
    flex-grow: 1;
    font-size: 0.85em;
    font-style: italic;
  }

  .h5p-metadata-description-wrapper {
    font-weight: bolder;
  }

  .h5p-metadata-log-author {
    font-weight: normal;
  }

  .h5p-metadata-new-log-message {
    width: 100%;
    background: #C5E7E1;
    padding: 0.5em;
    margin-bottom: 1em;
    color: #0a715e;
  }
}