#kbe-article-feedback-wrapper { margin-top: 1rem; clear: both; }

.kbe-article-feedback-title { margin-top: 0; margin-bottom: 1rem; }

.kbe-article-rating-input { display: none; }
.kbe-article-rating-input:checked + label { border-color: #0274be; color: #0274be; }

.kbe-article-rating-label { display: inline-block; margin: 0; width: auto; min-width: 120px; text-align: center; padding: 10px 30px; border: 2px solid #aeaeae; line-height: 1; font-size: 15px; color: #a4a4a4; border-radius: 7px; vertical-align: middle; cursor: pointer; margin-right: 3px; box-sizing: border-box; transition: all 0.15s ease-in-out; }
.kbe-article-rating-label svg { display: inline-block; height: 22px; width: 22px; margin-right: 3px; vertical-align: middle; }
.kbe-article-rating-label span { display: inline-block; vertical-align: middle; }
.kbe-article-rating-label:hover { border-color: #555; color: #555; }

#kbe-article-feedback-submit { position: relative; display: inline-block; vertical-align: middle; margin: 0 !important; }

#kbe-article-feedback-fields-wrapper { display: none; max-width: 500px; margin-top: 1rem; }
#kbe-article-feedback-fields-wrapper > * { margin-bottom: 1rem; }

.kbe-article-feedback-field { line-height: 0; }
.kbe-article-feedback-field input[type=email],
.kbe-article-feedback-field textarea { width: 100%; line-height: 1.5; margin: 0; }

/* Feedback submitting animations */
#kbe-article-feedback-form .kbe-loading-spinner { display: none; margin-left: 10px; height: 8px; }
#kbe-article-feedback-form .kbe-loading-spinner > div { width: 8px; height: 8px; margin: 0 2px; }

#kbe-article-feedback-form input,
#kbe-article-feedback-form select,
#kbe-article-feedback-form textarea,
#kbe-article-feedback-form button { transition: opacity 0.2s ease-in-out; }

#kbe-article-feedback-form.kbe-is-submitting .kbe-article-rating-label,
#kbe-article-feedback-form.kbe-is-submitting input,
#kbe-article-feedback-form.kbe-is-submitting select,
#kbe-article-feedback-form.kbe-is-submitting textarea,
#kbe-article-feedback-form.kbe-is-submitting button { opacity: 0.5; }

#kbe-article-feedback-wrapper[data-feedback-form-display="never"] #kbe-article-feedback-form.kbe-is-submitting > .kbe-loading-spinner { display: inline-block; }
#kbe-article-feedback-wrapper:not([data-feedback-form-display="never"]) #kbe-article-feedback-form.kbe-is-submitting #kbe-article-feedback-fields-wrapper .kbe-loading-spinner { display: inline-block; }

/* Confirmation message */
#kbe-article-feedback-confirmation-message { display: none; }