body.dimmable.dimmed{
  overflow: initial !important;
}

.ui.segment.game {
  width: 75%;
  margin: auto;
}

#gameboard {
  background-image: url("/assets/images/board.png");
  width: 576px;
  height: 576px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  position: relative;
}

.dice {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 10%;
  background-image: url("/assets/images/dice.png");
  background-repeat: repeat-y;
  background-size: cover;
  transition: background-position 3s ease-out;
}

.ui.cards a.card.disabled:hover {
  cursor: default;
  transform: translateY(0);
  -webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.ui.card.disabled>.content>.header, .ui.cards>.card.disabled>.content>.header {
  color: rgba(100, 100, 100, .85);
}

.ui.cards a.card.disabled {
  -webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

#clueEditor {
  position: absolute;
  right: auto;
  font-weight: bold;
}

#clueEditor td {
  text-align: center;
  cursor: pointer;
}

#clueEditor i {
  margin: 0;
}

#divPlayers .column {
  text-align: center;
  border-radius: 10px;
}

#divPlayers .his-turn {
  box-shadow: inset 0 0 20px 0 #ff8800, 0 0 20px 0 #ff8800;
  animation: his-turn 1s alternate infinite linear;
}

@keyframes his-turn {
  from {
    box-shadow: inset 0 0 20px 0 #ff8800, 0 0 30px 0 #ff8800;
  }
  to {
    box-shadow: inset 0 0 10px 0 #ff8800, 0 0 10px 0 #ff8800;
  }
}

.char-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("/assets/images/users.png");
  background-size: cover;
  border-radius: 50%;
  border-style: solid;
  border-color: #333333;
  border-width: 2px;
  display: inline-block;
}

.char-icons .char-icon {
  margin-right: 3px;
}

.char-icon.mini {
  width: 20px;
  height: 20px;
}

.char-icon.selected {
  border-width: 4px;
}

.char-icon.char1 {
  background-position-x: 20%;
}

.char-icon.char2 {
  background-position-x: 40%;
}

.char-icon.char3 {
  background-position-x: 60%;
}

.char-icon.char4 {
  background-position-x: 80%;
}

.char-icon.char5 {
  background-position-x: 100%;
}

#tblInquiry .subhead td {
  border-left: none;
  font-weight: bold;
  background-color: #e5e5e5;
}

#tblInquiry thead th {
  padding-bottom: 3px;
}

#tblInquiry tr.owned td::after, #tblInquiry td.crossed::after {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 2px;
  background: #cc0000;
  content: "";
  margin: auto;
  display: block;
}

#tblInquiry td.sure:first-child::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  content: "";
  width: 100%;
  margin: 0;
  border-radius: 50%;
  border-color: #cc0000;
  border-style: solid;
  border-width: 2px;
  display: block;
}

#tblInquiry td {
  position: relative;
  cursor: default;
}

#divPlayers .talking, #divPlayers .no-clue, #divPlayers .clue {
  position: relative;
}

#divPlayers .talking::after, #divPlayers .no-clue::after, #divPlayers .clue::after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -5px;
  right: 5px;
  display: block;
  content: "";
  background-color: #ffffff;
  border: solid 1px #999999;
  text-align: left;
  padding: 5px;
  font-family: Icons;
}

#divPlayers .talking::after {
  animation: talking 2s infinite;
  line-height: 1px;
}

#divPlayers .no-clue::after {
  content: "\f00d";
  color: red;
  line-height: 9px;
  padding: 4px;
}

#divPlayers .clue::after {
  content: "\f00c";
  color: green;
  line-height: 1px;
  line-height: 13px;
  padding: 2px;
}

#pHypothesis{
  font-size: 20px;
}

@keyframes talking {
  0% {
    content: ""
  }
  25% {
    content: "."
  }
  50% {
    content: ".."
  }
  75% {
    content: "..."
  }
}

.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child {
  padding: .3em .5em;
}

.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
  padding: .3em .5em;
}

.ui.compact.table td {
  padding: .3em .5em;
}

#modShowCard a.card {
  margin: auto;
}

#version {
  position: fixed;
  bottom: 2px;
  right: 10px;
}

@media screen and (max-width: 1450px) {
  .ui.segment.game {
    width: 55%;
    margin: auto;
  }
}