@charset "UTF-8";
* { padding: 0; margin: 0; }

.database {
  display:grid;
  grid-template-columns: 5% 10% 20% 10% 10% 10% 35%;
  grid-template-rows: auto;
  max-width: 700px; 
  margin-top: 2px;
}

.db-button {
  grid-column: 1/1;
  grid-row: 1/1;
  font-size: 12px;
  font-weight: bold;
  background-color: lightgreen;
}

.db-organizer-label {
  grid-column: 2/2;
  grid-row: 1/1;
  font-size: 12px;
  text-align:right
}
.db-organizer-box {
  grid-column: 3/3;
  grid-row: 1/1;
  font-size: 12px;
}

.db-year-label {
  grid-column: 4/4;
  grid-row: 1/1;
  font-size: 12px;
  text-align:right
}
.db-year-box {
  grid-column: 5/5;
  grid-row: 1/1;
  font-size: 12px;
}

.db-tourney-label {
  grid-column: 6/6;
  grid-row: 1/1;
  font-size: 12px;
  text-align:right
}
.db-tourney-box {
  grid-column: 7/7;
  grid-row: 1/1;
  font-size: 12px;
}

.db-button { font-size: 12px }

.file-loader {
  font-size: 12px;
}

.select-grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto auto;

  margin-top: 10px;
  max-width: 700px;
  line-height: 0.9
}

.select-tourney-label { 
  grid-column: 1/1;
  grid-row: 1/1;
  font-size: 12px;
}

.select-stage-label { 
  grid-column: 2/2;
  grid-row: 1/1;
  font-size: 12px; 
}

.select-round-label { 
  grid-column: 3/3;
  grid-row: 1/1;
  font-size: 12px;
}

.select-match-label { 
  grid-column: 4/4;
  grid-row: 1/1;
  font-size: 12px;
}

.select-session-label { 
  grid-column: 5/5;
  grid-row: 1/1;
  font-size: 12px;
}

.select-tourney-box { 
  grid-column: 1/1;
  grid-row: 2/2;
  font-size: 12px; 
}

.select-stage-box { 
  grid-column: 2/2;
  grid-row: 2/2;
  font-size: 12px; 
}

.select-round-box { 
  grid-column: 3/3;
  grid-row: 2/2;
  font-size: 12px; 
}

.select-match-box { 
  grid-column: 4/4;
  grid-row: 2/2;
  font-size: 12px;
}

.select-session-box { 
  grid-column: 5/5;
  grid-row: 2/2;
font-size: 12px;
}

.game-selector {
  background-color: #B0E0E6;
}
.game {
    background-color: #79CDCD;
    border : 2px solid #669999;
    display: inline-grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    column-gap: 5px; 
    row-gap: 5px;
}
.room {background-color:#B0E0E6; min-height: 200px; } 

.deal {background-color:#B0E0E6; 
       min-height: 200px; 
       grid-row: 1/4;
       grid-column-start: 2;
       display:grid;
       grid-template-columns: auto auto auto;
       grid-template-rows: auto auto auto auto;
       font-size: 16px;
}
.n-hand {
  grid-row: 1/1;
  grid-column: 2/2;

  display: grid;
  grid-template-rows: auto auto auto auto;
}
.w-hand {
  grid-row: 2/2;
  grid-column: 1/1;
  grid-template-rows: auto auto auto auto;
}
.e-hand {
  grid-row: 2/2;
  grid-row: 2/2;
  grid-column-start: 3;
  grid-column-end: 3;
  grid-template-rows: auto auto auto auto;
}
.s-hand {
  grid-row: 3/3;
  grid-column: 2/2;
  grid-template-rows: auto auto auto auto;
}

.deal-info {
  grid-row: 2/2;
  grid-column: 2/2;

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.board-no {
  position: relative;
  left: -30px;

}

.dds-and-par {
  grid-row: 4/4;
  grid-column: 2/2;

  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  background-color: #B0E0E6;
}

.dds {
  grid-column: 1/1;

  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: auto auto auto auto auto auto;
  column-gap: 1px;
  row-gap: 1px;
  font-size: 14px;
  width: 100px;
  height: 130px;
  text-align: center;
}

.dds-header-lefttop {
  grid-row: 1/1;
  grid-column: 1/1;
} 
.dds-header-N {
  grid-row: 1/1;
  grid-column: 2/2;
  font-weight: bold;
}
.dds-header-S {
  grid-row: 1/1;
  grid-column: 3/3;
}
.dds-header-H {
  grid-row: 1/1;
  grid-column: 4/4;
}
.dds-header-D {
  grid-row: 1/1;
  grid-column: 5/5;
}
.dds-header-C {
  grid-row: 1/1;
  grid-column: 6/6;
}

.dds-west {
  grid-row: 2/2;
  grid-column: 1/1;
  font-weight: bold;
} 
.dds-west-N {
  grid-row: 2/2;
  grid-column: 2/2;
}
.dds-west-S {
  grid-row: 2/2;
  grid-column: 3/3;
}
.dds-west-H {
  grid-row: 2/2;
  grid-column: 4/4;
}
.dds-west-D {
  grid-row: 2/2;
  grid-column: 5/5;
}
.dds-west-C {
  grid-row: 2/2;
  grid-column: 6/6;
}

.dds-east {
  grid-row: 3/3;
  grid-column: 1/1;
  font-weight: bold;
} 
.dds-east-N {
  grid-row: 3/3;
  grid-column: 2/2;
}
.dds-east-S {
  grid-row: 3/3;
  grid-column: 3/3;
}
.dds-east-H {
  grid-row: 3/3;
  grid-column: 4/4;
}
.dds-east-D {
  grid-row: 3/3;
  grid-column: 5/5;
}
.dds-east-C {
  grid-row: 3/3;
  grid-column: 6/6;
}

.dds-north {
  grid-row: 4/4;
  grid-column: 1/1;
  font-weight: bold;
} 
.dds-north-N {
  grid-row: 4/4;
  grid-column: 2/2;
}
.dds-north-S {
  grid-row: 4/4;
  grid-column: 3/3;
}
.dds-north-H {
  grid-row: 4/4;
  grid-column: 4/4;
}
.dds-north-D {
  grid-row: 4/4;
  grid-column: 5/5;
}
.dds-north-C {
  grid-row: 4/4;
  grid-column: 6/6;
}

.dds-south {
  grid-row: 5/5;
  grid-column: 1/1;
  font-weight: bold;
} 
.dds-south-N {
  grid-row: 5/5;
  grid-column: 2/2;
}
.dds-south-S {
  grid-row: 5/5;
  grid-column: 3/3;
}
.dds-south-H {
  grid-row-start: 5;
  grid-column-start: 4;
}
.dds-south-D {
  grid-row: 5/5;
  grid-column: 5/5;
}
.dds-south-C {
  grid-row: 5/5;
  grid-column: 6/6;
}

.par {
  grid-column: 2/2;

  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: row;
  font-size: 14px;
  gap: 5px;
  text-align: center;
  height: 60px;
  margin-left: 5px;
}

.par-header {
  grid-row: 1/1;
  font-size: 12px;
  font-weight: bold;
}

.par-row {
  grid-column: 1/1;
  margin-top: 0;
  margin-bottom: auto;
  height: 15px;
}

.or-players {
  grid-row: 1/1;
  grid-column: 1/1;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  font-size: 12px;
  background-color:#B0E0E6;
  width: 180px;
}
.or-w-player {
  grid-row: 2/2;
  grid-row: 2/2;
  grid-column: 1/1;
}
.or-n-player {
  grid-row: 1/1;
  grid-column-start: 1;
  grid-column-end: span 3;
  text-align: center;
}
.or-core {
  grid-row: 2/2;
  grid-column: 2/2;
  text-align: center;
  font-weight: bold;
}
.or-e-player {
  grid-row: 2/2;
  grid-column: 3/3;
  text-align: right;
}
.or-s-player {
  grid-row: 3/3;
  grid-column-start: 1;
  grid-column-end: span 3;
  text-align: center;
}
.or-result {
  grid-row: 2/2; 
  grid-column: 1/1;
  display: grid;
  grid-template-columns: auto auto auto; 
  background-color:#B0E0E6; 
  margin-top: auto;
  margin-bottom: auto;

}
.or-contract { font-size: 14px}
.or-lead { font-size: 14px}
.or-leaddds { font-size: 14px}

.or-auction-envelope {
  grid-row:3/3; 
  grid-column: 1/1; 
  background-color:#B0E0E6;
}

.or-auction {  
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-flow: row;
  gap: 5px; 
  font-size: 16px; 
  width: 150px;
  margin-left: auto;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: auto;
  text-align: center;
}

.cr-auction-envelope {
  grid-row: 3/3; 
  grid-column: 3/3; 
  background-color:#B0E0E6;
}
.cr-auction {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-flow: row;
  gap: 5px; 
  font-size: 16px; 
  width: 150px;
  margin-left: auto;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: auto;
  text-align: center;
}

.auction-west-header {
  grid-row: 1/1; 
  grid-column: 1/1; 

  font-weight: bold;
}

.auction-north-header {
  grid-row: 1/1; 
  grid-column: 2/2; 

  font-weight: bold;
}
  
.auction-east-header {
  grid-row: 1/1; 
  grid-column: 3/3; 

  font-weight: bold;
}

.auction-south-header {
  grid-row: 1/1; 
  grid-column: 4/4; 

  font-weight: bold;
}

.auction-west {
  grid-column: 1/1; 
}

.auction-north {
  grid-column: 2/2; 
}
  
.auction-east {
  grid-column: 3/3; 
}

.auction-south {
  grid-column: 4/4; 
}


.or-play {
  grid-row: 4/4; 
  grid-column: 1/1; 
  font-size: 16px; 
  background-color:#B0E0E6;

  display: grid;
  grid-template-rows: auto auto;
}


.or-playtable {
    grid-row: 1/1;

    width: 170px;
    height: 170px;
    background-color: #008000;
    margin-left: 5px;
  }

.or-play-navigation {
    grid-row-start: 2;
    
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin-left: 5px;
    margin-right: 5px;
}

.play-nav-button {
    width: 40px;
    height: 22px;
}

.cr-players {
  grid-row: 1/1;
  grid-column: 3/3;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  background-color:#B0E0E6;
  font-size: 12px;
  width: 180px;
}
.cr-w-player {
  grid-row: 2/2;
  grid-column: 1/1;
}

/*
.cr-n-player {
  grid-row: 1/1;
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: center;
}
*/
.cr-n-player {
  font-size: 12px;
  grid-row: 1/1;
  grid-column-start: 1;
  grid-column-end: span 3;
  text-align: center;
}
.cr-core {
  grid-row: 2/2;
  grid-column: 2/2;
  font-weight: bold;
}
.cr-e-player {
  grid-row: 2/2;
  grid-column: 3/3;
  text-align: right;
}
.cr-s-player {
  grid-row: 3/3;
  grid-column-start: 1;
  grid-column-end: span 3;
  text-align: center;
}

.cr-result {
  grid-row: 2/2; 
  grid-column: 3/3;
  display: grid;
  grid-template-columns: auto auto auto;
  background-color:#B0E0E6; 
  margin-top: auto;
  margin-bottom: auto;  
}
.cr-contract { font-size: 14px}
.cr-lead { font-size: 14px}
.cr-leaddds { font-size: 14px}

.cr-play {
  grid-row: 4/4; 
  grid-column: 3/3; 
  display: grid;
  grid-template-rows: auto auto;
  font-size: 16px; 
  background-color:#B0E0E6;
}

.cr-playtable {
    grid-row: 1/1;
}

.cr-play-navigation {
    grid-row: 2/2;
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin-left: 5px;
    margin-right: 5px;
}


.cr-playtable {
  grid-row: 1/1;
  width: 170px;
  height: 170px;
  background-color: #008000;
  margin-left: 5px;
}

.scoreboard {
  grid-row: 1/5;
  grid-column: 4/4;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
  background-color:#B0E0E6; 
  min-height: 200px; 

  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-auto-rows: 15px;
  font-size: 14px;
  gap: 5px;
  text-align: center;
  overflow-y: auto;
}

.scoreboard-boardno-header {
  grid-column: 1/1;
  font-weight: bold;
  background-color: #89c6c6;
} 
.scoreboard-or-header {
  grid-column: 2/4;
  font-weight: bold;
  background-color: #89c6c6;
} 

.scoreboard-cr-header {
  grid-column: 4/6;
  font-weight: bold;
  background-color: #89c6c6;

} 

.scoreboard-ht-ipms-header {
  grid-column: 6/6;

  font-weight: bold;
  background-color:#89c6c6;
} 

.scoreboard-vt-ipms-header {
  grid-column: 7/7;

  font-weight: bold;
  background-color: #89c6c6;
} 

.scoreboard-boardno {
  grid-column: 1/1;

}
.scoreboard-or-contract {
  grid-column: 2/2;

}
.scoreboard-or-score {
  grid-column: 3/3;
}
.scoreboard-cr-contract {
  grid-column: 4/4;
}
.scoreboard-cr-score {
  grid-column: 5/5;
}
.scoreboard-ht-imps {
  grid-column: 6/6;
}

.scoreboard-vt-imps {
  grid-column: 7/7;
  padding-right: 2px;
}

footer {
  margin-top: 10px;
  font-size: 14px;
}

a.tooltip {
  border-bottom: 2px dashed red;
  text-decoration: none;
}
a.tooltip:hover {
  color: #000000;
  cursor: help;
  position: relative;
}
a.tooltip span {
  display: none;
}
a.tooltip:hover span {
  border: #666 2px dotted;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 100;
  background: #e3e3e3;
  left: 0px;
  margin: 15px;
  width: 300px;
  position: absolute;
  top: 15px;
  text-decoration: none;
}