:root {
  --juhn-red: #B81818;
  --grey-light: #F3F3F3;
  --grey-regular: #E5E5E5;
}

@media screen and (min-width: 601px) {
  body.admin-bar .glossary__letters {
    top: 126px;
  }
}
@media screen and (min-width: 783px) {
  body.admin-bar .glossary__letters {
    top: 112px;
  }
}

.glossary__letters {
  display: flex;
  flex-wrap: nowrap;
  overflow-y: auto;
  align-items: stretch;
  position: sticky;
  top: 80px;
  background: white;
  scrollbar-width: none;
  background: linear-gradient(270deg, hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 100%, 0.9) 50%);
  backdrop-filter: blur(0.125rem);
}
@media screen and (max-width: 1200px) {
  .glossary__letters {
    background-color: #fff;
  }
}
.glossary__letters::-webkit-scrollbar {
  display: none;
}
.glossary__letter {
  position: relative;
  font-size: 20px;
  text-align: center;
  color: black;
  padding: 7px 5px 7px 5px;
  flex: 1;
}
.glossary__letter:before, .glossary__letter:after {
  content: "";
  position: absolute;
  inset: auto 2px 0 2px;
  height: 2px;
  background-color: var(--grey-light);
  transform: scaleX(1);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
.glossary__letter:after {
  transform: scaleX(0);
}
.glossary__letter--active, .glossary__letter:hover {
  color: var(--juhn-red);
}
.glossary__letter--active:after, .glossary__letter:hover:after {
  transform: scaleX(1);
  background-color: var(--juhn-red);
}
.glossary__letter--disabled {
  color: var(--grey-regular);
  pointer-events: none;
  cursor: default;
}
.glossary__items {
  flex: 1;
}
.glossary__item {
  display: block;
  background: var(--grey-light);
  color: var(--juhn-red);
  padding: 15px 20px;
}
.glossary__item-title--no-found {
  text-align: center;
}
.glossary__item-content p {
  color: var(--juhn-red);
}
.glossary__item:not(:last-child) {
  margin-bottom: 20px;
}
.glossary__item h3 {
  margin-bottom: 0;
}
.glossary__sections {
  margin: 30px 0;
}
.glossary__section {
  display: flex;
  gap: 20px;
}
.glossary__section:not(:last-child) {
  margin-bottom: 20px;
}
.glossary__section-title {
  width: 60px;
  padding-top: 15px;
  border-top: 2px solid var(--juhn-red);
}
.glossary__section-title h2 {
  font-size: 40px;
  font-weight: bold;
  color: var(--juhn-red);
}

/*# sourceMappingURL=app.css.map */