/* main constant variables */
:root {
  --background: #212121; /* background color */
  --element: #323232; /* element color */
  --outline: #505050; /* outline color */
  --toggled: #767676; /* toggled color */
  --text-color: #DEDEDE; /* text color */
  /* text sizes */
  --text-large: 1.5rem;
  --text-medium: 1.25rem;
  --text-small: 1rem;
}
/* main constant variables */

/* background */
body {
  background-color: var(--background);
  margin: 0;
}
/* end background */

/* bottom spacing */
.bottom_spacer {
  height: 4.85rem;
}
/* bottom spacing */

/* generic containers */
.hbox {
  display: flex;
  flex-direction: row;
}
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fit_row_container {
  display: flex;
  flex-direction: row;
  width: fit-content;
}
/* generic containers */

/* loading styles */
.loading_svg {
  height: var(--text-medium);
  animation: loading_spin 0.6s steps(12, end) infinite;
}
@keyframes loading_spin {
  to {
    transform: rotate(360deg);
  }
}
/* loading styles */


/* universal styles */
.button {
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.space_evenly {
  display: flex;
  justify-content: space-evenly;
}

.hidden {
  display: none;
}
/* universal styles */