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

[ng-click] {
    cursor: pointer;
}

.backdrop {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='84' viewBox='0 0 126 84'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.17'%3E%3Cpath d='M126 83v1H0v-2h40V42H0v-2h40V0h2v40h40V0h2v40h40V0h2v83zm-2-1V42H84v40h40zM82 42H42v40h40V42zm-50-6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm96 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-42 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm30-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM20 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-42a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.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;
}

.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%;
}

.lobby-list {
  max-height: 300px;
  overflow-y: auto;
}

.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;
}
.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;
}