.preview-field {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  .field-detail {
    width: 100%;
    max-width: 80%;

    label {
      display: block;
      margin-bottom: 5px;
    }

    input,
    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #dedede;
      border-radius: 2px;
    }

    textarea {
      resize: none;
    }
  }

  .actions {
    cursor: pointer;
    margin-bottom: 5px;
    color: var(--color-gray-222);

    .start-edit {
      margin-right: 10px;
    }
  }
}

.field-required {
  color: rgb(209 0 0);
}

.edited-field {
  padding: 5px;
  border-bottom: 1px solid #a1a1a1;

  .edit-item {
    margin-bottom: 10px;

    textarea {
      overflow: hidden;
    }
  }
}

.success {
  text-align: center;
}

.other-settings {
  margin-bottom: 20px;
}

:ng-deep .actions mat-icon.mat-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #a1a1a1;
}

::ng-deep .actions .delete mat-icon.mat-icon {
  color: rgb(221 53 53);
}