.flipper {
  display: inline-block;
}
.flip_squeeze {
  transform: scaleX(0);
}
.flip_changed.green {
  color: #0a0 !important;
}
.flip_changed.white {
  color: #fff !important;
}

.flip_ended {

}

.feedback {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.feedback .letter {
  display: inline-block;
  position: relative;
}
.feedback .match {
  color:#080;
}
.feedback .delete {
  color:#f00;
  text-decoration: line-through;
}
.feedback .missing {
  color:#f00;
  margin: 0 1px;
}
.feedback .match_start .missing {
  color:black;
}
.feedback .swap {
  color:#f00;
  text-decoration: line-through;
}
.feedback .delete.box_style,
.feedback .swap.box_style {
	padding: 0 2px;
	background: #ff8484;
	color: #fff;
	text-decoration: none; 
}
.feedback.box_style .delete,
.feedback.box_style .swap {
	padding: 0 2px;
	background: #ff8484;
	color: #fff;
	text-decoration: none; 
}
/* wrong accent color is orange by default */
.feedback .soft_swap {
  color:#f70;
}
/* user change wrong accent color to red */
.feedback.soft_wrap_red .soft_swap {
	padding: 0 2px;
  color:#fff;
  background:#f70;
	opacity: 0.65;
}
.feedback .case_swap {
	color:#d0f;
}

.correction {
  cursor: pointer;
  position: relative;
}
.correction.no_type {
  cursor: default;
}
.correction .letter.match {
  cursor: default;
}
.correction.insert:not(.auto_reveal) .text {
  color: rgba(0,0,0,0);
  background-color: #ddd;
}
.correction.fuzzy_match:not(.match_start) {
  border-radius: 2px;
  border-bottom: 1px dotted #d77;
}
.correction.fuzzy_match.match_start {
  border: none;
}
.chinese .feedback .soft_swap {
  color: #564433;
}

.feedback .insert.auto_reveal {
  color:#555;
}
.feedback .insert .revealed_character {
	background: #f1f1f1;
	color: #000;
}
.feedback .fuzzy_match .auto_reveal {
  color: #ABABAB;
}
.flipper_container {
    display: inline-block;
}
.flipper_container .flipper {
    bottom: -4px;
    display: inline-block;
    position: relative;
    transition: transform 1s ease-in-out;
    -webkit-transition: -webkit-transform 1s ease-in-out;
}
.flipper_container.flipped .flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.flipper_container .front,
.flipper_container .back {
    -webkit-transition: opacity 0.1s 0.5s ease-in-out;
    -webkit-transform: rotateY(0deg);
    transition: opacity 0.1s 0.5s ease-in-out;
    transform: rotateY(0deg);
    left: 0;
    position: absolute;
    top: 0;
    display: inline-block;
}
.flipper_container.flipped .front,
.flipper_container .back {
    opacity: 0;
}
.flipper_container.flipped .back,
.flipper_container .front {
    opacity: 1;
}
.flipper_container .front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flipper_container .back {
    -webkit-transform: rotateY(-180deg);
    color:#080;
    transform: rotateY(-180deg);
}

.feedback .hint-letter .letter.missing,
.feedback .hint-word .correction.missing {
  background-color: #ff7;
}
.feedback .hint-letter .letter.missing:hover,
.feedback .hint-word .correction.missing:hover {
  background-color: #7ff;
}