@charset "UTF-8";
/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/roboto-v29-latin-ext_latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("fonts/roboto-v29-latin-ext_latin-regular.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-v29-latin-ext_latin-regular.woff2") format("woff2"), url("fonts/roboto-v29-latin-ext_latin-regular.woff") format("woff"), url("fonts/roboto-v29-latin-ext_latin-regular.ttf") format("truetype"), url("fonts/roboto-v29-latin-ext_latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
}
/*set background colors*/
/* default #2196F3;*/
/*set font family*/
/*define font colors to match the background colors*/
/*define rounded corner and other sizes*/
/*6vmin;*/
/*2vmin;*/
/*1vmin;*/
/*2vmin;*/
/*3px 3px 5px grey*/
/*start here and set the default values for all the variables*/
/******Header******/
#x_headerBlock {
  color: #000000;
  background-repeat: no-repeat;
  background-position: right;
  background-image: none;
  width: 100%;
  border-top-right-radius: 3px;
  background: #ffffff;
  box-shadow: none;
}

#x_headerBlock #x_pageIntroBtn {
  color: #84849a;
}

#x_headerBlock #x_pageIntroBtn.pageIntroBg {
  color: white;
  background-color: #84849a;
}

#x_headerBlock #x_pageIntroBtn.ui-button.ui-state-hover, #x_headerBlock #x_pageIntroBtn.ui-button.ui-state-focus, #x_headerBlock #x_pageIntroBtn.ui-state-active {
  color: #C4551F;
}

#x_headerBlock #x_pageIntroBtn.pageIntroBg.ui-button.ui-state-hover, #x_headerBlock #x_pageIntroBtn.pageIntroBg.ui-button.ui-state-focus, #x_headerBlock #x_pageIntroBtn.pageIntroBg.ui-state-active {
  color: white;
  background-color: #C4551F;
}

/* progress bar */
#x_headerProgress .progressMarker {
  border-color: #BFBFBF;
  background-color: white;
}

#x_headerProgress .progressMarker.complete {
  border-color: #2196F3;
}

/* page resources */
#x_pageResourcesBtn.ui-button-icon-only {
  background: none;
  color: rgb(131.8, 131.8, 154.2);
}

#x_pageResourcesBtn .resourceNumber {
  background: #4078C0;
  color: #ffffff;
}

#x_pageResourcesBtn.ui-button-icon-only:hover, #x_pageResourcesBtn.ui-button-icon-only:active, #x_pageResourcesBtn.ui-button-icon-only:focus {
  color: #000000;
}

.resourceLink, .resourceLink:visited, .resourceLink:focus {
  color: #000000;
}

.resourceDownloadBtn, .resourceDownloadBtn:visited, .resourceDownloadBtn:focus {
  color: #ffffff;
}

.highlight {
  background: #F4F4F6;
}

.x_audioSlideshow_page .slide {
  margin-left: 5px;
}

#thumbHolder .thumbBox h3, .x_responsive #thumbHolder .thumbBox h3 {
  color: #000000;
}

#x_mainHolder.x_videoSynch_page .right {
  padding-top: 10px;
  padding-left: 20px;
}

.x_transcriptReader_page .highlight {
  background: rgba(255, 255, 255, 0.4);
}

.ui-accordion .ui-accordion-content {
  border-radius: 3px;
  background: #F4F4F6;
  color: #000000;
}

.ui-accordion .ui-accordion-header {
  border-radius: 3px;
  background: #4078C0;
  color: #ffffff;
}

.ui-accordion .ui-accordion-header a,
.chapterItem.ui-state-active a, .chapterItem.ui-state-active a:link, .chapterItem.ui-state-active a:visited {
  border-radius: 3px;
  color: #ffffff !important;
  background: rgb(131.8, 131.8, 154.2);
}

.ui-accordion .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  text-decoration: none;
  background: rgb(59.85, 59.85, 73.15) !important;
  border-radius: 3px;
  color: #000000;
}

.ui-accordion.chapterHolder .ui-state-active a, .ui-accordion.chapterHolder .ui-state-active a:link, .ui-accordion.chapterHolder .ui-state-active a:visited {
  background: rgb(131.8, 131.8, 154.2) !important;
}

.ui-tabs-panel a:visited, .ui-accordion-content a:visited {
  color: blue;
}

.ui-tabs-panel a:link, .ui-accordion-content a:link {
  color: blue;
}

.ui-tabs-panel a:hover, .ui-accordion-content a:hover {
  color: #00006f;
}

.ui-button {
  border-radius: 3px;
  background: rgb(82.8, 82.8, 101.2);
  border: none;
  color: #ffffff;
}

.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: 0.2em;
}

.ui-state-active {
  border-radius: 3px;
  background: rgb(59.85, 59.85, 73.15);
  border: none;
  color: #ffffff;
}

.x_nav_page #pageContents.button button.selected {
  background-color: #000000;
}

.front.panel {
  background: #F4F4F6;
  border: #F4F4F6;
  color: #000000;
}

.back.panel {
  background: rgb(187.9, 187.9, 200.1);
  border: #4078C0;
  color: #ffffff;
}

.x_links_page #linkHolder a {
  color: blue;
}

.x_links_page #linkHolder a:visited {
  color: #00006f;
}

.x_links_page #linkHolder a:hover {
  color: #00006f;
}

#pageContents.button button.selected {
  background-color: #F4F4F6;
}

#pageContents.slide #btnHolder button {
  background: rgb(59.85, 59.85, 73.15);
  border-color: rgb(59.85, 59.85, 73.15);
}

.ui-tabs .ui-tabs-nav li {
  border-radius: 3px;
  background: rgb(105.75, 105.75, 129.25);
  border: none;
  color: #ffffff;
}

.paneInfo {
  /*color:$fontcolorfobrightcolor;*/
}

.paneList a, .paneList a:link, .paneList a:visited {
  /*color: $linkcolor !important;*/
}

.ui-tabs-panel a:link {
  /*color: $linkcolor;*/
}

.ui-tabs .ui-tabs-nav {
  border-radius: 3px;
  background: none;
  border: none;
}

.ui-tabs .ui-tabs-nav li a {
  color: #ffffff;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  text-decoration: none;
  background: rgb(59.85, 59.85, 73.15) !important;
  color: #ffffff !important;
  border-radius: 3px;
  border: none;
}

a.topic.highlight {
  background: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
}

a.topic.highlight:hover {
  background: #F4F4F6;
  color: #000000;
}

div.infoHolder.ui-tabs.ui-widget.ui-widget-content.ui-corner-all {
  background: #F4F4F6;
}

#pageContents textarea {
  border-radius: 3px;
  padding: 10px;
}

#pageContents input {
  border-radius: 3px;
  padding-left: 10px;
}

.x_textHighlight_page .ui-widget-content button.ui-state-default {
  border-radius: 3px;
  background: rgb(82.8, 82.8, 101.2);
  border: none;
  color: #ffffff;
}

.x_textHighlight_page .ui-widget-content button.ui-state-default.ui-state-active {
  background: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
}

.x_textHighlight_page .ui-tabs {
  border-radius: 3px;
  background: #F4F4F6;
}

#listholder a.listitem, a:visited {
  color: #4078C0;
}

.x_annotatedDiagram_page .highlight {
  background: #F4F4F6;
}

.x_annotatedDiagram_page .hotspot {
  background: none;
}

.x_annotatedDiagram_page #infoHolder {
  background: #ffffff;
}

.target.ui-droppable.border.highlight {
  background-color: rgba(244, 244, 246, 0.4) !important;
}

.x_dragDropLabel_page #infoHolder {
  padding: 20px;
  margin-right: 20px;
}

.x_dragDropLabel_page .label.panel {
  background: rgba(59.85, 59.85, 73.15, 0.8) !important;
  border-color: #F4F4F6;
  color: #ffffff;
}

.x_dragDropLabel_page #targetHolder .highlight {
  background: none;
}

#categoryHolder .category {
  border-radius: 3px;
}

#categoryHolder h3 {
  color: #000000;
}

.x_categories_page #dragDropHolder {
  background: #ffffff;
  padding: 10px;
  border-radius: 3px;
}

.x_categories_page .label.panel {
  background: rgb(59.85, 59.85, 73.15);
  border: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
  border-radius: 3px;
}

#categoryHolder .highlight {
  border-radius: 3px;
  background: #F4F4F6;
}

.x_decision_page .highlight {
  background: #F4F4F6;
}

.x_dictation_page #answerTxt {
  width: 98%;
  margin-bottom: 10px;
  border-radius: 3px;
  padding: 10px;
}

#targetHolder .target {
  border-radius: 3px;
}

#targetHolder .highlight {
  background: #ffffff;
}

.x_gapFill_page #targetHolder .highlight {
  background: rgba(255, 255, 255, 0.9);
}

.x_gapFill_page .label.panel {
  background: rgb(105.75, 105.75, 129.25);
  border-color: rgb(105.75, 105.75, 129.25) !important;
  color: #ffffff;
}

.x_gapFill_page #labelHolder .label.selected {
  border: 2px solid green !important;
}

.x_gapFill_page .target.correct {
  color: green;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.2);
}

a.hotspot, a.hotspot.selected {
  background: none;
}

.hsinfo {
  padding: 1%;
}

.x_hotspotImage_page #infoHolder {
  background: none;
}

.x_interactiveText_page .highlight {
  background: #F4F4F6;
}

.x_list_page .highlight {
  background: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
}

.x_textMatch_page #dragDropHolder {
  background: #F4F4F6;
  padding: 10px;
  border-radius: 3px;
}

.x_textMatch_page .label.panel {
  background: rgb(59.85, 59.85, 73.15);
  border-color: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
}

.x_opinion_page #pageContents input {
  padding-left: 0;
}

.qPanel {
  overflow-x: hidden;
}

.qSeparator hr {
  background-color: white;
  border-color: white;
  border: solid 1px white;
}

.sliderHolder .labelHolder a p {
  color: #000000;
}

/*****timeline matching pairs*****/
.x_timeline_page #dragDropHolder {
  background: #ffffff;
}

.x_timeline_page #targetHolder .target {
  border-radius: 3px;
  background-color: #F4F4F6;
}

.x_timeline_page .label.panel.ui-draggable {
  background: rgb(105.75, 105.75, 129.25);
  color: #ffffff;
  border-color: rgb(131.8, 131.8, 154.2);
}

#subMenuItems .subMenuItem {
  background: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
}

.x_table_page table.header.simple tr:first-child {
  border: none;
}

.x_table_page table.simple {
  border: none;
}

#pageContents .card {
  border-radius: 3px;
  border-color: #4078C0;
}

#cardTopHolder .card {
  border-color: #4078C0;
}

#puzzle {
  border-radius: 3px;
}

#pageContents .card {
  color: #603784;
}

#cardTopHolder .card {
  background-image: url("card_back.svg") !important;
}

.x_youtuberss_page #resultsHolder div {
  width: 97%;
  min-height: 50px;
  padding-top: 5px;
  border-radius: 3px;
  background-color: #F4F4F6;
  margin: 0.5em;
}

.x_youtuberss_page .shadedDiv {
  background-color: white !important;
  border-radius: 3px;
}

.x_youtuberss_page .shadedDiv p {
  color: #000000 !important;
}

div#shorturltodisplay a {
  color: #603784;
}

.x_rss_page #resultsHolder div {
  border-radius: 3px;
  background-color: #F4F4F6;
}

.x_rss_page #resultsHolder div p {
  color: #000000;
}

.x_rss_page #resultsHolder .shadedDiv {
  background-color: white !important;
  border-radius: 3px;
}

.x_rss_page #resultsHolder div a {
  color: darkblue;
}

.x_results_page td {
  background: #F4F4F6;
}

.x_results_page #questionScores th {
  background-color: rgb(59.85, 59.85, 73.15);
}

.x_results_page tr.alt td {
  background: rgb(105.75, 105.75, 129.25);
  color: #ffffff;
}

.x_results_page .details th {
  background: rgb(59.85, 59.85, 73.15);
  color: #ffffff;
}

.x_results_page #general_summary th {
  background: #ffffff;
}

.x_audioRecord_page .deleteClipBtn {
  color: #000000;
}

.x_audioRecord_page .deleteClipBtn:hover, .x_audioRecord_page .deleteClipBtn:focus, .x_audioRecord_page .deleteClipBtn:active {
  color: rgb(25.5, 25.5, 25.5);
}

.x_audioRecord_page .clip.highlight {
  background-color: rgb(215.95, 215.95, 223.05);
}

.x_audioRecord_page #recBtn.recording .ui-icon, .x_audioRecord_page #recBtn.recording .ui-button-text {
  color: #ffffff;
}

@media (min-width: 768px) {
  .tick, img.result {
    width: 2.5vmin;
  }
}

.x_grid_page table tr,
.x_table_page table tr,
.x_interactiveText_page table tr,
.x_documentation_page table tr,
.x_results_page table tr {
  background: rgb(215.95, 215.95, 223.05);
}

table tr.shaded {
  background: rgb(159.85, 159.85, 177.15);
}

table.header.shaded thead tr:first-child,
table.header.shaded tr.header,
table.header.shaded :not(tbody) > tr:first-child,
.x_grid_page table.header.shaded tr:first-child,
table.footer.shaded tbody tr:last-child,
table.headerCol.shaded td.header {
  background: rgb(105.75, 105.75, 129.25);
  color: #ffffff;
}

#x_footerBlock {
  font-size: 1em;
  color: #000000;
  background-image: none;
  width: 100%;
  background: #ffffff;
  box-shadow: none;
}

#x_footerBg {
  background-image: none;
}

#x_pageNo {
  background: none;
}

.pbBar {
  background-color: #2196F3;
}

/* these buttons will use font awesome icons instead of pngs */
.ui-button .ui-icon.x_help {
  background-image: none;
}

.ui-button .ui-icon.x_info {
  background-image: none;
}

.ui-button .ui-icon.x_home {
  background-image: none;
}

.ui-button .ui-icon.x_glossary {
  background-image: none;
}

.ui-button .ui-icon.x_maximise {
  background-image: none;
}

.ui-button .ui-icon.x_minimise {
  background-image: none;
}

.ui-button .ui-icon.x_media {
  background-image: none;
}

.ui-button .ui-icon.x_next {
  background-image: none;
}

.ui-button .ui-icon.x_prev {
  background-image: none;
}

.ui-button .ui-icon.x_prev_hist {
  background-image: none;
}

.ui-button .ui-icon.x_colourChanger {
  background-image: none;
}

.ui-button .ui-icon.x_projectIntro {
  background-image: none;
}

.ui-button .ui-icon.x_saveSession {
  background-image: none;
}

#x_nextBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f138";
}

#x_prevBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f137";
}

#x_cssBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f066";
}

#x_colourChangerBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f042";
}

#x_mediaBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f16a";
}

#x_glossaryBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f02d";
}

#x_helpBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f128";
}

#x_introBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f129";
}

#x_menuBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f0c9";
}

#x_saveSessionBtn:not(.customIconBtn) .ui-icon:before {
  content: "\f0c7";
}

#x_footerBlock button {
  color: rgb(131.8, 131.8, 154.2);
}

#x_footerBlock button.ui-state-hover {
  color: rgb(25.5, 25.5, 25.5);
}

#x_footerBlock button.ui-state-focus {
  color: #000000;
}

#x_footerBlock button.ui-state-active {
  color: rgb(25.5, 25.5, 25.5);
}

#x_footerBlock button {
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-size: 1.9em;
  width: 1.5em;
  padding-right: 0;
  margin-left: 5px;
}

#x_footerBlock button span.ui-button-text {
  display: none;
}

#x_footerBlock .x_floatLeft button, #x_footerBlock .x_floatRight button {
  padding: 0;
}

/*****footer tools chevron*****/
#x_footerChevron {
  color: #ffffff;
}

#x_footerChevron:hover, #x_footerChevron:focus {
  color: #C4551F;
}

/*****TOC****/
.ui-dialog .ui-widget-header {
  border: 1px solid #ffffff;
  background: rgb(131.8, 131.8, 154.2);
  color: #ffffff;
  font-weight: bold;
}

#menuItems .menuItem, #menuItems .chapterItem {
  background: #ffffff;
  color: #000000;
}

#menuItems .menuItem:hover, #menuItems .chapterItem:hover {
  background: rgb(159.85, 159.85, 177.15);
  color: #ffffff;
}

#menuItems .menuItem.current, #menuItems .chapterItem.current {
  border: 1px solid rgb(131.8, 131.8, 154.2);
}

.chapterPageHolder.ui-accordion-content {
  background: #ffffff;
}

#menuItems .chapterPageHolder .menuItem {
  border: 1px solid transparent;
}

#x_sideBar {
  background-color: #F4F4F6;
}

#x_sideBarToggleBtn {
  border-color: rgb(105.75, 105.75, 129.25);
  color: rgb(105.75, 105.75, 129.25);
}

#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
  color: #F4F4F6;
  background-color: rgb(105.75, 105.75, 129.25);
}

#x_sideBarBtnHolder button {
  color: rgb(105.75, 105.75, 129.25);
}

#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
  border-color: rgb(105.75, 105.75, 129.25);
}

#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
  border-color: rgb(105.75, 105.75, 129.25);
}

#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
  background-color: rgb(105.75, 105.75, 129.25);
  color: #ffffff;
}

#x_sideBar.sideBarLarge #x_sideBarBtnHolder button:hover span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:focus span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:active span.ui-icon {
  background-color: rgb(105.75, 105.75, 129.25);
  color: #ffffff;
}

/* progress bar */
.pbContainer {
  background-color: #BFBFBF;
}

@media only screen and (max-width: 500px) {
  #x_footerProgress {
    display: block;
  }
  #x_pageNo {
    vertical-align: top;
    text-align: center;
    display: inline-block;
    padding: 12px 5px 0 5px;
    margin-right: -5px;
    height: 30px;
    width: auto;
    z-index: 100;
    font-size: 12px;
  }
  #x_footerBlock button {
    /* font-size: 1em;
     width: 1em;*/
    margin-left: 5px;
  }
  .pbContainer {
    display: block;
    margin-top: 1.2em;
  }
  .pbTxt {
    display: block;
    text-align: center;
  }
}
#x_pageHolder {
  /*#infoHolder p {
    animation: fadePop 0.25s linear;
  }*/
}
#x_pageHolder .label.panel.ui-draggable {
  transform: scale(1);
  transition: transform 0.5s ease-out 0s, box-shadow 0.5s ease-out 0s;
}
#x_pageHolder .label.panel.ui-draggable.ui-draggable-dragging {
  transform: scale(1.25);
  box-shadow: 2px 4px 1px #888888;
}
#x_pageHolder #feedback {
  animation: fadePop 0.25s linear;
}
@keyframes fadePop {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.marker, .panel1 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 3px;
  display: table;
  padding: 10px;
  font-style: normal;
  background-color: #C4551F;
  color: #ffffff;
}

.marker a, .panel1 a {
  color: white !important;
  text-decoration: underline;
}

.panel2 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 3px;
  display: table;
  padding: 10px;
  font-style: normal;
  background-color: #418545;
  color: #ffffff;
}

var a, .panel2 a {
  color: white !important;
  text-decoration: underline;
}

kbd, .panel3 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 3px;
  display: table;
  padding: 10px;
  font-style: normal;
  background-color: #4078C0;
  color: #ffffff;
}

kbd a, .panel3 a {
  color: white !important;
  text-decoration: underline;
}

.panel4 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 3px;
  display: table;
  padding: 10px;
  font-style: normal;
  background-color: #278384;
  color: #ffffff;
}

.panel4 a {
  color: white !important;
  text-decoration: underline;
}

.panel5 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 3px;
  display: table;
  padding: 10px;
  font-style: normal;
  background-color: #603784;
  color: #ffffff;
  display: table;
}

.panel5 a {
  color: white !important;
  text-decoration: underline;
}

code, .panel6 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 3px;
  display: table;
  padding: 10px;
  font-style: normal;
  background-color: #D13759;
  color: #ffffff;
}

code a, .panel6 a {
  color: white !important;
  text-decoration: underline;
}

samp, .highlight1 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  display: table;
  font-weight: normal;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-color: #C4551F;
}

tt, .highlight2 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  display: table;
  font-weight: normal;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-color: #418545;
}

.highlight3 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  display: table;
  font-weight: normal;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-color: #4078C0;
}

.highlight4 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  display: table;
  font-weight: normal;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-color: #278384;
}

.highlight5 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  display: table;
  font-weight: normal;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-color: #603784;
}

.highlight6 {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  display: table;
  font-weight: normal;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-color: #D13759;
}

q {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  color: #333;
  display: block;
  padding: 10px;
}

cite {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  /*font-weight:400;
  margin-left:20px;*/
  padding: 10px;
}

blockquote {
  font-family: Verdana, Arial, sans-serif;
  font: 400 14px/24px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-left: 10px solid;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "“" "”";
  background: #f9f9f9;
  border-color: #ccc;
}

blockquote:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #ccc;
}

blockquote p {
  display: inline;
}

blockquote:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #ccc;
}

.bq1 {
  border-color: #C4551F;
}

.bq1:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #C4551F;
}

.bq1:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #C4551F;
}

.bq2 {
  border-color: #418545;
}

.bq2:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #418545;
}

.bq2:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #418545;
}

.bq3 {
  border-color: #4078C0;
}

.bq3:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #4078C0;
}

.bq3:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #4078C0;
}

.bq4 {
  border-color: #278384;
}

.bq4:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #278384;
}

.bq4:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #278384;
}

.bq5 {
  border-color: #603784;
}

.bq5:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #603784;
}

.bq5:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #603784;
}

.bq6 {
  border-color: #D13759;
}

.bq6:after {
  content: close-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  color: #D13759;
}

.bq6:before {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #D13759;
}

.speech-bubble1 a, .speech-bubble2 a, .speech-bubble3 a, .speech-bubble4 a, .speech-bubble5 a, .speech-bubble6 a {
  color: white !important;
  text-decoration: underline;
}

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

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.4);
}

[type=range] {
  -webkit-appearance: none;
  margin: 12px 0;
  width: 100%;
}
[type=range]:focus {
  outline: 0;
}
[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(145.825, 145.825, 165.675);
}
[type=range]:focus::-ms-fill-lower {
  background: rgb(131.8, 131.8, 154.2);
}
[type=range]:focus::-ms-fill-upper {
  background: rgb(145.825, 145.825, 165.675);
}
[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
  height: 8px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 100%;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(131.8, 131.8, 154.2);
  border: 2px solid rgb(131.8, 131.8, 154.2);
  border-radius: 5px;
}
[type=range]::-webkit-slider-thumb {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(59.85, 59.85, 73.15);
  border: 2px solid rgb(59.85, 59.85, 73.15);
  border-radius: 12px;
  cursor: pointer;
  height: 24px;
  width: 24px;
  -webkit-appearance: none;
  margin-top: -10px;
}
[type=range]::-moz-range-track {
  cursor: pointer;
  height: 8px;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 100%;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(131.8, 131.8, 154.2);
  border: 2px solid rgb(131.8, 131.8, 154.2);
  border-radius: 5px;
}
[type=range]::-moz-range-thumb {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(59.85, 59.85, 73.15);
  border: 2px solid rgb(59.85, 59.85, 73.15);
  border-radius: 12px;
  cursor: pointer;
  height: 24px;
  width: 24px;
}
[type=range]::-ms-track {
  cursor: pointer;
  height: 8px;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 100%;
  background: transparent;
  border-color: transparent;
  border-width: 12px 0;
  color: transparent;
}
[type=range]::-ms-fill-lower {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(117.775, 117.775, 142.725);
  border: 2px solid rgb(131.8, 131.8, 154.2);
  border-radius: 10px;
}
[type=range]::-ms-fill-upper {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(131.8, 131.8, 154.2);
  border: 2px solid rgb(131.8, 131.8, 154.2);
  border-radius: 10px;
}
[type=range]::-ms-thumb {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(12.75, 12.75, 12.75, 0.2);
  background: rgb(59.85, 59.85, 73.15);
  border: 2px solid rgb(59.85, 59.85, 73.15);
  border-radius: 12px;
  cursor: pointer;
  height: 24px;
  width: 24px;
  margin-top: 0;
}

/* Important note: unlike some other Xerte themes this theme has been developed using sass and scss files */
/*You should not edit the .css files directly or change values directly unless you wish to override something*/
/*Use SASS and the file in the scss folder name _allvariables.scss to start any customisation*/
.vault button {
  background-color: #84849a;
  border: 2px solid white !important;
  color: white !important;
}

.vault button:hover {
  background-color: #1a1a1a !important;
  border: 2px solid white !important;
  color: white !important;
}

#x_headerBlock #x_pageResourcesBtn {
  background: #84849a !important;
  color: white !important;
}

#x_headerBlock #x_pageResourcesBtn:hover {
  background: #1a1a1a !important;
  color: white !important;
}

#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
  border-color: white !important;
}

#x_headerProgress .progressMarker {
  background: white !important;
  border-color: #1a1a1a;
}

#x_headerProgress .progressMarker.complete {
  background: #84849a;
  border-color: #84849a;
}

#x_pageResourcesBtn .resourceNumber {
  background: white;
  color: #84849a;
}

#extraText {
  color: #1a1a1a !important;
}

.vault {
  background-color: #84849a !important;
}

.vault-door-frame {
  background-color: white !important;
}

.vault-door {
  background-color: #84849a !important;
}

.pbPercent.pbBar.sub {
  background-color: #84849a;
}

#x_pagePswd {
  border: 1px solid black !important;
  background: white !important;
}

#x_pagePswdBtn {
  background-color: #84849a !important;
  border: 2px solid white !important;
}

#x_pagePswdBtn:hover {
  background-color: #1a1a1a !important;
}

.vault-door-dial-rod .rotated {
  background-color: white;
}

.vault-door-dial-rod {
  background-color: white;
}

.vault-door-dial {
  background-color: white;
}

#x_pagePswd {
  border: 3px solid white;
}

#x_pagePswd:focus {
  border: 3px solid white;
  background-color: white !important;
}

.vault-door-dial-inside {
  background-color: #84849a !important;
}

.x_pswdInput.old input#x_pagePswd {
  border: 1px solid black;
}

body {
  background: #BFBFBF;
  color: #000000;
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cke_editable {
  background: #ffffff;
}

/******Fonts******/
.ui-button .ui-button-text {
  font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*Note: these font-sizes will be ignored when responsive text is on*/
p {
  font-size: 1.1em;
}

h1 {
  font-size: 1em;
  margin: 0;
}

h2 {
  font-size: 1.2em;
  margin: 5px 0 0 0;
}

h3 {
  font-size: 1.2em;
  margin: 0;
}

a {
  color: blue;
}

a:hover {
  color: #00006f;
}

a:visited {
  color: #00006f;
}

#x_mainHolder {
  background: #ffffff;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border: none !important; /*remove this to restore the default border*/
}

#x_pageDiv {
  padding-top: 2%;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
}

#infoHolder {
  border-radius: 3px;
  background: #F4F4F6;
}

/*****panel all pages with a panel*****/
.panel {
  border-radius: 3px;
  background: #F4F4F6;
  box-shadow: none;
  color: #000000;
}

.panelPage {
  padding: 1%;
  color: #000000;
}

/*****all images*****/
img {
  border-radius: none;
}

/******@media changes******/
@media (min-width: 1366px) {
  /*tablet and above css below here*/
  #x_mainHolder {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #x_mainHolder {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
/*******lightbox styles********/
/* Lity - v2.2.2 - 2017-07-17 */
/* http://sorgalla.com/lity */
/* Copyright (c) 2015-2017 Jan Sorgalla; Licensed MIT */
.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lity.lity-opened {
  opacity: 1;
}

.lity.lity-closed {
  opacity: 0;
}

.lity * {
  box-sizing: border-box;
}

.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}

.lity-wrap:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lity-loading .lity-loader {
  opacity: 1;
}

.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}

.lity-content {
  z-index: 9993;
  width: 100%;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.lity-loading .lity-content,
.lity-closed .lity-content {
  transform: scale(0.8);
}

.lity-content:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.lity-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

.lity-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

.lity-close:active {
  top: 1px;
}

/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
}

/* iFrame */
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  width: 100%;
  max-width: 964px;
}

.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

.lity-hide {
  display: none;
}/*# sourceMappingURL=futureteacher.css.map */