body {
  font-feature-settings: "liga" 1, "hlig" 1, "clig" 1, "calt" 1;
}

.ho-news {
  margin: var(--space-m) auto;
}

.subject-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  gap: var(--space-m);
  margin: var(--space-m) auto;

  ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);

    li {
      padding: var(--space-s) var(--space-m) 0 var(--space-m);
      display: flex;
      flex-direction: column;
      gap: var(--space-s);

      &.title {
        background: var(--color-neutral-9);
        padding: var(--space-s) var(--space-m);
      }
    }


  }
}

.items {
  width: 100%;

  ul {
    display: grid;
    grid-gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    list-style: none;

    li {
      display: flex;

      a {
        overflow: hidden;

        p {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        img {
          object-fit: cover;
        }
      }

      a:hover {
        text-decoration: none;

        p {
          text-decoration: underline;
        }
      }
    }
  }
}

.contain {
  object-fit: contain !important;
}

.list-header {
  padding: var(--space-s-m) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  h2 {
    color: var(--color-neutral-2)
  }
}

.ho-header {
  border-bottom: 1px solid var(--color-neutral-7);

  >div>div {
    width: 12rem;
    justify-content: end;

    >.profile {
      display: flex;
    }
  }
}

.ho-header>div>nav>a.active {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-color-7);
}

label.error {
  color: var(--color-color-7) !important;
  margin-top: 0.5rem;
}

.ho-login {
  label {
    color: var(--color-light-neutral-2);
  }
}

.ho-item-subjects>div>div>ul {
  >li a:hover {
    text-decoration: none;
  }
}

.ho-item-subjects>div>section {
  overflow: hidden;

  >ul {
    overflow-x: scroll;
  }
}

.ho-item-subjects>div>div>ul>li>a.active {
  background: var(--color-neutral-2);
  color: var(--color-neutral-9);
}

.ho-item-subjects>div>section>ul>li>a {
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-color-7);
}

.ho-lesson-plans>div>div>div>div.applications>ul>li {
  cursor: pointer;

  &.selected {
    background: var(--color-neutral-2);
    color: var(--color-neutral-9);
  }
}

.ho-lesson-plans>div>div>div>div.applications>ul>li * {
  pointer-events: none;
}

.ho-lesson-plans label span {
  cursor: pointer;
}

.ho-lesson-plans p.empty {
  color: var(--color-color-7);
  display: flex;
  justify-content: center;
  padding: 15rem 0 0 0;
}

.ho-lesson-plans>div>div>div {
  position: sticky;
  background: var(--color-neutral-9);
  top: 3rem;
  height: fit-content;
}

.ho-lesson-plans>div>div>div>div.applications>ul {
  overflow-y: scroll;
}

.ho-breadcrumb>div {
  min-height: 4.5rem;

  .ho-breadcrumb>div>div {
    justify-content: flex-end;
  }
}

.mock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27ch, 1fr));
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
  padding: var(--space-xs);
  width: 100%;

  /* img {
    display: flex;
    height: 73vh;
  } */
}

/* .two-pictures {
  gap: var(--space-m);
  margin: 0 auto;

  .mobile {
    width: 25%;
    height: auto;
    object-fit: contain;
  }

  .laptop {
    width: 70%;
    height: auto;
    object-fit: contain;
  }
} */

.ho-section-inventory>div>aside,
.ho-section-inventory>div>div {
  flex: 1 1 45% !important;
}

.ho-section-inventory>div>aside:last-child,
.ho-section-inventory>div>div:last-child {
  text-align: right;

  ul {
    justify-content: flex-end;
    align-items: flex-end;
  }
}

.ho-section-inventory.last {
  padding-bottom: var(--space-2xl);
}

.ho-alignment {
  div {
    gap: var(--space-m);

    h2 {
      max-width: 45rem;
      margin: 0 auto;
      text-align: center;
    }

    ul {
      margin: var(--space-m) 0;
    }
  }
}

input[type=checkbox] {
  height: 1.5rem;
  width: 1.5rem;
  accent-color: var(--color-color-9);
  border-radius: .3em;
}

input[type=checkbox]:hover {
  background: var(--color-neutral-2);
  cursor: pointer;
}

input[type=checkbox]:checked:hover {
  filter: brightness(1.1);
}

#item-name {
  font-size: var(--font-size-1-0);
  width: 100%;
}

#item-description {
  width: 100%;
  font-size: var(--font-size-1-0);
  min-height: 5em;
}

#item-count {
  font-size: var(--font-size-1--1);
  width: 5rem;
}

#item-location {
  font-size: var(--font-size-1--1);
  width: 15rem;
}

/* .ho-detail>div>div>footer>div>ul>li label {
  padding: var(--space-3xs) var``(--space-2xs);
  border-radius: .3em;
  font-size: var(--font-size-1--1);
  cursor: pointer;
}

.ho-detail>div>div>footer>div>ul>li label input[type="checkbox"] {
  display: none;
}

.ho-detail>div>div>footer>div>ul>li:has(input[type="checkbox"]) {
  background: transparent;
  padding: 0;

  label {
    background: var(--color-neutral-8);
    color: var(--color-neutral-2);
  }
}

.ho-detail>div>div>footer>div>ul>li:has(input[type="checkbox"]:checked) {
  padding: 0;

  label {
    background: var(--color-neutral-2);
    color: var(--color-neutral-9);
  }
} */

#pick-language {
  font-family: var(--font-family-1);
  appearance: none;
  border-color: transparent;
  background: transparent;
  cursor: pointer;
  padding: var(--space-3xs);
  line-height: 1.5;
}

.ho-detail>div>div {
  max-height: fit-content;
}

.ho-detail>div>div>div>ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);

  li {
    span {
      background: var(--color-neutral-2);
      padding: var(--space-3xs) var(--space-2xs);
      border-radius: .3em;
      width: fit-content;
      font-size: var(--font-size-2--3);
      color: var(--color-neutral-9);
    }

    label {
      border-radius: .3em;
      font-size: var(--font-size-1--1);
      cursor: pointer;
      color: var(--color-neutral-2);

      &:has(input[type="checkbox"]:checked) {
        color: var(--color-neutral-2);
      }
    }
  }
}

.ho-detail {
  display: flex;
  flex-direction: column;
  /* gap: var(--space-m); */
}

.ho-detail select {
  font-size: var(--font-size-1--1);
  cursor: pointer;
}

.additional {
  align-items: flex-start;
  padding: var(--space-s) 0;

  details {
    height: 1fr;

    summary {
      font-family: var(--font-family-1);
      font-size: var(--font-size-1-0);
      font-weight: bold;
      color: var(--color-neutral-4);
    }

    div {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }
  }
}

.ho-footer {
  /* margin-top: var(--space-s); */
}

.ho-footer section {
  flex-direction: column;
  align-items: center;
}

.ho-footer section nav a {
  color: var(--color-neutral-9);
}

.columns {
  padding: var(--space-s) 0 0 0;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  align-items: stretch;

  &>div {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .with-border {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    border: 1px solid var(--color-neutral-7);
    border-radius: 0.3em;
    padding: var(--space-s);

    ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);

      li {
        font-size: var(--font-size-2--2);
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);

        span {
          line-height: 1;
          background: var(--color-neutral-1);
          padding: var(--space-3xs) var(--space-2xs);
          border-radius: .3em;
          color: var(--color-neutral-9);
          font-size: var(--font-size-2--3);
        }

        label {
          /* line-height: 1; */
          /* background: var(--color-neutral-8); */
          /* padding: var(--space-2xs) var(--space-2xs); */
          /* border-radius: .3em; */
          cursor: pointer;
          /* color: var(--color-neutral-2); */
          /* font-size: var(--font-size-1--1); */

          /* input[type="checkbox"] {
            display: none;
          }

          &:has(input[type="checkbox"]:checked) {
            background: var(--color-neutral-2);
            color: var(--color-neutral-9);
          } */

          /* &:hover {
            background: var(--color-neutral-7);
          } */
        }

        select {
          width: 8rem;
        }
      }
    }
  }
}

.ho-profile {
  margin-top: var(--space-m);

  >div {
    .hol-wrapping-row {
      padding: 0;
      align-items: flex-start;

      .school,
      >form {
        padding: var(--space-m);
        border-radius: .3em;
        border: 1px solid var(--color-neutral-7);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        >h5 {
          margin: var(--space-s) 0 0
        }

        >div {
          display: flex;
          flex-wrap: wrap;
          gap: var(--space-xs);

          >label {
            cursor: pointer;

            &:has(input[type=radio]:checked)>span,
            &:has(input[type=checkbox]:checked)>span {
              background: var(--color-neutral-2);
              color: var(--color-neutral-9);
            }

            >span {
              background: var(--color-neutral-8);
              padding: var(--space-3xs) var(--space-2xs);
              border-radius: .3em
            }

            >input {
              display: none
            }
          }
        }

        .logout-row {
          padding: var(--space-m) 0 0 0;
        }

        .select-header {
          input[type="text"] {
            width: 15rem;
          }
        }
      }
    }
  }
}

input[type="text"]:disabled,
select:disabled {
  background: var(--color-neutral-8);
  color: var(--color-neutral-2);
}

.ho-detail > div > picture {
  max-width: 100%;
  max-height: unset;
}

.ho-detail > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  align-items: stretch;
  gap: var(--space-s);
  justify-content: center;
  width: 100%;

  &>*:nth-child(2) {
    grid-column: span 2;
  }
}

.my-school {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
  align-items: stretch;
  gap: var(--space-s);
  justify-content: center;
  width: 100%;
  position: relative;
  min-height: 100vh;

  &>*:nth-child(2) {
    grid-column: span 3;
  }
}

.filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  position: sticky;
  top: 2rem;
  align-self: start;
  height: calc(100vh - 13rem);
  overflow-y: scroll;

  input[type="search"] {
    width: 100%;
  }

  > label {
    margin-top: var(--space-2xs);
    font-family: var(--font-family-1);
    font-size: var(--font-size-1-0);
    font-weight: bold;
    color: var(--color-neutral-4);
  }

  ul {
    list-style: none;

    label {
      cursor: pointer;
    }
  }
}

.ho-list-item > a {
  width: 100%;
}

.ho-detail > div > div > section,
.ho-detail > div > div > header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.ho-detail > div > div > section > p,
.ho-detail > div > div > header > p {
  width: 100%;
  max-width: 100%;
  font-weight: normal;
}

.with-border > label,
.ho-detail > div > div > div > label,
.ho-detail > div > div > footer > section > label,
.ho-detail > div > div > section > label,
.ho-detail > div > div > header > label {
  font-family: var(--font-family-1);
  font-size: var(--font-size-1-0);
  font-weight: bold;
  color: var(--color-neutral-4);
}

.ho-detail > div > div > div {
  gap: var(--space-2xs);
}

.ho-detail > div > div > section > span {
  width: 100%;
  flex: unset;
}