/***************/
/***************/
/***************/
/***************/
.circle {
  border-radius: 100em;
}

/***************/
/***************/
/***************/
/***************/
.circle {
  border-radius: 100em;
}

.tag {
  border-radius: 100em;
  border: 1px solid transparent;
  border-color: #282d4f;
  display: inline-block;
  background-color: #ffffff;
  white-space: nowrap;
  color: #ffffff;
  padding: 0.33em 0.75em;
  font-size: 0.85rem;
  cursor: pointer;
}
.tag.tag--small {
  font-size: 0.85rem;
  padding: 0.5rem;
}
.tag.tag--yellow {
  background-color: #fdd835;
  color: #3a3a3a;
  border-color: #fdd835;
}
.tag.tag--yellow:hover {
  background-color: #fee472;
}
.tag.tag--amber {
  background-color: #ffb300;
  color: #3a3a3a;
  border-color: #ffb300;
}
.tag.tag--amber:hover {
  background-color: #ffc53d;
}
.tag.tag--orange {
  background-color: #fb8c00;
  color: #ffffff;
  border-color: #fb8c00;
}
.tag.tag--orange:hover {
  background-color: #ffa839;
}
.tag.tag--deep-orange {
  background-color: #f4511e;
  color: #ffffff;
  border-color: #f4511e;
}
.tag.tag--deep-orange:hover {
  background-color: #f77e58;
}
.tag.tag--red {
  background-color: #e53935;
  color: #ffffff;
  border-color: #e53935;
}
.tag.tag--red:hover {
  background-color: #ec6e6b;
}
.tag.tag--pink {
  background-color: #d81b60;
  color: #ffffff;
  border-color: #d81b60;
}
.tag.tag--pink:hover {
  background-color: #e84883;
}
.tag.tag--purple {
  background-color: #8e24aa;
  color: #ffffff;
  border-color: #8e24aa;
}
.tag.tag--purple:hover {
  background-color: #b437d5;
}
.tag.tag--deep-purple {
  background-color: #5e35b1;
  color: #ffffff;
  border-color: #5e35b1;
}
.tag.tag--deep-purple:hover {
  background-color: #7e57cd;
}
.tag.tag--indigo {
  background-color: #3949ab;
  color: #ffffff;
  border-color: #3949ab;
}
.tag.tag--indigo:hover {
  background-color: #5969c8;
}
.tag.tag--blue {
  background-color: #1e88e5;
  color: #ffffff;
  border-color: #1e88e5;
}
.tag.tag--blue:hover {
  background-color: #55a5eb;
}
.tag.tag--light-blue {
  background-color: #81d4fa;
  color: #3a3a3a;
  border-color: #81d4fa;
}
.tag.tag--light-blue:hover {
  background-color: #bce8fc;
}
.tag.tag--cyan {
  background-color: #00acc1;
  color: #ffffff;
  border-color: #00acc1;
}
.tag.tag--cyan:hover {
  background-color: #00e3fe;
}
.tag.tag--teal {
  background-color: #00897b;
  color: #ffffff;
  border-color: #00897b;
}
.tag.tag--teal:hover {
  background-color: #00c6b2;
}
.tag.tag--green {
  background-color: #43a047;
  color: #ffffff;
  border-color: #43a047;
}
.tag.tag--green:hover {
  background-color: #63be67;
}
.tag.tag--light-green {
  background-color: #7cb342;
  color: #ffffff;
  border-color: #7cb342;
}
.tag.tag--light-green:hover {
  background-color: #9ac86a;
}
.tag.tag--gray {
  background-color: #8c8c8c;
  color: #ffffff;
  border-color: #8c8c8c;
}
.tag.tag--gray:hover {
  background-color: #ababab;
}
.tag.tag--black {
  background-color: #3a3a3a;
  color: #ffffff;
  border-color: #3a3a3a;
}
.tag.tag--black:hover {
  background-color: #595959;
}
.tag.tag--primary {
  background-color: #282d4f;
  color: #ffffff;
  border-color: #282d4f;
}
.tag.tag--primary:hover {
  background-color: #3d4478;
}

.swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  display: inline-block;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
  position: relative;
  transition: 0.15s;
}
.swatch::after {
  position: absolute;
  content: "";
  border-width: 1px;
  border-style: solid;
  border-radius: 100%;
  width: 1rem;
  height: 1rem;
  left: 50%;
  top: 50%;
  transition: 0.15s;
  transform: translate(-50%, -50%);
}
.swatch:hover::after, .swatch.active::after {
  width: 1.25rem;
  height: 1.25rem;
}
.swatch.active, .swatch.active::after {
  border-radius: 3px;
}

.swatch--yellow {
  background-color: #fdd835;
}
.swatch--yellow:after {
  border-color: #fdd835;
}

.swatch--amber {
  background-color: #ffb300;
}
.swatch--amber:after {
  border-color: #ffb300;
}

.swatch--orange {
  background-color: #fb8c00;
}
.swatch--orange:after {
  border-color: #fb8c00;
}

.swatch--deep-orange {
  background-color: #f4511e;
}
.swatch--deep-orange:after {
  border-color: #f4511e;
}

.swatch--red {
  background-color: #e53935;
}
.swatch--red:after {
  border-color: #e53935;
}

.swatch--pink {
  background-color: #d81b60;
}
.swatch--pink:after {
  border-color: #d81b60;
}

.swatch--purple {
  background-color: #8e24aa;
}
.swatch--purple:after {
  border-color: #8e24aa;
}

.swatch--deep-purple {
  background-color: #5e35b1;
}
.swatch--deep-purple:after {
  border-color: #5e35b1;
}

.swatch--indigo {
  background-color: #3949ab;
}
.swatch--indigo:after {
  border-color: #3949ab;
}

.swatch--blue {
  background-color: #1e88e5;
}
.swatch--blue:after {
  border-color: #1e88e5;
}

.swatch--light-blue {
  background-color: #81d4fa;
}
.swatch--light-blue:after {
  border-color: #81d4fa;
}

.swatch--cyan {
  background-color: #00acc1;
}
.swatch--cyan:after {
  border-color: #00acc1;
}

.swatch--teal {
  background-color: #00897b;
}
.swatch--teal:after {
  border-color: #00897b;
}

.swatch--green {
  background-color: #43a047;
}
.swatch--green:after {
  border-color: #43a047;
}

.swatch--light-green {
  background-color: #7cb342;
}
.swatch--light-green:after {
  border-color: #7cb342;
}

.swatch--gray {
  background-color: #8c8c8c;
}
.swatch--gray:after {
  border-color: #8c8c8c;
}

.swatch--black {
  background-color: #3a3a3a;
}
.swatch--black:after {
  border-color: #3a3a3a;
}

.swatch--primary {
  background-color: #282d4f;
}
.swatch--primary:after {
  border-color: #282d4f;
}

.feedback-sub-head {
  margin-top: 1.5em !important;
}

.feedback-rating-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.feedback-rating-icon {
  width: 100%;
  filter: grayscale(1);
}

.feedback-rating-input {
  display: none;
}

.feedback-rating-label {
  padding: 1rem;
  border-radius: 100em;
  cursor: pointer;
  flex-basis: 20%;
}

.feedback-rating-input:checked + .feedback-rating-icon,
.feedback-rating-label:hover .feedback-rating-icon {
  filter: grayscale(0);
}

.feedback-category-checkbox {
  display: none !important;
}
.feedback-category-checkbox:checked + .feedback-category-label {
  background-color: #282d4f;
  color: #ffffff;
}
.feedback-category-checkbox:checked + .feedback-category--question {
  background-color: #1e88e5;
  color: #ffffff;
}
.feedback-category-checkbox:checked + .feedback-category--question:hover {
  background-color: rgba(30, 136, 229, 0.82);
}
.feedback-category-checkbox:checked + .feedback-category--compliment {
  background-color: #43a047;
  color: #ffffff;
}
.feedback-category-checkbox:checked + .feedback-category--compliment:hover {
  background-color: rgba(67, 160, 71, 0.82);
}
.feedback-category-checkbox:checked + .feedback-category--suggestion {
  background-color: #8e24aa;
  color: #ffffff;
}
.feedback-category-checkbox:checked + .feedback-category--suggestion:hover {
  background-color: rgba(142, 36, 170, 0.82);
}

.feedback-category-label {
  border: 2px solid transparent;
  display: inline-block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 100em;
}
.feedback-category-label.feedback-category--question {
  border-color: #1e88e5;
}
.feedback-category-label.feedback-category--question:hover {
  background-color: rgba(30, 136, 229, 0.15);
}
.feedback-category-label.feedback-category--compliment {
  border-color: #43a047;
}
.feedback-category-label.feedback-category--compliment:hover {
  background-color: rgba(67, 160, 71, 0.15);
}
.feedback-category-label.feedback-category--suggestion {
  border-color: #8e24aa;
}
.feedback-category-label.feedback-category--suggestion:hover {
  background-color: rgba(142, 36, 170, 0.15);
}

.feedback-textarea {
  margin-top: 1rem;
  min-height: 10rem;
}

.device-between {
  display: inline-block;
  margin: 0 1em;
}

/*# sourceMappingURL=feedback.css.map */