.card {
  margin: 10px;
  padding: 0px;
  border-width: 3px;
  border-style: outset;
  border-color: black;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.card.imagecard.done {
}

.card .back {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.card .back .text {
  padding: 5px;
}

.card .back .content {
  display: block;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: start;
  -moz-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.card .back .content .centered {
  display: block;
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.card.flipped {
  -webkit-transform: perspective(400px) translateZ(40px);
  transform: perspective(400px) translateZ(40px);
  z-index: 1;
}

.card.done .back {
}

.card.done {
  cursor: auto;
}

.cardtable {
  position: absolute;
}

.cardtable td {
  margin: 0px;
  padding: 0px;
}

/* 20 first Colors based upon https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/ but modified for black/white font readability*/

.card.done.pair_0 {
  background: none;
  background-color: #d6292b;
}
.card.done.pair_1 {
  background: none;
  background-color: #3cb44b;
}
.card.done.pair_2 {
  background: none;
  background-color: #ffe119;
}
.card.done.pair_3 {
  background: none;
  background-color: #4373e8;
}
.card.done.pair_4 {
  background: none;
  background-color: #f58231;
}
.card.done.pair_5 {
  background: none;
  background-color: #a14eb4;
}
.card.done.pair_6 {
  background: none;
  background-color: #42d4f4;
}
.card.done.pair_7 {
  background: none;
  background-color: #f032e6;
}
.card.done.pair_8 {
  background: none;
  background-color: #bfef45;
}
.card.done.pair_9 {
  background: none;
  background-color: #fabebe;
}
.card.done.pair_10 {
  background: none;
  background-color: #469990;
}
.card.done.pair_11 {
  background: none;
  background-color: #e6beff;
}
.card.done.pair_12 {
  background: none;
  background-color: #9a6324;
}
.card.done.pair_13 {
  background: none;
  background-color: #afeaf0;
}
.card.done.pair_14 {
  background: none;
  background-color: #b03030;
}
.card.done.pair_15 {
  background: none;
  background-color: #aaffb3;
}
.card.done.pair_16 {
  background: none;
  background-color: #808000;
}
.card.done.pair_17 {
  background: none;
  background-color: #ffd8b1;
}
.card.done.pair_18 {
  background: none;
  background-color: #30a0c5;
}
.card.done.pair_19 {
  background: none;
  background-color: #909090;
}
.card.done.pair_20 {
  background: none;
  background-color: #84a5c8;
}
.card.done.pair_21 {
  background: none;
  background-color: #92c691;
}
.card.done.pair_22 {
  background: none;
  background-color: #dfe7ba;
}
.card.done.pair_23 {
  background: none;
  background-color: #c5c1aa;
}
.card.done.pair_24 {
  background: none;
  background-color: #7171c6;
}
.card.done.pair_25 {
  background: none;
  background-color: #efa869;
}
.card.done.pair_26 {
  background: none;
  background-color: #e3d827;
}
.card.done.pair_27 {
  background: none;
  background-color: #d0a520;
}
.card.done.pair_28 {
  background: none;
  background-color: #b4cdcd;
}
.card.done.pair_29 {
  background: none;
  background-color: #8fdc8f;
}
.symbol {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 40px;
  height: 40px;
}

.speech_button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 32px;
  height: 32px;
}

.imagecard .speech_button {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.card.imagecard .back {
  position: absolute;
}

@keyframes pound {
  to {
    transform: scale(1.1);
  }
}

.speech_button.pound, .audio_card_button.pound {
  animation: pound 0.25s infinite alternate;
  animation-delay: 0.1s;
}

@media only screen and (max-height: 500px) {
  html:not(.ibw-platform-osx-ibooks) .card {
    margin: 2px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

  html:not(.ibw-platform-osx-ibooks) .symbol {
    width: 30px;
    height: 30px;
  }
}

@media only screen and (orientation: portrait) {
  html:not(.ibw-platform-osx-ibooks) .card {
    margin: 2px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
}


.card-content-small .audio_card_button {
  height: 48px;
  width: 48px;
}

.card-content-medium .audio_card_button { 
  height: 64px;
  width: 64px;
}

.card-content-large .audio_card_button {
  height: 96px;
  width: 96px;
}

.card-content-small .audio_card_button .bw-icon-music-play-2 {
  width: 48px;
  height: 48px;
  position: relative;
  left: -8px;
  top: -8px;
}

.card-content-medium .audio_card_button .bw-icon-music-play-2 {
  position: relative;
  left: -16px;
  top: -16px;
  font-size: 96px;
  height: 96px;
  width: 96px;
}

.card-content-large .audio_card_button .bw-icon-music-play-2 {
  font-size: 128px;
  height: 128px;
  width: 128px;
  position: relative;
  left: -16px;
  top: -16px;
}

.audio_card_container {
  height: 100%;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}