.journal-drawer,
.expense-drawer {

  &__content {
    display: flex;
    flex-direction: column;
    margin: 15px;
    padding: 15px;
    border: 1px solid #d2dce2;
    box-shadow: 1px 1px #fbf8f8;
    background-color: #ffffff;
    min-height: 508px;

    &--header {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin: 15px 0 20px;
      font-size: 14px;
      color: #666666;

      > div {
        flex-grow: 1;
        span {
          display: block;
          color: #666666;
          font-weight: 500;
          margin: 10px 0;
        }
      }
      .info {
        flex: 0 1 25%;
        padding-left: 2%;
        margin: 10px 0;
      }
      .balance {
        font-size: 26px;
        font-weight: 500;
        color: #0f1118;
      }
    }

    &--table {
      flex-grow: 1;
      flex-shrink: 0;

      .table {
        color: #666666;
        font-size: 14px;

        .thead .th {
          background: transparent;
          color: #222222;
          border-bottom: 1px solid #000000;
          padding: 0.5rem;
        }
        .tbody .tr .td {
          background: transparent;
          padding: 0.8rem 0.5rem;
        }
      }
      .desc {
        margin: 20px 0 60px;

        > b {
          color: #2f2f2f;
        }
      }
    }

    &--footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      color: #666666;
      .wrapper > div {
        display: flex;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        padding: 0.2rem;
        span,
        p {
          margin: 10px 50px 5px 0px;
        }
        span {
          color: #333333;
          flex-grow: 1;
          font-weight: 500;
        }
      }
    }
  }
}
