.fg-figure-detail-comments-container {
  min-height: 100px;
  background-color: #F2F2F2;
  padding: 10px;
  position: relative;
}

.fg-figure-detail-comment-item--editable:hover {
  background-color: #EAEBEE;
}

.fg-figure-detail-comment-item {
  position: relative;
  padding: 10px;
}

.fg-figure-detail-comment-item.ng-enter,
.fg-figure-detail-comment-item.ng-leave {
  transition: .4s ease all;
}

.fg-figure-detail-comment-item.ng-enter,
.fg-figure-detail-comment-item.ng-leave.ng-leave-active {
  opacity: 0;
}

.fg-figure-detail-comment-item.ng-leave,
.fg-figure-detail-comment-item.ng-enter.ng-enter-active {
  opacity: 1;
}

.fg-figure-detail-comment-item--editable .fg-figure-detail-comment-item-btn-container {
  position: absolute;
  right: 10px;
  top: 10px;
}

.fg-figure-detail-comment-reply .fg-figure-detail-comment-item-btn-container {
  right: 0;
}

.fg-figure-detail-comment-item-btn-container {
  opacity: 1;

  transition: opacity .4s ease;
}

.fg-figure-detail-comment-item-btn-container.ng-hide {
  opacity: 0;
}

.fg-figure-detail-comment-info-summary {
  color: #777777;

  font-size: 12.5px;
  line-height: 16px;
}

.fg-figure-detail-comment-reply {
  margin-left: 44px;
  padding: 10px 0 0;
}

.fg-figure-detail-comment-reply-textarea-container {
  width: calc(100% - 44px);

  margin: 10px 0 0 44px;
}

.fg-figure-detail-comment-reply-textarea {
  min-height: 35px;
    
  padding: 4px 10px;
    
  border-radius: 5px;
  border: 1px solid #DDDDDD;
  background-color: #FFFFFF;
  color: #000000;
}

.fg-figure-detail-comment-suggested-category-container {
  width: calc(100% - 44px);

  margin-left: 44px;
  margin-top: -2px;
}

.fg-figure-detail-comment-suggested-category-accept-button-container {
  width: calc(100% - 44px);

  margin-left: 44px;
  margin-top: 10px;
}

.fg-figure-detail-comment-suggested-category-accept-button {
  width: 100%;
  height: 35px;

  background-color: #08B58E;
  color: #FFFFFF;
  border: none;
  border-radius: 5px;

  font-size: 12.5px;
  font-family: 'AzoSans-Medium';

  transition: background-color .4s ease;
}

.fg-figure-detail-comment-suggested-category-accept-button:hover {
  background-color: #1B7C66;
}

.fg-figure-detail-comment-suggested-category-accept-button-error-text {
  color: #EA4335;

  font-size: 11px;
}

.fg-figure-detail-main-comment-container {
  flex: 1;

  margin: 0 0 0 15px;
}

.fg-figure-detail-comment-signin-text {
  margin-left: 10px;

  color: #999999;
}

.fg-figure-detail-comment-signin-text--emphasize {
  color: #5C68A4;
  cursor: pointer;

  font-family: 'AzoSans-Regular';
}

.fg-figure-detail-suggest-id-button {
  flex: 0 0 125px;

  margin-left: 15px;

  background-color: #5C68A4;
  color: #FFFFFF;
  border: none;
  border-radius: 5px;

  font-family: 'AzoSans-Medium';
  font-size: 12.5px;

  transition: background-color .4s ease;
}

.fg-figure-detail-suggest-id-button.ng-hide {
  transition: none;
}

.fg-figure-detail-suggest-id-button:hover {
  background-color: #454F81;
}

.fg-figure-detail-comment-user-avatar {
  flex: 0 0 35px;

  border-radius: 50%;
  border: 1px solid #DDDDDD;
}

@media screen and (max-width: 800px) {
  .fg-figure-detail-comment-username-container--editable {
    max-width: 80%;
  }
}

@media screen and (max-width: 450px) {
  .fg-figure-detail-suggest-id-button {
    flex: 0 0 100px;

    font-size: 10px;
  }
}