<!--modals-->
<div class="modal fade" id="myModal">
  <div class="discussion-start-modal">
    <div class="discussion-start-modal-content" id="topic-scroll" tabindex="-1" role="dialog">
      <form [formGroup]="startForm" class="discussion-start-form">

        <div class="start-form-content" *ngIf="showSelectCategory" [ngClass]="{ 'is-invalid': showError('subTitle') }">
          <label class="start-form-label">Select category*</label>
          <div class="start-form-field">
            <label class="start-form-label" for="myList">Select list </label>
            <select formControlName="category" #category [required]="true" id="myList" class="select-category">
              <option [value]="c.cid" *ngFor="let c of allCategories" [innerHTML]="c.name"></option>
            </select>
          </div>
          <small class="mandatory-label" *ngIf="!startForm.get('category').valid" i18n="category Error|Explains category is required">
            category is mandatory</small>
        </div>

        <div class="start-form-content" [ngClass]="{ 'is-invalid': showError('subTitle') }">
          <label class="start-form-label">Discussion topic*</label>
          <div class="start-form-field">
            <input [ngClass]="{'is-invalid' : isFieldValid('question')}" class="start-form-field-control" placeholder="Type here (minimum 8 characters)"
              formControlName="question" #question maxlength="1000" />
          </div>
          <small class="mandatory-label" *ngIf="!startForm.get('question').valid" i18n="question Error|Explains question is required">
            Question is mandatory. It should be minimum of
            8 characters</small>
        </div>

        <div class="start-form-content">
          <div class="start-form-field">
            <label class="start-form-label" for="description">Please elaborate your question or idea here*</label>
            <textarea [ngClass]="{'is-invalid' : isFieldValid('description')}" minlength="8" class="start-form-field-control" rows="8" formControlName="description"
              #description name="moretext" placeholder="Type here (minimum 8 characters)" id="description"></textarea>
          </div>
          <small class="mandatory-label" *ngIf="!startForm.get('description').valid"
            i18n="description Error|Explains description is required"> Description is mandatory. It should be minimum of
            8 characters </small>
        </div>

        <div #postTags [ngClass]="{ 'is-invalid': showError('tags') }" class="start-tags">
          <label class="mb-0">Tags</label>
          <div *ngFor="let tag of postTagsArray">
            {{ tag }}
          </div>
          <!-- TODO: check the padding for placeholder -->
          <tag-input class="tag-input" secondaryPlaceholder="Add a tag and press Enter" formControlName="tags"
            [modelAsStrings]="true">
          </tag-input>
        </div>

        <div *ngIf="showErrorMsg">
          <small class="mandatory-label">
            {{createErrorMsg}}
          </small>
        </div>

        <div class="start-modal-buttons">
          <button (click)="closeModal('discard');logTelemetry($event)" mat-raised-button type="button"
            class="df-btn df-btn-normal df-cancel-btn" id="discard-discussion-start-form">Cancel
          </button>
          <span *ngIf="uploadSaveData">
          </span>
          <button *ngIf="mode !== 'edit'" type="submit" class="df-btn df-btn-normal df-btn-primary df-submit-btn"
            [ngClass]="{'df-btn-disabled': !enableSubmitButton }" [disabled]="!enableSubmitButton"
            (click)="submitPost(startForm);logTelemetry($event)" id="submit-discussion-start-form">
            <span class="text-white">Submit</span>
          </button>
          <button *ngIf="mode === 'edit'" type="submit" class="df-btn df-btn-normal df-btn-primary df-update-btn"
            [ngClass]="{'df-btn-disabled': !enableSubmitButton }" [disabled]="!enableSubmitButton"
            (click)="updatePost(startForm);logTelemetry($event)" id="update-topic-popup">
            <span class="text-white">Update</span>
          </button>
        </div>
        ​
      </form>
      ​
      <input type="hidden" i18-value i18-aria-value aria-value="Post created successful"
        value="Post created successfully!" #toastSuccess />
      <input type="hidden" i18-value i18-aria-value aria-value="unable to create post"
        value="Error in creating new post!" #toastError />
    </div>
  </div>
</div>

./discuss-start.component.scss

::ng-deep:root {
  --df-modal-content-bg: var(--df-common-bg);
  --df-modal-field-control-bg: var(--df-background);
  --df-tag-bg:var(--df-e9e8d9);
  --df-ng-tag-bg: var(--df-background);
}

#myModal{
  display: block;
  opacity: 2!important;
}

.discussion-start-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.8);
  z-index: 99999;
  opacity: 1;
  transition: opacity .1s ease-in;
  pointer-events: auto;

  .discussion-start-modal-content {
    max-width: 50rem;
    width: 90%;
    position: relative;
    margin: 0 auto;
    padding: 1rem;
    border-radius: 0.1875rem;
    background: var(--df-modal-content-bg);
    color: var(--df-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    max-height: calc(100% - 156px);

    .discussion-start-form {
      .start-form-content {
        margin-bottom: 0.5rem;
      }

      .start-form-label {
        display: inline-block;
        margin-bottom: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 700;
      }

      .start-form-field {
        position: relative;
        margin-bottom: 0;

        .select-category {
          border: 0.0625rem solid var(--gray-200);
          color: var(--df-text);
          margin: 0 0.5rem;
          padding: 0.5rem 0.25rem;
          background: var(--df-field-control-bg);
        }

        .start-form-field-control {
          background-color: var(--df-modal-field-control-bg);
          border: 0.0625rem solid var(--gray-200);
          border-radius: 0.1875rem;
          color: var(--df-text);
          display: block;
          font-size: 0.8125rem;
          font-family: sans-serif;
          position: relative;
          width: 96%;
          cursor: pointer;
          outline: none;
          padding: 0.5rem 0.875rem;
          &:focus,
          .active {
            border-color: var(--primary-400) !important;
          }
        }
      }

      .mandatory-label {
        font-size: 0.75rem;
        color: var(--red-100);
      }

      .start-modal-buttons {
        float: right;

        .df-submit-btn,
        .df-update-btn {
          margin-left: 0.5rem;
        }

        .df-cancel-btn {
          box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
          border:0;
          margin: 0 0.5rem;
        }

        .df-btn-disabled {
          background-color: var(--gray-100);
        }
      }

      .start-tags {
        margin-bottom: 1.5rem;

        label {
          display: inline-block;
          font-size: 0.8125rem;
          font-weight: 700;
          margin-bottom: 0;
        }
      }
    }
  }
}

#myModal {
  display: block;
  opacity: 2 !important;
}

::ng-deep {
  .ng2-tag-input {
    border: .0625rem solid var(--gray-200) !important;
    border-radius: 0.1875rem;
    color: var(--df-text) !important;
    display: block;
    font-size: 0.8125rem !important;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin: 0.5rem 0;
    background: var(--df-field-control-bg);
    border-radius: 0.1875rem;
    border-bottom: .0625rem solid var(--gray-200) !important;
  }

  .ng2-tag-input--focused {
    border-color: var(--primary-400) !important;
  }

  .ng2-tag-input__text-input {
    height: 2.25rem;
    margin: 0 0.5rem;
    color: var(--df-text);
    background: var(--df-ng-tag-bg);
  }

  .ng2-tag-input.active {
    border-color: var(--primary-400) !important;
  }

   tag {
    background: var(--df-tag-bg) !important;
    color: var(--df-text) !important;
    &:first-child{
      margin-left: 0.5rem !important;
    }
  }
}