.cmf-task-time-widget-wrapper {
  position: relative;
  z-index: 10000;
  width: 300px;

  .play-widger-task-widget {
    position: relative;

    height: 40px;
    padding: 0 20px;

    background-color: var(--app-bg-color-l1);
    border: 1px solid var(--border-primary-color);
    border-radius: 2px;
    box-shadow: var(--chat-box-shadow);

    &::after {
      content: '';

      position: absolute;
      z-index: 10001;
      left: 50%;

      opacity: 0;
      border: 8px solid transparent;
      border-top: 10px solid var(--app-bg-color-l1);
    }

    &.is-drop-menu {
      &::after {
        opacity: 1;
      }
    }

    .play-widget-item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 100%;
      height: 100%;

      .wrapper-flex {
        .play-pause-icon {
          cursor: pointer;
          position: relative;
          top: 3px;
          margin-right: 5px;
        }
      }

      .name-task {
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .text-status {
        margin-right: 5px;
      }
    }

    .play-widget-loader {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
    }

    .text-time {
      cursor: pointer;
      color: var(--app-time-widget-primary-color);
    }
  }

  .play-widget-drop-menu {
    position: absolute;

    overflow: hidden;

    width: 300px;
    margin-top: 8px;

    background-color: var(--app-bg-color-l1);
    box-shadow: var(--chat-box-shadow);

    transition: 0.2s;

    .app-task-tracking-list {
      max-height: 50vh;
      margin-bottom: 15px;

      .task-list {
        &:hover {
          background-color: rgb(0 0 0 / 4%);
        }

        .play-widget-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          width: 100%;
          height: 40px;
          padding: 0 20px;

          .wrapper-flex {
            .play-icon {
              cursor: pointer;
              position: relative;
              top: 3px;
              margin-right: 5px;
            }
          }

          .name-task {
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .play-widget-navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 100%;
      height: 40px;
      margin-top: 10px;
      padding: 0 20px;

      .add-task-title {
        width: 100%;
        margin-right: 5px;
        color: var(--color-gray-888);
      }

      .time-change-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;

        .task-time {
          display: flex;
          align-items: center;

          .task-time-title {
            white-space: nowrap;
          }
        }

        .ok-button {
          cursor: pointer;

          width: 40px;
          height: 20px;

          color: var(--app-bg-color-l1);
          text-align: center;

          background-color: var(--app-time-widget-primary-color);
          border-radius: 2px;
        }
      }
    }
  }

  .wrapper-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 220px;
  }

  .text-time {
    cursor: pointer;
    color: var(--color-gray-888);
  }
}

.play-widger-task-button {
  width: 20px;
  height: 20px;
  margin: 0 5px;

  &.disabled {
    display: none;
  }

  .play-pause-icon {
    cursor: pointer;
    position: relative;
    top: 2px;
    margin-right: 5px;
  }
}

.text-status-cancel {
  margin-right: 5px;
  color: var(--app-time-widget-warn-color);
}

.text-status-loading {
  margin-right: 5px;
  color: var(--color-gray-888);
}

.play-widger-task-toolbar {
  cursor: pointer;

  .date-field-progress-bar-wrapper {
    width: 180px;

    .date-field-progress-bar {
      height: 5px;
      border-radius: 10px;
    }
  }

  .timelapse-wrapper {
    position: relative;
    top: 4px;
    display: flex;
  }
}

.icon-arrow {
  cursor: pointer;
  position: relative;
  top: 3px;
}

.date-field-description {
  font-size: 12px;
}