#match-scouting {
  background-color: var(--bg, #efefef);
}

#match-scouting .grid-container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#match-scouting .button-grid {
  margin-top: 5.5vh;
  width: 99%;
  height: 93.5%;
  display: grid;
  grid-gap: 3vw;
  border-radius: var(--border-radius, 16px);
  padding: 0.5vmin;
}

#match-scouting .grid-button {
  border-radius: var(--border-radius, 16px);
  color: var(--light-alt, #fefefe);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: max(3.2vw, 20px);
  line-height: 1em;
  text-align: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  padding: 5px;
  box-shadow: 0 0 8px 0px #838383;
  transition: 0.2s border, 0.2s box-shadow;
}
#match-scouting .grid-button:active {
  box-shadow: 0 0 12px 0px #222222;
  font-size: 3.3vw;
}

#match-scouting .grid-button.gray {
  background-color: #2d2d2d;
}

.button-padding {
  padding: 5vw;
}

.silver {
  border: 3px solid #2d2d2d;
  background-color: #919191;
}

.green {
  background-color: #4caf50;
}

.orange {
  background-color: #ef6c00;
}

.sherbert {
  background-color: #ffa347;
}

.red {
  background-color: #ff4436;
}

.navy {
  background-color: #3f51b5;
}

.pink {
  background-color: #f06292;
}

.yellow {
  background-color: #d8c24f;
}

.bluegreen {
  background-color: #0babab;
}

.lightbluegreen {
  background-color: #56b8b8;
}

.darkbluegreen {
  background-color: #077777;
}

.lightCoral {
  background-color: #ff69b4;
}
.coral {
  background-color: #ff1493;
}

.darkCoral {
  background-color: #c71585;
}

.deepBlue {
  background-color: #001f3f;
}

.shallowBlue {
  background-color: #73a9e5;
}

.border {
  border: 4px solid #37cde1;
}

.highlight {
  background-color: #72409c;
}

.disabled {
  opacity: 0.6;
  pointer-events: none;
}