.two-table {
  display: flex;
}
.purple-3 tbody tr :nth-child(3) {
  font-family: "CG";
  color: rgb(180, 128, 187);
  font-weight: bolder;
  white-space: nowrap;

}
.purple-4 tbody tr :nth-child(4) {
  font-family: "CG";
  color: rgb(180, 128, 187);
  font-weight: bolder;
  white-space: nowrap;

}
.purple-5 tbody tr :nth-child(5) {
  font-family: "CG";
  color: rgb(180, 128, 187);
  font-weight: bolder;
  white-space: nowrap;

}
.table-1 {
  min-width: 70%;
  max-width: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  border-collapse: collapse;
  border-top: 4px solid rgb(146, 97, 182);
  border-bottom: 4px solid rgb(146, 97, 182);

  margin: 0 auto;
  margin-bottom: 2vh;
}
.table-1 > thead {
  background-color: rgb(247, 228, 250);
  border-bottom: 2px solid rgb(146, 97, 182);
}
.table-1 > thead > tr > th {
  position: relative;
  font-family: "CG";
  font-size: 3vh;
  color: black;
  text-align: center;
  height: 5vh;
  line-height: 5vh;
  padding: 0 2vw;
}
.table-1 > thead > tr .first-col {
  font-family: "CG";
  color: rgb(142, 76, 158);
  color: black;
}
.table-1 > tbody > tr > td {
  position: relative;

  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 3vh;
  color: black;
  text-align: center;
  height: 5vh;
  line-height: 5vh;
  padding: 0 2vw;
}
.table-1 > tbody > tr > .first-col {
  font-family: "CG";
  color: rgb(180, 128, 187);
  font-weight: bolder;
  white-space: nowrap;
}
.table-1 > tbody > tr:nth-child(odd) {
  background-color: white;
}
.table-1 > tbody > tr:nth-child(even) {
  background-color: rgb(521, 241, 252);
}
.table-1 {
  position: relative;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.col-btn-container {
  width: 5vw;
  height: 10vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.col-btn-container > * {
  font-size: 3vw;
  width: 3vw;
  border: 4px solid black;
  text-align: center;
  line-height: 3vw;
}
.row-btn-container {
  width: 10vw;
  height: 5vw;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row-btn-container > * {
  font-size: 3vw;
  width: 3vw;
  border: 4px solid black;
  text-align: center;
  line-height: 3vw;
}
.layout-1 {
  position: relative;
  display: flex;
}
.layout-2 {
  position: relative;
  display: flex;
}
input {
  position: relative;
  width: 100%;
  height: 80%;
  top: -10%;
  border: 0;
  margin: 0;
  background-color: transparent;

  text-align: center;
  caret-color: rgb(18, 18, 18);
}

.print-btn {
  position: relative;
  top: 0.5vw;
  width: 5vw;
  height: 3vw;
  line-height: 3vw;
  text-align: center;
  border: 4px solid black;
  margin-left: 2vw;
}
.input {
  width: 50vw;
  height: 20vh;
}
.result {
  width: 50vw;
  height: 50vh;
}