:root {
  --wrapper-width: 1500px;
}

@media only screen and (width <= 1500px) {
  :root {
    --wrapper-width: 100vw;
  }
}

/* Cairo Play font arabic */
@font-face {
  font-family: "Cairo Play";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("foundation/cairo_play_arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF,
    U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32,
    U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B,
    U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D,
    U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77,
    U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3,
    U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Cairo Play font latin-ext */
@font-face {
  font-family: "Cairo Play";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("foundation/cairo_play_latin_ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cairo Play font latin */
@font-face {
  font-family: "Cairo Play";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("foundation/cairo_play_latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  --google-font-color-cairoplay: none;
}

h1,
h2,
h3 {
  font-family: "Cairo Play", sans-serif;
}

.wrapper {
  margin: 0 auto;
  max-width: var(--wrapper-width);
  padding: 0 10px;
}

.missing-book {
  text-align: center;
  object-fit: cover;
  height: 257px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
}

.missing-book:hover {
  color: white;
  text-decoration: none;
}

.errorlist > li {
  color: red;
}

.spinner {
  display: inline-block;
  background: url("foundation/bars-scale.svg") no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

#table-invitations > tbody > tr.htmx-added {
  opacity: 0;
}

#table-invitations > tbody > tr.htmx-swapping {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

#table-invitations > tbody > tr {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}