.full-width {
  width: 100%;
}

.classic-list-scroll-container {
  background-color: var(--color-gray-fff);
}

.example-viewport {
  min-width: 1470px;
}

mat-cell {
  vertical-align: initial;
}

.task-extra {
  &.task-extra-hidden {
    opacity: 0;
  }

  &:hover {
    opacity: 1;
  }

  .task-extra-text {
    padding-left: 32px;
  }

  .task-extra-comments {
    padding-left: 32px;

    .show-coments {
      position: relative;
      left: -16px;
    }
  }
}

.top-line {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: row;

  width: 100%;
}

.edit-name {
  flex: 1;
}

.is-checked {
  text-decoration: line-through;
}

.actions {
  // border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .subinfo-icon {
    cursor: pointer;
    margin: 0 12px 0 0;
    line-height: 1;
  }
}

.large-form-field {
  width: 350px;
}

mat-row.mat-row {
  align-items: flex-start;
  height: initial;
  min-height: 30px;
}

mat-cell.mat-cell {
  flex-direction: column;
  align-items: flex-start;
}

mat-row,
mat-header-row {
  border-bottom: 0;
}

.mat-header-cell {
  color: #a0a0a0;
}

.comments {
  max-width: 450px;
  padding-top: 12px;
  padding-left: 19px;

  background-color: var(--app-bg-color-l3);
  border-radius: 7px;
}

.drag__handler {
  display: flex;
  padding-top: 6px;
  padding-right: 5px;
}

.mat-icon {
  color: #0000008a;

  &.flip {
    transform: scaleX(-1);
  }

  i {
    line-height: 14px;
  }
}

.text-wrapper {
  // padding-left: 32px;
  overflow: hidden;
  max-width: 780px;
  height: auto;
  max-height: 550px;
}

.ml,
.info {
  /* padding-right: 105px; */
}

.info {
  display: flex;

  .actions {
    margin-left: auto;
  }
}

.element__item {
  position: relative;
  display: flex;
  margin-top: 10px;

  .drag-indicator-wrapper {
    margin-top: -5px;
  }

  .drag-indicator {
    cursor: move;
    visibility: hidden;
  }

  &:hover .drag-indicator,
  &:hover .drag__handler {
    visibility: visible;
  }
}

.mat-row {
  &.cdk-drag-placeholder {
    pointer-events: none;
    position: relative;

    &::after {
      content: '';

      position: absolute;
      z-index: 2;
      inset: 0 0 13px;

      display: block;

      height: 20px;
      min-height: unset;
      margin: auto;

      border: 1px dashed #a0a0a0;
    }
  }
}

.mat-table {
  &.cdk-drop-list-dragging {
    pointer-events: none;
  }
}

:host ::ng-deep .mat-row.cdk-drag-placeholder * {
  opacity: 0;
}

.cdk-drag-preview {
  overflow: hidden;

  width: 400px;
  padding: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;

  background: rgb(0 0 0 / 16.4%);
}

.mat-cell.alarm-date {
  overflow: unset;
}

.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;
  }
}

.pre-wrap {
  white-space: pre-wrap;
}

.none-icon {
  float: right;
  padding-left: 9px;
  visibility: hidden;
}

.cmf-table {
  position: relative;
  display: flex;
  flex-direction: column;

  .app-link-container {
    text-decoration: none;
  }

  .cmf-row-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .cmf-row {
    display: flex;
    flex-direction: row;

    &.cmf-header-row {
      position: sticky;
      z-index: 2;
      top: 0;

      display: grid;

      margin-left: 24px;
      padding-top: 10px;
      padding-bottom: 5px;

      background: var(--color-gray-fff);
      border-bottom: 1px solid #ddd;
    }

    .cmf-col {
      position: relative;
      display: flex;

      .col-wrapper {
        display: flex;
        flex-direction: row;
        color: #202020;
        word-break: break-word;
      }

      .col-array-wrapper {
        display: flex;
        flex-direction: column;
        color: #202020;
        word-break: break-word;
      }

      &.cmf-header {
        user-select: none;
        font-size: 12px;
        font-weight: 500;
        color: #a0a0a0;

        &.status {
          width: 150px;
        }

        &.second__element {
          padding-right: 20px;
        }

        &:not(.cmf-header-sort-active) .icon-sort {
          opacity: 0;
        }

        &:not(.cmf-header-filter-active) .icon-filter {
          opacity: 0;
        }

        &.empty {
          flex: none;
          flex-shrink: 0;
          width: 24px;
        }

        .mat-form-field {
          position: relative;
          top: -10px;
          width: 90%;
          margin-top: 0;
        }

        .icon-sort {
          position: relative;
          top: -5px;
        }
      }

      &.cmf-header-sort {
        cursor: pointer;

        .icon-filter {
          position: relative;
          top: -5px;
        }

        &:not(.cmf-header-sort-active):hover {
          .icon-sort {
            opacity: 1;
          }
        }

        &:not(.cmf-header-sort-active) .icon-sort {
          opacity: 0;
        }
      }

      &.cmf-header-filter {
        .icon-filter {
          &:hover {
          }
        }

        &:not(.cmf-header-filter-active):hover {
          .icon-filter {
            opacity: 1;
          }
        }

        &:not(.cmf-header-filter-active) .icon-filter {
          opacity: 0;
        }

        &.cmf-header-filter-active .icon-filter {
        }
      }

      &.cmf-header-sort-active,
      &.cmf-header-sort:hover {
        color: #666;
      }
    }
  }

  .cmf-table-body {
    margin-bottom: 20px;
  }
}

.primary-row {
  min-height: 30px;

  /* border-bottom: solid #e7e5e5; */
  padding-top: 5px;
  padding-bottom: 5px;
}

.secondary-row {
  .info {
    display: flex;
    flex-direction: column;

    // max-width: 40%;
    min-height: auto;
    margin-left: 32px;
  }
}

.main-info {
  width: 100%;
  margin-right: 10px;
  margin-left: 10px;

  .name-info {
    &.new {
      font-weight: bolder;
    }
  }
}

.subinfo {
  display: flex;
  flex-direction: row;
  line-height: 1;

  .owner {
    margin-right: auto;
    padding-bottom: 5px;
    color: #a5a5a5;
  }
}

.selected {
  color: #2980b9;
}

.uwork-list-detail__item {
  width: 100%;
}

.cmf-col {
  box-sizing: border-box;
  padding: 0 5px;
}