.question {
  position: relative;
	margin-top: 5px;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}

.question .note {
  position: absolute;
  left: 5px;
  bottom: 5px;
  color: #777;
  font-size: 12px;
}

.question p:not(:first-of-type) {
  margin-top: 10px;
}

.question .btn.btn-primary {
	margin-top: 5px;
  background-image: linear-gradient(90deg, rgba(81,172,80,1) 0%, rgba(81,172,80,1) 32%, rgba(112,160,192,1) 33%, rgba(112,160,192,1) 50%, rgba(112,160,192,1) 66%, rgba(181,93,93,1) 67%, rgba(181,93,93,1) 100%);
  background-size: 350% 100%;
  background-position: center;
  transition: all 0.2s ease;
}

.question .btn.btn-primary.correct {
  background-position: left;
  border-color: rgb(73, 153, 72);
}
.question .btn.btn-primary.correct:not(.flat) {
  box-shadow: 0px 3px rgb(63, 131, 62);
}
.question .btn.btn-primary.correct:active:not(.flat) {
  box-shadow: 0px 0px rgb(63, 131, 62) !important;
}
.question .btn.btn-primary.correct:hover:not(.flat),
.question .btn.btn-primary.correct:focus:not(.flat) {
  box-shadow: 0px 5px rgb(63, 131, 62);
}

.question .btn.btn-primary.incorrect {
  background-position: right;
  border-color: rgb(156, 81, 81);
}
.question .btn.btn-primary.incorrect:not(.flat) {
  box-shadow: 0px 3px rgb(133, 69, 69);
}
.question .btn.btn-primary.incorrect:active:not(.flat) {
  box-shadow: 0px 0px rgb(133, 69, 69) !important;
}
.question .btn.btn-primary.incorrect:hover:not(.flat),
.question .btn.btn-primary.incorrect:focus:not(.flat) {
  box-shadow: 0px 5px rgb(133, 69, 69);
}

.question input.answer,
.question select.answer {
  transition: background-color 0.2s ease;
}
.question input.answer.correct,
.question select.answer.correct {
	background-color: rgb(141, 187, 141);
}
.question input.answer.incorrect,
.question select.answer.incorrect {
	background-color: rgb(190, 146, 146);
}