@layer components {
  .jkanban-container {
    .note {
      a {
        @apply contents;
      }
    }

    .common-f-start {
      @apply flex-wrap gap-2.5 p-0;

      .btn {
        @apply text-left;
      }
    }
    .kanban-container {
      .kanban-title-board {
        @apply font-medium text-[17px];
      }

      footer {
        @apply p-0;

        .btn {
          @apply w-full tracking-[1.2px] rounded-none before:content-["\2b"] before:pr-2 hover:bg-[rgba(var(--light-background),1)] active:border-[rgba(var(--transparent-color),1)];
          padding: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));

          &::before {
            font-family: var(--font-awesome);
          }
        }
      }
    }
  }
  .kanban-board-header {
    @apply h-auto w-auto leading-[unset] border-b-[rgba(var(--ps-light-border),1)] border-b border-solid;
    background: rgba(var(--main-body-color), 0.9);
    &.bg-primary {
      & ~ .kanban-drag {
        @apply bg-[rgba(var(--primary-color),0.3)];
      }
    }

    &.bg-warning {
      & ~ .kanban-drag {
        @apply bg-[rgba(var(--warning-color),0.3)];
      }
    }

    &.bg-success {
      & ~ .kanban-drag {
        @apply bg-[rgba(var(--success-color),0.3)];
      }
    }
  }
  .kanban-container {
    @apply contents;

    footer {
      @apply text-center px-1.5 py-3;

      .btn {
        @apply mb-0;
      }
    }
  }
  .kanban-board {
    @apply transition-all duration-[0.3s] ease-[ease] tracking-[0.5px] shadow-[1px_5px_24px_0_rgba(68,102,242,0.05)] overflow-hidden !w-[calc(100%_/_4_-_30px)] cursor-pointer mb-5 rounded-lg;
    .kanban-drag {
      @apply bg-[rgba(var(--main-body-color),0.9)];

      .itemform {
        .form-group {
          &:last-child {
            @apply pt-3;
          }
        }
      }
    }
  }
  .kanban-item {
    @apply border border-[rgba(var(--chart-progress-light),1)] relative block bg-[rgba(var(--white),1)] mb-5 p-[18px] rounded-[5px] border-solid last:mb-0;

    .kanban-box {
      .badge {
        @apply !leading-normal text-[11px] font-normal;
      }
    }

    p {
      @apply opacity-70;
    }
    .list {
      @apply inline-block opacity-40;

      li {
        @apply inline-block text-xs;

        i {
          @apply mr-2.5;
        }

        + li {
          @apply border-l-[rgba(var(--dark-gray),1)] ml-1.5 pl-1.5 border-l border-dotted;
        }
      }
    }
    .common-f-start {
      li {
        [class*="bg-lighter-"] {
          @apply text-xs;
        }

        + li {
          @apply ml-[-22px];
        }
      }
    }
    .kanban-box {
      & + .kanban-box {
        @apply mt-5;
      }

      .common-align {
        img {
          @apply h-[calc(34px_+_(40_-_34)_*_(100vw_-_320px)_/_(1920_-_320))];
        }
      }

      .badge {
        @apply font-normal;
      }

      h6 {
        @apply overflow-hidden text-ellipsis whitespace-nowrap mx-0 my-2.5;
      }

      .dropdown {
        @apply inline-block absolute right-2.5 top-5;

        .dropdown-item {
          @apply text-[13px] font-medium text-left px-2.5 py-[5px];
        }

        svg {
          @apply h-3.5;
        }
      }

      .flex {
        @apply justify-between items-center flex-wrap items-start;
      }

      .dropdown-toggle {
        &:after {
          @apply content-none;
        }
      }

      .customers ul li + li {
        @apply -ml-2.5;
      }

      .date {
        @apply text-[rgba(var(--badge-light-color),0.8)];
      }
    }
    footer {
      @apply m-0 p-0;
    }
  }
  @screen xl1660 {
    .kanban-board {
      @apply !w-[calc(100%_/_2_-_30px)];
    }
  }
  @screen md {
    .kanban-board {
      @apply !w-[calc(100%_/_1_-_30px)];
    }
  }
  @screen sm {
    .kanban-board {
      @apply !w-[calc(100%_/_1_-_20px)];
    }
  }
  @screen md640 {
    .kanban-board {
      .kanban-drag {
        @apply px-[15px] py-2.5;
      }
    }
    .kanban-container {
      .kanban-board {
        @apply !mx-2.5;
      }
    }
  }
  @screen sm480 {
    .jkanban-container {
      .card-body {
        @apply px-[15px] py-5;
      }
    }
    .kanban-board {
      .kanban-drag {
        @apply px-[15px] py-2.5;
      }
    }
  }
}