.center-h {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.center-v {
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.trick-start {
  position: absolute;
  width: 10px;
}
.trick-start.N {
  top: -7px;
}
.trick-start.S {
  bottom: -7px;
}
.trick-start.E {
  right: 0px;
}
.trick {
  /* card + trick start mark */
}
.trick .card {
  position: absolute;
}
.trick .card.N {
  top: 5px;
}
.trick .card.S {
  bottom: 5px;
}
.trick .card.W {
  left: 5px;
}
.trick .card.E {
  right: 5px;
}
.trick .N,
.trick .S {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.trick .W,
.trick .E {
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#table[size=large] {
  width: 800px;
  height: 670px;
  border: solid black 1px;
}
#table[size=large][applayout=side] {
  display: inline-block;
}
#table[size=large][applayout=bottom] {
  top: 0;
}
#table[size=large] .player-label {
  height: 25px;
  width: 200px;
  font-size: 16px;
  border-radius: 5px;
}
#table[size=large] .player-seat {
  margin: 3px;
}
#table[size=large] #label-N {
  position: absolute;
  top: 0;
}
#table[size=large] #label-S {
  bottom: 40px;
}
#table[size=large] #label-W {
  top: 455px;
  left: 5px;
}
#table[size=large] #label-E {
  top: 455px;
  right: 5px;
}
#table[size=large] #hand-N {
  top: 28px;
  left: 230px;
  width: 340px;
  height: 250px;
}
#table[size=large] #hand-W {
  top: 200px;
  left: 0px;
  width: 220px;
  height: 250px;
}
#table[size=large] #hand-S {
  top: 494px;
  left: 230px;
  width: 340px;
  height: 110px;
}
#table[size=large] #hand-E {
  right: 0px;
  top: 200px;
  width: 265px;
  height: 250px;
}
#table[size=large] #trick {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 280px;
  width: 200px;
  height: 180px;
  /*
	border: solid  darkgreen 1px;
	border-radius: 15px;
*/
}
#table[size=large] #bidding {
  top: 0px;
  right: 0px;
  width: 200px;
}
#table[size=large] #bidding-tab {
  font-size: 15px;
}
#table[size=large] #bidding-tab td,
#table[size=large] th {
  margin: 5px;
}
#table[size=large] .bidding-head {
  font-size: 20px;
}
#table[size=large] #trick-stack {
  bottom: 75px;
  right: 0px;
  width: 230px;
  height: 50px;
}
#table[size=large] #old-trick {
  left: 540px;
  top: 340px;
  width: 200px;
  height: 180px;
}
#table[size=large] #old-trick-number {
  top: 0px;
  left: 0px;
  margin: 5px;
  font-size: 15px;
}
#table[size=large] #status-line {
  bottom: 40px;
  right: 0px;
  width: 220px;
  height: 28px;
  padding: 5px;
  font-size: 15px;
}
#table[size=large] #deal-info {
  left: 20px;
  top: 25px;
  width: 180px;
  height: 100px;
  padding: 5px;
  font-size: 20px;
  border: double black 5px;
  border-radius: 10px;
}
#table[size=large] #button-row {
  left: 0px;
  bottom: 0px;
  height: 40px;
  width: 100%;
  padding: 3px;
}
#table[size=large] #dds-indicator {
  height: 20px;
  width: 20px;
  margin: 5px;
}
#table[size=large] #text-view {
  left: 0px;
  bottom: 0px;
  height: 40px;
  width: 100%;
}
#table[size=large] #solution {
  left: 799px;
  top: 0px;
  height: 708px;
  width: 300px;
  padding: 3px;
}
#table[size=large] button {
  height: 30px;
  width: 35px;
}
#table[size=large] .msg-result {
  left: 10px;
  bottom: 75px;
  height: 50px;
  width: 200px;
  padding: 7px;
  border: double 5px black;
  border-radius: 8px;
  font-size: 25px;
}
#table[size=large] .msg-cont {
  left: 290px;
  top: 360px;
  width: 200px;
  border-radius: 5px;
}
#table[size=large] .trick-stack-mem {
  display: inline-block;
}
#table[size=large] .button-ontable {
  display: none;
}
#table[size=large] #hand-S .card,
#table[size=large] .hand-EW .card,
#table[size=large] #hand-N.hidden .card {
  margin-right: -55px;
  margin-top: 10px;
  display: inline-block;
}
#table[size=large] #hand-N .card {
  margin-bottom: -78px;
  margin-left: 5px;
}
#table[size=large] #hand-N.hidden .card {
  margin-bottom: 0px;
  margin-left: 0px;
}
#table[size=large] #hand-S .suit,
#table[size=large] .hand-EW .suit,
#table[size=large] #hand-N.hidden .suit {
  margin-left: 0px;
  margin-right: 0px;
  height: 106px;
  white-space: nowrap;
}
#table[size=large] #hand-N .suit {
  float: left;
}
#table[size=large] #hand-N.hidden .suit {
  float: none;
}
#table[size=large] .hand-EW .suit {
  margin-bottom: -60px;
}
#table[size=large] .hand-EW .suit:first-child {
  margin-top: 0px;
}
#table[size=large] #hand-S .suit,
#table[size=large] #hand-N.hidden .suit {
  width: auto;
  margin-left: 0px;
  display: inline-block;
}
#table[size=large] #hand-S {
  white-space: nowrap;
}
#table[size=large] #hand-N .suit {
  margin-left: 5px;
  width: 78px;
}
#table[size=large] #hand-N.hidden .suit {
  padding-top: 0px;
  margin-left: 0;
}
#table[size=large] #hand-N .card.raised {
  width: 78px;
  margin-left: 0px;
}
#table[size=large] #hand-S .card.raised,
#table[size=large] .hand-EW .card.raised {
  height: 103px;
  margin-top: 0;
}
#table[size=large] .card {
  width: 71px;
  height: 96px;
}
#table[size=large] .card-image {
  width: 71px;
  height: 96px;
  background-image: url(/images/cards-t.png);
  border-radius: 6px;
}
#table[size=large] .card.playable .card-image {
  border-top: 4px orangered solid;
}
#table[size=large] .trick-ns {
  background-image: url(/images/back-img-ns-47.png);
  margin-right: -20px;
  width: 35px;
  height: 48px;
}
#table[size=large] .trick-ew {
  background-image: url(/images/back-img-ew-47.png);
  margin-right: -32px;
  width: 48px;
  height: 35px;
}
#table[size=large] .card-hidden .card-image {
  background-image: url(/images/back-img-96.png);
}
#table[size=large] .CA .card-image {
  background-position: -2px -2px;
}
#table[size=large] .C2 .card-image {
  background-position: -75px -2px;
}
#table[size=large] .C3 .card-image {
  background-position: -148px -2px;
}
#table[size=large] .C4 .card-image {
  background-position: -221px -2px;
}
#table[size=large] .C5 .card-image {
  background-position: -294px -2px;
}
#table[size=large] .C6 .card-image {
  background-position: -367px -2px;
}
#table[size=large] .C7 .card-image {
  background-position: -440px -2px;
}
#table[size=large] .C8 .card-image {
  background-position: -513px -2px;
}
#table[size=large] .C9 .card-image {
  background-position: -586px -2px;
}
#table[size=large] .CT .card-image {
  background-position: -659px -2px;
}
#table[size=large] .CJ .card-image {
  background-position: -732px -2px;
}
#table[size=large] .CQ .card-image {
  background-position: -805px -2px;
}
#table[size=large] .CK .card-image {
  background-position: -878px -2px;
}
#table[size=large] .SA .card-image {
  background-position: -2px -100px;
}
#table[size=large] .S2 .card-image {
  background-position: -75px -100px;
}
#table[size=large] .S3 .card-image {
  background-position: -148px -100px;
}
#table[size=large] .S4 .card-image {
  background-position: -221px -100px;
}
#table[size=large] .S5 .card-image {
  background-position: -294px -100px;
}
#table[size=large] .S6 .card-image {
  background-position: -367px -100px;
}
#table[size=large] .S7 .card-image {
  background-position: -440px -100px;
}
#table[size=large] .S8 .card-image {
  background-position: -513px -100px;
}
#table[size=large] .S9 .card-image {
  background-position: -586px -100px;
}
#table[size=large] .ST .card-image {
  background-position: -659px -100px;
}
#table[size=large] .SJ .card-image {
  background-position: -732px -100px;
}
#table[size=large] .SQ .card-image {
  background-position: -805px -100px;
}
#table[size=large] .SK .card-image {
  background-position: -878px -100px;
}
#table[size=large] .HA .card-image {
  background-position: -2px -198px;
}
#table[size=large] .H2 .card-image {
  background-position: -75px -198px;
}
#table[size=large] .H3 .card-image {
  background-position: -148px -198px;
}
#table[size=large] .H4 .card-image {
  background-position: -221px -198px;
}
#table[size=large] .H5 .card-image {
  background-position: -294px -198px;
}
#table[size=large] .H6 .card-image {
  background-position: -367px -198px;
}
#table[size=large] .H7 .card-image {
  background-position: -440px -198px;
}
#table[size=large] .H8 .card-image {
  background-position: -513px -198px;
}
#table[size=large] .H9 .card-image {
  background-position: -586px -198px;
}
#table[size=large] .HT .card-image {
  background-position: -659px -198px;
}
#table[size=large] .HJ .card-image {
  background-position: -732px -198px;
}
#table[size=large] .HQ .card-image {
  background-position: -805px -198px;
}
#table[size=large] .HK .card-image {
  background-position: -878px -198px;
}
#table[size=large] .DA .card-image {
  background-position: -2px -296px;
}
#table[size=large] .D2 .card-image {
  background-position: -75px -296px;
}
#table[size=large] .D3 .card-image {
  background-position: -148px -296px;
}
#table[size=large] .D4 .card-image {
  background-position: -221px -296px;
}
#table[size=large] .D5 .card-image {
  background-position: -294px -296px;
}
#table[size=large] .D6 .card-image {
  background-position: -367px -296px;
}
#table[size=large] .D7 .card-image {
  background-position: -440px -296px;
}
#table[size=large] .D8 .card-image {
  background-position: -513px -296px;
}
#table[size=large] .D9 .card-image {
  background-position: -586px -296px;
}
#table[size=large] .DT .card-image {
  background-position: -659px -296px;
}
#table[size=large] .DJ .card-image {
  background-position: -732px -296px;
}
#table[size=large] .DQ .card-image {
  background-position: -805px -296px;
}
#table[size=large] .DK .card-image {
  background-position: -878px -296px;
}
#table[size=medium] {
  width: 540px;
  height: 450px;
  border: solid black 1px;
}
#table[size=medium][applayout=side] {
  display: inline-block;
}
#table[size=medium] .player-label {
  height: 22px;
  width: 160px;
  font-size: 14px;
  border-radius: 4px;
}
#table[size=medium] .player-seat {
  margin: 3px;
}
#table[size=medium] #label-N {
  position: absolute;
  top: 0;
}
#table[size=medium] #label-S {
  bottom: 40px;
}
#table[size=medium] #label-W {
  top: 295px;
  left: 5px;
}
#table[size=medium] #label-E {
  top: 295px;
  right: 5px;
}
#table[size=medium] #hand-N {
  top: 25px;
  left: 150px;
  width: 225px;
  height: 60px;
}
#table[size=medium] #hand-W {
  top: 120px;
  left: 0px;
  width: 193px;
  height: 170px;
}
#table[size=medium] #hand-S {
  bottom: 65px;
  left: 150px;
  width: 225px;
  height: 60px;
}
#table[size=medium] #hand-E {
  right: 0px;
  top: 120px;
  width: 193px;
  height: 170px;
}
#table[size=medium] #trick {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 102px;
  width: 150px;
  height: 210px;
  /*
	border: solid  darkgreen 1px;
	border-radius: 15px;
*/
}
#table[size=medium] #bidding {
  top: 0px;
  right: 0px;
  width: 140px;
  max-height: 130px;
  overflow: auto;
}
#table[size=medium] #bidding-tab {
  font-size: 12px;
}
#table[size=medium] #bidding-tab td,
#table[size=medium] th {
  margin: 2px;
}
#table[size=medium] .bidding-head {
  font-size: 12px;
}
#table[size=medium] #trick-stack {
  bottom: 70px;
  right: 0px;
  width: 160px;
  height: 40px;
}
#table[size=medium] #old-trick {
  left: 380px;
  top: 120px;
  width: 150px;
  height: 210px;
}
#table[size=medium] #old-trick-number {
  top: 0px;
  left: 0px;
  margin: 5px;
  font-size: 15px;
}
#table[size=medium] #status-line {
  bottom: 40px;
  right: 0px;
  width: 160px;
  height: 24px;
  padding: 5px;
  font-size: 12px;
}
#table[size=medium] #deal-info {
  left: 10px;
  top: 10px;
  width: 120px;
  height: 70px;
  font-size: 14px;
  border: double black 5px;
  border-radius: 10px;
}
#table[size=medium] #button-row {
  left: 0px;
  bottom: 0px;
  height: 40px;
  width: 100%;
  padding: 3px;
}
#table[size=medium] #dds-indicator {
  height: 20px;
  width: 20px;
  margin: 5px;
}
#table[size=medium] #text-view {
  left: 0px;
  top: 448px;
  min-height: 40px;
  max-height: 200px;
  width: 100%;
}
#table[size=medium] #solution {
  left: 539px;
  top: 0px;
  height: 488px;
  width: 240px;
  padding: 2px;
  font-size: 14px;
}
#table[size=medium] button {
  height: 30px;
  width: 35px;
}
#table[size=medium] .msg-result {
  left: 5px;
  bottom: 65px;
  height: 40px;
  width: 140px;
  padding: 5px;
  border: double 5px black;
  font-size: 20px;
  border-radius: 5px;
}
#table[size=medium] .msg-cont {
  left: 197px;
  top: 180px;
  /* 	height: 30px; */
  width: 140px;
  border-radius: 3px;
}
#table[size=medium] .button-ontable {
  display: none;
}
#table[size=medium] .trick-stack-mem {
  display: inline-block;
}
#table[size=medium] .hand .card {
  margin-right: -41px;
  margin-top: 5px;
  display: inline-block;
}
#table[size=medium] .hand {
  height: 91px;
  white-space: nowrap;
}
#table[size=medium] .suit {
  padding-left: 0px;
  margin-right: 0px;
}
#table[size=medium] .hand-NS .suit {
  display: inline-block;
}
#table[size=medium] .hand-EW .suit {
  margin-bottom: -60px;
}
#table[size=medium] .hand .card.raised {
  height: 86px;
  margin-top: 0;
}
#table[size=medium] .card {
  width: 58px;
  height: 81px;
}
#table[size=medium] .card-image {
  width: 58px;
  height: 81px;
  background-image: url(/images/cards-small-81.png);
  border-radius: 6px;
}
#table[size=medium] .card.playable .card-image {
  border-top: 4px orangered solid;
}
#table[size=medium] .trick-ns {
  background-image: url(/images/back-plain-ns-37.png);
  margin-right: -14px;
  width: 26px;
  height: 37px;
}
#table[size=medium] .trick-ew {
  background-image: url(/images/back-plain-ew-37.png);
  margin-right: -24px;
  width: 37px;
  height: 26px;
}
#table[size=medium] .card-hidden .card-image {
  background-image: url(/images/back-img-81.png);
}
#table[size=medium] .C2 .card-image {
  background-position: 0px 0px;
}
#table[size=medium] .C3 .card-image {
  background-position: -58px 0px;
}
#table[size=medium] .C4 .card-image {
  background-position: -116px 0px;
}
#table[size=medium] .C5 .card-image {
  background-position: -174px 0px;
}
#table[size=medium] .C6 .card-image {
  background-position: -232px 0px;
}
#table[size=medium] .C7 .card-image {
  background-position: -290px 0px;
}
#table[size=medium] .C8 .card-image {
  background-position: -348px 0px;
}
#table[size=medium] .C9 .card-image {
  background-position: -406px 0px;
}
#table[size=medium] .CT .card-image {
  background-position: -464px 0px;
}
#table[size=medium] .CJ .card-image {
  background-position: -522px 0px;
}
#table[size=medium] .CQ .card-image {
  background-position: -580px 0px;
}
#table[size=medium] .CK .card-image {
  background-position: -638px 0px;
}
#table[size=medium] .CA .card-image {
  background-position: -696px 0px;
}
#table[size=medium] .H2 .card-image {
  background-position: 0px -81px;
}
#table[size=medium] .H3 .card-image {
  background-position: -58px -81px;
}
#table[size=medium] .H4 .card-image {
  background-position: -116px -81px;
}
#table[size=medium] .H5 .card-image {
  background-position: -174px -81px;
}
#table[size=medium] .H6 .card-image {
  background-position: -232px -81px;
}
#table[size=medium] .H7 .card-image {
  background-position: -290px -81px;
}
#table[size=medium] .H8 .card-image {
  background-position: -348px -81px;
}
#table[size=medium] .H9 .card-image {
  background-position: -406px -81px;
}
#table[size=medium] .HT .card-image {
  background-position: -464px -81px;
}
#table[size=medium] .HJ .card-image {
  background-position: -522px -81px;
}
#table[size=medium] .HQ .card-image {
  background-position: -580px -81px;
}
#table[size=medium] .HK .card-image {
  background-position: -638px -81px;
}
#table[size=medium] .HA .card-image {
  background-position: -696px -81px;
}
#table[size=medium] .S2 .card-image {
  background-position: 0px -162px;
}
#table[size=medium] .S3 .card-image {
  background-position: -58px -162px;
}
#table[size=medium] .S4 .card-image {
  background-position: -116px -162px;
}
#table[size=medium] .S5 .card-image {
  background-position: -174px -162px;
}
#table[size=medium] .S6 .card-image {
  background-position: -232px -162px;
}
#table[size=medium] .S7 .card-image {
  background-position: -290px -162px;
}
#table[size=medium] .S8 .card-image {
  background-position: -348px -162px;
}
#table[size=medium] .S9 .card-image {
  background-position: -406px -162px;
}
#table[size=medium] .ST .card-image {
  background-position: -464px -162px;
}
#table[size=medium] .SJ .card-image {
  background-position: -522px -162px;
}
#table[size=medium] .SQ .card-image {
  background-position: -580px -162px;
}
#table[size=medium] .SK .card-image {
  background-position: -638px -162px;
}
#table[size=medium] .SA .card-image {
  background-position: -696px -162px;
}
#table[size=medium] .D2 .card-image {
  background-position: 0px -243px;
}
#table[size=medium] .D3 .card-image {
  background-position: -58px -243px;
}
#table[size=medium] .D4 .card-image {
  background-position: -116px -243px;
}
#table[size=medium] .D5 .card-image {
  background-position: -174px -243px;
}
#table[size=medium] .D6 .card-image {
  background-position: -232px -243px;
}
#table[size=medium] .D7 .card-image {
  background-position: -290px -243px;
}
#table[size=medium] .D8 .card-image {
  background-position: -348px -243px;
}
#table[size=medium] .D9 .card-image {
  background-position: -406px -243px;
}
#table[size=medium] .DT .card-image {
  background-position: -464px -243px;
}
#table[size=medium] .DJ .card-image {
  background-position: -522px -243px;
}
#table[size=medium] .DQ .card-image {
  background-position: -580px -243px;
}
#table[size=medium] .DK .card-image {
  background-position: -638px -243px;
}
#table[size=medium] .DA .card-image {
  background-position: -696px -243px;
}
/* end of table medium */
/* common css for table size small and dia */
#table[size="small"] #bidding,
#table[size="dia"] #bidding {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 140px;
  width: 140px;
  z-index: 150;
}
#table[size="small"] #bidding:empty,
#table[size="dia"] #bidding:empty {
  display: none;
}
#table[size="small"] #bidding-tab,
#table[size="dia"] #bidding-tab {
  font-size: 12px;
}
#table[size="small"] #bidding-tab td,
#table[size="dia"] #bidding-tab td,
#table[size="small"] #bidding-tab th,
#table[size="dia"] #bidding-tab th {
  margin: 2px;
}
#table[size="small"] .bidding-head,
#table[size="dia"] .bidding-head {
  font-size: 12px;
}
#table[size="small"] #trick-stack,
#table[size="dia"] #trick-stack {
  top: 45px;
  right: 5px;
  width: 20px;
  height: 240px;
  padding: 0px;
  background-color: gray;
  border: solid black 1px;
}
#table[size="small"] #old-trick,
#table[size="dia"] #old-trick {
  right: 60px;
  top: 50px;
  width: 160px;
  height: 190px;
}
#table[size="small"] #old-trick-number,
#table[size="dia"] #old-trick-number {
  top: 0px;
  left: 0px;
  margin: 5px;
  font-size: 15px;
}
#table[size="small"] #status-line,
#table[size="dia"] #status-line {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 0px;
  width: 100px;
  height: 40px;
  padding: 3px;
  border: solid black 1px;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
}
#table[size="small"] #status-line #contract,
#table[size="dia"] #status-line #contract {
  float: none;
  margin: auto;
}
#table[size="small"] #status-line #score,
#table[size="dia"] #status-line #score {
  float: none;
  margin: auto;
}
#table[size="small"] #deal-info,
#table[size="dia"] #deal-info {
  left: 0px;
  top: 0px;
  width: 100px;
  height: 40px;
  font-size: 12px;
  border: solid black 1px;
  border-radius: 5px;
  padding: 3px;
  white-space: nowrap;
}
#table[size="small"] #deal-info p,
#table[size="dia"] #deal-info p {
  display: inline;
}
#table[size="small"] #button-row,
#table[size="dia"] #button-row {
  left: 0px;
  bottom: 0px;
  height: 38px;
  width: 100%;
  padding: 1px;
  padding-top: 3px;
  border-style: none;
}
#table[size="small"] #dds-indicator,
#table[size="dia"] #dds-indicator {
  height: 30px;
  width: 4px;
  margin: 4px;
  display: none;
}
#table[size="small"] #text-view,
#table[size="dia"] #text-view {
  left: 5%;
  top: 448px;
  min-height: 40px;
  max-height: 200px;
  width: 90%;
  overflow: scroll;
  background-color: white;
}
#table[size="small"] #text-view:empty,
#table[size="dia"] #text-view:empty {
  display: none;
}
#table[size="small"] .msg-result,
#table[size="dia"] .msg-result {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 65px;
  height: 40px;
  width: 140px;
  padding: 5px;
  border: solid 3px black;
  font-size: 20px;
  border-radius: 5px;
  z-index: 150;
}
#table[size="small"] .msg-cont,
#table[size="dia"] .msg-cont {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 270px;
  height: auto;
  width: 140px;
  border-radius: 3px;
}
#table[size="small"] button,
#table[size="dia"] button {
  width: 35px;
  height: 30px;
  display: inline-block;
  margin-bottom: 0px;
}
#table[size="small"] #button-info,
#table[size="dia"] #button-info {
  position: absolute;
  right: 35px;
  top: 10px;
}
#table[size="small"] #button-tstack,
#table[size="dia"] #button-tstack {
  position: absolute;
  right: 2px;
  top: 10px;
}
#table[size="small"] #button-sol-text,
#table[size="dia"] #button-sol-text {
  position: absolute;
  right: 68px;
  top: 10px;
}
#table[size="small"]:not([applayout=over]) #button-sol-text,
#table[size="dia"]:not([applayout=over]) #button-sol-text {
  display: none;
}
#table[size="small"] .trick-stack-mem,
#table[size="dia"] .trick-stack-mem {
  margin-right: 1px;
  margin-top: 1px;
  float: left;
}
#table[size="small"] .hidden-cond,
#table[size="dia"] .hidden-cond {
  display: none;
}
#table[size="small"] .hand.hidden,
#table[size="dia"] .hand.hidden {
  display: none;
}
#table[size="small"] .player-label.hidden,
#table[size="dia"] .player-label.hidden {
  display: none;
}
#table[size=small] {
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  max-width: 540px;
  max-height: 550px;
  min-height: 445px;
  min-width: 320px;
}
#table[size=small][applayout=side] {
  display: inline-block;
  width: 320px;
}
#table[size=small][applayout=bottom] {
  height: 445px;
}
#table[size=small] .card-hidden .card-image {
  background-size: 100% 100%;
}
#table[size=small] .player-label {
  height: 5px;
  width: 60px;
  font-size: 0px;
  border-radius: 0px;
}
#table[size=small] .player-seat {
  margin: 0px;
  height: 100%;
  width: 60%;
  display: inline-block;
}
#table[size=small] #label-N {
  position: absolute;
  top: 41px;
  left: 150px;
}
#table[size=small] #label-S {
  bottom: 1px;
  left: 160px;
}
#table[size=small] #label-W {
  top: 265px;
  left: 5px;
}
#table[size=small] #label-E {
  top: 265px;
  right: 5px;
}
#table[size=small] #hand-N {
  top: 40px;
  left: 0px;
  width: 100%;
  height: 75px;
}
#table[size=small] #hand-W {
  top: 130px;
  left: 0px;
  width: 160px;
  height: 220px;
}
#table[size=small] #hand-S {
  bottom: 40px;
  left: 0px;
  width: 100%;
  height: 75px;
}
#table[size=small] #hand-E {
  right: 0px;
  top: 130px;
  width: 160px;
  height: 220px;
}
#table[size=small] #trick {
  width: 160px;
  height: 190px;
  /*
	border: solid  darkgreen 1px;
	border-radius: 15px;
*/
}
#table[size=small].open #trick {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 55px;
  height: 160px;
  min-width: 55px;
  min-height: 160px;
}
#table[size=small].open .card-on-table {
  width: 20px;
  height: 45px;
  overflow: hidden;
}
#table[size=small].open #hand-E,
#table[size=small].open #hand-W {
  top: 115px;
  width: 42%;
}
#table[size=small] #trick[pos="center"] {
  top: 133.5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
#table[size=small] #trick[pos="left"] {
  left: 0px;
  top: 60px;
}
#table[size=small] #trick[pos="right"] {
  right: 0px;
  top: 60px;
}
#table[size=small] #table.open #trick {
  top: 140px;
  left: 145px;
  width: 55px;
  height: 160px;
  border-style: none;
}
#table[size=small] #table.open .card-on-table {
  height: 45px;
  width: 20px;
  overflow: hidden;
}
#table[size=small] .hand .card {
  margin-right: -46px;
  display: inline-block;
}
#table[size=small] .hand-NS .card {
  margin-top: 7px;
}
#table[size=small] .hand-EW .card {
  margin-top: 1px;
}
#table[size=small] .hand {
  white-space: nowrap;
  overflow: hidden;
}
#table[size=small] .suit {
  margin: 0px;
}
#table[size=small] .hand-EW .suit {
  height: 52px;
  overflow: hidden;
}
#table[size=small] .hand-NS .suit {
  display: inline-block;
}
#table[size=small] .hand .card.raised {
  height: 106px;
  margin-top: 0;
}
#table[size=small] .card-image {
  background-size: 923px 396px;
}
#table[size=small] .card {
  width: 71px;
  height: 99px;
}
#table[size=small] .card-image {
  width: 71px;
  height: 99px;
  background-image: url(/images/cards-bigsym-99.png);
  border-radius: 5px;
}
#table[size=small] .card.playable .card-image {
  border-top: 4px orangered solid;
}
#table[size=small] .trick-ns {
  background-image: url(/images/back-min-ns.png);
  margin-right: 0px;
  width: 19px;
  height: 19px;
}
#table[size=small] .trick-ew {
  background-image: url(/images/back-min-ew.png);
  margin-right: 0px;
  width: 19px;
  height: 19px;
}
#table[size=small] .card-hidden .card-image {
  background-image: url(/images/back-img-99.png);
}
#table[size=small] .C2 .card-image {
  background-position: -1px -1px;
}
#table[size=small] .C3 .card-image {
  background-position: -72px -1px;
}
#table[size=small] .C4 .card-image {
  background-position: -143px -1px;
}
#table[size=small] .C5 .card-image {
  background-position: -214px -1px;
}
#table[size=small] .C6 .card-image {
  background-position: -285px -1px;
}
#table[size=small] .C7 .card-image {
  background-position: -356px -1px;
}
#table[size=small] .C8 .card-image {
  background-position: -427px -1px;
}
#table[size=small] .C9 .card-image {
  background-position: -498px -1px;
}
#table[size=small] .CT .card-image {
  background-position: -569px -1px;
}
#table[size=small] .CJ .card-image {
  background-position: -640px -1px;
}
#table[size=small] .CQ .card-image {
  background-position: -711px -1px;
}
#table[size=small] .CK .card-image {
  background-position: -782px -1px;
}
#table[size=small] .CA .card-image {
  background-position: -853px -1px;
}
#table[size=small] .H2 .card-image {
  background-position: -1px -100px;
}
#table[size=small] .H3 .card-image {
  background-position: -72px -100px;
}
#table[size=small] .H4 .card-image {
  background-position: -143px -100px;
}
#table[size=small] .H5 .card-image {
  background-position: -214px -100px;
}
#table[size=small] .H6 .card-image {
  background-position: -285px -100px;
}
#table[size=small] .H7 .card-image {
  background-position: -356px -100px;
}
#table[size=small] .H8 .card-image {
  background-position: -427px -100px;
}
#table[size=small] .H9 .card-image {
  background-position: -498px -100px;
}
#table[size=small] .HT .card-image {
  background-position: -569px -100px;
}
#table[size=small] .HJ .card-image {
  background-position: -640px -100px;
}
#table[size=small] .HQ .card-image {
  background-position: -711px -100px;
}
#table[size=small] .HK .card-image {
  background-position: -782px -100px;
}
#table[size=small] .HA .card-image {
  background-position: -853px -100px;
}
#table[size=small] .S2 .card-image {
  background-position: -1px -199px;
}
#table[size=small] .S3 .card-image {
  background-position: -72px -199px;
}
#table[size=small] .S4 .card-image {
  background-position: -143px -199px;
}
#table[size=small] .S5 .card-image {
  background-position: -214px -199px;
}
#table[size=small] .S6 .card-image {
  background-position: -285px -199px;
}
#table[size=small] .S7 .card-image {
  background-position: -356px -199px;
}
#table[size=small] .S8 .card-image {
  background-position: -427px -199px;
}
#table[size=small] .S9 .card-image {
  background-position: -498px -199px;
}
#table[size=small] .ST .card-image {
  background-position: -569px -199px;
}
#table[size=small] .SJ .card-image {
  background-position: -640px -199px;
}
#table[size=small] .SQ .card-image {
  background-position: -711px -199px;
}
#table[size=small] .SK .card-image {
  background-position: -782px -199px;
}
#table[size=small] .SA .card-image {
  background-position: -853px -199px;
}
#table[size=small] .D2 .card-image {
  background-position: -1px -298px;
}
#table[size=small] .D3 .card-image {
  background-position: -72px -298px;
}
#table[size=small] .D4 .card-image {
  background-position: -143px -298px;
}
#table[size=small] .D5 .card-image {
  background-position: -214px -298px;
}
#table[size=small] .D6 .card-image {
  background-position: -285px -298px;
}
#table[size=small] .D7 .card-image {
  background-position: -356px -298px;
}
#table[size=small] .D8 .card-image {
  background-position: -427px -298px;
}
#table[size=small] .D9 .card-image {
  background-position: -498px -298px;
}
#table[size=small] .DT .card-image {
  background-position: -569px -298px;
}
#table[size=small] .DJ .card-image {
  background-position: -640px -298px;
}
#table[size=small] .DQ .card-image {
  background-position: -711px -298px;
}
#table[size=small] .DK .card-image {
  background-position: -782px -298px;
}
#table[size=small] .DA .card-image {
  background-position: -853px -298px;
}
/* table small */
#table[size=dia] {
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 300px;
  max-width: 540px;
  min-width: 320px;
}
#table[size=dia] #trick {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 55px;
  height: 160px;
  min-width: 55px;
  min-height: 160px;
  top: 70px;
}
#table[size=dia] .card.card-on-table {
  width: 20px;
  height: 45px;
  overflow: hidden;
}
#table[size=dia] #hand-E,
#table[size=dia] #hand-W {
  top: 100px;
  width: calc(50% -  55px / 2);
  height: 96px;
}
#table[size=dia] #hand-N,
#table[size=dia] #hand-S {
  height: auto;
}
#table[size=dia] .suit {
  text-align: left;
  font-weight: bold;
  height: auto !important;
  margin-right: 5px;
}
#table[size=dia] .suit[suit="S"]::before {
  content: "\2660";
  color: black;
}
#table[size=dia] .suit[suit="C"]::before {
  content: "\2663";
  color: black;
}
#table[size=dia] .suit[suit="H"]::before {
  content: "\2665";
  color: red;
}
#table[size=dia] .suit[suit="D"]::before {
  content: "\2666";
  color: red;
}
#table[size=dia] .suit .card {
  height: 14px;
  width: auto;
  margin-right: 2px !important;
  display: inline-block;
}
#table[size=dia] .suit .card-image {
  display: none;
}
#table[size=dia] .hand {
  background-color: white;
  border: 1px solid black;
  font-size: 14px;
}
#table[size=dia] #hand-N {
  top: 40px;
  left: 0px;
  width: 100%;
  height: auto;
}
#table[size=dia] #hand-W {
  left: 0px;
}
#table[size=dia] #hand-S {
  bottom: 40px;
  left: 0px;
  width: 100%;
  height: auto;
}
#table[size=dia] #hand-E {
  right: 0px;
}
#table[size=dia] .hand-NS .card {
  margin-top: 7px;
}
#table[size=dia] .hand-EW .card {
  margin-top: 1px;
}
#table[size=dia] .hand {
  white-space: nowrap;
  overflow: hidden;
}
#table[size=dia] .suit {
  margin: 0px;
}
#table[size=dia] .hand-EW .suit {
  height: 48px;
  width: 100%;
}
#table[size=dia] .hand-NS .suit {
  display: inline-block;
  width: auto;
}
#table[size=dia] .suit .card[card$="A"]::before {
  content: "A";
}
#table[size=dia] .suit .card[card$="K"]::before {
  content: "K";
}
#table[size=dia] .suit .card[card$="Q"]::before {
  content: "Q";
}
#table[size=dia] .suit .card[card$="J"]::before {
  content: "J";
}
#table[size=dia] .suit .card[card$="T"]::before {
  content: "T";
}
#table[size=dia] .suit .card[card$="T"]::before {
  content: "10";
}
#table[size=dia] .suit .card[card$="9"]::before {
  content: "9";
}
#table[size=dia] .suit .card[card$="8"]::before {
  content: "8";
}
#table[size=dia] .suit .card[card$="7"]::before {
  content: "7";
}
#table[size=dia] .suit .card[card$="6"]::before {
  content: "6";
}
#table[size=dia] .suit .card[card$="5"]::before {
  content: "5";
}
#table[size=dia] .suit .card[card$="4"]::before {
  content: "4";
}
#table[size=dia] .suit .card[card$="3"]::before {
  content: "3";
}
#table[size=dia] .suit .card[card$="2"]::before {
  content: "2";
}
#table[size=dia] .card {
  width: 20px;
  height: 45px;
}
#table[size=dia] .card-image {
  width: 20px;
  height: 45px;
  background-image: url(/images/cards-bigsym-99.png);
  border-radius: 0px;
}
#table[size=dia] .card.playable .card-image {
  border-top: 4px orangered solid;
}
#table[size=dia] .trick-ns {
  background-image: url(/images/back-min-ns.png);
  margin-right: 0px;
  width: 19px;
  height: 19px;
}
#table[size=dia] .trick-ew {
  background-image: url(/images/back-min-ew.png);
  margin-right: 0px;
  width: 19px;
  height: 19px;
}
#table[size=dia] .card-hidden .card-image {
  background-image: url(/images/back-img-99.png);
}
#table[size=dia] .C2 .card-image {
  background-position: -1px -1px;
}
#table[size=dia] .C3 .card-image {
  background-position: -72px -1px;
}
#table[size=dia] .C4 .card-image {
  background-position: -143px -1px;
}
#table[size=dia] .C5 .card-image {
  background-position: -214px -1px;
}
#table[size=dia] .C6 .card-image {
  background-position: -285px -1px;
}
#table[size=dia] .C7 .card-image {
  background-position: -356px -1px;
}
#table[size=dia] .C8 .card-image {
  background-position: -427px -1px;
}
#table[size=dia] .C9 .card-image {
  background-position: -498px -1px;
}
#table[size=dia] .CT .card-image {
  background-position: -569px -1px;
}
#table[size=dia] .CJ .card-image {
  background-position: -640px -1px;
}
#table[size=dia] .CQ .card-image {
  background-position: -711px -1px;
}
#table[size=dia] .CK .card-image {
  background-position: -782px -1px;
}
#table[size=dia] .CA .card-image {
  background-position: -853px -1px;
}
#table[size=dia] .H2 .card-image {
  background-position: -1px -100px;
}
#table[size=dia] .H3 .card-image {
  background-position: -72px -100px;
}
#table[size=dia] .H4 .card-image {
  background-position: -143px -100px;
}
#table[size=dia] .H5 .card-image {
  background-position: -214px -100px;
}
#table[size=dia] .H6 .card-image {
  background-position: -285px -100px;
}
#table[size=dia] .H7 .card-image {
  background-position: -356px -100px;
}
#table[size=dia] .H8 .card-image {
  background-position: -427px -100px;
}
#table[size=dia] .H9 .card-image {
  background-position: -498px -100px;
}
#table[size=dia] .HT .card-image {
  background-position: -569px -100px;
}
#table[size=dia] .HJ .card-image {
  background-position: -640px -100px;
}
#table[size=dia] .HQ .card-image {
  background-position: -711px -100px;
}
#table[size=dia] .HK .card-image {
  background-position: -782px -100px;
}
#table[size=dia] .HA .card-image {
  background-position: -853px -100px;
}
#table[size=dia] .S2 .card-image {
  background-position: -1px -199px;
}
#table[size=dia] .S3 .card-image {
  background-position: -72px -199px;
}
#table[size=dia] .S4 .card-image {
  background-position: -143px -199px;
}
#table[size=dia] .S5 .card-image {
  background-position: -214px -199px;
}
#table[size=dia] .S6 .card-image {
  background-position: -285px -199px;
}
#table[size=dia] .S7 .card-image {
  background-position: -356px -199px;
}
#table[size=dia] .S8 .card-image {
  background-position: -427px -199px;
}
#table[size=dia] .S9 .card-image {
  background-position: -498px -199px;
}
#table[size=dia] .ST .card-image {
  background-position: -569px -199px;
}
#table[size=dia] .SJ .card-image {
  background-position: -640px -199px;
}
#table[size=dia] .SQ .card-image {
  background-position: -711px -199px;
}
#table[size=dia] .SK .card-image {
  background-position: -782px -199px;
}
#table[size=dia] .SA .card-image {
  background-position: -853px -199px;
}
#table[size=dia] .D2 .card-image {
  background-position: -1px -298px;
}
#table[size=dia] .D3 .card-image {
  background-position: -72px -298px;
}
#table[size=dia] .D4 .card-image {
  background-position: -143px -298px;
}
#table[size=dia] .D5 .card-image {
  background-position: -214px -298px;
}
#table[size=dia] .D6 .card-image {
  background-position: -285px -298px;
}
#table[size=dia] .D7 .card-image {
  background-position: -356px -298px;
}
#table[size=dia] .D8 .card-image {
  background-position: -427px -298px;
}
#table[size=dia] .D9 .card-image {
  background-position: -498px -298px;
}
#table[size=dia] .DT .card-image {
  background-position: -569px -298px;
}
#table[size=dia] .DJ .card-image {
  background-position: -640px -298px;
}
#table[size=dia] .DQ .card-image {
  background-position: -711px -298px;
}
#table[size=dia] .DK .card-image {
  background-position: -782px -298px;
}
#table[size=dia] .DA .card-image {
  background-position: -853px -298px;
}
/* table size dia */
#solution {
  position: absolute;
  border: solid black 1px;
  font-family: "Times New Roman", Times, serif;
  overflow-y: auto;
  z-index: 1;
}
#solution span.new {
  font-weight: bold;
}
#solution #solution-help {
  font-weight: bold;
  color: blue;
  border-bottom: black solid 1px;
  margin-bottom: 3px;
}
#solution.hidden {
  display: none;
}
#solution[applayout=side] {
  display: inline-block;
  left: 0px;
  width: 100vw;
  padding: 3px;
}
#solution[applayout=side][size=large] {
  height: 670px;
  max-width: 1200px;
}
#solution[applayout=side][size=large] #solution-help,
#solution[applayout=side][size=large] #solution-content {
  margin-left: 800px;
}
#solution[applayout=side][size=medium] {
  height: 670px;
  max-width: 940px;
}
#solution[applayout=side][size=medium] #solution-help,
#solution[applayout=side][size=medium] #solution-content {
  margin-left: 540px;
}
#solution[applayout=side][size=small] {
  min-height: 445px;
  max-height: 550px;
  height: 100vh;
}
#solution[applayout=side][size=small] #solution-help,
#solution[applayout=side][size=small] #solution-content {
  margin-left: 320px;
}
#solution[applayout=bottom] {
  display: block;
  height: 100vh;
  top: 0;
  padding: 3px;
}
#solution[applayout=bottom][size=large] {
  width: 800px;
}
#solution[applayout=bottom][size=large] #solution-help {
  padding-top: 670px;
}
#solution[applayout=bottom][size=medium] {
  width: 540px;
}
#solution[applayout=bottom][size=medium] #solution-help {
  padding-top: 450px;
}
#solution[applayout=bottom][size=small] {
  width: 100vw;
  min-width: 320px;
  max-width: 540px;
}
#solution[applayout=bottom][size=small] #solution-help {
  padding-top: 445px;
}
#solution[applayout=bottom][size=dia] {
  width: 100vw;
  min-width: 320px;
  max-width: 540px;
}
#solution[applayout=bottom][size=dia] #solution-help {
  padding-top: 300px;
}
/*# sourceMappingURL=table.css.map */