.logo {
  width: 147px;
}

/* colors */

.transparent {
  background-color: transparent;
}

.even-color {
  background: var(--primary-color);
}

.odd-color {
  background: var(--font-color);
  color: var(--white-color);
}

/* buttons */

.second-button {
  background-color: var(--primary-color);
  color: var(--font-color);
}

.tiny-button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;

  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;

  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;

  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}

.small-button {
  width: 5vw;
  height: 3vh;
}

.tiny-button:hover::after,
.small-button:hover::after {
  content: "";
}

.header-buttons,
.footer-buttons {
  width: var(--max-width);
  display: flex;
}

.footer-buttons {
  justify-content: center;
}

/* comp */

.veil {
  background: var(--font-color);
  opacity: 0.5;
  transition: opacity .5s;
}

.thumb {
  height: 19vh;
}

/* menus */

.row-context-menu {
  display: none;
}

.show-row-context-menu {
  position: absolute;
  right: 7%;
  top: 47%;

  z-index: 4;

  display: flex;
  place-content: flex-end;
}

.row-context-menu-options {

  padding: var(--padding);

  display: grid;
  gap: var(--grid-gap);

  border: dotted 1px;
  background-color: var(--background-color);
}

.row-context-menu-options li {
  padding: var(--padding);

  display: flex;
  justify-content: space-between;
  gap: var(--grid-gap);
}

.row-context-menu-options li:before {
  content: "";
  border: 1px solid var(--header-color);
  align-self: stretch;
}

/* behavior */

.active {
  background-color: var(--header-color);
  color: var(--font-color);
}

.totalCurrency {
  font-weight: bold;
  text-align: right;
}

.totalCurrency::before {
  content: 'Total: ';
}

.highLighted-cell {
  background-color: var(--primary-color);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}

.notification-container {
  position: absolute;
  bottom: 2rem;
  left: 2rem;

  place-content: space-between;

  z-index: 4;
}

.notification {
  background-color: var(--cream-color);
  color: var(--text-color);

  border: solid 1px var(--text-color);
  border-radius: .5rem;

  place-content: space-between;

  padding: var(--padding);

  z-index: 6;
}

.force-form {
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 500px) {

  .logo {
    width: 30vw;
  }

  .small-button {
    width: 10vw;
  }

  .force-form {
    grid-template-columns: 1fr;
  }
}