.page-container {
  display: flex;
  flex-direction: column;
  width: 1920px;
  height: 970px;
  padding: 20px 30px;
  .top-container {
    display: flex;
    flex-direction: column;
    height: 570px;
    padding: 10px 20px;
    border: 2px solid #00ffff;
    border-radius: 10px;
    .count-container {
      display: flex;
      justify-content: space-between;
      font-size: 22px;
      .left {
        display: flex;
        span {
          margin-right: 40px;
        }
      }
      .right {
        display: flex;
        span {
          position: relative;
          margin-left: 90px;
          &::before {
            position: absolute;
            top: 4px;
            left: -40px;
            width: 26px;
            height: 26px;
            background: #f2f2f2;
            border-radius: 50%;
            content: '';
          }
          &:nth-child(2)::before {
            background: #92d050;
          }
          &:nth-child(3)::before {
            background: #ffff00;
          }
          &:nth-child(4)::before {
            background: #ff0000;
          }
        }
      }
    }
    .info-container {
      display: grid;
      flex: 1;
      grid-template-rows: repeat(4, 110px);
      grid-template-columns: repeat(5, auto);
      gap: 15px 25px;
      margin-top: 10px;
      font-size: 26px;
      .item {
        position: relative;
        padding: 10px 30px;
        background: #031024;
        .code {
          position: relative;
          margin-bottom: 10px;
          padding-left: 30px;
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 7px;
            height: 100%;
            background-color: #00ffff;
            content: '';
          }
        }

        &::after {
          position: absolute;
          top: 20px;
          right: 10px;
          width: 70px;
          height: 70px;
          background: #f2f2f2;
          border-radius: 50%;
          content: '';
        }
        &.status2::after {
          background: #92d050;
        }
        &.status3::after {
          background: #ffff00;
        }
        &.status4::after {
          background: #ff0000;
        }
      }
    }
  }

  .bottom-container {
    display: grid;
    flex: 1;
    grid-template-rows: repeat(2, 48%);
    grid-template-columns: repeat(2, 50%);
    gap: 15px 10px;
    margin-top: 10px;
    padding: 10px 20px;
    border: 2px solid #00ffff;
    border-radius: 10px;
    .chart {
      background: #031024;
    }
  }
}
