.k-todo-plan {
  position: relative;

  .el-input__inner {
    border: none;
    background: none;
    top: -7px;
    position: relative;
    padding-left: 15px !important;
  }

  .el-input__prefix {
    top: -5px;
    left: -8px;
  }

  .calendar {
    @extend %shadow;
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    background: #fff;
  }

  .day {
    display: inline-block;
    position: relative;
    margin-left: -1px;

    &:hover ul {
      display: block;
    }
  }

  .modal {
    span {
      padding: 0 14px;
      cursor: pointer;
      display: inline-block;
      font-weight: normal;
      border-left: 1px solid #e6e6e6;
      margin-right: -1px;

      &.active {
        color: $primary;
        font-weight: bold;
      }
    }

    ul {
      display: none;
      position: absolute;
      left: 2px;
      top: 0;
      background: #fff;
      z-index: 3;

      li {
        padding: 5px 14px;
        cursor: pointer;
        width: 24px;

        &:hover, &.active {
          color: $primary;
        }
      }
    }
  }

  .z-row {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #e6e6e6;
    width: 310px;
  }

  .operator {
    text-align: right;
    margin-right: 10px;
  }

  .weeks, .days {
    margin: 0 10px;

    span {
      display: inline-block;
      text-align: center;
      color: #999;
      border: solid 1px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      border-radius: .1rem;
      //&:hover, &.active {
      //  background: $primary;
      //  color: #fff;
      //}
    }

    .active {
      background: $primary;
      color: #fff;
    }
  }

  .weeks {
    span {
      width: 48px;
      border-color: #eee;
      margin: 0 14px 14px 0;
    }
  }

  .days {
    span {
      width: 28px;
      border-color: #fff;
      margin: -1px 0 0 -1px;
    }
  }

  .repeat-time {
    input {
      height: 28px;
      width: 90%;
      padding: 2px;
    }
  }

  .repeat-time, .repeat-type {
    margin: 10px 14px;
    color: #999;

    span {
      margin-left: 1rem;
      color: #333;
    }
  }

  .repeat-type {
    span {
      position: relative;
      display: inline-block;

      &.active {
        color: $primary;
      }

      &:hover {
        ul {
          display: block;
        }
      }
    }

    ul {
      width: 60px;
      display: none;
      position: absolute;
      left: 0;
      top: 6px;
      background: #fff;
      z-index: 3;

      li {
        padding: 4px 14px;
        cursor: pointer;

        &:hover, &.active {
          color: $primary;
        }
      }
    }

    //ul {
    //  position: absolute;
    //  right: 0;
    //  top: 0;
    //  background: #fff;
    //  display: none;
    //  width: 60px;
    //  li {
    //    display: block;
    //    cursor: pointer;
    //    padding: 4px 4px;
    //    &:hover, &.active {
    //      color: $primary;
    //    }
    //  }
    //}
  }

  .flatpickr-calendar {
    box-shadow: none !important;
  }

  .repeat-type {

  }
}