/* line 4, ../_compass/sass/style.scss */
.lesson_content_wrapper {
  background: #c4dfeb;
  margin: 1em;
  padding: 1em;
  border: 1px solid black;
  border-radius: 25px;
}

/* line 12, ../_compass/sass/style.scss */
.section_content_wrapper {
  background: #d7e9f2;
  margin: 1em;
  padding: 1em;
  border: 1px solid black;
  border-radius: 25px;
}

/* line 20, ../_compass/sass/style.scss */
.component_content_wrapper {
  background: #eaf4f8;
  margin: 1em;
  padding: 1em;
  border: 1px solid black;
  border-radius: 25px;
}

/* line 28, ../_compass/sass/style.scss */
.component_content_wrapper:hover {
  cursor: pointer;
}

/* line 32, ../_compass/sass/style.scss */
.late_assignment {
  color: red;
}

/* line 36, ../_compass/sass/style.scss */
.on_time_assignment {
  color: lawngreen;
}

/* line 40, ../_compass/sass/style.scss */
.logo-container {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* line 45, ../_compass/sass/style.scss */
.app-name {
  color: #3987aa;
  text-align: right;
}

/* line 51, ../_compass/sass/style.scss */
table thead {
  background-color: #3987aa;
  color: white;
}
/* line 55, ../_compass/sass/style.scss */
table tbody tr:nth-child(even) {
  background-color: #ddedf2 !important;
}

/* line 60, ../_compass/sass/style.scss */
.title-section {
  width: 100%;
}
/* line 63, ../_compass/sass/style.scss */
.title-section .lesson-title {
  width: 100%;
  text-align: center;
}
/* line 67, ../_compass/sass/style.scss */
.title-section .lesson-description {
  padding: 0.5em;
  color: white;
  background-color: #3987aa;
  text-align: center;
}
/* line 74, ../_compass/sass/style.scss */
.title-section .section-title {
  width: 100%;
  padding: 0.5em;
  text-align: center;
}
/* line 79, ../_compass/sass/style.scss */
.title-section .section-description {
  padding: 0.5em;
  color: white;
  background-color: #3987aa;
  text-align: center;
}

/* line 87, ../_compass/sass/style.scss */
.section-wrapper {
  margin: 5em;
  border: 1px solid #3987aa;
}

/* line 92, ../_compass/sass/style.scss */
.component-wrapper {
  padding: 1em 0.5em 1em 0.5em;
  border-top: 1px solid #3987aa;
}

/* line 99, ../_compass/sass/style.scss */
.grid-x.center-grid-x {
  align-items: center;
  justify-content: center;
}

/* line 105, ../_compass/sass/style.scss */
.image_gallery {
  height: 60vh;
  overflow-y: scroll;
}

/* line 110, ../_compass/sass/style.scss */
.selected_image {
  background: #e5e5e5;
  border: 1px solid black;
}

/* line 115, ../_compass/sass/style.scss */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity .3s ease;
}
/* line 126, ../_compass/sass/style.scss */
.modal-mask .modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
/* line 130, ../_compass/sass/style.scss */
.modal-mask .modal-wrapper .modal-container {
  width: 80%;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

/* line 143, ../_compass/sass/style.scss */
.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

/* line 148, ../_compass/sass/style.scss */
.modal-default-button {
  float: right;
}

/* line 152, ../_compass/sass/style.scss */
.image_container {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 40vh;
  width: 40vh;
}

/* line 160, ../_compass/sass/style.scss */
.dragula_component_container {
  right: 0;
  position: fixed;
}

/* line 165, ../_compass/sass/style.scss */
.component_container_wrapper {
  min-height: 75px;
}