article {
  background: white; }
  article header {
    background: var(--light-color);
    border-top: 1px solid #ccc; }
    article header > .breadcrumb {
      color: #333;
      display: inline-flex;
      height: 32px;
      padding-left: 6px;
      white-space: nowrap; }
      article header > .breadcrumb > li > a {
        display: block;
        height: 100%;
        padding: 10px 4px; }
    article header > h2 {
      box-sizing: border-box;
      cursor: pointer;
      display: inline-block;
      font-weight: 500;
      height: 32px;
      padding: 10px 3px 0; }
      article header > h2:first-letter {
        text-transform: uppercase; }
    article header > .favorites {
      display: flex;
      height: 32px;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap; }
      article header > .favorites > li {
        margin-right: 1px; }
        article header > .favorites > li > a {
          border-top-left-radius: 4px;
          border-top-right-radius: 9px;
          background: #d8d8d8;
          height: 9px;
          margin-top: 5px;
          padding: 10px .5em; }
          article header > .favorites > li > a:after {
            border-right: 3px solid #efefef;
            border-top: 3px solid #efefef;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            content: '';
            height: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 0; }
        article header > .favorites > li.current > a {
          background: #f8f8f8;
          margin-bottom: -1px;
          padding-bottom: 11px; }
        article header > .favorites > li:not(.current) > a {
          box-shadow: inset 0 -2px 2px -2px rgba(0, 0, 0, 0.1); }
  article footer {
    grid-area: footer; }
  article > form > .data, article > .data {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    overflow: auto; }

article:not(.list) {
  background-color: white; }

main > article,
article > form {
  height: 100%; }

article:not(.form),
article > form {
  display: grid;
  grid-template-areas: "header" "header2" "content" "footer";
  grid-template-rows: min-content min-content 1fr min-content;
  overflow: hidden; }
  article:not(.form) > header,
  article > form > header {
    grid-area: header; }
  article:not(.form) > .data, article:not(.form) > table,
  article > form > .data,
  article > form > table {
    display: block;
    grid-area: content; }
  article:not(.form) > .general.actions,
  article > form > .general.actions {
    grid-area: header2; }
  article:not(.form) > .selection.actions,
  article > form > .selection.actions {
    grid-area: footer; }