/** Libraries */
@import "lib/normalize.css";
/** Game Related Variables */
/** Layout */
html {
  height: 100%;
}
body {
  background: url('../images/jack_background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  font-size: 14px;
  font-family: sinkin-sans;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body {
  min-width: 320px;
  min-height: 320px;
  -ms-content-zooming: none;
  touch-action: none;
}
#content {
  height: 100%;
}
textarea,
input {
  outline: none;
}
*:not(input):not(textarea) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*:focus {
  outline: none;
}
.popoverNotificationsBox {
  position: fixed;
  top: 30px;
  left: 20%;
  width: 40%;
  z-index: 1010;
}
.popoverNotificationsBox .popoverNotification {
  position: relative;
  width: 100%;
  padding: 30px;
  background: rgba(0, 0, 0, 0.8);
  font-size: 18px;
  color: white;
  border: 1px solid white;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  margin: 20px auto;
  text-align: center;
}
/*
.drop {
    background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
    -moz-animation: fall .63s linear infinite;
}

 animate the drops
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}*/
/** Content Pages */
.page[data-page="welcome"] {
  /**
     * FACEBOOK ICON
     */
  /**
    * BLOOD PUDDLE
    */
  /**
     * TITLE
     */
  /**
     * WEBSOCKET LACK MESSAGE
     */
  /**
     * FORM
     */
}
.page[data-page="welcome"] .facebookIcon {
  position: fixed;
  top: 50%;
  margin-top: -79px;
  left: -5px;
  width: 47px;
  transform: rotate(180deg);
  height: 154px;
  border: 4px solid rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
  background-image: url(../images/facebook-icon.png);
  -moz-transition: border-color 0.4s;
  -o-transition: border-color 0.4s;
  -webkit-transition: border-color 0.4s;
  transition: border-color 0.4s;
  display: none;
}
.page[data-page="welcome"] .facebookIcon:hover {
  border-color: #ffffff;
}
@media (min-width: 768px) {
  .page[data-page="welcome"] .facebookIcon {
    display: block;
  }
}
.page[data-page="welcome"] .blood {
  position: absolute;
  top: 0;
  left: 0;
  background: url('../images/blood.png') no-repeat center center;
  width: 40%;
  height: 500px;
  background-size: contain;
  margin-left: 15%;
  margin-top: 1%;
  z-index: -1;
}
.page[data-page="welcome"] .title {
  padding-top: 7%;
  position: relative;
}
.page[data-page="welcome"] .title span[data-text="letters-from"] {
  color: #ffffff;
  display: block;
  font-family: alex-brush;
  font-size: 40px;
  position: relative;
  text-align: center;
  cursor: default;
}
.page[data-page="welcome"] .title span[data-text="whitechapel"] {
  color: #ffffff;
  display: block;
  font-family: whitechapel-bb;
  font-size: 60px;
  margin-top: -30px;
  position: relative;
  text-align: center;
  width: 100%;
  cursor: default;
}
@media (min-width: 768px) {
  .page[data-page="welcome"] .title span[data-text="whitechapel"] {
    font-size: 160px;
  }
}
.page[data-page="welcome"] .websocketLackMessage {
  max-width: 480px;
  background: rgba(255, 255, 255, 0.85);
  color: #000000;
  padding: 25px;
  text-align: justify;
  margin: 0 auto;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  display: none;
}
.page[data-page="welcome"] form {
  width: 100%;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 5px;
  box-sizing: border-box;
  /** SELECT SIGN-IN OR SIGN-UP BUTTONS */
}
.page[data-page="welcome"] form .buttonGroup {
  margin-bottom: 7px;
}
.page[data-page="welcome"] form .buttonGroup:before,
.page[data-page="welcome"] form .buttonGroup:after {
  content: " ";
  display: table;
}
.page[data-page="welcome"] form .buttonGroup:after {
  clear: both;
}
.page[data-page="welcome"] form .buttonGroup label {
  background: rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #000000;
  display: inline-block;
  font-size: 22px;
  float: left;
  width: 33%;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.page[data-page="welcome"] form .buttonGroup label input[type="radio"] {
  display: none;
}
.page[data-page="welcome"] form .buttonGroup label:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.3);
  color: #000000;
}
.page[data-page="welcome"] form .buttonGroup label.active {
  opacity: 1;
  color: darkred;
  background: #ffffff;
}
.page[data-page="welcome"] form .buttonGroup label.active:hover {
  cursor: default;
}
.page[data-page="welcome"] form .buttonGroup label:nth-child(odd) {
  margin-right: 7px;
}
.page[data-page="welcome"] form .buttonGroup label span {
  display: inline-block;
  padding: 4px 0;
}
.page[data-page="welcome"] input[type="text"],
.page[data-page="welcome"] input[type="password"],
.page[data-page="welcome"] input[type="submit"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 10px 20px;
  font-size: 18px;
  border: 0;
  border-radius: 3px;
  background: #ffffff;
  color: #000000;
}
.page[data-page="welcome"] .inputBox {
  margin-bottom: 7px;
  position: relative;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.page[data-page="welcome"] .inputBox.hidden {
  display: none;
}
.page[data-page="welcome"] .inputBox.disabled {
  opacity: 0.175;
}
.page[data-page="welcome"] .inputBox .error {
  position: absolute;
  right: 0;
  bottom: -5px;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  background: darkred;
  border-radius: 3px 0 3px 3px;
  display: none;
  white-space: nowrap;
}
.page[data-page="welcome"] .inputBox input[type="text"],
.page[data-page="welcome"] .inputBox input[type="password"] {
  width: 100%;
}
.page[data-page="welcome"] .submitButtonBox {
  position: relative;
  top: 2px;
}
.page[data-page="welcome"] .submitButtonBox:before,
.page[data-page="welcome"] .submitButtonBox:after {
  content: " ";
  display: table;
}
.page[data-page="welcome"] .submitButtonBox:after {
  clear: both;
}
.page[data-page="welcome"] .submitButtonBox input[type="submit"] {
  padding: 8px 40px;
  float: right;
}
.page[data-page="welcome"] .submitButtonBox input[type="submit"]:hover {
  color: darkred;
}
.page[data-page="welcome"] .recoveryCheckbox,
.page[data-page="welcome"] .randomPasswordCheckbox {
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  position: relative;
  left: 5px;
}
.page[data-page="welcome"] .recoveryCheckbox.hidden,
.page[data-page="welcome"] .randomPasswordCheckbox.hidden {
  display: none;
}
.page[data-page="welcome"] .recoveryCheckbox span,
.page[data-page="welcome"] .randomPasswordCheckbox span {
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(0, 0, 0, 0.25);
}
.page[data-page="board"] {
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  /**
   * BOARD CHAT BOX
   */
  /** 
   * GAME CLOCK
   */
  /**
   * GAME LOG WIDGET
   */
  /**
   * JUNCTION
   */
  /**
   * JACK DECIDE TO KILL OR WAIT POPUP,
   * JACK ENTER HIDEOUT POPUP
   */
  /**
   * HIDEOUT
   */
  /**
   *  BOARD ACTION MENU
   */
  /**
   *  MAP
   */
  /**
   *  JACK MOVES
   */
  /**
   *  PLAYER - ROLE BOXES
   */
}
.page[data-page="board"] .policeOfficerReadiness {
  position: absolute;
  top: 50px;
  right: 255px;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px 17px;
  display: none;
}
.page[data-page="board"] .policeOfficerReadiness .button {
  background-color: darkred;
  color: #fafafa;
  margin: 0 10px 0 25px;
  padding: 5px 20px;
  border-radius: 3px;
}
.page[data-page="board"] .policeOfficerReadiness .button:hover {
  cursor: pointer;
  background-color: #580000;
}
.page[data-page="board"] .boardGameChat {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  bottom: 5px;
  right: 60px;
  width: 480px;
  z-index: 2;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages {
  position: absolute;
  bottom: 61px;
  width: 100%;
  min-height: 30px;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox {
  position: relative;
  margin-top: 5px;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .avatar {
  float: left;
  border: 2px solid white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .chatMessageTextBox {
  padding-left: 45px;
  right: 0;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .chatMessageTextBox:before,
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .chatMessageTextBox:after {
  content: " ";
  display: table;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .chatMessageTextBox:after {
  clear: both;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .chatMessageTextBox .nickname {
  float: left;
  font-size: 9px;
  color: darkred;
  margin: 5px;
}
.page[data-page="board"] .boardGameChat .boardGameChatMessages .chatMessageBox .chatMessageTextBox .message {
  background: white;
  padding: 15px 0 5px 0;
  border-radius: 5px;
  font-size: 13px;
}
.page[data-page="board"] .boardGameChat .boardGameChatInputBox {
  position: absolute;
  bottom: 0;
  height: 46px;
  left: 40px;
  right: 0;
}
.page[data-page="board"] .boardGameChat .boardGameChatInputBox:after {
  content: "press ENTER to send";
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 8px;
  color: #c8c8c8;
}
.page[data-page="board"] .boardGameChat .boardGameChatInputBox textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 11.2px;
  line-height: 20px;
  height: 100%;
  overflow-x: hidden;
  padding: 13px 0px 0px 13px;
  position: relative;
  resize: none;
  width: 100%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.9);
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  border: 0;
  border-bottom: 2px solid white;
}
.page[data-page="board"] .boardGameChat .boardGameChatInputBox textarea:focus {
  background-color: #ffffff;
}
.page[data-page="board"] .boardGameChat .boardGameChatIconButton {
  border-right: 1px solid #000;
  bottom: 0;
  background-image: url(../images/feather-icon.png);
  background-color: #000;
  /* border-radius: 3px; */
  background-size: 60% 60%;
  background-position: center center;
  background-repeat: no-repeat;
  width: 40px;
  height: 44px;
  position: absolute;
  left: -1px;
  border-bottom: 2px solid white;
  z-index: 0;
  bottom: 0px;
}
.page[data-page="board"] .boardTable {
  display: table;
  width: 100%;
  height: 100%;
}
.page[data-page="board"] .boardTableCell {
  display: table-cell;
  vertical-align: middle;
}
.page[data-page="board"] .board {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
  display: none;
}
.page[data-page="board"] .dayCounterBox {
  position: absolute;
  top: 170px;
  right: 22px;
  width: 60px;
  height: 60px;
}
.page[data-page="board"] .dayCounterBox .dayCounterPrefix {
  position: absolute;
  z-index: 3;
  top: 41px;
  color: #fff;
  right: 21px;
  font-size: 13px;
  text-shadow: 0 0 2px #000;
}
.page[data-page="board"] .dayCounterBox .dayCounterDisplay {
  position: absolute;
  z-index: 3;
  top: 55px;
  right: 0px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  color: #8b0000;
}
.page[data-page="board"] .dayCounterBox .dayCounterDisplay span {
  padding: 1px;
}
.page[data-page="board"] .dayCounterBox .whitePawn {
  background-image: url(../images/white-pawn-2.png);
  width: 20px;
  height: 30px;
  z-index: 2;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.page[data-page="board"] .dayCounterBox .whitePawn[data-pawn="1"] {
  right: 4px;
  top: 10px;
}
.page[data-page="board"] .dayCounterBox .whitePawn[data-pawn="2"] {
  right: 25px;
  top: 13px;
  opacity: .1;
}
.page[data-page="board"] .dayCounterBox .bloodPuddle {
  z-index: 1;
  position: relative;
  width: 70px;
  margin-top: -11px;
  height: 90px;
  background-repeat: no-repeat;
  background-image: url(../images/blood-puddle-2.png);
  background-size: cover;
}
.page[data-page="board"] .dayCounterBox .availableSpecialMoves {
  position: relative;
  top: 10px;
  z-index: 3;
  right: -15px;
}
.page[data-page="board"] .dayCounterBox .availableSpecialMoves .carriageCounter {
  width: 50px;
  background: rgba(0, 0, 0, 0.9);
  background-size: 73% auto;
  border-radius: 3px;
  background-repeat: no-repeat;
  color: white;
  background-position: right center;
  height: 29px;
  background-image: url(../images/icon/carriage_white.png);
  padding: 3px;
  box-sizing: border-box;
  font-size: 11px;
}
.page[data-page="board"] .dayCounterBox .availableSpecialMoves .alleyCounter {
  width: 50px;
  background: rgba(0, 0, 0, 0.9);
  background-size: 47% auto;
  border-radius: 3px;
  background-repeat: no-repeat;
  color: white;
  background-position: 19px center;
  height: 29px;
  padding: 3px;
  box-sizing: border-box;
  font-size: 11px;
  margin-top: 7px;
  background-image: url(../images/icon/lantern_white.png);
}
.page[data-page="board"] .boardLog {
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 2px solid white;
  bottom: 5px;
  position: absolute;
  left: 60px;
  width: 380px;
  z-index: 2;
  /** highlight log-icon on hover */
  /** show extended log box */
  /** default log-icon styles */
  /** base log-entry time styles */
  /** base log-entry message styles */
  /** Recent log message style modification */
  /** History box, and its styles */
}
.page[data-page="board"] .boardLog:hover {
  cursor: pointer;
}
.page[data-page="board"] .boardLog:hover .boardLogIcon {
  background-color: #000000;
}
.page[data-page="board"] .boardLog.open .boardLogIcon {
  background-color: #ffffff;
}
.page[data-page="board"] .boardLog .boardLogIcon {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url(../images/eye-icon.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%;
  border-right: 1px solid #000000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  position: absolute;
  -moz-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
  width: 40px;
}
.page[data-page="board"] .boardLog .boardLogEntryTime {
  position: absolute;
  top: 0;
  font-size: 8px;
  color: white;
  letter-spacing: 1px;
}
.page[data-page="board"] .boardLog .boardLogEntryMessage {
  font-size: 10px;
  display: inline-block;
  line-height: 13px;
  color: #8c8c8c;
  margin-top: 18px;
}
.page[data-page="board"] .boardLog .boardLogRecent {
  position: relative;
}
.page[data-page="board"] .boardLog .boardLogRecent .boardLogEntry {
  min-height: 44px;
  display: none;
}
.page[data-page="board"] .boardLog .boardLogRecent .boardLogEntryTime {
  left: 47px;
}
.page[data-page="board"] .boardLog .boardLogRecent .boardLogEntryMessage {
  padding-left: 47px;
  margin-bottom: 8px;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement {
  position: relative;
  width: 100%;
  height: 0;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogHistoryHook {
  margin-left: 40px;
  padding-right: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  bottom: 2px;
  position: absolute;
  width: 100%;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogHistoryClose {
  display: none;
  position: absolute;
  /* height: 20px; */
  padding: 2px 20px;
  font-size: 10px;
  top: -21px;
  right: 40px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fafafa;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogHistoryClose:hover {
  cursor: pointer;
  color: darkred;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogHistory {
  display: none;
  position: relative;
  width: 100%;
  padding-right: 20px;
  max-height: 350px;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogHistory .ps-scrollbar-y-rail {
  right: 7px !important;
  width: 10px !important;
  -webkit-border-radius: 0 !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 0 !important;
  -moz-background-clip: padding !important;
  border-radius: 0 !important;
  background-clip: padding-box !important;
  background-color: rgba(0, 0, 0, 0.3);
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogHistory .ps-scrollbar-y-rail .ps-scrollbar-y {
  background-color: rgba(255, 255, 255, 0.85);
  width: 10px !important;
  -webkit-border-radius: 0 !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 0 !important;
  -moz-background-clip: padding !important;
  border-radius: 0 !important;
  background-clip: padding-box !important;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogEntry {
  min-height: 44px;
  background: rgba(255, 255, 255, 0.85);
  position: relative;
  margin-top: 1px;
  border-bottom: 1px solid black;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogEntry .boardLogEntryTime {
  margin-left: 5px;
  color: #424242;
}
.page[data-page="board"] .boardLog .boardLogHistoryPlacement .boardLogEntry .boardLogEntryMessage {
  margin-left: 10px;
  color: #424242;
}
.page[data-page="board"] .junction {
  position: absolute;
  width: 20px;
  height: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: -8px;
  margin-top: -8px;
  /** SELECTABLE */
  /** Hide canvas animation uness hideout has .selectable class */
  /**
     * PAWNS
     */
}
.page[data-page="board"] .junction .animation {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page[data-page="board"] .junction .animation img.marker {
  width: 300%;
  height: 300%;
  margin-left: -100%;
  margin-top: -100%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.page[data-page="board"] .junction:not(.selectable):not(.hover) canvas {
  display: none;
}
.page[data-page="board"] .junction.selectable.hover {
  cursor: pointer;
}
.page[data-page="board"] .junction.selectable.hover canvas {
  z-index: 2;
  width: 220%;
  height: 220%;
  position: absolute;
  left: -60%;
  top: -60%;
}
.page[data-page="board"] .junction.police-pawn {
  display: inline-block !important;
}
.page[data-page="board"] .junction.police-pawn .token {
  position: absolute;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
.page[data-page="board"] .junction.police-pawn[data-pawn="redPoliceOfficer"] .token {
  background-color: orangered;
  background-image: url(../images/london-police.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="bluePoliceOfficer"] .token {
  background-color: steelblue;
  background-image: url(../images/london-police.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="yellowPoliceOfficer"] .token {
  background-color: yellow;
  background-image: url(../images/london-police.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="greenPoliceOfficer"] .token {
  background-color: lawngreen;
  background-image: url(../images/london-police.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="brownPoliceOfficer"] .token {
  background-color: brown;
  background-image: url(../images/london-police.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="brownPoliceOfficer"] .token {
  background-color: brown;
  background-image: url(../images/london-police.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="blank"] .token {
  background-color: rgba(0, 0, 0, 0.9);
  background-image: url(../images/london-police-white.png);
}
.page[data-page="board"] .junction.police-pawn[data-pawn="placeholder"] .token {
  border: 2px solid yellow;
}
.page[data-page="board"] .jackDecideToKillPopup,
.page[data-page="board"] .jackDecideToEnterHideoutPopup {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 9999;
  left: calc(50% - 100px);
  padding: 20px 10px;
  top: 50%;
  border-radius: 3px;
  display: none;
}
.page[data-page="board"] .jackDecideToKillPopup .button,
.page[data-page="board"] .jackDecideToEnterHideoutPopup .button {
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 35px;
  color: white;
  font-size: 18px;
  border-radius: 3px;
  margin: 5px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.page[data-page="board"] .jackDecideToKillPopup .button:hover,
.page[data-page="board"] .jackDecideToEnterHideoutPopup .button:hover {
  cursor: pointer;
  color: darkred;
  background-color: black;
}
.page[data-page="board"] .hideout {
  height: 34px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: -10px;
  margin-top: -10px;
  position: absolute;
  width: 34px;
  /**
     * SELECTABLE
     */
  /** Hide canvas animation uness hideout has .selectable class */
  /**
     * NUMERATED
     */
  /** Numerated hideout */
}
.page[data-page="board"] .hideout .animation {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page[data-page="board"] .hideout .animation img.marker {
  width: 140%;
  height: 140%;
  margin-left: -25%;
  margin-top: -25%;
  opacity: .4;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.page[data-page="board"] .hideout .animation div.action {
  width: 160%;
  height: 160%;
  margin-left: -30%;
  margin-top: -30%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center center;
}
.page[data-page="board"] .hideout .animation div.action[data-action="arrest"] {
  background-color: darkred;
  background-image: url(../images/handcuffs.white.png);
}
.page[data-page="board"] .hideout .animation div.action[data-action="search"] {
  background-color: darkorange;
  background-image: url(../images/search.white.png);
}
.page[data-page="board"] .hideout .token {
  border-color: transparent;
  -webkit-transition: background-color 1s, border 1.5s;
  -moz-transition: background-color 1s, border 1.5s;
  -o-transition: background-color 1s, border 1.5s;
  transition: background-color 1s, border 1.5s;
}
.page[data-page="board"] .hideout.wretched-blank:not(.murder),
.page[data-page="board"] .hideout.wretched-marked:not(.murder),
.page[data-page="board"] .hideout.wretched-woman:not(.murder) {
  display: inline-block !important;
}
.page[data-page="board"] .hideout.wretched-blank:not(.murder) .token,
.page[data-page="board"] .hideout.wretched-marked:not(.murder) .token,
.page[data-page="board"] .hideout.wretched-woman:not(.murder) .token {
  position: absolute;
  left: -5%;
  top: -5%;
  width: 110%;
  height: 110%;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
.page[data-page="board"] .hideout.wretched-blank:not(.murder) .token {
  background-color: #ffffff !important;
  border: 4px solid rgba(240, 240, 240, 0.8) !important;
}
.page[data-page="board"] .hideout.wretched-woman:not(.murder) .token,
.page[data-page="board"] .hideout.wretched-marked:not(.murder) .token {
  background-color: darkred !important;
  border: 4px solid rgba(240, 240, 240, 0.8) !important;
}
.page[data-page="board"] .hideout.clue,
.page[data-page="board"] .hideout.murder {
  display: inline-block !important;
}
.page[data-page="board"] .hideout.clue .token,
.page[data-page="board"] .hideout.murder .token {
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
.page[data-page="board"] .hideout.clue:not(.murder) .token {
  background-color: rgba(255, 140, 0, 0.5);
  border: 1px solid #ff8c00;
}
.page[data-page="board"] .hideout.murder .token {
  background-color: rgba(200, 0, 0, 0.5);
  border: 1px solid #c80000;
}
.page[data-page="board"] .hideout.carriage .token {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid white;
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  z-index: 1;
}
.page[data-page="board"] .hideout:not(.selectable):not(.hover) canvas {
  display: none;
}
.page[data-page="board"] .hideout.selectable.hover {
  cursor: pointer;
}
.page[data-page="board"] .hideout.selectable.hover canvas {
  z-index: 2;
  width: 140%;
  height: 140%;
  position: absolute;
  left: -20%;
  top: -20%;
}
.page[data-page="board"] .hideout.numerated {
  font-size: 10px;
  padding-top: 10px;
  background-color: #ffffff;
  line-height: 0;
  text-align: center;
}
.page[data-page="board"] .hideout.numerated:before {
  content: attr(data-id);
  display: inline-block;
  color: #424242;
}
.page[data-page="board"] .boardActionMenuPlacement {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: none;
}
.page[data-page="board"] .boardActionMenuClickPoint {
  position: absolute;
  display: none;
  width: 1px;
  height: 1px;
}
.page[data-page="board"] .boardActionMenuBox {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.page[data-page="board"] .boardActionMenuOption {
  min-width: 130px;
  position: relative;
  border-radius: 3px 0 0 3px;
  background: rgba(0, 0, 0, 0.9);
  height: 26px;
  margin-bottom: 2px;
  font-size: 10px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.page[data-page="board"] .boardActionMenuOption:hover {
  cursor: pointer;
  background-color: darkred;
}
.page[data-page="board"] .boardActionMenuOption .optionName {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  color: white;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 24px;
  padding: 5px 10px 5px 35px;
  -webkit-border-radius: 0 3px 3px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 3px 3px 0;
  -moz-background-clip: padding;
  border-radius: 0 3px 3px 0;
  background-clip: padding-box;
}
.page[data-page="board"] .boardActionMenuOption .optionSubjectId {
  background: darkred;
  padding: 5px;
  color: white;
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-border-radius: 3px 0 0 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 0 0 3px;
  -moz-background-clip: padding;
  border-radius: 3px 0 0 3px;
  background-clip: padding-box;
}
.page[data-page="board"] .mapBox {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 225px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid white;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 12px;
}
.page[data-page="board"] .mapBox .mapCloseButton {
  position: absolute;
  bottom: -10px;
  right: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
}
.page[data-page="board"] .mapBox .mapCloseButton:hover {
  color: #ffffff;
  cursor: pointer;
}
.page[data-page="board"] .mapBox .mapImage {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.page[data-page="board"] .mapBox .mapMarkerBox {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 2px;
  right: 6px;
  bottom: 6px;
}
.page[data-page="board"] .mapBox .mapMarker {
  position: absolute;
  background: rgba(0, 255, 0, 0.5);
  border: 2px solid #00ff00;
  width: 100%;
  height: 100%;
}
.page[data-page="board"] .jackMovesBox {
  position: absolute;
  top: 0;
  right: 250px;
  background-color: rgba(0, 0, 0, 0.9);
  border-bottom: 2px solid transparent;
  padding: 8px 6px 5px 6px;
  z-index: 2;
  margin: 5px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.page[data-page="board"] .jackMovesBox:before,
.page[data-page="board"] .jackMovesBox:after {
  content: " ";
  display: table;
}
.page[data-page="board"] .jackMovesBox:after {
  clear: both;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination {
  position: relative;
  z-index: 1;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination:before,
.page[data-page="board"] .jackMovesBox .jackMovesOrdination:after {
  content: " ";
  display: table;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination:after {
  clear: both;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span {
  float: left;
  width: 31px;
  height: 31px;
  margin-right: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span:after {
  content: attr(data-id);
  font-size: 10px;
  line-height: 30px;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span.current {
  color: darkred;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span[data-enabled="true"] {
  color: rgba(255, 255, 255, 0.65);
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span[data-enabled="false"] {
  color: rgba(255, 255, 255, 0.15);
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span[data-selected="true"] {
  color: #ff0000;
}
.page[data-page="board"] .jackMovesBox .jackMovesOrdination span[data-hidden="true"] {
  opacity: 0;
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  height: 100%;
  width: 100%;
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens:before,
.page[data-page="board"] .jackMovesBox .jackMoveTokens:after {
  content: " ";
  display: table;
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens:after {
  clear: both;
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens span {
  float: left;
  height: 31px;
  margin-right: 3px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens span[data-token="carriage"] {
  width: 65px;
  background-image: url(../images/icon/carriage_white.png);
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens span[data-token="walk"] {
  background-image: url(../images/icon/footsteps_white.png);
  width: 31px;
}
.page[data-page="board"] .jackMovesBox .jackMoveTokens span[data-token="alley"] {
  background-image: url(../images/icon/lantern_white.png);
  width: 31px;
}
.page[data-page="board"] .jackMovesBox .jackTrackDisplay {
  position: absolute;
  bottom: -13px;
  left: 3px;
}
.page[data-page="board"] .jackMovesBox .jackTrackDisplay:before,
.page[data-page="board"] .jackMovesBox .jackTrackDisplay:after {
  content: " ";
  display: table;
}
.page[data-page="board"] .jackMovesBox .jackTrackDisplay:after {
  clear: both;
}
.page[data-page="board"] .jackMovesBox .jackTrackDisplay span {
  background: white;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  width: 20px;
  height: 20px;
  font-size: 10px;
  text-align: center;
  padding-top: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin: 0px 5px 0 9px;
}
.page[data-page="board"] .boardRoles {
  z-index: 1;
  position: absolute;
  left: 2px;
  top: 42px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.9);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 5px 5px 0 5px;
}
@media (min-width: 768px) and (min-height: 450px) {
  .page[data-page="board"] .boardRoles {
    top: 85px;
    left: 5px;
  }
}
.page[data-page="board"] .boardRoles .boardRole {
  border: 3px solid rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 4px;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
@media (min-width: 768px) and (min-height: 450px) {
  .page[data-page="board"] .boardRoles .boardRole {
    margin-bottom: 10px;
  }
}
.page[data-page="board"] .boardRoles .boardRole[data-role="jack"] .portrait {
  background-image: url(../images/0.jpg);
}
.page[data-page="board"] .boardRoles .boardRole[data-role="jack"]:before {
  position: absolute;
  color: white;
  background: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  width: 20px;
  text-align: center;
  margin-top: 2px;
  margin-left: 2px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  content: attr(data-hideout-id);
  z-index: 2;
}
.page[data-page="board"] .boardRoles .boardRole .readinessMarker {
  position: absolute;
  display: none;
  z-index: 9999;
  background: darkred;
  font-size: 10px;
  padding: 2px;
  color: #fafafa;
  top: 0px;
  right: 0;
  left: 1px;
  text-align: center;
}
.page[data-page="board"] .boardRoles .boardRole[data-role="redPoliceOfficer"] .portrait {
  background-image: url(../images/redPoliceOfficer.png);
}
.page[data-page="board"] .boardRoles .boardRole[data-role="bluePoliceOfficer"] .portrait {
  background-image: url(../images/bluePoliceOfficer.png);
}
.page[data-page="board"] .boardRoles .boardRole[data-role="yellowPoliceOfficer"] .portrait {
  background-image: url(../images/yellowPoliceOfficer.png);
}
.page[data-page="board"] .boardRoles .boardRole[data-role="greenPoliceOfficer"] .portrait {
  background-image: url(../images/greenPoliceOfficer.png);
}
.page[data-page="board"] .boardRoles .boardRole[data-role="brownPoliceOfficer"] .portrait {
  background-image: url(../images/brownPoliceOfficer.png);
}
.page[data-page="board"] .boardRoles .boardRole:not([data-active="true"]) .portrait {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}
.page[data-page="board"] .boardRoles .boardRole[data-active="true"]:not(.highlightDim) {
  border-color: rgba(255, 255, 255, 0.85);
}
.page[data-page="board"] .boardRoles .boardRole[data-active="true"].highlightDim {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.page[data-page="board"] .boardRoles .boardRole[data-chief-of-investigation="true"]:before {
  content: '';
  background-image: url(../images/gold-badge.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 16px;
  display: block;
  z-index: 1;
}
.page[data-page="board"] .boardRoles .boardRole .portrait {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 33px;
  width: 33px;
}
@media (min-width: 768px) and (min-height: 450px) {
  .page[data-page="board"] .boardRoles .boardRole .portrait {
    height: 63px;
    width: 63px;
  }
}
.page[data-page="board"] .boardRoles .boardRole .playerSlot {
  position: relative;
}
.page[data-page="board"] .boardRoles .boardRole .playerSlot .player {
  position: absolute;
  right: -15px;
  bottom: -8px;
}
.page[data-page="board"] .boardRoles .boardRole .playerSlot .player.friend {
  border-color: darkred !important;
}
.page[data-page="board"] .boardRoles .boardRole .playerSlot .player .playerAvatar {
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  border: 3px solid rgba(0, 0, 0, 0.25);
  background-image: url(/images/0.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  -moz-transition: border-color 0.5s;
  -o-transition: border-color 0.5s;
  -webkit-transition: border-color 0.5s;
  transition: border-color 0.5s;
  width: 21px;
  height: 21px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) and (min-height: 450px) {
  .page[data-page="board"] .boardRoles .boardRole .playerSlot .player .playerAvatar {
    width: 32px;
    height: 32px;
  }
}
.page[data-page="board"] .boardRoles .boardRole .playerSlot .player .playerNickname {
  position: absolute;
  left: 20px;
  padding: 5px 10px 5px 24px;
  top: 5px;
  font-size: 12px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: white;
  color: #424242;
  z-index: 1;
  display: none;
}
.page[data-page="board"] .boardRoles .boardRole:hover {
  cursor: pointer;
}
.popup[data-popup="game-end-overview"] h2 {
  font-size: 22px;
  color: white;
}
/** Tip pokazywany onHover dla element�w dashbordu */
.hoverTip:after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.hoverTip:hover:after {
  color: darkred;
}
/**
 * PAGE PLACEMENT / ALIGN CONTAINER
 */
/**
 * NAVIGATION PANEL
 */
/**
 * PLAYER MIXIN (to use on dashboard player list)
 */
/**
 * CHAT INNER
 */
.page[data-page="dashboard-general"] {
  height: 100%;
  /**
   * DASHBOARD CHAT BOX
   */
  /**
   * DASHBOARD PLAYERS BOX
   */
  /**
   * DASHBOARD GAMES LIST
   */
  /** MODIFICATIONS */
}
.page[data-page="dashboard-general"] #dashboardTable {
  display: table;
  width: 100%;
  height: 100%;
}
.page[data-page="dashboard-general"] #dashboardTableCell {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.page[data-page="dashboard-general"] #dashboardBox {
  width: 100%;
  height: 100%;
  max-width: 1220px;
  max-height: 1000px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .page[data-page="dashboard-general"] #dashboardBox {
    width: calc(100% - 140px);
    height: calc(100% - 110px);
  }
}
.page[data-page="dashboard-general"] #dashboardNavigationBox {
  width: 100%;
  height: 40px;
  position: absolute;
}
@media (max-width: 991px) {
  .page[data-page="dashboard-general"] #dashboardNavigationBox {
    left: 50px;
  }
}
.page[data-page="dashboard-general"] #dashboardNavigationBox button {
  float: left;
  height: 100%;
  margin-right: 5px;
  background-color: rgba(0, 0, 0, 0.425);
  border-radius: 3px;
  border: 0;
  padding: 0 15px;
  color: white;
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.page[data-page="dashboard-general"] #dashboardNavigationBox button:focus {
  outline: 0;
}
.page[data-page="dashboard-general"] #dashboardNavigationBox button:hover {
  color: #424242;
  background-color: white;
}
.page[data-page="dashboard-general"] #dashboardChatBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  bottom: 5px;
  left: 5px;
  right: 230px;
  /** CHAT MESSAGES CONTAINER */
  /** CHAT SINGLE MESSAGE */
  /** CHAT INPUT TEXTAREA */
}
.page[data-page="dashboard-general"] #dashboardChatBox #dashboardChatMessagesBox {
  height: calc(100% - 55px);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  position: relative;
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox {
  display: block;
  position: relative;
  margin-bottom: 5px;
  /** CHAT MY MESSAGE */
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox .chatMessageAvatar {
  width: 40px;
  background-size: 100% 100%;
  height: 40px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  position: absolute;
  bottom: 0;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox .chatMessageTextBox {
  margin-left: 64px;
  display: inline-block;
  min-height: 40px;
  position: relative;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 5px;
  background-color: #dcdcdc;
  vertical-align: top;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox .chatMessageTextBox .nickname {
  color: darkred;
  font-size: 10px;
  padding-left: 10px;
  padding-top: 3px;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox .chatMessageTextBox .message {
  padding-left: 20px;
  font-size: 12px;
  overflow-x: hidden;
  padding-right: 5px;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox .chatMessageTextBox:before {
  right: 100%;
  bottom: 7px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: #DCDCDC;
  border-width: 7px 15px 7px;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.notification .chatMessageTextBox {
  background-color: khaki;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.notification .chatMessageTextBox:before {
  display: none;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.myMessage {
  text-align: right;
  min-height: 28px;
  right: 8px;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.myMessage .message {
  padding: 5px !important;
  font-size: 12px;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.myMessage .chatMessageAvatar {
  display: none;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.myMessage .chatMessageTextBox {
  max-width: calc(100% - 65px);
  margin-left: 50px;
  margin-right: 15px;
  min-height: 28px;
  color: #fafafa;
  background-color: darkred;
}
.page[data-page="dashboard-general"] #dashboardChatBox .chatMessageBox.myMessage .chatMessageTextBox:before {
  right: -30px;
  border-left-color: darkred;
  border-right-color: transparent;
}
.page[data-page="dashboard-general"] #dashboardChatBox #dashboardChatInputBox {
  margin-top: 5px;
}
.page[data-page="dashboard-general"] #dashboardChatBox #dashboardChatInputBox textarea {
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 15px;
  line-height: 21px;
  max-height: 40px;
  overflow-x: hidden;
  padding: 10px 10px 0px 13px;
  position: absolute;
  resize: none;
  width: 100%;
  overflow-y: scroll;
}
.page[data-page="dashboard-general"] #dashboardChatBox #dashboardChatInputBox:after {
  content: "press ENTER to send";
  position: absolute;
  bottom: -15px;
  right: 4px;
  font-size: 8px;
  color: #c8c8c8;
}
.page[data-page="dashboard-general"] #playersList {
  width: 220px;
  position: absolute;
  right: 5px;
  top: 50px;
  bottom: 5px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.page[data-page="dashboard-general"] #playersList .player {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  height: 30px;
  position: relative;
  margin-bottom: 5px;
  padding-left: 5px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /** Details not visible */
  /** MY MEMBER BOX */
  /** MY FRIEND MEMBER BOX */
  /** Details visible */
}
.page[data-page="dashboard-general"] #playersList .player:not([data-details-visible="true"]):after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.page[data-page="dashboard-general"] #playersList .player:not([data-details-visible="true"]):hover:after {
  color: darkred;
}
.page[data-page="dashboard-general"] #playersList .player:not([data-details-visible="true"]):after {
  content: 'click';
}
.page[data-page="dashboard-general"] #playersList .player:not([data-details-visible="true"]):hover {
  cursor: pointer;
  padding: 5px;
  background: white;
  border-radius: 3px;
}
.page[data-page="dashboard-general"] #playersList .player:not([data-details-visible="true"]):hover .playerNickname {
  color: darkred;
}
.page[data-page="dashboard-general"] #playersList .player.me .playerNickname {
  font-size: 12px;
  color: #fafafa;
}
.page[data-page="dashboard-general"] #playersList .player.friend:before {
  content: 'f';
  line-height: 10px;
  font-size: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  text-align: center;
  background-color: darkred;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  font-weight: bold;
  color: #fafafa;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.page[data-page="dashboard-general"] #playersList .player.friend:hover:before {
  top: 5px;
  color: darkred;
  background-color: white;
}
.page[data-page="dashboard-general"] #playersList .player .playerAvatar {
  background-size: 120% 120%;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-left: 1px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  position: absolute;
}
.page[data-page="dashboard-general"] #playersList .player .playerNickname {
  color: #a1a1a1;
  font-size: 12px;
  margin-left: 40px;
  vertical-align: middle;
  line-height: 30px;
  max-width: calc(100% - 40px);
  overflow-x: hidden;
  text-overflow: ellipsis;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] {
  height: 85px;
  background: #ffffff;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 5px;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"].me {
  height: 65px;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"].me .playerDetailsFriendAddButton,
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"].me .playerDetailsFriendRemoveButton {
  display: none !important;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"].friend:before {
  color: darkred;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"].friend .playerDetailsFriendRemoveButton {
  display: block;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"]:not(.friend) .playerDetailsFriendAddButton {
  display: block;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsMoreButton {
  font-size: 8px;
  height: 10px;
  line-height: 10px;
  position: absolute;
  padding: 2px;
  top: 0;
  right: 2px;
  color: #424242;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsMoreButton:hover {
  color: darkred;
  cursor: pointer;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerNickname {
  color: darkred;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsTextRow {
  font-size: 11px;
  padding-left: 40px;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsTextRowValue {
  color: darkred;
  font-weight: bold;
  padding: 0 11px;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsFriendAddButton,
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsFriendRemoveButton {
  text-align: right;
  margin-right: 10px;
  margin-top: 5px;
  font-size: 12px;
  display: none;
  color: #424242;
}
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsFriendAddButton:hover,
.page[data-page="dashboard-general"] #playersList .player[data-details-visible="true"] .playerDetailsFriendRemoveButton:hover {
  cursor: pointer;
  color: darkred;
}
.page[data-page="dashboard-general"] #gamesBox {
  position: absolute;
  top: 50px;
  left: 5px;
  width: 225px;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  display: none;
  /** naglowek tabeli */
  /** Gra */
}
.page[data-page="dashboard-general"] #gamesBox .gameListHeader:before,
.page[data-page="dashboard-general"] #gamesBox .gameListHeader:after {
  content: " ";
  display: table;
}
.page[data-page="dashboard-general"] #gamesBox .gameListHeader:after {
  clear: both;
}
.page[data-page="dashboard-general"] #gamesBox .gameListHeader > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  padding: 5px;
  box-sizing: border-box;
  width: 33%;
  text-align: center;
  display: inline-block;
  float: left;
}
.page[data-page="dashboard-general"] #gamesBox .game {
  position: relative;
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  /** USING PASSWORD */
}
.page[data-page="dashboard-general"] #gamesBox .game:before,
.page[data-page="dashboard-general"] #gamesBox .game:after {
  content: " ";
  display: table;
}
.page[data-page="dashboard-general"] #gamesBox .game:after {
  clear: both;
}
.page[data-page="dashboard-general"] #gamesBox .game > span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.page[data-page="dashboard-general"] #gamesBox .game > span.gameHost,
.page[data-page="dashboard-general"] #gamesBox .game > span.gameId,
.page[data-page="dashboard-general"] #gamesBox .game > span.gamePlayerCount {
  display: inline-block;
  float: left;
  padding: 5px;
  width: 33%;
}
.page[data-page="dashboard-general"] #gamesBox .game > span.gameId,
.page[data-page="dashboard-general"] #gamesBox .game > span.gamePlayerCount {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  padding-top: 12px;
  text-align: center;
}
.page[data-page="dashboard-general"] #gamesBox .game > span.gameHost img {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  vertical-align: middle;
}
.page[data-page="dashboard-general"] #gamesBox .game > span.gameHint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
.page[data-page="dashboard-general"] #gamesBox .game > span.gameHint:after {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 8px;
  line-height: 9px;
  color: lightgray;
}
.page[data-page="dashboard-general"] #gamesBox .game > span.gameDice {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 8px;
  left: 52px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/dice-white.png);
}
.page[data-page="dashboard-general"] #gamesBox .game:hover {
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.page[data-page="dashboard-general"] #gamesBox .game:hover span.gameHint {
  opacity: 1;
}
.page[data-page="dashboard-general"] #gamesBox .game:hover span.gameHint:after {
  content: "click to join";
}
.page[data-page="dashboard-general"] #gamesBox .game[data-using-password="yes"] span.gameId,
.page[data-page="dashboard-general"] #gamesBox .game[data-using-password="yes"] span.gamePlayerCount {
  color: darkred;
}
.page[data-page="dashboard-general"] #gamesBox .game[data-using-password="yes"]:hover {
  background-color: rgba(139, 0, 0, 0.4);
}
.page[data-page="dashboard-general"] #gamesBox .game[data-using-password="yes"]:hover span.gameId,
.page[data-page="dashboard-general"] #gamesBox .game[data-using-password="yes"]:hover span.gamePlayerCount {
  color: #ff0000;
}
.page[data-page="dashboard-general"] #gamesBox .game[data-using-password="yes"] span.gameHint:after {
  content: "password protected";
}
.page[data-page="dashboard-general"][data-show-games="true"] #dashboardChatBox {
  left: 235px;
}
.page[data-page="dashboard-general"][data-show-games="true"] #gamesBox {
  display: block;
}
.page[data-page="dashboard-general"][data-show-games="true"] button[name="recentGames"] {
  background-color: rgba(0, 0, 0, 0.755) !important;
}
.page[data-page="dashboard-general"][data-show-games="true"] button[name="recentGames"]:hover {
  background-color: #ffffff !important;
}
/**
 * NEW GAME POPUP
 */
.popup[data-page="dashboard.game.create"] h2 {
  font-weight: 100;
  font-size: 25px;
  margin-top: 10px;
  margin-bottom: 33px;
  color: darkred;
}
.popup[data-page="dashboard.game.create"] input[type="radio"] {
  display: none;
}
.popup[data-page="dashboard.game.create"] input[type="password"] {
  font-size: 14px;
  background: transparent;
  border: 1px solid;
  padding: 10px;
  margin-left: 15px;
  width: calc(100% - 55px);
  display: none;
}
.popup[data-page="dashboard.game.create"] label {
  font-size: 14px;
  display: block;
  margin: 15px 15px;
}
.popup[data-page="dashboard.game.create"] label.selected {
  color: #fafafa;
}
.popup[data-page="dashboard.game.create"] label:hover:not(.selected) {
  color: #aeaeae;
  cursor: pointer;
}
.page[data-page="dashboard-game"] {
  height: 100%;
  /** Ukrycie przycisk�w administracyjnych nawigacji */
  /**
   * ADMIN STYLE EXTENSION
   */
  /**
   * DICE ICON
   */
  /**
   * GAME ROLES
   */
  /**
   * DASHBOARD CHAT BOX
   */
}
.page[data-page="dashboard-game"] #dashboardTable {
  display: table;
  width: 100%;
  height: 100%;
}
.page[data-page="dashboard-game"] #dashboardTableCell {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.page[data-page="dashboard-game"] #dashboardBox {
  width: 100%;
  height: 100%;
  max-width: 1220px;
  max-height: 1000px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .page[data-page="dashboard-game"] #dashboardBox {
    width: calc(100% - 140px);
    height: calc(100% - 110px);
  }
}
.page[data-page="dashboard-game"] #dashboardNavigationBox {
  width: 100%;
  height: 40px;
  position: absolute;
}
@media (max-width: 991px) {
  .page[data-page="dashboard-game"] #dashboardNavigationBox {
    left: 50px;
  }
}
.page[data-page="dashboard-game"] #dashboardNavigationBox button {
  float: left;
  height: 100%;
  margin-right: 5px;
  background-color: rgba(0, 0, 0, 0.425);
  border-radius: 3px;
  border: 0;
  padding: 0 15px;
  color: white;
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.page[data-page="dashboard-game"] #dashboardNavigationBox button:focus {
  outline: 0;
}
.page[data-page="dashboard-game"] #dashboardNavigationBox button:hover {
  color: #424242;
  background-color: white;
}
.page[data-page="dashboard-game"] button[name="startGame"],
.page[data-page="dashboard-game"] button[name="adminMode"] {
  display: none;
}
.page[data-page="dashboard-game"][data-admin="true"] button[name="startGame"],
.page[data-page="dashboard-game"][data-admin="true"] button[name="adminMode"] {
  display: inline-block;
  float: right !important;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] button[name="adminMode"] {
  background-color: yellowgreen !important;
  color: #424242 !important;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .gameRole[data-own="false"][data-taken="true"]:after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .gameRole[data-own="false"][data-taken="true"]:hover:after {
  color: darkred;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .gameRole[data-own="false"][data-taken="true"]:after {
  content: "open slot";
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .gameRole[data-own="false"][data-taken="true"]:hover {
  cursor: pointer !important;
  background-color: yellowgreen;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .player:not(.me):after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .player:not(.me):hover:after {
  color: darkred;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .player:not(.me):after {
  content: "kick or ban" !important;
}
.page[data-page="dashboard-game"][data-admin-operating="true"] .player:not(.me):hover {
  background-color: yellowgreen !important;
}
.page[data-page="dashboard-game"] .gameDice {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 53px;
  left: 198px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/dice-white.png);
}
.page[data-page="dashboard-game"] .gameRoles {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  bottom: 5px;
  left: 5px;
  width: 220px;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  position: relative;
  margin-bottom: 2px;
  height: 50px;
  -moz-transition: 0.3s background-color;
  -o-transition: 0.3s background-color;
  -webkit-transition: 0.3s background-color;
  transition: 0.3s background-color;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole.error {
  background-color: rgba(255, 0, 0, 0.3) !important;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-own="true"]:not(.error) {
  background-color: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-own="true"]:not(.error):after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-own="true"]:not(.error):hover:after {
  color: darkred;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-own="true"]:not(.error):after {
  content: "click to leave";
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-taken="true"][data-own="false"] {
  cursor: default;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-taken="false"]:after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-taken="false"]:hover:after {
  color: darkred;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-taken="false"]:after {
  content: "click to join";
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-taken="false"]:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.22);
}
.page[data-page="dashboard-game"] .gameRoles .gameRole .gameRoleHeader {
  position: absolute;
  top: 1px;
  font-size: 10px;
  left: 17px;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole .gameRoleHeader:before {
  width: 8px;
  height: 8px;
  content: '';
  position: absolute;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  top: 4px;
  left: -13px;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-role="jack"] .gameRoleHeader:before {
  background-color: black;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-role="redPoliceOfficer"] .gameRoleHeader:before {
  background-color: orangered;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-role="bluePoliceOfficer"] .gameRoleHeader:before {
  background-color: steelblue;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-role="yellowPoliceOfficer"] .gameRoleHeader:before {
  background-color: yellow;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-role="greenPoliceOfficer"] .gameRoleHeader:before {
  background-color: lawngreen;
}
.page[data-page="dashboard-game"] .gameRoles .gameRole[data-role="brownPoliceOfficer"] .gameRoleHeader:before {
  background-color: brown;
}
.page[data-page="dashboard-game"] .gameRole .player {
  position: absolute;
}
.page[data-page="dashboard-game"] .gameRole .player .playerAvatar {
  position: absolute;
  top: 18px;
  width: 26px;
  height: 26px;
  background-size: 120% 120%;
  background-repeat: no-repeat;
  border-radius: 50%;
  left: 10px;
}
.page[data-page="dashboard-game"] .gameRole .player .playerNickname {
  position: absolute;
  left: 42px;
  font-size: 12px;
  color: darkred;
  top: 21px;
}
.page[data-page="dashboard-game"] #gamePlayers {
  width: 220px;
  position: absolute;
  left: 5px;
  top: 363px;
  bottom: 5px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.page[data-page="dashboard-game"] #gamePlayers .player {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  height: 30px;
  position: relative;
  margin-bottom: 5px;
  padding-left: 5px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /** Details not visible */
  /** MY MEMBER BOX */
  /** MY FRIEND MEMBER BOX */
  /** Details visible */
}
.page[data-page="dashboard-game"] #gamePlayers .player:not([data-details-visible="true"]):after {
  position: absolute;
  font-size: 9px;
  right: 1px;
  bottom: 0px;
  line-height: 1em;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: transparent;
}
.page[data-page="dashboard-game"] #gamePlayers .player:not([data-details-visible="true"]):hover:after {
  color: darkred;
}
.page[data-page="dashboard-game"] #gamePlayers .player:not([data-details-visible="true"]):after {
  content: 'click';
}
.page[data-page="dashboard-game"] #gamePlayers .player:not([data-details-visible="true"]):hover {
  cursor: pointer;
  padding: 5px;
  background: white;
  border-radius: 3px;
}
.page[data-page="dashboard-game"] #gamePlayers .player:not([data-details-visible="true"]):hover .playerNickname {
  color: darkred;
}
.page[data-page="dashboard-game"] #gamePlayers .player.me .playerNickname {
  font-size: 12px;
  color: #fafafa;
}
.page[data-page="dashboard-game"] #gamePlayers .player.friend:before {
  content: 'f';
  line-height: 10px;
  font-size: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  text-align: center;
  background-color: darkred;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  font-weight: bold;
  color: #fafafa;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.page[data-page="dashboard-game"] #gamePlayers .player.friend:hover:before {
  top: 5px;
  color: darkred;
  background-color: white;
}
.page[data-page="dashboard-game"] #gamePlayers .player .playerAvatar {
  background-size: 120% 120%;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-left: 1px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  position: absolute;
}
.page[data-page="dashboard-game"] #gamePlayers .player .playerNickname {
  color: #a1a1a1;
  font-size: 12px;
  margin-left: 40px;
  vertical-align: middle;
  line-height: 30px;
  max-width: calc(100% - 40px);
  overflow-x: hidden;
  text-overflow: ellipsis;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] {
  height: 85px;
  background: #ffffff;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 5px;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"].me {
  height: 65px;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"].me .playerDetailsFriendAddButton,
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"].me .playerDetailsFriendRemoveButton {
  display: none !important;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"].friend:before {
  color: darkred;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"].friend .playerDetailsFriendRemoveButton {
  display: block;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"]:not(.friend) .playerDetailsFriendAddButton {
  display: block;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsMoreButton {
  font-size: 8px;
  height: 10px;
  line-height: 10px;
  position: absolute;
  padding: 2px;
  top: 0;
  right: 2px;
  color: #424242;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsMoreButton:hover {
  color: darkred;
  cursor: pointer;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerNickname {
  color: darkred;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsTextRow {
  font-size: 11px;
  padding-left: 40px;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsTextRowValue {
  color: darkred;
  font-weight: bold;
  padding: 0 11px;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsFriendAddButton,
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsFriendRemoveButton {
  text-align: right;
  margin-right: 10px;
  margin-top: 5px;
  font-size: 12px;
  display: none;
  color: #424242;
}
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsFriendAddButton:hover,
.page[data-page="dashboard-game"] #gamePlayers .player[data-details-visible="true"] .playerDetailsFriendRemoveButton:hover {
  cursor: pointer;
  color: darkred;
}
.page[data-page="dashboard-game"] #dashboardChatBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  bottom: 5px;
  right: 5px;
  left: 230px;
  /** CHAT MESSAGES CONTAINER */
  /** CHAT SINGLE MESSAGE */
  /** CHAT INPUT TEXTAREA */
}
.page[data-page="dashboard-game"] #dashboardChatBox #dashboardChatMessagesBox {
  height: calc(100% - 55px);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  position: relative;
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox {
  display: block;
  position: relative;
  margin-bottom: 5px;
  /** CHAT MY MESSAGE */
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox .chatMessageAvatar {
  width: 40px;
  background-size: 100% 100%;
  height: 40px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  position: absolute;
  bottom: 0;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox .chatMessageTextBox {
  margin-left: 64px;
  display: inline-block;
  min-height: 40px;
  position: relative;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 5px;
  background-color: #dcdcdc;
  vertical-align: top;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox .chatMessageTextBox .nickname {
  color: darkred;
  font-size: 10px;
  padding-left: 10px;
  padding-top: 3px;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox .chatMessageTextBox .message {
  padding-left: 20px;
  font-size: 12px;
  overflow-x: hidden;
  padding-right: 5px;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox .chatMessageTextBox:before {
  right: 100%;
  bottom: 7px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: #DCDCDC;
  border-width: 7px 15px 7px;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.notification .chatMessageTextBox {
  background-color: khaki;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.notification .chatMessageTextBox:before {
  display: none;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.myMessage {
  text-align: right;
  min-height: 28px;
  right: 8px;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.myMessage .message {
  padding: 5px !important;
  font-size: 12px;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.myMessage .chatMessageAvatar {
  display: none;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.myMessage .chatMessageTextBox {
  max-width: calc(100% - 65px);
  margin-left: 50px;
  margin-right: 15px;
  min-height: 28px;
  color: #fafafa;
  background-color: darkred;
}
.page[data-page="dashboard-game"] #dashboardChatBox .chatMessageBox.myMessage .chatMessageTextBox:before {
  right: -30px;
  border-left-color: darkred;
  border-right-color: transparent;
}
.page[data-page="dashboard-game"] #dashboardChatBox #dashboardChatInputBox {
  margin-top: 5px;
}
.page[data-page="dashboard-game"] #dashboardChatBox #dashboardChatInputBox textarea {
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 15px;
  line-height: 21px;
  max-height: 40px;
  overflow-x: hidden;
  padding: 10px 10px 0px 13px;
  position: absolute;
  resize: none;
  width: 100%;
  overflow-y: scroll;
}
.page[data-page="dashboard-game"] #dashboardChatBox #dashboardChatInputBox:after {
  content: "press ENTER to send";
  position: absolute;
  bottom: -15px;
  right: 4px;
  font-size: 8px;
  color: #c8c8c8;
}
.popup[data-popup="account"]:before,
.popup[data-popup="account"]:after {
  content: " ";
  display: table;
}
.popup[data-popup="account"]:after {
  clear: both;
}
.popup[data-popup="account"] .avatarColumn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 170px;
  padding-right: 10px;
  float: left;
}
.popup[data-popup="account"] .formColumn {
  width: 350px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}
.popup[data-popup="account"] .avatarColumn .avatarBox {
  width: 160px;
  height: 148px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  position: relative;
}
.popup[data-popup="account"] .avatarColumn .avatarBox img {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  height: 100%;
}
.popup[data-popup="account"] .avatarColumn .avatarBox input[type="file"] {
  display: none;
}
.popup[data-popup="account"] .avatarColumn .avatarBox label {
  -moz-transition: color 0.4s;
  -o-transition: color 0.4s;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}
.popup[data-popup="account"] .avatarColumn .avatarBox label:hover {
  color: #fafafa;
  cursor: pointer;
}
.popup[data-popup="account"] .avatarColumn .avatarBox label span.labelText {
  display: block;
}
.popup[data-popup="account"] .avatarColumn .avatarBox label span.labelText:hover {
  color: white;
}
.popup[data-popup="account"] .avatarColumn .avatarBox .error[for="input-avatar"] {
  position: absolute;
  background-color: darkred;
  color: white;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 4px 10px;
  right: 0px;
  bottom: 0px;
  display: none;
}
.popup[data-popup="account"] .avatarColumn .avatarBox #checkbox-avatar-remove {
  display: none;
}
.popup[data-popup="account"] .avatarColumn .avatarBox .avatarRemove {
  position: absolute;
  top: -7px;
  right: -5px;
  color: #8b0000;
  background-color: #fff;
  padding: 4px 10px;
  display: none;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.popup[data-popup="account"] .avatarColumn .avatarBox .avatarRemove:hover {
  color: #8b0000;
  cursor: pointer;
}
.popup[data-popup="account"] .formColumn input[type="text"],
.popup[data-popup="account"] .formColumn input[type="password"],
.popup[data-popup="account"] .formColumn label.textInputPlaceholder {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: normal;
  width: 100%;
  height: 100%;
  display: block;
  padding: 10px 20px;
  font-size: 18px;
  border: 0;
  border-radius: 3px;
}
.popup[data-popup="account"] .formColumn input[type="text"].hidden,
.popup[data-popup="account"] .formColumn input[type="password"].hidden,
.popup[data-popup="account"] .formColumn label.textInputPlaceholder.hidden {
  visibility: hidden;
}
.popup[data-popup="account"] .formColumn input[type="text"],
.popup[data-popup="account"] .formColumn input[type="password"] {
  background: #ffffff;
  color: #000000;
  position: relative;
}
.popup[data-popup="account"] .formColumn .textInputPlaceholder {
  position: absolute;
  -moz-transition: color 0.4s;
  -o-transition: color 0.4s;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
  background: #000000;
}
.popup[data-popup="account"] .formColumn .textInputPlaceholder:hover {
  cursor: pointer;
  color: #ffffff;
}
.popup[data-popup="account"] .formColumn .inputBox {
  margin-bottom: 7px;
  position: relative;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.popup[data-popup="account"] .formColumn .inputBox .error {
  position: absolute;
  right: 0;
  bottom: -5px;
  color: white;
  font-size: 11px;
  padding: 3px 8px;
  background: darkred;
  border-radius: 3px 0 3px 3px;
  display: none;
  white-space: nowrap;
}
/*   .avatarUploadProgress{
                position: absolute;
                bottom: 0;
                right: 0;
                top: 0;
                background-color: rgba(155,15,15,.9);
                border-left: 1px solid black;
                &:after{
                    background: white;
                    color:black;
                    padding:2px 5px;
                    position:absolute;
                    right:0px;
                    bottom:0px;
                    content: attr(data-progress);
                }
            }

*/
.popup[data-popup="new-game"] h2 {
  font-weight: 100;
  font-size: 25px;
  margin-top: 10px;
  margin-bottom: 33px;
  color: darkred;
}
.popup[data-popup="new-game"] input[type="radio"] {
  display: none;
}
.popup[data-popup="new-game"] input[type="password"] {
  background: transparent;
  border: 1px solid;
  padding: 10px;
  margin-left: 15px;
  width: calc(100% - 55px);
  display: none;
}
.popup[data-popup="new-game"] label {
  font-size: 14px;
  display: block;
  margin: 15px 15px;
}
.popup[data-popup="new-game"] label.selected {
  color: #fafafa;
}
.popup[data-popup="new-game"] label:hover:not(.selected) {
  color: #aeaeae;
  cursor: pointer;
}
.popup[data-popup="new-game"] .randomJackHideout {
  margin: 0px 15px;
}
.popup[data-popup="new-game"] .randomJackHideout input[type="checkbox"] {
  margin: 10px;
}
.popup[data-popup="new-game"] .randomJackHideout label[for="randomJackHideout"] {
  display: inline-block;
}
/**
 * PLAYER DETAILS POPUP
 */
.popup[data-popup="player-details"] .friendButtonBox {
  position: absolute;
  top: 5px;
  right: 5px;
}
.popup[data-popup="player-details"] .friendButtonBox[data-is-friend="true"] .addToFriends {
  display: none;
}
.popup[data-popup="player-details"] .friendButtonBox[data-is-friend="false"] .removeFromFriends {
  display: none;
}
.popup[data-popup="player-details"] .friendButtonBox:hover {
  color: #fafafa;
  cursor: pointer;
}
.popup[data-popup="player-details"] .avatar {
  width: 80px;
  height: 80px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  position: absolute;
}
.popup[data-popup="player-details"] .memberName {
  position: relative;
  height: 93px;
  margin-left: 115px;
  padding-top: 36px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 20px;
  color: #fafafa;
}
.popup[data-popup="player-details"] .memberDetailsTextRow {
  margin: 10px;
  font-size: 11px;
  color: #fafafa;
}
.popup[data-popup="player-details"] .memberDetailsTextRowValue {
  color: darkred;
  padding: 0 11px;
  font-size: 14px;
  vertical-align: bottom;
}
.popup[data-popup="player-kick-ban"] button {
  height: 30px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  width: calc(100% - 20px);
  border: 0;
  background-color: transparent;
  color: #aeaeae;
  text-align: left;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 5px 10px;
  font-size: 14px;
}
.popup[data-popup="player-kick-ban"] button:hover {
  background-color: darkred;
  color: #fafafa;
}
.popup[data-popup="game-password"] input {
  background: 0 0;
  border: 1px solid;
  padding: 10px;
  margin-left: 15px;
  width: calc(100% - 55px);
}
.popup[data-popup="game-end-overview"] {
  background-color: black;
  display: inline-block;
  padding: 100px 15px 15px;
}
.popup[data-popup="game-end-overview"] h2 {
  color: darkred;
  font-size: 69px;
  position: absolute;
  top: -11px;
  opacity: 0.3;
  z-index: 1;
}
.popup[data-popup="game-end-overview"] h1 {
  color: #fafafa;
  opacity: 1;
  font-size: 40px;
  position: absolute;
  top: 14px;
  left: 44px;
  z-index: 2;
}
.popup[data-popup="game-end-overview"] .dayOverview {
  background: black;
  display: block;
  margin-bottom: 5px;
}
.popup[data-popup="game-end-overview"] .dayOverview:before,
.popup[data-popup="game-end-overview"] .dayOverview:after {
  content: " ";
  display: table;
}
.popup[data-popup="game-end-overview"] .dayOverview:after {
  clear: both;
}
.popup[data-popup="game-end-overview"] .dayOverview .dayOverviewRightRail {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px solid white;
}
.popup[data-popup="game-end-overview"] .dayOverview .dayOverviewLeftRail {
  float: left;
  width: 70px;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethods,
.popup[data-popup="game-end-overview"] .dayOverviewMovementHideoutIDs,
.popup[data-popup="game-end-overview"] .dayOverviewMovementOrdination {
  margin-bottom: 5px;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethods:before,
.popup[data-popup="game-end-overview"] .dayOverviewMovementHideoutIDs:before,
.popup[data-popup="game-end-overview"] .dayOverviewMovementOrdination:before,
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethods:after,
.popup[data-popup="game-end-overview"] .dayOverviewMovementHideoutIDs:after,
.popup[data-popup="game-end-overview"] .dayOverviewMovementOrdination:after {
  content: " ";
  display: table;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethods:after,
.popup[data-popup="game-end-overview"] .dayOverviewMovementHideoutIDs:after,
.popup[data-popup="game-end-overview"] .dayOverviewMovementOrdination:after {
  clear: both;
}
.popup[data-popup="game-end-overview"] .dayOverviewTitle {
  color: #fafafa;
  font-size: 11px;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementHideoutIDs[data-day="3"] .dayOverviewMovementHideoutId:first-child {
  background: darkred;
  color: white;
}
.popup[data-popup="game-end-overview"] .dayOverviewMurderScene {
  font-size: 13px;
  color: #fafafa;
  text-align: center;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  background: darkred;
  width: 25px;
  height: 25px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: right;
  margin-right: 5px;
  margin-top: 17px;
  padding-top: 6px;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementOrdinal {
  float: left;
  font-size: 11px;
  width: 25px;
  height: 25px;
  text-align: center;
  padding-top: 3px;
  display: inline-block;
  color: #fafafa;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 5px;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementOrdinal.disabled {
  opacity: 0.15;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementHideoutId {
  float: left;
  font-size: 13px;
  width: 25px;
  height: 25px;
  text-align: center;
  display: inline-block;
  padding-top: 6px;
  background: white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 5px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethod {
  float: left;
  height: 25px;
  margin-left: 5px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethod[data-method="carriage"] {
  width: 55px;
  background-image: url(/resources/images/icon/carriage_white.png);
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethod[data-method="walk"] {
  background-image: url(/resources/images/icon/footsteps_white.png);
  width: 25px;
}
.popup[data-popup="game-end-overview"] .dayOverviewMovementMethod[data-method="alley"] {
  background-image: url(/resources/images/icon/lantern_white.png);
  width: 25px;
}
/** fat Nav */
#fadeNavHamburger {
  display: block;
  position: fixed;
  z-index: 1051;
  height: 36px;
  width: 44px;
  top: 4px;
  left: 4px;
  padding: 10px 7px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.2);
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
}
#fadeNavHamburger:hover {
  cursor: pointer;
}
#fadeNavHamburger.active div {
  background-color: transparent;
}
#fadeNavHamburger.active div:before {
  -moz-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}
#fadeNavHamburger.active div:after {
  -moz-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}
#fadeNavHamburger div {
  margin-top: 7px;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  transition-property: background-color;
}
#fadeNavHamburger div,
#fadeNavHamburger div:before,
#fadeNavHamburger div:after {
  background-color: #ffffff;
  display: block;
  height: 2px;
  position: absolute;
  width: 30px;
}
#fadeNavHamburger div:before,
#fadeNavHamburger div:after {
  content: '';
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color,-webkit-transform,-moz-transform,-o-transform,transform;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
#fadeNavHamburger div:before {
  top: -7px;
}
#fadeNavHamburger div:after {
  top: 7px;
}
#fadeNavMenu {
  top: 0;
  left: 0;
  display: none;
  z-index: 1050;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.96);
  opacity: 0;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#fadeNavMenu.active {
  opacity: .99;
}
#fadeNavMenu ul {
  padding: 0;
}
#fadeNavMenu li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
  font-size: 2em;
  color: white;
  opacity: 0.44;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#fadeNavMenu li:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  opacity: .99;
}
/** WHITECHAPEL - font */
@font-face {
  font-family: whitechapel-bb;
  src: url(../fonts/Whitechapel_BB.ttf);
}
/** LETTERS FROM - font */
@font-face {
  font-family: alex-brush;
  src: url(../fonts/AlexBrush-Regular.ttf);
}
@font-face {
  font-family: open-sans;
  src: url(../fonts/OpenSans/OpenSans-Light.ttf);
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: open-sans;
  src: url(../fonts/OpenSans/OpenSans-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: open-sans;
  src: url(../fonts/OpenSans/OpenSans-Semibold.ttf);
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: open-sans;
  src: url(../fonts/OpenSans/OpenSans-Bold.ttf);
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: sinkin-sans;
  src: url(../fonts/SinkinSans/SinkinSans-400Regular.otf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: sinkin-sans;
  src: url(../fonts/SinkinSans/SinkinSans-600SemiBold.otf);
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: sinkin-sans;
  src: url(../fonts/SinkinSans/SinkinSans-700Bold.otf);
  font-weight: 700;
  font-style: normal;
}