@charset "UTF-8";
/* FONTS */
@font-face {
  font-family: Amita;
  src: url("https://philologika.s3.amazonaws.com/static/webfonts/Amita/Amita-Regular.ttf");
}
@font-face {
  font-family: Amita;
  src: url("https://philologika.s3.amazonaws.com/static/webfonts/Amita/Amita-Bold.ttf");
  font-weight: bold;
}
.wrapper {
  display: flex;
}

.item {
  flex: 1 200px;
  order: 2;
}

/*************************
*        General         *
**************************/
html {
  scroll-padding-top: 60px; /* height of sticky header */
  height: -webkit-fill-available;
}

body {
  background-color: #efefef;
  margin: 0px;
  padding: 0px;
  font-family: Garamond, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.6;
  color: #121212;
  min-height: 100vh;
  height: -webkit-fill-available;
}

.pointer {
  cursor: pointer;
}

.embed {
  padding: 15px;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 10px;
  border: transparent;
}

h1, h2, h3, h4, h5 {
  line-height: 1.2;
}

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover {
  text-decoration: none;
}

a,
.link-like {
  text-decoration: none;
  color: #4169E1;
}

a:hover,
.link-like:hover {
  text-decoration: underline;
  cursor: pointer;
}

p.red-message {
  color: #e60026;
  margin: 0px;
  font-family: Helvetica, sans-serif;
}

p.green-message {
  color: #228B22;
  margin: 0px;
  font-family: Helvetica, sans-serif;
}

p.datetime {
  color: #888;
  font-size: 14px;
  margin: 5px 0px;
}

.search-results div.container {
  padding: 10px;
}

.search-details-container {
  padding: 10px;
}

.search-details-container pre {
  font-size: 16px;
  border: 1px grey solid;
}

.search-details-container h5 {
  font-family: sans-serif;
  border: 1px grey solid;
  padding: 10px;
  margin: 0px;
}

.search-results h4 {
  font-size: 20px;
  cursor: pointer;
  margin: 0px 0px 5px 0px;
}

.search-results .detail {
  font-size: 16px;
}

.right {
  float: right;
}

.left {
  float: left;
}

.center-text {
  text-align: center;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.relative {
  position: relative;
}

.dotted {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

a.no-underline:hover {
  text-decoration: none;
}

.status-update {
  color: #655685;
}

.display-none,
.course-listing.display-none,
form .label-group.display-none,
.lesson-button.display-none {
  display: none;
}

/* Remove arrows for number input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.red {
  color: #e60026;
}

.blue {
  color: #4169E1;
}

.purple {
  color: #5a2e6d;
}

.orange {
  color: darkorange;
}

.green {
  color: #228B22;
}

.bold {
  font-weight: bold;
}

.screen-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d1d1d1;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4169E1;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4169E1;
  cursor: pointer;
}

span.grip {
  content: "....";
  width: 10px;
  height: 20px;
  display: inline-block;
  overflow: hidden;
  line-height: 5px;
  padding: 3px 4px;
  cursor: move;
  vertical-align: middle;
  margin-top: 5px;
  margin-right: 0.3em;
  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 2px;
  color: #cccccc;
  text-shadow: 1px 0 1px black;
}

span.grip::after {
  content: ".. .. .. ..";
}

.image-slider {
  transform: rotate(90deg);
  margin: 0px -7%;
  width: 200px;
}

#top-tools .button-bar {
  padding-top: 4px;
  padding-right: 50px;
  width: 65%;
  padding-left: 20px;
  height: 35px;
}

#task-user-settings {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 200;
}

.bottom-border {
  border-bottom: 1px solid #aaa;
}

.log-out-alert {
  position: fixed;
  top: 0;
  left: 0;
  color: #e60026;
  background-color: white;
  min-width: 100px;
  color: #4169E1;
  padding: 3px;
  z-index: 100;
}

.text-input-wrapper {
  position: relative;
  display: inline-block;
}

/**********************
*      !BUTTONS       *
**********************/
/* normal buttons */
button,
a.button-like {
  padding: 10px 25px;
  font-size: 16px;
  background-color: transparent;
  border: 1px solid transparent;
  margin: 3px 3px 3px 0px;
  font-family: Helvetica, sans-serif;
  border-radius: 5px;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
}

button.big,
a.button-like.big {
  font-size: 24px;
  padding: 15px 30px;
}

button.filled,
a.button-like.filled {
  color: white;
  background-color: #655685;
}

button.filled:disabled,
a.button-like.filled:disabled {
  color: white;
  background-color: grey;
}

button.filled:hover,
a.button-like.filled:hover {
  color: white;
  background-color: #421C52;
}

button.bordered,
a.button-like.bordered {
  border: 1px solid #655685;
  background-color: transparent;
  color: #655685;
  border-radius: 5px;
  padding: 8px 10px;
}

button.bordered:hover,
a.button-like.bordered:hover {
  color: white;
  background-color: #655685;
}

button.bordered.active,
a.button-like.bordered.active {
  color: white;
  border: 1px solid #655685;
  background-color: #655685;
}

button.bordered.red,
a.button-like.bordered.red {
  background-color: transparent;
  color: #e60026;
  border: 1px solid #e60026;
}

button.bordered.red:hover,
a.button-like.bordered.red.active {
  color: white;
  background-color: #e60026;
}

button.red:hover,
button.red:active,
a.button-like.red:active,
a.button-like.red:hover {
  color: #c80815;
}

button:hover,
button.active,
a.button-like:hover,
a.button-like:active,
.sticky-tool-bar button.active {
  cursor: pointer;
  color: #804799;
  text-decoration: none;
}

.sticky-tool-bar button.filled.active {
  cursor: pointer;
  background-color: #4169E1;
  text-decoration: none;
  color: white;
}

.sticky-tool-bar button.filled.active:hover {
  cursor: pointer;
  background-color: #4169E1;
  text-decoration: none;
}

.sticky-tool-bar button.filled:hover {
  cursor: pointer;
  background-color: transparent;
  text-decoration: none;
}

button.blue.bordered,
a.button-like.blue.bordered {
  background-color: transparent;
  color: #4169E1;
  border: 1px solid #4169E1;
}

button.blue.bordered:hover,
a.button-like.blue.bordered:hover {
  background-color: #4169E1;
  color: white;
}

button.blue,
a.button-like.blue {
  color: #4169E1;
}

button.blue:hover,
button.blue:active,
a.button-like.blue:active,
a.button-like.blue:hover {
  color: #2255ee;
}

button.red:hover,
button.red:active,
a.button-like.red:active,
a.button-like.red:hover {
  color: #c80815;
}

button.green,
a.button-like.green {
  background-color: #228B22;
  color: white;
}

button.green:hover,
button.green:active,
a.button-like.green:active,
a.button-like.green:hover {
  background-color: #006400;
}

a.button-like.big-button {
  text-align: center;
  display: block;
  margin: 10px 0px;
  padding: 15px 30px;
  font-size: 20px;
  color: white;
  background-color: #655685;
}

button.right,
a.button-like.right {
  float: right;
}

button.clear,
a.button-like.clear,
#top-tools button,
.reassign-question-button,
#select-target-lesson button, #select-target-task button {
  background-color: transparent;
  border: none;
  color: #333;
  padding: 5px;
  cursor: pointer;
  margin: 3px 3px 3px 0px;
}

button.clear:hover,
button.clear.active,
a.button-like.clear:hover,
a.button-like.clear.active,
#top-tools button:hover,
#top-tools button.active,
#top-tools a.button-like:hover,
.reassign-question-button:hover {
  background-color: transparent;
  color: #804799;
}

button.clear:disabled,
button.clear:disabled:hover,
a.button-like.clear:disabled,
a.button-like.clear:disabled:hover {
  color: #898989;
  cursor: not-allowed;
  background-color: transparent;
}

button.clear.red,
a.button-like.clear.red {
  color: #e60026;
  background-color: transparent;
}

button.clear.red:hover,
a.button-like.clear.red:hover {
  color: #c80815;
  background-color: transparent;
}

button.clear.blue,
a.button-like.clear.blue {
  color: #4169E1;
  background-color: transparent;
}

button.clear.blue:hover,
a.button-like.clear.blue:hover {
  color: #2255ee;
  background-color: transparent;
}

button.link-like {
  text-decoration: none;
  color: #4169E1;
  padding: 0;
  margin: 3px 0;
  background: transparent;
}

button.link-like.red {
  color: #e60026;
  background-color: transparent;
}

button.link-like:hover,
button.link-like.red:hover {
  text-decoration: underline;
  background-color: transparent;
}

/**********************
*      !HOMEPAGE       *
**********************/
.flex-child-half {
  width: 45%; /* Or whatever */
}

h1.home {
  font-size: 50px;
  max-width: 500px;
  margin: 60px 0px;
  line-height: 1.2;
  margin-top: 30px;
}

.section {
  display: block;
  width: 100%;
  background-color: white;
  box-shadow: 4px 4px 8px #999;
  padding: 0px;
  margin: 10px 0px;
  min-height: 200px;
}

.section h2 {
  margin: 0px 0px;
  padding: 10px 20px;
  border: 1px dashed #ccc;
}

.section img {
  height: 200px;
  padding: 30px 20px 30px 15px;
}

.section-content {
  display: inline-block;
  position: relative;
  width: 60%;
  padding-left: 30px;
}

.home-course-list {
  padding: 0px;
  margin: 10px 0px;
}

.home-course-list-item {
  width: 100%;
  padding: 5px 15px;
  display: grid;
  grid-template-columns: 10fr 1fr;
  grid-gap: 100px;
  border: 2px solid transparent;
  cursor: pointer;
}

.home-course-list a {
  color: #382d72;
  font-weight: bold;
}

.home-course-list a:hover {
  text-decoration: none;
}

.home-course-list-item:hover {
  border-radius: 15px;
  border: 2px solid #655685;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

a.bottom-link {
  margin: 0px 15px 20px 15px;
}

/**************************
*   PAGE CONTAINER DIVS   *
**************************/
#container {
  width: 100%;
  margin: 55px auto auto auto; /* height of sticky header */
  padding-bottom: 0px; /* footer */
  min-height: calc(100vh - 55px);
  width: 100%;
  position: sticky;
  top: 55px;
  overflow: scroll;
}

/* single column pages */
.single-col {
  display: block;
  padding: 30px 10%;
  min-height: calc(100vh - 55px);
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: space-evenly;
  justify-content: space-around;
  width: 100%;
}

/* single column page, but narrower */
.narrow-col {
  margin: 30px auto;
  width: 70%;
  min-width: 270px;
  max-width: 900px;
}

/*************************
        NAVIGATION
**************************/
nav {
  overflow: hidden;
  height: 55px; /* height of sticky header */
  line-height: 1;
  background-color: white;
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0px 2px 8px #999;
}

nav a {
  float: right;
  color: #565656;
  text-align: center;
  padding: 23px 10px 16px 10px;
  text-decoration: none;
  margin: 0px 20px;
}

.nav-button-active,
nav a:hover {
  text-decoration: none;
  color: #655685;
  border-bottom: 4px solid #655685;
  cursor: pointer;
}

/*********************  
*    NEW SIDE NAV     * 
**********************/
#side-nav-container {
  position: fixed;
  height: 100%;
  z-index: 90;
  left: 0px;
  top: 0;
  transition: left 300ms ease 0s;
  box-sizing: border-box;
  display: flex;
  overflow-x: visible;
}

#side-nav-container.toggle {
  left: -290px;
}

#side-nav {
  height: 100%;
  width: 290px;
  padding: 20px 7px 50px 0px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

#side-nav.viewer .display-lesson {
  padding-left: 35px;
}

#side-nav.viewer .display-task {
  padding-left: 35px;
}

#display-side-nav {
  z-index: 99;
}

#side-nav-container.toggle #display-side-nav {
  left: 0px;
}

#side-nav-container #display-side-nav .right-arrow,
#side-nav-container.toggle #display-side-nav .left-arrow {
  display: none;
}

#side-nav-container #display-side-nav .left-arrow,
#side-nav-container.toggle #display-side-nav .right-arrow {
  display: block;
}

#side-nav a:hover {
  text-decoration: none;
}

#side-nav button {
  color: #565656;
  display: block;
}

.side-button {
  height: 100%;
  z-index: 100;
  background-color: #8f80ae;
  width: 15px;
  color: white;
  display: inline;
  position: fixed;
  left: 290px;
  top: 0;
  cursor: pointer;
  transition: left 300ms ease 0s;
}

.left-transition {
  transition: left 300ms ease 0s;
}

.side-button span {
  font-size: 13px;
  display: block;
  margin-top: 50vh;
  text-align: center;
  cursor: pointer;
}

.side-button:hover {
  background-color: #655685;
}

#top-tools {
  z-index: 102;
  background-color: white;
  border-bottom: 1px solid #aaa;
  height: 40px;
  position: sticky;
  transition: left 300ms ease 0s;
  display: flex;
  align-items: baseline;
}

#top-tools .right {
  position: absolute;
  right: 20px;
  text-align: right;
}

.go-back {
  font-size: 16px;
  margin-left: 20px;
}

.go-back a {
  color: #565656;
}

/*************************
*    philologika LOGO    *
*************************/
#home-button {
  font-size: 28px;
  color: #000;
  margin: 0px 10px;
  padding: 7px 5px 5px 10px;
  font-family: Amita;
  font-weight: bold;
  float: left;
  line-height: 1.7;
}

#home-button:hover {
  color: #655685;
  text-decoration: none;
  border: none;
}

#squiggle {
  position: relative;
  top: -5px;
  display: inline-block;
  left: -18px;
  transform: rotate(-30deg);
}

#quill-img {
  position: relative;
  display: inline-block;
  top: -3px;
  left: -13px;
  transform: rotate(23deg);
}

#home-button-icon {
  display: none;
}

/******************************
*  LOGIN AND SIGN UP BUTTONS  *
******************************/
#right-nav {
  width: 750px;
  float: right;
  position: absolute;
  right: 0;
  top: 0;
}

.right-nav-text {
  padding-left: 5px;
}

#login-buttons a {
  border: 1px solid #655685;
  padding: 8px 15px;
  margin: 8px 5px;
}

#login-buttons a.rightmost {
  float: right;
  margin-right: 15px;
}

#login-buttons a:hover,
#login-buttons a.active {
  color: white;
  background-color: #655685;
  text-decoration: none;
}

/* mobile login */
#login-menu-button-mobile {
  display: none;
}

/****************************** 
*          NAV BUTTONS        * 
******************************/
.right-nav-button {
  margin: 0px 12px;
  padding: 19px 13px 13px 13px;
  font-size: 19px;
}

/*****************************
*  ACCOUNT BUTTON AND MENU   *
*****************************/
/* account menu */
#account-menu {
  position: fixed;
  top: 55px;
  right: 13px;
  width: 250px;
  background-color: white;
  margin: 0px;
  padding: 20px 0px;
  z-index: 9999;
  overflow: hidden;
  box-shadow: 0px 2px 8px #999;
  border-top: 2px solid #ccc;
}

#account-menu a {
  font-size: 19px;
  margin: 0px;
  color: #555;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  display: block;
  border: none;
  background: none;
}

#account-menu a:hover {
  color: #5a2e6d;
}

/******************
      FOOTER 
******************/
#footer {
  display: none;
}

#footer ul {
  display: block;
  list-style: none;
  margin: 10px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 15px;
}

#footer ul li {
  display: inline;
}

#footer ul a {
  padding: 15px 20px;
  color: #898989;
}

/********************
*      FORMS        *
********************/
form {
  background: auto;
}

ul.errorlist {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  color: #e60026;
}

ul.errorlist li {
  font-size: 16px;
  color: #e60026;
}

label.required::after {
  content: " *";
  color: #e60026;
}

form.narrow {
  max-width: 480px;
  background: white;
  margin: 10px auto;
  padding: 20px 40px;
  box-shadow: 4px 4px 8px #999;
}

form.inline {
  margin: 10px auto;
}

form.inline label,
form.inline input[type=text],
form.inline input[type=submit] {
  display: inline;
  width: auto;
  margin: auto;
  padding: auto;
}

form h1 {
  background: #655685;
  padding: 20px 0;
  font-size: 140%;
  font-weight: 500;
  font-family: Helvetica, sans-serif;
  text-align: center;
  color: white;
  margin: -20px -40px 25px -40px;
}

form fieldset {
  border: 2px solid #655685;
  color: #655685;
  position: relative;
}

form legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

form label {
  display: block;
  font-size: 16px;
  color: #555;
  margin-bottom: -2px;
}

/* Fix to prevent font from changing size on focus */
input:-webkit-autofill::first-line {
  font-size: 16px !important;
}

input,
form input[type=text],
form input[type=date],
form input[type=datetime],
form input[type=email],
form input[type=number],
form input[type=search],
form input[type=time],
form input[type=url],
form input[type=password],
form textarea,
form select,
form input.input-choices {
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  padding: 6px 11px;
  box-sizing: border-box;
  color: #222;
  margin-bottom: 5px;
  width: 100%;
  height: 45px;
  background-color: white;
}

form input[type=text]:-moz-read-only, form input[type=date]:-moz-read-only, form input[type=datetime]:-moz-read-only, form input[type=email]:-moz-read-only, form input[type=number]:-moz-read-only, form input[type=search]:-moz-read-only, form input[type=time]:-moz-read-only, form input[type=url]:-moz-read-only, form input[type=password]:-moz-read-only, form textarea:-moz-read-only {
  color: #777;
  background-color: white;
}

input:disabled,
form input[type=text]:disabled,
form input[type=date]:disabled,
form input[type=datetime]:disabled,
form input[type=email]:disabled,
form input[type=number]:disabled,
form input[type=search]:disabled,
form input[type=time]:disabled,
form input[type=url]:disabled,
form input[type=password]:disabled,
form textarea:disabled,
form input[type=text]:read-only,
form input[type=date]:read-only,
form input[type=datetime]:read-only,
form input[type=email]:read-only,
form input[type=number]:read-only,
form input[type=search]:read-only,
form input[type=time]:read-only,
form input[type=url]:read-only,
form input[type=password]:read-only,
form textarea:read-only {
  color: #777;
  background-color: white;
}

.inline-answer input[type=number],
.inline-answer input[type=text] {
  width: 150px;
  padding: 5px 10px;
  text-align: center;
  margin: 0;
}

form input[type=file] {
  background-color: auto;
}

form textarea {
  width: 100%;
  height: 130px;
}

form input[type=checkbox] {
  display: inline-block;
  width: auto;
}

form input[type=checkbox] + label {
  display: inline-block;
  width: auto;
}

form input[type=text]:focus,
form input[type=date]:focus,
form input[type=datetime]:focus,
form input[type=email]:focus,
form input[type=number]:focus,
form input[type=search]:focus,
form input[type=time]:focus,
form input[type=url]:focus,
form input[type=password]:focus,
form textarea:focus,
form select:focus,
form datalist:focus {
  border: 2px solid #95a7df;
  padding: 5px 10px;
}

form select,
form datalist {
  -webkit-appearance: menulist-button;
  height: 35px;
}

form .number {
  background: #1abc9c;
  color: white;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 15px 15px 15px 0px;
}

form input[type=submit] {
  position: relative;
  display: block;
  padding: 19px 39px 18px 39px;
  color: white;
  margin: 0 auto;
  background: #655685;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  width: 100%;
  height: 60px;
  border: none;
  margin: 10px 0px;
  cursor: pointer;
}

form button {
  background: #655685;
  font-size: 16px;
}

form input[type=submit]:hover,
form input[type=button]:hover {
  background: #421C52;
}

form .helptext {
  font-size: 16px;
  color: #666;
  display: block;
  position: relative;
  line-height: 1;
}

form .label-group {
  display: inline-block;
}

/***********************
*        TABLES        *
***********************/
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0px auto;
}

th, td {
  text-align: left;
  padding: 8px 13px;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

th {
  color: #655685;
  font-weight: bold;
  background: #d1cce3;
}

/*************************
*    !COURSE CATALOGUE    *
*************************/
.course-catalogue h1 img {
  display: inline;
  float: right;
  height: 60px;
}

.course-catalogue a:hover {
  text-decoration: none;
}

.course-catalogue .courses {
  border: none;
}

#course-filter-list {
  margin: 10px 0px;
}

.filter-criterion {
  display: inline-block;
  width: 80px;
}

#filter-courses {
  padding-bottom: 10px;
  display: block;
  clear: right;
}

button.filter-button {
  background-color: transparent;
  color: #444;
  padding: 5px 10px;
  margin: 2px 0px;
  border: 1px solid #655685;
  color: #655685;
}

button.filter-button.active {
  background-color: #655685;
  color: white;
}

.page-action-button {
  color: #555;
  font-weight: normal;
  font-size: 18px;
  margin-right: 15px;
}

.page-action-button img:hover {
  cursor: pointer;
  text-decoration: none;
}

.page-action-button-text:hover {
  cursor: pointer;
  text-decoration: underline;
}

.course-listing {
  background-color: white;
  padding: 15px 25px 30px 25px;
  margin: 12px 0px;
  border-left: 7px solid #655685;
  color: #444;
  box-shadow: 4px 4px 8px #999;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

.course-listing h2 {
  margin: 10px 0px 5px 5px;
  width: 100%;
}

.course-listing a {
  color: #333;
}

.course-listing a:hover {
  color: #333;
}

.course-listing:hover {
  background-color: #d7e3fc;
}

.course-listing ul,
.discussion-question ul {
  list-style: none;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-size: 16px;
  width: 100%;
}

.course-listing ul li,
.discussion-question ul li {
  display: inline;
  margin-right: 10px;
}

.course-illustration {
  width: 20%;
}

.course-illustration img {
  max-width: 200px;
  max-height: 200px;
}

.course-info {
  width: 70%;
}

.course-info p {
  margin: 0px;
}

/*************************
*      COURSE DETAIL     *
*************************/
.course-description {
  color: #333;
}

.course-listing.course-unit-detail {
  display: block;
}

.course-listing.course-unit-detail:hover {
  background-color: white;
}

.divider {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 45%;
  margin-top: -20px;
}

.course-page h1 {
  font-weight: normal;
  margin: 30px 0px;
  text-align: center;
  font-size: 35px;
}

.completed-unit {
  color: #228B22;
}

.completed-task {
  color: #228B22;
  font-size: 30px;
}

#task-title.completed::after {
  content: "✔";
  font-size: 20px;
  color: white;
  background: #228B22;
  font-family: sans-serif;
  padding: 2px 5px 2px 5px;
  border-radius: 50%;
  margin-left: 10px;
  position: relative;
  top: -4px;
  width: 30px;
  height: 30px;
}

.course-lesson,
.course-task {
  display: block;
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
}

.course-lesson {
  margin: 10px 10px 0px 20px;
  font-weight: normal;
}

.course-task {
  margin: 0px 10px 0px 43px;
  font-size: 20px;
}

.course-lesson.completed::before,
.course-task.completed::before,
.display-unit.completed::before,
.display-lesson.completed::before,
.display-task.completed::before {
  content: "✔";
  color: #228B22;
  position: absolute;
  font-size: 18px;
  font-family: "Zapf Dingbats";
}

.course-lesson.completed::before {
  top: 8px;
  left: -13px;
}

.course-task.completed::before {
  top: 8px;
  left: -10px;
  font-size: 16px;
}

.display-task.completed::before {
  top: 5px;
  left: 17px;
  font-size: 16px;
}

.display-lesson.completed::before {
  top: 8px;
  left: 17px;
  font-size: 16px;
}

.display-unit.completed::before {
  top: 8px;
  left: -2px;
  font-size: 18px;
}

/********************
      TASK NAV
*********************/
#view-menu-button {
  background-color: #d1cce3;
  position: fixed;
  left: 0px;
  top: 55px;
  height: 100%;
  width: 40px;
  cursor: pointer;
}

#view-menu-button .arrow {
  border: solid #655685;
  border-width: 0 5px 5px 0;
  height: 12px;
  width: 12px;
  position: relative;
  left: -12px;
  top: 26px;
}

div.inline {
  display: inline-block;
}

div.menu-icon {
  display: none;
}

#side-nav p {
  font-size: 16px;
}

.img-zoom-lens {
  position: absolute;
  background-color: transparent; /*set the size of the lens:*/
  opacity: 0.5;
  width: 0;
  height: 0;
  z-index: 10;
}

.image-zoom-result {
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  margin: 0px auto;
}

.image-zoom-tools {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: -32px;
  right: 0;
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.image-zoom-tools button {
  font-size: 21px;
  color: #565656;
}

.review-settings button.dropdown-button {
  display: inline;
  width: auto;
  padding-left: 10px;
}

.review-settings .lesson {
  margin-left: 25px;
}

.review-settings .task {
  margin-left: 50px;
}

.review-item-header {
  font-family: Helvetica, sans-serif;
  margin-left: 70px;
  padding: 5px;
  font-size: 15px;
  color: #565656;
}

.review-settings {
  padding: 5px 5px 25px 5px;
}

.review-item {
  margin-left: 70px;
}

.review-item span {
  padding-left: 5px;
}

/* Style the sidenav links and the dropdown button */
.dropdown-button,
button.dropdown-button {
  color: #444;
  padding: 9px 18px;
  text-decoration: none;
  font-size: 18px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  position: relative;
  line-height: 1.2;
  margin: 0;
}

.dropdown-button.display-lesson {
  font-size: 15px;
  padding-left: 30px;
}

/* On mouse-over */
.dropdown-button:hover,
.dropdown-button.active {
  color: #804799;
}

.dropdown-status {
  width: 16px;
  display: inline-block;
  font-size: 18px;
}

.hoverover-container {
  position: absolute;
  width: 200px;
  box-shadow: 4px 4px 8px #999;
  top: 32px;
  left: 0;
  z-index: 100;
  background-color: white;
  overflow: scroll;
  max-height: calc(100vh - 150px);
  overflow-x: hidden;
}

/* Dropdown container */
.dropdown-container {
  margin: 0px;
  padding: 0px;
  display: block;
  font-size: 16px;
}

.hoverover-container button,
.dropdown-container button {
  display: block;
}

.dropdown-container.display-none {
  display: none;
}

.dropdown-container a,
.dropdown-container .display-task {
  padding: 5px 8px 5px 33px;
  margin: 2px 0px 2px 10px;
  font-weight: normal;
  font-size: 15px;
  display: block;
  position: relative;
  color: #565656;
  overflow-x: initial;
  line-height: 1.2;
  border: 1px solid transparent;
}

.dropdown-container a.current-task,
.dropdown-container a:hover,
.dropdown-container a.active.display-task {
  color: #655685;
  border: 1px solid #655685;
  border-radius: 7px;
  text-decoration: none;
}

/********************
    !TASK VIEWS
*********************/
#content-container {
  margin-left: 305px;
  transition: margin-left 300ms ease 0s;
}

#content-container.toggle {
  margin-left: 15px;
}

.progress-bar {
  display: flex;
  position: relative;
  margin: 0;
  top: 1px;
  padding: 0;
  width: 100%;
  z-index: 81;
}

a.progress-bar-part {
  background-color: #ccc;
  height: 7px;
  border-right: 1px solid white;
}

a.progress-bar-part.completed {
  background-color: #aaa;
}

a.progress-bar-part.current-task,
a.progress-bar-part.completed.current-task {
  background-color: #95a7df;
}

.task-container,
#course-editor {
  width: 100%;
  height: calc(100vh - 41px);
  display: flex;
  position: relative;
  overflow: auto;
}

.task-content-container {
  width: 100%;
  overflow-y: scroll;
}

#task-title {
  font-size: 35px;
}

.task-content,
.task-edit-div,
.lesson-edit-div,
.unit-edit-div {
  padding: 0px 30px 30px 30px;
  overflow-y: scroll;
}

.task-content-container.show-helpers {
  width: 60%;
}

.task-helpers {
  display: none;
  padding-top: 5px;
  height: calc(100vh - 130px);
  position: sticky;
  top: 130px;
  width: 0;
}

.task-helpers.show-helpers {
  width: 40%;
  display: flex;
  flex-direction: column;
  position: relative;
  height: calc(100vh - 46px);
  top: -5px;
}

.course-note {
  margin: 10px;
  padding: 20px 10px 10px 10px;
  border-left: 8px solid #4169E1;
  box-shadow: 4px 4px 8px #999;
  position: relative;
  scroll-margin-top: 40px;
}

.course-note.term.focused {
  box-shadow: 4px 4px 8px #228B22;
}

.term-note {
  cursor: pointer;
  font-weight: bold;
  -webkit-text-decoration: underline #228B22 dotted;
          text-decoration: underline #228B22 dotted;
}

.vocab-note,
.vocab-form-note {
  cursor: pointer;
  color: #4169E1;
}

.play-audio {
  cursor: pointer;
}

.course-note.vocab.focused {
  box-shadow: 5px 5px 8px purple;
}

.course-note.wordform.focused {
  box-shadow: 5px 5px 8px #4169E1;
}

.vocab-pos {
  font-size: 18px;
  font-style: italic;
}

ol.vocab {
  font-size: 18px;
  padding-left: 30px;
  margin: 5px 0;
}

ol.vocab li {
  margin: 0;
}

.play-audio {
  font-size: 18px;
}

.student-content {
  border: 1px dashed #aaa;
  padding: 5px;
}

.student-content,
.course-note .editor {
  font-size: 18px;
}

.student-content ul,
.student-content ol,
.course-note .editor ul,
.course-note .editor ol {
  margin: 3px 0px;
  padding-left: 30px;
}

.student-content ul li,
.student-content ol li,
.course-note .editor ul li,
.course-note .editor ol li {
  line-height: 1;
  font-size: 16px;
}

.doodle-container {
  margin-top: 10px;
  overflow: auto;
}

.doodle-container canvas {
  border: 1px solid #aaa;
  min-width: 150px;
  min-height: 150px;
  width: 98%;
  height: 100%;
  cursor: crosshair;
}

.course-note .editable {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.course-note form button {
  color: #565656;
  background: transparent;
  border: 1px solid #565656;
  margin: 10px 0px 0px 10px;
  padding: 5px 10px;
}

.course-note form button:hover {
  color: #804799;
  border: 1px solid #804799;
}

.edit-notes-container {
  position: absolute;
  top: 0;
  right: 0;
}

.edit-notes-container button {
  background-color: transparent;
  color: #8f80ae;
  padding: 0px 4px 2px 2px;
}

.edit-notes-container button:hover {
  color: #655685;
}

.course-note.term {
  border-left: 8px solid #228B22;
}

.course-note.highlight {
  border-left: 8px solid orange;
}

.course-note.vocab {
  border-left: 8px solid #804799;
}

.course-note.new-note {
  padding: 0;
}

.course-note p {
  margin: 2px 0px;
  line-height: 1.2;
  font-size: 16px;
}

.definition-viewer,
.task-notebook,
.task-discussion {
  overflow: auto;
}

#external-link-content iframe {
  border: 0;
  height: calc(100vh - 130px);
  width: 100%;
}

#task-helpers .definition-viewer.display-none,
#task-helpers .task-notebook.display-none,
#task-helpers .task-discussion.display-none {
  display: none;
}

#task-link-out,
#task-study,
#task-settings {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100vh - 41px);
  width: 100%;
  z-index: 111;
  display: none;
  background-color: white;
}

#task-study-content h4 {
  text-align: center;
}

#task-settings {
  display: none;
}

.show-inflection-button {
  font-size: 14px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
}

#task-study-content {
  height: 100%;
}

#study-list-view .play-audio {
  margin-left: 10px;
}

.display-more {
  margin: -7px 12px 0px 4px;
  position: relative;
  line-height: 1;
}

.display-more:hover {
  color: #5a2e6d;
  cursor: pointer;
}

.inflection-table {
  font-size: 16px;
  margin-bottom: 15px;
}

.inflection-table td {
  padding: 2px 2px 2px 10px;
}

.inflection-table thead,
.inflection-table th {
  font-weight: bold;
  background-color: transparent;
}

.display-notes {
  font-size: 18px;
}

.display-notes thead {
  font-weight: bold;
  line-height: 1;
}

.display-notes input[type=checkbox] {
  height: 20px;
}

.study-settings {
  padding: 0px 20px;
  text-align: center;
}

.study-settings .begin-study-button {
  position: relative;
  top: 60px;
}

.study-buttons,
.study-header {
  width: 380px;
  margin: auto;
  text-align: center;
  position: relative;
  top: 5vh;
}

.study-header {
  top: 5.8823529412vh;
  font-size: 18px;
  color: grey;
}

.study-buttons button:hover {
  background-color: auto;
}

.study-settings .setting input {
  width: 150px;
}

.flashcard .question,
.flashcard .answer,
.recall,
.mc {
  margin: auto;
  text-align: center;
  position: relative;
  top: 5vh;
}

.display-options {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 4px 4px 8px #999;
  border: 1px solid grey;
}

.display-options div {
  padding: 5px 40px;
  cursor: pointer;
}

.flashcard .term {
  font-size: 40px;
  font-weight: bold;
}

.flashcard .play-audio {
  display: block;
  margin: 0 auto;
  padding: 5px;
}

.flashcard .main {
  font-size: 30px;
  line-height: 30px;
  display: block;
}

.flashcard .question .main {
  font-size: 40px;
  line-height: 40px;
}

.flashcard .secondary {
  display: block;
  font-size: 20px;
}

.flashcard .side {
  font-size: 15px;
  color: #888;
}

.play-audio-inline {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: pointer;
}

.mc .question,
.recall .question {
  margin: 20px auto;
}

.mc .secondary {
  font-size: 16px;
}

.recall input {
  width: 200px;
  padding: 12px;
  text-align: left;
  margin: 0 auto;
  display: block;
  font-size: 18px;
}

.recall input.correct {
  border: 1px solid #228B22;
}

.recall input.wrong {
  border: 1px solid #e60026;
}

.flashcard .question,
.flashcard .answer {
  width: 380px;
  height: 200px;
  border: 1px solid #aaa;
  box-shadow: 4px 4px 8px #999;
  cursor: pointer;
}

.flashcard.settings {
  cursor: auto;
  top: 1vh;
}

.flashcard.settings .main,
.mc.settings .main,
.mc.settings .secondary,
.recall.settings .main,
.recall.settings .secondary {
  padding: 5px 20px;
  cursor: pointer;
  border: 1px dotted #565656;
}

.flashcard.settings .secondary {
  padding: 2px 20px;
  cursor: pointer;
  border: 1px dotted #565656;
  min-height: 10px;
}

.flashcard.settings .answer {
  margin-top: 50px;
}

.flashcard .label {
  position: relative;
  top: -30px;
  color: grey;
}

.study-choice {
  border: 1px solid #565656;
  border-radius: 5px;
  margin: 5px auto;
  padding: 5px;
  width: 80%;
  cursor: pointer;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.study-choice:hover {
  background-color: #95a7df;
}

.study-choice.correct {
  background-color: #228B22;
  color: white;
}

.study-choice.wrong {
  background-color: #e60026;
  color: white;
}

.study-choice.disabled {
  background-color: #888;
  color: white;
  cursor: default;
}

.sticky-tool-bar {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 103;
  border-bottom: 1px solid #aaa;
  display: flex;
}

.sticky-tool-bar button,
.sticky-tool-bar span {
  border: none;
  font-family: sans-serif;
  font-size: 15px;
  padding: 7px 12px 7px 14px;
  color: #565656;
  margin: 0 1px 0 0;
  background-color: white;
}

.sticky-tool-bar button:hover {
  color: #5a2e6d;
}

.sticky-tool-bar button.right {
  color: #e60026;
  margin-left: auto;
}

.sticky-tool-bar button.right:hover {
  color: #c80815;
}

.editor-toolbar button {
  padding: 3px;
  background-color: transparent;
  color: black;
  border: none;
}

.editor-toolbar button:hover,
.editor-toolbar button.active {
  color: #4169E1;
}

.rich-editor .editor {
  min-height: 150px;
  min-width: 150px;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 10px;
}

div.editor[contenteditable=true]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  display: block; /* For Firefox */
}

.rich-editor input {
  width: 95%;
  height: 30px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 2px 5px;
}

.rich-editor .editor p {
  margin-top: 0;
  font-size: 16px;
  margin-bottom: 3px;
}

#notebook-content,
#discussion-content {
  padding: 0px;
}

.discussion-question {
  border-bottom: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  padding: 15px;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.discussion-question h4 {
  margin: 3px 0px;
}

.discussion-answer {
  border: 1px solid #aaa;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px;
  margin-bottom: 5px;
}

.question-info {
  color: #999;
  font-size: 14px;
}

.add-reply {
  margin-top: 25px;
}

#add-new-question-container {
  padding: 15px;
}

#vertical-divider {
  width: 2px;
  margin-left: -2px;
  top: 0;
  bottom: 0;
  background: #8f80ae;
  border-top: 0;
  border-bottom: 0;
  cursor: ew-resize;
  z-index: 70;
}

.task-content-container p img,
.task-content-container img {
  width: 60%;
  max-height: calc(100vh - 150px);
  margin: 0px auto;
  display: block;
}

.task-content-container p img.left,
.task-content-container img.left {
  margin: 0px;
  float: none;
}

.task-content-container p img.full,
.task-content-container img.full {
  max-width: 800px;
  width: 90%;
}

.task-content-container p img.big,
.task-content-container img.big {
  max-width: 700px;
  width: 80%;
}

.task-content-container p img.medium,
.task-content-container img.medium {
  max-width: 500px;
  width: 60%;
}

.task-content-container p img.small,
.task-content-container img.small {
  max-width: 300px;
  width: 35%;
}

.task-content-container p img.tiny,
.task-content-container img.tiny {
  max-width: 300px;
  width: 20%;
}

.task-content-container .image-display-container {
  position: relative;
}

.task-content-container .tree {
  width: 100%;
  display: block;
  position: relative;
}

.task-content-container .tree-canvas {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
}

.media-attribution {
  font-size: 12px;
  color: grey;
  line-height: 1;
  margin-top: 5px;
  visibility: hidden;
}

.task-content-container .media-attribution {
  text-align: center;
}

#divider {
  position: absolute;
  width: 1px;
  margin-left: -1px;
  top: 0;
  bottom: 0;
  background: #655685;
  border-top: 0;
  border-bottom: 0;
  cursor: col-resize;
}

ul li,
ol li {
  margin: 0px;
  line-height: 1.5;
  padding-left: 5px;
}

dl dt {
  line-height: 1.5;
  font-weight: bold;
}

dl dd {
  line-height: 1.5;
  display: list-item;
}

blockquote {
  background: white;
  margin: 10px 0px;
  padding: 5px 10px;
  border-left: 8px solid #655685;
  box-shadow: 4px 4px 8px #999;
}

pre {
  white-space: pre-wrap;
  background: white;
  border-left: 8px solid #655685;
  margin: 10px 0px;
  padding: 15px 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* task questions */
#task-fieldset {
  margin: 10px 0px;
  position: relative;
  color: black;
  padding: 0 0 40px 0;
  border: none;
}

#task-fieldset p {
  margin: 10px 0px;
  padding: 0px;
  position: relative;
}

#task-fieldset p.red-message,
#task-fieldset:disabled p.red-message {
  color: #e60026;
  margin: 0px;
  font-size: 18px;
}

#task-fieldset .explanation {
  margin: 20px 0px 0px 0px;
  padding: 0px;
  border: 1px dashed #726a95;
  padding: 15px;
  border-radius: 15px;
  color: #565656;
}

#task-fieldset .explanation p {
  color: #565656;
}

#task-fieldset label {
  color: black;
  font-size: 18px;
}

.task-question {
  padding: 20px 20px 20px 50px;
  position: relative;
  scroll-margin: 20px;
}

.task-question .input-container {
  position: relative;
}

.input-container.wrong::before,
.checkbox-container.wrong::before,
.inline-answer.wrong::before {
  position: absolute;
  top: 5px;
  left: -19px;
  content: "✘";
  color: #e60026;
}

.input-container.correct::before,
.checkbox-container.correct::before,
.inline-answer.correct::before,
.match-question-row.correct::before {
  position: absolute;
  top: 5px;
  left: -19px;
  content: "✔";
  color: #228B22;
}

.inline-answer.correct::before,
.inline-answer.wrong::before {
  left: 7px;
  top: 0px;
}

#task-fieldset .sa-prompt p {
  margin: 2px;
  color: #333;
}

.checkpoint-button {
  margin: 3px 0px;
  background-color: transparent;
  color: #333;
  padding: 10px;
}

.checkpoint-button.red {
  color: #e60026;
  background-color: transparent;
}

.checkpoint-button:hover {
  color: #655685;
  background-color: transparent;
}

.checkpoint-button:disabled {
  color: #777;
  cursor: default;
}

.checkpoint-copy {
  color: #4169E1;
}

#checkpoint-button-container {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 101;
}

#checkpoint-result {
  color: #4169E1;
  font-size: 20px;
  font-family: Helvetica, sans-serif;
  scroll-margin: 25px;
}

#checkpoint-status {
  position: absolute;
  top: 34px;
  left: 13px;
  z-index: 99;
  background: white;
  color: #4169E1;
}

#checkpoint-result.pass,
#checkpoint-status.pass {
  color: #228B22;
}

#checkpoint-result.fail,
#checkpoint-status.fail {
  color: #e60026;
}

#task-checkpoint h4 {
  margin: 0;
}

#task-checkpoint h3 {
  color: #655685;
  border-top: 4px double #655685;
  border-bottom: 1px solid #aaa;
  text-align: left;
  padding: 10px 15px;
  font-size: 22px;
  font-weight: bold;
  margin: 0px;
  font-family: Helvetica, sans-serif;
}

.question-content ol, .question-content ul {
  padding-left: 20px;
}

.task-eval input[type=text] {
  width: 60%;
  margin: 0px;
  background-color: #ddd;
  font-size: 18px;
}

.task-eval label.from-script {
  min-width: 60px;
  font-size: 20px;
  display: block;
  color: black;
  margin: 0px;
}

span.inline-correct-checkmark {
  visibility: hidden;
  color: #228B22;
}

span.checked-inline-answer {
  z-index: 1;
  position: absolute;
  font-size: 18px;
  left: 5px;
  padding: 8px 5px;
  display: inline-block;
}

span.actual-answer {
  color: #228B22;
  font-weight: bold;
  position: absolute;
  z-index: 100;
  top: 2px;
  left: 2px;
  background-color: white;
  min-width: 180px;
  padding: 4px 10px;
}

.inline-answer span.actual-answer {
  width: 135px;
  position: absolute;
  top: -6px;
  min-width: 120px;
  text-align: center;
  padding: 9px 5px;
  line-height: 1;
}

.inline-answer .char-palette {
  top: 35px;
}

/* styling radio buttons */
.checkbox-container {
  display: block;
  position: relative;
  padding: 3px 3px 3px 35px;
  margin: 0px 0px 0px -5px;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 18px;
}

.checkbox-container.correct-answer {
  border: 1px solid #228B22;
  background-color: #cfebcf;
  border-radius: 8px;
}

/* Hide the browser's default radio button */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox and radio button */
.checkmark-box,
.checkmark {
  position: absolute;
  top: 7px;
  left: 5px;
  height: 21px;
  width: 21px;
  background-color: #ccc;
}

.checkmark {
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark,
.checkbox-container:hover input ~ .checkmark-box {
  background-color: #bbb;
}

/* When the radio button is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark,
.checkbox-container input:checked ~ .checkmark-box {
  background-color: #2196F3;
}

.checkbox-container input:disabled ~ .checkmark,
.checkbox-container input:disabled ~ .checkmark-box {
  background-color: #aaa;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after,
.checkmark-box:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkbox-container input:checked ~ .checkmark:after,
.checkbox-container input:checked ~ .checkmark-box:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkbox-container .checkmark:after {
  top: 7px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
}

.checkbox-container .checkmark-box:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.checkbox-container:disabled, .checkbox-container input:disabled {
  cursor: default;
}

#task-fieldset .checkbox-container p {
  margin: 0;
}

.match-questions-container,
.match-questions-answers,
.correctly-matched-container {
  margin-top: 20px;
  display: none;
  flex-direction: column;
  justify-content: center;
  row-gap: 10px;
}

.correctly-matched-container {
  display: flex;
}

.match-question-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  -moz-column-gap: 20px;
       column-gap: 20px;
  position: relative;
}

.match-question-row.correct::before {
  top: 14px;
  left: -28px;
}

.match-question-row span {
  width: 40%;
  padding: 5px 10px;
  box-shadow: -3px -3px 6px #999;
  vertical-align: middle;
  border: 1px solid #dedede;
}

.match-question-row span:hover,
.match-question-row span.active {
  cursor: pointer;
  box-shadow: -3px -3px 6px #804799;
  border: 1px solid #804799;
}

.match-question-row span.correct,
.match-question-row span.sa-prompt-right-answer,
.match-question-row span.sa-answer-right-answer {
  box-shadow: -3px -3px 6px #006400;
  border: 1px solid #006400;
  cursor: default;
}

.match-question-row span.wrong {
  box-shadow: -3px -3px 6px #e60026;
  border: 1px solid #e60026;
}

/* COURSE PROGRESS */
.progress-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  -moz-column-gap: 15px;
       column-gap: 15px;
}

.course-listing.user-progress {
  padding: 25px;
  width: calc(33.3333333333vw - 10px);
  height: 110px;
}

.course-listing.user-progress .task-count {
  display: block;
  margin: 0px;
  color: #565656;
  font-size: 16px;
}

.course-listing.user-progress .course-illustration {
  width: 25%;
}

.course-listing.user-progress .course-info {
  width: 70%;
}

.course-listing.user-progress h4 {
  margin: 0px;
}

.course-listing.user-progress img {
  max-height: 100px;
  max-width: 100px;
}

.progress {
  padding: 2px;
  max-width: 600px;
  border: 2px solid #4169E1;
  height: 15px;
  margin: 8px 0 0 0;
}

.progress .progress__bar {
  height: 100%;
  width: 0%;
  background-color: #4169E1;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/*****************************
*       Markdown styles      *
******************************/
em.underline {
  font-style: normal;
  text-decoration: underline;
}

strong.underline {
  font-weight: bold;
  text-decoration: underline;
}

strong.italic {
  font-weight: bold;
  font-style: italic;
}

em.strike-through {
  font-style: normal;
  text-decoration: line-through;
}

em.underline.italic {
  font-style: italic;
  text-decoration: underline;
}

em.strike-through.italic {
  font-style: italic;
  text-decoration: line-through;
}

/***********************
*     edit course      *
***********************/
form.full-page-form {
  background-color: white;
  padding: 40px;
  box-shadow: 4px 4px 8px #999;
}

/************************
*       LANGUAGES       *
************************/
#word-sense-list {
  margin: 10px 0px;
}

/* Style the form - display items horizontally */
.form-inline {
  flex-flow: row wrap;
  display: flex;
  align-items: flex-end;
}

.label-container {
  display: inline-block;
}

/* Add some margins for each label */
.form-inline label {
  display: block;
  margin: 5px 10px 0px 0;
}

/* Style the input fields */
.form-inline input[type=text],
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 0px 0;
  padding: 5px;
  background-color: white;
  border: 1px solid #ddd;
  width: 160px;
}

/* Style the submit button */
.form-inline button {
  padding: 10px 20px;
  background-color: #4169E1;
  color: white;
  margin: 0px 2px;
}

.form-inline button:hover {
  background-color: #4169E1;
}

.delete-sense {
  cursor: pointer;
}

/* keyboard */
.char-palette {
  position: absolute;
  background: white;
  top: 45px;
  z-index: 20;
}

.char-num {
  display: block;
  font-size: 10px;
  color: #888;
}

.char-char {
  position: relative;
  top: -2px;
}

.char-button {
  display: inline-block;
  text-align: center;
  height: 34px;
  width: 30px;
  border: 1px solid #4169E1;
  color: #4169E1;
  margin: 2px;
  cursor: pointer;
  line-height: 1.1;
}

.char-button:hover {
  background-color: #4169E1;
  color: white;
}

/* LOGIKA MARKDOWN EXTENSION STYLE */
.logika-div {
  margin: 25px auto;
  padding-right: 35px;
}

.logika-div.half-page {
  display: inline-block;
  margin: 30px 10px;
}

.logika-div h4 {
  text-align: center;
  margin: 10px auto;
  font-size: 22px;
}

.logika-caption {
  font-size: 16px;
  text-align: center;
  margin: 5px auto;
}

/* Tab style starts here */
.tabbed-set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  border-radius: 0.1rem;
}

.tabbed-set > input {
  display: none;
}

.tabbed-set label {
  width: auto;
  padding: 10px 15px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  border-bottom: 0.15rem solid transparent;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  cursor: pointer;
  transition: background-color 250ms, color 250ms;
  color: #555;
}

.tabbed-set .tabbed-content {
  width: 100%;
  display: none;
  padding: 20px;
  border: 1px solid #804799;
}

.tabbed-set .tabbed-content pre {
  border-left: none;
  font-size: 16px;
  padding: 10px;
  overflow: scroll;
}

.tabbed-set input {
  position: absolute;
  opacity: 0;
}

.tabbed-set input:checked:nth-child(n+1) + label {
  color: #804799;
  border-color: #804799;
}

.define-wordform {
  color: #804799;
}

@media screen {
  .tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
    order: 99;
    display: block;
  }
}
@media print {
  .tabbed-content {
    display: contents;
  }
}
.logika-phonology {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px;
  vertical-align: middle;
  font-family: monospace;
  font-size: 16px;
}

.feature-matrix {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-size: 6px 1px;
  background-position: top left, top right, bottom left, bottom right;
  border: solid #000;
  border-width: 0 1px;
  display: inline-block;
  padding: 2px 6px;
}

.parenthesis {
  position: relative;
  padding: 0px 15px;
  box-sizing: border-box;
}

.parenthesis::before,
.parenthesis::after {
  position: absolute;
  top: 5%;
  content: "";
  width: 30%;
  height: 90%;
  border-radius: 50%/100%;
  box-sizing: border-box;
}

.parenthesis::before {
  left: 0;
  border-left: 2px solid #555;
}

.parenthesis::after {
  right: 0;
  border-right: 2px solid #555;
}

.feature-matrix span {
  display: block;
  margin: 0px 4px;
  white-space: nowrap;
}

.phonological-rule-arrow {
  font-size: 30px;
  position: relative;
  top: -3px;
}

.phonological-rule-slash {
  font-size: 25px;
}

.phonological-rule-underscore {
  width: 40px;
  border-bottom: 2px solid black;
  height: 20px;
}

#settings {
  display: flex;
  font-family: Helvetica, sans-serif;
  padding: 20px 40px;
}

.special-char-table {
  display: flex;
  flex-wrap: wrap;
}

.special-char-table .insert-code:hover {
  color: #4169E1;
  cursor: pointer;
}

.special-char-table div {
  margin: 5px;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.insert-symbol:hover {
  cursor: pointer;
  color: #4169E1;
}

.search-list {
  position: absolute;
  list-style-type: none;
  padding: 0;
  margin: 0;
  z-index: 1;
}

.search-list li {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block;
  cursor: pointer;
  min-width: 150px;
}

.search-list li:hover {
  background-color: #ddd; /* Add a hover effect to all links, except for headers */
}

.search-list.phrase-input div {
  display: block;
  font-size: 14px;
  line-height: 1;
  color: grey;
}

.grip-element {
  background: #655685;
  color: white;
  padding: 6px 2px;
  margin-bottom: 9px;
  cursor: grab;
}

.no-grip-element {
  width: 100%;
  display: flex;
}

.delete-button {
  background: transparent;
  position: relative;
  top: -3px;
  margin: 0px;
  padding: 0 0 0 10px;
}

.logika-gloss-block {
  display: flex;
}

.logika-gloss-block div {
  margin-right: 10px;
}

.logika-gloss-block span {
  display: block;
}

.logika-gloss-original {
  font-style: italic;
}

.logika-gloss-gloss {
  font-size: 18px;
}

.paradigm .level-1 {
  display: inline-block;
  margin-bottom: 20px;
}

.paradigm h4 {
  margin: 15px 0 0 0;
}

.paradigm h5 {
  margin: 10px 0 0 0;
}

.paradigm-group {
  display: inline-block;
  margin-right: 15px;
}

.paradigm-group .col {
  display: inline-block;
}

.paradigm-group .col label {
  display: block;
  margin: 13px 0px;
}

.paradigm-group .col label.col-label {
  display: block;
  margin: 5px 5px 0px 5px;
}/*# sourceMappingURL=style.css.map */