.daily_summary {
  width: 328px;
  margin-bottom: 28px;
  &__title {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    & > h3 {
      font-size: 1.25rem;
      letter-spacing: 0em;
      font-weight: 600;
    }
  }
  &__content {
    border: 2px solid #f0f0f0;
    border-radius: 30px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    &__header {
      padding: 24px 0;
      padding-bottom: 0;
      width: 90%;
      &__focus_rate {
        padding-left: 4px;
        font-size: 24px;
        font-weight: 700;
      }
      &__title {
        padding-left: 4px;
        font-weight: 700;
        font-size: 16px;
        color: rgba($color: #000000, $alpha: 62%);
      }
      &__bar {
        width: calc(100% - 24px);
        margin-top: 10px;
        height: 6px;
        & #blue {
          background-color: var(--blue);
        }
      }
    }
    &__time {
      padding: 24px 0;
      width: 90%;
      &__row {
        display: flex;
        &__label {
          width: 70%;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 5px 0px;
          color: #373737;
          &__color {
            height: 10px;
            aspect-ratio: 1;
            border-radius: 100%;

            &#blue {
              background-color: var(--blue);
            }
            &#red {
              background-color: var(--red);
            }
            &#black {
              background-color: #000000;
            }
          }
        }
        &__value {
          width: 30%;
          text-align: right;
          font-weight: 700;
        }
      }
    }
    &__line {
      border: 1px solid #ebebeb;
      width: 85%;
    }

    &__summary {
      font-size: 13px;
      padding: 24px;
    }
  }
}
