*, button, html, input, select, textarea {
    font-family: 'stnicholas', 'Bungee', cursive;
    font-weight: bold;
}

[ng-click] {
    cursor: pointer;
}
.md-required:after {
  content: " *";
  font-size: 13px;
  vertical-align: top;
  color: rgb(221,44,0);
}

.backdrop {
  background-color: #ffffef;
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='16' viewBox='0 0 84 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM30 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM10 0h2v16h-2V0zm6 0h4v16h-4V0zM2 0h4v16H2V0zm50 0h2v16h-2V0zM38 0h2v16h-2V0zm28 0h2v16h-2V0zm-8 0h6v16h-6V0zM42 0h6v16h-6V0z' fill='%23ff0000' fill-opacity='0.17' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.pietje-radio {
  display: inline-block;
}
.pietje {
  border-radius: 50%;
  box-sizing: content-box;
  margin-bottom: 8px;
  margin-right: 16px;
  margin-top: 8px;
  flex: none;
  height: 60px;
  width: 60px;
}

.ub-40 {
    margin: 40px 0;
}

.p { padding: 8px; }
.pl { padding-left: 8px; }
.pt { padding-top: 8px; }
.pr { padding-right: 8px; }
.pb { padding-bottom: 8px; }

.success {
  color: green;
}
.danger {
  color: red;
}
.golden {
  color: #f5ce00;
}
.diamond {
  color: #0070d1;
}
.platinum {
  color: #b9f2ff;
}


.invisible {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.create-button {
  position: absolute;
  right: 0;
  top: 0;
}

.fixed-token-copy {
  left: 10px;
  position: fixed;
  top: 0;
}

.lobby .md-title { line-height: 24px; }

.fixed-sound {
  position: fixed;
  right: 10px;
  top: 0;
}

.display-contents {
    display: contents;
}

.progress-bar {
    bottom: 10px;
    height: 46px;
    left: 0;
    position: absolute;
    width: 100%;
}

.play--game-title {
  position: absolute;
  text-align: center;
  top:0;
}

.float-left { float: left; }
.float-right { float: right; }

md-checkbox .md-label {
    margin-top: 0;
}
md-slider-container span {
    line-height: 20px;
}
md-icon.md-default-theme, md-icon {
    color: black;
}
md-content {
  overflow-x: hidden;
}

md-progress-linear .md-container {
    height: 15px;
}

md-progress-linear .md-container .md-bar {
    height: 15px;
}


.selectable-option {
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
  margin: 8px;
  padding: 8px;
}

.selected-answer {
  background-color: rgb(57,73,171);
  color: white;
}

.encouragement {
  animation-direction: alternate;
  bottom: 10%;
  font-size: 48px;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.animate__fill-forwards {
  animation-fill-mode: forwards;
}
.animate__fill-backwards {
  animation-fill-mode: backwards;
}

.play-box.correct > * > *:before,
.play-box.incorrect > * > *:before,
.play-box.correct > * > *:after,
.play-box.incorrect > * > *:after {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.play-box.correct > * > * > *:before,
.play-box.incorrect > * > * > *:before
.play-box.correct > * > * > *:after,
.play-box.incorrect > * > * > *:before {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.play-box.correct > * > *:before,
.play-box.correct > * > *:after,
.play-box.correct > * > * > *:before,
.play-box.correct > * > * > *:after {
  background-color: green;
}

.play-box.incorrect > * > *:before,
.play-box.incorrect > * > *:after,
.play-box.incorrect > * > * > *:before,
.play-box.incorrect > * > * > *:after {
  background-color: red;
}

.play-box.correct .md-primary,
.play-box.correct .md-primary:hover,
.play-box.correct .md-primary:focus,
.play-box.correct .selected-answer {
  background-color: green !important;
}

.play-box.incorrect .md-primary,
.play-box.incorrect .md-primary:hover,
.play-box.incorrect .md-primary:focus,
.play-box.incorrect .selected-answer {
  background-color: red !important;
}

/** PLAYBOX JUNK **/
.play-box {
  position: relative;
  display: inline-block;
  padding: 0.5em 2em;
  overflow: hidden;
  min-height: 500px;
}
.play-box:before, .play-box:after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
}
.play-box:before {
  top: 0;
}
.play-box:after {
  bottom: 0;
}
.play-box > *:before, .play-box > *:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
}
.play-box > *:before {
  left: 0;
}
.play-box > *:after {
  right: 0;
}

.play-box > * > *:before {
  top: 0;
  -webkit-transform: translate3d(-105%, 0, 0);
          transform: translate3d(-105%, 0, 0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.play-box > * > *:after {
  bottom: 0;
  -webkit-transform: translate3d(105%, 0, 0);
          transform: translate3d(105%, 0, 0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.play-box > * > * > *:before {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);  /* was 0, 105%, 0 */
          transform: translate3d(0, 0, 0);  /* was 0, 105%, 0 */
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.play-box > * > * > *:after {
  right: 0;
  -webkit-transform: translate3d(0, 0, 0); /* was 0, -105%, 0 */
          transform: translate3d(0, 0, 0);  /* was 0, -105%, 0 */
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.play-box > * > *:before, .play-box > * > *:after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 9;
  height: 2px;
  width: 100%;
}
.play-box > * > * > *:before, .play-box > * > * > *:after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100%;
  width: 2px;
}

.player-card-content {
  min-height: 200px;
}

.cards {
  width: 100%;
  height: 200px;
  position: relative;
}
.cards .card-closed, .cards .card-not-open {
  width: 100%;
  height: 100%;
  background-image: url(/img/kaartje.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate3d(0.1, 0.1, 0.7, 319deg);
  transform-origin: center;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cards .card-closed:nth-child(2) {
  left: 10px;
}
.cards .card-closed:nth-child(3) {
  left: 20px;
}
.cards .card-not-open {
  left: 20px;
  transform-style: preserve-3d;
}

.cards .card-not-open .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.cards .card-not-open .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cards .card-not-open.select {
  animation: setCardUpright 0.7s ease-out forwards;
}

.card-content {
  position: relative;
}

.card-content .card-content-image {
  position: absolute;
  left: 50%;
  height: 200px;
  transform: translate(-50%, 0%);
}
.card-content .card-content-text {
  position: absolute;
  left: 50%;
  height: 200px;
  transform: translate(-50%, 0%);
  padding-top: 44px;
  width: 85px;
  font-size: 0.78em;
  font-style: italic;
}
@keyframes setCardUpright {
  to {
    transform: rotateY(0deg) scale(1.5);
  }
}

/*@-webkit-keyframes flipCard {*/
/*  to {*/
/*    transform: rotateX(-180deg);*/
/*  }*/
/*}*/

.board-pietje {
  font-size: 24px;
  margin: 8px 0;
}
.board-pietje:not(:last-of-type) {
  border-bottom: 1px dotted black;
}

.custom-card-box {
  border: dotted 1px black;
  min-height: 70px;
}