* {
  box-sizing: border-box; /* Include borders in div size */
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin:0; padding:0; /* Default - No margins, no padding  */
  -webkit-user-select: none; /* Do not permit select text on page - Safari */
  -ms-user-select: none; /* Do not permit select text on page - IE 10+ and Edge */
  user-select: none; /* Do not permit select text on page - Standard */
  -webkit-user-drag: none; /* Do not permit dragging of any images */
}

input {
  -webkit-user-select: text; /* Chrome, Opera, Safari */
  -moz-user-select: text; /* Firefox 2+ */
  -ms-user-select: text; /* IE 10+ */
  user-select: text; /* Standard syntax */
}

/* Colors */
colors {
  background: #292c7b;
  background: #b1d134;
  background: #fdb913;
}

/* Set the size of page to one screen, add border */
#framePage {
  height: calc(var(--vh, 1vh) * 100);
  background: #b1d134;
  
  background-color: #e5e5f7;
  background-image:  radial-gradient(#444cf7 1px, transparent 1px), radial-gradient(#444cf7 1px, #b1d134 1px);
  background-size: 40px 40px;
  background-position: 0 0,20px 20px;

  padding: calc(var(--vh, 1vh) * 1);
  position: relative;
}

#boxHeader {
  background: #292c7b;
  box-shadow: black 5px 5px 8px;
  border: #fdb913 5px solid;
  color: #b1d134;
  height: calc(var(--vh, 1vh) * 32);
  left: calc(var(--vh, 1vh) * 0);
  position: relative;
  top: calc(var(--vh, 1vh) * 1);
  width: calc(100vw - calc(var(--vh, 1vh) * 2));
}

#logo {
  left: calc(var(--vh, 1vh) * 2);
  position: relative;
  top: calc(var(--vh, 1vh) * 2);
  width: 20%;
}

#boxScoreThisRoll p {
  margin: calc(var(--vh, 1vh) * 1);
  visibility: hidden;  
}

#rolledScore {
  color: #292c7b;
  font-size: calc(var(--vh, 1vh) * 4);
  padding: calc(var(--vh, 1vh) * 1);
}

#boxCenter {
  align-content: space-around;
  background: #292c7b;
  border: #fdb913 3px solid;
  box-shadow: black 5px 5px 8px;
  color: #292c7b;
  display: flex;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 40);
  justify-content: center;
  left: 50%;
  padding: 3px;
  position: absolute;
  top: calc(var(--vh, 1vh) * 37);
  transform: translate(-50%, 0%);
  width: calc(var(--vh, 1vh) * 65);
}

#lineThisRoll {
  align-self: flex-start;
  display: none;
  position: relative;
  width: 100%;
}

#buttonRoll, #buttonOpenRoll, #buttonKeepRoll, #buttonEndTurn, #buttonPassDice, #buttonStartGame {
  font-size: 1.75vw;
  height: 10vh;
  position: relative;
  width: 65%;
}

#buttonOpenRoll, #buttonKeepRoll, #buttonEndTurn {
  display: none;
}

#buttonOpenRoll {
  width: 50vh;
}

#boxScoring, #boxKeptDice {
  background: #292c7b;
  border: #fdb913 3px solid;
  top: calc(var(--vh, 1vh) * 37);
  color: #fdb913;
  height: auto;
  position: absolute;
  right: calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 30);
}

#boxKeptDice {
  left: calc(var(--vh, 1vh) * 1);
}

#boxKeptDice::-webkit-scrollbar {
  display: none;
}

#boxScoring h1, #boxKeptDice h1, #boxCenter h1 {
  font-size: 3.5vh;
  padding: calc(var(--vh, 1vh) * .5);
  text-align: center;
}


#boxCenter h1 {
  background: #b1d134;
}

#generateRollScores {
  display: none;
  max-height: calc(var(--vh, 1vh) * 49);
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#headerRollTotal {
  display: none;
}

.playerScore {
  background: white;
  border: #fdb913 1px solid;
  color: #292c7b;
  display: flex;
  flex-wrap: nowrap;
  font-size: 1.75vw;
  justify-content: space-between;
  padding: calc(var(--vh, 1vh) * .5) calc(var(--vh, 1vh) * 2);
  width: 100%;
}

[id^="scorePlayer"] {
  right: 0;
  margin-left: calc(var(--vh, 1vh) * 2);
  position: relative;
  text-align: right;

}

#boxButtons {
  align-content: space-around;
  bottom: calc(var(--vh, 1vh) * 1);
  display: flex;
  font-size: .9vh;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 8);
  justify-content: space-between;
  left: 50%;
  padding: 3px;
  position: absolute;
  transform: translate(-50%, 0%);
  width: calc(var(--vh, 1vh) * 80);
}

#boxButtons button {
  font-size: 1.2vw;
  height: 100%;
  top: calc(var(--vh, 1vh) * 1);
  width: 24%;
}
/* End of button box */

/* Dice tray */
#trayDice {
  color: #292c7b;
  display: flex;
  flex-wrap: wrap;
  font-size: 3vh;
  height: calc(var(--vh, 1vh) * 35);
  justify-content: center;
  left: calc(22vw + calc(var(--vh, 1vh) * 2));
  position: absolute;
  top: calc(var(--vh, 1vh) * 3);
  width: 75vw;
}

[id^="trayDie"] {
  float: left;
  height: auto;
  padding: calc(var(--vh, 1vh) * 1);
  position: relative;
  text-align: center;
  width: 16.66%;
}

[id^="keep"] {
  display: none;
}

[id^="numberCover"] {
  background: #a2cad4;
  height: 81%;
  opacity: 5%;
  position: absolute;
  width: 100%;
  z-index: 2;
}

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

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

.die img {
  height: 10vw;
  width: 10vw;
  }

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

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

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

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

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

.die6 {
  background-image: url('resources/objects/dieOrangeRoll6.png');  
}
/* End of dice tray */


/* The Modal (background) */
.modal {
  background-color: rgb(0,0,0); /* Fallback color */
  display: block;
  display: none; /* Hidden by default */
  font-size: 3.5vh;
  height: calc(var(--vh, 1vh) * 100); /* Full height */
  left: 0;  
  padding-top: calc(var(--vh, 1vh) * .5);
  position: fixed; /* Stay in place */
  text-align: center;
  top: 0;
  width: 100%; /* Full width */
  z-index: 6; /* Sit on top */
}

#modalWinnerInner, #modalFarkleInner, #modalStartInner {
  align-content: center;
  background: white;
  border: #292c7b 10px ridge;
  display: flex;
  flex-wrap: wrap;
  height: 50%;
  justify-content: center;
  left: 50%;
  padding: 1vh;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
}

#modalStart {
  display: flex;
}

#modalClose {
  color: #e6b332;
  display: none;
  right: calc(var(--vh, 1vh) * 1);
  top: calc(var(--vh, 1vh) * .5);
}

#modalStartInner {
  display: flex;
  height: 95%;
  width: 98%;
}

#modalStartLeft, #modalStartRight {
  border: #fdb913 3px solid;
  height: 100%;
  position: relative;
  text-align: center;
  width: 20%;
}

#logoStart {
  width: 100%;
}

#modalStartRight {
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-left: none;
  width: 80%;
}

#numberPlayersLabel {
  display: block;
  font-size: 3.5vh;
  font-weight: bold;
}

#numberPlayers, #openScore {
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 6);
  margin-bottom: calc(var(--vh, 1vh) * 2);
  margin-top: calc(var(--vh, 1vh) * 2);
  text-align: center;
  width: calc(var(--vh, 1vh) * 8);
}

#openScore {
  width: calc(var(--vh, 1vh) * 16);
}

#buttonStartGame {
  bottom: calc(var(--vh, 1vh) * 1);
  font-size: 2.5vh; 
  height: calc(var(--vh, 1vh) * 8);
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
  width: 60%;
}

table {
  border-collapse: collapse;
  color: #292c7b;
  font-size: .85vw;
}

caption {
  color: #fdb913;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
}

th, tr, td {
  border: #fdb913 2px solid;
  padding: 2px;
}

th {
  background: #b1d134;
}
td.left {
  text-align: left;
  padding-right: calc(var(--vh, 1vh) * 1);
}

td.center {
  text-align: center;
}

td.value {
  font-size: 1.3vw;
}

table td img {
  height: calc(var(--vh, 1vh) * 3.8);
  margin: 0 calc(var(--vh, 1vh) * .2);
  vertical-align: middle;
}

table [type="number"], table [type="select"] {
  font-size: calc(var(--vh, 1vh) * 2);
  text-align: center;
  width: 10vh;
}

#modalFarkleInner, #modalWinnerInner {
  align-content: space-around;
  background: #b1d134;
  color: #292c7b;
  display: flex;
  flex-wrap: wrap;
  font-size: 12vh;
  font-weight: bold;
}

#modalFarkleInner img {
  width: 80%;
}

#modalWinnerInner img {
  width: 12%;
}

#messageWinner {
  width: 100%;
}

#buttonShowScoringOptions, .optional {
  display: table-cell;
  display: none;
}


#warningLandscape {
  background: #b1d134;
  color: #292c7b;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }  
  #frame-page {
    display: none;
  }
}