::ng-deep .addProjectDialog .project-fields-wrapper {
  .mat-form-field {
    .mat-form-field-label {
      display: none;
    }
  }
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .form-wrapper {
    position: relative;
    box-sizing: border-box;
    margin: 0 20px;

    .project-node-wrapper {
      position: fixed;
      inset: 50px 0;

      overflow-y: auto;
    }

    .input {
      display: flex;
      align-items: center;
    }

    .form-input-wrapper {
      margin: 12px;
    }

    .form-project-title {
      font-size: 18px;
    }

    .type-project-label {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      color: #888;
    }

    .form-error-msg {
      font-size: 13px;
      color: #f44336;
    }

    .form-loader {
      position: absolute;
      inset: 0;

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

      text-align: center;
    }

    .header {
      height: 50px;

      font-size: 18px;
      line-height: 50px;

      background-color: #f9f9f9;
      border-bottom: 1px solid #c5c5c5;
    }

    .form-header-info-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;

      min-height: 75px;
      margin-bottom: 20px;
      padding: 0 45px;

      background-color: #eff8fc;
      border-radius: 10px;

      .form-header-info {
        display: flex;
        flex-direction: column;
        margin-left: 30px;

        .form-header-info-title {
          font-size: 18px;
          font-weight: 400;
        }

        .form-header-info-text {
          font-size: 14px;
          font-weight: 400;
          color: #777;
        }
      }
    }

    .form-item-wrapper {
      display: flex;
      flex-direction: column;
    }

    .body-project-fields {
      display: flex;
    }

    .context-project-fields {
    }

    .project-fields-wrapper {
      display: grid;
      grid-template-areas:
        'executors'
        'spectators'
        'assistant'
        'private-checkbox';
      grid-template-columns: 100%;
      width: 100%;
    }

    .table {
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-columns: 1fr;
      margin: 12px;

      .column-1 {
        margin-right: 45px;
        margin-left: 50px;
      }

      .column-2 {
        margin-right: 50px;
        margin-left: 45px;
      }
    }

    .project-node {
      cursor: pointer;

      display: flex;
      align-items: center;

      margin: 6px 0;
      padding: 12px;

      .type-node-wrapper {
        .type-project-title {
          margin: 0 0 12px;
          font-size: 18px;
          font-weight: 400;
        }

        .project-node-discription-wrapper {
          display: flex;
          align-items: flex-start;

          .project-node-discription {
            .node-discription-name {
              font-size: 14px;
            }
          }
        }
      }

      .type-project-title {
        font-size: 18px;
        font-weight: 400;
      }

      .project-icon {
        height: 50px;
        margin: 0 12px 0 0;
        background-color: transparent;
      }

      .project-node-discription {
        .node-discription-name {
          font-size: 18px;
          font-weight: 400;
        }

        .node-discription-text {
          font-size: 14px;
          font-weight: 400;
          color: #777;
        }
      }

      &.active {
        background-color: #eff8fc;
        border-radius: 10px;
      }
    }
  }

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

    height: 50px;

    background-color: #f9f9f9;
    border-top: 1px solid #c5c5c5;
  }

  .footer-button {
    height: 36px;
    margin-right: 20px;
  }

  .color-button {
    color: #fff;
    background-color: #639efd;
  }
}

.private-checkbox-wrapper {
  display: flex;
  grid-area: private-checkbox;
  align-self: center;
  justify-content: flex-end;

  margin-top: 20px;

  .wrap {
    display: flex;
    align-self: center;
    justify-content: flex-end;

    min-width: 205px;
    margin-right: 30px;

    .information-label {
      margin-left: 10px;
    }

    .information-icon {
      position: relative;
      bottom: 2px;
      left: 4px;
    }
  }
}

.add-executors {
  grid-area: executors;
}

.add-spectators {
  grid-area: spectators;
}

.add-assistant {
  grid-area: assistant;
}

.add-executors,
.add-spectators,
.add-assistant {
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  min-height: 180px;
  margin: 0 30px;

  .add-text {
    width: 190px;
    height: 30px;

    line-height: 30px;
    text-align: center;

    background: #eff8fc;
    border-radius: 10px;
  }
}

.input-inline-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min-content;
  min-width: 100%;

  font-weight: 500;

  background-color: transparent;
  border-radius: 5px;
}

.checkboxes {
  margin-bottom: 10;
}

.checkbox {
  display: block;
}

::ng-deep .addProjectDialog {
  width: 100%;
  height: 100%;

  .mat-form-field {
    width: 100%;
    line-height: 1.5;
  }

  .mat-dialog-container {
    padding: 0;
  }

  .mat-horizontal-stepper-header-container {
    display: none !important;
  }

  .mat-stepper-horizontal,
  .mat-stepper-vertical {
    height: 100%;
  }

  .mat-horizontal-content-container {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0;
  }

  .mat-horizontal-content-container::before {
    content: '';

    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;

    height: 50px;

    background-color: #f9f9f9;
    border-bottom: 1px solid #c5c5c5;
  }

  .mat-horizontal-content-container::after {
    content: '';

    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;

    height: 50px;

    background-color: #f9f9f9;
    border-top: 1px solid #c5c5c5;
  }

  .mat-horizontal-stepper-content {
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
  }

  .blue-loader {
    .mat-progress-spinner circle,
    .mat-spinner circle {
      stroke: #3d87ff;
    }
  }
}

.alert div {
  margin-bottom: 1rem;
  padding: 1rem;
  color: #820000;
  background-color: #fed3d3;
}

.form-header-info-img {
  padding-bottom: 6px;
}