:root {
--link-text-color: #313D6B;
--link-hover-text-color: #313D6B;
--left-heading-color: #FF6104;
--subheading-color: #313D6B;
--selected-row-bg: #A4B2CD;
--selected-row-bg-lighter: #b8c6e1;
--selected-row-border-darker: #909eb9;
--header-bg-color: #313D6B;
--section-nav-bg-color: #e9e9e9;
--section-nav-link-bg-color: #fff;
--checkout-left-bar-bg: #A4B2CD;
--left-bar-bg: #FFFFFF;
--left-bar-border-color: #313D6B;
--tile1-bg-color: #ffffff;
--tile2-bg-color: #ffffff;
--tile3-bg-color: #ffffff;
--tile4-bg-color: #ffffff
}
[data-theme="dark"], [data-theme="dark"] .grey_background, .dark_editor {
--link-text-color: #8692c0;
--link-hover-text-color: #8692c0;
--left-heading-color: #fff;
--subheading-color: #fff;
--selected-row-bg: hsl(204deg 32% 12%);
--selected-row-bg-lighter: hsl(204deg 32% 18%);
--selected-row-border-darker: hsl(204deg 32% 21%);
--section-nav-bg-color: #0c0c0e;
--section-nav-link-bg-color: #2f3137;
--checkout-left-bar-bg: #28292d;
--left-bar-bg: #28292d;
--left-bar-border-color: #3B3D44;
--tile1-bg-color: #28292d;
--tile2-bg-color: #28292d;
--tile3-bg-color: #28292d;
--tile4-bg-color: #28292d
}

/* Links */

a, dt, .optionsRibbon ul li a:hover, .optionsRibbon ul li a.hover, .optionsRibbon ul li a:focus, nav#leftColumn li a.centreIcon span, header .dropDown a:hover, header .dropDown a:focus, .rightColumn a *, .rightColumn ul.largeImgs li > a, .rightColumn a.sectionLink, #TableA a span, #TableB a span, nav#leftColumn ol li a:not(.centreIcon):hover, nav#leftColumn ol li a:not(.centreIcon):hover span, nav#leftColumn ol li a.selected, .messagesHolder .dropDown ul li .ms-user, .notificationsHolder .dropDown ul li .ms-user, nav#leftColumn .scroll a:hover span, #facebox #complete_signup h2, .primaryColorText, #fixedSectionHeader a.sectionLink:hover span, #courseToolbar a.sectionLink:hover span, .options_btn:hover, .options_btn:focus, nav#leftColumn .options_btn:hover, nav#leftColumn .options_btn:focus, #Uploader #dropzone, a.secondaryColorText:hover, .dashboard_widgets a.footer label, table #section_list a:not(:hover) {
color: #313D6B; color: var(--link-text-color)
}

/* Hover */

a:hover, .rightColumn ul li a:hover *, .rightColumn a:hover, .rightColumn ul.largeImgs li > a:hover, table a span, table span a, div.materialStyle table a:hover, div.materialStyle table a:hover *, a.tableLink1:hover, a.tableLink1:hover *, a.tableLink2:hover, a.tableLink2:hover *, h2.playerLevel span, h3, h5, #facebox h2, .secondaryColorText {
color: #313D6B; color: var(--link-hover-text-color)
}

/* Left nav heading */

#leftColumn h3, #user-menu h3 {
color: #FF6104; color: var(--left-heading-color)
}

/* h2 and metadata */

#centreColumn h2, #courseToolbar h2, #tinymce h2, #facebox form#resources_form .search-metadata, #centreColumn .centre_widgets .full_width_widget .headingLinkWrap h2 {
color: #313D6B; color: var(--subheading-color)
}

/* Top bar hover */

.dropDownHolder > a:hover, .quickLinks > a:hover, .quickLinks .dropDownHolder > a:focus, .quickLinks > a:focus, .highlight {
background: #45517f
}

/* Top bar */

.difSignIn, .copilot-chat .chat-wrapper .topics .topics-list ul li.active, button.ai-generate-btn, .ai-fab, input[type="submit"], input[type="button"], button, .mainNav .cta a, header, #facebox .header, #chatContainer .header, .chatHeader, .mobileSearch, .ui-datepicker .ui-datepicker-buttonpane button, .ui-datepicker .ui-widget-header, .select2-results .select2-highlighted, .select2-container-multi .select2-choices .select2-search-choice, .messageOptions li a, .optionsRibbon ul.inverted li a, .section-intro p.number, .jconfirm .jconfirm-box div.title, .options_btn.inverted, .quiz_match_choice.ui-draggable-dragging, #fullscreen_msg_holder .header, .vex .vex-header, .link_button, .senders-placeholder span, .popover-stack .popover-header {
background: #313D6B
}

button.copilot-tab-active {
border-color: #313D6B !important
}

/* Top tab selector */

ul.tabnav li a.selected:after, table.calendar_small .current *, table.calendar .current, .calendar-agenda-day .current, .optionsRibbon ul li.selected a:before {
background: #ff6104
}

/* Inverted options links */

.optionsRibbon ul.inverted li a, .options_btn.inverted {
background: #FF6104
}

/* Table of contents */

.section_nav_holder {
background-color: #e9e9e9; background: var(--section-nav-bg-color)
}
.section_nav a.module_link:not(.selected), .section_nav a.module_link.locked.hovering.selected {
background-color: #fff; background: var(--section-nav-link-bg-color)
}

/* Section link navigation */

.sectionLink.inverted {
background: #FF6104
}

/* Footer */

footer {
background: #313D6B
}

/* Alert box */

header .quickLinks a .newAlert, a.rightMobileBar .newAlert {
border: 1px solid #ff7518;
background-color: #ff6104
}

/* Table row selection */

table tr.highlight td, .badgeOptions a.highlight, ul.quiz_blocks li.selected, .quiz_match_dropzone > div {
background: #A4B2CD; background: var(--selected-row-bg)
}
table tr td.highlight {
background: #b8c6e1; background: var(--selected-row-bg-lighter)
}
table tr.highlight td, ul.quiz_blocks li.selected, .quiz_match_dropzone > div {
border-color: #909eb9; border-color: var(--selected-row-border-darker)
}

/* Tinymce */

.mce-window-head, .mce-foot .mce-btn button, .mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
background: #313D6B !important
}

/* Fonts */

h1, h2, h3, h4, h5, h6, #centreColumn .centerHeading, #courseToolbar .centerHeading, .quiz_points, .jconfirm .title, .mce-window-head .mce-title, .catalog_boxes .header strong.class_name {
font-family: 'RobotoLightNew', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale
}

/* Main nav - Background and border */

#contentWrap.hasLeftColumn:before, nav#leftColumn ol.thinMainNav, nav#leftColumn ol.thinMainNav.hoverMainNav, nav#leftColumn ol.hoverMainNav:before, .closeNavTrigger a, [dir=rtl] .user #contentWrap.hasLeftColumn:after, nav#right_nav_holder {
background-color: #FFFFFF; background-color: var(--left-bar-bg);
border-color: #313D6B; border-color: var(--left-bar-border-color);
}
[dir=rtl] nav#leftColumn ol.hoverMainNav:before {
border-left-color: #313D6B; border-left-color: var(--left-bar-border-color);
}
@media screen and (max-width: 1024px) {
/* same as media query styles below, but without body class */
nav#leftColumn ol.staticMainNav > li > ul {
background: #ebebeb;
border-color: #ebebeb
}
nav#leftColumn ol.staticMainNav > li > ul li a.selected, nav#leftColumn ol.staticMainNav > li > ul li a:hover{
border-color: #FFFFFF
}
}
@media screen and (min-width: 767px) {
#user-menu, #user-menu .sub-menu, #user-menu > ol, #user-menu .sub-menu > ol, nav#user-menu:before, #user-menu .header > a.show-sub > span, nav#leftColumn{
background: #FFFFFF;
background-color: var(--left-bar-bg);
}
}
@media screen and (min-width: 1025px) {
/* same as media query styles above, but with body class */
.keep_tablet_nav nav#leftColumn ol.staticMainNav > li > ul {
background: #ebebeb;
border-color: #ebebeb
}
.keep_tablet_nav nav#leftColumn ol.staticMainNav > li > ul li a.selected, .keep_tablet_nav nav#leftColumn ol.staticMainNav > li > ul li a:hover {
border-color: #FFFFFF
}
}

  /* Add thin separating shadow when the nav and page are white */
  html:not([data-theme="dark"]) nav#user-menu:before {box-shadow: 1px 44px 1px #dbdbdb}
  html[dir="RTL"]:not([data-theme="dark"]) nav#user-menu:before {box-shadow: -1px 44px 1px #dbdbdb}

  #user-menu li:not(:hover) a:not(.selected) i:after, html:not([data-theme="dark"]) #user-menu .header > a.show-sub > span > i:after{
  left: 0px;
  }

/* Main nav - Selected background */

nav#leftColumn ol > li > a:not(.centreIcon):hover, nav#leftColumn ol > li > a:not(.centreIcon).highlight, nav#leftColumn ol > li > a.selected, nav#leftColumn li > ul > li > a:not(.centreIcon):hover, nav#leftColumn li > ul > li > a.selected, .section_nav a:not(.locked):hover, .section_nav ul a.selected, #user-menu ol > li.mm-opened > a, #user-menu ol > li > a:hover, #user-menu ol > li > a.highlight, #user-menu ol > li > a.selected{
background: #313D6B;
background: linear-gradient(to right,  #313D6B 0%, #45517f 100%);
border-color: #313D6B; border-color: var(--left-bar-border-color)
}
[dir=rtl] nav#leftColumn ol > li > a:not(.centreIcon):hover, [dir=rtl] nav#leftColumn ol > li > a:not(.centreIcon).highlight, [dir=rtl] nav#leftColumn ol > li > a.selected, [dir=rtl] nav#leftColumn li > ul > li > a:not(.centreIcon):hover, [dir=rtl] nav#leftColumn li > ul > li > a.selected, [dir=rtl] .section_nav a:not(.locked):hover, [dir=rtl]  .section_nav ul a.selected {
background: linear-gradient(to left,  #313D6B 0%, #45517f 100%);
}
#user-menu .dropDown li > a:hover, #user-menu .dropDown li > a:hover span{
color: #313D6B; color: var(--link-hover-text-color)
}
  /* Main nav - Flyout side color border */

  .no-touch nav#leftColumn > ol > li:not(.dropDownHolder) a.highlight + .dropDown, .touch nav#leftColumn > ol > li:not(.dropDownHolder):hover .dropDown, #user-menu ol > li.mm-opened > ul, #user-menu ol > li.mm-opened > div{
  border-left: 4px solid #45517f
  }
  [dir=rtl].no-touch nav#leftColumn > ol > li:not(.dropDownHolder) a.highlight + .dropDown, [dir=rtl].touch nav#leftColumn > ol > li:not(.dropDownHolder):hover .dropDown, [dir=rtl] #user-menu ol > li.mm-opened > ul, [dir=rtl] #user-menu ol > li.mm-opened > div {
  border-right: 4px solid #45517f;
  }



/* Main nav - Selected text */

nav#leftColumn ol > li > a:not(.centreIcon):hover span, nav#leftColumn ol > li > a:not(.centreIcon).highlight span, nav#leftColumn ol > li > a.selected span, nav#leftColumn li > ul > li > a:not(.centreIcon):hover span, nav#leftColumn li > ul > li > a.selected span, #user-menu ol > li.mm-opened > a span, #user-menu ol > li > a:hover span, #user-menu ol > li > a.selected span{
  color: #fff
}

/* Main nav - Selected icon */

nav#leftColumn ol > li > a:not(.centreIcon):hover i:after, nav#leftColumn ol > li > a:not(.centreIcon).highlight i:after, nav#leftColumn ol > li > a.selected i:after, nav#leftColumn li > ul > li > a:not(.centreIcon):hover i:after, nav#leftColumn li > ul > li > a.selected i:after, nav#leftColumn ol.thinMainNav.hoverMainNav > li > a:hover i:after, #user-menu li a.selected > span > i:after, #user-menu ol > li > a:hover i:after, #user-menu li.mm-opened > a span > i:after  {
  left: -40px
}

  nav a:hover .icon {
  fill: #fff
  }


/* Tile backgrounds */

.catalog_boxes .tile_color_1, html:not([dir=rtl]) .catalog_class.tile_color_1 #contentWrap:before, [dir=rtl] .catalog_class.tile_color_1 #contentWrap:after, .catalog_class.tile_color_1 #leftColumn, .people_boxes > div:nth-child(4n+1), .resources_boxes > a:nth-child(4n+1), .app_boxes > div:nth-child(4n+1), .dashboard_blocks > div:nth-child(4n+1), .dashboard_widgets > div:nth-of-type(4n+1) .headingLinkWrap, .lesson_boxes > div:nth-of-type(4n+1), .lesson_boxes > a:nth-of-type(4n+1), .modern_module_list > table:nth-of-type(4n+1) .modern_module_row td, .sliding_banner.welcome_banner .sliding_banner_inner {
background-color: #ffffff; background-color: var(--tile1-bg-color)
}
.catalog_boxes .tile_color_2, html:not([dir=rtl]) .catalog_class.tile_color_2 #contentWrap:before, [dir=rtl] .catalog_class.tile_color_2 #contentWrap:after, .catalog_class.tile_color_2 #leftColumn, .people_boxes > div:nth-child(4n+2), .resources_boxes > a:nth-child(4n+2), .app_boxes > div:nth-child(4n+2), .dashboard_blocks > div:nth-child(4n+2), .dashboard_widgets > div:nth-of-type(4n+2) .headingLinkWrap, .lesson_boxes > div:nth-of-type(4n+2), .lesson_boxes > a:nth-of-type(4n+2), .modern_module_list > table:nth-of-type(4n+2) .modern_module_row td {
background-color: #ffffff; background-color: var(--tile2-bg-color)
}
.catalog_boxes .tile_color_3, html:not([dir=rtl]) .catalog_class.tile_color_3 #contentWrap:before, [dir=rtl] .catalog_class.tile_color_3 #contentWrap:after, .catalog_class.tile_color_3 #leftColumn, .people_boxes > div:nth-child(4n+3), .resources_boxes > a:nth-child(4n+3), .app_boxes > div:nth-child(4n+3), .dashboard_blocks > div:nth-child(4n+3), .dashboard_widgets > div:nth-of-type(4n+3) .headingLinkWrap, .lesson_boxes > div:nth-of-type(4n+3), .lesson_boxes > a:nth-of-type(4n+3), .modern_module_list > table:nth-of-type(4n+3) .modern_module_row td {
background-color: #ffffff; background-color: var(--tile3-bg-color)
}
.catalog_boxes .tile_color_4, html:not([dir=rtl]) .catalog_class.tile_color_4 #contentWrap:before, [dir=rtl] .catalog_class.tile_color_4 #contentWrap:after, .catalog_class.tile_color_4 #leftColumn, .people_boxes > div:nth-child(4n+4), .resources_boxes > a:nth-child(4n+4), .app_boxes > div:nth-child(4n+4), .dashboard_blocks > div:nth-child(4n+4), .dashboard_widgets > div:nth-of-type(4n+4) .headingLinkWrap, .lesson_boxes > div:nth-of-type(4n+4), .lesson_boxes > a:nth-of-type(4n+4), .modern_module_list > table:nth-of-type(4n+4) .modern_module_row td {
background-color: #ffffff; background-color: var(--tile4-bg-color)
}
[data-theme="dark"] .catalog_boxes *[class*='tile_color_'], [data-theme="dark"] .lesson_boxes > *, [data-theme="dark"] .modern_module_list > table .modern_module_row td, [data-theme="dark"] .classes_widget .swiper-wrapper > *[style*='background-color'] {
background-color: var(--tile1-bg-color) !important
}

  /* Tile headings */

  html:not([data-theme="dark"]) #centreColumn .dashboard_blocks h2, html:not([data-theme="dark"]) #centreColumn .catalog_boxes h2, html:not([data-theme="dark"]) #centreColumn .catalog_boxes .header strong.class_name, html:not([data-theme="dark"]) #centreColumn .modern_module_row h2, html:not([data-theme="dark"]) #centreColumn .modern_module_row h2 span {
    color: #333
  }

  /* Tile text */

  html:not([data-theme="dark"]) .modern_module_row .label.box, html:not([data-theme="dark"]) .modern_module_overview *, html:not([data-theme="dark"]) .catalog_boxes .label, html:not([data-theme="dark"]) .app_boxes .footer a, html:not([data-theme="dark"]) .catalog_courses .teacher span, html:not([data-theme="dark"]) #centreColumn .dashboard_blocks ul li, html:not([data-theme="dark"]) .catalog_boxes .lightText, html:not([data-theme="dark"]) .catalog_boxes .lightText *, html:not([data-theme="dark"]) .catalog_boxes .header .description, html:not([data-theme="dark"]) .catalog_student .footer .gameStatus span, html:not([data-theme="dark"]) .catalog_student .footer .gradeHolder span {
  color: #707070
  }
  html:not([data-theme="dark"]) .modern_module_row a:hover span, html:not([data-theme="dark"]) .modern_module_info .accordionLink .label, html:not([data-theme="dark"]) .app_boxes .footer a:hover, html:not([data-theme="dark"]) .catalog_courses .footer.textFooter a.teacher:hover span {
  color: #808080
  }
  html:not([data-theme="dark"]) .catalog_boxes .footer > .circleNum span, html:not([data-theme="dark"]) .catalog_boxes .footer > .blockNum span, html:not([data-theme="dark"]) .catalog_boxes .header .label.highlight, html:not([data-theme="dark"]) .catalog_boxes .footer .label.highlight {
  background-color: rgba(0,0,0,.4);
  color: #fff
  }
  html:not([data-theme="dark"]) .catalog_student .footer i.pageBlank span {
  color: #fff
  }

  /* Tiles icons */

  html:not([data-theme="dark"]) .modern_module_row i:after, html:not([data-theme="dark"]) .catalog_boxes > * > *:not(.quick_edit_icon) i:after {
    left: 0 !important;
  }
  html:not([data-theme="dark"]) .modern_module_row i.icon.inverted path {
  fill: #5e5f5f
  }
  html:not([data-theme="dark"]) .catalog_boxes.app_boxes .footer a:hover i {
  opacity: 0.8
  }

  /* Adjust row view */

  html:not([data-theme="dark"]) .modern_module_row + tr > td {
  background: linear-gradient(#f7f7f7, white 20%);
  }
  html:not([data-theme="dark"]) .catalog_class .modern_module_list > table {
  margin-bottom: 12px !important;
  }

  /* Tile progress background */

  html:not([data-theme="dark"]) .user_progress:not(.red) {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0
  }

  /* Dashboard widget - Headings */

  html:not([data-theme="dark"]) #centreColumn .dashboard_widgets .headingLinkWrap h2 {color: #222}

  /* Welcome banner background */

  .sliding_banner.welcome_banner .sliding_banner_inner {background-color: #313D6B}


  /* Checkout page side bar - Background */

  .catalog_class #leftColumn, html:not([dir=rtl]) .catalog_class #contentWrap:before, [dir=rtl] .catalog_class #contentWrap:after {
    background-color: #A4B2CD !important; background-color: var(--checkout-left-bar-bg) !important
  }


  /* Checkout page side bar - Text */

  .catalog_class #leftColumn > div, .catalog_class #leftColumn > div td, .catalog_class #leftColumn > div p, .catalog_class #leftColumn > div span, .catalog_class #leftColumn table a, #leftColumn #checkout_summary h2 {
  color: #333; color: var(--main-text-color)
  }
  .catalog_class #leftColumn .info li span, .catalog_class #leftColumn .info a:not(.normalLink), .catalog_class #leftColumn .label.box a, .catalog_class #leftColumn a.access_code {
  color: #707070; color: var(--dark-grey-text-color)
  }
  #leftColumn #checkout_summary hr, .catalog_class #leftColumn table td {
  border-color: #e0e0e0; border-color: var(--table-border-color)
  }

  /* Checkout page side bar - Icons */

  html:not([data-theme="dark"]) .catalog_class #leftColumn .infoHolder i:after, html:not([data-theme="dark"]) .catalog_class #leftColumn .infoHolder a:hover i:after, html:not([data-theme="dark"]) .checkout_order i:after {
  left: 0 !important
  }


  /* Checkout page side bar - Button bg */

  .catalog_class #leftColumn .center a.button, .catalog_class #leftColumn .center button {
  background-color: #313D6B
  }

    /* Checkout page side bar - Button text */

    .catalog_class #leftColumn .center a.button, .catalog_class #leftColumn .center button {
    color: #fff
    }

/* Profile_header - Background */

.profile_header .profile_background {
background-color: #313D6B
}
.profile_header .img_holder.header_user_logo .img {
background-color: #FFFFFF;
}

/* Catalog call to action - Background */

.catalog_item .profile_header .profile_info .alignR .link_button {
background-color: #FF6104
}

  /*Extra styles for High Contrast
  :root color overwrite
  #595959 and below passes WCAG AAA for normal text
  #787878 and above fails WCAG AA so went a bit below that*/

  :root {
  --light-grey-text-color: #606060;
  --lighter-grey-text-color: #707070;
  --main-border-color: #909090
  }

  ul.tabnav > li > a, ul.tabnav .dropDown a:hover, nav#leftColumn ul.tabnav a, ul.tabnav li a span .select_session .date, .panel_last_update span {
  color: #707070; color: var(--light-grey-text-color)
  }
  input[type="text"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], input[type="email"], input[type="date"], input[type="file"], textarea, select, div.selectWrap, input[type="checkbox"] + label:before, input[type="radio"] + label:before, input[type="file"]:after, a.multiSelect, input.jscolor {
  border-color: #909090; border-color: var(--main-border-color)
  }
  .highcharts-container text:not(.highcharts-axis-title) {
  fill: #707070 !important; fill: var(--light-grey-text-color) !important
  }
  .highcharts-container span[style*="color"] {
  color: #707070 !important; color: var(--light-grey-text-color) !important
  }