.loading {
  opacity: 0.5;
}

.gigog-row {
  height: fit-content;
  min-height: 1em;
  width: clamp(20em, 80%, 60em);
  margin-bottom: 0.15em;
  display: grid;
  grid-template-columns: 4em 9em 2fr 0.7fr 1fr;
  animation-duration: 0.5s;
}

.gigog-row:nth-child(odd) {
  animation-name: slideinRight;
}

.gigog-row:nth-child(even) {
  animation-name: slideinLeft;
}

.gigogCell {
  padding: 0.4em;
  height: 100%;
  margin: 0.2em;
  border-right: 2px solid black;
}

.gigog-row:nth-child(odd) {
  background-color: var(--card-bg-odd);
}

.gigog-row:nth-child(even) {
  background-color: var(--card-bg-even);
}

.filter:hover {
  cursor: pointer;
}

.removeFilter {
  font-size: 0.8em;
  display: inline-block;
  border: 1px solid #777;
  color: black;
  background-color: blanchedalmond;
  width: 10em;
  height: 1.3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.romverFilter:hover {
  cursor: auto;
}

.removeFilter::after {
  content: ' \22A0';
  text-align: right;
  float: right;
}

.removeFilter:hover::after {
  cursor: pointer;
}

popover {
  display: none;
}

.filters {
  background-color: #222;
  padding: 0.2em;
  width: clamp(60em, 70em, 80vw);
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr 0.7fr;
  column-gap: 0.2em;
  margin-bottom: 1em;
}

.showList {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen And (max-width: 800px) {
  .filters,
  .gigog-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .filters select option {
    max-width: 700px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

select {
  display: block;
}

.calendar {
  --day-width: 15px;
  --month-width: calc((var(--day-width) * 7) + 28px);
  --month-height: calc(var(--day-width) * 6 + 24px);
  --year-width: calc((var(--month-width) * 4) + 8px);
  --year-height: calc((var(--month-height) * 3) + 6px);
  --no-show: #222;
  --is-show: #8888cc;
  --is-multi-show: #ffaaaa;
  margin: 2em;
  padding: 2em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}

.year {
  position: relative;
  /* border: 1px solid white; */
  border-radius: 0.3em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: var(--year-width);
  height: var(--year-height);
  margin: 20px;
}

.month {
  /* border: 1px solid red; */
  position: relative;
  width: var(--month-width);
  height: var(--month-height);
}

.day {
  position: absolute;
  border: 2px solid black;
  width: var(--day-width);
  height: var(--day-width);
  z-index: 8;
}

.isShow {
  cursor: pointer;
  z-index: 15;
}

.yearTitle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  margin-block: auto;
  width: fit-content;
  font-size: 10em;
  opacity: 0.3;
  mix-blend-mode: color-dodge;
  z-index: 9;
}

.monthTitle {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1.5em;
  opacity: 0.2;
}

.displayShow {
  padding: 0.5em;
  position: fixed;
  top: 2em;
  margin-inline: auto;
  margin-block: auto;
  width: fit-content;
  height: fit-content;
  background-color: bisque;
  z-index: 16;
  transition: all 0.5s ease-in-out;
}

.displayShow.hidden,
.displayShow.htmx-added {
  right: -10em;
  opacity: 0;
}

.displayShow.visible {
  right: 2em;
  opacity: 1;
}

.displayShow .displayClose {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 1.5em;
  cursor: pointer;
  z-index: 15;
}

.displayShow .displayClose:hover {
  color: red;
}

a.button {
  padding: 0.5em;
  background-color: #333;
  color: white;
  text-decoration: none;
  border-radius: 0.3em;
}

a.button:hover {
  background-color: #777;
  cursor: pointer;
}