body {
      font-family: 'Montserrat', sans-serif;
      overflow: hidden;
      /* Prevents scrolling */
      overscroll-behavior-y: none;
      /* Prevents bounce effect on touch devices */
      background: #eee;
  }

  a {
      text-decoration: none;
  }

  .container {
      display: grid;
      height: 100%;
      width: 100vw;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content 20% 1fr;
      gap: 0px 0px;
      grid-template-areas:
          "options options"
          "teama teamb"
          "field field";
  }

  .field {
      grid-area: field;
  }

  .field img {
      margin: 0 auto;
      max-height: 65vh;
      pointer-events: none;
  }

  #soccerfield-wrap {
      margin: 0 auto;
      display: table;
  }

  .options {
      grid-area: options;
  }

  /* .options>div, .manage-options > div, .button {
            display: inline-block;
            background: grey;
            margin: 5px;
            padding: 5px;
            cursor: pointer;
        }

        .options>div:hover {
            background: darkgrey;
        } */
  .teams {
      overflow-y: auto;
  }

  #teama {
      grid-area: teama;
      background: repeating-linear-gradient(-55deg, #f00, #f00 10px, #ff4040 10px, #ff4040 20px);
  }

  #teamb {
      grid-area: teamb;
      background: repeating-linear-gradient(-55deg, #222, #222 10px, #333 10px, #333 20px);
  }

  .player {
      width: auto;
      display: inline-block;
      margin: 5px;
      cursor: pointer;
      height: auto !important;
  }

  .player.ui-sortable-placeholder {
      height: auto !important;
  }

  .jersey {
      font-size: 13px;
      border-radius: 10px;
      margin: 0 auto;
      height: 30px;
      text-align: center;
      color: white;
      pointer-events: none;
  }

  .jersey .fa-stack {
      line-height: 1.5em;
      width: auto;
  }

  /* .jersey .fa-shirt {
      color: red;
  } */

  .jersey .fa-shirt.red {
      color: red;
  }

  .jersey .fa-shirt.black {
      color: black;
  }

  .teams .jersey {
      display: none;
  }

  .name {
      font-size: 11px;
      background: white;
      display: inline-block;
      padding: 1px 5px;
      border-radius: 5px;
  }

  #playersettings {
      position: absolute;
      background: rgb(255 255 255 / 85%);
      color: black;
      /* margin: 0 auto; */
      width: 100%;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      padding: 20px;
  }


  #formationsload,
  #formationssave {
      display: none;
      position: absolute;
      background: rgb(255 255 255 / 85%);
      z-index: 9999;
      color: black;
      /* margin: 0 auto; */
      width: 420px;
      margin-left: auto;
      margin-right: auto;
      top: 0;
      left: 0;
      right: 0;
      padding: 20px;
  }

  #playersettings input,
  #formationsload input,
  #formationssave input {
      background: rgb(255 255 255 / 24%);
      font-size: 20px;
  }

  #playersettings table {
      text-align: center;

  }

  .manage-playername>input {
      width: 100px
  }

  .manage-jerseyno>input {
      width: 40px
  }

  .fa-circle-xmark {
      font-size: 25px;
      color: red;
      cursor: pointer;
  }

  table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
  }

  table td {
      border-top: 1px solid black
  }

  .btn {
      cursor: pointer;
      color: black;
      background: #fff;
      border: 2px solid black;
      font-size: 17px;
      padding: 7px 12px;
      font-weight: normal;
      margin: 3px;
      display: inline-block;
      text-decoration: none;
      font-family: 'Open Sans', sans-serif;
      min-width: 120px;
      text-align: center;
  }

  .btn-small {
      cursor: pointer;
      color: black;
      background: #fff;
      border: 2px solid black;
      font-size: 17px;
      padding: 3px 10px;
      font-weight: normal;
      margin: 3px;
      /* margin-right: 12px; */
      display: inline-block;
      text-decoration: none;
      font-family: 'Open Sans', sans-serif;
      min-width: 70px;
      text-align: center;
  }

  .btn-disabled {
      color: grey;
      border-color: grey;
  }

  .btn:hover,
  .btn:active,
  .btn-small:hover,
  .btn-small:active {
      color: #fff;
      background: black;
  }

  #notification {

      top: 0;
      display: none;
      background: rgb(3 185 3);
      width: 100%;
      height: 30px;
      position: fixed;
      line-height: 30px;
      text-align: center;
      z-index: 9999;
  }