.nameInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border-style: solid;
  border-color: darkblue;
  border-radius: 10px;
  box-shadow: 5px 5px 10px lightblue;
}

.textInput {
  min-width: 160px;
}

.form div {
  margin: 10px;
}

.loginButton {
  border-radius: 8px;
  background-color: blue;
  color: white;
  border-width: 1px;
  padding: 5px;
}

.loginButton:active {
  background-color: lightblue;
}
.readyBadge.disabled {
  visibility: hidden;
}

.readyBadge {
  background-color: rgb(51, 108, 241);
  padding: 5px;
  margin: 5px;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  position: relative;
  color: white;
  overflow: hidden;
}

.shine:before{
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255,255,255, 0) 30%,
    rgba(255,255,255, .8),
    rgba(255,255,255, 0) 70%
  );
  top: 0;
  left: -100px;
  animation: shine 5s infinite linear
}

@keyframes shine {
  0% {left: -100px}
  30% {left: 100%}
  100% {left: 100%}
}.playerIconContainer {
  margin: 20px;
}

.playerIcon {
  width: 100px;
  height: 100px;
}

.centerContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.players {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
table.inGamePlayerList {
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-collapse: collapse;
}

tbody.inGamePlayerList {
  box-shadow: 5px 5px 10px lightblue;
}
tr.inGamePlayer{
  border-style: solid;
  border-width: 1px;
  border-color: black
}

img.disconnectIcon {
  width: 25px;
  height: 25px;
}
.gg-chevron-right {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px;
}
.gg-chevron-right::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  transform: rotate(-45deg);
  right: 6px;
  top: 4px;
}
.gamePageContainer {
  position: relative;
  height: 100%;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .gridContainer {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto auto repeat(5, 1fr);
    gap: 10px;
    margin-left: 10px;
  }

  #scoreDescription {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
  }

  .inGamePlayerList {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
  }

  .scoreCard {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .diceBox {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .gameLog {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 5;
  }

  .buttonBox {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .phaseBox {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .currentTurnBannerContainer {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .otherScoreCards {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 8;
  }
}

@media only screen and (max-width: 600px) {
  .gridContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    margin-left: 10px;
  }

  .inGamePlayerList {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .scoreCard {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .diceBox {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .gameLog {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 5;
  }

  .buttonBox {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .phaseBox {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .currentTurnBannerContainer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .otherScoreCards {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 7;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: spin 0.5s linear infinite;
}

@media only screen and (min-width: 600px) {
  .dieContainer {
    position: relative;
    height: 50px;
    width: 50px;
  }

  .dieBody {
    position: relative;
    height: 50px;
    width: 50px;
  }

  .dieNumber {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 50px;
  }
}

@media only screen and (max-width: 600px) {
  .dieContainer {
    position: relative;
    height: 30px;
    width: 30px;
  }

  .dieBody {
    position: relative;
    height: 30px;
    width: 30px;
  }

  .dieNumber {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 30px;
  }
}
.diceRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.scoreCardRow {
  display: flex;
  flex-direction: row;
  padding: 3px;
}

.scoreCardRow.red {
  background-color: red;
}
.scoreCardRow.yellow {
  background-color: yellow;
}
.scoreCardRow.blue {
  background-color: blue;
}
.scoreCardRow.green {
  background-color: green;
}
.scoreCardButton {
  position: relative;
  font-size: 18px;
  width: 30px;
  height: 30px;
}

.scoreCardButton.small {
  font-size:14px;
  width: 20px;
  height: 20px;
}

.scoreCardButton.locked {
  background-color: gray;
}

.scoreCardButton.red {
  background-color: pink;
  color: red;
}
.scoreCardButton.yellow {
  background-color: lightyellow;
  color: black;
}
.scoreCardButton.blue {
  background-color: lightblue;
  color: blue;
}
.scoreCardButton.green {
  background-color: lightgreen;
  color: green;
}

.marked {
  position: absolute;
  font-size: 30px;
  color: black;
}

.marked.small {
  position: absolute;
  font-size: 15px;
  color: black;
}
.iconHolder {
  background-color: white;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.iconHolder.small {
  height: 20px;
  width: 20px;
}

.lockIcon.small {
  height: 18px;
  width: 18px;
}

.marked {
  position: absolute;
  font-size: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.marked.red {
  color: red;
}
.marked.yellow {
  color: black;
}
.marked.blue {
  color: blue;
}
.marked.green {
  color: green;
}
.penaltyRow {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.penaltyButton {
  height: 30px;
  width: 30px;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.penaltyButton.small {
  height: 20px;
  width: 20px;
}
.phaseContainer {
  border-radius: 10px;
  padding: 4px;
  box-shadow: 5px 5px 5px lightblue;
  border: 1px solid darkblue;
}
.lockContainer{
  position: absolute;
  background-color: blue;
}

.lockModal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 30%;
  left: 40%;
  border-radius:10px;
  border-style: solid;
  border-color: black;
  padding: 5px;
  border-width: 1px;
  background-color: white;
  z-index: 2;
  min-height: 75px;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1;
}.otherScoreCards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.otherScoreCardContainer {
  margin: 8px;
}

.otherScoreCardHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.otherScoreCardHeader > h3{
  margin: 1px;
}.currentTurnBanner{
  border-radius: 10px;
  border-style: solid;
  border-color: black;
  /* background-color: #fcd703; */
  background-color: #00b831;
  color: white;
  box-shadow: 5px 5px 5px lightblue;
  padding: 5px;
}
.disconnectContainer{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.disconnectModal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius:10px;
  border-style: solid;
  border-color: black;
  padding: 5px;
  border-width: 1px;
  background-color: white;
  z-index: 2;
  min-height: 75px;
}

.leaderboardContainer {
  border-style: solid;
  border-color: darkblue;
  border-radius: 10px;
  box-shadow: 5px 5px 10px lightblue;
  padding: 10px;
}

.lobbyButton {
  border-radius: 10px;
  background-color: blue;
  color: white;
}

.endButtonBox{
  display: flex;
  flex-direction: column;
}td.end {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  padding: 5px;
}

tbody.end {
  border-collapse: collapse;
}

table.end {
  margin-bottom: 15px;
}

.onLeaderboardImg {
  width: 16px;
  height: 16px;
}.leaderboardOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1;
}

.historicalLeaderBoardModalContainer{
  position: absolute;
}

.historicalLeaderBoardModal{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  border-radius:10px;
  border-style: solid;
  border-color: darkblue;
  box-shadow: 5px 5px 10px lightblue;
  padding: 5px;
  border-width: 1px;
  background-color: white;
  z-index: 2;
  min-height: 75px;
}

.tableContainer {
  display: flex;
  flex-direction:row;
}

.scoreTable {
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-collapse: collapse;
}

th.historicLeaderboard {
  border-style: solid;
  border-color: black;
  border-width: 1px;
  padding: 5px;
}

td.historicLeaderboard {
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

.currentImg {
  width: 16px;
  height: 16px;
}.reasonItem {
  text-align: left;
}.app {
  height: 100%;
}
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  height: 100%;
  color: black;
  background-color: white;
}

#root {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

.centerContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.height100 {
  height: 100%;
}

.primaryButton {
  border-radius: 10px;
  font-size: 1.5em;
  background-color: blue;
  color: white;
  padding: 5px;
}

.primaryButton:hover {
  background-color: cornflowerblue;
}

.actionButton {
  border-radius: 10px;
  font-size: 1.5em;
  background-color: crimson;
  color: white;
  padding: 5px;
}

.actionButton:hover {
  background-color: indianred;
}

.hidden {
  visibility: hidden;
}