.list__arrows {
  list-style-image: url(/public/images/content/const-list-icon.png);
}
.list__arrows li {
  margin-bottom: 1rem;
}
.list__arrows li em {
  display: inline-block;
  margin-left: 0.25rem;
}

.activity__constLearningCheck {
  position: relative;
  width: 100%;
  margin: 1rem 0;
}
.activity__constLearningCheck .constLearningCheck__questionCount {
  position: absolute;
  top: 0;
  right: 1rem;
  padding: 1rem;
  font-weight: 700;
  border: solid 2px #3486f8;
  border-radius: 3rem;
}
.activity__constLearningCheck .constLearningCheck__wrapper {
  display: flex;
  flex-wrap: nowrap;
  padding-top: 3rem;
  overflow-x: hidden;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content {
  flex: 0 0 auto;
  position: relative;
  left: 0;
  width: 100%;
  padding: 1rem;
  transition: left 1s;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons {
  opacity: 1;
  transition: opacity 1000ms;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul {
  margin: 0;
  padding: 0;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li {
  list-style: none;
  margin: 0.5rem 0;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;
  background: #FFF;
  font-size: 1.2rem;
  text-align: left;
  border: solid 2px #3486f8;
  border-radius: 3rem;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button:hover {
  cursor: pointer;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button.constLearningCheck__incorrectAnswer {
  border: solid 2px #cc4e5c;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button.constLearningCheck__incorrectAnswer span {
  background-color: #cc4e5c;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button.constLearningCheck__correctAnswer {
  border: solid 2px #77DD77;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button.constLearningCheck__correctAnswer span {
  background-color: #77DD77;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  color: #FFF;
  background-color: #3486f8;
  border-radius: 5rem;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__buttons ul li button span.material-icons-outlined {
  font-size: 3rem;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__feedback {
  opacity: 0;
  transition: opacity 1000ms;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__feedback button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: #FFF;
  background-color: #3486f8;
  border: solid 2px #FFF;
  border-radius: 3rem;
  transition: box-shadow 300ms;
}
.activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__feedback button:hover {
  cursor: pointer;
  box-shadow: 0 0 0.2rem black;
}
@media screen and (min-width: 960px) {
  .activity__constLearningCheck .constLearningCheck__wrapper .constLearningCheck__content .constLearningCheck__feedback button {
    font-size: 1.5rem;
  }
}

.opacity__off {
  opacity: 0 !important;
}

.activity__pickThree {
  margin: 1rem 0;
}
.activity__pickThree .pickThree__score--wrapper {
  margin: 1rem 0;
  padding: 1rem;
  background: #FFF;
  border: solid 1px #CCC;
}
.activity__pickThree .pickThree__question--wrapper {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  position: relative;
  overflow-x: hidden;
}
.activity__pickThree .pickThree__question--wrapper .pickThree__question {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
  left: 0;
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  background-color: #FFF;
  font-weight: 700;
  border: solid 2px #CCC;
  border-radius: 5rem;
  overflow: hidden;
  transition: left 1s;
}
.activity__pickThree .pickThree__question--wrapper .pickThree__question img {
  margin-right: 1rem;
}
.activity__pickThree .pickThree__buttons {
  display: flex;
  justify-content: space-between;
}
.activity__pickThree .pickThree__buttons button {
  width: 30%;
  padding: 0.5rem;
  font-size: 1rem;
  color: #FFF;
  background-color: #3486f8;
  border: solid 2px #FFF;
  border-radius: 3rem;
  transition: box-shadow 300ms;
}
.activity__pickThree .pickThree__buttons button:hover {
  cursor: pointer;
  box-shadow: 0 0 0.2rem black;
}
@media screen and (min-width: 960px) {
  .activity__pickThree .pickThree__buttons button {
    font-size: 1.5rem;
  }
}
.activity__pickThree table {
  font-size: 1rem;
}
.activity__pickThree table td {
  width: 33.33333%;
  height: 3.5rem;
  padding: 0 1rem;
  vertical-align: middle;
}
.activity__pickThree table .tableResult {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1s;
}
.activity__pickThree table .tableResult img {
  display: none;
  width: 2rem;
  margin-right: 1rem;
}
@media screen and (min-width: 960px) {
  .activity__pickThree table .tableResult img {
    display: block;
  }
}

/* CSS Document */
/* meyer-reset
================================================== */
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, 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%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

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

footer .footer__wrapper, section {
  max-width: 1200px;
  margin: 0 auto;
}

@font-face {
  font-family: "arimoregular";
  src: url("fonts/arimo/arimo-regular-latin-webfont.eot");
  src: url("fonts/arimo/arimo-regular-latin-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/arimo/arimo-regular-latin-webfont.woff") format("woff"), url("fonts/arimo/arimo-regular-latin-webfont.ttf") format("truetype"), url("fonts/arimo/arimo-regular-latin-webfont.svg#arimoregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "bebas_neueregular";
  src: url("fonts/bebas-neue/bebasneue-webfont.eot");
  src: url("fonts/bebas-neue/bebasneue-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/bebas-neue/bebasneue-webfont.woff") format("woff"), url("fonts/bebas-neue/bebasneue-webfont.ttf") format("truetype"), url("fonts/bebas-neue/bebasneue-webfont.svg#bebas_neueregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "architects_daughter";
  src: url("fonts/architects-daughter/ArchitectsDaughter-webfont.eot");
  src: url("fonts/architects-daughter/ArchitectsDaughter-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/architects-daughter/ArchitectsDaughter-webfont.woff") format("woff"), url("fonts/architects-daughter/ArchitectsDaughter-webfont.ttf") format("truetype"), url("fonts/architects-daughter/ArchitectsDaughter-webfont.svg#bebas_neueregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"), local("MaterialIconsOutlined-Regular"), url(fonts/MaterialIconsOutlined-Regular.otf) format("opentype");
}
/* Required addition to use material icons */
.material-icons-outlined {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}
.material-icons-outlined.md-48 {
  font-size: 48px;
}

/* End required material icon stuff */
/* to make the footer sticky */
* {
  margin: 0;
  padding: 0;
}

html, body, #wrapper {
  height: 100%;
}

body > #wrapper {
  height: auto;
  min-height: 100%;
}

#main {
  padding-bottom: 2em;
}

.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

/* general layout */
body {
  font-size: 100%;
  font-family: "arimoregular";
  text-align: center;
  margin: 0 auto;
  line-height: 1.5;
  background: #dce6ee;
}
body a, body a:visited {
  color: #356d35;
}

/* reusable elements*/
.borderBottom {
  border-bottom: 1px solid black;
}

.clear {
  clear: both;
}

.center {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.text__center {
  text-align: center;
}

.image__center {
  margin: 1em auto;
  text-align: center;
}
.image__center img {
  display: block;
  margin: 0 auto;
}
.image__center p {
  margin: 1rem 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.image__floatRight {
  display: block;
  margin: 1em auto;
}
@media screen and (min-width: 720px) {
  .image__floatRight {
    float: right;
    margin: 0;
    padding: 0 0 1em 1em;
  }
}

.image__floatLeft {
  display: block;
  margin: 1em auto;
}
@media screen and (min-width: 720px) {
  .image__floatLeft {
    float: left;
    margin: 0;
    padding: 0 1em 1em 0;
  }
}

.image__normal {
  display: block;
  margin: 1rem 0;
}

.centerImg {
  display: block;
  margin: 2rem auto;
  text-align: center;
  /*border: 2px solid #505050;*/
}

.hidden, .hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.no-close-dialog .ui-dialog-titlebar-close {
  display: none;
}

.noMargin {
  margin: 0;
}

strong {
  font-weight: bold;
  /*color:#215279;*/
}

em {
  font-style: italic;
}

.lineThrough {
  text-decoration: line-through;
}

.imgFloatLeft {
  float: left;
  margin: 1em 1em 0.5em 0;
  border: 2px solid #505050;
}

.imgFloatLeftNoBorderAndRadius {
  float: left;
  margin: 1em 1em 0.5em 0;
  border: none;
  border-radius: 0px;
}

.imgFloatRight {
  float: right;
  margin: 1em 0 1em 1em;
  border: 2px solid #505050;
}

.imgFloatRightNoBorderAndRadius {
  float: right;
  margin: 3em 0 1em 1em;
  border: none;
  border-radius: 0px;
}

.imgFloatRightTop {
  float: right;
  margin: 3em 0 1em 1em;
  border: 2px solid #505050;
}

.imgFloatLeftTop {
  float: left;
  margin: 3em 1em 0.5em 0;
  border: 2px solid #505050;
}

.imgAnimation {
  border: 2px solid #505050;
  margin: 0.5em;
}

.clickableSpan {
  cursor: pointer;
}

.txtAlignRight {
  text-align: right;
}

.txtAlignLeft {
  text-align: left;
}

.noBorder {
  border: none;
}

.noBorderRadius {
  border-radius: 0px;
}

.noBorderAndRadius {
  border: none;
  border-radius: 0px !important;
}

.noBorderRadiusMidAlign {
  vertical-align: middle;
  border: none;
  border-radius: 0px;
}

.indentBoxes {
  margin: 1em 2em;
}

.indentLeft {
  margin-left: 2em;
}

.largeFont {
  font-size: 1.5em;
}

.red {
  color: #d50001;
}

.blue {
  color: #05539e;
}

.blueBackground {
  background-color: #05539e;
}

.whiteBackground {
  background-color: #ffffff;
}

.verticalText {
  padding: 0;
  margin: 0;
  transform: rotate(90deg);
  float: left;
}

td.highlight {
  background: #f8d187;
}

#wrapper {
  padding: 0 0 0 0;
  text-align: left;
  color: #262626;
}

#globalSiteNav {
  background: #505050;
  font-size: 0.95em;
  font-weight: bold;
  text-align: right;
  padding: 0.25em 15%;
}
#globalSiteNav ul li {
  display: inline;
  margin: 0 0;
  padding: 0 1.25em 0 1em;
  border-right: 1px solid #ffffff;
}
#globalSiteNav ul li a {
  color: #ffffff;
  text-decoration: none;
}
#globalSiteNav ul li a:hover, #globalSiteNav ul li a:focus {
  color: #f8b432;
}
#globalSiteNav li.last {
  border-right: none;
  padding-right: 0;
}
#globalSiteNav select {
  display: none;
}

header {
  background: #5180ac;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#215279), to(#5180ac));
  background: -webkit-linear-gradient(top, #5180ac, #215279);
  background: -moz-linear-gradient(top, #5180ac, #215279);
  background: -ms-linear-gradient(top, #5180ac, #215279);
  background: -o-linear-gradient(top, #5180ac, #215279);
  padding: 0 15%;
  text-align: left;
  color: #ffffff;
  box-shadow: inset 0px -2px 0px 0px #414242;
}
header .headerCol1 {
  width: 74%;
  float: left;
  padding: 1em 0 0 0;
}
header .headerCol1 p {
  margin: 1.5em 3em 0 0;
}
header .headerCol1 .goalDate {
  font-size: 1.25em;
  font-weight: bold;
  display: block;
  margin: 2em auto;
  text-align: center;
  text-decoration: underline;
}
header .headerCol1 a.goalDateLink, header .headerCol1 a.goalDateLink:visited {
  color: #ffffff;
}
header .headerCol2 {
  width: 20%;
  padding: 1em 0.25em;
  float: right;
}
header .headerCol2 img {
  border-radius: 10px;
  float: right;
  box-shadow: 2px 2px 15px #262626;
}
header .headerCol1Inside {
  width: 25%;
  float: left;
  padding: 1em 0;
}
header .headerCol2Inside {
  width: 74%;
  float: right;
  text-align: right;
  margin: 0 0;
  padding: 0 0;
}
header .headerCol2Inside h1 {
  padding: 1em 0 0 0;
  margin: 0 0;
  font-weight: bold;
  font-size: 4em;
  font-family: "bebas_neueregular";
}

.siteNav {
  background: #f8d187;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8b432), to(#f8d187));
  background: -webkit-linear-gradient(top, #f8d187, #f8b432);
  background: -moz-linear-gradient(top, #f8d187, #f8b432);
  background: -ms-linear-gradient(top, #f8d187, #f8b432);
  background: -o-linear-gradient(top, #f8d187, #f8b432);
  margin-bottom: 3em;
  text-align: right;
  border-bottom: 1px solid #262626;
}

.nav,
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top level nav */
.nav {
  float: right;
}

.navLeft {
  float: left;
}

/* Dropdowns */
.nav ul, .navLeft ul {
  position: absolute;
  top: 2.15em;
  left: -9999px;
  opacity: 0;
  transition: 0.1s linear opacity;
  min-width: 200px;
  background: #505050;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}

.nav li, .navLeft li {
  float: left;
  position: relative;
}

/* Top level nav items */
.nav li > a, .navLeft li > a {
  float: left;
  padding: 5px 15px;
  border-right: 1px solid #b2b2b2;
  color: #262626;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

/* Top level hover state, preserve hover state when hovering dropdown  */
.nav li > a:hover,
.nav li > a:focus,
.nav li:focus > a,
.nav li:hover > a,
.navLeft li > a:hover,
.navLeft li > a:focus,
.navLeft li:focus > a,
.navLeft li:hover > a {
  background: #505050;
  outline: 0;
  color: #ffffff;
}

/* Rounded corners for first top level nav item */
.nav > li:first-child > a, .navLeft > li:first-child > a {
  border-left: 0;
}

/* Rounded corners for last top level nav item */
.nav > li:last-child > a, .navLeft > li:last-child > a {
  border-right: 0;
}

.nav li:hover ul,
.nav li:focus ul,
.navLeft li:hover ul,
.navLeft li:focus ul,
ul.show-menu {
  left: 0;
  opacity: 0.99;
  z-index: 1000;
}

.nav ul li, .navLeft ul li {
  float: none;
  position: static;
}

.nav ul a, .navLeft ul a {
  float: none;
  display: block;
  color: #FFF;
  font-size: 12px;
  text-shadow: none;
  border: 1px solid #222;
  border-width: 0 0 1px;
  -webkit-transition: 0.1s linear all;
}

/* Rounded corners for ul and last list item */
.nav ul,
.nav ul li:last-child a,
.navLeft ul,
.navLeft ul li:last-child a {
  border: 0;
  -webkit-border-bottom-left-radius: 7px;
  -webkit-border-bottom-right-radius: 7px;
  -moz-border-radius-bottomleft: 7px;
  -moz-border-radius-bottomright: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.nav ul a:hover,
.nav ul a:focus,
.navLeft ul a:hover,
.navLeft ul a:focus {
  background: #EEE;
  color: #333;
  text-shadow: none;
}

/*Student Center*/
.searchInstructions {
  margin: 1em 15%;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 15%;
}

.modules {
  border-top: 1px solid #91979d;
  margin: 0.25em 15% 5em 15%;
}
.modules table {
  margin: 1em 1em 1em 0em;
  width: 100%;
}
.modules table th {
  font-weight: bold;
  font-size: 0.95em;
}
.modules table td {
  font-size: 0.95em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  vertical-align: bottom;
}
.modules table td.progressBarSize {
  width: 50%;
}
.modules table td.viewButtons {
  margin-top: 1.25em;
}
.modules table td.buttonCell {
  width: 100%;
}
.modules table a.moduleLink {
  font-weight: bold;
  color: #227747;
  text-decoration: underline;
}
.modules table a.moduleLink:hover, .modules table a.moduleLink:focus {
  text-decoration: underline;
}
.modules table button.portfolioButton {
  padding: 0.25em 0.75em;
  background: #3b3b3b;
  color: white;
  text-decoration: none;
  font-size: 0.7em;
  /*font-weight: bold;*/
  width: 45%;
  height: 3em;
  border: none;
  margin: 0 0.25em 0 0.25em;
}
.modules table button.portfolioButton:hover {
  background: #9d9d9d;
}
.modules table button.moduleButton {
  /*padding: .25em .75em;*/
  background: #176e18;
  color: white;
  text-decoration: none;
  font-size: 0.7em;
  /*font-weight: bold; */
  width: 45%;
  height: 3em;
  border: none;
}
.modules table button.moduleButton:hover {
  background: #8bb68b;
}
.modules table button.resumeModuleButton {
  padding: 0.25em 0.75em;
  background: #950b0b;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 3em;
  border: none;
}
.modules table button.resumeModuleButton:hover {
  background: #ca8585;
}
.modules table a {
  text-decoration: none;
  color: #ffffff;
}
.modules .precentComplete {
  font-size: 0.75em;
}
.modules .inactiveModuleRow {
  pointer-events: none;
  cursor: default;
}
.modules .inactiveModule {
  color: #3b3b3b;
  text-decoration: none;
  cursor: text;
}

.msgViewCompose {
  width: 100%;
  float: right;
  text-align: right;
  margin: -1.75em 15% 0 15%;
  font-weight: bold;
  font-size: 0.95em;
}
.msgViewCompose ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
.msgViewCompose ul li a {
  color: #262626;
  text-decoration: none;
}
.msgViewCompose ul li a:hover, .msgViewCompose ul li a:focus {
  color: #215279;
}
.msgViewCompose li.last {
  border-right: none;
  padding-right: 0;
}

.messages {
  margin: 0.25em 15% 3em 15%;
  border-top: 1px solid #91979d;
}
.messages table {
  margin: 1em 1em 1em 0;
  width: 100%;
}
.messages table th {
  font-weight: bold;
  font-size: 0.95em;
}
.messages table tr {
  border-bottom: 1px solid #cccccc;
}
.messages table tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
.messages table tr.noborder {
  border: none;
}
.messages table tr:hover {
  background: #edf2f6;
}
.messages table td {
  font-size: 0.95em;
  padding: 1em 0.5em;
}
.messages table a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
.messages table a.subject, .messages table a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
.messages table a:hover, .messages table a:focus {
  color: #215279;
}

/*End Student Center*/
/*Teacher Center and program center*/
#pendingRequests {
  margin: 0em 15% 2em 15%;
  border-top: 1px solid #91979d;
  border-bottom: 1px solid #91979d;
  padding: 1em 0;
}

#col1TeacherCtr, #col1ProgCtr, #col1MngPrg {
  width: 25%;
  float: left;
  margin-left: 15%;
}
#col1TeacherCtr #searchStudents, #col1TeacherCtr #searchTeachers, #col1TeacherCtr #searchPrograms, #col1TeacherCtr #searchUsers, #col1ProgCtr #searchStudents, #col1ProgCtr #searchTeachers, #col1ProgCtr #searchPrograms, #col1ProgCtr #searchUsers, #col1MngPrg #searchStudents, #col1MngPrg #searchTeachers, #col1MngPrg #searchPrograms, #col1MngPrg #searchUsers {
  border-top: 1px solid #91979d;
  margin: 0.25em 0 5em 0;
  padding-top: 1em;
}
#col1TeacherCtr h1, #col1ProgCtr h1, #col1MngPrg h1 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 0 0.25em 0;
}
#col1TeacherCtr table, #col1ProgCtr table, #col1MngPrg table {
  margin: 0.5em 1em 1em 0;
  width: 100%;
}
#col1TeacherCtr table th, #col1ProgCtr table th, #col1MngPrg table th {
  font-weight: bold;
  font-size: 0.95em;
}
#col1TeacherCtr table tr, #col1ProgCtr table tr, #col1MngPrg table tr {
  border-bottom: 1px solid #cccccc;
}
#col1TeacherCtr table tr.borderTopBottom, #col1ProgCtr table tr.borderTopBottom, #col1MngPrg table tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
#col1TeacherCtr table tr.noborder, #col1ProgCtr table tr.noborder, #col1MngPrg table tr.noborder {
  border: none;
}
#col1TeacherCtr table tr:hover, #col1ProgCtr table tr:hover, #col1MngPrg table tr:hover {
  background: #edf2f6;
}
#col1TeacherCtr table td, #col1ProgCtr table td, #col1MngPrg table td {
  font-size: 0.95em;
  padding: 0.75em 0.5em;
}
#col1TeacherCtr table a.from, #col1ProgCtr table a.from, #col1MngPrg table a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
#col1TeacherCtr table a.subject, #col1TeacherCtr table a.delete, #col1ProgCtr table a.subject, #col1ProgCtr table a.delete, #col1MngPrg table a.subject, #col1MngPrg table a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
#col1TeacherCtr table a:hover, #col1TeacherCtr table a:focus, #col1ProgCtr table a:hover, #col1ProgCtr table a:focus, #col1MngPrg table a:hover, #col1MngPrg table a:focus {
  color: #215279;
}
#col1TeacherCtr .msgViewCompose, #col1ProgCtr .msgViewCompose, #col1MngPrg .msgViewCompose {
  width: 100%;
  float: right;
  text-align: right;
  margin: -1.75em 0 0 0;
  font-weight: bold;
  font-size: 0.85em;
}
#col1TeacherCtr .msgViewCompose ul li, #col1ProgCtr .msgViewCompose ul li, #col1MngPrg .msgViewCompose ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
#col1TeacherCtr .msgViewCompose ul li a, #col1ProgCtr .msgViewCompose ul li a, #col1MngPrg .msgViewCompose ul li a {
  color: #262626;
  text-decoration: none;
}
#col1TeacherCtr .msgViewCompose ul li a:hover, #col1TeacherCtr .msgViewCompose ul li a:focus, #col1ProgCtr .msgViewCompose ul li a:hover, #col1ProgCtr .msgViewCompose ul li a:focus, #col1MngPrg .msgViewCompose ul li a:hover, #col1MngPrg .msgViewCompose ul li a:focus {
  color: #215279;
}
#col1TeacherCtr .msgViewCompose li.last, #col1ProgCtr .msgViewCompose li.last, #col1MngPrg .msgViewCompose li.last {
  border-right: none;
  padding-right: 0;
}

#col2TeacherCtr, #col2ProgCtr, #col2MngPrg {
  width: 40%;
  float: right;
  margin: 0 15% 1em 5%;
}
#col2TeacherCtr .searchResults, #col2ProgCtr .searchResults, #col2MngPrg .searchResults {
  border-top: 1px solid #91979d;
  margin: 0.25em 0 5em 0;
  padding-top: 1em;
}
#col2TeacherCtr .paginationLink, #col2ProgCtr .paginationLink, #col2MngPrg .paginationLink {
  color: #356d35;
  text-decoration: none;
  font-weight: bold;
}
#col2TeacherCtr .paginationLink:hover, #col2TeacherCtr .paginationLink:focus, #col2ProgCtr .paginationLink:hover, #col2ProgCtr .paginationLink:focus, #col2MngPrg .paginationLink:hover, #col2MngPrg .paginationLink:focus {
  color: #215279;
}
#col2TeacherCtr ul.options li, #col2ProgCtr ul.options li, #col2MngPrg ul.options li {
  display: inline;
  margin: 0 0;
  border-right: 1px solid #252628;
  padding: 0 0.5em 0 0.25em;
}
#col2TeacherCtr ul.options li a, #col2ProgCtr ul.options li a, #col2MngPrg ul.options li a {
  color: #262626;
  text-decoration: none;
}
#col2TeacherCtr ul.options li a:hover, #col2TeacherCtr ul.options li a:focus, #col2ProgCtr ul.options li a:hover, #col2ProgCtr ul.options li a:focus, #col2MngPrg ul.options li a:hover, #col2MngPrg ul.options li a:focus {
  color: #215279;
}
#col2TeacherCtr li.last, #col2ProgCtr li.last, #col2MngPrg li.last {
  border-right: none;
  padding-right: 0;
}
#col2TeacherCtr h1, #col2ProgCtr h1, #col2MngPrg h1 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 0 0.25em 0;
}
#col2TeacherCtr table, #col2ProgCtr table, #col2MngPrg table {
  margin: 1em 1em 1em 0;
  width: 100%;
}
#col2TeacherCtr table th, #col2ProgCtr table th, #col2MngPrg table th {
  font-weight: bold;
  font-size: 0.95em;
}
#col2TeacherCtr table tr, #col2ProgCtr table tr, #col2MngPrg table tr {
  border-bottom: 1px solid #cccccc;
}
#col2TeacherCtr table tr.borderTopBottom, #col2ProgCtr table tr.borderTopBottom, #col2MngPrg table tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
#col2TeacherCtr table tr.noborder, #col2ProgCtr table tr.noborder, #col2MngPrg table tr.noborder {
  border: none;
}
#col2TeacherCtr table tr:hover, #col2ProgCtr table tr:hover, #col2MngPrg table tr:hover {
  background: #edf2f6;
}
#col2TeacherCtr table td, #col2ProgCtr table td, #col2MngPrg table td {
  font-size: 0.95em;
  padding: 1em 0.5em;
}
#col2TeacherCtr table a.from, #col2ProgCtr table a.from, #col2MngPrg table a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
#col2TeacherCtr table a.subject, #col2TeacherCtr table a.delete, #col2ProgCtr table a.subject, #col2ProgCtr table a.delete, #col2MngPrg table a.subject, #col2MngPrg table a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
#col2TeacherCtr table a:hover, #col2TeacherCtr table a:focus, #col2ProgCtr table a:hover, #col2ProgCtr table a:focus, #col2MngPrg table a:hover, #col2MngPrg table a:focus {
  color: #215279;
}
#col2TeacherCtr .msgViewCompose, #col2ProgCtr .msgViewCompose, #col2MngPrg .msgViewCompose {
  width: 100%;
  float: right;
  text-align: right;
  margin: -2em 0 0 0;
  font-weight: bold;
  font-size: 0.85em;
}
#col2TeacherCtr .msgViewCompose ul li, #col2ProgCtr .msgViewCompose ul li, #col2MngPrg .msgViewCompose ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 0.5em 0 0.25em;
}
#col2TeacherCtr .msgViewCompose ul li a, #col2ProgCtr .msgViewCompose ul li a, #col2MngPrg .msgViewCompose ul li a {
  color: #262626;
  text-decoration: none;
}
#col2TeacherCtr .msgViewCompose ul li a:hover, #col2TeacherCtr .msgViewCompose ul li a:focus, #col2ProgCtr .msgViewCompose ul li a:hover, #col2ProgCtr .msgViewCompose ul li a:focus, #col2MngPrg .msgViewCompose ul li a:hover, #col2MngPrg .msgViewCompose ul li a:focus {
  color: #215279;
}
#col2TeacherCtr .msgViewCompose li.last, #col2ProgCtr .msgViewCompose li.last, #col2MngPrg .msgViewCompose li.last {
  border-right: none;
  padding-right: 0;
}

.contentViewOptions {
  width: 100%;
  float: right;
  text-align: right;
  margin: -1.75em 0 0 0;
  font-weight: bold;
  font-size: 0.95em;
}
.contentViewOptions ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
.contentViewOptions ul li a {
  color: #262626;
  text-decoration: none;
}
.contentViewOptions ul li a:hover, .contentViewOptions ul li a:focus {
  color: #215279;
}
.contentViewOptions li.last {
  border-right: none;
  padding-right: 0;
}

#searchResults {
  border-top: 1px solid #91979d;
  margin: 0.25em 15% 5em 15%;
}
#searchResults table {
  margin: 1em 1em 1em 0em;
  width: 100%;
}
#searchResults table th {
  font-weight: bold;
  font-size: 0.95em;
  text-align: left;
}
#searchResults table td {
  font-size: 0.95em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  vertical-align: bottom;
}
#searchResults table td.progressBarSize {
  width: 50%;
}
#searchResults table button.portfolioButton {
  padding: 0.25em 0.75em;
  background: #3b3b3b;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 4em;
  border: none;
}
#searchResults table button.portfolioButton:hover {
  background: #9d9d9d;
}
#searchResults table button.moduleButton {
  padding: 0.25em 0.75em;
  background: #176e18;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 4em;
  border: none;
}
#searchResults table button.moduleButton:hover {
  background: #8bb68b;
}
#searchResults table button.resumeModuleButton {
  padding: 0.25em 0.75em;
  background: #950b0b;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 4em;
  border: none;
}
#searchResults table button.resumeModuleButton:hover {
  background: #ca8585;
}
#searchResults .precentComplete {
  font-size: 0.75em;
}

#consortiumHome {
  width: 40%;
  float: left;
  margin: 0 15% 1em 5%;
}
#consortiumHome .searchResults {
  border-top: 1px solid #91979d;
  margin: 0.25em 0 5em 0;
  padding-top: 1em;
}
#consortiumHome .paginationLink {
  color: #356d35;
  text-decoration: none;
  font-weight: bold;
}
#consortiumHome .paginationLink:hover, #consortiumHome .paginationLink:focus {
  color: #215279;
}
#consortiumHome ul.options li {
  display: inline;
  margin: 0 0;
  border-right: 1px solid #252628;
  padding: 0 0.5em 0 0.25em;
}
#consortiumHome ul.options li a {
  color: #262626;
  text-decoration: none;
}
#consortiumHome ul.options li a:hover, #consortiumHome ul.options li a:focus {
  color: #215279;
}
#consortiumHome li.last {
  border-right: none;
  padding-right: 0;
}
#consortiumHome h1 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 0 0.25em 0;
}
#consortiumHome table {
  margin: 1em 1em 1em 0;
  width: 100%;
}
#consortiumHome table th {
  font-weight: bold;
  font-size: 0.95em;
}
#consortiumHome table tr {
  border-bottom: 1px solid #cccccc;
}
#consortiumHome table tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
#consortiumHome table tr.noborder {
  border: none;
}
#consortiumHome table tr:hover {
  background: #edf2f6;
}
#consortiumHome table td {
  font-size: 0.95em;
  padding: 1em 0.5em;
}
#consortiumHome table a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
#consortiumHome table a.subject, #consortiumHome table a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
#consortiumHome table a:hover, #consortiumHome table a:focus {
  color: #215279;
}

.contentViewOptions {
  width: 100%;
  float: right;
  text-align: right;
  margin: -1.75em 0 0 0;
  font-weight: bold;
  font-size: 0.95em;
}
.contentViewOptions ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
.contentViewOptions ul li a {
  color: #262626;
  text-decoration: none;
}
.contentViewOptions ul li a:hover, .contentViewOptions ul li a:focus {
  color: #215279;
}
.contentViewOptions li.last {
  border-right: none;
  padding-right: 0;
}

#searchResults {
  border-top: 1px solid #91979d;
  margin: 0.25em 15% 5em 15%;
}
#searchResults table {
  margin: 1em 1em 1em 0em;
  width: 100%;
}
#searchResults table th {
  font-weight: bold;
  font-size: 0.95em;
  text-align: left;
}
#searchResults table td {
  font-size: 0.95em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  vertical-align: bottom;
}
#searchResults table td.progressBarSize {
  width: 50%;
}
#searchResults table button.portfolioButton {
  padding: 0.25em 0.75em;
  background: #3b3b3b;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 4em;
  border: none;
}
#searchResults table button.portfolioButton:hover {
  background: #9d9d9d;
}
#searchResults table button.moduleButton {
  padding: 0.25em 0.75em;
  background: #176e18;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 4em;
  border: none;
}
#searchResults table button.moduleButton:hover {
  background: #8bb68b;
}
#searchResults table button.resumeModuleButton {
  padding: 0.25em 0.75em;
  background: #950b0b;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  width: 45%;
  height: 4em;
  border: none;
}
#searchResults table button.resumeModuleButton:hover {
  background: #ca8585;
}
#searchResults .precentComplete {
  font-size: 0.75em;
}

/*End Teacher Center*/
/*Manage Student portfolio*/
.arrowOpen {
  background: url(/public/images/icons/open_arrow.gif);
  background-repeat: no-repeat;
  padding-left: 1.25em;
}

.arrowClose {
  background: url(/public/images/icons/close_arrow.gif);
  background-repeat: no-repeat;
  padding-left: 1.25em;
}

.portfolioProfilePic {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
  height: 145px;
}

.portfolioDetails ul {
  margin: 0;
}
.portfolioDetails ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 0.5em 0 0.25em;
}

/*Standards in Unit Menu*/
ul.standards {
  width: 75%;
  border-bottom: 1px solid #f8b432;
  margin-left: 5%;
  padding: 0.5em 0;
}
ul.standards li {
  border-right: none;
  padding: 1em 0 1em 0;
}

.GED {
  color: #000000;
}

/*Portfolio*/
#col1Portfolio {
  width: 100%;
  float: left;
}
#col1Portfolio h1 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 0 0.25em 0;
}
#col1Portfolio .moduleInfo {
  border-top: 1px solid #91979d;
  border-bottom: 1px solid #91979d;
  margin: 1em 0 2em 0;
  padding: 1em 0.5em;
  display: block;
}
#col1Portfolio .moduleInfo:hover {
  background: #edf2f6;
}
#col1Portfolio table.portfolio {
  margin: 1em 1em 1em 0;
  width: 100%;
  border: none;
}
#col1Portfolio table.portfolio th {
  font-weight: bold;
  font-size: 0.95em;
}
#col1Portfolio table.portfolio tr {
  border-bottom: 1px solid #cccccc;
  background: none;
}
#col1Portfolio table.portfolio tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
#col1Portfolio table.portfolio tr.noborder {
  border: none;
}
#col1Portfolio table.portfolio tr:hover {
  background: #edf2f6;
}
#col1Portfolio table.portfolio td {
  font-size: 0.95em;
  padding: 1em 0.5em;
}
#col1Portfolio table.portfolio a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
#col1Portfolio table.portfolio a.subject, #col1Portfolio table.portfolio a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
#col1Portfolio table.portfolio a:hover, #col1Portfolio table.portfolio a:focus {
  color: #215279;
}
#col1Portfolio .mngViewSend {
  width: 100%;
  float: right;
  text-align: right;
  margin: -1.75em 0 0 0;
  font-weight: bold;
  font-size: 0.85em;
}
#col1Portfolio .mngViewSend ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
#col1Portfolio .mngViewSend ul li a {
  color: #262626;
  text-decoration: none;
}
#col1Portfolio .mngViewSend ul li a:hover, #col1Portfolio .mngViewSend ul li a:focus {
  color: #215279;
}
#col1Portfolio .mngViewSend li.last {
  border-right: none;
  padding-right: 0;
}

/*End Portfolio*/
section {
  padding: 1rem;
}
@media screen and (min-width: 1237px) {
  section {
    padding: 0;
  }
}

#func_modalMessageDiv {
  padding: 0 15%;
}

section, #func_modalMessageDiv {
  /*support center*/
  /*Login Page */
  /*end login page*/
  /*classroom Resources*/
  /*manage groups*/
  /*my profile, create new student and teacher*/
  /*end my profile */
}
section a, section a:visited, #func_modalMessageDiv a, #func_modalMessageDiv a:visited {
  /*color: #356d35;*/
  color: #227747;
}
section img, #func_modalMessageDiv img {
  border-radius: 10px;
  max-width: 100%;
}
section img .notRound, #func_modalMessageDiv img .notRound {
  border-radius: none;
}
section h2, #func_modalMessageDiv h2 {
  font-weight: bold;
  margin: 1em 0;
  color: #950b0b;
  font-size: 1.25em;
}
section h2.icon, #func_modalMessageDiv h2.icon {
  border-bottom: 1px solid #91979d;
  padding-top: 1em;
}
section h2.newsHeading, #func_modalMessageDiv h2.newsHeading {
  font-family: "Times New Roman", Times, serif;
  color: #000000;
}
section h3, #func_modalMessageDiv h3 {
  font-weight: bold;
}
section p, #func_modalMessageDiv p {
  margin: 1em 0;
}
section .redFont, #func_modalMessageDiv .redFont {
  color: #ff0000;
}
section img, #func_modalMessageDiv img {
  max-width: 100%;
}
section .noBorderRadiusMidAlign, #func_modalMessageDiv .noBorderRadiusMidAlign {
  vertical-align: middle;
  border: none;
  border-radius: 0px;
}
section #supportCtrCol1, #func_modalMessageDiv #supportCtrCol1 {
  width: 70%;
  float: left;
  margin-right: 1em;
  border-right: 1px solid #d6e1eb;
  padding-right: 0.5em;
}
section #supportCtrCol1 .tutorialLeft, #func_modalMessageDiv #supportCtrCol1 .tutorialLeft {
  float: left;
  margin: 1em;
}
section #supportCtrCol1 .tutorialRight, #func_modalMessageDiv #supportCtrCol1 .tutorialRight {
  float: right;
  margin: 1em;
}
section #supportCtrCol2, #func_modalMessageDiv #supportCtrCol2 {
  width: 25%;
  float: left;
  padding-left: 0.5em;
}
section #supportCtrCol2 .contactSupport, #func_modalMessageDiv #supportCtrCol2 .contactSupport {
  border-bottom: 1px solid #d6e1eb;
}
section #contactUsContainer, #func_modalMessageDiv #contactUsContainer {
  position: absolute;
  width: 50%;
  left: 25%;
  margin: 0 auto;
  padding: 1em;
  background: #FFF;
  border: solid 0.1em #CCC;
  z-index: 1000;
  box-shadow: 0 2em 2em -1.9em rgba(0, 0, 0, 0.5);
  transition: opacity 2s;
  transform: translateZ(0);
}
section #contactUsContainer textarea, #func_modalMessageDiv #contactUsContainer textarea {
  width: 100%;
  height: 10em;
}
section .contentContainer ul.contentList, #func_modalMessageDiv .contentContainer ul.contentList {
  margin: 1em 1em 1em 4em;
}
section .contentContainer ul.contentList li, #func_modalMessageDiv .contentContainer ul.contentList li {
  list-style-type: circle;
}
section a.closeMe, #func_modalMessageDiv a.closeMe {
  position: absolute;
  right: -1em;
  top: -1em;
  outline: none;
  z-index: 1001;
}
section .col1, #func_modalMessageDiv .col1 {
  width: 50%;
  float: left;
  padding-top: 1em;
}
section .col1 input[type=text], section .col1 input[type=password], #func_modalMessageDiv .col1 input[type=text], #func_modalMessageDiv .col1 input[type=password] {
  width: 40%;
  margin-left: 1em;
}
section .col1 input[type=text], #func_modalMessageDiv .col1 input[type=text] {
  margin-left: 3.5em;
}
section .col1 .loginForm, #func_modalMessageDiv .col1 .loginForm {
  padding: 0 1em 1em 4em;
}
section .col2, #func_modalMessageDiv .col2 {
  width: 45%;
  float: right;
}
section #contentTitleAndNav .contentName, #func_modalMessageDiv #contentTitleAndNav .contentName {
  float: left;
  width: 70%;
}
section #contentTitleAndNav .contentTopNav, #func_modalMessageDiv #contentTitleAndNav .contentTopNav {
  float: right;
  width: 20%;
  text-align: right;
  color: #950b0b;
  font-size: 0.85em;
  margin: 0 0;
}
section #contentTitleAndNav .contentTopNav p, #func_modalMessageDiv #contentTitleAndNav .contentTopNav p {
  display: inline-block;
}
section #contentTitleAndNav .contentTopNav .prev, #func_modalMessageDiv #contentTitleAndNav .contentTopNav .prev {
  margin: -0.25em 0.5em 0 0;
  vertical-align: middle;
}
section #contentTitleAndNav .contentTopNav .next, #func_modalMessageDiv #contentTitleAndNav .contentTopNav .next {
  margin: 1em 0 0 0.75em;
  vertical-align: middle;
  float: right;
}
section .showHideBoxes, #func_modalMessageDiv .showHideBoxes {
  border-bottom: 1px solid #91979d;
  border-top: 1px solid #91979d;
  margin: 2em 0 1em 0;
  padding: 1em 0;
}
section .source, #func_modalMessageDiv .source {
  font-size: 75%;
}
section ul, #func_modalMessageDiv ul {
  margin: 1em 1em 1em 4em;
}
section ul li, #func_modalMessageDiv ul li {
  list-style-type: circle;
}
section ol.upperAlphaOrder, #func_modalMessageDiv ol.upperAlphaOrder {
  list-style-type: upper-alpha;
  margin: 1em 1em 1em 4em;
}
section ol.lowerAlphaOrder, #func_modalMessageDiv ol.lowerAlphaOrder {
  list-style-type: lower-alpha;
  margin: 1em 1em 1em 4em;
}
section ol.upperRoman, #func_modalMessageDiv ol.upperRoman {
  list-style-type: upper-roman;
  margin: 0.5em 1em 0.5em 4em;
}
section ol.lowerRoman, #func_modalMessageDiv ol.lowerRoman {
  list-style-type: lower-roman;
  margin: 0.5em 1em 0.5em 4em;
}
section ol.number, #func_modalMessageDiv ol.number {
  list-style-type: decimal;
  margin: 1em 1em 1em 3em;
}
section table, #func_modalMessageDiv table {
  margin: 1em 1em 1em 0;
  width: 100%;
}
section table th, #func_modalMessageDiv table th {
  font-weight: bold;
  font-size: 0.95em;
  padding: 1em 1em;
}
section table tr, #func_modalMessageDiv table tr {
  border: 2px solid #8d8d8d;
}
section table tr:nth-child(even), #func_modalMessageDiv table tr:nth-child(even) {
  background: #bababa;
}
section table tr:nth-child(odd), #func_modalMessageDiv table tr:nth-child(odd) {
  background: #ffffff;
}
section table td, #func_modalMessageDiv table td {
  font-size: 0.95em;
  padding: 1em 1em;
  border: 2px solid #8d8d8d;
}
@media screen and (max-width: 500px) {
  section table th, section table td, #func_modalMessageDiv table th, #func_modalMessageDiv table td {
    padding: 0.5em;
  }
}
section h1.inboxLabel, section h1.groupsLabel, #func_modalMessageDiv h1.inboxLabel, #func_modalMessageDiv h1.groupsLabel {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 0 0.25em 0;
}
section .inbox, #func_modalMessageDiv .inbox {
  border-top: 1px solid #91979d;
}
section .inbox table, #func_modalMessageDiv .inbox table {
  margin: 1em 1em 3em 0;
  width: 100%;
  border: none;
}
section .inbox table th, #func_modalMessageDiv .inbox table th {
  font-weight: bold;
  font-size: 0.95em;
}
section .inbox table tr, #func_modalMessageDiv .inbox table tr {
  border-bottom: 1px solid #cccccc;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
}
section .inbox table tr.borderTopBottom, #func_modalMessageDiv .inbox table tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
section .inbox table tr.noborder, #func_modalMessageDiv .inbox table tr.noborder {
  border: none;
}
section .inbox table tr:hover, #func_modalMessageDiv .inbox table tr:hover {
  background: #edf2f6;
}
section .inbox table td, #func_modalMessageDiv .inbox table td {
  font-size: 0.95em;
  padding: 1em 0.5em;
  border: none;
}
section .inbox table a.from, #func_modalMessageDiv .inbox table a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
section .inbox table a.subject, section .inbox table a.delete, #func_modalMessageDiv .inbox table a.subject, #func_modalMessageDiv .inbox table a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
section .inbox table a:hover, section .inbox table a:focus, #func_modalMessageDiv .inbox table a:hover, #func_modalMessageDiv .inbox table a:focus {
  color: #215279;
}
section ul.glossaryNav li, #func_modalMessageDiv ul.glossaryNav li {
  display: inline;
  margin: 0 0.15em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
section h1.groupsLabel, #func_modalMessageDiv h1.groupsLabel {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.25em 0 0.25em 0;
}
section .mngGroups, #func_modalMessageDiv .mngGroups {
  border-top: 1px solid #91979d;
}
section .mngGroups table, #func_modalMessageDiv .mngGroups table {
  margin: 1em 1em 3em 0;
  width: 100%;
  border: none;
}
section .mngGroups table th, #func_modalMessageDiv .mngGroups table th {
  font-weight: bold;
  font-size: 0.95em;
}
section .mngGroups table tr, #func_modalMessageDiv .mngGroups table tr {
  border-bottom: 1px solid #cccccc;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
}
section .mngGroups table tr.borderTopBottom, #func_modalMessageDiv .mngGroups table tr.borderTopBottom {
  border-bottom: 1px dashed #262626;
  border-top: 1px dashed #262626;
}
section .mngGroups table tr.noborder, #func_modalMessageDiv .mngGroups table tr.noborder {
  border: none;
}
section .mngGroups table tr:hover, #func_modalMessageDiv .mngGroups table tr:hover {
  background: #edf2f6;
}
section .mngGroups table td, #func_modalMessageDiv .mngGroups table td {
  font-size: 0.95em;
  padding: 1em 0.5em;
  border: none;
}
section .mngGroups table a.from, #func_modalMessageDiv .mngGroups table a.from {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
section .mngGroups table a.subject, section .mngGroups table a.delete, #func_modalMessageDiv .mngGroups table a.subject, #func_modalMessageDiv .mngGroups table a.delete {
  color: #950b0b;
  font-weight: bold;
  text-decoration: none;
}
section .mngGroups table a:hover, section .mngGroups table a:focus, #func_modalMessageDiv .mngGroups table a:hover, #func_modalMessageDiv .mngGroups table a:focus {
  color: #215279;
}
section .groupInfo, #func_modalMessageDiv .groupInfo {
  border-bottom: 1px solid #91979d;
}
section .groupInfo ul, #func_modalMessageDiv .groupInfo ul {
  margin: 1.5em 0;
  float: left;
}
section .groupInfo ul li, #func_modalMessageDiv .groupInfo ul li {
  display: inline;
  margin: 1em 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
section .groupInfo ul li .last, #func_modalMessageDiv .groupInfo ul li .last {
  border: none;
}
section .groupInfo .editDeleteRemoveButtons, #func_modalMessageDiv .groupInfo .editDeleteRemoveButtons {
  float: right;
  margin: 1em 1.5em;
  padding: 0;
}
section .studentInfo, #func_modalMessageDiv .studentInfo {
  border-bottom: 1px solid #91979d;
}
section .studentInfo ul, #func_modalMessageDiv .studentInfo ul {
  margin: 1.5em 0;
  float: left;
}
section .studentInfo ul li, #func_modalMessageDiv .studentInfo ul li {
  display: inline;
  margin: 1em 0.25em;
  padding: 0 1.25em 0 1em;
}
section .studentInfo ul li .last, #func_modalMessageDiv .studentInfo ul li .last {
  border: none;
}
section .studentInfo .editDeleteRemoveButtons, #func_modalMessageDiv .studentInfo .editDeleteRemoveButtons {
  float: right;
  margin: 1em 1.5em;
  padding: 0;
}
section #col1MngGroup, #func_modalMessageDiv #col1MngGroup {
  width: 40%;
  float: left;
  margin-top: 1em;
}
section #col2MngGroup, #func_modalMessageDiv #col2MngGroup {
  width: 40%;
  float: right;
  margin: 1em 5% 1em 5%;
}
section .profileForm, #func_modalMessageDiv .profileForm {
  border-top: 1px solid #91979d;
}
section .profileFormFields, section #searchForTeacher, #func_modalMessageDiv .profileFormFields, #func_modalMessageDiv #searchForTeacher {
  float: left;
}
section .emailPreferences, section #currentStudents, section #currentTeachers, section #createStudentsearchForTeacher, section .enrollmentInfo, #func_modalMessageDiv .emailPreferences, #func_modalMessageDiv #currentStudents, #func_modalMessageDiv #currentTeachers, #func_modalMessageDiv #createStudentsearchForTeacher, #func_modalMessageDiv .enrollmentInfo {
  float: right;
  width: 50%;
  padding-top: 1em;
}
section #UpdateUserAccount label, section #CreateNewStudent label, section #SearchForInteractiveTeachersList label, section #createTeacherModalForm label, section #createProgramAdministratorModalForm label, #func_modalMessageDiv #UpdateUserAccount label, #func_modalMessageDiv #CreateNewStudent label, #func_modalMessageDiv #SearchForInteractiveTeachersList label, #func_modalMessageDiv #createTeacherModalForm label, #func_modalMessageDiv #createProgramAdministratorModalForm label {
  width: 150px;
  margin-top: -1px;
  display: inline-block;
  float: left;
  padding: 3px;
}
section #UpdateUserAccount input[type=text], section #CreateNewStudent input[type=text], section #SearchForInteractiveTeachersList input[type=text], section #createTeacherModalForm input[type=text], section #UpdateLessonInstanceStatus input[type=text], section #createProgramAdministratorModalForm input[type=text], #func_modalMessageDiv #UpdateUserAccount input[type=text], #func_modalMessageDiv #CreateNewStudent input[type=text], #func_modalMessageDiv #SearchForInteractiveTeachersList input[type=text], #func_modalMessageDiv #createTeacherModalForm input[type=text], #func_modalMessageDiv #UpdateLessonInstanceStatus input[type=text], #func_modalMessageDiv #createProgramAdministratorModalForm input[type=text] {
  height: 20px;
  width: 220px;
  padding: 0px 8px;
}
section #UpdateLessonInstanceStatus textarea, #func_modalMessageDiv #UpdateLessonInstanceStatus textarea {
  min-width: 75%;
  min-height: 200px;
}
section .updateRequestLinks, #func_modalMessageDiv .updateRequestLinks {
  width: 100%;
  float: right;
  text-align: right;
  margin: -2.75em 0 0 0;
  font-weight: bold;
  font-size: 0.85em;
}
section .updateRequestLinks ul li, #func_modalMessageDiv .updateRequestLinks ul li {
  display: inline;
  margin: 0 0.25em;
  border-right: 1px solid #252628;
  padding: 0 1.25em 0 1em;
}
section .updateRequestLinks ul li a, #func_modalMessageDiv .updateRequestLinks ul li a {
  color: #262626;
  text-decoration: none;
}
section .updateRequestLinks ul li a:hover, section .updateRequestLinks ul li a:focus, #func_modalMessageDiv .updateRequestLinks ul li a:hover, #func_modalMessageDiv .updateRequestLinks ul li a:focus {
  color: #215279;
}
section .updateRequestLinks li.last, #func_modalMessageDiv .updateRequestLinks li.last {
  border-right: none;
  padding-right: 0;
}
section .msgCenterOptions, section .groupOptions, #func_modalMessageDiv .msgCenterOptions, #func_modalMessageDiv .groupOptions {
  width: 100%;
  float: right;
  text-align: right;
  margin: -2em 0 0 0;
  font-weight: bold;
  font-size: 0.85em;
  /*border-top: 1px solid #91979d;*/
}
section .msgCenterOptions ul, section .groupOptions ul, #func_modalMessageDiv .msgCenterOptions ul, #func_modalMessageDiv .groupOptions ul {
  display: inline;
}
section .msgCenterOptions ul li, section .groupOptions ul li, #func_modalMessageDiv .msgCenterOptions ul li, #func_modalMessageDiv .groupOptions ul li {
  display: inline;
  margin: 0;
  padding: 0 1.25em 0 0;
}
section .msgCenterOptions ul li .spanLink, section .groupOptions ul li .spanLink, #func_modalMessageDiv .msgCenterOptions ul li .spanLink, #func_modalMessageDiv .groupOptions ul li .spanLink {
  color: #262626;
  text-decoration: none;
}
section .msgCenterOptions ul li a:hover, section .msgCenterOptions ul li a:focus, section .groupOptions ul li a:hover, section .groupOptions ul li a:focus, #func_modalMessageDiv .msgCenterOptions ul li a:hover, #func_modalMessageDiv .msgCenterOptions ul li a:focus, #func_modalMessageDiv .groupOptions ul li a:hover, #func_modalMessageDiv .groupOptions ul li a:focus {
  color: #215279;
}
section .msgCenterOptions li.last, section .groupOptions li.last, #func_modalMessageDiv .msgCenterOptions li.last, #func_modalMessageDiv .groupOptions li.last {
  border-right: none;
  padding-right: 0;
}
section .bottomNav, #func_modalMessageDiv .bottomNav {
  color: #950b0b;
  font-size: 1em;
  margin: 0 0;
  font-weight: bold;
  padding: 0 0;
  margin: 2em 0;
}
section .bottomNav p, #func_modalMessageDiv .bottomNav p {
  display: inline;
  margin: 0 1em;
  padding: 0 0;
}
section .bottomNav a, #func_modalMessageDiv .bottomNav a {
  text-decoration: none;
  color: #950b0b;
}
section .bottomNav .prev, #func_modalMessageDiv .bottomNav .prev {
  margin: -0.25em 0.5em 0 0;
  vertical-align: middle;
}
section .bottomNav .next, #func_modalMessageDiv .bottomNav .next {
  margin: -0.25em 0 0 0.75em;
  vertical-align: middle;
}
section .formalWriting, section .genericBox100percBlue, #func_modalMessageDiv .formalWriting, #func_modalMessageDiv .genericBox100percBlue {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  clear: both;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #90a8bc;
}
section .informalWriting, section .genericBox100percGreen, #func_modalMessageDiv .informalWriting, #func_modalMessageDiv .genericBox100percGreen {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  clear: both;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #8bb68b;
}
section .conversationalWriting, section .genericBox100percOrange, #func_modalMessageDiv .conversationalWriting, #func_modalMessageDiv .genericBox100percOrange {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  clear: both;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #f8d187;
}
section .genericBox40percBlue, #func_modalMessageDiv .genericBox40percBlue {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  width: 40%;
  float: left;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #90a8bc;
}
section .genericBox40percGreen, #func_modalMessageDiv .genericBox40percGreen {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  width: 40%;
  float: right;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #8bb68b;
}
section .genericBox40perc, #func_modalMessageDiv .genericBox40perc {
  width: 40%;
  float: right;
  padding: 1em 1em;
  margin: 2em 1em;
}
section .genericBox45perc, #func_modalMessageDiv .genericBox45perc {
  width: 45%;
  float: right;
  padding: 1em 1em;
  margin: 2em 1em;
}
section .genericBox25percOrange, #func_modalMessageDiv .genericBox25percOrange {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  width: 25%;
  float: left;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #fbd998;
}
section .genericBox25percBlue, #func_modalMessageDiv .genericBox25percBlue {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  width: 25%;
  float: left;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #90a8bc;
}
@media screen and (max-width: 800px) {
  section .genericBox25percBlue, section .genericBox25perc, #func_modalMessageDiv .genericBox25percBlue, #func_modalMessageDiv .genericBox25perc {
    width: 100% !important;
    float: none !important;
    margin: 1em 0 !important;
  }
}
section .genericBox25percGreen, #func_modalMessageDiv .genericBox25percGreen {
  border-radius: 10px;
  box-shadow: 2px 2px 15px #262626;
  width: 25%;
  float: left;
  padding: 1em 1em;
  margin: 2em 1em;
  background: #8bb68b;
}
section .genericBox25perc, #func_modalMessageDiv .genericBox25perc {
  width: 25%;
  float: left;
  padding: 1em 1em;
  margin: 2em 1em;
}
section .newspaper, #func_modalMessageDiv .newspaper {
  border-top: 3px solid #999;
  border-bottom: 3px solid #999;
  padding: 1em 1em;
  width: 50%;
  margin: 0 auto;
  clear: both;
  font-family: "Times New Roman", Times, serif;
  text-align: justify;
  text-justify: newspaper;
  background: #CCC;
}
section .wordBank, section .twoColumn, #func_modalMessageDiv .wordBank, #func_modalMessageDiv .twoColumn {
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}
section .threeColumns, #func_modalMessageDiv .threeColumns {
  -moz-column-count: 3;
  -moz-column-gap: 40px;
  -webkit-column-count: 3;
  -webkit-column-gap: 40px;
  column-count: 3;
  column-gap: 40px;
}
section .animationItalics, #func_modalMessageDiv .animationItalics {
  font-style: italic;
}
section .animationBold, #func_modalMessageDiv .animationBold {
  font-weight: bold;
  color: #215279;
}
section .tableCellBG, #func_modalMessageDiv .tableCellBG {
  background-color: #ffff01;
}
section table.sqTable, #func_modalMessageDiv table.sqTable {
  color: #000000;
}
section .greenHighlight, #func_modalMessageDiv .greenHighlight {
  color: #176e18;
}
section .fCard1, section .fCard2, section .fCard3, section .fCard4, section .fCard5, section .fCard6, section .fCard7, section .fCard8, #func_modalMessageDiv .fCard1, #func_modalMessageDiv .fCard2, #func_modalMessageDiv .fCard3, #func_modalMessageDiv .fCard4, #func_modalMessageDiv .fCard5, #func_modalMessageDiv .fCard6, #func_modalMessageDiv .fCard7, #func_modalMessageDiv .fCard8 {
  background: #eee;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15); /* The third layer shadow */
  padding: 1em 1em 1em 1em;
  width: 40%;
  margin: 0 auto;
  height: 10em;
}
section .fCard1 p, section .fCard2 p, section .fCard3 p, section .fCard4 p, section .fCard5 p, section .fCard6 p, section .fCard7 p, section .fCard8 p, #func_modalMessageDiv .fCard1 p, #func_modalMessageDiv .fCard2 p, #func_modalMessageDiv .fCard3 p, #func_modalMessageDiv .fCard4 p, #func_modalMessageDiv .fCard5 p, #func_modalMessageDiv .fCard6 p, #func_modalMessageDiv .fCard7 p, #func_modalMessageDiv .fCard8 p {
  font-family: "architects_daughter";
  color: #000000;
}

#SubmitSupportTicket {
  min-width: 450px;
  max-width: 600px;
  font-size: 0.85em;
}
#SubmitSupportTicket input[type=text], #SubmitSupportTicket textarea {
  width: 100%;
}
#SubmitSupportTicket textarea {
  resize: vertical;
  min-height: 200px;
}

/*Social Studies Government Branches Boxes*/
#executiveBranch, #legislativeBranch, #judicialBranch {
  width: 33%;
  float: left;
}

ul.smallBox {
  margin: 0 0 0 0.65em;
  font-size: 0.75em;
}

/*inbox stuff*/
.truncatedTD {
  /*display: inline-block;*/
  max-width: 450px;
  width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nonTruncatedTD {
  display: inline-block;
  max-width: 450px;
}

.messageWidth {
  max-width: 450px;
}

.important {
  color: red;
}

.unread {
  font-weight: bold;
}

input[type=text].func_subject {
  width: 80%;
}

/*end Inbox*/
/*Question Box Tables*/
.questionbox table, .punnettSquare {
  background-color: #ffffff;
  color: #000000;
  width: 40%;
}
.questionbox table td, .punnettSquare td {
  text-align: center;
}
.questionbox table tr, .punnettSquare tr {
  border: 2px solid #8d8d8d;
}
.questionbox table tr:nth-child(even), .punnettSquare tr:nth-child(even) {
  background: #ffffff;
}
.questionbox table tr:nth-child(odd), .punnettSquare tr:nth-child(odd) {
  background: #ffffff;
}

/*Yellow Buttons*/
button.css3button, a.css3button, a:visited.css3button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  padding: 10px 20px;
  background: -moz-linear-gradient(top, #fff3db 0%, #f8d187 25%, #f8b332);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff3db), color-stop(0.25, #f8d187), to(#f8b332));
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #000000;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -1px 0px rgba(255, 255, 255, 0.7);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.3);
}

/*Gray Buttons*/
button.grayCss3button, a.grayCss3button, a:visited.grayCss3button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  padding: 10px 20px;
  background: -moz-linear-gradient(top, #f6f6f6 0%, #a3a3a3 25%, #5b5b5b);
  background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), color-stop(0.25, #a3a3a3), to(#5b5b5b));
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #000000;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -1px 0px rgba(255, 255, 255, 0.7);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.3);
}

/*multiquestion activities buttons alignment*/
.prevNextButtons {
  margin: 1em 4em;
}

#custom-caption {
  margin: 0 1em;
}

/*end activites buttons*/
/*preMath activities*/
table.primeComposite {
  width: 25%;
  border: none;
  float: left;
}
table.primeComposite th {
  text-align: center;
}
table.primeComposite tr {
  background-color: white;
  border: none;
}
table.primeComposite td {
  background-color: white;
  border: none;
  text-align: center;
}

/*Social Studies Compass Animation*/
.compassActivity {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.compassActivity img {
  position: relative;
  z-index: 1;
}

.compassActivity input {
  position: absolute;
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.compassActivity .north {
  top: 20%;
  left: 46%;
}

.compassActivity .northeast {
  top: 30%;
  right: 30%;
}

.compassActivity .east {
  right: 20%;
  top: 46%;
}

.compassActivity .southeast {
  right: 30%;
  bottom: 30%;
}

.compassActivity .south {
  bottom: 20%;
  left: 46%;
}

.compassActivity .southwest {
  left: 30%;
  bottom: 30%;
}

.compassActivity .west {
  left: 20%;
  top: 46%;
}

.compassActivity .northwest {
  top: 30%;
  left: 30%;
}

/*modal form styles*/
#func_recipients {
  max-width: 500px;
  font-size: 0.85em;
}

#newMessageForm, #updateMyPasswordModalForm, #issueUpdateEmailTokenForm, #updateUserRolesModalForm {
  font-size: 0.85em;
  font-family: "arimoregular";
}

#updateMyPasswordModalForm, #issueUpdateEmailTokenForm {
  max-width: 400px;
}

#SubmitTextAnswerResponse textarea {
  min-width: 75%;
  min-height: 200px;
}

/*Icon Boxes
================================================== */
.keyTerms {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_key_terms.png) 1em 1em no-repeat;
}

.tip {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_tips.png) 1em 1em no-repeat;
}

.bonusQuestion {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_bonus_quest.png) 1em 1em no-repeat;
}

.learningActivity {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_learn_act.png) 1em 1em no-repeat;
}

.onTest {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_on_test.png) 1em 1em no-repeat;
}

.remember {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_remember.png) 1em 1em no-repeat;
}

.sampleQuestion {
  margin: 1em 0 2em 0;
  padding: 0 1em 1em 75px;
  background: url(../images/icons/i_sample_quest.png) 1em 1em no-repeat;
}

.teachMoment1 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher1.png) 1em 1em no-repeat;
}

.teachMoment2 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher2.png) 1em 1em no-repeat;
}

.teachMoment3 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher3.png) 1em 1em no-repeat;
}

.teachMoment4 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher4.png) 1em 1em no-repeat;
}

.teachMoment5 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher5.png) 1em 1em no-repeat;
}

.teachMoment6 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher6.png) 1em 1em no-repeat;
}

.teachMoment7 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher7.png) 1em 1em no-repeat;
}

.teachMoment8 {
  margin: 0em 0 2em 0;
  padding: 0 1em 1em 135px;
  background: url(../images/icons/teacher8.png) 1em 1em no-repeat;
}

footer {
  clear: both;
  position: relative;
  margin-top: -2rem;
  line-height: 1rem;
  background: #215279;
  color: #ffffff;
  font-size: 0.75rem;
}
@media screen and (min-width: 720px) {
  footer {
    height: 2rem;
  }
}
footer .footer__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
}
@media screen and (min-width: 720px) {
  footer .footer__wrapper {
    flex-direction: initial;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1216px) {
  footer .footer__wrapper {
    padding: 0;
  }
}

/*media queries
================================================== */
@media only screen and (max-width: 970px) {
  #globalSiteNav {
    padding: 0.25em 5%;
  }
  header {
    padding: 1em 5%;
  }
  .siteNav {
    padding: 0 5%;
  }
  h1 {
    margin: 0.25em 5%;
  }
  .msgViewCompose {
    margin: -1.75em 5% 0 15%;
    font-weight: bold;
    font-size: 0.95em;
  }
  .msgViewCompose ul li {
    display: inline;
    margin: 0 0.25em;
    border-right: 1px solid #252628;
    padding: 0 1.25em 0 1em;
  }
  .msgViewCompose ul li a {
    color: #262626;
    text-decoration: none;
  }
  .msgViewCompose li.last {
    border-right: none;
    padding-right: 0;
  }
  #col1TeacherCtr, #col1ProgCtr, #col2TeacherCtr, #col2ProgCtr {
    float: none;
    width: 90%;
    margin: 0 5% 1em 5%;
  }
  .searchInstructions {
    margin: 0 5% 1em 5%;
  }
  .modules, .messages {
    margin: 0.25em 5% 5em 5%;
  }
}
@media only screen and (max-width: 768px) {
  #globalSiteNav {
    padding: 0.25em 2%;
    /*ul li {
    	display: none;
    }
    select {
    	display: inline-block;
    	}*/
  }
  header {
    padding: 1em 2%;
  }
  header .headerCol2Inside {
    width: 74%;
    float: right;
    text-align: right;
    margin: 0 0;
    padding: 0 0;
  }
  header .headerCol2Inside h1 {
    padding: 1em 0 0 0;
    margin: 0 0;
    font-weight: bold;
    font-size: 3em;
    font-family: "bebas_neueregular";
  }
  .siteNav {
    padding: 0 5%;
  }
  section .genericBox40percBlue {
    width: 90%;
    padding: 0 1em;
    margin: 1em 2em 1em 0;
  }
  section .genericBox40percGreen {
    width: 90%;
    float: left;
    padding: 0 1em;
    margin: 1em 0;
  }
  section .genericBox40perc {
    width: 100%;
    float: none;
    margin: 1em 0;
  }
  section .col1, section .col2, section #searchForTeacher, section #currentStudents, section .emailPreferences, section .profileFormFields, section #supportCtrCol1, section #supportCtrCol2 {
    float: none;
    width: 100%;
    margin: 0 5% 1em 5%;
  }
  section .col1 .tutorialRight, section .col1 .tutorialLeft, section .col2 .tutorialRight, section .col2 .tutorialLeft, section #searchForTeacher .tutorialRight, section #searchForTeacher .tutorialLeft, section #currentStudents .tutorialRight, section #currentStudents .tutorialLeft, section .emailPreferences .tutorialRight, section .emailPreferences .tutorialLeft, section .profileFormFields .tutorialRight, section .profileFormFields .tutorialLeft, section #supportCtrCol1 .tutorialRight, section #supportCtrCol1 .tutorialLeft, section #supportCtrCol2 .tutorialRight, section #supportCtrCol2 .tutorialLeft {
    float: none;
  }
  section .col1 #col1Portfolio .mngViewSend, section .col2 #col1Portfolio .mngViewSend, section #searchForTeacher #col1Portfolio .mngViewSend, section #currentStudents #col1Portfolio .mngViewSend, section .emailPreferences #col1Portfolio .mngViewSend, section .profileFormFields #col1Portfolio .mngViewSend, section #supportCtrCol1 #col1Portfolio .mngViewSend, section #supportCtrCol2 #col1Portfolio .mngViewSend {
    float: none;
    margin: 0 0 0 0;
  }
  .msgViewCompose {
    margin: -1.75em 5% 0 5%;
  }
  .messageWidth, truncatedTD {
    max-width: 350px;
  }
  .modules {
    border-top: 1px solid #91979d;
    margin: 0.25em 5% 5em 5%;
  }
}
@media screen and (max-width: 725px) {
  .imgFloatLeft {
    float: none;
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .imgFloatRight {
    float: none;
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  #globalSiteNav {
    padding: 0.25em 2%;
    font-size: 0.75em;
  }
  header {
    padding: 1em 2%;
  }
  header .headerCol1 {
    width: 100%;
    float: none;
    padding: 1em 0 0 0;
    text-align: center;
  }
  header .headerCol1 p {
    margin: 1.5em 0 0 0;
  }
  header .headerCol2 {
    display: none;
  }
  header .headerCol1Inside {
    width: 100%;
    float: none;
    text-align: center;
    padding: 1em 0;
  }
  header .headerCol2Inside {
    width: 100%;
    float: none;
    text-align: center;
    margin: 0 0;
    padding: 0 0;
  }
  header .headerCol2Inside h1 {
    padding: 0 0;
    margin: 0 0;
    font-weight: bold;
    font-size: 3em;
    font-family: "bebas_neueregular";
  }
  .siteNav {
    height: auto;
    padding: 0 0;
    margin-bottom: 0.5em;
  }
  .nav,
  .nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Top level nav */
  .nav {
    float: left;
    width: 100%;
  }
  /* Dropdowns */
  .nav ul {
    display: none;
  }
  .nav li {
    float: none;
    position: relative;
    display: block;
    text-align: left;
  }
  /* Top level nav items */
  .nav li > a {
    float: left;
    padding: 10px -15px 10px 0px;
    border-right: none;
    border-bottom: 1px solid #B2B2B2;
    width: 95.5%;
  }
  /* Top level hover state, preserve hover state when hovering dropdown  */
  .nav li > a:hover,
  .nav li > a:focus,
  .nav li:focus > a,
  .nav li:hover > a {
    background: #505050;
    outline: 0;
    color: #ffffff;
  }
  .nav li:hover ul,
  .nav li:focus ul,
  ul.show-menu {
    display: none;
  }
  .nav ul li {
    float: none;
    position: float;
  }
  .nav ul a {
    float: none;
    display: block;
    color: #FFF;
    font-size: 12px;
    text-shadow: none;
    border: 1px solid #222;
    border-width: 0 0 1px;
    transition: 0.1s linear all;
  }
  /* Rounded corners for ul and last list item */
  .nav ul,
  .nav ul li:last-child a {
    border: 0;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }
  .nav ul a:hover,
  .nav ul a:focus {
    background: #EEE;
    color: #333;
    text-shadow: none;
  }
  .modules h1 {
    margin-top: 1em;
  }
  .modules table {
    margin: 1em 0 1em 0;
    width: 100%;
  }
  .modules table th {
    font-weight: bold;
    font-size: 0.85em;
  }
  .modules table td {
    font-size: 0.75em;
  }
  .modules table td.progressBarSize {
    width: 35%;
  }
  .modules table .ui-progressbar {
    display: none;
  }
  .modules table td.button {
    word-wrap: none;
  }
  .modules table button.portfolioButton {
    padding: 0.25em 0.15em;
    font-size: 0.75em;
    font-weight: bold;
  }
  .modules table button.moduleButton {
    padding: 0.25em 0.1em;
    font-size: 0.75em;
    font-weight: bold;
  }
  .modules table button.resumeModuleButton {
    padding: 0.25em 0.75em;
    background: #950b0b;
    color: white;
    text-decoration: none;
    font-size: 0.75em;
    font-weight: bold;
    width: 45%;
    border: none;
  }
  .modules #progressbar, .modules #progressbar2, .modules #progressbar3, .modules #progressbar4 {
    display: none;
  }
  .modules .precentComplete {
    font-size: 0.95em;
  }
  .messageWidth, truncatedTD {
    max-width: 250px;
  }
  section #contentTitleAndNav .contentName {
    text-align: center;
    float: none;
    width: 100%;
  }
  section #contentTitleAndNav .contentTopNav {
    float: none;
    width: 100%;
    text-align: center;
    color: #950b0b;
    font-size: 0.85em;
    margin: 0 0;
  }
  section #contentTitleAndNav .contentTopNav p {
    display: inline;
  }
  section #contentTitleAndNav .contentTopNav .prev {
    margin: 1.15em 0.5em 0 0;
  }
  section #contentTitleAndNav .contentTopNav .next {
    margin: 1.15em 0 0 0.5em;
    float: none;
  }
  section .col1 {
    width: 100%;
    float: left;
    padding-top: 1em;
  }
  section .col1 input[type=text], section .col1 input[type=password] {
    width: 60%;
    margin-left: 1em;
  }
  section .col1 input[type=text] {
    margin-left: 3.5em;
  }
  section .col2 {
    display: none;
  }
  section ul {
    margin: 1em 0 1em 1em;
  }
  section ul li {
    list-style-type: circle;
  }
  section ol.upperAlphaOrder {
    list-style-type: upper-alpha;
    margin: 1em 0 1em 1em;
  }
  section ol.lowerAlphaOrder {
    list-style-type: lower-alpha;
    margin: 1em 0 1em 1em;
  }
  section ol.lowerRoman {
    list-style-type: lower-roman;
    margin: 0.5em 0 0.5em 1em;
  }
  section ol.number {
    list-style-type: decimal;
    margin: 1em 0 1em 1em;
  }
  .storyIdBox {
    width: 100%;
  }
  .keyTerms, .sampleQuestion, .tip, .remember {
    margin: 0 0;
    padding: 0 0;
    background: none;
    border-bottom: 1px solid #91979d;
  }
  footer .footerCol1 select {
    display: inline-block;
  }
}
/* Adding to old stuff */
.student__module--button {
  background: #176e18;
  color: #FFF;
  height: 3em;
  border: none;
  outline: none;
  padding: 0.5em 2em;
}

/* New General */
.activity__matchingDropdown .feedback, .activity__matchingDropdown .question, .ca-audioInstructions, .boxed__content, .showTwoOptions, .phraseCounter .content, .constLearningCheck__content .question, .imageSlider .images .content {
  background: #FFF;
  border: solid 1px #CCC;
  margin-bottom: 1em;
  padding: 1em;
  box-shadow: 0 0.5em 0.5em -0.5em black;
}

video {
  max-width: 100%;
  height: auto;
}

audio {
  margin: 1em 0;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
}
.flex-left .flex-item {
  margin-right: 1rem;
}
.flex-left .flex-item:last-child {
  margin-right: 0;
}

.table__general {
  width: 100%;
}

.input--larger input[type=text], .input--larger input[type=password] {
  padding: 0.25em;
  font-size: 1.2em;
}

.box__general {
  background: #F7F7F7;
  border: solid 1px #CCC;
  margin-bottom: 1em;
  padding: 1em;
  box-shadow: 0 0.5em 0.5em -0.5em black;
}
.box__general input[type=text] {
  padding: 0.5em;
  font-size: 1.2em;
  width: 100%;
}
.box__general input[type=submit] {
  padding: 0.5em;
  font-size: 1.2em;
}

.oasisLicenseTitle {
  float: left;
  color: #FFF;
}

.column50 {
  width: 48%;
  margin: 0 2% 0 0;
  float: left;
}

@media screen and (max-width: 760px) {
  .column50 {
    width: 100%;
    margin: 1em 0;
    float: none;
  }
}
.column--third {
  width: 32%;
  margin-right: 1.3%;
  float: left;
}

.column--third:last-child {
  margin-right: 0;
}

@media screen and (max-width: 760px) {
  .column--third {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}
#searchUserSubscriptionReport input {
  padding: 0.5em;
}

.table__mathDigits {
  width: 100%;
  margin: 2em 0;
}
.table__mathDigits tr {
  background: #FFF !important;
  border: none;
}
.table__mathDigits tr:first-child {
  background: none !important;
}
.table__mathDigits th {
  background: transparent !important;
  padding: 0;
}
.table__mathDigits td {
  padding: 1em 0;
  text-align: center;
  border: solid 1px #000;
}
.table__mathDigits input {
  width: 2em;
  text-align: center;
}

th.table__rotate {
  height: 93px;
  white-space: nowrap;
}

th.table__rotate > div {
  transform: translate(-8px, 67px) rotate(315deg);
  width: 1em;
}

th.table__rotate > div > span {
  border-bottom: 1px solid #000;
}

.table__fraction--click tr {
  background: #FFF !important;
}
.table__fraction--click td {
  padding: 0;
}
.table__fraction--click a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2em 1em;
}

/* Repeats for direct sell */
.ul__noBullet {
  margin: 1em 0;
  padding: 0;
}

.ul__noBullet li {
  list-style: none;
  margin-bottom: 0.5em;
}

.ul__noBullet a {
  color: #33AAFF;
}

.func_allCurriculum, .func_individualCurriculum {
  padding: 0 1em;
}
.func_allCurriculum input, .func_individualCurriculum input {
  margin-right: 1em;
}

.directSell__input--margin input {
  margin-right: 1em;
}
.directSell__input--margin label {
  margin-right: 2em;
  clear: both;
}

.directSell__alert--show {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.directSell__alert--content {
  width: 96%;
  background: #FFF;
  padding: 1.5em;
}

.form__general input[type=submit] {
  width: 100%;
  font-size: 1.2em;
  padding: 1em 2em;
  color: #FFF;
  font-weight: 500;
  text-align: center;
  background: #33AAFF;
  border: none;
  border-radius: 10px;
  -webkit-appearance: none;
}
.form__general input[type=submit]:hover {
  cursor: pointer;
}

.directSell .button__generic {
  display: inline-block;
  width: 100%;
  margin: 1em 1em 1em 0;
  padding: 1.5em 1.5em;
  font-size: 1.2em;
  color: #FFF !important;
  text-align: center;
  text-decoration: none;
  background: #33AAFF;
  border-radius: 10px;
  transition: all 300ms;
}
.directSell .button__generic:hover {
  background: #F9B530;
  color: #000 !important;
}

@media screen and (min-width: 760px) {
  .directSell .button__generic {
    width: auto;
    font-size: 1em;
    padding: 1em 1.5em;
  }
  .form__general input[type=submit] {
    width: auto;
  }
  .directSell__alert--content {
    width: 50%;
  }
}
/* Student Orientation */
.studentOrientation {
  width: 100%;
  margin: 1em auto;
  font-size: 1.2em;
  text-align: center;
}

.studentOrientation__content {
  width: 674px;
}
.studentOrientation__content h2 {
  font-size: 1.5em;
  font-weight: bold;
}
.studentOrientation__content .button {
  font-size: 1.1em;
  width: 50%;
  margin: 1em 0;
}

.studentOrientation__container {
  padding: 1em;
}
.studentOrientation__container h2 {
  font-size: 1.5em;
  font-weight: bold;
}
.studentOrientation__container h3 {
  margin: 1em 0;
  font-size: 1.2em;
  font-weight: bold;
  color: #950b0b;
}
.studentOrientation__container p {
  margin: 0.5em 0;
}
.studentOrientation__container ul {
  margin-left: 2em;
}
.studentOrientation__container ul.disc {
  list-style: disc;
}
.studentOrientation__container ul.circle {
  list-style: circle;
}
.studentOrientation__container video {
  max-width: 100%;
  height: auto;
}

.studentOrientation__nav {
  margin: 2em auto;
  width: 120px;
}
.studentOrientation__nav a:last-child {
  float: right;
}

.studentOrientation__page {
  float: right;
  margin: 0 0 1em 1em;
  padding: 1em;
  background: #FFF;
  border: solid 1px #CCC;
  border-radius: 2em;
}

@media screen and (min-width: 760px) {
  .studentOrientation {
    width: 750px;
    height: 186px;
    text-align: left;
  }
  .studentOrientation__content {
    float: left;
    padding: 0 1em;
  }
  .studentOrientation__content img {
    float: left;
    padding: 1em 2em 0 0;
  }
  .studentOrientation__content .button {
    float: right;
    width: 25%;
  }
  .studentOrientation__leftBracket {
    float: left;
    width: 38px;
    height: 186px;
    background: url("/public/images/content/left_bracket.png") no-repeat;
  }
  .studentOrientation__rightBracket {
    float: left;
    width: 38px;
    height: 186px;
    background: url("/public/images/content/right_bracket.png") no-repeat;
  }
  .studentOrientation__container {
    margin: 0 auto;
    width: 75%;
    max-width: 1200px;
  }
}
/* Timelines */
.timelineLines, .newTimelineDate:after { /* generic basis for horizontal lines */
  content: "";
  position: absolute;
  left: -1em;
  height: 3px;
  background: #f8b432;
  transition: all 1500ms;
}

.newTimeline {
  position: relative;
  border-left: solid 0.2em #f8b432;
}

.newTimelineDate {
  position: relative;
  z-index: 10;
  margin: 0.5em 1em;
  font-size: 2em;
  color: #FFF;
  padding: 0.1em 0.5em;
  background: #215279;
  text-decoration: none;
  border-radius: 0.25em;
  transition: all 1s;
}

.newTimelineDate:after {
  margin-top: 0.75em;
  width: 1em;
}

.newTimelineDate:hover:after {
  background: #215279;
}

.newTimelineDate:hover ~ .newTimelineName:after, .newTimelineName:hover:after {
  border-left: solid 3px #215279;
  border-bottom: solid 3px #215279;
}

.newTimelineName {
  display: block;
  margin: 0.5em 1em 0.5em 3.25em;
  color: #000;
  font-size: 1.75em;
  text-decoration: none;
  transition: all 1500ms;
}

.newTimelineName:after {
  content: "";
  position: absolute;
  z-index: 9;
  left: 2em;
  margin-top: -1.2em;
  width: 1em;
  height: 2em;
  border-left: solid 3px #f8b432;
  border-bottom: solid 3px #f8b432;
  opacity: 1;
  transition: left 1500ms, opacity 1s, border-left 1s, border-bottom 1s;
}

.newTimelineName.newTimelineActive {
  margin: 0.5em 1em;
}

.newTimelineName.newTimelineActive:after {
  left: 0;
  opacity: 0;
}

.newTimelineContent {
  position: relative;
  z-index: 11;
  display: block;
  background: #F7F7F7;
  margin: 0 1em 2em 1em;
  padding: 1em;
  border: solid 0.1em #CCC;
  box-shadow: 0 0.5em 0.5em -0.5em rgba(0, 0, 0, 0.7);
  border-radius: 0.5em;
  opacity: 0;
  transition: opacity 1500ms;
}

/* New General Styles */
.displayNone {
  display: none;
}

.genericBox__style, .pdfSearch__results, .pdfSearch__box {
  width: 100%;
  margin: 1em 0;
  padding: 1em;
  background: #FFF;
  border: solid 1px #CCC;
}

.pdfSearch__box input {
  width: 100%;
  padding: 0.5em;
  background: #F7F7F7;
  border: solid 2px #5180ac;
  font-size: 1.1em;
}

.pdfSearch__filter {
  display: flex;
  align-items: center;
  margin: 1em 0;
}
.pdfSearch__filter button {
  height: auto;
  margin: 0 1em;
  background: #5180ac;
  color: #FFF;
  padding: 0.5em;
  font-weight: bold;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all 350ms;
}
.pdfSearch__filter button:hover {
  background: #215279;
}

.pdfSearch__results {
  position: relative;
}
.pdfSearch__results .pdfSearch__results--filter {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5em;
  font-weight: bold;
  border-bottom: solid 2px #215279;
  border-left: solid 2px #215279;
}

.flex__buttons, .activity__buildLetter .buildLetter__buttons .grouping {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1em 0;
}
.flex__buttons button, .activity__buildLetter .buildLetter__buttons .grouping button {
  min-width: 15%;
  height: auto;
  background: #5180ac;
  color: #FFF;
  padding: 0.5em;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  border: none;
}
.flex__buttons button:enabled, .activity__buildLetter .buildLetter__buttons .grouping button:enabled {
  cursor: pointer;
  transition: all 350ms;
}
.flex__buttons button:enabled:hover, .activity__buildLetter .buildLetter__buttons .grouping button:enabled:hover {
  background: #215279;
}

.lesson__list ol {
  list-style: decimal;
  margin: 0.5em 2em;
}

.questions__headerWrapper, .journal__headerWrapper, .tip__headerWrapper, .references__headerWrapper, .sampleQuestion__headerWrapper, .keyTerms__headerWrapper {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 1em 0;
  padding-left: 56px;
}
.questions__headerWrapper h3, .journal__headerWrapper h3, .tip__headerWrapper h3, .references__headerWrapper h3, .sampleQuestion__headerWrapper h3, .keyTerms__headerWrapper h3 {
  color: #950b0b;
  border-bottom: solid 1px black;
}

.keyTerms__headerWrapper {
  background: url("/public/images/icons/i_key_terms.png") 0% 50% no-repeat;
}

.sampleQuestion__headerWrapper {
  background: url("/public/images/icons/i_sample_quest.png") 0% 50% no-repeat;
}

.references__headerWrapper {
  background: url("/public/images/icons/i_references.png") 0% 50% no-repeat;
}

.tip__headerWrapper {
  background: url("/public/images/icons/i_tips.png") 0% 50% no-repeat;
}

.journal__headerWrapper {
  background: url("/public/images/icons/journal_entry_icon.png") 0% 50% no-repeat;
}

.questions__headerWrapper {
  background: url("/public/images/icons/questions_to_consider_icon.png") 0% 50% no-repeat;
}

/* New Activies */
.activity__feedback, .box__activity, .activity__flashCard--front, .activity__flashCard--back {
  border: #CCC;
  padding: 1em;
  background: #FFF;
  box-shadow: 0 0.5em 0.5em -0.5em rgba(0, 0, 0, 0.7);
}

.activity__feedback--overtop {
  position: absolute;
  display: inline;
  left: 25%;
  width: 50%;
  font-weight: bold;
  color: #000;
  cursor: pointer;
}

.popupCloseMe {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
}
.popupCloseMe:focus {
  outline: none;
}

.activity__multipleQuestions--feedback, .activity__feedback--textarea {
  border-left: solid 5px #426989;
  padding-left: 1em;
}

.activity__feedback--textarea {
  box-shadow: none;
}

.phraseCounter .counter button, .show-next-block, .box__activity .activity__hover button, .activity__flashCard--front .activity__hover button, .activity__flashCard--back .activity__hover button {
  font-family: "arimoregular";
  font-size: 1rem;
  color: black;
  background-color: transparent;
  border: none;
}

.box__activity, .activity__flashCard--front, .activity__flashCard--back {
  margin: 1em 0;
}
.box__activity .activity__hover, .activity__flashCard--front .activity__hover, .activity__flashCard--back .activity__hover {
  font-size: 2rem;
  cursor: pointer;
}
.box__activity .activity__hover button, .activity__flashCard--front .activity__hover button, .activity__flashCard--back .activity__hover button {
  font-size: 2rem;
  font-weight: 300;
}
.box__activity .activity__hover button:hover, .activity__flashCard--front .activity__hover button:hover, .activity__flashCard--back .activity__hover button:hover {
  cursor: pointer;
  border-radius: 1rem;
  box-shadow: 0 0 0.5rem 0.25rem white, 0 0 0 0.5rem rgba(0, 0, 255, 0.4);
}

.box__activity textarea, .activity__flashCard--front textarea, .activity__flashCard--back textarea {
  width: 100%;
  height: 5em;
  padding: 1em;
  font-size: 1.2em;
  outline: none;
  border: solid 2px #3286f8;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.activity__questionCount {
  float: right;
  font-weight: bold;
}

.highlight__rounded {
  padding: 0.5rem;
  font-weight: 700;
  background: rgba(255, 255, 0, 0.4);
  border-radius: 1rem;
}

.highlight__rounded--secondary {
  padding: 0.5rem;
  font-weight: 700;
  background: rgba(0, 0, 255, 0.4);
  border-radius: 1rem;
}

.float__left {
  display: block;
  float: left;
}

.scaleImage img {
  max-width: 20%;
}

.generic__padding {
  padding: 1em;
  width: 75%;
}

@media screen and (max-width: 760px) {
  .generic__padding {
    width: 100%;
  }
}
.table__primeClick {
  text-align: center;
}
.table__primeClick a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #000;
  text-decoration: none;
}
.table__primeClick td {
  padding: 0.5em;
}
.table__primeClick td:hover {
  cursor: pointer;
}

.giantTable {
  text-align: center;
}
.giantTable th, .giantTable td {
  padding: 0.1em;
}
.giantTable a {
  display: block;
  color: #000;
  text-decoration: none;
}

/* Generic multiple choice */
.choice__list ul {
  margin: 1em 0;
}

.choice__list li {
  list-style-type: none;
  padding-bottom: 0.5em;
}
.choice__list li a {
  display: block;
  position: relative;
  padding: 1em 1em 1em 3em;
  border: solid 0.1em #CCC;
  background-color: #FFF;
  color: #000;
  text-decoration: none;
  margin-left: 1em;
}
.choice__list li a:hover .choice__list--alphabet {
  -webkit-transform: scale3d(1.3, 1.3, 1);
  -moz-transform: scale3d(1.3, 1.3, 1);
  transform: scale3d(1.3, 1.3, 1);
}

.choice__list--alphabet {
  position: absolute;
  top: 50%;
  left: -1.5em;
  margin-top: -1.5em;
  height: 3em;
  width: 3em;
  padding-top: 0.75em;
  background-color: #426989;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  transition: transform 1s;
}

.choice__list li a.choice__list--multiSelected {
  box-shadow: 0 0 2px #3286F8, inset -10px 0px 0px #426989;
}

.choice__list--alphabetScaled {
  transform: scale3d(1.3, 1.3, 1);
}

.choice__list--alphabet img {
  margin-top: 0.4em;
}

.choice__list--alphabetCheckmark {
  background-image: url("/public/images/content/green_check.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.choice__list--alphabetCorrect {
  background-image: url("/public/images/content/green_check.png");
  background-position: 95% 50%;
  background-repeat: no-repeat;
}

.order__list ul {
  margin: 0;
  padding: 0;
}

.order__list li {
  list-style: none;
  margin: 0.5em 0;
}

.order__list select {
  padding: 0.5em;
  font-size: 1.2em;
}

/* Slideshow */
.activity__slideshow--content {
  position: relative;
  margin: 0 0 1em 0;
  padding: 0.5em;
  background: rgba(255, 255, 255, 0.95);
  border: solid 0.1em #CCC;
  z-index: 1000;
}

.activity__slideshow--slide {
  opacity: 0;
  transition: opacity 1s;
}

.activity__slideshow--button {
  display: block;
  width: 3em;
  height: 3em;
  font-size: 1.5em;
  border-radius: 50%;
  margin: -2em auto 0 auto;
  padding-top: 0.75em;
  background: #426989;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  transition: all 1s;
}

/* Click and Reveal */
.activity__clickReveal {
  margin-bottom: 2em;
}

.activity__clickReveal--main {
  display: block;
  position: relative;
  z-index: 1000;
  margin: 0.5em 0;
  padding: 1em;
  background: #FFF;
  color: #000;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  border: solid 1px #CCC;
  box-shadow: 0 0.5em 0.5em -0.5em rgba(0, 0, 0, 0.7);
  transition: background 1s;
}

button.activity__clickReveal--main {
  width: 100%;
  font-family: "arimoregular";
  text-align: left;
}
button.activity__clickReveal--main:hover {
  cursor: pointer;
}

.activity__clickReveal--main:hover, .activity__clickReveal--highlight {
  background: linear-gradient(#fcde27, #f8b534);
}

.activity__clickReveal--highlight:hover {
  cursor: default !important;
}

.activity__clickReveal--content {
  border: solid 1px #CCC;
  background: #FFF;
  padding: 1em;
  margin: -1em auto 0 auto;
  width: 98%;
}

.activity__clickWord {
  cursor: pointer;
}
.activity__clickWord a {
  color: #000;
  text-decoration: none;
}

.activity__clickWord--selected {
  font-weight: bold;
  color: red !important;
}

.font__larger, .font__larger--bold {
  font-size: 1.5em;
}

.font__larger--bold {
  font-weight: bold;
}

.font__smaller {
  font-size: 0.9em;
}

/* Swap */
.activity__fadeSwap--swap {
  opacity: 0;
  transition: all 1s;
}

/* Type Answer */
.box__wordBank {
  width: 100%;
  margin: 1em 0;
  padding: 1em;
  background: #FFF;
  border: solid 1px #CCC;
  box-shadow: 0 0.5em 0.5em -0.5em rgba(0, 0, 0, 0.7);
}
.box__wordBank ul {
  margin: 0 0 0 2em;
  padding: 1em 0;
}

.activity__typeAnswer li {
  margin: 0.5em 0;
}

.activity__typeAnswer input, .activity__typeAnswer select {
  border: solid 1px #CCC;
  padding: 0.25em;
  font-size: 1.2em;
}

.activity__typeAnswer--longSelect select {
  width: 100%;
}

.activity__input--large input {
  width: 100%;
}

.input__large {
  width: 100%;
}

.activity__multipleQuestions {
  margin: 1em 0;
}

.activity__multipleQuestions--questionCount {
  float: right;
  font-size: 1.2em;
}

.activity__multipleQuestions--content {
  padding: 1em;
  border: solid 1px #CCC;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: opacity 500ms;
}

/* Swap Word */
.activity__swapWord ul {
  margin: 0;
  padding: 0;
}

.activity__swapWord li {
  list-style: none;
  margin: 2em 0;
}

.activity__swapWord a {
  padding: 1em;
  color: #000;
  text-decoration: none;
  background: #FFF;
  border: solid 1px #CCC;
  transition: all 500ms ease-out;
}
.activity__swapWord a:hover {
  border: solid 1px #3286f8;
}

a.activity__swapWord--selected {
  padding: 1em 2em;
  border: solid 1px #3286f8;
}

/* Flash Card */
.activity__flashCard {
  perspective: 1000;
  margin: 1em 0 3em 0;
}

.activity__flashCard, .activity__flashCard--front, .activity__flashCard--back {
  width: 320px;
  height: 150px;
}

.activity__flashCard--front, .activity__flashCard--back {
  backface-visibility: hidden;
  position: absolute;
  top: 5%;
  text-align: center;
}
.activity__flashCard--front a.activity__flashCard--click, .activity__flashCard--back a.activity__flashCard--click {
  display: block;
  padding: 1em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

.activity__flashCard--front {
  z-index: 2;
  transform: rotateY(0deg);
}

.activity__flashCard--back {
  transform: rotateY(180deg);
}

.activity__flashCard--flip {
  transition: all 1s;
  transform-style: preserve-3d;
  position: relative;
}

.activity__flashCard--toggle {
  transform: rotateY(180deg);
}

/* Reading in Content Area */
.boxed__content.boxed__content--scrollable, .boxed__content--scrollable.showTwoOptions, .phraseCounter .boxed__content--scrollable.content, .constLearningCheck__content .boxed__content--scrollable.question, .imageSlider .images .boxed__content--scrollable.content {
  height: 10em;
  width: 84%;
  margin: 1em auto;
  overflow-y: scroll;
}
@media screen and (min-width: 900px) {
  .boxed__content.boxed__content--scrollable, .boxed__content--scrollable.showTwoOptions, .phraseCounter .boxed__content--scrollable.content, .constLearningCheck__content .boxed__content--scrollable.question, .imageSlider .images .boxed__content--scrollable.content {
    width: 100%;
    height: 15em;
  }
}
.boxed__content .flex__content, .showTwoOptions .flex__content, .phraseCounter .content .flex__content, .constLearningCheck__content .question .flex__content, .imageSlider .images .content .flex__content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
@media screen and (min-width: 720px) {
  .boxed__content .flex__content, .showTwoOptions .flex__content, .phraseCounter .content .flex__content, .constLearningCheck__content .question .flex__content, .imageSlider .images .content .flex__content {
    flex-direction: row;
  }
}

.video__wrapper {
  margin: 1rem 0;
}

.youtube-wrapper {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
.youtube-wrapper iframe {
  aspect-ratio: 16/9;
  width: 100% !important;
}

.flex__layout {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex__layout.thirds .boxed__content.mismatchedIconHeight .boxed__content--halfImageWrapper, .flex__layout.thirds .mismatchedIconHeight.showTwoOptions .boxed__content--halfImageWrapper, .flex__layout.thirds .phraseCounter .mismatchedIconHeight.content .boxed__content--halfImageWrapper, .phraseCounter .flex__layout.thirds .mismatchedIconHeight.content .boxed__content--halfImageWrapper, .flex__layout.thirds .constLearningCheck__content .mismatchedIconHeight.question .boxed__content--halfImageWrapper, .constLearningCheck__content .flex__layout.thirds .mismatchedIconHeight.question .boxed__content--halfImageWrapper, .flex__layout.thirds .imageSlider .images .mismatchedIconHeight.content .boxed__content--halfImageWrapper, .imageSlider .images .flex__layout.thirds .mismatchedIconHeight.content .boxed__content--halfImageWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  margin-bottom: 1rem;
}
@media screen and (min-width: 960px) {
  .flex__layout.thirds .boxed__content, .flex__layout.thirds .showTwoOptions, .flex__layout.thirds .phraseCounter .content, .phraseCounter .flex__layout.thirds .content, .flex__layout.thirds .constLearningCheck__content .question, .constLearningCheck__content .flex__layout.thirds .question, .flex__layout.thirds .imageSlider .images .content, .imageSlider .images .flex__layout.thirds .content {
    width: 33%;
  }
}

.flex__layout {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex__layout.thirds .content.mismatchedIconHeight .boxed__content--halfImageWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  margin-bottom: 1rem;
}
@media screen and (min-width: 960px) {
  .flex__layout.thirds .content {
    width: 31%;
  }
}

.flex__layout--around {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex__layout--nowrap {
  display: flex;
  justify-content: space-between;
}
.flex__layout--nowrap.halves .boxed__content, .flex__layout--nowrap.halves .showTwoOptions, .flex__layout--nowrap.halves .phraseCounter .content, .phraseCounter .flex__layout--nowrap.halves .content, .flex__layout--nowrap.halves .constLearningCheck__content .question, .constLearningCheck__content .flex__layout--nowrap.halves .question, .flex__layout--nowrap.halves .imageSlider .images .content, .imageSlider .images .flex__layout--nowrap.halves .content {
  width: 48%;
}
.flex__layout--nowrap.halves .boxed__content h5, .flex__layout--nowrap.halves .showTwoOptions h5, .flex__layout--nowrap.halves .phraseCounter .content h5, .phraseCounter .flex__layout--nowrap.halves .content h5, .flex__layout--nowrap.halves .constLearningCheck__content .question h5, .constLearningCheck__content .flex__layout--nowrap.halves .question h5, .flex__layout--nowrap.halves .imageSlider .images .content h5, .imageSlider .images .flex__layout--nowrap.halves .content h5 {
  margin: 1rem 0;
  font-size: 1.5rem;
  text-align: center;
}
.flex__layout--nowrap.thirds .boxed__content, .flex__layout--nowrap.thirds .showTwoOptions, .flex__layout--nowrap.thirds .phraseCounter .content, .phraseCounter .flex__layout--nowrap.thirds .content, .flex__layout--nowrap.thirds .constLearningCheck__content .question, .constLearningCheck__content .flex__layout--nowrap.thirds .question, .flex__layout--nowrap.thirds .imageSlider .images .content, .imageSlider .images .flex__layout--nowrap.thirds .content {
  width: 33%;
}

ol.numbered {
  list-style: decimal;
  margin: 1em 1em 1em 4em;
}
ol.numbered ol {
  margin: 0 1em 1em 4em;
}

ol.lowerLettered {
  list-style: lower-alpha;
  margin: 1em 1em 1em 4em;
}

ul.disc li {
  list-style: disc;
  margin: 0.5rem 0;
}
ul.disc ul {
  margin: 1em 1em 1em 2em;
}
ul.disc ul li {
  list-style: circle;
}
@media screen and (min-width: 720px) {
  ul.disc.right-of-image {
    display: inline-block;
    margin: 0 0 0 2rem;
  }
}

ol.number li {
  margin: 0.5rem 0;
}

ul.circle li {
  list-style: circle;
}

.generic__activity--button {
  padding: 1em;
  background: #f8d187;
  border: none;
  font-weight: 700;
  color: #000;
  transition: all 500ms;
}
.generic__activity--button:hover {
  background: #f8b432;
  cursor: pointer;
}

.generic__click {
  margin-bottom: 1em;
}

.generic__click--text {
  padding: 1em;
  border: solid 1px #CCC;
  margin: 1em 0;
  background: #F7F7F7;
}

.ca-audioInstructions {
  width: 100%;
  padding: 0.5em 1em;
  background: #FFF url("/public/images/content/i_audio.png") no-repeat 98% 50%;
}

.ca-keyTerms ul {
  margin: 0;
  padding: 0;
}
.ca-keyTerms ul li {
  position: relative;
  list-style: none;
  border: solid 1px #CCC;
  margin: 0.5em 0;
  padding: 0.5em;
  background: #FFF;
}
.ca-keyTerms ul li .ca-keyTerms__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  min-height: 50px;
}
.ca-keyTerms ul li .ca-keyTerms__top button {
  width: 40px;
  height: 40px;
  background: url("/public/images/content/i_audio.png") no-repeat;
  border: none;
}
.ca-keyTerms ul li .ca-keyTerms__top button:hover {
  cursor: pointer;
}
.ca-keyTerms ul li .ca-keyTerms__top .ca-keyTerms__audioWrapper audio {
  margin: 0;
}

ul.list__checked {
  margin: 1em;
  list-style: none;
}
ul.list__checked li {
  list-style-type: none;
  min-height: 21px;
  margin: 0.5em 0;
  padding: 0 0 0 2em;
  background: url("/public/images/content/green_check.png") no-repeat 0 50%;
}

.infographic__columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.infographic__columns .column {
  margin-bottom: 1em;
  padding: 0 1em;
}
.infographic__columns .column img {
  display: block;
  margin: 0 auto 1em auto;
}
.infographic__columns .column .column__text {
  width: 100%;
  padding: 1em;
  background: #CCC;
  border-radius: 1em 1em 0 0;
}
.infographic__columns .column .column__text h4 {
  margin: 0;
  padding: 0;
  text-align: center;
}
@media screen and (min-width: 760px) {
  .infographic__columns {
    flex-wrap: nowrap;
  }
}

.demColor {
  color: #FFF;
  font-weight: 700;
  background: #6666ff;
}

.repColor {
  font-weight: 700;
  background: #ff9999;
}

/* Health Literacy */
section {
  font-family: "arimoregular";
}

.hl__activity--questionnaire .questionnaire__counter, .hl__activity--mc .mc__buttons ul li button span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hl__activity--questionnaire .questionnaire__wrapper button, .hl__activity--simpleChecklist button, .hl__activity--imageClicks .imageClicks__wrapper button, .hl__activity--mc .mc__buttons ul li button {
  font-family: "arimoregular";
}
.hl__activity--questionnaire .questionnaire__wrapper button:hover, .hl__activity--simpleChecklist button:hover, .hl__activity--imageClicks .imageClicks__wrapper button:hover, .hl__activity--mc .mc__buttons ul li button:hover {
  cursor: pointer;
}
.hl__activity--questionnaire .questionnaire__wrapper button:disabled, .hl__activity--simpleChecklist button:disabled, .hl__activity--imageClicks .imageClicks__wrapper button:disabled, .hl__activity--mc .mc__buttons ul li button:disabled {
  color: inherit;
}
.hl__activity--questionnaire .questionnaire__wrapper button:disabled:hover, .hl__activity--simpleChecklist button:disabled:hover, .hl__activity--imageClicks .imageClicks__wrapper button:disabled:hover, .hl__activity--mc .mc__buttons ul li button:disabled:hover {
  cursor: default;
}

.hl__activity--rowClick .rowClick__buttons .button__wrapper button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
}
.hl__activity--rowClick .rowClick__buttons .button__wrapper button:hover {
  cursor: pointer;
}
.hl__activity--rowClick .rowClick__buttons .button__wrapper button:disabled:hover {
  cursor: default;
}

.hl__activity--rowClick .feedback, .hl__activity--imageClicks .feedback, .quick-feedback {
  margin: 1em 0;
  padding: 1em;
  background: white;
  border: solid 2px black;
  opacity: 0;
  transition: opacity 1s;
}

.image__floatRight--forFullWidth {
  display: block;
  float: none;
  margin: 0 auto;
}
@media screen and (min-width: 1000px) {
  .image__floatRight--forFullWidth {
    float: right;
  }
}

.table__centered tr th, .table__centered tr td {
  text-align: center;
  vertical-align: middle;
}
.table__centered tr th:first-child, .table__centered tr td:first-child {
  text-align: left;
}
.table__centered tr th {
  white-space: nowrap;
}

.table__centered--vertical tr th, .table__centered--vertical tr td {
  vertical-align: middle;
}
.table__centered--vertical tr th[scope=row], .table__centered--vertical tr td[scope=row] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table__centered--vertical tr th {
  white-space: nowrap;
}

.table__half th {
  width: 50%;
}

.table__minheight {
  min-height: 20rem;
}

.tableCell__valign {
  vertical-align: middle;
}

.tableCell__valign--td td {
  vertical-align: middle;
}

.keyTerm__audioList {
  width: 100%;
}
.keyTerm__audioList button {
  display: flex;
  align-items: center;
  width: 100%;
  margin-right: 1em;
  padding: 0.5em 1em;
  font-size: 1em;
  text-align: left;
  background-color: white;
  border: solid 2px #333;
  border-radius: 1em;
}
.keyTerm__audioList button:hover {
  cursor: pointer;
}
.keyTerm__audioList button:hover > .material-icons-outlined {
  background-color: rgba(33, 82, 121, 0.2);
}
.keyTerm__audioList button .material-icons-outlined {
  margin-right: 0.5em;
  padding: 0.5rem;
  font-size: 36px;
  color: #215279;
  background-color: #F7F7f7;
  border: solid 3px #215279;
  border-radius: 2em;
  transition: background-color 350ms;
}

.hl__activity--mc {
  width: 100%;
  margin: 1em 0;
  padding: 1rem;
  background-color: white;
  border: solid 1px #333;
  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.7);
}
.hl__activity--mc .mc__buttons ul {
  width: 100%;
  margin: 0;
}
.hl__activity--mc .mc__buttons ul li {
  list-style: none;
  margin: 0.5em 0;
}
.hl__activity--mc .mc__buttons ul li button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  background-color: white;
  border: solid 2px #215279;
  border-radius: 5rem 0 0 5rem;
}
.hl__activity--mc .mc__buttons ul li button:enabled:hover > .letter {
  background-color: #26608d;
}
.hl__activity--mc .mc__buttons ul li button span {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
  padding: 1.5rem;
  font-size: 3rem;
  color: white;
  background-color: #215279;
  border-radius: 5rem;
  transition: opacity 500ms;
}
.hl__activity--mc .mc__buttons ul li button span.mc__clicked--correct {
  color: green;
  background-color: white;
}
.hl__activity--mc .mc__buttons ul li button span.mc__clicked--wrong {
  color: red;
  background-color: white;
}
.hl__activity--mc .mc__buttons ul li button .letter {
  font-size: 1.5rem;
}
.hl__activity--mc .mc__buttons ul li button.mc__clicked--opacity span {
  opacity: 0.2;
}
.hl__activity--mc .feedback {
  padding: 1em;
  background: rgba(33, 82, 121, 0.05);
  border: solid 2px #215279;
  transition: opacity 1s;
}

.opacityFade {
  opacity: 0;
}

.hl__imageGrid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1em 0;
  flex-wrap: wrap;
}
@media screen and (min-width: 720px) {
  .hl__imageGrid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
.hl__imageGrid.hl__imageGrid--padding .hl__imageGrid--cell {
  padding: 0 0.5rem;
}
.hl__imageGrid.hl__imageGrid--padding .hl__imageGrid--cell50 {
  padding: 0;
}
@media screen and (min-width: 720px) {
  .hl__imageGrid.hl__imageGrid--padding .hl__imageGrid--cell50 {
    padding: 0 0.5rem;
  }
}
.hl__imageGrid.hl__imageGrid--padding .hl__imageGrid--cell50:last-child {
  display: none;
}
@media screen and (min-width: 720px) {
  .hl__imageGrid.hl__imageGrid--padding .hl__imageGrid--cell50:last-child {
    display: block;
  }
}
.hl__imageGrid .hl__imageGrid--cell {
  width: 50%;
}
@media screen and (min-width: 720px) {
  .hl__imageGrid .hl__imageGrid--cell {
    width: 25%;
  }
}
.hl__imageGrid .hl__imageGrid--cell50 {
  width: 100%;
}
@media screen and (min-width: 720px) {
  .hl__imageGrid .hl__imageGrid--cell50 {
    width: 50%;
  }
}

.hl__imageRow {
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 100%;
  margin: 1rem 0;
}
@media screen and (min-width: 720px) {
  .hl__imageRow {
    flex-flow: row;
    justify-content: space-between;
  }
}
.hl__imageRow.hl__imageRow--earlyWrap .hl__imageRow--wrapper {
  margin: 0.5rem 0;
  padding: 0 0.25rem;
}
@media screen and (min-width: 720px) {
  .hl__imageRow.hl__imageRow--earlyWrap {
    flex-flow: column;
    justify-content: center;
  }
}
@media screen and (min-width: 1000px) {
  .hl__imageRow.hl__imageRow--earlyWrap {
    flex-flow: row;
    justify-content: space-between;
  }
}
.hl__imageRow.hl__imageRow--centered {
  justify-content: center;
}
.hl__imageRow.hl__imageRow--centered .hl__imageRow--wrapper {
  padding: 0.5rem;
}
.hl__imageRow .hl__imageRow--wrapper {
  margin: 1rem auto;
}
@media screen and (min-width: 720px) {
  .hl__imageRow .hl__imageRow--wrapper {
    margin: 0;
  }
}
.hl__imageRow img {
  display: block;
}
.hl__imageRow.thirds img {
  margin: 0.5rem 0;
}
@media screen and (min-width: 720px) {
  .hl__imageRow.thirds img {
    margin: 0 0.25rem;
    max-width: 33.3%;
  }
  .hl__imageRow.thirds img:first-child {
    margin: 0 0.25rem 0 0;
  }
  .hl__imageRow.thirds img:last-child {
    margin: 0 0 0 0.25rem;
  }
}

.hl__flexWhatever {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}
.hl__flexWhatever img {
  display: block;
  margin: 1rem 0;
}
@media screen and (min-width: 720px) {
  .hl__flexWhatever {
    justify-content: space-between;
  }
}

.hl__flexContent {
  display: flex;
  flex-flow: column;
  flex-direction: column-reverse;
}
@media screen and (min-width: 720px) {
  .hl__flexContent {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
}

.hl__activity--chooseTwo {
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: relative;
  width: 100%;
  margin: 1rem 0 2em 0;
}
@media screen and (min-width: 720px) {
  .hl__activity--chooseTwo {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
}
.hl__activity--chooseTwo .interact__area {
  position: relative;
  width: 18.75rem;
  height: 100%;
  transition: opacity 1s;
  margin: 1em auto;
}
@media screen and (min-width: 720px) {
  .hl__activity--chooseTwo .interact__area {
    width: 24rem;
    margin: 0 3em 0 0;
  }
}
.hl__activity--chooseTwo .interact__area .image__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
  height: 18.75rem;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 75%;
  border: solid 0.5rem #215279;
  border-radius: 16rem;
  z-index: 50;
  overflow: hidden;
}
.hl__activity--chooseTwo .interact__area .image__container.fullBackground {
  background-size: initial;
}
.hl__activity--chooseTwo .interact__area .image__container h4 {
  position: absolute;
  bottom: 3rem;
  margin: 0;
  width: 100%;
  font-size: 1.5rem;
  color: white;
  text-align: center;
  background-color: #215279;
}
@media screen and (min-width: 720px) {
  .hl__activity--chooseTwo .interact__area .image__container h4 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 720px) {
  .hl__activity--chooseTwo .interact__area .image__container {
    width: 24rem;
    height: 24rem;
  }
}
.hl__activity--chooseTwo .interact__area .image__buttons {
  position: absolute;
  bottom: -1rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 1001;
}
.hl__activity--chooseTwo .interact__area .image__buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  height: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  background: white;
  border: solid 0.2rem #215279;
  transition: background 500ms;
}
@media screen and (min-width: 720px) {
  .hl__activity--chooseTwo .interact__area .image__buttons button {
    font-size: 1rem;
  }
}
.hl__activity--chooseTwo .interact__area .image__buttons button:hover {
  cursor: pointer;
}
.hl__activity--chooseTwo .interact__area .image__buttons button:disabled {
  color: black;
}
.hl__activity--chooseTwo .interact__area .image__buttons button:disabled span {
  color: gray;
}
.hl__activity--chooseTwo .interact__area .image__buttons button:disabled:hover {
  cursor: default;
}
.hl__activity--chooseTwo .interact__area .image__buttons button span {
  margin-right: 0.5rem;
  color: #215279;
}
.hl__activity--chooseTwo .result__area {
  width: 100%;
}
.hl__activity--chooseTwo .result__area h3 {
  margin: 0;
}
.hl__activity--chooseTwo .result__area .result__boxes {
  width: 100%;
  height: 100px;
  margin: 0.5em 0;
  background-color: white;
  border: solid 1px black;
  z-index: 100;
}
.hl__activity--chooseTwo .result__area .result__boxes .result__boxes--wrapper {
  width: 100%;
  height: 100%;
}
.hl__activity--chooseTwo .result__area .result__boxes .result__boxes--wrapper .result__slot {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  box-shadow: 4px 0px 10px -10px black;
}
.hl__activity--chooseTwo .result__area .result__boxes .result__boxes--wrapper .result__slot:last-child {
  box-shadow: none;
}

.backgroundSlide {
  background-position: 450% 50% !important;
  transition: all 1000ms;
}
.backgroundSlide.fullBackground {
  background-position: 450px 50% !important;
}

.hl__background--correct {
  background-color: green !important;
}

.hl__background--wrong {
  background-color: red !important;
}

.hl__activity--clickReveal {
  width: 100%;
  margin: 1em 0;
}
.hl__activity--clickReveal.u1l1p8 button {
  background-size: 0px 0px;
}
@media screen and (min-width: 720px) {
  .hl__activity--clickReveal.u1l1p8 button {
    background-size: 168px 109px;
  }
}
.hl__activity--clickReveal.u1l3p7 button {
  background-position: 99% 50%;
}
.hl__activity--clickReveal.u2l1p7 button, .hl__activity--clickReveal.u2l2p7 button {
  background-size: 0px 0px;
}
@media screen and (min-width: 870px) {
  .hl__activity--clickReveal.u2l1p7 button, .hl__activity--clickReveal.u2l2p7 button {
    background-size: 200px 200px;
  }
}
.hl__activity--clickReveal.u2l1p7 .hl__clickReveal--backgroundSlide, .hl__activity--clickReveal.u2l2p7 .hl__clickReveal--backgroundSlide {
  background-position: 100% 100px !important;
}
.hl__activity--clickReveal.u1l5p5 button, .hl__activity--clickReveal.u2l4p8 button, .hl__activity--clickReveal.conEd-u6l3p4 button, .hl__activity--clickReveal.writing2 button {
  background-size: 0px 0px;
}
@media screen and (min-width: 720px) {
  .hl__activity--clickReveal.u1l5p5 button, .hl__activity--clickReveal.u2l4p8 button, .hl__activity--clickReveal.conEd-u6l3p4 button, .hl__activity--clickReveal.writing2 button {
    background-position: 99% 50%;
    background-size: 109px 109px;
  }
}
@media screen and (min-width: 720px) {
  .hl__activity--clickReveal.withIcons button {
    height: 75px;
    padding: 0 1rem;
  }
}
.hl__activity--clickReveal.withIcons.withIcons__padding button {
  background-position: 99% 50%;
}
.hl__activity--clickReveal.withIcons.withIcons__normalImages button {
  min-height: 110px;
  background-position: 99% 50%;
}
.hl__activity--clickReveal.withIcons.withIcons__normalImages .hl__clickReveal--backgroundSlide {
  background-position: 99% 140px !important;
}
.hl__activity--clickReveal.withIcons.withIcons__tallImages button {
  background-size: 0px 0px;
}
@media screen and (min-width: 720px) {
  .hl__activity--clickReveal.withIcons.withIcons__tallImages button {
    background-size: 200px 200px;
  }
}
.hl__activity--clickReveal.withIcons.withIcons__tallImages .hl__clickReveal--backgroundSlide {
  background-position: 100% 100px !important;
}
.hl__activity--clickReveal button {
  width: 100%;
  margin: 0.5rem 0;
  padding: 1rem;
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  border: solid 2px #215279;
  transition: background-position 750ms, border 500ms, color 500ms;
}
.hl__activity--clickReveal button:hover {
  cursor: pointer;
  border: solid 2px #f05a1f;
  color: #f05a1f;
}
.hl__activity--clickReveal button:disabled {
  border: solid 2px #f05a1f;
  color: #f05a1f;
}
.hl__activity--clickReveal button:disabled:hover {
  cursor: default;
}
.hl__activity--clickReveal .feedback {
  margin: 1em 0;
  padding: 1em;
  background: white;
  border: solid 2px #f05a1f;
  opacity: 0;
  transition: opacity 1s;
}
.hl__activity--clickReveal .feedback img:first-child {
  float: right;
  margin: 0;
  padding: 0 0 1em 1em;
}
@media screen and (min-width: 720px) {
  .hl__activity--clickReveal .feedback img:first-child {
    float: right;
    margin: 0;
    padding: 0 0 1em 1em;
  }
}

.hl__clickReveal--backgroundSlide {
  background-position: 100% -240% !important;
}

.opacityShow {
  opacity: 1 !important;
}

.hl__activity--imageClicks {
  position: relative;
  margin: 1em 0;
}
.hl__activity--imageClicks .imageClicks__wrapper {
  position: relative;
}
.hl__activity--imageClicks .imageClicks__wrapper:hover {
  z-index: 2000;
}
.hl__activity--imageClicks .imageClicks__wrapper:hover button:enabled + img {
  transform: scale(1.2);
}
.hl__activity--imageClicks .imageClicks__wrapper img {
  display: block;
  transition: transform 500ms;
}
.hl__activity--imageClicks .imageClicks__wrapper button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  z-index: 1000;
}
.hl__twoColumnCompare {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin: 1em 0;
}
@media screen and (min-width: 720px) {
  .hl__twoColumnCompare {
    flex-flow: initial;
    justify-content: space-between;
  }
}
.hl__twoColumnCompare .column {
  width: 100%;
  margin: 1em 0;
  background-color: white;
}
@media screen and (min-width: 720px) {
  .hl__twoColumnCompare .column {
    width: 48%;
    margin: 0;
  }
}
.hl__twoColumnCompare .column h4 {
  padding: 1rem;
  color: white;
  background-color: #215279;
}
.hl__twoColumnCompare .column .column__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl__twoColumnCompare .column .column__header img {
  width: 100%;
}
.hl__twoColumnCompare .column .column__wrapper {
  padding: 1em;
}
.hl__twoColumnCompare .column .column__wrapper ul {
  margin: 0;
  padding: 0 1rem;
}
.hl__twoColumnCompare.notSquare__image .column__header {
  padding: 1rem;
}

.hl__activity--rowClick {
  width: 100%;
}
.hl__activity--rowClick .rowClick__buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}
.hl__activity--rowClick .rowClick__buttons .button__wrapper {
  position: relative;
}
.hl__activity--rowClick .rowClick__buttons .button__wrapper img {
  display: block;
}
.hl__activity--simpleChecklist button {
  position: relative;
  display: block;
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
  text-align: left;
  background-color: white;
}
@media screen and (min-width: 720px) {
  .hl__activity--simpleChecklist button {
    background-image: url("/public/images/content/healthLiteracy/checkmark_100.png");
    transition: background-position 500ms, background-size 1000ms;
    background-repeat: no-repeat;
    background-position: calc(100% + 200px) 50%;
    background-size: 200px;
  }
}
.hl__activity--simpleChecklist button.checkedBackground {
  background-color: rgba(53, 109, 53, 0.05);
  background-size: 100px;
  background-position: 100% 50%;
}
@media screen and (min-width: 720px) {
  .hl__activity--simpleChecklist button.checkedBackground {
    background-color: white;
  }
}

.hl__activity--questionnaire {
  position: relative;
  width: 100%;
  margin: 2rem 0 1rem 0;
  padding: 1rem;
  background-color: white;
  border: solid 1px #CCC;
}
.hl__activity--questionnaire .questionnaire__counter {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  background-color: white;
  border: solid 2px #215279;
  border-radius: 4rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.hl__activity--questionnaire p:first-child {
  font-size: 1.5rem;
}
.hl__activity--questionnaire .questionnaire__wrapper {
  padding-top: 1rem;
  opacity: 0;
  transition: opacity 500ms;
}
.hl__activity--questionnaire .questionnaire__wrapper button {
  display: block;
  width: 100%;
  margin: 1rem 0;
  padding: 0.5rem;
  text-align: left;
  font-size: 1.2rem;
  background-color: rgba(33, 82, 121, 0.05);
  border: solid 1px #333;
  transition: transform 1000ms;
}
.hl__activity--questionnaire .questionnaire__wrapper button:disabled {
  color: black;
}

.hlRotateX--360 {
  color: #215279 !important;
  transform: rotateX(360deg);
}

.basicEquation {
  display: inline-block;
  font-size: 1.2rem;
  text-align: center;
}
.basicEquation .top {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 0.25rem black;
}

.checkAnswer {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  padding: 1rem;
  font-family: "arimoregular";
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  background-color: #3486F8;
  border: none;
  transition: background-color 350ms;
}
.checkAnswer:hover {
  cursor: pointer;
  background-color: #1b77f7;
}
.checkAnswer span {
  margin-right: 1rem;
}

.activity__matchingDropdown .question p:first-child {
  margin: 0 0 1rem 0;
  font-weight: 700;
}
.activity__matchingDropdown .question select {
  display: block;
  margin: 0 auto;
  padding: 0.5rem;
  font-family: "arimoregular";
  font-size: 1rem;
}
.activity__matchingDropdown .question select:hover {
  cursor: pointer;
}
@media screen and (min-width: 45rem) {
  .activity__matchingDropdown .question select {
    margin: 0;
  }
}
.activity__matchingDropdown .feedback {
  opacity: 0;
  transition: opacity 1s;
}
.activity__matchingDropdown .feedback .amountCorrect {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3486f8;
}

.imageSlider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
}
.imageSlider .images {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  overflow-x: hidden;
}
.imageSlider .images img, .imageSlider .images .content {
  flex: 0 0 auto;
  position: relative;
  left: 0;
  transition: left 500ms;
}
.imageSlider .images .content {
  width: 100%;
}
.imageSlider .images .content p {
  text-align: center;
}
.imageSlider .images .content p:first-of-type {
  font-weight: 700;
}
.imageSlider button {
  width: 4rem;
  height: 4rem;
  color: #3486F8;
  background: transparent;
  border: none;
}
.imageSlider button:enabled:hover {
  cursor: pointer;
}
.imageSlider button:disabled {
  opacity: 0.2;
}

.maxWidth558 {
  max-width: 558px;
}

.maxWidth800 {
  max-width: 800px;
}

.payStub {
  margin: 2rem 0;
  padding: 1rem;
  background-color: white;
  border: solid 1px #CCC;
}
.payStub .headerRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-weight: 700;
}
@media screen and (min-width: 720px) {
  .payStub .contentRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
}
.payStub .contentRow .contentRow__section {
  margin: 1rem 0;
}
@media screen and (min-width: 720px) {
  .payStub .contentRow .contentRow__section {
    width: 31%;
    margin: 0;
  }
}
.payStub .contentRow .contentRow__section h4 {
  margin: 1rem 0 0 0;
}
.payStub .contentRow .contentRow__section .contentRow__section--item {
  display: flex;
}
.payStub .contentRow .contentRow__section .contentRow__section--item span {
  width: 50%;
}
.payStub .contentRow .contentRow__section .contentRow__section--item.bottomBorder {
  border-bottom: solid 1px #CCC;
}

.flashCard__group .flashCard .flashCard__back, .flashCard__group .flashCard .flashCard__front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flashCard__group {
  display: flex;
  flex-flow: column;
}
@media screen and (min-width: 720px) {
  .flashCard__group {
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.flashCard__group .flashCard {
  position: relative;
  width: 100%;
  height: 14rem;
  margin: 1rem 0;
  box-shadow: 0 0.2rem 0.2rem -0.2rem rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
  transition: transform 1s;
}
@media screen and (min-width: 720px) {
  .flashCard__group .flashCard {
    width: 31%;
    margin: 1rem 1%;
  }
}
.flashCard__group .flashCard.flipToggle {
  transform: rotateX(180deg);
  box-shadow: 0 -0.2rem 0.2rem -0.2rem rgba(0, 0, 0, 0.7);
}
.flashCard__group .flashCard .flashCard__front {
  transform: rotateY(0deg);
  border: solid 0.5rem white;
  transition: transform 500ms;
}
.flashCard__group .flashCard .flashCard__front:hover {
  transform: scale(1.05);
}
.flashCard__group .flashCard .flashCard__front button {
  display: block;
  width: 100%;
  height: 100%;
  font-family: "arimoregular";
  font-size: 2rem;
  font-weight: 700;
  background: #3486F8;
  border: none;
}
@media screen and (min-width: 720px) {
  .flashCard__group .flashCard .flashCard__front button:hover {
    cursor: pointer;
  }
}
.flashCard__group .flashCard .flashCard__back {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(180deg);
  background: white;
  border: solid 0.5rem #3486F8;
}
.flashCard__group .flashCard .flashCard__back .flashCard__back--wrapper {
  padding: 0 1rem;
}
.flashCard__group .flashCard .flashCard__back h4 {
  margin: 0 0 0.5rem 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: black;
  border-bottom: solid 1px #3486F8;
}
.flashCard__group .flashCard .flashCard__back h5 {
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: black;
  border-bottom: solid 1px #3486F8;
}
.flashCard__group .flashCard .flashCard__back p {
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
}

.activity__buildLetter .buildLetter__buttons .grouping button {
  margin: 0 0.1rem;
}
@media screen and (min-width: 860px) {
  .activity__buildLetter .buildLetter__buttons .grouping button {
    margin: 0;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    border-radius: 2rem;
  }
}

::cue {
  font-size: 1.5rem;
  background-color: rgba(0, 0, 0, 0.9);
}

.advantageDisadvantage {
  min-width: 8rem;
  text-align: center;
  padding: 1rem 0;
}
.advantageDisadvantage + ul {
  margin: 0 0 0 3rem;
}
.advantageDisadvantage h3 {
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
}
.advantageDisadvantage img {
  max-width: none;
}

/* Writing 2 */
.readingArea {
  position: relative;
  width: 94%;
  height: 70vh;
  overflow-y: scroll;
  margin: 1rem auto;
  padding: 1rem 2rem;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 2rem;
  background: white;
  border: solid 2px #333;
  border-radius: 2rem 0 0 2rem;
  z-index: 50;
}
@media screen and (min-width: 720px) {
  .readingArea {
    width: 98%;
    height: 500px;
    font-size: 1.1rem;
    line-height: 2.5rem;
  }
}
.readingArea.with-audio {
  margin: -3rem auto 1rem auto;
  padding: 2rem 2rem 1rem 2rem;
  border-radius: 0 0 0 2rem;
}
.readingArea .opaque__bottom {
  position: sticky;
  bottom: -5%;
  width: 100%;
  height: 20%;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 50%, transparent);
}
.readingArea p:last-of-type {
  margin: 1rem 0 0 0;
}

.list__checkmark {
  margin: 0;
}
.list__checkmark li {
  list-style: none;
  min-height: 20px;
  margin-bottom: 1rem;
  padding-left: 2rem;
  background-image: url("/public/images/content/green_check.png");
  background-position: 0 50%;
  background-repeat: no-repeat;
}
.list__checkmark li:last-child {
  margin-bottom: 0;
}

.inputTable #inputTable__answers {
  transition: opacity 500ms;
}
.inputTable td {
  width: 33.3%;
}
.inputTable td input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.1rem;
}

.constLearningCheck__content p:first-of-type {
  font-weight: 700;
}
.constLearningCheck__content .question {
  font-weight: 700;
  font-size: 1.5rem;
}
.constLearningCheck__content .question button {
  margin: 0 1rem;
  padding: 0 1rem;
  font-family: "arimoregular";
  font-weight: 700;
  font-size: 1.5rem;
}
.constLearningCheck__content .question button:hover {
  cursor: pointer;
}

.show-next-block {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  padding: 0.5rem;
  font-family: "arimoregular";
  font-weight: 700;
  font-size: 1rem;
  color: white;
  background-color: #215279;
  box-shadow: 0 0 0px 5px white, 0 0 0px 10px #215279;
  transition: background-color 350ms;
}
@media screen and (min-width: 720px) {
  .show-next-block {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.show-next-block:hover {
  cursor: pointer;
  background-color: #2c6da1;
}
@media screen and (min-width: 720px) {
  .show-next-block span {
    margin-right: 1rem;
  }
}

.writing__audio {
  position: relative;
  z-index: 100;
}
.writing__audio audio {
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.7);
}

.comicStrip {
  margin: 1rem 0;
}
.comicStrip .comic__wrapper {
  position: relative;
  margin: 2rem 0;
}
.comicStrip .comic__wrapper img {
  display: block;
  border: solid 1rem white;
  transform: rotate(-5deg);
}
.comicStrip .comic__wrapper .comic__bubble {
  position: relative;
  padding: 1rem;
  font-weight: 700;
  background: white;
  border-radius: 3rem 3rem 0 3rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.7);
  z-index: 500;
}
@media screen and (min-width: 720px) {
  .comicStrip .comic__wrapper .comic__bubble {
    position: absolute;
    bottom: 85%;
    left: 30%;
    border-radius: 3rem 3rem 3rem 0;
  }
}
@media screen and (min-width: 720px) {
  .comicStrip {
    margin: 6rem 0 1rem 0;
  }
}

.phraseCounter {
  position: relative;
  margin: 1rem 0;
}
.phraseCounter .counter {
  position: sticky;
  bottom: 0;
  padding: 1rem;
  background: white;
  border: solid 5px #215279;
}
@media screen and (min-width: 720px) {
  .phraseCounter .counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.phraseCounter .counter p {
  margin: 0;
}
.phraseCounter .counter button {
  width: 100%;
  margin: 1rem 0 0 0;
  padding: 0.5rem 1rem;
  color: white;
  font-family: "arimoregular";
  font-size: 1.5rem;
  background: #215279;
}
@media screen and (min-width: 720px) {
  .phraseCounter .counter button {
    width: auto;
    margin: 0;
  }
}
.phraseCounter .counter button:hover {
  cursor: pointer;
}
.phraseCounter .content {
  font-family: monospace;
  font-size: 1rem;
  line-height: 2rem;
}
.phraseCounter .content:hover {
  cursor: pointer;
}
.phraseCounter .content .phraseButton {
  color: initial;
  text-decoration: none;
}
.phraseCounter .content .phraseButton.highlight {
  background-color: yellow;
}

.showTwoOptions {
  position: relative;
  margin: 5rem 0 2rem 0;
  padding: 3rem 1rem 1rem 1rem;
}
.showTwoOptions .flex__layout--nowrap {
  position: absolute;
  top: -1.75rem;
  left: 0;
  width: 100%;
}
.showTwoOptions .show-next-block {
  margin: 0;
}
.showTwoOptions .showTwoOptions__content {
  margin-top: 1rem;
  transition: opacity 1000ms;
}
.showTwoOptions .showTwoOptions__content blockquote {
  padding: 0 2rem;
}

.table__withIconsAndColors {
  border-collapse: initial;
  border-spacing: 0.5rem;
}
@media screen and (min-width: 720px) {
  .table__withIconsAndColors {
    overflow-y: initial;
  }
}
.table__withIconsAndColors tr {
  background: white !important;
}
.table__withIconsAndColors td {
  padding: 1rem;
  vertical-align: middle;
}
.table__withIconsAndColors tr > td:first-of-type {
  position: relative;
  width: 20%;
  height: 6rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: white;
  background-repeat: no-repeat;
  background-position: 96% 50%;
}
.table__withIconsAndColors .academic {
  background-color: #6cb54a;
}
@media screen and (min-width: 720px) {
  .table__withIconsAndColors .academic {
    background-image: url("/public/images/icons/academic_icon.png");
  }
}
.table__withIconsAndColors .business {
  background-color: #cc3363;
}
@media screen and (min-width: 720px) {
  .table__withIconsAndColors .business {
    background-image: url("/public/images/icons/business_icon.png");
  }
}
.table__withIconsAndColors .personal {
  background-color: #645dd7;
}
@media screen and (min-width: 720px) {
  .table__withIconsAndColors .personal {
    background-image: url("/public/images/icons/personal_icon.png");
  }
}

.writingPaper p {
  font-weight: 700;
}
.writingPaper ol {
  list-style: upper-alpha;
  margin: 0;
  padding: 0 0 0 2rem;
}
@media screen and (min-width: 720px) {
  .writingPaper {
    position: relative;
    width: 90%;
    margin: 3rem 0 5rem 0;
  }
  .writingPaper::after {
    content: "";
    position: absolute;
    top: -2rem;
    right: -10%;
    height: 498px;
    width: 395px;
    background-image: url("/public/images/content/writing2/u1l1p9_line_paper.png");
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateZ(-10deg);
  }
}

ol.outlineList {
  margin: 1rem 0;
  padding: 1rem;
  list-style: upper-roman;
}
ol.outlineList ol {
  margin-left: 2rem;
  list-style: upper-alpha;
}
ol.outlineList ol ol {
  list-style: decimal;
}

/* SCORM */
.template__scorm {
  /* ----------- Legacy Buttons ---------------- */
}
.template__scorm header {
  background: #0A58BF url("../images/logo_yellow.png") 50% 1em no-repeat;
  padding: 1em 2em;
  box-shadow: none;
}
.template__scorm header h2 {
  display: block;
  margin-top: 50px;
  font-weight: bold;
  font-size: 2em;
  text-transform: uppercase;
  text-align: center;
}
.template__scorm .func__submit--button {
  width: 100%;
  font-size: 1.2em;
  padding: 1em 2em;
  color: #FFF;
  font-weight: 500;
  text-align: center;
  background: #33AAFF;
  border: none;
  outline: none;
  border-radius: 10px;
  -webkit-appearance: none;
}
.template__scorm .func__submit--button:hover {
  cursor: pointer;
}
.template__scorm .template__scorm--content {
  position: relative;
  max-width: 1000px;
  padding: 2em 5%;
  text-align: left;
}
.template__scorm .template__scorm--topPageNumber {
  font-weight: bold;
}
.template__scorm section {
  padding: 0;
}
.template__scorm .template__scorm--bottomNav {
  width: 200px;
  height: 35px;
  margin: 0 auto;
  font-weight: bold;
}
.template__scorm .template__scorm--bottomNav .template__scorm--bottomPageNumber {
  float: left;
  line-height: 35px;
  margin-right: 1em;
}
.template__scorm .template__scorm--bottomNav a {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.template__scorm .template__scorm--bottomNav .template__scorm--bottomNav-back {
  margin: 0 0.5em;
  background-image: url("../images/back_button.png");
}
.template__scorm .template__scorm--bottomNav .template__scorm--bottomNav-back:hover {
  background-image: url("/public/images/scorm/back_button_roll.png");
}
.template__scorm .template__scorm--bottomNav .template__scorm--bottomNav-next {
  background-image: url("../images/next_button.png");
}
.template__scorm .template__scorm--bottomNav .template__scorm--bottomNav-next:hover {
  background-image: url("/public/images/scorm/next_button_roll.png");
}
.template__scorm footer {
  background: #252525;
  padding: 2em;
  margin-top: 2em;
  height: auto;
  font-size: 1em;
  color: #FFF;
  text-align: center;
}
.template__scorm .button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font: 14px Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0.5em 2em 0.5em 2em;
  border-radius: 0.4em;
}
.template__scorm .buttonColor, .template__scorm a.buttonColor {
  background: #f8d187;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8b432), to(#f8d187));
  background: -webkit-linear-gradient(top, #f8d187, #f8b432);
  background: -moz-linear-gradient(top, #f8d187, #f8b432);
  background: -ms-linear-gradient(top, #f8d187, #f8b432);
  background: -o-linear-gradient(top, #f8d187, #f8b432);
  color: #000000;
  box-shadow: 0em 0.1em 0.2em #000;
}
.template__scorm .buttonColor:hover, .template__scorm a.buttonColor:hover {
  background: #505050;
  color: #ffffff;
}

@media screen and (min-width: 720px) {
  .template__scorm header {
    background: #0A58BF url("../images/logo_yellow.png") 5% 50% no-repeat;
    height: 80px;
  }
  .template__scorm header h2 {
    float: right;
    margin-top: 0px;
  }
  .template__scorm .func__submit--button {
    width: auto;
  }
  .template__scorm .template__scorm--topPageNumber {
    position: absolute;
    top: 1em;
    right: 5%;
  }
  .template__scorm .template__scorm--bottomNav {
    position: absolute;
    right: 5%;
    bottom: 0;
  }
  .template__scorm footer {
    text-align: right;
  }
}

/*# sourceMappingURL=style.css.map */