:root {
  --link-text-color: #1f70c1;
  --link-hover-text-color: #03407d;
  --left-heading-color: #68b8ff;
  --subheading-color: #5E6671;
  --selected-row-bg: #DAF6F4;
  --selected-row-bg-lighter: #eeffff;
  --selected-row-border-darker: #c6e2e0;
  --header-bg-color: #1D68B3;
  --section-nav-bg-color: #e9e9e9;
  --section-nav-link-bg-color: #fff;
  --checkout-left-bar-bg: #1D68B3;
  --left-bar-bg: #3B3B46;
  --left-bar-border-color: #3B3B46;
  --tile1-bg-color: #0E4B90;
  --tile2-bg-color: #1663BA;
  --tile3-bg-color: #42424E;
  --tile4-bg-color: #5E6671;
  --link-color:#004ac2;
}

body.evo {
  --link-color:#004ac2;
  --placeholder-text: #0f0f0f;
  --light-grey-text-color:#0f0f0f;
  --input-border-color: #575757;
}

body.evo .tox-tinymce{
  border-color:#575757;
}


body.evo input:focus,
body.evo textarea:focus,
body.evo select:focus {
  outline: 2px solid #4F46E5 !important; /* Strong visible outline */
}

body.evo input[type="checkbox"]:focus + label:before,
body.evo input[type="checkbox"]:focus-visible + label:before {
    box-shadow: 0 0 0 2px #4F46E5;
}


[data-theme="dark"], [data-theme="dark"] .grey_background, .dark_editor {
  --link-text-color: #74c5ff;
  --link-hover-text-color: #5895d2;
  --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: #1f70c1; 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: #03407d; color: var(--link-hover-text-color)
}

/* Left nav heading */

#leftColumn h3 {
  color: #68b8ff; 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: #5E6671; color: var(--subheading-color)
}

/* Top bar hover */

.dropDownHolder > a:hover, .quickLinks > a:hover, .quickLinks .dropDownHolder > a:focus, .quickLinks > a:focus, .highlight {
  background: #317cc7
}

/* Top bar */

.difSignIn, 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: #1D68B3
}

/* Top tab selector */

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

/* Inverted options links */

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

/* 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)
}
  :root:not([data-theme="dark"]) {
    --section-nav-bg-color: #fff;
    --section-nav-link-bg-color: #e9e9e9
  }
  .section_nav_holder {
    background-color: #fff; background: var(--section-nav-bg-color);/*IE11*/
  }
  .section_nav a.module_link:not(.selected), .section_nav a.module_link.locked.hovering.selected {
    background-color: #e9e9e9; background: var(--section-nav-link-bg-color);/*IE11*/
  }

/* Section link navigation */

.sectionLink.inverted {
  background: #1D68B3
}

/* Footer */

footer {
  background: #2E2E33
}

/* Alert box */

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

/* Table row selection */

table tr.highlight td, .badgeOptions a.highlight, ul.quiz_blocks li.selected, .quiz_match_dropzone > div {
  background: #DAF6F4; background: var(--selected-row-bg)
}
table tr td.highlight {
  background: #eeffff; background: var(--selected-row-bg-lighter)
}
table tr.highlight td, ul.quiz_blocks li.selected, .quiz_match_dropzone > div {
  border-color: #c6e2e0; 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: #1D68B3 !important
}

/* Fonts */

h1, h2, h3, h4, h5, h6, #centreColumn .centerHeading, #courseToolbar .centerHeading, .quiz_points, .jconfirm .title, .mce-window-head .mce-title {
  font-family: 'Roboto Slab', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: 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: #3B3B46; background-color: var(--left-bar-bg);
  border-color: #3B3B46; border-color: var(--left-bar-border-color);
}
[dir=rtl] nav#leftColumn ol.hoverMainNav:before {
  border-left-color: #3B3B46; 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: #272732;
    border-color: #272732
  }
  nav#leftColumn ol.staticMainNav > li > ul li a.selected, nav#leftColumn ol.staticMainNav > li > ul li a:hover {
    border-color: #3B3B46
  }
}
@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: #3B3B46;
    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: #272732;
    border-color: #272732
  }
  .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: #3B3B46
  }
}

  /* Main nav - Icons  */

  nav .icon {
    fill: #fff
  }
  nav#leftColumn ol > li > a > span, nav#leftColumn ol > li > a:not(.normalLink), nav#leftColumn ol > li > a:not(.centreIcon):hover span, nav#leftColumn a:not(.centreIcon).highlight span, nav#leftColumn ol li a.selected span, nav#leftColumn ol li ul.subClasses li a, nav#leftColumn ol li ul.subClasses li a span, #user-menu ol > li > a span {
    color: #fff
  }
  nav#leftColumn ol > li > a i:after, nav#leftColumn i.ellipsis:after, nav#leftColumn ol > li > a:not(.centreIcon):hover i:after, nav#leftColumn > ol > li:hover > a:not(:hover) i:after, nav#leftColumn ol > li > a:not(.centreIcon).highlight i:after, nav#leftColumn ol > li > a.selected i:after, nav#leftColumn ol.thinMainNav > li > a i:after, nav#leftColumn ol.thinMainNav.hoverMainNav > li > a:hover i:after, .closeNavTrigger a i:after, .closeNavTrigger a:hover i:after, nav#leftColumn li > ul > li > a i:after, nav#leftColumn > ol > li:hover > a:not(:hover) i:after {
    left: -40px
  }

/* 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.selected{
  background: #1D68B3;
  background: linear-gradient(to right,  #1D68B3 0%, #317cc7 100%);
  border-color: #3B3B46; 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,  #1D68B3 0%, #317cc7 100%);
}
#user-menu .dropDown li > a:hover, #user-menu .dropDown li > a:hover span{
  color: #03407d; 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 #317cc7
  }
  [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 #317cc7;
  }



/* 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: #0E4B90; 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: #1663BA; 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: #42424E; 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: #5E6671; 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
}

/* Dashboard widget - Heading icons */

.centre_widgets .block:not([class*='full_width_widget']) .quick_edit_icon i:after,
.centre_widgets .block:not([class*='full_width_widget']) .quick_edit_icon:hover i:after {left: -40px}
.block.tile_width_widget .headingLinkWrap span {color: #fff}






/* Profile_header - Background */

.profile_header .profile_background {
  background-color: #2076ca
}
.profile_header .img_holder.header_user_logo .img {
  background-color: #3B3B46;
}

/* Catalog call to action - Background */

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

  /*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;
    --link-color:#004ac2;
  }

  /*To remove when dropping IE11*/
  .rightColumn ul li a.dueLink span:last-child, .rightColumn .event_date, .rightColumn .leaderboardSml.no-players li, .calendar-agenda-day .event-heading span, .remainingPts, .remainingPts span, ul.playerStatusSml li.level span {
    color: #707070; color: var(--light-grey-text-color)
  }
  ul.tabnav > li > a, ul.tabnav .dropDown a:hover, nav#leftColumn ul.tabnav a, ul.tabnav li a span .select_session .date {
    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)
  }

/* Link Colors */
body.evo a, .rightColumn a *,
body.evo .rightColumn .block .small_widget_links a, body.evo .rightColumn ul a:nth-child(n+1),
body.evo #centreColumn .catalog_boxes .block:not(.classes_widget) .footer a, body.evo .catalog_boxes>div.block .footer a
{
  color: var(--link-color);
}