.flex-grow {
  flex: 1 0 auto;
}

html, body{
  height: 100%;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }

  img.icon {
    width: 20px;
    height: 20px;
  }

  table {
    border-collapse: collapse;
  }



  tr {
    border: 0;
    border-bottom: 0;
    border-color: white;
  }

  td.playerposition {
    border: 1px solid;
    align-items: center;
    align-content: center;
  }

  #drop_zone {
    border: 2px dashed gray;
    border-radius: 10px;
    width: 500px;
    height: 250px;
  }

  #fileInput {
    display: none;
}

footer {
  margin-top: auto;
}

img.footer-img {
  width: 100%;
}

div.footer {
  width: 100%;
  background-color: #a58e71;
}