.sidebar-layout {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: var(--sidebar-width, 0) 1fr;
  grid-template-rows: auto 1fr;
  block-size: 100dvh;

  @media (width >= 48rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-2);
    --sidebar-width: 220px;
  }

  @media (width >= 64rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-4);
    --sidebar-width: 280px;
  }
}

.header-layout {
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-rows: auto 1fr;
  block-size: 100dvh;
}

.centered-layout {
  display: grid;
  place-items: center;
  block-size: 100dvh;
}

.container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-width, 64rem);
}

#header {
  align-items: center;
  /* background-color: rgb(from var(--color-border-light) r g b / .5); */
  /* border-block-end-width: var(--border); */
  block-size: var(--size-16);
  display: flex;
  gap: var(--size-4);
  grid-area: header;
  padding-inline: var(--size-4);

  @media (width >= 64rem) {
    padding-inline: var(--size-6);
  }
}

#sidebar {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-inline-end-width: var(--sidebar-border-width, 0);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  gap: var(--size-2);
  overflow-x: hidden;
  padding: var(--sidebar-padding, 0);
}

#main {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  grid-area: main;
  overflow: auto;
  padding: var(--size-4);

  @media (width >= 64rem) {
    gap: var(--size-6); padding: var(--size-6);
  }
}

body.app {
  background: #fff url("/assets/background_browse-bb186f18.svg") no-repeat top right fixed;
  background-size: 100% 100%;
}

body.sessions {
  background: #fff url("/assets/background_sessions-6adc809c.svg") no-repeat center center fixed;
  background-size: 100% 100%;
  display: grid;
  height: 100vh;
  margin: 0;
  padding: 0;
  place-items: center center;
  text-align: center;

  main {
    position: relative;
    top: -50px;
  }

  .card {
    margin-bottom: 1em;
    padding: 0.5em 1em !important;
    text-align: left;
    min-width: 300px;

    h1 {
      font-weight: 900;
      font-size: 1.5em;
      text-align: center;
    }

    input {
      margin-bottom: 0.5em;
      width: 100%;
    }

    .omniauth-signin,
    p.forgot {
      color: #444;
      text-align: center;
      font-size: 0.875em;
      font-weight: bold;
      width: 100%;

      a {
        color: #444;
      }
    }

    p.forgot {
      margin-bottom: 1em;
    }
  }

  p.signup {
    color: #fff;
    font-size: 0.875em;
    font-weight: 900;

    a {
      color: #fff;
    }
  }
}

h1 {
  font-size: 1.5625em !important;
  font-weight: 900 !important;
  font-style: italic !important;
}

h2 {
  font-size: 1.875em !important;
  font-weight: 900 !important;
}

/* SCHOOL RESULTS */

ol#school-results {
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
  position: relative;

  &.locked {
    &::before {
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 75%);
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: -20px;
      right: -20px;
      top: 0;
      z-index: 1000;
    }
  }
}

li.school {
  height: 105px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .checkbox {
    width: 60px;
  }

  .school-card {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: calc(100% - 60px);
    padding: 0 !important;
  }

  .school-name {
    padding: 1em 10px;

    h2 {
      line-height: 1.2;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .school-meta {
    dl {
      padding-top: 10px;
      dt {
        font-size: 0.625rem;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
      }

      dd {
        font-size: 1.125rem;
        font-weight: 400;
        text-align: center;
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .openings {
    padding: 0.5em 0;
    text-align: center;
    width: 150px;

    p {
      color: var(--gray-500);
      font-size: 0.625rem;
      font-weight: 400;
      margin-bottom: 0.5em;
      text-align: center;
      text-transform: uppercase;

      span.count {
        background-color: var(--color-primary);
        border-radius: var(--border-radius);
        color: white;
        display: block;
        font-size: 2.25rem;
        font-style: italic;
        font-weight: 900;
        height: 54px;
        width: 54px;
      }

      &.opnum {
        width: 40%;
        display: inline-block;
      }
    }
  }
}

ol#compare-grid {
  li.school {
    border: none;
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: 0 !important;

    div {
      border-bottom: 1px solid var(--gray-200);
      padding: 10px 20px;

      &.indecies,
      &.cost,
      &.size,
      &.team-stats {
        dl {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          margin: 0;
          padding: 0;
        }
        
        p.box-label,
        dt {
          font-size: 0.625rem;
          font-weight: 400;
          flex-basis: 70%;
          padding-top: 5px;
          text-transform: uppercase;
        }

        dd {
          font-size: 1.125rem;
          font-weight: 900;
          font-style: italic;
          flex-basis: 30%;
          margin: 0;
          max-width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: right;
          white-space: nowrap;
        }
      }

      &.size {
        text-align: center;

        p.box-label.inside {
          margin-top: 1em;
        }
      }
    }



    .school-match {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 0;

      p {
        box-sizing: border-box;
        flex-basis: 50%;
        padding: 1em;
        margin-top: 0;
      }
    }

    .school-meta {

      dd {
        margin-bottom: 0.5em;
      }

      dt, dd {
        max-width: 100%;
        width: 100%;
      }
    }

    .openings {
      width: 100%;

      p.opnum {
        text-align: center;

        span {
          margin: 0 auto;
        }
      }
    }
  }
}

p.small-label {
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
}


body.with-sidebar .two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--gap-size);
  block-size: 100dvh;
  width: 100%;
}

aside#your-settings {
  border-radius: var(--border-radius);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  padding: 2em;
  z-index: 1001;

  h3 {
    font-size: 1.125rem;
    margin: 0 0 1em;
    text-transform: uppercase;
  }

  dl {
    dt{
      font-size: 0.875rem;
      font-weight: 400;
      text-transform: uppercase;
    }
    dd {
      font-size: 1.125rem;
      font-weight: 800;
      margin-bottom: 0.5em;
    }
  }
}

body.compare {
  ol#compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 0px;

    li {}
  }
}