@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/Outfit-VariableFont_wght.ttf");
}

* {
  box-sizing: border-box;
}

body, html {
  font-family: 'Outfit', sans-serif;
  margin: 0;
  background-color: #F2F2F2;
}
button {
  font-family: 'Outfit', sans-serif;
}

.hidden {
  display: none !important;
}

nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  left: 0;
  top: 8px;
  height: calc(100% - 16px);
  width: 200px;
  padding: 2rem 0;
  background-color: #1D3865;
  color: white;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
nav a, nav button {
  display: block;
  color: white;
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: 1rem;
  background-color: #1D4172;
  border-radius: 1rem;
  margin: 0.5rem;
  text-decoration: none;
  border: none;
}

/*******************************************************************************

DASHBOARD

*******************************************************************************/

.dashboard nav + .container-fluid {
  margin-left: 216px;
}

.dashboard dialog {
  background-color: white;
  border: 2px solid #D3D3D3;
  border-radius: 2rem;
  padding: 2rem;
}
.dashboard dialog table {
  margin: 1rem;
  border-collapse: collapse;
  margin-bottom: 0;
}
.dashboard dialog th,
.dashboard dialog td {
  padding: 1rem;
  text-align: left;
  border: 1px solid #ECECEC;
}

.dashboard .class {
  background-color: white;
  border: 2px solid #D3D3D3;
  border-radius: 2rem;
  margin: 1rem;
  margin-left: 0;
  padding: 2rem;
}
.dashboard .class .info .title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.dashboard .class .info h2 {
  margin-top: 0;
}
.dashboard .class .info .lower {
  background-color: #FFF7E2;
  margin: 1rem -2rem;
  padding: 2rem;
}
.dashboard .class summary.heading {
  font-size: 2rem;
  font-weight: bold;
}
.dashboard .class .table,
.dashboard .class table {
  display: table;
  width: calc(100% + 4rem);
  margin: 1rem -2rem;
  border-collapse: collapse;
  margin-bottom: 0;
}
.table .row {
  display: table-row;
}
.dashboard .class form.edit {
  display: table-row;
}
.dashboard .class th {
  color: #159BD7;
}
.dashboard .class td,
.dashboard .class .cell,
.dashboard .class th {
  display: table-cell;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #ECECEC;
  border-right: 1px solid #ECECEC;
}
.dashboard .class .row:nth-child(2) .cell {
  /* less padding on the button */
  padding: 0.45rem;
  padding-left: 2rem;
}
.dashboard .class td:first-child,
.dashboard .class .cell:first-child,
.dashboard .class th:first-child {
  padding-left: 2rem;
}
.dashboard .class td:last-child,
.dashboard .class .cell:last-child,
.dashboard .class th:last-child {
  border-right: none;
}
.dashboard .class tr:last-child .cell {
  border-bottom: none;
}

.dashboard .class .row.view:not(.hidden) + .edit {
  display: none;
}
.dashboard .pill {
  padding: 0.25em 1em;
  background: whitesmoke;
  border-radius: 1em;
}
.dashboard .pill + .pill {
  margin-left: 0.25em;
}
.dashboard .add-student {
  border: 2px solid #1376BE;
  padding: 0.5rem 2rem;
  background-color: transparent;
  font-size: 1rem;
  border-radius: 1.25rem;
}
.dashboard .add-student:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.assessment {
  font-size: 1.2rem;
  background-color: #F2F2F2;
}

.assessment .progress-container {
  width: 35%;
  text-align: right;
}
.assessment .progress-bar {
  height: 1rem;
  width: 100%;
  background-color: white;
  border-radius: 0.5rem;
  border: .125rem solid #57C2F1;
  margin-bottom: 0.5rem;
}
.assessment .progress-bar .fill {
  background-color: #1277BC;
  height: 100%;
  border-radius: 0.5rem;
}


.assessment img {
  max-width: 100%;
}

button.audio {
  background-image: url('/static/images/audio/play_audio.png');
  border: none;
  color: transparent;
  background-color: transparent;
  height: 37px;
  width: 74px;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
p button.audio {
  margin-left: 0.5rem;
}
button.audio.playing {
  background-image: url('/static/images/audio/pause_audio.png');
}
button.autoplay {
  border: none;
  background-color: transparent;
  color: white;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  padding-right: 2.5rem;
  height: 28px;
  width: 124px;
  text-align: left;
  background-image: url('/static/images/audio/auto_audio_off.png');
}
button.autoplay.on {
  background-image: url('/static/images/audio/auto_audio_on.png');
}

.assessment .answers label {
  display: block;
  background-color: white;
  padding: 1.5em;
  margin: 1em 0;
  border-radius: 1.5em;
}
.assessment .answers.generic {
  position: relative;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  background-color: white;
  box-shadow: 0 4px 8px 0 lightgray;
  padding-bottom: 4rem;
}
.assessment .answers.generic::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 108px;
  background-color: #DEDEDE;
  width: 78%;
  height: 20px;
  z-index: 0;
}
.assessment .answers.generic label {
  position: relative;
  width: 25%;
  text-align: center;
  padding: 1.5em 0.5em 0;
  height: 12rem;
}
.assessment .answers.generic input {
  appearance: none;
  position: absolute;
  left: 48%;
  bottom: 0px;
  transform: translateX(-50%);
  background-color: #DEDEDE;
  height: 45px;
  width: 45px;
  border-radius: 45px;
  z-index: 1;
}
.assessment .answers.generic input:checked {
  background-color: #159DD8;
}


.assess-view {
  position: relative;
  width: 100%;
  height: 100vh;
  /*aspect-ratio: 1.77777778;*/
  overflow: hidden;
}
.assess-view .banner {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4rem;
  padding-right: 2rem;
  color: white;
  background-color: #159BD7;
  height: 80px;
  border-bottom-left-radius: 50px;
}
.assess-view .banner .chapter {
  font-size: 2rem;
  font-weight: bold;
}
.assess-view #story-image {
  position: absolute;
  width: auto;
  height: 100%;
  top: 0;
  left: 50%;
  max-width: 500%;
  transform: translateX(-50%);
}
.assess-view .story-text {
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 160px;
  margin: auto;
  font-size: 2rem;
  text-align: left;
}
.assess-view .story-text p {
  display: flex;
  align-content: center;
  align-items: center;
  background-color: white;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  width: 75%;
  height: 100%;
  margin: auto;
  line-height: 1.4;
  padding: 0 4rem;
  box-shadow: 0 0.25rem 0.5rem 0 gray;
}
.assess-view .question-text {
  margin-top: 200px;
  margin-left: 4rem;
  position: static;
  font-size: 2rem;
  text-align: left;
}
.assess-view .story-text p {
  display: flex;
  align-content: center;
  align-items: center;
  background-color: white;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  width: 75%;
  height: 100%;
  margin: auto;
  line-height: 1.4;
  padding: 0 4rem;
  box-shadow: 0 0.25rem 0.5rem 0 gray;
}

.assess-view input[type="submit"] {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background-color: #0076BD;
  border: none;
  font-size: 1.5rem;
  color: white;
  padding: 0.75rem 2.5rem;
  border-radius: 1.25rem;
  box-shadow: 0 0.1em 0.125em 0 gray;
}
.assess-view form {
  margin-left: 4rem;
  margin-right: 4rem;
}

.landing {
  height: 100%;
  min-height: 100vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.landing .container {
  width: 100%;
  max-width: 800px;
  min-height: 500px;
  padding-bottom: 1rem;
  background-color: white;
  border: 3px solid #d3d3d3;
  border-radius: 2rem;
}
.landing h1 {
  display: inline-block;
  color: #444;
  font-weight: normal;
  font-size: 1.75rem;
  padding: 0.25em 2em;
  border-bottom: 2px solid #d3d3d3;
}

.landing a {
  color: black;
}
.landing a.big {
  color: black;
  text-decoration: none;
  display: inline-block;
  margin: 1rem;
  padding: 4rem;
  background: white;
  border: 3px solid darkgrey;
  border-radius: 2rem;
  box-shadow: 0 0 4px 0 lightgrey;
}
.landing input[type="submit"] {
  display: block;
  font-size: 1.25rem;
  margin: 1rem auto;
  color: white;
  background-color: #0076BD;
  padding: 0.75em 4em;
  border-radius: 2rem;
  border: none;
}
.landing input[type="date"] {
  font-size: 1rem;
  border-radius: 1rem;
  padding: 1rem;
}
.landing ul {
  columns: 2;
  text-align: left;
  list-style: none;
  padding: 1rem;
}
.landing ul li {
  margin-bottom: 0.5rem;
}
.landing ul label {
  display: block;
  background-color: #F4F4F4;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.landing ul label:has(input:checked) {
  background-color: #FFD965;
}

.landing #code-input {
  margin-top: 1rem;
  font-size: 1.5rem;
  width: 10em;
  padding: 1em 2em;
  border-radius: 1em;
  text-transform: uppercase;
}
.signup form div {
  margin-bottom: 1rem;
}

@media (max-width: 500px) {
  .assess-view .story-text {
    font-size: 1.25rem;
  }
}