:root {
  --link-text-color: #313D6B;
  --link-hover-text-color: #313D6B;
  --subheading-color: #313D6B;
  --header-bg-color: #313D6B;
  --checkout-left-bar-bg: #A4B2CD;
  --left-bar-bg: #FFFFFF;
  --left-bar-border-color: #313D6B;
  --tile1-bg-color: #313D6B;
  --tile2-bg-color: #313D6B;
  --tile3-bg-color: #313D6B;
  --tile4-bg-color: #313D6B
}
[data-theme="dark"], [data-theme="dark"] .grey_background, .dark_editor {
  --link-text-color: #8692c0;
  --link-hover-text-color: #8692c0;
  --subheading-color: #fff;
  --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
}

/* navigation */

nav.mainNav ol > li > a, nav.mainNav .dropDown ul li a:hover, body.loginPage .loginOptions label, body.loginPage .loginOptions a {
  color: #878787
}

.portal header nav.mainNav li.loginHolder a, .portal header nav.mainNav li.loginHolder a:hover {
background-color: #FF6104
}

/* links */

a, .optionsRibbon ul li a:hover, footer a.language:hover, dt, .primaryColorText, a.secondaryColorText:hover {
  color: #313D6B; color: var(--link-text-color)
}

@media screen and (max-width: 559px) {
  .floating_text a.options_btn.inverted {
    color: #313D6B; color: var(--link-text-color)
  }
}

/* hover */

a:hover, h3, h5, .secondaryColorText {
  color: #313D6B; color: var(--link-hover-text-color)
}

/* buttons, popups */

.difSignIn, input[type="submit"], input[type="button"], button, #facebox .header, #contentBody .centreBtn, .optionsRibbon ul.inverted li a, .portal #contentHeader, .jconfirm .jconfirm-box div.title, header .mobileBar, .options_btn.inverted, #fullscreen_msg_holder .header, .link_button, ul.tabnav li a.selected:after {
  background: #313D6B
}

/* 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: #ff6104
}

/* Inverted options links */

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

/* footer and wrapper */

footer, .portal #wrapper {
  background: #313D6B
}

/* thin strip at top */

@media screen and (min-width: 980px) {
  header {
    border-top: 4px solid #313D6B
  }
}
body.loginPage {
  border-color: #313D6B !important
}

/* h2 */

body.portal #contentBody h2, #centreColumn h2, body.portal .customHome h2 {
  color: #313D6B
}

/* Message box */

nav.mainNav ol > li.portalCart a .newAlert {
  background-color: #ff6104
}

/* 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:not(.customLogo), h2, h3, h4, h5, h6, #centreColumn .centerHeading, .jconfirm .title, .mce-window-head .mce-title, .heading_font {
  font-family: 'RobotoLightNew', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale
}

/* Panels */

.colorBtn {
  background-color: #FF6104
}

.panel1 .clearBtn, .panel4 .clearBtn {
  border-color: #FF6104;
  color: #FF6104
}

  .panel1.stripe > div .block {
    border-top-color: #313D6B
  }
  .panel1.stripe > div .block:nth-child(4n+2) {
    border-top-color: #313D6B
  }
  .panel1.stripe > div .block:nth-child(4n+3) {
    border-top-color: #313D6B
  }
  .panel1.stripe > div .block:nth-child(4n+4) {
    border-top-color: #313D6B
  }

/* 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, .modern_module_list > table:nth-of-type(4n+1) .modern_module_row td {
  background-color: #313D6B; 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, .modern_module_list > table:nth-of-type(4n+2) .modern_module_row td {
  background-color: #313D6B; 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, .modern_module_list > table:nth-of-type(4n+3) .modern_module_row td {
  background-color: #313D6B; 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, .modern_module_list > table:nth-of-type(4n+4) .modern_module_row td {
  background-color: #313D6B; background-color: var(--tile4-bg-color)
}
[data-theme="dark"] .catalog_boxes *[class*='tile_color_'], [data-theme="dark"] .modern_module_list > table .modern_module_row td {
  background-color: var(--tile1-bg-color) !important
}


  /* 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 - 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
}

/* 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
  }

  /*To remove when dropping IE11*/
  ul.tabnav > li > a, ul.tabnav .dropDown a:hover, nav#leftColumn ul.tabnav a, ul.tabnav li a span, .catalog_class #centreColumn .catalog_item_tabs .tabnav a:not(.selected) h2, .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)
  }