* {
  box-sizing: border-box;
  font-family: 'Nunito';
  margin:0;
  padding:0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
    
#frame-page {
  height: calc(var(--vh, 1vh) * 100);
  border: white calc(var(--vh, 1vh) * 1) solid;
  background: white;
}

#container-game {
  background: #cbc0a7;
  border: maroon calc(var(--vh, 1vh) * 1) ridge;
  float: left;
  height: calc(var(--vh, 1vh) * 98);
  margin: 0 auto;
  padding: calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 108.24);
}

.grid-container {
  display: grid;

  grid-template-columns: 
  8.57142857142857%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%
  5.71428571428571%;

  grid-template-rows: 
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%
  5.88235294117647%;
  height: 100%;
}

.row-t {
  font-size: calc(var(--vh, 1vh) * 5);
  text-align: center;
  transform: rotate(180deg);  
  grid-area: 1 / 1 / 1 / 18;
}

.column-r {
  font-size: calc(var(--vh, 1vh) * 5);
  text-align: center;
  grid-area: 2 / 17 / 17 / 18;
  justify-self: center;
  align-self: center;
}

.row-b {
  font-size: calc(var(--vh, 1vh) * 5);
  text-align: center;
  grid-area: 17 / 1 / 17 / 18;
  justify-self: stretch;
}

.column-l {
  grid-area: 2 / 1 / 17 / 1;
  display: grid;

}

.board {
  border: black 1px solid;
  outline: white 2px solid;
  grid-area: 2 / 2 / 17 / 17;
  
  display: grid;
  grid-template-columns: 
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%;

  grid-template-rows: 
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%
    6.66666666666667%;
  height: 100%;
}

.tile-board {
  border: white 1px solid;
  font-size: calc(var(--vh, 1vh) * 1.1);
  font-weight: bold;
  padding-top: calc(var(--vh, 1vh) * .4);
  text-align: center;
  position: relative;
}

.tile-row-t {border-top: white 2px solid;}
.tile-column-l {border-left: white 2px solid;}
.tile-column-r {border-right: white 2px solid;}
.tile-row-b {border-bottom: white 2px solid;}
.tws {
  background:	#e44235;
}

.tile-board .tiles {
  border: none;
  height: 100%;
  left: -2px;
  margin: none;
  position: absolute;
  top: -2px;
  width: 100%;
}

.dws {
  background:	#efa4a6;
}

.tls {
  background: #0a98d3;
}

.dls {
  background:#a0c3d2;
}

.center {
  font-size: calc(var(--vh, 1vh) * 6);
  font-weight: bold;
  line-height: calc(var(--vh, 1vh) * 5);
}

.tray-tiles {
  float: left;
  height: calc(var(--vh, 1vh) * 98);
  float: left;
  position: relative;
  width: calc(var(--vh, 1vh) * 43.5);
}

.tiles {
  background-image: url(resources/objects/backgroundWoodLight.jpg);
  color: transparent;
  border-bottom: brown 3px solid;
  border-right: brown 3px solid;
  float: left;
  font-size: calc(var(--vh, 1vh) * 4);
  line-height: calc(var(--vh, 1vh) * 5.564705882);
  height: calc(var(--vh, 1vh) * 5.764705882);
  margin: calc(var(--vh, 1vh) * .2);
  position: relative;
  text-align: center;
  width: calc(var(--vh, 1vh) * 5.764705882);
}

.tiles:after {
  bottom: calc(var(--vh, 1vh) * -2);
  font-size: calc(var(--vh, 1vh) * 1);
  position: absolute;
  text-align: center;
  left: calc(var(--vh, 1vh) * 4.1);
  right: calc(var(--vh, 1vh) * 0);
}

.S1:after {content: '1';}
.S2:after {content: '2';}
.S3:after {content: '3';}
.S4:after {content: '4';}
.S5:after {content: '5';}
.S8:after {content: '8';}
.S10:after {content: '10';}


.instructions {
  background-image: none;
  background: white;
  border: black 1px solid;  
  color: black;
  height: calc(var(--vh, 1vh) * 6.164705882);
  margin: 0px;
  margin-left: calc(var(--vh, 1vh) * 1);
  text-align: center;
}

.instructions:after {
  bottom: calc(var(--vh, 1vh) * -1.4);
}

.title {
  text-align: center;
  width: 100%;
}

.chart-letters {
  font-size: calc(var(--vh, 1vh) * 1);
  margin-right: calc(var(--vh, 1vh) * .3);
  text-align: center;
  width: 95%;
}

.chart-letters-lower {
  display: grid;

  grid-template-columns: 
    33.333%
    33.333%
    33.333%
}

.chart-line-last {
  grid-area: 10 / 1 / 11 / 4;
}


#box-instructions {
  bottom: calc(var(--vh, 1vh) * 0);
  height: calc(var(--vh, 1vh) * 10);
  position: absolute;
  right: calc(var(--vh, 1vh) * .5);
  width: auto;
}

#box-instructions button {
  background-color: #efefef;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  font-size: calc(var(--vh, 1vh) * 1.5);
  height: calc(var(--vh, 1vh) * 4);
  margin-top: 2%;
  position: relative;
  text-align: center;
  width: calc(var(--vh, 1vh) * 12);
}

.tray-bank-players {
  float: left;
  position: relative;
  margin: 0 calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 18);  
}

.header {
  border: black calc(var(--vh, 1vh) * .15) solid;
  float: left;
  height: calc(var(--vh, 1vh) * 3);
  line-height: calc(var(--vh, 1vh) * 3);
  padding-left: calc(var(--vh, 1vh) * 1);
  width: 100%;
}

.right {
  font-size: calc(var(--vh, 1vh) * 2);
  font-weight: bold;
  padding-right: calc(var(--vh, 1vh) * 1);
  position: absolute;
  right:0;
}

[id^="tray-player"] {
  background: white;
  border: black calc(var(--vh, 1vh) * .15) solid;
  display: none;
  float: left;
  height: auto;
  margin-bottom: calc(var(--vh, 1vh) * 1);
  min-height: calc(var(--vh, 1vh) * 25);
  position: relative;
  text-align: center;
  width: 100%;
}

#tray-player0 {
  display: inline-block;
  height: auto;
  min-height: 0;
  position: relative;
  text-align: center;
}
#tray-calculator {
  height: auto;
  height: 100%;
  padding: calc(var(--vh, 1vh) * .5); 
  position: relative;
  width: 100%;
  z-index: 1;
}

#label-tray-calulator {
  background: black;
  color: white;
  margin-bottom: calc(var(--vh, 1vh) * 1);
  width: 100%;
}

.tray-inner-calculator {
  float: left;
  height: auto;
  padding: calc(var(--vh, 1vh) * 1) calc(var(--vh, 1vh) * 2); 
  position: relative;
  text-align: left;
  width: 50%;
  z-index: 1;
}

.box-amount {
  margin-bottom: calc(var(--vh, 1vh) * 1);
  font-size: calc(var(--vh, 1vh) * 2);
  height: calc(var(--vh, 1vh) * 4); 
  text-align: center;
  width: calc(var(--vh, 1vh) * 12); 
}

#tray-calculator p, .tray-inner-calculator p {
  display: inline-block;
  font-weight: bold;
  text-align: center;
}

#tray-calculator button {
  margin-top: calc(var(--vh, 1vh) * 1); 
  width: calc(var(--vh, 1vh) * 7); 
}
#senderPlayer3, #senderPlayer4, #labelSenderPlayer3, #labelSenderPlayer4, #receiverPlayer3, #receiverPlayer4, #labelReceiverPlayer3, #labelReceiverPlayer4 {
  visibility: hidden;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: calc(var(--vh, 1vh) * 100); /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-start {
  display: block;
}

#tray-start {
  background: white;
  display:block;
  height: auto;
  left: 50%;
  padding: calc(var(--vh, 1vh) * 5); 
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--vh, 1vh) * 75);
  z-index: 1;
}

#title-tray-start {
  height: calc(var(--vh, 1vh) * 6);
  position: relative;
  width: calc(var(--vh, 1vh) * 50);
  left: 50%;
  transform: translate(-50%, 0);
}

#title-tray-start .tiles {
  color: black;
}

#title-tray-start .tiles:first-child {
  transform: rotate(-15deg);
}

#title-tray-start .tiles:nth-child(2) {
  transform: rotate(5deg);
}

#title-tray-start .tiles:nth-child(3) {
  transform: rotate(-10deg);
}

#title-tray-start .tiles:nth-child(4) {
  transform: rotate(2deg);
}

#title-tray-start .tiles:nth-child(5) {
  transform: rotate(8deg);
}

#title-tray-start .tiles:nth-child(6) {
  transform: rotate(-5deg);
}

#title-tray-start .tiles:nth-child(7) {
  transform: rotate(3deg);
}

#title-tray-start .tiles:nth-child(8) {
  transform: rotate(10deg);
}

#tray-start p {
  font-size: calc(var(--vh, 1vh) * 4); 
  margin-top: calc(var(--vh, 1vh) * 1.5); 
  margin-bottom: calc(var(--vh, 1vh) * 1.5); 
}

#tray-start input {
  background: maroon;
  border: black 1px solid;
  color: wheat;
  font-size: calc(var(--vh, 1vh) * 2); 
}

#tray-start label {
  font-size: calc(var(--vh, 1vh) * 2); 
}

#tray-start button {
  font-size: calc(var(--vh, 1vh) * 2); 
  width: calc(var(--vh, 1vh) * 8);
}

#box-playersScoring {
  height: auto;
  left: 50%;
  margin: 0 auto;
  padding-left: calc(var(--vh, 1vh) * 0); 
  position: relative;
  text-align: left;
  transform: translate(-50%, 0);
  width: 90%;
}