@font-face { font-family: DejaVu; src: url('DejaVu.ttf'); }
body { font-family: DejaVu; font-weight: bold; }
table { white-space: nowrap; }

/* Bridge board */
#contract, #par-score { display: flex; align-items: center; justify-content: center; }
.seat { white-space: nowrap; }
.hand { background-color: #eee; border: 1px solid lightgrey; }
.bids { font-weight: normal; text-align: center; }
.bid:hover { background-color: #fee; cursor: url('cross.png'), auto; }
#auction { border: 1px solid lightgrey; height: 132px; overflow: auto; }
#note { border: 1px solid #eed; background-color: #ffe; padding: 3px; }
#bidding-controls { overflow: auto; }

/* Overlay tricks to the center-bottom of the card */
.suit td { position: relative; }
.tricks {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 75%;
}
.equal { color: green; }
.plus { color: green; letter-spacing: -2px; }
.minus { color: red; letter-spacing: -1px; }

/* Buttons */
button { border-radius: 24px; color: white; height: 48px; }
.nav-btn { width: 100px; }

.red-btn { background-color: #a00; color: white; }
.red-btn:hover { background-color: #d00; }
.green-btn { background-color: #080; color: white; }
.green-btn:hover { background-color: #0c0; }
.blue-btn { background-color: #008; color: white; }
.blue-btn:hover { background-color: #00f; }
.grey-btn { background-color: #eee; color: black; }
.grey-btn:hover { background-color: #ccc; }
.red-btn:disabled, .green-btn:disabled, .blue-btn:disabled, .grey-btn:disabled {
  background-color: #444;
  color: black;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Toggles */
.toggle { position: relative; display: inline-block; width: 60px; height: 30px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bbb;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: smaller;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: .1s;
  border-radius: 50%;
}
.slider:hover { background-color: #ddd; transition: 0.2s;}
input:checked + .slider { background-color: #38c; color: white; }
input:checked + .slider:before { transform: translateX(30px); }
input:checked + .slider:hover { background-color: #5ae; transition: 0.2s;}

/* Vulnerability */
.red-name {
  background-color: #a00;
  border: 1px solid #800;
  color:white;
  text-align: center;
}
.white-name {
  background-color: #fff;
  border: 1px solid lightgrey;
  color:black;
  text-align: center;
}

/* Suit symbols */
ss:before { color: black; content: '♠'; }
hs:before { color: #dd0000; content: '♥'; }
ds:before { color: #dd0000; content: '♦'; }
cs:before { color: black; content: '♣'; }

/* Double dummy */
table.dd {
  border: 1px solid lightgrey;
  font-size: 90%;
  line-height: 136%;
  margin:auto;
  text-align: center;
}
table.dd th { background-color: #eee; }
table.dd th, table.dd td { min-width: 30px; padding-left: 3px; padding-right: 3px; }