.pitch-container{
  display: flex;
  justify-content: center;  /* Center horizontally */
  align-items: center;      /* Center vertically */
  position: relative;
  overflow: scroll;
  max-width: 100vw;
  max-height: 100vh;
  min-height: 75vh;
  z-index: 0;

}

.football-pitch > div {
  display: flex;
  gap: 15px;
  text-align: center;
  padding: 0px 10px;
  font-size: 18px;
}



@media only screen and (max-width: 1300px) {
  .pitch-container {
    /*min-height: 100vh;*/
    /*border-bottom: .75vh solid #a32620;*/
  }

  .team-positions >label> i {

    font-size: 1.5em;
  }

  .football-pitch > div {
    font-size: .8em;
  }
}

.football-pitch {
  /*position-anchor: relative;*/

  display: grid;
  grid-template-columns: 75% 25%;
  gap: 5px;
  background-color: transparent;
  padding: 0px;
  border: none;
}

.pitch-messages{
  text-align: center;
}

.football-pitch > p {
  justify-content: center;
  align-content: center;
  text-align: center;
}

.football-pitch > div > label > img {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  padding: 0px 0px;
  height: 5vh;
  margin:auto;
  text-align: center;
}

.subs {
  grid-column: 2 / 3; /* Start at column 2, end at column 3 */
  grid-row: 1 / 7; /* Span all five rows */
}

.subs{
  border-left: 1px solid #842121;
  flex-direction: column;
  margin:auto;
}

.team-positions img {
  object-fit: cover;
  border-radius: 5px;
}

.team-positions > label > input {
  display: none;
}

input + span {
  border: 2px dashed transparent;
}

.team-positions >label> i {
  color:#842121;
  font-size: 1.2em;
}

input:checked + span, input:hover + span,
input:checked + i, input:hover + i,
input:checked > .fa, input:hover > .fa {
  color:#FFD700;
  border-bottom:1px solid #FFD700;
}



/*input:checked + img, input:hover + img {
  border: 4px dashed red;
}*/


/* Horizontal alignment in the first column */
.goalkeeper, .defense, .defensive-midfield, .central-midfield, .central-midfield, .offensive-midfield, .attack {
  flex-direction: row;
  margin:auto;
}



.first-column-border {
  grid-column: 1 / 2;
  grid-row: 1 / 6;
  border: 3px solid #842121;
  position: absolute;
  width: calc(70% - 10px); /* Adjusting the width to match the column width */
  height: calc(75% - 10px); /* Adjusting the height to span all rows */
  pointer-events: none; /* Prevent the border from interfering with grid items */
  z-index: 1; /* Place the border above the grid items */
}