@import "/Content/font-awesome.min.css";
#menu #achievements.section > .scroller,
#menu #achievement.section > .scroller,
#achievement-toast > .scroller {
  padding: 20px 0;
}
#menu #achievements.section > .scroller h2,
#menu #achievement.section > .scroller h2,
#achievement-toast > .scroller h2 {
  padding-bottom: 5px;
}
#menu #achievements.section > .scroller h2,
#menu #achievement.section > .scroller h2,
#achievement-toast > .scroller h2,
#menu #achievements.section > .scroller p,
#menu #achievement.section > .scroller p,
#achievement-toast > .scroller p {
  margin-left: 20px;
  margin-right: 20px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #achievements.section > .scroller,
  #menu #achievement.section > .scroller,
  #achievement-toast > .scroller {
    padding: 10px 0;
  }
  #menu #achievements.section > .scroller h2,
  #menu #achievement.section > .scroller h2,
  #achievement-toast > .scroller h2,
  #menu #achievements.section > .scroller p,
  #menu #achievement.section > .scroller p,
  #achievement-toast > .scroller p {
    margin-left: 10px;
    margin-right: 10px;
  }
}
#menu #achievements.section ul.items,
#menu #achievement.section ul.items,
#achievement-toast ul.items {
  padding: 0;
  text-align: left;
}
#menu #achievements.section ul.items li.item,
#menu #achievement.section ul.items li.item,
#achievement-toast ul.items li.item {
  display: block;
  padding: 3px 30px 4px 70px;
  position: relative;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #achievements.section ul.items li.item,
  #menu #achievement.section ul.items li.item,
  #achievement-toast ul.items li.item {
    padding: 3px 20px 4px 60px;
  }
}
#menu #achievements.section ul.items li.item.clickable,
#menu #achievement.section ul.items li.item.clickable,
#achievement-toast ul.items li.item.clickable {
  cursor: pointer;
}
#menu #achievements.section ul.items li.item.clickable:hover,
#menu #achievement.section ul.items li.item.clickable:hover,
#achievement-toast ul.items li.item.clickable:hover {
  background-color: #fff;
}
#menu #achievements.section ul.items li.item .icon,
#menu #achievement.section ul.items li.item .icon,
#achievement-toast ul.items li.item .icon {
  background-color: #ccc;
  border-radius: 5px;
  color: #999;
  display: block;
  height: 40px;
  left: 20px;
  line-height: 40px;
  position: absolute;
  text-align: center;
  top: 8px;
  width: 40px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #achievements.section ul.items li.item .icon,
  #menu #achievement.section ul.items li.item .icon,
  #achievement-toast ul.items li.item .icon {
    left: 10px;
  }
}
#menu #achievements.section ul.items li.item .icon.active,
#menu #achievement.section ul.items li.item .icon.active,
#achievement-toast ul.items li.item .icon.active {
  background-color: #005a00;
  color: #fff;
}
body[data-board-color="blue"] #menu #achievements.section ul.items li.item .icon.active,
body[data-board-color="blue"] #menu #achievement.section ul.items li.item .icon.active,
body[data-board-color="blue"] #achievement-toast ul.items li.item .icon.active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #menu #achievements.section ul.items li.item .icon.active,
body[data-board-color="red"] #menu #achievement.section ul.items li.item .icon.active,
body[data-board-color="red"] #achievement-toast ul.items li.item .icon.active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #menu #achievements.section ul.items li.item .icon.active,
body[data-board-color="charcoal"] #menu #achievement.section ul.items li.item .icon.active,
body[data-board-color="charcoal"] #achievement-toast ul.items li.item .icon.active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #menu #achievements.section ul.items li.item .icon.active,
body[data-board-color="black"] #menu #achievement.section ul.items li.item .icon.active,
body[data-board-color="black"] #achievement-toast ul.items li.item .icon.active {
  background-color: black;
}
body[data-board-color="white"] #menu #achievements.section ul.items li.item .icon.active,
body[data-board-color="white"] #menu #achievement.section ul.items li.item .icon.active,
body[data-board-color="white"] #achievement-toast ul.items li.item .icon.active {
  background-color: white;
}
#menu #achievements.section ul.items li.item .icon.active.last,
#menu #achievement.section ul.items li.item .icon.active.last,
#achievement-toast ul.items li.item .icon.active.last {
  color: gold;
}
#menu #achievements.section ul.items li.item .icon .fa,
#menu #achievement.section ul.items li.item .icon .fa,
#achievement-toast ul.items li.item .icon .fa {
  font-size: 30px;
  line-height: 40px;
}
#menu #achievements.section ul.items li.item .icon:after,
#menu #achievement.section ul.items li.item .icon:after,
#achievement-toast ul.items li.item .icon:after {
  color: #ccc;
  content: attr(data-level);
  font-size: 12px;
  font-weight: bold;
  left: 0;
  line-height: 28px;
  position: absolute;
  top: 0;
  width: 100%;
}
#menu #achievements.section ul.items li.item .icon.active:after,
#menu #achievement.section ul.items li.item .icon.active:after,
#achievement-toast ul.items li.item .icon.active:after {
  color: #005a00;
}
body[data-board-color="blue"] #menu #achievements.section ul.items li.item .icon.active:after,
body[data-board-color="blue"] #menu #achievement.section ul.items li.item .icon.active:after,
body[data-board-color="blue"] #achievement-toast ul.items li.item .icon.active:after {
  color: #0a3b76;
}
body[data-board-color="red"] #menu #achievements.section ul.items li.item .icon.active:after,
body[data-board-color="red"] #menu #achievement.section ul.items li.item .icon.active:after,
body[data-board-color="red"] #achievement-toast ul.items li.item .icon.active:after {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu #achievements.section ul.items li.item .icon.active:after,
body[data-board-color="charcoal"] #menu #achievement.section ul.items li.item .icon.active:after,
body[data-board-color="charcoal"] #achievement-toast ul.items li.item .icon.active:after {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu #achievements.section ul.items li.item .icon.active:after,
body[data-board-color="black"] #menu #achievement.section ul.items li.item .icon.active:after,
body[data-board-color="black"] #achievement-toast ul.items li.item .icon.active:after {
  color: black;
}
body[data-board-color="white"] #menu #achievements.section ul.items li.item .icon.active:after,
body[data-board-color="white"] #menu #achievement.section ul.items li.item .icon.active:after,
body[data-board-color="white"] #achievement-toast ul.items li.item .icon.active:after {
  color: white;
}
#menu #achievements.section ul.items li.item .icon[data-level='0']:after,
#menu #achievement.section ul.items li.item .icon[data-level='0']:after,
#achievement-toast ul.items li.item .icon[data-level='0']:after,
#menu #achievements.section ul.items li.item .icon.last[data-level='1']:after,
#menu #achievement.section ul.items li.item .icon.last[data-level='1']:after,
#achievement-toast ul.items li.item .icon.last[data-level='1']:after {
  content: "";
}
#menu #achievements.section ul.items li.item .value.inactive,
#menu #achievement.section ul.items li.item .value.inactive,
#achievement-toast ul.items li.item .value.inactive {
  color: #999;
}
#menu #achievements.section ul.items li.item .info,
#menu #achievement.section ul.items li.item .info,
#achievement-toast ul.items li.item .info {
  clear: both;
  font-size: 12px;
}
#menu #achievements.section ul.items li.item .track,
#menu #achievement.section ul.items li.item .track,
#achievement-toast ul.items li.item .track {
  margin: 3px 0;
}
#achievement-toast {
  color: #004100;
}
body[data-board-color="blue"] #achievement-toast {
  color: #082f5e;
}
body[data-board-color="red"] #achievement-toast {
  color: #891111;
}
body[data-board-color="charcoal"] #achievement-toast {
  color: #3e3e3e;
}
#achievement-toast ul.items {
  margin: 0;
}
#achievement-toast ul.items li.item {
  margin: 0;
}
#ads {
  background-color: #000;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
#ads.request {
  display: block;
  visibility: visible;
}
#ads.request[hidden] {
  visibility: hidden;
}
@media (min-width: 768px) and (min-height: 480px) {
  #ads {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
#ads .wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) and (min-height: 480px) {
  #ads .wrapper {
    height: 360px;
    width: 640px;
  }
}
#ads .wrapper .footer {
  color: #fff;
  left: 0;
  padding-left: 8px;
  position: absolute;
  right: 0;
  top: 100%;
}
#ads .wrapper .footer button {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  float: right;
  min-width: 32px;
  padding: 0 8px;
}
#ads .wrapper .footer button.mute {
  padding-left: 10px;
  text-align: left;
}
#ads .wrapper video {
  height: 100%;
  width: 100%;
}
#ads .wrapper .content {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.trickster-tip-root {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.trickster-tip-root .label {
  color: #ccc;
  position: absolute;
  left: 0;
  top: -20px;
}
.trickster-tip-root .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.trickster-tip-root .dismiss {
  background-color: #000;
  border: 2px solid #777;
  border-radius: 50%;
  display: block;
  font-size: 22px;
  height: 34px;
  line-height: 22px;
  min-width: 0;
  min-height: 0;
  opacity: 1;
  padding: 0;
  position: absolute;
  right: -16px;
  text-align: center;
  top: -16px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  width: 34px;
}
.trickster-tip-root .dismiss[hidden] {
  display: block;
  opacity: 0;
}
.trickster-tip-root .dismiss:hover:not(:disabled) {
  background-color: #333;
}
.trickster-tip-root a[href] img {
  border: 2px solid #777;
  border-radius: 10px;
}
.alert {
  background-color: rgba(0, 0, 0, 0.5);
  color: black;
  height: 100%;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  width: 100%;
  z-index: 0;
}
.alert[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
.alert form {
  background-color: white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  left: 0;
  padding: 20px;
  position: absolute;
  top: 45%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.alert form a {
  color: #005a00;
  text-decoration: underline;
}
body[data-board-color="blue"] .alert form a {
  color: #0a3b76;
}
body[data-board-color="red"] .alert form a {
  color: #a01414;
}
body[data-board-color="charcoal"] .alert form a {
  color: #4b4b4b;
}
body[data-board-color="black"] .alert form a {
  color: black;
}
body[data-board-color="white"] .alert form a {
  color: white;
}
.alert form h1,
.alert form p,
.alert form .option-and-actions {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}
.alert form h1 {
  font-size: 28px;
}
@media (max-width: 479px), (max-height: 479px) {
  .alert form h1 {
    font-size: 24px;
  }
}
.alert form p {
  font-size: 16px;
  white-space: pre-line;
}
@media (max-width: 479px), (max-height: 479px) {
  .alert form p {
    font-size: 14px;
  }
}
.alert form p .sign-up-nag p {
  margin: 0;
}
.alert form p .sign-up-nag p:nth-child(2) {
  margin-top: 0.75em;
}
.alert form .save-game-cb-wrapper {
  display: block;
  padding-top: 1em;
  padding-left: 2em;
  font-size: 85%;
}
.alert form .save-game-cb-wrapper input[type=checkbox] {
  margin-right: 4px;
}
.alert form .option-and-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (min-width: 480px) {
  .alert form .option-and-actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.alert form .option-and-actions .alert-option {
  display: inline-block;
}
.alert form .option-and-actions .alert-option:empty {
  display: none;
}
@media (min-width: 480px) {
  .alert form .option-and-actions .alert-option {
    margin-bottom: 1em;
  }
}
.alert form .option-and-actions .alert-option input[type=checkbox] {
  border-color: #005a00;
  border-width: 1px;
  border-style: solid;
  width: 18px;
  height: 18px;
  position: relative;
  top: 2px;
  margin-right: 0.5em;
}
body[data-board-color="blue"] .alert form .option-and-actions .alert-option input[type=checkbox] {
  border-color: #0a3b76;
}
body[data-board-color="red"] .alert form .option-and-actions .alert-option input[type=checkbox] {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .alert form .option-and-actions .alert-option input[type=checkbox] {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .alert form .option-and-actions .alert-option input[type=checkbox] {
  border-color: black;
}
body[data-board-color="white"] .alert form .option-and-actions .alert-option input[type=checkbox] {
  border-color: white;
}
.alert form .option-and-actions .actions {
  display: inline-block;
  text-align: right;
}
.alert form .option-and-actions .actions button {
  margin-left: 1em;
}
@media (max-width: 480px) {
  .alert form .option-and-actions .actions {
    text-align: center;
    width: 100%;
  }
  .alert form .option-and-actions .actions button {
    min-width: 75%;
    margin-left: 0;
    margin-top: 1em;
  }
}
.alert form.alt-style {
  width: 90%;
  left: 5%;
  border-radius: 15px;
}
@media (min-width: 480px) {
  .alert form.alt-style {
    width: 80%;
    left: 10%;
  }
}
.alert button {
  background-color: #005a00;
  border-color: #005a00;
  color: white;
}
body[data-board-color="blue"] .alert button {
  background-color: #0a3b76;
}
body[data-board-color="red"] .alert button {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .alert button {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .alert button {
  background-color: black;
}
body[data-board-color="white"] .alert button {
  background-color: white;
}
body[data-board-color="blue"] .alert button {
  border-color: #0a3b76;
}
body[data-board-color="red"] .alert button {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .alert button {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .alert button {
  border-color: black;
}
body[data-board-color="white"] .alert button {
  border-color: white;
}
.alert button.dialog-button.cancel,
.alert button.dialog-button[data-action="cancel"] {
  background-color: rgba(0, 0, 0, 0);
  color: #004100;
}
body[data-board-color="blue"] .alert button.dialog-button.cancel,
body[data-board-color="blue"] .alert button.dialog-button[data-action="cancel"] {
  color: #082f5e;
}
body[data-board-color="red"] .alert button.dialog-button.cancel,
body[data-board-color="red"] .alert button.dialog-button[data-action="cancel"] {
  color: #891111;
}
body[data-board-color="charcoal"] .alert button.dialog-button.cancel,
body[data-board-color="charcoal"] .alert button.dialog-button[data-action="cancel"] {
  color: #3e3e3e;
}
.alert button:focus:not(:disabled),
.alert button:hover:not(:disabled) {
  background-color: #8bce8b;
  color: #005a00;
  outline: none;
}
body[data-board-color="blue"] .alert button:focus:not(:disabled),
body[data-board-color="blue"] .alert button:hover:not(:disabled) {
  background-color: #b0becf;
}
body[data-board-color="red"] .alert button:focus:not(:disabled),
body[data-board-color="red"] .alert button:hover:not(:disabled) {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .alert button:focus:not(:disabled),
body[data-board-color="charcoal"] .alert button:hover:not(:disabled) {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .alert button:focus:not(:disabled),
body[data-board-color="black"] .alert button:hover:not(:disabled) {
  background-color: black;
}
body[data-board-color="white"] .alert button:focus:not(:disabled),
body[data-board-color="white"] .alert button:hover:not(:disabled) {
  background-color: white;
}
body[data-board-color="blue"] .alert button:focus:not(:disabled),
body[data-board-color="blue"] .alert button:hover:not(:disabled) {
  color: #0a3b76;
}
body[data-board-color="red"] .alert button:focus:not(:disabled),
body[data-board-color="red"] .alert button:hover:not(:disabled) {
  color: #a01414;
}
body[data-board-color="charcoal"] .alert button:focus:not(:disabled),
body[data-board-color="charcoal"] .alert button:hover:not(:disabled) {
  color: #4b4b4b;
}
body[data-board-color="black"] .alert button:focus:not(:disabled),
body[data-board-color="black"] .alert button:hover:not(:disabled) {
  color: black;
}
body[data-board-color="white"] .alert button:focus:not(:disabled),
body[data-board-color="white"] .alert button:hover:not(:disabled) {
  color: white;
}
.alert button:focus:not(:disabled):active,
.alert button:hover:not(:disabled):active {
  color: #005a00;
  background-color: white !important;
}
body[data-board-color="blue"] .alert button:focus:not(:disabled):active,
body[data-board-color="blue"] .alert button:hover:not(:disabled):active {
  color: #0a3b76;
}
body[data-board-color="red"] .alert button:focus:not(:disabled):active,
body[data-board-color="red"] .alert button:hover:not(:disabled):active {
  color: #a01414;
}
body[data-board-color="charcoal"] .alert button:focus:not(:disabled):active,
body[data-board-color="charcoal"] .alert button:hover:not(:disabled):active {
  color: #4b4b4b;
}
body[data-board-color="black"] .alert button:focus:not(:disabled):active,
body[data-board-color="black"] .alert button:hover:not(:disabled):active {
  color: black;
}
body[data-board-color="white"] .alert button:focus:not(:disabled):active,
body[data-board-color="white"] .alert button:hover:not(:disabled):active {
  color: white;
}
.alert button:disabled {
  border-color: #005a00;
  opacity: 0.5;
}
body[data-board-color="blue"] .alert button:disabled {
  border-color: #0a3b76;
}
body[data-board-color="red"] .alert button:disabled {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .alert button:disabled {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .alert button:disabled {
  border-color: black;
}
body[data-board-color="white"] .alert button:disabled {
  border-color: white;
}
#game #game-messages .bidding-box.message {
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 296px;
}
#game #game-messages .bidding-box.message.wide {
  width: 340px;
}
#game #game-messages .bidding-box.message.wide #bid-actions,
#game #game-messages .bidding-box.message.wide #bid-scroller {
  max-width: 340px;
}
[data-high-visibility]#game #game-messages .bidding-box.message {
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}
@media (max-width: 479px), (max-height: 479px) {
  #game #game-messages .bidding-box.message {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  [data-high-visibility]#game #game-messages .bidding-box.message {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
#game #game-messages .bidding-box.message button.scroll {
  display: block;
}
.bidding-box #bid-actions,
.bidding-box #bid-scroller {
  max-width: 280px;
  padding: 10px 10px 10px 0;
}
.bidding-box #bid-actions .alert-text-wrapper,
.bidding-box #bid-scroller .alert-text-wrapper {
  float: left;
  position: relative;
}
.bidding-box #bid-actions .alert-text-wrapper .alert-text,
.bidding-box #bid-scroller .alert-text-wrapper .alert-text {
  border: 1px solid #0066ff;
  border-radius: 9px;
  -webkit-box-shadow: -1px -1px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: -1px -1px 6px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 80px;
  font-size: 16px;
  left: 0;
  opacity: 1;
  overflow-y: hidden;
  padding: 4px 8px;
  position: absolute;
  resize: none;
  top: 45px;
  width: 280px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}
.rtl.bidding-box #bid-actions .alert-text-wrapper .alert-text,
.rtl.bidding-box #bid-scroller .alert-text-wrapper .alert-text {
  -webkit-box-shadow: 1px -1px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: 1px -1px 6px 2px rgba(0, 0, 0, 0.4);
}
.bidding-box #bid-actions .alert-text-wrapper .alert-text:focus,
.bidding-box #bid-scroller .alert-text-wrapper .alert-text:focus {
  outline: none;
}
.bidding-box #bid-actions .alert-text-wrapper[hidden],
.bidding-box #bid-scroller .alert-text-wrapper[hidden] {
  display: block;
  visibility: visible;
}
.bidding-box #bid-actions .alert-text-wrapper[hidden] .alert-text,
.bidding-box #bid-scroller .alert-text-wrapper[hidden] .alert-text {
  opacity: 0;
  -webkit-transform: translateY(-40px);
          transform: translateY(-40px);
  -webkit-transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, transform, visibility;
  transition-property: opacity, transform, visibility, -webkit-transform;
  visibility: hidden;
}
.bidding-box #bid-actions .alert-text-wrapper:not([hidden]) + button[data-text="A"],
.bidding-box #bid-scroller .alert-text-wrapper:not([hidden]) + button[data-text="A"] {
  background-color: #fff;
  border-color: #0066ff;
  color: #0066ff;
}
.bidding-box #bid-actions .bid-row,
.bidding-box #bid-scroller .bid-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 6px;
  /* Fix Pinochle since the backend doesn't yet set the bid level correctly */
}
body[data-game-code="Pinochle"] .bidding-box #bid-actions .bid-row,
body[data-game-code="Pinochle"] .bidding-box #bid-scroller .bid-row {
  display: block;
  padding-right: 0;
}
.bidding-box #bid-actions button,
.bidding-box #bid-scroller button {
  -webkit-box-shadow: -1px -1px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: -1px -1px 6px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.rtl.bidding-box #bid-actions button,
.rtl.bidding-box #bid-scroller button {
  -webkit-box-shadow: 1px -1px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: 1px -1px 6px 2px rgba(0, 0, 0, 0.4);
}
.bidding-box #bid-actions button.suggested,
.bidding-box #bid-scroller button.suggested {
  -webkit-box-shadow: 0 0 6px 4px rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 6px 4px rgba(255, 255, 255, 0.5);
}
.bidding-box #bid-actions button.with-arrow,
.bidding-box #bid-scroller button.with-arrow {
  font-size: 30px;
  line-height: 1;
  width: auto;
}
.bidding-box #bid-actions button[data-size="1"],
.bidding-box #bid-scroller button[data-size="1"],
.bidding-box #bid-actions button[data-size="2"],
.bidding-box #bid-scroller button[data-size="2"],
.bidding-box #bid-actions button[data-size="3"],
.bidding-box #bid-scroller button[data-size="3"] {
  font-size: 30px;
}
.bidding-box #bid-actions button[data-size="3"][data-suit=""],
.bidding-box #bid-scroller button[data-size="3"][data-suit=""] {
  font-size: 28px;
  padding-right: 6px;
}
.bidding-box #bid-actions button[data-size="4"][data-suit=""][data-alldigits="true"],
.bidding-box #bid-scroller button[data-size="4"][data-suit=""][data-alldigits="true"] {
  font-size: 24px;
  padding-right: 6px;
}
.bidding-box #bid-actions button[data-text="A"],
.bidding-box #bid-scroller button[data-text="A"] {
  background-color: #0066ff;
  color: #fff;
  float: left;
  min-width: 80px;
  min-width: 45px;
}
.bidding-box #bid-actions button[data-text="A"]:hover,
.bidding-box #bid-scroller button[data-text="A"]:hover {
  background-color: #1a75ff;
}
.bidding-box #bid-actions button[data-text="A"]:disabled,
.bidding-box #bid-scroller button[data-text="A"]:disabled {
  background-color: #777;
  border-color: #ccc;
  color: #ccc;
  opacity: 0.75;
}
.bidding-box #bid-actions button[data-text="A"]:disabled.hover,
.bidding-box #bid-scroller button[data-text="A"]:disabled.hover {
  background-color: #777;
}
.bidding-box #bid-actions button[data-text="A"] + [data-text="X"],
.bidding-box #bid-scroller button[data-text="A"] + [data-text="X"],
.bidding-box #bid-actions button[data-text="A"] + [data-text="XX"],
.bidding-box #bid-scroller button[data-text="A"] + [data-text="XX"] {
  min-width: 45px;
  padding: 0;
}
.bidding-box #bid-actions button[data-text="A"] ~ [data-text="Pass"],
.bidding-box #bid-scroller button[data-text="A"] ~ [data-text="Pass"] {
  min-width: 90px;
}
.bidding-box #bid-actions button[data-text$="Misère"],
.bidding-box #bid-scroller button[data-text$="Misère"],
.bidding-box #bid-actions button[data-text$="Nullo"],
.bidding-box #bid-scroller button[data-text$="Nullo"] {
  background-color: #0066ff;
  color: #fff;
  float: left;
  min-width: 80px;
}
.bidding-box #bid-actions button[data-text$="Misère"]:hover,
.bidding-box #bid-scroller button[data-text$="Misère"]:hover,
.bidding-box #bid-actions button[data-text$="Nullo"]:hover,
.bidding-box #bid-scroller button[data-text$="Nullo"]:hover {
  background-color: #1a75ff;
}
.bidding-box #bid-actions button[data-text$="Misère"]:disabled,
.bidding-box #bid-scroller button[data-text$="Misère"]:disabled,
.bidding-box #bid-actions button[data-text$="Nullo"]:disabled,
.bidding-box #bid-scroller button[data-text$="Nullo"]:disabled {
  background-color: #777;
  border-color: #ccc;
  color: #ccc;
  opacity: 0.75;
}
.bidding-box #bid-actions button[data-text$="Misère"]:disabled.hover,
.bidding-box #bid-scroller button[data-text$="Misère"]:disabled.hover,
.bidding-box #bid-actions button[data-text$="Nullo"]:disabled.hover,
.bidding-box #bid-scroller button[data-text$="Nullo"]:disabled.hover {
  background-color: #777;
}
.bidding-box #bid-actions button[data-text="Pass"],
.bidding-box #bid-scroller button[data-text="Pass"] {
  background-color: #008000;
  color: #fff;
  float: left;
  min-width: 80px;
  float: right;
}
.bidding-box #bid-actions button[data-text="Pass"]:hover,
.bidding-box #bid-scroller button[data-text="Pass"]:hover {
  background-color: #009a00;
}
.bidding-box #bid-actions button[data-text="Pass"]:disabled,
.bidding-box #bid-scroller button[data-text="Pass"]:disabled {
  background-color: #777;
  border-color: #ccc;
  color: #ccc;
  opacity: 0.75;
}
.bidding-box #bid-actions button[data-text="Pass"]:disabled.hover,
.bidding-box #bid-scroller button[data-text="Pass"]:disabled.hover {
  background-color: #777;
}
.bidding-box #bid-actions button[data-text="Pass with Help"],
.bidding-box #bid-scroller button[data-text="Pass with Help"] {
  background-color: #0066ff;
  color: #fff;
  float: left;
  min-width: 80px;
  font-size: 0;
  padding-bottom: 2px;
}
.bidding-box #bid-actions button[data-text="Pass with Help"]:hover,
.bidding-box #bid-scroller button[data-text="Pass with Help"]:hover {
  background-color: #1a75ff;
}
.bidding-box #bid-actions button[data-text="Pass with Help"]:disabled,
.bidding-box #bid-scroller button[data-text="Pass with Help"]:disabled {
  background-color: #777;
  border-color: #ccc;
  color: #ccc;
  opacity: 0.75;
}
.bidding-box #bid-actions button[data-text="Pass with Help"]:disabled.hover,
.bidding-box #bid-scroller button[data-text="Pass with Help"]:disabled.hover {
  background-color: #777;
}
.bidding-box #bid-actions button[data-text="Pass with Help"]:before,
.bidding-box #bid-scroller button[data-text="Pass with Help"]:before {
  content: "Pass";
  font-size: 20px;
}
.bidding-box #bid-actions button[data-text="Pass with Help"]:after,
.bidding-box #bid-scroller button[data-text="Pass with Help"]:after {
  content: "w/ Help";
  display: block;
  font-size: 11px;
}
.bidding-box #bid-actions button[data-text="X"],
.bidding-box #bid-scroller button[data-text="X"],
.bidding-box #bid-actions button[data-text="Misdeal"],
.bidding-box #bid-scroller button[data-text="Misdeal"] {
  background-color: #cd0000;
  color: #fff;
  float: left;
  min-width: 80px;
}
.bidding-box #bid-actions button[data-text="X"]:hover,
.bidding-box #bid-scroller button[data-text="X"]:hover,
.bidding-box #bid-actions button[data-text="Misdeal"]:hover,
.bidding-box #bid-scroller button[data-text="Misdeal"]:hover {
  background-color: #e70000;
}
.bidding-box #bid-actions button[data-text="X"]:disabled,
.bidding-box #bid-scroller button[data-text="X"]:disabled,
.bidding-box #bid-actions button[data-text="Misdeal"]:disabled,
.bidding-box #bid-scroller button[data-text="Misdeal"]:disabled {
  background-color: #777;
  border-color: #ccc;
  color: #ccc;
  opacity: 0.75;
}
.bidding-box #bid-actions button[data-text="X"]:disabled.hover,
.bidding-box #bid-scroller button[data-text="X"]:disabled.hover,
.bidding-box #bid-actions button[data-text="Misdeal"]:disabled.hover,
.bidding-box #bid-scroller button[data-text="Misdeal"]:disabled.hover {
  background-color: #777;
}
.bidding-box #bid-actions button[data-text="XX"],
.bidding-box #bid-scroller button[data-text="XX"] {
  background-color: #323232;
  color: #fff;
  float: left;
  min-width: 80px;
}
.bidding-box #bid-actions button[data-text="XX"]:hover,
.bidding-box #bid-scroller button[data-text="XX"]:hover {
  background-color: #3f3f3f;
}
.bidding-box #bid-actions button[data-text="XX"]:disabled,
.bidding-box #bid-scroller button[data-text="XX"]:disabled {
  background-color: #777;
  border-color: #ccc;
  color: #ccc;
  opacity: 0.75;
}
.bidding-box #bid-actions button[data-text="XX"]:disabled.hover,
.bidding-box #bid-scroller button[data-text="XX"]:disabled.hover {
  background-color: #777;
}
.bidding-box #bid-actions button .suit,
.bidding-box #bid-scroller button .suit {
  display: inline;
  font-size: 30px;
}
.bidding-box #bid-actions button.with-arrow .notrump,
.bidding-box #bid-scroller button.with-arrow .notrump {
  font-size: 50%;
  position: relative;
  top: -0.8em;
}
.bidding-box #bid-actions button .arrow,
.bidding-box #bid-scroller button .arrow {
  display: inline;
  font-size: 85%;
  line-height: inherit;
  top: -1px;
  vertical-align: bottom;
}
.bidding-box #bid-actions button[data-suit="Unknown"] .arrow,
.bidding-box #bid-scroller button[data-suit="Unknown"] .arrow {
  font-size: 45%;
  margin-left: -1.1em;
  top: -1px;
}
.bidding-box #bid-actions {
  padding: 0;
  margin-top: 10px;
  min-height: 25px;
}
.bidding-box #bid-actions button {
  border-color: rgba(255, 255, 255, 0.7);
  margin: 0;
  margin-right: 3px;
}
.bidding-box #bid-actions button:hover:not(:disabled),
.bidding-box #bid-actions button.hover:not(:disabled) {
  border-color: #fff;
}
.bidding-box #bid-scroller {
  max-height: 120px;
  overflow: hidden;
}
.rtl.bidding-box #bid-scroller {
  direction: rtl;
}
.bidding-box #bid-scroller button {
  border-radius: 2px;
  border-top-left-radius: 9px;
  direction: ltr;
  letter-spacing: -1px;
  margin: 0 -6px -8px 0;
  min-height: 50px;
  width: 60px;
  padding: 0 2px 10px;
}
body[data-game-code="Euchre"] .bidding-box #bid-scroller button {
  font-size: 26px;
}
.bidding-box #bid-scroller button.special {
  padding-bottom: 20px;
}
.bidding-box #bid-scroller button[data-suit=""] {
  color: #000 !important;
}
.rtl.bidding-box #bid-scroller button {
  border-top-left-radius: 2px;
  border-top-right-radius: 9px;
}
body[data-game-code="Whist"] .bidding-box #bid-scroller button {
  width: 95px;
}
.bidding-box #bid-scroller button:disabled {
  visibility: hidden;
}
.bidding-box #bid-scroller button.suggested {
  background-color: #fd0;
  border-color: #fd0;
  -webkit-box-shadow: -1px -1px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: -1px -1px 6px 2px rgba(0, 0, 0, 0.4);
}
.rtl.bidding-box #bid-scroller button.suggested {
  -webkit-box-shadow: 1px -1px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: 1px -1px 6px 2px rgba(0, 0, 0, 0.4);
}
.bidding-box #bid-scroller button[data-size="2"] {
  padding-left: 0;
  padding-right: 4px;
}
.rtl.bidding-box #bid-scroller button[data-size="2"] {
  padding-left: 4px;
  padding-right: 0;
}
.bidding-box #bid-scroller button.special:after {
  background-color: #0066ff;
  border-radius: 10px;
  color: #fff;
  content: attr(data-special);
  display: block;
  font-size: 12px;
  letter-spacing: normal;
  line-height: 15px;
  position: absolute;
  bottom: 8px;
  left: 6px;
  right: 6px;
}
.bidding-box #bid-scroller button.special:focus:after,
.bidding-box #bid-scroller button.special.hover:after {
  background-color: #1a75ff;
}
.bidding-box #bid-label {
  display: none;
}
.popup.bid-popup {
  background-color: #0066ff;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.popup.bid-popup .content ul {
  padding: 5px;
}
.popup.bid-popup .content ul li {
  padding: 5px;
}
.popup.bid-popup .content ul li button {
  background-color: #fff;
  border-radius: 5px;
  color: #0066ff;
  font-size: 20px;
  line-height: 0;
  min-width: 0;
  padding: 4px 8px;
  text-align: center;
  width: 100%;
}
@media (max-width: 479px), (max-height: 479px) {
  .popup.bid-popup .content ul li button {
    font-size: 16px;
    height: 32px;
  }
}
.popup.bid-popup .content ul li button.with-explanation span {
  position: relative;
  top: -8px;
}
.popup.bid-popup .content ul li button.with-explanation div {
  font-size: 13px;
  position: relative;
  top: 10px;
}
.popup.bid-popup .content ul li button.suggested {
  background-color: #fd0;
  color: #000;
}
.popup.bid-popup .content ul li button:disabled {
  opacity: 0.5;
}
.popup.bid-popup .content ul li button:hover:not(:disabled) {
  background-color: #cce0ff;
}
#bid-actions,
#bid-scroller {
  margin: 5px auto;
  max-width: 350px;
}
@media (orientation: portrait) {
  #bid-actions,
  #bid-scroller {
    max-width: 220px;
  }
  #bid-label[data-text="Call your partner"] + #bid-actions,
  #bid-label[data-text="Call your partner"] + #bid-scroller {
    max-width: 250px;
  }
}
@media (orientation: portrait) and (max-width: 340px) {
  #bid-label[data-text="Call your partner"] + #bid-actions button,
  #bid-label[data-text="Call your partner"] + #bid-scroller button {
    margin: 3px;
  }
}
#bid-actions button,
#bid-scroller button {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 9px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  margin: 4px;
  min-height: 40px;
  min-width: 40px;
  overflow: hidden;
  padding: 0 6px;
  position: relative;
  vertical-align: bottom;
  white-space: nowrap;
  /*        &[data-suit="Clubs"],
        &[data-suit="Spades"],
        &[data-suit="Unknown"] {
            color: @suit-color-black !important;
        }

        &[data-suit="Diamonds"],
        &[data-suit="Hearts"] {
            color: @suit-color-red !important;
        }
*/
}
@media (min-width: 768px), (min-height: 768px) {
  #bid-actions button,
  #bid-scroller button {
    -webkit-box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.4);
            box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.4);
  }
}
#bid-instructions:not(.bidding-box) #bid-actions button.special[data-special],
#bid-instructions:not(.bidding-box) #bid-scroller button.special[data-special] {
  padding: 0;
}
#bid-instructions:not(.bidding-box) #bid-actions button.special[data-special]:after,
#bid-instructions:not(.bidding-box) #bid-scroller button.special[data-special]:after {
  content: attr(data-special);
  display: block;
  font-size: 50%;
  padding: 2px 0 3px;
}
#bid-instructions:not(.bidding-box) #bid-actions button.special,
#bid-instructions:not(.bidding-box) #bid-scroller button.special,
#bid-actions button[data-text="Nil"],
#bid-scroller button[data-text="Nil"] {
  background-color: #0066ff;
  color: #fff;
}
#bid-instructions:not(.bidding-box) #bid-actions button.special:focus,
#bid-instructions:not(.bidding-box) #bid-scroller button.special:focus,
#bid-actions button[data-text="Nil"]:focus,
#bid-scroller button[data-text="Nil"]:focus,
#bid-instructions:not(.bidding-box) #bid-actions button.special.hover,
#bid-instructions:not(.bidding-box) #bid-scroller button.special.hover,
#bid-actions button[data-text="Nil"].hover,
#bid-scroller button[data-text="Nil"].hover {
  background-color: #1a75ff;
}
#bid-actions button[data-text="Pass"],
#bid-scroller button[data-text="Pass"] {
  background-color: #008000;
  color: #fff;
}
#bid-actions button[data-text="Pass"]:focus,
#bid-scroller button[data-text="Pass"]:focus,
#bid-actions button[data-text="Pass"].hover,
#bid-scroller button[data-text="Pass"].hover {
  background-color: #009a00;
}
@media (min-height: 480px) {
  #bid-actions button,
  #bid-scroller button {
    margin: 5px;
  }
}
#bid-actions button:disabled,
#bid-scroller button:disabled {
  opacity: 0.5;
}
#bid-actions button.suggested,
#bid-scroller button.suggested {
  -webkit-box-shadow: 0 0 6px 4px rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 6px 4px rgba(255, 255, 255, 0.5);
}
body:not([data-game-code="Euchre"]) #bid-actions button.with-arrow:not([data-text$="alone"]),
body:not([data-game-code="Euchre"]) #bid-scroller button.with-arrow:not([data-text$="alone"]) {
  font-size: 24px;
  line-height: 24px;
  width: 50px;
}
#bid-actions button[data-suit=""] span,
#bid-scroller button[data-suit=""] span {
  display: inline-block;
}
#bid-actions button .notrump:first-child,
#bid-scroller button .notrump:first-child {
  display: block;
  font-size: 24px;
}
#bid-actions button[data-text$="alone"] .notrump:first-child,
#bid-scroller button[data-text$="alone"] .notrump:first-child,
#bid-actions button[data-text$="alone"] .arrow,
#bid-scroller button[data-text$="alone"] .arrow {
  opacity: 0.3;
}
#bid-actions button[data-text$="alone"] span:last-child,
#bid-scroller button[data-text$="alone"] span:last-child {
  bottom: 0;
  display: block;
  left: 0;
  line-height: 38px;
  position: absolute;
  right: 0;
  top: 0;
}
#bid-label:not([data-text="Call your partner"]) + #bid-actions button .suit:first-child,
#bid-label:not([data-text="Call your partner"]) + #bid-scroller button .suit:first-child {
  display: block;
  font-family: card-pips, sans-serif;
  font-size: 40px;
  opacity: 0.3;
  width: 50px;
}
#bid-label:not([data-text="Call your partner"]) + #bid-actions button .suit:first-child:last-child,
#bid-label:not([data-text="Call your partner"]) + #bid-scroller button .suit:first-child:last-child {
  opacity: 1;
}
#bid-label:not([data-text="Call your partner"]) + #bid-actions button .suit:first-child + span,
#bid-label:not([data-text="Call your partner"]) + #bid-scroller button .suit:first-child + span {
  bottom: 0;
  display: block;
  left: 0;
  line-height: 38px;
  position: absolute;
  right: 0;
  top: 0;
}
#bid-actions button .arrow,
#bid-scroller button .arrow {
  display: block;
  position: relative;
  top: -4px;
}
#bid-actions button .notrump:first-child + .arrow,
#bid-scroller button .notrump:first-child + .arrow {
  top: 0;
}
#bid-actions button:focus,
#bid-scroller button:focus,
#bid-actions button.hover,
#bid-scroller button.hover {
  background-color: #fff6cc;
  border-color: #fff6cc;
  outline: none;
}
#bid-options {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
#bid-instructions button.scroll {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.75);
  display: none;
  font-size: 40px;
  height: 40px;
  left: 50%;
  line-height: 40px;
  margin-left: -40px;
  min-width: 80px;
  opacity: 1;
  padding: 0;
  position: absolute;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#bid-instructions button.scroll:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
}
#bid-instructions button.scroll:focus {
  outline: none;
}
#bid-instructions button.scroll[hidden] {
  opacity: 0;
  pointer-events: none;
}
#bid-instructions button.scroll.up {
  top: -35px;
}
#bid-instructions button.scroll.down {
  bottom: 0;
}
.popup.bid-explanation {
  font-size: 14px;
  max-width: 400px;
}
.popup.bid-explanation.bid-button {
  pointer-events: none;
}
@media (max-width: 479px), (max-height: 479px) {
  .popup.bid-explanation {
    font-size: 12px;
    max-width: 320px;
  }
}
.popup.bid-explanation h1 {
  font-size: 120%;
  margin: 0;
}
.popup.bid-explanation > div {
  padding-bottom: 8px;
}
.popup.bid-explanation .line {
  display: list-item;
  line-height: 1;
  list-style-type: "\25B8";
  margin-left: 10px;
  margin-top: 6px;
  padding-left: 2px;
}
.popup.bid-explanation .line:first-letter {
  text-transform: capitalize;
}
.popup.bid-explanation .part {
  white-space: nowrap;
}
.popup.bid-explanation .part:only-child {
  white-space: normal;
}
.popup.bid-explanation .description {
  clear: both;
}
.popup.bid-explanation .bid-role {
  font-size: 65%;
  margin-left: 1px;
}
.popup.bid-explanation .bid-convention,
.popup.bid-explanation .bid-message {
  border-radius: 3px;
  color: #fff;
  display: block;
  float: right;
  font-size: 12px;
  font-weight: normal;
  margin-left: 12px;
  margin-right: -4px;
  margin-top: 2px;
  padding: 1px 4px 2px;
}
.popup.bid-explanation .bid-convention.bid-convention,
.popup.bid-explanation .bid-message.bid-convention {
  background-color: #323232;
}
.popup.bid-explanation .bid-convention.forcing,
.popup.bid-explanation .bid-message.forcing {
  background-color: #008000;
}
.popup.bid-explanation .bid-convention.signoff,
.popup.bid-explanation .bid-message.signoff {
  background-color: #cd0000;
}
.popup .confirm-bid.wrapper,
.popup .confirm-card.wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 5px;
  max-width: 300px;
  text-align: center;
}
.popup .confirm-bid.wrapper p,
.popup .confirm-card.wrapper p {
  margin: 0;
  padding: 8px 10px;
  font-size: 24px;
  font-weight: 500;
}
.popup .confirm-bid.wrapper p .the-bid,
.popup .confirm-card.wrapper p .the-bid,
.popup .confirm-bid.wrapper p .the-card,
.popup .confirm-card.wrapper p .the-card {
  margin-right: 4px;
}
.popup .confirm-bid.wrapper .actions,
.popup .confirm-card.wrapper .actions {
  padding: 5px 10px;
}
.popup .confirm-bid.wrapper .actions button:not(:first-child),
.popup .confirm-card.wrapper .actions button:not(:first-child) {
  margin-left: 0.25em;
}
.popup .confirm-bid.wrapper input[type=checkbox],
.popup .confirm-card.wrapper input[type=checkbox] {
  border-color: #005a00;
  border-width: 1px;
  border-style: solid;
  width: 16px;
  height: 16px;
  position: relative;
  top: 1px;
}
body[data-board-color="blue"] .popup .confirm-bid.wrapper input[type=checkbox],
body[data-board-color="blue"] .popup .confirm-card.wrapper input[type=checkbox] {
  border-color: #0a3b76;
}
body[data-board-color="red"] .popup .confirm-bid.wrapper input[type=checkbox],
body[data-board-color="red"] .popup .confirm-card.wrapper input[type=checkbox] {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .popup .confirm-bid.wrapper input[type=checkbox],
body[data-board-color="charcoal"] .popup .confirm-card.wrapper input[type=checkbox] {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .popup .confirm-bid.wrapper input[type=checkbox],
body[data-board-color="black"] .popup .confirm-card.wrapper input[type=checkbox] {
  border-color: black;
}
body[data-board-color="white"] .popup .confirm-bid.wrapper input[type=checkbox],
body[data-board-color="white"] .popup .confirm-card.wrapper input[type=checkbox] {
  border-color: white;
}
#cards {
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}
#cards .last-trick {
  background-color: #003400;
  border-radius: 9px;
  color: #fff;
  height: 50%;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) translateY(-10px);
          transform: translate(-50%, -50%) translateY(-10px);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  visibility: visible;
  width: 50%;
  z-index: 1001;
}
body[data-board-color="blue"] #cards .last-trick {
  background-color: #062347;
}
body[data-board-color="red"] #cards .last-trick {
  background-color: #730e0e;
}
body[data-board-color="charcoal"] #cards .last-trick {
  background-color: #323232;
}
#cards .last-trick[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
  z-index: auto;
}
#cards .last-trick:before {
  content: "Last Trick";
  display: block;
  font-size: 20px;
  padding: 2px 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  #cards .last-trick:before {
    font-size: 16px;
  }
}
#cards .last-trick .fa-close {
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
@media (max-width: 479px), (max-height: 479px) {
  #cards .last-trick .fa-close {
    right: -2px;
    top: -2px;
  }
}
#cards .last-trick .fa-close:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.card {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: block;
  height: 190px;
  left: -70px;
  -webkit-perspective: 500px;
          perspective: 500px;
  position: absolute;
  top: -95px;
  -webkit-touch-callout: none;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 140px;
}
.card[hidden] {
  display: none;
}
#game.rejoining .card {
  -webkit-transition: none;
  transition: none;
}
#game.rejoining .card .back,
#game.rejoining .card .face {
  -webkit-transition: none;
  transition: none;
}
.card svg {
  width: 100%;
  height: 100%;
}
.card .wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 100%;
}
.card.received.face-up .wrapper {
  -webkit-transform: translateY(-15%);
          transform: translateY(-15%);
}
.card.highlighted .wrapper:after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 45px;
  height: 45px;
  border: 4px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  top: 55px;
  left: -7px;
}
.card-theme[data-high-visibility] .card.highlighted .wrapper:after {
  top: 70px;
  left: -4px;
}
.card.face-up.preselected .wrapper {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card.face-up.preselected.dummy .wrapper {
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
.card.face-up.preselected[style*="rotate(180deg)"]:not(.dummy) .wrapper,
.card.face-up.preselected[style*="rotate(-180deg)"]:not(.dummy) .wrapper {
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).suggested .wrapper {
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).selected .wrapper {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).hover .wrapper,
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).highlighted .wrapper,
#cards:not(.touch-events) .card.hand.legal:not(.receiving):not(.showing):not(.dealing):hover .wrapper {
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).hover.selected .wrapper,
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).highlighted.selected .wrapper,
#cards:not(.touch-events) .card.hand.legal:not(.receiving):not(.showing):not(.dealing):hover.selected .wrapper {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy.suggested .wrapper {
  -webkit-transform: translateX(-5%);
          transform: translateX(-5%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy.selected .wrapper {
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy.hover .wrapper,
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy.highlighted .wrapper,
#cards:not(.touch-events) .card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy:hover .wrapper {
  -webkit-transform: translateX(-20%);
          transform: translateX(-20%);
}
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy.hover.selected .wrapper,
.card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy.highlighted.selected .wrapper,
#cards:not(.touch-events) .card.hand.legal:not(.receiving):not(.showing):not(.dealing).dummy:hover.selected .wrapper {
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
.card.revealed.legal.suggested .wrapper {
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}
.card.revealed.legal.suggested[style*="rotate(180deg)"]:not(.dummy) .wrapper,
.card.revealed.legal.suggested[style*="rotate(-180deg)"]:not(.dummy) .wrapper {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}
.card.revealed.legal.selected:not(.dummy) .wrapper {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card.revealed.legal.selected[style*="rotate(180deg)"]:not(.dummy) .wrapper,
.card.revealed.legal.selected[style*="rotate(-180deg)"]:not(.dummy) .wrapper {
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.card.revealed.legal.hover .wrapper,
#cards:not(.touch-events) .card.revealed.legal:hover .wrapper {
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
}
.card.revealed.legal.hover[style*="rotate(180deg)"]:not(.dummy) .wrapper,
#cards:not(.touch-events) .card.revealed.legal:hover[style*="rotate(180deg)"]:not(.dummy) .wrapper,
.card.revealed.legal.hover[style*="rotate(-180deg)"]:not(.dummy) .wrapper,
#cards:not(.touch-events) .card.revealed.legal:hover[style*="rotate(-180deg)"]:not(.dummy) .wrapper {
  -webkit-transform: translateY(25%);
          transform: translateY(25%);
}
.card.revealed.legal.hover.selected:not(.dummy) .wrapper,
#cards:not(.touch-events) .card.revealed.legal:hover.selected:not(.dummy) .wrapper {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card.revealed.legal.hover.selected[style*="rotate(180deg)"]:not(.dummy) .wrapper,
#cards:not(.touch-events) .card.revealed.legal:hover.selected[style*="rotate(180deg)"]:not(.dummy) .wrapper,
.card.revealed.legal.hover.selected[style*="rotate(-180deg)"]:not(.dummy) .wrapper,
#cards:not(.touch-events) .card.revealed.legal:hover.selected[style*="rotate(-180deg)"]:not(.dummy) .wrapper {
  -webkit-transform: translateY(60%);
          transform: translateY(60%);
}
.card.revealed.legal.dummy.suggested .wrapper {
  -webkit-transform: translateX(-5%);
          transform: translateX(-5%);
}
.card.revealed.legal.dummy.selected .wrapper {
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
.card.revealed.legal.dummy.hover .wrapper,
#cards:not(.touch-events) .card.revealed.legal.dummy:hover .wrapper {
  -webkit-transform: translateX(-20%);
          transform: translateX(-20%);
}
.card.revealed.legal.dummy.hover.selected .wrapper,
#cards:not(.touch-events) .card.revealed.legal.dummy:hover.selected .wrapper {
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
.card.highlighted .wrapper {
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
}
.card.highlighted.dummy .wrapper {
  -webkit-transform: translateX(-20%);
          transform: translateX(-20%);
}
@media (max-width: 479px), (max-height: 479px) {
  body:not(.high-performance-phone) .card:not(.face-up):not(.hand):not(.revealed):not(.taking):not(.watching) {
    display: none;
  }
}
.card .back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 9px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 100%;
  -webkit-transform: perspective(500px) rotateY(0deg);
          transform: perspective(500px) rotateY(0deg);
}
.card-theme[data-small-cards] .card .back {
  border: 3px solid #999;
}
.card .face {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 9px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 100%;
  -webkit-transform: perspective(500px) rotateY(180deg);
          transform: perspective(500px) rotateY(180deg);
  -webkit-transition-property: visibility, -webkit-transform;
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  visibility: hidden;
}
.card-theme[data-small-cards] .card .face {
  border: 3px solid #999;
}
@media (min-width: 768px), (min-height: 768px) {
  .card .face {
    -webkit-box-shadow: -1px 3px 5px rgba(0, 0, 0, 0.5);
            box-shadow: -1px 3px 5px rgba(0, 0, 0, 0.5);
  }
}
.card .face[data-hcp]:before {
  color: #777;
  content: "+" attr(data-hcp);
  display: block;
  font-size: 50%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 55px;
  width: 20%;
}
.card.face-up .back {
  -webkit-transform: perspective(500px) rotateY(-180deg);
          transform: perspective(500px) rotateY(-180deg);
}
.card.face-up .face {
  -webkit-transform: perspective(500px) rotateY(0deg);
          transform: perspective(500px) rotateY(0deg);
  visibility: visible;
}
.card.receiving .face:after,
.card.face-up.legal.last:not(.high) .face:after,
.card.face-up:not(.legal):not(.high):not(.dealing):not(.highlighted) .face:after,
.card:not(.face-up):not(.legal):not(.dealing) .back:after {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 9px;
  content: "";
  display: block;
  height: 190px;
  left: -1px;
  position: absolute;
  top: -1px;
  width: 140px;
}
.card.received.face-up .face:after {
  content: none !important;
}
.suit {
  font-family: card-pips, sans-serif;
  font-size: 110%;
  line-height: 1;
}
.card .face .suit {
  font-size: inherit;
  line-height: inherit;
}
.suit.Joker,
.suit.Joker-H,
.suit.Joker-L {
  font-size: 120%;
}
.suit.inherit {
  color: inherit;
}
.suit i {
  font-style: normal;
}
.card-theme:not([data-card-pips^=pagat]) .suit.Clubs i:before,
#sample-pips-trickster .suit.Clubs i:before {
  content: "♣";
}
.card-theme:not([data-card-pips^=pagat]) .suit.Diamonds i:before,
#sample-pips-trickster .suit.Diamonds i:before {
  content: "♦";
}
.card-theme:not([data-card-pips^=pagat]) .suit.Spades i:before,
#sample-pips-trickster .suit.Spades i:before {
  content: "♠";
}
.card-theme:not([data-card-pips^=pagat]) .suit.Hearts i,
#sample-pips-trickster .suit.Hearts i {
  position: static;
  top: 0;
}
.card-theme:not([data-card-pips^=pagat]) .suit.Hearts i:before,
#sample-pips-trickster .suit.Hearts i:before {
  content: "♥";
}
.card-theme:not([data-card-pips^=pagat]) .suit.Joker i:before,
#sample-pips-trickster .suit.Joker i:before,
.card-theme:not([data-card-pips^=pagat]) .suit.Joker-H i:before,
#sample-pips-trickster .suit.Joker-H i:before,
.card-theme:not([data-card-pips^=pagat]) .suit.Joker-L i:before,
#sample-pips-trickster .suit.Joker-L i:before {
  content: "★";
}
.card-theme[data-card-pips^=pagat] .suit i,
.sample[id^="sample-pagat"] .suit i {
  font-family: pagat-pips, card-pips, sans-serif;
}
.card-theme[data-card-pips^=pagat] .suit.Hearts i,
.sample[id^="sample-pagat"] .suit.Hearts i {
  position: relative;
  top: 1px;
}
.card-theme[data-card-pips=pagatStd] .suit.Clubs i:before,
#sample-pagatStd .suit.Clubs i:before {
  content: "c";
}
.card-theme[data-card-pips=pagatStd] .suit.Diamonds i:before,
#sample-pagatStd .suit.Diamonds i:before {
  content: "2";
}
.card-theme[data-card-pips=pagatStd] .suit.Spades i:before,
#sample-pagatStd .suit.Spades i:before {
  content: "s";
}
.card-theme[data-card-pips=pagatStd] .suit.Hearts i:before,
#sample-pagatStd .suit.Hearts i:before {
  content: "1";
}
.card-theme[data-card-pips=pagatStd] .suit.Joker i:before,
#sample-pagatStd .suit.Joker i:before,
.card-theme[data-card-pips=pagatStd] .suit.Joker-H i:before,
#sample-pagatStd .suit.Joker-H i:before,
.card-theme[data-card-pips=pagatStd] .suit.Joker-L i:before,
#sample-pagatStd .suit.Joker-L i:before {
  content: "j";
}
.card-theme[data-card-pips=pagatDec] .suit.Clubs i:before,
#sample-pagatDec .suit.Clubs i:before {
  content: "C";
}
.card-theme[data-card-pips=pagatDec] .suit.Diamonds i:before,
#sample-pagatDec .suit.Diamonds i:before {
  content: "4";
}
.card-theme[data-card-pips=pagatDec] .suit.Spades i:before,
#sample-pagatDec .suit.Spades i:before {
  content: "S";
}
.card-theme[data-card-pips=pagatDec] .suit.Hearts i:before,
#sample-pagatDec .suit.Hearts i:before {
  content: "3";
}
.card-theme[data-card-pips=pagatDec] .suit.Joker i:before,
#sample-pagatDec .suit.Joker i:before,
.card-theme[data-card-pips=pagatDec] .suit.Joker-H i:before,
#sample-pagatDec .suit.Joker-H i:before,
.card-theme[data-card-pips=pagatDec] .suit.Joker-L i:before,
#sample-pagatDec .suit.Joker-L i:before {
  content: "j";
}
.card-theme[data-card-pips=pagatStdOpen] .suit.Clubs i:before,
#sample-pagatStdOpen .suit.Clubs i:before {
  content: "c";
}
.card-theme[data-card-pips=pagatStdOpen] .suit.Diamonds i:before,
#sample-pagatStdOpen .suit.Diamonds i:before {
  content: "d";
}
.card-theme[data-card-pips=pagatStdOpen] .suit.Spades i:before,
#sample-pagatStdOpen .suit.Spades i:before {
  content: "s";
}
.card-theme[data-card-pips=pagatStdOpen] .suit.Hearts i:before,
#sample-pagatStdOpen .suit.Hearts i:before {
  content: "h";
}
.card-theme[data-card-pips=pagatStdOpen] .suit.Joker i:before,
#sample-pagatStdOpen .suit.Joker i:before,
.card-theme[data-card-pips=pagatStdOpen] .suit.Joker-L i:before,
#sample-pagatStdOpen .suit.Joker-L i:before {
  content: "j";
}
.card-theme[data-card-pips=pagatStdOpen] .suit.Joker-H i:before,
#sample-pagatStdOpen .suit.Joker-H i:before {
  content: "k";
}
.card-theme[data-card-pips=pagatDecOpen] .suit.Clubs i:before,
#sample-pagatDecOpen .suit.Clubs i:before {
  content: "C";
}
.card-theme[data-card-pips=pagatDecOpen] .suit.Diamonds i:before,
#sample-pagatDecOpen .suit.Diamonds i:before {
  content: "D";
}
.card-theme[data-card-pips=pagatDecOpen] .suit.Spades i:before,
#sample-pagatDecOpen .suit.Spades i:before {
  content: "S";
}
.card-theme[data-card-pips=pagatDecOpen] .suit.Hearts i:before,
#sample-pagatDecOpen .suit.Hearts i:before {
  content: "H";
}
.card-theme[data-card-pips=pagatDecOpen] .suit.Joker i:before,
#sample-pagatDecOpen .suit.Joker i:before,
.card-theme[data-card-pips=pagatDecOpen] .suit.Joker-L i:before,
#sample-pagatDecOpen .suit.Joker-L i:before {
  content: "j";
}
.card-theme[data-card-pips=pagatDecOpen] .suit.Joker-H i:before,
#sample-pagatDecOpen .suit.Joker-H i:before {
  content: "k";
}
.Clubs,
.Spades,
.Joker-L,
.Low,
[data-suit="Clubs"],
[data-suit="Spades"],
[data-suit="Unknown"] {
  color: #000000 !important;
}
.Clubs.inherit-color,
.Spades.inherit-color,
.Joker-L.inherit-color,
.Low.inherit-color,
[data-suit="Clubs"].inherit-color,
[data-suit="Spades"].inherit-color,
[data-suit="Unknown"].inherit-color {
  color: inherit !important;
}
.Hearts,
.Diamonds,
.Joker-H,
.High,
[data-suit="Diamonds"],
[data-suit="Hearts"] {
  color: #e00000 !important;
}
.Hearts.inherit-color,
.Diamonds.inherit-color,
.Joker-H.inherit-color,
.High.inherit-color,
[data-suit="Diamonds"].inherit-color,
[data-suit="Hearts"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grblbkrd] .Clubs,
.card-theme[data-pips-color=grblbkrd] [data-suit="Clubs"] {
  color: #408000 !important;
}
.card-theme[data-pips-color=grblbkrd] .Clubs.inherit-color,
.card-theme[data-pips-color=grblbkrd] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grblbkrd] .Diamonds,
.card-theme[data-pips-color=grblbkrd] [data-suit="Diamonds"] {
  color: #2000ff !important;
}
.card-theme[data-pips-color=grblbkrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=grblbkrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=bkorgrrd] .Diamonds,
.card-theme[data-pips-color=bkorgrrd] [data-suit="Diamonds"] {
  color: #ff8000 !important;
}
.card-theme[data-pips-color=bkorgrrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=bkorgrrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=bkorgrrd] .Spades,
.card-theme[data-pips-color=bkorgrrd] .Joker-L,
.card-theme[data-pips-color=bkorgrrd] .Low,
.card-theme[data-pips-color=bkorgrrd] [data-suit="Spades"] {
  color: #408000 !important;
}
.card-theme[data-pips-color=bkorgrrd] .Spades.inherit-color,
.card-theme[data-pips-color=bkorgrrd] .Joker-L.inherit-color,
.card-theme[data-pips-color=bkorgrrd] .Low.inherit-color,
.card-theme[data-pips-color=bkorgrrd] [data-suit="Spades"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=blorbkrd] .Clubs,
.card-theme[data-pips-color=blorbkrd] [data-suit="Clubs"] {
  color: #2000ff !important;
}
.card-theme[data-pips-color=blorbkrd] .Clubs.inherit-color,
.card-theme[data-pips-color=blorbkrd] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=blorbkrd] .Diamonds,
.card-theme[data-pips-color=blorbkrd] [data-suit="Diamonds"] {
  color: #ff8000 !important;
}
.card-theme[data-pips-color=blorbkrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=blorbkrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=blylbkrd] .Clubs,
.card-theme[data-pips-color=blylbkrd] [data-suit="Clubs"] {
  color: #2000ff !important;
}
.card-theme[data-pips-color=blylbkrd] .Clubs.inherit-color,
.card-theme[data-pips-color=blylbkrd] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=blylbkrd] .Diamonds,
.card-theme[data-pips-color=blylbkrd] [data-suit="Diamonds"] {
  color: #ffc000 !important;
}
.card-theme[data-pips-color=blylbkrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=blylbkrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grorbkrd] .Clubs,
.card-theme[data-pips-color=grorbkrd] [data-suit="Clubs"] {
  color: #408000 !important;
}
.card-theme[data-pips-color=grorbkrd] .Clubs.inherit-color,
.card-theme[data-pips-color=grorbkrd] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grorbkrd] .Diamonds,
.card-theme[data-pips-color=grorbkrd] [data-suit="Diamonds"] {
  color: #ff8000 !important;
}
.card-theme[data-pips-color=grorbkrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=grorbkrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grylblrd] .Clubs,
.card-theme[data-pips-color=grylblrd] [data-suit="Clubs"] {
  color: #408000 !important;
}
.card-theme[data-pips-color=grylblrd] .Clubs.inherit-color,
.card-theme[data-pips-color=grylblrd] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grylblrd] .Diamonds,
.card-theme[data-pips-color=grylblrd] [data-suit="Diamonds"] {
  color: #ffc000 !important;
}
.card-theme[data-pips-color=grylblrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=grylblrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=grylblrd] .Spades,
.card-theme[data-pips-color=grylblrd] .Joker-L,
.card-theme[data-pips-color=grylblrd] .Low,
.card-theme[data-pips-color=grylblrd] [data-suit="Spades"] {
  color: #2000ff !important;
}
.card-theme[data-pips-color=grylblrd] .Spades.inherit-color,
.card-theme[data-pips-color=grylblrd] .Joker-L.inherit-color,
.card-theme[data-pips-color=grylblrd] .Low.inherit-color,
.card-theme[data-pips-color=grylblrd] [data-suit="Spades"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=pkorbkrd] .Clubs,
.card-theme[data-pips-color=pkorbkrd] [data-suit="Clubs"] {
  color: #ff00ff !important;
}
.card-theme[data-pips-color=pkorbkrd] .Clubs.inherit-color,
.card-theme[data-pips-color=pkorbkrd] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=pkorbkrd] .Diamonds,
.card-theme[data-pips-color=pkorbkrd] [data-suit="Diamonds"] {
  color: #ff8000 !important;
}
.card-theme[data-pips-color=pkorbkrd] .Diamonds.inherit-color,
.card-theme[data-pips-color=pkorbkrd] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=pkylcyor] .Clubs,
.card-theme[data-pips-color=pkylcyor] [data-suit="Clubs"] {
  color: #ff00ff !important;
}
.card-theme[data-pips-color=pkylcyor] .Clubs.inherit-color,
.card-theme[data-pips-color=pkylcyor] [data-suit="Clubs"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=pkylcyor] .Diamonds,
.card-theme[data-pips-color=pkylcyor] [data-suit="Diamonds"] {
  color: #ffc000 !important;
}
.card-theme[data-pips-color=pkylcyor] .Diamonds.inherit-color,
.card-theme[data-pips-color=pkylcyor] [data-suit="Diamonds"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=pkylcyor] .Spades,
.card-theme[data-pips-color=pkylcyor] .Joker-L,
.card-theme[data-pips-color=pkylcyor] .Low,
.card-theme[data-pips-color=pkylcyor] [data-suit="Spades"] {
  color: #40ebeb !important;
}
.card-theme[data-pips-color=pkylcyor] .Spades.inherit-color,
.card-theme[data-pips-color=pkylcyor] .Joker-L.inherit-color,
.card-theme[data-pips-color=pkylcyor] .Low.inherit-color,
.card-theme[data-pips-color=pkylcyor] [data-suit="Spades"].inherit-color {
  color: inherit !important;
}
.card-theme[data-pips-color=pkylcyor] .Hearts,
.card-theme[data-pips-color=pkylcyor] .Joker-H,
.card-theme[data-pips-color=pkylcyor] .High,
.card-theme[data-pips-color=pkylcyor] [data-suit="Hearts"] {
  color: #ff8000 !important;
}
.card-theme[data-pips-color=pkylcyor] .Hearts.inherit-color,
.card-theme[data-pips-color=pkylcyor] .Joker-H.inherit-color,
.card-theme[data-pips-color=pkylcyor] .High.inherit-color,
.card-theme[data-pips-color=pkylcyor] [data-suit="Hearts"].inherit-color {
  color: inherit !important;
}
.carousel > ul {
  bottom: 60px;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
@media (max-width: 479px), (max-height: 479px) {
  .carousel > ul {
    bottom: 42px;
  }
}
.carousel > ul > li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.carousel > ul > li.prev,
.carousel > ul > li.current,
.carousel > ul > li.next {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.carousel > ul > li.current {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.carousel > ul > li.next,
.carousel > ul > li.current + .prev.next {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.carousel > ul > li.prev {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.carousel > ul > li.immediate {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
.carousel > .icon-button {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 21px;
  bottom: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #005a00;
  line-height: 0;
  min-width: 42px;
  opacity: 1;
  padding: 0 10px;
  position: absolute;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: auto;
}
body[data-board-color="blue"] .carousel > .icon-button {
  color: #0a3b76;
}
body[data-board-color="red"] .carousel > .icon-button {
  color: #a01414;
}
body[data-board-color="charcoal"] .carousel > .icon-button {
  color: #4b4b4b;
}
body[data-board-color="black"] .carousel > .icon-button {
  color: black;
}
body[data-board-color="white"] .carousel > .icon-button {
  color: white;
}
.carousel > .icon-button[hidden] {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
@media (max-width: 479px), (max-height: 479px) {
  .carousel > .icon-button {
    bottom: 0;
  }
}
.carousel > .icon-button:focus {
  outline: none;
}
.carousel > .icon-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.carousel > .icon-button.left {
  left: 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  .carousel > .icon-button.left {
    left: 0;
  }
}
.carousel > .icon-button.left .label:not(:empty) {
  margin-left: 10px;
}
.carousel > .icon-button.right {
  right: 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  .carousel > .icon-button.right {
    right: 0;
  }
}
.carousel > .icon-button.right .label:not(:empty) {
  margin-right: 10px;
}
.carousel > .icon-button .fa {
  vertical-align: middle;
}
.carousel > .icon-button .label {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 18px;
  vertical-align: middle;
}
.carousel > .status {
  bottom: 0;
  font-size: 0;
  left: 0;
  line-height: 60px;
  position: absolute;
  right: 0;
  text-align: center;
}
@media (max-width: 479px), (max-height: 479px) {
  .carousel > .status {
    line-height: 42px;
  }
}
.carousel > .status > .indicator {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  vertical-align: middle;
}
.carousel > .status > .indicator[hidden] {
  display: none;
}
.carousel > .status > .indicator:after {
  background-color: transparent;
  border-color: #005a00;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  display: block;
  height: 10px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  width: 10px;
}
body[data-board-color="blue"] .carousel > .status > .indicator:after {
  border-color: #0a3b76;
}
body[data-board-color="red"] .carousel > .status > .indicator:after {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .carousel > .status > .indicator:after {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .carousel > .status > .indicator:after {
  border-color: black;
}
body[data-board-color="white"] .carousel > .status > .indicator:after {
  border-color: white;
}
.carousel > .status > .indicator:hover:after {
  background-color: #8bce8b;
}
body[data-board-color="blue"] .carousel > .status > .indicator:hover:after {
  background-color: #b0becf;
}
body[data-board-color="red"] .carousel > .status > .indicator:hover:after {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .carousel > .status > .indicator:hover:after {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .carousel > .status > .indicator:hover:after {
  background-color: black;
}
body[data-board-color="white"] .carousel > .status > .indicator:hover:after {
  background-color: white;
}
.carousel > .status > .indicator.current:after {
  background-color: #005a00;
}
body[data-board-color="blue"] .carousel > .status > .indicator.current:after {
  background-color: #0a3b76;
}
body[data-board-color="red"] .carousel > .status > .indicator.current:after {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .carousel > .status > .indicator.current:after {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .carousel > .status > .indicator.current:after {
  background-color: black;
}
body[data-board-color="white"] .carousel > .status > .indicator.current:after {
  background-color: white;
}
#menu #challenge.section .scroller .copy-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: -8px;
}
#menu #challenge.section .scroller .challenge-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu #challenge.section .scroller .share-options {
  text-align: center;
}
#menu #challenge.section .scroller .scorecard-preview {
  border-radius: 5px;
  width: 100%;
}
#menu #challenge.section .scroller .dialog-button {
  display: block;
  width: 100%;
}
#club-chats .content {
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (max-width: 479px), (max-height: 479px) {
  #club-chats .content {
    padding: 0 10px;
  }
}
#club-chats h2 {
  font-size: 16px;
  margin: 20px 0 0;
}
#club-chats p {
  margin-top: 0;
  margin-bottom: 8px;
}
.chat-toast {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.chat-toast button.dialog-button {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.popup .voice-prompt.wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 5px;
  max-width: 300px;
}
.popup .voice-prompt.wrapper p {
  margin: 0;
  padding: 8px 10px;
}
.popup .voice-prompt.wrapper .options li {
  padding: 5px 10px;
}
.popup .voice-prompt.wrapper .options li button {
  background-color: #e6ece6;
  border-radius: 2px;
}
body[data-board-color="blue"] .popup .voice-prompt.wrapper .options li button {
  background-color: #e7eaee;
}
body[data-board-color="red"] .popup .voice-prompt.wrapper .options li button {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] .popup .voice-prompt.wrapper .options li button {
  background-color: #ebebeb;
}
body[data-board-color="black"] .popup .voice-prompt.wrapper .options li button {
  background-color: black;
}
body[data-board-color="white"] .popup .voice-prompt.wrapper .options li button {
  background-color: white;
}
.popup .voice-prompt.wrapper .cost {
  float: right;
}
button.reset {
  background-color: transparent;
  border: unset;
  color: unset;
  height: auto;
  margin: 0;
  min-height: auto;
  min-width: auto;
  padding: 0;
  width: auto;
}
button.reset:hover:not(:disabled),
button.reset:focus:active:not(:disabled) {
  background-color: transparent;
  color: unset;
}
button.reset.emoji-wrapper {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 5px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 50px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: normal !important;
  width: 50px;
  text-decoration: none !important;
}
button.reset.emoji-wrapper .emoji {
  font-size: 36px;
  white-space: nowrap;
}
button.reset.emoji-wrapper .emoji.std-emoji {
  font-family: EmoticonFont;
}
button.reset.emoji-wrapper .emoji:not(.std-emoji) {
  position: relative;
  text-shadow: 0 1px 3px black;
  top: -2px;
}
.player-message,
.club-chat-message {
  background-color: #8bce8b;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  max-width: 45%;
  opacity: 1;
  padding: 10px;
  padding-top: 6px;
  position: absolute;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
body[data-board-color="blue"] .player-message,
body[data-board-color="blue"] .club-chat-message {
  background-color: #b0becf;
}
body[data-board-color="red"] .player-message,
body[data-board-color="red"] .club-chat-message {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .player-message,
body[data-board-color="charcoal"] .club-chat-message {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .player-message,
body[data-board-color="black"] .club-chat-message {
  background-color: black;
}
body[data-board-color="white"] .player-message,
body[data-board-color="white"] .club-chat-message {
  background-color: white;
}
.player-message[hidden],
.club-chat-message[hidden],
.disabled.player-message,
.disabled.club-chat-message {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
.player-message.emoji.std-emoji .content,
.club-chat-message.emoji.std-emoji .content {
  font-family: EmoticonFont;
}
.player-message.emoji:not(.std-emoji) .content,
.club-chat-message.emoji:not(.std-emoji) .content {
  text-shadow: 0 1px 3px black;
}
.player-message.emoji .content,
.club-chat-message.emoji .content {
  font-size: 36px;
  height: auto;
  line-height: normal;
  overflow: visible;
  top: 2px;
  white-space: nowrap;
  max-height: none;
}
@media (orientation: landscape) {
  .player-message,
  .club-chat-message {
    max-width: 30%;
  }
}
@media (min-width: 768px) {
  .player-message,
  .club-chat-message {
    max-width: 220px;
  }
}
.player-message:after,
.club-chat-message:after {
  border: transparent solid 5px;
  content: "";
  line-height: 0;
  position: absolute;
}
.player-message .content,
.club-chat-message .content {
  max-height: 42px;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.player-message .content .fa,
.club-chat-message .content .fa {
  margin: 0 2px;
}
.player-message .content .fa.prefix,
.club-chat-message .content .fa.prefix {
  margin-right: 6px;
}
.player-message .more,
.club-chat-message .more {
  bottom: 3px;
  position: absolute;
  right: 10px;
}
.player-message a[href],
.club-chat-message a[href] {
  color: inherit;
}
.player-message.club-chat-message,
.club-chat-message.club-chat-message {
  color: #004100;
  border-bottom-left-radius: 0;
}
body[data-board-color="blue"] .player-message.club-chat-message,
body[data-board-color="blue"] .club-chat-message.club-chat-message {
  color: #082f5e;
}
body[data-board-color="red"] .player-message.club-chat-message,
body[data-board-color="red"] .club-chat-message.club-chat-message {
  color: #891111;
}
body[data-board-color="charcoal"] .player-message.club-chat-message,
body[data-board-color="charcoal"] .club-chat-message.club-chat-message {
  color: #3e3e3e;
}
.player-message.club-chat-message:after,
.club-chat-message.club-chat-message:after {
  bottom: -9px;
  border-left-color: #8bce8b;
  border-top-color: #8bce8b;
  left: 0;
}
body[data-board-color="blue"] .player-message.club-chat-message:after,
body[data-board-color="blue"] .club-chat-message.club-chat-message:after {
  border-left-color: #b0becf;
}
body[data-board-color="red"] .player-message.club-chat-message:after,
body[data-board-color="red"] .club-chat-message.club-chat-message:after {
  border-left-color: #e0d3d3;
}
body[data-board-color="charcoal"] .player-message.club-chat-message:after,
body[data-board-color="charcoal"] .club-chat-message.club-chat-message:after {
  border-left-color: #cbcbcb;
}
body[data-board-color="black"] .player-message.club-chat-message:after,
body[data-board-color="black"] .club-chat-message.club-chat-message:after {
  border-left-color: black;
}
body[data-board-color="white"] .player-message.club-chat-message:after,
body[data-board-color="white"] .club-chat-message.club-chat-message:after {
  border-left-color: white;
}
body[data-board-color="blue"] .player-message.club-chat-message:after,
body[data-board-color="blue"] .club-chat-message.club-chat-message:after {
  border-top-color: #b0becf;
}
body[data-board-color="red"] .player-message.club-chat-message:after,
body[data-board-color="red"] .club-chat-message.club-chat-message:after {
  border-top-color: #e0d3d3;
}
body[data-board-color="charcoal"] .player-message.club-chat-message:after,
body[data-board-color="charcoal"] .club-chat-message.club-chat-message:after {
  border-top-color: #cbcbcb;
}
body[data-board-color="black"] .player-message.club-chat-message:after,
body[data-board-color="black"] .club-chat-message.club-chat-message:after {
  border-top-color: black;
}
body[data-board-color="white"] .player-message.club-chat-message:after,
body[data-board-color="white"] .club-chat-message.club-chat-message:after {
  border-top-color: white;
}
#chat {
  color: #004100;
}
body[data-board-color="blue"] #chat {
  color: #082f5e;
}
body[data-board-color="red"] #chat {
  color: #891111;
}
body[data-board-color="charcoal"] #chat {
  color: #3e3e3e;
}
#chat h1 {
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 60px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 20px;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: 62px;
  top: 0;
  white-space: nowrap;
}
#chat h1[hidden] {
  display: none;
}
#chat h1 .subtitle {
  font-size: 14px;
  font-weight: normal;
}
#chat h1 > div {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat h1 {
    height: 40px;
    left: 10px;
    right: 42px;
    top: 0;
  }
}
#chat .carousel .icon-button {
  border-radius: 3px;
}
#chat .carousel .icon-button.rotate.right[data-count]:after {
  background-color: #005a00;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  content: attr(data-count);
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 12px;
  height: 20px;
  left: -10px;
  line-height: 21px;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  text-align: center;
  top: 0px;
}
body[data-board-color="blue"] #chat .carousel .icon-button.rotate.right[data-count]:after {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat .carousel .icon-button.rotate.right[data-count]:after {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat .carousel .icon-button.rotate.right[data-count]:after {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat .carousel .icon-button.rotate.right[data-count]:after {
  background-color: black;
}
body[data-board-color="white"] #chat .carousel .icon-button.rotate.right[data-count]:after {
  background-color: white;
}
#chat .edit-presets {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 3px;
  bottom: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #005a00;
  display: inline-block;
  font-size: 18px;
  left: 10px;
  line-height: 0;
  min-width: 42px;
  opacity: 0;
  padding: 0 10px;
  position: absolute;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, transform, visibility;
  transition-property: opacity, transform, visibility, -webkit-transform;
  visibility: hidden;
  width: auto;
}
body[data-board-color="blue"] #chat .edit-presets {
  color: #0a3b76;
}
body[data-board-color="red"] #chat .edit-presets {
  color: #a01414;
}
body[data-board-color="charcoal"] #chat .edit-presets {
  color: #4b4b4b;
}
body[data-board-color="black"] #chat .edit-presets {
  color: black;
}
body[data-board-color="white"] #chat .edit-presets {
  color: white;
}
#chat .edit-presets .fa {
  margin-right: 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .edit-presets {
    bottom: 0;
    left: 0;
  }
}
#chat .edit-presets:focus {
  outline: none;
}
#chat .edit-presets:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#chat .carousel[data-current="Presets"] + .edit-presets {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  visibility: visible;
}
#chat.built-in-context .compose,
#chat.built-in-context .carousel[data-current="Messages"] .rotate.left {
  display: none;
}
#chat .add-video,
#chat .stop-video {
  border-radius: 3px;
  margin: 16px 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .add-video,
  #chat .stop-video {
    margin: 8px 10px;
  }
}
#chat .player-message.bottom {
  border-bottom-left-radius: 0;
  left: 50%;
  bottom: 110px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media (max-width: 479px) {
  #chat .player-message.bottom {
    bottom: 150px;
  }
}
@media (min-width: 480px) and (min-height: 480px) {
  #chat .player-message.bottom {
    bottom: 250px;
  }
}
body[data-layout="snapped"] #chat .player-message.bottom {
  margin-left: -160px;
}
#chat .player-message.bottom:after {
  bottom: -9px;
  border-left-color: #8bce8b;
  border-top-color: #8bce8b;
  left: 0;
}
body[data-board-color="blue"] #chat .player-message.bottom:after {
  border-left-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.bottom:after {
  border-left-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.bottom:after {
  border-left-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.bottom:after {
  border-left-color: black;
}
body[data-board-color="white"] #chat .player-message.bottom:after {
  border-left-color: white;
}
body[data-board-color="blue"] #chat .player-message.bottom:after {
  border-top-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.bottom:after {
  border-top-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.bottom:after {
  border-top-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.bottom:after {
  border-top-color: black;
}
body[data-board-color="white"] #chat .player-message.bottom:after {
  border-top-color: white;
}
#chat .player-message.left,
body[data-full-table-portrait] #chat .player-message.topleft {
  border-bottom-left-radius: 0;
  left: 10px;
  top: 60px;
}
#chat .player-message.left:after,
body[data-full-table-portrait] #chat .player-message.topleft:after {
  bottom: -9px;
  border-left-color: #8bce8b;
  border-top-color: #8bce8b;
  left: 0;
}
body[data-board-color="blue"] #chat .player-message.left:after,
body[data-board-color="blue"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-left-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.left:after,
body[data-board-color="red"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-left-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.left:after,
body[data-board-color="charcoal"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-left-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.left:after,
body[data-board-color="black"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-left-color: black;
}
body[data-board-color="white"] #chat .player-message.left:after,
body[data-board-color="white"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-left-color: white;
}
body[data-board-color="blue"] #chat .player-message.left:after,
body[data-board-color="blue"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-top-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.left:after,
body[data-board-color="red"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-top-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.left:after,
body[data-board-color="charcoal"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-top-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.left:after,
body[data-board-color="black"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-top-color: black;
}
body[data-board-color="white"] #chat .player-message.left:after,
body[data-board-color="white"] body[data-full-table-portrait] #chat .player-message.topleft:after {
  border-top-color: white;
}
@media (min-height: 480px) {
  #chat .player-message.left,
  body[data-full-table-portrait] #chat .player-message.topleft {
    margin-top: -160px;
    top: 50%;
  }
  body[data-full-table-portrait] [data-players="5"]#chat .player-message.left,
  body[data-full-table-portrait] [data-players="5"]#chat .player-message.topleft,
  body[data-full-table-portrait] [data-players="6"]#chat .player-message.left,
  body[data-full-table-portrait] [data-players="6"]#chat .player-message.topleft {
    margin-top: -90px;
  }
}
@media (min-width: 480px) and (min-height: 480px) {
  #chat .player-message.left,
  body[data-full-table-portrait] #chat .player-message.topleft {
    left: 50px;
  }
}
@media (min-width: 960px) and (min-height: 768px) {
  #chat .player-message.left,
  body[data-full-table-portrait] #chat .player-message.topleft {
    top: 50%;
    left: 145px;
    margin-top: -10px;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
body[data-full-table-portrait] [data-players="5"]#chat .player-message.left,
body[data-full-table-portrait] [data-players="6"]#chat .player-message.left {
  top: 62.5%;
}
body[data-full-table-portrait] #chat .player-message.topleft {
  top: 25%;
}
#chat .player-message.top,
body:not([data-full-table-portrait]) #chat .player-message.topleft,
body:not([data-full-table-portrait]) #chat .player-message.topright {
  border-top-left-radius: 0;
  left: 50%;
  top: 10px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#chat .player-message.top.topleft,
body:not([data-full-table-portrait]) #chat .player-message.topleft.topleft,
body:not([data-full-table-portrait]) #chat .player-message.topright.topleft {
  left: 25%;
}
#chat .player-message.top.topright,
body:not([data-full-table-portrait]) #chat .player-message.topleft.topright,
body:not([data-full-table-portrait]) #chat .player-message.topright.topright {
  left: 75%;
}
@media (min-height: 480px) {
  #chat .player-message.top,
  body:not([data-full-table-portrait]) #chat .player-message.topleft,
  body:not([data-full-table-portrait]) #chat .player-message.topright {
    top: 70px;
  }
}
@media (min-width: 480px) and (min-height: 480px) {
  #chat .player-message.top,
  body:not([data-full-table-portrait]) #chat .player-message.topleft,
  body:not([data-full-table-portrait]) #chat .player-message.topright {
    top: 150px;
  }
}
#chat .player-message.top:after,
body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  top: -9px;
  border-left-color: #8bce8b;
  border-bottom-color: #8bce8b;
  left: 0;
}
body[data-board-color="blue"] #chat .player-message.top:after,
body[data-board-color="blue"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="blue"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-left-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.top:after,
body[data-board-color="red"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="red"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-left-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.top:after,
body[data-board-color="charcoal"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="charcoal"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-left-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.top:after,
body[data-board-color="black"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="black"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-left-color: black;
}
body[data-board-color="white"] #chat .player-message.top:after,
body[data-board-color="white"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="white"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-left-color: white;
}
body[data-board-color="blue"] #chat .player-message.top:after,
body[data-board-color="blue"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="blue"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-bottom-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.top:after,
body[data-board-color="red"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="red"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-bottom-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.top:after,
body[data-board-color="charcoal"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="charcoal"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-bottom-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.top:after,
body[data-board-color="black"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="black"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-bottom-color: black;
}
body[data-board-color="white"] #chat .player-message.top:after,
body[data-board-color="white"] body:not([data-full-table-portrait]) #chat .player-message.topleft:after,
body[data-board-color="white"] body:not([data-full-table-portrait]) #chat .player-message.topright:after {
  border-bottom-color: white;
}
body[data-layout="snapped"] #chat .player-message.top {
  margin-left: -160px;
}
#chat .player-message.right,
body[data-full-table-portrait] #chat .player-message.topright {
  border-bottom-right-radius: 0;
  right: 10px;
  top: 60px;
}
#chat .player-message.right:after,
body[data-full-table-portrait] #chat .player-message.topright:after {
  bottom: -9px;
  border-right-color: #8bce8b;
  border-top-color: #8bce8b;
  right: 0;
}
body[data-board-color="blue"] #chat .player-message.right:after,
body[data-board-color="blue"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-right-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.right:after,
body[data-board-color="red"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-right-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.right:after,
body[data-board-color="charcoal"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-right-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.right:after,
body[data-board-color="black"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-right-color: black;
}
body[data-board-color="white"] #chat .player-message.right:after,
body[data-board-color="white"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-right-color: white;
}
body[data-board-color="blue"] #chat .player-message.right:after,
body[data-board-color="blue"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-top-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.right:after,
body[data-board-color="red"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-top-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.right:after,
body[data-board-color="charcoal"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-top-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.right:after,
body[data-board-color="black"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-top-color: black;
}
body[data-board-color="white"] #chat .player-message.right:after,
body[data-board-color="white"] body[data-full-table-portrait] #chat .player-message.topright:after {
  border-top-color: white;
}
@media (min-height: 480px) {
  #chat .player-message.right,
  body[data-full-table-portrait] #chat .player-message.topright {
    margin-top: -160px;
    top: 50%;
  }
  body[data-full-table-portrait] [data-players="5"]#chat .player-message.right,
  body[data-full-table-portrait] [data-players="5"]#chat .player-message.topright,
  body[data-full-table-portrait] [data-players="6"]#chat .player-message.right,
  body[data-full-table-portrait] [data-players="6"]#chat .player-message.topright {
    margin-top: -90px;
  }
}
@media (min-width: 480px) and (min-height: 480px) {
  #chat .player-message.right,
  body[data-full-table-portrait] #chat .player-message.topright {
    right: 50px;
  }
}
@media (min-width: 960px) and (min-height: 768px) {
  #chat .player-message.right,
  body[data-full-table-portrait] #chat .player-message.topright {
    top: 50%;
    right: 145px;
    margin-top: -10px;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
body[data-full-table-portrait] [data-players="5"]#chat .player-message.right,
body[data-full-table-portrait] [data-players="6"]#chat .player-message.right {
  top: 62.5%;
}
body[data-full-table-portrait] #chat .player-message.topright {
  top: 25%;
}
body[data-layout="snapped"] #chat .player-message.right,
body[data-layout="snapped"][data-full-table-portrait] #chat .player-message.topright {
  right: 330px;
}
#chat .player-message.watching {
  border-top-right-radius: 0;
  right: 31px;
  top: 62px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .player-message.watching {
    right: 21px;
    top: 52px;
  }
}
#chat .player-message.watching:after {
  top: -9px;
  border-right-color: #8bce8b;
  border-bottom-color: #8bce8b;
  right: 0;
}
body[data-board-color="blue"] #chat .player-message.watching:after {
  border-right-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.watching:after {
  border-right-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.watching:after {
  border-right-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.watching:after {
  border-right-color: black;
}
body[data-board-color="white"] #chat .player-message.watching:after {
  border-right-color: white;
}
body[data-board-color="blue"] #chat .player-message.watching:after {
  border-bottom-color: #b0becf;
}
body[data-board-color="red"] #chat .player-message.watching:after {
  border-bottom-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .player-message.watching:after {
  border-bottom-color: #cbcbcb;
}
body[data-board-color="black"] #chat .player-message.watching:after {
  border-bottom-color: black;
}
body[data-board-color="white"] #chat .player-message.watching:after {
  border-bottom-color: white;
}
#chat .panel {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #e6ece6;
  bottom: 0;
  -webkit-box-shadow: -8px 0 6px rgba(0, 0, 0, 0.25);
          box-shadow: -8px 0 6px rgba(0, 0, 0, 0.25);
  color: #004100;
  overflow: hidden;
  -webkit-perspective: 500px;
          perspective: 500px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 320px;
}
body[data-board-color="blue"] #chat .panel {
  background-color: #e7eaee;
}
body[data-board-color="red"] #chat .panel {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] #chat .panel {
  background-color: #ebebeb;
}
body[data-board-color="black"] #chat .panel {
  background-color: black;
}
body[data-board-color="white"] #chat .panel {
  background-color: white;
}
body[data-board-color="blue"] #chat .panel {
  color: #082f5e;
}
body[data-board-color="red"] #chat .panel {
  color: #891111;
}
body[data-board-color="charcoal"] #chat .panel {
  color: #3e3e3e;
}
@media (max-width: 340px) {
  #chat .panel {
    width: 300px;
  }
}
@media (min-width: 1200px) {
  #chat .panel {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
#chat .panel[hidden] {
  display: block;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition-property: visibility, -webkit-transform;
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  visibility: hidden;
}
#chat .panel > .content {
  bottom: 0;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 60px;
}
.disabled#chat .panel > .content {
  visibility: hidden;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .panel > .content {
    top: 42px;
  }
}
#chat .panel > .content .presets {
  height: 100%;
}
#chat .panel > .content .presets .actions {
  font-size: 0;
  position: absolute;
  left: 20px;
  bottom: 0;
  right: 20px;
}
#chat .panel > .content .presets .actions button {
  color: #005a00;
  border: none;
  border-radius: 3px;
  font-size: 28px;
  height: 40px;
  width: 50%;
}
body[data-board-color="blue"] #chat .panel > .content .presets .actions button {
  color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .presets .actions button {
  color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .presets .actions button {
  color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .presets .actions button {
  color: black;
}
body[data-board-color="white"] #chat .panel > .content .presets .actions button {
  color: white;
}
#chat .panel > .content .presets .actions button:disabled {
  opacity: 0.2;
}
#chat .panel > .content .presets .actions button:hover:not(:disabled),
#chat .panel > .content .presets .actions button:focus:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.1);
  outline: none;
}
#chat .panel > .content .presets .actions button:hover:not(:disabled):active,
#chat .panel > .content .presets .actions button:focus:not(:disabled):active {
  background-color: #fff;
}
#chat .panel > .content ul {
  margin: 0;
  padding: 0;
}
#chat .panel > .content ul.scroller {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 40px;
}
#chat .panel > .content ul li {
  display: block;
}
#chat .panel > .content ul li[hidden] {
  display: none;
}
#chat .panel > .content ul li .preset {
  color: #005a00;
}
body[data-board-color="blue"] #chat .panel > .content ul li .preset {
  color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content ul li .preset {
  color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content ul li .preset {
  color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content ul li .preset {
  color: black;
}
body[data-board-color="white"] #chat .panel > .content ul li .preset {
  color: white;
}
#chat .panel > .content ul li .preset:not(.emoji-wrapper) {
  display: block;
  line-height: 50px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
#chat .panel > .content ul li .preset:not(.emoji-wrapper):before {
  content: "\201c";
}
#chat .panel > .content ul li .preset:not(.emoji-wrapper):after {
  content: "\201d";
}
#chat .panel > .content ul li .preset:hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #chat .panel > .content ul li .preset:hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #chat .panel > .content ul li .preset:hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .panel > .content ul li .preset:hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #chat .panel > .content ul li .preset:hover {
  background-color: black;
}
body[data-board-color="white"] #chat .panel > .content ul li .preset:hover {
  background-color: white;
}
#chat .panel > .content ul li .preset:hover:active {
  background-color: #005a00;
  color: #fff;
}
body[data-board-color="blue"] #chat .panel > .content ul li .preset:hover:active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content ul li .preset:hover:active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content ul li .preset:hover:active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content ul li .preset:hover:active {
  background-color: black;
}
body[data-board-color="white"] #chat .panel > .content ul li .preset:hover:active {
  background-color: white;
}
#chat .panel > .content ul li.group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 10px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 10px;
}
#chat .panel > .content ul li.group a:before,
#chat .panel > .content ul li.group a:after {
  content: none;
}
#chat .panel > .content ul li.line:before {
  border-top: 1px solid;
  border-color: rgba(0, 90, 0, 0.5);
  content: "";
  display: block;
  margin: 0 20px;
}
body[data-board-color="blue"] #chat .panel > .content ul li.line:before {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #chat .panel > .content ul li.line:before {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #chat .panel > .content ul li.line:before {
  border-color: rgba(75, 75, 75, 0.5);
}
#chat .panel > .content .history > .content {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 60px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .panel > .content .history > .content {
    bottom: 42px;
  }
}
.built-in-context#chat .panel > .content .history > .content {
  bottom: 0;
}
#chat .panel > .content .history > .content > table {
  height: 100%;
  width: 100%;
}
#chat .panel > .content .history > .content > table td.messages {
  padding: 0 10px;
  vertical-align: bottom;
}
#chat .panel > .content .history .message {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  clear: both;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  padding-top: 6px;
  position: relative;
  white-space: pre-wrap;
  width: 220px;
  word-wrap: break-word;
}
.built-in-context#chat .panel > .content .history .message {
  width: 90%;
}
#chat .panel > .content .history .message[data-time]:before {
  color: #555;
  content: attr(data-time);
  font-size: 12px;
  position: absolute;
  top: -18px;
}
#chat .panel > .content .history .message:after {
  border: transparent solid 5px;
  bottom: -9px;
  content: "";
  line-height: 0;
  position: absolute;
}
#chat .panel > .content .history .message[data-audio] {
  cursor: pointer;
}
#chat .panel > .content .history .message .emoji {
  font-size: 36px;
}
#chat .panel > .content .history .message .emoji.std-emoji {
  font-family: EmoticonFont;
}
#chat .panel > .content .history .message .emoji:not(.std-emoji) {
  text-shadow: 0 1px 3px black;
}
#chat .panel > .content .history .message.received {
  background-color: #8bce8b;
  border-bottom-left-radius: 0;
  float: left;
}
body[data-board-color="blue"] #chat .panel > .content .history .message.received {
  background-color: #b0becf;
}
body[data-board-color="red"] #chat .panel > .content .history .message.received {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message.received {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #chat .panel > .content .history .message.received {
  background-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .message.received {
  background-color: white;
}
#chat .panel > .content .history .message.received:before {
  left: 10px;
}
#chat .panel > .content .history .message.received:after {
  border-left-color: #8bce8b;
  border-top-color: #8bce8b;
  left: 0;
}
body[data-board-color="blue"] #chat .panel > .content .history .message.received:after {
  border-left-color: #b0becf;
}
body[data-board-color="red"] #chat .panel > .content .history .message.received:after {
  border-left-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message.received:after {
  border-left-color: #cbcbcb;
}
body[data-board-color="black"] #chat .panel > .content .history .message.received:after {
  border-left-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .message.received:after {
  border-left-color: white;
}
body[data-board-color="blue"] #chat .panel > .content .history .message.received:after {
  border-top-color: #b0becf;
}
body[data-board-color="red"] #chat .panel > .content .history .message.received:after {
  border-top-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message.received:after {
  border-top-color: #cbcbcb;
}
body[data-board-color="black"] #chat .panel > .content .history .message.received:after {
  border-top-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .message.received:after {
  border-top-color: white;
}
#chat .panel > .content .history .message.sent {
  background-color: #005a00;
  border-bottom-right-radius: 0;
  color: #fff;
  float: right;
}
body[data-board-color="blue"] #chat .panel > .content .history .message.sent {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .history .message.sent {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message.sent {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .history .message.sent {
  background-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .message.sent {
  background-color: white;
}
#chat .panel > .content .history .message.sent:before {
  right: 10px;
}
#chat .panel > .content .history .message.sent:after {
  border-top-color: #005a00;
  border-right-color: #005a00;
  right: 0;
}
body[data-board-color="blue"] #chat .panel > .content .history .message.sent:after {
  border-top-color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .history .message.sent:after {
  border-top-color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message.sent:after {
  border-top-color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .history .message.sent:after {
  border-top-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .message.sent:after {
  border-top-color: white;
}
body[data-board-color="blue"] #chat .panel > .content .history .message.sent:after {
  border-right-color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .history .message.sent:after {
  border-right-color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message.sent:after {
  border-right-color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .history .message.sent:after {
  border-right-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .message.sent:after {
  border-right-color: white;
}
#chat .panel > .content .history .message.sent .name {
  display: none;
}
#chat .panel > .content .history .message .name {
  font-weight: 500;
}
#chat .panel > .content .history .message .name:after {
  content: ":";
  margin-right: 0.25em;
}
#chat .panel > .content .history .message .emoji {
  margin-top: 4px;
}
#chat .panel > .content .history .message a[href] {
  color: inherit;
}
#chat .panel > .content .history .message button {
  display: block;
  margin: 0 auto;
}
#chat .panel > .content .history .message .delete {
  bottom: 0;
  display: none;
  position: absolute;
  right: -48px;
  top: 0;
  width: 48px;
}
#chat .panel > .content .history .message .delete button {
  border: none;
  border-radius: 50%;
  color: #004100;
  cursor: pointer;
  height: 30px;
  left: 4px;
  min-width: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 30px;
}
body[data-board-color="blue"] #chat .panel > .content .history .message .delete button {
  color: #082f5e;
}
body[data-board-color="red"] #chat .panel > .content .history .message .delete button {
  color: #891111;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .message .delete button {
  color: #3e3e3e;
}
#chat .panel > .content .history .message .delete button:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#chat .panel > .content .history .message:focus-within .delete,
#chat .panel > .content .history .message:hover .delete {
  display: block;
}
#chat .panel > .content .history .status {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  float: left;
  font-size: 14px;
  color: #555;
  padding: 10px;
  width: 280px;
  word-wrap: break-word;
}
#chat .panel > .content .history .status[hidden] {
  display: none;
}
#chat .panel > .content .history .status a,
#chat .panel > .content .history .status button {
  color: #004100;
  text-decoration: underline;
}
body[data-board-color="blue"] #chat .panel > .content .history .status a,
body[data-board-color="blue"] #chat .panel > .content .history .status button {
  color: #082f5e;
}
body[data-board-color="red"] #chat .panel > .content .history .status a,
body[data-board-color="red"] #chat .panel > .content .history .status button {
  color: #891111;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .status a,
body[data-board-color="charcoal"] #chat .panel > .content .history .status button {
  color: #3e3e3e;
}
#chat .panel > .content .history .status td {
  display: inline;
}
#chat .panel > .content .history .status td button {
  border: none;
  display: inline;
  font-size: inherit;
  min-height: 0;
  min-width: 0;
  padding: 0;
}
#chat .panel > .content .history .compose {
  bottom: 0;
  height: 60px;
  left: 0;
  position: absolute;
  right: 0;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .panel > .content .history .compose {
    height: 42px;
  }
}
#chat .panel > .content .history .compose .input {
  bottom: 0;
  display: block;
  left: 10px;
  position: absolute;
  right: 10px;
  top: 4px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .panel > .content .history .compose .input {
    bottom: 0;
    left: 4px;
    right: 4px;
    top: 2px;
  }
}
#chat .panel > .content .history .compose .input textarea {
  border: 1px solid #ccc;
  border-color: #005a00;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  font-size: 16px;
  height: 100%;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 40px;
  resize: none;
  width: 100%;
}
body[data-board-color="blue"] #chat .panel > .content .history .compose .input textarea {
  border-color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .history .compose .input textarea {
  border-color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .compose .input textarea {
  border-color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .history .compose .input textarea {
  border-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .compose .input textarea {
  border-color: white;
}
#chat .panel > .content .history .compose .input textarea:disabled {
  background-color: #eee;
  border-color: #ccc;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .panel > .content .history .compose .input textarea {
    font-size: 14px;
    padding-left: 6px;
  }
}
#chat .panel > .content .history .compose .input textarea:focus {
  outline: none;
}
#chat .panel > .content .history .compose .action {
  bottom: 8px;
  position: absolute;
  right: 12px;
  width: 42px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .panel > .content .history .compose .action {
    bottom: 0;
    right: 4px;
  }
}
#chat .panel > .content .history .compose .action button {
  background-color: transparent;
  color: #005a00;
}
body[data-board-color="blue"] #chat .panel > .content .history .compose .action button {
  color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .history .compose .action button {
  color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .compose .action button {
  color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .history .compose .action button {
  color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .compose .action button {
  color: white;
}
#chat .panel > .content .history .compose .action button:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#chat .panel > .content .history .compose .action button:active {
  background-color: #005a00;
  color: #fff;
}
body[data-board-color="blue"] #chat .panel > .content .history .compose .action button:active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat .panel > .content .history .compose .action button:active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat .panel > .content .history .compose .action button:active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat .panel > .content .history .compose .action button:active {
  background-color: black;
}
body[data-board-color="white"] #chat .panel > .content .history .compose .action button:active {
  background-color: white;
}
#chat .panel > .content .history .compose .action button:disabled {
  background-color: transparent;
  color: #ccc;
}
#chat .panel > .content .history .compose .action .count {
  font-size: 11px;
  line-height: 10px;
}
#chat .panel > .content .history .compose .action .count:before {
  content: attr(data-value);
}
#chat .panel > .content .history .compose .action .count:after {
  content: "/160";
}
#chat .chats .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#chat .chats .spinner {
  color: #005a00;
  font-size: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
}
body[data-board-color="blue"] #chat .chats .spinner {
  color: #0a3b76;
}
body[data-board-color="red"] #chat .chats .spinner {
  color: #a01414;
}
body[data-board-color="charcoal"] #chat .chats .spinner {
  color: #4b4b4b;
}
body[data-board-color="black"] #chat .chats .spinner {
  color: black;
}
body[data-board-color="white"] #chat .chats .spinner {
  color: white;
}
#chat .chats h2 {
  margin: 0 20px 4px;
  font-size: 16px;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .chats h2 {
    margin: 0 10px 4px;
  }
}
#chat .chats .friend + h2 {
  margin-top: 20px;
}
#chat .chats .friend {
  border-bottom: 1px solid;
  border-top: 1px solid;
  border-color: rgba(0, 90, 0, 0.5);
  color: inherit;
  display: block;
  margin: 0 20px;
  padding: 2px 8px 4px;
  position: relative;
  text-decoration: none;
}
body[data-board-color="blue"] #chat .chats .friend {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #chat .chats .friend {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #chat .chats .friend {
  border-color: rgba(75, 75, 75, 0.5);
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .chats .friend {
    margin: 0 10px;
  }
}
#chat .chats .friend:hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #chat .chats .friend:hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #chat .chats .friend:hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #chat .chats .friend:hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #chat .chats .friend:hover {
  background-color: black;
}
body[data-board-color="white"] #chat .chats .friend:hover {
  background-color: white;
}
#chat .chats .friend + .friend {
  border-top: none;
}
#chat .chats .friend[data-count]:after {
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: attr(data-count);
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: 8px;
  text-align: center;
  text-shadow: none;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#chat .chats .friend[data-count]:not([data-name-tag="none"]):after {
  background-color: #fff;
  color: #004100;
}
body[data-board-color="blue"] #chat .chats .friend[data-count]:not([data-name-tag="none"]):after {
  color: #082f5e;
}
body[data-board-color="red"] #chat .chats .friend[data-count]:not([data-name-tag="none"]):after {
  color: #891111;
}
body[data-board-color="charcoal"] #chat .chats .friend[data-count]:not([data-name-tag="none"]):after {
  color: #3e3e3e;
}
#chat .chats .friend[data-count][data-name-tag="none"]:after {
  background-color: #005a00;
  color: #fff;
}
body[data-board-color="blue"] #chat .chats .friend[data-count][data-name-tag="none"]:after {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat .chats .friend[data-count][data-name-tag="none"]:after {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat .chats .friend[data-count][data-name-tag="none"]:after {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat .chats .friend[data-count][data-name-tag="none"]:after {
  background-color: black;
}
body[data-board-color="white"] #chat .chats .friend[data-count][data-name-tag="none"]:after {
  background-color: white;
}
#chat .chats .vip-promo {
  margin: 0 20px;
}
#chat .chats .vip-promo a {
  color: #004100;
  text-decoration: underline;
}
body[data-board-color="blue"] #chat .chats .vip-promo a {
  color: #082f5e;
}
body[data-board-color="red"] #chat .chats .vip-promo a {
  color: #891111;
}
body[data-board-color="charcoal"] #chat .chats .vip-promo a {
  color: #3e3e3e;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat .chats .vip-promo {
    margin: 0 10px;
  }
}
#chat-toggle {
  position: absolute;
  right: 10px;
  top: 10px;
}
#chat.disabled #chat-toggle {
  opacity: 0.5;
}
@media (max-width: 479px), (max-height: 479px) {
  #chat-toggle {
    right: 0;
    top: 0;
  }
}
#chat-toggle:before {
  position: relative;
  top: -1px;
}
#chat-toggle[data-count]:after {
  background-color: #005a00;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  content: attr(data-count);
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 12px;
  height: 20px;
  line-height: 21px;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: 0px;
  text-align: center;
  top: 0px;
}
body[data-board-color="blue"] #chat-toggle[data-count]:after {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat-toggle[data-count]:after {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat-toggle[data-count]:after {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat-toggle[data-count]:after {
  background-color: black;
}
body[data-board-color="white"] #chat-toggle[data-count]:after {
  background-color: white;
}
#chat-toggle.open {
  color: #005a00;
}
body[data-board-color="blue"] #chat-toggle.open {
  color: #0a3b76;
}
body[data-board-color="red"] #chat-toggle.open {
  color: #a01414;
}
body[data-board-color="charcoal"] #chat-toggle.open {
  color: #4b4b4b;
}
body[data-board-color="black"] #chat-toggle.open {
  color: black;
}
body[data-board-color="white"] #chat-toggle.open {
  color: white;
}
#chat-toggle.open[data-count]:after {
  display: none;
}
#chat-toggle.open:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#chat-toggle.open:active {
  background-color: #005a00;
  color: #fff !important;
}
body[data-board-color="blue"] #chat-toggle.open:active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #chat-toggle.open:active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #chat-toggle.open:active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #chat-toggle.open:active {
  background-color: black;
}
body[data-board-color="white"] #chat-toggle.open:active {
  background-color: white;
}
#menu #chips .top-supporter,
#menu #vip-pass .top-supporter {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-image: -webkit-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
  border: 1px solid;
  border-top: none;
  border-color: rgba(0, 90, 0, 0.5);
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  margin: -8px 0 4px;
  padding: 8px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
body[data-board-color="blue"] #menu #chips .top-supporter,
body[data-board-color="blue"] #menu #vip-pass .top-supporter {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu #chips .top-supporter,
body[data-board-color="red"] #menu #vip-pass .top-supporter {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu #chips .top-supporter,
body[data-board-color="charcoal"] #menu #vip-pass .top-supporter {
  border-color: rgba(75, 75, 75, 0.5);
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #chips .top-supporter,
  #menu #vip-pass .top-supporter {
    font-size: 14px;
  }
}
#menu #chips .top-supporter[hidden],
#menu #vip-pass .top-supporter[hidden] {
  display: none;
}
#menu #chips .top-supporter a,
#menu #vip-pass .top-supporter a {
  color: yellow;
}
#menu #chips .top-supporter,
#menu #vip-pass .top-supporter {
  background-color: #004100;
}
body[data-board-color="blue"] #menu #chips .top-supporter,
body[data-board-color="blue"] #menu #vip-pass .top-supporter {
  background-color: #082f5e;
}
body[data-board-color="red"] #menu #chips .top-supporter,
body[data-board-color="red"] #menu #vip-pass .top-supporter {
  background-color: #891111;
}
body[data-board-color="charcoal"] #menu #chips .top-supporter,
body[data-board-color="charcoal"] #menu #vip-pass .top-supporter {
  background-color: #3e3e3e;
}
#menu #chips .balance-section,
#menu #vip-pass .balance-section {
  margin-bottom: 30px;
}
#menu #chips .balance-section .fineprint,
#menu #vip-pass .balance-section .fineprint {
  margin-top: 4px;
}
#menu #chips .balance-area,
#menu #vip-pass .balance-area {
  background-color: rgba(0, 90, 0, 0.25);
  border-radius: 3px;
  font-size: 24px;
  padding: 10px;
  text-align: center;
}
body[data-board-color="blue"] #menu #chips .balance-area,
body[data-board-color="blue"] #menu #vip-pass .balance-area {
  background-color: rgba(10, 59, 118, 0.25);
}
body[data-board-color="red"] #menu #chips .balance-area,
body[data-board-color="red"] #menu #vip-pass .balance-area {
  background-color: rgba(160, 20, 20, 0.25);
}
body[data-board-color="charcoal"] #menu #chips .balance-area,
body[data-board-color="charcoal"] #menu #vip-pass .balance-area {
  background-color: rgba(75, 75, 75, 0.25);
}
#menu #chips .fineprint,
#menu #vip-pass .fineprint {
  font-size: 12px;
}
#menu #chips .fineprint.currency,
#menu #vip-pass .fineprint.currency {
  float: right;
  margin-top: 4px;
}
#menu #chips .purchase-status p,
#menu #vip-pass .purchase-status p {
  white-space: pre-wrap;
}
#menu #chips .purchase-status .actions,
#menu #vip-pass .purchase-status .actions {
  text-align: right;
}
#menu #chips .purchase-status .ad-free-offer .actions,
#menu #vip-pass .purchase-status .ad-free-offer .actions {
  text-align: left;
  margin-top: 10px;
}
#menu #chips .purchase-status .ad-free-offer .actions button,
#menu #vip-pass .purchase-status .ad-free-offer .actions button {
  width: 48%;
}
#menu #chips .purchase-status .ad-free-offer .actions button:last-child,
#menu #vip-pass .purchase-status .ad-free-offer .actions button:last-child {
  float: right;
}
#menu #chips .details,
#menu #vip-pass .details {
  margin-bottom: 30px;
}
#menu #chips .earn,
#menu #vip-pass .earn {
  margin-bottom: 30px;
}
#menu #chips .earn h2,
#menu #vip-pass .earn h2 {
  margin-bottom: 4px;
}
#menu #chips .buy,
#menu #vip-pass .buy {
  margin-bottom: 40px;
}
#menu #chips .gift-option,
#menu #vip-pass .gift-option {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 90, 0, 0.1);
  border: 1px solid;
  border-color: rgba(0, 90, 0, 0.5);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 5px;
  padding: 8px 7px;
}
body[data-board-color="blue"] #menu #chips .gift-option,
body[data-board-color="blue"] #menu #vip-pass .gift-option {
  background-color: rgba(10, 59, 118, 0.1);
}
body[data-board-color="red"] #menu #chips .gift-option,
body[data-board-color="red"] #menu #vip-pass .gift-option {
  background-color: rgba(160, 20, 20, 0.1);
}
body[data-board-color="charcoal"] #menu #chips .gift-option,
body[data-board-color="charcoal"] #menu #vip-pass .gift-option {
  background-color: rgba(75, 75, 75, 0.1);
}
body[data-board-color="blue"] #menu #chips .gift-option,
body[data-board-color="blue"] #menu #vip-pass .gift-option {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu #chips .gift-option,
body[data-board-color="red"] #menu #vip-pass .gift-option {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu #chips .gift-option,
body[data-board-color="charcoal"] #menu #vip-pass .gift-option {
  border-color: rgba(75, 75, 75, 0.5);
}
#menu #chips .gift-option[hidden],
#menu #vip-pass .gift-option[hidden] {
  display: none;
}
#menu #chips .items,
#menu #vip-pass .items {
  margin-bottom: 8px;
  padding: 0;
}
#menu #chips .items .item,
#menu #vip-pass .items .item {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: rgba(0, 90, 0, 0.5);
  clear: both;
  display: block;
  padding: 8px 0;
}
body[data-board-color="blue"] #menu #chips .items .item,
body[data-board-color="blue"] #menu #vip-pass .items .item {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu #chips .items .item,
body[data-board-color="red"] #menu #vip-pass .items .item {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu #chips .items .item,
body[data-board-color="charcoal"] #menu #vip-pass .items .item {
  border-color: rgba(75, 75, 75, 0.5);
}
#menu #chips .items .item button,
#menu #vip-pass .items .item button {
  float: right;
  margin-top: 4px;
  padding: 2px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #chips .items .item button,
  #menu #vip-pass .items .item button {
    margin-top: 3px;
    min-width: 80px;
  }
}
@media (max-width: 340px) {
  #menu #chips .items .item button,
  #menu #vip-pass .items .item button {
    min-width: 60px;
  }
}
#menu #chips .items .item button.free,
#menu #vip-pass .items .item button.free {
  background-color: #004100;
  background-image: -webkit-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
  border-color: #004100;
  color: #fff;
}
body[data-board-color="blue"] #menu #chips .items .item button.free,
body[data-board-color="blue"] #menu #vip-pass .items .item button.free {
  background-color: #082f5e;
}
body[data-board-color="red"] #menu #chips .items .item button.free,
body[data-board-color="red"] #menu #vip-pass .items .item button.free {
  background-color: #891111;
}
body[data-board-color="charcoal"] #menu #chips .items .item button.free,
body[data-board-color="charcoal"] #menu #vip-pass .items .item button.free {
  background-color: #3e3e3e;
}
body[data-board-color="blue"] #menu #chips .items .item button.free,
body[data-board-color="blue"] #menu #vip-pass .items .item button.free {
  border-color: #082f5e;
}
body[data-board-color="red"] #menu #chips .items .item button.free,
body[data-board-color="red"] #menu #vip-pass .items .item button.free {
  border-color: #891111;
}
body[data-board-color="charcoal"] #menu #chips .items .item button.free,
body[data-board-color="charcoal"] #menu #vip-pass .items .item button.free {
  border-color: #3e3e3e;
}
#menu #chips .items .item button .fa,
#menu #vip-pass .items .item button .fa {
  float: right;
  margin: 0 4px;
}
#menu #chips .items .item button:disabled,
#menu #vip-pass .items .item button:disabled {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-weight: 500;
  opacity: 1;
}
#menu #chips .items .item .savings,
#menu #vip-pass .items .item .savings {
  background-color: #8bce8b;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  float: right;
  line-height: 16px;
  margin-right: 10px;
  max-width: 60px;
  padding: 4px 10px 4px 18px;
  text-align: center;
  text-indent: -8px;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
body[data-board-color="blue"] #menu #chips .items .item .savings,
body[data-board-color="blue"] #menu #vip-pass .items .item .savings {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu #chips .items .item .savings,
body[data-board-color="red"] #menu #vip-pass .items .item .savings {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu #chips .items .item .savings,
body[data-board-color="charcoal"] #menu #vip-pass .items .item .savings {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu #chips .items .item .savings,
body[data-board-color="black"] #menu #vip-pass .items .item .savings {
  background-color: black;
}
body[data-board-color="white"] #menu #chips .items .item .savings,
body[data-board-color="white"] #menu #vip-pass .items .item .savings {
  background-color: white;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #chips .items .item .savings,
  #menu #vip-pass .items .item .savings {
    margin-right: 5px;
    margin-top: -1px;
    max-width: 56px;
  }
}
#menu #chips .items .item .savings:empty,
#menu #vip-pass .items .item .savings:empty {
  display: none;
}
#menu #chips .items .item .savings.per-day,
#menu #vip-pass .items .item .savings.per-day {
  max-width: unset;
  text-indent: -3px;
  padding: 3px 12px 5px 14px;
}
#menu #chips .items .item .savings.per-day .not-bold,
#menu #vip-pass .items .item .savings.per-day .not-bold {
  font-weight: normal;
}
#menu #chips .items .item .name,
#menu #vip-pass .items .item .name {
  font-weight: 500;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #chips .items .item .name,
  #menu #vip-pass .items .item .name {
    font-size: 14px;
  }
}
#menu #chips .items .item .info,
#menu #vip-pass .items .item .info {
  font-size: 14px;
  white-space: nowrap;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #chips .items .item .info,
  #menu #vip-pass .items .item .info {
    font-size: 12px;
  }
}
#menu #chips .account-needed .actions,
#menu #vip-pass .account-needed .actions {
  display: block;
  text-align: right;
}
#menu #chips .transactions,
#menu #vip-pass .transactions {
  margin-bottom: 20px;
}
#menu #chips .transactions .history,
#menu #vip-pass .transactions .history {
  margin-bottom: 10px;
}
#menu #chips .transactions .history a.gift-code,
#menu #vip-pass .transactions .history a.gift-code {
  display: block;
}
#menu #chips .transactions .history td,
#menu #vip-pass .transactions .history td,
#menu #chips .transactions .history th,
#menu #vip-pass .transactions .history th {
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 0;
  padding-top: 6px;
  text-align: right;
  vertical-align: middle;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #chips .transactions .history td,
  #menu #vip-pass .transactions .history td,
  #menu #chips .transactions .history th,
  #menu #vip-pass .transactions .history th {
    font-size: 14px;
  }
}
#menu #chips .transactions .history td:first-child,
#menu #vip-pass .transactions .history td:first-child,
#menu #chips .transactions .history th:first-child,
#menu #vip-pass .transactions .history th:first-child {
  padding-left: 0;
  text-align: left;
}
#menu #chips .transactions .history td .date,
#menu #vip-pass .transactions .history td .date,
#menu #chips .transactions .history th .date,
#menu #vip-pass .transactions .history th .date {
  font-size: 12px;
}
.participant {
  display: none;
  overflow: hidden;
  position: absolute;
}
body.video .participant.bottom,
body.video .participant.left,
body.video .participant.right,
body.video .participant.top {
  display: block;
}
.participant.bottom {
  top: 0;
  right: 0;
  height: 62px;
  width: 62px;
  border-bottom-left-radius: 5px;
  cursor: pointer;
}
.participant.bottom video {
  -webkit-transform: translate(-50%, -50%) rotateY(180deg);
          transform: translate(-50%, -50%) rotateY(180deg);
}
@media (max-width: 479px), (max-height: 479px) {
  .participant.bottom {
    height: 42px;
    width: 42px;
  }
}
.participant.empty {
  background-size: cover;
  background-position: center;
  background-image: -webkit-radial-gradient(center 40%, ellipse, #fff 0, #555 200%);
  background-image: radial-gradient(ellipse at center 40%, #fff 0, #555 200%);
}
.participant.empty:before {
  content: "";
  position: absolute;
  top: 80%;
  left: 15%;
  right: 15%;
  bottom: -40%;
  background-color: #aaa;
  border-radius: 20%;
}
.participant .status {
  color: #aaa;
  font-size: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.participant .track-status {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
}
.participant .track-status[hidden] {
  opacity: 0;
}
@media (orientation: portrait) {
  .participant {
    top: 0;
    width: 33.333vw;
    height: 33.333vw;
  }
  .participant.top {
    left: 33.333vw;
  }
  .participant.left {
    left: 0;
  }
  .participant.right {
    right: 0;
  }
  .participant.bottom {
    top: 33.333vw;
  }
}
@media (orientation: landscape) {
  .participant {
    right: 0;
    width: 33.333vh;
    height: 33.333vh;
  }
  .participant.top {
    top: 0;
  }
  .participant.left {
    bottom: 0;
  }
  .participant.right {
    top: 33.333vh;
  }
  .participant.bottom {
    right: 33.333vh;
  }
}
.participant video {
  height: 100%;
  width: auto;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.participant video.portrait {
  height: auto;
  width: 100%;
}
.countdown {
  z-index: 0;
}
.countdown svg {
  height: 100%;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.countdown svg text {
  fill: rgba(0, 0, 0, 0.5);
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-weight: bold;
}
body:not(.embedded) .only-embedded {
  display: none !important;
}
body.embedded .install-button,
body.embedded .install-link,
body.embedded .icon-button[data-action='back'],
body.embedded #current-user,
body.embedded .not-embedded {
  display: none !important;
}
body.embedded #lessons,
body.embedded #welcome,
body.embedded #loading {
  padding-top: 0 !important;
}
body.embedded #lessons div.header,
body.embedded #welcome div.header,
body.embedded #loading div.header,
body.embedded #lessons h3.game-list-header,
body.embedded #welcome h3.game-list-header,
body.embedded #loading h3.game-list-header {
  display: none !important;
}
body.embedded #lessons div.subtitle,
body.embedded #welcome div.subtitle,
body.embedded #loading div.subtitle {
  margin-top: 0;
}
body.embedded #lessons:before,
body.embedded #welcome:before,
body.embedded #loading:before {
  height: 0 !important;
  margin-top: 0 !important;
}
.option {
  background-color: #fff;
  border-color: #005a00;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  border-top-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #005a00;
  cursor: pointer;
  display: block;
  margin-bottom: 0;
  margin-top: 0;
  min-height: 40px;
  padding: 8px;
  position: relative;
  text-align: left;
  text-decoration: none !important;
  width: 100%;
}
body[data-board-color="blue"] .option {
  border-color: #0a3b76;
}
body[data-board-color="red"] .option {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .option {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .option {
  border-color: black;
}
body[data-board-color="white"] .option {
  border-color: white;
}
body[data-board-color="blue"] .option {
  color: #0a3b76;
}
body[data-board-color="red"] .option {
  color: #a01414;
}
body[data-board-color="charcoal"] .option {
  color: #4b4b4b;
}
body[data-board-color="black"] .option {
  color: black;
}
body[data-board-color="white"] .option {
  color: white;
}
a.option[href] {
  color: #005a00;
}
body[data-board-color="blue"] a.option[href] {
  color: #0a3b76;
}
body[data-board-color="red"] a.option[href] {
  color: #a01414;
}
body[data-board-color="charcoal"] a.option[href] {
  color: #4b4b4b;
}
body[data-board-color="black"] a.option[href] {
  color: black;
}
body[data-board-color="white"] a.option[href] {
  color: white;
}
.option:disabled {
  cursor: default;
}
.option:focus:not(:disabled) {
  outline: none;
}
.option:hover:not(:disabled).name-tag:not([data-name-tag="none"]):before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
.option:hover:not(:disabled):not(.name-tag),
.option:hover:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #8bce8b;
}
body[data-board-color="blue"] .option:hover:not(:disabled):not(.name-tag),
body[data-board-color="blue"] .option:hover:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #b0becf;
}
body[data-board-color="red"] .option:hover:not(:disabled):not(.name-tag),
body[data-board-color="red"] .option:hover:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .option:hover:not(:disabled):not(.name-tag),
body[data-board-color="charcoal"] .option:hover:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .option:hover:not(:disabled):not(.name-tag),
body[data-board-color="black"] .option:hover:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: black;
}
body[data-board-color="white"] .option:hover:not(:disabled):not(.name-tag),
body[data-board-color="white"] .option:hover:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: white;
}
.option:hover:active:not(:disabled).name-tag:not([data-name-tag="none"]) {
  color: #000 !important;
}
.option:hover:active:not(:disabled):not(.name-tag),
.option:hover:active:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #005a00;
  color: #fff !important;
}
body[data-board-color="blue"] .option:hover:active:not(:disabled):not(.name-tag),
body[data-board-color="blue"] .option:hover:active:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #0a3b76;
}
body[data-board-color="red"] .option:hover:active:not(:disabled):not(.name-tag),
body[data-board-color="red"] .option:hover:active:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .option:hover:active:not(:disabled):not(.name-tag),
body[data-board-color="charcoal"] .option:hover:active:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .option:hover:active:not(:disabled):not(.name-tag),
body[data-board-color="black"] .option:hover:active:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: black;
}
body[data-board-color="white"] .option:hover:active:not(:disabled):not(.name-tag),
body[data-board-color="white"] .option:hover:active:not(:disabled).name-tag[data-name-tag="none"] {
  background-color: white;
}
.first > .option,
:first-child > .option,
:not(.no-break) > :nth-child(4n + 1) > .option {
  border-top-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
:nth-child(1 of :not([hidden])) > .option {
  border-top-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.last > .option,
:last-child > .option,
:not(.no-break) > :nth-child(4n) > .option {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
:nth-last-child(1 of :not([hidden])) > .option {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
:not(.no-break) > :nth-child(4n) > .option {
  margin-bottom: 15px;
}
.option:not(.no-icon):not([data-count]):after {
  content: "\f105";
  display: block;
  font-family: FontAwesome;
  font-size: 150%;
  position: absolute;
  right: 8px;
  top: 48%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.external.option:not(.no-icon):not([data-count]):after {
  content: "\f08e";
  font-size: 100%;
  top: 50%;
}
.facebook.option:not(.no-icon):not([data-count]):after {
  color: #3b579d;
  content: "\f082";
  font-size: 175%;
}
.facebook:active:hover.option:not(.no-icon):not([data-count]):after {
  color: #fff;
}
input[type="radio"] + .option:not(.no-icon):not([data-count]):after {
  content: "";
}
input[type="radio"]:checked + .option:not(.no-icon):not([data-count]):after {
  content: "\f00c";
}
.option[data-count]:after {
  background-color: #005a00;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  line-height: 12px;
  min-width: 20px;
  padding: 4px 4px 0;
  pointer-events: none;
  text-align: center;
  content: attr(data-count);
  position: absolute;
  top: 50%;
  right: 4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
body[data-board-color="blue"] .option[data-count]:after {
  background-color: #0a3b76;
}
body[data-board-color="red"] .option[data-count]:after {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .option[data-count]:after {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .option[data-count]:after {
  background-color: black;
}
body[data-board-color="white"] .option[data-count]:after {
  background-color: white;
}
.option[data-count]:after.corner {
  position: absolute;
  top: 4px;
  right: 4px;
}
input:not(:checked) ~ .option[data-count]:after.dark {
  background-color: gold !important;
  color: #004100;
}
body[data-board-color="blue"] input:not(:checked) ~ .option[data-count]:after.dark {
  color: #082f5e;
}
body[data-board-color="red"] input:not(:checked) ~ .option[data-count]:after.dark {
  color: #891111;
}
body[data-board-color="charcoal"] input:not(:checked) ~ .option[data-count]:after.dark {
  color: #3e3e3e;
}
.option[data-count]:after + .promo {
  display: none;
}
.option[data-count]:after:empty {
  display: none;
}
.option[data-count]:after:empty + .promo {
  display: block;
}
.option .unique-name {
  max-width: 85%;
}
.option i.use-as-icon {
  float: right;
  font-size: 125%;
  position: relative;
  top: 1px;
}
.option.card-suits {
  padding-top: 0;
  padding-bottom: 1px;
}
.option.card-suits span.suit-wrapper {
  font-size: 28px;
}
.radio-group {
  display: table;
  margin-top: 2px;
  table-layout: fixed;
  width: 100%;
}
.radio-group > .radio-item {
  display: table-cell;
  position: relative;
  /* Keep this selector separate since it is ignored by old browsers */
}
.radio-group > .radio-item[hidden] {
  display: none;
}
.radio-group > .radio-item > input {
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  opacity: 0;
  top: 0;
  width: 100%;
}
.radio-group > .radio-item > label {
  background-color: #fff;
  border-color: #005a00;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #005a00;
  cursor: pointer;
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0;
  text-align: center;
}
body[data-board-color="blue"] .radio-group > .radio-item > label {
  border-color: #0a3b76;
}
body[data-board-color="red"] .radio-group > .radio-item > label {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .radio-group > .radio-item > label {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .radio-group > .radio-item > label {
  border-color: black;
}
body[data-board-color="white"] .radio-group > .radio-item > label {
  border-color: white;
}
body[data-board-color="blue"] .radio-group > .radio-item > label {
  color: #0a3b76;
}
body[data-board-color="red"] .radio-group > .radio-item > label {
  color: #a01414;
}
body[data-board-color="charcoal"] .radio-group > .radio-item > label {
  color: #4b4b4b;
}
body[data-board-color="black"] .radio-group > .radio-item > label {
  color: black;
}
body[data-board-color="white"] .radio-group > .radio-item > label {
  color: white;
}
.radio-group > .radio-item:not([hidden]) ~ .radio-item > label {
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.radio-group > .radio-item.last > label,
.radio-group > .radio-item:last-child > label {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.radio-group > .radio-item:nth-last-child(1 of :not([hidden])) > label {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.radio-group > .radio-item > input:disabled + label {
  cursor: default;
}
.radio-group > .radio-item > input:not(:disabled):hover + label,
.radio-group > .radio-item > input:not(:disabled):focus + label {
  background-color: #8bce8b;
}
body[data-board-color="blue"] .radio-group > .radio-item > input:not(:disabled):hover + label,
body[data-board-color="blue"] .radio-group > .radio-item > input:not(:disabled):focus + label {
  background-color: #b0becf;
}
body[data-board-color="red"] .radio-group > .radio-item > input:not(:disabled):hover + label,
body[data-board-color="red"] .radio-group > .radio-item > input:not(:disabled):focus + label {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .radio-group > .radio-item > input:not(:disabled):hover + label,
body[data-board-color="charcoal"] .radio-group > .radio-item > input:not(:disabled):focus + label {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .radio-group > .radio-item > input:not(:disabled):hover + label,
body[data-board-color="black"] .radio-group > .radio-item > input:not(:disabled):focus + label {
  background-color: black;
}
body[data-board-color="white"] .radio-group > .radio-item > input:not(:disabled):hover + label,
body[data-board-color="white"] .radio-group > .radio-item > input:not(:disabled):focus + label {
  background-color: white;
}
.radio-group > .radio-item > input:checked + label {
  background-color: #005a00;
  color: #fff;
}
body[data-board-color="blue"] .radio-group > .radio-item > input:checked + label {
  background-color: #0a3b76;
}
body[data-board-color="red"] .radio-group > .radio-item > input:checked + label {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .radio-group > .radio-item > input:checked + label {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .radio-group > .radio-item > input:checked + label {
  background-color: black;
}
body[data-board-color="white"] .radio-group > .radio-item > input:checked + label {
  background-color: white;
}
.radio-group > .radio-item[aria-disabled="true"] label {
  opacity: 0.5;
}
label.checkbox,
label.radio {
  display: block;
}
label.checkbox input[type="checkbox"],
label.radio input[type="checkbox"],
label.checkbox input[type="radio"],
label.radio input[type="radio"] {
  display: none;
}
label.checkbox input[type="checkbox"] + span,
label.radio input[type="checkbox"] + span,
label.checkbox input[type="radio"] + span,
label.radio input[type="radio"] + span {
  display: block;
  vertical-align: top;
}
label.checkbox input[type="checkbox"] + span:before,
label.radio input[type="checkbox"] + span:before,
label.checkbox input[type="radio"] + span:before,
label.radio input[type="radio"] + span:before {
  border: 1px solid #666;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  display: inline-block;
  font-family: FontAwesome;
  height: 22px;
  line-height: 18px;
  margin-right: 6px;
  padding: 0 1px 0 3px;
  text-align: right;
  vertical-align: top;
  width: 22px;
}
label.checkbox input[type="checkbox"]:checked + span:before,
label.radio input[type="checkbox"]:checked + span:before,
label.checkbox input[type="radio"]:checked + span:before,
label.radio input[type="radio"]:checked + span:before {
  content: "\f00c";
}
label.toggle {
  display: block;
  position: relative;
}
label.toggle[hidden] {
  display: none;
}
label.toggle.disabled {
  opacity: 0.5;
}
label.toggle.right {
  float: right;
  margin-top: -7px;
  width: 75px;
}
label.toggle.right .value {
  padding: 0;
  text-align: right;
}
label.toggle .info {
  left: 50px;
  position: absolute;
  top: 24px;
}
label.toggle input[type="checkbox"] {
  display: none;
}
label.toggle .switch {
  color: #005a00;
  display: block;
  position: relative;
  top: 4px;
}
body[data-board-color="blue"] label.toggle .switch {
  color: #0a3b76;
}
body[data-board-color="red"] label.toggle .switch {
  color: #a01414;
}
body[data-board-color="charcoal"] label.toggle .switch {
  color: #4b4b4b;
}
body[data-board-color="black"] label.toggle .switch {
  color: black;
}
body[data-board-color="white"] label.toggle .switch {
  color: white;
}
label.toggle .switch .track {
  background-color: rgba(0, 0, 0, 0);
  border-color: #005a00;
  border-radius: 11px;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  height: 22px;
  position: absolute;
  -webkit-transition: background-color 0.15s;
  transition: background-color 0.15s;
  width: 44px;
}
body[data-board-color="blue"] label.toggle .switch .track {
  border-color: #0a3b76;
}
body[data-board-color="red"] label.toggle .switch .track {
  border-color: #a01414;
}
body[data-board-color="charcoal"] label.toggle .switch .track {
  border-color: #4b4b4b;
}
body[data-board-color="black"] label.toggle .switch .track {
  border-color: black;
}
body[data-board-color="white"] label.toggle .switch .track {
  border-color: white;
}
label.toggle .switch .thumb {
  background-color: #fff;
  border-color: #005a00;
  border-radius: 11px;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  height: 22px;
  position: absolute;
  top: 0px;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  width: 22px;
}
body[data-board-color="blue"] label.toggle .switch .thumb {
  border-color: #0a3b76;
}
body[data-board-color="red"] label.toggle .switch .thumb {
  border-color: #a01414;
}
body[data-board-color="charcoal"] label.toggle .switch .thumb {
  border-color: #4b4b4b;
}
body[data-board-color="black"] label.toggle .switch .thumb {
  border-color: black;
}
body[data-board-color="white"] label.toggle .switch .thumb {
  border-color: white;
}
label.toggle .value {
  display: block;
  line-height: 30px;
  text-align: right;
  vertical-align: middle;
}
label.toggle .value .no {
  display: block;
}
label.toggle .value .yes {
  display: none;
}
label.toggle.tight .switch {
  margin-top: 4px;
}
label.toggle.tight .value {
  font-weight: 500;
  padding-left: 54px;
  text-align: left;
}
label.toggle input:checked + .switch .track {
  background-color: #005a00;
}
body[data-board-color="blue"] label.toggle input:checked + .switch .track {
  background-color: #0a3b76;
}
body[data-board-color="red"] label.toggle input:checked + .switch .track {
  background-color: #a01414;
}
body[data-board-color="charcoal"] label.toggle input:checked + .switch .track {
  background-color: #4b4b4b;
}
body[data-board-color="black"] label.toggle input:checked + .switch .track {
  background-color: black;
}
body[data-board-color="white"] label.toggle input:checked + .switch .track {
  background-color: white;
}
label.toggle input:checked + .switch .thumb {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
label.toggle input:checked ~ .value .no {
  display: none;
}
label.toggle input:checked ~ .value .yes {
  display: block;
}
.progress .value,
label.slider .value {
  color: #005a00;
  float: right;
}
body[data-board-color="blue"] .progress .value,
body[data-board-color="blue"] label.slider .value {
  color: #0a3b76;
}
body[data-board-color="red"] .progress .value,
body[data-board-color="red"] label.slider .value {
  color: #a01414;
}
body[data-board-color="charcoal"] .progress .value,
body[data-board-color="charcoal"] label.slider .value {
  color: #4b4b4b;
}
body[data-board-color="black"] .progress .value,
body[data-board-color="black"] label.slider .value {
  color: black;
}
body[data-board-color="white"] .progress .value,
body[data-board-color="white"] label.slider .value {
  color: white;
}
.progress .track,
label.slider .track {
  background-color: #ccc;
  border-radius: 2px;
  display: block;
  height: 4px;
  margin: 10px 0;
  position: relative;
}
.progress .track .fill,
label.slider .track .fill {
  background-color: #005a00;
  border-radius: 2px;
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}
body[data-board-color="blue"] .progress .track .fill,
body[data-board-color="blue"] label.slider .track .fill {
  background-color: #0a3b76;
}
body[data-board-color="red"] .progress .track .fill,
body[data-board-color="red"] label.slider .track .fill {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .progress .track .fill,
body[data-board-color="charcoal"] label.slider .track .fill {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .progress .track .fill,
body[data-board-color="black"] label.slider .track .fill {
  background-color: black;
}
body[data-board-color="white"] .progress .track .fill,
body[data-board-color="white"] label.slider .track .fill {
  background-color: white;
}
.progress .controls,
label.slider .controls {
  display: block;
  height: 24px;
  margin: -24px 11px 0 11px;
  position: relative;
}
.progress .controls .thumb,
label.slider .controls .thumb {
  background-color: #fff;
  border-color: #005a00;
  border-radius: 11px;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 22px;
  left: 50%;
  margin-left: -11px;
  position: absolute;
  top: 1px;
  width: 22px;
}
body[data-board-color="blue"] .progress .controls .thumb,
body[data-board-color="blue"] label.slider .controls .thumb {
  border-color: #0a3b76;
}
body[data-board-color="red"] .progress .controls .thumb,
body[data-board-color="red"] label.slider .controls .thumb {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .progress .controls .thumb,
body[data-board-color="charcoal"] label.slider .controls .thumb {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .progress .controls .thumb,
body[data-board-color="black"] label.slider .controls .thumb {
  border-color: black;
}
body[data-board-color="white"] .progress .controls .thumb,
body[data-board-color="white"] label.slider .controls .thumb {
  border-color: white;
}
.progress input[type="range"],
label.slider input[type="range"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  height: 24px;
  margin: -24px 0 0 0;
  opacity: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.progress input[type="range"]::-ms-tooltip,
label.slider input[type="range"]::-ms-tooltip {
  display: none;
}
.progress.in-home,
label.slider.in-home {
  position: absolute;
  top: 11px;
  width: 100%;
}
.progress.in-home .value,
label.slider.in-home .value {
  position: absolute;
  right: 0;
  top: 0;
  color: white !important;
}
.progress.in-home .track,
label.slider.in-home .track {
  position: absolute;
  right: 20px;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.3);
}
.progress.in-home .track .fill,
label.slider.in-home .track .fill {
  background-color: white !important;
}
.progress.in-home .controls,
label.slider.in-home .controls {
  position: absolute;
  right: 20px;
  left: 0;
  top: 0;
  margin-top: 0;
}
.progress.in-home .controls .thumb,
label.slider.in-home .controls .thumb {
  border-color: #004100;
}
body[data-board-color="blue"] .progress.in-home .controls .thumb,
body[data-board-color="blue"] label.slider.in-home .controls .thumb {
  border-color: #082f5e;
}
body[data-board-color="red"] .progress.in-home .controls .thumb,
body[data-board-color="red"] label.slider.in-home .controls .thumb {
  border-color: #891111;
}
body[data-board-color="charcoal"] .progress.in-home .controls .thumb,
body[data-board-color="charcoal"] label.slider.in-home .controls .thumb {
  border-color: #3e3e3e;
}
.progress.in-home input[type="range"],
label.slider.in-home input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
  margin-top: 0;
}
@media (max-width: 479px) {
  .progress.in-home,
  label.slider.in-home {
    top: 0;
    width: -webkit-calc(100% - 24px);
    width: calc(100% - 24px);
  }
}
.actions.split {
  text-align: left;
}
.actions.split button {
  width: 48%;
}
.actions.split button:last-child {
  float: right;
}
input[type="number"].no-spinners {
  -moz-appearance: textfield;
}
input[type="number"].no-spinners::-webkit-outer-spin-button,
input[type="number"].no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-video-chat {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: yellow;
  padding-bottom: 4px;
}
.no-video-chat span {
  display: inline-block;
  text-align: center;
}
.no-video-chat span:first-child {
  padding-right: 8px;
}
#game {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #005a00;
  background-position: center 40%;
  background-repeat: no-repeat;
  -ms-touch-action: none;
      touch-action: none;
}
body[data-board-color="blue"] #game {
  background-color: #0a3b76;
}
body[data-board-color="red"] #game {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #game {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #game {
  background-color: black;
}
body[data-board-color="white"] #game {
  background-color: white;
}
#game .watermark {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
[data-watermark="cards"]#game .watermark {
  background-image: url("/image/cards-watermark-cards.png?rev=1");
}
[data-watermark="circle"]#game .watermark {
  background-image: url("/image/circle-watermark.png?rev=1");
}
[data-watermark="logo"]#game .watermark {
  background-image: url("/image/cards-watermark.png?rev=1");
}
body[data-game-code="Hearts"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/hearts-watermark.png?rev=1");
}
body[data-game-code="Spades"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/spades-watermark.png?rev=1");
}
body[data-game-code="Euchre"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/euchre-watermark.png?rev=1");
}
body[data-game-code="Pitch"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/pitch-watermark.png?rev=1");
}
body[data-game-code="Pinochle"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/pinochle-watermark.png?rev=1");
}
body[data-game-code="Bridge"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/bridge-watermark.png?rev=1");
}
body[data-game-code="FiveHundred"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/fivehundred-watermark.png?rev=1");
}
body[data-game-code="OhHell"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/ohhell-watermark.png?rev=1");
}
body[data-game-code="Whist"] [data-watermark="game"]#game .watermark {
  background-image: url("/image/whist-watermark.png?rev=1");
}
body[data-board-color=green][data-use-gradient=true] #game {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #008d00 0, #000000 100%);
  background-image: radial-gradient(ellipse at center 40%, #008d00 0, #000000 100%);
}
body[data-board-color=green][data-use-gradient=vertical] #game {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#003400), to(#007400));
  background-image: -webkit-linear-gradient(bottom, #003400, #007400);
  background-image: linear-gradient(0deg, #003400, #007400);
}
body[data-board-color=blue][data-use-gradient=true] #game {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #0e53a5 0, #020c18 100%);
  background-image: radial-gradient(ellipse at center 40%, #0e53a5 0, #020c18 100%);
}
body[data-board-color=blue][data-use-gradient=vertical] #game {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#062347), to(#0e53a5));
  background-image: -webkit-linear-gradient(bottom, #062347, #0e53a5);
  background-image: linear-gradient(0deg, #062347, #0e53a5);
}
body[data-board-color=red][data-use-gradient=true] #game {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #cd1a1a 0, #450909 100%);
  background-image: radial-gradient(ellipse at center 40%, #cd1a1a 0, #450909 100%);
}
body[data-board-color=red][data-use-gradient=vertical] #game {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#5c0b0b), to(#a01414));
  background-image: -webkit-linear-gradient(bottom, #5c0b0b, #a01414);
  background-image: linear-gradient(0deg, #5c0b0b, #a01414);
}
body[data-board-color=charcoal][data-use-gradient=true] #game {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #656565 0, #181818 100%);
  background-image: radial-gradient(ellipse at center 40%, #656565 0, #181818 100%);
}
body[data-board-color=charcoal][data-use-gradient=vertical] #game {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#323232), to(#656565));
  background-image: -webkit-linear-gradient(bottom, #323232, #656565);
  background-image: linear-gradient(0deg, #323232, #656565);
}
#game svg.partner-triangle {
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
}
#game svg.partner-triangle polygon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-linejoin: round;
  stroke-width: 5px;
}
#game #game-name {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  position: absolute;
  left: 58px;
  top: 16px;
  margin: 0;
  max-width: 23%;
}
#game #game-name[hidden] {
  display: none;
}
body[data-game-code="Bridge"] #game #game-name,
body[data-game-code="FiveHundred"] #game #game-name {
  max-width: 19%;
}
@media (max-width: 959px) {
  body[data-game-code="Bridge"] #game #game-name,
  body[data-game-code="FiveHundred"] #game #game-name {
    display: none;
  }
}
@media (max-width: 479px) {
  body[data-game-code="Bridge"] #game #game-name,
  body[data-game-code="FiveHundred"] #game #game-name {
    display: block;
    max-width: 100%;
  }
}
body[data-game-code="Bridge"] #game #game-name .options,
body[data-game-code="FiveHundred"] #game #game-name .options {
  max-width: 90%;
}
#game #game-name .name {
  display: block;
  overflow: hidden;
  padding-bottom: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#game #game-name .options {
  color: rgba(255, 255, 255, 0.65);
  display: block;
  font-size: 12px;
  line-height: 16px;
}
#game #game-name .options .suit {
  color: inherit !important;
}
@media (max-width: 767px) {
  #game #game-name {
    display: none;
    font-size: 16px;
    line-height: 16px;
    padding-bottom: 0;
    top: 20px;
  }
  #game #game-name .name {
    padding-bottom: 0;
  }
  #game #game-name .options {
    display: none;
  }
}
@media (max-width: 479px), (max-height: 479px) {
  #game #game-name {
    left: 42px;
    top: 12px;
  }
}
@media (max-width: 479px) {
  #game #game-name {
    display: block;
    left: 84px;
    line-height: 42px;
    max-width: 100%;
    right: 84px;
    text-align: center;
    top: -42px;
  }
}
@media (max-width: 479px), (max-height: 479px) {
  #game #game-name:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
#game > .content {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
}
#game .message .icon-button {
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 42px;
}
#game .message .icon-button:disabled,
#game .message .icon-button.disabled {
  color: #fff !important;
  opacity: 0.5;
}
#game #show-scorecard-button {
  border: none;
  border-radius: 20px;
  bottom: 10px;
  right: 10px;
  padding-top: 2px;
  position: absolute;
  width: auto;
}
#game #show-scorecard-button:focus {
  outline: none;
}
@media (max-width: 959px) {
  #game #show-scorecard-button {
    display: none;
  }
}
#game #show-scorecard-button table {
  color: rgba(255, 255, 255, 0.65);
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
}
#game #show-scorecard-button table[hidden] {
  display: none;
}
#game #show-scorecard-button table #partner-score-summary {
  text-align: right;
}
#game #show-scorecard-button table td {
  padding: 2px;
}
#game #show-scorecard-button table td.last-hand {
  color: white;
  font-weight: 500;
}
#game #show-scorecard-button .hidden-s-after:after {
  content: "s";
  visibility: hidden;
}
#game #show-scorecard-button:active table {
  color: #005a00;
}
body[data-board-color="blue"] #game #show-scorecard-button:active table {
  color: #0a3b76;
}
body[data-board-color="red"] #game #show-scorecard-button:active table {
  color: #a01414;
}
body[data-board-color="charcoal"] #game #show-scorecard-button:active table {
  color: #4b4b4b;
}
body[data-board-color="black"] #game #show-scorecard-button:active table {
  color: black;
}
body[data-board-color="white"] #game #show-scorecard-button:active table {
  color: white;
}
#game #show-scorecard-button svg {
  width: 27px;
  height: 27px;
  margin: 0 8px 5px 8px;
  vertical-align: middle;
}
#game #show-scorecard-button .us .label:before {
  content: "Us: ";
}
#game #show-scorecard-button .them .label:before {
  content: "Them: ";
}
[data-teams='3']#game #show-scorecard-button .them .label:before {
  content: "Team 2: ";
}
#game #show-scorecard-button .them-2 .label:before {
  content: "Team 3: ";
}
body[data-game-code="Bridge"] #game #show-scorecard-button .us .label:before {
  content: "We: ";
}
body[data-game-code="Bridge"] #game #show-scorecard-button .them .label:before {
  content: "They: ";
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x {
  padding-left: 8px;
  text-align: center;
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div {
  display: inline-block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div > div {
  display: inline-block;
  float: left;
  height: 14px;
  line-height: 14px;
  width: 14px;
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div > div:nth-child(1) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div > div:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  border-left: 1px solid rgba(255, 255, 255, 0.65);
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div > div:nth-child(3) {
  clear: left;
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div > div:nth-child(4) {
  border-left: 1px solid rgba(255, 255, 255, 0.65);
}
body[data-game-code="Bridge"] #game #show-scorecard-button .the-x > div > div span {
  display: block;
  height: 100%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 100%;
}
#game #show-settings-button {
  background-image: url('data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ4MS4yMyA0NzUuNDkzIj4NCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4yMjk1LC0xOC4yMjk1KSI+DQogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zODcuODUgMjUyLjQyIEwzODAuNzQgMjE0LjU1IEw0MzEuNjkgMTc2LjQ1IEwzOTMuODIgMTEyLjQyIEwzMzYuOTEgMTM4LjU5IEwzMDQuNzggMTEyLjQyIEwzMTAuNzQgNTUuNTENCiAgICAgTDI0MC43NSAzNi40NiBMMjIxLjcgODcuNjQgTDE3Ny44NiA5My42IEwxMzkuOTkgNDguMzkgTDc1Ljk2IDg3LjY0IEwxMDIuMTMgMTM4LjU5IEw3NS45NiAxNjkuMzQgTDE5LjA1IDE2My4zNw0KICAgICBMMCAyMzkuMzQgTDU2LjkyIDI1OC4zOSBMNTYuOTIgMjk3LjQgTDExLjkzIDMzNS41IEw1MC45NSAzOTguMzggTDEwNy44NiAzNzMuMzcgTDEzMi44OCAzOTguMzggTDEyNi45MSA0NTYuNDQgTDE5Ni45MQ0KICAgICA0NzUuNDkgTDIyMS43IDQyNC4zMSBMMjYwLjk0IDQxNy4yIEwzMDQuNzggNDYyLjQxIEwzNjEuNjkgNDI0LjMxIEwzNDIuODcgMzczLjM3IEwzNjEuNjkgMzQxLjQ2IEw0MjUuNzIgMzQ3LjIgTDQ0NC43Nw0KICAgICAyNzcuNDMgTDM4Ny44NSAyNTIuNDIgWk0xMTYuNTkgMjU1LjE3IEMxMTYuNTkgMjQwLjk0IDExOS4zNCAyMjcuNjMgMTI0LjYyIDIxNS4yNCBDMTI5LjkgMjAyLjYyIDEzNy4yNCAxOTEuODMgMTQ2LjY1DQogICAgIDE4Mi40MiBDMTU2LjA2IDE3My4wMSAxNjYuODUgMTY1LjY3IDE3OS40NyAxNjAuMzkgQzE5MS44NiAxNTUuMTEgMjA1LjE3IDE1Mi4zNiAyMTkuNCAxNTIuMzYgQzIzMy42MyAxNTIuMzYgMjQ2Ljk0DQogICAgIDE1NS4xMSAyNTkuNTYgMTYwLjM5IEMyNzIuMTkgMTY1LjY3IDI4Mi45NyAxNzMuMDEgMjkyLjM4IDE4Mi40MiBDMzAxLjU2IDE5MS44MyAzMDguOTEgMjAyLjYyIDMxNC40MSAyMTUuMjQgQzMxOS42OQ0KICAgICAyMjcuNjMgMzIyLjQ1IDI0MC45NCAzMjIuNDUgMjU1LjE3IEMzMjIuNDUgMjY5LjQgMzE5LjY5IDI4Mi43MSAzMTQuNDEgMjk1LjMzIEMzMDguOTEgMzA3Ljk2IDMwMS41NiAzMTguNzQgMjkyLjM4DQogICAgIDMyOC4xNSBDMjgyLjk3IDMzNy4zMyAyNzIuMTkgMzQ0LjY4IDI1OS41NiAzNTAuMTkgQzI0Ni45NCAzNTUuNDYgMjMzLjYzIDM1OC4yMiAyMTkuNCAzNTguMjIgQzIwNS4xNyAzNTguMjIgMTkxLjg2DQogICAgIDM1NS40NiAxNzkuNDcgMzUwLjE5IEMxNjYuODUgMzQ0LjY4IDE1Ni4wNiAzMzcuMzMgMTQ2LjY1IDMyOC4xNSBDMTM3LjI0IDMxOC43NCAxMjkuOSAzMDcuOTYgMTI0LjYyIDI5NS4zMyBDMTE5LjM0DQogICAgIDI4Mi43MSAxMTYuNTkgMjY5LjQgMTE2LjU5IDI1NS4xNyBaIiAvPg0KICAgIDwvZz4NCjwvc3ZnPg0K') /*/image/gear.svg*/;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 65%;
  bottom: 10px;
  left: 10px;
  position: absolute;
}
#game #show-settings-button:active {
  background-image: url('data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ4MS4yMyA0NzUuNDkzIj4NCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4yMjk1LC0xOC4yMjk1KSI+DQogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0zODcuODUgMjUyLjQyIEwzODAuNzQgMjE0LjU1IEw0MzEuNjkgMTc2LjQ1IEwzOTMuODIgMTEyLjQyIEwzMzYuOTEgMTM4LjU5IEwzMDQuNzggMTEyLjQyIEwzMTAuNzQgNTUuNTENCiAgICAgTDI0MC43NSAzNi40NiBMMjIxLjcgODcuNjQgTDE3Ny44NiA5My42IEwxMzkuOTkgNDguMzkgTDc1Ljk2IDg3LjY0IEwxMDIuMTMgMTM4LjU5IEw3NS45NiAxNjkuMzQgTDE5LjA1IDE2My4zNw0KICAgICBMMCAyMzkuMzQgTDU2LjkyIDI1OC4zOSBMNTYuOTIgMjk3LjQgTDExLjkzIDMzNS41IEw1MC45NSAzOTguMzggTDEwNy44NiAzNzMuMzcgTDEzMi44OCAzOTguMzggTDEyNi45MSA0NTYuNDQgTDE5Ni45MQ0KICAgICA0NzUuNDkgTDIyMS43IDQyNC4zMSBMMjYwLjk0IDQxNy4yIEwzMDQuNzggNDYyLjQxIEwzNjEuNjkgNDI0LjMxIEwzNDIuODcgMzczLjM3IEwzNjEuNjkgMzQxLjQ2IEw0MjUuNzIgMzQ3LjIgTDQ0NC43Nw0KICAgICAyNzcuNDMgTDM4Ny44NSAyNTIuNDIgWk0xMTYuNTkgMjU1LjE3IEMxMTYuNTkgMjQwLjk0IDExOS4zNCAyMjcuNjMgMTI0LjYyIDIxNS4yNCBDMTI5LjkgMjAyLjYyIDEzNy4yNCAxOTEuODMgMTQ2LjY1DQogICAgIDE4Mi40MiBDMTU2LjA2IDE3My4wMSAxNjYuODUgMTY1LjY3IDE3OS40NyAxNjAuMzkgQzE5MS44NiAxNTUuMTEgMjA1LjE3IDE1Mi4zNiAyMTkuNCAxNTIuMzYgQzIzMy42MyAxNTIuMzYgMjQ2Ljk0DQogICAgIDE1NS4xMSAyNTkuNTYgMTYwLjM5IEMyNzIuMTkgMTY1LjY3IDI4Mi45NyAxNzMuMDEgMjkyLjM4IDE4Mi40MiBDMzAxLjU2IDE5MS44MyAzMDguOTEgMjAyLjYyIDMxNC40MSAyMTUuMjQgQzMxOS42OQ0KICAgICAyMjcuNjMgMzIyLjQ1IDI0MC45NCAzMjIuNDUgMjU1LjE3IEMzMjIuNDUgMjY5LjQgMzE5LjY5IDI4Mi43MSAzMTQuNDEgMjk1LjMzIEMzMDguOTEgMzA3Ljk2IDMwMS41NiAzMTguNzQgMjkyLjM4DQogICAgIDMyOC4xNSBDMjgyLjk3IDMzNy4zMyAyNzIuMTkgMzQ0LjY4IDI1OS41NiAzNTAuMTkgQzI0Ni45NCAzNTUuNDYgMjMzLjYzIDM1OC4yMiAyMTkuNCAzNTguMjIgQzIwNS4xNyAzNTguMjIgMTkxLjg2DQogICAgIDM1NS40NiAxNzkuNDcgMzUwLjE5IEMxNjYuODUgMzQ0LjY4IDE1Ni4wNiAzMzcuMzMgMTQ2LjY1IDMyOC4xNSBDMTM3LjI0IDMxOC43NCAxMjkuOSAzMDcuOTYgMTI0LjYyIDI5NS4zMyBDMTE5LjM0DQogICAgIDI4Mi43MSAxMTYuNTkgMjY5LjQgMTE2LjU5IDI1NS4xNyBaIiAvPg0KICAgIDwvZz4NCjwvc3ZnPg0K') /*/image/gear-dark.svg*/;
}
@media (max-width: 959px) {
  #game #show-settings-button {
    display: none;
  }
}
#game #undo-button {
  bottom: 10px;
  left: 10px;
  position: absolute;
  display: none;
}
#game[data-can-undo="true"] #show-settings-button {
  display: none;
}
#game[data-can-undo="true"] #undo-button {
  display: block;
}
@media (max-width: 959px) {
  #game[data-can-undo="true"] #undo-button {
    display: none;
  }
}
#game #redeal-button {
  top: 10px;
  right: 10px;
  position: absolute;
}
@media (max-width: 479px), (max-height: 479px) {
  #game #redeal-button {
    top: 0;
    right: 0;
  }
}
@media (max-width: 479px) {
  #game #redeal-button {
    top: -42px;
  }
}
#game .action {
  margin-top: 10px;
}
#game #game-messages > .message {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  bottom: 30%;
  font-size: 20px;
  left: 15%;
  pointer-events: none;
  position: absolute;
  right: 15%;
  text-align: center;
  top: 15%;
}
@media (min-width: 768px) {
  #game #game-messages > .message {
    font-size: 24px;
  }
}
@media (min-width: 768px), (min-height: 768px) {
  #game #game-messages > .message {
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.75);
  }
}
.show-message-on-bottom#game #game-messages > .message > .content {
  top: auto;
  bottom: 0;
  -webkit-transform: none;
          transform: none;
}
#game #game-messages > .message > .content {
  left: 0;
  pointer-events: all;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#game #game-messages > .message > .content .header {
  margin-bottom: 8px;
}
#game #game-messages > .message > .content .header .item[hidden] + .item[hidden] {
  display: block;
  visibility: hidden;
}
#game #game-messages > .message > .content .text-button,
#game #game-messages > .message > .content .icon-text-button {
  background-color: #fff;
  border-radius: 3px;
  color: #005a00;
  margin: 5px 0;
  min-width: 90px;
  padding: 5px 6px 4px 6px;
  text-align: center;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}
body[data-board-color="blue"] #game #game-messages > .message > .content .text-button,
body[data-board-color="blue"] #game #game-messages > .message > .content .icon-text-button {
  color: #0a3b76;
}
body[data-board-color="red"] #game #game-messages > .message > .content .text-button,
body[data-board-color="red"] #game #game-messages > .message > .content .icon-text-button {
  color: #a01414;
}
body[data-board-color="charcoal"] #game #game-messages > .message > .content .text-button,
body[data-board-color="charcoal"] #game #game-messages > .message > .content .icon-text-button {
  color: #4b4b4b;
}
body[data-board-color="black"] #game #game-messages > .message > .content .text-button,
body[data-board-color="black"] #game #game-messages > .message > .content .icon-text-button {
  color: black;
}
body[data-board-color="white"] #game #game-messages > .message > .content .text-button,
body[data-board-color="white"] #game #game-messages > .message > .content .icon-text-button {
  color: white;
}
@media (min-width: 768px), (min-height: 768px) {
  #game #game-messages > .message > .content .text-button,
  #game #game-messages > .message > .content .icon-text-button {
    -webkit-box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.4);
            box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.4);
  }
}
#game #game-messages > .message > .content .text-button:disabled,
#game #game-messages > .message > .content .icon-text-button:disabled {
  opacity: 0.5;
}
#game #game-messages > .message > .content .text-button:hover:not(:disabled),
#game #game-messages > .message > .content .icon-text-button:hover:not(:disabled),
#game #game-messages > .message > .content .text-button:focus:not(:disabled),
#game #game-messages > .message > .content .icon-text-button:focus:not(:disabled) {
  outline: none;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
#game #game-messages > .message > .content .icon-text-button {
  line-height: 30px;
  min-width: 145px;
  padding-left: 32px;
  position: relative;
  text-align: left;
  text-decoration: none;
}
#game #game-messages > .message > .content .icon-text-button .fa {
  display: block;
  line-height: 30px;
  position: absolute;
  left: 4px;
  top: 4px;
  text-align: center;
  width: 22px;
}
#game #game-messages > .message > .content .leave-option,
#game #game-messages > .message > .content .step-away-option {
  display: none;
}
@media (min-height: 480px) {
  #game #game-messages > .message > .content .leave-option,
  #game #game-messages > .message > .content .step-away-option {
    display: block;
  }
  #game #game-messages > .message > .content .leave-option[hidden],
  #game #game-messages > .message > .content .step-away-option[hidden] {
    display: none;
  }
}
@media (min-height: 480px) {
  #game #game-messages > .message > .content .video-option {
    margin-top: 20px;
  }
}
#game #game-messages > .message > .content .video-option button {
  background-color: gold;
  border-color: gold;
}
#highlights {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
#highlights .highlight {
  background: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 45px;
  height: 45px;
  border: 4px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}
#highlights .highlight .hidden {
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
}
#challenge-details .narrow.created-by {
  font-weight: 500;
  text-align: left;
  margin-bottom: 0;
}
#challenge-details .narrow.rules {
  margin-top: 0.5em;
  margin-bottom: 1.25em;
  text-align: left;
}
#challenge-details .store-link img {
  height: 50px;
}
#home #choose-app {
  text-align: center;
}
#home #choose-app .header {
  display: block;
}
#home #choose-app > .wrapper {
  margin-top: 40px;
  max-width: 400px;
  width: auto;
}
@media (max-width: 400px) {
  #home #choose-app > .wrapper {
    margin: 20px -20px 0;
  }
}
#home #choose-app button[data-game] {
  background-color: rgba(255, 255, 255, 0.2);
  background-position: center 4px;
  background-repeat: no-repeat;
  background-size: 72px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  display: inline-block;
  height: 100px;
  margin: 0 15px 30px;
  outline: none;
  position: relative;
  vertical-align: bottom;
  width: 100px;
}
@media (max-width: 479px), (max-height: 479px) {
  #home #choose-app button[data-game] {
    background-size: 60px;
    margin: 0 10px 20px;
    height: 90px;
    width: 90px;
  }
}
@media (max-width: 340px) {
  #home #choose-app button[data-game] {
    margin: 0 5px 10px;
  }
}
#home #choose-app button[data-game]:after {
  content: attr(data-game);
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
}
#home #choose-app button[data-game]:focus,
#home #choose-app button[data-game]:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
#home #choose-app button[data-game]:active {
  background-color: #004100;
  color: #fff;
}
body[data-board-color="blue"] #home #choose-app button[data-game]:active {
  background-color: #082f5e;
}
body[data-board-color="red"] #home #choose-app button[data-game]:active {
  background-color: #891111;
}
body[data-board-color="charcoal"] #home #choose-app button[data-game]:active {
  background-color: #3e3e3e;
}
#home #choose-app button[data-game][hidden] {
  visibility: hidden;
}
#home #choose-app button[data-game][data-game="500"] {
  background-image: url("/image/icons/fivehundred-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Bridge"] {
  background-image: url("/image/icons/bridge-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Euchre"] {
  background-image: url("/image/icons/euchre-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Hearts"] {
  background-image: url("/image/icons/hearts-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Oh Hell"] {
  background-image: url("/image/icons/ohhell-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Pitch"] {
  background-image: url("/image/icons/pitch-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Pinochle"] {
  background-image: url("/image/icons/pinochle-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Spades"] {
  background-image: url("/image/icons/spades-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game][data-game="Whist"] {
  background-image: url("/image/icons/whist-clear-96x96.png?rev=1");
}
#home #choose-app button[data-game] .count-circle {
  border-radius: 15px;
  font-size: 16px;
  height: 30px;
  line-height: 22px;
  min-width: 30px;
  position: absolute;
  top: -15px;
  right: -15px;
}
#home #choose-app .game-list {
  text-align: left;
}
#home #choose-app .game-list .clear-incomplete {
  float: right;
}
#home #choose-game .gift-promo {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  color: #fff;
  border-radius: 5px;
  background-color: #800;
  background-image: -webkit-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
  border: 1px solid #fff;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  margin-top: 10px;
  padding: 6px 0;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}
@media (max-width: 479px), (max-height: 479px) {
  #home #choose-game .gift-promo {
    font-size: 14px;
  }
}
#home #choose-game .gift-promo[hidden] {
  display: none;
}
body[data-board-color=red] #home #choose-game .gift-promo {
  background-color: #060;
}
body:not(.touch) #home #choose-game .gift-promo:hover,
.keyboard-focus #home #choose-game .gift-promo:focus {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
#home #choose-game .header {
  display: block;
}
#home #choose-game .wrapper,
#home #choose-game .front-door-messages {
  position: relative;
}
#home #choose-game .new-features {
  padding-top: 0;
}
#home #choose-game .options {
  margin: 0 auto;
  width: 300px;
}
@media (max-width: 479px) {
  #home #choose-game .options {
    width: 280px;
  }
}
#home #choose-game table {
  border-collapse: collapse;
  border-spacing: 0;
}
#home #choose-game table td {
  padding: 0 0 10px 0;
  text-align: center;
}
#home #choose-game table tr td:first-child:not(:last-child) {
  width: 50%;
  padding-right: 5px;
}
#home #choose-game table tr td:last-child:not(:first-child) {
  width: 50%;
  padding-left: 5px;
}
#home #choose-game table tr.extra-space-before td {
  padding-top: 10px;
}
#home #choose-game table tr:last-child td {
  padding-bottom: 0;
}
#home #choose-game #play-automatch > .fa {
  font-size: 70px;
  left: auto;
  right: 0;
  -webkit-transform: translate(-20%, -50%);
          transform: translate(-20%, -50%);
}
#home #choose-game #play-compete > .fa {
  font-size: 60px;
}
#home #choose-game td[colspan='2'] #play-compete > .fa {
  left: auto;
  right: 0;
  -webkit-transform: translate(-31%, -50%);
          transform: translate(-31%, -50%);
}
#home #choose-game #play-practice > .fa {
  font-size: 80px;
}
#home #choose-game #play-join > .fa {
  font-size: 60px;
}
#home #choose-game #play-join .promo {
  position: absolute;
  top: -15px;
  right: -50px;
  background-color: #8bce8b;
  width: 120px;
  text-align: center;
  line-height: 25px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  padding-top: 20px;
}
body[data-board-color="blue"] #home #choose-game #play-join .promo {
  background-color: #b0becf;
}
body[data-board-color="red"] #home #choose-game #play-join .promo {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #home #choose-game #play-join .promo {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #home #choose-game #play-join .promo {
  background-color: black;
}
body[data-board-color="white"] #home #choose-game #play-join .promo {
  background-color: white;
}
#home #choose-game #play-join .promo .fa {
  font-size: 18px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
#home #choose-game #play-join .count-circle:not(:empty) + .promo {
  display: none;
}
#home #choose-game td[colspan='2'] #play-join > .fa {
  left: auto;
  right: 0;
  -webkit-transform: translate(-20%, -50%);
          transform: translate(-20%, -50%);
}
#home #choose-game #play-club-event {
  margin-bottom: 20px;
}
#home #choose-game #play-club-event > .fa {
  font-size: 60px;
}
#home #choose-game #play-club-event .club-event-detail {
  max-width: 100%;
  white-space: normal;
}
#home #choose-game td[colspan="2"] #play-club-event > .fa {
  left: auto;
  right: 0;
  -webkit-transform: translate(-20%, -50%);
          transform: translate(-20%, -50%);
}
#home #choose-game #play-learn {
  margin-top: 10px;
}
#home #choose-game #play-learn > .fa {
  font-size: 60px;
  left: auto;
  right: -8px;
  -webkit-transform: translate(-20%, -50%);
          transform: translate(-20%, -50%);
}
#home #choose-game .primary.options button {
  background-color: #fff;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #004100;
  outline: none;
  overflow: hidden;
  padding: 12px 8px;
  position: relative;
  text-align: left;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  width: 100%;
}
body[data-board-color="blue"] #home #choose-game .primary.options button {
  color: #082f5e;
}
body[data-board-color="red"] #home #choose-game .primary.options button {
  color: #891111;
}
body[data-board-color="charcoal"] #home #choose-game .primary.options button {
  color: #3e3e3e;
}
body:not(.touch) #home #choose-game .primary.options button:hover,
.keyboard-focus #home #choose-game .primary.options button:focus {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
#home #choose-game .primary.options button[disabled] {
  opacity: 0.5;
  -webkit-transform: none;
          transform: none;
}
#home #choose-game .primary.options button .fa-clock-o,
#home #choose-game .primary.options button .fa-play,
#home #choose-game .primary.options button .fa-play-circle,
#home #choose-game .primary.options button .fa-database,
#home #choose-game .primary.options button .fa-laptop,
#home #choose-game .primary.options button .fa-users,
#home #choose-game .primary.options button .fa-graduation-cap {
  opacity: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#home #choose-game .primary.options button h2 {
  font-weight: 400;
  font-size: 28px;
  line-height: 28px;
  padding-bottom: 8px;
  position: relative;
}
#home #choose-game .primary.options button div {
  font-size: 12px;
  white-space: nowrap;
  position: relative;
}
#home #choose-game .primary.options button .count-circle {
  position: absolute;
  right: 4px;
  top: 4px;
}
#home #choose-game .more-ways-to-play h4 {
  border-bottom: 1px solid #fff;
  border-color: #8bce8b;
  font-weight: normal;
  margin-bottom: 10px;
  padding-bottom: 4px;
}
body[data-board-color="blue"] #home #choose-game .more-ways-to-play h4 {
  border-color: #b0becf;
}
body[data-board-color="red"] #home #choose-game .more-ways-to-play h4 {
  border-color: #e0d3d3;
}
body[data-board-color="charcoal"] #home #choose-game .more-ways-to-play h4 {
  border-color: #cbcbcb;
}
body[data-board-color="black"] #home #choose-game .more-ways-to-play h4 {
  border-color: black;
}
body[data-board-color="white"] #home #choose-game .more-ways-to-play h4 {
  border-color: white;
}
#home #choose-game .ad.messages p {
  margin: 20px -10px 16px;
  text-align: center;
}
#home #choose-game .ad.messages .new-user {
  display: none;
}
#home #choose-game .ad.messages .actions {
  display: block;
}
#home #choose-game .ad.messages .no-balance .wrapper {
  background-color: gold;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #004100;
  display: inline-block;
  min-width: 300px;
  padding: 4px 8px 6px;
}
body[data-board-color="blue"] #home #choose-game .ad.messages .no-balance .wrapper {
  color: #082f5e;
}
body[data-board-color="red"] #home #choose-game .ad.messages .no-balance .wrapper {
  color: #891111;
}
body[data-board-color="charcoal"] #home #choose-game .ad.messages .no-balance .wrapper {
  color: #3e3e3e;
}
#home #choose-game .ad.messages .no-balance .wrapper a {
  color: #004100;
}
body[data-board-color="blue"] #home #choose-game .ad.messages .no-balance .wrapper a {
  color: #082f5e;
}
body[data-board-color="red"] #home #choose-game .ad.messages .no-balance .wrapper a {
  color: #891111;
}
body[data-board-color="charcoal"] #home #choose-game .ad.messages .no-balance .wrapper a {
  color: #3e3e3e;
}
#home #choose-game #request-rating {
  position: absolute;
  top: -135px;
  width: 100%;
}
#home #choose-game #request-rating.before-show {
  opacity: 0;
  -webkit-transform: translate3d(0, -1000px, 0);
          transform: translate3d(0, -1000px, 0);
}
#home #choose-game #request-rating.showing {
  -webkit-animation-name: bounceInDown;
          animation-name: bounceInDown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
#home #choose-game #request-rating.after-show {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
#home #choose-game #request-rating .inner-wrap {
  font-weight: 500;
  color: #003400;
  background-color: #e6ece6;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 300px;
}
body[data-board-color="blue"] #home #choose-game #request-rating .inner-wrap {
  color: #062347;
}
body[data-board-color="red"] #home #choose-game #request-rating .inner-wrap {
  color: #730e0e;
}
body[data-board-color="charcoal"] #home #choose-game #request-rating .inner-wrap {
  color: #323232;
}
body[data-board-color="blue"] #home #choose-game #request-rating .inner-wrap {
  background-color: #e7eaee;
}
body[data-board-color="red"] #home #choose-game #request-rating .inner-wrap {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] #home #choose-game #request-rating .inner-wrap {
  background-color: #ebebeb;
}
body[data-board-color="black"] #home #choose-game #request-rating .inner-wrap {
  background-color: black;
}
body[data-board-color="white"] #home #choose-game #request-rating .inner-wrap {
  background-color: white;
}
#home #choose-game #request-rating .inner-wrap .buttons a {
  font-family: Arial, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  color: #004100;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  margin-top: 0.5em;
  padding: 12px 8px;
  text-align: center;
  text-decoration: none;
  min-width: 80px;
  padding: 8px 8px;
  width: auto;
}
body[data-board-color="blue"] #home #choose-game #request-rating .inner-wrap .buttons a {
  color: #082f5e;
}
body[data-board-color="red"] #home #choose-game #request-rating .inner-wrap .buttons a {
  color: #891111;
}
body[data-board-color="charcoal"] #home #choose-game #request-rating .inner-wrap .buttons a {
  color: #3e3e3e;
}
#home #choose-game #request-rating .inner-wrap .buttons a:not(:last-child) {
  margin-right: 12px;
}
#home #choose-game #request-rating .inner-wrap .buttons a:hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #home #choose-game #request-rating .inner-wrap .buttons a:hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #home #choose-game #request-rating .inner-wrap .buttons a:hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #home #choose-game #request-rating .inner-wrap .buttons a:hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #home #choose-game #request-rating .inner-wrap .buttons a:hover {
  background-color: black;
}
body[data-board-color="white"] #home #choose-game #request-rating .inner-wrap .buttons a:hover {
  background-color: white;
}
@media (max-width: 479px) {
  #home #choose-game #request-rating .inner-wrap {
    width: 280px;
  }
  #home #choose-game #request-rating .inner-wrap .buttons a {
    min-width: 70px;
  }
  #home #choose-game #request-rating .inner-wrap .buttons a:not(:last-child) {
    margin-right: 8px;
  }
}
#maintenance-message {
  margin-bottom: 20px;
  background-color: #ffd700;
  padding: 8px 12px 12px;
  color: black;
  border-radius: 5px;
}
#recent-practice-list li:before {
  content: "\f109";
  display: block;
  font-family: FontAwesome;
  font-size: 200%;
  opacity: 0.25;
  position: absolute;
  left: 24px;
  top: 4px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#recent-practice-list li svg {
  display: none;
}
#compete-games-list .full-games.has-count label {
  padding-right: 16px;
}
#compete-game-list footer span[data-suggestions="No"] {
  display: none;
}
#home h3.game-list-header {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}
@media (max-width: 479px) {
  #home h3.game-list-header {
    width: 280px;
  }
}
.game-list {
  margin: 0 auto 1em auto;
  width: 300px;
}
@media (max-width: 479px) {
  .game-list {
    width: 280px;
  }
}
.game-list .loading {
  position: absolute;
  text-align: center;
  width: 300px;
}
.game-list .loaded,
.game-list .loading {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.game-list .loaded[hidden],
.game-list .loading[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
.game-list h3 {
  margin-bottom: 10px;
}
.game-list.club-event-players .event-info {
  margin-top: -0.5em;
}
.game-list.club-event-players .event-info p {
  margin-top: 0.5em;
  margin-bottom: 0;
}
.game-list.club-event-players .event-info p.rules {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px 5px;
}
.game-list.club-event-players .start-msg {
  color: gold;
  font-weight: 500;
}
.game-list.club-event-players .start-btn-wrap {
  text-align: center;
}
.game-list.club-event-players h3 {
  font-weight: 300;
}
.game-list h4 {
  border-bottom: 1px solid #fff;
  border-color: #8bce8b;
  font-weight: normal;
  margin-bottom: 10px;
  padding-bottom: 4px;
}
body[data-board-color="blue"] .game-list h4 {
  border-color: #b0becf;
}
body[data-board-color="red"] .game-list h4 {
  border-color: #e0d3d3;
}
body[data-board-color="charcoal"] .game-list h4 {
  border-color: #cbcbcb;
}
body[data-board-color="black"] .game-list h4 {
  border-color: black;
}
body[data-board-color="white"] .game-list h4 {
  border-color: white;
}
.game-list ul:empty {
  display: none;
}
.game-list ul:not(.event-players) {
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.game-list ul:not(.event-players) + ul {
  margin-top: 15px;
}
.game-list ul:not(.event-players) li:not(.loading) {
  background-color: #fff;
  border: 1px solid;
  color: #004100;
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 3px 24px 5px 48px;
  width: 100%;
  cursor: pointer;
  font-size: 17px;
  line-height: 40px;
  margin-bottom: -1px;
  min-height: 54px;
  outline: none;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 48px 48px;
  position: relative;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}
body[data-board-color="blue"] .game-list ul:not(.event-players) li:not(.loading) {
  color: #082f5e;
}
body[data-board-color="red"] .game-list ul:not(.event-players) li:not(.loading) {
  color: #891111;
}
body[data-board-color="charcoal"] .game-list ul:not(.event-players) li:not(.loading) {
  color: #3e3e3e;
}
.game-list ul:not(.event-players) li:not(.loading):first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.toast .game-list ul:not(.event-players) li:not(.loading):first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.game-list ul:not(.event-players) li:not(.loading):last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.game-list ul:not(.event-players) li:not(.loading):last-child footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
body:not(.touch) .game-list ul:not(.event-players) li:not(.loading):hover,
.keyboard-focus .game-list ul:not(.event-players) li:not(.loading):focus {
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  z-index: 1;
}
.toast body:not(.touch) .game-list ul:not(.event-players) li:not(.loading):hover,
.toast .keyboard-focus .game-list ul:not(.event-players) li:not(.loading):focus {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
}
body:not(.touch) .game-list ul:not(.event-players) li:not(.loading):hover footer,
.keyboard-focus .game-list ul:not(.event-players) li:not(.loading):focus footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.keyboard-focus .game-list ul:not(.event-players) li:not(.loading):focus {
  z-index: 2;
}
.game-list ul:not(.event-players) li:not(.loading):hover {
  z-index: 3;
}
.game-list ul:not(.event-players) li:not(.loading) .count-circle {
  position: absolute;
  right: 26px;
  top: 16px;
}
.game-list ul:not(.event-players) li:not(.loading) .wrapper {
  display: inline-block;
  line-height: 17px;
  vertical-align: middle;
  width: 100%;
}
.game-list ul:not(.event-players) li:not(.loading) .wrapper > b {
  display: block;
  line-height: 23px;
  margin: -3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Hearts"] {
  background-image: url(/image/icons/hearts-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Spades"] {
  background-image: url(/image/icons/spades-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Euchre"] {
  background-image: url(/image/icons/euchre-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Pitch"] {
  background-image: url(/image/icons/pitch-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Pinochle"] {
  background-image: url(/image/icons/pinochle-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Bridge"] {
  background-image: url(/image/icons/bridge-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="FiveHundred"] {
  background-image: url(/image/icons/fivehundred-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="OhHell"] {
  background-image: url(/image/icons/ohhell-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading)[data-gameType="Whist"] {
  background-image: url(/image/icons/whist-clear-96x96.png);
}
.game-list ul:not(.event-players) li:not(.loading) .rules {
  font-size: 12px;
  line-height: 14px;
  display: block;
  text-align: left;
  padding-top: 2px;
}
.game-list ul:not(.event-players) li:not(.loading):after {
  content: "\f105";
  display: block;
  font-family: FontAwesome;
  font-size: 150%;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.game-list ul.event-players {
  background-color: rgba(255, 255, 255, 0.2);
  border-top: 2px solid white;
  list-style: none;
  margin-top: 0.5em;
  padding: 10px;
}
.game-list ul.event-players li {
  padding-bottom: 5px;
}
.game-list ul.event-players li .unique-name {
  max-width: -webkit-calc(100% - 25px);
  max-width: calc(100% - 25px);
}
.game-list ul.event-players li .fa {
  margin-right: 0.5em;
}
.game-list ul.event-players li.is-admin .unique-name {
  max-width: -webkit-calc(100% - 25px - 52px);
  max-width: calc(100% - 25px - 52px);
}
.game-list ul.event-players li.is-admin .admin {
  background-color: #005a00;
  display: inline-block;
  font-size: 12px;
  margin-left: 6px;
  padding: 1px 4px 2px;
  position: relative;
  top: -1px;
}
body[data-board-color="blue"] .game-list ul.event-players li.is-admin .admin {
  background-color: #0a3b76;
}
body[data-board-color="red"] .game-list ul.event-players li.is-admin .admin {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .game-list ul.event-players li.is-admin .admin {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .game-list ul.event-players li.is-admin .admin {
  background-color: black;
}
body[data-board-color="white"] .game-list ul.event-players li.is-admin .admin {
  background-color: white;
}
.game-list.open-games .more-games {
  text-align: center;
}
.game-list.open-games .group {
  margin-top: 1em;
}
.toast .game-list.open-games .group {
  margin-top: 0;
}
.game-list.open-games ul li:not(.loading) {
  padding: 0;
}
.game-list.open-games ul li:not(.loading) .club-game-name {
  font-weight: 500;
  background-color: #8bce8b;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 16px;
  line-height: normal;
  overflow: hidden;
  padding: 0 8px 2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-board-color="blue"] .game-list.open-games ul li:not(.loading) .club-game-name {
  background-color: #b0becf;
}
body[data-board-color="red"] .game-list.open-games ul li:not(.loading) .club-game-name {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .game-list.open-games ul li:not(.loading) .club-game-name {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .game-list.open-games ul li:not(.loading) .club-game-name {
  background-color: black;
}
body[data-board-color="white"] .game-list.open-games ul li:not(.loading) .club-game-name {
  background-color: white;
}
.game-list.open-games ul li:not(.loading):not(:first-child):not(:hover) .club-game-name {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.game-list.open-games ul li:not(.loading) header {
  display: block;
  min-height: 48px;
  position: relative;
}
.game-list.open-games ul li:not(.loading) .favorite {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 1;
}
.game-list.open-games ul li:not(.loading).show-details header:after {
  content: "\f103";
  display: block;
  font-family: FontAwesome;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.game-list.open-games ul li:not(.loading).show-details.open header:after {
  content: "\f102";
}
.toast .game-list.open-games ul li:not(.loading).show-details.open header:after {
  content: "\f00d";
}
.game-list.open-games ul li:not(.loading) .title .sub {
  font-size: 12px;
}
.game-list.open-games ul li:not(.loading) .wrapper {
  margin: 3px 8px 3px 48px;
  width: auto;
}
.game-list.open-games ul li:not(.loading) .wrapper .rules {
  padding-right: 16px;
}
.game-list.open-games ul li:not(.loading) .wrapper .missing {
  background-color: yellow;
  font-style: italic;
}
.game-list.open-games ul li:not(.loading) .wrapper .suit {
  color: inherit !important;
}
.game-list.open-games ul li:not(.loading) b {
  font-size: 14px;
  line-height: 1.5;
}
.game-list.open-games ul li:not(.loading) .dif {
  background-color: yellow;
}
.game-list.open-games ul li:not(.loading) .rel {
  position: relative;
}
.game-list.open-games ul li:not(.loading):after {
  content: "";
}
.game-list.open-games ul li:not(.loading) .details {
  background-color: #004100;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  cursor: default;
  overflow: hidden;
  padding: 0 8px;
  position: relative;
  height: 0;
  font-size: 14px;
  text-align: center;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  visibility: hidden;
}
body[data-board-color="blue"] .game-list.open-games ul li:not(.loading) .details {
  background-color: #082f5e;
}
body[data-board-color="red"] .game-list.open-games ul li:not(.loading) .details {
  background-color: #891111;
}
body[data-board-color="charcoal"] .game-list.open-games ul li:not(.loading) .details {
  background-color: #3e3e3e;
}
.game-list.open-games ul li:not(.loading) .details .has-started,
.game-list.open-games ul li:not(.loading) .details .mode,
.game-list.open-games ul li:not(.loading) .details .scheduled {
  position: absolute;
  top: 0;
  left: 0;
  line-height: normal;
  padding: 4px 8px 6px;
}
.game-list.open-games ul li:not(.loading) .details .has-started.can-schedule,
.game-list.open-games ul li:not(.loading) .details .mode.can-schedule,
.game-list.open-games ul li:not(.loading) .details .scheduled.can-schedule {
  color: yellow;
  overflow: hidden;
}
.game-list.open-games ul li:not(.loading) .details .has-started.can-schedule:hover,
.game-list.open-games ul li:not(.loading) .details .mode.can-schedule:hover,
.game-list.open-games ul li:not(.loading) .details .scheduled.can-schedule:hover {
  text-decoration: underline;
}
.game-list.open-games ul li:not(.loading) .details .has-started.can-schedule select,
.game-list.open-games ul li:not(.loading) .details .mode.can-schedule select,
.game-list.open-games ul li:not(.loading) .details .scheduled.can-schedule select {
  display: block;
}
.game-list.open-games ul li:not(.loading) .details .has-started select,
.game-list.open-games ul li:not(.loading) .details .mode select,
.game-list.open-games ul li:not(.loading) .details .scheduled select {
  cursor: pointer;
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.game-list.open-games ul li:not(.loading) .details .has-started,
.game-list.open-games ul li:not(.loading) .details .scheduled {
  left: auto;
  right: 0;
}
.game-list.open-games ul li:not(.loading) .details .scheduled-day {
  display: block;
}
.game-list.open-games ul li:not(.loading) .details .scheduled-day[data-day="Today"] {
  display: none;
}
.game-list.open-games ul li:not(.loading) .details .user {
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  line-height: 37px;
  padding: 0px 4px 2px;
  position: absolute;
  width: 33%;
}
.game-list.open-games ul li:not(.loading) .details .user.disabled {
  background-color: transparent;
  cursor: default;
  opacity: 0.5;
}
.game-list.open-games ul li:not(.loading) .details .user.open {
  opacity: 0.5;
}
.game-list.open-games ul li:not(.loading) .details .user.top {
  left: 50%;
  top: 25px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.game-list.open-games ul li:not(.loading) .details .user.left {
  left: 6px;
  top: 88px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.game-list.open-games ul li:not(.loading) .details .user.left[data-seats="3"] {
  top: 70px;
}
.game-list.open-games ul li:not(.loading) .details .user.left[data-seats="5"] {
  top: 100px;
}
.game-list.open-games ul li:not(.loading) .details .user.left[data-seats="6"] {
  top: 110px;
}
.game-list.open-games ul li:not(.loading) .details .user.right {
  right: 6px;
  top: 88px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.game-list.open-games ul li:not(.loading) .details .user.right[data-seats="3"] {
  top: 70px;
}
.game-list.open-games ul li:not(.loading) .details .user.right[data-seats="5"] {
  top: 100px;
}
.game-list.open-games ul li:not(.loading) .details .user.right[data-seats="6"] {
  top: 110px;
}
.game-list.open-games ul li:not(.loading) .details .user.topleft {
  left: 6px;
  top: 60px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.game-list.open-games ul li:not(.loading) .details .user.topleft[data-seats="5"] {
  top: 50px;
}
.game-list.open-games ul li:not(.loading) .details .user.topright {
  right: 6px;
  top: 60px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.game-list.open-games ul li:not(.loading) .details .user.topright[data-seats="5"] {
  top: 50px;
}
.game-list.open-games ul li:not(.loading) .details .user.bottom {
  left: 50%;
  top: 130px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.game-list.open-games ul li:not(.loading) .details .user .name-tag {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 4px;
  border-radius: 3px;
}
.game-list.open-games ul li:not(.loading) .details .user .name-tag:not([data-name-tag="none"]) {
  border: 1px solid #000;
}
.game-list.open-games ul li:not(.loading) .details .user .name-tag:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
}
.game-list.open-games ul li:not(.loading) .details .user:focus,
.game-list.open-games ul li:not(.loading) .details .user:hover {
  outline: none;
}
.game-list.open-games ul li:not(.loading) .details .user:focus .name-tag:after,
.game-list.open-games ul li:not(.loading) .details .user:hover .name-tag:after {
  background-color: rgba(255, 255, 255, 0.25);
}
.game-list.open-games ul li:not(.loading) .details .user .info {
  position: relative;
}
.game-list.open-games ul li:not(.loading) .details .user .status.fa {
  display: none;
  margin-right: 0.4em;
}
.game-list.open-games ul li:not(.loading) .details .user .status.fa[class*="fa-"],
.game-list.open-games ul li:not(.loading) .details .user .status.fa.icon-badge {
  display: inline-block;
}
.game-list.open-games ul li:not(.loading) .details .user .status.fa[class*="fa-"] + .unique-name {
  max-width: 75%;
}
.game-list.open-games ul li:not(.loading) .details .user .status.fa.icon-badge + .unique-name {
  max-width: 80%;
}
.game-list.open-games ul li:not(.loading) .details .actions {
  line-height: normal;
  text-align: center;
}
.game-list.open-games ul li:not(.loading) .details .actions .fineprint {
  color: #e6ece6;
  font-size: 11px;
  margin-top: 4px;
}
body[data-board-color="blue"] .game-list.open-games ul li:not(.loading) .details .actions .fineprint {
  color: #e7eaee;
}
body[data-board-color="red"] .game-list.open-games ul li:not(.loading) .details .actions .fineprint {
  color: #f1e7e7;
}
body[data-board-color="charcoal"] .game-list.open-games ul li:not(.loading) .details .actions .fineprint {
  color: #ebebeb;
}
body[data-board-color="black"] .game-list.open-games ul li:not(.loading) .details .actions .fineprint {
  color: black;
}
body[data-board-color="white"] .game-list.open-games ul li:not(.loading) .details .actions .fineprint {
  color: white;
}
.game-list.open-games ul li:not(.loading) .details .win {
  margin: -5px 0 5px;
}
.game-list.open-games ul li:not(.loading) .details .win[hidden] {
  display: block;
  margin-bottom: -5px;
  visibility: hidden;
}
.game-list.open-games ul li:not(.loading) .details button {
  background-color: #008d00;
  border-radius: 3px;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
  line-height: normal;
  min-width: 35%;
}
body[data-board-color="blue"] .game-list.open-games ul li:not(.loading) .details button {
  background-color: #105ebd;
}
body[data-board-color="red"] .game-list.open-games ul li:not(.loading) .details button {
  background-color: #d61b1b;
}
body[data-board-color="charcoal"] .game-list.open-games ul li:not(.loading) .details button {
  background-color: #717171;
}
.game-list.open-games ul li:not(.loading) .details button:focus,
.game-list.open-games ul li:not(.loading) .details button:hover {
  background-color: #fff !important;
  color: #004100;
  outline: none;
}
body[data-board-color="blue"] .game-list.open-games ul li:not(.loading) .details button:focus,
body[data-board-color="blue"] .game-list.open-games ul li:not(.loading) .details button:hover {
  color: #082f5e;
}
body[data-board-color="red"] .game-list.open-games ul li:not(.loading) .details button:focus,
body[data-board-color="red"] .game-list.open-games ul li:not(.loading) .details button:hover {
  color: #891111;
}
body[data-board-color="charcoal"] .game-list.open-games ul li:not(.loading) .details button:focus,
body[data-board-color="charcoal"] .game-list.open-games ul li:not(.loading) .details button:hover {
  color: #3e3e3e;
}
.game-list.open-games ul li:not(.loading).open .details {
  height: 200px;
  -webkit-transition-property: height;
  transition-property: height;
  visibility: inherit;
}
.game-list.open-games ul li:not(.loading).open.full-with-actions .details {
  height: 240px;
}
.game-list.open-games ul li:not(.loading).open.full-with-actions .details .actions {
  bottom: 30px;
  left: 0;
  position: absolute;
  width: 100%;
}
.game-list.open-games svg.summary {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  stroke: #fff;
  stroke-width: 4px;
}
.game-list.open-games svg.summary text {
  fill: #004100;
}
body[data-board-color="blue"] .game-list.open-games svg.summary text {
  fill: #082f5e;
}
body[data-board-color="red"] .game-list.open-games svg.summary text {
  fill: #891111;
}
body[data-board-color="charcoal"] .game-list.open-games svg.summary text {
  fill: #3e3e3e;
}
.game-list.open-games svg.players {
  display: block;
  margin: 40px auto 0;
  width: 96px;
  height: 96px;
  stroke: #004100;
  stroke-width: 6px;
}
body[data-board-color="blue"] .game-list.open-games svg.players {
  stroke: #082f5e;
}
body[data-board-color="red"] .game-list.open-games svg.players {
  stroke: #891111;
}
body[data-board-color="charcoal"] .game-list.open-games svg.players {
  stroke: #3e3e3e;
}
.game-list.open-games svg.players path,
.game-list.open-games svg.players text {
  fill: #fff !important;
  font-size: 32px;
}
.game-list.open-games svg.players circle {
  fill: #004100;
}
body[data-board-color="blue"] .game-list.open-games svg.players circle {
  fill: #082f5e;
}
body[data-board-color="red"] .game-list.open-games svg.players circle {
  fill: #891111;
}
body[data-board-color="charcoal"] .game-list.open-games svg.players circle {
  fill: #3e3e3e;
}
.game-list.open-games path,
.game-list.open-games rect,
.game-list.open-games text {
  fill: #005a00;
}
body[data-board-color="blue"] .game-list.open-games path,
body[data-board-color="blue"] .game-list.open-games rect,
body[data-board-color="blue"] .game-list.open-games text {
  fill: #0a3b76;
}
body[data-board-color="red"] .game-list.open-games path,
body[data-board-color="red"] .game-list.open-games rect,
body[data-board-color="red"] .game-list.open-games text {
  fill: #a01414;
}
body[data-board-color="charcoal"] .game-list.open-games path,
body[data-board-color="charcoal"] .game-list.open-games rect,
body[data-board-color="charcoal"] .game-list.open-games text {
  fill: #4b4b4b;
}
body[data-board-color="black"] .game-list.open-games path,
body[data-board-color="black"] .game-list.open-games rect,
body[data-board-color="black"] .game-list.open-games text {
  fill: black;
}
body[data-board-color="white"] .game-list.open-games path,
body[data-board-color="white"] .game-list.open-games rect,
body[data-board-color="white"] .game-list.open-games text {
  fill: white;
}
.game-list.open-games path.open,
.game-list.open-games rect.open,
.game-list.open-games text.open {
  opacity: 0.25;
}
.game-list.open-games rect {
  stroke: none;
}
.game-list.open-games text {
  font-family: FontAwesome;
  font-size: 16px;
  opacity: 0.25;
  text-anchor: middle;
  dominant-baseline: middle;
  stroke: transparent;
}
.game-list.open-games circle {
  fill: #fff;
  stroke: none;
}
.game-list.open-games footer {
  background-color: #e6ece6;
  line-height: 0;
  font-size: 0;
  min-height: 24px;
}
body[data-board-color="blue"] .game-list.open-games footer {
  background-color: #e7eaee;
}
body[data-board-color="red"] .game-list.open-games footer {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] .game-list.open-games footer {
  background-color: #ebebeb;
}
body[data-board-color="black"] .game-list.open-games footer {
  background-color: black;
}
body[data-board-color="white"] .game-list.open-games footer {
  background-color: white;
}
.game-list.open-games footer > span {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  padding: 0 8px 0 4px;
  float: right;
}
.game-list.open-games footer > span.on-left {
  float: none;
  padding-left: 8px;
}
.game-list.open-games footer > span.on-left[hidden] {
  display: none;
}
.game-list.open-games footer > span[hidden] {
  visibility: hidden;
}
.game-list.open-games footer > span[data-chat="No"],
.game-list.open-games footer > span[data-suggestions="Yes"],
.game-list.open-games footer > span[data-turn-times="Off"] {
  display: none;
}
.install-button {
  background-color: #000;
  border: 1px solid #aaa;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  line-height: 25px;
  padding: 4px 8px 6px 8px;
}
.install-button:focus,
.install-button:hover {
  background-color: #333 !important;
}
.install-button .fa {
  font-size: 25px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.install-link {
  line-height: 0;
}
.install-link > img {
  height: 40px;
}
.install-instructions ol {
  margin: 0.5em;
  padding-left: 1.25em;
}
.install-instructions li {
  margin: 1em 0;
}
.install-instructions img {
  border-radius: 3px;
  -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
  margin-top: 0.5em;
  width: 268px;
}
#lessons .about {
  margin-top: -12px;
  font-size: 14px;
}
#lessons .no-lessons {
  font-weight: 500;
  text-align: left;
}
#lessons h4 {
  border-bottom: 1px solid;
  margin-top: 1em;
  margin-bottom: 10px;
  padding-bottom: 2px;
  text-align: left;
}
#lessons .in-progress-lessons {
  background-color: #004100;
  width: 320px;
  margin: 1.5em auto 1em;
  padding-bottom: 1px;
  padding-top: 5px;
  border-radius: 5px;
}
body[data-board-color="blue"] #lessons .in-progress-lessons {
  background-color: #082f5e;
}
body[data-board-color="red"] #lessons .in-progress-lessons {
  background-color: #891111;
}
body[data-board-color="charcoal"] #lessons .in-progress-lessons {
  background-color: #3e3e3e;
}
#lessons .in-progress-lessons .no-lessons {
  margin-top: 10px;
}
#lessons .in-progress-lessons .in-progress-lessons-header {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
#lessons .in-progress-lessons .in-progress-lessons-header + h4 {
  margin-top: 0.5em;
}
@media (max-width: 479px) {
  #lessons .in-progress-lessons {
    width: 300px;
    position: relative;
    left: -10px;
  }
}
#lessons .lesson-item-template a.option {
  position: relative;
}
#lessons .lesson-item-template a.option .action {
  color: #8bce8b;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: none;
  height: 24px;
  position: absolute;
  text-align: center;
  width: 24px;
}
body[data-board-color="blue"] #lessons .lesson-item-template a.option .action {
  color: #b0becf;
}
body[data-board-color="red"] #lessons .lesson-item-template a.option .action {
  color: #e0d3d3;
}
body[data-board-color="charcoal"] #lessons .lesson-item-template a.option .action {
  color: #cbcbcb;
}
body[data-board-color="black"] #lessons .lesson-item-template a.option .action {
  color: black;
}
body[data-board-color="white"] #lessons .lesson-item-template a.option .action {
  color: white;
}
#lessons .lesson-item-template a.option .action:hover {
  color: #005a00;
  background-color: #c5e0c5;
}
body[data-board-color="blue"] #lessons .lesson-item-template a.option .action:hover {
  color: #0a3b76;
}
body[data-board-color="red"] #lessons .lesson-item-template a.option .action:hover {
  color: #a01414;
}
body[data-board-color="charcoal"] #lessons .lesson-item-template a.option .action:hover {
  color: #4b4b4b;
}
body[data-board-color="black"] #lessons .lesson-item-template a.option .action:hover {
  color: black;
}
body[data-board-color="white"] #lessons .lesson-item-template a.option .action:hover {
  color: white;
}
body[data-board-color="blue"] #lessons .lesson-item-template a.option .action:hover {
  background-color: #e2e5e9;
}
body[data-board-color="red"] #lessons .lesson-item-template a.option .action:hover {
  background-color: #ffffff;
}
body[data-board-color="charcoal"] #lessons .lesson-item-template a.option .action:hover {
  background-color: #f1f1f1;
}
body[data-board-color="black"] #lessons .lesson-item-template a.option .action:hover {
  background-color: black;
}
body[data-board-color="white"] #lessons .lesson-item-template a.option .action:hover {
  background-color: white;
}
#lessons .lesson-item-template a.option .move-up {
  right: 64px;
  top: 0;
}
#lessons .lesson-item-template a.option .move-down {
  right: 44px;
  bottom: 0;
}
#lessons .lesson-item-template a.option .edit {
  right: 18px;
  top: 50%;
  margin-top: -12px;
}
#lessons .lesson-item-template a.option:hover .action {
  display: block;
}
#lessons .edit-lesson input[disabled] {
  opacity: 0.5;
}
#new-game-form h3 {
  margin-bottom: 0;
  position: relative;
}
#new-game-form .favorite {
  float: right;
  margin-right: -4px;
  margin-top: -4px;
}
#new-game-form .rules {
  display: table-cell;
  font-size: 14px;
  font-weight: normal;
  height: 54px;
  line-height: 18px;
  margin-left: 50px;
  vertical-align: middle;
}
@media (min-width: 375px) {
  #new-game-form .rules {
    margin-left: 0;
  }
}
#new-game-form .suit {
  color: inherit !important;
}
#new-game-form .winnings label {
  line-height: normal;
}
#new-game-form .winnings label .none {
  display: inline-block;
  position: relative;
  top: 7px;
}
#new-game-form .winnings label .cost {
  display: block;
  font-size: 12px;
}
#new-game-form .ask-for-feedback {
  text-align: center;
  margin-top: 1.5em;
  line-height: 1.8em;
}
#new-game-form .ask-for-feedback a {
  margin-left: 0.75em;
}
@media (max-width: 479px) {
  #new-game-form .ask-for-feedback {
    padding-right: 12px;
  }
  #new-game-form .ask-for-feedback a {
    margin-left: 0;
  }
}
#new-game-form tr[disabled] {
  opacity: 0.35;
}
.popup.rule-details {
  max-width: 400px;
}
.popup.rule-details h3 {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  font-style: italic;
  font-weight: normal;
}
.popup.rule-details h3:before {
  content: "“";
}
.popup.rule-details h3:after {
  content: "” ";
}
.popup.rule-details h3 + p {
  display: inline;
}
.popup.rule-details h3 + p:after {
  content: ". ";
}
.popup.rule-details .content {
  padding: 8px 10px 10px;
}
.popup.rule-details .content p {
  margin: 0;
}
.popup.rule-details .content .rulesOption {
  font-style: italic;
}
#current-user button {
  border-radius: 0;
  font-size: inherit;
  line-height: normal;
  max-width: 100%;
  min-width: 80px;
  position: relative;
  white-space: nowrap;
  width: auto;
}
#current-user button .name-tag {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  bottom: 3px;
  border-radius: 3px;
}
#current-user button .name-tag:not([data-name-tag="none"]) {
  border: 1px solid #000;
}
#current-user button .name-tag:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
}
#current-user button:focus,
#current-user button:hover {
  background-color: transparent;
}
#current-user button:focus .name-tag:after,
#current-user button:hover .name-tag:after {
  background-color: rgba(255, 255, 255, 0.2);
}
#current-user button .text {
  overflow: hidden;
  padding: 0 10px;
  position: relative;
}
#current-user {
  max-width: 50%;
  position: absolute;
  right: 10px;
  text-align: center;
  top: 10px;
}
body.chat-enabled #current-user {
  right: 62px;
}
@media (max-width: 479px), (max-height: 479px) {
  #current-user {
    right: 0;
    top: 0;
  }
  body.chat-enabled #current-user {
    right: 42px;
  }
}
#current-user .guest-label {
  font-size: 14px;
  white-space: nowrap;
}
#edit-email-link {
  overflow: hidden;
  max-width: 256px;
  padding-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ohhell-deal-pattern.radio-group {
  font-size: 14px;
}
.popup .accept-terms.wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 5px;
  max-width: 300px;
  text-align: center;
}
.popup .accept-terms.wrapper p {
  margin: 0;
  padding: 8px 10px;
}
.popup .accept-terms.wrapper .actions {
  padding: 5px 10px;
}
#home {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
}
#home input[type="email"][readonly] {
  background-color: rgba(0, 0, 0, 0) !important;
  color: white !important;
}
#home input.code {
  font-family: Consolas, Menlo-Bold, "Courier New", Courier, monospace;
}
#home .center {
  text-align: center;
}
#home .header {
  background-image: url("../image/cards-header-810x378.png?rev=1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
  margin: 0 auto 18px;
  max-width: 405px;
  position: relative;
}
@media (min-height: 768px) {
  #home .header {
    display: block;
  }
}
@media (min-height: 480px) {
  #home .header.keep-visible {
    display: block;
  }
}
#home .header:before {
  content: "";
  display: block;
  padding-top: 46.667%;
}
body[data-brand="Dev"] #home .header {
  background-image: url("../image/dev-header-810x378.png?rev=1");
}
#home .header[data-brand="Hearts"],
body[data-brand="Hearts"] #home .header {
  background-image: url("../image/hearts-header-810x378.png?rev=1");
}
#home .header[data-brand="Spades"],
body[data-brand="Spades"] #home .header {
  background-image: url("../image/spades-header-810x378.png?rev=1");
}
#home .header[data-brand="Euchre"],
body[data-brand="Euchre"] #home .header {
  background-image: url("../image/euchre-header-810x378.png?rev=1");
}
#home .header[data-brand="Pitch"],
body[data-brand="Pitch"] #home .header {
  background-image: url("../image/pitch-header-810x378.png?rev=1");
}
#home .header[data-brand="Pinochle"],
body[data-brand="Pinochle"] #home .header {
  background-image: url("../image/pinochle-header-810x378.png?rev=1");
}
#home .header[data-brand="Bridge"],
body[data-brand="Bridge"] #home .header {
  background-image: url("../image/bridge-header-810x378.png?rev=1");
}
#home .header[data-brand="FiveHundred"],
body[data-brand="FiveHundred"] #home .header {
  background-image: url("../image/fivehundred-header-810x378.png?rev=1");
}
#home .header[data-brand="OhHell"],
body[data-brand="OhHell"] #home .header {
  background-image: url("../image/ohhell-header-810x378.png?rev=1");
}
#home .header[data-brand="Whist"],
body[data-brand="Whist"] #home .header {
  background-image: url("../image/whist-header-810x378.png?rev=1");
}
#home .header .install-button,
#home .header .install-link {
  bottom: 0;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(40%, -50%);
          transform: translate(40%, -50%);
}
@media (max-width: 479px), (max-height: 479px) {
  #home .header .install-button,
  #home .header .install-link {
    -webkit-transform: translate(20%, -30%);
            transform: translate(20%, -30%);
  }
}
@media (max-width: 340px) {
  #home .header .install-button,
  #home .header .install-link {
    -webkit-transform: translate(10%, -20%);
            transform: translate(10%, -20%);
  }
}
#home h1,
#home h2,
#home h3 {
  margin: 0;
  font-weight: 500;
}
#home h3 a {
  float: right;
  font-size: 16px;
  font-weight: normal;
  margin-top: 6px;
}
#home .subtitle {
  margin: -12px auto 16px;
}
#home .front-door-messages button {
  position: absolute;
  top: 0;
  left: 50px;
}
@media (max-width: 479px) {
  #home .front-door-messages button {
    left: 0;
  }
}
#home .front-door-messages button:not([hidden]) ~ div p {
  padding-left: 30px;
}
#home .front-door-messages button:not([hidden]) ~ div p .not-small {
  display: none;
}
@media (min-width: 375px) {
  #home .front-door-messages button:not([hidden]) ~ div p {
    padding-left: 0;
  }
  #home .front-door-messages button:not([hidden]) ~ div p .not-small {
    display: inline;
  }
}
#home .front-door-messages p {
  margin: 0px -10px 16px;
  padding-top: 3px;
  text-align: center;
}
#home p.extra-space-before {
  margin-top: 2em;
}
#home .help {
  text-align: center;
}
#home input[type="text"],
#home input[type="password"],
#home input[type="email"],
#home input[type="number"],
#home input[type="tel"],
#home input[type="url"],
#home input[type="search"],
#home select {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 4px 8px;
  vertical-align: baseline;
  width: 100%;
}
#home select {
  padding: 3px;
}
#home .radio-group {
  margin-top: 0;
}
#home .radio-group .radio-item > label {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
#home .radio-group .radio-item > input:not(:disabled):hover + label,
.keyboard-focus #home .radio-group .radio-item > input:not(:disabled):focus + label {
  background-color: rgba(255, 255, 255, 0.25);
}
#home .radio-group .radio-item > input:checked + label {
  background-color: #fff;
  color: #004100;
}
body[data-board-color="blue"] #home .radio-group .radio-item > input:checked + label {
  color: #082f5e;
}
body[data-board-color="red"] #home .radio-group .radio-item > input:checked + label {
  color: #891111;
}
body[data-board-color="charcoal"] #home .radio-group .radio-item > input:checked + label {
  color: #3e3e3e;
}
#home .radio-group .radio-item.two-lines {
  vertical-align: top;
}
#home .radio-group .radio-item.two-lines label {
  line-height: 18px;
}
#home label.toggle .switch .track {
  background-color: #004100;
  border-color: #fff;
}
body[data-board-color="blue"] #home label.toggle .switch .track {
  background-color: #082f5e;
}
body[data-board-color="red"] #home label.toggle .switch .track {
  background-color: #891111;
}
body[data-board-color="charcoal"] #home label.toggle .switch .track {
  background-color: #3e3e3e;
}
#home label.toggle .switch .thumb {
  background-color: #005a00;
  border-color: #fff;
}
body[data-board-color="blue"] #home label.toggle .switch .thumb {
  background-color: #0a3b76;
}
body[data-board-color="red"] #home label.toggle .switch .thumb {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #home label.toggle .switch .thumb {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #home label.toggle .switch .thumb {
  background-color: black;
}
body[data-board-color="white"] #home label.toggle .switch .thumb {
  background-color: white;
}
#home label.toggle input:checked + .switch .track {
  background-color: #fff !important;
}
#home .warning {
  background-color: gold;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #004100;
  padding: 4px 8px 6px;
}
body[data-board-color="blue"] #home .warning {
  color: #082f5e;
}
body[data-board-color="red"] #home .warning {
  color: #891111;
}
body[data-board-color="charcoal"] #home .warning {
  color: #3e3e3e;
}
#home .warning a {
  color: #004100;
}
body[data-board-color="blue"] #home .warning a {
  color: #082f5e;
}
body[data-board-color="red"] #home .warning a {
  color: #891111;
}
body[data-board-color="charcoal"] #home .warning a {
  color: #3e3e3e;
}
#home .narrow {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 300px;
}
#home .narrow.left {
  text-align: left;
}
@media (max-width: 479px) {
  #home .narrow {
    width: 280px;
  }
}
#home #in-progress-games,
#home #challenge-games,
#home #rotating-challenge-games,
#home #completed-challenge-games {
  margin-top: 20px;
}
#home #in-progress-games h4,
#home #challenge-games h4,
#home #rotating-challenge-games h4,
#home #completed-challenge-games h4 {
  margin-bottom: -6px;
}
#home #in-progress-games h4 a,
#home #challenge-games h4 a,
#home #rotating-challenge-games h4 a,
#home #completed-challenge-games h4 a {
  float: right;
}
#home #welcome,
#home #loading {
  text-align: center;
}
#home #welcome .header,
#home #loading .header {
  display: block;
}
#home #welcome .loading,
#home #loading .loading,
#home #welcome .loaded,
#home #loading .loaded {
  margin-top: 2em;
}
#home #welcome .loading .fa-spinner,
#home #loading .loading .fa-spinner,
#home #welcome .loaded .fa-spinner,
#home #loading .loaded .fa-spinner {
  font-size: 28px;
  position: relative;
  top: 5px;
}
#home div.form-error {
  position: relative;
  height: 0;
  z-index: 1;
}
#home div.form-error div {
  padding: 0 4px;
  background-color: lightgoldenrodyellow;
  color: black;
  top: 4px;
  border: 1px solid black;
  position: absolute;
  min-width: 150px;
}
#home div.form-error div span {
  background-color: lightgoldenrodyellow;
  position: relative;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 1px;
  padding: 2px 10px 4px;
}
#home div.form-error div.field-error {
  border-radius: 3px;
  left: -12px;
}
#home div.form-error div.field-error:before {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  background-color: lightgoldenrodyellow;
  -webkit-transform: translate(12.5px, -6px) rotate(45deg);
          transform: translate(12.5px, -6px) rotate(45deg);
  border-left: 1px solid black;
  border-top: solid 1px black;
}
@-webkit-keyframes show-right {
  0% {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes show-right {
  0% {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes show-left {
  0% {
    -webkit-transform: translateX(-350px);
            transform: translateX(-350px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes show-left {
  0% {
    -webkit-transform: translateX(-350px);
            transform: translateX(-350px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes hide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
}
@keyframes hide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
}
@-webkit-keyframes hide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-350px);
            transform: translateX(-350px);
  }
}
@keyframes hide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-350px);
            transform: translateX(-350px);
  }
}
#home > div,
#home > form {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-scroll-chaining: none;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  padding: 20px;
}
#home > div .name-tag-separator,
#home > form .name-tag-separator {
  margin: 10px 0 10px;
  height: 2px;
  width: 100%;
  background-color: darkgreen;
}
#home > div .name-tag-wrapper,
#home > form .name-tag-wrapper {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 10px;
  position: relative;
  padding: 10px;
}
#home > div .name-tag-wrapper.unlocked,
#home > form .name-tag-wrapper.unlocked {
  background-color: transparent;
  padding: 10px 0;
}
#home > div .name-tag-wrapper.unlocked .is-locked,
#home > form .name-tag-wrapper.unlocked .is-locked,
#home > div .name-tag-wrapper.unlocked .is-unlocking,
#home > form .name-tag-wrapper.unlocked .is-unlocking {
  display: none;
}
#home > div .name-tag-wrapper.unlocking .is-locked:not(.fa-lock),
#home > form .name-tag-wrapper.unlocking .is-locked:not(.fa-lock),
#home > div .name-tag-wrapper.unlocking .is-unlocked,
#home > form .name-tag-wrapper.unlocking .is-unlocked {
  display: none;
}
#home > div .name-tag-wrapper.unlocking .is-unlocking,
#home > form .name-tag-wrapper.unlocking .is-unlocking {
  display: block;
}
#home > div .name-tag-wrapper:not(.unlocked) .is-unlocked,
#home > form .name-tag-wrapper:not(.unlocked) .is-unlocked {
  display: none;
}
#home > div .name-tag-wrapper .is-unlocking,
#home > form .name-tag-wrapper .is-unlocking {
  display: none;
}
#home > div .name-tag-wrapper .fa-lock,
#home > form .name-tag-wrapper .fa-lock {
  margin-right: 0.25em;
}
#home > div .name-tag-wrapper .status,
#home > form .name-tag-wrapper .status {
  float: right;
}
#home > div .name-tag-wrapper h2,
#home > form .name-tag-wrapper h2 {
  text-align: left;
}
#home > div[hidden],
#home > form[hidden],
[hidden] #home > div,
[hidden] #home > form {
  -webkit-overflow-scrolling: auto;
  overflow-y: hidden;
}
#home > div::-webkit-scrollbar,
#home > form::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
#home > div::-webkit-scrollbar-thumb,
#home > form::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.9);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
}
#home > div::-webkit-scrollbar-thumb:hover,
#home > form::-webkit-scrollbar-thumb:hover,
#home > div::-webkit-scrollbar-thumb:active,
#home > form::-webkit-scrollbar-thumb:active {
  border-radius: 2px;
  border-width: 1px;
}
@media (min-width: 480px) {
  #home > div:before,
  #home > form:before {
    content: "";
    display: block;
    height: 10%;
  }
}
@media (min-height: 768px) {
  #home > div,
  #home > form {
    -webkit-animation-name: none !important;
            animation-name: none !important;
    opacity: 1 !important;
    padding-top: 0;
  }
  #home > div[hidden] .header,
  #home > form[hidden] .header {
    visibility: hidden;
  }
  #home > div:before,
  #home > form:before {
    content: "";
    display: block;
    height: 50%;
    margin-top: -350px;
  }
}
#home > div,
#home > form,
#home > div > .wrapper,
#home > form > .wrapper {
  -webkit-animation: show-right 0.3s;
          animation: show-right 0.3s;
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  visibility: visible;
}
@media (max-width: 479px), (max-height: 479px) {
  #home > div,
  #home > form,
  #home > div > .wrapper,
  #home > form > .wrapper {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
#home > div.restoring,
#home > form.restoring,
#home > div.restoring > .wrapper,
#home > form.restoring > .wrapper {
  -webkit-animation-name: show-left;
          animation-name: show-left;
}
#home > div.fade,
#home > form.fade,
#home > div.fade > .wrapper,
#home > form.fade > .wrapper {
  -webkit-animation-name: none;
          animation-name: none;
}
#home > div[hidden],
#home > form[hidden] {
  display: block;
  overflow: hidden;
}
#home > div[hidden],
#home > form[hidden],
#home > div[hidden] > .wrapper,
#home > form[hidden] > .wrapper {
  -webkit-animation-name: hide-left;
          animation-name: hide-left;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
}
#home > div[hidden].restoring,
#home > form[hidden].restoring,
#home > div[hidden].restoring > .wrapper,
#home > form[hidden].restoring > .wrapper {
  -webkit-animation-name: hide-right;
          animation-name: hide-right;
}
#home > div[hidden].fade,
#home > form[hidden].fade,
#home > div[hidden].fade > .wrapper,
#home > form[hidden].fade > .wrapper {
  -webkit-animation-name: none;
          animation-name: none;
}
#home > div > .wrapper,
#home > form > .wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
}
#home > div > .wrapper.fixed,
#home > form > .wrapper.fixed {
  width: 300px;
}
@media (max-height: 767px) {
  #home > div > .wrapper,
  #home > form > .wrapper {
    -webkit-animation-name: none !important;
            animation-name: none !important;
    opacity: 1 !important;
  }
}
@media (max-width: 479px) {
  #home > div > .wrapper,
  #home > form > .wrapper {
    width: 280px;
  }
}
#home input:not([type="checkbox"]):not([type="range"]),
#home select {
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #004100;
  font-size: 16px;
  height: 38px;
}
body[data-board-color="blue"] #home input:not([type="checkbox"]):not([type="range"]),
body[data-board-color="blue"] #home select {
  color: #082f5e;
}
body[data-board-color="red"] #home input:not([type="checkbox"]):not([type="range"]),
body[data-board-color="red"] #home select {
  color: #891111;
}
body[data-board-color="charcoal"] #home input:not([type="checkbox"]):not([type="range"]),
body[data-board-color="charcoal"] #home select {
  color: #3e3e3e;
}
#home h3 {
  font-size: 24px;
  margin-bottom: 0.5em;
}
#home h3.club-lobby-header {
  font-weight: 300;
  margin: 1em 0 0;
}
#home h3.club-lobby-header.with-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#home h3.club-lobby-header.with-link a {
  font-size: 16px;
  font-weight: 400;
}
#home table.form {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
#home table.form tr[disabled] {
  opacity: 0.35;
}
#home table.form th {
  text-align: left;
  font-weight: 500;
  padding: 0;
}
#home table.form tr.note td {
  height: 0;
  padding: 0;
}
#home table.form td {
  height: 42px;
  padding: 4px 8px 2px 0;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 479px) {
  #home table.form td {
    display: block;
    height: auto;
  }
  #home table.form td:empty {
    display: none;
  }
}
#home table.form td h3 {
  margin-top: 12px;
  margin-bottom: 8px;
}
#home table.form td:last-child:not(:first-child) {
  padding-right: 0;
}
@media (max-width: 479px) {
  #home table.form td:last-child:not(:first-child) {
    padding: 3px 12px 6px;
    width: auto;
  }
}
#home table.form td:first-child:not(:last-child) {
  white-space: nowrap;
  padding-right: 12px;
  width: 150px;
}
#home table.form td:first-child:not(:last-child) label {
  display: block;
  min-width: 120px;
  white-space: nowrap;
}
#home table.form td.share-with-acbl-ef {
  padding-top: 20px;
  padding-left: 26px;
  text-indent: -26px;
}
#home table.form td.share-with-acbl-ef input[type="checkbox"] {
  border-color: #005a00;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-width: 1px;
  background-color: white;
  margin: 0 8px 0 0;
  position: relative;
  top: 2px;
}
body[data-board-color="blue"] #home table.form td.share-with-acbl-ef input[type="checkbox"] {
  border-color: #0a3b76;
}
body[data-board-color="red"] #home table.form td.share-with-acbl-ef input[type="checkbox"] {
  border-color: #a01414;
}
body[data-board-color="charcoal"] #home table.form td.share-with-acbl-ef input[type="checkbox"] {
  border-color: #4b4b4b;
}
body[data-board-color="black"] #home table.form td.share-with-acbl-ef input[type="checkbox"] {
  border-color: black;
}
body[data-board-color="white"] #home table.form td.share-with-acbl-ef input[type="checkbox"] {
  border-color: white;
}
#home table.form .header-row td {
  padding: 0;
}
@media (max-width: 479px) {
  #home table.form .header-row td {
    padding-right: 12px;
  }
}
#home table.form .header-row td h3 {
  border-bottom: 1px solid #fff;
  border-color: #8bce8b;
  font-size: 20px;
  padding-bottom: 4px;
  margin: 4px 0 0 0;
}
body[data-board-color="blue"] #home table.form .header-row td h3 {
  border-color: #b0becf;
}
body[data-board-color="red"] #home table.form .header-row td h3 {
  border-color: #e0d3d3;
}
body[data-board-color="charcoal"] #home table.form .header-row td h3 {
  border-color: #cbcbcb;
}
body[data-board-color="black"] #home table.form .header-row td h3 {
  border-color: black;
}
body[data-board-color="white"] #home table.form .header-row td h3 {
  border-color: white;
}
#home table.form .player-name-row > td {
  vertical-align: baseline;
}
@media (min-width: 480px) {
  #home table.form .radio-row td {
    padding-top: 8px;
    padding-bottom: 6px;
  }
}
#home table.form .radio-row td input[type="radio"] {
  /* influenced by http://signalvnoise.com/posts/2609-customizing-web-forms-with-css3-and-webkit */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  display: inline-block;
  background-color: #fff;
  border: 2px solid #fff;
  font-size: 15px;
  line-height: 1em;
  margin: 0 0.25em 0 0;
  padding: 0;
  width: 1.25em;
  height: 1.25em;
  vertical-align: text-bottom;
  border-radius: 2em;
}
#home table.form .radio-row td input[type="radio"]:checked {
  background-color: rgba(255, 255, 255, 0.2);
}
#home table.form .radio-row td input[type="radio"]::-ms-check {
  color: rgba(0, 90, 0, 0.7);
  border: none;
}
body[data-board-color="blue"] #home table.form .radio-row td input[type="radio"]::-ms-check {
  color: rgba(10, 59, 118, 0.7);
}
body[data-board-color="red"] #home table.form .radio-row td input[type="radio"]::-ms-check {
  color: rgba(160, 20, 20, 0.7);
}
body[data-board-color="charcoal"] #home table.form .radio-row td input[type="radio"]::-ms-check {
  color: rgba(75, 75, 75, 0.7);
}
#home table.form .terms-row td {
  padding-top: 20px;
}
#home table.form .button-row td {
  padding-top: 20px !important;
}
#home table.form .button-row td button {
  width: 47%;
}
#home table.form .button-row td button + button {
  float: right;
}
#home table.form .button-row.right td {
  text-align: right;
}
#home table.form tr.extra-space-before td {
  padding-top: 12px;
}
#home table.form tr.extra-space-before-and-after td {
  padding-top: 12px;
  padding-bottom: 12px;
}
#home table.form .promo-sign-up p {
  margin: 4px 0 12px;
  text-align: center;
}
#home table.form .promo-sign-up a {
  background-color: gold;
  border-radius: 5px;
  color: black;
  display: block;
  padding: 3px 20px 6px;
  text-align: center;
}
#home table.form .promo-sign-up a:hover {
  text-decoration: none;
}
#home #email-invites-form input[type="text"] {
  width: 150px;
}
#home #email-invites-form input[type="email"] {
  width: 240px;
}
@media (max-width: 479px) {
  #home #email-invites-form input[type="text"] {
    width: 100px;
  }
  #home #email-invites-form input[type="email"] {
    width: 150px;
  }
}
#home .fineprint {
  font-size: 12px;
}
#home .fineprint.center {
  text-align: center;
}
#home .fineprint .fa-warning {
  color: gold;
}
#home .icon-button[data-action="back"],
#home .icon-button.hang-left {
  height: 40px;
  line-height: 34px;
  margin: -5px 6px -5px 0;
  width: 40px;
}
@media (min-width: 375px) {
  #home .icon-button[data-action="back"],
  #home .icon-button.hang-left {
    margin-left: -46px;
  }
}
#home ul.options {
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  margin: 0 auto 1em auto;
  padding: 0;
  width: 300px;
}
@media (max-width: 479px) {
  #home ul.options {
    width: 280px;
  }
}
#home ul.options li {
  list-style: none;
  padding: 0;
}
#home ul.options li a.option {
  background-color: #fff;
  color: #004100;
  border-color: rgba(0, 90, 0, 0.25);
  outline: none;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}
body[data-board-color="blue"] #home ul.options li a.option {
  color: #082f5e;
}
body[data-board-color="red"] #home ul.options li a.option {
  color: #891111;
}
body[data-board-color="charcoal"] #home ul.options li a.option {
  color: #3e3e3e;
}
body[data-board-color="blue"] #home ul.options li a.option {
  border-color: rgba(10, 59, 118, 0.25);
}
body[data-board-color="red"] #home ul.options li a.option {
  border-color: rgba(160, 20, 20, 0.25);
}
body[data-board-color="charcoal"] #home ul.options li a.option {
  border-color: rgba(75, 75, 75, 0.25);
}
body:not(.touch) #home ul.options li a.option:hover,
.keyboard-focus #home ul.options li a.option:focus {
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  border-width: 1px;
  border-radius: 5px;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  z-index: 1;
}
body:not(.touch) #home ul.options li a.option:hover:active,
.keyboard-focus #home ul.options li a.option:focus:active {
  color: #004100 !important;
}
body[data-board-color="blue"] body:not(.touch) #home ul.options li a.option:hover:active,
body[data-board-color="blue"] .keyboard-focus #home ul.options li a.option:focus:active {
  color: #082f5e !important;
}
body[data-board-color="red"] body:not(.touch) #home ul.options li a.option:hover:active,
body[data-board-color="red"] .keyboard-focus #home ul.options li a.option:focus:active {
  color: #891111 !important;
}
body[data-board-color="charcoal"] body:not(.touch) #home ul.options li a.option:hover:active,
body[data-board-color="charcoal"] .keyboard-focus #home ul.options li a.option:focus:active {
  color: #3e3e3e !important;
}
#home .notification .wrapper {
  max-width: 340px;
}
#home .notification .wrapper .actions {
  text-align: right;
}
#home .notification .wrapper .actions a {
  float: left;
}
#redeem .info {
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 4px;
}
#redeem .info a {
  display: block;
}
#sign-in-form .right-options,
#sign-up-form .right-options {
  float: right;
  margin-top: 6px;
}
@media (max-width: 479px), (max-height: 479px) {
  #sign-in-form .right-options .info,
  #sign-up-form .right-options .info {
    display: none;
  }
}
#sign-in-form table.msg-merge-users {
  margin: 1em 0;
  border-spacing: 0;
}
#sign-in-form table.msg-merge-users td {
  padding: 0;
  vertical-align: top;
}
#sign-in-form table.msg-merge-users td:first-child {
  padding-right: 12px;
  vertical-align: middle;
}
#sign-in-form table.msg-merge-users td:first-child label input[type="checkbox"] {
  display: none;
}
#sign-in-form table.msg-merge-users td:first-child label span.checkbox {
  display: inline-block;
  padding: 2px;
  border: solid 1px white;
  font-size: 24px;
  line-height: 1;
  font-family: FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
#sign-in-form table.msg-merge-users td:first-child label span.checkbox:before {
  content: "\f00c";
}
#sign-in-form table.msg-merge-users td:first-child label:not(.checked) span.checkbox:before {
  visibility: hidden;
}
#join-with-game-code #join-short-game-code {
  font-weight: 400;
  font-family: Consolas, Menlo-Bold, "Courier New", Courier, monospace;
}
#join-with-game-code .game-not-found {
  margin-top: 20px;
  padding: 20px 8px;
  text-align: center;
}
#join-with-game-code .store-link img {
  height: 50px;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
            transform: translate3d(0, -1000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
            transform: translate3d(0, -1000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
.card .face {
  font-size: 32px;
  line-height: 30px;
  font-family: card-font, sans-serif;
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  overflow: hidden;
}
.card-theme[data-small-cards] .card .face {
  font-size: 50px;
}
.card-theme[data-highlight-trump="true"] .card.trump .face {
  background-color: #fff6cc;
}
.card-theme[data-highlight-trump="paleYellow"] .card.trump .face {
  background-color: #fff6cc;
}
.card-theme[data-highlight-trump="mediumYellow"] .card.trump .face {
  background-color: #fae47b;
}
.card-theme[data-highlight-trump="gold"] .card.trump .face {
  background-color: gold;
}
.card-theme[data-highlight-trump="skyBlue"] .card.trump .face {
  background-color: lightskyblue;
}
.card-theme[data-highlight-trump="lightGreen"] .card.trump .face {
  background-color: lightgreen;
}
.card-theme[data-highlight-trump="lightRed"] .card.trump .face {
  background-color: #ff99ab;
}
.card-theme[data-highlight-trump="lightGray"] .card.trump .face {
  background-color: #c5c5c5;
}
.card .back .card-back-art {
  position: absolute;
  width: 128px;
  height: 178px;
  left: 5px;
  top: 5px;
  background-color: #333;
  background-image: url("../image/cards/backs/denim.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
}
[data-flip-back].card .back .card-back-art {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.card-theme[data-card-back="lights"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/lights.png");
}
.card-theme[data-card-back="clouds"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/clouds.png");
}
.card-theme[data-card-back="graffiti"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/graffiti.png");
}
.card-theme[data-card-back="metalscreen"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/metalscreen.png");
}
.card-theme[data-card-back="redpaint"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/redpaint.png");
}
.card-theme[data-card-back="wood"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/wood.png");
}
.card-theme[data-card-back="waterdroplets"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/waterdroplets.png");
}
.card-theme[data-card-back="winter"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/winter.png");
}
.card-theme[data-card-back="snowflakes"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/snowflakes.png");
}
.card-theme[data-card-back="autumnleaf"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/autumnleaf.png");
}
.card-theme[data-card-back="autumnleaves"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/autumnleaves.png");
}
.card-theme[data-card-back="springcherryblossoms"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/springcherryblossoms.png");
}
.card-theme[data-card-back="springflowers"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/springflowers.png");
}
.card-theme[data-card-back="summersunset"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/summersunset.png");
}
.card-theme[data-card-back="summerwatermelon"] .card .back .card-back-art {
  background-image: url("../image/cards/backs/summerwatermelon.png");
}
.card .Diamonds .face-frame,
.card .Hearts .face-frame,
.card .High .face-frame,
.card .Diamonds .spots,
.card .Hearts .spots,
.card .High .spots {
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 1px #d00 inset;
          box-shadow: 0 0 0 1px #d00 inset;
}
.card-theme[data-small-cards] .card .Diamonds .face-frame,
.card-theme[data-small-cards] .card .Hearts .face-frame,
.card-theme[data-small-cards] .card .High .face-frame,
.card-theme[data-small-cards] .card .Diamonds .spots,
.card-theme[data-small-cards] .card .Hearts .spots,
.card-theme[data-small-cards] .card .High .spots {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  z-index: -1;
}
.card .Clubs .face-frame,
.card .Spades .face-frame,
.card .Low .face-frame,
.card .Clubs .spots,
.card .Spades .spots,
.card .Low .spots {
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 1px #333 inset;
          box-shadow: 0 0 0 1px #333 inset;
}
.card-theme[data-small-cards] .card .Clubs .face-frame,
.card-theme[data-small-cards] .card .Spades .face-frame,
.card-theme[data-small-cards] .card .Low .face-frame,
.card-theme[data-small-cards] .card .Clubs .spots,
.card-theme[data-small-cards] .card .Spades .spots,
.card-theme[data-small-cards] .card .Low .spots {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  z-index: -1;
}
.card .Joker {
  line-height: 0.8;
}
.card .Joker .rank1,
.card .Joker .rank2 {
  font-family: card-pips, sans-serif;
}
.card .face-frame,
.card .spots {
  position: absolute;
  width: 60%;
  height: 74%;
  left: 20%;
  top: 13%;
  padding: 1px;
  line-height: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.card-theme[data-small-cards] .card .face.Joker .face-frame,
.card-theme[data-small-cards] .card .spots {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.card-theme[data-small-cards] .card .face.Jack.Clubs .face-frame {
  top: 0;
  height: 100%;
  background-size: 133%;
}
.card-theme[data-small-cards] .card .spots {
  left: 0;
  top: 6%;
  width: 100%;
  height: 88%;
}
.card-theme[data-small-cards] .card .face.Two .spots {
  top: 9%;
  height: 82%;
}
.card-theme[data-small-cards] .card .face.Ace.Hearts .spots {
  top: 8%;
}
.card-theme[data-small-cards] .card .face.Ace.Clubs .spots {
  top: 5%;
}
.card-theme[data-small-cards] .card .face.Ace.Spades .spots {
  top: 4%;
}
.card-theme[data-small-cards] .card .face:not(.Ace) .spots {
  font-size: 175%;
}
.card .face-frame {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.card-theme[data-card-face="celebrity"] .card .Diamonds .face-frame,
.card-theme[data-card-face="celebrity"] .card .Hearts .face-frame,
.card-theme[data-card-face="celebrity"] .card .High .face-frame {
  background-color: #d00;
}
.card-theme[data-card-face="celebrity"] .card .Clubs .face-frame,
.card-theme[data-card-face="celebrity"] .card .Spades .face-frame,
.card-theme[data-card-face="celebrity"] .card .Low .face-frame {
  background-color: #333;
}
.card-theme[data-card-face="celebrity"] .card .King .face-frame {
  background-position: 60% bottom;
  background-image: url(../image/cards/celebrity/king.png);
}
.card-theme[data-card-face="celebrity"] .card .Queen .face-frame {
  background-position: 50% bottom;
  background-image: url(../image/cards/celebrity/queen.png);
}
.card-theme[data-card-face="celebrity"] .card .Jack .face-frame {
  background-position: 80% bottom;
  background-image: url(../image/cards/celebrity/jack.png);
}
.card-theme[data-card-face="celebrity"] .card .Joker.High .face-frame,
.card-theme[data-card-face="celebrity"] .card .Joker.Low .face-frame {
  background-size: cover;
  background-position: bottom;
  background-image: url(../image/cards/celebrity/joker-v2.png);
}
.card-theme[data-card-face="flatface"] .card .face-frame {
  background-size: contain;
}
.card-theme[data-card-face="flatface"] .card .Jack.Clubs .face-frame,
.card-theme[data-card-face="flatface"] .card .Jack.Spades .face-frame {
  background-image: url(../image/cards/flatface/jack_black.png);
}
.card-theme[data-card-face="flatface"] .card .Queen.Clubs .face-frame,
.card-theme[data-card-face="flatface"] .card .Queen.Spades .face-frame {
  background-image: url(../image/cards/flatface/queen_black.png);
}
.card-theme[data-card-face="flatface"] .card .King.Clubs .face-frame,
.card-theme[data-card-face="flatface"] .card .King.Spades .face-frame {
  background-image: url(../image/cards/flatface/king_black.png);
}
.card-theme[data-card-face="flatface"] .card .Jack.Diamonds .face-frame,
.card-theme[data-card-face="flatface"] .card .Jack.Hearts .face-frame {
  background-image: url(../image/cards/flatface/jack_red.png);
}
.card-theme[data-card-face="flatface"] .card .Queen.Diamonds .face-frame,
.card-theme[data-card-face="flatface"] .card .Queen.Hearts .face-frame {
  background-image: url(../image/cards/flatface/queen_red.png);
}
.card-theme[data-card-face="flatface"] .card .King.Diamonds .face-frame,
.card-theme[data-card-face="flatface"] .card .King.Hearts .face-frame {
  background-image: url(../image/cards/flatface/king_red.png);
}
.card-theme[data-card-face="flatface"] .card .Joker.High .face-frame {
  background-image: url(../image/cards/flatface/joker_red.png);
}
.card-theme[data-card-face="flatface"] .card .Joker.Low .face-frame {
  background-image: url(../image/cards/flatface/joker_black.png);
}
.card-theme[data-card-face="decorative"] .card .face-frame {
  background-size: contain;
}
.card-theme[data-card-face="decorative"] .card .Ace .spots {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.card-theme[data-card-face="decorative"] .card .Ace .spots span {
  display: none;
}
.card-theme[data-card-face="decorative"] .card .Ace.Clubs .spots {
  background-image: url("../image/cards/decorative/clubs/ace.png");
}
.card-theme[data-card-face="decorative"] .card .Jack.Clubs .face-frame {
  background-image: url("../image/cards/decorative/clubs/jack.png");
}
.card-theme[data-card-face="decorative"] .card .Queen.Clubs .face-frame {
  background-image: url("../image/cards/decorative/clubs/queen.png");
}
.card-theme[data-card-face="decorative"] .card .King.Clubs .face-frame {
  background-image: url("../image/cards/decorative/clubs/king.png");
}
.card-theme[data-card-face="decorative"] .card .Ace.Diamonds .spots {
  background-image: url("../image/cards/decorative/diamonds/ace.png");
}
.card-theme[data-card-face="decorative"] .card .Jack.Diamonds .face-frame {
  background-image: url("../image/cards/decorative/diamonds/jack.png");
}
.card-theme[data-card-face="decorative"] .card .Queen.Diamonds .face-frame {
  background-image: url("../image/cards/decorative/diamonds/queen.png");
}
.card-theme[data-card-face="decorative"] .card .King.Diamonds .face-frame {
  background-image: url("../image/cards/decorative/diamonds/king.png");
}
.card-theme[data-card-face="decorative"] .card .Ace.Spades .spots {
  background-image: url("../image/cards/decorative/spades/ace.png");
}
.card-theme[data-card-face="decorative"] .card .Jack.Spades .face-frame {
  background-image: url("../image/cards/decorative/spades/jack.png");
}
.card-theme[data-card-face="decorative"] .card .Queen.Spades .face-frame {
  background-image: url("../image/cards/decorative/spades/queen.png");
}
.card-theme[data-card-face="decorative"] .card .King.Spades .face-frame {
  background-image: url("../image/cards/decorative/spades/king.png");
}
.card-theme[data-card-face="decorative"] .card .Ace.Hearts .spots {
  background-image: url("../image/cards/decorative/hearts/ace.png");
}
.card-theme[data-card-face="decorative"] .card .Jack.Hearts .face-frame {
  background-image: url("../image/cards/decorative/hearts/jack.png");
}
.card-theme[data-card-face="decorative"] .card .Queen.Hearts .face-frame {
  background-image: url("../image/cards/decorative/hearts/queen.png");
}
.card-theme[data-card-face="decorative"] .card .King.Hearts .face-frame {
  background-image: url("../image/cards/decorative/hearts/king.png");
}
.card-theme[data-card-face="hats"] .card .face-frame {
  background-size: contain;
}
.card-theme[data-card-face="hats"] .card .King .face-frame {
  background-image: url("../image/cards/hats/king.png");
}
.card-theme[data-card-face="hats"] .card .Queen .face-frame {
  background-image: url("../image/cards/hats/queen.png");
}
.card-theme[data-card-face="hats"] .card .Jack .face-frame {
  background-image: url("../image/cards/hats/jack.png");
}
.card-theme[data-card-face="hats"] .card .Joker.High .face-frame {
  background-image: url("../image/cards/hats/joker_high.png");
}
.card-theme[data-card-face="hats"] .card .Joker.Low .face-frame {
  background-image: url("../image/cards/hats/joker_low.png");
}
.card-theme[data-high-visibility] .card .face-frame,
.card-theme[data-high-visibility] .card .spots {
  font-size: 28px;
  width: 50%;
  height: 60%;
  left: 25%;
  top: 20%;
}
.card-theme[data-high-visibility] .card .face {
  font-size: 48px;
  line-height: 38px;
}
.card-theme[data-high-visibility] .card .suit1 {
  top: 36px;
}
.card-theme[data-high-visibility] .card .suit2 {
  bottom: 36px;
}
.card-theme[data-high-visibility] .card .rank1,
.card-theme[data-high-visibility] .card .rank2,
.card-theme[data-high-visibility] .card .suit1,
.card-theme[data-high-visibility] .card .suit2 {
  width: 25%;
}
.card-theme[data-card-face="classic"][data-joker="Kookaburra"] .card .Joker.High .face-frame {
  background-image: url(../image/cards/standard/KookaburraHigh.png);
}
.card-theme[data-card-face="classic"][data-joker="Kookaburra"] .card .Joker.Low .face-frame {
  background-image: url(../image/cards/standard/KookaburraLow.png);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face] {
  background-position: center top;
  background-size: cover;
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Unknown"] {
  background-size: contain;
  background-position: center center;
  background-image: url(../image/cards/election/Unknown.png);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Bush"] {
  background-image: url(../image/cards/election/Bush.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Carson"] {
  background-image: url(../image/cards/election/Carson.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Chafee"] {
  background-image: url(../image/cards/election/Chafee.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Christie"] {
  background-image: url(../image/cards/election/Christie.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Clinton"] {
  background-image: url(../image/cards/election/Clinton.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Cruz"] {
  background-image: url(../image/cards/election/Cruz.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Everson"] {
  background-image: url(../image/cards/election/Everson.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Fiorina"] {
  background-image: url(../image/cards/election/Fiorina.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Gilmore"] {
  background-image: url(../image/cards/election/Gilmore.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Graham"] {
  background-image: url(../image/cards/election/Graham.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Huckabee"] {
  background-image: url(../image/cards/election/Huckabee.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Jindal"] {
  background-image: url(../image/cards/election/Jindal.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Kasich"] {
  background-image: url(../image/cards/election/Kasich.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Lessig"] {
  background-image: url(../image/cards/election/Lessig.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="OMalley"] {
  background-image: url(../image/cards/election/OMalley.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Pataki"] {
  background-image: url(../image/cards/election/Pataki.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Paul"] {
  background-image: url(../image/cards/election/Paul.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Perry"] {
  background-image: url(../image/cards/election/Perry.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Rubio"] {
  background-image: url(../image/cards/election/Rubio.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Sanders"] {
  background-image: url(../image/cards/election/Sanders.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Santorum"] {
  background-image: url(../image/cards/election/Santorum.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Trump"] {
  background-image: url(../image/cards/election/Trump.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Walker"] {
  background-image: url(../image/cards/election/Walker.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Webb"] {
  background-image: url(../image/cards/election/Webb.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Baraka"] {
  background-image: url(../image/cards/election/Baraka.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Johnson"] {
  background-image: url(../image/cards/election/Johnson.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Kaine"] {
  background-image: url(../image/cards/election/Kaine.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Pence"] {
  background-image: url(../image/cards/election/Pence.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Stein"] {
  background-image: url(../image/cards/election/Stein.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="Weld"] {
  background-image: url(../image/cards/election/Weld.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="DemocraticParty"] {
  background-image: url(../image/cards/election/DemocraticParty.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="RepublicanParty"] {
  background-image: url(../image/cards/election/RepublicanParty.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="LibertarianParty"] {
  background-image: url(../image/cards/election/LibertarianParty.jpg);
}
.card-theme[data-card-face="election"] .card .face-frame[data-face="GreenParty"] {
  background-image: url(../image/cards/election/GreenParty.jpg);
}
.card .spots {
  font-family: card-pips, sans-serif;
}
.card .spots .spot {
  display: inline-block;
  font-size: 120%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.card .Ace .spots .spot {
  font-size: 275%;
}
.card .Twelve .spots .spot,
.card .Thirteen .spots .spot {
  font-size: 105%;
}
.card .rank1 {
  display: inline-block;
  position: absolute;
  width: 20%;
  text-align: center;
  padding-left: 1px;
  white-space: pre-wrap;
  left: 0;
  top: 0;
}
.card-theme[data-small-cards] .card .face .rank1 {
  left: 8px;
  top: 10px;
}
.card-theme[data-small-cards] .card .face .rank2 {
  right: 8px;
  bottom: 10px;
}
.card-theme[data-small-cards] .card .face.Joker .rank1 {
  left: 6px;
  top: 6px;
}
.card-theme[data-small-cards] .card .face.Joker .rank2 {
  right: 6px;
  bottom: 6px;
}
.card .suit1 {
  display: inline-block;
  position: absolute;
  width: 20%;
  text-align: center;
  padding-left: 1px;
  white-space: pre-wrap;
  font-family: card-pips, sans-serif;
  left: 0;
  top: 28px;
}
.card-theme[data-small-cards] .card .suit1 {
  display: none;
}
.card .rank2 {
  display: inline-block;
  position: absolute;
  width: 20%;
  text-align: center;
  padding-left: 1px;
  white-space: pre-wrap;
  right: 0;
  bottom: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.card-theme[data-vertical-cards] .card .face:not(.Joker) .rank2 {
  bottom: 28px;
  -webkit-transform: none;
          transform: none;
}
[data-high-visibility].card-theme[data-vertical-cards] .card .face:not(.Joker) .rank2 {
  bottom: 36px;
}
.card .suit2 {
  display: inline-block;
  position: absolute;
  width: 20%;
  text-align: center;
  padding-left: 1px;
  white-space: pre-wrap;
  font-family: card-pips, sans-serif;
  right: 0;
  bottom: 28px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.card-theme[data-small-cards] .card .suit2 {
  display: none;
}
.card-theme[data-vertical-cards] .card .suit2 {
  bottom: 0;
  -webkit-transform: none;
          transform: none;
}
[data-high-visibility].card-theme[data-vertical-cards] .card .suit2 {
  bottom: -2px;
}
.card .Ten .rank1,
.card .Eleven .rank1,
.card .Twelve .rank1,
.card .Thirteen .rank1,
.card .Ten .rank2,
.card .Eleven .rank2,
.card .Twelve .rank2,
.card .Thirteen .rank2 {
  padding-left: 0;
  letter-spacing: -4px;
}
.card .Ten .rank1,
.card .Eleven .rank1,
.card .Twelve .rank1,
.card .Thirteen .rank1 {
  left: -1px;
}
.card .Ten .rank2,
.card .Eleven .rank2,
.card .Twelve .rank2,
.card .Thirteen .rank2 {
  right: -1px;
}
.card-theme[data-vertical-cards] .card .Ten .rank2,
.card-theme[data-vertical-cards] .card .Eleven .rank2,
.card-theme[data-vertical-cards] .card .Twelve .rank2,
.card-theme[data-vertical-cards] .card .Thirteen .rank2 {
  right: 3px;
}
[data-high-visibility].card-theme[data-vertical-cards] .card .Ten .rank2,
[data-high-visibility].card-theme[data-vertical-cards] .card .Eleven .rank2,
[data-high-visibility].card-theme[data-vertical-cards] .card .Twelve .rank2,
[data-high-visibility].card-theme[data-vertical-cards] .card .Thirteen .rank2 {
  right: 6px;
}
#menu .card-preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 16px;
}
#menu .card-preview .card {
  position: relative;
  top: 0px;
  left: 0px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .card-preview {
    gap: 10px;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
.Jack.Clubs .face-frame {
  background-image: url(../image/cards/standard/JC.png);
}
.Queen.Clubs .face-frame {
  background-image: url(../image/cards/standard/QC.png);
}
.King.Clubs .face-frame {
  background-image: url(../image/cards/standard/KC.png);
}
.Jack.Diamonds .face-frame {
  background-image: url(../image/cards/standard/JD.png);
}
.Queen.Diamonds .face-frame {
  background-image: url(../image/cards/standard/QD.png);
}
.King.Diamonds .face-frame {
  background-image: url(../image/cards/standard/KD.png);
}
.Jack.Spades .face-frame {
  background-image: url(../image/cards/standard/JS.png);
}
.Queen.Spades .face-frame {
  background-image: url(../image/cards/standard/QS.png);
}
.King.Spades .face-frame {
  background-image: url(../image/cards/standard/KS.png);
}
.Jack.Hearts .face-frame {
  background-image: url(../image/cards/standard/JH.png);
}
.Queen.Hearts .face-frame {
  background-image: url(../image/cards/standard/QH.png);
}
.King.Hearts .face-frame {
  background-image: url(../image/cards/standard/KH.png);
}
.Joker.High .face-frame {
  background-image: url(../image/cards/standard/JokerHigh.png);
  background-size: contain;
}
.Joker.Low .face-frame {
  background-image: url(../image/cards/standard/JokerLow.png);
  background-size: contain;
}
.face.Ace .spots .spot:nth-child(1) {
  top: 50%;
  left: 50%;
}
.face.Two .spots .spot:nth-child(1) {
  top: 14%;
  left: 50%;
}
.face.Two .spots .spot:nth-child(2) {
  top: 86%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Three .spots .spot:nth-child(1) {
  top: 14%;
  left: 50%;
}
.face.Three .spots .spot:nth-child(2) {
  top: 86%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Three .spots .spot:nth-child(3) {
  top: 50%;
  left: 50%;
}
.face.Four .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Four .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Four .spots .spot:nth-child(3) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Four .spots .spot:nth-child(4) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Five .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Five .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Five .spots .spot:nth-child(3) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Five .spots .spot:nth-child(4) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Five .spots .spot:nth-child(5) {
  top: 50%;
  left: 50%;
}
.face.Six .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Six .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Six .spots .spot:nth-child(3) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Six .spots .spot:nth-child(4) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Six .spots .spot:nth-child(5) {
  top: 50%;
  left: 20%;
}
.face.Six .spots .spot:nth-child(6) {
  top: 50%;
  left: 80%;
}
.face.Seven .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Seven .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Seven .spots .spot:nth-child(3) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Seven .spots .spot:nth-child(4) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Seven .spots .spot:nth-child(5) {
  top: 50%;
  left: 20%;
}
.face.Seven .spots .spot:nth-child(6) {
  top: 50%;
  left: 80%;
}
.face.Seven .spots .spot:nth-child(7) {
  top: 32%;
  left: 50%;
}
.face.Eight .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Eight .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Eight .spots .spot:nth-child(3) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eight .spots .spot:nth-child(4) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eight .spots .spot:nth-child(5) {
  top: 50%;
  left: 20%;
}
.face.Eight .spots .spot:nth-child(6) {
  top: 50%;
  left: 80%;
}
.face.Eight .spots .spot:nth-child(7) {
  top: 32%;
  left: 50%;
}
.face.Eight .spots .spot:nth-child(8) {
  top: 68%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Nine .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Nine .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Nine .spots .spot:nth-child(3) {
  top: 38%;
  left: 20%;
}
.face.Nine .spots .spot:nth-child(4) {
  top: 38%;
  left: 80%;
}
.face.Nine .spots .spot:nth-child(5) {
  top: 62%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Nine .spots .spot:nth-child(6) {
  top: 62%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Nine .spots .spot:nth-child(7) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Nine .spots .spot:nth-child(8) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Nine .spots .spot:nth-child(9) {
  top: 50%;
  left: 50%;
}
.face.Ten .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Ten .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Ten .spots .spot:nth-child(3) {
  top: 38%;
  left: 20%;
}
.face.Ten .spots .spot:nth-child(4) {
  top: 38%;
  left: 80%;
}
.face.Ten .spots .spot:nth-child(5) {
  top: 62%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Ten .spots .spot:nth-child(6) {
  top: 62%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Ten .spots .spot:nth-child(7) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Ten .spots .spot:nth-child(8) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Ten .spots .spot:nth-child(9) {
  top: 26%;
  left: 50%;
}
.face.Ten .spots .spot:nth-child(10) {
  top: 74%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eleven .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Eleven .spots .spot:nth-child(2) {
  top: 14%;
  left: 80%;
}
.face.Eleven .spots .spot:nth-child(3) {
  top: 38%;
  left: 20%;
}
.face.Eleven .spots .spot:nth-child(4) {
  top: 38%;
  left: 80%;
}
.face.Eleven .spots .spot:nth-child(5) {
  top: 62%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eleven .spots .spot:nth-child(6) {
  top: 62%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eleven .spots .spot:nth-child(7) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eleven .spots .spot:nth-child(8) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eleven .spots .spot:nth-child(9) {
  top: 26%;
  left: 50%;
}
.face.Eleven .spots .spot:nth-child(10) {
  top: 74%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Eleven .spots .spot:nth-child(11) {
  top: 50%;
  left: 50%;
}
.face.Twelve .spots .spot:nth-child(1) {
  top: 14%;
  left: 20%;
}
.face.Twelve .spots .spot:nth-child(2) {
  top: 14%;
  left: 50%;
}
.face.Twelve .spots .spot:nth-child(3) {
  top: 14%;
  left: 80%;
}
.face.Twelve .spots .spot:nth-child(4) {
  top: 38%;
  left: 20%;
}
.face.Twelve .spots .spot:nth-child(5) {
  top: 38%;
  left: 50%;
}
.face.Twelve .spots .spot:nth-child(6) {
  top: 38%;
  left: 80%;
}
.face.Twelve .spots .spot:nth-child(7) {
  top: 62%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Twelve .spots .spot:nth-child(8) {
  top: 62%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Twelve .spots .spot:nth-child(9) {
  top: 62%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Twelve .spots .spot:nth-child(10) {
  top: 86%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Twelve .spots .spot:nth-child(11) {
  top: 86%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Twelve .spots .spot:nth-child(12) {
  top: 86%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Thirteen .spots .spot:nth-child(1) {
  top: 21.5%;
  left: 20%;
}
.face.Thirteen .spots .spot:nth-child(2) {
  top: 21.5%;
  left: 80%;
}
.face.Thirteen .spots .spot:nth-child(3) {
  top: 40.5%;
  left: 20%;
}
.face.Thirteen .spots .spot:nth-child(4) {
  top: 40.5%;
  left: 80%;
}
.face.Thirteen .spots .spot:nth-child(5) {
  top: 59.5%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Thirteen .spots .spot:nth-child(6) {
  top: 59.5%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Thirteen .spots .spot:nth-child(7) {
  top: 78.5%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Thirteen .spots .spot:nth-child(8) {
  top: 78.5%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Thirteen .spots .spot:nth-child(9) {
  top: 12%;
  left: 50%;
}
.face.Thirteen .spots .spot:nth-child(10) {
  top: 31%;
  left: 50%;
}
.face.Thirteen .spots .spot:nth-child(11) {
  top: 50%;
  left: 50%;
}
.face.Thirteen .spots .spot:nth-child(12) {
  top: 69%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.face.Thirteen .spots .spot:nth-child(13) {
  top: 88%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
#menu .invite.section .scroller details {
  margin: 0 0 20px;
  padding: 0 16px;
}
#menu .invite.section .scroller details summary {
  cursor: pointer;
  font-weight: 500;
  margin: 0 -16px 8px;
}
#menu .invite.section .scroller .actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
#menu .invite.section .scroller .actions button {
  width: 100%;
}
#menu .invite.section .scroller .invitable-friends ul.options li {
  display: block;
}
#menu .invite.section .scroller .invitable-friends ul.options li[hidden] {
  display: none;
}
#menu .invite.section .scroller .invitable-friends ul.options li label {
  cursor: pointer;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu .invite.section .scroller .invitable-friends ul.options li label:after {
  font-size: inherit;
}
#menu .invite.section .scroller .invitable-friends ul.options li label .unique-name {
  max-width: 85%;
}
#menu .invite.section .scroller .invitable-friends ul.options li[data-notify-kind="Online"] label:after {
  content: "\f111";
  color: green;
}
#menu .invite.section .scroller .invitable-friends ul.options li[data-notify-kind="Push"] label:after {
  content: "\f0f3";
}
#menu .invite.section .scroller .invitable-friends ul.options li[data-notify-kind="Email"] label:after,
#menu .invite.section .scroller .invitable-friends ul.options li[data-notify-kind="EmailNonUser"] label:after {
  content: "\f003";
}
#menu .invite.section .scroller .dialog-button {
  height: 33px;
  vertical-align: middle;
}
#menu .invite.section .scroller .dialog-button .fa {
  margin-right: 8px;
}
#menu .invite.section .scroller .invite-note {
  font-size: 81.25%;
}
#menu .invite.section .scroller #short-code-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin: 8px 0 20px;
}
#menu .invite.section .scroller #short-code-wrapper > .item {
  text-align: center;
  width: 100%;
}
#menu .invite.section .scroller #short-code-wrapper > .item button {
  width: 100%;
}
#menu .invite.section .scroller #share-short-code {
  font-weight: 400;
  border-color: #004100;
  color: #004100;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: text;
  display: inline-block;
  font-family: Consolas, Menlo-Bold, "Courier New", Courier, monospace;
  font-size: 175%;
  height: 33px;
  line-height: 1;
  padding: 1px 0 2px;
  text-align: center;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  vertical-align: middle;
  width: 100%;
}
body[data-board-color="blue"] #menu .invite.section .scroller #share-short-code {
  border-color: #082f5e;
}
body[data-board-color="red"] #menu .invite.section .scroller #share-short-code {
  border-color: #891111;
}
body[data-board-color="charcoal"] #menu .invite.section .scroller #share-short-code {
  border-color: #3e3e3e;
}
body[data-board-color="blue"] #menu .invite.section .scroller #share-short-code {
  color: #082f5e;
}
body[data-board-color="red"] #menu .invite.section .scroller #share-short-code {
  color: #891111;
}
body[data-board-color="charcoal"] #menu .invite.section .scroller #share-short-code {
  color: #3e3e3e;
}
#menu .invite.section .scroller #select-online-button {
  display: block;
  margin-bottom: 8px;
  width: 100%;
}
#menu .invite.section .scroller .join-label {
  font-size: 12px;
}
#menu .invite.section .scroller .errors {
  position: relative;
}
#menu .invite.section .scroller .email-error {
  position: absolute;
  height: 0;
  bottom: 0;
  left: 20px;
  padding: 0 !important;
  top: 28px;
}
#menu .invite.section .scroller .email-error div {
  padding: 0 4px !important;
  background-color: lightgoldenrodyellow;
  color: black;
  bottom: 33px;
  border: 1px solid black;
  position: absolute;
}
#menu .invite.section .scroller .email-error div span {
  background-color: lightgoldenrodyellow;
  position: relative;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 1px;
  padding: 2px 10px 4px;
  white-space: nowrap;
}
#menu .invite.section .scroller .email-error div.field-error {
  border-radius: 3px;
  left: -12px;
}
#menu .invite.section .scroller .email-error div.field-error:before {
  content: '';
  width: 13px;
  height: 13px;
  position: absolute;
  background-color: lightgoldenrodyellow;
  -webkit-transform: translate(14.5px, 20px) rotate(225deg);
          transform: translate(14.5px, 20px) rotate(225deg);
  border-left: 1px solid black;
  border-top: solid 1px black;
}
#menu .invite.section .scroller ul.legend {
  padding-left: 0;
}
#menu .invite.section .scroller ul.legend li {
  display: block;
}
#lesson {
  background-color: #e6ece6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
}
body[data-board-color="blue"] #lesson {
  background-color: #e7eaee;
}
body[data-board-color="red"] #lesson {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] #lesson {
  background-color: #ebebeb;
}
body[data-board-color="black"] #lesson {
  background-color: black;
}
body[data-board-color="white"] #lesson {
  background-color: white;
}
#lesson[hidden] {
  display: none;
}
@media (orientation: portrait) {
  #lesson {
    -webkit-box-shadow: 0 8px 6px rgba(0, 0, 0, 0.25);
            box-shadow: 0 8px 6px rgba(0, 0, 0, 0.25);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    left: 0;
    width: 100vw;
    height: 33.333vw;
  }
}
@media (orientation: landscape) {
  #lesson {
    -webkit-box-shadow: -8px 0 6px rgba(0, 0, 0, 0.25);
            box-shadow: -8px 0 6px rgba(0, 0, 0, 0.25);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    right: 0;
    width: 33.333vh;
    height: 100vh;
  }
}
#lesson .video-wrapper {
  background-color: #005a00;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
body[data-board-color="blue"] #lesson .video-wrapper {
  background-color: #0a3b76;
}
body[data-board-color="red"] #lesson .video-wrapper {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #lesson .video-wrapper {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #lesson .video-wrapper {
  background-color: black;
}
body[data-board-color="white"] #lesson .video-wrapper {
  background-color: white;
}
#lesson .video-wrapper video {
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
}
#lesson .controls {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  left: 0;
  padding: 8px 10px;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (max-width: 479px), (max-height: 479px) {
  #lesson .controls {
    font-size: 75%;
    padding: 4px;
  }
}
#lesson .controls button {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  font-size: inherit;
  padding: 4px;
}
#lesson .controls button:hover {
  background-color: rgba(0, 0, 0, 0.75);
}
@media (max-width: 479px), (max-height: 479px) {
  #lesson .controls button {
    min-height: 25px;
  }
}
#lesson .controls .more {
  min-width: auto;
  position: absolute;
  top: 8px;
  right: 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  #lesson .controls .more {
    top: 4px;
    right: 4px;
  }
}
#lesson .content-wrapper {
  color: #004100;
  font-size: 125%;
  -webkit-box-flex: 2;
  -webkit-flex: 2 2 0;
      -ms-flex: 2 2 0px;
          flex: 2 2 0;
  min-height: 0;
}
body[data-board-color="blue"] #lesson .content-wrapper {
  color: #082f5e;
}
body[data-board-color="red"] #lesson .content-wrapper {
  color: #891111;
}
body[data-board-color="charcoal"] #lesson .content-wrapper {
  color: #3e3e3e;
}
#lesson .content-wrapper .content {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  overflow: auto;
  padding: 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  #lesson .content-wrapper .content {
    font-size: 70%;
  }
}
#lesson .content-wrapper .content .header {
  background-color: #005a00;
  color: #fff;
  margin: -10px;
  margin-bottom: 0px;
  padding: 10px;
}
body[data-board-color="blue"] #lesson .content-wrapper .content .header {
  background-color: #0a3b76;
}
body[data-board-color="red"] #lesson .content-wrapper .content .header {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #lesson .content-wrapper .content .header {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #lesson .content-wrapper .content .header {
  background-color: black;
}
body[data-board-color="white"] #lesson .content-wrapper .content .header {
  background-color: white;
}
#lesson .content-wrapper .content .header h1,
#lesson .content-wrapper .content .header input {
  background-color: transparent;
  border: none;
  color: inherit;
  display: block;
  font-size: 115%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#lesson .content-wrapper .content .header h1[readonly],
#lesson .content-wrapper .content .header input[readonly] {
  outline: none;
}
#lesson .content-wrapper .content .body {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 10px 0 0;
  position: relative;
}
#lesson .content-wrapper .content p,
#lesson .content-wrapper .content textarea {
  background-color: #e6ece6;
  border: none;
  color: inherit;
  display: block;
  font-size: inherit;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
}
body[data-board-color="blue"] #lesson .content-wrapper .content p,
body[data-board-color="blue"] #lesson .content-wrapper .content textarea {
  background-color: #e7eaee;
}
body[data-board-color="red"] #lesson .content-wrapper .content p,
body[data-board-color="red"] #lesson .content-wrapper .content textarea {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] #lesson .content-wrapper .content p,
body[data-board-color="charcoal"] #lesson .content-wrapper .content textarea {
  background-color: #ebebeb;
}
body[data-board-color="black"] #lesson .content-wrapper .content p,
body[data-board-color="black"] #lesson .content-wrapper .content textarea {
  background-color: black;
}
body[data-board-color="white"] #lesson .content-wrapper .content p,
body[data-board-color="white"] #lesson .content-wrapper .content textarea {
  background-color: white;
}
#lesson .content-wrapper .content p[hidden],
#lesson .content-wrapper .content textarea[hidden] {
  display: none;
}
#lesson .content-wrapper .content p[readonly],
#lesson .content-wrapper .content textarea[readonly] {
  outline: none;
}
#lesson .content-wrapper .content textarea {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  resize: none;
  top: 0;
  width: 100%;
}
#lesson .content-wrapper .content textarea:focus {
  opacity: 1;
}
.add-video-preview {
  background-color: #000;
  border: 10px solid #333;
  border-radius: 10px;
  border-width: 10px 20px;
  display: block;
  margin: 10px auto 20px;
  position: relative;
}
@media (orientation: portrait) {
  .add-video-preview {
    border-width: 30px 15px 0;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .add-video-preview:after {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
    display: block;
    background-image: -webkit-linear-gradient(45deg, #e6ece6 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(135deg, #e6ece6 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-image: linear-gradient(45deg, #e6ece6 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), linear-gradient(-45deg, #e6ece6 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-size: 29px 29px;
    background-repeat: repeat-x;
    background-position: 50% bottom, 50.25% bottom;
  }
  body[data-board-color=blue] .add-video-preview:after {
    background-image: -webkit-linear-gradient(45deg, #e7eaee 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(135deg, #e7eaee 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-image: linear-gradient(45deg, #e7eaee 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), linear-gradient(-45deg, #e7eaee 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  }
  body[data-board-color=red] .add-video-preview:after {
    background-image: -webkit-linear-gradient(45deg, #f1e7e7 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(135deg, #f1e7e7 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-image: linear-gradient(45deg, #f1e7e7 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), linear-gradient(-45deg, #f1e7e7 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  }
  body[data-board-color=charcoal] .add-video-preview:after {
    background-image: -webkit-linear-gradient(45deg, #ebebeb 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(135deg, #ebebeb 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-image: linear-gradient(45deg, #ebebeb 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)), linear-gradient(-45deg, #ebebeb 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  }
}
.add-video-preview .wrapper {
  background-size: cover;
  padding-top: 75%;
}
.section:not([hidden]) .add-video-preview .wrapper {
  background-image: url("/image/video-preview-h.jpg");
}
@media (orientation: portrait) {
  .section:not([hidden]) .add-video-preview .wrapper {
    background-image: url("/image/video-preview-v.jpg");
  }
}
#menu #add-video .promo {
  text-align: center;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #add-video .promo {
    margin-bottom: 10px;
  }
}
#menu #add-video .clear {
  clear: both;
}
#menu #add-video .low-chips {
  color: #004100;
  background-color: gold;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 4px 2px 6px;
  text-align: center;
}
body[data-board-color="blue"] #menu #add-video .low-chips {
  color: #082f5e;
}
body[data-board-color="red"] #menu #add-video .low-chips {
  color: #891111;
}
body[data-board-color="charcoal"] #menu #add-video .low-chips {
  color: #3e3e3e;
}
#menu #add-video .low-chips a {
  color: #004100;
  font-weight: 500;
}
body[data-board-color="blue"] #menu #add-video .low-chips a {
  color: #082f5e;
}
body[data-board-color="red"] #menu #add-video .low-chips a {
  color: #891111;
}
body[data-board-color="charcoal"] #menu #add-video .low-chips a {
  color: #3e3e3e;
}
#menu #add-video .permission-denied {
  background-color: gold;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: black;
  margin-bottom: 1em;
  padding: 10px 10px 12px;
  text-align: center;
}
#menu #add-video .permission-denied p {
  margin: 0.75em 0 0;
}
#menu #add-video .permission-denied p a {
  color: black;
  font-weight: 500;
}
#challenge-category .right-header {
  float: right;
  margin-top: 0 !important;
}
#challenge-category .option {
  overflow: hidden;
}
#challenge-category .option:hover .link-header,
#challenge-category .option:focus .link-header {
  background-color: transparent;
}
#challenge-category .link-header {
  background-color: #c5e0c5;
  margin: -8px;
  margin-bottom: 0;
  padding: 4px 8px;
}
body[data-board-color="blue"] #challenge-category .link-header {
  background-color: #e2e5e9;
}
body[data-board-color="red"] #challenge-category .link-header {
  background-color: #ffffff;
}
body[data-board-color="charcoal"] #challenge-category .link-header {
  background-color: #f1f1f1;
}
body[data-board-color="black"] #challenge-category .link-header {
  background-color: black;
}
body[data-board-color="white"] #challenge-category .link-header {
  background-color: white;
}
#challenge-category .link-body {
  padding-top: 4px;
  position: relative;
}
#challenge-category .link-body:after {
  content: "\f105";
  display: block;
  font-family: FontAwesome;
  font-size: 150%;
  padding-top: 4px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#challenge-category .rank-group {
  float: right;
  padding-left: 8px;
}
#challenge-category .rules {
  padding-right: 18px;
}
#menu #challenge-results .scroller {
  overflow-y: scroll;
}
#menu #challenge-results .scroller > .content {
  position: relative;
}
#menu #challenge-results .challenge-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
#menu #challenge-results .challenge-actions[hidden] {
  display: none;
}
#menu #challenge-results .dialog-button {
  display: block;
  width: 100%;
}
#menu #challenge-results .dialog-button[hidden] {
  display: none;
}
#menu #challenge-results .watch-replays {
  border-bottom: 1px solid;
  border-bottom-color: rgba(0, 90, 0, 0.5);
  margin-bottom: 16px;
}
body[data-board-color="blue"] #menu #challenge-results .watch-replays {
  border-bottom-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu #challenge-results .watch-replays {
  border-bottom-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu #challenge-results .watch-replays {
  border-bottom-color: rgba(75, 75, 75, 0.5);
}
#menu #challenge-results th,
#menu #challenge-results td {
  padding-right: 8px;
  vertical-align: baseline;
  line-height: 24px !important;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #challenge-results th,
  #menu #challenge-results td {
    font-size: 14px;
    line-height: 21px !important;
  }
}
#menu #challenge-results th:last-child,
#menu #challenge-results td:last-child {
  padding-right: 4px;
}
#menu #challenge-results th.small,
#menu #challenge-results td.small {
  font-size: 14px;
  text-align: center;
}
#recent-challenges .option {
  position: relative;
}
#recent-challenges .option .count-circle {
  position: absolute;
  top: 50%;
  right: 28px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#menu #change-rules a {
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
#menu #change-rules .wrapper > h3 {
  display: none;
}
#menu #change-rules tr.header-row td {
  padding-top: 20px;
}
#menu #change-rules tr:not(.header-row) td {
  padding-left: 20px;
  padding-right: 20px;
}
#menu #change-rules td {
  border: none;
  display: block;
}
#menu #deal-group-stats .scroller p {
  white-space: pre-wrap;
}
#menu #deal-group-stats .scroller p:not(.deals) {
  font-size: 14px;
}
#menu #deal-group-stats .scroller p.before-table {
  margin-bottom: 10px;
}
#menu #deal-group-stats .scroller table {
  table-layout: fixed;
}
#menu #deal-group-stats .scroller table th,
#menu #deal-group-stats .scroller table td {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  vertical-align: middle;
}
#menu #deal-group-stats .scroller table td.wrap {
  white-space: pre-wrap;
}
#menu #deal-group-stats .scroller .histogram {
  table-layout: auto;
}
#menu #deal-group-stats .scroller .histogram td {
  line-height: 16px;
}
#menu #deal-group-stats .scroller .histogram .bar {
  padding: 0;
  vertical-align: middle;
  width: 100%;
}
#menu #deal-group-stats .scroller .histogram .bar div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 20px;
  padding-top: 1px;
  position: relative;
  text-align: left;
  width: 100%;
  white-space: nowrap;
}
#menu #deal-group-stats .scroller .histogram .bar div div {
  background-color: rgba(0, 90, 0, 0.75);
  color: white;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}
body[data-board-color="blue"] #menu #deal-group-stats .scroller .histogram .bar div div {
  background-color: rgba(10, 59, 118, 0.75);
}
body[data-board-color="red"] #menu #deal-group-stats .scroller .histogram .bar div div {
  background-color: rgba(160, 20, 20, 0.75);
}
body[data-board-color="charcoal"] #menu #deal-group-stats .scroller .histogram .bar div div {
  background-color: rgba(75, 75, 75, 0.75);
}
#menu #deal-group-stats .scroller .dialog-button {
  width: 100%;
}
#deal-stats p.no-deals {
  background-color: rgba(0, 90, 0, 0.25);
  border-radius: 3px;
  padding: 20px;
  text-align: center;
}
body[data-board-color="blue"] #deal-stats p.no-deals {
  background-color: rgba(10, 59, 118, 0.25);
}
body[data-board-color="red"] #deal-stats p.no-deals {
  background-color: rgba(160, 20, 20, 0.25);
}
body[data-board-color="charcoal"] #deal-stats p.no-deals {
  background-color: rgba(75, 75, 75, 0.25);
}
#deal-stats h2 + p,
#deal-stats h2 + ul {
  font-size: 14px;
}
#deal-stats .dialog-button {
  width: 100%;
}
#deal-stats .option {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#deal-stats .option span {
  font-size: 14px;
}
#deal-stats .option .group {
  width: 100%;
}
#deal-stats .option .count {
  padding: 0 16px;
}
#game-history .option {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#game-history .name-group {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#game-history .time-group {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-right: 0.5em;
  width: 6em;
}
#game-history .time-group .time {
  float: right;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
}
#game-history .result {
  padding-left: 0.5em;
  padding-right: 1em;
  text-align: right;
}
#menu #gifts .item td {
  padding: 0;
}
#menu #gifts .item a {
  display: block;
  padding: 6px 0 8px;
  text-decoration: none;
}
#menu #gifts .item:hover {
  background-color: #fff;
}
#menu #gifts .item code {
  font-size: 110%;
}
#menu #gifts .item .details {
  float: right;
}
#menu #leaderboard .content h1 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 0;
  margin-right: 5px;
}
#menu #leaderboard .content h2.subtitle {
  font-weight: normal;
  margin: 0 0 10px 0;
  text-align: center;
}
#menu #leaderboard .badges {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin-top: 2px;
  list-style: none;
}
#menu #leaderboard .badges[hidden] {
  height: 0;
}
#menu #leaderboard .badges li {
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#menu #leaderboard .groups {
  position: relative;
}
#menu #leaderboard .group {
  display: block;
  opacity: 1;
  position: absolute;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
#menu #leaderboard .group[hidden] {
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
#menu #leaderboard .group:not([hidden]) ~ .group[hidden] {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
#menu #leaderboard .fineprint {
  font-size: 12px;
  margin-bottom: 20px;
  text-align: center;
}
#menu #leaderboard .leaderboard-table,
#menu #challenge-results .leaderboard-table {
  position: relative;
}
#menu #leaderboard .leaderboard-table tr.name-tag,
#menu #challenge-results .leaderboard-table tr.name-tag {
  cursor: pointer;
}
#menu #leaderboard .leaderboard-table tr.name-tag:hover,
#menu #challenge-results .leaderboard-table tr.name-tag:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
#menu #leaderboard .leaderboard-table tr.name-tag[data-name-tag="none"]:hover,
#menu #challenge-results .leaderboard-table tr.name-tag[data-name-tag="none"]:hover {
  background-color: #fff;
}
#menu #leaderboard .leaderboard-table th,
#menu #challenge-results .leaderboard-table th {
  padding-bottom: 4px;
}
#menu #leaderboard .leaderboard-table th.right:last-child,
#menu #challenge-results .leaderboard-table th.right:last-child {
  padding-right: 4px;
}
#menu #leaderboard .leaderboard-table th h2,
#menu #challenge-results .leaderboard-table th h2 {
  margin-bottom: 0;
}
#menu #leaderboard .leaderboard-table th h2 b,
#menu #challenge-results .leaderboard-table th h2 b {
  float: right;
}
#menu #leaderboard .leaderboard-table th:last-child h2 b,
#menu #challenge-results .leaderboard-table th:last-child h2 b {
  padding-right: 4px;
}
#menu #leaderboard .leaderboard-table td,
#menu #challenge-results .leaderboard-table td {
  line-height: 1.5em;
}
#menu #leaderboard .leaderboard-table td.rank,
#menu #challenge-results .leaderboard-table td.rank {
  padding: 0 !important;
}
#menu #leaderboard .leaderboard-table td.rank div,
#menu #challenge-results .leaderboard-table td.rank div {
  padding: 1px 16px 3px 4px;
  position: relative;
}
#menu #leaderboard .leaderboard-table td.rank.badge div,
#menu #challenge-results .leaderboard-table td.rank.badge div {
  padding-right: 1.4em;
}
#menu #leaderboard .leaderboard-table td.rank .icon-badge,
#menu #challenge-results .leaderboard-table td.rank .icon-badge {
  position: absolute;
  right: 0.1em;
  top: -0.1em;
}
#menu #leaderboard .leaderboard-table td:first-child,
#menu #challenge-results .leaderboard-table td:first-child {
  padding-left: 4px;
}
#menu #leaderboard .leaderboard-table td:last-child,
#menu #challenge-results .leaderboard-table td:last-child {
  padding-right: 4px;
  white-space: nowrap;
}
@media (max-width: 479px), (max-height: 479px) {
  #leaderboards .option {
    font-size: 14px;
    padding-top: 10px;
  }
}
#leaderboards .option .badges {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  float: right;
  margin-right: 16px;
}
#leaderboards .option .badges > .icon-badge,
#leaderboards .option .badges > .icon-dash {
  text-align: center;
  width: 24px;
}
#leaderboards .option .badges .icon-dash {
  position: relative;
  top: -1px;
}
#leaderboards .option .badges .icon-dash:after {
  content: "—";
}
#player-details .option {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
}
@media (max-width: 479px), (max-height: 479px) {
  #player-details .option {
    padding-top: 10px;
  }
}
#player-details .option .title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#player-details .option .period {
  background-color: #8bce8b;
  border-radius: 3px;
  display: inline-block;
  float: right;
  font-size: 12px;
  margin-right: 18px;
  padding: 2px 0 4px;
  text-align: center;
  width: 75px;
}
body[data-board-color="blue"] #player-details .option .period {
  background-color: #b0becf;
}
body[data-board-color="red"] #player-details .option .period {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #player-details .option .period {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #player-details .option .period {
  background-color: black;
}
body[data-board-color="white"] #player-details .option .period {
  background-color: white;
}
@media (max-width: 479px), (max-height: 479px) {
  #player-details .option .period {
    margin-top: -2px;
  }
}
#leaderboards .play-mode-selector,
#leaderboard .play-mode-selector {
  margin-bottom: 20px;
}
#leaderboards .scroller,
#leaderboard .scroller {
  overflow-y: scroll;
}
#menu #redeem-gift .gift-code-input {
  background-color: rgba(0, 0, 0, 0.25);
  color: inherit;
  font-family: monospace;
  font-size: inherit;
  font-weight: bold;
  border: none;
  padding: 4px;
  text-align: center;
  text-transform: uppercase;
  width: 256px;
}
#menu #redeem-gift .gift-code-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#menu #redeem-gift .gift-code-input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#menu #redeem-gift .gift-code-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#menu #redeem-gift .actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #redeem-gift .actions {
    gap: 8px;
  }
}
#menu #redeem-gift .actions[hidden] {
  display: none;
}
#menu #redeem-gift .actions .dialog-button {
  min-width: 0;
  padding: 4px 2px;
  width: 100%;
}
.gift-card {
  aspect-ratio: 1.6;
  background-color: #003800;
  background-image: -webkit-radial-gradient(center 40%, ellipse, #008d00 0, #004900 100%);
  background-image: radial-gradient(ellipse at center 40%, #008d00 0, #004900 100%);
  border: none;
  border-radius: 12px;
  -webkit-box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.5);
  color: #eee;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: sans-serif;
  font-size: 14px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  max-width: 320px;
  padding: 0;
  text-align: center;
  width: 100%;
}
.gift-card .gift-header {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 16px 0 10px;
  text-align: left;
}
.gift-card .gift-header .app {
  margin-left: 4px;
  width: 100%;
}
.gift-card .gift-link {
  color: gold;
}
.gift-card .gift-code {
  font-family: monospace;
  font-size: 150%;
  font-weight: bold;
  padding-bottom: 50px;
}
.gift-card .gift-code code {
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.gift-card .details {
  font-family: sans-serif;
  text-align: center;
}
.gift-card .logo {
  vertical-align: middle;
}
.gift-card .gift-product {
  font-size: 200%;
  padding-top: 8px;
}
.gift-card .gift-product .is-chips {
  font-size: 150%;
}
.gift-card .gift-product .icon-chips {
  color: gold;
}
.gift-card .vip-mock {
  background-color: #007700;
  border: 4px solid;
  border-radius: 12px;
  color: #fff000;
  display: inline-block;
  font-family: Trebuchet MS, sans-serif;
  font-weight: bold;
  padding: 2px 6px 1px;
}
.toast.reported-warning {
  background-color: #fd0;
}
#share .share-options {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  text-align: center;
}
#share .share-options a {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  margin-top: 20px;
}
#share .share-options a > i {
  font-size: 175%;
}
#share .share-options a span {
  color: #005a00;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
}
body[data-board-color="blue"] #share .share-options a span {
  color: #0a3b76;
}
body[data-board-color="red"] #share .share-options a span {
  color: #a01414;
}
body[data-board-color="charcoal"] #share .share-options a span {
  color: #4b4b4b;
}
body[data-board-color="black"] #share .share-options a span {
  color: black;
}
body[data-board-color="white"] #share .share-options a span {
  color: white;
}
#share .title,
#share .text,
#share .url {
  display: block;
}
#share .title,
#share .url {
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu #upload-decks.section > .scroller h2 {
  margin-bottom: 0.5em;
}
#menu #upload-decks.section > .scroller .upload-part .drop-zone {
  border-color: #005a00;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border-style: solid;
  border-width: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body[data-board-color="blue"] #menu #upload-decks.section > .scroller .upload-part .drop-zone {
  border-color: #0a3b76;
}
body[data-board-color="red"] #menu #upload-decks.section > .scroller .upload-part .drop-zone {
  border-color: #a01414;
}
body[data-board-color="charcoal"] #menu #upload-decks.section > .scroller .upload-part .drop-zone {
  border-color: #4b4b4b;
}
body[data-board-color="black"] #menu #upload-decks.section > .scroller .upload-part .drop-zone {
  border-color: black;
}
body[data-board-color="white"] #menu #upload-decks.section > .scroller .upload-part .drop-zone {
  border-color: white;
}
#menu #upload-decks.section > .scroller .upload-part .drop-zone .inner-drop-zone {
  text-align: center;
}
#menu #upload-decks.section > .scroller .upload-part .drop-zone .inner-drop-zone p {
  margin: 4px 0;
}
#menu #upload-decks.section > .scroller .upload-part .drop-zone .inner-drop-zone p #upload-decks-input {
  width: 0;
  overflow: hidden;
}
#menu #upload-decks.section > .scroller .upload-part .error-log {
  color: red;
  margin: 1em 0;
  font-weight: 500;
}
#menu #upload-decks.section > .scroller .upload-part .error-log div {
  margin-left: 1em;
  text-indent: -1em;
  white-space: pre-line;
}
#menu #upload-decks.section > .scroller .upload-part .error-log div + div {
  margin-top: 0.5em;
}
#menu #upload-decks.section > .scroller .uploaded-part .existing-msg {
  margin-bottom: 0.5em;
}
#menu #upload-decks.section > .scroller .uploaded-part .existing-msg:empty {
  display: none;
}
#menu #upload-decks.section > .scroller .uploaded-part .existing-decks {
  margin-bottom: 1em;
}
#menu #upload-decks.section > .scroller .uploaded-part .existing-decks .radio-group-heading {
  margin-bottom: 4px;
}
#menu #upload-decks.section > .scroller .uploaded-part .preview h2 span {
  font-weight: inherit;
  font-size: inherit;
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview {
  width: 100%;
  margin: 10px 0 20px;
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview .dlr {
  background-color: rgba(255, 255, 0, 0.6);
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview th,
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview td {
  padding: 1px 4px 3px;
  text-align: center;
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview th:first-child,
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview td:first-child {
  padding-left: 0;
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview th:last-child,
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview td:last-child {
  padding-right: 0;
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview .suit {
  font-size: 130%;
  position: relative;
  top: 1px;
}
#menu #upload-decks.section > .scroller .uploaded-part table.deck-preview span.r + span.r {
  margin-left: 2px;
}
#menu #upload-decks.section > .scroller .uploaded-part .raw-preview {
  margin-top: 1em;
}
#menu #upload-decks.section > .scroller .uploaded-part .raw-preview h3 {
  margin-bottom: 4px;
}
#menu #upload-decks.section > .scroller .uploaded-part .raw-preview h3 i.fa {
  margin-left: 2em;
}
#menu #upload-decks.section > .scroller .uploaded-part .raw-preview div {
  font-family: monospace;
  margin-left: 2em;
  text-indent: -1em;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
#menu #upload-decks.section > .scroller .uploaded-part .raw-preview.LIN div {
  word-break: break-all;
}
@-webkit-keyframes bounce {
  0%,
  10%,
  25%,
  40%,
  50%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20%,
  70% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  30%,
  80% {
    -webkit-transform: translateX(15px);
            transform: translateX(15px);
  }
}
@keyframes bounce {
  0%,
  10%,
  25%,
  40%,
  50%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20%,
  70% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  30%,
  80% {
    -webkit-transform: translateX(15px);
            transform: translateX(15px);
  }
}
#menu .overlay {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.35);
}
#menu .overlay .fa {
  -webkit-animation: bounce 3s;
          animation: bounce 3s;
  display: none;
  padding-left: 8px;
  position: absolute;
  left: 400px;
  top: 0;
  font-size: 48px;
  line-height: 60px;
  text-shadow: 2px 2px 3px #000;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .overlay .fa {
    line-height: 42px;
  }
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .overlay .fa {
    left: 320px;
  }
}
@media (max-width: 340px) {
  #menu .overlay .fa {
    left: 300px;
  }
}
#menu .overlay.show-help .fa {
  display: block;
}
#menu .error-container,
#menu .insufficient-chips {
  padding: 6px 10px 8px;
  margin-top: 1em;
  background-color: gold;
  text-align: center;
}
#menu .error-container a,
#menu .insufficient-chips a {
  margin-left: 0.5em;
  white-space: nowrap;
  font-weight: 500;
}
#menu .actions.split button {
  width: 48%;
}
#menu .actions.split button:last-child {
  float: right;
}
#menu a:not(.dialog-button) {
  color: #005a00;
}
body[data-board-color="blue"] #menu a:not(.dialog-button) {
  color: #0a3b76;
}
body[data-board-color="red"] #menu a:not(.dialog-button) {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu a:not(.dialog-button) {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu a:not(.dialog-button) {
  color: black;
}
body[data-board-color="white"] #menu a:not(.dialog-button) {
  color: white;
}
#menu[hidden] {
  display: block;
}
#menu > .panel {
  background-color: #e6ece6;
  bottom: 0;
  -webkit-box-shadow: 8px 0 6px rgba(0, 0, 0, 0.25);
          box-shadow: 8px 0 6px rgba(0, 0, 0, 0.25);
  left: -400px;
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(260px);
          transform: translateX(260px);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 400px;
}
body[data-board-color="blue"] #menu > .panel {
  background-color: #e7eaee;
}
body[data-board-color="red"] #menu > .panel {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] #menu > .panel {
  background-color: #ebebeb;
}
body[data-board-color="black"] #menu > .panel {
  background-color: black;
}
body[data-board-color="white"] #menu > .panel {
  background-color: white;
}
[hidden]#menu > .panel {
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
  -webkit-transition-property: visibility, -webkit-transform;
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  visibility: hidden;
}
#menu > .panel:before {
  content: "";
  display: block;
  background-color: #8bce8b;
  height: 60px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
body[data-board-color="blue"] #menu > .panel:before {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu > .panel:before {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu > .panel:before {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu > .panel:before {
  background-color: black;
}
body[data-board-color="white"] #menu > .panel:before {
  background-color: white;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu > .panel:before {
    height: 42px;
  }
}
#menu.header > .panel:before {
  opacity: 1;
}
#menu.header #menu-close {
  opacity: 1;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  visibility: visible;
}
#menu .section {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #004100;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  visibility: visible;
  width: 400px;
}
body[data-board-color="blue"] #menu .section {
  color: #082f5e;
}
body[data-board-color="red"] #menu .section {
  color: #891111;
}
body[data-board-color="charcoal"] #menu .section {
  color: #3e3e3e;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section {
    width: 320px;
  }
}
@media (max-width: 340px) {
  #menu .section {
    width: 300px;
  }
}
#menu .section[hidden] {
  display: block;
  -webkit-transition-property: visibility, -webkit-transform;
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  visibility: hidden;
}
#menu .section > h1 {
  color: #005a00;
  font-weight: 300;
  font-size: 28px;
  height: 60px;
  left: 0;
  line-height: 60px;
  margin: 0;
  overflow: hidden;
  padding-left: 60px;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
}
body[data-board-color="blue"] #menu .section > h1 {
  color: #0a3b76;
}
body[data-board-color="red"] #menu .section > h1 {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu .section > h1 {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu .section > h1 {
  color: black;
}
body[data-board-color="white"] #menu .section > h1 {
  color: white;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section > h1 {
    font-size: 24px;
    height: 42px;
    line-height: 40px;
    padding-left: 42px;
  }
}
#menu .section > .scroller {
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 20px;
  position: absolute;
  right: 0;
  top: 60px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section > .scroller {
    padding: 10px;
    top: 42px;
  }
}
#menu .section > .scroller > .loading,
#menu .section > .scroller > div > .loading {
  color: #005a00;
  font-size: 28px;
  margin: -15px 0 0 -15px;
  left: 50%;
  position: absolute;
  top: 50%;
}
body[data-board-color="blue"] #menu .section > .scroller > .loading,
body[data-board-color="blue"] #menu .section > .scroller > div > .loading {
  color: #0a3b76;
}
body[data-board-color="red"] #menu .section > .scroller > .loading,
body[data-board-color="red"] #menu .section > .scroller > div > .loading {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu .section > .scroller > .loading,
body[data-board-color="charcoal"] #menu .section > .scroller > div > .loading {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu .section > .scroller > .loading,
body[data-board-color="black"] #menu .section > .scroller > div > .loading {
  color: black;
}
body[data-board-color="white"] #menu .section > .scroller > .loading,
body[data-board-color="white"] #menu .section > .scroller > div > .loading {
  color: white;
}
#menu .section > .scroller > .loading[hidden],
#menu .section > .scroller > div > .loading[hidden] {
  display: none;
}
#menu .section > .scroller > .content {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#menu .section > .scroller > .content[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
#menu .section > .scroller h1,
#menu .section > .scroller h2,
#menu .section > .scroller h3,
#menu .section > .scroller b,
#menu .section > .scroller th {
  font-weight: 500;
  margin: 0;
  padding: 0;
}
#menu .section > .scroller h1 span:not(.suit),
#menu .section > .scroller h2 span:not(.suit),
#menu .section > .scroller h3 span:not(.suit),
#menu .section > .scroller b span:not(.suit),
#menu .section > .scroller th span:not(.suit) {
  font-weight: 400;
  font-size: 13px;
}
#menu .section > .scroller h1 {
  font-size: 20px;
}
#menu .section > .scroller h1 + h2 {
  margin-top: 10px;
}
#menu .section > .scroller h2,
#menu .section > .scroller h3 {
  font-size: 16px;
}
#menu .section > .scroller h2.space-below,
#menu .section > .scroller h3.space-below {
  margin-bottom: 10px;
}
#menu .section > .scroller h2 + h3 {
  margin-top: 10px;
}
#menu .section > .scroller h3 {
  margin-left: 1em;
  text-indent: -1em;
}
#menu .section > .scroller p + h2,
#menu .section > .scroller div[data-clubs="true"] + h2 {
  margin-top: 18px;
}
#menu .section > .scroller p,
#menu .section > .scroller table,
#menu .section > .scroller ul {
  margin: 0 0 20px 0;
}
#menu .section > .scroller p.Quote {
  margin-left: 1em;
}
#menu .section > .scroller p.code {
  margin-left: 2em;
  margin-right: 1em;
  margin-bottom: 0;
  text-indent: -1em;
  font-size: 13px;
  font-family: monospace;
  word-break: break-all;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
#menu .section > .scroller p.code + p:not(.code) {
  margin-top: 20px;
}
#menu .section > .scroller p.img-in-p {
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  line-height: 1.5;
}
#menu .section > .scroller p.img-in-p img {
  max-width: 100%;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
}
#menu .section > .scroller p.Indented {
  padding-left: 1.5em;
}
#menu .section > .scroller p.ctr {
  text-align: center;
}
#menu .section > .scroller span.SmallCaps,
#menu .section > .scroller b span.SmallCaps {
  font-weight: 500;
  font-size: 82%;
  text-transform: uppercase;
}
#menu .section > .scroller div.highlight {
  background-color: #8bce8b;
  margin-bottom: 20px;
  padding: 5px 10px 10px;
}
body[data-board-color="blue"] #menu .section > .scroller div.highlight {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu .section > .scroller div.highlight {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu .section > .scroller div.highlight {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu .section > .scroller div.highlight {
  background-color: black;
}
body[data-board-color="white"] #menu .section > .scroller div.highlight {
  background-color: white;
}
#menu .section > .scroller div.highlight h3 {
  margin-bottom: 0.25em;
}
#menu .section > .scroller div.highlight p:last-child {
  margin-bottom: 0;
}
#menu .section > .scroller ul {
  padding-left: 32px;
}
#menu .section > .scroller ul.options {
  padding-left: 0;
}
#menu .section > .scroller ul.options li:not([hidden]) {
  display: block;
}
#menu .section > .scroller a {
  text-decoration: underline;
}
#menu .section > .scroller a.dialog-button {
  text-decoration: none;
}
#menu .section > .scroller footer {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(0, 90, 0, 0.5);
  margin-top: 2em;
  padding-top: 0.5em;
  font-size: 9pt;
}
body[data-board-color="blue"] #menu .section > .scroller footer {
  border-top-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .section > .scroller footer {
  border-top-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .section > .scroller footer {
  border-top-color: rgba(75, 75, 75, 0.5);
}
#menu .section > .scroller table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  margin-top: 4px;
  -webkit-font-feature-settings: "pnum" 0, "tnum" 1;
          font-feature-settings: "pnum" 0, "tnum" 1;
}
#menu .section > .scroller table.ellipsis {
  margin: 0;
  table-layout: fixed;
}
#menu .section > .scroller table.ellipsis td:first-child {
  border: none !important;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu .section > .scroller table tr.highlight td {
  background-color: #fff;
  font-weight: 500;
}
#menu .section > .scroller table td.right,
#menu .section > .scroller table th.right {
  text-align: right;
}
#menu .section > .scroller table td.center,
#menu .section > .scroller table th.center {
  text-align: center;
}
#menu .section > .scroller table th {
  text-align: left;
}
#menu .section > .scroller table th:not(:last-child) {
  padding-right: 16px;
}
#menu .section > .scroller table th h2 {
  margin: 20px 0 4px;
}
#menu .section > .scroller table tbody:first-child th h2 {
  margin: 0 0 4px;
}
#menu .section > .scroller table td,
#menu .section > .scroller table tr:not(:first-child) > th {
  padding: 1px 0 3px;
  vertical-align: baseline;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(0, 90, 0, 0.5);
}
body[data-board-color="blue"] #menu .section > .scroller table td,
body[data-board-color="blue"] #menu .section > .scroller table tr:not(:first-child) > th {
  border-top-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .section > .scroller table td,
body[data-board-color="red"] #menu .section > .scroller table tr:not(:first-child) > th {
  border-top-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .section > .scroller table td,
body[data-board-color="charcoal"] #menu .section > .scroller table tr:not(:first-child) > th {
  border-top-color: rgba(75, 75, 75, 0.5);
}
#menu .section > .scroller table td:not(:last-child),
#menu .section > .scroller table tr:not(:first-child) > th:not(:last-child) {
  padding-right: 16px;
}
#menu .section > .scroller table td.fill,
#menu .section > .scroller table tr:not(:first-child) > th.fill {
  width: 100%;
}
#menu .section > .scroller table td p,
#menu .section > .scroller table tr:not(:first-child) > th p {
  margin-bottom: 10px;
}
#menu .section > .scroller table td p:last-child,
#menu .section > .scroller table tr:not(:first-child) > th p:last-child {
  margin-bottom: 0;
}
#menu .section > .scroller table td.histogram,
#menu .section > .scroller table tr:not(:first-child) > th.histogram,
#menu .section > .scroller table td.labels,
#menu .section > .scroller table tr:not(:first-child) > th.labels {
  width: 100%;
  vertical-align: bottom;
  white-space: nowrap;
}
#menu .section > .scroller table td.histogram span,
#menu .section > .scroller table tr:not(:first-child) > th.histogram span,
#menu .section > .scroller table td.labels span,
#menu .section > .scroller table tr:not(:first-child) > th.labels span {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  min-height: 1px;
}
#menu .section > .scroller table td.labels,
#menu .section > .scroller table tr:not(:first-child) > th.labels {
  padding-top: 0;
  padding-bottom: 1px;
  border-top-style: none;
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
}
#menu .section > .scroller table td.histogram,
#menu .section > .scroller table tr:not(:first-child) > th.histogram {
  height: 1in;
  padding-top: 5px;
  padding-bottom: 0;
}
#menu .section > .scroller table td.histogram span,
#menu .section > .scroller table tr:not(:first-child) > th.histogram span {
  background-color: rgba(0, 90, 0, 0.75);
}
body[data-board-color="blue"] #menu .section > .scroller table td.histogram span,
body[data-board-color="blue"] #menu .section > .scroller table tr:not(:first-child) > th.histogram span {
  background-color: rgba(10, 59, 118, 0.75);
}
body[data-board-color="red"] #menu .section > .scroller table td.histogram span,
body[data-board-color="red"] #menu .section > .scroller table tr:not(:first-child) > th.histogram span {
  background-color: rgba(160, 20, 20, 0.75);
}
body[data-board-color="charcoal"] #menu .section > .scroller table td.histogram span,
body[data-board-color="charcoal"] #menu .section > .scroller table tr:not(:first-child) > th.histogram span {
  background-color: rgba(75, 75, 75, 0.75);
}
#menu .section > .scroller table td.histogram span + span,
#menu .section > .scroller table tr:not(:first-child) > th.histogram span + span {
  border-left: solid 1px rgba(255, 255, 255, 0.5);
}
#menu .section > .scroller table tr:last-child td,
#menu .section > .scroller table tr:last-child th {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 90, 0, 0.5);
}
body[data-board-color="blue"] #menu .section > .scroller table tr:last-child td,
body[data-board-color="blue"] #menu .section > .scroller table tr:last-child th {
  border-bottom-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .section > .scroller table tr:last-child td,
body[data-board-color="red"] #menu .section > .scroller table tr:last-child th {
  border-bottom-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .section > .scroller table tr:last-child td,
body[data-board-color="charcoal"] #menu .section > .scroller table tr:last-child th {
  border-bottom-color: rgba(75, 75, 75, 0.5);
}
#menu .section > .scroller table td[colspan="2"]:empty {
  height: 2px;
}
#menu .section > .scroller .udr-intro {
  margin: 0 0 20px;
}
#menu .section > .scroller .udr-h2,
#menu .section > .scroller .udr-h3 {
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-indent: 0;
}
#menu .section > .scroller .udr-h2 {
  font-size: 20px;
  margin-top: 10px;
  text-indent: 0;
}
#menu .section > .scroller .udr-h2 + .udr-table,
#menu .section > .scroller .udr-h2 + .udr-h3 {
  margin-left: 0;
}
#menu .section > .scroller .udr-h2 + .udr-div,
#menu .section > .scroller .udr-h2 + .udr-intro + .udr-div {
  margin-left: 0;
}
#menu .section > .scroller .udr-h2 + .udr-div.udr-blocked,
#menu .section > .scroller .udr-h2 + .udr-intro + .udr-div.udr-blocked {
  margin-left: 10px;
}
#menu .section > .scroller .udr-h2 + .udr-intro {
  font-size: 87.5%;
  margin: 5px 0 10px 10px;
}
#menu .section > .scroller .udr-h2.udr-ul:after {
  border-bottom: 0.5px solid #656565;
  content: "";
  display: block;
  height: 2px;
  width: 2in;
}
#menu .section > .scroller .udr-h3 {
  font-size: 18px;
  margin-top: 5px;
  text-indent: 0;
}
#menu .section > .scroller .udr-h3 + .udr-table {
  margin-left: 10px;
}
#menu .section > .scroller .udr-h3:after {
  border-bottom: 0.5px solid #656565;
  content: "";
  display: block;
  height: 2px;
  width: 2in;
}
#menu .section > .scroller .udr-div {
  margin: 5px 0 20px;
}
#menu .section > .scroller .udr-table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 5px;
  margin-bottom: 20px;
  width: auto;
}
#menu .section > .scroller .udr-table .k,
#menu .section > .scroller .udr-table .v,
#menu .section > .scroller .udr-table .g,
#menu .section > .scroller .udr-table .m,
#menu .section > .scroller .udr-table .d,
#menu .section > .scroller .udr-table .b,
#menu .section > .scroller .udr-table .ach,
#menu .section > .scroller .udr-table .lv,
#menu .section > .scroller .udr-table .pr {
  border: none;
  line-height: 1.1;
  padding: 2px 0 3px;
  vertical-align: baseline;
}
#menu .section > .scroller .udr-table .k.l,
#menu .section > .scroller .udr-table .v.l,
#menu .section > .scroller .udr-table .g.l,
#menu .section > .scroller .udr-table .m.l,
#menu .section > .scroller .udr-table .d.l,
#menu .section > .scroller .udr-table .b.l,
#menu .section > .scroller .udr-table .ach.l,
#menu .section > .scroller .udr-table .lv.l,
#menu .section > .scroller .udr-table .pr.l {
  text-align: left;
}
#menu .section > .scroller .udr-table .k.r,
#menu .section > .scroller .udr-table .v.r,
#menu .section > .scroller .udr-table .g.r,
#menu .section > .scroller .udr-table .m.r,
#menu .section > .scroller .udr-table .d.r,
#menu .section > .scroller .udr-table .b.r,
#menu .section > .scroller .udr-table .ach.r,
#menu .section > .scroller .udr-table .lv.r,
#menu .section > .scroller .udr-table .pr.r {
  text-align: right;
}
#menu .section > .scroller .udr-table .k,
#menu .section > .scroller .udr-table .g,
#menu .section > .scroller .udr-table .m,
#menu .section > .scroller .udr-table .d,
#menu .section > .scroller .udr-table .ach,
#menu .section > .scroller .udr-table .lv {
  padding-right: 10px;
}
#menu .section > .scroller .udr-table .h {
  border-bottom: 1px solid #666;
  font-weight: normal;
  padding-bottom: 4px;
  padding-top: 0;
  vertical-align: bottom;
}
#menu .section > .scroller .udr-table.udr-general .k,
#menu .section > .scroller .udr-table.udr-last-connection .k {
  white-space: nowrap;
}
#menu .section > .scroller .udr-table.udr-achievements {
  margin-left: 10px;
}
#menu .section > .scroller .udr-table.udr-achievements .ach {
  text-indent: -10px;
  padding-left: 10px;
}
#menu .section > .scroller .udr-table.udr-friends {
  margin-left: 10px;
}
#menu .section > .scroller .udr-table.udr-friends .k {
  overflow: hidden;
}
#menu .section > .scroller .udr-table.udr-chips-summary {
  margin-left: 10px;
}
#menu .section > .scroller .udr-table.udr-chips-summary tr:last-child td {
  border-top: 1px solid #666;
}
#menu .section > .scroller .udr-table.udr-reports-on {
  margin-left: 10px;
}
#menu .section > .scroller .udr-table.udr-reports-on .k {
  min-width: 150px;
}
#menu .section > .scroller .udr-table.udr-settings {
  margin-left: 10px;
}
#menu .section > .scroller .udr-table.udr-settings .v.r {
  text-align: left;
}
#menu .section > .scroller .udr-table.udr-settings .k {
  text-indent: -10px;
  padding-left: 10px;
}
#menu .section > .scroller .udr-table.udr-feedback .k:not(.h),
#menu .section > .scroller .udr-table.udr-feedback .v:not(.h) {
  padding-bottom: 8px;
}
#menu .section.main {
  color: #fff;
  padding: 0;
  width: 260px;
}
#menu .section.main .share-links {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
}
#menu .section.main .share-links .call-to-action {
  color: #004100;
  font-size: 12px;
  margin-bottom: 3px;
}
body[data-board-color="blue"] #menu .section.main .share-links .call-to-action {
  color: #082f5e;
}
body[data-board-color="red"] #menu .section.main .share-links .call-to-action {
  color: #891111;
}
body[data-board-color="charcoal"] #menu .section.main .share-links .call-to-action {
  color: #3e3e3e;
}
#menu .section.main .share-links .share-link {
  padding: 0 6px;
}
#menu .section.main ul {
  bottom: 65px;
  padding: 0;
}
#menu .section.main ul li {
  display: block;
}
#menu .section.main ul li[hidden] {
  display: none;
}
#menu .section.main ul li.line:before {
  border-top: 1px solid;
  border-color: rgba(0, 90, 0, 0.5);
  content: "";
  display: block;
  margin: 0 20px;
}
body[data-board-color="blue"] #menu .section.main ul li.line:before {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .section.main ul li.line:before {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .section.main ul li.line:before {
  border-color: rgba(75, 75, 75, 0.5);
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section.main ul li.line:before {
    margin: 0 10px;
  }
}
#menu .section.main ul li.line-after:after {
  border-top: 1px solid;
  border-color: rgba(0, 90, 0, 0.5);
  content: "";
  display: block;
  margin: 0 20px;
}
body[data-board-color="blue"] #menu .section.main ul li.line-after:after {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .section.main ul li.line-after:after {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .section.main ul li.line-after:after {
  border-color: rgba(75, 75, 75, 0.5);
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section.main ul li.line-after:after {
    margin: 0 10px;
  }
}
#menu .section.main ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section.main ul li a {
    padding: 10px 12px;
  }
}
#menu .section.main ul li a:hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #menu .section.main ul li a:hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu .section.main ul li a:hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu .section.main ul li a:hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu .section.main ul li a:hover {
  background-color: black;
}
body[data-board-color="white"] #menu .section.main ul li a:hover {
  background-color: white;
}
#menu .section.main ul li a:hover:active {
  background-color: #005a00;
  color: #fff;
}
body[data-board-color="blue"] #menu .section.main ul li a:hover:active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #menu .section.main ul li a:hover:active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #menu .section.main ul li a:hover:active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #menu .section.main ul li a:hover:active {
  background-color: black;
}
body[data-board-color="white"] #menu .section.main ul li a:hover:active {
  background-color: white;
}
#menu .section.main ul li a .fa {
  margin-right: 15px;
  text-align: center;
}
#menu .section.main ul li a .promo {
  background-color: #004100;
  border-radius: 4px;
  color: #fff;
  float: right;
  font-size: 13px;
  font-weight: 500;
  padding: 2px 8px 3px;
}
body[data-board-color="blue"] #menu .section.main ul li a .promo {
  background-color: #082f5e;
}
body[data-board-color="red"] #menu .section.main ul li a .promo {
  background-color: #891111;
}
body[data-board-color="charcoal"] #menu .section.main ul li a .promo {
  background-color: #3e3e3e;
}
#menu .section.main ul li a.clubs-menu-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#menu .section#friends .game-friends,
#menu .section#blockedPlayers .game-friends {
  margin-top: 8px;
  padding: 0 20px;
}
#menu .section#friends .game-friends table,
#menu .section#blockedPlayers .game-friends table {
  table-layout: fixed;
}
#menu .section#friends .game-friends td:first-child,
#menu .section#blockedPlayers .game-friends td:first-child {
  padding-right: 0.5em;
}
#menu .section#friends .game-friends td:last-child,
#menu .section#blockedPlayers .game-friends td:last-child {
  padding-left: 0;
  padding-right: 2px;
  width: 30px;
  text-align: right;
}
#menu .section#friends .game-friends .games-played,
#menu .section#blockedPlayers .game-friends .games-played {
  white-space: nowrap;
  float: right;
}
#menu .section#friends .game-friends .fa-trash-o,
#menu .section#blockedPlayers .game-friends .fa-trash-o {
  border-radius: 15px;
  cursor: pointer;
  line-height: 30px;
  width: 30px;
  text-align: center;
}
#menu .section#friends .game-friends .fa-trash-o:hover,
#menu .section#blockedPlayers .game-friends .fa-trash-o:hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #menu .section#friends .game-friends .fa-trash-o:hover,
body[data-board-color="blue"] #menu .section#blockedPlayers .game-friends .fa-trash-o:hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu .section#friends .game-friends .fa-trash-o:hover,
body[data-board-color="red"] #menu .section#blockedPlayers .game-friends .fa-trash-o:hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu .section#friends .game-friends .fa-trash-o:hover,
body[data-board-color="charcoal"] #menu .section#blockedPlayers .game-friends .fa-trash-o:hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu .section#friends .game-friends .fa-trash-o:hover,
body[data-board-color="black"] #menu .section#blockedPlayers .game-friends .fa-trash-o:hover {
  background-color: black;
}
body[data-board-color="white"] #menu .section#friends .game-friends .fa-trash-o:hover,
body[data-board-color="white"] #menu .section#blockedPlayers .game-friends .fa-trash-o:hover {
  background-color: white;
}
#menu .section#friends div + p,
#menu .section#blockedPlayers div + p {
  margin-top: 24px;
}
#menu .section#friends ul.options,
#menu .section#blockedPlayers ul.options {
  margin-top: 40px;
}
#menu .section#friends a.unblock-all-link,
#menu .section#blockedPlayers a.unblock-all-link {
  float: right;
  font-weight: 400;
  cursor: pointer;
  padding-right: 20px;
}
#menu .section#friends .games-played i,
#menu .section#blockedPlayers .games-played i {
  font-weight: 500;
  background-color: #005a00;
  color: white;
  display: inline-block;
  font-size: 12px;
  font-style: normal;
  padding: 1px 2px 2px;
  width: 16px;
  text-align: center;
  border-radius: 5px;
  margin-left: 2px;
}
body[data-board-color="blue"] #menu .section#friends .games-played i,
body[data-board-color="blue"] #menu .section#blockedPlayers .games-played i {
  background-color: #0a3b76;
}
body[data-board-color="red"] #menu .section#friends .games-played i,
body[data-board-color="red"] #menu .section#blockedPlayers .games-played i {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #menu .section#friends .games-played i,
body[data-board-color="charcoal"] #menu .section#blockedPlayers .games-played i {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #menu .section#friends .games-played i,
body[data-board-color="black"] #menu .section#blockedPlayers .games-played i {
  background-color: black;
}
body[data-board-color="white"] #menu .section#friends .games-played i,
body[data-board-color="white"] #menu .section#blockedPlayers .games-played i {
  background-color: white;
}
#menu .section#friends .game-icon-key-list,
#menu .section#blockedPlayers .game-icon-key-list {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}
#menu .section#friends .game-icon-key-list li,
#menu .section#blockedPlayers .game-icon-key-list li {
  display: inline-block;
  white-space: nowrap;
  margin-top: 4px;
}
#menu .section#friends .game-icon-key-list li:not(:last-child),
#menu .section#blockedPlayers .game-icon-key-list li:not(:last-child) {
  margin-right: 0.5em;
}
#menu .section#friends .game-icon-key-list li:not(:last-child):after,
#menu .section#blockedPlayers .game-icon-key-list li:not(:last-child):after {
  content: ",";
}
#menu .section#clubs .scroller {
  padding: 0;
  overflow: hidden;
}
#menu .section#clubs .scroller iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
}
#menu .section#clubs .scroller .clubs-content {
  padding: 20px;
}
#menu .section#clubs .scroller .clubs-content .button-row {
  text-align: center;
}
#menu .section#clubs .scroller .clubs-content .fine-print {
  font-size: 14px;
  text-align: center;
}
#menu .section.dynamic .before-help-ul {
  margin-bottom: 0;
}
#menu .section.dynamic .help-ul {
  margin-top: 0;
}
#menu .section.dynamic .help-ul li {
  margin-top: 0.25em;
}
#menu .section.dynamic p:not(.IndentedBlock) + .IndentedBlock {
  margin-top: -0.7em;
}
#menu .section.dynamic .IndentedBlock {
  margin: 0 0 0 20px;
}
#menu .section.dynamic .IndentedBlock + p:not(.IndentedBlock) {
  margin-top: 1em;
}
#menu .section.dynamic .InfoBlock {
  border-width: 1px;
  border-style: solid;
  background-color: white;
  padding: 8px;
  text-align: center;
}
#menu .section.dynamic div[accordion-body] {
  margin-top: 12px;
}
#menu .section.dynamic[data-href*="/help"] .content h1,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .content h1 {
  display: none;
}
#menu .section.dynamic[data-href*="/help"] .table-wrapper table,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .table-wrapper table {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
#menu .section.dynamic[data-href*="/help"] .table-wrapper table td.OptionName,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .table-wrapper table td.OptionName,
#menu .section.dynamic[data-href*="/help"] .table-wrapper table td p.OptionName,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .table-wrapper table td p.OptionName {
  margin: 0;
  font-weight: 500;
  min-width: 1in;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section.dynamic[data-href*="/help"] .table-wrapper table td.OptionName,
  #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .table-wrapper table td.OptionName,
  #menu .section.dynamic[data-href*="/help"] .table-wrapper table td p.OptionName,
  #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .table-wrapper table td p.OptionName {
    min-width: 0.75in;
  }
}
#menu .section.dynamic[data-href*="/help"] .table-wrapper table td.align-center,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .table-wrapper table td.align-center {
  padding-left: 8px;
  padding-right: 8px;
}
#menu .section.dynamic[data-href*="/help"] .align-center,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .align-center {
  text-align: center;
}
#menu .section.dynamic[data-href*="/help"] .align-right,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) .align-right {
  text-align: right;
}
#menu .section.dynamic[data-href*="/help"]:not([data-href*="/home/help"]) .Quote,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]):not([data-href*="/home/help"]) .Quote {
  margin-left: 0.25in;
  margin-right: 0.25in;
  padding: 7px 10px 10px;
  background-color: rgba(0, 90, 0, 0.13);
}
body[data-board-color="blue"] #menu .section.dynamic[data-href*="/help"]:not([data-href*="/home/help"]) .Quote,
body[data-board-color="blue"] #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]):not([data-href*="/home/help"]) .Quote {
  background-color: rgba(10, 59, 118, 0.13);
}
body[data-board-color="red"] #menu .section.dynamic[data-href*="/help"]:not([data-href*="/home/help"]) .Quote,
body[data-board-color="red"] #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]):not([data-href*="/home/help"]) .Quote {
  background-color: rgba(160, 20, 20, 0.13);
}
body[data-board-color="charcoal"] #menu .section.dynamic[data-href*="/help"]:not([data-href*="/home/help"]) .Quote,
body[data-board-color="charcoal"] #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]):not([data-href*="/home/help"]) .Quote {
  background-color: rgba(75, 75, 75, 0.13);
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection p,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection p {
  margin-bottom: 10px;
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h2,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h2 {
  margin-top: 20px;
  margin-top: 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 90, 0, 0.5);
  margin-bottom: 5px;
}
body[data-board-color="blue"] #menu .section.dynamic[data-href*="/help"] section.RulesSection h2,
body[data-board-color="blue"] #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h2 {
  border-bottom-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .section.dynamic[data-href*="/help"] section.RulesSection h2,
body[data-board-color="red"] #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h2 {
  border-bottom-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .section.dynamic[data-href*="/help"] section.RulesSection h2,
body[data-board-color="charcoal"] #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h2 {
  border-bottom-color: rgba(75, 75, 75, 0.5);
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h2.available,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h2.available {
  font-size: 18px;
  margin-top: 1em;
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h2 i,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h2 i {
  font-weight: 400;
  font-size: 87.5%;
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h3,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h3 {
  margin-top: 0;
  margin-left: 0;
  text-indent: 0;
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h3:before,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h3:before {
  padding-right: 4px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0da";
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h3 ~ p,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h3 ~ p {
  margin-left: 1em;
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection h3 ~ p i,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection h3 ~ p i {
  font-size: 87.5%;
}
#menu .section.dynamic[data-href*="/help"] section.RulesSection b.rulesOption,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) section.RulesSection b.rulesOption {
  font-weight: 500;
  white-space: nowrap;
}
#menu .section.dynamic[data-href*="/help"] #main h2,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main h2 {
  margin-bottom: 10px;
}
#menu .section.dynamic[data-href*="/help"] #main ul,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main ul {
  padding: 0;
}
#menu .section.dynamic[data-href*="/help"] #main ul li,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main ul li {
  list-style: none;
  padding: 0 20px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section.dynamic[data-href*="/help"] #main ul li,
  #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main ul li {
    padding: 0 10px;
  }
}
#menu .section.dynamic[data-href*="/help"] #main ul li a,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main ul li a {
  display: block;
  text-decoration: none;
}
#menu .section.dynamic[data-href*="/help"] #main p,
#menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main p {
  padding: 0 20px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .section.dynamic[data-href*="/help"] #main p,
  #menu .section.dynamic[data-href*="/home"]:not([data-href*="/home/terms"]) #main p {
    padding: 0 10px;
  }
}
#menu .section.dynamic[data-href*="/home/help/clubs-"] section.RulesSection h3 {
  font-size: 82%;
  text-transform: uppercase;
}
#menu .section.dynamic[data-href*="/home/help/clubs-"] p.img-in-p img {
  max-width: 90%;
}
#menu .section.dynamic .suit {
  color: inherit !important;
}
#menu .input,
#menu textarea,
#menu input:not([type]),
#menu input[type="text"],
#menu input[type="email"],
#menu input[type="number"],
#menu input[type="password"],
#menu select {
  background-color: #fff;
  border: 1px solid;
  border-color: #005a00;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  font-size: 16px;
  padding: 6px 8px 10px;
  width: 100%;
}
body[data-board-color="blue"] #menu .input,
body[data-board-color="blue"] #menu textarea,
body[data-board-color="blue"] #menu input:not([type]),
body[data-board-color="blue"] #menu input[type="text"],
body[data-board-color="blue"] #menu input[type="email"],
body[data-board-color="blue"] #menu input[type="number"],
body[data-board-color="blue"] #menu input[type="password"],
body[data-board-color="blue"] #menu select {
  border-color: #0a3b76;
}
body[data-board-color="red"] #menu .input,
body[data-board-color="red"] #menu textarea,
body[data-board-color="red"] #menu input:not([type]),
body[data-board-color="red"] #menu input[type="text"],
body[data-board-color="red"] #menu input[type="email"],
body[data-board-color="red"] #menu input[type="number"],
body[data-board-color="red"] #menu input[type="password"],
body[data-board-color="red"] #menu select {
  border-color: #a01414;
}
body[data-board-color="charcoal"] #menu .input,
body[data-board-color="charcoal"] #menu textarea,
body[data-board-color="charcoal"] #menu input:not([type]),
body[data-board-color="charcoal"] #menu input[type="text"],
body[data-board-color="charcoal"] #menu input[type="email"],
body[data-board-color="charcoal"] #menu input[type="number"],
body[data-board-color="charcoal"] #menu input[type="password"],
body[data-board-color="charcoal"] #menu select {
  border-color: #4b4b4b;
}
body[data-board-color="black"] #menu .input,
body[data-board-color="black"] #menu textarea,
body[data-board-color="black"] #menu input:not([type]),
body[data-board-color="black"] #menu input[type="text"],
body[data-board-color="black"] #menu input[type="email"],
body[data-board-color="black"] #menu input[type="number"],
body[data-board-color="black"] #menu input[type="password"],
body[data-board-color="black"] #menu select {
  border-color: black;
}
body[data-board-color="white"] #menu .input,
body[data-board-color="white"] #menu textarea,
body[data-board-color="white"] #menu input:not([type]),
body[data-board-color="white"] #menu input[type="text"],
body[data-board-color="white"] #menu input[type="email"],
body[data-board-color="white"] #menu input[type="number"],
body[data-board-color="white"] #menu input[type="password"],
body[data-board-color="white"] #menu select {
  border-color: white;
}
#menu .input {
  display: block;
  min-height: 39px;
  padding: 9px 8px;
}
#menu select {
  padding-top: 5.5px;
  padding-bottom: 9px;
}
#statistics .basic-stats {
  padding: 0 20px;
}
#statistics .basic-stats td:last-child {
  text-align: right;
}
#statistics .basic-stats tr.stats-section td {
  border-top: none;
  font-size: 14px;
  font-style: italic;
  line-height: 1;
  text-align: left;
}
#statistics .basic-stats tr.stats-section td.players-heading {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}
#statistics .basic-stats tr.stats-section:not(:first-child) td {
  padding-top: 10px;
}
#statistics .basic-stats span.in1:before {
  content: "\203A";
  display: inline-block;
  width: 12px;
  text-align: left;
}
#statistics .basic-stats span.in2:before {
  content: "\203A";
  display: inline-block;
  width: 12px;
  padding-left: 12px;
  text-align: left;
}
#statistics h1.game-with-clear {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding-right: 20px !important;
}
#statistics h1.game-with-clear a {
  font-size: 16px;
  text-decoration: none !important;
  font-weight: normal;
  font-style: italic;
  cursor: pointer;
}
#statistics h1.game-with-clear a:hover {
  text-decoration: underline !important;
}
#menu-toggle,
#embedded-leave-game {
  position: absolute;
  left: 10px;
  top: 10px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu-toggle,
  #embedded-leave-game {
    left: 0;
    top: 0;
  }
}
#menu:not([hidden]) #menu-toggle,
#menu:not([hidden]) #embedded-leave-game {
  color: #005a00;
}
body[data-board-color="blue"] #menu:not([hidden]) #menu-toggle,
body[data-board-color="blue"] #menu:not([hidden]) #embedded-leave-game {
  color: #0a3b76;
}
body[data-board-color="red"] #menu:not([hidden]) #menu-toggle,
body[data-board-color="red"] #menu:not([hidden]) #embedded-leave-game {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu:not([hidden]) #menu-toggle,
body[data-board-color="charcoal"] #menu:not([hidden]) #embedded-leave-game {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu:not([hidden]) #menu-toggle,
body[data-board-color="black"] #menu:not([hidden]) #embedded-leave-game {
  color: black;
}
body[data-board-color="white"] #menu:not([hidden]) #menu-toggle,
body[data-board-color="white"] #menu:not([hidden]) #embedded-leave-game {
  color: white;
}
#menu:not([hidden]) #menu-toggle:hover,
#menu:not([hidden]) #embedded-leave-game:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#menu:not([hidden]) #menu-toggle:active,
#menu:not([hidden]) #embedded-leave-game:active {
  background-color: #005a00;
  color: #fff !important;
}
body[data-board-color="blue"] #menu:not([hidden]) #menu-toggle:active,
body[data-board-color="blue"] #menu:not([hidden]) #embedded-leave-game:active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #menu:not([hidden]) #menu-toggle:active,
body[data-board-color="red"] #menu:not([hidden]) #embedded-leave-game:active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #menu:not([hidden]) #menu-toggle:active,
body[data-board-color="charcoal"] #menu:not([hidden]) #embedded-leave-game:active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #menu:not([hidden]) #menu-toggle:active,
body[data-board-color="black"] #menu:not([hidden]) #embedded-leave-game:active {
  background-color: black;
}
body[data-board-color="white"] #menu:not([hidden]) #menu-toggle:active,
body[data-board-color="white"] #menu:not([hidden]) #embedded-leave-game:active {
  background-color: white;
}
#menu-close {
  color: #005a00;
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
body[data-board-color="blue"] #menu-close {
  color: #0a3b76;
}
body[data-board-color="red"] #menu-close {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu-close {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu-close {
  color: black;
}
body[data-board-color="white"] #menu-close {
  color: white;
}
#menu-close:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#menu-close:active {
  background-color: #005a00;
  color: #fff !important;
}
body[data-board-color="blue"] #menu-close:active {
  background-color: #0a3b76;
}
body[data-board-color="red"] #menu-close:active {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #menu-close:active {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #menu-close:active {
  background-color: black;
}
body[data-board-color="white"] #menu-close:active {
  background-color: white;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu-close {
    right: 0;
    top: 0;
  }
}
#menu-close:before,
#menu-close:after {
  border-left: 1px solid;
  content: "";
  display: block;
  height: 60%;
  left: 50%;
  position: absolute;
  top: 20%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#menu-close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.basic-form .form-row,
.basic-form .actions {
  margin: 10px 20px;
  padding: 0;
}
.basic-form .form-row label,
.basic-form .actions label {
  display: block;
}
.basic-form .form-row label input:not([type="checkbox"]),
.basic-form .actions label input:not([type="checkbox"]) {
  display: block;
  margin-top: 3px;
}
.basic-form .form-row label input:not([type="checkbox"])[readonly],
.basic-form .actions label input:not([type="checkbox"])[readonly] {
  background-color: transparent !important;
}
.basic-form .form-row .fineprint.name-change,
.basic-form .actions .fineprint.name-change {
  font-size: 13px;
  margin-top: 2px;
}
.basic-form .form-row.guest-merge,
.basic-form .actions.guest-merge {
  font-size: 13px;
}
.basic-form .form-row.actions,
.basic-form .actions.actions {
  margin-top: 20px;
}
.confirm-unlock {
  text-align: center;
}
.confirm-unlock button {
  border-radius: 3px;
}
.scroller .name-tag-separator {
  margin: 10px 0 10px;
  height: 2px;
  width: 100%;
  background-color: darkgreen;
}
.scroller .name-tag-wrapper {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 10px;
  position: relative;
  padding: 10px;
}
.scroller .name-tag-wrapper.unlocked {
  background-color: transparent;
  padding: 10px 0;
}
.scroller .name-tag-wrapper.unlocked .is-locked,
.scroller .name-tag-wrapper.unlocked .is-unlocking {
  display: none;
}
.scroller .name-tag-wrapper.unlocking .is-locked:not(.fa-lock),
.scroller .name-tag-wrapper.unlocking .is-unlocked {
  display: none;
}
.scroller .name-tag-wrapper.unlocking .is-unlocking {
  display: block;
}
.scroller .name-tag-wrapper:not(.unlocked) .is-unlocked {
  display: none;
}
.scroller .name-tag-wrapper .is-unlocking {
  display: none;
}
.scroller .name-tag-wrapper .fa-lock {
  margin-right: 0.25em;
}
.scroller .name-tag-wrapper .status {
  float: right;
}
.scroller .name-tag-wrapper h2 {
  text-align: left;
}
.player .info .name-tag {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  bottom: 6px;
  border-radius: 3px;
}
.flipped.player .info .name-tag {
  top: 6px;
  bottom: 4px;
}
.player .info .name-tag:not([data-name-tag="none"]) + div.text span.name {
  padding-left: 2px;
  padding-right: 2px;
  margin-left: -2px;
  margin-right: -2px;
}
.swatch.name-tag-preview {
  cursor: pointer;
  height: 32px;
  width: auto;
  border-radius: 3px;
  display: block;
  float: none;
  text-align: left;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  margin: 10px 0;
}
.swatch.name-tag-preview:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.name-tag:not([data-name-tag="none"]) + div.text,
.name-tag:not([data-name-tag="none"]) + div.info {
  text-shadow: 0.5px 0.5px 2px #000, -0.5px -0.5px 2px #000, -0.5px 0 2px #000, 0.5px 0 2px #000, 0 -0.5px 2px #000, 0 0.5px 2px #000, 0.5px -0.5px 2px #000, -0.5px 0.5px 2px #000;
}
.name-tag:not([data-name-tag="none"]) + div.text .state,
.name-tag:not([data-name-tag="none"]) + div.info .state {
  text-shadow: none;
}
.name-tag-preview[data-name-tag="none"] {
  color: #005a00;
  border-width: 1px;
  border-style: solid;
}
body[data-board-color="blue"] .name-tag-preview[data-name-tag="none"] {
  color: #0a3b76;
}
body[data-board-color="red"] .name-tag-preview[data-name-tag="none"] {
  color: #a01414;
}
body[data-board-color="charcoal"] .name-tag-preview[data-name-tag="none"] {
  color: #4b4b4b;
}
body[data-board-color="black"] .name-tag-preview[data-name-tag="none"] {
  color: black;
}
body[data-board-color="white"] .name-tag-preview[data-name-tag="none"] {
  color: white;
}
.name-tag:not([data-name-tag="none"]),
.name-tag-preview:not([data-name-tag="none"]) {
  color: #fff !important;
  text-shadow: 0.5px 0.5px 2px #000, -0.5px -0.5px 2px #000, -0.5px 0 2px #000, 0.5px 0 2px #000, 0 -0.5px 2px #000, 0 0.5px 2px #000, 0.5px -0.5px 2px #000, -0.5px 0.5px 2px #000;
}
.name-tag[data-name-tag="diamond"],
.name-tag-preview[data-name-tag="diamond"] {
  background-color: #223 !important;
  background-image: -webkit-linear-gradient(60deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), -webkit-linear-gradient(300deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), -webkit-linear-gradient(60deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), -webkit-linear-gradient(300deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), -webkit-linear-gradient(30deg, #334 25%, transparent 25.5%, transparent 75%, #334 75%, #334), -webkit-linear-gradient(30deg, #334 25%, transparent 25.5%, transparent 75%, #334 75%, #334);
  background-image: linear-gradient(30deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), linear-gradient(150deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), linear-gradient(30deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), linear-gradient(150deg, #112 12%, transparent 12.5%, transparent 87%, #112 87.5%, #112), linear-gradient(60deg, #334 25%, transparent 25.5%, transparent 75%, #334 75%, #334), linear-gradient(60deg, #334 25%, transparent 25.5%, transparent 75%, #334 75%, #334);
  background-size: 16px 28px;
  background-position: 0 0, 0 0, 8px 14px, 8px 14px, 0 0, 8px 14px;
}
.name-tag[data-name-tag="candy"],
.name-tag-preview[data-name-tag="candy"] {
  background-color: #900 !important;
  background-image: -webkit-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, 0.25) 35px, rgba(255, 255, 255, 0.25) 70px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.25) 35px, rgba(255, 255, 255, 0.25) 70px);
}
.name-tag[data-name-tag="carbonFiber"],
.name-tag-preview[data-name-tag="carbonFiber"] {
  background: -webkit-linear-gradient(63deg, #222222 5px, transparent 5px) 0 5px, -webkit-linear-gradient(243deg, #222222 5px, transparent 5px) 10px 0px, -webkit-linear-gradient(63deg, #2f2f2f 5px, transparent 5px) 0px 10px, -webkit-linear-gradient(243deg, #2f2f2f 5px, transparent 5px) 10px 5px, -webkit-linear-gradient(left, #282828 10px, transparent 10px), -webkit-linear-gradient(#2a2a2a 25%, #272727 25%, #272727 50%, transparent 50%, transparent 75%, #313131 75%, #313131);
  background: linear-gradient(27deg, #222222 5px, transparent 5px) 0 5px, linear-gradient(207deg, #222222 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #2f2f2f 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #2f2f2f 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #282828 10px, transparent 10px), linear-gradient(#2a2a2a 25%, #272727 25%, #272727 50%, transparent 50%, transparent 75%, #313131 75%, #313131);
  background-color: #202020 !important;
  background-size: 20px 20px;
}
.name-tag[data-name-tag="obsidian"],
.name-tag-preview[data-name-tag="obsidian"] {
  background-color: #000 !important;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0.035)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0.065)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, rgba(255, 255, 255, 0.085))), -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, rgba(255, 255, 255, 0.095)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.035) 50%, transparent 50%), -webkit-linear-gradient(left, rgba(255, 255, 255, 0.065) 50%, transparent 50%), -webkit-linear-gradient(left, transparent 50%, rgba(255, 255, 255, 0.085) 50%), -webkit-linear-gradient(left, transparent 50%, rgba(255, 255, 255, 0.095) 50%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.065) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.085) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.095) 50%);
  background-size: 13px, 29px, 37px, 53px;
}
.name-tag[data-name-tag="rainbow"],
.name-tag-preview[data-name-tag="rainbow"] {
  background-image: -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
  background-image: linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
}
.name-tag[data-name-tag="redLeather"],
.name-tag-preview[data-name-tag="redLeather"] {
  background: -webkit-radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, -webkit-radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 15px 15px, -webkit-radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 15px 0, -webkit-radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 15px, -webkit-radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 15px 0, -webkit-radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 30px 15px, -webkit-radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, -webkit-radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 15px 15px, -webkit-linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, -webkit-linear-gradient(135deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 15px 15px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 15px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 15px, radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 15px 0, radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 30px 15px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 15px 15px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background-color: #fff !important;
  background-size: 30px 30px;
}
.name-tag[data-name-tag="scales"],
.name-tag-preview[data-name-tag="scales"] {
  background-color: #222 !important;
  background-image: -webkit-radial-gradient(100% 150%, circle, #222 24%, #444 25%, #444 28%, #222 29%, #222 36%, #444 36%, #444 40%, transparent 40%, transparent), -webkit-radial-gradient(0 150%, circle, #222 24%, #444 25%, #444 28%, #222 29%, #222 36%, #444 36%, #444 40%, transparent 40%, transparent), -webkit-radial-gradient(50% 100%, circle, #444 10%, #222 11%, #222 23%, #444 24%, #444 30%, #222 31%, #222 43%, #444 44%, #444 50%, #222 51%, #222 63%, #444 64%, #444 71%, transparent 71%, transparent), -webkit-radial-gradient(100% 50%, circle, #444 5%, #222 6%, #222 15%, #444 16%, #444 20%, #222 21%, #222 30%, #444 31%, #444 35%, #222 36%, #222 45%, #444 46%, #444 49%, transparent 50%, transparent), -webkit-radial-gradient(0 50%, circle, #444 5%, #222 6%, #222 15%, #444 16%, #444 20%, #222 21%, #222 30%, #444 31%, #444 35%, #222 36%, #222 45%, #444 46%, #444 49%, transparent 50%, transparent);
  background-image: radial-gradient(circle at 100% 150%, #222 24%, #444 25%, #444 28%, #222 29%, #222 36%, #444 36%, #444 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #222 24%, #444 25%, #444 28%, #222 29%, #222 36%, #444 36%, #444 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, #444 10%, #222 11%, #222 23%, #444 24%, #444 30%, #222 31%, #222 43%, #444 44%, #444 50%, #222 51%, #222 63%, #444 64%, #444 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, #444 5%, #222 6%, #222 15%, #444 16%, #444 20%, #222 21%, #222 30%, #444 31%, #444 35%, #222 36%, #222 45%, #444 46%, #444 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, #444 5%, #222 6%, #222 15%, #444 16%, #444 20%, #222 21%, #222 30%, #444 31%, #444 35%, #222 36%, #222 45%, #444 46%, #444 49%, transparent 50%, transparent);
  background-size: 50px 25px;
}
.name-tag[data-name-tag="aurora"],
.name-tag-preview[data-name-tag="aurora"] {
  background-image: url('../image/nametags/aurora.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="blur"],
.name-tag-preview[data-name-tag="blur"] {
  background-image: url('../image/nametags/blur.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="circuit"],
.name-tag-preview[data-name-tag="circuit"] {
  background-image: url('../image/nametags/circuit.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="city"],
.name-tag-preview[data-name-tag="city"] {
  background-image: url('../image/nametags/city.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="clouds"],
.name-tag-preview[data-name-tag="clouds"] {
  background-image: url('../image/nametags/clouds2.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="coral"],
.name-tag-preview[data-name-tag="coral"] {
  background-image: url('../image/nametags/coral.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="cubes"],
.name-tag-preview[data-name-tag="cubes"] {
  background-image: url('../image/nametags/cubes.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="crystal"],
.name-tag-preview[data-name-tag="crystal"] {
  background-image: url('../image/nametags/diamond.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="dots"],
.name-tag-preview[data-name-tag="dots"] {
  background-image: url('../image/nametags/dots.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="drops"],
.name-tag-preview[data-name-tag="drops"] {
  background-image: url('../image/nametags/drops.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="faded"],
.name-tag-preview[data-name-tag="faded"] {
  background-image: url('../image/nametags/fabric1.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="scribble"],
.name-tag-preview[data-name-tag="scribble"] {
  background-image: url('../image/nametags/fabric2.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="fabric"],
.name-tag-preview[data-name-tag="fabric"] {
  background-image: url('../image/nametags/fabric7.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="flowers"],
.name-tag-preview[data-name-tag="flowers"] {
  background-image: url('../image/nametags/flowers.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="food"],
.name-tag-preview[data-name-tag="food"] {
  background-image: url('../image/nametags/food.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="gem"],
.name-tag-preview[data-name-tag="gem"] {
  background-image: url('../image/nametags/gem.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="geometric"],
.name-tag-preview[data-name-tag="geometric"] {
  background-image: url('../image/nametags/geometric.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="knit"],
.name-tag-preview[data-name-tag="knit"] {
  background-image: url('../image/nametags/knit.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="lava"],
.name-tag-preview[data-name-tag="lava"] {
  background-image: url('../image/nametags/lava.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="leaf"],
.name-tag-preview[data-name-tag="leaf"] {
  background-image: url('../image/nametags/leaf.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="lightning"],
.name-tag-preview[data-name-tag="lightning"] {
  background-image: url('../image/nametags/lightning.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="metal"],
.name-tag-preview[data-name-tag="metal"] {
  background-image: url('../image/nametags/metal.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="molten"],
.name-tag-preview[data-name-tag="molten"] {
  background-image: url('../image/nametags/molten.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="money"],
.name-tag-preview[data-name-tag="money"] {
  background-image: url('../image/nametags/money.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="moon"],
.name-tag-preview[data-name-tag="moon"] {
  background-image: url('../image/nametags/moon.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="nebula"],
.name-tag-preview[data-name-tag="nebula"] {
  background-image: url('../image/nametags/nebula.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="oil"],
.name-tag-preview[data-name-tag="oil"] {
  background-image: url('../image/nametags/oil.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="paper"],
.name-tag-preview[data-name-tag="paper"] {
  background-image: url('../image/nametags/paper.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="plaid"],
.name-tag-preview[data-name-tag="plaid"] {
  background-image: url('../image/nametags/plaid.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="rose"],
.name-tag-preview[data-name-tag="rose"] {
  background-image: url('../image/nametags/rose.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="rust"],
.name-tag-preview[data-name-tag="rust"] {
  background-image: url('../image/nametags/rust.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="satin"],
.name-tag-preview[data-name-tag="satin"] {
  background-image: url('../image/nametags/satin.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="sequin"],
.name-tag-preview[data-name-tag="sequin"] {
  background-image: url('../image/nametags/sequin.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="shatter"],
.name-tag-preview[data-name-tag="shatter"] {
  background-image: url('../image/nametags/shatter.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="silk"],
.name-tag-preview[data-name-tag="silk"] {
  background-image: url('../image/nametags/silk.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="snake"],
.name-tag-preview[data-name-tag="snake"] {
  background-image: url('../image/nametags/snake.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="space"],
.name-tag-preview[data-name-tag="space"] {
  background-image: url('../image/nametags/space.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="steel"],
.name-tag-preview[data-name-tag="steel"] {
  background-image: url('../image/nametags/steel.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="stones"],
.name-tag-preview[data-name-tag="stones"] {
  background-image: url('../image/nametags/stones.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="swirl"],
.name-tag-preview[data-name-tag="swirl"] {
  background-image: url('../image/nametags/swirl.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="vines"],
.name-tag-preview[data-name-tag="vines"] {
  background-image: url('../image/nametags/vines.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="water"],
.name-tag-preview[data-name-tag="water"] {
  background-image: url('../image/nametags/water.jpg');
  background-size: cover;
  background-position: center;
}
.name-tag[data-name-tag="wood"],
.name-tag-preview[data-name-tag="wood"] {
  background-image: url('../image/nametags/wood.jpg');
  background-size: cover;
  background-position: center;
}
#menu #payment label {
  display: block;
  margin-bottom: 8px;
}
#menu #payment label[hidden] {
  display: none;
}
#menu #payment .order-details {
  padding-left: 0;
}
#menu #payment .order-details li {
  display: block;
  font-weight: 500;
  padding: 4px 0;
}
#menu #payment .order-details li:last-child {
  border-top: 1px solid;
  border-top-color: rgba(0, 90, 0, 0.5);
  margin-top: 8px;
  padding-top: 8px;
}
body[data-board-color="blue"] #menu #payment .order-details li:last-child {
  border-top-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu #payment .order-details li:last-child {
  border-top-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu #payment .order-details li:last-child {
  border-top-color: rgba(75, 75, 75, 0.5);
}
#menu #payment .order-details li span:last-child {
  float: right;
  font-weight: normal;
}
#menu #payment .order-details li .total {
  font-weight: 500;
}
#menu #payment .billing .actions {
  margin-top: 16px;
}
#menu #payment .stripe-payment-request {
  margin: 8px 0;
}
#menu #payment .payment-divider {
  margin: 20px 0;
  position: relative;
}
#menu #payment .payment-divider span {
  background-color: #e6ece6;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -55%);
          transform: translate(-50%, -55%);
  background-color: #E6ECE6;
  padding: 0 8px;
}
body[data-board-color="blue"] #menu #payment .payment-divider span {
  background-color: #e7eaee;
}
body[data-board-color="red"] #menu #payment .payment-divider span {
  background-color: #f1e7e7;
}
body[data-board-color="charcoal"] #menu #payment .payment-divider span {
  background-color: #ebebeb;
}
body[data-board-color="black"] #menu #payment .payment-divider span {
  background-color: black;
}
body[data-board-color="white"] #menu #payment .payment-divider span {
  background-color: white;
}
#menu #payment .payment-divider hr {
  border-color: rgba(0, 90, 0, 0.5);
  border-width: 1px;
  border-style: solid;
  border-bottom: none;
}
body[data-board-color="blue"] #menu #payment .payment-divider hr {
  border-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu #payment .payment-divider hr {
  border-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu #payment .payment-divider hr {
  border-color: rgba(75, 75, 75, 0.5);
}
#menu #payment .card-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#menu #payment .card-group label {
  width: 50%;
}
#menu #payment .card-group label:first-child {
  padding-right: 8px;
}
#menu #payment .card-name-wrapper {
  margin-top: 8px;
}
#menu #payment .actions button {
  width: 48%;
}
#menu #payment .actions button:last-child {
  float: right;
}
#menu #payment .fineprint {
  margin-top: 20px;
}
#menu #payment .fineprint a.powered-by {
  display: block;
  margin-top: 12px;
  text-align: center;
}
#menu #payment .fineprint a.powered-by img {
  border: none;
}
.reveal-melds {
  background-color: #003400;
  border-radius: 9px;
  min-width: 400px;
  height: 340px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.5;
  opacity: 1;
  text-align: center;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  visibility: visible;
}
body[data-board-color="blue"] .reveal-melds {
  background-color: #062347;
}
body[data-board-color="red"] .reveal-melds {
  background-color: #730e0e;
}
body[data-board-color="charcoal"] .reveal-melds {
  background-color: #323232;
}
.reveal-melds[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
.reveal-melds:before {
  content: "";
  display: block;
  background-color: #003400;
  position: absolute;
  width: 50px;
  height: 50px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
body[data-board-color="blue"] .reveal-melds:before {
  background-color: #062347;
}
body[data-board-color="red"] .reveal-melds:before {
  background-color: #730e0e;
}
body[data-board-color="charcoal"] .reveal-melds:before {
  background-color: #323232;
}
[data-side="Top"].reveal-melds:before {
  top: 1px;
  left: 50%;
}
[data-side="Left"].reveal-melds:before {
  left: 1px;
  top: 66%;
}
[data-side="Right"].reveal-melds:before {
  right: 1px;
  top: 66%;
  -webkit-transform: translate(50%, -50%) rotate(45deg);
          transform: translate(50%, -50%) rotate(45deg);
}
[data-side="Bottom"].reveal-melds:before {
  bottom: 1px;
  left: 50%;
  -webkit-transform: translate(-50%, 50%) rotate(45deg);
          transform: translate(-50%, 50%) rotate(45deg);
}
.reveal-melds .what {
  position: relative;
}
.reveal-melds .summary {
  display: block;
  position: absolute;
  bottom: 4px;
  left: 10px;
  right: 10px;
  text-align: left;
}
.reveal-melds .summary .who {
  display: inline-block;
  max-width: 250px;
}
.reveal-melds .summary .total {
  float: right;
}
@-webkit-keyframes show-bid {
  0% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes show-bid {
  0% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.player .state {
  bottom: 85%;
  font-size: 12px;
  left: 50%;
  line-height: 1;
  opacity: 0.7;
  position: absolute;
  text-transform: uppercase;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.clamped.player .state {
  bottom: -10%;
}
.flipped.player .state {
  bottom: -15%;
}
.clamped.flipped.player .state {
  bottom: 75%;
}
.player .suit {
  font-family: card-pips, sans-serif !important;
  font-weight: normal !important;
}
.player .fan {
  height: 35px;
  left: 0;
  position: absolute;
  top: 0;
  width: 250px;
}
.player.revealed .fan {
  display: none;
}
.player .info {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 5px;
  color: #fff;
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-weight: 500;
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-size: 20px;
  left: 0;
  line-height: 1.1;
  min-width: 150px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  white-space: nowrap;
}
.player .info.clickable {
  cursor: pointer;
}
.player .info.clickable:hover .name-tag:after {
  background-color: rgba(255, 255, 255, 0.2);
}
.player .info.clickable:hover .text {
  opacity: 1 !important;
}
.player .info .name-tag:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  border: 1px solid transparent;
}
.player .info .text {
  line-height: 25px;
  position: relative;
  padding: 8px 10px 10px;
  opacity: 0.5;
}
.player .info .name-tag:not([data-name-tag="none"]):after {
  border-color: #000;
}
.player .info .name-tag:not([data-name-tag="none"]) + .text {
  opacity: 0.75;
}
.started.player.current .info .name-tag:not([data-name-tag="none"]):after {
  border: 2px solid #fff;
}
.player.current .info .text {
  opacity: 1 !important;
}
.player .status.fa {
  display: none;
  margin-right: 0.4em;
}
.player .status.fa[class*=fa-],
.player .status.fa.icon-badge {
  display: inline-block;
  margin-top: -10px;
}
.player .status.fa.fa-hourglass-end {
  margin-right: 0.3em;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}
.player .name,
.player .hand-score,
.player .expected-score,
.player .bid {
  vertical-align: bottom;
}
.player .name {
  max-width: 250px;
}
.player .name .unique-name-text {
  margin-bottom: -4px;
  padding-bottom: 4px;
}
.player .hand-score:before,
.player .hand-score[hidden] + .expected-score:before {
  content: "\00A0\2022\00A0";
}
.player .expected-score:before {
  content: "/";
}
body[data-game-code="Bridge"] .player .hand-score[hidden] + .expected-score,
body[data-game-code="FiveHundred"] .player .hand-score[hidden] + .expected-score,
body[data-game-code="Pitch"] .player .hand-score[hidden] + .expected-score,
body[data-game-code="Whist"] .player .hand-score[hidden] + .expected-score {
  display: none;
}
.player .bid[data-type="number"]:before {
  content: "\00A0\2022\00A0";
}
.player .bid[data-type="trump"] {
  display: none;
}
.is-face-up.player .bid[data-type="trump"],
.revealed.player .bid[data-type="trump"] {
  display: inline-block;
}
.player .bid[data-type="text"],
.player .bid[data-type="trump"] {
  background-color: #fff6cc;
  border: 1px solid #333;
  border-radius: 5px;
  color: #000;
  font-size: 90%;
  line-height: 23px;
  margin-left: 8px;
  padding: 0 4px;
  text-shadow: none;
}
.player .bid[data-type="text"][data-text="Pass"],
.player .bid[data-type="trump"][data-text="Pass"] {
  background-color: #008000;
  border: 1px solid #fff;
  color: #fff;
}
.player .bid[data-type="text"][data-text$="Misère"],
.player .bid[data-type="trump"][data-text$="Misère"],
.player .bid[data-type="text"][data-text$="Nil"],
.player .bid[data-type="trump"][data-text$="Nil"],
.player .bid[data-type="text"][data-text$="Nullo"],
.player .bid[data-type="trump"][data-text$="Nullo"] {
  background-color: #0066ff;
  border: 1px solid #fff;
  color: #fff;
}
.player .bid.special:after {
  background-color: #0066ff;
  color: #fff;
  content: attr(data-special);
  border-radius: 10px;
  font-size: 12px;
  padding: 1px 4px 2px;
  margin-left: 2px;
  position: relative;
  top: -1px;
}
.player .options {
  display: none;
}
.player .trump {
  background-color: #fff6cc;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 2px #000;
          box-shadow: 0px 0px 2px #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-size: 18px;
  font-weight: 500;
  height: 50px;
  left: 0;
  line-height: 50px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 50px;
  z-index: 1;
}
.player .trump[data-size="1"],
.player .trump[data-size="2"],
.player .trump[data-size="3"],
.player .trump[data-size="4"] {
  font-size: 30px;
  line-height: 46px;
}
.player .trump[data-size="3"],
.player .trump[data-size="4"] {
  font-size: 24px;
}
.player .trump[data-double] span {
  position: relative;
  top: -10px;
}
.player .trump[data-double]::after {
  content: attr(data-double);
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 24px;
  line-height: 24px;
}
.is-face-up.player .trump,
.revealed.player .trump {
  display: none;
}
.bridge-before-first-card.player .trump:not([hidden]) {
  display: block;
}
.player .trump:not(.with-arrow) .notrump:first-child {
  font-size: 32px;
  position: relative;
  top: -6px;
}
.player .trump .notrump:first-child:last-child {
  top: 0;
}
.player .trump .notrump:first-child + span,
.player .trump .notrump:first-child + .arrow + span {
  bottom: 2px;
  font-size: 16px;
  display: block;
  left: 0;
  line-height: 1;
  position: absolute;
  right: 0;
}
.player .trump .suit {
  font-size: 110%;
  position: relative;
}
.player .trump .suit:first-child {
  font-size: 44px;
  top: -6px;
}
.player .trump .suit:first-child:last-child {
  font-size: 48px;
  top: 0;
}
.player .trump .suit + span {
  bottom: 2px;
  display: block;
  left: 0;
  line-height: 1;
  position: absolute;
  right: 0;
}
body[data-game-code="Whist"] .player .trump.with-arrow {
  font-size: 24px;
  line-height: 26px;
}
body[data-game-code="Whist"] .player .trump.with-arrow .suit {
  line-height: 26px;
}
body[data-game-code="Whist"] .player .trump.with-arrow .arrow:last-child {
  display: block;
  position: relative;
  top: -4px;
}
body[data-game-code="Euchre"] .player .trump.with-arrow[data-suit="Unknown"] .notrump {
  font-size: 50%;
  position: relative;
  top: -0.75em;
}
body[data-game-code="Euchre"] .player .trump.with-arrow[data-suit="Unknown"] .notrump + .arrow {
  font-size: 45%;
  margin-left: -1em;
  position: relative;
  left: -0.2em;
}
body[data-game-code="Euchre"] .player .trump.with-arrow[data-suit="Unknown"][data-text^="NT"] .notrump {
  font-size: 100%;
}
body[data-game-code="Euchre"] .player .trump.with-arrow[data-suit="Unknown"][data-text^="NT"] .arrow {
  font-size: 90%;
}
.player .trump.special {
  line-height: 30px;
}
.player .trump.special:after {
  background-color: #0066ff;
  border-radius: 10px;
  color: #fff;
  content: attr(data-special);
  font-size: 12px;
  display: block;
  position: absolute;
  bottom: 3px;
  left: 2px;
  right: 2px;
  line-height: 18px;
  letter-spacing: normal;
}
.player .bids-overlay {
  left: 0;
  position: absolute;
  top: 0;
}
[data-side="Top"].player .bids-overlay,
[data-side="Left"].player .bids-overlay,
[data-side="Right"].player .bids-overlay,
[data-side="TopLeft"].player .bids-overlay,
[data-side="TopRight"].player .bids-overlay,
.show-bid-history.player .bids-overlay {
  z-index: 1;
}
.is-face-up:not(.show-bid-history).player .bids-overlay,
.revealed:not(.show-bid-history).player .bids-overlay {
  z-index: 0;
}
.player .bids-overlay .item {
  color: #000;
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-size: 14px;
  font-weight: 500;
  height: 102px;
  left: -51px;
  letter-spacing: -1px;
  line-height: 46px;
  position: absolute;
  text-align: center;
  top: -51px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 102px;
}
.player .bids-overlay .item .wrapper {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 9px;
  -webkit-box-shadow: -2px -2px 6px 2px rgba(0, 0, 0, 0.4);
          box-shadow: -2px -2px 6px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.player .bids-overlay .item .wrapper.new {
  -webkit-animation: show-bid 0.3s;
          animation: show-bid 0.3s;
}
.player .bids-overlay .item .wrapper .content {
  height: 50px;
  left: 0;
  position: absolute;
  top: 0;
  width: 50px;
}
body[data-game-code="Pitch"] .player .bids-overlay .item .wrapper .content,
body[data-game-code="Whist"] .player .bids-overlay .item .wrapper .content {
  left: 25px;
}
.player .bids-overlay .item .wrapper .content span {
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}
[data-side="Left"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
[data-side="Right"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
[data-side="Top"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
[data-side="TopLeft"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body[data-full-table-portrait] [data-side="TopLeft"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
[data-side="TopRight"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body[data-full-table-portrait] [data-side="TopRight"].player .bids-overlay .item .wrapper .content {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.player .bids-overlay .item[data-text="Pass"] .wrapper {
  background-color: #008000;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  letter-spacing: 0;
}
.player .bids-overlay .item[data-text="Pass with Help"] .wrapper {
  background-color: #0066ff;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  letter-spacing: 0;
}
.player .bids-overlay .item[data-text="Pass with Help"] .content {
  line-height: 1;
}
.player .bids-overlay .item[data-text="Pass with Help"] .content:before {
  content: "Pass";
  display: block;
  font-size: 18px;
  padding-top: 7px;
}
.player .bids-overlay .item[data-text="Pass with Help"] .content:after {
  content: "w/ Help";
  font-size: 11px;
}
.player .bids-overlay .item[data-text="Pass with Help"] .content span {
  display: none;
}
.player .bids-overlay .item[data-text="X"] .wrapper {
  background-color: #cd0000;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  letter-spacing: 0;
}
.player .bids-overlay .item[data-text="XX"] .wrapper {
  background-color: #323232;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  letter-spacing: 0;
}
.player .bids-overlay .item.with-arrow[data-suit="Unknown"] .notrump {
  font-size: 50%;
  position: relative;
  top: -0.75em;
}
.player .bids-overlay .item.with-arrow[data-suit="Unknown"] .notrump + .arrow {
  font-size: 45%;
  margin-left: -1.1em;
}
.player .bids-overlay .item .content.special {
  font-size: 24px;
  line-height: 30px;
}
.player .bids-overlay .item .content.special .suit {
  font-size: 28px;
}
.player .bids-overlay .item .content.special:after {
  background-color: #0066ff;
  border-radius: 10px;
  color: #fff;
  content: attr(data-special);
  font-size: 12px;
  display: block;
  position: absolute;
  bottom: 4px;
  left: 2px;
  right: 2px;
  line-height: 18px;
  letter-spacing: normal;
}
.player .bids-overlay .item[data-text="Alone"] .wrapper,
.player .bids-overlay .item[data-text="Call 1"] .wrapper,
.player .bids-overlay .item[data-text="Call 2"] .wrapper,
.player .bids-overlay .item[data-text$="Shoot"] .wrapper,
.player .bids-overlay .item[data-text$="Misère"] .wrapper,
.player .bids-overlay .item[data-text$="Nullo"] .wrapper {
  background-color: #0066ff;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  letter-spacing: 0;
}
.player .bids-overlay .item[data-text="Alone"] .suit,
.player .bids-overlay .item[data-text="Call 1"] .suit,
.player .bids-overlay .item[data-text="Call 2"] .suit,
.player .bids-overlay .item[data-text$="Shoot"] .suit,
.player .bids-overlay .item[data-text$="Misère"] .suit,
.player .bids-overlay .item[data-text$="Nullo"] .suit {
  display: none !important;
}
.player .bids-overlay .item[data-size="1"],
.player .bids-overlay .item[data-size="2"],
.player .bids-overlay .item[data-size="3"],
.player .bids-overlay .item[data-size="4"] {
  font-size: 30px;
}
.player .bids-overlay .item[data-size="1"] .wrapper .content span,
.player .bids-overlay .item[data-size="2"] .wrapper .content span,
.player .bids-overlay .item[data-size="3"] .wrapper .content span,
.player .bids-overlay .item[data-size="4"] .wrapper .content span {
  display: inline;
  vertical-align: baseline;
}
.player .bids-overlay .item[data-size="3"][data-suit=""] {
  font-size: 28px;
}
.player .bids-overlay .item[data-size="4"] {
  font-size: 18px;
}
.player .bids-overlay .item[data-size="4"][data-alldigits="true"] {
  font-size: 21px;
}
.player .bids-overlay .item[data-size="4"][data-suit="Unknown"] {
  font-size: 24px;
}
.player .score {
  font-size: 40px;
  left: 0;
  letter-spacing: -1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.player .score:after {
  content: attr(data-value);
}
.player .score::first-letter {
  margin-right: -2px;
}
.player .score.animate {
  -webkit-animation: fade-in-out 1.5s;
          animation: fade-in-out 1.5s;
}
@-webkit-keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.player .hand-evaluation {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  visibility: visible;
  z-index: 1;
}
.player .hand-evaluation .wrapper {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 9px 9px 0 0;
  color: #fff;
  font-size: 18px;
  min-width: 80px;
  overflow: hidden;
  padding: 4px 8px;
  text-align: center;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
[data-side="Top"].player .hand-evaluation .wrapper .value {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.player .hand-evaluation .wrapper.suits {
  padding: 0;
}
@media (max-width: 479px), (max-height: 479px) {
  .player .hand-evaluation .wrapper {
    font-size: 14px;
  }
}
.player .hand-evaluation .wrapper .summary {
  cursor: pointer;
  display: inline-block;
  padding: 6px 8px;
}
.player .hand-evaluation .wrapper .summary.suit {
  color: white !important;
}
.player .hand-evaluation .wrapper .summary:hover {
  background-color: #555;
}
.player .hand-evaluation .wrapper .summary:not(.selected) {
  color: inherit;
}
.player .hand-evaluation .wrapper .summary.selected {
  background-color: #fff;
  color: black !important;
}
.player .hand-evaluation .wrapper .summary i {
  margin-left: 0.15em;
}
.player .hand-evaluation[hidden] {
  display: block;
  -webkit-transition-property: visibility;
  transition-property: visibility;
  visibility: hidden;
}
.player .hand-evaluation[hidden] .wrapper {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
@media (max-width: 479px), (max-height: 479px) {
  [data-side="Top"].player .hand-evaluation .wrapper,
  [data-side="Left"].player .hand-evaluation .wrapper,
  [data-side="Right"].player .hand-evaluation .wrapper,
  [data-side="TopLeft"].player .hand-evaluation .wrapper,
  [data-side="TopRight"].player .hand-evaluation .wrapper {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.prompt-with-options[data-side="top"] .tail {
  background-color: #c5e0c5;
}
body[data-board-color="blue"] .prompt-with-options[data-side="top"] .tail {
  background-color: #e2e5e9;
}
body[data-board-color="red"] .prompt-with-options[data-side="top"] .tail {
  background-color: #ffffff;
}
body[data-board-color="charcoal"] .prompt-with-options[data-side="top"] .tail {
  background-color: #f1f1f1;
}
body[data-board-color="black"] .prompt-with-options[data-side="top"] .tail {
  background-color: black;
}
body[data-board-color="white"] .prompt-with-options[data-side="top"] .tail {
  background-color: white;
}
.prompt {
  padding: 0 !important;
  text-align: center;
}
.prompt .message {
  line-height: 1.5em;
}
.prompt .actions,
.prompt .message {
  margin: 16px 0;
  padding: 0 16px;
}
.prompt .actions.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.prompt .actions.flex button {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
}
.prompt .options label {
  background-color: #c5e0c5;
  display: block;
  padding: 8px;
}
body[data-board-color="blue"] .prompt .options label {
  background-color: #e2e5e9;
}
body[data-board-color="red"] .prompt .options label {
  background-color: #ffffff;
}
body[data-board-color="charcoal"] .prompt .options label {
  background-color: #f1f1f1;
}
body[data-board-color="black"] .prompt .options label {
  background-color: black;
}
body[data-board-color="white"] .prompt .options label {
  background-color: white;
}
.prompt input[type=checkbox] {
  border-color: #005a00;
  border-width: 1px;
  border-style: solid;
  width: 18px;
  height: 18px;
  position: relative;
  top: 3px;
  margin: 0;
  margin-right: 0.5em;
}
body[data-board-color="blue"] .prompt input[type=checkbox] {
  border-color: #0a3b76;
}
body[data-board-color="red"] .prompt input[type=checkbox] {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .prompt input[type=checkbox] {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .prompt input[type=checkbox] {
  border-color: black;
}
body[data-board-color="white"] .prompt input[type=checkbox] {
  border-color: white;
}
.popup {
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  opacity: 1;
  position: absolute;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  z-index: 0;
}
.popup[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
.popup > .tail {
  background-color: inherit;
  border: inherit;
  position: absolute;
}
.popup > .tail:after {
  background-color: inherit;
  border: inherit;
  -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.5);
  content: "";
  display: block;
  height: 15px;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  width: 15px;
}
[data-side="bottom"].popup > .tail {
  top: 1px;
  left: 50%;
}
[data-side="left"].popup > .tail {
  right: 1px;
  top: 50%;
}
[data-side="right"].popup > .tail {
  left: 1px;
  top: 50%;
}
[data-side="top"].popup > .tail {
  left: 50%;
  bottom: 1px;
}
.popup > .content {
  background-color: inherit;
  border-radius: 2px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.popup > .content a[href],
.popup > .content > .wrapper a[href] {
  color: #005a00;
  text-decoration: underline;
}
body[data-board-color="blue"] .popup > .content a[href],
body[data-board-color="blue"] .popup > .content > .wrapper a[href] {
  color: #0a3b76;
}
body[data-board-color="red"] .popup > .content a[href],
body[data-board-color="red"] .popup > .content > .wrapper a[href] {
  color: #a01414;
}
body[data-board-color="charcoal"] .popup > .content a[href],
body[data-board-color="charcoal"] .popup > .content > .wrapper a[href] {
  color: #4b4b4b;
}
body[data-board-color="black"] .popup > .content a[href],
body[data-board-color="black"] .popup > .content > .wrapper a[href] {
  color: black;
}
body[data-board-color="white"] .popup > .content a[href],
body[data-board-color="white"] .popup > .content > .wrapper a[href] {
  color: white;
}
.popup > .content > div:not(.wrapper),
.popup > .content > .wrapper > div:not(.wrapper) {
  padding: 4px 12px 6px;
}
.popup > .content > ul,
.popup > .content > .wrapper > ul {
  margin: 0;
  padding: 0;
}
.popup > .content > ul > li,
.popup > .content > .wrapper > ul > li {
  display: block;
}
.popup > .content > ul > li.text,
.popup > .content > .wrapper > ul > li.text {
  padding: 8px 8px 0;
  text-align: center;
}
.popup > .content > ul > li[hidden],
.popup > .content > .wrapper > ul > li[hidden] {
  display: none;
}
.popup > .content > ul > li > button,
.popup > .content > .wrapper > ul > li > button,
.popup > .content > ul > li > .button,
.popup > .content > .wrapper > ul > li > .button {
  background-color: transparent;
  border: none;
  color: #005a00;
  height: 40px;
  min-width: 120px;
  padding: 12px 12px 10px;
  text-align: left;
  width: 100%;
}
body[data-board-color="blue"] .popup > .content > ul > li > button,
body[data-board-color="blue"] .popup > .content > .wrapper > ul > li > button,
body[data-board-color="blue"] .popup > .content > ul > li > .button,
body[data-board-color="blue"] .popup > .content > .wrapper > ul > li > .button {
  color: #0a3b76;
}
body[data-board-color="red"] .popup > .content > ul > li > button,
body[data-board-color="red"] .popup > .content > .wrapper > ul > li > button,
body[data-board-color="red"] .popup > .content > ul > li > .button,
body[data-board-color="red"] .popup > .content > .wrapper > ul > li > .button {
  color: #a01414;
}
body[data-board-color="charcoal"] .popup > .content > ul > li > button,
body[data-board-color="charcoal"] .popup > .content > .wrapper > ul > li > button,
body[data-board-color="charcoal"] .popup > .content > ul > li > .button,
body[data-board-color="charcoal"] .popup > .content > .wrapper > ul > li > .button {
  color: #4b4b4b;
}
body[data-board-color="black"] .popup > .content > ul > li > button,
body[data-board-color="black"] .popup > .content > .wrapper > ul > li > button,
body[data-board-color="black"] .popup > .content > ul > li > .button,
body[data-board-color="black"] .popup > .content > .wrapper > ul > li > .button {
  color: black;
}
body[data-board-color="white"] .popup > .content > ul > li > button,
body[data-board-color="white"] .popup > .content > .wrapper > ul > li > button,
body[data-board-color="white"] .popup > .content > ul > li > .button,
body[data-board-color="white"] .popup > .content > .wrapper > ul > li > .button {
  color: white;
}
.popup > .content > ul > li > button:hover:not(:disabled),
.popup > .content > .wrapper > ul > li > button:hover:not(:disabled),
.popup > .content > ul > li > .button:hover:not(:disabled),
.popup > .content > .wrapper > ul > li > .button:hover:not(:disabled) {
  background-color: #8bce8b;
}
body[data-board-color="blue"] .popup > .content > ul > li > button:hover:not(:disabled),
body[data-board-color="blue"] .popup > .content > .wrapper > ul > li > button:hover:not(:disabled),
body[data-board-color="blue"] .popup > .content > ul > li > .button:hover:not(:disabled),
body[data-board-color="blue"] .popup > .content > .wrapper > ul > li > .button:hover:not(:disabled) {
  background-color: #b0becf;
}
body[data-board-color="red"] .popup > .content > ul > li > button:hover:not(:disabled),
body[data-board-color="red"] .popup > .content > .wrapper > ul > li > button:hover:not(:disabled),
body[data-board-color="red"] .popup > .content > ul > li > .button:hover:not(:disabled),
body[data-board-color="red"] .popup > .content > .wrapper > ul > li > .button:hover:not(:disabled) {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .popup > .content > ul > li > button:hover:not(:disabled),
body[data-board-color="charcoal"] .popup > .content > .wrapper > ul > li > button:hover:not(:disabled),
body[data-board-color="charcoal"] .popup > .content > ul > li > .button:hover:not(:disabled),
body[data-board-color="charcoal"] .popup > .content > .wrapper > ul > li > .button:hover:not(:disabled) {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .popup > .content > ul > li > button:hover:not(:disabled),
body[data-board-color="black"] .popup > .content > .wrapper > ul > li > button:hover:not(:disabled),
body[data-board-color="black"] .popup > .content > ul > li > .button:hover:not(:disabled),
body[data-board-color="black"] .popup > .content > .wrapper > ul > li > .button:hover:not(:disabled) {
  background-color: black;
}
body[data-board-color="white"] .popup > .content > ul > li > button:hover:not(:disabled),
body[data-board-color="white"] .popup > .content > .wrapper > ul > li > button:hover:not(:disabled),
body[data-board-color="white"] .popup > .content > ul > li > .button:hover:not(:disabled),
body[data-board-color="white"] .popup > .content > .wrapper > ul > li > .button:hover:not(:disabled) {
  background-color: white;
}
.popup > .content > ul > li > button > span.fa,
.popup > .content > .wrapper > ul > li > button > span.fa,
.popup > .content > ul > li > .button > span.fa,
.popup > .content > .wrapper > ul > li > .button > span.fa {
  margin-right: 10px;
}
#replay {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-size: 14px;
  left: 0;
  max-width: 400px;
  overflow: hidden;
  padding: 0 8px;
  position: absolute;
  top: 0;
  width: 90%;
}
#replay .controls {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#replay .controls button {
  border: none;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  min-width: 40px;
  padding: 0;
}
@media (max-width: 340px) {
  #replay .controls button {
    min-width: 0;
  }
}
#replay .controls .blank {
  width: 40px;
}
#replay .controls .speed {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  height: 28px;
  width: 40px;
}
#replay .controls .speed:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
#replay .controls .speed option {
  background-color: #000;
  color: #fff;
}
#replay .status {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  gap: 8px;
  margin-top: -6px;
}
#replay .status .track {
  cursor: pointer;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 5px;
  padding-bottom: 5px;
}
#replay .status .gutter {
  background-color: #333;
  border-radius: 4px;
}
#replay .status .progress {
  background-color: #008d00;
  border-radius: 4px;
  height: 4px;
  width: 50%;
}
body[data-board-color="blue"] #replay .status .progress {
  background-color: #105ebd;
}
body[data-board-color="red"] #replay .status .progress {
  background-color: #d61b1b;
}
body[data-board-color="charcoal"] #replay .status .progress {
  background-color: #717171;
}
#replay .status .time-elapsed,
#replay .status .time-duration {
  padding-bottom: 2px;
}
#individual-score-summary {
  text-align: right;
}
#individual-score-summary .label .name {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
#individual-score-summary .label:after {
  content: ": ";
}
#scorecard {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #f0ecc5;
  color: #333333;
  height: auto;
  max-width: 100%;
  left: 50%;
  opacity: 1;
  padding: 4px 8px;
  position: absolute;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  visibility: visible;
  width: auto;
  z-index: 1;
}
#scorecard[data-font="fontA"] {
  font-family: "Quickpen", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1em;
}
#scorecard[data-font="fontA"] thead,
#scorecard[data-font="fontA"] tbody:not(.message) {
  -webkit-font-feature-settings: "calt", "fina", "kern", "liga";
          font-feature-settings: "calt", "fina", "kern", "liga";
}
#scorecard[data-font="fontA"] thead th,
#scorecard[data-font="fontA"] tbody:not(.message) th {
  line-height: 1.2em;
}
#scorecard[data-font="fontB"] {
  font-family: "Tough Dude", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 26px;
  line-height: 0.84615385em;
}
#scorecard[data-font="fontB"] thead,
#scorecard[data-font="fontB"] tbody:not(.message) {
  -webkit-font-feature-settings: "kern", "liga";
          font-feature-settings: "kern", "liga";
}
#scorecard[data-font="fontB"] thead th,
#scorecard[data-font="fontB"] tbody:not(.message) th {
  line-height: 0.92307692em;
}
#scorecard[data-font="fontC"] {
  font-family: "Sharpie", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 22px;
  line-height: 1em;
}
#scorecard[data-font="fontC"] thead,
#scorecard[data-font="fontC"] tbody:not(.message) {
  -webkit-font-feature-settings: "cpsp", "dlig", "frac", "kern", "liga";
          font-feature-settings: "cpsp", "dlig", "frac", "kern", "liga";
}
#scorecard[data-font="fontC"] thead th,
#scorecard[data-font="fontC"] tbody:not(.message) th {
  line-height: 1.09090909em;
}
#scorecard[data-font="fontD"] {
  background-color: #333333;
  color: #f0ecc5;
  font-family: "Scoreboard", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1em;
  letter-spacing: 2px;
}
#scorecard[data-font="fontD"] thead th,
#scorecard[data-font="fontD"] tbody:not(.message) th {
  line-height: 1.2em;
}
@media (min-width: 768px), (min-height: 768px) {
  #scorecard {
    -webkit-box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.5);
            box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  }
}
@media (max-height: 320px) {
  #scorecard {
    top: 50%;
  }
}
#scorecard[hidden] {
  display: block;
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  -webkit-transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, transform, visibility;
  transition-property: opacity, transform, visibility, -webkit-transform;
  visibility: hidden;
}
@media (max-height: 320px) {
  #scorecard[hidden] {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
#scorecard table {
  border-spacing: 0;
  height: 250px;
  min-width: 300px;
  table-layout: fixed;
  text-align: center;
}
@media (min-height: 600px) {
  [data-bridge-layout="true"]#scorecard table {
    height: 500px;
  }
}
#scorecard table tr,
#scorecard table th,
#scorecard table td {
  height: 1px;
}
#scorecard table tbody.bridge,
#scorecard table tbody.gap,
#scorecard table tbody.message {
  height: 0;
}
#scorecard table tr.gap {
  height: 4px;
}
#scorecard table tr.gap td {
  border-left: none !important;
  padding: 0 !important;
}
[data-font="fontD"]#scorecard table tr.first,
[data-font="fontD"]#scorecard table tr.first td {
  height: 2px;
}
#scorecard table thead th,
#scorecard table tbody:not(.message) th {
  font-weight: normal;
  padding: 4px;
  position: relative;
  vertical-align: bottom;
  width: 25%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#scorecard table thead th:after,
#scorecard table tbody:not(.message) th:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
[data-font="fontD"]#scorecard table thead th:after,
[data-font="fontD"]#scorecard table tbody:not(.message) th:after {
  border-bottom: 1px dotted rgba(240, 236, 197, 0.85);
}
[data-bridge-layout="true"]#scorecard table thead th,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead th,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) th {
  border-bottom-color: rgba(240, 236, 197, 0.85);
}
[data-bridge-layout="true"]#scorecard table thead th:after,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) th:after {
  display: none;
}
[data-bridge-layout="true"]#scorecard table thead th:last-child,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) th:last-child {
  border-left: 2px solid rgba(0, 0, 0, 0.5);
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead th:last-child,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) th:last-child {
  border-left-color: rgba(240, 236, 197, 0.65);
}
#scorecard table thead th span,
#scorecard table tbody:not(.message) th span {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  max-width: 300px;
  white-space: nowrap;
}
#scorecard table thead th span:only-child,
#scorecard table tbody:not(.message) th span:only-child {
  max-width: 200px;
}
.adjust-font-y[data-font="fontA"]#scorecard table thead th span,
.adjust-font-y[data-font="fontA"]#scorecard table tbody:not(.message) th span,
.adjust-font-y[data-font="fontB"]#scorecard table thead th span,
.adjust-font-y[data-font="fontB"]#scorecard table tbody:not(.message) th span {
  position: relative;
  top: 7px;
}
.adjust-font-y[data-font="fontC"]#scorecard table thead th span,
.adjust-font-y[data-font="fontC"]#scorecard table tbody:not(.message) th span {
  position: relative;
  top: 3px;
}
@media (max-width: 767px), (max-height: 767px) {
  #scorecard table thead th span,
  #scorecard table tbody:not(.message) th span {
    max-width: 160px;
  }
  #scorecard table thead th span:only-child,
  #scorecard table tbody:not(.message) th span:only-child {
    max-width: 120px;
  }
}
#scorecard table thead td,
#scorecard table tbody:not(.message) td {
  padding: 0;
  vertical-align: baseline;
  text-align: center;
}
[data-bridge-layout="true"]#scorecard table thead td:last-child,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) td:last-child {
  border-left: 2px solid rgba(0, 0, 0, 0.5);
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead td:last-child,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) td:last-child {
  border-left-color: rgba(240, 236, 197, 0.65);
}
#scorecard table thead td.new,
#scorecard table tbody:not(.message) td.new {
  color: #000;
  font-weight: bold;
}
[data-font="fontD"]#scorecard table thead td.new,
[data-font="fontD"]#scorecard table tbody:not(.message) td.new {
  color: #f0ecc5;
  font-weight: normal;
}
#scorecard table thead td div,
#scorecard table tbody:not(.message) td div {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCiAgICA8bGluZSBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiAjMzMzOyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeDE9IjAiIHkxPSIxNiIgeDI9IjI0IiB5Mj0iOCIgLz4NCjwvc3ZnPg==");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  min-width: 40px;
}
#scorecard table thead td div.minus,
#scorecard table tbody:not(.message) td div.minus {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCiAgPGxpbmUgc3R5bGU9ImZpbGw6IG5vbmU7IHN0cm9rZTogIzMzMzsiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHgxPSIwIiB5MT0iOCIgeDI9IjI0IiB5Mj0iMTYiIC8+DQo8L3N2Zz4=");
}
.adjust-font-y[data-font="fontA"]#scorecard table thead td div,
.adjust-font-y[data-font="fontA"]#scorecard table tbody:not(.message) td div,
.adjust-font-y[data-font="fontB"]#scorecard table thead td div,
.adjust-font-y[data-font="fontB"]#scorecard table tbody:not(.message) td div {
  background-position: 50% -5px;
  position: relative;
  top: 5px;
}
.adjust-font-y[data-font="fontC"]#scorecard table thead td div,
.adjust-font-y[data-font="fontC"]#scorecard table tbody:not(.message) td div {
  background-position: 50% -3px;
  position: relative;
  top: 3px;
}
[data-font="fontD"]#scorecard table thead td div,
[data-font="fontD"]#scorecard table tbody:not(.message) td div {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCiAgPGxpbmUgc3R5bGU9ImZpbGw6IG5vbmU7IHN0cm9rZTogcmdiYSgyNDAsIDIzNiwgMTk3LCAwLjg1KTsiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHgxPSIwIiB5MT0iMTYiIHgyPSIyNCIgeTI9IjgiIC8+DQo8L3N2Zz4=");
  background-position: 50% -1px;
  opacity: 0.85;
}
[data-font="fontD"]#scorecard table thead td div.minus,
[data-font="fontD"]#scorecard table tbody:not(.message) td div.minus {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCiAgPGxpbmUgc3R5bGU9ImZpbGw6IG5vbmU7IHN0cm9rZTogcmdiYSgyNDAsIDIzNiwgMTk3LCAwLjg1KTsiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHgxPSIwIiB5MT0iOCIgeDI9IjI0IiB5Mj0iMTYiIC8+DQo8L3N2Zz4=");
}
[data-bridge-layout="true"]#scorecard table thead td div,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) td div {
  background-image: none;
}
[data-bridge-layout="true"]#scorecard table thead td div.minus,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) td div.minus {
  background-image: none;
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead td div,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) td div {
  padding-bottom: 2px;
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead td div.minus,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) td div.minus {
  background-image: none;
}
#scorecard table thead td div.no-cross-off,
#scorecard table tbody:not(.message) td div.no-cross-off {
  background-image: none;
}
#scorecard table thead td div > span,
#scorecard table tbody:not(.message) td div > span {
  font-size: 80%;
  line-height: 0.5em;
  padding-right: 5px;
}
[data-font="fontD"]#scorecard table thead td div > span,
[data-font="fontD"]#scorecard table tbody:not(.message) td div > span {
  font-size: 17px;
  letter-spacing: 1px;
}
@media (max-width: 479px) {
  #scorecard table thead td div > span span,
  #scorecard table tbody:not(.message) td div > span span {
    display: none;
  }
}
#scorecard table thead tr:nth-last-of-type(2) td div,
#scorecard table tbody:not(.message) tr:nth-last-of-type(2) td div {
  background-image: none;
}
#scorecard table thead tr:nth-last-of-type(2) td div.minus,
#scorecard table tbody:not(.message) tr:nth-last-of-type(2) td div.minus {
  background-image: none;
}
[data-font="fontD"]#scorecard table thead tr:nth-last-of-type(2) td div,
[data-font="fontD"]#scorecard table tbody:not(.message) tr:nth-last-of-type(2) td div {
  font-weight: normal;
  color: #fbe400;
  opacity: 1;
}
[data-font="fontD"]#scorecard table thead tr:nth-last-of-type(2) td div.minus,
[data-font="fontD"]#scorecard table tbody:not(.message) tr:nth-last-of-type(2) td div.minus {
  background-image: none;
}
[data-bridge-layout="true"]#scorecard table thead tr.first,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.first {
  height: auto;
}
[data-bridge-layout="true"]#scorecard table thead tr.first td,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.first td {
  height: auto;
  padding: 2px;
}
[data-bridge-layout="true"]#scorecard table thead tr.mid td,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.mid td {
  border-top: 2px solid rgba(0, 0, 0, 0.5);
  padding: 0;
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead tr.mid td,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.mid td {
  border-top-color: rgba(240, 236, 197, 0.65);
}
[data-bridge-layout="true"]#scorecard table thead tr.game td,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game td {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
  position: relative;
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead tr.game td,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game td {
  border-bottom-color: rgba(240, 236, 197, 0.85);
  padding-bottom: 2px;
}
[data-bridge-layout="true"]#scorecard table thead tr.game td:after,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game td:after {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  bottom: 0;
  display: block;
  height: 5px;
  position: absolute;
  width: 5px;
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead tr.game td:after,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game td:after {
  border-top-color: rgba(240, 236, 197, 0.85);
}
[data-bridge-layout="true"]#scorecard table thead tr.game[data-side="left"] td:first-child:after,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game[data-side="left"] td:first-child:after {
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  content: "";
  left: 0;
  -webkit-transform: translate(-3px, 3px) rotate(-45deg);
          transform: translate(-3px, 3px) rotate(-45deg);
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead tr.game[data-side="left"] td:first-child:after,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game[data-side="left"] td:first-child:after {
  border-left-color: rgba(240, 236, 197, 0.85);
}
[data-bridge-layout="true"]#scorecard table thead tr.game[data-side="right"] td:last-child:after,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game[data-side="right"] td:last-child:after {
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  content: "";
  right: 0;
  -webkit-transform: translate(3px, 3px) rotate(45deg);
          transform: translate(3px, 3px) rotate(45deg);
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead tr.game[data-side="right"] td:last-child:after,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.game[data-side="right"] td:last-child:after {
  border-right-color: rgba(240, 236, 197, 0.85);
}
[data-bridge-layout="true"]#scorecard table thead tr.total td,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.total td {
  border-top: 4px double rgba(0, 0, 0, 0.5);
  color: #000;
  font-weight: bold;
  padding: 2px;
}
[data-font="fontD"][data-bridge-layout="true"]#scorecard table thead tr.total td,
[data-font="fontD"][data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.total td {
  border-top-color: rgba(240, 236, 197, 0.85);
  color: #fbe400;
  font-weight: normal;
  opacity: 1;
}
[data-bridge-layout="true"]#scorecard table thead tr.total td div,
[data-bridge-layout="true"]#scorecard table tbody:not(.message) tr.total td div {
  display: block;
}
#scorecard table thead tr.last,
#scorecard table tbody:not(.message) tr.last {
  height: auto;
}
#scorecard table thead tr.last td,
#scorecard table tbody:not(.message) tr.last td {
  height: auto;
  padding: 2px;
}
#scorecard table thead tr:not(.total) td.winner,
#scorecard table tbody:not(.message) tr:not(.total) td.winner,
#scorecard table thead tr.total td.winner div,
#scorecard table tbody:not(.message) tr.total td.winner div {
  border: 1px solid black;
  border-radius: 50%;
  padding: 0;
}
[data-font="fontD"]#scorecard table thead tr:not(.total) td.winner,
[data-font="fontD"]#scorecard table tbody:not(.message) tr:not(.total) td.winner,
[data-font="fontD"]#scorecard table thead tr.total td.winner div,
[data-font="fontD"]#scorecard table tbody:not(.message) tr.total td.winner div {
  border-color: #fbe400;
  border-radius: 5px;
  padding-top: 2px;
  background-color: #282828;
}
#scorecard table tbody.message tr.content td {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  letter-spacing: 0;
  color: black;
  font-size: 16px;
  line-height: 1.25em;
  position: relative;
  vertical-align: bottom;
}
@media (max-width: 479px), (max-height: 479px) {
  #scorecard table tbody.message tr.content td {
    font-size: 14px;
  }
}
#scorecard table tbody.message tr.content td .messages {
  background-color: white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 8px 8px 10px;
  text-align: center;
}
#scorecard table tbody.message tr.content td .messages .message {
  display: inline-block;
  padding-left: 2em;
  text-indent: -2em;
}
#scorecard table tbody.message tr.content td .messages .message span {
  text-indent: 0;
}
#scorecard table tbody.message tr.content td .messages .message span.player-name {
  display: inline-block;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
#scorecard table tbody.message tr.content td .messages .message span.more {
  cursor: pointer;
  text-decoration: underline;
  color: #005a00;
}
body[data-board-color="blue"] #scorecard table tbody.message tr.content td .messages .message span.more {
  color: #0a3b76;
}
body[data-board-color="red"] #scorecard table tbody.message tr.content td .messages .message span.more {
  color: #a01414;
}
body[data-board-color="charcoal"] #scorecard table tbody.message tr.content td .messages .message span.more {
  color: #4b4b4b;
}
body[data-board-color="black"] #scorecard table tbody.message tr.content td .messages .message span.more {
  color: black;
}
body[data-board-color="white"] #scorecard table tbody.message tr.content td .messages .message span.more {
  color: white;
}
#scorecard table tfoot {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  letter-spacing: 0;
}
#scorecard table tfoot tr.ad-free td {
  border-top: none;
  padding-top: 1px;
}
#scorecard table tfoot tr.actions td {
  font-size: 10px;
  white-space: nowrap;
}
#scorecard table tfoot tr.actions td button:not([hidden]) ~ button {
  margin-left: 1em;
}
#scorecard table tfoot tr.actions td .club-game-name {
  font-weight: 500;
  font-size: 14px;
  padding-bottom: 8px;
}
@media (max-width: 479px), (max-height: 479px) {
  #scorecard table tfoot tr.actions td {
    font-size: 8px;
  }
}
#scorecard table tfoot tr.options td {
  max-width: 400px;
}
#scorecard table tfoot tr.options td .club-game-name {
  font-weight: 500;
}
#scorecard table tfoot td {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: normal;
  padding: 5px 0;
}
[data-font="fontD"]#scorecard table tfoot td {
  border-top: 1px dotted rgba(240, 236, 197, 0.85);
}
#scorecard table tfoot td button {
  border-color: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #333;
  min-width: 70px;
  outline: none;
  overflow: visible;
  position: relative;
}
@media (max-width: 479px), (max-height: 479px) {
  #scorecard table tfoot td button {
    font-size: 14px;
  }
}
#scorecard table tfoot td button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
#scorecard table tfoot td button:disabled {
  background-color: transparent;
  opacity: 0.5;
}
[data-font="fontD"]#scorecard table tfoot td button {
  border-color: rgba(240, 236, 197, 0.75);
  color: #f0ecc5;
}
[data-font="fontD"]#scorecard table tfoot td button:hover {
  background-color: rgba(240, 236, 197, 0.25);
}
#scorecard table tfoot td button[data-count]:after,
#scorecard table tfoot td button.challenge .fa {
  background-color: #005a00;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  content: attr(data-count);
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 12px;
  height: 20px;
  line-height: 21px;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
}
body[data-board-color="blue"] #scorecard table tfoot td button[data-count]:after,
body[data-board-color="blue"] #scorecard table tfoot td button.challenge .fa {
  background-color: #0a3b76;
}
body[data-board-color="red"] #scorecard table tfoot td button[data-count]:after,
body[data-board-color="red"] #scorecard table tfoot td button.challenge .fa {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #scorecard table tfoot td button[data-count]:after,
body[data-board-color="charcoal"] #scorecard table tfoot td button.challenge .fa {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #scorecard table tfoot td button[data-count]:after,
body[data-board-color="black"] #scorecard table tfoot td button.challenge .fa {
  background-color: black;
}
body[data-board-color="white"] #scorecard table tfoot td button[data-count]:after,
body[data-board-color="white"] #scorecard table tfoot td button.challenge .fa {
  background-color: white;
}
.score-more-detail {
  text-align: center;
}
@media (max-width: 479px), (max-height: 479px) {
  .score-more-detail {
    font-size: 14px;
  }
}
.score-more-detail table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: auto;
}
.score-more-detail table td {
  border-bottom: 1px solid #999;
  padding: 1px 2px 2px;
  text-align: left;
}
.score-more-detail table .player-name {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-weight: 500;
  letter-spacing: 0;
}
.score-more-detail table tr:last-child td {
  border-bottom: none;
  font-weight: 500;
}
.score-more-detail .pinochle-score-explained th {
  border-bottom: 1px solid #999;
  padding: 8px 2px 1px;
  text-align: left;
}
.score-more-detail .pinochle-score-explained tr:first-child th {
  padding-top: 4px;
}
.score-more-detail .pinochle-score-explained td:last-child {
  text-align: right;
}
.score-more-detail .pinochle-score-explained tr.pts-subtotal td {
  font-weight: 500;
  border-top: 1px solid #999;
  border-bottom: none;
  padding-bottom: 8px;
}
.score-more-detail .pinochle-score-explained tr.pts-subtotal + tr th {
  padding-top: 0;
}
.score-more-detail .pinochle-score-explained tr.total td {
  font-weight: 500;
  border-top: 3px double #999;
  padding-top: 5px;
}
.score-more-detail .pitch-game-point td[colspan="2"] {
  text-align: center;
}
.score-more-detail .pitch-game-point td[colspan="2"]:not(:last-child) {
  border-right: 1px solid #999;
}
.score-more-detail .pitch-game-point td:nth-child(2n):not(:last-child):not([colspan]) {
  text-align: right;
  padding-left: 16px;
  padding-right: 16px;
  border-right: 1px solid #999;
  -webkit-font-feature-settings: "pnum" 0, "tnum" 1;
          font-feature-settings: "pnum" 0, "tnum" 1;
}
.score-more-detail .pitch-game-point td:nth-child(2n + 1):not(:first-child):not([colspan]) {
  padding-left: 16px;
}
.seat {
  background-color: rgba(255, 255, 255, 0);
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 9px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: rgba(255, 255, 255, 0.8);
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.seat .card {
  left: 50%;
  top: 50%;
  -webkit-transition: none;
  transition: none;
}
.seat .card .back {
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transition-property: visibility, -webkit-transform;
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  visibility: hidden;
}
.seat.occupied {
  text-shadow: 2px 2px 3px #000;
}
.seat.occupied .card .back {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  visibility: visible;
}
.seat.is-dealer:not(.occupied):before {
  content: "DEALER";
  display: block;
  font-size: 12px;
  position: absolute;
  top: -24px;
  width: 100%;
}
.seat.is-dealer:not(.occupied)[data-side="Top"]:before,
body:not([data-full-table-portrait]) .seat.is-dealer:not(.occupied)[data-side="TopLeft"]:before,
body:not([data-full-table-portrait]) .seat.is-dealer:not(.occupied)[data-side="TopRight"]:before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.seat[data-side="Left"]:not(.club-game):after,
.seat[data-side="Right"]:not(.club-game):after,
.seat[data-side="Top"]:not(.club-game):after,
.seat[data-side="TopLeft"]:not(.club-game):after,
.seat[data-side="TopRight"]:not(.club-game):after,
.seat.watching[data-side="Bottom"]:not(.club-game):after {
  color: gold;
  content: "Move Here";
  display: block;
  padding: 4px;
  position: relative;
  text-decoration: underline;
}
.watching.seat[data-side="Left"]:not(.club-game):after,
.watching.seat[data-side="Right"]:not(.club-game):after,
.watching.seat[data-side="Top"]:not(.club-game):after,
.watching.seat[data-side="TopLeft"]:not(.club-game):after,
.watching.seat[data-side="TopRight"]:not(.club-game):after,
.watching.seat.watching[data-side="Bottom"]:not(.club-game):after {
  content: "Play Here";
}
.watching.occupied.seat[data-side="Left"]:not(.club-game):after,
.watching.occupied.seat[data-side="Right"]:not(.club-game):after,
.watching.occupied.seat[data-side="Top"]:not(.club-game):after,
.watching.occupied.seat[data-side="TopLeft"]:not(.club-game):after,
.watching.occupied.seat[data-side="TopRight"]:not(.club-game):after,
.watching.occupied.seat.watching[data-side="Bottom"]:not(.club-game):after {
  display: none;
}
.seat[data-side="Left"]:not(.club-game):hover,
.seat[data-side="Right"]:not(.club-game):hover,
.seat[data-side="Top"]:not(.club-game):hover,
.seat[data-side="TopLeft"]:not(.club-game):hover,
.seat[data-side="TopRight"]:not(.club-game):hover,
.seat.watching[data-side="Bottom"]:not(.club-game):hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.seat[data-side="Left"]:not(.club-game):hover .card .back:after,
.seat[data-side="Right"]:not(.club-game):hover .card .back:after,
.seat[data-side="Top"]:not(.club-game):hover .card .back:after,
.seat[data-side="TopLeft"]:not(.club-game):hover .card .back:after,
.seat[data-side="TopRight"]:not(.club-game):hover .card .back:after,
.seat.watching[data-side="Bottom"]:not(.club-game):hover .card .back:after {
  background-color: rgba(0, 0, 0, 0);
}
.seat[data-side="Top"]:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body:not([data-full-table-portrait]) .seat[data-side="TopLeft"]:after,
body:not([data-full-table-portrait]) .seat[data-side="TopRight"]:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#menu #setting-custom-watermark.section .scroller .samples-container {
  padding-bottom: 12px;
}
#menu #setting-custom-watermark.section .scroller .samples-container .swatch {
  float: none;
  height: auto;
  margin: 0;
  min-height: 200px;
  padding: 32px;
  width: auto;
}
#menu #setting-custom-watermark.section .scroller .samples-container .swatch canvas {
  display: block;
  width: 100%;
}
#menu #setting-custom-watermark.section .scroller ul {
  padding: 0;
}
#menu #setting-custom-watermark.section .scroller ul li {
  display: block;
}
#menu .settings.section ul {
  padding: 0;
}
#menu .settings.section ul li {
  display: block;
  margin-top: 10px;
  padding: 0 20px;
}
#menu .settings.section ul li[hidden] {
  display: none;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .settings.section ul li {
    padding: 0 10px;
  }
}
#menu .settings.section ul li label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu .settings.section ul li .game-badge {
  background-color: #8bce8b;
  display: inline-block;
  font-size: 14px;
  padding: 0px 6px 2px;
  border-radius: 3px;
}
body[data-board-color="blue"] #menu .settings.section ul li .game-badge {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu .settings.section ul li .game-badge {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu .settings.section ul li .game-badge {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu .settings.section ul li .game-badge {
  background-color: black;
}
body[data-board-color="white"] #menu .settings.section ul li .game-badge {
  background-color: white;
}
#menu .settings.section ul li.disabled,
#menu .settings.section ul li[disabled] {
  opacity: 0.6;
}
#menu .settings.section ul.options li {
  margin-top: 0;
  position: relative;
}
#menu .settings.section ul.options li input {
  position: absolute;
  visibility: hidden;
}
#menu .settings.section ul.options li .title {
  display: block;
  font-weight: 500;
}
#menu .settings.section p.indented {
  margin-top: 10px;
  padding: 0 20px;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .settings.section p.indented {
    padding: 0 10px;
  }
}
#menu .settings.section .dialog-button {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}
#menu .settings.section .subtext {
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
#menu .settings.section .bounced-warning p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 4px;
}
#menu .settings.section .bounced-warning .fa-warning {
  padding-right: 10px;
  font-size: 200%;
}
#menu .settings.section .notification-time-zone select {
  margin-top: 4px;
}
#menu .settings.section ul.unsubs-list,
#menu .settings.section ul.presets-list {
  margin: 10px 0;
}
#menu .settings.section ul.unsubs-list span[draggable="true"],
#menu .settings.section ul.presets-list span[draggable="true"] {
  cursor: -webkit-grab;
  cursor: grab;
}
#menu .settings.section ul.unsubs-list li,
#menu .settings.section ul.presets-list li {
  border-bottom-color: rgba(0, 90, 0, 0.5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  line-height: 30px;
  margin: 0 20px;
  padding: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
body[data-board-color="blue"] #menu .settings.section ul.unsubs-list li,
body[data-board-color="blue"] #menu .settings.section ul.presets-list li {
  border-bottom-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .settings.section ul.unsubs-list li,
body[data-board-color="red"] #menu .settings.section ul.presets-list li {
  border-bottom-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .settings.section ul.unsubs-list li,
body[data-board-color="charcoal"] #menu .settings.section ul.presets-list li {
  border-bottom-color: rgba(75, 75, 75, 0.5);
}
#menu .settings.section ul.unsubs-list li:first-child,
#menu .settings.section ul.presets-list li:first-child {
  border-top-color: rgba(0, 90, 0, 0.5);
  border-top-style: solid;
  border-top-width: 1px;
}
body[data-board-color="blue"] #menu .settings.section ul.unsubs-list li:first-child,
body[data-board-color="blue"] #menu .settings.section ul.presets-list li:first-child {
  border-top-color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .settings.section ul.unsubs-list li:first-child,
body[data-board-color="red"] #menu .settings.section ul.presets-list li:first-child {
  border-top-color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .settings.section ul.unsubs-list li:first-child,
body[data-board-color="charcoal"] #menu .settings.section ul.presets-list li:first-child {
  border-top-color: rgba(75, 75, 75, 0.5);
}
#menu .settings.section ul.unsubs-list li span:first-child,
#menu .settings.section ul.presets-list li span:first-child {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#menu .settings.section ul.unsubs-list li span.up-down-delete,
#menu .settings.section ul.presets-list li span.up-down-delete {
  white-space: nowrap;
}
#menu .settings.section ul.unsubs-list li .fa:not(.fa-user),
#menu .settings.section ul.presets-list li .fa:not(.fa-user) {
  border-radius: 15px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
}
#menu .settings.section ul.unsubs-list li .fa:not(.fa-user):hover,
#menu .settings.section ul.presets-list li .fa:not(.fa-user):hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user):hover,
body[data-board-color="blue"] #menu .settings.section ul.presets-list li .fa:not(.fa-user):hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user):hover,
body[data-board-color="red"] #menu .settings.section ul.presets-list li .fa:not(.fa-user):hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user):hover,
body[data-board-color="charcoal"] #menu .settings.section ul.presets-list li .fa:not(.fa-user):hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user):hover,
body[data-board-color="black"] #menu .settings.section ul.presets-list li .fa:not(.fa-user):hover {
  background-color: black;
}
body[data-board-color="white"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user):hover,
body[data-board-color="white"] #menu .settings.section ul.presets-list li .fa:not(.fa-user):hover {
  background-color: white;
}
#menu .settings.section ul.unsubs-list li .fa:not(.fa-user)[aria-disabled],
#menu .settings.section ul.presets-list li .fa:not(.fa-user)[aria-disabled] {
  color: rgba(0, 90, 0, 0.5);
}
body[data-board-color="blue"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user)[aria-disabled],
body[data-board-color="blue"] #menu .settings.section ul.presets-list li .fa:not(.fa-user)[aria-disabled] {
  color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user)[aria-disabled],
body[data-board-color="red"] #menu .settings.section ul.presets-list li .fa:not(.fa-user)[aria-disabled] {
  color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .settings.section ul.unsubs-list li .fa:not(.fa-user)[aria-disabled],
body[data-board-color="charcoal"] #menu .settings.section ul.presets-list li .fa:not(.fa-user)[aria-disabled] {
  color: rgba(75, 75, 75, 0.5);
}
#menu .settings.section ul.emojis-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 10px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 10px 20px 15px;
}
#menu .settings.section ul.emojis-list span[draggable="true"] {
  cursor: -webkit-grab;
  cursor: grab;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu .settings.section ul.emojis-list {
    gap: 7px;
    margin: 10px 2px 15px;
  }
}
#menu .settings.section ul.emojis-list li {
  margin: 0;
  padding: 0;
  position: relative;
}
#menu .settings.section ul.emojis-list li .fa {
  border-radius: 15px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  display: none;
  position: absolute;
  z-index: 1;
}
#menu .settings.section ul.emojis-list li .fa.fa-arrow-left {
  left: -10px;
  top: -10px;
}
#menu .settings.section ul.emojis-list li .fa.fa-arrow-right {
  right: -10px;
  top: -10px;
}
#menu .settings.section ul.emojis-list li .fa.fa-trash-o {
  right: -10px;
  bottom: -15px;
}
#menu .settings.section ul.emojis-list li .fa:hover {
  background-color: #8bce8b;
}
body[data-board-color="blue"] #menu .settings.section ul.emojis-list li .fa:hover {
  background-color: #b0becf;
}
body[data-board-color="red"] #menu .settings.section ul.emojis-list li .fa:hover {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #menu .settings.section ul.emojis-list li .fa:hover {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #menu .settings.section ul.emojis-list li .fa:hover {
  background-color: black;
}
body[data-board-color="white"] #menu .settings.section ul.emojis-list li .fa:hover {
  background-color: white;
}
#menu .settings.section ul.emojis-list li .fa[aria-disabled] {
  color: rgba(0, 90, 0, 0.5);
}
body[data-board-color="blue"] #menu .settings.section ul.emojis-list li .fa[aria-disabled] {
  color: rgba(10, 59, 118, 0.5);
}
body[data-board-color="red"] #menu .settings.section ul.emojis-list li .fa[aria-disabled] {
  color: rgba(160, 20, 20, 0.5);
}
body[data-board-color="charcoal"] #menu .settings.section ul.emojis-list li .fa[aria-disabled] {
  color: rgba(75, 75, 75, 0.5);
}
#menu .settings.section ul.emojis-list li:hover .fa,
#menu .settings.section ul.emojis-list li:active .fa {
  display: block;
}
#menu .settings.section select.more-emojis option {
  font-size: 36px;
}
#menu .settings.section select.more-emojis option:first-child {
  font-size: 16px;
}
#menu .settings.section select.more-emojis option.std-emoji {
  font-family: EmoticonFont;
}
#setting-election-faces .group-separator {
  clear: both;
  padding: 10px 8px;
  background-color: #005a00;
  background-clip: content-box;
  height: 2px;
}
body[data-board-color="blue"] #setting-election-faces .group-separator {
  background-color: #0a3b76;
}
body[data-board-color="red"] #setting-election-faces .group-separator {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #setting-election-faces .group-separator {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #setting-election-faces .group-separator {
  background-color: black;
}
body[data-board-color="white"] #setting-election-faces .group-separator {
  background-color: white;
}
label.swatch {
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  display: block;
  float: left;
  height: 120px;
  margin: 2%;
  padding: 4px 8px;
  position: relative;
  width: 45%;
  overflow: hidden;
}
label.swatch[hidden] {
  display: none;
}
body[data-board-color="green"] label.swatch.board-color {
  background-color: #005a00;
}
body[data-board-color="green"][data-use-gradient="true"] label.swatch.board-color {
  background-image: -webkit-radial-gradient(center, ellipse, #008d00 10%, #002700 100%);
  background-image: radial-gradient(ellipse at center, #008d00 10%, #002700 100%);
}
body[data-board-color="red"] label.swatch.board-color {
  background-color: #a01414;
}
body[data-board-color="red"][data-use-gradient="true"] label.swatch.board-color {
  background-image: -webkit-radial-gradient(center, ellipse, #cd1a1a 10%, #730e0e 100%);
  background-image: radial-gradient(ellipse at center, #cd1a1a 10%, #730e0e 100%);
}
body[data-board-color="blue"] label.swatch.board-color {
  background-color: #0a3b76;
}
body[data-board-color="blue"][data-use-gradient="true"] label.swatch.board-color {
  background-image: -webkit-radial-gradient(center, ellipse, #0e53a5 10%, #062347 100%);
  background-image: radial-gradient(ellipse at center, #0e53a5 10%, #062347 100%);
}
body[data-board-color="charcoal"] label.swatch.board-color {
  background-color: #4b4b4b;
}
body[data-board-color="charcoal"][data-use-gradient="true"] label.swatch.board-color {
  background-image: -webkit-radial-gradient(center, ellipse, #656565 10%, #323232 100%);
  background-image: radial-gradient(ellipse at center, #656565 10%, #323232 100%);
}
label.swatch.green {
  background-color: #005a00;
}
body[data-use-gradient="true"] label.swatch.green {
  background-image: -webkit-radial-gradient(center, ellipse, #008d00 10%, #002700 100%);
  background-image: radial-gradient(ellipse at center, #008d00 10%, #002700 100%);
}
label.swatch.blue {
  background-color: #0a3b76;
}
body[data-use-gradient="true"] label.swatch.blue {
  background-image: -webkit-radial-gradient(center, ellipse, #0e53a5 10%, #062347 100%);
  background-image: radial-gradient(ellipse at center, #0e53a5 10%, #062347 100%);
}
label.swatch.red {
  background-color: #a01414;
}
body[data-use-gradient="true"] label.swatch.red {
  background-image: -webkit-radial-gradient(center, ellipse, #cd1a1a 10%, #730e0e 100%);
  background-image: radial-gradient(ellipse at center, #cd1a1a 10%, #730e0e 100%);
}
label.swatch.charcoal {
  background-color: #4b4b4b;
}
body[data-use-gradient="true"] label.swatch.charcoal {
  background-image: -webkit-radial-gradient(center, ellipse, #656565 10%, #323232 100%);
  background-image: radial-gradient(ellipse at center, #656565 10%, #323232 100%);
}
label.swatch.font {
  background-color: #f0ecc5;
  border-radius: 0;
  -webkit-box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.25);
          box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.25);
  color: #333333;
}
label.swatch.font span {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  background-color: lime;
}
label.swatch.font.fontA {
  font-family: Quickpen;
  -webkit-font-feature-settings: "calt", "fina", "kern", "liga";
          font-feature-settings: "calt", "fina", "kern", "liga";
  font-size: 22px;
  line-height: 1em;
  padding-top: 12px;
}
label.swatch.font.fontB {
  font-family: "Tough Dude";
  -webkit-font-feature-settings: "kern", "liga";
          font-feature-settings: "kern", "liga";
  font-size: 34px;
  line-height: 1em;
  padding-top: 6px;
}
label.swatch.font.fontC {
  font-family: Sharpie;
  -webkit-font-feature-settings: "cpsp", "dlig", "frac", "kern", "liga";
          font-feature-settings: "cpsp", "dlig", "frac", "kern", "liga";
  font-size: 30px;
  line-height: 1em;
  padding-top: 4px;
}
label.swatch.font.fontD {
  background-color: #333333;
  color: #f0ecc5;
  font-family: Scoreboard;
  font-size: 24px;
  font-weight: 400;
  line-height: 1em;
  padding-top: 8px;
  padding-left: 10px;
}
label.swatch.pips {
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #333;
  float: none;
  width: auto;
  height: auto;
  margin-bottom: 8px;
}
label.swatch.pips span.label {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  left: 0;
  padding: 2px 4px 4px 4px;
  position: absolute;
  right: 0;
  top: 0;
}
label.swatch.pips span.sample {
  font-size: 48px;
  padding-top: 28px;
  display: block;
  text-align: center;
  line-height: 1;
  min-height: 54px;
}
@media (max-width: 479px), (max-height: 479px) {
  label.swatch.pips span.sample {
    font-size: 42px;
  }
}
label.swatch.pips span.sample .suit {
  font-size: 100%;
}
label.swatch.pips.pips-color input[type="radio"] + i {
  display: none;
}
label.swatch.pips.pips-color input[type="radio"]:checked + i {
  display: inline-block;
  color: black;
  position: absolute;
  right: 4px;
  top: 4px;
}
label.swatch.pips.pips-color span.sample {
  padding: 0;
}
label.swatch.pips.pips-color span.sample .suit {
  font-size: 100%;
}
label.swatch.pips.pips-color span.sample .suit.black {
  color: #000000 !important;
}
label.swatch.pips.pips-color span.sample .suit.red {
  color: #e00000 !important;
}
label.swatch.pips.pips-color span.sample .suit.green {
  color: #408000 !important;
}
label.swatch.pips.pips-color span.sample .suit.blue {
  color: #2000ff !important;
}
label.swatch.pips.pips-color span.sample .suit.orange {
  color: #ff8000 !important;
}
label.swatch.pips.pips-color span.sample .suit.yellow {
  color: #ffc000 !important;
}
label.swatch.pips.pips-color span.sample .suit.pink {
  color: #ff00ff !important;
}
label.swatch.pips.pips-color span.sample .suit.cyan {
  color: #40ebeb !important;
}
label.swatch.face.card-back {
  background-size: cover;
  height: 180px;
}
.section:not([hidden]) label.swatch.face.card-back.denim {
  background-image: url("../image/cards/backs/denim.png");
}
.section:not([hidden]) label.swatch.face.card-back.lights {
  background-image: url("../image/cards/backs/lights.png");
}
.section:not([hidden]) label.swatch.face.card-back.clouds {
  background-image: url("../image/cards/backs/clouds.png");
}
.section:not([hidden]) label.swatch.face.card-back.graffiti {
  background-image: url("../image/cards/backs/graffiti.png");
}
.section:not([hidden]) label.swatch.face.card-back.metalscreen {
  background-image: url("../image/cards/backs/metalscreen.png");
}
.section:not([hidden]) label.swatch.face.card-back.redpaint {
  background-image: url("../image/cards/backs/redpaint.png");
}
.section:not([hidden]) label.swatch.face.card-back.wood {
  background-image: url("../image/cards/backs/wood.png");
}
.section:not([hidden]) label.swatch.face.card-back.waterdroplets {
  background-image: url("../image/cards/backs/waterdroplets.png");
}
.section:not([hidden]) label.swatch.face.card-back.winter {
  background-image: url("../image/cards/backs/winter.png");
}
.section:not([hidden]) label.swatch.face.card-back.snowflakes {
  background-image: url("../image/cards/backs/snowflakes.png");
}
.section:not([hidden]) label.swatch.face.card-back.autumnleaf {
  background-image: url("../image/cards/backs/autumnleaf.png");
}
.section:not([hidden]) label.swatch.face.card-back.autumnleaves {
  background-image: url("../image/cards/backs/autumnleaves.png");
}
.section:not([hidden]) label.swatch.face.card-back.springcherryblossoms {
  background-image: url("../image/cards/backs/springcherryblossoms.png");
}
.section:not([hidden]) label.swatch.face.card-back.springflowers {
  background-image: url("../image/cards/backs/springflowers.png");
}
.section:not([hidden]) label.swatch.face.card-back.summersunset {
  background-image: url("../image/cards/backs/summersunset.png");
}
.section:not([hidden]) label.swatch.face.card-back.summerwatermelon {
  background-image: url("../image/cards/backs/summerwatermelon.png");
}
label.swatch.watermark:before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: 24px;
  left: 8px;
  right: 8px;
  bottom: 16px;
}
.section:not([hidden]) label.swatch.watermark.cards:before {
  background-image: url("../image/cards-watermark-cards.png?rev=1");
}
.section:not([hidden]) label.swatch.watermark.circle:before {
  background-image: url("../image/circle-watermark.png?rev=1");
}
.section:not([hidden]) label.swatch.watermark.logo:before {
  background-image: url("../image/cards-watermark.png?rev=1");
}
.section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/bridge-watermark.png?rev=1");
}
body[data-game-code="Bridge"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/bridge-watermark.png?rev=1");
}
body[data-game-code="Euchre"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/euchre-watermark.png?rev=1");
}
body[data-game-code="FiveHundred"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/fivehundred-watermark.png?rev=1");
}
body[data-game-code="Hearts"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/hearts-watermark.png?rev=1");
}
body[data-game-code="OhHell"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/ohhell-watermark.png?rev=1");
}
body[data-game-code="Pinochle"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/pinochle-watermark.png?rev=1");
}
body[data-game-code="Pitch"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/pitch-watermark.png?rev=1");
}
body[data-game-code="Spades"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/spades-watermark.png?rev=1");
}
body[data-game-code="Whist"] .section:not([hidden]) label.swatch.watermark.game:before {
  background-image: url("../image/whist-watermark.png?rev=1");
}
label.swatch.face {
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #333;
}
label.swatch.face.xn {
  background-size: auto 100%;
}
label.swatch.face.xn:before,
label.swatch.face.xn:after {
  background-position: center top;
  background-size: cover;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}
label.swatch.face.xn:before {
  left: 0;
}
label.swatch.face.xn:after {
  right: 0;
}
label.swatch.face.x3:before,
label.swatch.face.x3:after {
  width: 33.333%;
}
label.swatch.face.x2:before,
label.swatch.face.x2:after {
  width: 50%;
}
.section:not([hidden]) label.swatch.face.classic {
  background-image: url(../image/cards/standard/KC.png);
}
.section:not([hidden]) label.swatch.face.celebrity {
  background-image: url(../image/cards/celebrity/king.png);
}
.section:not([hidden]) label.swatch.face.flatface {
  background-position: center 30px;
  background-image: url(../image/cards/flatface/king_black.png);
}
.section:not([hidden]) label.swatch.face.decorative {
  background-image: url("../image/cards/decorative/spades/ace.png");
  background-size: contain;
  background-position: center 10px;
}
.section:not([hidden]) label.swatch.face.hats {
  background-image: url("../image/cards/hats/king.png");
  background-position: center 5px;
}
.section:not([hidden]) label.swatch.face.election {
  background-size: contain;
  background-position: center center;
  background-image: url(../image/cards/election/Unknown.png);
}
label.swatch.face.candidate {
  background-size: cover;
  width: 29%;
}
.section:not([hidden]) label.swatch.face.candidate.Bush {
  background-image: url(../image/cards/election/Bush.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Carson {
  background-image: url(../image/cards/election/Carson.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Chafee {
  background-image: url(../image/cards/election/Chafee.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Christie {
  background-image: url(../image/cards/election/Christie.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Clinton {
  background-image: url(../image/cards/election/Clinton.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Cruz {
  background-image: url(../image/cards/election/Cruz.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Everson {
  background-image: url(../image/cards/election/Everson.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Fiorina {
  background-image: url(../image/cards/election/Fiorina.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Gilmore {
  background-image: url(../image/cards/election/Gilmore.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Graham {
  background-image: url(../image/cards/election/Graham.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Huckabee {
  background-image: url(../image/cards/election/Huckabee.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Jindal {
  background-image: url(../image/cards/election/Jindal.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Kasich {
  background-image: url(../image/cards/election/Kasich.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Lessig {
  background-image: url(../image/cards/election/Lessig.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.OMalley {
  background-image: url(../image/cards/election/OMalley.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Pataki {
  background-image: url(../image/cards/election/Pataki.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Paul {
  background-image: url(../image/cards/election/Paul.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Perry {
  background-image: url(../image/cards/election/Perry.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Rubio {
  background-image: url(../image/cards/election/Rubio.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Sanders {
  background-image: url(../image/cards/election/Sanders.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Santorum {
  background-image: url(../image/cards/election/Santorum.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Trump {
  background-image: url(../image/cards/election/Trump.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Walker {
  background-image: url(../image/cards/election/Walker.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Webb {
  background-image: url(../image/cards/election/Webb.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Baraka {
  background-image: url(../image/cards/election/Baraka.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Johnson {
  background-image: url(../image/cards/election/Johnson.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Kaine {
  background-image: url(../image/cards/election/Kaine.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Pence {
  background-image: url(../image/cards/election/Pence.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Stein {
  background-image: url(../image/cards/election/Stein.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.Weld {
  background-image: url(../image/cards/election/Weld.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.DemocraticParty {
  background-image: url(../image/cards/election/DemocraticParty.jpg);
  background-position-y: -8px;
}
@media (max-width: 479px), (max-height: 479px) {
  .section:not([hidden]) label.swatch.face.candidate.DemocraticParty {
    background-position-y: 7px;
  }
}
.section:not([hidden]) label.swatch.face.candidate.RepublicanParty {
  background-image: url(../image/cards/election/RepublicanParty.jpg);
  background-position-y: -5px;
}
@media (max-width: 479px), (max-height: 479px) {
  .section:not([hidden]) label.swatch.face.candidate.RepublicanParty {
    background-position-y: 10px;
  }
}
.section:not([hidden]) label.swatch.face.candidate.LibertarianParty {
  background-image: url(../image/cards/election/LibertarianParty.jpg);
}
.section:not([hidden]) label.swatch.face.candidate.GreenParty {
  background-image: url(../image/cards/election/GreenParty.jpg);
  background-position-y: 25px;
}
@media (max-width: 479px), (max-height: 479px) {
  .section:not([hidden]) label.swatch.face.candidate.GreenParty {
    background-position-y: 33px;
  }
}
.section:not([hidden]) label.swatch.face.candidate.Unknown {
  background-image: url(../image/cards/election/Unknown.png);
}
label.swatch.face.rank {
  padding: 0;
  height: 195px;
}
label.swatch.face.rank input[type="button"] {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Unknown"] {
  background-size: contain;
  background-position: center 30px;
  background-image: url(../image/cards/election/Unknown.png);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Bush"] {
  background-image: url(../image/cards/election/Bush.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Carson"] {
  background-image: url(../image/cards/election/Carson.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Chafee"] {
  background-image: url(../image/cards/election/Chafee.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Christie"] {
  background-image: url(../image/cards/election/Christie.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Clinton"] {
  background-image: url(../image/cards/election/Clinton.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Cruz"] {
  background-image: url(../image/cards/election/Cruz.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Everson"] {
  background-image: url(../image/cards/election/Everson.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Fiorina"] {
  background-image: url(../image/cards/election/Fiorina.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Gilmore"] {
  background-image: url(../image/cards/election/Gilmore.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Graham"] {
  background-image: url(../image/cards/election/Graham.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Huckabee"] {
  background-image: url(../image/cards/election/Huckabee.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Jindal"] {
  background-image: url(../image/cards/election/Jindal.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Kasich"] {
  background-image: url(../image/cards/election/Kasich.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Lessig"] {
  background-image: url(../image/cards/election/Lessig.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="OMalley"] {
  background-image: url(../image/cards/election/OMalley.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Pataki"] {
  background-image: url(../image/cards/election/Pataki.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Paul"] {
  background-image: url(../image/cards/election/Paul.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Perry"] {
  background-image: url(../image/cards/election/Perry.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Rubio"] {
  background-image: url(../image/cards/election/Rubio.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Sanders"] {
  background-image: url(../image/cards/election/Sanders.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Santorum"] {
  background-image: url(../image/cards/election/Santorum.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Trump"] {
  background-image: url(../image/cards/election/Trump.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Walker"] {
  background-image: url(../image/cards/election/Walker.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Webb"] {
  background-image: url(../image/cards/election/Webb.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Baraka"] {
  background-image: url(../image/cards/election/Baraka.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Johnson"] {
  background-image: url(../image/cards/election/Johnson.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Kaine"] {
  background-image: url(../image/cards/election/Kaine.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Pence"] {
  background-image: url(../image/cards/election/Pence.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Stein"] {
  background-image: url(../image/cards/election/Stein.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="Weld"] {
  background-image: url(../image/cards/election/Weld.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="DemocraticParty"] {
  background-image: url(../image/cards/election/DemocraticParty.jpg);
  background-position-y: -22px;
}
@media (max-width: 479px), (max-height: 479px) {
  .section:not([hidden]) label.swatch.face.rank input[type="button"][value="DemocraticParty"] {
    background-position-y: -7px;
  }
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="RepublicanParty"] {
  background-image: url(../image/cards/election/RepublicanParty.jpg);
  background-position-y: -15px;
}
@media (max-width: 479px), (max-height: 479px) {
  .section:not([hidden]) label.swatch.face.rank input[type="button"][value="RepublicanParty"] {
    background-position-y: 0px;
  }
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="LibertarianParty"] {
  background-image: url(../image/cards/election/LibertarianParty.jpg);
}
.section:not([hidden]) label.swatch.face.rank input[type="button"][value="GreenParty"] {
  background-image: url(../image/cards/election/GreenParty.jpg);
  background-position-y: 30px;
}
@media (max-width: 479px), (max-height: 479px) {
  .section:not([hidden]) label.swatch.face.rank input[type="button"][value="GreenParty"] {
    background-position-y: 38px;
  }
}
label.swatch.face input + span {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px 3px 0 0;
  display: block;
  left: 0;
  overflow: hidden;
  padding: 2px 13px 4px 4px;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}
label.swatch.face input + span[hidden] {
  display: none;
}
label.swatch button.fa-trash {
  display: none;
  color: #fff;
  font-size: 16px;
  padding: 0;
  line-height: 20px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  min-width: 0;
  min-height: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-top-right-radius: 5px;
  background-color: rgba(0, 0, 0, 0.75);
}
label.swatch button.fa-trash:hover {
  background-color: #000000;
  color: red;
}
label.swatch input[type="radio"] {
  display: none;
}
label.swatch input[type="radio"]:checked + span:after {
  content: "\f00c";
  font-family: FontAwesome;
  position: absolute;
  right: 4px;
  top: 4px;
}
label.swatch input[type="radio"]:checked ~ button.fa-trash {
  display: block;
}
body:not(.touch) label.swatch:hover button.fa-trash {
  display: block;
}
#menu #setting-color ul {
  clear: both;
  padding-top: 10px;
}
#menu #setting-color ul li {
  padding: 0 20px 0 10px;
}
#menu #setting-card-back .top-head,
#menu #setting-face-cards .top-head,
#menu #setting-watermark .top-head {
  margin-bottom: 12px;
}
#menu #setting-card-back .custom-back-swatches,
#menu #setting-face-cards .custom-back-swatches,
#menu #setting-watermark .custom-back-swatches {
  padding-bottom: 8px;
}
#menu #setting-card-back .custom-back-swatches label.swatch,
#menu #setting-face-cards .custom-back-swatches label.swatch,
#menu #setting-watermark .custom-back-swatches label.swatch {
  float: none;
  display: inline-block;
}
#menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
#menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
#menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  color: #005a00;
  background-color: rgba(0, 90, 0, 0.25);
  border-radius: 50%;
  bottom: 2px;
  display: block;
  font-size: 18px;
  height: 32px;
  right: 2px;
  line-height: 32px;
  position: absolute;
  text-align: center;
  width: 32px;
}
body[data-board-color="blue"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="blue"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="blue"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  color: #0a3b76;
}
body[data-board-color="red"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="red"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="red"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="charcoal"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="charcoal"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="black"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="black"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  color: black;
}
body[data-board-color="white"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="white"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="white"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  color: white;
}
body[data-board-color="blue"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="blue"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="blue"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  background-color: rgba(10, 59, 118, 0.25);
}
body[data-board-color="red"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="red"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="red"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  background-color: rgba(160, 20, 20, 0.25);
}
body[data-board-color="charcoal"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="charcoal"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o,
body[data-board-color="charcoal"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o {
  background-color: rgba(75, 75, 75, 0.25);
}
#menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o:hover,
#menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o:hover,
#menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o:hover {
  background-color: #005a00;
  color: white;
}
body[data-board-color="blue"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="blue"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="blue"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o:hover {
  background-color: #0a3b76;
}
body[data-board-color="red"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="red"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="red"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o:hover {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="charcoal"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="charcoal"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o:hover {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="black"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="black"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o:hover {
  background-color: black;
}
body[data-board-color="white"] #menu #setting-card-back .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="white"] #menu #setting-face-cards .custom-back-swatches i.fa.fa-trash-o:hover,
body[data-board-color="white"] #menu #setting-watermark .custom-back-swatches i.fa.fa-trash-o:hover {
  background-color: white;
}
#menu #setting-card-back .mid-head,
#menu #setting-face-cards .mid-head,
#menu #setting-watermark .mid-head {
  clear: both;
  margin-bottom: 8px;
}
#menu #setting-card-back button.custom-back,
#menu #setting-face-cards button.custom-back,
#menu #setting-watermark button.custom-back,
#menu #setting-card-back button.custom-faces,
#menu #setting-face-cards button.custom-faces,
#menu #setting-watermark button.custom-faces,
#menu #setting-card-back button.custom-watermark,
#menu #setting-face-cards button.custom-watermark,
#menu #setting-watermark button.custom-watermark {
  margin: 0 2% 12px;
  width: 94%;
}
#setting-custom-card-image .design-top,
#setting-custom-watermark .design-top {
  margin-bottom: 1em;
}
#setting-custom-card-image .samples-container,
#setting-custom-watermark .samples-container {
  padding-top: 40px;
  padding-bottom: 60px;
  text-align: center;
}
#setting-custom-card-image .samples-container button,
#setting-custom-watermark .samples-container button {
  border: none;
  color: #005a00;
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  padding: 0;
}
body[data-board-color="blue"] #setting-custom-card-image .samples-container button,
body[data-board-color="blue"] #setting-custom-watermark .samples-container button {
  color: #0a3b76;
}
body[data-board-color="red"] #setting-custom-card-image .samples-container button,
body[data-board-color="red"] #setting-custom-watermark .samples-container button {
  color: #a01414;
}
body[data-board-color="charcoal"] #setting-custom-card-image .samples-container button,
body[data-board-color="charcoal"] #setting-custom-watermark .samples-container button {
  color: #4b4b4b;
}
body[data-board-color="black"] #setting-custom-card-image .samples-container button,
body[data-board-color="black"] #setting-custom-watermark .samples-container button {
  color: black;
}
body[data-board-color="white"] #setting-custom-card-image .samples-container button,
body[data-board-color="white"] #setting-custom-watermark .samples-container button {
  color: white;
}
#setting-custom-card-image .samples-container button:hover:not(:disabled),
#setting-custom-watermark .samples-container button:hover:not(:disabled) {
  background-color: #8bce8b;
  color: #005a00;
}
body[data-board-color="blue"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="blue"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  background-color: #b0becf;
}
body[data-board-color="red"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="red"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="charcoal"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="black"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  background-color: black;
}
body[data-board-color="white"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="white"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  background-color: white;
}
body[data-board-color="blue"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="blue"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  color: #0a3b76;
}
body[data-board-color="red"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="red"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  color: #a01414;
}
body[data-board-color="charcoal"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="charcoal"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  color: #4b4b4b;
}
body[data-board-color="black"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="black"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  color: black;
}
body[data-board-color="white"] #setting-custom-card-image .samples-container button:hover:not(:disabled),
body[data-board-color="white"] #setting-custom-watermark .samples-container button:hover:not(:disabled) {
  color: white;
}
#setting-custom-card-image .samples-container button:disabled,
#setting-custom-watermark .samples-container button:disabled {
  visibility: hidden;
}
#setting-custom-card-image .card-container,
#setting-custom-watermark .card-container {
  display: inline-block;
  position: relative;
}
#setting-custom-card-image .card-container .card .suit.Joker,
#setting-custom-watermark .card-container .card .suit.Joker {
  display: none;
}
#setting-custom-card-image .card,
#setting-custom-watermark .card {
  -webkit-perspective: none;
          perspective: none;
}
#setting-custom-card-image .card .back,
#setting-custom-watermark .card .back,
#setting-custom-card-image .card .face,
#setting-custom-watermark .card .face {
  -webkit-transform: none;
          transform: none;
}
#setting-custom-card-image .card .back[hidden],
#setting-custom-watermark .card .back[hidden],
#setting-custom-card-image .card .face[hidden],
#setting-custom-watermark .card .face[hidden] {
  display: none;
}
#setting-custom-card-image .name-container,
#setting-custom-watermark .name-container {
  display: block;
}
#setting-custom-card-image .name-container .please-name:not([hidden]),
#setting-custom-watermark .name-container .please-name:not([hidden]) {
  background-color: yellow;
  color: red;
  display: inline-block;
  font-weight: 500;
  padding: 0 4px;
}
#setting-custom-card-image .name-container input,
#setting-custom-watermark .name-container input {
  margin-top: 2px;
}
#setting-custom-card-image .buttons-container,
#setting-custom-watermark .buttons-container {
  margin-top: 1em;
  text-align: left;
}
#setting-custom-card-image .buttons-container button,
#setting-custom-watermark .buttons-container button {
  min-width: 48%;
}
#setting-custom-card-image .buttons-container button:last-child,
#setting-custom-watermark .buttons-container button:last-child {
  float: right;
}
#setting-custom-card-image .confirm-save,
#setting-custom-watermark .confirm-save {
  background-color: #8bce8b;
  padding: 6px 10px 8px;
}
body[data-board-color="blue"] #setting-custom-card-image .confirm-save,
body[data-board-color="blue"] #setting-custom-watermark .confirm-save {
  background-color: #b0becf;
}
body[data-board-color="red"] #setting-custom-card-image .confirm-save,
body[data-board-color="red"] #setting-custom-watermark .confirm-save {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] #setting-custom-card-image .confirm-save,
body[data-board-color="charcoal"] #setting-custom-watermark .confirm-save {
  background-color: #cbcbcb;
}
body[data-board-color="black"] #setting-custom-card-image .confirm-save,
body[data-board-color="black"] #setting-custom-watermark .confirm-save {
  background-color: black;
}
body[data-board-color="white"] #setting-custom-card-image .confirm-save,
body[data-board-color="white"] #setting-custom-watermark .confirm-save {
  background-color: white;
}
#setting-custom-card-image .confirm-save p,
#setting-custom-watermark .confirm-save p {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}
#setting-custom-card-image .confirm-save div:last-child,
#setting-custom-watermark .confirm-save div:last-child {
  margin-top: 1em;
}
#setting-custom-card-image .notes-container,
#setting-custom-watermark .notes-container {
  font-size: 14px;
  margin-top: 20px;
}
#setting-custom-card-image .face-grid,
#setting-custom-watermark .face-grid {
  padding: 20px 0;
  text-align: center;
}
#setting-custom-card-image .face-grid .swatch,
#setting-custom-watermark .face-grid .swatch {
  padding: 27px 0 0 0;
  width: 68px;
  height: 142px;
  float: none;
  display: inline-block;
}
#setting-custom-card-image .face-grid .swatch .face-frame,
#setting-custom-watermark .face-grid .swatch .face-frame {
  display: block;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#setting-custom-card-image .face-grid .swatch .suit-rank,
#setting-custom-watermark .face-grid .swatch .suit-rank {
  text-align: left;
}
@media (max-width: 479px), (max-height: 479px) {
  #setting-custom-card-image .face-grid .swatch,
  #setting-custom-watermark .face-grid .swatch {
    width: 63px;
    height: 134px;
    margin: 3px;
  }
}
#setting-custom-card-image .face-grid[data-show="just-ranks"] .swatch.Diamonds,
#setting-custom-watermark .face-grid[data-show="just-ranks"] .swatch.Diamonds,
#setting-custom-card-image .face-grid[data-show="just-ranks"] .swatch.Spades,
#setting-custom-watermark .face-grid[data-show="just-ranks"] .swatch.Spades,
#setting-custom-card-image .face-grid[data-show="just-ranks"] .swatch.Hearts,
#setting-custom-watermark .face-grid[data-show="just-ranks"] .swatch.Hearts,
#setting-custom-card-image .face-grid[data-show="just-ranks"] .swatch.Joker.Low,
#setting-custom-watermark .face-grid[data-show="just-ranks"] .swatch.Joker.Low,
#setting-custom-card-image .face-grid[data-show="just-ranks"] .swatch.Clubs .suit-rank .suit,
#setting-custom-watermark .face-grid[data-show="just-ranks"] .swatch.Clubs .suit-rank .suit,
#setting-custom-card-image .face-grid[data-show="just-ranks"] .swatch.Joker.High .suit-rank .rank,
#setting-custom-watermark .face-grid[data-show="just-ranks"] .swatch.Joker.High .suit-rank .rank {
  display: none;
}
#setting-trump-highlight label.swatch {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  height: auto;
}
#setting-trump-highlight label.swatch > span {
  display: block;
  color: #005a00;
  height: 24px;
}
body[data-board-color="blue"] #setting-trump-highlight label.swatch > span {
  color: #0a3b76;
}
body[data-board-color="red"] #setting-trump-highlight label.swatch > span {
  color: #a01414;
}
body[data-board-color="charcoal"] #setting-trump-highlight label.swatch > span {
  color: #4b4b4b;
}
body[data-board-color="black"] #setting-trump-highlight label.swatch > span {
  color: black;
}
body[data-board-color="white"] #setting-trump-highlight label.swatch > span {
  color: white;
}
#setting-trump-highlight label.swatch input[type="radio"]:checked + span:after {
  position: unset;
  margin-left: 8px;
}
#setting-trump-highlight label.swatch.paleYellow div.face {
  background-color: #fff6cc;
}
#setting-trump-highlight label.swatch.mediumYellow div.face {
  background-color: #fae47b;
}
#setting-trump-highlight label.swatch.gold div.face {
  background-color: gold;
}
#setting-trump-highlight label.swatch.skyBlue div.face {
  background-color: lightskyblue;
}
#setting-trump-highlight label.swatch.lightGreen div.face {
  background-color: lightgreen;
}
#setting-trump-highlight label.swatch.lightRed div.face {
  background-color: #ff99ab;
}
#setting-trump-highlight label.swatch.lightGray div.face {
  background-color: #c5c5c5;
}
#setting-trump-highlight div.card-wrapper div.card {
  display: inline-block;
  position: initial;
}
#setting-trump-highlight div.card-wrapper div.card .face {
  -webkit-box-shadow: none;
          box-shadow: none;
  visibility: inherit;
}
@media (max-width: 479px), (max-height: 479px) {
  #setting-trump-highlight div.card-wrapper {
    height: 175px;
  }
  #setting-trump-highlight div.card-wrapper div.card {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: left top;
            transform-origin: left top;
  }
}
.icon-badge {
  display: inline-block;
  position: relative;
  font-style: normal;
  height: 1.05em;
}
.icon-badge:not(.fa-fw) {
  width: 0.7em;
}
.icon-badge.none {
  display: none;
}
.option .icon-badge.right {
  float: right;
  margin-right: 1.25em;
}
.option .icon-badge.right + .icon-badge.right {
  margin-right: 0.5em;
}
.icon-badge:before,
.icon-badge:after {
  font-family: FontAwesome;
  position: absolute;
  left: 50%;
  top: 0.2em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.icon-badge:before {
  color: rgba(0, 0, 0, 0);
  content: "\f02e";
  text-shadow: none;
}
.dark.icon-badge:before {
  color: rgba(0, 0, 0, 0);
}
.first.icon-badge:before {
  color: gold;
  text-shadow: inherit;
}
.top10.icon-badge:before {
  color: silver;
  text-shadow: inherit;
}
.icon-badge:after {
  content: "\f097";
}
.first.icon-badge:after {
  color: goldenrod;
  text-shadow: none;
}
.top10.icon-badge:after {
  color: grey;
  text-shadow: none;
}
.dark.first.icon-badge:after,
.dark.top10.icon-badge:after {
  color: rgba(0, 0, 0, 0);
}
.icon-chips:before {
  content: "\f1c0";
  font-family: FontAwesome;
  font-size: 80%;
  font-style: normal;
  margin: 0 0.1em 0 0.2em;
  pointer-events: none;
  position: relative;
  top: -0.1em;
}
.fa.icon-chips:before {
  font-size: 90%;
}
.fa-fw.icon-chips:before {
  margin: 0;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOKCnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmOClHrs6ljXfMMLoHQuAj-lg.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOKCnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmOClHrs6ljXfMMLrPQuAj-lg.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmUiA8.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmUiA8.ttf) format('truetype');
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 100;
  src: local("Segoe UI Light");
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 200;
  src: local("Segoe UI Semilight");
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 300;
  src: local("Segoe UI Semilight");
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 400;
  src: local("Segoe UI");
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 500;
  src: local("Segoe UI Semibold");
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 600;
  src: local("Segoe UI Semibold");
}
@font-face {
  font-family: "TricksterWin";
  font-weight: 700;
  src: local("Segoe UI Bold");
}
@font-face {
  font-family: "TricksterWin";
  font-style: italic;
  font-weight: 400;
  src: local("Segoe UI Italic");
}
@font-face {
  font-family: "TricksterWin";
  font-style: italic;
  font-weight: 500;
  src: local("Segoe UI Semibold Italic");
}
@font-face {
  font-family: "TricksterWin";
  font-style: italic;
  font-weight: 600;
  src: local("Segoe UI Semibold Italic");
}
@font-face {
  font-family: "TricksterWin";
  font-style: italic;
  font-weight: 700;
  src: local("Segoe UI Bold Italic");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 100;
  src: local("Segoe WP Light");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 200;
  src: local("Segoe WP SemiLight");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 300;
  src: local("Segoe WP SemiLight");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 400;
  src: local("Segoe WP");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 500;
  src: local("Segoe WP Semibold");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 600;
  src: local("Segoe WP Semibold");
}
@font-face {
  font-family: "TricksterWP";
  font-weight: 700;
  src: local("Segoe WP Bold");
}
@font-face {
  font-family: "TricksterWP";
  font-style: italic;
  font-weight: 400;
  src: local("Segoe WP Italic");
}
@font-face {
  font-family: "TricksterWP";
  font-style: italic;
  font-weight: 500;
  src: local("Segoe WP Semibold Italic");
}
@font-face {
  font-family: "TricksterWP";
  font-style: italic;
  font-weight: 600;
  src: local("Segoe WP Semibold Italic");
}
@font-face {
  font-family: "TricksterWP";
  font-style: italic;
  font-weight: 700;
  src: local("Segoe WP Bold Italic");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 100;
  src: local("HelveticaNeue-Ultralight");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 200;
  src: local("HelveticaNeue-Light");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 300;
  src: local("HelveticaNeue-Light");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 400;
  src: local("HelveticaNeue");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 500;
  src: local("HelveticaNeue-Medium");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 600;
  src: local("HelveticaNeue-Medium");
}
@font-face {
  font-family: "TricksterMac";
  font-weight: 700;
  src: local("HelveticaNeue-Bold");
}
@font-face {
  font-family: "TricksterMac";
  font-style: italic;
  font-weight: 400;
  src: local("HelveticaNeue-Italic");
}
@font-face {
  font-family: "TricksterMac";
  font-style: italic;
  font-weight: 500;
  src: local("HelveticaNeue-Medium-Italic");
}
@font-face {
  font-family: "TricksterMac";
  font-style: italic;
  font-weight: 600;
  src: local("HelveticaNeue-Medium-Italic");
}
@font-face {
  font-family: "TricksterMac";
  font-style: italic;
  font-weight: 700;
  src: local("HelveticaNeue-Bold-Italic");
}
@font-face {
  font-family: "EmoticonFont";
  src: url("/fonts/emoticons.woff") format("woff"), url("/fonts/emoticons.ttf") format("truetype");
}
@font-face {
  font-family: card-font;
  src: url("/fonts/card-font-v2.woff") format("woff"), url("/fonts/card-font-v2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: card-pips;
  src: url("/fonts/card-pips-v2.woff") format("woff"), url("/fonts/card-pips-v2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "pagat-pips";
  src: url("/fonts/pagat-pips.woff") format("woff"), url("/fonts/pagat-pips.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Quickpen";
  src: url("/fonts/scorecard/Quickpen/32FB76_0_0.woff2") format("woff2"), url("/fonts/scorecard/Quickpen/32FB76_0_0.woff") format("woff"), url("/fonts/scorecard/Quickpen/32FB76_0_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Tough Dude";
  src: url("/fonts/scorecard/ToughDude/32FB74_0_0.woff2") format("woff2"), url("/fonts/scorecard/ToughDude/32FB74_0_0.woff") format("woff"), url("/fonts/scorecard/ToughDude/32FB74_0_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Scoreboard";
  src: url("/fonts/scorecard/Scoreboard/scoreboard.woff2") format("woff2"), url("/fonts/scorecard/Scoreboard/scoreboard.woff") format("woff"), url("/fonts/scorecard/Scoreboard/scoreboard.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Sharpie";
  src: url("/fonts/scorecard/Sharpie/32FB72_0_0.woff2") format("woff2"), url("/fonts/scorecard/Sharpie/32FB72_0_0.woff") format("woff"), url("/fonts/scorecard/Sharpie/32FB72_0_0.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@media (max-width: 479px), (max-height: 479px) {
  .is-not-phone {
    display: none !important;
  }
}
@media (min-width: 480px) and (min-height: 480px) {
  .is-phone {
    display: none !important;
  }
}
span + .notrump {
  font-size: 65%;
}
.count-circle {
  background-color: #005a00;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  line-height: 12px;
  min-width: 20px;
  padding: 4px 4px 0;
  pointer-events: none;
  text-align: center;
}
body[data-board-color="blue"] .count-circle {
  background-color: #0a3b76;
}
body[data-board-color="red"] .count-circle {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .count-circle {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .count-circle {
  background-color: black;
}
body[data-board-color="white"] .count-circle {
  background-color: white;
}
.count-circle.corner {
  position: absolute;
  top: 4px;
  right: 4px;
}
input:not(:checked) ~ .count-circle.dark {
  background-color: gold !important;
  color: #004100;
}
body[data-board-color="blue"] input:not(:checked) ~ .count-circle.dark {
  color: #082f5e;
}
body[data-board-color="red"] input:not(:checked) ~ .count-circle.dark {
  color: #891111;
}
body[data-board-color="charcoal"] input:not(:checked) ~ .count-circle.dark {
  color: #3e3e3e;
}
.count-circle + .promo {
  display: none;
}
.count-circle:empty {
  display: none;
}
.count-circle:empty + .promo {
  display: block;
}
.favorite {
  color: #e00000 !important;
  cursor: pointer;
  background-color: transparent !important;
  border: none;
  border-radius: 50%;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
}
.favorite .circle {
  width: 24px;
  line-height: 26px;
  height: 24px;
  font-size: 16px;
  margin: 4px;
  text-align: center;
  background-color: #fff;
  border-radius: 50%;
  -webkit-box-shadow: -1px 1px 5px #555;
          box-shadow: -1px 1px 5px #555;
}
body:not(.touch) .favorite:hover .circle {
  background-color: #fdd;
}
.icon-button {
  border: none;
  border-radius: 50%;
  font-size: 28px;
  height: 42px;
  line-height: 42px;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 0;
  text-align: center;
  width: 42px;
}
.scroller {
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-scroll-chaining: none;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}
.scroller[hidden],
[hidden] .scroller {
  -webkit-overflow-scrolling: auto;
  overflow-y: hidden;
}
.scroller::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
.scroller::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.9);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
}
.scroller::-webkit-scrollbar-thumb:hover,
.scroller::-webkit-scrollbar-thumb:active {
  border-radius: 2px;
  border-width: 1px;
}
.dialog-button,
a.dialog-button.dialog-button {
  background-color: #005a00;
  border-color: #005a00;
  color: white;
}
body[data-board-color="blue"] .dialog-button,
body[data-board-color="blue"] a.dialog-button.dialog-button {
  background-color: #0a3b76;
}
body[data-board-color="red"] .dialog-button,
body[data-board-color="red"] a.dialog-button.dialog-button {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .dialog-button,
body[data-board-color="charcoal"] a.dialog-button.dialog-button {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .dialog-button,
body[data-board-color="black"] a.dialog-button.dialog-button {
  background-color: black;
}
body[data-board-color="white"] .dialog-button,
body[data-board-color="white"] a.dialog-button.dialog-button {
  background-color: white;
}
body[data-board-color="blue"] .dialog-button,
body[data-board-color="blue"] a.dialog-button.dialog-button {
  border-color: #0a3b76;
}
body[data-board-color="red"] .dialog-button,
body[data-board-color="red"] a.dialog-button.dialog-button {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .dialog-button,
body[data-board-color="charcoal"] a.dialog-button.dialog-button {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .dialog-button,
body[data-board-color="black"] a.dialog-button.dialog-button {
  border-color: black;
}
body[data-board-color="white"] .dialog-button,
body[data-board-color="white"] a.dialog-button.dialog-button {
  border-color: white;
}
.dialog-button.dialog-button.cancel,
a.dialog-button.dialog-button.dialog-button.cancel,
.dialog-button.dialog-button[data-action="cancel"],
a.dialog-button.dialog-button.dialog-button[data-action="cancel"] {
  background-color: rgba(0, 0, 0, 0);
  color: #004100;
}
body[data-board-color="blue"] .dialog-button.dialog-button.cancel,
body[data-board-color="blue"] a.dialog-button.dialog-button.dialog-button.cancel,
body[data-board-color="blue"] .dialog-button.dialog-button[data-action="cancel"],
body[data-board-color="blue"] a.dialog-button.dialog-button.dialog-button[data-action="cancel"] {
  color: #082f5e;
}
body[data-board-color="red"] .dialog-button.dialog-button.cancel,
body[data-board-color="red"] a.dialog-button.dialog-button.dialog-button.cancel,
body[data-board-color="red"] .dialog-button.dialog-button[data-action="cancel"],
body[data-board-color="red"] a.dialog-button.dialog-button.dialog-button[data-action="cancel"] {
  color: #891111;
}
body[data-board-color="charcoal"] .dialog-button.dialog-button.cancel,
body[data-board-color="charcoal"] a.dialog-button.dialog-button.dialog-button.cancel,
body[data-board-color="charcoal"] .dialog-button.dialog-button[data-action="cancel"],
body[data-board-color="charcoal"] a.dialog-button.dialog-button.dialog-button[data-action="cancel"] {
  color: #3e3e3e;
}
.dialog-button:focus:not(:disabled),
a.dialog-button.dialog-button:focus:not(:disabled),
.dialog-button:hover:not(:disabled),
a.dialog-button.dialog-button:hover:not(:disabled) {
  background-color: #8bce8b;
  color: #005a00;
  outline: none;
}
body[data-board-color="blue"] .dialog-button:focus:not(:disabled),
body[data-board-color="blue"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="blue"] .dialog-button:hover:not(:disabled),
body[data-board-color="blue"] a.dialog-button.dialog-button:hover:not(:disabled) {
  background-color: #b0becf;
}
body[data-board-color="red"] .dialog-button:focus:not(:disabled),
body[data-board-color="red"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="red"] .dialog-button:hover:not(:disabled),
body[data-board-color="red"] a.dialog-button.dialog-button:hover:not(:disabled) {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .dialog-button:focus:not(:disabled),
body[data-board-color="charcoal"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="charcoal"] .dialog-button:hover:not(:disabled),
body[data-board-color="charcoal"] a.dialog-button.dialog-button:hover:not(:disabled) {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .dialog-button:focus:not(:disabled),
body[data-board-color="black"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="black"] .dialog-button:hover:not(:disabled),
body[data-board-color="black"] a.dialog-button.dialog-button:hover:not(:disabled) {
  background-color: black;
}
body[data-board-color="white"] .dialog-button:focus:not(:disabled),
body[data-board-color="white"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="white"] .dialog-button:hover:not(:disabled),
body[data-board-color="white"] a.dialog-button.dialog-button:hover:not(:disabled) {
  background-color: white;
}
body[data-board-color="blue"] .dialog-button:focus:not(:disabled),
body[data-board-color="blue"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="blue"] .dialog-button:hover:not(:disabled),
body[data-board-color="blue"] a.dialog-button.dialog-button:hover:not(:disabled) {
  color: #0a3b76;
}
body[data-board-color="red"] .dialog-button:focus:not(:disabled),
body[data-board-color="red"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="red"] .dialog-button:hover:not(:disabled),
body[data-board-color="red"] a.dialog-button.dialog-button:hover:not(:disabled) {
  color: #a01414;
}
body[data-board-color="charcoal"] .dialog-button:focus:not(:disabled),
body[data-board-color="charcoal"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="charcoal"] .dialog-button:hover:not(:disabled),
body[data-board-color="charcoal"] a.dialog-button.dialog-button:hover:not(:disabled) {
  color: #4b4b4b;
}
body[data-board-color="black"] .dialog-button:focus:not(:disabled),
body[data-board-color="black"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="black"] .dialog-button:hover:not(:disabled),
body[data-board-color="black"] a.dialog-button.dialog-button:hover:not(:disabled) {
  color: black;
}
body[data-board-color="white"] .dialog-button:focus:not(:disabled),
body[data-board-color="white"] a.dialog-button.dialog-button:focus:not(:disabled),
body[data-board-color="white"] .dialog-button:hover:not(:disabled),
body[data-board-color="white"] a.dialog-button.dialog-button:hover:not(:disabled) {
  color: white;
}
.dialog-button:focus:not(:disabled):active,
a.dialog-button.dialog-button:focus:not(:disabled):active,
.dialog-button:hover:not(:disabled):active,
a.dialog-button.dialog-button:hover:not(:disabled):active {
  color: #005a00;
  background-color: white !important;
}
body[data-board-color="blue"] .dialog-button:focus:not(:disabled):active,
body[data-board-color="blue"] a.dialog-button.dialog-button:focus:not(:disabled):active,
body[data-board-color="blue"] .dialog-button:hover:not(:disabled):active,
body[data-board-color="blue"] a.dialog-button.dialog-button:hover:not(:disabled):active {
  color: #0a3b76;
}
body[data-board-color="red"] .dialog-button:focus:not(:disabled):active,
body[data-board-color="red"] a.dialog-button.dialog-button:focus:not(:disabled):active,
body[data-board-color="red"] .dialog-button:hover:not(:disabled):active,
body[data-board-color="red"] a.dialog-button.dialog-button:hover:not(:disabled):active {
  color: #a01414;
}
body[data-board-color="charcoal"] .dialog-button:focus:not(:disabled):active,
body[data-board-color="charcoal"] a.dialog-button.dialog-button:focus:not(:disabled):active,
body[data-board-color="charcoal"] .dialog-button:hover:not(:disabled):active,
body[data-board-color="charcoal"] a.dialog-button.dialog-button:hover:not(:disabled):active {
  color: #4b4b4b;
}
body[data-board-color="black"] .dialog-button:focus:not(:disabled):active,
body[data-board-color="black"] a.dialog-button.dialog-button:focus:not(:disabled):active,
body[data-board-color="black"] .dialog-button:hover:not(:disabled):active,
body[data-board-color="black"] a.dialog-button.dialog-button:hover:not(:disabled):active {
  color: black;
}
body[data-board-color="white"] .dialog-button:focus:not(:disabled):active,
body[data-board-color="white"] a.dialog-button.dialog-button:focus:not(:disabled):active,
body[data-board-color="white"] .dialog-button:hover:not(:disabled):active,
body[data-board-color="white"] a.dialog-button.dialog-button:hover:not(:disabled):active {
  color: white;
}
.dialog-button:disabled,
a.dialog-button.dialog-button:disabled {
  border-color: #005a00;
  opacity: 0.5;
}
body[data-board-color="blue"] .dialog-button:disabled,
body[data-board-color="blue"] a.dialog-button.dialog-button:disabled {
  border-color: #0a3b76;
}
body[data-board-color="red"] .dialog-button:disabled,
body[data-board-color="red"] a.dialog-button.dialog-button:disabled {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .dialog-button:disabled,
body[data-board-color="charcoal"] a.dialog-button.dialog-button:disabled {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .dialog-button:disabled,
body[data-board-color="black"] a.dialog-button.dialog-button:disabled {
  border-color: black;
}
body[data-board-color="white"] .dialog-button:disabled,
body[data-board-color="white"] a.dialog-button.dialog-button:disabled {
  border-color: white;
}
.share-link {
  font-size: 28px;
  line-height: 36px;
  text-decoration: none !important;
}
.share-link:hover {
  opacity: 0.75;
}
.share-link.share-copy .fa-square {
  position: relative;
}
.share-link.share-copy .fa-copy {
  color: #e6ece6;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -55%) scale(0.6);
          transform: translate(-50%, -55%) scale(0.6);
}
body[data-board-color="blue"] .share-link.share-copy .fa-copy {
  color: #e7eaee;
}
body[data-board-color="red"] .share-link.share-copy .fa-copy {
  color: #f1e7e7;
}
body[data-board-color="charcoal"] .share-link.share-copy .fa-copy {
  color: #ebebeb;
}
body[data-board-color="black"] .share-link.share-copy .fa-copy {
  color: black;
}
body[data-board-color="white"] .share-link.share-copy .fa-copy {
  color: white;
}
.share-link.share-facebook {
  color: #3b579d !important;
}
.share-link.share-instagram {
  color: transparent !important;
}
.share-link.share-instagram .fa-instagram:before {
  background: #dc2743;
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.share-link.share-sms .fa-square {
  position: relative;
}
.share-link.share-sms .fa-comment {
  color: #e6ece6;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -55%) scale(0.6);
          transform: translate(-50%, -55%) scale(0.6);
}
body[data-board-color="blue"] .share-link.share-sms .fa-comment {
  color: #e7eaee;
}
body[data-board-color="red"] .share-link.share-sms .fa-comment {
  color: #f1e7e7;
}
body[data-board-color="charcoal"] .share-link.share-sms .fa-comment {
  color: #ebebeb;
}
body[data-board-color="black"] .share-link.share-sms .fa-comment {
  color: black;
}
body[data-board-color="white"] .share-link.share-sms .fa-comment {
  color: white;
}
.share-link.share-youtube {
  color: #dd0000 !important;
}
.tip {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 320px;
}
.tip .header {
  border-bottom-color: #8bce8b;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-weight: 500;
  padding-bottom: 1px;
}
body[data-board-color="blue"] .tip .header {
  border-bottom-color: #b0becf;
}
body[data-board-color="red"] .tip .header {
  border-bottom-color: #e0d3d3;
}
body[data-board-color="charcoal"] .tip .header {
  border-bottom-color: #cbcbcb;
}
body[data-board-color="black"] .tip .header {
  border-bottom-color: black;
}
body[data-board-color="white"] .tip .header {
  border-bottom-color: white;
}
.tip .header .more {
  color: #005a00;
  cursor: pointer;
  float: right;
  font-size: 14px;
  padding-top: 1px;
}
body[data-board-color="blue"] .tip .header .more {
  color: #0a3b76;
}
body[data-board-color="red"] .tip .header .more {
  color: #a01414;
}
body[data-board-color="charcoal"] .tip .header .more {
  color: #4b4b4b;
}
body[data-board-color="black"] .tip .header .more {
  color: black;
}
body[data-board-color="white"] .tip .header .more {
  color: white;
}
.tip .message {
  padding: 4px 0;
}
.toast {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  background-color: #fff;
  border-radius: 0 0 7px 7px;
  -webkit-box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.5);
          box-shadow: -2px 2px 6px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  max-width: 95%;
  opacity: 1;
  overflow: hidden;
  padding: 12px;
  position: absolute;
  left: 50%;
  text-align: center;
  top: 0;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 450px;
  z-index: 0;
}
.toast.with-tile {
  background-color: transparent;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  max-width: none;
  overflow: visible;
  padding: 0;
  width: auto;
}
@media (max-width: 479px), (max-height: 479px) {
  .toast {
    padding: 8px;
  }
}
body[data-layout="snapped"] .toast {
  margin-left: -160px;
}
.toast[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, transform, visibility;
  transition-property: opacity, transform, visibility, -webkit-transform;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  visibility: hidden;
}
.toast h1 {
  font-size: 18px;
  margin: 0;
}
@media (max-width: 479px), (max-height: 479px) {
  .toast h1 {
    font-size: 16px;
  }
}
.toast h1:empty {
  display: none;
}
.toast p {
  font-size: 16px;
  margin: 0;
}
@media (max-width: 479px), (max-height: 479px) {
  .toast p {
    font-size: 14px;
  }
}
.toast p.string {
  white-space: pre-line;
}
.toast p table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  margin: 0 auto;
  width: 100%;
}
.toast p table td {
  vertical-align: middle;
  padding: 0 8px;
}
.toast p table td:first-child {
  padding-left: 0;
}
.toast p table td:last-child {
  padding-right: 0;
  padding-top: 1px;
}
.toast p button,
.toast p a.link-button {
  background-color: #005a00;
  border-color: #005a00;
  color: white;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 3px;
}
body[data-board-color="blue"] .toast p button,
body[data-board-color="blue"] .toast p a.link-button {
  background-color: #0a3b76;
}
body[data-board-color="red"] .toast p button,
body[data-board-color="red"] .toast p a.link-button {
  background-color: #a01414;
}
body[data-board-color="charcoal"] .toast p button,
body[data-board-color="charcoal"] .toast p a.link-button {
  background-color: #4b4b4b;
}
body[data-board-color="black"] .toast p button,
body[data-board-color="black"] .toast p a.link-button {
  background-color: black;
}
body[data-board-color="white"] .toast p button,
body[data-board-color="white"] .toast p a.link-button {
  background-color: white;
}
body[data-board-color="blue"] .toast p button,
body[data-board-color="blue"] .toast p a.link-button {
  border-color: #0a3b76;
}
body[data-board-color="red"] .toast p button,
body[data-board-color="red"] .toast p a.link-button {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .toast p button,
body[data-board-color="charcoal"] .toast p a.link-button {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .toast p button,
body[data-board-color="black"] .toast p a.link-button {
  border-color: black;
}
body[data-board-color="white"] .toast p button,
body[data-board-color="white"] .toast p a.link-button {
  border-color: white;
}
.toast p button.dialog-button.cancel,
.toast p a.link-button.dialog-button.cancel,
.toast p button.dialog-button[data-action="cancel"],
.toast p a.link-button.dialog-button[data-action="cancel"] {
  background-color: rgba(0, 0, 0, 0);
  color: #004100;
}
body[data-board-color="blue"] .toast p button.dialog-button.cancel,
body[data-board-color="blue"] .toast p a.link-button.dialog-button.cancel,
body[data-board-color="blue"] .toast p button.dialog-button[data-action="cancel"],
body[data-board-color="blue"] .toast p a.link-button.dialog-button[data-action="cancel"] {
  color: #082f5e;
}
body[data-board-color="red"] .toast p button.dialog-button.cancel,
body[data-board-color="red"] .toast p a.link-button.dialog-button.cancel,
body[data-board-color="red"] .toast p button.dialog-button[data-action="cancel"],
body[data-board-color="red"] .toast p a.link-button.dialog-button[data-action="cancel"] {
  color: #891111;
}
body[data-board-color="charcoal"] .toast p button.dialog-button.cancel,
body[data-board-color="charcoal"] .toast p a.link-button.dialog-button.cancel,
body[data-board-color="charcoal"] .toast p button.dialog-button[data-action="cancel"],
body[data-board-color="charcoal"] .toast p a.link-button.dialog-button[data-action="cancel"] {
  color: #3e3e3e;
}
.toast p button:focus:not(:disabled),
.toast p a.link-button:focus:not(:disabled),
.toast p button:hover:not(:disabled),
.toast p a.link-button:hover:not(:disabled) {
  background-color: #8bce8b;
  color: #005a00;
  outline: none;
}
body[data-board-color="blue"] .toast p button:focus:not(:disabled),
body[data-board-color="blue"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="blue"] .toast p button:hover:not(:disabled),
body[data-board-color="blue"] .toast p a.link-button:hover:not(:disabled) {
  background-color: #b0becf;
}
body[data-board-color="red"] .toast p button:focus:not(:disabled),
body[data-board-color="red"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="red"] .toast p button:hover:not(:disabled),
body[data-board-color="red"] .toast p a.link-button:hover:not(:disabled) {
  background-color: #e0d3d3;
}
body[data-board-color="charcoal"] .toast p button:focus:not(:disabled),
body[data-board-color="charcoal"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="charcoal"] .toast p button:hover:not(:disabled),
body[data-board-color="charcoal"] .toast p a.link-button:hover:not(:disabled) {
  background-color: #cbcbcb;
}
body[data-board-color="black"] .toast p button:focus:not(:disabled),
body[data-board-color="black"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="black"] .toast p button:hover:not(:disabled),
body[data-board-color="black"] .toast p a.link-button:hover:not(:disabled) {
  background-color: black;
}
body[data-board-color="white"] .toast p button:focus:not(:disabled),
body[data-board-color="white"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="white"] .toast p button:hover:not(:disabled),
body[data-board-color="white"] .toast p a.link-button:hover:not(:disabled) {
  background-color: white;
}
body[data-board-color="blue"] .toast p button:focus:not(:disabled),
body[data-board-color="blue"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="blue"] .toast p button:hover:not(:disabled),
body[data-board-color="blue"] .toast p a.link-button:hover:not(:disabled) {
  color: #0a3b76;
}
body[data-board-color="red"] .toast p button:focus:not(:disabled),
body[data-board-color="red"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="red"] .toast p button:hover:not(:disabled),
body[data-board-color="red"] .toast p a.link-button:hover:not(:disabled) {
  color: #a01414;
}
body[data-board-color="charcoal"] .toast p button:focus:not(:disabled),
body[data-board-color="charcoal"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="charcoal"] .toast p button:hover:not(:disabled),
body[data-board-color="charcoal"] .toast p a.link-button:hover:not(:disabled) {
  color: #4b4b4b;
}
body[data-board-color="black"] .toast p button:focus:not(:disabled),
body[data-board-color="black"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="black"] .toast p button:hover:not(:disabled),
body[data-board-color="black"] .toast p a.link-button:hover:not(:disabled) {
  color: black;
}
body[data-board-color="white"] .toast p button:focus:not(:disabled),
body[data-board-color="white"] .toast p a.link-button:focus:not(:disabled),
body[data-board-color="white"] .toast p button:hover:not(:disabled),
body[data-board-color="white"] .toast p a.link-button:hover:not(:disabled) {
  color: white;
}
.toast p button:focus:not(:disabled):active,
.toast p a.link-button:focus:not(:disabled):active,
.toast p button:hover:not(:disabled):active,
.toast p a.link-button:hover:not(:disabled):active {
  color: #005a00;
  background-color: white !important;
}
body[data-board-color="blue"] .toast p button:focus:not(:disabled):active,
body[data-board-color="blue"] .toast p a.link-button:focus:not(:disabled):active,
body[data-board-color="blue"] .toast p button:hover:not(:disabled):active,
body[data-board-color="blue"] .toast p a.link-button:hover:not(:disabled):active {
  color: #0a3b76;
}
body[data-board-color="red"] .toast p button:focus:not(:disabled):active,
body[data-board-color="red"] .toast p a.link-button:focus:not(:disabled):active,
body[data-board-color="red"] .toast p button:hover:not(:disabled):active,
body[data-board-color="red"] .toast p a.link-button:hover:not(:disabled):active {
  color: #a01414;
}
body[data-board-color="charcoal"] .toast p button:focus:not(:disabled):active,
body[data-board-color="charcoal"] .toast p a.link-button:focus:not(:disabled):active,
body[data-board-color="charcoal"] .toast p button:hover:not(:disabled):active,
body[data-board-color="charcoal"] .toast p a.link-button:hover:not(:disabled):active {
  color: #4b4b4b;
}
body[data-board-color="black"] .toast p button:focus:not(:disabled):active,
body[data-board-color="black"] .toast p a.link-button:focus:not(:disabled):active,
body[data-board-color="black"] .toast p button:hover:not(:disabled):active,
body[data-board-color="black"] .toast p a.link-button:hover:not(:disabled):active {
  color: black;
}
body[data-board-color="white"] .toast p button:focus:not(:disabled):active,
body[data-board-color="white"] .toast p a.link-button:focus:not(:disabled):active,
body[data-board-color="white"] .toast p button:hover:not(:disabled):active,
body[data-board-color="white"] .toast p a.link-button:hover:not(:disabled):active {
  color: white;
}
.toast p button:disabled,
.toast p a.link-button:disabled {
  border-color: #005a00;
  opacity: 0.5;
}
body[data-board-color="blue"] .toast p button:disabled,
body[data-board-color="blue"] .toast p a.link-button:disabled {
  border-color: #0a3b76;
}
body[data-board-color="red"] .toast p button:disabled,
body[data-board-color="red"] .toast p a.link-button:disabled {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .toast p button:disabled,
body[data-board-color="charcoal"] .toast p a.link-button:disabled {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .toast p button:disabled,
body[data-board-color="black"] .toast p a.link-button:disabled {
  border-color: black;
}
body[data-board-color="white"] .toast p button:disabled,
body[data-board-color="white"] .toast p a.link-button:disabled {
  border-color: white;
}
.toast a[href] {
  color: #005a00;
  text-decoration: underline;
}
body[data-board-color="blue"] .toast a[href] {
  color: #0a3b76;
}
body[data-board-color="red"] .toast a[href] {
  color: #a01414;
}
body[data-board-color="charcoal"] .toast a[href] {
  color: #4b4b4b;
}
body[data-board-color="black"] .toast a[href] {
  color: black;
}
body[data-board-color="white"] .toast a[href] {
  color: white;
}
.toast input[type=checkbox] {
  border-color: #005a00;
  border-width: 1px;
  border-style: solid;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-right: 0.5em;
  margin-left: 0;
}
body[data-board-color="blue"] .toast input[type=checkbox] {
  border-color: #0a3b76;
}
body[data-board-color="red"] .toast input[type=checkbox] {
  border-color: #a01414;
}
body[data-board-color="charcoal"] .toast input[type=checkbox] {
  border-color: #4b4b4b;
}
body[data-board-color="black"] .toast input[type=checkbox] {
  border-color: black;
}
body[data-board-color="white"] .toast input[type=checkbox] {
  border-color: white;
}
.toast tr.cancel-row td {
  padding-top: 5px;
  text-align: left;
}
.toast tr.cancel-row td label {
  background-color: #c5e0c5;
  display: block;
  margin: 8px -28px -12px;
  padding: 4px 28px 10px;
}
body[data-board-color="blue"] .toast tr.cancel-row td label {
  background-color: #e2e5e9;
}
body[data-board-color="red"] .toast tr.cancel-row td label {
  background-color: #ffffff;
}
body[data-board-color="charcoal"] .toast tr.cancel-row td label {
  background-color: #f1f1f1;
}
body[data-board-color="black"] .toast tr.cancel-row td label {
  background-color: black;
}
body[data-board-color="white"] .toast tr.cancel-row td label {
  background-color: white;
}
@media (max-width: 479px), (max-height: 479px) {
  .toast tr.cancel-row td label {
    margin: 6px -24px -8px;
    padding: 0px 24px 6px;
  }
}
.toast tr.cancel-row td .cancel-activity {
  font-weight: 500;
}
#menu #transactions a.gift-code {
  display: block;
}
#menu #transactions .paging-section,
#menu #transactions .bottom-paging-section {
  margin-top: 20px;
}
#menu #transactions .paging-section table,
#menu #transactions .bottom-paging-section table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  width: auto;
}
#menu #transactions .paging-section td,
#menu #transactions .bottom-paging-section td {
  line-height: 2em;
  padding: 0;
  vertical-align: baseline;
  text-align: left;
  border: none;
}
#menu #transactions .paging-section td a,
#menu #transactions .bottom-paging-section td a {
  border-color: rgba(0, 90, 0, 0.25);
  border-style: solid;
  border-width: 1px;
  margin-right: 4px;
  padding: 0px 6px 2px;
  text-decoration: none;
}
body[data-board-color="blue"] #menu #transactions .paging-section td a,
body[data-board-color="blue"] #menu #transactions .bottom-paging-section td a {
  border-color: rgba(10, 59, 118, 0.25);
}
body[data-board-color="red"] #menu #transactions .paging-section td a,
body[data-board-color="red"] #menu #transactions .bottom-paging-section td a {
  border-color: rgba(160, 20, 20, 0.25);
}
body[data-board-color="charcoal"] #menu #transactions .paging-section td a,
body[data-board-color="charcoal"] #menu #transactions .bottom-paging-section td a {
  border-color: rgba(75, 75, 75, 0.25);
}
#menu #transactions .paging-section td a.current,
#menu #transactions .bottom-paging-section td a.current {
  background-color: rgba(0, 90, 0, 0.25);
  border-color: #004100;
}
body[data-board-color="blue"] #menu #transactions .paging-section td a.current,
body[data-board-color="blue"] #menu #transactions .bottom-paging-section td a.current {
  background-color: rgba(10, 59, 118, 0.25);
}
body[data-board-color="red"] #menu #transactions .paging-section td a.current,
body[data-board-color="red"] #menu #transactions .bottom-paging-section td a.current {
  background-color: rgba(160, 20, 20, 0.25);
}
body[data-board-color="charcoal"] #menu #transactions .paging-section td a.current,
body[data-board-color="charcoal"] #menu #transactions .bottom-paging-section td a.current {
  background-color: rgba(75, 75, 75, 0.25);
}
body[data-board-color="blue"] #menu #transactions .paging-section td a.current,
body[data-board-color="blue"] #menu #transactions .bottom-paging-section td a.current {
  border-color: #082f5e;
}
body[data-board-color="red"] #menu #transactions .paging-section td a.current,
body[data-board-color="red"] #menu #transactions .bottom-paging-section td a.current {
  border-color: #891111;
}
body[data-board-color="charcoal"] #menu #transactions .paging-section td a.current,
body[data-board-color="charcoal"] #menu #transactions .bottom-paging-section td a.current {
  border-color: #3e3e3e;
}
#menu #transactions .limit-transactions-section {
  margin-top: 10px;
}
#menu #transactions .limit-transactions-section label {
  display: block;
}
#menu #transactions .limit-transactions-section label select {
  margin-top: 2px;
  display: block;
}
#menu #transactions .register-section {
  position: relative;
}
#menu #transactions .register-section .register-loading {
  color: #005a00;
  font-size: 28px;
  left: 0;
  padding-top: 1.5in;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}
body[data-board-color="blue"] #menu #transactions .register-section .register-loading {
  color: #0a3b76;
}
body[data-board-color="red"] #menu #transactions .register-section .register-loading {
  color: #a01414;
}
body[data-board-color="charcoal"] #menu #transactions .register-section .register-loading {
  color: #4b4b4b;
}
body[data-board-color="black"] #menu #transactions .register-section .register-loading {
  color: black;
}
body[data-board-color="white"] #menu #transactions .register-section .register-loading {
  color: white;
}
#menu #transactions .register-section .register-loading[hidden] {
  display: none;
}
#menu #transactions .register-section .register-content[hidden] {
  display: block;
  visibility: hidden;
}
#menu #transactions .history-section h2 {
  margin: 20px 0 2px;
}
#menu #transactions .history-section table {
  margin-top: 0;
}
#menu #transactions .history-section table td,
#menu #transactions .history-section table th {
  padding-bottom: 5px;
  padding-left: 4px;
  padding-right: 0;
  padding-top: 2px;
  text-align: right;
  vertical-align: middle;
}
@media (max-width: 479px), (max-height: 479px) {
  #menu #transactions .history-section table td,
  #menu #transactions .history-section table th {
    font-size: 14px;
  }
}
#menu #transactions .history-section table td:first-child,
#menu #transactions .history-section table th:first-child {
  padding-left: 0;
  text-align: left;
}
#menu #transactions .history-section table td .description,
#menu #transactions .history-section table th .description {
  display: block;
  line-height: 1.1;
  margin-left: 1em;
  padding-bottom: 3px;
  text-indent: -1em;
}
#menu #transactions .history-section table td .date,
#menu #transactions .history-section table th .date {
  font-size: 12px;
}
#menu #transactions .history-section table td.fail div,
#menu #transactions .history-section table th.fail div {
  color: #666;
  font-size: 14px;
  padding-top: 8px;
}
.unique-name {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  max-width: 100%;
  white-space: nowrap;
}
.unique-name > .icon-badge {
  display: inline-block;
  margin-right: 0.4em;
  top: -3px;
}
.unique-name > .icon-badge.none {
  display: none;
  margin-right: 0;
}
.unique-name > .unique-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
  margin: -2px;
}
.unique-name > .unique-name-id {
  position: relative;
}
.is-vip-with-count.unique-name > .unique-name-id {
  top: -4px;
  min-width: 25px;
}
.unique-name > .unique-name-id > .super {
  -webkit-font-feature-settings: "pnum" 1, "tnum" 0;
          font-feature-settings: "pnum" 1, "tnum" 0;
  font-size: 0.6em;
  line-height: 1;
  vertical-align: super;
}
.unique-name > .unique-name-id > .super > .fa-user {
  margin-left: 0.2em;
  margin-right: 0.2em;
}
.unique-name > .unique-name-id > .super > .unique-name-count.infinity {
  font-size: 1.75em;
  line-height: 0;
  position: relative;
  top: 0.15em;
}
.unique-name > .unique-name-id > .vip-badge.vip-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  margin-left: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.unique-name .vip-badge.vip-badge {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  font-size: 100%;
  margin-left: 0.3em;
  margin-right: 0;
  position: static;
}
.unique-name .vip-badge.vip-badge:before {
  width: 100%;
  height: 100%;
}
.vip-badge {
  display: inline-block;
  height: 1em;
}
.vip-badge:not(.fa-fw) {
  margin: 0 0.5em;
  width: 1.5em;
}
.vip-badge[hidden] {
  display: none;
}
.vip-badge:before {
  content: "";
  display: block;
  width: 125%;
  height: 125%;
  background-image: url("data:image/svg+xml,\
        %3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='88' viewBox='0 0 132 88'%3E\
            %3Cdefs%3E\
                %3ClinearGradient id='g' gradientTransform='rotate(45)'%3E\
                    %3Cstop offset='0%25' stop-color='%23008000'/%3E\
                    %3Cstop offset='50%25' stop-color='%23008000'/%3E\
                    %3Cstop offset='50%25' stop-color='%23006700'/%3E\
                    %3Cstop offset='100%25' stop-color='%23006700'/%3E\
                %3C/linearGradient%3E\
            %3C/defs%3E\
            %3Crect rx='15%25' width='124' height='80' fill='url(%23g)' stroke='%23fff000' stroke-width='8' x='4' y='4'/%3E\
            %3Ctext x='50%25' y='50%25' dy='0.35em' font-family='Trebuchet MS' fill='%23fff000' text-anchor='middle' font-size='380%25' font-weight='600'%3E\
                VIP\
            %3C/text%3E\
        %3C/svg%3E\
    ");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 20%;
  -webkit-box-shadow: 0px 0px 2px #000;
          box-shadow: 0px 0px 2px #000;
}
.fa-fw.vip-badge:before {
  margin-left: -20%;
  margin-right: 0;
  width: 140%;
}
html,
body {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #000;
  overflow: hidden;
}
html.use-safe-area {
  bottom: env(safe-area-inset-bottom, 0);
  left: env(safe-area-inset-left, 0);
  right: env(safe-area-inset-right, 0);
  top: env(safe-area-inset-top, 0);
}
body {
  color: white;
  cursor: default;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-high-contrast-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
}
body,
select {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
}
input,
textarea {
  font-family: TricksterWP, TricksterWin, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
}
input::-webkit-input-placeholder {
  color: #ccc;
}
input::-ms-input-placeholder {
  color: #ccc;
}
input::placeholder {
  color: #ccc;
}
button {
  font: inherit;
  font-family: Arial, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
  font-weight: 500;
}
select::-ms-expand {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding-left: 5px;
  padding-top: 5px;
}
[hidden] {
  display: none;
}
[hidden].fa-spin,
[hidden] .fa-spin {
  -webkit-animation: none;
          animation: none;
}
a[href] {
  color: yellow;
  text-decoration: none;
}
a[href]:hover {
  text-decoration: underline;
}
a[href] img {
  border: none;
}
#screens {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #005a00;
  background-position: center 40%;
  background-repeat: no-repeat;
  -ms-touch-action: none;
      touch-action: none;
}
body[data-board-color="blue"] #screens {
  background-color: #0a3b76;
}
body[data-board-color="red"] #screens {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #screens {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #screens {
  background-color: black;
}
body[data-board-color="white"] #screens {
  background-color: white;
}
#screens .watermark {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
[data-watermark="cards"]#screens .watermark {
  background-image: url("/image/cards-watermark-cards.png?rev=1");
}
[data-watermark="circle"]#screens .watermark {
  background-image: url("/image/circle-watermark.png?rev=1");
}
[data-watermark="logo"]#screens .watermark {
  background-image: url("/image/cards-watermark.png?rev=1");
}
body[data-game-code="Hearts"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/hearts-watermark.png?rev=1");
}
body[data-game-code="Spades"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/spades-watermark.png?rev=1");
}
body[data-game-code="Euchre"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/euchre-watermark.png?rev=1");
}
body[data-game-code="Pitch"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/pitch-watermark.png?rev=1");
}
body[data-game-code="Pinochle"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/pinochle-watermark.png?rev=1");
}
body[data-game-code="Bridge"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/bridge-watermark.png?rev=1");
}
body[data-game-code="FiveHundred"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/fivehundred-watermark.png?rev=1");
}
body[data-game-code="OhHell"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/ohhell-watermark.png?rev=1");
}
body[data-game-code="Whist"] [data-watermark="game"]#screens .watermark {
  background-image: url("/image/whist-watermark.png?rev=1");
}
body[data-board-color=green][data-use-gradient=true] #screens {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #008d00 0, #000000 100%);
  background-image: radial-gradient(ellipse at center 40%, #008d00 0, #000000 100%);
}
body[data-board-color=green][data-use-gradient=vertical] #screens {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#003400), to(#007400));
  background-image: -webkit-linear-gradient(bottom, #003400, #007400);
  background-image: linear-gradient(0deg, #003400, #007400);
}
body[data-board-color=blue][data-use-gradient=true] #screens {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #0e53a5 0, #020c18 100%);
  background-image: radial-gradient(ellipse at center 40%, #0e53a5 0, #020c18 100%);
}
body[data-board-color=blue][data-use-gradient=vertical] #screens {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#062347), to(#0e53a5));
  background-image: -webkit-linear-gradient(bottom, #062347, #0e53a5);
  background-image: linear-gradient(0deg, #062347, #0e53a5);
}
body[data-board-color=red][data-use-gradient=true] #screens {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #cd1a1a 0, #450909 100%);
  background-image: radial-gradient(ellipse at center 40%, #cd1a1a 0, #450909 100%);
}
body[data-board-color=red][data-use-gradient=vertical] #screens {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#5c0b0b), to(#a01414));
  background-image: -webkit-linear-gradient(bottom, #5c0b0b, #a01414);
  background-image: linear-gradient(0deg, #5c0b0b, #a01414);
}
body[data-board-color=charcoal][data-use-gradient=true] #screens {
  background-image: -webkit-radial-gradient(center 40%, ellipse, #656565 0, #181818 100%);
  background-image: radial-gradient(ellipse at center 40%, #656565 0, #181818 100%);
}
body[data-board-color=charcoal][data-use-gradient=vertical] #screens {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#323232), to(#656565));
  background-image: -webkit-linear-gradient(bottom, #323232, #656565);
  background-image: linear-gradient(0deg, #323232, #656565);
}
#position {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
@media (max-width: 479px) {
  #position {
    top: 42px;
  }
}
body[data-layout="snapped"] #position {
  right: 320px;
}
#main-content {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
}
@media (orientation: portrait) {
  body.lesson #main-content,
  body.video #main-content {
    top: 33.333vw;
  }
}
@media (orientation: landscape) {
  body.lesson #main-content,
  body.video #main-content {
    right: 33.333vh;
  }
}
#screens {
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #005a00;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  z-index: 0;
}
body[data-board-color="blue"] #screens {
  background-color: #0a3b76;
}
body[data-board-color="red"] #screens {
  background-color: #a01414;
}
body[data-board-color="charcoal"] #screens {
  background-color: #4b4b4b;
}
body[data-board-color="black"] #screens {
  background-color: black;
}
body[data-board-color="white"] #screens {
  background-color: white;
}
@media (max-width: 479px) {
  #screens {
    top: 42px;
  }
}
body[data-layout="snapped"] #screens {
  right: 320px;
}
#screens > section {
  display: block;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
#screens > section[hidden] {
  display: block;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  visibility: hidden;
}
.nowrap {
  white-space: nowrap;
}
@media (max-width: 479px), (max-height: 479px) {
  .not-phone {
    display: none;
  }
}
body:not([data-brand="Cards"]) .cards-only {
  display: none !important;
}
body[data-app="ios"] .not-ios-app {
  display: none !important;
}
.fineprint {
  font-size: 12px;
}
.overlay {
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}
.overlay div {
  background-color: #004100;
  border: 1px solid #fff;
  border-radius: 5px;
  left: 50%;
  line-height: 1;
  opacity: 0.95;
  padding: 8px 20px 12px;
  position: absolute;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
body[data-board-color="blue"] .overlay div {
  background-color: #082f5e;
}
body[data-board-color="red"] .overlay div {
  background-color: #891111;
}
body[data-board-color="charcoal"] .overlay div {
  background-color: #3e3e3e;
}
@media (max-width: 479px) {
  .overlay div {
    -webkit-transform: translate(-50%, -50%) translateY(42px);
            transform: translate(-50%, -50%) translateY(42px);
  }
}
button,
input[type=button],
input[type=submit],
a.link-button,
a.dialog-button {
  font-family: Arial, TricksterMac, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid white;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: white;
  min-height: 32px;
  min-width: 90px;
  padding: 4px 8px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
}
button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
a.link-button:disabled,
a.dialog-button:disabled {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}
button:hover:not(:disabled),
input[type=button]:hover:not(:disabled),
input[type=submit]:hover:not(:disabled),
a.link-button:hover:not(:disabled),
a.dialog-button:hover:not(:disabled),
button:focus:not(:disabled),
input[type=button]:focus:not(:disabled),
input[type=submit]:focus:not(:disabled),
a.link-button:focus:not(:disabled),
a.dialog-button:focus:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
}
button:hover:not(:disabled):active,
input[type=button]:hover:not(:disabled):active,
input[type=submit]:hover:not(:disabled):active,
a.link-button:hover:not(:disabled):active,
a.dialog-button:hover:not(:disabled):active,
button:focus:not(:disabled):active,
input[type=button]:focus:not(:disabled):active,
input[type=submit]:focus:not(:disabled):active,
a.link-button:focus:not(:disabled):active,
a.dialog-button:focus:not(:disabled):active {
  color: #005a00;
  background-color: white;
}
body[data-board-color="blue"] button:hover:not(:disabled):active,
body[data-board-color="blue"] input[type=button]:hover:not(:disabled):active,
body[data-board-color="blue"] input[type=submit]:hover:not(:disabled):active,
body[data-board-color="blue"] a.link-button:hover:not(:disabled):active,
body[data-board-color="blue"] a.dialog-button:hover:not(:disabled):active,
body[data-board-color="blue"] button:focus:not(:disabled):active,
body[data-board-color="blue"] input[type=button]:focus:not(:disabled):active,
body[data-board-color="blue"] input[type=submit]:focus:not(:disabled):active,
body[data-board-color="blue"] a.link-button:focus:not(:disabled):active,
body[data-board-color="blue"] a.dialog-button:focus:not(:disabled):active {
  color: #0a3b76;
}
body[data-board-color="red"] button:hover:not(:disabled):active,
body[data-board-color="red"] input[type=button]:hover:not(:disabled):active,
body[data-board-color="red"] input[type=submit]:hover:not(:disabled):active,
body[data-board-color="red"] a.link-button:hover:not(:disabled):active,
body[data-board-color="red"] a.dialog-button:hover:not(:disabled):active,
body[data-board-color="red"] button:focus:not(:disabled):active,
body[data-board-color="red"] input[type=button]:focus:not(:disabled):active,
body[data-board-color="red"] input[type=submit]:focus:not(:disabled):active,
body[data-board-color="red"] a.link-button:focus:not(:disabled):active,
body[data-board-color="red"] a.dialog-button:focus:not(:disabled):active {
  color: #a01414;
}
body[data-board-color="charcoal"] button:hover:not(:disabled):active,
body[data-board-color="charcoal"] input[type=button]:hover:not(:disabled):active,
body[data-board-color="charcoal"] input[type=submit]:hover:not(:disabled):active,
body[data-board-color="charcoal"] a.link-button:hover:not(:disabled):active,
body[data-board-color="charcoal"] a.dialog-button:hover:not(:disabled):active,
body[data-board-color="charcoal"] button:focus:not(:disabled):active,
body[data-board-color="charcoal"] input[type=button]:focus:not(:disabled):active,
body[data-board-color="charcoal"] input[type=submit]:focus:not(:disabled):active,
body[data-board-color="charcoal"] a.link-button:focus:not(:disabled):active,
body[data-board-color="charcoal"] a.dialog-button:focus:not(:disabled):active {
  color: #4b4b4b;
}
body[data-board-color="black"] button:hover:not(:disabled):active,
body[data-board-color="black"] input[type=button]:hover:not(:disabled):active,
body[data-board-color="black"] input[type=submit]:hover:not(:disabled):active,
body[data-board-color="black"] a.link-button:hover:not(:disabled):active,
body[data-board-color="black"] a.dialog-button:hover:not(:disabled):active,
body[data-board-color="black"] button:focus:not(:disabled):active,
body[data-board-color="black"] input[type=button]:focus:not(:disabled):active,
body[data-board-color="black"] input[type=submit]:focus:not(:disabled):active,
body[data-board-color="black"] a.link-button:focus:not(:disabled):active,
body[data-board-color="black"] a.dialog-button:focus:not(:disabled):active {
  color: black;
}
body[data-board-color="white"] button:hover:not(:disabled):active,
body[data-board-color="white"] input[type=button]:hover:not(:disabled):active,
body[data-board-color="white"] input[type=submit]:hover:not(:disabled):active,
body[data-board-color="white"] a.link-button:hover:not(:disabled):active,
body[data-board-color="white"] a.dialog-button:hover:not(:disabled):active,
body[data-board-color="white"] button:focus:not(:disabled):active,
body[data-board-color="white"] input[type=button]:focus:not(:disabled):active,
body[data-board-color="white"] input[type=submit]:focus:not(:disabled):active,
body[data-board-color="white"] a.link-button:focus:not(:disabled):active,
body[data-board-color="white"] a.dialog-button:focus:not(:disabled):active {
  color: white;
}