#czarTable{
  background-color: #222222;
  color: #FFF;
}
#czarTable .hero-body{
  align-items: start;
}
.cc {
  width: 150px;
  max-width: 150px;
  padding: 10px;
  font-size: 12px;
  min-height: 200px;
  border-radius: 10px;
  border: 1px solid #000;
  user-select: none;
}
.cc.czar {
  background-color: #000;
  color: #FFF;
}
.cc.blank {
  background-color: #FFF;
  color: #000;
}
.cc.secret {
  background-color: rgb(101, 94, 177);
  color: #FFF;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 3px;
}
.cc.blank.winner{
  background-color: #ffdd57;
  font-weight: 700;
}
.deck {
  position: relative;
}
.deck.disabled {
  opacity: 0.2;
}
.can-click{
  cursor: pointer;
}
#opcionesPlayer.can-click .cc {
  cursor: pointer;
}
#opcionesCzar.can-click .cc.blank {
  cursor: pointer;
}
#login .input {
  width: 150px;
  background-color: transparent;
  color: #FFF;
}
#login .input::placeholder {
  color: rgb(131, 131, 131);
  font-style: italic;
}
#login{
  padding: 10px;
}
#loginButton{
  color: rgb(82, 82, 82);
  cursor: pointer
}
#playerDeck.disabled{
  opacity: 0.3;
}

.the-points{
  border: 1px solid rgb(78, 78, 78);
  border-radius: 5px;
  min-height: 40px;
}

.player-points{
  padding: 5px 5px !important;
}
.player-points p:first-child{
  font-weight: 700;
  margin-bottom: -6px;
  font-size: 1.1rem;
}
.player-points p:nth-child(2){
  font-style: italic;
}

.notification{
  margin-bottom:25px;
}
#playerDeck:not(.disabled) .player-card{
  cursor: pointer;
}

#timer{
  position: absolute;
  right: 15px;
  top: 10px;
  font-weight: 800;
  user-select: none;
  z-index: 50;
}
#winnerModal{
  justify-content: start;
}
#winnerModal .notification{
  margin-top: 150px;
  padding:25px;
  border-radius: 0;
}