@charset "UTF-8";

/* Courseware.css by Dara */

/* === GENERAL === */

body{
  background: #dedede;
  font-size:13px;
  }

main{
  display:block;
  text-align:center;
  position:relative;
  height:100vh;
  overflow:auto;
  max-height:calc(100vh - 68px);}

article{
  padding:3.5rem 1rem 6rem 1rem;
  display:table-cell;
  vertical-align:middle;
  max-width:100vw;
  width:100%;}

article.performance-page{
  padding:5.5rem 0 6rem 0;}

article.sign::before{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:black;
  color:white;
  font-weight:bold;
  line-height:3rem;
  font-size:115%;
  /*content:"Perceptual Adaptive Courseware";*/}

/* === Score Reporter === */

.scorereporter{
  padding:0 2rem;
}

.scorereporter h1{
  text-align:left;
}

.scorereporter .class-object .callout{
  border:none;
  box-shadow:0 1px 4px rgba(0,0,0,.2);}

.scorereporter .class-object *{
  text-align:left;}

.scorereporter .class-object *{
  font-size:100%;
  text-align:left;}

/* === Administration === */

.admin-page{
  display:block;
  text-align:left;
  vertical-align:top;
  padding:2.5rem 0 0 0;}

.admin-page section{
  background:white;
  max-width:1200px;
  background:none;
  /* padding:0 1rem; */
  /* border:1px solid red!important; */
  margin:0 auto 0 auto;
  overflow:hidden;
  }

.admin-page section.table-wrapper{
  padding:0 .5rem;}

.admin-table{
  max-width:none;
  font-size:13px;
  border: 1px solid #dddddd;
  margin:0 0 1rem 0;}

.admin-table thead tr th:nth-child(1){width:2rem;}
.admin-table thead {background: white;border:none;border-bottom: 1px solid #eee;}
.admin-table thead tr{}
.admin-table thead tr th{/* font-weight:normal; */}
.admin-table thead tr th:last-of-type{width:15rem;}
.admin-table tbody {border:none;/* border-bottom:1px solid #eee */}
.admin-table tbody tr{}
.admin-table tbody tr.empty td{padding:.5rem;}
.admin-table tbody tr.empty td::before{display:block;content:"There are no students enrolled in this class.";text-align:left;}
.admin-table tbody tr:nth-child(even){background:none;}
.admin-table tbody tr:nth-child(odd){background:none;}
.admin-table tbody tr td{border-bottom:1px solid #eee;}
.admin-table tbody tr td:last-child{/* text-align:right; */}
.admin-table tfoot {background: white;border:none;border-top: 1px solid #dddddd;}
.admin-table tfoot tr{}
.admin-table tfoot tr td{/* font-weight:normal; */}

.classes-table {background:none;border:none;font-size:12px;}
.classes-table thead{background:none;border:none;border-bottom:1px solid #eee;display:none;}
.classes-table thead tr{}
.classes-table thead tr th{padding:0.5rem;font-weight:normal;}
.classes-table thead tr th:last-of-type{width:9rem;}
.classes-table tbody {background:none;border:none}
.classes-table tbody tr{cursor:pointer;}
.classes-table tbody tr:nth-child(even){background:none;}
.classes-table tbody tr:nth-child(odd){background:none;}
.classes-table tbody tr.empty{background:none!important}
.classes-table tbody tr.empty td::before{display:block;content:"There are no classes to show.";text-align:left;}
.classes-table tbody tr:hover td{background: #eee;}
.classes-table tbody tr.selected td{font-weight:bold;background:#fff;/* padding-left:.5rem; *//* border-radius:2px; */}
.classes-table tbody tr td{font-size:1rem;padding:0.5rem;background:transparent;border:none;display:block;/* margin:.5rem 0 0 0; */;cursor:pointer;}
.classes-table tbody tr td:hover{background:whitesmoke;}
.classes-table tbody tr td:last-child{text-align:right;padding:.5rem 0;}
.classes-table tfoot {display:none;border:none;}
.classes-table tfoot tr{}
.classes-table tfoot tr td{padding:0.5rem;/* font-weight:normal; */color:#000;/* border-top:1px solid #ccc; */}

.performance-page table {font-size:inherit;border:1px solid #ccc;}
.performance-page table thead tr th:nth-child(1){width:2rem;}
.performance-page table thead {background: white;border:none;border-bottom: 1px solid #eee;}
.performance-page table thead tr{}
.performance-page table thead tr td{font-size:12px;width}
.performance-page table thead tr td:last-of-type{}
.performance-page table tbody {border:none;/* border-bottom:1px solid #eee */}
.performance-page table tbody tr:last-child td{border-bottom:1px solid #ccc;}
.performance-page table tbody tr.empty td{padding:.5rem;}
.performance-page table tbody tr.empty td::before{display:block;content:"You haven't taken any assessments for this section.";text-align:left;}
.performance-page table tbody tr:nth-child(even){background:none;}
.performance-page table tbody tr:nth-child(odd){background:none;}
.performance-page table tbody tr td{border-bottom:1px solid #ddd;padding:0.5rem 2rem .5rem 1rem;text-align:left;}
.performance-page table tbody tr td:last-child{/* text-align:right; */}
.performance-page table tfoot {background: white;border:none;border-top: 1px solid #dddddd;}
.performance-page table tfoot tr td{}

.class-students-table thead th:nth-child(1),
.class-students-table tbody td:nth-child(1){
  width:33%;}

.class-students-table thead th:nth-child(2),
.class-students-table tbody td:nth-child(2){
  width:33%;}

tr.empty td{
  font-size:small;
  color: #0099ff;
}

.admin-page section table .button{
  margin:0 0 0 .25rem;
  font-size:small;
  padding:0.5rem .75rem 0.5rem .5rem;}

.admin-page .tabs-content,
.admin-page .tabs-content{
  border:none;}

.users .tabs-content,
.admins .tabs-content{
  padding:1rem .5rem 0 .5rem;}

.admin-page .tabs-container{
  background:white;
  max-width:none;
  border-bottom:1px solid #ddd}

.admin-page .tabs-container .tabs{
  border:none;
  max-width:1200px;
  padding:0 0 0 1rem;
  margin:auto;
  background:none;
  /* background: #333; */
  /* padding:0 .5rem; */
  }

.admin-page section .tabs li{
  position:relative;
  margin:0 1rem 0 0 }

.admin-page section .tabs li a{
  padding:.75rem 0;
  font-weight:bold;
  font-size:inherit;}

.admin-page section .tabs li a:hover{
  background:none}

.admin-page section .tabs .is-active::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background:#2199e8;}

.admin-page .options{
  text-align:left;
  position:relative;}

/* 
.admin-page tbody tr.empty td::before,
.admin-page.users table tbody:empty::before,
.admin-page.admins table tbody:empty::before{
  display:block;
  position:absolute;
  background:red;
  width:0;
  white-space:nowrap;
  color:#000;}

.admin-page.admins table tbody:empty::before{
  padding:.5rem 0 .5rem 0.5rem;
  content:"There are no admins to show.";}

.admin-page.users table tbody:empty::before{
  padding:.5rem 0 .5rem 0.5rem;
  content:"There are no students to show.";}
 */

.admin-page table th{
  color:black;}

.admin-page .button{
  font-size:smaller;
  padding:0.6rem 1rem 0.7rem .5rem;
  margin:0 .5rem 0.5rem 0;}

.admin-page.classes .options .button{/*   font-size:12px; *//* margin:0 .5rem .5rem 0; *//* font-weight:bold; *//* padding:0.75rem 1rem; */}

.admin-page .classes-table .button{
  margin:0 0.5rem .5rem 0}

.admin-page .options .button .fa,
.admin-page .options .button span{
  vertical-align:middle;
  display:inline-block;
  overflow:hidden;
  vertical-align:top;}

.admin-page .options .button .fa{
  margin-right:.25rem;
}

.admin-page .options input{
  height:32px;
  width:10rem;
  box-shadow:none;
  border-radius:2px;
  border:1px solid #ddd;
  margin:0;
  font-size:small;
  position:absolute;
  right:0;
  top:0;
  margin:auto;
  height:calc(100% - .5rem);}

.admin-page .left-column .options input{
  display:none;}

.class-tags{
  margin:6px 0 0 0;
  list-style:none}

.class-tags li{
  border:2px solid #ddd;
  padding:.14rem .5rem .14rem .5rem;
  margin:0 4px 4px 0;
  display:inline-block;
  font-size:small;
  /* border-radius:2px; */}

.classes .tabs-content .left-column{
  height:calc(100vh - 145px);
  overflow:auto;
  display:inline-block;
  padding:1rem 1rem 0 1rem;
  border-right:1px solid #ccc;
  /* background:#eee; */
  /* border-right:1px solid #ccc; */
  /* box-shadow:1px 0 0 0 white; */
  width:275px;
  max-width:40%;}

.classes .tabs-content .right-column{
  height:calc(100vh - 145px);
  display:inline-block;
  /* overflow:auto; */
  padding:1rem 0 0 1rem;
  vertical-align:top;
  width:calc(100% - 275px);}

.classes .tabs-content .right-column *{
  animation:.25s fadeIn;}

.classes .tabs-content .right-column .table-wrapper{
  max-height:calc(100vh - 16.5rem);
  overflow:auto;}

.classes .tabs-content .right-column .table-wrapper table{
  margin:0;}

.classes .tabs-content h1{
  display:none;
  color: black;
  margin:0 0 .75rem 0;
  line-height:normal;
  font-size:150%;}

.classes .tabs-content .right-column h1{}

.classes .tabs-content .right-column p{
  padding:3rem;
  font-size:1rem;
  text-align:center;}

.classes .tabs-content .right-column p::before{
  /* line-height:10rem; */
  /* height:10rem; */
  color:#000;
  content:"Select a class from the left side menu.";
  }

.modal form .left-column{
  display:inline-block;
  margin-bottom:1rem;
  vertical-align:top;
  width:50%;
  margin-right:1rem;
  background:white;}

.modal form .right-column{
  width:45%;
  float:right;
  display:inline-block;
  margin-bottom:1rem;
  vertical-align:top;
  background:white;}

.modal form .checkbox-set{
  overflow:auto;
  border:1px solid #ccc;
  margin:0 auto .5rem auto;
  height:303px;
  list-style:none;}

.modal form input[type="text"]{
  margin:0;
  height:33px;
  margin:0 0 .5rem 0;
  font-size:.875rem;
  box-shadow:none;}

.modal form .checkbox-set .checkbox{
  position:absolute;
  top:8px;
  right:8px;}

.modal form.edit-user .checkbox-set{
  max-height:231px;}

.modal form .checkbox-set li{
  position:relative;
  display:block;
  max-width
  padding:0 .5rem;
  border-bottom:1px dotted #ddd;}

.modal form .checkbox-set li label{
  white-space:nowrap;
  margin:0;
  cursor:pointer;
  line-height:31px;
  padding:0 2.25rem 0 .5rem ;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;}

.modal form .checkbox-set li label:hover{
  background:#eee;
}

.modal form .checkbox-set li input{
  position:absolute;
  top:7px;
  right:1rem;}

.admin-page.students table thead tr td:last-child,
.admin-page table.classes-table thead tr th:last-child,
.admin-page table.classes-table thead tr td:last-child{
  text-align:right}

.edit-user td:last-child{
  visibility:visible}

.admin-page table tr .prompt{
  background:#eee;
  border-radius:2px;
  color:black;
  text-align:left;
  padding:.5rem}

.edit-user td:last-child .button{
  visibility:visible;}

.admin-page table tbody tr:hover{
  /* background:whitesmoke; */}

.admin-page table:not(.classes) tbody tr td:last-child > *{
  visibility:hidden;}

.admin-page table:not(.classes) tbody tr:hover td:last-child > *{
  visibility:visible}


/* === Classes === */

.classes-table thead{
  /* display:none */}

.classes-table th:nth-child(2),
.classes-table td:nth-child(2){
  display:none;
  text-align:right}


/* === Tooltips === */

.tool-tip{
  margin:0 3px;
  cursor:pointer;
  overflow:visible;
  position:relative;}

.tool-tip small{
  display:none;}

.tool-tip:hover small{
  display:block;}

.tool-tip small{
  position:absolute;
  padding:.25rem .5rem;
  border-radius:2px;
  top:2rem;
  left:-.4rem;
  z-index:10;
  color:white;
  width:175px;
  background:#444;}

.tool-tip small::after{
  position:absolute;
  left:6px;
  top:-5px;
  content:"";
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #444}
 
.tool-tip.tags small::before{
  content:"To track students..."}

/* === Checkbox === */

.checkbox{
  cursor:pointer;
  position:relative;
  width:1rem!important;
  height:1rem!important;
  display:block;
  background:white;
  border:2px solid #ccc;}

.checkbox.checked{
  /* border:2px solid black; */
  }

.checkbox.checked::before{
  position:absolute;
  top:-1px;
  left:-1px;
  width:1rem;
  height:1rem;
  line-height:1rem;
  font-size:.75rem;
  text-align:center;
  display:block;
  font-family:fontawesome;
  content:"\f00c"}

th .checkbox.checked::before{
  display:none}

th .checkbox::before{
  position:absolute;
  top:-2px;
  left:-1px;
  width:1rem;
  height:1rem;
  line-height:1rem;
  font-size:.75rem;
  text-align:center;
  display:block;
  font-family:fontawesome;
  content:"\f00c"}

/* === Account Settings === */

.account{
  text-align:left;}

.account h2{
  width:calc(100% - 1rem);
  max-width:640px;
  margin:auto;}

.account section{
  border:1px solid #ddd;
  width:calc(100% - 1rem);
  background:white;
  max-width:640px;
  text-align:right;
  line-height:normal;
  padding:0 0 1rem 0;
  margin:auto;}

.account section form{
  max-width:none;
  position:relative;
  margin:0;
  width:100%;
  animation:.5s fadeIn linear forwards;
  display:block;
  max-width:100%;}

.account section form .error{
  background:orange;
  display:block;
  margin:0 0 1rem 0;
  font-size:smaller;
  padding:.5rem .75rem;
  border-radius:2px;}

.account section .field-title{
  float:left;
  white-space:nowrap;
  width:30%;
  padding:1rem;
  vertical-align:top;
  display:inline-block;}

.account section .field-content{
  position:relative;
  padding:1rem;
  text-align:left;
  vertical-align:top;
  width:70%;
  transition:.14s all;
  padding-bottom:0;
  /* height:56px; */
  display:inline-block;
  }

.account section .field-content.edit{
  /* height:280px; */
  }

.account section .field-content .edit-button{
  position:absolute;
  top:0.5rem;
  right:1rem;}

.account hr{
  padding:0;
  margin:0;
  border-color:#eee;}

.account h2{
  margin:0 auto .5rem auto;
  color:black;}

.account section ul{
  margin:0;
  width:100%;
  max-width:none;
  list-style:none}

.account section ul li{
  border-bottom:1px solid #ccc;
  padding-bottom:1rem;
  margin-bottom:1rem;
}

.account ul.edit label{
  font-size:100%;
  font-weight:bold;}

.account .profile h3{
  width:50%;
  display:block;
  font-size:100%;
  margin:0;
  line-height:normal;
  text-align:left;}

.account .profile p{
  width:50%;
  margin:0;
  display:block;
  font-size:100%;
  line-height:normal;
  text-align:left;}

.account .profile p:empty:before{
  color:#ccc;
  content:"_"}

.account .button{
  margin-right:5px;
  padding:.5rem 1.25rem;
  font-size:smaller;
}

/* === Module Start Page === */

.palms-start + nav{
  /* display:none; */
  }

.palms-start ul{
  max-width:640px;
  margin:auto;
  padding:1rem 0 0 0;
  display:flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;}

.palms-start ul li{
  display:block;
  background:white;
  position:relative;
  box-shadow:2px 2px 2px 0px rgba(0, 0, 0, .09);
  padding:1rem 2rem;
  margin:0 0 1rem 0;
  width:calc(50% - 1rem);
  width:100%;}

.palms-start ul li:nth-child(2){
  -webkit-order: 1; /* Safari */
  order:         1;}

.palms-start ul li:nth-child(1){
  -webkit-order: 2; /* Safari */
  order:         2;}

.palms-start .progress-wrapper{
  margin:5.5rem 0 3rem 0;}

.palms-start ul li h1,
.palms-start ul li p{
  text-align:left;}

.palms-start .button{
  min-width:7rem}

/* === Performance Page === */

.summary-data{
  max-width:640px;
  margin:0 auto .5rem auto;}

.summary-data h2{
  font-size:150%;
  padding:.5rem 1rem 0 1rem;
  text-align:left;}

.summary-data ul{
  max-width:640px;
  border:none;
  padding:0;
  margin:0 auto 1.75rem auto;
  border-bottom:1px solid #ddd;
  text-align:left;}

.summary-data ul li{
  border-top:1px solid #ddd;
  padding:0.5rem 2rem .5rem 1rem;
  position:relative;}

/* .summary-data ul li::before{
  position:absolute;
  display:block;
  top:50%;
  height:0;
  border-bottom:1px dotted #eee;
  width:100%;
  content:""} */

.summary-data ul span{
  position:relative;
  vertical-align:middle;
  display:inline-block;
  background:white;}

.summary-data ul i{
  font-weight:bold;
  padding:0 0 0 1rem;
  background:white;
  font-style:normal;
  position:absolute;
  right:1rem;
  display:inline-block;}


.summary-data .button i{
  margin-right:.25rem;}

.erase-data{
  max-width:640px;
  background:white;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  margin:0 auto .5rem auto;
  width:100%;}

/* .erase-data::after{
  position:absolute;
  display:block;
  font-size:smaller;
  padding:0.5rem .9rem;
  text-align:left;
  color:#666;
  content:"Erase your peformance data if you would like to start over. Erased data can't be recovered."}
 */

/* .erase-data *{
  animation:.25s fadeIn;} */

.erase-data .button{
  font-weight:normal;
  border:none;
  font-size:inherit;
  padding:0.75rem 2rem .75rem 1rem;
  text-align:left;
  width:100%;
  background:none;
  color: #0099ff;
  display:inline-block;
  vertical-align:middle;
  margin:0;
  }

.erase-data .button .fa{
  display:none;}

.erase-data p{
  font-size:small;
  padding:.75rem 1rem 0 .5rem;
  color: #1583cc;
  margin:0;}

.erase-data p + .button + .button,
.erase-data p + .button{
  width:auto;
  padding:.6rem 1rem;
  margin:.5rem .25rem 1rem .25rem;
  font-size:small;
  text-align:center;
  background: #1583cc;
  color: #ffffff;}

.erase-data p + .button:hover{
  background: #166fab;}

.erase-data p + .button + .button{
  background:#eee;
  color:black;}

.erase-data p + .button + .button:hover{
  background:#ddd;}

/* === Instructions === */

.instructions p:nth-child(1)::before{
  content:"Instructions";
  font-weight:bold;
  display:block;
  font-size:200%;}

/* === finale === */

.finale{}

.finale h1::before{
  font-size:50%;
  display:block;
  content:"You mastered:"}

.finale p,
.finale h2,
.finale h1{
  animation: 1s flash linear;
  animation-delay:.25s}

.finale h1::after{
  font-size:50%;
  display:block;
  content:"Congratulations!"}

.finale h1{
  margin:0 auto 1rem auto;}

.finale p{
  display:none}

.finale button::before{
  content:"Done"}

/* === Problem Browsers Test == */

.problems-menu{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
  display:none;
  text-align:left;
  padding:0;
  margin:0;
  position:absolute;
  overflow:auto;
  height:calc(100vh - 1.75rem);
  top:3rem;
  z-index:1;
  left:0;
  background: rgba(34, 34, 34, 0.9);
  width:275px;}

.problems-menu.show{
  display:block;}

.problems-menu ul{
  padding:0;
  display:block;
  border-bottom:1px solid black;
  margin:0;
  font-size:smaller;
  list-style:none;}

.problems-menu ul li{
  padding:0 .5rem;
  transition:.14s all;
  list-style:none;}

.problems-menu ul li.selected{
  background: #2199E8!important;}

.problems-menu ul li:hover{
  background: #3A3A3A;}

.problems-menu ul li a{
  font-size:11px;
  display:block;
  color:white;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;}

a:focus,
a:hover,
a{
  color:black;}

.button{
  position:relative;
  font-size:inherit;
  border-radius:2px;
  /* line-height:normal; */
  /* outline:none; */
  /* padding:.5rem .75rem; */
  transition:all 0s;}

.button:disabled:hover,
.button:disabled{
  background:#2199e8;}

article .quit::before{
  content:"Done"}
  
  position:relative;
  font-size:inherit;
  border-radius:2px;}

.button.secondary {
  background-color: #9a9a9a;
  color: #fefefe}

.button.secondary:hover, .button.secondary:focus {
  background-color: #808080;
  color: #fefefe;}

.button.correct,
.button.incorrect,
.button.answer,
.button.disabled, .button[disabled]
.button.disabled, .button[disabled]{
  opacity:.5;
  cursor: default}


.button.disabled:hover,
.button.disabled:hover,
.button.disabled, 
.button.disabled{
  background:#2199e8!important;
  color: white;
  opacity: .75;}

.button.disabled:hover,
.button.disabled:hover,
.button.disabled, 
.button.disabled{
  background:#2199e8!important;
  color: white;
  opacity: 1}
  
p{
  margin:0 auto 1.5rem auto;
  font-size:inherit;}

p em{
  font-style:normal;
  font-weight:bold;}

em{
  font-weight:bold;
} 

.repeated{
  color:#ccc;}

h1, h2, h3, h4, h5, h6{
  /* max-width:660px; */
  margin:auto;
  font-weight:bold;
}

/* === error page === */

.error .button.quit::before{
  content:"Back to Dashboard"}

/* === Icons === */

nav .quit button::before,
nav .back button::before,
.navigation-item.user a::before,
.navigation-item.back a::before,
.navigation-item.options a::before{
  padding:0 0.5rem 0 0;
  font-weight:normal;
  display:inline-block;
  font-family:fontawesome;
  vertical-align:middle}

nav .continue button::after{
  padding:0 0 0 0.5rem;
  font-weight:normal;
  font-size:small;
  display:inline-block;
  font-family:fontawesome;
  vertical-align:middle}

/* === Timeline === */

.timeline{
  padding:2rem 0 1rem 0;
  margin:0 auto 1rem auto;}

.timeline li{
  padding:1rem 0;}

.timeline li div h3{
  line-height:normal;
  margin:0;}

.timeline li div p{
  margin:0;}

/* dots */
.timeline li::before{
  content:"";
  display:block;
  background:white;
  z-index:10;
  width:30px;
  height:30px;
  box-shadow:inset 0 0 0 5px black;
  margin:0 auto 1rem auto;
  border-radius:50%;}

.timeline .passed::before,
.timeline .you-are-here::before{
  background:black;}

.timeline .you-are-here{
  color: #2199E8;
}

/* dots puls animation */
.timeline .you-are-here:after{
  position:absolute;
  z-index:0;
  top:16px;
  left:0;
  right:0;
  margin:auto;
  content:"";
  width:30px;
  height:30px;
  display:block;
  background:white;
  margin:0 auto 1rem auto;
  border-radius:50%;
  background:#2199e8;
  animation: 2s linear dot-pulse infinite;}
  @keyframes dot-pulse{
    0%  {transform:scale(0);}
    25% {transform:scale(0);opacity:1;}
    50% {transform:scale(1);opacity:.75;}
    75%{transform:scale(2.25);opacity:0;}
    100%{transform:scale(2.25);opacity:0;}    }

/* lines */
.timeline .owl-item::after{
  position:absolute;
  z-index:-1;
  left:0;
  top:27px;
  content:"";
  width:100%;
  height:5px;
  display:block;
  background:black;
  margin:0 auto 1rem auto;}

.timeline .passed{}

li{
  color:black;}

.timeline .owl-item:first-child::after{
  left:50%;}

.timeline .owl-item:last-child::after{
  left:-50%;}

.timeline-card{
  padding:2rem;}

.navigation{
  background: rgba(10, 10, 10, 1);
  color:white;
  position:fixed;
  z-index:1;
  height:3.5rem;
  top:0;
  width:100%;}

.navigation ul{
  float:left;
  width:100%;
  margin:0;}

.navigation-item{
  overflow:hidden;}

.navigation-item span,
.navigation-item a{
  background:#2199e8;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:bold;
  color:white;
  display:inline-block;
  vertical-align:top;
  padding:0 .75rem;
  line-height:3.4rem;}

.app .navigation-item.current-section-title{
  overflow:hidden;
  position:absolute;
  left:0;
  margin:auto;
  font-weight:bold;}

.navigation-item.current-section-title{
  position:absolute;
  left:0;}

.navigation-item.user a{
  margin:.5rem .5rem 0 0;
  position:absolute;
  border-radius:3px;
  line-height:2.5rem!important;
  height:2.5rem;
  font-weight:bold;
  font-size:small;
  right:0;}

.navigation-item.user a::before{ 
  content:"\f011";}

.navigation-item.options{
  text-align:right;
  position:absolute;
  right:0;}

.navigation-item.options a::before{
  content:"\f013";}

.navigation-item.back{
  position:absolute;
  left:0;}

.navigation-item.back a::before{
  content:"\f104";}

.navigation-item .title-short{
  font-weight:bold}

.navigation-item .title-long{
  display:none}

/* === App & Trial Navigation === */

.contain-to-grid,
nav{
  position:fixed;
  height:3.5rem;
  left:0;
  bottom:0;
  width:100%;}

nav ul{
  height:100%;
  margin:0;}

nav ul li{
  background:black;
  width:15rem;
  overflow:hidden;
  height:100%;
  max-width:20%;
  vertical-align:middle;
  display:inline-block;}

.app-nav ul li{
  max-width:25%}

nav ul li button{
  line-height:100%;
  color:white;
  width:100%;
  height:100%;
  color:white;
  display:block;}

nav ul li button:hover{
  background:#333;}

nav ul li:hover button{
  color:white;}

nav ul li button .fa{
  display:block;
  font-size:large;
  margin:0 0 2px 0;
  width:100%;}

nav ul li button small{
  text-transform: capitalize;
  font-weight:bold;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  max-width:calc(100% - 1rem);
  margin:auto;
  text-overflow:ellipsis;}

nav ul li.active button,
nav ul li.active button:hover{
  background: #0099ff;}

.lessons-viewer-page + nav{
  visibility:hidden;}

/* === Palm Header === */

main{
  width:100%;
  display:table;}

header{
  position:fixed;}

article.palms-start{
  padding-bottom:0;}

header span{
  font-weight:bold;
  position:absolute;
  left:0;
  font-size:.75rem;
  height:3.5rem;
  line-height:3.5rem;
  color:white;
  padding:0 .75rem;}

.test-problems header span{
  font-weight:bold;
  position:initial;
  left:0;
  font-size:.75rem;
  height:3.5rem;
  line-height:3.5rem;
  color:white;
  padding:0 .75rem;}

.test-problems header{
  height:3rem;}

.test-problems header .button{
  float:none;
  vertical-align:top;
  display:inline-block;
  position:initial;}

header ul{
  margin:0;}

header .button{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto;
  padding:0;
  font-weight:normal;
  height:2.5rem;
  width:2.5rem;
  line-height:2.5rem;
  border-radius:0;}

header .test-problems .button{
  float:right;}

header .button.quit{
  position:absolute;
  right:0;}
 
header .button.next::before{
  font-family:fontawesome;
  content:"\f054"}

header .button.previous{}

header .button.previous::before{
  font-family:fontawesome;
  content:"\f053"}

header .button.toggle-problems-menu{}

header .button.toggle-problems-menu::before{
  font-family:fontawesome;
  content:"\f0c9"}

header .button.refresh{}

header .button.refresh::before{
  font-family:fontawesome;
  content:"\f021"}

header .button.quit::before{
  font-family:fontawesome;
  content:"\f00d"}

/* === Account Settings === */

/* .more{
  padding:0 0 4rem 0}

.more-options ul{
  max-width:640px;
  border-bottom:1px solid #ddd;
  margin:0 auto 0 auto}

.more-options ul li{
  border-top:1px solid #ddd;}

.more-options ul .button{
  display:block;
  width:100%;
  text-align:left;
  margin:0 auto 0 auto;
  border-radius:0;
  line-height:normal;
  color:black;
  background:white;}

.more-options ul .button::after{
  position:absolute;
  font-family:fontawesome;
  color: #1583cc;
  right:1rem;
  top:1rem;
  font-size:1.25rem;
  height:1.25rem;
  height:1.25rem;
  margin:auto;
  content:"\f105";}

.more-options ul li:last-child .button{
  color: #1583cc;}

.more-options ul li:last-child .button::after{
  display:none;}

.more-options .button:hover{
  background:whitesmoke;}
 */

/* === Courses === */

.course-list{
  border:1px solid #ccc;
  margin:auto;
  max-width:640px;
  list-style:none;}

.course-list li .button{
  padding:2rem 1.5rem;
  background: #fff;
  transition: .15s cubic-bezier(0.42, 0, 0, 1);
  color:black;
  border-radius:0;
  margin:0;
  transition:all 0;
  text-align:left;
  display:inline-block;
  vertical-align:top;
  overflow:hidden;}

.course-list li .button:hover{
  background:whitesmoke;}

.course-list li .button::after{
  position:absolute;
  bottom:0.5rem;
  right:1.5rem;
  width:2.5rem;
  color:black;
  height:2.5rem;
  text-align:center;
  font-size:2rem;
  width:100%;
  text-align:right;
  font-family:fontawesome;
  content:"\f105";}

/* .course-list li .button::before{
  display:inline-block;
  content:"Course 1";
  font-weight:bold;
  text-transform:uppercase;
  font-size:1rem;
  left:0;
  right:initial;
  color:white;
  background: rgb(0, 0, 0);}
 */

.course-list li .button img{
  width:4rem;
  background:black;
  border-radius:6px;
  display:block;
  padding:0;
  margin:0 0 0.25rem 0}

.course-list li .button h2{
  line-height:normal;}

.course-list li .button p{
  float:left;
  display:block;}

.course-list li .button p::before{
  /* color:black; */
  content:"This course consists of three sections: Marine Divisions and Organization, Basics of Operational Symbols, Weapons Symbols and Overlays. "}

/* === App: PALMs === */

article.lesson{
  padding:0;}

.palm article.lesson::before{
  position:fixed;
  top:0;
  left:0;
  right:0;
  margin:auto;
  max-width:180px;
  height:2.5rem;
  line-height:2.5rem;
  color:white;
  font-weight:bold;
  font-size:115%;
  background:black;;
  z-index:2;
  content:"New Lesson"}

.palm aside article.lesson::before{
  /* important for lesson title */
  display:none;}

.lessons-viewer-page{padding:0;}

.palms-list{
  border:1px solid #ccc;
  position:relative;
  list-style:none;
  margin:auto;
  max-width:640px;}

.palms-list button.mastered::before{
  font-family:fontawesome;
  position:absolute;
  top:0.5rem;
  right:0.5rem;
  padding:.5rem;
  border-radius:50%;
  content:"\f00c";
  background: black}

.palms-list button{
  border:none;
  border-radius:0;
  background:white;
  color:black;
  text-align:left;
  padding:1rem;
  border-bottom:1px solid rgba(0, 0, 0, .1);
  margin:0;}

.palms-list li:last-child button{
  border:none;}

.palms-list button:focus,
.palms-list button:hover{
  background:whitesmoke;
  color:inherit}

.palms-list button p{
  max-width:calc(100% - 1.6rem);
  margin:0;}

.palms-list button::before{
  display:inline-block;
  font-weight:bold;
  text-transform:uppercase;
  font-size:smaller;
  margin:0 0 .25rem 0;
  color: #0099ff;}

.palms-list li:nth-child(1) button::before{content:"SECTION 1"}
.palms-list li:nth-child(2) button::before{content:"SECTION 2"}
.palms-list li:nth-child(3) button::before{content:"SECTION 3"}
.palms-list li:nth-child(4) button::before{content:"SECTION 4"}
.palms-list li:nth-child(5) button::before{content:"SECTION 5"}

.palms-list button::after{
  position:absolute;
  right:1.25rem;
  bottom:1rem;
  text-align:right;
  font-size:2rem;
  font-family:fontawesome;
  content:"\f105";}

.palms-list h2{
  font-size:200%;
  line-height:normal;
  margin:0 auto .25rem auto;}

.palms-list .lessons{
  text-align:right;}

.palms-list .lessons li{
  display:inline-block;
  width:2rem;
  height:2rem;
  background:black;
  border-radius:2px;}

.palms-list .lessons li:nth-child(odd){
  background:black url('book-white.png') no-repeat center center;
  background-size:100% auto;} 

.palms-list .lessons li:nth-child(even){
  position:relative;}

.palms-list .lessons li:nth-child(even)::before{
  color:white;
  position:absolute;
  top:4px;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  text-align:center;
  font-size:14px;
  font-family:fontawesome;
  content:"\f245"} 

.palms-list .progress{
  position:absolute;
  bottom:-1px;
  left:0;
  height:.5rem;
  width:100%;
  margin:0;
  background:none;}

.palms-list .progress .meter{
  position:absolute;
  bottom:0;
  left:0;
  height:.5rem;
  width:100%;
  background:black;} 

/* === Page: Lessons === */

.palms-lessons-list{
  max-width:640px;
  margin:auto;}

.palms-lessons-list > li{
  margin:0 auto 1rem auto;}

.palms-lessons-list h1{
  margin:0 0 .5rem 0;
  padding:0 1rem;
  font-size:150%;
  text-align:left;}

.palms-lessons-list .lessons-list{
  border-bottom:1px solid #ddd;
  margin:0}

.palms-lessons-list .lessons-list li{
  border-right:1px solid #ddd;
  border-left:1px solid #ddd;
  border-top:1px solid #ddd;}

.palms-lessons-list .lessons-list .button{
  display:block;
  text-align:left;
  margin:0 auto 0 auto;
  border-radius:0;
  padding:0.6rem 2rem .75rem 3rem;
  line-height:normal;
  color:black;
  font-weight:normal;
  background:white;}

.palms-lessons-list .button::after{
  position:absolute;
  font-family:fontawesome;
  color: #1583cc;
  right:1rem;
  top:.7rem;
  font-size:1.25rem;
  height:1.25rem;
  height:1.25rem;
  margin:auto;
  content:"\f105";}

.palms-lessons-list .button::before{
  position:absolute;
  left:0.5rem;
  top:0.25rem;
  display:block;
  content:"";
  width:2rem;
  height:2rem;
  margin:0;
  background:url('book.png') no-repeat center center;
  background-size:2rem auto;}


.palms-lessons-list .button:hover{
  background:whitesmoke;}

/* === Trial Header === */

.session-status li{
  width:auto;
  list-style:none;
  display:inline-block;
  vertical-align:middle;
  font-size:75%;
  color:white;
  padding:0;
  margin:0;}

.counter::before{
  display:inline-block;
  margin-right:.5rem;
  content:"You have seen"}

.session-status{ 
  display:inline-block;
  vertical-align:middle;
  box-shadow:inset 0 0 0 1px red;}

.timer::before{
  content:"problesms in "}

.timer::after{
  content:" minutes";}

/* === App Header === */

header{
  position:fixed;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:48px;
  z-index:2;
  /*background: #000;*/}

header .tabs{
  box-shadow: 0 0 0 2px #0099ff;
  display:inline-block;
  border-radius:2px;
  overflow:hidden;
  margin:0 0 .5rem 0;
  background:none;
  border:none;}

header .tabs li{
  background:none;
  width:8rem;
  display:inline-block;}

header .tabs li a{
  font-weight:bold;
  display:block;
  color: #fff;
  padding:.25rem;
  font-size:smaller;}

header .tabs li.active a{
  background: #0099ff;
  color:white;}

header h1,
header h2{
  font-size:115%;
  white-space:nowrap;
  color:white;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:2.5rem;
  max-width:calc(100% - 6rem);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0;
  margin:auto}

.palm header h1::before{
  content:""}

header .button{
  margin:0;
  color:white;}

header .back{
  float:left;}

header .settings{
  float:right;}
 
 
/* === Tables === */

table{
  max-width:768px;
  margin:auto;
  text-align:left;
  }

lessontable{
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0),0 0 0px 0px rgba(0,0,0,0.05),0 1px 5px 0 rgba(0,0,0,0.25);
  overflow:hidden;
  border-radius:3px;
  font-size:75%;
  max-width:768px;
  border-collapse:separate;
  border:none!important;
  margin:0 auto .5rem auto;
  text-align:left;}

table.tiny{
  max-width:12rem;}

table tbody th,
table tbody td {
  padding: 0.3rem 0.6rem 0.3rem; }

table tbody tr td{
  padding:.25rem .5rem}

table thead tr:first-child{
  /* color:white; */
  }

table tbody th,
table tbody td {
  line-height:normal}

td.bold,
tr.bold td{
 font-weight:bold}

tr.underline td{
  text-decoration:underline}

td.left-indent,
tr.left-indent td:first-child{
  padding-left:10%}

tr.left-indent td.left-indent{
  padding-left:14%}

td.right-indent,
tr.right-indent td:last-child{
  padding-right:10%}

.note{
  font-weight:normal;
  font-style:italic;
  font-size:small;}

.note::before{
  font-weight:bold;
  content:"Note:"}

date,
currency{
  position:relative;
  display:block;
  text-align:right}

.main-options:focus,
.main-options:hover,
.main-options{
  display:block;
  padding:1rem;
  margin:0 0 1rem 0;
  background:black;
  border-radius:3px;
  color:white;}

.active .animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;}

/* === feedback highlight === */
.timed-out td.feedback-highlight,
.incorrect td.feedback-highlight,
.correct td.feedback-highlight,
.timed-out tr.feedback-highlight td,
.incorrect tr.feedback-highlight td,
.correct tr.feedback-highlight td,
/* === misc === */
em.highlight,
p.highlight,
h2.highlight,
/* === highlight-table === */
.highlight-table td,
/* === highlight-column-1 === */
.highlight-column-1 tbody td:nth-child(1),

/* === highlight-column-1-2 === */
.highlight-columns-1-2 tbody td:nth-child(2),
.highlight-columns-1-2 tbody td:nth-child(1),

/* === highlight-column-2 === */
.highlight-column-2 tbody td:nth-child(2),

/* === highlight-rows-2-7 === */
.highlight-rows-1-7 tbody tr:nth-child(2) td,
.highlight-rows-1-7 tbody tr:nth-child(3) td,
.highlight-rows-1-7 tbody tr:nth-child(4) td,
.highlight-rows-1-7 tbody tr:nth-child(5) td,
.highlight-rows-1-7 tbody tr:nth-child(6) td,
.highlight-rows-1-7 tbody tr:nth-child(7) td,

/* === highlight-rows-5 === */
.highlight-row-5 tbody tr:nth-child(5) td,

/* === highlight-row-9 === */
.highlight-row-9 tbody tr:nth-child(9) td,

/* === highlight-rows-9-16 === */
.highlight-rows-9-16 tbody tr:nth-child(9) td,
.highlight-rows-9-16 tbody tr:nth-child(10) td,
.highlight-rows-9-16 tbody tr:nth-child(11) td,
.highlight-rows-9-16 tbody tr:nth-child(12) td,
.highlight-rows-9-16 tbody tr:nth-child(13) td,
.highlight-rows-9-16 tbody tr:nth-child(14) td,
.highlight-rows-9-16 tbody tr:nth-child(15) td,
.highlight-rows-9-16 tbody tr:nth-child(16) td,

/* === highlight-rows-18-21 === */
.highlight-rows-18-21 tbody tr:nth-child(18) td,
.highlight-rows-18-21 tbody tr:nth-child(18) td,
.highlight-rows-18-21 tbody tr:nth-child(19) td,
.highlight-rows-18-21 tbody tr:nth-child(20) td,
.highlight-rows-18-21 tbody tr:nth-child(21) td,

/* === highlight-rows-3-10 === */
.highlight-rows-3-10 tbody tr:nth-child(3) td,
.highlight-rows-3-10 tbody tr:nth-child(4) td,
.highlight-rows-3-10 tbody tr:nth-child(5) td,
.highlight-rows-3-10 tbody tr:nth-child(6) td,
.highlight-rows-3-10 tbody tr:nth-child(7) td,
.highlight-rows-3-10 tbody tr:nth-child(8) td,
.highlight-rows-3-10 tbody tr:nth-child(9) td,
.highlight-rows-3-10 tbody tr:nth-child(10) td,

/* === highlight-rows-11-15 === */
.highlight-rows-11-15 tbody tr:nth-child(11) td,
.highlight-rows-11-15 tbody tr:nth-child(12) td,
.highlight-rows-11-15 tbody tr:nth-child(13) td,
.highlight-rows-11-15 tbody tr:nth-child(14) td,
.highlight-rows-11-15 tbody tr:nth-child(15) td,

/* === highlight-rows-17-18 == */
.highlight-rows-17-18 tbody tr:nth-child(17) td,
.highlight-rows-17-18 tbody tr:nth-child(18) td,

/* === highlight-row-17 === */
.highlight-row-17 tbody tr:nth-child(17) td,

/* === last-row === */
.highlight-last-row tbody tr:last-child td,
/* === highlight-rows-16-24 === */
.highlight-rows-16-24 tbody tr:nth-child(16) td,
.highlight-rows-16-24 tbody tr:nth-child(17) td,
.highlight-rows-16-24 tbody tr:nth-child(18) td,
.highlight-rows-16-24 tbody tr:nth-child(19) td,
.highlight-rows-16-24 tbody tr:nth-child(20) td,
.highlight-rows-16-24 tbody tr:nth-child(21) td,
.highlight-rows-16-24 tbody tr:nth-child(22) td,
.highlight-rows-16-24 tbody tr:nth-child(23) td,
.highlight-rows-16-24 tbody tr:nth-child(24) td{
  background: rgb(251, 255, 137);}

/* === secondary-highlight-row-2 === */
.secondary-highlight-row-2 tbody tr:nth-child(2),

/* === secondary-highlight-row-7 === */
.secondary-highlight-row-7 tbody tr:nth-child(7),

/* === highlight-row-12 === */
.secondary-highlight-row-12 tbody tr:nth-child(12) td,

/* === highlight-row-15 === */
.secondary-highlight-row-15 tbody tr:nth-child(15) td,

.secondary-highlight{
  background: #FFE4E4}

/* Simple TD highlight */

td.highlight,
tr.highlight td{
  background: rgb(253, 255, 186)}

td.border-under,
tr.border-under td{
  border-bottom:2px solid black!important;}

.highlight-first-column tr td:nth-child(2){
  background: rgba(0, 0, 0, 0.1);}

/* === Owl Fullsize === */

.button.has-icon-left{
  padding-right:2rem;}

.button.has-icon-right{
  padding-left:2rem;}

.owl-carousel.full-size{
  max-height:100vh;
  overflow:hidden;
  opacity:0;}

.owl-carousel.full-size.owl-loaded{
  opacity:1;}

.owl-carousel.full-size .owl-slides{
  max-width:70vw;
  padding:0;}

.owl-carousel.full-size .owl-item{
  display:table;
  min-height:100vh;}

.owl-carousel.full-size .owl-item .slides{
  display:table-cell;
  padding:2rem 0.25rem 3.25rem 0.25rem!important;
  vertical-align:middle;}

.owl-carousel.full-size .owl-item .slides .row{
  max-height:calc(100vh - 5rem);
  overflow:auto;}

.owl-carousel.full-size .owl-controls{
  position:fixed;
  bottom:0;
  background:#eee;
  width:100%;}

.owl-carousel.full-size .owl-next,
.owl-carousel.full-size .owl-prev{
  position:absolute;
  width:3rem;
  z-index:1;
  display:inline-block;}

.owl-carousel.full-size .owl-next{
  right:0;}

.owl-carousel.full-size .owl-prev{
  left:0;}

.owl-carousel.full-size  .owl-dots{
  line-height:3rem;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  margin:auto;
  width:100%;
  display:inline-block;
  width:100%;
  text-align:center;}

.owl-carousel.full-size  .owl-dot.active{
  background: #000000;}

.owl-carousel.full-size .owl-dot{
  display:inline-block;
  vertical-align:middle;
  border-radius:50%;
  background:#ccc;
  margin:-3px 2px 0 2px;
  width:3px;
  height:3px;}

.highlight-dots.dot-1  .owl-dot:nth-child(1),
.highlight-dots.dot-2  .owl-dot:nth-child(2),
.highlight-dots.dot-3  .owl-dot:nth-child(3),
.highlight-dots.dot-4  .owl-dot:nth-child(4),
.highlight-dots.dot-5  .owl-dot:nth-child(5),
.highlight-dots.dot-6  .owl-dot:nth-child(6),
.highlight-dots.dot-7  .owl-dot:nth-child(7),
.highlight-dots.dot-8  .owl-dot:nth-child(8),
.highlight-dots.dot-9  .owl-dot:nth-child(9),
.highlight-dots.dot-10  .owl-dot:nth-child(10),
.highlight-dots.dot-11  .owl-dot:nth-child(11),
.highlight-dots.dot-12  .owl-dot:nth-child(12),
.highlight-dots.dot-13  .owl-dot:nth-child(13),
.highlight-dots.dot-14  .owl-dot:nth-child(14),
.highlight-dots.dot-15  .owl-dot:nth-child(15),
.highlight-dots.dot-16  .owl-dot:nth-child(16),
.highlight-dots.dot-17  .owl-dot:nth-child(17),
.highlight-dots.dot-18  .owl-dot:nth-child(18),
.highlight-dots.dot-19  .owl-dot:nth-child(19),
.highlight-dots.dot-20  .owl-dot:nth-child(20){
  margin:-3px 4px 0 4px;
  width:6px;
  height:6px;}
  
.owl-carousel.full-size .owl-dots,
.owl-carousel.full-size .owl-next,
.owl-carousel.full-size .owl-prev,
.owl-carousel.full-size .owl-controls{
  height:3rem;
  text-align:center;
  line-height:3rem;}

.owl-carousel.full-size .owl-dot{
  background:black;}

/* Experiment */
.owl-dot.active,
.owl-dot.active+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot,
.owl-dot.active+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot+.owl-dot{
  background:#ccc;}

/* === Lesson (FullPage) === */

.columns.no-padding{
  padding:0;}

.columns.no-padding p{
  max-width:450px;
  margin:0 0 1rem 0;}

.blue{
  font-weight:bold;
  color:blue;}
.red{
  font-weight:bold;
  color:red;}
.yellow{
  font-weight:bold;
  color:#BDB11C}
.green{
  font-weight:bold;
  color:green}
.black{
  font-weight:bold;
  color:black}

.fullpage h2,
.fullpage figcaption,
.fullpage li,
.fullpage p{
  /* line-height:normal; */
  max-width:none;
  text-align:left;}

.fullpage li p:last-of-type{
  margin:0;}

.fullpage table{
  font-size:14px;
  max-width:none;
  margin:0 auto 1rem auto;}

.fullpage table thead{
  color:white;
  background:black;}

.fullpage table tr{
  /* background:none!important; */
  } 

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

.fullpage figcaption{
  display:block;
  text-align:center;
  margin-bottom:1.5rem;
  font-weight:bold;}

.fullpage figure{
  height:auto;
  max-width:none;
  margin:0 auto .5rem auto;
  width:100%;}

.fullpage figure img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .1);
  border-radius:2px;
  background:white;
  margin:0 auto .5rem auto;
  /* padding:1rem 1rem 2rem 1rem; */
  }

.fullpage figure img.not-square{
  max-height:initial;
  max-width:100%;}

.fullpage img{
  margin:0 auto .5rem auto;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;}

.custom-squad-1{
  max-width: 1.9rem!important;
  }

.custom-company-1{
  height: 2.5rem!important;
}

.custom-brigade-1{
  height:2rem!important;
}

.custom-section-1{
  max-width:4rem!important;}

.custom-platoon-1{
  max-width:6rem!important;}

.invert:last-child .columns::after{
  display:block;
  /* font-size:50%; */
  margin:-.75rem auto 0 auto;
  max-width:500px;
  padding:1.15rem 1rem;
  border-radius:4px;
  content:"Hit the space key to continue to interactive learning.";
  }

.lessons-viewer-page .invert:last-child .columns::after{
  display:block;
  font-size:100%;
  margin:-1rem auto 0 auto;
  content:"Hit the space key to return."}

.lesson p{
  margin:0 auto 1rem auto;
  text-align:left;}

.lesson .invert p{
  text-align:center;}

.section:last-child p::before{
  content:"Tap to"}

.invert{
  /* background: #dcdcdc; */
  text-align:center;
  text-align:center;
  }

.invert h1{
  position:relative;
  width:auto;
  display:inline-block;
  text-align:center;
  margin:0 auto 0rem auto;
  line-height:normal;
  font-size:150%;}

/* .section:last-child h1::after{
  display:block;
  position:absolute;
  top:0;
  right:0;
  left:5rem;
  width:2rem;
  height:2rem;
  line-height:2rem;
  color: #269EEC;
  margin:0 auto 1rem auto;
  border-radius:50%;
  display:block;
  font-family:fontawesome;
  font-size:60%;
  color:white;
  background: #000000;
  content:"\f00c";} */

.invert h2{
  max-width:640px;
  text-align:center;
  margin:0 auto .5rem auto;
  line-height:normal;}

.invert:first-of-type h1::before{
  background:#2199e8 url('book-white.png') no-repeat center center;
  background-size:65% auto;
  content:"";
  width:7rem;
  height:7rem;
  line-height:7rem;
  color: #269EEC;
  margin:0 auto 1rem auto;
  /* border: 2px dotted #2199e8; */
  border-radius:50%;
  display:block;
  font-family:fontawesome;
  font-size:250%;
  }

.invert:last-of-type h1::before{
  background: #2c9be5 url('book-white-complete.png') no-repeat center center;
  background-size:65% auto;
  content:"";
  width:7rem;
  height:7rem;
  line-height:7rem;
  color: #269EEC;
  margin:0 auto 1rem auto;
  /* border: 2px dotted #2199e8; */
  border-radius:50%;
  display:block;
  font-family:fontawesome;
  font-size:250%;}

.invert:first-of-type button{
  outline:none;
  max-height:100vh;
  background:none;
  box-shadow:inset 0 0 0 2px #666;
  padding:.5rem 1.25rem;
  border-radius:3px;
  position:absolute;
  bottom:0rem;
  right:.5rem;}

.invert .button .fa{
  display:inline-block;
  font-size:small;
  margin:0;
  width:2rem;
  vertical-align:middle;}

.lessons .section.invert{
  text-align:center;
  position:relative;
  background:black!important;}

.invert:first-of-type::before{
  position:absolute;
  left:0;
  right:0;
  font-weight:bold;
  top:calc(100vh - 9rem);
  margin:auto;
  font-size:smaller;
  content:"Scroll down"}

.invert:first-of-type::after{
  animation: godown 4s ease-in-out infinite;
  position:absolute;
  font-size:1.5rem;
  left:0;
  right:0;
  font-weight:bold;
  top:calc(100vh - 8rem);
  margin:auto;
  font-family:fontawesome;
  content:"\f107";}

@keyframes godown{
  0%{margin-top:0rem;}
  50%{margin-top:0rem;}
  57%{margin-top:.75rem;}
  64%{margin-top:0rem;}
  71%{margin-top:.75rem;}
  78%{margin-top:0rem;}   }

.lessons .section{
  text-align:left}

.section:nth-child(odd){
  border-bottom:1px solid #ccc;
  background: #eee;}

.section:nth-child(even){
  background: #DCDCDC}

.fullpage .tabs.fullpage{
  position: absolute;
  top:calc(100vh - 3.75rem);
  height:3rem;
  z-index: 1;
  left:0;
  right:0;
  line-height:4rem;
  margin:auto;
  width:600px;
  max-width:calc(100% - 1rem);
  border:2px solid black;
  overflow:hidden;
  border-radius:6px;}

.fullpage .tabs.fullpage .tabs-title{
  width:25%;}

.fullpage .tabs.fullpage .tabs-title a{
  line-height:3rem;
  color:black;
  padding:0;
  text-align:center;}

.tabs.fullpage .tabs-title > a:focus,
.tabs.fullpage .tabs-title > a[aria-selected='true'] {
  color:white;
  background: black; }

.fullpage #fp-nav ul li a span,
.fullpage .fp-slidesNav ul li a span {
  background: #555;}

#fp-nav ul li .fp-tooltip {
  background:black;
  overflow:visible;
  padding:.13rem .5rem;
  border-radius:2px;
  text-align:center;}

#fp-nav ul li .fp-tooltip::after{
  position:absolute;
  width:5px;
  height:5px;
  top:0;
  margin:auto;
  right:-5px;
  bottom:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:5px solid black;
  content:""}

/* === Owl Off-canvas Technique for Tables (Multi-figure) === */

.owl-carousel.table-group .owl-item table,
.owl-carousel.table-group .owl-item,
.owl-carousel.table-group .owl-stage,
.owl-carousel.table-group .owl-height {
  transition: all .2s cubic-bezier(0.42, 0, 0, 1.01)!important;}

.owl-carousel.table-group .owl-item table{
  z-index:1;
  position:relative;}

.table-group .owl-item:nth-child(1) table{
  left:.75rem;}

.table-group .owl-item:nth-child(1).active{
  padding-left:.5rem;
  padding-right:1.5rem;}

.table-group .owl-item:nth-child(1).active table{  
  left:0;}

.table-group .owl-item:nth-child(1).active + .owl-item table{
  left:-1rem!important;}

.table-group .owl-item:nth-child(1) + .owl-item table{
  left:0;}

.table-group .owl-item:nth-child(1) + .owl-item.active{
  padding-left:1.25rem;
  padding-right:1rem;}

.table-group .owl-item:nth-child(3) table,
.table-group .owl-item:nth-child(1) + .owl-item + .owl-item table{
  left:-.5rem;}

.table-group .owl-item:nth-child(1) + .owl-item + .owl-item.active{
  padding-right:.5rem;
  padding-left:1.5rem;}

.table-group .owl-item:nth-child(1) + .owl-item + .owl-item.active table{
  left:0}

.table-group .owl-item:nth-child(1) + .owl-item table{
  left:1rem;
  z-index:2;}

.table-group .owl-item:nth-child(1) + .owl-item.active table{
  left:0!important;}

.owl-carousel.table-group .owl-item{
  padding:0 .25rem}

/* === App: Dashboard == */

/* .dashboard-apps::before{
  display:block;
  font-size:225%;
  margin:0 0 2rem 0;
  font-weight:bold;
  text-align:center;
  content:"Demo Projects"} */

.dashboard-apps{
  text-align:center;
  margin:auto;
  max-width:900px;
  overflow:auto;
  padding:.5rem 0 1rem 0;}

.dashboard-apps li{
  vertical-align:top;
  text-align:center;
  display:inline-block;}

.dashboard-app-thumbnail{
  width:8rem;
  height:auto;
  margin:0 auto 0 auto;
  display:block;}

.dashboard-app-name{
  font-size:100%;
  padding:.5rem .25rem;
  overflow:hidden;
  white-space:normal;
  display:block;}

.dashboard .dashboard-apps li{
  padding:.25rem;
  margin:0 0 2rem 0;
  width:25%;}

.app-options{
  width:calc(100% - 2.5rem);
  max-width:400px;
  margin:auto;
  overflow:hidden;
  border:1px solid #ddd}

.app-option .button{
  text-align:left;
  margin:0;
  padding:.5rem 1.25rem;
  border-bottom:1px solid #ddd;
  background:white;}

.instructions p{
  max-width:760px;
  text-align:left;}

.instructions p::before{
  text-align:center}

.app-option.instructions a::before{
  content:"Instructions";}

.app-option.performance a::before{
  content:"Performance";}

.app-option.start{
  font-weight:bold}

.app-option a{
  color:black;
  display:block;
  padding:0 .75rem;
  line-height:2.75rem;}

.app-option a::after{
  font-size:140%;
  font-weight:normal;
  display:inline-block;
  font-family:fontawesome;
  vertical-align:top;
  content:"\f105";
  float:right;}

.app-option:last-child a::after{
  display:none;}

.app-option a:hover{
  color:black;
  background:rgba(0, 0, 0, .03);}

.app-option:last-of-type{
  border:none;}
  
/* === Sign === */

.sign h1{
  /* margin:0 auto 1rem auto; */
  }

.sign h2{
  margin:0 0 .5rem 0;
  color: #2199E8;
  /* font-size:150%; */
  /* font-size:large; */
  }

.sign input{
  margin:0 0 .5rem 0;}

.sign .thumbnail{
  width:5rem;
  border:none!important;
  box-shadow:none!important}

form{
  width:calc(100% - 1rem);
  max-width:350px;
  margin:auto;}

.sign form .error{
  list-style:none;
  text-align:left;
  display:block;
  margin:0 0 1rem 0;
  font-size:smaller;
  background: #ffc9c9;
  padding:.5rem;}

.sign form button{
  display:block;
  width:100%;
  font-weight:bold;
  margin:0 0 .5rem 0;
  border-radius:2px;}

.sign a{
  text-decoration:underline;}

.message.oops{
  padding:.5rem;
  border-radius:2px;
  font-size:smaller;
  background: #FFE7B4;}

.sign.up .button{
  background:#222;}

.sign.up h2{
  color:black;}

.sign .app-description{
  width:calc(100% - 1rem);
  max-width:550px;
  margin:auto;
  margin-top:2rem;
  text-align: center;
  font-size:70%;}

/* === Trials === */

.trial{
  padding:1.5rem .5rem 8rem .5rem;
  vertical-align:top;
  text-align:center;}

.trial section{
  position:relative;
  width:100%;
  margin:0 auto .75rem auto;
  display:block;
  max-width:900px;
  }

.trial .prompt figure{
  width:100%;
  height:auto;
  margin:0 auto .5rem auto;}

.trial .prompt figure img{
  display:block;
  box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.6);
  padding:.25rem;
  border-radius:0;
  margin:auto;
  background:white;
  width:auto;
  height:auto;
  max-width:100%;
  max-width:200px;
  }

.trial .prompt figcaption,
.trial .prompt p{
  font-weight:bold;
  line-height:normal;
  color:black;
  margin:0 auto .5rem auto;
  }

.trial.passive .passive-prompt::before{
  display:inline-block;
  font-weight:bold;
  /* font-size:small; */
  padding:.5rem 1rem;
  border-radius:0;
  margin:0;
  background: #222;
  border-radius:2px;
  color:white;
  width:auto;
  line-height:normal;
  content:"This is a Familiarization Trial. Click on the given answer.";
  }

.trial.passive .passive-prompt::after{
  display:block;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  content:"";
  width: 0;
  height: 0;
  border-left: .5rem solid transparent;
  border-right: .5rem solid transparent;
  border-top: .5rem solid #222222;
  }

.input-answer.trial.passive .passive-prompt::before{
  content:"This is a Familiarization Trial. Type in the given answer.";}

.trial .prompt .single-figure{
  padding:0 .5rem;
  margin:auto;}

.trial .prompt .multi-figure{
  padding:0;
  margin:0;}

.trial .prompt table{
  margin:0 auto;}

.trial .prompt .multi-figure table{
  margin-bottom:1rem;}

.trial .choices .button{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:.75rem 1rem;
  margin:0 0 .25rem 0;
  line-height:normal;
  outline:none;
  font-weight:bold;
  display:inline-block;
  vertical-align:top;}

.trial.passive .choices .button:not(.disabled){
  text-decoration:underline;
}

.trial.passive .choices .button.disabled{
  cursor:no-drop;
}

.text-prompt-input-answer .choices .button{
    margin:0!important}

.trial .choices .button.selected{
  background:gray;
  cursor:default;
  opacity:1;}

.trial .choices .button.selected::before{
  background:blue;}

.trial .choices .button span{
  display:block;}

.button.open-lesson{
  position:fixed;
  top:0;
  right:0;
  padding:0 .65rem;
  height:2.5rem;
  line-height:2.5rem;
  border-radius:0;
  z-index:2;}

.button.open-lesson::before{
  font-family:fontawesome;
  margin-right:.5rem;
  content:"\f02d"}

.button.open-lesson::after{
  content:"Lesson"}

.trial.passive .passive-hint{
  font-weight:bold;
  color: #079a48;
  }

.trial.passive .passive-hint::before{
  font-weight:normal;
  content:"Type in: "}

.trial.passive:not(.correct) .choices input.incorrect{}

.trial.passive:not(.correct) .choices input.correct{}

/* .trial.passive:not(.correct) .choices input.correct + p{
  display:none} */

.trial.passive.correct .choices .passive-hint{
  overflow:hidden;
  padding:0;
  height:1.5rem;
  line-height:1.5rem;
  border-radius:2px;
  margin:0 auto 1rem auto;
  color:black;
  position:relative;
  width:calc(50% - .5rem);}

@keyframes shrink{
  50%{max-height:4rem;margin:0 auto 1rem auto;}
  100%{max-height:0px;margin:0 auto 0 auto;}   }

.text-prompt-image-answers .choices .button{}

.text-prompt-image-answers .choices .button:hover{}

.trial .choices .button img{
  padding:.25rem;
  background:white!important;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .2);
  width:auto;
  height:auto;
  min-width:150px;
  max-width:100%;
  /* max-height:15vh; */
  }

.trial .choices input{
  background:white;
  display:block;
  border-radius:3px;
  width:calc(50% - .5rem);
  margin:0 auto .5rem auto;
  box-shadow:none;
  height:2.5rem;
  padding:0 .5rem;
  border:2px solid #ccc;}

.trial.incorrect input{
  color:crimson;}

.trial .input-answer.trial .choices{
  max-width:300px;}

.trial .input-answer.trial .choices .button{
  width:100%;
  display:block}

.trial .choices button img{
  display:inline-block;
  max-height:calc(100vh - 20rem);
  }

.trial .choices .button table,
.trial .choices .button table thead,
.trial .choices .button table tbody,
.trial .choices .button table tr,
.trial .choices .button table tr td{
  box-shadow:none;
  color:white;
  border:none;
  margin:0;
  background:none}

.trial .choices .button table tr td{
  border-bottom:1px dotted rgba(255, 255, 255, .3);}

.trial .choices .button table tr:last-child td{
  border-bottom:1px solid rgba(255, 255, 255, 0);}

.trial button.answer,
.trial button.correct{
  opacity:1;
  border-color:#49B579!important;
  background: #27a760!important;
  }

.trial button.incorrect{
  opacity:1;
  border-color:crimson!important;
  background: crimson!important;
  color: rgb(255, 255, 255);}

.trial button.incorrect::after{
  display:block;
  position:absolute;
  width:15px;
  height:15px;
  line-height:15px;
  font-size:2rem;
  top:0.5rem;
  right:0.5rem;
  margin:auto;
  color: white;
  font-family:arial;
  content:"\2717"}

.trial button.correct::after{
  display:block;
  position:absolute;
  width:15px;
  height:15px;
  line-height:15px;
  font-size:2rem;
  top:0.5rem;
  right:1rem;
  margin:auto;
  background: #27a760;
  color: white;
  border-radius:50%;
  font-family:arial;
  content:"\2713";
  }

.answer-hint::after{
  position:absolute;
  text-align:center;
  padding:0;
  width:14px;
  height:14px;
  line-height:14px;
  font-size:14px;
  top:0.14rem;
  right:0.25rem;
  margin:auto;
  color: #000;
  border-radius:50%;
  font-family:fontawesome;
  content:"\f192";}

.trial .feedback > p{
  display:block;
  width:100%;
  max-width:calc(100% - 200px);
}


.trial .feedback{
  left:0;
  right:0;
  position:absolute; }

.answered .feedback i{
  display:none!important;}

.assessment .feedback p::before{
  content:"Your response was recorded."}

/* .trial .feedback p::before{
  content:"Lorem ipsum dolor sit amet, nam ea possim recteque intellegebat, dicit errem officiis cu est."} */

/* .trial .feedback p:empty{
  display:none;} */

.trial .feedback i{
  width:calc(100% - .75rem);
  max-width:640px;
  margin:0 auto 0.25rem auto;
  font-size:inherit;
  display:block;
  line-height:normal; 
  color:black;
  font-weight:bold;
  font-style:normal}

.trial .feedback aside{
  /* overflow:auto; */
  transition: all .5s cubic-bezier(0.42, 0, 0, 0.99);
  box-shadow:none;
  background:white;
  position:fixed;
  z-index:100;
  top:100vh;
  left:0vh;
  }

.trial .feedback aside.open{
  top:0vh;}

.trial .feedback aside header{
  position:relative;
  width:100%;
  text-align:right;}

.trial .feedback aside header .close-lesson{
  position:absolute;
  right:0;
  top:0;
  font-size:125%;
  line-height:2rem;
  left:initial;
  font-weight:normal;}

.trial .feedback aside header .button::before{
  font-family:fontawesome;
  content:"\f00d"; 
  position:absolute;
  left:0;
  position:initial;}

.trial.correct .feedback i::before{
  color: #0e9c4d;
  content:"Correct!";
  }

.trial.incorrect .feedback i::before{
  color:crimson;
  content:"Incorrect."}

.trial.timed-out .feedback i::before{
  color: #ff7a00;
  content:"Time is up!";
  }

.block-feedback .continue.button,
.trial .continue.button{
  box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.2);
  position:fixed;
  padding:1rem;
  font-weight:bold;
  bottom:0;
  left:0;
  margin:0;
  border-radius:0;
  width:100%;}

.block-feedback .continue.button::before,
.trial .continue.button::before{
  content:"Continue";}

.lesson .continue.button::after{
  margin:0 0 0 .5rem;
  font-weight:bold;
  font-family:fontawesome;
  content:"\f105";}

.lesson .continue.button{
  display:block;
  position:fixed;
  background:none;
  color: #008dea;
  opacity:.2;
  bottom:0;
  right:0;
  transition:all .14s;
  width:auto;
  z-index:1;
  margin:auto;
  border-radius:2;
  border-radius:none;
  }

.lesson .continue.button::before{
  content:"Skip Lesson"}

.first-page + .continue.button{
  opacity:1;}

.last-page + .continue.button{
  opacity:1;
  background: #2c9be5;
  color:white;
  display:block;
  position:fixed;
  bottom:1rem;
  right:0;
  left:0;
  font-weight:bold;
  width:20rem;
  z-index:1;
  margin:auto;
  border-radius:2;
  border-radius:none;}

.last-page + .continue.button::before{
  content:"Continue Interactive Learning";}

.test-problems .lesson .continue.button{
  display:none;}

/* === Progress === */

/* Temp */
.trial aside{
  position:fixed;
  border-top:1px solid #eee;
  bottom:0;
  background: rgba(254, 254, 254, 0.94);
  width:100%;
  left:0;
  right:0;}

.trial .progress{
  background: #E4E4E4;
  box-shadow:inset 2px 2px 2px 0px rgba(0, 0, 0, .1);
  border-radius:1.5rem;
  overflow:hidden;
  height:.5rem;
  display:inline-block;
  max-width:600px;
  width:calc(100% - 2rem);
  margin:1rem auto .75rem auto;
  text-align:left;
  left:initial;
  right:0;}

.trial aside span{
  min-width:15px;
  vertical-align:top;
  display:inline-block;
  width:100%;
  height:100%;
  background: #14B95D;}

/* === BlockFeedback === */

.block-feedback p,
.block-feedback h1,
.block-feedback h2,
.block-feedback h3{
  font-weight:bold;
  margin:0 0 0.5rem 0;
  line-height:normal;}

.block-feedback section:first-of-type{
  
}

.block-feedback section:last-of-type{
  
}

.mastery-status{
  display:none!important;
}

.block-feedback section{
  background:white;
  max-width:640px;
  padding:2rem 1rem;
/*   border-bottom:1px solid #ccc; */
  /* border-top:1px solid #ccc; */
  margin:0 auto 2rem auto;
  position:relative;
  display:block;
  }

.block-feedback section:nth-child(4){
  display:none;
}

.block-feedback .accuracy-response-time{}

.accuracy-response-time::before{
  font-size:75%;
  font-weight:bold;
  content:"Your performance for the last 12 problems"}

/* .accuracy-response-time-averages::after{
  bottom:0;
  left:0;
  display:block;
  margin:0 auto 0 auto;
  padding:0.5rem 1rem;
  text-align:center;
  font-weight:bold;
  font-size:60%;
  content:"Average response time only includes correct responses. Passive trials are not included in these calculations.";} */

.accuracy-response-time-averages ul{
  max-width:550px;
  margin:0 auto 0 auto;
  list-style:none;}

.accuracy-response-time-averages ul li{
  font-size:200%;
  text-align:center;
  line-height:normal;
  color: #2199E8;
  font-weight:bold;
  width:50%;
  display:inline-block;}

.accuracy-response-time-averages ul li:nth-child(2){
  text-align:center;}

.accuracy-response-time-averages ul li:empty:before{
  font-family:fontawesome;
  content:"\f119"}

.accuracy-response-time-averages ul li:nth-child(1)::after{
  font-size:25%;
  color:black;
  display:block;
  content:"Average Accuracy"}

.accuracy-response-time-averages ul li:nth-child(2)::after{
  font-size:25%;
  color:black;
  display:block;
  content:"Average Response Time"}

.block-feedback h1::before{
  content:"Progress"}

.block-feedback{
  padding:3rem 0 4.5rem 0;;
  font-size:15px;}

.block-feedback h1{
  max-width:440px;
  font-size:150%;
  display:block;
  margin:0 auto .5rem auto;
  line-height:normal;}

.block-feedback h2{
  font-size:100%;
  /* display:none; */
  margin:0 auto 1.75rem auto;
  }

.block-feedback h2::before{
  content:"Last 12 Items"
}

.accuracy-response-time h2{
  display:none;}

.block-feedback p{
  display:block;
  padding:0 .25rem;
  line-height:normal;
  margin:0;
  font-weight:block;
  margin:0 auto 0 auto;}

/* .block-feedback > p::before{
  font-size:150%;
  content:"For Last 12 Problems"} */

.block-feedback > p::after{
  display:block;
  font-weight:bold;
  font-size:75%;
  max-width:480px;
  content:"Your goal is foremost to be accurate; while being accurate, try to respond as promptly as possible.";
  margin:0 auto 1rem auto;}

/* 
.accuracy-response-time p::before{
  content:"This shows your accuracy and speed across the previous 12 blocks of trials."} */
  
.progress-wrapper h2{
  font-size:150%;
  margin:0 auto .75rem auto;}

.progress-wrapper h2:empty{
  display:none
}

.progress-status::after{
  display:block;
  margin:.5rem auto 2rem auto;
  font-size:100%;
  font-weight:bold;
  font-size:100%;
  content:"Overall Progress";}

.mastery-status::after{
  display:block;
  margin:.5rem auto 2rem auto;
  font-size:100%;
  font-weight:bold;
  font-size:100%;
  content:"Overall Mastery";}

.progress-wrapper p{
  margin:0 auto 5rem auto;}

/* .progress-wrapper p::before{
  content:"This shows your how much of the material you've mastered in this module.";} */

/* ----------------------------- */

.legends{
  display:inline-block;
  width:100%;
  vertical-align:middle;
  font-size:small;
  line-height:1rem;
  max-width:500px;
  padding:0;
  margin:0 0 .5rem 0;
  text-align:left;
  list-style:none;}

.legends li{
  width:100%;
  font-size:smaller;
  margin:0 0 .25rem 0;
  vertical-align:middle;
  line-height:.75rem;
  display:inline-block;}

.legends li:nth-child(odd){
  width:40%;}

.legends li:nth-child(even){
  width:60%;}

.legends li::before{
  border-radius:50%;
  vertical-align:middle;
  display:inline-block;
  margin:0 .5rem 0 0;
  content:"";
  width:.75rem;
  height:.75rem;
  line-height:.75rem;
  background: black;}

/* incorrect */

.legend.incorrect::after{
  content:"Incorrect"}

.legend.incorrect::before{
  background: #FFA9A9;}

/* correct and fast */

.legend.fast-correct::before{
  background: #3DB974;}

.legend.fast-correct::after{
  content:"Correct and Fast"}

/* correct but slow */

.legend.slow-correct::after{
  content:"Correct but Slow"}

.legend.slow-correct::before{
  background: #D1F5D5;}

/* passive */

.legend.passive::after{
  content:"Lesson or Familiarization Trial"}

.legend.passive::before{
  background: #B0DEFD;}

/* timed out */

.legends li::before{
  background: orange;}

.legend.timed-out::after{
  content:"Timed Out"}

/* target rt */

.legend.target-rt::before{
  background:none;
  border-radius:0;
  border-top:3px dotted #000;
  width:15px;
  position:relative;
  top:.25rem;
  left:-.6rem;
  margin:0 0 0 .5rem;}

.legend.target-rt::after{
  content:"Target Speed"}

.block-score h2{
  margin:0 0 0 0;
  font-size:100%;}

.block-score number{
  display:block;
  margin:0 0 0 0;
  font-size:500%;
  font-weight:bold;}

.block-score number::after{
  font-size:25%;
  content:"/12"}

.block-feedback canvas{
  width:100%;
  padding-top: 40%;
  box-shadow:inset 0 0 0 1px red;}

/* ----------------------------- */

.block-feedback section.progress-wrapper .progress{
  display:block;
  vertical-align:middle;
  box-shadow: inset 1px 1px 1px 1px #C7C7C7;
  border-radius:1rem;
  height:1rem;
  max-width:500px;
  margin:0 auto 0 auto;
  position:relative;
  background: #dadada;}

.progress-wrapper .progress{
  position:relative;
  /* max-width:500px; */
  height:.5rem;
  border-radius:1rem;
  margin:0 auto;
  }

.progress-wrapper .progress .meter{
  position:absolute;
  border-radius:1rem;
  transition:.5s;
  top:0;
  left:0;
  height:100%;
  background: #2199E8;
  min-width:1%;}

.progress-wrapper .progress .meter i{
  position:absolute;
  top:-4rem;
  right:-1.5rem;
  border-radius:50%;
  background: #36a2e9;
  color:white;
  width:50px;
  height:50px;
  line-height:50px;
  border-radius:50%;
  font-size:15px;
  font-weight:bold;
  }

.progress-wrapper .progress .meter i:before{
  content:"";
  position:absolute;
  bottom:-.62rem;
  right:0.55rem;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid #36a2e9;
  }

/* === Vertical Bar Chart == */

.bar-chart.vertical{
  border-top: 1px dotted #000;
  border-bottom: 1px dotted black;
  height:70px;
  max-width:500px;
  margin:1rem auto 3rem auto;
  overflow:visible;
  position:relative;
  padding:2px 0;
  display: flex;
  border-radius:0;
  justify-content: space-between;
  white-space:nowrap;
  text-align:center;
  list-style:none;
  }

/* === Fast Slow Labels === */

.bar-chart.vertical::before,
.bar-chart.vertical::after{
  color: black;
  position:absolute;
  text-align:right;
  font-weight:bold;
  left:-2.5rem;
  z-index:1;
  font-size:60%;}

.bar-chart.vertical::before{
  top:-.75rem;
  content:"Fast";}

.bar-chart.vertical::after{
  bottom:-.5rem;
  content:"Slow";}

/* === Target RT Dashed Bar === */

.bar-chart.vertical li.fast-correct i{
  /* display:none; */
  position:absolute;
  bottom:60%;
  left:0;
  right:0;
  border-top: 3px dotted rgba(0, 0, 0, .5);
  width:calc(100% - 0px);
  margin:auto;
  height:0px;
  }

/* === Bars Track === */

.bar-chart.vertical li{
  position:relative;
  width:7.5%;
  overflow:visible;}

.bar-chart.vertical li::first-child{
  display:none;}

/* === Bar === */

.bar-chart.vertical li .response-bar{
  position:absolute;
  display:inline-block;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  min-height:5%;
  background: rgb(255, 165, 0);}

/* === Bar Number === */

.bar-chart.vertical li::after{
  font-weight:bold;
  font-size:small;
  position:absolute;
  bottom:-1.5rem;
  left:0;
  font-size:10px;
  text-align:center;
  width:100%;
  content:"";}

.bar-chart.vertical li:nth-child(1)::after{content:"1";}
.bar-chart.vertical li:nth-child(2)::after{content:"2";}
.bar-chart.vertical li:nth-child(3)::after{content:"3";}
.bar-chart.vertical li:nth-child(4)::after{content:"4";}
.bar-chart.vertical li:nth-child(5)::after{content:"5";}
.bar-chart.vertical li:nth-child(6)::after{content:"6";}
.bar-chart.vertical li:nth-child(7)::after{content:"7";}
.bar-chart.vertical li:nth-child(8)::after{content:"8";}
.bar-chart.vertical li:nth-child(9)::after{content:"9";}
.bar-chart.vertical li:nth-child(10)::after{content:"10";}
.bar-chart.vertical li:nth-child(11)::after{content:"11";}
.bar-chart.vertical li:nth-child(12)::after{content:"12";}

/* === Bar Icons === */

.bar-chart.vertical li.lesson:before,
.bar-chart.vertical li.passive:before,
.bar-chart.vertical li span::after{
  font-size:medium;
  position:absolute;
  left:0;
  right:0;
  top:-1.15rem;
  width:1rem;
  height:1rem;
  font-size:12px;
  line-height:1rem;
  margin:auto;
  bottom:initial;
  text-align:center;
  font-family:fontawesome;
  content:"\f00c";
  display:none;
  }

/* == Bar (Fast & Correct) == */

.bar-chart.vertical li.fast-correct .response-bar{
  background: #3db974;}

/* === Bar (Fast but Slow) === */

.bar-chart.vertical li.slow-correct .response-bar{
  background: #D1F5D5}

/* === Bar (Incorrect) === */

.bar-chart.vertical li.incorrect .response-bar{
  max-height:10%;
  background: #FFA9A9;
  }

/* === Bar (Passive or Lesson) === */

.bar-chart.vertical li.passive,
.bar-chart.vertical li.lesson{
  display:none;
  opacity:0;
  position:relative;
  background: #B0DEFD;
  }

/* === Icon (Fast & Correct) === */

.bar-chart.vertical li.fast-correct span::after{
  color: #3DB974;
  content:"\f00c";}

/* === Icon (Fast but Slow) === */

.bar-chart.vertical li.slow-correct .response-bar::after{
  color: #A3DEAA;
  content:"\f00c";}

/* === Icon (Incorrect) === */

.bar-chart.vertical li.incorrect .response-bar::after{
  color: #FF7575;
  content:"\f00d";}

/* === Icon (Timed-out) === */

.bar-chart.vertical li.timed-out .response-bar::after{
  color: #FFA500;
  content:"\f017";}

/* === Icon (Passive or Lesson) === */

.bar-chart.vertical li.lesson::before{
  color: #B0DEFD;
  content:"\f02d";}

.bar-chart.vertical li.passive::before{
  color: #B0DEFD;
  content:"\f00c";
  }

/* === Modals === */

.modal .error{
  transition:all .5s;
  background: black;
  color:white;
  position:relative;
  padding:4px;
  font-size:75%;
  height:2rem;
  line-height:2rem;
  font-weight:bold;
  border-radius:2px;
  margin:0 0 .5rem 0;
  padding:0 .5rem;
  display:block;
  }

.modal .error:empty{
  height:0px;}

.modal .error:empty:before{
  display:none}

.modal .error::before{
  position:absolute;
  content:"";
  height:1rem;
  top:-5px;
  left:5px;
  display:block;
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black}

.modal-wrapper{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, .8)}

.modal-wrapper.open{
  animation:.1s fadeIn linear forwards;
  display:table;}

.modal{
  display:table-cell;
  vertical-align:top;}

.modal form{
  border-radius:2px;
  max-width:640px;
  margin:4rem auto 1rem auto;
  width:calc(100% - 1rem);
  max-height:calc(100vh - 150px);
  overflow:auto;
  padding:1rem 1rem 1rem 1rem;
  text-align:left;
  position:relative;
  background:white;}

.modal form .table-wrapper{
  border-bottom:1px solid #ddd;
  max-height:calc(100vh - 400px);
  margin:0 0 1rem 0;
  overflow:auto;}

.modal form .table-wrapper table{
  margin:0;}

.modal form label{
  display:block;
  max-width:none;
  width:100%;}

.modal h1{
  font-size:100%;}

.modal form button.close-x{
  position:absolute;
  top:1rem;
  /* color:black!important; */
  font-size:125%;
  padding:.025rem .5rem .15rem .5rem;
  right:1rem;}

.modal .button{
  font-size:smaller;
  padding:.75rem 1rem;
  /* opacity:.75; */
  float:right;
  margin: 0 0 0 .5rem;}

/* === Alers === */

.alerts{
  position:absolute;
  top:5.75rem;
  left:0;
  width:100%;
  text-align:center;}

.alert-box{
  animation:.25s fadeOut linear forwards;
  animation-delay:3.5s;
  box-shadow:0 0 2px 2px rgba(0, 0, 0, .05);
  max-width:300px;
  margin:-5px auto 0 auto;
  position:relative;
  font-size:small;
  display:block;
  background: #ffecc3;
  border: 1px solid #efcd85;
  padding:.5rem 1rem;
  border-radius:2px;}

.alert-box .close{
  font-size:100%;
  padding:0.15rem .5rem;
  position:absolute;
  top:0;
  right:0;}

.assessment-finale p,
.assessment-finale h1{
  max-width:700px;}

.assessment-finale form h1{
  font-size:200%;
  line-height:normal;
  margin:0 0 1rem 0}

.assessment-finale form{
  text-align:left;
  margin:0 auto 1rem auto;
  padding:1rem 2rem;
  max-width:700px;
  background:white;}

.assessment-finale form ol{
  margin:0;}

.assessment-finale form ol li{
  list-style:none}

.assessment-finale form .button{
  width:100%;}

.assessment-finale .quit.button::before{
  content:"Back to Dashboard"}

/* ========================================== */
/* ===== Foundation's Small Break Point ===== */
/* ========================================== */

@media (min-width:640px){

  article{
    padding:4rem 0 6rem 0;}

  .summary-data h2{
    padding:0}

  .erase-data,
  .summary-data ul li{
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;}

  .sign .button{
    margin:0 auto 1.5rem auto;}   }

/* ========================================= */
/* ==== Foundation's Medium Break Point ==== */
/* ========================================= */

@media (min-width:768px){

  .custom-squad-1{
    max-width:4rem!important;}

  .custom-section-1{
    max-width:8rem!important;}

  .custom-platoon-1{
    max-width:12rem!important;}

  .palms-list button{
    padding:1.5rem 2rem;}

  .trial .choices .button{
    max-width:calc(50% - .25rem)}

  .trial .choices .button:nth-child(odd){
    margin:0 .5rem .5rem 0;}

  .trial .choices .button:nth-child(even){
    margin:0 0 0 0;}

  .button.open-lesson::after{
  content:"Review Lesson"}

  .admin-page .options .button span{
    vertical-align:top;
    display:inline-block;}

  .trial .prompt figure img{
    display:block;
    border-radius: 0;
    margin:auto;
    padding:.25rem;
    background:white!important;
    width:auto;
    height:auto;
    min-width:200px;
    max-width:100%;
    }

  .lessons-viewer-page + nav{
    visibility:visible;}

  .lessons-viewer-page + nav li{
    visibility:hidden;}

  .trial .choices input{
    height:3rem;}

  .trial .choices input{
    hieght:3.5rem;
    line-height:3.5rem;}

  /* === Owl Off-canvas Technique === */

  .owl-carousel.table-group .owl-item table,
  .owl-carousel.table-group .owl-item, 
  .owl-carousel.table-group .owl-stage,
  .owl-carousel.table-group .owl-height {
    transition: all 0s cubic-bezier(0.42, 0, 0, 1.01)!important;}

  .owl-carousel.table-group .owl-item table{
    z-index:1;
    position:relative;}

  .table-group .owl-item:nth-child(1) table{
    left:initial;}

  .table-group .owl-item:nth-child(1).active{
    padding-right:.25rem;
    padding-left:.25rem;}

  .table-group .owl-item:nth-child(1).active table{  
    left:initial;}

  .table-group .owl-item:nth-child(1).active + .owl-item table{
    left:initial!important;}

  .table-group .owl-item:nth-child(1) + .owl-item table{
    left:initial;}

  .table-group .owl-item:nth-child(1) + .owl-item.active{
    padding-right:.25rem;
    padding-left:.25rem;}

  .table-group .owl-item:nth-child(3) table,
  .table-group .owl-item:nth-child(1) + .owl-item + .owl-item table{
    left:initial;}

  .table-group .owl-item:nth-child(1) + .owl-item + .owl-item.active{
    padding-right:.25rem;
    padding-left:.25rem;}

  .table-group .owl-item:nth-child(1) + .owl-item + .owl-item.active table{
    left:initial}

  .table-group .owl-item:nth-child(1) + .owl-item table{
    left:initial;
    z-index:2;}

  .table-group .owl-item:nth-child(1) + .owl-item.active table{
    left:initial!important;}

  .owl-carousel.table-group .owl-item{
    padding:inherit}

  /* === scroll bars === */

/*   ::-webkit-scrollbar {
      height: 16px;
      overflow: visible;
      width: 10px
  }
  ::-webkit-scrollbar-button {
      height: 0;
      width: 0
  }
  ::-webkit-scrollbar-track {
      background:transparent;
      background-clip: padding-box;
      border: solid red;
      border-width: 0 0 0 0px
  }
  ::-webkit-scrollbar-track:horizontal {
      border-width: 0px 0 0
  }
  ::-webkit-scrollbar-track:hover {
      background-color: rgba(0, 0, 0, .05);
      -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
      box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
  }
  ::-webkit-scrollbar-track:horizontal:hover {
      -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
      box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
  }
  ::-webkit-scrollbar-track:active {
      background-color: rgba(0, 0, 0, .05);
      -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07);
      box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
  }
  ::-webkit-scrollbar-track:horizontal:active {
      -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07);
      box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
  }
  ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .2);
      background-clip: padding-box;
      border: solid transparent;
      border-width: 0;
      min-height: 28px;
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
      box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
  }
  ::-webkit-scrollbar-thumb:horizontal {
      border-width: 6px 1px 1px;
      padding: 0 0 0 100px;
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07);
      box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
  }
  ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, .4);
      -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
  }
  ::-webkit-scrollbar-thumb:active {
      background-color: rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
  }    */
  }

/* ============================================= */
/* ============= Min-height: 500px ============= */
/* ============================================= */

@media (min-height:500px){}

/* ========================================= */
/* ============= iPhone 6 & Up ============= */
/* ========================================= */

@media (min-width:375px) and (min-height:667px){

  .trial .choices .button{
    line-height:normal;
    padding:1rem;}

  body{
    font-size:15px;}    }

/* ========================================= */
/* ============ iPhone 6plus & Up ============= */
/* ========================================= */

@media (min-width:414px) and (min-height:736px){

  .trial .choices input{
    height:2.75rem;}
  
  .trial{
  vertical-align:middle;}   }

/* ================================================= */
/* ============== iPad Portrait & Up =============== */
/* ================================================= */

@media (min-width:768px) and (min-height:500px){

  .invert:first-of-type::before{
    content:"Scroll down or press the space key"}

  nav:after{
    position:fixed;
    height:6rem;
    left:0;
    width:100%;
    background: transparent;
    background: -webkit-linear-gradient(to bottom,transparent,rgba(195, 195, 195, .5));
    background:  linear-gradient(to bottom,transparent,rgba(195, 195, 195, .5));
    bottom:0;
    content:"";
    z-index:-1;}

  .palms-lessons-list h1{
    padding:0}

  article.performance-page{
  padding:8.5rem 0 6rem 0;}

  .block-feedback .continue.button::before,
  .trial .continue.button::before{
    content:"Continue";}

  .block-feedback .continue.button,
  .trial .continue.button{
    opacity:.9;
    box-shadow:0 0 4px 4px rgba(0, 0, 0, 0.08);
    padding:.75rem 1rem;
    position:fixed;
    font-size:smaller;
    background:#2199e8;
    font-weight:bold;
    bottom:.75rem;
    right:.75rem;
    left:auto;
    margin:0;
    border-radius:4px;
    max-width:300px;
    margin:auto;
    width:auto;
    }

  .block-feedback .continue.button:hover,
  .trial .continue.button:hover{
    background: #1583cc;
    }

  .palm article.lesson::before{
    height:3rem;
    line-height:3rem;}

  article{
    padding:8rem 0 8rem 0;}

  article.palms-start{
    padding:3rem 0 0 0;}

  .button.open-lesson{
    height:3rem;
    line-height:3rem;}

  header .button{
    height:3rem;
    width:3rem;
    line-height:3rem;}

  header h1,
  header h2{
    line-height:3rem;}

  .admin-page section .tabs li{
    margin-right:1rem;}

  .admin-page section .tabs li a{
    padding:1.5rem 0;}

  .users .tabs-content,
  .admins .tabs-content{}

  .contain-to-grid,
  nav{
    height:4rem;
    overflow:hidden;
    bottom:1.5rem;
    margin:auto;
    border-radius:6px;
    right:0;}

  nav ul li{
    width:8rem;}

  nav ul li:first-child{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;}

  nav ul li:last-child{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;}

  body{
    font-size:18px;}
  
  .trial .choices input{}

  .bar-chart.vertical{
    height:150px;}

  .trial .prompt figcaption,
  .trial .prompt p{
    margin:0 auto .5rem auto;}

  .legends{
    text-align:center;}

  .legends li{
    text-align:left;}

  .trial .choices{
    margin-bottom:.5rem;}

  .trial .feedback i{
    font-size:larger;}

  nav li a:hover{
    background: rgba(255, 255, 255, .2);}

  .trial .feedback{
    left:0;
    right:0;
    margin:auto;
    position:absolute;}

  .last-page + nav .complete-lesson .button{
    color:#777!important;
    position:fixed;
    top:0;
    bottom:initial;
    left:initial;
    right:0;
    background:none;
    padding:0.75rem;
    width:auto;
    font-size:smaller;
    font-weight:bold;
    text-transform:uppercase;}

  .last-page + nav .complete-lesson .button::before{
    display:none;}

  .invert:first-of-type::after{
    top:calc(100vh - 12.5rem)}

  .invert:first-of-type::before{
    top:calc(100vh - 14rem);

  .trial{
    vertical-align:middle;}

  nav .continue .button{
    position:fixed;
    top:initial;
    background:#2199e8;
    bottom:0;
    left:0;
    width:100%;
    background:none!important;
    color:black;
    margin:0;
    height:4rem;
    line-height:4rem;
    border-radius:0;
    opacity:1;
    display:inline-block;
    vertical-align:bottom;
    font-size:0;}

  nav .continue .button::after{
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    bottom:0;
    padding:initial;
    font-family:inherit;
    font-weight:bold;
    text-align:center;
    content:"Hit Space Bar to Continue";}

  nav .quit button{
    padding:.5rem;}

  .palm .lesson nav .quit button::after{
    content:" PALM"}

  .trial.choices-4 .choices .button{
    max-width:calc(50% - 1rem);
    margin:0 .5rem .5rem 0;}

  .trial aside{
    position:fixed;
    bottom:0;
    width:100%;
    margin:auto;
    left:0;
    right:0;
    background: #F5F5F5;
    bottom:0rem;}

  body{
    font-size:18px;}
    
  .navigation{
    height:3.5rem;}

  .navigation li span,
  .navigation li a{
    line-height:3.5rem;}

  .app-option a{
    padding:0 1.5rem;
    line-height:3.5rem;}

  .dashboard-apps li,
  .dashboard-app{
    width:245px;}

  .dashboard-app-name{
    padding:.5rem 0;
    font-size:125%;}

  .trial .feedback,
  .trial .choices,
  .trial .prompt{
    white-space:normal;
    max-width:900px;
    display:block;
    margin:0 auto 1rem auto;}

  .trial .choices button{
    display:inline-block;
    width:calc(50% - 1rem);
    margin:0 .5rem .5rem 0;
    border-radius:3px;}

  .navigation-item .title-short{
    display:none}

  .navigation-item .title-long{
    font-weight:bold;
    display:inline-block}

  .navigation-item span,
  .navigation-item a{
    font-weight:normal;}

 .fp-section:not(.invert) {
    padding-top:4rem!important;
    padding-bottom:4rem!important;}

  .row{
    width:calc(100% - 4.5rem);}

  #fp-nav ul li a span,
  .fp-slidesNav ul li a span {
    height: 6px;
    width: 6px;}
    
  #fp-nav ul li:not(.active):hover a span,
  .fp-slidesNav ul li:not():hover a span {
    width: 10px;
    height: 10px;
    margin: -4px 0px 0px -4px;}

  #fp-nav ul li a.active span,
  .fp-slidesNav ul li a.active span {
    margin: -7px 0 0 -7px!important;
    height: 16px!important;
    width: 16px!important;}

  .choices{
    padding:0}

  .invert{
    padding:3rem 0rem!important}

  table{
    font-size:90%;}

  table tbody th,
  table tbody td {
    padding: 0.4rem 0.6rem 0.4rem; }

  .prompt .single-figure{}
  
  .trial.four-choice .choices .button{
    width:calc(50% - .5rem);
    margin:0 0 .5rem 0;}

  .trial.three-choice .choices .button{
    width:calc(33% - .5rem);
    margin:0 0 .5rem 0;}

  .trial.two-choice .choices .button{
    width:calc(50% - .5rem);
    margin:0 0 .5rem 0;}
  
  article{
    padding-top:0;
    max-width:100vw;
    vertical-align:middle}

  table{
    /* max-width:768px; */
    border-collapse:separate;
    border:1px solid #ccc;
    margin:0 auto 1rem auto;
    text-align:left;}

  .owl-carousel.full-size .owl-dot{
    margin:-3px 4px 0 4px;
    width:6px;
    height:6px;}

  .highlight-dots.dot-1  .owl-dot:nth-child(1),
  .highlight-dots.dot-2  .owl-dot:nth-child(2),
  .highlight-dots.dot-3  .owl-dot:nth-child(3),
  .highlight-dots.dot-4  .owl-dot:nth-child(4),
  .highlight-dots.dot-5  .owl-dot:nth-child(5),
  .highlight-dots.dot-6  .owl-dot:nth-child(6),
  .highlight-dots.dot-7  .owl-dot:nth-child(7),
  .highlight-dots.dot-8  .owl-dot:nth-child(8),
  .highlight-dots.dot-9  .owl-dot:nth-child(9),
  .highlight-dots.dot-10  .owl-dot:nth-child(10),
  .highlight-dots.dot-11  .owl-dot:nth-child(11),
  .highlight-dots.dot-12  .owl-dot:nth-child(12),
  .highlight-dots.dot-13  .owl-dot:nth-child(13),
  .highlight-dots.dot-14  .owl-dot:nth-child(14),
  .highlight-dots.dot-15  .owl-dot:nth-child(15),
  .highlight-dots.dot-16  .owl-dot:nth-child(16),
  .highlight-dots.dot-17  .owl-dot:nth-child(17),
  .highlight-dots.dot-18  .owl-dot:nth-child(18),
  .highlight-dots.dot-19  .owl-dot:nth-child(19),
  .highlight-dots.dot-20  .owl-dot:nth-child(20){
    margin:-3px 8px 0 8px;
    width:12px;
    height:12px;}   }

/* ================================================================ */
/* =========== iPad Landscape and Average Desktop & Up ============ */
/* ================================================================ */

@media (min-width:768px) and (min-height:500px){

  .fullpage{
    z-index:1;
    position:relative;
    /* top:-3rem; */
    }

  main{
    max-height:calc(100vh - 3rem);
    /* don't do this for fullpages */
    /* padding:1.5rem 0; */
    /* margin:0; */}

  .lessons-viewer-page::before{
    padding:1rem;}
  
  .block-feedback{
    font-size:22px;}

  .block-feedback section{
    padding:.75rem 0;}

  .fullpage p{
    font-size:115%;}

  .row{
    width:calc(100% - 6rem);}

  table.tiny{
    /* max-width:17rem; */
    } }

/* ======================================= */
/* ============= Really Big ============== */
/* ======================================= */

@media (min-width:1200px){

.trial .choices .button img{
  min-width:175px;
}

}

/* ======================================= */
/* ============= Really Big ============== */
/* ======================================= */

@media (min-width:1200px) and (min-height:500px){

  main{
    margin:0;}

  .trial .choices input{
    /* height:3.5rem; */
    }

  .row{
    width:calc(100% - 4rem);}

  .row{
/*     box-shadow:inset 0 0 0 1px red; */
/*     max-width:1400px; */}

/* ================================================= */
/* ============= I'm Mean, Really Big ============== */
/* ================================================= */

@media (min-width:1400px) and (min-height:800px){

 
  .fullpage table{
    max-width:none;
    font-size:20px;
    }

  .trial .choices input{
    margin:0 auto .75rem auto;
    /* height:4.25rem; */
    }

  .trial section{
    max-width:1024px;}

  p{
   max-width:1024px;}

}
}
*{
/*   border:1px solid red!important; */
}