.time-clock-container {
  display: flex;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 6px;
  width: 210px;
  align-items: center;
  justify-content: center;

  .time-last-wrap {
    display: flex;
    align-items: center;
    width: 188px;
    display: flex;
    align-items: center;
    justify-content: center;

    .date {
      color: #fff;
      font-size: 12px;
    }

    .time-content-wrap {
      display: flex;
      align-items: center;
    }

    .text {
      color: #fff;
      font-size: 12px;
      margin-right: 5px;
      display: inline-block;
      white-space: nowrap;
    }

    .last-time-wrap {
      display: inline-flex;
      align-items: center;
      margin-left: 6px;

      .day {
        background-color: #fff;
        color: #000;
        border-radius: 4px;
        height: 24px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--regular-font);
        padding: 0 5px;
      }

      .split {
        color: #fff;
        margin: 0 4px;
        align-self: flex-start;
      }

      .t {
        background-color: #fff;
        color: #000;
        border-radius: 4px;
        width: 24px;
        height: 24px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--regular-font);
      }
    }
  }

  &.start {

    .date,
    .text {
      color: #fff;
    }
  }
}