* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header-container,
.input {
  height: 8vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-container h1 {
  padding: 1rem;
  text-align: center;
}

.download-container {
  display: flex;
  align-items: center;
}
.download-container img {
  margin-left: 0.5rem;
  width: 22px;
  height: auto;
  cursor: pointer;
}

.table {
  display: grid;
  grid-template-columns: repeat(17, auto) 1fr;
  grid-template-areas:
    "box1    .      .     .     .     .     .     .     .     .     .     .     .     .     .     .     . box102"
    "box2 box8      .     .     .     .     .     .     .     .     .     . box72 box78 box84 box90 box96 box103"
    "box3 box9      .     .     .     .     .     .     .     .     .     . box73 box79 box85 box91 box97 box104"
    "box4 box10 box14 box18 box24 box30 box36 box42 box48 box54 box60 box66 box74 box80 box86 box92 box98 box105"
    "box5 box11 box15 box19 box25 box31 box37 box43 box49 box55 box61 box67 box75 box81 box87 box93 box99 box106"
    "box6 box12 box16 box20 box26 box32 box38 box44 box50 box56 box62 box68 box76 box82 box88 box94 box100 box107"
    "box7 box13 box17 box21 box27 box33 box39 box45 box51 box57 box63 box69 box77 box83 box89 box95 box101 box108"
    "   .     .     . box22 box28 box34 box40 box46 box52 box58 box64 box70     .     .     .     .     .     ."
    "   .     .     . box23 box29 box35 box41 box47 box53 box59 box65 box71     .     .     .     .     .     .";
  width: 90%;
  margin-left: 2rem;
  max-width: 100%;
  position: relative;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  /* border-radius: 5px; */
  margin: 0.1rem;
}
.box:focus {
  opacity: 0.8;
}
.box:hover {
  cursor: pointer;
  opacity: 0.8;
}
.box-id {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}

.legend {
  position: absolute;
  top: 0rem;
  left: 15%;
  min-width: 50%;
  height: 30%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.legend-child {
  display: flex;
  align-items: center;
  max-width: 200px;
}
.legend-child:hover {
  background: rgb(232, 232, 232);
  border-radius: 20px;
}
.legend-child,
.box {
  border-radius: 2px;
}
.legend-child div {
  min-width: 35px;
  min-height: 35px;
}
.legend-child span {
  margin-left: 0.5rem;
  font-weight: bold;
}
.legend-child span:hover {
  cursor: pointer;
  opacity: 0.6;
}

.newBox {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  min-width: 50%;
  min-height: 80%;
  /* background: rgb(174, 174, 174); */
  border-radius: 15px;
  border: 1px solid black;
}
.newBox p {
  font-size: 0.5rem;
  max-width: 30rem;
}
.delete-btn {
  height: 25px;
  width: 25px;
}
.delete-btn:hover {
  height: 28px;
  width: 28px;
}

@media screen and (max-width: 900px) {
  .legend {
    display: none;
  }
}