.kanban-status-settings-wrapper {
  overflow: hidden;
}

h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  margin-top: 4px;
  margin-right: 20px;

  .head__caption {
    margin-right: 5px;
  }
}

.pipeline-body {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .cmf-pipeline-toolbar {
    padding-right: 20px;
  }
}

.placeholder {
  position: fixed;
  z-index: 999;
  inset: 0;

  background-color: rgb(0 0 0 / 13%);
}

.change-pipeline-head {
  position: relative;
  z-index: 1001;

  min-width: 225px;
  margin-left: -10px;
  padding: 10px 10px 10px 20px;

  .p-name {
    cursor: pointer;
  }

  .example-full-width {
    width: 100%;
  }

  &.actived {
    background-color: var(--color-gray-fff);
  }

  .custom-menu {
    position: absolute;
    z-index: 1002;

    display: block;

    width: 240px;
    height: calc(100vh - 103px);
    margin-left: -10px;
    padding: 10px;
    padding-top: 25px;

    background-color: var(--color-gray-fff);
    box-shadow:
      0 3px 1px -2px rgb(0 0 0 / 20%),
      0 2px 2px 0 rgb(0 0 0 / 14%),
      0 1px 5px 0 rgb(0 0 0 / 12%);
  }

  .add-pipeline {
    cursor: pointer;

    display: flex;
    align-items: center;

    width: 80%;
    padding-left: 15px;

    font-size: 14px;
    font-weight: 400;

    .example-full-width {
      margin-right: 10px;
    }
  }
}

.mat-button-toggle-label-content {
}

.cmf-pipeline-toolbar {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.cmf-pipeline-toolbar-left {
  display: flex;
  align-items: center;
  width: 100%;
}

.cmf-pipeline-toolbar-right {
  display: flex;
  flex-direction: row;
}

#add-deal {
  cursor: pointer;

  margin-left: 16px;
  padding: 5px 15px;

  color: rgb(32 151 32);

  background-color: var(--color-gray-fff);
  border: 1px solid rgb(32 151 32);
  border-radius: 6px;
}

.pipeline-toolbar-item {
  cursor: pointer;
  user-select: none;

  padding: 0 16px;

  line-height: 48px;
  color: #a1a1a1;
  white-space: nowrap;
}

.toolbar-actions-buttons {
  color: #a1a1a1;

  &:first-child {
    margin-left: 10px;
  }
}

.toolbar-item-wrapper {
  margin-left: 10px;
}

#saveBtn {
  background-color: #27ae60;
}

#cancelBtn {
  background-color: #7f8c8d;
}

#saveBtn,
#cancelBtn {
  margin-left: 10px;
}

.toolbar-item:focus {
  outline: none;
}

.pipeline-tool-grp {
  display: flex;
  flex-direction: row;
  margin-right: 10px;
}

:ng-deep .search .mat-icon {
  width: 21px;
  height: 21px;
  font-size: 21px;
}

.add-column__header {
  cursor: pointer;

  padding: 5px 10px;

  background-color: var(--color-gray-fff);
  border: 1px solid lightgray;
  border-radius: 3px;

  &:hover {
    background-color: rgb(233 233 233);
  }
}

.add-column__kanban {
  cursor: pointer;

  padding: 15px 20px;

  font-weight: 400;
  color: var(--color-gray-222);

  border: 1px solid lightgray;
  border-radius: 3px;

  &:hover {
    background-color: rgb(233 233 233);
  }
}

.app-kanban {
  display: grid;
  grid-template-columns: calc(100% - 2px);
  gap: 25px;

  .accordion-name {
    display: block;
    margin: 0 0 10px;
    font-weight: 600;
    color: var(--color-gray-222);
  }

  .left-bar {
    box-sizing: border-box;
    width: 260px;
    min-width: 260px;
    min-height: calc(100vh - 126px);
    padding-top: 10px;
    padding-right: 1%;
    padding-left: 20px;

    background-color: rgb(238 238 238);

    .add-trigger {
      width: 100%;
      margin-top: 20px;
    }

    .sources {
      margin-bottom: 25px;

      .helper-full {
        margin-right: 10px;
        margin-bottom: 15px;
        font-size: 12px;
        border: 1px solid #63a5ff;
      }

      .action-add {
        margin-top: 25px;
      }
    }

    .active-statuses {
      .scroll-statuses {
        max-height: 35vh;
      }

      .statuses {
        max-height: 50%;
      }

      .status-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        padding: 10px 0 5px;

        color: #777;

        border-bottom: 1px solid #dadada;

        &.activated {
          color: var(--color-gray-222);
        }

        .name-wrap {
          display: flex;
          align-items: flex-start;
        }

        .status-item-name {
          padding-left: 5px;
        }
      }

      .status {
        margin-bottom: 10px;
      }
    }
  }

  .right-bar {
    width: 100%;
  }
}

.forms-item {
  cursor: pointer;
  padding: 10px 0 5px;
  color: var(--color-gray-222);
  border-bottom: 1px solid #dadada;

  span {
    display: block;
  }

  .type {
    font-size: 12px;
    color: #777;
  }
}

.example-container {
  position: relative;

  display: inline-block;
  flex: 1;

  min-width: 200px;
  min-height: 100%;
  margin-right: 25px;

  vertical-align: top;

  .header {
    position: sticky;
    top: 0;
    display: flex;
  }

  &:hover {
    .status-toolbar {
      display: block;
    }
  }
}

.kanban-statuses-container {
  overflow-x: hidden;
  display: flex;
  width: 100%;
  height: 100%;
}

.example-list,
.trigger-list {
  overflow-y: auto;
  display: block;

  height: 100%;
  min-height: 60px;
  padding: 2px;

  background: var(--color-gray-fff);

  .add-trigger {
    width: 100%;
  }
}

.column-head {
  position: relative;
  z-index: 10;
  color: #fff;

  .change-color-box {
    cursor: pointer;

    position: relative;
    top: 1px;
    right: -17px;

    width: 15px;
    height: 100%;
    min-height: 15px;
  }

  .change-column-color {
    visibility: hidden;
  }

  &:hover .change-column-color {
    visibility: visible;
  }
}

.example-box,
.trigger-card {
  cursor: pointer;

  display: flex;
  flex-direction: row;
  align-items: center;

  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 5px 10px 0;

  font-size: 14px;
  color: rgb(0 0 0 / 87%);

  background: var(--color-gray-fff);
  border: solid 1px #ccc;
  border-radius: 4px;
  box-shadow: 1px 3px 1px -2px rgb(0 0 0 / 20%);
}

.moved-button {
  cursor: move;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 2px 2px 5px 0 rgb(0 0 0 / 20%);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.empty {
  text-align: center;
  opacity: 0.6;
}

.empty:hover {
  opacity: 1;
}

.cmf-uwork-kanban-component {
  width: -webkit-fill-available;
}

.loading-block {
  position: relative;
  margin-top: 64px;

  mat-spinner {
    position: absolute;
    left: 50%;
    margin-left: -32px;
  }

  & ::ng-deep .mat-progress-spinner circle,
  .mat-spinner circle {
    stroke: #1877f2;
  }
}

.status-toolbar {
  position: absolute;
  top: 3px;
  right: -10px;
  display: none;
}

.add-button-icon {
  cursor: pointer;

  position: relative;
  top: 15px;
  right: 7px;

  width: min-content;
  height: min-content;
}

.more-icon {
  position: absolute;
  top: 5px;
  right: 6px;
}

.drag-indicator {
  cursor: move;

  position: absolute;
  top: 8px;
  left: -6px;

  display: block;

  padding-left: 2px;
}

.drag-card-indicator {
  cursor: move;
}

.add-button button {
  top: 5px;
  left: -30px;
}

.empty-img {
  max-width: 163px;
}

.status-name {
  user-select: none;

  display: flex;
  -webkit-box-orient: vertical;
  align-items: center;

  width: 100%;
  height: 48px;
  padding-right: 15px;
  padding-left: 25px;

  text-decoration: none;

  -webkit-line-clamp: 2;

  .editable-status-name {
    width: 100%;
  }
}

.status-settings {
  margin-bottom: 10px;

  .setting-item {
    display: flex;
  }
}

.example-box {
  cursor: move;

  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  height: 30px;
  margin-right: 25px;
  padding: 10px;

  // border: solid 1px #ccc;
  color: #ffff;
  text-align: center;

  background: #9e9e9e;
  border-radius: 4px;
  box-shadow:
    0 3px 1px -2px rgb(0 0 0 / 20%),
    0 2px 2px 0 rgb(0 0 0 / 14%),
    0 1px 5px 0 rgb(0 0 0 / 12%);

  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:active {
  box-shadow:
    0 5px 5px -3px rgb(0 0 0 / 20%),
    0 8px 10px 1px rgb(0 0 0 / 14%),
    0 3px 14px 2px rgb(0 0 0 / 12%);
}

.example-boundary {
  position: absolute;
  right: 25px;
  bottom: 25px;

  max-width: 100%;
  height: 30px;

  border: dotted #ccc 2px;
}

::ng-deep .kanban-status-settings-wrapper {
  /* delme! */
  .inline-edit-wrap .inline-edit .inline-edit-text {
    max-width: 100% !important;
  }

  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 30px;
  }

  .setting-field span.mat-content {
    justify-content: space-between !important;

    .mat-expansion-panel-header-title,
    .mat-expansion-panel-header-description {
      flex-grow: 0;
    }
  }

  .status-settings .mat-expansion-panel-header-description {
    text-align: right;
  }
}

::ng-deep .ask__dialog {
  .mat-dialog-container {
    padding: 0;
  }
}

.add-status {
  display: flex;
  flex-direction: column;

  width: 430px;
  max-height: 295px;
  padding: 15px 20px 15px 15px;

  background-color: var(--color-gray-fff);
  border-radius: 4px;
  box-shadow: 0 3px 15px rgb(0 0 0 / 25.1%);

  .add-status__title {
    border-bottom: 1px solid var(--color-gray-eee);

    h3 {
      margin-top: 0;
    }
  }

  .input {
    position: relative;

    box-sizing: border-box;
    margin-top: 5px;
    padding: 0 10px;
    line-height: 34px;

    border: 1px solid var(--color-gray-aaa);
    border-radius: 4px;

    &:focus {
      border-color: var(--accent-color-bg);
    }
  }

  .add-status__status-list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 5px;

    margin: 15px 0;

    .field {
      display: flex;
      gap: 35px;
      align-items: center;

      .caption {
        display: block;
        min-width: 60px;
        color: var(--color-href);
      }
    }

    .divider-caption {
      margin-left: 230px;
      color: var(--color-href);
    }

    .checkbox-wrapper {
      display: flex;
      gap: 5px;
      align-items: flex-start;

      margin-top: 15px;
      margin-left: 95px;

      input {
        margin: 2px 0 0;
      }
    }

    .input-wrapp {
      position: relative;
      width: 100%;

      .input {
        width: 100%;
        margin-top: 0;
      }

      .input.disabled {
        pointer-events: none;
        background-color: var(--color-gray-ddd);
      }

      .mat-button-icon.disabled {
        pointer-events: none;
      }

      .autocomplete {
        cursor: pointer;
      }

      .mat-button-icon {
        cursor: pointer;

        position: absolute;
        right: 15px;
        bottom: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 20px;
        height: 100%;

        .chevron-down {
          $height: 5px;
          $color: var(--icon-primary-color);

          width: 0;
          height: 0;
          margin-top: $height;

          border-color: $color transparent transparent transparent;
          border-style: solid;
          border-width: $height;
        }
      }
    }

    .status-list__container {
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      max-height: 100%;
    }
  }

  .add-status__actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
  }
}

.add-status ::ng-deep .mat-checkbox-layout {
  white-space: normal !important;
}