client/src/components/mapping/Comments/style.scss
@import '~@blueprintjs/core/lib/css/blueprint.css';
@import '~@blueprintjs/core/lib/scss/variables';

$border-radius: 6px;

#comment-block {
  text-align: left;
  white-space: pre-line;
  flex-direction: column;
  display: flex;
}

#comment-block h3 {
  text-align: center;
}

.user-input {
  display: flex;
}

.card-input {
  align-self: flex-end;
  padding: 0px 20px;
  min-width: 400px;
}

.form-validate {
  display: flex;
  align-self: center;
  width: 30%;
  flex-direction: column;
}

#validate-button {
  width: 150px;

  text-align: center;
  font-size: x-large;
  align-self: center;
  border-radius: $border-radius;
  display: flex;
}

#comment-input {
  display: flex;
  margin: 0px;
  border-radius: $border-radius;

  .text-input {
    margin-right: 10px;
    width: calc(100% - 50px);
    align-self: flex-end;
  }
}

#send-comment-button {
  border-style: solid $light-gray3;
  border-radius: $border-radius;
}

.card-input,
.my-comment,
.other-comment {
  width: 70%;
  min-width: 400px;
  margin: 5px 10px;
  border-radius: $border-radius;
}

.validation-comment {
  background-color: #3dcc91;
}

.my-comment {
  align-self: flex-end;
}

.other-comment {
  align-self: flex-start;
}
