.homeContainer {
      z-index: 3;
      position: fixed;
      top: 0px;
      left: 0px;
      height: calc(100vh / var(--zoom));
      overflow:hidden;
  }

  html {
      width: calc(100vw / var(--zoom));
      height: calc(100vh / var(--zoom));
  }

  /* ── Header ─ */
  .homeHeader {
      position: absolute;
      top: 0px;
      left: 0px;
      padding: 20px 20px;
      background-color: #ffffffcc;
      height: 140px;
      z-index: 2;
      box-sizing: border-box;
      width: calc(100vw / var(--zoom));
      /* width: 100vw; */
  }

  .homeDesc {
      margin-bottom: 6px;
      display: block;
  }

  .homeTitle {
      display: flex;
      font-size: 21px;
      justify-content: space-between;
      align-content: center;
      align-items: center;
      margin-bottom: 12px;
  }

  .homeBalance {
      display: grid;
      grid-template-columns: 1fr 120px;
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 5px;

      #homeOutstanding {
          grid-area: 1 / 1 / 3 / 2;
          font-weight: 600;
          font-size: 32px;
      }

      .homeFlex {
          display: flex;
          align-items: center;
          justify-content: flex-end;
      }

      .homeFlex span {
          font-size: 13px !important;
      }

      .flex1 {
          grid-area: 1 / 2 / 2 / 3;
      }

      .flex2 {
          grid-area: 2 / 2 / 3 / 3;
      }
  }

  .homeContents {
      overflow: scroll;
      height: calc(100vh / var(--zoom) - 140px);
      padding: 0px 18px;
      margin-top: 140px;
      padding-bottom: 100px;
      width: calc(100vw / var(--zoom));
      box-sizing: border-box;


      .homeMonthgrp>span {
          color: white;
          display: flex;
          width: 100%;
          height: 42px;
          font-size: 14px;
          align-items: center;
      }

      .homeExpense {
          border-radius: 5px;
          display: flex;
          color: white;
          background-color: var(--deep);
          height: 52px;
          box-sizing: border-box;
          margin-bottom: 5px;

          .homeDate {
              width: 58px;
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;
              align-content: center;
              align-items: center;
              justify-content: center;
              line-height: 20px;

              span {
                  font-size: 16px;
                  width: 100%;
                  text-align: center;
                  border-right: 1px solid white;
                  height: 35px;
                  display: flex;
                  justify-content: center;
                  font-weight: 400;
                  align-items: center;
                  color: var(--light);
              }
          }

          .homeDetails {
              display: flex;
              width: 100%;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start;
              align-content: flex-start;
              flex-wrap: nowrap;
              gap: 5px;

              div {
                  box-sizing: border-box;
                  padding: 0px 10px;
              }

              .homeSmall {
                  width: 100%;
                  display: flex;
                  font-size: 11px;
                  justify-content: space-between;
                  color: var(--light);

              }

              .homeBig {
                  width: 100%;
                  display: flex;
                  font-size: 15px;
                  align-items: center;
                  justify-content: space-between;
                  color: var(--light);
                  line-height: 18px;

                  .homeAmount {
                      font-size: 21px;
                      font-weight: 400;
                      color: red;
                  }
              }
          }
      }
  }