#alert-container {
  display: none;
}

.comment-field {
  background-color: #333333;
  padding-top: 3rem;
  padding-bottom: 1rem;

  textarea {
    min-height: 7rem;
  }

  input[type='text'], textarea {
    border: 1px solid #333333;
    background-color: #F7F7F7;
    box-shadow: none;
    &:focus {
      box-shadow: none;
      background-color: white;
    }
  }

  .has-tip {
    color: #008cba;
  }

  .next {
    float: right;
    i {
      margin-left: 0.275rem;
    }
  }

  .prev i {
    margin-right: 0.275rem;
    margin-top: 0.5rem;
  }
}

.comment-diag {
  color: #EBEBEB;
  border-top: 1px solid #5E5E5E;
  padding-top: 1rem;

  .created-at {
    color: #b3b3b3;
  }
  .comment-content {
    padding-bottom: 1rem;
    padding-left: 0.275rem;
    border-bottom: 1px dashed #8a8a8a;
    margin-bottom: 0;

    p {
      margin-bottom: 0.325rem;
    }
  }
  .name {
    padding-top: 1rem;
    padding-left: 0.275rem;
  }
}

.comment-submit[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.comment-submit {
  background-color: #008cba;
  opacity: 0.8;
}


.comment-success {
  color: #66FAB5;
}

.comment-fail {
  color: #FF7A7A;
}

.comment-wrapper {

  &:hover {
    background-color: #444444;
  }

  .name {
    color: #DDDDDD;
  }

  .comment-content {
    word-wrap: break-word;
    color: #DDDDDD;
    word-break: break-all;
  }

}