#queryContainer #schemaContainer {
   width: 95vw;
   height: 65vh;
   margin-top: 1rem;

   border: 0.2rem solid var(--color-secondary);
   border-radius: 2rem;

   overflow: auto;

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

#queryContainer #schemaContainer #firstTimeContainer {
   width: 100%;
   height: 100%;

   flex-direction: column;
   align-items: center;
   justify-content: center;

   color: var(--color-secondary-dark);
   font-size: 2.5rem;
}

#queryContainer #schemaContainer #firstTimeContainer p:first-of-type {
   font: 700 3rem var(--font-family-title);
}

#queryContainer #schemaContainer #loadingContainer {
   width: 100%;
   height: 100%;

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

   background: rgba(255, 255, 255, 0.5);
}

#queryContainer #schemaContainer table {
   margin: 1rem 2rem;

   border-radius: 2rem;
   border: 0.2rem solid var(--color-secondary);

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

#queryContainer #schemaContainer table caption {
   text-align: left;
   color: var(--color-title-in-primary);
   font: 700 1.6rem var(--font-family-title);
}

#queryContainer #schemaContainer table td {
   min-width: 10rem;
   height: 3rem;
   padding: 0.8rem;

   text-align: center;
}

#queryContainer #schemaContainer table td:not(:last-child) {
   border-right: 0.2rem solid var(--color-secondary);
}

#queryContainer #schemaContainer::-webkit-scrollbar {
   width: 0.7rem;
   height: 0.7rem;
}

#queryContainer #schemaContainer::-webkit-scrollbar-thumb {
   border-radius: 5rem;

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

#queryContainer #schemaContainer::-webkit-scrollbar-track {
   margin: 1.2rem;

   background: transparent;
}

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

#queryContainer #schemaContainer::-webkit-scrollbar-corner {
   opacity: 0;
}

#queryContainer #inputsContainer {
   margin-top: 2rem;
}

#queryContainer #inputsContainer #historyContainer {
   height: 20vh;
   width: 20rem;
   margin-right: 1.5rem;
   padding: 0.2rem;

   flex-direction: column;
}

#queryContainer #inputsContainer #historyContainer #history {
   height: 20vh;
   max-width: 20rem;

   margin-bottom: 0.4rem;

   flex: 1;

   border: 0.1rem solid var(--color-secondary);
   border-radius: 1rem;

   white-space: nowrap;
   overflow: hidden;
   overflow-y: scroll;

   background: white;
}

#queryContainer #inputsContainer #historyContainer #history ul {
   width: 100%;

   list-style: none;
}

#queryContainer #inputsContainer #historyContainer #history ul li {
   width: 100%;

   padding: 0 0.2rem;

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

   overflow: hidden;

   text-overflow: ellipsis;
}

#queryContainer #inputsContainer #historyContainer #history ul li span {
   width: 90%;

   overflow: hidden;
}

#queryContainer #inputsContainer #historyContainer #history ul li svg:hover {
   color: rgb(173, 32, 32);
}

#queryContainer #inputsContainer #historyContainer #history ul li:first-child {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
}

#queryContainer #inputsContainer #historyContainer #history ul li:last-child {
   border-bottom-left-radius: 1rem;
   border-bottom-right-radius: 1rem;
}

#queryContainer #inputsContainer #historyContainer #history ul li:hover {
   background: #ddd;

   cursor: pointer;
}

#queryContainer #inputsContainer #historyContainer #history ul li:not(:last-child) {
   border-bottom: 0.1rem solid var(--color-secondary-light);
}

#queryContainer #inputsContainer #historyContainer #history::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
}

#queryContainer #inputsContainer #historyContainer #history::-webkit-scrollbar-thumb {
   border-radius: 5rem;

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

#queryContainer #inputsContainer #historyContainer #history::-webkit-scrollbar-track {
   margin: 0.8rem;

   background: transparent;
}

#queryContainer #inputsContainer #historyContainer #history::-webkit-scrollbar-thumb:hover {
   background: var(--color-secondary-light);
}

#queryContainer #inputsContainer #historyContainer #history::-webkit-scrollbar-corner {
   opacity: 0;
}

#queryContainer #inputsContainer #historyContainer #confirmContainer {
   margin-bottom: 0.5rem;

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

   font-size: 1.2rem;
}

#queryContainer #inputsContainer #historyContainer #confirmContainer #confirmButtonsContainer {
   display: flex;
}

#queryContainer
   #inputsContainer
   #historyContainer
   #confirmContainer
   #confirmButtonsContainer
   button {
   width: 5rem;
   height: 2.5rem;

   margin: 0.2rem;
}

#queryContainer
   #inputsContainer
   #historyContainer
   #confirmContainer
   #confirmButtonsContainer
   button:first-child {
   background: var(--color-success-button);
}

#queryContainer
   #inputsContainer
   #historyContainer
   #confirmContainer
   #confirmButtonsContainer
   button:first-child:hover {
   background: var(--color-success-button-dark);
}

#queryContainer
   #inputsContainer
   #historyContainer
   #confirmContainer
   #confirmButtonsContainer
   button:last-child {
   background: rgb(173, 32, 32);
}

#queryContainer
   #inputsContainer
   #historyContainer
   #confirmContainer
   #confirmButtonsContainer
   button:last-child:hover {
   background: rgb(128, 25, 25);
}

#queryContainer #inputsContainer #historyContainer button {
   height: 3rem;
   padding: 0.5rem;

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

   border: none;
   border-radius: 0.5rem;

   font: 400 1.2rem var(--font-family-title);

   color: var(--color-text-in-success-button);
   background: var(--color-primary-dark);

   transition: all 0.2s ease;
}

#queryContainer #inputsContainer #historyContainer button:hover {
   background: var(--color-primary-darker);

   cursor: pointer;
}

#queryContainer #inputsContainer #historyContainer button svg {
   margin-right: 0.5rem;
}

#queryContainer #inputsContainer #textAreaContainer {
   flex: 2.5;
   flex-direction: column;
}

#queryContainer textarea {
   height: 20vh;

   margin-bottom: 0.5rem;
   padding: 1rem;

   border-radius: 1rem;

   font-size: 1.5rem;

   resize: none;
}

#queryContainer textarea:focus {
   outline: none;

   border: 0.1rem solid var(--color-primary-dark);
   box-shadow: 0 0 1rem var(--color-primary-dark);
}

#queryContainer #inputsContainer #buttonsContainer {
   height: 20vh;
   margin-left: 1.5rem;

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

#queryContainer #inputsContainer #buttonsContainer .queryButton {
   padding: 1.2rem;
   width: 12rem;

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

   border: none;
   border-radius: 0.5rem;

   font: 400 1.6rem var(--font-family-title);
   text-decoration: none;
   color: var(--color-text-in-success-button);

   transition: all 0.2s ease;

   cursor: pointer;
}

#queryContainer #inputsContainer #buttonsContainer .queryButton:hover {
   filter: brightness(85%);
}

#queryContainer #inputsContainer #buttonsContainer #submitQuery {
   background: var(--color-success-button);
}

#queryContainer #inputsContainer #buttonsContainer #saveQuery {
   background: var(--color-secondary);
}

#queryContainer #inputsContainer #buttonsContainer #helpPageButton {
   background: var(--color-primary-dark);
}

#queryContainer #inputsContainer #buttonsContainer .queryButton .queryIcon {
   margin-right: 0.2rem;
}

#queryContainer #inputsContainer #databaseSelectionContainer {
   max-width: 18rem;

   flex: 1;
   display: flex;
   flex-direction: column;
}

#queryContainer #inputsContainer #databaseSelectionContainer span {
   font-size: 1.5rem;
}

#queryContainer #inputsContainer #databaseSelectionContainer select {
   height: 2rem;
}

#queryContainer #inputsContainer #databaseSelectionContainer select option {
   height: 2rem;
}
