.loadsheet-div {
  display: grid;
  grid-template-rows: 5% 95%;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "LoadsheetTitle LoadsheetTitle"
    "PayloadCard    FuelCard";
  height: 830px;

  span.WidgetTitle#title-map {
    grid-area: LoadsheetTitle;
  }

  #loadsheet-payload-card {
    grid-area: PayloadCard;
    --loadsheetFooterBackground: #567FD2;
  }

  #loadsheet-fuel-card {
    grid-area: FuelCard;

    --loadsheetFooterBackground: #FE5353;
  }

  .loadsheet-card {
    height: 100%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    background: var(--cardBackground);
    display: grid;
    margin: 0.5em;
    grid-template-rows: 90% 10%;
    grid-template-areas:
            "Body"
            "Footer";

    .loadsheet-card-body {
      grid-area: Body;
    }

    .loadsheet-card-footer {
      grid-area: Footer;
      background-color: var(--loadsheetFooterBackground);

      color: white;
      font-weight: 700;
      font-size: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 15px;

      .footer-title {
        font-size:0.9rem;
        font-weight: 700;
        color: var(--mainTextSecondary);
        grid-area: DepArr;
      }
    }

      .loadsheet-table {
        font-family: 'JetBrains Mono', monospace;
        color: var(--mainText);
        font-size: 1.7rem;

        table {
          width: 100%;
          padding: 20px;
        }

          td, th {
            padding: 15px 10px;
            //border: 1px solid white;
            vertical-align: top;
          }

          th.dashed, td.dashed {
            border-bottom:2px dashed var(--mainText);
            border-top:2px dashed var(--mainText);
          }

          td.dashed-lower {
            border-bottom:2px dashed var(--mainText);
          }

          td.dashed-upper {
            border-top:2px dashed var(--mainText);
          }

            .ls-col {
              padding: 10px;
            }

            .ls-col-fuel {
              padding: 5px 10px;
            }

            .col-desc {
              width: 30%;
            }

            .col-fuel-desc {
              width: 40%
            }

            .col-notes {
              width: 30%;
              padding-left: 20px;
            }

            .col-value {
              width: 10%;
            }

            .col-fuel-value {
              width: 20%;
            }

            .col-left {
              text-align: left;
            }

            .col-right {
                text-align: right;
            }

            .col-center {
                text-align: center;
            }

          }

  }
}