@include export-module('co-task-details-layout') {
  .co-task-details {
    display: flex;
    flex-direction: column;
    &:not(.no-border) {
      border: 1px solid $color_border;
    }
    .header-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    h3 {
      margin-bottom: 15px;
    }

    .form-input {
      width: 100%;
    }
    .details-wrapper {
      display: flex;
      flex-direction: column;
      gap: 5px;
      .co-input-textarea {
        textarea {
          min-height: 150px;
        }
        &:before {
          box-shadow: none;
        }
      }
      .co-input-text {
        &:before {
          box-shadow: none;
        }
      }
    }

    .arrow-link a {
      font-size: 17px;
    }

    .workflow-dropdown-wrapper {
      padding: 0 0 15px 0;
    }
    .workflow-dropdown {
      position: relative;
      .workflow-drop {
        padding: 7px 9px 7px 15px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
        justify-content: space-between;
        cursor: pointer;
        background: #2b1dff;
        &.towait {
          background: #DD6301;
        }
        &.toclose, &.toend {
          background: #0f9402;
        }
        &:not(.error-color):after {
          content: '';
          width: 1px;
          height: 100%;
          background: #fff;
          position: absolute;
          right: 26px;
          top: 0;
        }
        &.error-color {
          background: #C1002A;
        }
        label {
          color: #FFFFFF;
          white-space: nowrap;
        }
        .co-icon {
          width: 10px;
          height: 10px;
          svg {
            fill: #FFFFFF;
          }
        }
      }
      .workflow-dropdown-list {
        position: absolute;
        top: 26px;
        left: 0;
        z-index: 9;
        box-shadow: 0 0 10px 0 rgba(72, 79, 96, 0.25);
        .workflow-drop {
          background: #FFF;
          border-radius: 0;
          padding: 10px 15px;
          label {
            color: #171721;
          }
          &:after {
            display: none;
          }
          &:hover {
            background: #f8f8fa;
          }
        }
        .dot {
          background: #2b1dfe;
          width: 6px;
          height: 6px;
          display: flex;
          border-radius: 100%;
        }
        .drop-point {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          -webkit-box-shadow: 0 0 3px 1px rgb(43 29 255);
          -moz-box-shadow: 0 0 3px 1px rgb(43 29 255);
          box-shadow: 0 0 3px 1px rgb(43 29 255);
          &.towait {
            -webkit-box-shadow: 0 0 3px 1px rgb(221 99 1);
            -moz-box-shadow: 0 0 3px 1px rgb(221 99 1);
            box-shadow: 0 0 3px 1px rgb(221 99 1);
            .dot {
              background: #DD6301;
            }
          }
          &.toclose, &.toend {
            -webkit-box-shadow: 0 0 3px 1px rgb(15, 148, 2);
            -moz-box-shadow: 0 0 3px 1px rgb(15, 148, 2);
            box-shadow: 0 0 3px 1px rgb(15, 148, 2);
            .dot {
              background: #0f9402;
            }
          }
        }
      }
    }
  }
}
