/* Some layout utility classes */

.button-bar {
   display: flex;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 1em;
   justify-content: space-around;
   grid-column: 1/-1;
}

.grid-1 {
   display: grid;
   grid-template-columns: auto;
   gap: 1em;
}

.grid-2 {
   display: grid;
   grid-template-columns: auto auto;
   gap: 1em;
}

.grid-3 {
   display: grid;
   grid-template-columns: auto auto auto;
   gap: 1em;
}

.hidden {
   display: none;
}

.fit-content-width {
   width: fit-content;
   overflow: scroll;
}

.loader {
   border: 16px solid #f3f3f3;
   /* Light grey */
   border-top: 16px solid #3498db;
   /* Blue */
   border-radius: 50%;
   width: 120px;
   height: 120px;
   animation: spin 2s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}