@charset "UTF-8";
/* ---------------------------------------------------------------------
 Modern Styles
------------------------------------------------------------------------ */
/* Module Measurements */
/* Font Vars */
/* Standard Colors */
/* High School Settings */
/* Trim Colors */
/* Graph Colors */
/* Utility Colors */
/* UI Icons */
/* High School Settings */
/* ---------------------------------------------------------------------
 Modern Styles
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
RESET CSS (thanks Eric Meyer)
------------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:focus {
  outline: 0;
}

html {
  overflow-y: scroll; /* Always show a vertical scrollbar, even when there is no scrolling */
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------
 HTML5 Element Reset
------------------------------------------------------------------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

audio, canvas, video, progress, picture {
  display: inline-block;
}

template {
  display: none;
}

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------
Source Sans Pro - Google Fonts
------------------------------------------------------------------------ */
@font-face {
  font-family: "Source Sans Pro";
  src: url("../media/fonts/SourceSansPro/sourcesanspro-regular-webfont.eot");
  src: url("../media/fonts/SourceSansPro/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/SourceSansPro/sourcesanspro-regular-webfont.woff2") format("woff2"), url("../media/fonts/SourceSansPro/sourcesanspro-regular-webfont.woff") format("woff"), url("../media/fonts/SourceSansPro/sourcesanspro-regular-webfont.ttf") format("truetype"), url("../media/fonts/SourceSansPro/sourcesanspro-regular-webfont.svg#source_sans_proregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../media/fonts/SourceSansPro/sourcesanspro-italic-webfont.eot");
  src: url("../media/fonts/SourceSansPro/sourcesanspro-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/SourceSansPro/sourcesanspro-italic-webfont.woff2") format("woff2"), url("../media/fonts/SourceSansPro/sourcesanspro-italic-webfont.woff") format("woff"), url("../media/fonts/SourceSansPro/sourcesanspro-italic-webfont.ttf") format("truetype"), url("../media/fonts/SourceSansPro/sourcesanspro-italic-webfont.svg#source_sans_proitalic") format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../media/fonts/SourceSansPro/sourcesanspro-semibold-webfont.eot");
  src: url("../media/fonts/SourceSansPro/sourcesanspro-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/SourceSansPro/sourcesanspro-semibold-webfont.woff2") format("woff2"), url("../media/fonts/SourceSansPro/sourcesanspro-semibold-webfont.woff") format("woff"), url("../media/fonts/SourceSansPro/sourcesanspro-semibold-webfont.ttf") format("truetype"), url("../media/fonts/SourceSansPro/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../media/fonts/SourceSansPro/sourcesanspro-semibolditalic-webfont.eot");
  src: url("../media/fonts/SourceSansPro/sourcesanspro-semibolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/SourceSansPro/sourcesanspro-semibolditalic-webfont.woff2") format("woff2"), url("../media/fonts/SourceSansPro/sourcesanspro-semibolditalic-webfont.woff") format("woff"), url("../media/fonts/SourceSansPro/sourcesanspro-semibolditalic-webfont.ttf") format("truetype"), url("../media/fonts/SourceSansPro/sourcesanspro-semibolditalic-webfont.svg#source_sans_proSBdIt") format("svg");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../media/fonts/SourceSansPro/../media/fonts/SourceSansPro/sourcesanspro-bold-webfont.eot");
  src: url("../media/fonts/SourceSansPro/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/SourceSansPro/sourcesanspro-bold-webfont.woff2") format("woff2"), url("../media/fonts/SourceSansPro/sourcesanspro-bold-webfont.woff") format("woff"), url("../media/fonts/SourceSansPro/sourcesanspro-bold-webfont.ttf") format("truetype"), url("../media/fonts/SourceSansPro/sourcesanspro-bold-webfont.svg#source_sans_probold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../media/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.eot");
  src: url("../media/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.woff2") format("woff2"), url("../media/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.woff") format("woff"), url("../media/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.ttf") format("truetype"), url("../media/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.svg#source_sans_probold_italic") format("svg");
  font-weight: 700;
  font-style: italic;
}
/* ---------------------------------------------------------------------
Amaranth - Google Fonts
------------------------------------------------------------------------ */
@font-face {
  font-family: "Amaranth";
  src: url("../media/fonts/Amaranth/amaranth-regular-webfont.eot");
  src: url("../media/fonts/Amaranth/amaranth-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/Amaranth/amaranth-regular-webfont.woff2") format("woff2"), url("../media/fonts/Amaranth/amaranth-regular-webfont.woff") format("woff"), url("../media/fonts/Amaranth/amaranth-regular-webfont.ttf") format("truetype"), url("../media/fonts/Amaranth/amaranth-regular-webfont.svg#amaranthregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Amaranth";
  src: url("../media/fonts/Amaranth/amaranth-italic-webfont.eot");
  src: url("../media/fonts/Amaranth/amaranth-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/Amaranth/amaranth-italic-webfont.woff2") format("woff2"), url("../media/fonts/Amaranth/amaranth-italic-webfont.woff") format("woff"), url("../media/fonts/Amaranth/amaranth-italic-webfont.ttf") format("truetype"), url("../media/fonts/Amaranth/amaranth-italic-webfont.svg#amaranthitalic") format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Amaranth";
  src: url("../media/fonts/Amaranth/amaranth-bold-webfont.eot");
  src: url("../media/fonts/Amaranth/amaranth-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/Amaranth/amaranth-bold-webfont.woff2") format("woff2"), url("../media/fonts/Amaranth/amaranth-bold-webfont.woff") format("woff"), url("../media/fonts/Amaranth/amaranth-bold-webfont.ttf") format("truetype"), url("../media/fonts/Amaranth/amaranth-bold-webfont.svg#amaranthbold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Amaranth";
  src: url("../media/fonts/Amaranth/amaranth-bolditalic-webfont.eot");
  src: url("../media/fonts/Amaranth/amaranth-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../media/fonts/Amaranth/amaranth-bolditalic-webfont.woff2") format("woff2"), url("../media/fonts/Amaranth/amaranth-bolditalic-webfont.woff") format("woff"), url("../media/fonts/Amaranth/amaranth-bolditalic-webfont.ttf") format("truetype"), url("../media/fonts/Amaranth/amaranth-bolditalic-webfont.svg#amaranthbold_italic") format("svg");
  font-weight: 700;
  font-style: italic;
}
/* ---------------------------------------------------------------------
UI Icon Font

 Font generated from SVG files with http://icomoon.io/app. To add to or
 modify this font, import the '../fonts/marycon/selection.json' file
 via the import button in the app. Download the updated font, replace the
 font files, and update the list of `content: '\e###';` rules with those
 from the generated CSS file.

 Settings:
   Font Name:                   marycon
   Class Prefix:                icn_
   Class Postfix:               n/a
   Support IE7                  false
   Include Metadata:            false (bloat)
   Encode & Embed Font in CSS   false
   CSS Selector                 Use a Class (.icn)
   Font Metrics:
     Em Square Height           512
     Baseline Height (% Em)     6.25
     Whitespace Width (% Em)    50
   Metadata                     None
   Version 1.0
------------------------------------------------------------------------ */
@font-face {
  font-family: "marycon";
  src: url("../media/fonts/marycon/marycon.eot?-dgz1yr");
  src: url("../media/fonts/marycon/marycon.eot?#iefix-dgz1yr") format("embedded-opentype"), url("../media/fonts/marycon/marycon.ttf?-dgz1yr") format("truetype"), url("../media/fonts/marycon/marycon.woff?-dgz1yr") format("woff"), url("../media/fonts/marycon/marycon.svg?-dgz1yr#marycon") format("svg");
  font-weight: normal;
}
/* ---------------------------------------------------------------------
Activity Icon Font

 Font generated from SVG files with http://icomoon.io/app. To add to or
 modify this font, import the '../fonts/activicon/selection.json' file
 via the import button in the app. Download the updated font, replace the
 font files, and update the list of `content: '\e###';` rules with those
 from the generated CSS file.

 Settings:
   Font Name:                   activicon
   Class Prefix:                aicn_
   Class Postfix:               n/a
   Support IE7                  false
   Include Metadata:            false (bloat)
   Encode & Embed Font in CSS   false
   CSS Selector                 Use a Class (.icn)
   Font Metrics:
     Em Square Height           512
     Baseline Height (% Em)     6.25
     Whitespace Width (% Em)    50
   Metadata                     None
   Version 1.0
------------------------------------------------------------------------ */
@font-face {
  font-family: "activicon";
  src: url("../media/fonts/activicon/activicon.eot?-qazb3f");
  src: url("../media/fonts/activicon/activicon.eot?#iefix-qazb3f") format("embedded-opentype"), url("../media/fonts/activicon/activicon.ttf?-qazb3f") format("truetype"), url("../media/fonts/activicon/activicon.woff?-qazb3f") format("woff"), url("../media/fonts/activicon/activicon.svg?-qazb3f#activicon") format("svg");
  font-weight: normal;
}
html {
  height: 100%;
}

body {
  box-sizing: border-box;
  height: 100%;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  background-color: #f1f1f1;
  color: #414141;
  font-size: 15px;
}
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

a {
  color: #0270c7;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a:hover,
a:focus {
  text-decoration: underline;
}

section {
  height: 100%;
}

/* ---------------------------------------------------------------------
 Account Menu
------------------------------------------------------------------------ */
.accountMenu {
  padding: 10px 20px 20px;
}

.accountMenu-nav {
  font-size: 0;
}

.accountMenu-nav > * {
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}

.accountMenu-nav > * + * {
  padding-left: 10px;
  border-left: 1px solid #ffffff;
  margin-left: 10px;
}

/* ---------------------------------------------------------------------
 Site Body
------------------------------------------------------------------------ */
@media (min-width: 1122px) {
  .siteBody {
    padding-bottom: 350px;
  }
}
@media (min-width: 768px) {
  .siteBody {
    padding-bottom: 200px;
  }
}

/* ---------------------------------------------------------------------
 Site Footer
------------------------------------------------------------------------ */
.siteFooter {
  box-sizing: border-box;
  margin-top: 15px;
  margin-bottom: 40px;
  padding: 20px 0;
  background: #777777;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.384615385;
  text-align: center;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  display: inline-block;
  z-index: 1000;
  border-top: 1px solid #f1f1f1;
  /*footer color as is which we don't want*/
  position: relative;
  width: 100%;
  bottom: 0;
}
@media (min-width: 768px) {
  .siteFooter {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    overflow: visible;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px 0 40px 0;
    width: 100%;
    bottom: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 10;
  }
}
@media (max-width: 767px) {
  .siteFooter {
    padding: 11px 0 10px 0;
    overflow: visible;
    height: auto;
  }
}

/****Hide the arrow***/
.siteFooter.active {
  height: auto;
}

@media (min-width: 1122px) {
  .dashboardIsOn .siteFooter {
    width: 100%;
  }
}

.siteFooter-menu {
  text-align: right;
  padding-top: 21px;
  font-size: small;
}
@media (max-width: 767px) {
  .siteFooter-menu {
    padding-top: 10px;
  }
}

.siteFooter-menu > * {
  font-size: smaller;
  display: inline-block;
  vertical-align: middle;
}

.siteFooter-menu > * + * {
  padding-left: 10px;
  border-left: 1px solid #ffffff;
  margin-left: 10px;
}
@media (max-width: 767px) {
  .siteFooter-menu > * + * {
    padding-left: 5px;
    border-left: 1px solid #ffffff;
    margin-left: 5px;
  }
}

.siteFooter a {
  color: #ffffff;
}

.copyright-container {
  padding-right: 5%;
  width: auto;
  display: block;
  float: right !important;
  padding: 0px 30px 40px;
  float: left;
  padding: 40px 30px 20px;
}
@media (max-width: 767px) {
  .copyright-container {
    margin: auto;
    min-width: 300px;
    float: left !important;
    padding: 20px 30px 50px;
  }
}
.copyright-container .copyright-text {
  float: left;
}
.copyright-container .copyright-text .copyright {
  margin: 0;
  font-size: medium;
  font-weight: bold;
  text-align: right;
}
.copyright-container .copyright-logo {
  float: right;
  vertical-align: 50%;
}
@media (max-width: 767px) {
  .copyright-container .copyright-logo {
    height: 50px;
    float: left;
  }
}
.copyright-container .copyright-logo img {
  height: 60px;
  padding-left: 20px;
}
@media (max-width: 767px) {
  .copyright-container .copyright-logo img {
    height: 50px;
    padding-left: 15px;
  }
}

.resource-links {
  padding-left: 5%;
  width: 43%;
  float: left;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .resource-links {
    float: none;
    margin: auto;
    min-width: 350px;
    width: calc(100% - 20px);
    padding-left: 20px;
  }
}
.resource-links .resource-links-label {
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
}
@media (max-width: 767px) {
  .resource-links .resource-links-label {
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 30px;
  }
}
.resource-links .resource-links-label a {
  float: right;
  padding-right: 20px;
  font-size: 22px;
  display: none;
  display: none;
}
@media (max-width: 767px) {
  .resource-links .resource-links-label a {
    display: none;
  }
}
@media (min-width: 768px) {
  .resource-links .resource-links-label a {
    display: inline-block;
  }
}
.resource-links .resource-links-label a:hover {
  text-decoration: none;
}
@media (max-width: 767px) {
  .resource-links .resource-links-label a:hover {
    cursor: pointer;
  }
}
.resource-links .resource-links-list {
  display: inline-block;
  float: left;
  max-width: 420px;
  min-width: 326px;
}
@media (max-width: 767px) {
  .resource-links .resource-links-list {
    max-width: none;
  }
}
.resource-links .resource-links-list li {
  float: left;
  text-align: left;
  width: 30%;
  min-width: 107px;
  padding-top: 5px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .resource-links .resource-links-list li {
    width: 27%;
    padding: 5px 1% 0 1%;
  }
}

.icon-rotate-180 {
  transition: all 0.3s ease;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
 Site Header
------------------------------------------------------------------------ */
.siteHeader {
  position: relative;
  box-sizing: border-box;
  padding: 10px 10px 0;
  background: #005a9d;
  color: #ffffff;
  height: 50px;
}
@media (min-width: 1122px) {
  .siteHeader {
    position: fixed;
    height: 55px;
    width: 100%;
    z-index: 999;
  }
}

.siteHeader a {
  color: #ffffff;
}

/* ---------------------------------------------------------------------
 Global Navigation
------------------------------------------------------------------------ */
.globalNavTrigger {
  position: absolute;
  right: 10px;
}

.globalNavTrigger .icn {
  font-size: 33px;
}

@media (max-width: 1121px) {
  .globalNav {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #2885cf;
    padding: 10px 0;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.75);
  }
  .globalNav.isActive {
    display: block;
  }
}
@media (min-width: 1122px) {
  .globalNav {
    display: inline-block;
  }
}

@media (max-width: 1121px) {
  .globalNav:before {
    content: "";
    position: absolute;
    right: 17px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #2885cf;
  }
}

@media (min-width: 1122px) {
  .globalNav-menu {
    vertical-align: middle;
    font-size: 0;
    margin-left: 10px;
  }
}
@media (min-width: 1200px) {
  .globalNav-menu {
    margin-left: 20px;
  }
}

@media (min-width: 1122px) {
  .globalNav-menu > * {
    display: inline-block;
    margin-left: 0;
  }
}

.globalNav-menu a {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  font-family: "Source Sans Pro";
}
@media (max-width: 1121px) {
  .globalNav-menu a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 15px 20px;
    text-decoration: none;
  }
}
@media (min-width: 1122px) {
  .globalNav-menu a {
    display: block;
    padding: 0 10px;
    height: 35px;
    line-height: 38px;
  }
}
@media (min-width: 1200px) {
  .globalNav-menu a {
    /*
    padding: 0 15px;
    */
  }
}

.globalNav-menu a:hover {
  color: #FFFFFF;
}
@media (max-width: 1121px) {
  .globalNav-menu a:hover {
    background-color: #005a9d;
  }
}

@media (min-width: 1122px) {
  .globalNav-menu a.isActive {
    color: #005a9d;
    background-color: #fdd224;
    border-radius: 8px 8px 8px 0;
  }
}

.globalNav-menu a .icn {
  font-size: 22px;
  margin-right: 5px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
 DROPDOWN MENU

 To make an <li> element a dropdown add the .dropdown class to the <li>

 <li class="dropdown">

 Then add a nested unordered list to the <li> with a class of .dropdown-content

 <li class="dropdown">
   <ul class="dropdown-content">
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
  </ul>
</li>
------------------------------------------------------------------------ */
.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  display: none;
  background-color: #2885cf;
  width: 100%;
}
.dropdown-content li a {
  border-radius: 0 !important;
}

.dropdown-content li:hover {
  background-color: #005a9d;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media (max-width: 1121px) {
  .dropdown-content {
    position: static;
    display: block;
  }
  .dropdown {
    position: static;
  }
  .dropdown-content li {
    padding-left: 30px;
  }
}
/* ---------------------------------------------------------------------
 Class Menu
------------------------------------------------------------------------ */
.classMenu {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

.classMenu-trigger {
  font-size: 15px;
  border: 1px solid transparent;
  background: #005a9d;
  color: white;
  max-width: 215px;
}
@media (min-width: 768px) {
  .classMenu-trigger {
    max-width: 630px;
  }
}
@media (min-width: 1122px) {
  .classMenu-trigger {
    max-width: 200px;
  }
}
@media (min-width: 1200px) {
  .classMenu-trigger {
    max-width: 300px;
  }
}

.classMenu-trigger option {
  background: #0270c7;
}

/* ---------------------------------------------------------------------
 Auxiliary Navigation
------------------------------------------------------------------------ */
.auxNav-menu {
  font-size: 0;
}

.auxNav-menu > * {
  font-size: 15px;
  display: inline-block;
  vertical-align: middle;
}

.auxNav-menu > * + * {
  padding-left: 10px;
  border-left: 1px solid #ffffff;
  margin-left: 10px;
}

/* ---------------------------------------------------------------------
 Dashboard
------------------------------------------------------------------------ */
.dashboard {
  position: fixed;
  z-index: 1;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media (max-width: 1121px) {
  .dashboard {
    left: 0;
    top: calc(100% - 43px);
    height: 40px;
    width: 100%;
    z-index: 1000;
  }
}
@media (min-width: 1122px) {
  .dashboard {
    right: -435px;
    top: 55px;
    width: 435px;
    height: calc(100% - 55px);
    border-radius: 8px;
  }
}
@media (max-width: 767px) {
  .dashboard {
    top: calc(100% - 43px);
  }
}

.dashboard.active {
  top: calc(100% - 210px);
}

@media (max-width: 1121px) {
  .dashboardIsOn .dashboard {
    top: 0;
    background-color: #ffffff;
    height: 100%;
  }
}
@media (min-width: 1122px) {
  .dashboardIsOn .dashboard {
    right: 0;
  }
}

@media (max-width: 1121px) {
  .dashboard-hd {
    text-align: center;
    height: 40px;
    overflow: hidden;
    border-top: 1px solid #e2e2e2;
    background-color: rgba(255, 255, 255, 0.9);
  }
}
@media (min-width: 1122px) {
  .dashboard-hd {
    position: absolute;
    left: -65px;
    width: 65px;
    height: 100%;
    z-index: 1;
  }
}

@media (max-width: 1121px) {
  .dashboardIsOn .dashboard-hd {
    padding-top: calc(29px + 1px);
    border-top: none;
    border-bottom: 1px solid #cccccc;
    background-color: #ffffff;
  }
}

.dashboard-bd {
  height: 100%;
}
@media (max-width: 1121px) {
  .dashboard-bd {
    background-color: #dedede;
  }
}
@media (min-width: 1122px) {
  .dashboard-bd {
    overflow: auto;
    background-color: #dedede;
    border-left: 1px solid #cccccc;
  }
}

/* ---------------------------------------------------------------------
 Dashboard Content
------------------------------------------------------------------------ */
.dashboardContent {
  box-sizing: border-box;
  padding-bottom: 100px;
}
@media (max-width: 1121px) {
  .dashboardContent {
    height: calc(100% - (29px + 40px + 2px));
  }
}
@media (min-width: 1122px) {
  .dashboardContent {
    height: 100%;
  }
}

/* ---------------------------------------------------------------------
 Dashboard Controls
------------------------------------------------------------------------ */
@media (max-width: 1121px) {
  .dashboardControls {
    display: inline-block;
    font-size: 0;
  }
}
@media (min-width: 1122px) {
  .dashboardControls {
    box-sizing: border-box;
    padding-top: 25px;
  }
}

@media (max-width: 1121px) {
  .dashboardControls > * {
    display: inline-block;
  }
}
@media (min-width: 1122px) {
  .dashboardControls > * {
    height: 100%;
  }
}

@media (min-width: 1122px) {
  .dashboardControls > * + * {
    margin-top: 1px;
  }
}

.dashboardControls-trigger {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  color: #0270c7;
  display: block;
  text-align: center;
}
@media (max-width: 1121px) {
  .dashboardControls-trigger {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 20px;
    font-size: 20px;
  }
}
@media (min-width: 1122px) {
  .dashboardControls-trigger {
    box-sizing: border-box;
    border-radius: 8px 0 0 8px;
    border: 1px solid #cccccc;
    background-color: #dedede;
    height: 43px;
    width: 46px;
    padding: 10px;
    font-size: 23px;
  }
}

.dashboardControls-trigger.isActive {
  position: relative;
  z-index: 9;
}
@media (min-width: 1122px) {
  .dashboardControls-trigger.isActive {
    background-color: #ffffff;
    border-right-color: #ffffff;
  }
}

.dashboardControls-toggle {
  cursor: pointer;
  position: absolute;
  background-color: #ffffff;
}
@media (max-width: 1121px) {
  .dashboardControls-toggle {
    display: none;
    left: 0;
    right: 0;
    top: 0;
    height: 29px;
    border-bottom: 1px solid #cccccc;
  }
}
@media (min-width: 1122px) {
  .dashboardControls-toggle {
    top: 0;
    right: 0;
    margin: 0;
    height: 100%;
    width: 19px;
    border-left: 1px solid #cccccc;
    z-index: 1;
  }
}

.dashboardControls-toggle:active,
.dashboardControls-toggle:focus {
  background-color: #f1f1f1;
}

.dashboardIsOn .dashboardControls-toggle {
  display: block;
}

.dashboardControls-toggle:before {
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0270c7;
  font-size: 18px;
}
@media (max-width: 1121px) {
  .dashboardControls-toggle:before {
    content: "\e60d";
    line-height: 29px;
  }
}
@media (min-width: 1122px) {
  .dashboardControls-toggle:before {
    content: "\e60e";
    position: relative;
    top: 50%;
    margin-top: -9px;
  }
}

@media (min-width: 1122px) {
  .dashboardIsOn .dashboardControls-toggle:before {
    content: "\e60f";
  }
}

/* ---------------------------------------------------------------------
 Dashboard Drawer
------------------------------------------------------------------------ */
.dashboardDrawer {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  height: 0;
  overflow: auto;
}
@media (min-width: 768px) {
  .dashboardDrawer {
    overflow: hidden;
  }
}

.dashboardDrawer.isActive {
  height: 100%;
  overflow: auto;
}

.dashboardDrawer-hd {
  box-sizing: border-box;
  height: 45px;
  font-size: 24px;
  padding: 10px 15px 0;
  background-color: #f1f1f1;
}
@media (min-width: 768px) {
  .dashboardDrawer-hd {
    padding: 20px 30px 0;
    height: 65px;
    overflow: hidden;
  }
}

.dashboardDrawer-bd {
  box-sizing: border-box;
  padding: 15px;
  height: calc(100% - 65px);
}
@media (min-width: 768px) {
  .dashboardDrawer-bd {
    padding: 30px;
    overflow: auto;
  }
}

.mix-dashboardDrawer-bd_clean {
  padding: 0 0 15px 0;
}
@media (min-width: 768px) {
  .mix-dashboardDrawer-bd_clean {
    padding: 0 0 30px 0;
  }
}

/* ---------------------------------------------------------------------
 Student Progress
------------------------------------------------------------------------ */
.studentProgressTbl {
  width: 100%;
  font-size: 15px;
  line-height: 1.25;
}

.studentProgressTbl th,
.studentProgressTbl td {
  text-align: center;
  padding: 8px;
  vertical-align: middle;
}

.studentProgressTbl thead th {
  font-weight: 700;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  vertical-align: bottom;
}

.studentProgressTbl tr > th:first-child,
.studentProgressTbl tr > td:first-child {
  text-align: left;
  padding-left: 30px;
}

.studentProgressTbl tr > th:last-child,
.studentProgressTbl tr > td:last-child {
  padding-right: 30px;
}

.studentProgressTbl tbody tr:nth-child(odd) > td {
  background-color: #f1f1f1;
}

.studentProgressTbl tbody tr.highlighted > td {
  background-color: #ced6ed;
}

/* ---------------------------------------------------------------------
 Mini Tab
------------------------------------------------------------------------ */
.miniTabBtn {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  display: inline-block;
  border: none;
  padding: 6px 10px 4px;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 15px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-align: center;
  line-height: 1;
  -webkit-appearance: none;
  text-decoration: none;
}

.miniTabBtn.isActive {
  color: #ffffff;
  background-color: #0270c7;
  border-radius: 6px 6px 6px 0;
}

/* ---------------------------------------------------------------------
 Mini Tab Drawer
------------------------------------------------------------------------ */
.miniTabDrawer {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  display: none;
}

.miniTabDrawer.isActive {
  display: block;
}

/* ---------------------------------------------------------------------
 Branding - Used for header logo
------------------------------------------------------------------------ */
.branding {
  display: inline-block;
  vertical-align: middle;
}

.branding img {
  height: 30px;
}
@media (min-width: 1122px) {
  .branding img {
    height: 35px;
  }
}

/* ---------------------------------------------------------------------
 Carousel
------------------------------------------------------------------------ */
.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-list {
  overflow: hidden;
}

.carousel-list-item {
  float: left;
  border-top: 1px solid #cccccc;
}
@media (min-width: 768px) {
  .carousel-list-item {
    padding-bottom: 3px;
    border-top: none;
    margin-top: 10px;
  }
}

/* ---------------------------------------------------------------------
 Activity Content
------------------------------------------------------------------------ */
/*doc
---
name: stage53
category: stage
---

##Activity Content
```html_example
<div class="stage">
    <div class="activityContent">
        <div class="activityContent-block">
            <h2 class="hdg hdg_3">This is a Content Heading</h2>
            <div class="bodyCopy">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>
```
*/
.activityContent {
  padding: 0 25px;
}
@media (min-width: 768px) {
  .activityContent {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .activityContent_share {
    padding: 0;
  }
}

.activityContent > * {
  padding: 10px 0;
}

/* ---------------------------------------------------------------------
 Activity Question
------------------------------------------------------------------------ */
/*doc
---
name: stage59
category: stage
---

##Activity Question
```html_example
<div class="stage">
    <div class="activityQuestion">
        <label class="label required" for="question1">Question?</label>
        <input type="text" class="field_textbox mix-field_stretch" id="question1">
    </div>
</div>
```
*/
.activityQuestion {
  padding: 20px;
}

/* ---------------------------------------------------------------------
 Activity Poll Results
------------------------------------------------------------------------ */
/*doc
---
name: stage57
category: stage
---

##Activity Poll
```html_example
<div class="stage">
    <div class="activityPoll">
        <div class="activityPoll-graph">
            <img src="assets/media/images/FPO_pie.png" class="img mix-img_stretch">
        </div>

        <ul class="activityPoll-results">
            <li>
                <div class="pill mix-pill_blue">25%</div>
                <div class="bodyCopy"><span class="u-bold">A:</span> A possible response to a matching question that is very long and wraps two lines.</div>
            </li>
            <li>
                <div class="pill mix-pill_grey">25%</div>
                <div class="u-bold">Your Response:</div>
                <div class="bodyCopy"><span class="u-bold">B:</span> A possible response to a matching question that is very long and wraps two lines.</div>
            </li>
            <li>
                <div class="pill mix-pill_red">25%</div>
                <div class="bodyCopy"><span class="u-bold">C:</span> A possible response to a matching question that is very long and wraps two lines.</div>
            </li>
            <li>
                <div class="pill mix-pill_orange">25%</div>
                <div class="bodyCopy"><span class="u-bold">D:</span> A possible response to a matching question that is very long and wraps two lines.</div>
            </li>
        </ul>
    </div>
</div>
```
*/
.activityPoll:before, .activityPoll:after {
  content: "";
  display: table;
}
.activityPoll:after {
  clear: both;
}

.activityPoll-results {
  text-align: left;
}
@media (min-width: 768px) {
  .activityPoll-results {
    box-sizing: border-box;
    padding-right: 15px;
    width: 50%;
    float: left;
  }
}

.activityPoll-results > * {
  padding: 10px 0 0 0;
}

@media (min-width: 768px) {
  .activityPoll-results > *:first-child {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .activityPoll-graph {
    padding-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .activityPoll-graph {
    box-sizing: border-box;
    padding-left: 15px;
    width: 50%;
    float: right;
  }
}

.activityPoll-graph-render {
  height: 260px;
}
@media (min-width: 768px) {
  .activityPoll-graph-render {
    height: 315px;
  }
}

/* ---------------------------------------------------------------------
 Activity Header
------------------------------------------------------------------------ */
/*doc
---
title: Activity Modules
name: stage50
category: stage
---
*/
/*doc
---
name: stage51
category: stage
---

##Activity Header
```html_example
<div class="stage">
    <div class="activityHd">
        <h1 class="hdg hdg_2">Content Page Title</h1>
        <div class="bodyCopy">Migas listicle biodiesel Pinterest, listicle biodiesel.</div>
    </div>
</div>
```
*/
.activityHd {
  padding: 0 0 15px;
}
@media (max-width: 767px) {
  .activityHd {
    padding: 15px 25px;
    border-bottom: 4px solid #cccccc;
    background-color: #f9f9f9;
  }
}

/* ---------------------------------------------------------------------
 Activity List
------------------------------------------------------------------------ */
/*doc
---
name: stage55
category: stage
---

##Activity List
```html_example
<div class="stage">
    <ul class="activityList">
        <li>
            <input type="checkbox" name="checkbox" id="checkbox1" class="field_tick"/>
            <label for="checkbox1" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response to a matching question that is very long and wraps two lines</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox" id="checkbox2" class="field_tick"/>
            <label for="checkbox2" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response to a matching question that is very long</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox" id="checkbox3" class="field_tick"/>
            <label for="checkbox3" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response that is short</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox" id="checkbox4" class="field_tick"/>
            <label for="checkbox4" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response to a matching question that is very long</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox" id="checkbox5" class="field_tick"/>
            <label for="checkbox5" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response to a matching question that is very long</label>
        </li>
    </ul>
</div>
```
*/
.activityList > * + * {
  border-top: 1px solid #cccccc;
}
@media (min-width: 768px) {
  .activityList > * + * {
    border-top: none;
    margin-top: 10px;
  }
}

.activityList a {
  display: block;
  padding: 20px 25px;
  color: #000000;
}

.activityList a:hover {
  color: #000000;
  text-decoration: none;
}

.mix-activityList_numbered {
  counter-reset: section;
}

.mix-activityList_numbered > * {
  position: relative;
}

.mix-activityList_numbered > *:before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  top: 50%;
  margin-top: -18px;
  display: block;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  line-height: 38px;
  text-align: center;
  background: #2885cf;
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .mix-activityList_numbered > *:before {
    left: 20px;
  }
}

/** simple hook for inline activity results **/
.activityResults {
  display: none;
}

.activityResults.isActive {
  display: block;
}

/* ---------------------------------------------------------------------
 Action Header
------------------------------------------------------------------------ */
/*doc
---
title: Action Header
name: stage20
category: stage
---

```html_example
<div class="stage">
    <a class="actionHd"><i class="icn icn_left"></i> This is a Heading</a>
</div>
```
*/
.actionHd {
  box-sizing: border-box;
  display: block;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  background-color: #0270c7;
  width: 100%;
  padding: 15px;
}
@media (min-width: 1122px) {
  .actionHd {
    padding: 15px 20px;
  }
}

.actionHd a {
  color: #ffffff;
}

.actionHd a:hover {
  text-decoration: none;
}

.mix-actionHd_collapse {
  margin-bottom: -26px;
  position: relative;
  /*
  z-index: 9;
  */
}
@media (min-width: 768px) {
  .mix-actionHd_collapse {
    margin-bottom: -36px;
  }
}

/* ---------------------------------------------------------------------
 Backdrop - Visual background
------------------------------------------------------------------------ */
.backdrop {
  background: #005a9d;
}

.backdrop_accent {
  background: #2885cf;
}

/* ---------------------------------------------------------------------
 Blocks
------------------------------------------------------------------------ */
/*doc

---
title: Blocks
name: layout_2
category: layout
---

```html_example
<div class="blocks blocks_3up">
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
    <div><div class="fillBox"></div></div>
</div>
```

*/
.blocks {
  position: relative;
  overflow: auto;
  font-size: 0;
}
@media (min-width: 768px) {
  .blocks {
    margin-left: -10px;
    margin-right: -10px;
  }
}

@media (min-width: 768px) {
  .blocks:not(.mix-blocks_flex):before, .blocks:not(.mix-blocks_flex):after {
    content: "";
    display: table;
  }
  .blocks:not(.mix-blocks_flex):after {
    clear: both;
  }
}

.blocks > * {
  display: inline-block;
  font-size: 15px;
  width: 100%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 10px;
}
@media (min-width: 768px) {
  .blocks > * {
    font-size: 18px;
  }
}

.blocks_1up4up > *,
.blocks_1up3up > *,
.blocks_1up2up4up > * {
  width: 100%;
}

@media (max-width: 767px) {
  .blocks_1up2up,
  .blocks_1up2up3up {
    padding: 10px 0 0;
    margin-left: 0;
    margin-right: 0;
  }
  .blocks_1up2up > *,
  .blocks_1up2up3up > * {
    padding: 10px 0 0;
    margin-bottom: 10px;
  }
  .blocks_1up3up > * {
    padding: 10px 0 0;
  }
  .mix-blocks_cleanOnSmall > * {
    margin-bottom: 0;
    padding-top: 1px;
  }
}
@media (min-width: 768px) {
  .blocks_1up2up > *,
  .blocks_1up2up3up > *,
  .blocks_1up2up4up > * {
    padding: 0;
    width: calc(50% - 10px * 2);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: calc(10px * 2);
  }
  .blocks_1up3up > *,
  .blocks_2up3up > * {
    padding: 0;
    width: calc(33.3333334% - 10px * 2);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: calc(10px * 2);
  }
  .blocks_1up4up > * {
    padding: 0;
    width: calc(25% - 10px * 2);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: calc(10px * 2);
  }
}
@media (min-width: 1122px) {
  .blocks_1up2up3up > * {
    padding: 0;
    width: calc(33.3333334% - 10px * 2);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: calc(10px * 2);
  }
  .blocks_1up2up4up > * {
    padding: 0;
    width: calc(25% - 10px * 2);
  }
}
/*----------------------------------------------------------------------
 Flexbox Blocks
---------------------------------------------------------------------- */
.mix-blocks_flex {
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-content: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mix-blocks_flex > * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mix-blocks_vCenter {
  -ms-flex-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

/*----------------------------------------------------------------------
 Blocks Mixin
---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .blocks_2up {
    margin: 0;
  }
}

.blocks_2up > * {
  width: 50%;
}
@media (max-width: 767px) {
  .blocks_2up > * {
    width: 50%;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .blocks_3up {
    margin: 0;
  }
}

.blocks_3up > * {
  width: 33.3333333333%;
}
@media (max-width: 767px) {
  .blocks_3up > * {
    width: 33.3333333333%;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .blocks_4up {
    margin: 0;
  }
}

.blocks_4up > * {
  width: 25%;
}
@media (max-width: 767px) {
  .blocks_4up > * {
    width: 25%;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .blocks_5up {
    margin: 0;
  }
}

.blocks_5up > * {
  width: 20%;
}
@media (max-width: 767px) {
  .blocks_5up > * {
    width: 20%;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
 Body Copy
------------------------------------------------------------------------ */
/*doc
---
title: Body Copy
name: bodyCopy
category: typography
---

```html_example
<div class="bodyCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
```

##Body Copy Modifiers
To modify the `bodyCopy`, simply apply the modifier class for the desired style.

Modifier                                                                                              | Modifier Class
----------------------------------------------------------------------------------------------------- | -----------------
<div class="bodyCopy bodyCopy_sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>      | `bodyCopy_sm`
<div class="bodyCopy bodyCopy_lrg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>     | `bodyCopy_lrg`
<div class="bodyCopy bodyCopy_goBig">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>   | `bodyCopy_goBig`

*/
.bodyCopy {
  font-size: 15px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .bodyCopy {
    font-size: 18px;
  }
}

.bodyCopy p + p {
  margin-top: 1em;
}

.bodyCopy_sm {
  font-size: smaller;
}

.bodyCopy_lrg {
  font-size: larger;
}

@media (min-width: 768px) {
  .bodyCopy_goBig {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------
 Button class
------------------------------------------------------------------------ */
/*doc

---
title: Button
name: btn
category: modules
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example
<button class="btn">Click</button>
<a class="btn" href="#">Don't click</a>
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

```html_example
<div class="btn">Button</div>
```

```html_example
<button class="btn btn_secondary">Secondary</button>
<a class="btn btn_secondary" href="#">Secondary</a>
```

```html_example
<button class="btn" disabled>Disabled</button>
<a class="btn btn_disabled" href="#">Don't click</a>
```

*/
.btn {
  box-sizing: border-box;
  display: inline-block;
  color: #ffffff;
  background-color: #005a9d;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-align: center;
  line-height: 1;
  -webkit-appearance: none;
  text-decoration: none;
  min-width: 100px;
}
@media (min-width: 768px) {
  .btn {
    min-width: 200px;
  }
}

.btn:hover,
.btn:focus {
  background-color: #0270c7;
  cursor: pointer;
  text-decoration: none;
}

.btn_secondary {
  background-color: #2885cf;
}

.btn_secondary:hover,
.btn_secondary:focus {
  background-color: #009fda;
}

.btn_alt {
  background-color: #fdd224;
  color: #414141;
}

.btn_alt:hover,
.btn_alt:focus {
  background-color: #ed9325;
}

.btn_clean {
  display: inline;
  color: #0270c7;
  background: none;
  border-radius: 0;
  padding: 0;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: normal;
  text-align: left;
  min-width: 0;
}

.btn_clean:hover,
.btn_clean:focus {
  background: none;
  text-decoration: underline;
}

.btn_disabled,
.btn_disabled:hover,
.btn:disabled,
.btn:disabled:hover {
  background-color: #cccccc;
  color: #777777;
  cursor: default;
}

/* Button mix-ins */
.mix-btn_stretch {
  width: 100%;
}

.mix-btn_alt {
  background-color: #2885cf;
}

.btnAlt {
  display: block;
  padding: 20px;
  color: #414141;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .btnAlt {
    margin: 10px 20px;
  }
}

.btnAlt:active {
  background-color: #f9f9f9;
}

.btnAlt:hover {
  color: #414141;
  text-decoration: none;
  background-color: #ffffff;
}

.btnAlt_disabled,
.btnAlt_disabled:hover,
.btnAlt:disabled,
.btnAlt:disabled:hover {
  background-color: #cccccc;
  color: #777777;
  cursor: default;
}

.mix-btnAlt_lrg {
  font-size: 24px;
}

.mix-btn_inline {
  min-width: 0;
}

/* ---------------------------------------------------------------------
 Chapter Header
------------------------------------------------------------------------ */
/*doc
---
title: Chapter Modules
name: stage30
category: stage
---
*/
/*doc
---
name: stage31
category: stage
---

##Chapter Header
```html_example
<div class="stage">
    <div class="chapterHd">
        <a href="#" class="chapterHd-previous">
            <i class="icn icn_left"></i>
        </a>
        <div class="chapterHd-bd">
            <div class="media media_centered mix-media_stackedOnMobile">
                <div class="media-element">
                    <img src="http://placehold.it/255x165" class="img">
                </div>
                <div class="media-bd">
                    <h1 class="hdg hdg_2">Long Lesson Title On One Line</h1>
                </div>
            </div>
        </div>
        <a href="#" class="chapterHd-next">
            <i class="icn icn_right"></i>
        </a>
    </div>
</div>
```
*/
.chapterHdWrapper {
  background-color: #0270c7;
}

.chapterHd {
  box-sizing: border-box;
  position: relative;
  color: #ffffff;
  padding: 20px 50px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .chapterHd {
    padding: 30px 90px;
    width: 768px;
  }
}
@media (min-width: 1122px) {
  .chapterHd {
    width: 900px;
  }
}

.chapterHd-previous,
.chapterHd-next {
  display: block;
  position: absolute;
  top: calc(50% - 15px);
  height: 30px;
  width: 30px;
  color: #ffffff;
  font-size: 30px;
}

.chapterHd-previous {
  left: 10px;
}
@media (min-width: 1122px) {
  .chapterHd-previous {
    left: 0;
  }
}

.chapterHd-next {
  right: 10px;
}
@media (min-width: 1122px) {
  .chapterHd-next {
    right: 0;
  }
}

@media (min-width: 1122px) {
  .chapterHd-previous:after,
  .chapterHd-next:after {
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: 10px;
    text-align: center;
  }
}

@media (min-width: 1122px) {
  .chapterHd-previous:after {
    content: "Previous";
    left: 30px;
  }
}

@media (min-width: 1122px) {
  .chapterHd-next:after {
    content: "Next";
    right: 30px;
  }
}

@media (max-width: 767px) {
  .chapterHd-bd {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
 Chapter List
------------------------------------------------------------------------ */
/*doc
---
name: stage33
category: stage
---

##Chapter List
```html_example
<div class="stage">
    <ul class="chapterList">
        <li>
            <a href="#" class="btnAlt">
                <div class="media media_centered">
                    <div class="media-element">
                        <div class="media media_stacked">
                            <div class="media-element">
                                <div class="u-center">
                                    <i class="icn icn_checkmark mix-icn_complete"></i>
                                </div>
                            </div>
                            <div class="media-bd">
                                <div class="u-center">100%</div>
                            </div>
                        </div>
                    </div>
                    <div class="media-bd">
                        <h3 class="hdg hdg_4">Medium Lesson Title shown here</h3>
                        <div class="bodyCopy">Migas listicle biodiesel Pinterest, listicle biodiesel Pinterest, Thundercats put a bird on it trade pop-up.</div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="btnAlt">
                <div class="media media_centered">
                    <div class="media-element">
                        <div class="media media_stacked">
                            <div class="media-element">
                                <div class="u-center">
                                    <img src="assets/media/images/FPO_pie-2color.png" class="img" style="width: 30px">
                                </div>
                            </div>
                            <div class="media-bd">
                                <div class="u-center">90%</div>
                            </div>
                        </div>
                    </div>
                    <div class="media-bd">
                        <h3 class="hdg hdg_4">Medium Lesson Title shown here</h3>
                        <div class="bodyCopy">Migas listicle biodiesel Pinterest, listicle biodiesel Pinterest, Thundercats put a bird on it trade pop-up.</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>
```
*/
.chapterList > * + * {
  border-top: 1px solid #cccccc;
}
@media (min-width: 768px) {
  .chapterList > * + * {
    border-top: none;
    margin-top: 10px;
  }
}

.chapterList_completed > *:first-child {
  border-top: 4px solid #0270c7;
}

/* ---------------------------------------------------------------------
 Classmates
------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .classmates {
    font-size: 0;
  }
}

@media (min-width: 768px) {
  .classmates > * {
    font-size: 15px;
    display: inline-block;
    width: calc(33.333333% - 20px);
    margin: 0 10px 20px 10px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .classmates > * {
    font-size: 18px;
  }
}

.classmates-classmate {
  display: block;
  position: relative;
  background-color: #f9f9f9;
  color: #414141;
  font-size: 22px;
  line-height: 1.2;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .classmates-classmate {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
@media (min-width: 768px) {
  .classmates-classmate {
    display: table;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  }
}

.classmates-classmate span {
  display: table-cell;
  box-sizing: border-box;
  height: 54px;
  padding: 0 45px 0 20px;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .classmates-classmate span {
    text-align: center;
    height: 94px;
    padding: 20px 45px 20px 20px;
  }
}

.classmates-classmate span:before {
  content: "\e60f";
  font-family: "marycon";
  color: #009fda;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 10px;
  top: 50%;
  display: block;
  height: 22px;
  margin-top: -11px;
}

.classmates-classmate:active {
  background-color: #f9f9f9;
}

.classmates-classmate:hover {
  color: #414141;
  text-decoration: none;
  background-color: #ffffff;
}

.classmates-classmate_disabled,
.classmates-classmate_disabled:hover,
.classmates-classmate:disabled,
.classmates-classmate:disabled:hover {
  background-color: #cccccc;
  color: #777777;
  cursor: default;
}

.classmates-classmate_disabled span:before,
.classmates-classmate:disabled span:before {
  color: #777777;
}

/* ---------------------------------------------------------------------
 Large cloud based icons
------------------------------------------------------------------------ */
.cloud {
  display: block;
  position: relative;
  width: 150px;
  margin: 0 auto;
  z-index: 1;
}

.cloud:before,
.cloud:after {
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  display: block;
}

.cloud:before {
  content: "\e61f";
  font-size: 125px;
  margin: 0 auto;
  color: #cccccc;
}

.cloud_cloudsucces:before {
  content: "\e61c";
}

.cloud_cloudup:before {
  content: "\e61d";
}

.cloud_clouddown:before {
  content: "\e61e";
}

.mix-cloud_tondo:before {
  font-size: 110px;
  line-height: 150px;
  height: 150px;
  width: 150px;
  background-color: #0270c7;
  border-radius: 50%;
  color: #ffffff;
}

.mix-cloud_spinner:after {
  content: "\e626";
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: -1;
  height: 162px;
  width: 162px;
  line-height: 1;
  font-size: 162px;
  border-radius: 50%;
  color: #ed9325;
  background-color: #fdd224;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-direction: "";
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-direction: "";
  -moz-animation-iteration-count: infinite;
  -o-animation-name: spin;
  -o-animation-duration: 4000ms;
  -o-animation-direction: "";
  -o-animation-iteration-count: infinite;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-direction: "";
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* ---------------------------------------------------------------------
 Contact Us Page
------------------------------------------------------------------------ */
.contact_us p {
  font-size: 14px;
}
.contact_us .contact_info {
  display: inline-block;
  width: 100%;
}
.contact_us .contact_info i {
  padding-right: 10px;
}
.contact_us .contact_info p {
  padding: 2px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .contact_us .contact_info p {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
 Content Wrapper
------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .contentWrapper {
    padding-bottom: 160px;
  }
}
@media (min-width: 768px) {
  .contentWrapper {
    padding-top: 40px;
    padding-bottom: 10px;
    position: relative;
  }
}
@media (min-width: 1122px) {
  .contentWrapper {
    padding-bottom: 0;
  }
}

@media (min-width: 1122px) {
  .contentWrapper_lrg {
    padding-top: 80px;
  }
  .contentWrapper_lrg.login {
    min-height: 720px;
  }
  .contentWrapper_lrg.reset-password {
    min-height: 880px;
  }
  .contentWrapper_lrg.enroll-student {
    min-height: 1230px;
  }
  .contentWrapper_lrg.enroll-confirm {
    min-height: 950px;
  }
  .contentWrapper_lrg.enroll-confirmation {
    min-height: 730px;
  }
}

@media (min-width: 1122px) {
  .mix-contentWrapper_dashboardIndent {
    padding-right: 65px;
  }
}

.mix-contentWrapper_accent {
  background-color: #009fda;
}

/* ---------------------------------------------------------------------
 Conversation
------------------------------------------------------------------------ */
/*doc
---
name: conversation
category: stage
---

##Conversation
```html_example
```
*/
.conversation:before, .conversation:after {
  content: "";
  display: table;
}
.conversation:after {
  clear: both;
}

.conversation-image {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #cccccc;
}
@media (min-width: 768px) {
  .conversation-image {
    width: 75px;
    height: 75px;
  }
}

.conversation-initial {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #0270c7;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .conversation-initial {
    width: 75px;
    height: 75px;
    line-height: 75px;
    font-size: 38px;
  }
}

.conversation-initial_me {
  background-color: #fdd224;
}

.mix-conversation_left .conversation-image,
.mix-conversation_left .conversation-initial {
  float: left;
}

.mix-conversation_right .conversation-image,
.mix-conversation_right .conversation-initial {
  float: right;
}

.conversation-text {
  box-sizing: border-box;
  width: calc(100% - 55px);
  position: relative;
  padding: 22px 25px;
  background-color: #f9f9f9;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .conversation-text {
    width: calc(100% - 100px);
  }
}

.mix-conversation_left .conversation-text {
  float: right;
  border-radius: 0 8px 8px 8px;
}

.mix-conversation_right .conversation-text {
  float: left;
  border-radius: 8px 0 8px 8px;
}

.conversation-text:before,
.conversation-text:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid #f9f9f9;
}

.conversation-text:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 24px solid rgba(0, 0, 0, 0.1);
}

.mix-conversation_left .conversation-text:before {
  left: -23px;
  border-left: 23px solid transparent;
}

.mix-conversation_left .conversation-text:after {
  left: -20px;
  border-left: 20px solid transparent;
}

.mix-conversation_right .conversation-text:before {
  right: -24px;
  border-right: 24px solid transparent;
}

.mix-conversation_right .conversation-text:after {
  right: -20px;
  border-right: 20px solid transparent;
}

.conversationHd {
  font-size: small;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.modal-content_share .conversation-text {
  box-shadow: none;
  background-color: transparent;
  width: 100%;
}

/* ---------------------------------------------------------------------
 Course Header
------------------------------------------------------------------------ */
/*doc
---
title: Course Modules
name: stage50
category: course
---
*/
/*doc
---
name: Course Header
category: course
---

##Course Header
```html_example
<div class="stage">
    <div class="courseHd">
        <h1 class="courseTitle">Course Title</h1>
    </div>
</div>
```
*/
.courseHd {
  padding: 25px;
  text-align: center;
}
@media (max-width: 767px) {
  .courseHd {
    border-bottom: 4px solid #cccccc;
    background-color: #f9f9f9;
  }
}

/* ---------------------------------------------------------------------
 Course List
------------------------------------------------------------------------ */
/*doc
---
name: Course List
category: course
---

##Course List
```html_example
<div class="stage">
    <ul class="courseList">
        <li>
            <input type="checkbox" name="checkbox" id="checkbox1" class="field_tick"/>
            <label for="checkbox1" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response to a matching question that is very long and wraps two lines</label>
        </li>
    </ul>
</div>
```
*/
.courseList > * + * {
  margin-top: 5px;
}

.courseList a {
  display: block;
  padding: 20px 25px;
  color: #000000;
  background-color: #e2e2e2;
}

.courseList a:hover {
  color: #000000;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
 Error class
------------------------------------------------------------------------ */
.error {
  font-weight: 600;
  color: #d9534f;
}

.error_warning {
  background-color: #e0e0e0;
  padding: 3px;
}

/* ---------------------------------------------------------------------
 Exception
------------------------------------------------------------------------ */
.exception {
  background-color: white;
  min-height: calc(100vh - 155px);
}

.exception-container {
  max-width: 1000px;
  margin: auto;
  padding: 20px 40px;
}

.background-image {
  background-position: center;
  max-height: 400px;
  text-align: center;
  color: #fff;
}

.background-image.bi-404 {
  background: #333;
  background-image: url("../media/images/404-background-image-desktop.jpg");
}

.background-image.bi-500 {
  background: #333;
  background-image: url("../media/images/500-background-image-desktop.jpg");
}

.exception-text {
  max-width: 600px;
  margin: auto;
  opacity: 0.8;
  padding: 60px 30px;
  font-weight: 700;
  line-height: 1.133333333;
}
.exception-text .ec-code {
  font-size: 160px;
}
.exception-text .ec-code-sm {
  font-size: 132px;
}
.exception-text .ec-txt {
  font-size: 26px;
}

.exception-info {
  padding-top: 20px;
}
.exception-info p {
  padding-top: 15px;
}
.exception-info li {
  padding: 5px;
  margin-left: 25px;
}
.exception-info ul {
  padding-top: 10px;
  list-style-type: square;
}
.exception-info h3 {
  padding-top: 30px;
  font-weight: 800;
}
.exception-info p, .exception-info li {
  font-size: 16px;
}

@media (max-width: 767px) {
  .exception-text .ec-code {
    font-size: 102px;
  }
  .exception-text .ec-txt {
    font-size: 18px;
  }
  .exception-container {
    padding: 10px 20px;
  }
}
/* ---------------------------------------------------------------------
 Flash
------------------------------------------------------------------------ */
.flash {
  display: block;
  padding: 10px;
  background-color: #ffffff;
  text-align: center;
}

/* ---------------------------------------------------------------------
 Section File Download
------------------------------------------------------------------------ */
.fileDownload {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.fileDownload.isActive {
  visibility: visible;
  max-height: 500px;
}

/* ---------------------------------------------------------------------
 Form Elements
------------------------------------------------------------------------ */
/*doc
---
title: Forms
name: forms10
category: forms
---

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <label class="label" for="sample1">
                This is a label
            </label>
            <input type="text" class="field_textbox" id="sample1">
        </li>
        <li>
            <input type="checkbox" name="checkbox" id="checkbox1" class="field_tick"/>
            <label for="checkbox1" class="label label_tick mix-label_check">Check here if you agree.</label>
        </li>
        <li>
            <button type="submit" class="btn mix-btn_stretch">Submit</button>
        </li>
    </ul>
</form>
```
*/
.formIndent {
  padding-left: 15px;
  padding-right: 15px;
}

/* ---------------------------------------------------------------------
 Form Labels
------------------------------------------------------------------------ */
/*doc
---
title: Labels
name: forms20
category: forms
---

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <label class="label" for="sample1">
                This is a label
            </label>
            <input type="text" class="field_textbox" id="sample1">
        </li>
        <li>
            <label class="label required" for="sample2">
                This is a label for a required field<span>
            </label>
            <input type="text" class="field_textbox" id="sample2" required="required">
        </li>
    </ul>
</form>
```
*/
.label {
  display: block;
  margin: 0 15px 5px;
  font-size: 15px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .label {
    font-size: 18px;
  }
}

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

.required_clean:after {
  content: "";
}

/* ---------------------------------------------------------------------
 Text Boxes
------------------------------------------------------------------------ */
/*doc
---
title: Text Boxes
name: forms30
category: forms
---

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <label class="label" for="sample2-1">Label</label>
            <input type="text" class="field_textbox" id="sample2-1">
        </li>
        <li>
            <label class="label" for="sample2-2">Disabled Textbox</label>
            <input type="text" class="field_textbox" id="sample2-2" disabled />
        </li>
    </ul>
</form>
```
*/
.field_textbox {
  margin: 0;
  box-sizing: border-box;
  padding: 5px 15px;
  border: 1px solid #cccccc;
  border-radius: 20px;
  height: 40px;
  width: 100%;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  color: #414141;
  font-size: 15px;
}
@media (min-width: 768px) {
  .field_textbox {
    font-size: 18px;
  }
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #414141 !important;
}

::-webkit-input-placeholder {
  color: #cccccc;
}

:-moz-placeholder { /* Firefox 18- */
  color: #cccccc;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #cccccc;
}

:-ms-input-placeholder {
  color: #cccccc;
}

.field_textbox:disabled {
  border-color: #cccccc;
  background-color: #cccccc;
  cursor: default;
  opacity: 1; /* Override iOS opacity change affecting text & background color */
  color: #000000;
}

.field_textbox:focus {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25), 0 0 0 1000px white inset;
}

/* ---------------------------------------------------------------------
 Textareas
------------------------------------------------------------------------ */
/*doc
---
title: Textareas
name: forms40
category: forms
---

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <label class="label" for="sample3-1">Label</label>
            <textarea class="field_textarea" id="sample3-1"></textarea>
        </li>
        <li>
            <label class="label" for="sample3-2">Disabled Textarea</label>
            <textarea class="field_textarea" id="sample3-2" disabled></textarea>
        </li>
    </ul>
</form>
```

*/
.field_textarea {
  box-sizing: border-box;
  padding: 5px 15px;
  margin: 0;
  border: 1px solid #cccccc;
  border-radius: 20px;
  width: 100%;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  color: #414141;
  font-size: 15px;
}
@media (min-width: 768px) {
  .field_textarea {
    font-size: 18px;
  }
}

.field_textarea:disabled {
  border-color: #cccccc;
  background-color: #cccccc;
  cursor: default;
  opacity: 1; /* Override iOS opacity change affecting text & background color */
  color: #000000;
}

.mix-field_question {
  min-height: 100px;
}

/* ---------------------------------------------------------------------
 Input Ticks
------------------------------------------------------------------------ */
/*doc
---
title: Checkboxes
name: forms50
category: forms
---

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <input type="checkbox" name="checkbox2" id="checkbox2-1" class="field_tick" checked/>
            <label for="checkbox2-1" class="label label_tick mix-label_check">Lorem ipsum dolor sit amet.</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox2" id="checkbox2-2" class="field_tick"/>
            <label for="checkbox2-2" class="label label_tick mix-label_check">Consectetur adipiscing elit.</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox2" id="checkbox2-3" class="field_tick" disabled/>
            <label for="checkbox2-3" class="label label_tick mix-label_check">Consectetur adipiscing elit.</label>
        </li>
    </ul>
</form>
```

##Alternate checkbox
```html_example
<form class="form">
    <ul class="vList">
        <li>
            <input type="checkbox" name="checkbox2" id="checkbox3-1" class="field_tick" checked/>
            <label for="checkbox3-1" class="label label_tick mix-label_checkAlt">Lorem ipsum dolor sit amet.</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox2" id="checkbox3-2" class="field_tick"/>
            <label for="checkbox3-2" class="label label_tick mix-label_checkAlt">Consectetur adipiscing elit.</label>
        </li>
        <li>
            <input type="checkbox" name="checkbox2" id="checkbox3-3" class="field_tick" disabled/>
            <label for="checkbox3-3" class="label label_tick mix-label_checkAlt">Consectetur adipiscing elit.</label>
        </li>
    </ul>
</form>
```
*/
/*doc
---
title: Radio Buttons
name: forms60
category: forms
---

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <input type="radio" name="radio2" id="radio2-1" class="field_tick" checked/>
            <label for="radio2-1" class="label label_tick mix-label_radio">Lorem ipsum dolor sit amet.</label>
        </li>
        <li>
            <input type="radio" name="radio2" id="radio2-2" class="field_tick"/>
            <label for="radio2-2" class="label label_tick mix-label_radio">Consectetur adipiscing elit.</label>
        </li>
        <li>
            <input type="radio" name="radio2" id="radio2-3" class="field_tick" disabled/>
            <label for="radio2-3" class="label label_tick mix-label_radio">Consectetur adipiscing elit.</label>
        </li>
    </ul>
</form>
```

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <input type="radio" name="radio2" id="radio3-1" class="field_tick" checked/>
            <label for="radio3-1" class="label label_tick mix-label_radio mix-label_tickBlock">Lorem ipsum dolor sit amet.</label>
        </li>
        <li>
            <input type="radio" name="radio2" id="radio3-2" class="field_tick"/>
            <label for="radio3-2" class="label label_tick mix-label_radio mix-label_tickBlock">Consectetur adipiscing elit.</label>
        </li>
        <li>
            <input type="radio" name="radio2" id="radio3-3" class="field_tick" disabled/>
            <label for="radio3-3" class="label label_tick mix-label_radio mix-label_tickBlock">Consectetur adipiscing elit.</label>
        </li>
    </ul>
</form>
```

```html_example
<form class="form">
    <ul class="vList">
        <li>
            <input type="radio" name="radio2" id="radio4-1" class="field_tick" checked/>
            <label for="radio4-1" class="label label_tickChat">Lorem ipsum dolor sit amet.</label>
        </li>
        <li>
            <input type="radio" name="radio2" id="radio4-2" class="field_tick"/>
            <label for="radio4-2" class="label label_tickChat">Consectetur adipiscing elit.</label>
        </li>
        <li>
            <input type="radio" name="radio2" id="radio4-3" class="field_tick"/>
            <label for="radio4-3" class="label label_tickChat">Consectetur adipiscing elit.</label>
        </li>
    </ul>
</form>
```
*/
.field_tick {
  display: none;
}

.label_tick {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  line-height: 1.111111111;
  margin: 17px 0;
  padding-left: 49px;
  font-size: 18px;
  font-weight: normal;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.label_tick:before,
.label_tick:after {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.label_tick:before {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 17px);
  left: 0;
  height: 30px;
  width: 30px;
  border: 2px solid #cccccc;
  border-radius: 4px;
  background-color: #ffffff;
}

.mix-label_radio:before {
  border-radius: 50%;
}

.field_tick:checked ~ .label_tick:before {
  border-color: #0270c7;
  background-color: #fdd224;
}

.field_tick:checked ~ .label_tick:after {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
}

.field_tick:checked ~ .mix-label_check:after,
.field_tick:checked ~ .mix-label_checkAlt:after {
  content: "\e615";
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0270c7;
  font-size: 30px;
  top: calc(50% - 15px);
  left: 2px;
  text-align: center;
}

.field_tick:checked ~ .mix-label_checkAlt:after {
  content: "\e60b";
}

.field_tick:checked ~ .mix-label_radio:before {
  background-color: #fdd224;
}

.field_tick:checked ~ .mix-label_radio:after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  left: 7px;
  width: 20px;
  height: 20px;
  background-color: #0270c7;
  border-radius: 50%;
}

.field_tick:disabled ~ .label_tick:before {
  cursor: default;
}

/* Block level Tick Labels */
.mix-label_tickBlock {
  display: block;
  padding: 22px 25px 20px 69px;
  margin: 0;
  background-color: #f9f9f9;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .mix-label_tickBlock {
    border-radius: 8px;
  }
}

.mix-label_tickBlock:hover {
  background-color: #ffffff;
}

.field_tick:checked ~ .mix-label_tickBlock {
  background-color: #f9f9f9;
}

.label_tick.mix-label_tickBlock:before {
  left: 25px;
}

.field_tick:checked ~ .mix-label_check.mix-label_tickBlock:after,
.field_tick:checked ~ .mix-label_checkAlt.mix-label_tickBlock:after {
  left: 27px;
}

.field_tick:checked ~ .mix-label_radio.mix-label_tickBlock:after {
  left: 32px;
}

.field_tick:disabled ~ .mix-label_tickBlock {
  border-color: #cccccc;
  background-color: #cccccc;
  cursor: default;
  color: #414141;
}

/* Chat Tick Labels */
.label_tickChat {
  position: relative;
  display: block;
  padding: 22px 25px;
  margin: 0;
  margin-right: 96px;
  background-color: #f9f9f9;
  border-radius: 8px 0 8px 8px;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
}

.label_tickChat:hover {
  background-color: #ffffff;
}

.label_tickChat:hover:after {
  border-top-color: #ffffff;
}

.field_tick:checked ~ .label_tickChat {
  background-color: #f9f9f9;
}

.label_tickChat:before {
  content: "\e609";
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #cccccc;
  font-size: 63px;
  position: absolute;
  top: 0;
  right: -96px;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  border: 2px solid #cccccc;
  background-color: #ffffff;
  overflow: hidden;
}

.field_tick:checked ~ .label_tickChat:before {
  color: #0270c7;
  border-color: #0270c7;
  background-color: #fdd224;
}

.label_tickChat:after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid #f9f9f9;
  border-right: 20px solid transparent;
}

.field_tick:checked ~ .label_tickChat:after {
  border-top-color: #f9f9f9;
}

/* Tick Button */
.label_tickBtn {
  box-sizing: border-box;
  display: block;
  color: #ffffff;
  background-color: #005a9d;
  border: none;
  padding: 10px 20px;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-align: center;
  line-height: 1;
  -webkit-appearance: none;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .label_tickBtn {
    margin: 0;
  }
}

.label_tickBtn:hover,
.label_tickBtn:focus {
  background-color: #777777;
  cursor: pointer;
  text-decoration: none;
}

.field_tick:checked ~ .label_tickBtn {
  background-color: #fdd224;
  color: #414141;
}

/* ---------------------------------------------------------------------
 Select Menus
------------------------------------------------------------------------ */
.field_select {
  font-size: 18px;
  width: 100%;
  border: 2px solid #cccccc;
  height: 40px;
  background-color: #ffffff;
}

/* ---------------------------------------------------------------------
 Glossary
------------------------------------------------------------------------ */
.glossaryTrigger {
  color: #005a9d;
  position: relative;
  font-weight: 600;
  cursor: pointer;
}

.glossaryTrigger:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  border-bottom: 2px dotted #d9534f;
}

.glossaryTrigger:hover {
  text-decoration: none;
}

.glossaryTerm {
  border-radius: 6px;
  padding: 5px;
  margin: -5px;
  background: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.glossaryTerm.highlighted {
  -webkit-animation-name: termFlash;
  -webkit-animation-duration: 3s;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: termFlash;
  -moz-animation-duration: 3s;
  -moz-animation-direction: alternate;
  -moz-animation-iteration-count: 1;
  -o-animation-name: termFlash;
  -o-animation-duration: 3s;
  -o-animation-direction: alternate;
  -o-animation-iteration-count: 1;
  animation-name: termFlash;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: 1;
}

@-webkit-keyframes termFlash {
  0% {
    background-color: #f0ad4e;
  }
  100% {
    background-color: transparent;
  }
}
@-moz-keyframes termFlash {
  0% {
    background-color: #f0ad4e;
  }
  100% {
    background-color: transparent;
  }
}
@-o-keyframes termFlash {
  0% {
    background-color: #f0ad4e;
  }
  100% {
    background-color: transparent;
  }
}
@keyframes termFlash {
  0% {
    background-color: #f0ad4e;
  }
  100% {
    background-color: transparent;
  }
}
/* ---------------------------------------------------------------------
 Grid
------------------------------------------------------------------------ */
/*doc
---
title: Grid
name: layout_1
category: layout
---

```html_example
<div class="grid">
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
    <div class="grid-col grid-col_1of12">Column</div>
</div>
```

```html_example
<div class="grid">
    <div class="grid-col grid-col_4of12">Column</div>
    <div class="grid-col grid-col_8of12">Column</div>
</div>
```

*/
@media (min-width: 768px) {
  .grid {
    margin-left: -20px;
    margin-right: -20px;
  }
  .grid:before, .grid:after {
    content: "";
    display: table;
  }
  .grid:after {
    clear: both;
  }
}

@media (min-width: 768px) {
  .grid-col {
    float: left;
    position: relative;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .grid-col + .grid-col {
    padding-top: 20px;
  }
}

/* ---------------------------------------------------------------------
 Grid Column Extensions
------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .grid-col_12of12 {
    width: 100%;
  }
  .grid-col_11of12 {
    width: 91.6666666667%;
  }
  .grid-col_10of12 {
    width: 83.3333333333%;
  }
  .grid-col_9of12 {
    width: 75%;
  }
  .grid-col_8of12 {
    width: 66.6666666667%;
  }
  .grid-col_7of12 {
    width: 58.3333333333%;
  }
  .grid-col_6of12 {
    width: 50%;
  }
  .grid-col_5of12 {
    width: 41.6666666667%;
  }
  .grid-col_4of12 {
    width: 33.3333333333%;
  }
  .grid-col_3of12 {
    width: 25%;
  }
  .grid-col_2of12 {
    width: 16.6666666667%;
  }
  .grid-col_1of12 {
    width: 8.3333333333%;
  }
}
/* ---------------------------------------------------------------------
 Grid Pull Objects
------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .mix-grid-col_pull12 {
    right: 100%;
  }
  .mix-grid-col_pull11 {
    right: 91.6666666667%;
  }
  .mix-grid-col_pull10 {
    right: 83.3333333333%;
  }
  .mix-grid-col_pull9 {
    right: 75%;
  }
  .mix-grid-col_pull8 {
    right: 66.6666666667%;
  }
  .mix-grid-col_pull7 {
    right: 58.3333333333%;
  }
  .mix-grid-col_pull6 {
    right: 50%;
  }
  .mix-grid-col_pull5 {
    right: 41.6666666667%;
  }
  .mix-grid-col_pull4 {
    right: 33.3333333333%;
  }
  .mix-grid-col_pull3 {
    right: 25%;
  }
  .mix-grid-col_pull2 {
    right: 16.6666666667%;
  }
  .mix-grid-col_pull1 {
    right: 8.3333333333%;
  }
  .mix-grid-col_pull0 {
    right: 0;
  }
}
/* ---------------------------------------------------------------------
 Grid Push Objects
------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .mix-grid-col_push12 {
    left: 100%;
  }
  .mix-grid-col_push11 {
    left: 91.6666666667%;
  }
  .mix-grid-col_push10 {
    left: 83.3333333333%;
  }
  .mix-grid-col_push9 {
    left: 75%;
  }
  .mix-grid-col_push8 {
    left: 66.6666666667%;
  }
  .mix-grid-col_push7 {
    left: 58.3333333333%;
  }
  .mix-grid-col_push6 {
    left: 50%;
  }
  .mix-grid-col_push5 {
    left: 41.6666666667%;
  }
  .mix-grid-col_push4 {
    left: 33.3333333333%;
  }
  .mix-grid-col_push3 {
    left: 25%;
  }
  .mix-grid-col_push2 {
    left: 16.6666666667%;
  }
  .mix-grid-col_push1 {
    left: 8.3333333333%;
  }
  .mix-grid-col_push0 {
    left: 0;
  }
}
/* ---------------------------------------------------------------------
 Grid Offset Objects
------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .mix-grid-col_offset12 {
    margin-left: 100%;
  }
  .mix-grid-col_offset11 {
    margin-left: 91.6666666667%;
  }
  .mix-grid-col_offset10 {
    margin-left: 83.3333333333%;
  }
  .mix-grid-col_offset9 {
    margin-left: 75%;
  }
  .mix-grid-col_offset8 {
    margin-left: 66.6666666667%;
  }
  .mix-grid-col_offset7 {
    margin-left: 58.3333333333%;
  }
  .mix-grid-col_offset6 {
    margin-left: 50%;
  }
  .mix-grid-col_offset5 {
    margin-left: 41.6666666667%;
  }
  .mix-grid-col_offset4 {
    margin-left: 33.3333333333%;
  }
  .mix-grid-col_offset3 {
    margin-left: 25%;
  }
  .mix-grid-col_offset2 {
    margin-left: 16.6666666667%;
  }
  .mix-grid-col_offset1 {
    margin-left: 8.3333333333%;
  }
  .mix-grid-col_offset0 {
    margin-left: 0;
  }
}
/* ---------------------------------------------------------------------
 Headings
------------------------------------------------------------------------ */
/*doc
---
title: Headings
name: hdg
category: typography
---

```html_example
<h1 class="hdg hdg_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
```

##Heading Modifiers
To modify the `hgd`, simply apply the modifier class for the desired style.

Heading                                   | Modifier Class
----------------------------------------- | -----------------
<h1 class="hdg hdg_1">Heading 1</h1>      | `hdg_1`
<h1 class="hdg hdg_2">Heading 2</h1>      | `hdg_2`
<h1 class="hdg hdg_3">Heading 3</h1>      | `hdg_3`
<h1 class="hdg hdg_4">Heading 4</h1>      | `hdg_4`
*/
.hdg {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

.hdg_1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.133333333;
}
@media (min-width: 768px) {
  .hdg_1 {
    font-size: 30px;
  }
}

.hdg_2 {
  font-size: 22px;
  line-height: 1.083333333;
}
@media (min-width: 768px) {
  .hdg_2 {
    font-size: 26px;
  }
}

.hdg_3 {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.111111111;
}
@media (min-width: 768px) {
  .hdg_3 {
    font-size: 22px;
  }
}

.hdg_4 {
  font-size: 15px;
  font-weight: normal;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .hdg_4 {
    font-size: 18px;
  }
}

.mix-hdg_colorChanger {
  color: #414141;
}
@media (min-width: 768px) {
  .mix-hdg_colorChanger {
    color: #ffffff;
  }
}

/* ---------------------------------------------------------------------
 Horizontal List
------------------------------------------------------------------------ */
/*doc
---
title: Horizontal List
name: List_h
category: modules
---

```html_example
<ul class="hList">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
```
*/
.hList {
  font-size: 0;
}

.hList > * {
  font-size: 15px;
  display: inline-block;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .hList > * {
    font-size: 18px;
  }
}

.hList > * + * {
  margin-left: 10px;
}

.hList_divided > * + * {
  padding-left: 10px;
  border-left: 1px solid #000000;
  margin-left: 10px;
}

.mix-hList_extended > * + * {
  margin-left: 20px;
}

/* ---------------------------------------------------------------------
 Icons - Custom icon font family created with IcoMoon
------------------------------------------------------------------------ */
/*doc

---
title: UI Icons
name: icn
category: iconography
---

Typically to create an icon, you'll want to us a `<i>` element:

```html_example
<i class="icn icn_lessons"></i>
```
##Icon Modifiers
To create your icon, simply apply the modifier class for the desired icon.

UI Icons                                                          | Modifier Class
----------------------------------------------------------------- | -----------------
<i class="icn icn_hamburger"></i>                                 | `icn_hamburger`
<i class="icn icn_lessons"></i>                                   | `icn_lessons`
<i class="icn icn_classmates"></i>                                | `icn_classmates`
<i class="icn icn_polls"></i>                                     | `icn_polls`
<i class="icn icn_image"></i>                                     | `icn_image`
<i class="icn icn_notes"></i>                                     | `icn_notes`
<i class="icn icn_info"></i>                                      | `icn_info`
<i class="icn icn_progress"></i>                                  | `icn_progress`
<i class="icn icn_glossary"></i>                                  | `icn_glossary`
<i class="icn icn_user"></i>                                      | `icn_user`
<i class="icn icn_caret"></i>                                     | `icn_caret`
<i class="icn icn_close"></i>                                     | `icn_close`
<i class="icn icn_up"></i>                                        | `icn_up`
<i class="icn icn_down"></i>                                      | `icn_down`
<i class="icn icn_left"></i>                                      | `icn_left`
<i class="icn icn_right"></i>                                     | `icn_right`
<i class="icn icn_quotesLeft"></i>                                | `icn_quotesLeft`
<i class="icn icn_quotesRight"></i>                               | `icn_quotesRight`
<i class="icn icn_question"></i>                                  | `icn_question`
<i class="icn icn_checkmark"></i>                                 | `icn_checkmark`
<i class="icn icn_checkmarkAlt"></i>                              | `icn_checkmarkAlt`
<i class="icn icn_cancel"></i>                                    | `icn_cancel`
<i class="icn icn_bookmark"></i>                                  | `icn_bookmark`
<i class="icn icn_download"></i>                                  | `icn_download`
<i class="icn icn_home"></i>                                      | `icn_home`
<i class="icn icn_inprogress"></i>                                | `icn_inprogress`
<i class="icn icn_play"></i>                                      | `icn_play`

##Status Icon Modifiers
To create your status icon, simply apply the modifier class for the desired icon.

Status Icons                                                      | Modifier Class
----------------------------------------------------------------- | -----------------
<i class="icn icn_complete"></i>                                  | `icn_complete`
<i class="icn icn_concluded"></i>                                 | `icn_concluded`
<i class="icn icn_canceled"></i>                                  | `icn_canceled`
<i class="icn icn_incomplete"></i>                                | `icn_incomplete`
<i class="icn icn_suspended"></i>                                 | `icn_suspended`
<i class="icn icn_underway"></i>                                  | `icn_underway`
<i class="icn icn_notstarted"></i>                                | `icn_notstarted`

##Modal Status Icons
To create your modal icon, simply apply the modifier class for the desired icon.

Modal Status Icons                                                | Modifier Class
----------------------------------------------------------------- | -----------------
<i class="icn icn_correct"></i>                                   | `icn_correct`
<i class="icn icn_incorrect"></i>                                 | `icn_incorrect`
*/
.icn {
  display: inline-block;
  position: relative;
}

.icn:before,
.icn:after {
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icn_hamburger:before {
  content: "\e600";
}

.icn_lessons:before {
  content: "\e601";
}

.icn_classmates:before {
  content: "\e602";
}

.icn_polls:before {
  content: "\e603";
}

.icn_image:before {
  content: "\e604";
}

.icn_notes:before {
  content: "\e605";
}

.icon-angle-double-right:before {
  content: "\e902";
}

.icn_info:before {
  content: "\e606";
}

.icn_progress:before {
  content: "\e607";
}

.icn_glossary:before {
  content: "\e608";
}

.icn_user:before {
  content: "\e609";
}

.icn_caret:before {
  content: "\e60a";
}

.icn_close:before {
  content: "\e60b";
}

.icn_up:before {
  content: "\e60c";
}

.icn_down:before {
  content: "\e60d";
}

.icn_left:before {
  content: "\e60e";
  vertical-align: -10%;
}

.icn_right:before {
  content: "\e60f";
  vertical-align: -10%;
}

.icn_quotesLeft:before {
  content: "\e610";
}

.icn_quotesRight:before {
  content: "\e611";
}

.icn_question:before {
  content: "\e612";
}

.icn_checkmark:before {
  content: "\e615";
}

.icn_checkmarkAlt:before {
  content: "\e614";
}

.icn_cancel:before {
  content: "\e616";
}

.icn_bookmark:before {
  content: "\e619";
}

.icn_download:before {
  content: "\e620";
}

.icn_home:before {
  content: "\e621";
}

.icn_inprogress:before {
  content: "\e618";
}

.icn_play:before {
  content: "\e622";
}

.icn_plus:before {
  content: "\ea0a";
}

.icn_hidden:before {
  content: "\e61a";
}

.icn_flag:before {
  content: "\e61b";
}

.icn_cloudsucces:before {
  content: "\e61c";
}

.icn_cloudup:before {
  content: "\e61d";
}

.icn_clouddown:before {
  content: "\e61e";
}

.icn_cloud:before {
  content: "\e61f";
}

.icn_hourglass:before {
  content: "\e623";
}

.icn_minus:before {
  content: "\ea0b";
}

.icn_pencil:before {
  content: "\e624";
}

.icn_share:before {
  content: "\e625";
}

.icn_search:before {
  content: "\e986";
}

.icn_spinner:before {
  content: "\e626";
}

.icn_statsbar:before {
  content: "\e900";
}

.icn_stackoverflow:before {
  content: "\e901";
}

.icon-images2:before {
  content: "\e93e";
}

.icon-bubbles4:before {
  content: "\eac9";
}

.icon-bubble-lines4:before {
  content: "\eadd";
}

.icon-pie-chart5:before {
  content: "\eb84";
}

.icon-eye:before {
  content: "\e9ce";
}

/* Status Icons */
.icn_complete:before,
.icn_concluded:before {
  content: "\e615";
  color: #ffffff;
  background-color: #5cb85c;
  border-radius: 50%;
}

.icn_canceled:before,
.icn_incomplete:before {
  content: "\e616";
  color: #d9534f;
  background-color: #ffffff;
  border-radius: 50%;
}

.icn_suspended:before {
  content: "\e616";
  color: #d9534f;
  background-color: #ffffff;
  border-radius: 50%;
}

.icn_underway:before {
  content: "\e618";
  color: #ffffff;
  background-color: #f0ad4e;
  border-radius: 50%;
}

.icn_pending:before {
  content: "\e623";
  color: #ffffff;
  background-color: #f0ad4e;
  border-radius: 50%;
}

.icn_register:before {
  content: "\e624";
  color: #ffffff;
  background-color: #5cb85c;
  border-radius: 50%;
}

.icn_correct:before {
  content: "\e617";
  color: #fdd224;
  background-color: #ffffff;
  border-radius: 50%;
  font-size: 80px;
  border: 5px solid #0270c7;
  overflow: hidden;
  display: block;
}

.icn_incorrect:before {
  content: "\e613";
  color: #fdd224;
  background-color: #ffffff;
  border-radius: 50%;
  font-size: 80px;
  border: 5px solid #0270c7;
  overflow: hidden;
  display: block;
}

/* Icon Mix-Ins */
.mix-icn_tondo:before {
  display: inline-block;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  text-align: center;
  font-size: 35px;
  overflow: hidden;
  color: #ffffff;
  background-color: #2885cf;
}

.mix-icn_tondoBig:before {
  display: inline-block;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  text-align: center;
  font-size: 75px;
  overflow: hidden;
  color: #ffffff;
  background-color: #2885cf;
}

.mix-icn_md {
  font-size: 35px;
  height: 35px;
}

.mix-icn_lrg {
  font-size: 75px;
  height: 75px;
}

/* ---------------------------------------------------------------------
 Image Upload
------------------------------------------------------------------------ */
.imageUpload {
  background-color: #ffffff;
  border: 3px dotted #cccccc;
  border-radius: 20px;
  padding: 20px;
}
@media (min-width: 768px) {
  .imageUpload {
    padding: 70px 20px;
  }
}

.imageUpload_error {
  position: relative;
  height: 250px;
  background: #ffffff url("../media/images/upload_error.gif") no-repeat bottom left;
}
@media (max-width: 767px) {
  .imageUpload_error {
    background-size: 200px 200px;
  }
}

.imageUpload-icn {
  margin: 0 auto 25px;
}

.imageUpload-bd {
  margin: 0 auto;
  max-width: 330px;
  text-align: center;
}

@media (min-width: 768px) {
  .imageUpload-bd_error {
    position: absolute;
    left: 280px;
    top: 190px;
    max-width: 300px;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
 Image Review
------------------------------------------------------------------------ */
.imageReview {
  border: 3px dotted #cccccc;
  border-radius: 20px;
  padding: 20px;
}

.imageReview-img {
  margin-bottom: 1em;
}

.imageReview-img img {
  margin: 0 auto;
  max-height: 350px;
}
@media (min-width: 768px) {
  .imageReview-img img {
    max-height: 400px;
  }
}
@media (min-width: 1122px) {
  .imageReview-img img {
    max-height: 500px;
  }
}

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

/* ---------------------------------------------------------------------
 Image Styles
------------------------------------------------------------------------ */
.img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.mix-img_stretch {
  width: 100%;
}

.img_brand {
  width: 240px;
}

.img_select {
  width: 350px;
}

.img_chapter {
  width: 280px;
}

.img_content {
  max-width: 660px;
  max-height: 370px;
}
@media (max-width: 1121px) {
  .img_content {
    max-width: 100%;
  }
}

.img_share {
  max-height: 350px;
}
@media (min-width: 768px) {
  .img_share {
    max-height: 400px;
  }
}
@media (min-width: 1122px) {
  .img_share {
    max-height: 500px;
  }
}

/* ---------------------------------------------------------------------
 Figure Styles
------------------------------------------------------------------------ */
.imgfig-img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  /*width: 600px;*/
}

.imgfig-caption {
  font-size: small;
  line-height: 1.4;
  padding-top: 10px;
  text-align: center;
}

/* ---------------------------------------------------------------------
 Glossary
------------------------------------------------------------------------ */
.inlineDefinitionTrigger {
  color: #005a9d;
  position: relative;
  font-weight: 600;
  cursor: pointer;
}

.inlineDefinitionTrigger:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  border-bottom: 2px dotted #3f68f0;
}

.inlineDefinitionTrigger:hover {
  text-decoration: none;
}

.inlineDefinitionTrigger {
  border-radius: 6px;
  padding: 5px;
  margin: -5px;
  background: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* ---------------------------------------------------------------------
 Lesson Header
------------------------------------------------------------------------ */
.lessonHd {
  padding: 0 0 15px;
}
@media (max-width: 767px) {
  .lessonHd {
    background-color: #2885cf;
    color: #ffffff;
    padding: 20px;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
 Login Header
------------------------------------------------------------------------ */
.loginHd {
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
  padding: 25px;
}

/* ---------------------------------------------------------------------
 Matching Activity
------------------------------------------------------------------------ */
.matching {
  display: table;
  color: #000000;
  width: 100%;
}
@media (min-width: 768px) {
  .matching {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  }
}

.matching > * {
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

.matching-prev {
  width: 20px;
  cursor: pointer;
}

.matching-content {
  padding: 20px 0;
}

.matching-next {
  text-align: right;
  width: 20px;
  cursor: pointer;
}

.matching-prev:hover,
.matching-next:hover {
  color: #0270c7;
}

.triggerIsDisabled {
  opacity: 0;
}

/* ---------------------------------------------------------------------
 Media Object
------------------------------------------------------------------------ */
/*doc

---
title: Media Object
name: media
category: layout
---

```html_example
<div class="media">
    <div class="media-element">test</div>
    <div class="media-bd">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Cum praesertim illa perdiscere ludus esset. Itaque his sapiens semper vacabit.
    Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem.
    </div>
</div>

```
*/
.media:before, .media:after {
  content: "";
  display: table;
}
.media:after {
  clear: both;
}

.media-element {
  float: left;
  margin-right: 15px;
}

.media-element_steps {
  width: 45px;
}

.media-element_status {
  width: 80px;
}

.media-bd {
  overflow: hidden;
}

/* Stacked Media Object */
.media_stacked > .media-element {
  float: none;
  margin-right: 0;
  margin-bottom: 5px;
}

.media_stacked > .media-bd {
  overflow: visible;
}

/* Vertically Centered Media Object */
.media_centered {
  display: table;
}

.media_centered > * {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

.media_centered > .media-bd {
  padding-left: 15px;
}

.mix-media-element_divider {
  border-right: 1px solid #cccccc;
  padding-right: 15px;
}

.mix-media_hCentered {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .mix-media_stackedOnMobile,
  .mix-media_stackedOnMobile > * {
    display: block;
  }
}

@media (max-width: 767px) {
  .mix-media_stackedOnMobile > .media-element {
    display: block;
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .mix-media_stackedOnMobile > .media-bd {
    padding-left: 0;
  }
}

/* ---------------------------------------------------------------------
 Media Object
------------------------------------------------------------------------ */
.modal {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 50%;
  z-index: 999999;
  min-width: 280px;
  width: 100%;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
@media (max-width: 767px) {
  .modal {
    padding-bottom: 20px;
  }
}
@media (min-width: 768px) {
  .modal {
    position: fixed;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid #0270c7;
    border-radius: 8px;
  }
}
@media (min-width: 1122px) {
  .modal {
    left: calc(50% - 65px / 2);
  }
}

.modal.isActive {
  visibility: visible;
}

@media (min-width: 768px) {
  .modal_fixed {
    width: 660px;
  }
}

.modal_share {
  padding: 5px 20px 20px 20px;
}
@media (max-width: 767px) {
  .modal_share {
    max-width: 95%;
    background-color: #ffffff;
    top: 145px;
    width: 660px;
    border: 2px solid #0270c7;
    border-radius: 8px;
  }
}
@media (min-width: 768px) {
  .modal_share {
    position: absolute;
    top: 125px;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    max-width: 700px;
  }
}
@media (min-width: 1122px) {
  .modal_share {
    max-width: 900px;
  }
}
@media (min-width: 1200px) {
  .modal_share {
    max-width: 1024px;
  }
}

.modal-close .modal-closeTrigger-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.modal-close:before {
  content: "\e60b";
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: #777777;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.modal-close_share:before {
  top: 5px;
  right: 5px;
  border: 0;
  z-index: 1100;
}

.modal-content {
  text-align: center;
  opacity: 0;
  -webkit-transform: scale(0.75, 0.75);
  -moz-transform: scale(0.75, 0.75);
  -ms-transform: scale(0.75, 0.75);
  -o-transform: scale(0.75, 0.75);
  transform: scale(0.75, 0.75);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-content_share {
  text-align: left;
}

.modal.isActive .modal-content {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.modal-content-hd {
  padding: 0 20px;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
@media (min-width: 768px) {
  .modal-content-hd {
    margin-top: 40px;
    margin-bottom: 1em;
  }
}

.modal-content-hd_feedback {
  margin: 50px 0;
  padding: 0;
  background-color: #0270c7;
  height: 45px;
}

.modal-content-hd_feedback > .icn {
  position: relative;
  top: -25px;
}

.modal-content-bd {
  padding: 0 20px;
  overflow: auto;
  text-align: left;
}
@media (min-width: 768px) {
  .modal-content-bd {
    max-height: 400px;
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .modal-content-bd {
    max-height: 500px;
  }
}

.modal-content-ft {
  padding: 20px 40px 40px;
}

/* ##### MODAL OVERLAY ##### */
.modalOverlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .modalOverlay {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

.modal_share.isActive ~ .modalOverlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.modal.isActive ~ .modalOverlay {
  opacity: 1;
  visibility: visible;
}

/* ---------------------------------------------------------------------
 Number Icons
------------------------------------------------------------------------ */
/*doc

---
title: Number Icons
name: numbercon
category: iconography
---

Typically to create an icon, you'll want to us a `<i>` element:

```html_example
<i class="numbercon">1</i>
```
##Icon Modifiers
To create your icon, simply apply the modifier class for the desired icon.

Number Icon                                                       | Modifier Class
----------------------------------------------------------------- | -----------------
<i class="numbercon mix-numbercon_isComplete">1</i>               | `numbercon_isComplete`
<i class="numbercon mix-numbercon_isInprogress">1</i>             | `mix-numbercon_isInprogress`
*/
.numbercon {
  position: relative;
  display: inline-block;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background-color: #2885cf;
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  line-height: 61px;
  border: 7px solid #ced6ed;
}

/* Status Icon Mix-Ins */
.mix-numbercon_isComplete {
  background-color: #005a9d;
}

.mix-numbercon_isInprogress {
  background-color: #0270c7;
}

.mix-numbercon_isComplete:after,
.mix-numbercon_isInprogress:after {
  font-family: "marycon";
  display: block;
  position: absolute;
  right: -11px;
  top: -11px;
  height: 29px;
  width: 29px;
  border-radius: 50%;
  line-height: 29px;
  text-align: center;
}

.mix-numbercon_isComplete:after {
  content: "\e615";
  background-color: #5cb85c;
  font-size: 29px;
  color: #ffffff;
}

.mix-numbercon_isInprogress:after {
  content: "\e618";
  background-color: #f0ad4e;
  font-size: 24px;
  color: #ffffff;
}

/* ---------------------------------------------------------------------
 Offset
------------------------------------------------------------------------ */
.offset {
  padding: 0 20px;
}

/* ---------------------------------------------------------------------
 Password Guidelines
------------------------------------------------------------------------ */
/*doc
---
title: Password Guidelines
---

*/
.password-guidelines {
  text-align: left !important;
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #FFFFFF;
}
.password-guidelines p {
  font-weight: bold;
  margin-bottom: 15px;
}
.password-guidelines ul li {
  margin-bottom: 10px;
  padding-left: 15px;
}
.password-guidelines i {
  display: none;
}
.password-guidelines .password-icons {
  float: left;
  min-height: 1px;
  width: 10%;
}
.password-guidelines .password-message {
  float: left;
  width: 80%;
}
.password-guidelines .rule-container {
  margin-bottom: 10px;
}
.password-guidelines .rule-container:before, .password-guidelines .rule-container:after {
  content: "";
  display: table;
}
.password-guidelines .rule-container:after {
  clear: both;
}
.password-guidelines .password-icons .icn_checkmark {
  color: #419a3c;
}
.password-guidelines .password-icons .icn_close {
  color: #c4122f;
}

[data-component=PasswordGuidelines] #app_set_password_password_password.checkbox-background {
  background-image: url("../media/images/checkbox-background.png") !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: 95% 50% !important;
  padding-right: 30px;
}
[data-component=PasswordGuidelines] #app_set_password_password_password.close-background {
  background-image: url("../media/images/close-background.png") !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: 95% 50% !important;
  padding-right: 30px;
}
[data-component=PasswordGuidelines] #app_set_password_password_confirm.checkbox-background {
  background-image: url("../media/images/checkbox-background.png") !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: 95% 50% !important;
  padding-right: 30px;
}
[data-component=PasswordGuidelines] #app_set_password_password_confirm.close-background {
  background-image: url("../media/images/close-background.png") !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: 95% 50% !important;
  padding-right: 30px;
}

/* ---------------------------------------------------------------------
 Lesson Progress Pie Chart
------------------------------------------------------------------------ */
.pieChart {
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  background: url("../media/images/ajax-loader.gif") no-repeat;
  background-size: 35px 35px;
}

.pieChart_0,
.pieChart_5,
.pieChart_10,
.pieChart_15,
.pieChart_20,
.pieChart_25,
.pieChart_30,
.pieChart_35,
.pieChart_40,
.pieChart_45,
.pieChart_50,
.pieChart_55,
.pieChart_60,
.pieChart_65,
.pieChart_70,
.pieChart_75,
.pieChart_80,
.pieChart_85,
.pieChart_90,
.pieChart_95,
.pieChart_100 {
  background: url("../media/images/pieChart1.png") no-repeat;
  background-size: 35px 735px;
}

.pieChart_5 {
  background-position: 0 -35px;
}

.pieChart_10 {
  background-position: 0 -70px;
}

.pieChart_15 {
  background-position: 0 -105px;
}

.pieChart_20 {
  background-position: 0 -140px;
}

.pieChart_25 {
  background-position: 0 -175px;
}

.pieChart_30 {
  background-position: 0 -210px;
}

.pieChart_35 {
  background-position: 0 -245px;
}

.pieChart_40 {
  background-position: 0 -280px;
}

.pieChart_45 {
  background-position: 0 -315px;
}

.pieChart_50 {
  background-position: 0 -350px;
}

.pieChart_55 {
  background-position: 0 -385px;
}

.pieChart_60 {
  background-position: 0 -420px;
}

.pieChart_65 {
  background-position: 0 -455px;
}

.pieChart_70 {
  background-position: 0 -490px;
}

.pieChart_75 {
  background-position: 0 -525px;
}

.pieChart_80 {
  background-position: 0 -560px;
}

.pieChart_85 {
  background-position: 0 -595px;
}

.pieChart_90 {
  background-position: 0 -630px;
}

.pieChart_95 {
  background-position: 0 -665px;
}

.pieChart_100 {
  background-position: 0 -700px;
}

/* ---------------------------------------------------------------------
 Photo Uploader
------------------------------------------------------------------------ */
/*doc
---
title: Photo Uploader
name: photoUploader
category: modules
---

##Photo Uploader
```html_example
<label for="photoUploader-input" class="btn btn_alt mix-btn_stretch" class="photoUploader">
    <input id="photoUploader-input" type="file" class="photoUploader-input" />

    <span class="photoUploader-label">Choose Photo</span>
</label>
```
*/
.photoUploader-step {
  display: none;
}

.photoUploader-step_active {
  display: block;
}

/* ---------------------------------------------------------------------
 Pill
------------------------------------------------------------------------ */
.pill {
  position: relative;
  margin-bottom: 15px;
  width: 65px;
  padding: 5px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.pill_mini {
  margin-bottom: 0;
  width: auto;
  display: inline-block;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 18px;
}

.pill_tail:after {
  content: "";
  position: absolute;
  top: 9px;
  right: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid red;
  border-bottom: 10px solid transparent;
}

.mix-pill0 {
  background-color: #3f51b5;
}

.mix-pill0:after {
  border-left-color: #3f51b5;
}

.mix-pill1 {
  background-color: #ff9800;
}

.mix-pill1:after {
  border-left-color: #ff9800;
}

.mix-pill2 {
  background-color: #1976d2;
}

.mix-pill2:after {
  border-left-color: #1976d2;
}

.mix-pill3 {
  background-color: #f44336;
}

.mix-pill3:after {
  border-left-color: #f44336;
}

.mix-pill4 {
  background-color: #00838f;
}

.mix-pill4:after {
  border-left-color: #00838f;
}

.mix-pill5 {
  background-color: #e91e63;
}

.mix-pill5:after {
  border-left-color: #e91e63;
}

.mix-pill6 {
  background-color: #00796b;
}

.mix-pill6:after {
  border-left-color: #00796b;
}

.mix-pill7 {
  background-color: #9c27b0;
}

.mix-pill7:after {
  border-left-color: #9c27b0;
}

.mix-pill8 {
  background-color: #4caf50;
}

.mix-pill8:after {
  border-left-color: #4caf50;
}

.mix-pill9 {
  background-color: #673ab7;
}

.mix-pill9:after {
  border-left-color: #673ab7;
}

.mix-underway {
  background-color: #5cb85c;
  border-radius: 0;
}

.profileMenu {
  display: inline-block;
  vertical-align: middle;
}

.profileMenu-poster {
  display: none;
  position: absolute;
  top: 58px;
  right: 0;
  z-index: 10;
  background-color: #2885cf;
  padding: 10px 0 0;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.75);
  width: 320px;
  text-align: center;
}
@media (min-width: 768px) {
  .profileMenu-poster {
    right: calc((100% - 768px) / 2);
  }
}
@media (min-width: 1122px) {
  .profileMenu-poster {
    top: 30px;
  }
}

.profileMenu-poster:before {
  content: "";
  position: absolute;
  right: 30px;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #2885cf;
}
@media (min-width: 768px) {
  .profileMenu-poster:before {
    right: calc((100% - 768px) / 2 + 30px);
  }
}
@media (min-width: 1122px) {
  .profileMenu-poster:before {
    right: 30px;
  }
}

/* ---------------------------------------------------------------------
 Profile Poster
------------------------------------------------------------------------ */
.profilePoster-hd {
  text-align: center;
}

@media (min-width: 768px) {
  .profilePoster-images {
    margin: 0 30px 10px;
  }
}

.profilePoster-quote {
  position: relative;
  background-color: #2885cf;
  color: #ffffff;
  line-height: 1.75;
  padding: 20px 0 10px;
  margin-bottom: 20px;
}

.profilePoster-quote:before {
  display: block;
  position: relative;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  content: "\e611";
  font-family: "marycon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fdd224;
  font-size: 48px;
  text-align: center;
}

@media (min-width: 768px) {
  .profilePoster-words {
    margin: 0 auto;
    max-width: 740px;
  }
}

/* ---------------------------------------------------------------------
 Progress Bar
------------------------------------------------------------------------ */
.progress-bar-custom {
  background-color: #2885cf !important;
}

.progressHd {
  box-sizing: border-box;
  display: block;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  background-color: #0270c7;
  width: 100%;
  padding: 15px;
  text-align: center;
}
@media (min-width: 1122px) {
  .progressHd {
    padding: 15px 20px;
  }
}

.progressHd h1 {
  color: #ffffff;
  font-size: 22px;
}

.progressSectionChanger {
  box-sizing: border-box;
  display: block;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  background-color: #2885cf;
  width: 100%;
  padding: 15px;
  text-align: center;
}
@media (min-width: 1122px) {
  .progressSectionChanger {
    padding: 15px 20px;
  }
}

/* ---------------------------------------------------------------------
 Quotation
------------------------------------------------------------------------ */
.quotation {
  display: block;
}

.quotation_fixed {
  box-sizing: border-box;
  padding: 10px 20px;
}
@media (min-width: 768px) {
  .quotation_fixed {
    margin: 0 auto;
    width: 660px;
  }
}
@media (min-width: 1122px) {
  .quotation_fixed {
    width: 800px;
  }
}

.mix-quotation_hover:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.quotation_fixed:hover {
  text-decoration: none;
}

.quotation-quote:before {
  content: "“";
}

.quotation-quote:after {
  content: "”";
}

.quotation-citation {
  display: block;
  text-align: right;
}

.quotation-citation:before {
  content: "—";
}

/* ---------------------------------------------------------------------
 Responses
------------------------------------------------------------------------ */
/* ------------------------ Responses Main Page Header ----------------------------- */
.full-height {
  height: 100%;
}

.responses-header .actionHd:nth-child(1) {
  display: none;
}

.responses-header .actionHd:nth-child(2) {
  background-color: #2885cf;
}

.responses-header .btnAlt {
  color: #414141;
  background-color: #f9f9f9;
  display: table;
  position: relative;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.5s ease;
}
.responses-header .btnAlt img {
  position: absolute;
  right: -20px;
  width: 20px;
  height: 25px;
  top: 25%;
}
.responses-header .btnAlt:last-child img {
  display: none;
}
.responses-header .btnAlt:nth-child(3n) img {
  display: none;
}
.responses-header .btnAlt.highlight-chapter {
  background-color: #fdd224;
  box-shadow: 0 3px 0 0 rgba(253, 210, 36, 0.1);
}

.responses-header .stage {
  min-height: 0;
}

.responses-header .hdg.hdg_3 {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

/* ------------------------ END Responses Main Page Header ----------------------------- */
/* ------------------------ Responses Main Page Body ----------------------------- */
.responses-body .interaction-disabled .interaction-question {
  cursor: default !important;
  color: #95989A !important;
}
.responses-body .lesson-box {
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: all 0.5s ease;
}
.responses-body .lesson-box .tooltip-wrapper .tooltip {
  color: #414141;
  text-align: center;
}
.responses-body .lesson-title {
  background-color: #2885cf;
  color: #FFFFFF;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 18px;
  padding: 12px 0 12px 16px;
  cursor: pointer;
}
.responses-body .lesson-title .icn {
  float: right;
  padding-right: 10px;
  display: none;
}
.responses-body .interaction {
  cursor: pointer;
}
.responses-body .interaction .icn {
  color: #2885cf;
  /*
  float: left;
  padding-right:10px;
  */
}
.responses-body .interaction .non-shared {
  color: #fdd224;
}
.responses-body .interaction .interaction-question {
  font-size: 18px;
  font-family: "Source Sans Pro", sans-serif;
  text-decoration: none;
  color: black;
}
.responses-body .align-text {
  padding: 12px 0 0 16px;
}
.responses-body .align-text:last-child {
  padding-bottom: 8px;
}
.responses-body .blocks.blocks_1up3up.mix-blocks_flex {
  align-items: flex-start;
  padding-bottom: 70px;
}

/* ------------------------ END Responses Main Page Body ----------------------------- */
/* ------------------------ Show Responses Page ----------------------------- */
.responses-show {
  display: flex;
  min-height: 100%;
}
.responses-show .side-bar {
  width: 30%;
  background-color: #2885cf;
}
.responses-show .side-bar .free-form {
  margin-left: 30px;
  color: #FFFFFF;
}
.responses-show .side-bar .interaction-question {
  margin-bottom: 25px;
}
.responses-show .side-bar .interaction-name {
  margin-top: 30px;
}
.responses-show .side-bar .interaction-name p {
  margin-bottom: 30px;
}
.responses-show .side-bar .interaction-name.non-shared {
  color: #fdd224;
}
.responses-show .side-bar .interaction-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
}
.responses-show .side-bar .option-label {
  margin-bottom: 20px;
}
.responses-show .main-body {
  width: 70%;
  background-color: #FFFFFF;
}
.responses-show .main-body .short-answer-poll-modal .activityShare .conversation-text {
  padding-left: 0;
  padding-right: 0;
}
.responses-show .main-body .activityShare {
  overflow: visible;
  height: auto;
}
.responses-show .conversation.conversation_share.mix-conversation_left:last-child {
  margin-bottom: 50px;
}
.responses-show .load-more-section {
  padding-bottom: 150px;
}

/* ------------------------ End Show Responses Page ----------------------------- */
/* ------------------------ MEDIA QUERIES ----------------------------- */
@media (max-width: 767px) {
  .response-page-active {
    display: block !important;
  }
  .response-page-inactive .chapter-list {
    display: none !important;
  }
  .response-page-inactive .actionHd:nth-child(1) {
    display: block;
  }
  .full-height {
    height: auto;
  }
  /* ---------- RESPONSES HEADER ------------ */
  .responses-header .stage.mix-stage_wide {
    background-color: transparent;
  }
  .responses-header .btnAlt {
    display: block;
  }
  .responses-header .btnAlt.highlight-chapter {
    background-color: #f9f9f9;
  }
  .responses-header .btnAlt img {
    display: none;
  }
  /* ---------- RESPONSES BODY ------------ */
  .responses-body {
    display: none;
  }
  .responses-body .lesson-title {
    border-radius: 8px;
  }
  .responses-body .lesson-title .icn {
    display: block;
  }
  .responses-body .lesson-box {
    padding-top: 0;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background-color: #f1f1f1;
  }
  .responses-body .lesson-box .interaction-wrapper {
    display: none;
  }
  .responses-body .lesson-box:last-child {
    margin-bottom: 20px;
  }
  /* ---------- RESPONSES SHOW ------------ */
  .responses-show {
    display: block;
  }
  .responses-show .load-more-section {
    padding-bottom: 0;
  }
  .responses-show .side-bar .free-form {
    margin-left: 0;
    padding: 20px 0 20px 20px;
  }
  .responses-show .side-bar {
    width: 100%;
  }
  .responses-show .side-bar .interaction-name {
    margin-top: 0;
  }
  .responses-show .side-bar .interaction-question {
    margin-bottom: 0;
  }
  .responses-show .main-body {
    width: 100%;
  }
  .responses-show .main-body .activityContent.activityContent_share {
    padding-left: 0;
  }
  .responses-show .main-body ul.activityContent {
    padding-left: 20px;
  }
  .responses-show .main-body .activityContent .activityPoll-results {
    margin-bottom: 50px;
  }
  .responses-show .conversation.conversation_share.mix-conversation_left:last-child {
    margin-bottom: 0;
  }
}
/* ---------------------------------------------------------------------
 Poll and Share Results
------------------------------------------------------------------------ */
.resultsList {
  counter-reset: section;
}
@media (min-width: 768px) {
  .resultsList {
    font-size: 0;
  }
}

.resultsList > * {
  position: relative;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .resultsList > * {
    font-size: 15px;
    display: inline-block;
    width: calc(50% - 20px);
    margin: 0 10px 20px 10px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .resultsList > * {
    font-size: 18px;
  }
}
@media (min-width: 1122px) {
  .resultsList > * {
    width: calc(33.333333% - 20px);
  }
}

.resultsList > *:before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -18px;
  display: block;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  line-height: 38px;
  text-align: center;
  background: #2885cf;
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  z-index: 1;
}

.resultsList-result {
  display: block;
  position: relative;
  background-color: #f9f9f9;
  color: #414141;
  line-height: 1.2;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .resultsList-result {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
@media (min-width: 768px) {
  .resultsList-result {
    display: table;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  }
}

.resultsList-result span {
  display: table-cell;
  box-sizing: border-box;
  height: 85px;
  padding: 20px 20px 20px 55px;
  vertical-align: middle;
}

.resultsList-result:active {
  background-color: #f9f9f9;
}

.resultsList-result:hover {
  color: #414141;
  text-decoration: none;
  background-color: #ffffff;
}

.resultsList-result_disabled,
.resultsList-result_disabled:hover,
.resultsList-result:disabled,
.resultsList-result:disabled:hover {
  background-color: #cccccc;
  color: #777777;
  cursor: default;
}

/* ---------------------------------------------------------------------
 Review Mode
------------------------------------------------------------------------ */
.reviewMode {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
  font-weight: 700;
  background: #fdd224;
  text-align: center;
}

/* ---------------------------------------------------------------------
 Search for the front end (Student/teacher)
------------------------------------------------------------------------ */
/*doc
---
title: Search
---

*/
.search-bar {
  background-color: #0270c7;
  padding: 15px 0 15px 0;
}

.search-field-container {
  width: 100%;
}
.search-field-container input[type=text] {
  width: 100%;
}

.pagination-button-highlight a {
  background-color: #0270c7 !important;
  color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------
 Sequencing
------------------------------------------------------------------------ */
.sequencing {
  display: table;
  width: calc(100% - 45px);
  margin-left: 45px;
  color: #000000;
}
@media (min-width: 768px) {
  .sequencing {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  }
}

.sequencing > * {
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

.sequencing-no {
  width: 35px;
}

.sequencing-nav {
  text-align: right;
}
@media (max-width: 767px) {
  .sequencing-nav {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .sequencing-nav .icn:before {
    display: block;
    height: 28px;
    width: 28px;
    line-height: 28px;
  }
}

.sequencing-nav .icn:hover {
  cursor: pointer;
}

.highlight-answer .sequencing {
  box-shadow: 0 0 20px #005a9d;
}

/* ---------------------------------------------------------------------
 Section Header
------------------------------------------------------------------------ */
/*doc
---
title: Section Modules
name: stage50
category: course
---
*/
/*doc
---
name: Section Header
category: section
---

##Section Header
```html_example
<div class="stage">
    <div class="sectionHd">
        <h1 class="sectionTitle">Course Title</h1>
    </div>
</div>
```
*/
.sectionHd {
  padding: 25px;
  background-color: #0270c7;
  color: #ffffff;
}

/* ---------------------------------------------------------------------
 Section List
------------------------------------------------------------------------ */
/*doc
---
name: Section List
category: section
---

##Section List
```html_example
<div class="stage">
    <ul class="sectionList">
        <li>
            <input type="checkbox" name="checkbox" id="checkbox1" class="field_tick"/>
            <label for="checkbox1" class="label label_tick mix-label_checkAlt mix-label_tickBlock">A possible response to a matching question that is very long and wraps two lines</label>
        </li>
    </ul>
</div>
```
*/
.sectionList > * {
  padding: 20px 10px;
}
@media (min-width: 768px) {
  .sectionList > * {
    padding: 20px 0;
    margin: 0 30px;
  }
}

.sectionList > * + * {
  border-top: 1px solid #cccccc;
}

/* ---------------------------------------------------------------------
 Share Navigation
------------------------------------------------------------------------ */
.shareTrigger {
  cursor: pointer;
}

.shareNav {
  display: none;
  position: absolute;
  right: 0;
  text-align: left;
  background: #0270c7;
  color: #ffffff;
  font-size: 15px;
  border-radius: 8px 0 8px 8px;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .shareNav {
    font-size: 18px;
  }
}

.shareNav-menu > * + * {
  margin-top: 5px;
}

.shareNav a {
  display: block;
  color: #ffffff;
  white-space: nowrap;
  padding: 2px 10px;
}

.shareNav a:hover {
  background-color: #fdd224;
  color: #414141;
  text-decoration: none;
}

.shareNav a .icn {
  font-size: small;
  margin-right: 5px;
}

/* ---------------------------------------------------------------------
 Side Nav
------------------------------------------------------------------------ */
/*doc
---
These styles are for the side nav that you see on the front end for teachers and students
*/
.inner {
  display: none;
}

.title {
  width: 90%;
  order: 1;
  margin-right: 20px;
}

.accordion-header, .accordion-header2, .accordion-header3, .page {
  color: #0270c7;
}
.accordion-header a, .accordion-header2 a, .accordion-header3 a, .page a {
  display: block;
  overflow: hidden;
}
.accordion-header:hover, .accordion-header2:hover, .accordion-header3:hover, .page:hover {
  background-color: #f9f9f9;
}
.accordion-header h3 .chapter-title:hover, .accordion-header .lesson-title:hover, .accordion-header2 h3 .chapter-title:hover, .accordion-header2 .lesson-title:hover, .accordion-header3 h3 .chapter-title:hover, .accordion-header3 .lesson-title:hover, .page h3 .chapter-title:hover, .page .lesson-title:hover {
  text-decoration: underline;
  cursor: pointer;
}
.accordion-header span:hover, .accordion-header2 span:hover, .accordion-header3 span:hover, .page span:hover {
  cursor: pointer;
}
.accordion-header .badge:hover, .accordion-header2 .badge:hover, .accordion-header3 .badge:hover, .page .badge:hover {
  cursor: default;
}
.accordion-header:before, .accordion-header:after, .accordion-header2:before, .accordion-header2:after, .accordion-header3:before, .accordion-header3:after, .page:before, .page:after {
  content: "";
  display: table;
}
.accordion-header:after, .accordion-header2:after, .accordion-header3:after, .page:after {
  clear: both;
}

.accordion-header {
  padding: 10px 20px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-header2 {
  padding: 10px 20px 10px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-header3 {
  padding: 10px 20px 10px 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page {
  padding: 10px 0 10px 180px;
}

.ui-accordion-header-active {
  background-color: #f9f9f9;
}

.badge {
  padding: 6px 8px 6px 8px;
  border-radius: 5px;
  background-color: #0270c7;
  color: #FFF;
  display: block;
  order: 1;
  margin-right: 10px;
}

.active-page {
  background-color: #ccc;
  color: #666;
}
.active-page:hover {
  background-color: #ccc;
}
.active-page .badge {
  background-color: #666;
}

.ui-accordion-header-icon {
  order: 2;
}

/* ---------------------------------------------------------------------
 Sitemap for the front end (Student/teacher)
------------------------------------------------------------------------ */
/*doc
---
title: Sitemap
---

*/
.col-md-8.col-sm-8.col-xs-12.col-md-offset-2.col-sm-offset-2 {
  margin-left: 0;
  padding-right: 0;
  width: 100%;
}

.row {
  margin-right: 0 !important;
}

.sitemap li {
  max-width: 700px;
}
.sitemap span {
  padding-left: 7px;
  max-width: 80%;
  display: inline-block;
  word-wrap: break-word;
  color: #0270c7;
}
.sitemap .panel {
  margin: 0;
}
.sitemap .sitemap-page-index {
  float: right;
  padding-right: 7px;
  /*color: #347ab7;*/
  color: #0270c7;
  font-size: 14px;
}
.sitemap .panel-body {
  background-color: #f1f1f1;
  padding: 0 4% 30px 4%;
  width: 100%;
  font-weight: 600;
}
.sitemap .panel-body .sitemap-module div {
  padding-left: 10px;
}
.sitemap .panel-body .sitemap-activity span {
  padding-left: 30px;
}
.sitemap .panel-body .sitemap-course-title {
  font-size: 16px;
  font-weight: 800;
  color: #0270c7;
}
.sitemap .panel-body .sitemap-course-content {
  font-size: 14px;
}
.sitemap .panel-body h1 {
  font-size: 24px;
  margin: 0.75em 0 0.55em 7px;
}
.sitemap .panel-body div {
  background-color: white;
  font-weight: 600;
  margin: 2px;
  max-width: 700px;
  min-height: 22px;
  line-height: 22px;
  -webkit-transition: all 150ms ease-out; /* Safari */
  transition: all 150ms ease-out;
}
.sitemap .panel-body div:hover {
  background-color: rgba(102.0373134328, 186.5895522388, 253.4626865672, 0.3);
}

@media all and (max-width: 767px) {
  .sitemap .panel-body {
    padding: 0 4% 90px 4%;
  }
}
@media all and (max-width: 480px) {
  .sitemap .panel-body .sitemap-course-title {
    font-size: 14px;
    font-weight: 800;
  }
  .sitemap .panel-body .sitemap-course-content {
    font-size: 13px;
  }
  .sitemap h1 {
    font-size: 20px;
  }
}
/* ---------------------------------------------------------------------
 Short answer poll modal
------------------------------------------------------------------------ */
/*doc
---
These styles are for the modal that pops up after a teacher or student click submit on a "SHORT ANSWER POLL"
*/
@media (max-width: 767px) {
  .short-answer-poll-modal {
    background-color: #f1f1f1 !important;
  }
  .short-answer-poll-modal .contentWrapper {
    padding-bottom: 0 !important;
  }
}
.short-answer-poll-modal .split-child:first-child {
  display: flex;
}
.short-answer-poll-modal .split-child .vr.vr_sm {
  order: 2;
  padding-left: 20px;
}
.short-answer-poll-modal .split-child .name-date {
  order: 1;
}
.short-answer-poll-modal .activityShare {
  height: 400px;
  overflow: scroll;
}
.short-answer-poll-modal .conversation-initial {
  display: none;
}
.short-answer-poll-modal .conversation-text {
  float: none;
  background-color: transparent;
  box-shadow: none;
  text-align: left;
  width: auto;
  padding: 0 25px;
}
.short-answer-poll-modal .conversation:first-of-type {
  padding-top: 25px;
}
.short-answer-poll-modal .conversation-text:before, .short-answer-poll-modal .conversation-text:after {
  content: none;
}

/* ---------------------------------------------------------------------
 Show/Hide Password
------------------------------------------------------------------------ */
/*doc
---
title: Show/Hide Password
name: Password_show
category: modules
---
*/
.password_field {
  display: inline-block;
  border: 1px solid #cccccc;
  border-radius: 20px;
  background-color: white;
  height: 38px;
  width: 100%;
}
.password_field .show-hide {
  border: none;
  background: none;
  width: 18px;
  display: inline-block;
  position: relative;
  top: 3px;
}
.password_field .show-hide .eye-open {
  color: rgb(70, 70, 70);
}
.password_field .show-hide .eye-closed:before {
  color: rgba(70, 70, 70, 0.6);
}
.password_field .field_textbox {
  width: 88%;
  border: none;
  height: 100%;
  padding: 5px 0 5px 15px;
  display: inline-block;
}
.password_field .field_textbox:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
}
@media screen and (max-width: 767px) {
  .password_field .field_textbox {
    width: calc(100% - 28px);
  }
  .password_field .show-hide {
    width: 18px;
    padding-right: 10px;
    font-size: 18px;
    text-align: center;
    float: right;
    top: 9px;
  }
  .password_field .show-hide i {
    margin: auto;
  }
}

/* ---------------------------------------------------------------------
 Split Content
------------------------------------------------------------------------ */
/*doc
---
title: Split Content
name: split
category: layout
---

```html_example
ToDo
```
*/
.split {
  display: table;
  width: 100%;
  margin: 0 auto;
}

.split-child {
  display: table-cell;
  vertical-align: top;
  position: relative;
}

.split-child:last-child {
  text-align: right;
}

.mix-split_centered > * {
  vertical-align: middle;
}

.mix-split_inline {
  width: auto;
}

/* 50% split with 10px gutter */
.split_even > *:first-child {
  width: 50%;
  padding-right: 5px;
}

.split_even > *:last-child {
  width: 50%;
  padding-left: 5px;
}

/* ---------------------------------------------------------------------
 Stage - This object contains main content of the page
------------------------------------------------------------------------ */
/*doc
---
title: The Stage
name: stage
category: stage
---

The stage is where the main content of the site will be displayed. It will
be filled using the components listed of this page.

```html_example
<div class="stage">
    <a class="actionHd"><i class="icn icn_left"></i> This is a Heading</a>
    <div class="activityContent">
        <div class="activityContent-block">
            <h2 class="hdg hdg_3">This is a Content Heading</h2>
            <div class="bodyCopy">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Videmus igitur?</p>
            </div>
        </div>
    </div>
</div>
```
*/
@media (max-width: 767px) {
  .stage {
    background-color: #f1f1f1;
  }
}
@media (min-width: 768px) {
  .stage {
    max-width: 660px;
    margin: 0 auto;
    min-height: 265px;
  }
}
@media (min-width: 1122px) {
  .stage {
    max-width: 560px;
  }
}
@media (min-width: 1200px) {
  .stage {
    max-width: 660px;
  }
}

@media (min-width: 768px) {
  .mix-stage_wide {
    max-width: 660px;
  }
}
@media (min-width: 1122px) {
  .mix-stage_wide {
    max-width: 900px;
  }
}

@media (min-width: 768px) {
  .mix-stage_shadow {
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  }
}

.stage_admin {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .stage_admin {
    border-radius: 8px;
    overflow: hidden;
    background-color: #f1f1f1;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .stage_sup {
    background: none;
  }
}

.stage_login {
  margin-bottom: 200px;
}
@media (min-width: 768px) {
  .stage_login {
    width: 320px;
    min-height: initial;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    background-color: #f1f1f1;
    overflow: hidden;
  }
}

/* Inset */
.stage-inset {
  padding: 35px 40px;
}

/*doc
---
name: stage10
category: stage
---

##Stage Footer
The `stage-ft` is used to display actionable buttons. Not all instances of
a stage may have a footer.

```html_example
<div class="stage">
    <a class="actionHd"><i class="icn icn_left"></i> This is a Heading</a>
    <div class="activityContent">
        <div class="activityContent-block">
            <h2 class="hdg hdg_3">This is a Content Heading</h2>
            <div class="bodyCopy">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Videmus igitur?</p>
            </div>
        </div>
    </div>
    <div class="stage-ft">
        <a class="btn">Next Lesson</a>
    </div>
</div>
```
*/
/* Footer */
.stage-ft {
  padding: 20px 20px 0;
  text-align: center;
}
@media (min-width: 768px) {
  .stage-ft {
    padding: 25px 45px 25px;
  }
}

/* ---------------------------------------------------------------------
 Stage Footnote
------------------------------------------------------------------------ */
.stageFootnote {
  box-sizing: border-box;
  max-width: 660px;
  margin: 20px auto 0;
  color: #777777;
}

/* ---------------------------------------------------------------------
 Student Progress
------------------------------------------------------------------------ */
/*doc
---
title: Student Progress
---

*/
.student-progress-container {
  color: #414141;
  padding-right: 0 !important;
  font-family: "Source Sans Pro";
  font-size: 18px;
}
.student-progress-container .progressHd h1 {
  font-size: 22px;
  font-family: source sans pro;
  font-weight: bold;
}
.student-progress-container .classMenu-trigger {
  font-size: 22px;
  Font-family: "Source Sans Pro";
}

.right-side-wrapper {
  padding-right: 0 !important;
  border-left: 1px solid #D7D7D7;
  margin-bottom: -9999px;
  background-color: #F7F7F7;
  position: relative;
}
.right-side-wrapper .row {
  height: calc(100vh - 312px);
  overflow: scroll;
}
.right-side-wrapper .row .main-view {
  position: absolute;
  bottom: 0;
  top: 0;
  overflow: scroll;
}
.right-side-wrapper .row .main-view #activities {
  min-height: 100%;
}
.right-side-wrapper .row .main-view #activities .js-answer-button {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.right-side-wrapper .answer-view {
  background-color: #F7F7F7;
  position: absolute;
  top: 100%;
  z-index: 2;
  bottom: 0;
  padding-bottom: 45px;
  overflow: auto;
}

.main-view {
  z-index: 1;
}

.pre-message {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  font-size: 22px;
  margin-top: 200px;
}

/* ------------------------- SHARED STYLES --------------------------- */
.numbercon.widget {
  margin-right: 20px;
  width: 75px;
  height: 75px;
}

/* ------------------------- END SHARED STYLES --------------------------- */
/* ------------------------- STUDENT VIEW ----------------------------- */
.student-view {
  height: calc(100vh - 312px);
  overflow: scroll;
}
.student-view .student-view-header {
  border-bottom: 1px solid #D7D7D7;
  background-color: #F9F9F9;
  padding: 10px 0 10px 0;
  margin-bottom: 20px;
}
.student-view .student-user {
  cursor: pointer;
}

.active-student .student-user {
  font-weight: bold;
  color: #0270c7;
}

.student-row {
  margin-bottom: 10px;
}

/* ------------------------- END STUDENT VIEW ----------------------------- */
/* ------------------------- LESSON VIEW ------------------------------- */
.lesson-link {
  background-color: #FFF !important;
}

.lesson-name {
  font-size: 22px;
}

/* ------------------------- END LESSON VIEW ------------------------------- */
/* -------------------------- ACTIVITY VIEW -----------------------------------*/
.media.media_centered {
  margin-left: 20px !important;
  overflow: visible;
}

.btn-activity {
  color: #414141;
  text-decoration: none;
  cursor: default;
}

.activity-list {
  padding-top: 20px;
  overflow: scroll;
  max-height: calc(100vh - 550px);
}
.activity-list a {
  text-decoration: none;
}
.activity-list a:hover {
  color: #414141;
  text-decoration: none;
}

.activity-name {
  font-size: 22px;
}

/* -------------------------- END ACTIVITY VIEW -----------------------------------*/
/* --------------------------- ANSWERS VIEW ------------------------------------ */
.question-answer-container {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.activity-number-container {
  display: table-cell;
}

.each-answer-wrapper {
  display: table;
  margin-bottom: 30px;
}

.each-question {
  border-bottom: 1px solid #D3D4D5;
  font-family: "Source Sans Pro";
  font-weight: bold;
  margin-bottom: 10px;
}

.each-answer {
  font-family: "Source Sans Pro";
}

/* --------------------------- END ANSWERS VIEW ------------------------------------ */
/* ------------------------ BANNER AND HEADERS ---------------------------- */
.banner-large {
  color: #FFFFFF;
  cursor: pointer;
  font-size: 22px;
  margin: 0 -15px 0 -15px;
  padding: 10px 0 0 0;
  text-align: center;
  background-color: #005a9d;
}

.banner-small {
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  margin: 0 -15px 0 -15px;
  padding: 10px 0 10px 15px;
}

.banner-mobile {
  display: none;
  color: #FFF;
  background-color: #0270c7;
}

.banner-desktop {
  color: #0270c7;
  background-color: #fdd224;
}

.selected-student {
  margin: 20px 0 20px 20px;
  color: #616161;
}
.selected-student span {
  color: #0270c7;
  font-size: 18px;
}

.selected-lesson {
  font-size: 22px;
  font-family: Helvetica;
  font-weight: bold;
  margin-bottom: 20px;
  margin-left: 20px;
}

/* ------------------------ END BANNER AND HEADERS ---------------------------- */
/* ------------------------ MEDIA QUERIES ----------------------------- */
@media (max-width: 767px) {
  /*
  hide all the views on mobile
  */
  .student-view, .lesson-view, .activity-view, .banner-desktop, .main-view {
    display: none;
  }
  .banner-small.banner-mobile {
    display: block;
  }
  .student-view.active, .lesson-view.active, .activity-view.active, .main-view.active {
    display: block;
  }
  .numbercon.widget {
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 50px;
  }
  .btn-activity {
    margin-bottom: 20px;
  }
  .right-side-wrapper {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
  }
  .right-side-wrapper .row {
    height: auto;
  }
  .right-side-wrapper .row .main-view {
    position: relative;
    height: calc(100vh - 98px);
  }
  .siteFooter {
    margin-top: 0;
    margin-bottom: 0;
  }
  .active-student .student-user {
    font-weight: normal;
    color: #414141;
  }
  .activity-list {
    overflow: scroll;
    max-height: calc(100vh - 300px);
  }
  /*.siteBody {
    padding-bottom: 0;
  }*/
  .inactive-header .progressSectionChanger, .inactive-header .progressHd {
    display: none;
  }
  .student-progress-container, .student-view, .lesson-name, .activity-name, .banner-small, .banner-large {
    font-size: 18px;
  }
  .student-progress-container .classMenu-trigger {
    font-size: 18px;
  }
}
.footer-cover-whitespace {
  height: 100px;
  padding: 30px 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 Supplemental Header
------------------------------------------------------------------------ */
/*doc
---
title: Supplemental Header
name: stage505
category: stage
---
*/
/*doc
---
name: stage515
category: stage
---

##Supplemental Header
```html_example
<div class="stage">
    <div class="supHd">
        <h1 class="hdg hdg_2">Content Page Title</h1>
    </div>
</div>
```
*/
.supHd {
  padding: 0 0 15px;
}
@media (max-width: 767px) {
  .supHd {
    padding: 15px 25px;
  }
}

/* ---------------------------------------------------------------------
 Vertical List
------------------------------------------------------------------------ */
/*
.tooltip {
    position: relative;
}

.tooltip-trigger {
}

.tooltip-info {
    position: absolute;
    right: 0;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: $COLOR_PRIMARY;
    color: $COLOR_REVERSED;
    font-size: small;
    line-height: 1.2;
    z-index: 9;
    min-width: 200px;
    text-align: left;
}

.tooltip-info:before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border-bottom: 10px solid $COLOR_PRIMARY;
    border-left: 10px solid transparent;
}
*/
.tooltip-wrapper {
  cursor: help;
  position: relative;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.tooltip-wrapper:last-child .tooltip {
  top: 110%;
}

.tooltip-wrapper:hover {
  z-index: 1000;
}

.tooltip-wrapper .tooltip {
  background-color: #fdd224;
  top: 140%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip-wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

/* CSS Triangles - see Trevor's post */
.tooltip-wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-bottom: solid #fdd224 10px;
  top: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .tooltip-wrapper .tooltip {
  display: none;
}

.lte8 .tooltip-wrapper:hover .tooltip {
  display: block;
}

/* ---------------------------------------------------------------------
 Video Wrapper
------------------------------------------------------------------------ */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------
 Vertical List
------------------------------------------------------------------------ */
/*doc
---
title: Vertical List
name: List_v
category: modules
---

```html_example
<ul class="vList">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
```
*/
.vList > * + * {
  margin-top: 0.5em;
}

.vList_large > * + * {
  margin-top: 1em;
}

.vList_xlarge > * + * {
  margin-top: 2em;
}

.vList .vList {
  margin-top: 0.5em;
}

.vList_large .vList {
  margin-top: 1em;
}

.vList_xlarge .vList {
  margin-top: 2em;
}

.vList_numbered {
  margin-top: 1em;
  list-style-type: decimal;
  list-style-position: inside;
}

.vList_numbered .vList_numbered {
  list-style-type: lower-latin;
  list-style-position: inside;
  margin-left: 15px;
}

/* ---------------------------------------------------------------------
 Vertical Rhythm
------------------------------------------------------------------------ */
/*doc

---
title: Vertical Rhythm (Spacing)
name: vr
category: layout
---

```html_example
<div class="vr">
    <div class="btn">Element inside the spacer</div>
</div>
<div class="btn">Element below the spacer</div>
```
*/
.vr {
  margin-bottom: 1em;
}

.vr_sm {
  margin-bottom: 0.5em;
}

.vr_x2 {
  margin-bottom: 2em;
}

.vr_x3 {
  margin-bottom: 3em;
}

.vr_x4 {
  margin-bottom: 4em;
}

.vr_x5 {
  margin-bottom: 5em;
}

.vr_x6 {
  margin-bottom: 6em;
}

.vr_x7 {
  margin-bottom: 7em;
}

.vr_x8 {
  margin-bottom: 8em;
}

.vr_r {
  margin-top: 1em;
}

.vr_rx2 {
  margin-top: 2em;
}

.vr_rx3 {
  margin-top: 3em;
}

.vr_rx4 {
  margin-top: 4em;
}

.vr_rx5 {
  margin-top: 5em;
}

.vr_rx6 {
  margin-top: 6em;
}

.vr_rx7 {
  margin-top: 7em;
}

.vr_rx8 {
  margin-top: 8em;
}

/* ---------------------------------------------------------------------
 Wells
------------------------------------------------------------------------ */
.well {
  background-color: #e2e2e2;
  border-radius: 8px;
  padding: 15px;
}

.well_fancy {
  padding: 30px;
}
@media (max-width: 767px) {
  .well_fancy {
    padding: 20px;
    margin-left: -15px;
    margin-right: -15px;
  }
}

.mix-well_clean {
  padding: 0;
}

/* ---------------------------------------------------------------------
 Window Glossary
------------------------------------------------------------------------ */
.windowGlossary a {
  display: block;
  padding: 20px 25px;
  color: #000000;
}

.windowGlossary a:hover {
  color: #000000;
  text-decoration: none;
  background-color: #f9f9f9;
}

/* ---------------------------------------------------------------------
 Wrapper
------------------------------------------------------------------------ */
.wrapper {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 100%;
  padding-bottom: 1px;
}
@media (min-width: 1122px) {
  .wrapper {
    padding-top: 55px;
    padding-bottom: 0;
  }
}

@media (min-width: 1122px) {
  .dashboardIsOn .wrapper {
    width: calc(100% - 435px);
  }
}

/* ---------------------------------------------------------------------
 User Content
------------------------------------------------------------------------ */
/*doc
---
title: Headings
name: userContent_10
category: userContent
---

```html_example
    <div class="userContent">
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </div>
```
*/
/*doc
---
title: Text Formatting
name: userContent_20
category: userContent
---

```html_example
    <div class="userContent">
        <p><a href="#">Anchor text.</a><br />
        <b>Bold text.</b><br />
        <i>Italic text.</i><br />
        <span class="smallCaps">Small Caps text.</span><br />
        <sup>Superscript text.</sup><br />
        <sub>Subscript text.</sub><br />
        <strike>Strikethrough text.</strike><br />
        <u>Underlined text.</u></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
    </div>
```
*/
/*doc
---
title: List Formatting
name: userContent_30
category: userContent
---

```html_example
    <div class="userContent">
        <ol>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
        </ol>
        <ol>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula
                <ol>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                </ol>
            </li>
            <li>Phasellus sed libero ligula</li>
        </ol>
        <ol>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula
                <ul>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                </ul>
            </li>
            <li>Phasellus sed libero ligula</li>
        </ol>
        <ul>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
        </ul>
        <ul>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula
                <ul>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                </ul>
            </li>
            <li>Phasellus sed libero ligula</li>
        </ul>
        <ul>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula</li>
            <li>Phasellus sed libero ligula
                <ol>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                    <li>Phasellus sed libero ligula</li>
                </ol>
            </li>
            <li>Phasellus sed libero ligula</li>
        </ul>
    </div>

```
*/
.userContent {
  color: #414141;
  font-size: 15px;
  line-height: 1.4;
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
}
@media (min-width: 768px) {
  .userContent {
    font-size: 18px;
  }
}

.userContent_sm {
  font-size: 15px;
}

.userContent hr {
  margin: 0 0 12px 0;
  background: #666;
  color: #666;
  height: 1px;
  border: none;
  line-height: 1px;
  font-size: 1px;
}

.userContent img {
  max-width: 660px;
  max-height: 370px;
  margin: 0 auto;
  display: block;
}
@media (max-width: 1121px) {
  .userContent img {
    max-width: 100%;
  }
}

.modal-content .userContent img {
  max-width: 578px;
  max-height: 324px;
}
@media (max-width: 1121px) {
  .modal-content .userContent img {
    max-width: 100%;
  }
}

/* Paragraph Styles ---------------------------------------------------- */
.userContent h1,
.userContent h2,
.userContent h3,
.userContent h4,
.userContent h5,
.userContent h6 {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

.userContent h1 {
  font-size: 26px;
  line-height: 1.133333333;
}
@media (min-width: 768px) {
  .userContent h1 {
    font-size: 30px;
  }
}

.userContent h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.083333333;
}
@media (min-width: 768px) {
  .userContent h2 {
    font-size: 26px;
  }
}

.userContent h3 {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.111111111;
}
@media (min-width: 768px) {
  .userContent h3 {
    font-size: 22px;
  }
}

.userContent h4,
.userContent h5,
.userContent h6 {
  font-size: 15px;
  font-weight: normal;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .userContent h4,
  .userContent h5,
  .userContent h6 {
    font-size: 18px;
  }
}

.userContent_sm h1,
.userContent_sm h2,
.userContent_sm h3,
.userContent_sm h4,
.userContent_sm h5,
.userContent_sm h6 {
  font-weight: 700;
}

.userContent_sm h1 {
  font-size: 18px;
}

.userContent_sm h2 {
  font-size: 17px;
}

.userContent_sm h3 {
  font-size: 16px;
}

.userContent_sm h4,
.userContent_sm h5,
.userContent_sm h6 {
  font-size: 15px;
}

.userContent > * + p {
  margin-top: 1em;
}

.userContent blockquote {
  margin: 0 24px 12px 24px;
  padding: 12px;
  background: #eeeeee;
  font-style: italic;
}

.userContent address {
  margin: 0 0 12px 0;
  font-style: italic;
}

.userContent pre {
  margin: 0 0 12px 0;
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", Monaco, monospace;
}

/* Text Styles --------------------------------------------------------- */
.userContent a {
  color: #0270c7;
}

.userContent em,
.userContent i {
  font-style: italic;
}

.userContent strong,
.userContent b {
  font-weight: bold;
}

.userContent abbr,
.userContent acronym {
  border-bottom: dotted 1px;
}

.userContent sub {
  vertical-align: sub;
  font-size: smaller;
}

.userContent sup {
  vertical-align: super;
  font-size: smaller;
}

.userContent u,
.userContent ins {
  text-decoration: underline;
}

.userContent s,
.userContent strike,
.userContent del {
  text-decoration: line-through;
}

.userContent big {
  font-size: larger;
}

.userContent small {
  font-size: smaller;
}

.userContent .smallCaps {
  font-variant: small-caps;
  font-weight: 600;
}

.userContent q {
  font-style: italic;
}

.userContent q::before {
  content: open-quote;
}

.userContent q::after {
  content: close-quote;
}

.userContent q:lang(en) {
  quotes: "“" "”" "‘" "’";
}

.userContent samp,
.userContent tt,
.userContent code,
.userContent kbd {
  font-family: "Lucida Console", Monaco, monospace;
}

.userContent var {
  font-style: italic;
}

.userContent cite {
  font-style: italic;
}

.userContent dfn {
  font-style: italic;
}

.userContent ins {
  text-decoration: underline;
}

/* List Styles --------------------------------------------------------- */
.userContent ul,
.userContent ol,
.userContent dl {
  margin-top: 0;
  margin-bottom: 12px;
}

.userContent ul {
  list-style-type: disc;
  margin: 0 0 1em 0;
}

.userContent ol {
  list-style-type: decimal;
  margin: 0 0 1em 0;
}

.userContent dt {
  font-weight: bold;
}

.userContent li,
.userContent dd {
  margin: 0 0 0 2em;
}

.userContent > * + ul,
.userContent > * + ol,
.userContent > * + dl {
  margin-top: 1em;
}

/* nested lists have no top/bottom margins */
.userContent ul ul,
.userContent ul ol,
.userContent ul dl,
.userContent ol ul,
.userContent ol ol,
.userContent ol dl,
.userContent dl ul,
.userContent dl ol,
.userContent dl dl {
  margin-top: 0;
  margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
.userContent ol ul,
.userContent ul ul {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
.userContent ol ol ul,
.userContent ol ul ul,
.userContent ul ol ul,
.userContent ul ul ul {
  list-style-type: square;
}

/* Table Styles -------------------------------------------------------- */
.userContent table {
  margin: 0 0 20px 0;
  width: 100% !important;
  border-spacing: 2px;
  border-collapse: separate;
}

.userContent caption {
  font-size: smaller;
}

.userContent tr {
  vertical-align: middle;
}

.userContent tbody {
  vertical-align: middle;
}

.userContent thead {
  vertical-align: middle;
}

.userContent tfoot {
  vertical-align: middle;
}

.userContent td {
  vertical-align: inherit;
  text-align: inherit;
  padding: 2px 4px;
}

.userContent th {
  vertical-align: inherit;
  text-align: inherit;
  font-weight: bold;
  padding: 2px 4px;
  background-color: #666;
  color: #fff;
}

.userContent tr.even td {
  background-color: #ccc;
}

/* CK Editor Styles ---------------------------------------------------- */
.userContent .marker {
  background-color: #ffff00;
}

/* NEEDS TO BE LAST OF THE MODULES*/
/*----------------------------------------------------------------------
 Visibility Classes
---------------------------------------------------------------------- */
.isVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  clip: rect(1px 1px 1px 1px) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
}

.isNotDisplayed {
  display: none;
}

@media (min-width: 768px) {
  .isOnMobileOnly {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@media (max-width: 767px) {
  .isNotOnMobile {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@media (max-width: 1121px) {
  .isOnDesktopOnly {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@media (min-width: 1122px) {
  .isNotOnDesktop {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

/*----------------------------------------------------------------------
 Text Utility Classes
---------------------------------------------------------------------- */
/* These classes aren't their own object and are while they can be used
on their own, they can also be added to another text object to modify the
text's appearance */
.u-bold {
  font-weight: 700;
}

.u-semi {
  font-weight: 600;
}

.u-italic {
  font-style: italic;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-underline {
  text-decoration: underline;
}

.u-small {
  font-size: 13px;
}
@media (min-width: 768px) {
  .u-small {
    font-size: 15px;
  }
}

.u-large {
  font-size: 22px;
}

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

.u-right {
  text-align: right;
}

.u-colorDefault {
  color: #414141;
}

.u-colorPrimary {
  color: #0270c7;
}

.u-colorSecondary {
  color: #fdd224;
}

.u-colorReversed {
  color: #ffffff;
}

.u-offset {
  text-shadow: 0 0 5px #000000;
}

.u-nowrap {
  white-space: nowrap;
}

.u-inline {
  display: inline-block;
  vertical-align: middle;
}

/*----------------------------------------------------------------------
 Background Color Mix-in Utility Classes
---------------------------------------------------------------------- */
.u-bkgd_Primary {
  background-color: #005a9d;
}

.u-bkgd_PrimaryLight {
  background-color: #0270c7;
}

.u-bkgd_PrimaryAlt {
  background-color: #2885cf;
}

.u-bkgd_Secondary {
  background-color: #fdd224;
}

/* NEEDS TO BE LAST */
/* Override Modern CSS */
@media (min-width: 1122px) {
  .contentWrapper {
    padding-bottom: 0px !important;
  }
  .resource-links .resource-links-label a {
    display: none;
  }
}
@media (min-width: 768px) {
  .resource-links .resource-links-label a {
    display: none;
  }
  /***Progress page**/
  .student-view {
    height: calc(100vh - 200px);
    overflow: scroll;
  }
  /**hide answer BTN**/
  .right-side-wrapper .answer-view {
    background-color: #f7f7f7;
    position: relative;
    top: 100%;
    z-index: 2;
    bottom: 0;
    padding-bottom: 45px;
    overflow: auto;
  }
  /**answer display***/
  .right-side-wrapper .row {
    height: calc(100vh - 200px);
    overflow: scroll;
  }
  /**display check**/
  .activity-list {
    padding-top: 10px;
    padding-bottom: 50px;
    overflow: scroll;
    max-height: calc(100vh - 50px);
  }
  /**Show answer BTN***/
  right-side-wrapper .row .main-view #activities .js-answer-button {
    position: absolute;
    width: 100%;
    bottom: auto;
  }
}
@media (max-width: 767px) {
  /****Progress***/
  .right-side-wrapper .row .main-view #activities .js-answer-button {
    position: absolute;
    width: 100%;
    bottom: auto;
  }
  .activity-list {
    overflow: scroll;
    max-height: calc(100vh - 50px);
  }
}