#resultsContainer #mainContainer {
   width: 95vw;
   margin-top: 2rem;

   justify-content: space-between;
}

#resultsContainer #mainContainer aside {
   width: 15vw;
   max-height: 35vh;

   flex-direction: column;
   justify-content: space-between;
}

#resultsContainer #mainContainer aside .saveResults {
   width: 12rem;
   padding: 1rem;

   display: flex;
   justify-content: center;
   align-items: center;

   border-radius: 0.5rem;
   border: none;

   font: 400 1.6rem var(--font-family-title);
   color: var(--color-title-in-secondary);

   background: var(--color-secondary);

   transition: background 0.2s ease;
}

#resultsContainer #mainContainer aside .saveResults:hover {
   cursor: pointer;

   background: var(--color-secondary-dark);
}

#resultsContainer #mainContainer aside .saveResults .saveIcon {
   margin-right: 0.5rem;
}

#resultsContainer #mainContainer #tableContainer {
   width: 80vw;
   height: 85vh;

   overflow: auto;
}

#resultsContainer #mainContainer #tableContainer #firstTimeContainer,
#resultsContainer #mainContainer #tableContainer #loadingContainer,
#resultsContainer #mainContainer #tableContainer #errorContainer {
   flex: 1;
   flex-direction: column;
   align-items: center;

   font-size: 2.5rem;
}

#resultsContainer #mainContainer #tableContainer #firstTimeContainer p:first-of-type,
#resultsContainer #mainContainer #tableContainer #errorContainer p:first-of-type {
   font: 700 3rem var(--font-family-title);
}

#resultsContainer #mainContainer #tableContainer #loadingContainer {
   justify-content: center;
}

#resultsContainer #mainContainer #tableContainer table {
   flex: 1;

   border: 1px solid var(--color-secondary-dark);
   border-spacing: 0;
   border-radius: 1rem;
}

#resultsContainer #mainContainer #tableContainer table thead {
   font: 700 1.6rem var(--font-family-title);

   background: var(--color-primary-light);
}

#resultsContainer #mainContainer #tableContainer table thead th:hover {
   background: #7ccbda;

   cursor: pointer;

   transition: all 0.2s ease;
}

#resultsContainer #mainContainer #tableContainer table tbody {
   font-size: 1.5rem;

   background: var(--color-background);
}

#resultsContainer #mainContainer #tableContainer table tbody tr {
   border: 1px solid black;
}

#resultsContainer #mainContainer #tableContainer table tbody tr:hover {
   color: var(--color-text-in-secondary);

   background: var(--color-secondary-light) !important;

   transition: 0.1s;
}

#resultsContainer #mainContainer #tableContainer table tbody tr:nth-child(even) {
   background: var(--color-secondary-lighter);
}

#resultsContainer #mainContainer #tableContainer table td,
#resultsContainer #mainContainer #tableContainer table th {
   min-width: 10rem;
   height: 4rem;
   padding: 1rem;

   border-right: 1px solid var(--color-secondary-darker);

   text-align: center;
}

#resultsContainer #mainContainer #tableContainer table th:first-child {
   border-top-left-radius: 1rem;
}

#resultsContainer #mainContainer #tableContainer table th:last-child {
   border-top-right-radius: 1rem;
}

#resultsContainer #mainContainer #tableContainer table tr:last-child td:first-child {
   border-bottom-left-radius: 1rem;
}

#resultsContainer #mainContainer #tableContainer table tr:last-child td:last-child {
   border-bottom-right-radius: 1rem;
}

#resultsContainer #tableContainer::-webkit-scrollbar {
   width: 0.7rem;
   height: 0.7rem;
}

#resultsContainer #tableContainer::-webkit-scrollbar-thumb {
   border-radius: 5rem;

   background: var(--color-secondary);
}

#resultsContainer #tableContainer::-webkit-scrollbar-track {
   background: transparent;
}

#resultsContainer #tableContainer::-webkit-scrollbar-thumb:hover {
   background: var(--color-secondary-dark);
}

#resultsContainer #tableContainer::-webkit-scrollbar-corner {
   opacity: 0;
}
