@font-face {
  font-family: monopoly;
  src: url(resources/fonts/Koch\ Regular.ttf);
}

* {
  box-sizing: border-box;
  font-family: monopoly;
  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;
}

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

.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%;
}

#header-player3, #header-player4 {
  display: none;
}

.right {
  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;
  min-height: calc(var(--vh, 1vh) * 37.5);
  position: relative;
  margin-bottom: calc(var(--vh, 1vh) * 1);
  width: 100%;
}

#tray-player0 {
  height: calc(var(--vh, 1vh) * 76);
  min-height: 0;
  position: relative;
  text-align: center;
}

#tray-player6 {
  display: inline-block;
  height: auto;
  min-height: 0;
  position: relative;
  text-align: center;
}

.tray-properties-half {
  background: white;
  float: left;
  height: auto;
  margin: calc(var(--vh, 1vh) * .2);
  min-height: calc(var(--vh, 1vh) * 37.5);
  position: relative;
  width: calc(50% - calc(var(--vh, 1vh) * .2)*2);
}

.tray-properties-half div:nth-child(1) {
  top: 0%;
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(2) {
  top: calc(var(--vh, 1vh) * 21.38 * .2);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(3) {
  top: calc(var(--vh, 1vh) * 21.38 * .4);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(4) {
  top: calc(var(--vh, 1vh) * 21.38 * .6);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(5) {
  top: calc(var(--vh, 1vh) * 21.38 * .8);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(6) {
  top: calc(var(--vh, 1vh) * 21.38 * 1);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(7) {
  top: calc(var(--vh, 1vh) * 21.38 * 1.2);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(8) {
  top: calc(var(--vh, 1vh) * 21.38 * 1.4);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(9) {
  top: calc(var(--vh, 1vh) * 21.38 * 1.6);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(10) {
  top: calc(var(--vh, 1vh) * 21.38 * 1.8);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(11) {
  top: calc(var(--vh, 1vh) * 21.38 * 2);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(12) {
  top: calc(var(--vh, 1vh) * 21.38 * 2.2);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(13) {
  top: calc(var(--vh, 1vh) * 21.38 * 2.4);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(14) {
  top: calc(var(--vh, 1vh) * 21.38 * 2.6);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(15) {
  top: calc(var(--vh, 1vh) * 21.38 * 2.8);
  position: absolute;
  z-index: 1;
}

.tray-properties-half div:nth-child(16) {
  top: calc(var(--vh, 1vh) * 21.38 * 3);
  position: absolute;
  z-index: 1;
}

#container-game {
  background: #cde6d0;
  border: lightblue calc(var(--vh, 1vh) * 1) solid;
  float: left;
  height: calc(var(--vh, 1vh) * 98);
  position: relative;
  width: calc(var(--vh, 1vh) * 98);
}

.square-center {
  border: transparent calc(var(--vh, 1vh) * .1) solid;
  height: 73.7704918%;
  left: 13.1147541%;
  position: absolute;
  text-align: center;
  top: 13.1147541%;
  width: 73.7704918%;
}

.cost {
  bottom: 2%;
  font-size: calc(var(--vh, 1vh) * .85); 
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto
}

.tray-buildings-half {
  float: left;
  height: auto;
  margin: calc(var(--vh, 1vh) * .2);
  position: relative;
  text-align: center;
  width: calc(50% - calc(var(--vh, 1vh) * .2)*2);
}

.tray-buildings-half img {
  height: calc(var(--vh, 1vh) * 4);
  margin: 0 auto;
  width: auto;
  position: relative;
}

.burgundy {background:#d93a96;}
.green {background: #1fb25a;}
.blue {background: #0072bb;}
.lightblue {background:	#aae0fa;}
.purple {background:#0c145b;}
.orange {background: orange;}
.red {background: red;}
.yellow {background: yellow;}


#box-instructions {
  background: white;
  border: black calc(var(--vh, 1vh) * .15) solid;
  float: left;
  height: calc(var(--vh, 1vh) * 8);
  padding-top: calc(var(--vh, 1vh) * 1);
  position: relative;
  text-align: center;
  width: 100%;
}

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


/* New board */

.grid-container {
  display: grid;
  grid-template-columns: 
  3.627485176%
  6.69689571%
  2.790373212%
  8.196721311% 
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  2.790373212% 
  10.32438089%;
  grid-template-rows: 
  10.32438089%
  2.790373212%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  8.196721311%
  2.790373212%
  6.69689571%
  3.627485176%;
  height: 100%;
}

.corner-tl {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-left: black calc(var(--vh, 1vh) * .24) solid;
  border-top: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 1 / 1 / 3 / 4;
  position: relative;
  display: flex;
  flex-wrap: wrap-reverse;
}

.pr-t {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-top: black calc(var(--vh, 1vh) * .24) solid;
  position: relative;

  display: flex;
  flex-wrap: wrap-reverse;
}

.tray-tb {
  border: black calc(var(--vh, 1vh) * .12) solid;
  position: relative;
  text-align: center;
}

.corner-tr {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-right: black calc(var(--vh, 1vh) * .24) solid;
  border-top: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 1 / 13 / 3 / 15;
  position: relative;

  display: flex;
  flex-wrap: wrap-reverse;
}

.pr-l {
  border: black calc(var(--vh, 1vh) * .1) solid;
  border-left: black calc(var(--vh, 1vh) * .2) solid;
  grid-column: 1 / 3;  
  align-items: center;
  justify-items: center;
}

.tray-lr-w {
  border: black calc(var(--vh, 1vh) * .12) solid; 
  display: grid;
  align-items: center;
  justify-items: center;
}

.board-center {
  border: black calc(var(--vh, 1vh) * .12) solid;  
  grid-area: 3 / 4 / 12 / 13;
  position: relative;
  line-height: 700%;
  font-size: calc(var(--vh, 1vh) * 10); 
  text-align: center;
}

.pr-r {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-right: black calc(var(--vh, 1vh) * .2) solid;
  grid-column: 14 / 15;  
  position: relative;
}

.jv-l {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  border-left: black calc(var(--vh, 1vh) * .24) solid;
  border-right: none;
  grid-area: 12 / 1 / 15 / 1;
  position: relative;
}

.jv-l-text {
  font-size: calc(var(--vh, 1vh) * 1.2); 
  transform: rotate(90deg);
  left: 25%;
  position: absolute;
  top: 30%;
}

.jail {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  border-left: black calc(var(--vh, 1vh) * .24) solid;
  background:	#dd443e;
  grid-area: 12 / 2 / 14 / 4;
  position: relative;
}

.jail p {
  font-size: calc(var(--vh, 1vh) * 1.5); 
  line-height: calc(var(--vh, 1vh) * 7.5);
  text-align: center;
  transform: rotate(45deg) translate(-25%, -16%);
}

.jail-img {
  height: 85%;
  width: 85%;
  position: absolute;
  transform: rotate(45deg) translate(12.5%, -5%);
}

.jv-b {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  border-left: none;
  grid-column: 2 / 4;
  position: relative;
}

.jv-b-text {
  font-size: calc(var(--vh, 1vh) * 1.2); 
  left: 25%;
  position: absolute;
  top: 15%;
}

.pr-b {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  grid-row: 13 / 15;  
  position: relative;
  text-align: center;
}

.corner-br {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  border-right: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 12 / 13 / 15 / 15; 
  position: relative;
  text-align: center;
}

.ch-t {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-top: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 1 / 5 / 3 / 5;
  position: relative;
  text-align: center;
  display: flex;
  flex-wrap: wrap-reverse;
}

.rr-t {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-top: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 1 / 8 / 3 / 8;
  position: relative;
  text-align: center;
  display: flex;
  flex-wrap: wrap-reverse;
}

.ww-t {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-top: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 1 / 11 / 3 / 11;
  position: relative;
  text-align: center;
  display: flex;
  flex-wrap: wrap-reverse;
}

.full-l {
  border: black calc(var(--vh, 1vh) * .1) solid;
  border-left: black calc(var(--vh, 1vh) * .2) solid;
  grid-column: 1 / 4;  
  position: relative;
  text-align: center;
}

.full-r {
  border: black calc(var(--vh, 1vh) * .1) solid;
  border-right: black calc(var(--vh, 1vh) * .2) solid;
  grid-column: 13 / 15;  
  position: relative;
  text-align: center;
}

.ch-b {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 12 / 5 / 15 / 5; 
  position: relative;
  text-align: center;
}

.rr-b {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 12 / 8 / 15 / 8; 
  position: relative;
  text-align: center;
}

.it-b {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 12 / 9 / 15 / 9; 
  position: relative;
  text-align: center;
}

.cc-b {
  border: black calc(var(--vh, 1vh) * .12) solid;
  border-bottom: black calc(var(--vh, 1vh) * .24) solid;
  grid-area: 12 / 11 / 15 / 11; 
  position: relative;
  text-align: center;
}


.pr-name {
  font-size: calc(var(--vh, 1vh) * .95); 
  margin-top: 6%;
  text-align: center;
}

.pr-cost {
  bottom: .5%;
  font-size: calc(var(--vh, 1vh) * .85); 
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto
}

.cc-name {
  font-size: calc(var(--vh, 1vh) * 1.1); 
  margin-top: 10%;
  text-align: center;
}

.cc-img {
  height: auto;
  right: 0;
  left: 0;
  margin: auto;
  top: 23%;
  width: 90%;
  position: absolute;
}

.cc-cost {
  bottom: 2%;
  font-size: calc(var(--vh, 1vh) * .9); 
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto
}

.ch-name {
  font-size: calc(var(--vh, 1vh) * 1.1); 
  margin-top: 10%;
  text-align: center;
}

.ch-img {
  height: 72%;
  right: 0;
  left: 0;
  margin: auto;
  top: 23%;
  position: absolute;
}

.rr-name {
  font-size: calc(var(--vh, 1vh) * .95); 
  margin-top: 18%;
  text-align: center;
}

.rr-img {
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
  top: 40%;
  width: 95%;
}

.it-name {
  font-size: calc(var(--vh, 1vh) * 1.3); 
  margin-top: 24%;
  text-align: center;
}

.it-cost {
  bottom: 20%;
  font-size: calc(var(--vh, 1vh) * .8); 
  left: 0;
  line-height: calc(var(--vh, 1vh) * 1.2);
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
}

.go-img {
  height: auto;
  position: absolute;
  left: 5%;
  top: 3.5%;
  width: 95%;
}

.corner-br p {
  font-size: calc(var(--vh, 1vh) * 1.05); 
  text-align: center;
  transform: rotate(-45deg) translate(-21%, 25%);
  top: 0;
  position: absolute;
}

.pr-h-t {
  border: transparent 1px solid;
  height: 100%;
  width: 100%;
  transform: rotate(180deg);
}

.ut-name {
  font-size: calc(var(--vh, 1vh) * 1); 
  margin-top: 10%;
  text-align: center;
}

.ww-img {
  height: auto;
  left: 0;
  top: 35%;
  position: absolute;
  width: 90%;
}

.corner-h-tr {
  border: transparent 1px solid;
  height: 100%;
  width: 100%;
  transform: rotate(225deg);
}

.gotojail {
  font-size: calc(var(--vh, 1vh) * 1.5); 
  line-height: calc(var(--vh, 1vh) * 9.75);
  text-align: center;
  transform: translate(75%, -17%);
  top: 0;
  position: absolute;
}

.gotojail-img {
  height: 85%;
  width: 85%;
  position: absolute;
  transform: translate(10%, 10%);
}

.pr-h-r {
  border: transparent 1px solid;
  height: 125.9574468%;
  width: 79.3918919%;
  transform: rotate(-90deg) translate(13.4%, 10%);
}

.pr-h-l {
  border: transparent 1px solid;
  height: 125.9574468%;
  width: 79.3918919%;
  transform: rotate(90deg) translate(-13.4%, -10%);
}

.pr-h-f-l {
  border: transparent 1px solid;
  height: 162%;
  width: 62.5%;
  transform: rotate(90deg) translate(-31.25%, -18.5%);
}

.ec-img {
  height: auto;
  top: 60%;
  height: 65%;
}

.pr-h-f-r {
  border: transparent 1px solid;
  height: 162%;
  width: 62.5%;
  transform: rotate(-90deg) translate(31.25%, 18.5%);
}

.lt-name {
  font-size: calc(var(--vh, 1vh) * 1.3); 
  margin-top: 10%;
  text-align: center;
}

.lt-img {
  height: auto;
  top: 57%;
  height: auto;
  width: 90%;
}

.lt-cost {
  bottom: 5%;
  font-size: calc(var(--vh, 1vh) * 1); 
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto
}

.corner-h-tl {
  border: transparent 1px solid;
  height: 100%;
  width: 100%;
  transform: rotate(135deg);
}

.fp-name {
  font-size: calc(var(--vh, 1vh) * 1.5); 
  line-height: calc(var(--vh, 1vh) * 9);
  text-align: center;
  transform: translate(55%, -20%);
  position: absolute;
  top: 0;
}

.fp-img {
  height: 100%;
  transform: rotate(45deg);
  width: 100%;
}

.tray-cc {
  border: 10px solid transparent;
  border-image: url(resources/objects/border.png) 36% round;
  height: calc(var(--vh, 1vh) * 14);
  left: calc(var(--vh, 1vh) * 20);
  position: absolute;
  text-align: center;
  transform: rotate(315deg);
  top: calc(var(--vh, 1vh) * 23);
  width: calc(var(--vh, 1vh) * 21);
  z-index: 1;
}

.text-cc {
  font-size: calc(var(--vh, 1vh) * 1.6); 
  left: calc(var(--vh, 1vh) * 24);
  position: absolute;
  transform: rotate(135deg);
  top: calc(var(--vh, 1vh) * 38);
  width: calc(var(--vh, 1vh) * 21);
  z-index: 1;
}

.tray-discard-cc {
  border: grey calc(var(--vh, 1vh) * .05) solid;
  color: gray;
  font-size: calc(var(--vh, 1vh) * 1.1);
  padding: calc(var(--vh, 1vh) * 2.25) 0;
  height: calc(var(--vh, 1vh) * 7);
  left: calc(var(--vh, 1vh) * 17);
  position: absolute;
  text-align: center;
  transform: rotate(315deg);
  top: calc(var(--vh, 1vh) * 19);
  width: calc(var(--vh, 1vh) * 10.5);
  z-index: 1;
}

.tray-ch {
  border: 10px solid transparent;
  border-image: url(resources/objects/border.png) 36% round;
  height: calc(var(--vh, 1vh) * 14);
  left: calc(var(--vh, 1vh) * 60);
  position: absolute;
  text-align: center;
  transform: rotate(315deg);
  top: calc(var(--vh, 1vh) * 63);
  width: calc(var(--vh, 1vh) * 21);
  z-index: 1;
}

.text-ch {
  font-size: calc(var(--vh, 1vh) * 1.6); 
  left: calc(var(--vh, 1vh) * 59);
  position: absolute;
  transform: rotate(315deg);
  top: calc(var(--vh, 1vh) * 57);
  width: calc(var(--vh, 1vh) * 21);
  z-index: 1;
}

.tray-discard-ch {
  border: gray calc(var(--vh, 1vh) * .05) solid;
  color: gray;
  font-size: calc(var(--vh, 1vh) * 1.1);
  padding: calc(var(--vh, 1vh) * 2.25) 0;
  height: calc(var(--vh, 1vh) * 7);
  left: calc(var(--vh, 1vh) * 73);
  position: absolute;
  text-align: center;
  transform: rotate(315deg);
  top: calc(var(--vh, 1vh) * 74.5);
  width: calc(var(--vh, 1vh) * 10.5);
  z-index: 1;
}

.tray-discard-ch .card-CH-CC {
  position: absolute;
}

#tray-tokens {
  background: white;
  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) * 134);
  z-index: 1;
}

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

#tray-tokens img {
  width: calc(var(--vh, 1vh) * 20);
  position: relative;
  vertical-align: middle;
}

.checkbox {
  margin-left: calc(var(--vh, 1vh) * 6);
  margin-right: calc(var(--vh, 1vh) * 1);
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
}

.token {
  opacity: 1;
}

.card-property {
  border: grey calc(var(--vh, 1vh) * .05) solid;
  height: calc(var(--vh, 1vh) * 21.38);
  width: calc(var(--vh, 1vh) * 18.9);
}

.card-CH-CC {
  height: 100%;
  left: 0;
  position: absolute;
  top:0;
  width: 100%;
}

.tray-dice {
  height: auto;
  left: calc(var(--vh, 1vh) * 25);
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 60);
  width:10.4vh;
}

button {
  height: 4vh;  
  margin: 1px;
  margin-bottom: 6%;
  position: relative;
  left: 0;
  bottom: 0;
  width: 10vh;
}

#button-stop {
  display: none;
}

[class^="die"] {
  background-size: contain;
  background-repeat: no-repeat;
  height: 8vh;
  left: 50%;
  position: relative;
  transform: translate(-50%, 0%);
  width: 8vh;
}

.die img {
  height: 8vh;
  width: 8vh;
  }

.die1 {
  background-image: url('resources/objects/dieRedRoll1.png');
}

.die2 {
  background-image: url('resources/objects/dieRedRoll2.png');
}

.die3 {
  background-image: url('resources/objects/dieRedRoll3.png');
}

.die4 {
  background-image: url('resources/objects/dieRedRoll4.png');
}

.die5 {
  background-image: url('resources/objects/dieRedRoll5.png');
}

.die6 {
  background-image: url('resources/objects/dieRedRoll6.png');  
}

#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 {
  font-size: calc(var(--vh, 1vh) * 2);
  height: calc(var(--vh, 1vh) * 4); 
  text-align: center;
  width: calc(var(--vh, 1vh) * 15); 
}

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


#senderPlayer3, #senderPlayer4, #labelSenderPlayer3, #labelSenderPlayer4, #receiverPlayer3, #receiverPlayer4, #labelReceiverPlayer3, #labelReceiverPlayer4 {
  visibility: hidden;
}

.tray-properties-half img {
  height: calc(var(--vh, 1vh) * 19);
  width: calc(var(--vh, 1vh) * 16.8);
  position: absolute;
  left: 0%;
  top: 0%;
  transition: 0.3s;
}

/* 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;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  height: 80%;
  width: auto;
  max-width: 700px;
}

/* Add Animation */
.modal-content {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.3s;
  animation-name: zoom;
  animation-duration: 0.3s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.corner-br .token, 
.pr-b .token, 
.cc-b .token, 
.rr-b .token,
.it-b .token, 
.ch-b .token,
.jv-b .token {
  height: auto;
  position: relative;
  text-align: center;
  width: 48%;
}

.jail .token {
  height: auto;
  left: calc(var(--vh, 1vh) * 2);
  position: relative;
  top: calc(var(--vh, 1vh) * -12.75);
  width: 60%;
}

.jv-l .token {
  left: calc(var(--vh, 1vh) * 0);
  position: relative;
  top: calc(var(--vh, 1vh) * 3);
  width: 95%;
}

.pr-r .token,
.pr-l .token,
.rr-r .token {
  height: 49%;
  position: relative;
  left: calc(var(--vh, 1vh) * 2);
  top: calc(var(--vh, 1vh) * -9.75);
  width: auto;
  z-index: 2;
}

.pr-l .token {
  height: 49%;
}

.full-l .token, .full-r .token {
  height: 50%;
  left: calc(var(--vh, 1vh) * 1);
  opacity: 1;
  margin-left: calc(var(--vh, 1vh) * 1);
  position: relative;
  top: calc(var(--vh, 1vh) * -12.5);
}

.full-l .token {   left: calc(var(--vh, 1vh) * -1.5);}

.corner-tl .token, 
.corner-tr .token, 
.pr-t .token, 
.rr-t .token,
.ww-t .token, 
.ch-t .token {
  display: flex;
  flex-wrap: wrap-reverse;
  height: auto;
  position: relative;
  margin: 0 auto;
  text-align: center;
  top: calc(var(--vh, 1vh) * 8.5);
  width: 48%;
}

.corner-tl .token, .corner-tr .token {top: calc(var(--vh, 1vh) * 11.5);}

.pr-t .token {top: calc(var(--vh, 1vh) * 7);}

.corner-br .token {
  display: none;
}

.tray-tb .house {
  height: auto;
  margin-top: 5%;
  width: 25%;
}

.tray-tb .hotel {
  height: auto;
  width: 40%;
}

.tray-lr-w .house {
  height: 19%;
  width: auto;
  align-content: center;
  justify-content: center;
}

.tray-lr-w .hotel {
  height: auto;
  width: 100%;
}

#button-start {
  position: relative;
  margin: 0 auto;
}

#reshuffleButton {
  height: calc(var(--vh, 1vh) * 6);;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--vh, 1vh) * 12);
}

.tray-properties-half .card-CH-CC {
  height: auto;
  width: 100%;
  z-index: 1;
}