/*
  Copyright 2023 Team 254. All Rights Reserved.
  Author: pat@patfairbank.com (Patrick Fairbank)
*/
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  overscroll-behavior: none;
}
body {
  background-color: #222;
  overscroll-behavior: none;
}
h3 {
  color: #ccc;
  font-size: 1.5vw;
}
.container {
  padding-top: 1vw;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
#matchName {
  font-size: 2vw;
}
#refereePanel {
  width: 98%;
  display: flex;
  flex-direction: row;
}
#cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#cards[data-hr="false"] {
  display: none;
}
.alliance-cards {
  padding: 0.5vw 1vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #666;
  border-radius: 1vw;
}
#redCards {
  margin-bottom: 1vw;
  background-color: #322;
}
#blueCards {
  background-color: #223;
}
.team-card {
  margin: 0.5vw 0;
  width: 10vw;
  height: 3.5vw;
  font-size: 2.5vw;
  background-color: #444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2vw;
}
.team-card[data-card="yellow"] {
  background-color: #c90;
}
.team-card[data-card="red"] {
  background-color: #900;
}
.team-card[data-old-yellow-card="true"] {
  border: 0.3vw solid #ff0;
}
#scoringStatuses {
  margin-top: 0.5vw;
}
.scoring-status {
  margin-top: 0.5vw;
  width: 8vw;
  padding: 0.2vw 0.5vw;
  border-radius: 0.5vw;
  background-color: #e66;
  font-size: 0.8vw;
  color: #000;
}
.scoring-status[data-ready=true] {
  background-color: #0c6;
}
.scoring-status[data-present=false] {
  background-color: #666;
}
#fouls {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
#foulButtons {
  display: flex;
  flex-direction: row;
}
.foul-button {
  width: 16vw;
  height: 6vw;
  font-size: 3vw;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1vw;
  border-radius: 1vw;
}
.red-foul {
  background-color: #933;
}
.blue-foul {
  background-color: #26c;
}
#foulList {
  margin: 1vw 0;
}
.foul {
  margin-top: 1vw;
  height: 4vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 1.8vw;
  border-radius: 0.5vw;
}
.foul > * {
  margin: 0 1vw;
}
.type-button {
  width: 9vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.2vw;
}
.team-buttons {
  display: flex;
  flex-direction: row;
}
.team-button {
  width: 6vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2vw;
}
.team-button[data-selected="true"] {
  border: solid 0.2vw #fff;
}
.rule-select {
  width: 25vw;
  height: 3vw;
  background-color: rgba(0, 0, 0, 0.1);
  border: 0;
  border-radius: 0.2vw;
}
.rule-select option {
  background-color: #222;
  color: #fff;
}
.delete-button {
  width: 6vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #444;
  border-radius: 0.2vw;
}
#controlButtons {
  width: 100%;
  margin: 1vw 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#controlButtons[data-hr="false"] {
  display: none;
}
.control-button {
  width: 20vw;
  height: 4vw;
  font-size: 2.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1vw;
  border-radius: 0.2vw;
  opacity: 0.3;
}
.control-button[data-enabled=true] {
  opacity: 1;
}
#volunteerButton {
  background-color: #90c;
}
#resetButton {
  background-color: #093;
}
#commitButton {
  background-color: #26c;
}

#scoreSummary {
  width: 100%;
  display: flex;
  gap: 2vw;
  padding: 1vw 7vw;
  justify-content: space-evenly;
  text-align: center;
}
#scoreSummary[data-hr="false"] {
  display: none;
}

#scoreSummary > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#scoreSummary .placeholder {
  visibility: hidden;
}

#scoreSummary .wide-row {
  grid-column: span 3;
}

#scoreSummary .label {
  text-align: right;
  padding: 0 0.2vw;
}