@import url(../unbundled/unbundled_base.css);
@import url("fonts.css");
/*  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    ***************************************************************************
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    ---------------------------------------------------------------------------

    
        MAKE SURE YOU EDIT THE .LESS FILE,  NOT THE CSS FILE DIRECTLY.  REMEMBER TO
        RE-COMPILE THE LESS FILE.


    ___________________________________________________________________________
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    ***************************************************************************
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/****** START - Mixins for use in other styles ******/
.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #5e5e5e;
  -moz-box-shadow: 1px 1px 1px #5e5e5e;
  box-shadow: 1px 1px 1px #5e5e5e;
}
.siteFont {
  font-family: 'StandardLifeBold', arial, helvetica, sans-serif;
}
/****** END - Mixins for use in other styles ******/
body {
  color: #000000;
  font-size: 0.75em;
  background: #ffffff url("../origin/images/body_background.png") repeat-x;
}
h1,
h2,
h3 {
  font-family: 'StandardLifeBold', arial, helvetica, sans-serif;
  font-family: helveticaNeueRoman, arial, sans-serif;
}
h1 {
  font-size: 1.875em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.125em;
}
a.linkWithIcon,
a {
  color: #007bc3;
  text-decoration: none;
  font-weight: bold;
}
a.linkWithIcon:hover,
a:hover,
a.linkWithIcon:focus,
a:focus,
a.linkWithIcon:active,
a:active {
  color: #0a2f73;
}
a.linkWithIcon i {
  color: #ff8a00;
  margin-right: 7px;
}
a.secondary,
button,
a.previewLink {
  background-color: #e0edfe;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#e0edfe));
  /* Konqueror */
  background-image: -moz-linear-gradient(#ffffff, #e0edfe);
  /* FF 3.6+ */
  background-image: -ms-linear-gradient(#ffffff, #e0edfe);
  /* IE10 */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0edfe));
  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-linear-gradient(#ffffff, #e0edfe);
  /* Safari 5.1+, Chrome 10+ */
  background-image: -o-linear-gradient(#ffffff, #e0edfe);
  /* Opera 11.10 */
  background-image: -ms-linear-gradient(top, #ffffff 0%, #e0edfe 100%);
  /* IE10+ */
  background-image: linear-gradient(#ffffff, #e0edfe);
  /* the standard */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #5e5e5e;
  -moz-box-shadow: 1px 1px 1px #5e5e5e;
  box-shadow: 1px 1px 1px #5e5e5e;
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border-color: #aecaea;
  color: #007bc3;
}
a.primary,
button.primary {
  background-color: #007bc3;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#0054a4), to(#007bc3));
  /* Konqueror */
  background-image: -moz-linear-gradient(#0054a4, #007bc3);
  /* FF 3.6+ */
  background-image: -ms-linear-gradient(#0054a4, #007bc3);
  /* IE10 */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0054a4), color-stop(100%, #007bc3));
  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-linear-gradient(#0054a4, #007bc3);
  /* Safari 5.1+, Chrome 10+ */
  background-image: -o-linear-gradient(#0054a4, #007bc3);
  /* Opera 11.10 */
  background-image: -ms-linear-gradient(top, #0054a4 0%, #007bc3 100%);
  /* IE10+ */
  background-image: linear-gradient(#0054a4, #007bc3);
  /* the standard */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #5e5e5e;
  -moz-box-shadow: 1px 1px 1px #5e5e5e;
  box-shadow: 1px 1px 1px #5e5e5e;
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border-color: #0067b3;
  color: #ffffff;
}
a.secondary.disabled,
button.disabled,
a.secondary.disabled:hover,
button.disabled:hover,
a.secondary.disabled:focus,
button.disabled:focus {
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  -webkit-opacity: 0.4;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  filter: alpha(opacity=40);
  cursor: not-allowed;
}
a.secondary:hover,
button:hover,
a.previewLink:hover,
a.secondary:focus,
button:focus,
a.previewLink:focus,
a.secondary:active,
button:active,
a.previewLink:active {
  background: #e0edfe;
  border-color: #aecaea;
}
a.primary:hover,
button.primary:hover,
a.primary:focus,
button.primary:focus,
a.primary:active,
button.primary:active {
  background: #0054a4;
  border-color: #0067b3;
}
a.primary i,
a.secondary i,
button i,
a.previewLink i {
  position: relative;
  top: 2px;
  left: 7px;
  padding-right: 5px;
  color: #ff8a00;
  font-size: 1.5em;
  margin-top: -4px;
}
div.employeeGlobal ul li a {
  margin-left: 10px;
  text-decoration: none;
}
div.footerWrap a {
  color: #000000;
}
div.employeeGlobal .subNav {
  position: absolute;
  top: 35px;
  background: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
div.employeeGlobal .subNav a {
  margin-left: 0;
}
div.employeeGlobal .subNav a span {
  color: #007bc3;
  padding: 10px;
}
div.employeeGlobal .subNav a span:hover {
  color: #0a2f73;
}
.employeePrimary li {
  height: 27px;
  padding: 10px 10px 0;
  position: relative;
  top: -10px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.employeePrimary li a {
  color: #ffffff;
}
.employeePrimary li.isSelected {
  background: #ffffff;
}
.employeePrimary li.isSelected a {
  color: #0a2f73;
}
.employeePrimary li:hover,
.employeePrimary li:focus,
.employeePrimary li:active {
  background: #e0edfe;
}
.employeePrimary li:hover a,
.employeePrimary li:focus a,
.employeePrimary li:active a {
  color: #ff8a00;
}
.LastLoginPanel {
  position: absolute;
  top: 118px;
  right: 164px;
  color: #ffffff;
}
.typeD,
.typeA {
  border: 1px solid #aecaea;
  position: relative;
  overflow: hidden;
}
.typeD,
.typeA,
.typeE {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.typeD {
  background: #ffffff;
}
/** dijitTitlePane stuff refers to resource panels that are set up as a dropdown  **/
.typeD .dijitTitlePaneTitle,
.typeD .dijitTitlePaneContentOuter {
  border: none;
  padding: 0;
  margin-left: -13px;
}
.dijitTitlePane {
  margin-bottom: none;
  background: #e0edfe;
}
.dijitTitlePane .dijitArrowNode {
  display: none;
}
.dijitTitlePane span.dijitTitlePaneTextNode {
  margin-left: 14px;
}
.typeA {
  background: #e0edfe;
}
.typeD .head,
.typeD .dijitTitlePane,
.typeD .dijitTitlePaneTitleFocus,
.typeD .dijitTitlePaneTitleHover {
  background: #e0edfe;
  padding: 0;
  border-bottom: 1px dashed #aecaea;
}
.typeD .head.typeDWithIconHead {
  padding-left: 20px;
  cursor: pointer;
}
.typeA .head {
  background: #ffffff;
  padding: 0;
  border-bottom: 1px dashed #aecaea;
}
/* required to avoid an animation glitch when expanding a collapsible td */
.typeD.collapsible .body {
  padding: 0;
}
.typeD.collapsible .BasePanel {
  padding: 10px;
}
.typeD.collapsible .head .fa,
.EnrolmentFormPanelTable tbody.productGroup .fa,
.typeD .dijitTitlePaneTitle .fa,
.dijitAccordionTitle .fa {
  color: #ff8a00;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.typeD.collapsible .head .fa,
.typeD .dijitTitlePaneTitle .fa {
  position: absolute;
  left: 5px;
  top: 15px;
}
.EnrolmentFormPanelTable tbody.productGroup .groupHeaderText i.closedState,
.dijitAccordionTitle i.openState {
  position: relative;
  left: -8px;
}
.typeD .dijitOpen.dijitTitlePaneTitle .fa {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.typeD.collapsible .head .fa.openState,
.EnrolmentFormPanelTable .groupHeaderText .fa.openState {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
}
.typeD.collapsible .head i.fa.opened.closedState,
.EnrolmentFormPanelTable .groupHeaderText i.fa.opened.closedState {
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.typeD.collapsible .head i.fa.opened.openState,
.EnrolmentFormPanelTable .groupHeaderText i.fa.opened.openState {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}
.dijitAccordionTitle i.fa.closedState {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.dijitAccordionTitle i.fa.openState {
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}
.dijitAccordionTitle.dijitAccordionTitleSelected i.fa.closedState {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
}
.dijitAccordionTitle.dijitAccordionTitleSelected i.fa.openState {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}
.typeD .head h2,
.typeA .head h2,
.typeD .dijitTitlePane {
  padding: 10px 0 12px 14px;
  margin: 0;
}
.typeD .head h2,
.typeA .head h2,
.typeD .dijitTitlePaneTitleFocus {
  font-size: 1.8em ;
  color: #0a2f73;
  font-family: 'StandardLifeBold', arial, helvetica, sans-serif;
  font-family: helveticaNeueRoman, arial, sans-serif;
}
/* for merging boxes eg typeD or typeA */
.merge {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
a.secondary.moreInfoButton {
  color: #ff8a00;
  -webkit-box-shadow: 0px 0px 0px;
  -moz-box-shadow: 0px 0px 0px;
  box-shadow: 0px 0px 0px;
}
.publicPageHeader {
  height: 105px;
}
div.header {
  height: 141px;
  margin-bottom: 50px;
}
.LogoPanel .publicPageHeader a img {
  position: relative;
  top: 34px;
}
.publicPageHeader {
  background: url("../origin/images/sl_pattern.gif") no-repeat right top;
  margin-top: 5px;
}
table,
td,
th {
  border: 1px solid #aecaea;
}
th,
td {
  padding: 2px 10px;
}
th {
  color: #0a2f73;
  font-weight: bold;
  background: #e0edfe;
  padding: 15px;
}
/* =============================================================================
   START - enrolment form
   ========================================================================== */
table.EnrolmentFormPanelTable thead th {
  background: #0a2f73;
  text-align: center;
  border-bottom: 1px solid #0a2f73;
  border-top: 1px solid #0a2f73;
  color: #ffffff;
  overflow: hidden;
}
table.EnrolmentFormPanelTable thead th.BenefitAndStrapline {
  border-left: 1px solid #0a2f73;
}
table.EnrolmentFormPanelTable thead th.last {
  border-right: 1px solid #0a2f73;
}
table.EnrolmentFormPanelTable th.BenefitAndStrapline {
  width: 275px;
}
table.EnrolmentFormPanelTable th.actions {
  width: 70px;
}
table.EnrolmentFormPanelTable h2 {
  font-size: 1.2em;
}
table.EnrolmentFormPanelTable table {
  background: #ffffff;
}
.EnrolmentFormPanelTable tbody.productGroup td.hidden {
  display: none;
}
.EnrolmentFormPanelTable div.selectButton {
  float: right;
  margin-right: 30px;
  margin-bottom: 15px;
}
/*further fix for enrolment form. Remove 2 for the border then 2* the margin.   */
.EnrolmentFormPanelTable .formSection,
.EnrolmentFormPanelTable .formSection table.options,
.EnrolmentFormPanelTable div.firstColumn.last.col-24 {
  width: 688px;
}
/* the pension selection wizard is split  66/33.  Move the buttons over to sit below the main 66% section rather 
    than sitting against the right edge of the page */
.BenefitSelectionWizardPanel .wizardButtons {
  width: 66%;
}
/*multi option sets are lists of radios and they look better with the label on the right rather than on the left as all other labels are. */
td.option label {
  float: none;
}
/* =============================================================================
   END - enrolment form
   ========================================================================== */
/* =============================================================================
   START - tax friendly icons.  
   * The icons in use are set up using javascript, making use of the fontawesome font
   * so we just want to get rid of the base imagery.Requires use of taxEfficientIcons.js
   ========================================================================== */
td.taxNiFriendly,
td.taxFriendly,
td.TaxFriendly,
td.niFriendly,
td.notTaxFriendly {
  background: none;
}
div.taxIcons {
  font-size: larger;
}
div.taxIcons i {
  display: block;
  margin-bottom: 5px;
}
div.taxIcons i span {
  display: inline;
  font-family: Arial, sans-serif;
  font-size: smaller;
}
.expandoTableRowItem,
.slidingPanelRowData {
  background: #f6f6f6;
}
/* =============================================================================
   END - tax friendly icons.  
   ========================================================================== */
/* =============================================================================
   START - Wizards.  Note: wizard steps.  Requires use of wizardSteps.js
   * All wizards have an outer div with a class of stepTotalx where x is the number of steps
   ========================================================================== */
div[class*="stepTotal"] {
  padding-top: 10px;
  /* These classes are added by wizardSteps.js based on the number of steps in the wizard.
	 * Just made slightly wider than expected % to account for margins
	 */
}
div[class*="stepTotal"] .wizardStep ul {
  padding: 0;
  float: left;
  clear: both;
  width: 100%;
}
div[class*="stepTotal"] .wizardStep ul li:first-of-type .wizardStepTop {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
div[class*="stepTotal"] .wizardStep ul li:first-of-type .wizardStepBottom {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 5px;
}
div[class*="stepTotal"] .wizardStep ul li:last-of-type .wizardStepTop {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
div[class*="stepTotal"] .wizardStep ul li:last-of-type .wizardStepBottom {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop,
div[class*="stepTotal"] .wizardStep ul li .wizardStepBottom {
  height: 37px;
  clear: both;
  display: block;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop.stepIncomplete {
  background: transparent;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop.stepActive {
  background: #0061a1;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop.stepComplete {
  background: #ff0000;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepBottom.stepIncomplete {
  background: transparent;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepBottom.stepActive {
  background: #0061a1;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepBottom.stepComplete {
  background: #ff0000;
}
div[class*="stepTotal"] .wizardStep ul li span.stepContent {
  position: relative;
  top: 46px;
  font-weight: bold;
}
div[class*="stepTotal"] .wizardStep ul li span.stepActive {
  color: #ffffff;
}
div[class*="stepTotal"] .wizardStep ul li span.stepIncomplete {
  color: #0061a1;
}
div[class*="stepTotal"] .wizardStep ul li span.stepComplete {
  color: #ffffff;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon {
  background: white;
  position: relative;
  top: -12px;
  border-radius: 20px;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon.stepActive {
  color: #ff0000;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon.stepIncomplete {
  color: transparent;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon.stepComplete {
  color: #ff0000;
}
div[class*="stepTotal"] .stepOf1 {
  width: 98%;
}
div[class*="stepTotal"] .stepOf2 {
  width: 49%;
}
div[class*="stepTotal"] .stepOf3 {
  width: 32%;
}
div[class*="stepTotal"] .stepOf4 {
  width: 24%;
}
div[class*="stepTotal"] .stepOf5 {
  width: 19%;
}
div[class*="stepTotal"] .stepOf6 {
  width: 15%;
}
div[class*="stepTotal"] .stepOf7 {
  width: 13%;
}
div[class*="stepTotal"] .stepOf8 {
  width: 11%;
}
div[class*="stepTotal"] .stepOf9 {
  width: 10%;
}
div[class*="stepTotal"] .stepOf10 {
  width: 9%;
}
.wizardButtons .AjaxWizardButtonBar {
  float: left;
  position: relative;
  top: 10px;
  margin-bottom: 25px;
  clear: both;
}
.ForgottenPasswordWizard .stepXofY,
.LoginWizard .stepXofY,
.ForgottenPasswordWizard .wizardHeader,
.LoginWizard .wizardHeader {
  display: block;
}
/* =============================================================================
   END - wizards
   ========================================================================== */
/* =============================================================================
   START - Login page
   ========================================================================== */
.loginNavigation li span i {
  margin-right: 10px;
}
ul.loginNavigation li a {
  background: none;
  border: none;
  -webkit-box-shadow: 0px 0px 0px #5e5e5e;
  -moz-box-shadow: 0px 0px 0px #5e5e5e;
  box-shadow: 0px 0px 0px #5e5e5e;
}
.typeA.typeLoginNav {
  overflow: hidden;
  background: #fff;
  margin-top: -10px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border-top: 1px dashed #aecaea;
}
.loginNavigation i {
  color: #ff8a00;
  font-size: larger;
}
.login .publicPageHeader {
  margin-top: 5px;
}
.login .content {
  margin-top: 30px;
}
.login a.secondary:hover,
.login a.secondary:focus,
.login a.secondary:active {
  background: #fff;
  color: #0a2f73;
}
.aiLoginImagePanel {
  background: url("../origin/images/bg_login_message.png") no-repeat;
  height: 291px;
  padding: 20px;
  color: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 30px;
}
.aiLoginImagePanel div {
  width: 300px;
}
.aiLoginImagePanel h1 {
  font: bold normal 2.5em / normal;
  font-family: 'StandardLifeBold', arial, helvetica, sans-serif;
  font-family: helveticaNeueRoman, arial, sans-serif;
  padding-bottom: 10px;
}
/* =============================================================================
   END - Login page
   ========================================================================== */
/* =============================================================================
   START - Home page
   ========================================================================== */
.SubmissionTimerPanelBoxHeaderless {
  background: url("../origin/images/timer_tiny.png") no-repeat #e0edfe;
}
.SubmissionTimerPanel {
  margin-left: 45px;
}
.SubmissionTimerPanel .message {
  color: #0a2f73;
  font: bold normal;
  font-family: 'StandardLifeBold', arial, helvetica, sans-serif;
  font-family: helveticaNeueRoman, arial, sans-serif;
}
.SubmissionTimerPanel .message h2 {
  margin-bottom: 0;
  font-size: 1.8em;
}
.callToActionItems h3 {
  color: #ff8a00;
  font-size: 2em;
}
/* =============================================================================
   END - Home page
   ========================================================================== */
/* =============================================================================
   START - Form component tidyup
   ========================================================================== */
.tundra .dijitSelect,
.tundra .dijitTextBox,
.tundra table.dijit .dijitButtonText {
  border-color: #aecaea !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 4px;
}
.tundra .dijitSelect .dijitButtonContents {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
.tundra .dijit .dijitArrowButton {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 5px;
}
.tundra .dijit.datePicker .dijitArrowButton {
  margin: -4px -4px -4px 4px;
  padding-bottom: 8px;
}
.tundra .dijit.datePicker .dijitArrowButton .dijitArrowButtonInner {
  position: relative;
  top: 4px;
}
.tundra td.dijitReset.dijitMenuItemLabel {
  padding: 3px;
}
table.dijitSelect {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  width: auto;
}
/* get input fields back in line with their labels */
.SelectionPanel label + table.dijit,
.SelectionPanel label + div.dijit {
  margin-top: -4px;
}
.dijitButtonContents {
  min-width: 167px;
}
/* =============================================================================
   END - Form component tidyup
   ========================================================================== */
/* =============================================================================
   START - Colours for icons added by implementer in content
   ========================================================================== */
.iconHighlight {
  color: #ff8a00;
}
.iconMid {
  color: #007bc3;
}
.iconDark {
  color: #0a2f73;
}
/* =============================================================================
   END - Colours for icons added by implementer in content
   ========================================================================== */
/* =============================================================================
   START - important info boxes.  These are typeD's with content marked up in a 
   * specific way.  An example is the important info on the goal based planner page
   ========================================================================== */
.importantInfo .importantInfoIcon {
  float: left;
  clear: none;
  width: 30px;
}
.importantInfo .importantInfoMain {
  margin-left: 30px;
}
/* =============================================================================
   END - important info boxes. 
   ========================================================================== */
/* =============================================================================
   START - error message boxes on forms
   ========================================================================== */
div.error div.errorSummaryPanel {
  border-color: #007bc3;
}
.errorSummaryPanel li,
.feedbackPanel li {
  list-style: none;
  margin-left: -10px;
}
.errorSummaryPanel li i.fa,
.feedbackPanel li i.fa {
  font-size: larger;
  color: #ff8a00;
}
.feedbackPanel span.feedbackPanelERROR {
  color: #007bc3;
}
.errorSummaryPanel .errorSummaryText {
  background: none;
}
.errorSummaryPanel a {
  color: #007bc3;
  text-decoration: none;
}
.errorSummaryPanel a:hover,
.errorSummaryPanel a:focus,
.errorSummaryPanel a:active {
  color: #0a2f73;
}
.errorSummaryPanel {
  clear: both;
}
/* =============================================================================
   END - error message boxes on forms 
   ========================================================================== */
.footer .typeD {
  border: none;
}
.footer .typeD .head {
  background: none;
  font-size: smaller;
}
.footer .typeD .head h2 {
  color: #000000;
  font-size: small;
  padding-left: 5px;
}
.footer .typeD .body p {
  font-size: smaller;
}
.footer .typeD.collapsible .head .fa {
  font-size: small;
  top: 12px;
}
/* =============================================================================
   START - component specific fixes
   ========================================================================== */
/** the fund selection panel has a header built in to it.  Remove it so we can surround it by a box with heading **/
.FundSelectionPanel h2 {
  display: none;
}
/** START - there are a lot of sections with duplicate legends, sort them out here. **/
.PensionContributionChoicePanel legend,
.SignificantPersonDetailsPanel legend,
.PensionContributionChoicePanel .legend,
.SignificantPersonDetailsPanel .legend {
  display: none;
}
.PensionContributionChoicePanel .pensionChoicepensionType .legend,
.SignificantPersonDetailsPanel .pensionChoicepensionType .legend {
  display: inline;
}
.PensionContributionChoicePanel .significantPersongender legend,
.SignificantPersonDetailsPanel .significantPersongender legend {
  display: inline;
}
.EditEmployeeTaxCodePanel legend,
.MyDetailsPanel legend,
.EnrolmentHistoryPanel legend,
.PensionSelectionPanel legend {
  display: none;
}
/** END - there are a lot of sections with duplicate legends, sort them out here. **/
/** the finish page after submitting a form just needed a slightly larger heading */
.EnrolmentFinishPanel .finishMessageContainer {
  font-size: 1.5em;
  padding-bottom: 10px;
}
/** dialog was too wide on taxmodeller and was causing scroll bars, lifeEventPanel too */
.TaxModellerPanelDialog .TaxModellerPanel span.disclaimer,
.LifeEventPanel .outerContainer .selectLifeEvent p {
  float: left;
  clear: both;
  width: 950px;
}
/** select life event panel li's were styled wrongly */
.LifeEventPanel ul {
  margin-top: 20px;
  list-style: none;
}
.LifeEventPanel ul li {
  clear: both;
}
.LifeEventPanel ul li h3 {
  margin-top: 15px;
}
/** jack requested that the benifithistory search functionality be removed **/
.EnrolmentHistoryPanel .benefitHistoryFieldSet {
  display: none;
}
/** liflens terms and conditions have hard coded number values and then an <ol> too.  Get rid of the <ol> */
ol.lifelenstermsandconditions li {
  list-style-type: none;
  font-weight: bold;
  font-size: 1.125em;
}
ol.lifelenstermsandconditions li.c1 ol li {
  font-weight: lighter;
  font-size: 0.9em;
}
/**with a header included in the dialogs you instantly have to scroll to get to content.  Just remove the header. */
.dijitDialog div.header {
  display: none;
}
/**the label for the input field has a currency symbol in it so looks odd if the field is too far away. */
.ChildcareVoucherSelectionPanel div label {
  width: 130px;
}
.noDependantsEligibleText {
  color: #007bc3;
}
/**provide the ability to split long chunks of content into columns (chrome, firefox, ie10+) */
.columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 5em;
  -webkit-column-rule-style: dashed;
  -webkit-column-rule-color: #dddddd;
  -webkit-column-rule-width: 1px;
  -moz-column-count: 3;
  -moz-column-gap: 5em;
  -moz-column-rule-style: dashed;
  -moz-column-rule-color: #dddddd;
  -moz-column-rule-width: 1px;
  column-count: 3;
  column-gap: 5em;
  column-rule-style: dashed;
  column-rule-color: #dddddd;
  column-rule-width: 1px;
}
/**label to be wider on terms and conditions page of first login */
div.siteTAndCCheck label {
  width: 250px;
}
/**request Wed 26/03/2014 14:00 to make t&c content scroll rather than the page*/
.LoginWizard .SiteTAndCStep .wizardView {
  height: 800px;
  overflow-y: scroll;
}
/** some wizard pages had italics, some not, as a result of inconsistent addition of this class */
p.wicketExtensionsWizardHeaderSummary {
  font-style: normal;
}
.ForgottenPasswordAuthenticationStep div.formComponent label {
  width: 350px;
}
.ForgottenPasswordAuthenticationStep div.formComponent label .text {
  font-weight: bold;
}
/** request to move pension calculate button to the right of input field rather than below */
.percentContributionsFieldSet .calculateContainer a.calculateButton {
  position: relative;
  top: -32px;
  left: 360px;
}
/**merge enrolment timer and call to action */
.mergeTimerAndCTA {
  z-index: 2;
  top: 16px;
  margin-top: -16px;
  border-bottom: 1px dashed #aecaea;
}
/** rather than destroy empty typeD's will just hide them with this.  Done as a result of ajax issues if we destroy a box later populated by ajax  */
.hide {
  display: none;
}
/* E89658: Employee My Details (Configurable) Panel - Added to reduce the width of TD's containing labels. The additional identifier labelTable must be added to the component for this to take effect */
.labelTable td.labelContainer {
  width: 180px;
  font-weight: bold;
}
/*E00000 - on the enrolment form the general details panel and totals have a blank thead, just remove as we've been doing on an individual site basis anyway */
.GeneralDetailPanel thead.generalDetailsPanel,
.EnrolmentTotalsPanel thead.enrolmentTotalsPanel {
  display: none;
}
/*E90126 - Expando FAQ's fix */
.MoreInfoPanelDialog {
  height: auto;
  padding-right: 20px;
  width: 720px !important;
}
.MoreInfoPanelDialog.modal .dijitDialogPaneContent {
  width: 100% !important;
}
.dijitExpando h2 {
  font-size: 1.1em;
}
.tundra .dijitDialogPaneContent {
  border-top: none;
}
div.MoreInfoPanel .dijitTabContainer,
div.MoreInfoPanel .dijitTabPaneWrapper,
div.MoreInfoPanel .dijitTabPane {
  overflow-x: hidden;
}
/*E91830 - styling for External Selection Panel*/
.ExternalSelectionLinkPanel {
  margin-bottom: 10px;
}
.ExternalSelectionLinkPanel div > span,
.ExternalSelectionCancelPanel div > span {
  display: inline-block;
  width: 150px;
  text-align: right;
  Margin-right: 15px;
  vertical-align: middle;
}
.ExternalSelectionCancelPanel div.selectButton {
  display: inline;
  float: none;
}
/*NF91717 - style for OSL component*/
.viewOtherStandardLifePlansRetirementPlannerHeader {
  background-color: #e0edfe;
  color: #0a2f73;
  /*margin-top:10px;
    margin: 0 -10px;*/
}
.viewOtherStandardLifePlansRetirementPlannerHeader span {
  /*margin-left: 10px;*/
  padding: 5px 0;
  font-size: 16px;
  font-weight: bold;
  display: block;
}
.viewOtherStandardLifePlansRetirementPlannerImage a {
  background: url("../origin/images/retirementplannerlink.png") no-repeat right top;
  display: block;
  height: 156px;
  text-indent: -9999px;
  width: 288px;
}
.viewOtherStandardLifePlansRetirementPlannerMessage {
  padding: 10px 0;
}
.viewOtherStandardLifePlansLink {
  padding-bottom: 10px;
}
/* =============================================================================
   Brand colours
   ========================================================================== */
/* =============================================================================
   START - 91625 - updates to origin skin
   ========================================================================== */
/* item 1 - space the buttons on the self select life events  */
.selectLifeEvent button.primary,
.selectLifeEvent button.secondary {
  margin-top: 5px;
}
.EnrolmentFormPanelTable {
  /* item 4 - make totals row on enrolment form more prominent */
  /* item 5 - make benefit names bold on enrolment form */
}
.EnrolmentFormPanelTable thead th {
  padding-left: 8px;
  padding-right: 8px;
}
.EnrolmentFormPanelTable td.BenefitAndStrapline {
  padding-top: 5px;
}
.EnrolmentFormPanelTable .expandoTableRowItem > td {
  border-top: 10px solid;
  border-bottom: 10px solid;
}
.EnrolmentFormPanelTable .columnTotalHeaderClass {
  font-weight: bold;
  font-size: larger;
  /* item 11 - align totals to the right */
}
.EnrolmentFormPanelTable .columnTotalHeaderClass .currency {
  text-align: right;
}
.EnrolmentFormPanelTable span.BenefitAndStrapline {
  font-weight: bold;
}
div.employeeGlobal .subNav a span {
  padding: 0 10px;
}
.typeD.collapsible .head .fa,
.typeD .dijitTitlePaneTitle .fa {
  top: 5px;
}
.typeD .head h2,
.typeA .head h2,
.typeD .dijitTitlePane {
  padding: 5px 0 7px 14px;
}
.typeD .head h2,
.typeA .head h2,
.typeD .dijitTitlePaneTitleFocus {
  font-size: 1.4em ;
}
table.EnrolmentFormPanelTable th.BenefitAndStrapline {
  width: 230px;
}
div[class*="stepTotal"] .wizardStep ul li {
  height: 25px;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop,
div[class*="stepTotal"] .wizardStep ul li .wizardStepBottom {
  height: 26px;
}
div[class*="stepTotal"] .wizardStep ul li span.stepContent {
  top: 36px;
  font-size: large;
}
/****** START - Mixins for use in other styles ******/
.button {
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.siteFont {
  font-family: helveticaNeueRoman, arial, sans-serif;
}
h1,
h2,
h3,
.slb {
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
}
.sl {
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
/****** END - Mixins for use in other styles ******/
.employeeLogout a {
  background: none;
}
.employeeLogout a span {
  background: none;
}
/* =============================================================================
   Brand colours
   ========================================================================== */
/* =============================================================================
   loader - Spinner
   ========================================================================== */
div#loadIndicator,
div#loadIndicator.ajax {
  background: none;
  left: 10px;
  position: absolute;
  top: 10px;
  z-index: 900;
  border: 4px solid transparent;
  border-radius: 50%;
  border-top: 4px solid #0061a1;
  border-right: 4px solid #0061a1;
  border-bottom: 4px solid #0061a1;
  width: 25px;
  height: 25px;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 0.5s linear infinite;
}
/* =============================================================================
   Enrolment Steps
   ========================================================================== */
div[class*="stepTotal"] .stepOf2 {
  width: 49.3%;
}
div[class*="stepTotal"] .wizardStep ul li {
  margin-right: 1%;
}
div[class*="stepTotal"] .wizardStep ul li:last-of-type {
  margin-right: 0px;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon.stepActive,
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon {
  color: #0061a1;
  background: none;
  top: -20px;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 2;
}
div[class*="stepTotal"] .wizardStep ul li:first-of-type .wizardStepTop {
  webkit-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom: 4px solid #0061a1;
}
div[class*="stepTotal"] .wizardStep ul li:first-of-type .wizardStepBottom {
  webkit-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
div[class*="stepTotal"] .wizardStep ul li:last-of-type .wizardStepTop {
  webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-bottom: none;
  border-left: 2px solid #ffffff;
  /*.aiTrans;*/
}
div[class*="stepTotal"] .wizardStep ul li:last-of-type .wizardStepBottom {
  webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top: none;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  /*.aiTrans;*/
}
div[class*="stepTotal"] .wizardStep ul li.active .wizardStepTop {
  webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-bottom: none;
  border-left: 2px solid #ffffff;
  background: #ffffff;
  -webkit-animation-name: whitePulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}
div[class*="stepTotal"] .wizardStep ul li.active .wizardStepBottom {
  webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top: none;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  background: #ffffff;
  -webkit-animation-name: whitePulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop.stepIncomplete {
  webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top: 2px solid #0061a1;
  border-right: 2px solid #0061a1;
  border-bottom: none;
  border-left: 2px solid #0061a1;
  /*.aiTrans;*/
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepBottom.stepIncomplete {
  webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top: none;
  border-right: 2px solid #0061a1;
  border-bottom: 2px solid #0061a1;
  border-left: 2px solid #0061a1;
  /*.aiTrans;*/
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepTop.stepComplete {
  webkit-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom: 4px solid #ff0000;
}
div[class*="stepTotal"] .wizardStep ul li .wizardStepIcon.stepComplete {
  display: none;
}
.fa-circle-o:before {
  content: "\f0d7";
  font-size: 2em;
}
.myEnrolment .wizardStep {
  display: none;
}
/* =============================================================================
   Buttons
   ========================================================================== */
a.primary,
button.primary,
a.secondary,
button,
a.previewLink,
.LifeEventPanelDialog button.cancel,
.LifeEventPanelDialog .cancelConfirm a.secondary,
.LifeEventPanelDialog .cancelConfirm button.primary,
.changeButton {
  background: #0061a1;
  /*background-image: linear-gradient(@White, @Red);
  /* Safari 4+, Chrome 2+ */
  /*background-image: -webkit-linear-gradient(@White, @Red);
  /* Safari 5.1+, Chrome 10+ */
  /*background-image: -o-linear-gradient(@White, @Red);
    /*background-repeat: repeat-x;*/
  /*border-color: @Red;
    border:2px solid;*/
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
a.primary i,
button.primary i,
a.secondary i,
button i,
a.previewLink i,
.LifeEventPanelDialog button.cancel i,
.LifeEventPanelDialog .cancelConfirm a.secondary i,
.LifeEventPanelDialog .cancelConfirm button.primary i,
.changeButton i {
  color: #ffcc00;
}
a.primary:hover,
button.primary:hover,
a.secondary:hover,
button:hover,
a.previewLink:hover,
.LifeEventPanelDialog button.cancel:hover,
.LifeEventPanelDialog .cancelConfirm a.secondary:hover,
.LifeEventPanelDialog .cancelConfirm button.primary:hover,
.changeButton:hover,
a.primary:active,
button.primary:active,
a.secondary:active,
button:active,
a.previewLink:active,
.LifeEventPanelDialog button.cancel:active,
.LifeEventPanelDialog .cancelConfirm a.secondary:active,
.LifeEventPanelDialog .cancelConfirm button.primary:active,
.changeButton:active,
a.primary:focus,
button.primary:focus,
a.secondary:focus,
button:focus,
a.previewLink:focus,
.LifeEventPanelDialog button.cancel:focus,
.LifeEventPanelDialog .cancelConfirm a.secondary:focus,
.LifeEventPanelDialog .cancelConfirm button.primary:focus,
.changeButton:focus {
  background-color: #11306e;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
  /*i {
	    		color:@Yellow;
	    		transition: background-color 0.3s ease-in, color 0.3s ease-in;
	    	}*/
}
button i {
  top: 0px;
}
a {
  color: #0061a1;
  text-decoration: underline;
  font-weight: bold;
}
a i {
  color: #0061a1;
}
a:hover {
  color: #5cb6e2;
  text-decoration: underline;
}
a.linkWithIcon {
  color: #0061a1;
  text-decoration: none;
  font-weight: bold;
}
a.linkWithIcon i {
  color: #0061a1;
}
a.linkWithIcon:hover {
  color: #5cb6e2;
}
a.secondary.moreInfoButton {
  color: #0061a1;
}
a.secondary.moreInfoButton .fa {
  color: #0061a1;
}
a.secondary.moreInfoButton:hover {
  color: #11306e;
}
/**** Snag Fix for moreinfo buttons ****/
a.secondary.dojoButton.moreInfoButton:hover {
  color: #ffffff;
  background: #11306e;
}
.disabled {
  display: none;
}
/*buttons in modals look better smaller */
.AbstractRowListPanel a.secondary.dojoButton,
.AbstractRowListPanel a.secondary,
.AbstractRowListPanel button {
  padding: 8px 8px;
}
.MyBenefitsPanel .wizardButtons button {
  padding: 10px 20px;
  font-size: 140%;
}
.wizardButtons {
  margin-top: 10px;
}
.wizardButtons button.cancel {
  display: none;
}
.wizardButtons button.previous,
.wizardButtons button.cancel,
.wizardButtons button.saveForLater {
  margin-right: 5px;
}
.wizardButtons button.finish {
  margin-right: 5px;
}
.wizardButtons button.finish i {
  display: none;
}
.wizardButtons button.finish span:after {
  content: '\f11e';
  font-family: FontAwesome;
  font-size: large;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: #ffcc00;
  vertical-align: top;
}
/* =============================================================================
   Login
   ========================================================================== */
.login .header {
  height: 114px;
  background: #ffffff;
  border-bottom: 4px solid #0061a1;
}
.login .container #mainContent {
  /*top:-84px;*/
  top: 0px;
}
.login .container #mainContent .aiFastTrack {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.login .aiLoginImagePanel {
  background: none;
  padding-left: 0px;
  margin-top: 25px;
}
.login .aiLoginImagePanel div {
  width: 535px;
}
.login .aiFastTrack {
  margin-top: 25px;
  background-color: transparent;
  background: rgba(185, 219, 242, 0.8);
  background-repeat: repeat;
  border: none;
  height: 380px;
  width: 350px;
  float: right;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
}
.login .aiFastTrack .typeD .head {
  background: none;
  border-bottom: none;
}
.login .aiFastTrack .Rabbit {
  margin: 0 auto;
  background-image: url("images/Jackrabbit.png");
  width: 220px;
  height: 188px;
}
.login .aiFastTrack .aiFTIntro {
  margin-top: 40px;
  text-align: center;
}
.login .aiFastTrack .aiFTIntro .primary {
  background: #0061a1;
  color: #ffffff;
  border: #0061a1;
}
.login .aiFastTrack .aiFTIntro .primary i {
  display: none;
}
.login .aiFastTrack .aiFTIntro .primary:hover {
  background: #11306e;
}
.login .LoginPanelBox {
  margin-top: 25px;
  width: 350px;
  background-color: transparent;
  background: rgba(185, 219, 242, 0.8);
  background-repeat: repeat;
  border: none;
  border-top-right-radius: 10px;
}
.login .LoginPanelBox .typeD .head {
  background: none;
  border-bottom: none;
}
.login .LoginPanelBox .formSection fieldset {
  width: 250px;
}
.login .typeA.typeLoginNav {
  background-color: transparent;
  width: 350px;
  background: rgba(185, 219, 242, 0.8);
  background-repeat: repeat;
  border-top: none;
  border-bottom-right-radius: 10px;
  -webkit-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
}
.login fieldset {
  margin-left: 35px;
}
.login fieldset button {
  margin-top: 5px;
}
.login div.LoginNavigationPanel li {
  margin-left: 10px;
}
.login div.LoginNavigationPanel li a,
.login div.LoginNavigationPanel li a.secondary {
  display: block;
  color: #0061a1;
}
.login div.LoginNavigationPanel li a i,
.login div.LoginNavigationPanel li a.secondary i {
  color: #0061a1;
}
.login div.LoginNavigationPanel li a:hover,
.login div.LoginNavigationPanel li a.secondary:hover,
.login div.LoginNavigationPanel li a:focus,
.login div.LoginNavigationPanel li a.secondary:focus {
  background: none;
  color: #11306e;
  text-decoration: underline;
}
.login div.LoginNavigationPanel li a:hover i,
.login div.LoginNavigationPanel li a.secondary:hover i,
.login div.LoginNavigationPanel li a:focus i,
.login div.LoginNavigationPanel li a.secondary:focus i {
  color: #11306e;
}
body {
  /*background: url("images/Big-Sky-Strip.jpg") repeat-x scroll 0 0 @White;*/
  /*background-image: url("images/Big-Sky.jpg"), url("images/Big-Sky-Strip.jpg");*/
  background-image: url("images/trees.jpg");
  width: 100%;
  background-position: center 120px, center top;
  background-repeat: no-repeat, repeat-x;
}
.LogoPanel .publicPageHeader a img {
  top: 55px;
}
.publicPageHeader {
  background: url(images/LLbySL.png) no-repeat right 34px;
  height: 105px;
}
div.header {
  height: 120px;
  margin-bottom: 0px;
}
.LastLoginPanel {
  color: #ffffff;
  top: 123px;
  right: 12px;
  z-index: 49;
}
.LastLoginPanel span.lastLogInLabel,
.LastLoginPanel span.lastLogin {
  display: none;
}
body.employeeHome div.BreadcrumbNavigationPanel,
.myEnrolment div.BreadcrumbNavigationPanel,
.myDetails div.BreadcrumbNavigationPanel,
.documentstore div.BreadcrumbNavigationPanel,
.enhancedProductSelectionWizard div.BreadcrumbNavigationPanel,
.myBenefitsEnrolmentFormHistory div.BreadcrumbNavigationPanel,
.myBenefitsEnrolmentFinishForm div.BreadcrumbNavigationPanel,
.usefulInformation div.BreadcrumbNavigationPanel {
  visibility: hidden;
  position: relative;
  top: -25px;
}
.employeePrimary {
  position: relative;
  background: #0061a1;
  height: 40px;
}
.employeePrimary ul {
  left: 0px;
}
.employeePrimary li {
  border-radius: 0px;
  border-right: 1px solid #ffffff;
  padding: 0px 12px;
  height: auto;
  top: 5px;
}
.employeePrimary li:hover {
  background: none;
  color: #ffcc00;
}
.employeePrimary li a,
.employeePrimary li span {
  color: #ffffff;
  font-weight: normal;
}
.employeePrimary li a:hover,
.employeePrimary li span:hover {
  background: none;
  color: #ffcc00;
}
.employeePrimary li.isSelected {
  background: none;
}
.employeePrimary li.isSelected a,
.employeePrimary li.isSelected span {
  color: #ffcc00;
}
.container #mainContent {
  /*background: url("images/HomePage-BG.png") repeat-x scroll 0 0 @White;*/
  position: relative;
  top: 0px;
  min-height: 700px;
}
.typeD,
.typeA,
.typeA .head {
  background: none;
  border: none;
  border-radius: 0px;
}
.mergeTimerAndCTA {
  z-index: 2;
  top: 16px;
  margin-top: -16px;
  border: none;
}
.aiSeethru .typeD .head {
  background: none;
  border-bottom: none;
}
.typeD {
  border-bottom: none;
}
.typeD .head {
  background: none;
  border-bottom: none;
}
.typeD .head h2 {
  color: #0061a1;
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
}
.typeD.collapsible .head .fa {
  color: #ff0000;
}
.aiShadow {
  -webkit-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
}
.aiTrans {
  /*background-image: url("images/Trans-White-80.png");*/
  background-repeat: repeat;
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
}
/* =============================================================================
  Enrolment Timer LightBox
   ========================================================================== */
.mergeTimerAndCTA {
  z-index: 100 !important;
}
.SubmissionTimerPanelBoxHeaderless {
  position: relative;
  z-index: 100;
}
.BoxPanel .CallToActionComponentsPanelBoxHeaderless {
  position: relative;
  z-index: 100;
}
.CallToActionComponentsPanelBoxHeaderless {
  position: relative;
  z-index: 100;
}
.overlay {
  display: none;
  position: fixed;
  height: 1024px;
  width: 100%;
  opacity: 0.8;
  background: black;
  z-index: 50;
}
.displayOverlay {
  display: block;
  float: right;
}
.displayOverlay a.overlayClose {
  position: absolute;
  display: block;
  border: 2px solid #0061a1;
  top: 5px;
  z-index: 300;
  padding: 5px 10px;
  color: #ffffff;
  right: 5px;
  background-color: #0061a1;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
}
.displayOverlay a.overlayClose:hover {
  background-color: #11306e;
  border: 2px solid #11306e;
  color: #ffffff;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
/* =============================================================================
   Home Page
   ========================================================================== */
.aiWelcome {
  margin: 20px auto 0px;
  width: 100%;
  text-align: left;
  background: url("images/welcome-image.png") no-repeat right top #008bcb;
  margin-bottom: 15px;
}
.aiWelcome .body {
  padding: 30px 30px 5px 30px;
}
.aiWelcome .body h2 {
  font-size: 220%;
  color: #ffffff;
  font-weight: normal;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiWelcome .body p {
  font-size: 150%;
  width: 60%;
  color: #ffffff;
}
/* =============================================================================
   Submission Timer
   ========================================================================== */
.SubmissionTimerPanelBoxHeaderless {
  background-color: transparent;
  background: #b9dbf2;
  background-repeat: repeat;
  height: -1px;
  border: none;
}
.SubmissionTimerPanel .message,
.SubmissionTimerPanel .messageLastDay {
  text-align: center;
  color: #0061a1;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
  font-size: 150%;
}
.SubmissionTimerPanel .message:before,
.SubmissionTimerPanel .messageLastDay:before {
  content: "\f252";
  font-family: FontAwesome;
  left: 95px;
  position: absolute;
  top: -5px;
  font-size: 280%;
  color: #0061a1;
}
.SubmissionTimerPanel .message h2,
.SubmissionTimerPanel .messageLastDay h2 {
  color: #0061a1;
}
.CallToActionComponentsPanelBoxHeaderless {
  background-color: transparent;
  background: #b9dbf2;
  background-repeat: repeat;
  margin-top: 6px;
  padding: 0px;
  margin-bottom: 20px;
}
.callToActionItems {
  margin-top: 0px;
  text-align: center;
  padding: 0px 10px 15px 10px;
}
.callToActionItems h3 {
  color: #0061a1;
}
/* =============================================================================
   Dividers
   ========================================================================== */
.aiDivider {
  background: #11306e;
  padding: 5px 20px;
}
.aiDivider .head h2 {
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
}
.aiDivider .head h2:before {
  background-image: -webkit-linear-gradient(left, #ffcc00, #ffcc00);
  background-image: -moz-linear-gradient(left, #ffcc00, #ffcc00);
  background-image: -ms-linear-gradient(left, #ffcc00, #ffcc00);
  background-image: -o-linear-gradient(left, #ffcc00, #ffcc00);
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.aiDivider .head h2:after {
  background-image: -webkit-linear-gradient(left, #ffcc00, #ffcc00);
  background-image: -moz-linear-gradient(left, #ffcc00, #ffcc00);
  background-image: -ms-linear-gradient(left, #ffcc00, #ffcc00);
  background-image: -o-linear-gradient(left, #ffcc00, #ffcc00);
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.aiDivider .head h2:before {
  right: 0.5em;
  margin-left: -50%;
}
.aiDivider .head h2:after {
  left: 0.5em;
  margin-right: -50%;
}
.aiDivider .body {
  display: none;
}
/* =============================================================================
   Pension Component
   ========================================================================== */
.aiPension {
  padding: 10px;
  background-color: transparent;
  background: #0061a1;
}
.aiPension .head h2 {
  overflow: hidden;
  text-align: center;
  color: #000000;
}
.aiPension .head h2:before {
  background-image: -webkit-linear-gradient(left, white, black);
  background-image: -moz-linear-gradient(left, white, black);
  background-image: -ms-linear-gradient(left, white, black);
  background-image: -o-linear-gradient(left, white, black);
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.aiPension .head h2:after {
  background-image: -webkit-linear-gradient(left, black, white);
  background-image: -moz-linear-gradient(left, black, white);
  background-image: -ms-linear-gradient(left, black, white);
  background-image: -o-linear-gradient(left, black, white);
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.aiPension .head h2:before {
  right: 0.5em;
  margin-left: -50%;
}
.aiPension .head h2:after {
  left: 0.5em;
  margin-right: -50%;
}
.aiPension .PensionValuationStyledPanelBoxHeaderless {
  background: url("images/icon-pension.png") no-repeat center 10px;
}
.aiPension .pensionValuationContainer {
  width: 100%;
  margin: 0 auto;
}
.aiPension .pensionValuationContainer .introductionHeader .showHideDetails {
  color: #ffffff;
  font-size: 120%;
  font-weight: normal;
  border-bottom: 1px solid #ffcc00;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiPension .pensionValuationContainer .introductionHeader .showHideDetails span {
  padding-bottom: 2px;
}
.aiPension .pensionValuationContainer .introductionHeader .showHideDetails span .fa:hover {
  cursor: pointer;
}
.aiPension .pensionValuationContainer .introductionHeader span.copy {
  display: none;
}
.aiPension .pensionValuationContainer .introductionHeader .logoDetailsDiv {
  text-align: center;
  color: #ffffff;
  margin: 0px auto;
  width: 85%;
  border-bottom: 2px solid #ffcc00;
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
}
.aiPension .pensionValuationContainer .introductionHeader .logoDetailsDiv span {
  /*&.logoDetails:before {
	    				content: "\f1fe";
						font-family: FontAwesome;
						left: 36%;
						position: absolute;
						top: -60px;
						font-size: 150%;
						color: @White;	    					
	    			}
	    			&.logoDetails:after {
	    				content: "\f1db";
						font-family: FontAwesome;
						left: 23%;
						position: absolute;
						top: -84px;
						font-size: 360%;
						color: @White;	    					
	    			}*/
}
.aiPension .pensionValuationContainer .introductionHeader .logoDetailsDiv span.logoDetails {
  font-size: 200%;
  margin-top: 60px;
  margin-bottom: 10px;
  position: relative;
}
.aiPension .pensionValuationContainer span {
  display: inline-block;
  box-sizing: border-box;
}
.aiPension .pensionValuationContainer span.copy {
  width: 100%;
}
.aiPension .pensionValuationContainer span p {
  text-align: center;
}
.aiPension .pensionValuationContainer .pensionValuationHeader div > span,
.aiPension .pensionValuationContainer .pensionValuationBody div > span,
.aiPension .pensionValuationContainer .pensionValuationFooter div > span {
  width: 30%;
}
.aiPension .pensionValuationContainer .pensionValuationHeader {
  color: #ffffff;
  margin-top: 15px;
  margin-left: 10%;
}
.aiPension .pensionValuationContainer .pensionValuationHeader span {
  width: 30%;
}
.aiPension .pensionValuationContainer .pensionValuationHeader span.currentValueHeader,
.aiPension .pensionValuationContainer .pensionValuationHeader span.paidInValueHeader,
.aiPension .pensionValuationContainer .pensionValuationHeader span.planNumberHeader {
  text-align: center;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiPension .pensionValuationContainer .pensionValuationBody {
  background: none;
  color: #ffffff;
  margin-left: 10%;
  /*padding: 15px 5px 15px 5px;
			-webkit-box-shadow: 5px 22px 16px -17px rgba(0,0,0,0.75);
			-moz-box-shadow: 5px 22px 16px -17px rgba(0,0,0,0.75);
			box-shadow: 5px 22px 16px -17px rgba(0,0,0,0.75);*/
}
.aiPension .pensionValuationContainer .pensionValuationBody span.currentValue,
.aiPension .pensionValuationContainer .pensionValuationBody span.paidInValue,
.aiPension .pensionValuationContainer .pensionValuationBody span.planDetails {
  text-align: center;
  font-size: 200%;
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
}
.aiPension .pensionValuationContainer .pensionValuationBody span.planNumber {
  text-align: center;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiPension .pensionValuationContainer .pensionValuationFooter {
  position: relative;
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 10px;
}
.aiPension .pensionValuationContainer .pensionValuationFooter span.pensionValuationTotalFooter {
  margin-left: 140px;
}
.aiPension .pensionValuationContainer .pensionValuationFooter span.totalValue {
  position: absolute;
  top: -10px;
  margin-left: 10px;
  text-align: center;
  font-size: 200%;
  border-top: 1px solid #ffcc00;
  border-bottom: 1px solid #ffcc00;
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
}
.aiPension .pensionValuationContainer .pensionValuationFooter span.CSOLInfoLabel {
  position: absolute;
  right: 5px;
  top: -210px;
}
.aiPension .pensionValuationContainer .pensionValuationFooter span.CSOLDetails {
  position: absolute;
  right: 0px;
  top: -190px;
}
.aiPension .pensionValuationContainer a.primary {
  border: 1px solid rgba(255, 255, 255, 0.6);
}
/* =============================================================================
   Micro Site Link
   ========================================================================== */
.aiMicro {
  text-align: center;
}
/* =============================================================================
   Self Select
   ========================================================================== */
.aiSelfSelect .head {
  background: none;
  border-bottom: none;
}
.aiSelfSelect .head h2 {
  overflow: hidden;
  text-align: center;
  color: #000000;
}
.aiSelfSelect .head h2:before {
  background-image: -webkit-linear-gradient(left, white, black);
  background-image: -moz-linear-gradient(left, white, black);
  background-image: -ms-linear-gradient(left, white, black);
  background-image: -o-linear-gradient(left, white, black);
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.aiSelfSelect .head h2:after {
  background-image: -webkit-linear-gradient(left, black, white);
  background-image: -moz-linear-gradient(left, black, white);
  background-image: -ms-linear-gradient(left, black, white);
  background-image: -o-linear-gradient(left, black, white);
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.aiSelfSelect .head h2:before {
  right: 0.5em;
  margin-left: -50%;
}
.aiSelfSelect .head h2:after {
  left: 0.5em;
  margin-right: -50%;
}
.aiSelfSelect .body {
  text-align: center;
}
.employeeHome .container #mainContent {
  /*background: url("images/HomePage-BG.png") repeat-x scroll 0 0 @White;*/
  top: -35px;
  width: 960px;
  height: auto;
  background-color: transprent;
  position: relative;
  -webkit-animation-name: SlideUp;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: SlideUp;
  animation-duration: 2s;
}
/* =============================================================================
   Enrolment Table
   ========================================================================== */
table.EnrolmentFormPanelTable {
  background: #ffffff;
  border: none;
  -webkit-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 22px 16px -17px rgba(0, 0, 0, 0.75);
}
table.EnrolmentFormPanelTable .productGroup.Health th.groupHeaderText {
  background: #0061a1;
  color: #ffffff;
  border: 1px solid #0061a1;
}
table.EnrolmentFormPanelTable .productGroup.Lifestyle th.groupHeaderText {
  background: #0061a1;
  color: #ffffff;
  border: 1px solid #0061a1;
}
table.EnrolmentFormPanelTable .productGroup.Security th.groupHeaderText {
  background: #ff0000;
  color: #ffffff;
  border: 1px solid #ff0000;
}
table.EnrolmentFormPanelTable thead th {
  background: #11306e;
  border: 1px solid #11306e;
  border-bottom: 2px solid #ffcc00;
  color: #ffffff;
}
table.EnrolmentFormPanelTable thead th.BenefitAndStrapline {
  border-left: 1px solid #b9dbf2;
  text-align: left;
}
table.EnrolmentFormPanelTable thead th.TaxFriendly {
  width: 100px;
  text-align: left;
}
table.EnrolmentFormPanelTable thead th.TotalAdjustmentByPayrollFrequency {
  text-align: right;
  padding-right: 15px;
}
table.EnrolmentFormPanelTable thead th.last {
  border-right: 1px solid #b9dbf2;
}
table.EnrolmentFormPanelTable thead th.actions {
  width: 110px;
}
table.EnrolmentFormPanelTable th.groupHeaderText {
  font-size: 120%;
  margin-bottom: 0;
  background: #b9dbf2;
  padding: 10px;
  border-bottom: 1px solid #b9dbf2;
  cursor: pointer;
}
table.EnrolmentFormPanelTable th.headerOpened {
  background: #ff0000;
}
table.EnrolmentFormPanelTable tr.benefitfooterclass {
  display: none;
}
table.EnrolmentFormPanelTable tr.columnTotalHeaderClass,
table.EnrolmentFormPanelTable tr.annualTotalHeaderClass {
  font-size: 1em;
  font-weight: bold;
  background: rgba(255, 0, 0, 0.1);
  padding: 10px 0px 10px 0px;
}
table.EnrolmentFormPanelTable tr.columnTotalHeaderClass td .currency,
table.EnrolmentFormPanelTable tr.annualTotalHeaderClass td .currency {
  text-align: right;
  padding-right: 20px;
}
table.EnrolmentFormPanelTable td {
  border: none;
}
table.EnrolmentFormPanelTable td.currencyTotalAdjustmentByPayrollFrequency {
  text-align: right;
  padding-right: 15px;
}
tr.odd th,
tr.odd td {
  background-color: rgba(185, 219, 242, 0.1);
}
.EnrolmentFormPanelTable tbody.productGroup .fa {
  color: inherit;
}
.EnrolmentFormPanelTable tbody.productGroup th .fa {
  color: #ff0000;
}
.EnrolmentFormPanelTable div.taxIcons .fa {
  color: #ff0000;
}
.EnrolmentFormPanelTable .columnTotalHeaderClass .currency {
  text-align: right;
  padding-right: 15px;
}
.EnrolmentFormPanelTable .formSection,
.EnrolmentFormPanelTable .formSection table.options {
  /* .EnrolmentFormPanelTable div.firstColumn.last.col-24 */
  width: auto;
}
.EnrolmentFormPanelTable div.firstColumn.last.col-24 {
  width: 100%;
}
.myEnrolment .expandoItem .TermsAndConditionsPanel {
  width: auto;
}
.GeneralDetailPanel th,
.EnrolmentTotalsPanel th,
.options th,
.employeeFundSelectionHeader th,
.DependantRowListPanel th,
.NetPayPanel th {
  background: #ffffff;
  padding: 10px;
}
.aiIntro p {
  font-weight: bold;
}
.aiIntro,
.aiHide,
.aiGeneral,
.aiTotals,
.aiColl {
  background-color: transparent;
  background-repeat: repeat;
  border: none;
}
.aiIntro .typeD .head,
.aiHide .typeD .head,
.aiGeneral .typeD .head,
.aiTotals .typeD .head,
.aiColl .typeD .head {
  background: none;
  border-bottom: none;
}
.aiIntro table,
.aiHide table,
.aiGeneral table,
.aiTotals table,
.aiColl table,
.aiIntro th,
.aiHide th,
.aiGeneral th,
.aiTotals th,
.aiColl th,
.aiIntro td,
.aiHide td,
.aiGeneral td,
.aiTotals td,
.aiColl td {
  border: 1px solid #0061a1;
  color: #000000;
}
.aiTotals,
.aiGeneral {
  margin-bottom: 10px;
}
.aiTotals th.totalsLabelColumn,
.aiGeneral th.totalsLabelColumn,
.aiTotals th.generalDetails,
.aiGeneral th.generalDetails {
  width: 50%;
}
.aiTotals th.monthlyColumn,
.aiGeneral th.monthlyColumn,
.aiTotals th.yearlyColumn,
.aiGeneral th.yearlyColumn {
  text-align: right;
}
.aiTotals td.monthlyColumn,
.aiGeneral td.monthlyColumn,
.aiTotals td.yearlyColumn,
.aiGeneral td.yearlyColumn {
  text-align: right;
}
.EmployeeTaxCodePanel .taxCode {
  margin-bottom: 10px;
}
.expandoTableRowItem table,
.tundra .dijitDialog table,
.expandoTableRowItem th,
.tundra .dijitDialog th,
.expandoTableRowItem td,
.tundra .dijitDialog td {
  border: 1px solid #0061a1;
  color: #000000;
}
.EnrolmentFormPanelTable .expandoTableRowItem > td {
  border-top: 5px solid;
  border-bottom: 5px solid;
  border-color: #ffcc00;
}
.EnrolmentFormPanelTable {
  /***** Deloitte Pension *****/
}
.EnrolmentFormPanelTable .expandoTableRowItem h2 {
  color: #11306e;
}
.EnrolmentFormPanelTable div.selectButton {
  width: 100%;
  margin-top: 5px;
  margin-right: 0px;
}
.EnrolmentFormPanelTable div.selectButton button.primary {
  float: right;
  margin-right: 10px;
}
.EnrolmentFormPanelTable table.options td {
  border: 1px solid #b9dbf2;
}
.EnrolmentFormPanelTable table.options td.currency {
  text-align: right;
}
.EnrolmentFormPanelTable table.options .dijitInputContainer input {
  text-align: right;
}
.EnrolmentFormPanelTable .expandoTableRowItem.DeloittePensionPlan h3.legend span {
  display: none;
}
.EnrolmentFormPanelTable .expandoTableRowItem.DeloittePensionPlan .radios {
  margin: 5px 0;
}
.EnrolmentFormPanelTable .expandoTableRowItem.DeloittePensionPlan .termsAndConditionSummary {
  margin-right: 15px;
}
.EnrolmentFormPanelTable .expandoTableRowItem.DeloittePensionPlan .optionBasedPensionEmployeeContributionFieldset legend {
  display: block;
  font-size: 1.125em;
  margin-bottom: 5px;
  font-family: StandardLifeBold, arial, helvetica, sans-serif;
}
.EnrolmentFormPanelTable .optionStrapline {
  margin-top: 10px;
}
.myEnrolment .termsAndConditionsContainer {
  /*background-image: url("images/Trans-White-80.png");*/
  background-repeat: repeat;
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
}
.myEnrolment .termsAndConditionsContainer h2 {
  padding: 15px 0 0 20px;
  color: #ff0000;
}
.myEnrolment .termsAndConditionsContainer .tccontent {
  padding: 0px 20px 20px 20px;
}
.myEnrolment .conditionCheckContainer {
  padding: 0px 10px 20px 20px;
}
.EnrolmentTermsAndConditionsPanel div.formComponentCheckbox label,
div.expandoItem div.TermsAndConditionsPanel div.formComponent label,
.EwbpTermsAndConditionsPanel div.formComponentCheckbox label {
  float: none;
}
.EnrolmentTermsAndConditionsPanel div.dijitCheckbox,
.EwbpTermsAndConditionsPanel div.dijitCheckbox {
  float: left;
}
table.EnrolmentFormPanelTable .benefitFooter td.columnTotalHeaderClass,
table.EnrolmentFormPanelTable .benefitFooter td.currency {
  height: 40px;
}
/**** Hide mystery button on Step 2 of Pension wizard ****/
.EwbpTermsAndConditionsPanel div.termsAndConditionsLink {
  display: none;
}
.OptBox {
  width: 97%;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.1);
  padding: 5px 5px 0px 5px;
}
.expandoTableRowItem,
.slidingPanelRowData {
  background: rgba(185, 219, 242, 0.1);
}
/* =============================================================================
   My Details
   ========================================================================== */
.myDetails .BoxPanel {
  /*background-image: url("images/Trans-White-80.png");*/
  background-repeat: repeat;
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
}
.myDetails .BoxPanel .body,
.myDetails .BoxPanel .accessDeniedMsg,
.myDetails .BoxPanel .back {
  padding: 0px 10px 10px 20px;
}
.myDetails .BoxPanel h2 {
  padding: 10px 0 0 20px;
}
.myDetails .BoxPanel h2.pageTitle {
  margin-left: -20px;
  color: #ff0000;
}
.myDetails div.formComponent label {
  width: 200px;
}
.myDetails h3.legend {
  color: #ff0000;
}
.myDetails .MyDetailsConfigurablePanel {
  padding: 20px 10px 10px 0px;
}
.myDetails table,
.myDetails th,
.myDetails td {
  border: 1px solid #b9dbf2;
  color: #000000;
  padding: 5px;
}
.myDetails table.labelContainer,
.myDetails th.labelContainer,
.myDetails td.labelContainer {
  background: #ffffff;
}
/* =============================================================================
   Boxes
   ========================================================================== */
.BoxButton {
  background: #0061a1;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  position: relative;
  text-decoration: none;
  border: none;
}
.BoxButton i {
  display: none;
}
.BoxButton span:after {
  content: '\f0da';
  font-family: FontAwesome;
  font-size: large;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: #ffcc00;
  vertical-align: middle;
}
.BoxButton:hover,
.BoxButton:active,
.BoxButton:focus {
  background-color: #11306e;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.aiSee {
  position: relative;
  padding: 10px;
  background-color: transparent;
  background: url("images/icon-fforward.png") no-repeat center 20px #b9dbf2;
  min-height: 200px;
  text-align: center;
}
.aiSee h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #0061a1;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiChange {
  position: relative;
  padding: 10px;
  background-color: transparent;
  background: url("images/icon-coins.png") no-repeat center 20px #5cb6e2;
  min-height: 200px;
  text-align: center;
}
.aiChange .head h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #ffffff;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiChange .body form {
  margin-bottom: 0px;
}
.aiChange .body .SelfSelectLifeEventPanel a {
  background: #0061a1;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  position: relative;
  text-decoration: none;
  border: none;
}
.aiChange .body .SelfSelectLifeEventPanel a i {
  display: none;
}
.aiChange .body .SelfSelectLifeEventPanel a span:after {
  content: '\f0da';
  font-family: FontAwesome;
  font-size: large;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: #ffcc00;
  vertical-align: middle;
}
.aiChange .body .SelfSelectLifeEventPanel a:hover,
.aiChange .body .SelfSelectLifeEventPanel a:active,
.aiChange .body .SelfSelectLifeEventPanel a:focus {
  background-color: #11306e;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.aiCheck {
  position: relative;
  padding: 10px;
  background-color: transparent;
  background: url("images/icon-graph-white.png") no-repeat center 20px #5cb6e2;
  min-height: 200px;
  text-align: center;
}
.aiCheck h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #ffffff;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiMore {
  position: relative;
  padding: 5px;
  /*97948: Skins - Deloitte stage - awesome script issue (for Krupal)*/
  background-color: transparent;
  background: url("images/icon-question.png") no-repeat center 20px #5cb6e2;
  min-height: 210px;
  text-align: center;
}
.aiMore h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #ffffff;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiDocs {
  position: relative;
  padding: 10px;
  background-color: transparent;
  background: url("images/icon-exclaim.png") no-repeat center 20px #b9dbf2;
  min-height: 200px;
  text-align: center;
}
.aiDocs .head h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #0061a1;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiDocs .documentStoreLinkContainer a {
  background: #0061a1;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  position: relative;
  text-decoration: none;
  border: none;
}
.aiDocs .documentStoreLinkContainer a i {
  display: none;
}
.aiDocs .documentStoreLinkContainer a span:after {
  content: '\f0da';
  font-family: FontAwesome;
  font-size: large;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: #ffcc00;
  vertical-align: middle;
}
.aiDocs .documentStoreLinkContainer a:hover,
.aiDocs .documentStoreLinkContainer a:active,
.aiDocs .documentStoreLinkContainer a:focus {
  background-color: #11306e;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.aiFiles {
  position: relative;
  padding: 10px;
  background-color: transparent;
  background: url("images/file-icon-transparent.png") no-repeat center 20px #b9dbf2;
  min-height: 200px;
  text-align: center;
}
.aiFiles .head h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #0061a1;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiFiles .documentStoreLinkContainer a {
  background: #0061a1;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  position: relative;
  text-decoration: none;
  border: none;
}
.aiFiles .documentStoreLinkContainer a i {
  display: none;
}
.aiFiles .documentStoreLinkContainer a span:after {
  content: '\f0da';
  font-family: FontAwesome;
  font-size: large;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: #ffcc00;
  vertical-align: middle;
}
.aiFiles .documentStoreLinkContainer a:hover,
.aiFiles .documentStoreLinkContainer a:active,
.aiFiles .documentStoreLinkContainer a:focus {
  background-color: #11306e;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.aiOtherSL {
  position: relative;
  padding: 10px;
  background: url("images/icon-TV-blue.png") no-repeat center 20px;
  background-color: #b9dbf2;
  min-height: 200px;
  text-align: center;
}
.aiOtherSL .head h2 {
  margin-top: 80px;
  margin-bottom: 10px;
  font-size: 150%;
  color: #0061a1;
  font-family: standardliferegular, arial, helvetica, sans-serif;
}
.aiOtherSL .viewOtherStandardLifePlansLink a {
  background: #0061a1;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  position: relative;
  text-decoration: none;
  border: none;
}
.aiOtherSL .viewOtherStandardLifePlansLink a i {
  display: none;
}
.aiOtherSL .viewOtherStandardLifePlansLink a span:after {
  content: '\f0da';
  font-family: FontAwesome;
  font-size: large;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: #ffcc00;
  vertical-align: middle;
}
.aiOtherSL .viewOtherStandardLifePlansLink a:hover,
.aiOtherSL .viewOtherStandardLifePlansLink a:active,
.aiOtherSL .viewOtherStandardLifePlansLink a:focus {
  background-color: #11306e;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.aiStack {
  width: 290px;
  float: left;
  margin-right: 10px;
}
.aiStack:hover {
  box-shadow: inset 0 0 0 8px #11306e;
  transition: all 0.3s ease-out;
}
.aiStack:nth-of-type(3) {
  margin-right: 0px;
}
.russRow {
  text-align: center;
}
.russRow .aiStack {
  display: inline-table;
  /*97948: Skins - Deloitte stage - awesome script issue (for Krupal)*/
  float: none;
}
/* =============================================================================
   Documents
   ========================================================================== */
.documentstore .typeD {
  /*background-image: url("images/Trans-White-80.png");*/
  background-repeat: repeat;
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
}
/* =============================================================================
   Footer
   ========================================================================== */
div.footerWrap {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #0061a1;
}
.footer .typeD .head {
  border-bottom: none;
}
.footer .typeD.collapsible .head .fa {
  top: 8px;
  color: #ff0000;
}
/* =============================================================================
   Error
   ========================================================================== */
div.error div.errorSummaryPanel {
  border-color: #ff0000;
  background: rgba(255, 0, 0, 0.1);
}
div.error div.errorSummaryPanel a {
  color: #ff0000;
}
div.error div.errorSummaryPanel .feedbackPanel {
  background: none;
  border: none;
}
.feedbackPanel {
  /*background-image: url("images/Trans-White-80.png");*/
  background-repeat: repeat;
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dotted #ff0000;
}
.feedbackPanel span.feedbackPanelERROR {
  color: #ff0000;
}
/* =============================================================================
   Historic and future statements
   ========================================================================== */
.EnrolmentHistoryPanelBox {
  /*background-image: url("images/Trans-White-80.png");*/
  background-repeat: repeat;
  background-color: transparent;
  background: rgba(255, 255, 255, 0.8);
}
/* =============================================================================
   Pages
   ========================================================================== */
.privacyPolicy-p #mainContent,
.timeout #mainContent,
.accessDenied #mainContent,
.myEnrolment #mainContent,
.myBenefitsEnrolmentFinishForm #mainContent,
.ssoError #mainContent,
.forgottenPassword #mainContent {
  background-color: transparent;
  background: rgba(255, 255, 255, 0.6);
  min-height: 200px;
}
/* =============================================================================
   Timeout
   ========================================================================== */
.timeout .typeD .head,
.accessDenied .typeD .head,
.ssoError .typeD .head,
.forgottenPassword .typeD .head {
  background: none;
  border-bottom: none;
}
.timeout .header,
.accessDenied .header,
.ssoError .header,
.forgottenPassword .header {
  height: 114px;
  background: #ffffff;
  border-bottom: 4px solid #0061a1;
}
.timeout .SessionTimeoutPanelBox,
.accessDenied .SessionTimeoutPanelBox,
.ssoError .SessionTimeoutPanelBox,
.forgottenPassword .SessionTimeoutPanelBox,
.timeout .AccessDeniedPanel,
.accessDenied .AccessDeniedPanel,
.ssoError .AccessDeniedPanel,
.forgottenPassword .AccessDeniedPanel {
  margin-top: 25px;
}
.timeout .SessionTimeoutPanelBox .sessionTimeoutPanel h2,
.accessDenied .SessionTimeoutPanelBox .sessionTimeoutPanel h2,
.ssoError .SessionTimeoutPanelBox .sessionTimeoutPanel h2,
.forgottenPassword .SessionTimeoutPanelBox .sessionTimeoutPanel h2,
.timeout .AccessDeniedPanel .sessionTimeoutPanel h2,
.accessDenied .AccessDeniedPanel .sessionTimeoutPanel h2,
.ssoError .AccessDeniedPanel .sessionTimeoutPanel h2,
.forgottenPassword .AccessDeniedPanel .sessionTimeoutPanel h2 {
  margin-left: -20px;
}
.timeout .SessionTimeoutPanelBox .body,
.accessDenied .SessionTimeoutPanelBox .body,
.ssoError .SessionTimeoutPanelBox .body,
.forgottenPassword .SessionTimeoutPanelBox .body,
.timeout .AccessDeniedPanel .body,
.accessDenied .AccessDeniedPanel .body,
.ssoError .AccessDeniedPanel .body,
.forgottenPassword .AccessDeniedPanel .body {
  position: relative;
  min-height: 200px;
  padding: 0px 10px 10px 20px;
}
.timeout .SessionTimeoutPanelBox .body:after,
.accessDenied .SessionTimeoutPanelBox .body:after,
.ssoError .SessionTimeoutPanelBox .body:after,
.forgottenPassword .SessionTimeoutPanelBox .body:after,
.timeout .AccessDeniedPanel .body:after,
.accessDenied .AccessDeniedPanel .body:after,
.ssoError .AccessDeniedPanel .body:after,
.forgottenPassword .AccessDeniedPanel .body:after {
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 10em;
  top: 0px;
  right: 50px;
  content: "\f253";
  color: #0061a1;
}
.timeout .SessionTimeoutPanelBox .accessDeniedMsg,
.accessDenied .SessionTimeoutPanelBox .accessDeniedMsg,
.ssoError .SessionTimeoutPanelBox .accessDeniedMsg,
.forgottenPassword .SessionTimeoutPanelBox .accessDeniedMsg,
.timeout .AccessDeniedPanel .accessDeniedMsg,
.accessDenied .AccessDeniedPanel .accessDeniedMsg,
.ssoError .AccessDeniedPanel .accessDeniedMsg,
.forgottenPassword .AccessDeniedPanel .accessDeniedMsg,
.timeout .SessionTimeoutPanelBox .back,
.accessDenied .SessionTimeoutPanelBox .back,
.ssoError .SessionTimeoutPanelBox .back,
.forgottenPassword .SessionTimeoutPanelBox .back,
.timeout .AccessDeniedPanel .back,
.accessDenied .AccessDeniedPanel .back,
.ssoError .AccessDeniedPanel .back,
.forgottenPassword .AccessDeniedPanel .back {
  padding: 0px 10px 10px 20px;
}
.timeout .SessionTimeoutPanelBox h2,
.accessDenied .SessionTimeoutPanelBox h2,
.ssoError .SessionTimeoutPanelBox h2,
.forgottenPassword .SessionTimeoutPanelBox h2,
.timeout .AccessDeniedPanel h2,
.accessDenied .AccessDeniedPanel h2,
.ssoError .AccessDeniedPanel h2,
.forgottenPassword .AccessDeniedPanel h2 {
  padding: 10px 0 0 20px;
}
/* =============================================================================
   Forgotten Password
   ========================================================================== */
.forgottenPassword .ForgottenPasswordWizardBoxHeaderless {
  padding: 20px 50px 50px;
}
.forgottenPassword .wizardHeader {
  margin-top: 90px;
}
.forgottenPassword .wizardHeader h2.wicketExtensionsWizardHeaderTitle {
  color: #0061a1;
  font-size: 1.4em;
}
/* =============================================================================
   Access Denied
   ========================================================================== */
.accessDenied .AccessDeniedPanel {
  position: relative;
  min-height: 200px;
  padding: 50px;
}
.accessDenied .AccessDeniedPanel:after {
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 10em;
  top: 30px;
  right: 60px;
  content: "\f256";
  color: #0061a1;
}
/* =============================================================================
   SSO Error
   ========================================================================== */
.ssoError .SSOErrorPanel {
  position: relative;
  min-height: 200px;
  padding: 50px;
}
.ssoError .SSOErrorPanel:after {
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 10em;
  top: 30px;
  right: 60px;
  content: "\f235";
  color: #0061a1;
}
/* =============================================================================
   Submit Success
   ========================================================================== */
.myBenefitsEnrolmentFinishForm .EnrolmentFinishPanelBox {
  padding: 50px;
}
.myBenefitsEnrolmentFinishForm .EnrolmentFinishPanelBox .body {
  position: relative;
  min-height: 200px;
}
.myBenefitsEnrolmentFinishForm .EnrolmentFinishPanelBox .body:after {
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 10em;
  top: -40px;
  right: 50px;
  content: "\f046";
  color: #0061a1;
}
/* =============================================================================
   DropDown Box Corners
   ========================================================================== */
.tundra .dijitSelect .dijitButtonContents,
.tundra .dijitSelect,
.tundra .dijitTextBox {
  background: url("images/validationInputBg.png") repeat-x top left #ffffff;
}
.tundra .dijitSelect,
.tundra .dijitTextBox,
.tundra table.dijit .dijitButtonText {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border-color: #b9dbf2 !important;
}
.tundra .dijitSelect .dijitButtonContents {
  border-radius: 0px;
}
.tundra .dijit .dijitArrowButton {
  border-radius: 0px;
}
/* =============================================================================
   Modals
   ========================================================================== */
.tundra .dijitDialog {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.tundra .dijitSelect,
.tundra .dijitTextBox,
.tundra table.dijit .dijitButtonText {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
.MoreInfoPanel h2 {
  color: #0061a1;
}
.SignificantPeopleOverviewPanel table.listTable th {
  background: #11306e;
  border-bottom: 2px solid #ffcc00;
}
.TaxModellerPanelDialog table th {
  background: #11306e;
  border-bottom: 2px solid #ffcc00;
}
.TaxModellerPanelDialog table th.currency {
  text-align: right;
}
.TaxModellerPanelDialog table td.currency {
  text-align: right;
}
.NMWAndLELValidationFailureInfoPanel table.selectionReportTable th {
  background: #11306e;
  border-bottom: 2px solid #ffcc00;
}
/* =============================================================================
   Fade
   ========================================================================== */
.aifade {
  -webkit-animation: fadein 4s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s;
  /* Firefox < 16 */
  -ms-animation: fadein 4s;
  /* Internet Explorer */
  -o-animation: fadein 4s;
  /* Opera < 12.1 */
  animation: fadein 4s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =============================================================================
   Slide Animation - Bottom Up
   ========================================================================== */
.SlideUp {
  width: 960px;
  height: auto;
  background-color: transprent;
  position: relative;
  -webkit-animation-name: SlideUp;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: SlideUp;
  animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes SlideUp {
  0% {
    left: 0px;
    top: 500px;
  }
  100% {
    left: 0px;
    top: -35px;
  }
}
/* Standard syntax */
@keyframes SlideUp {
  0% {
    left: 0px;
    top: 500px;
  }
  100% {
    left: 0px;
    top: -35px;
  }
}
/* =============================================================================
   Slide Animation - Top Down
   ========================================================================== */
.SlideDown {
  width: auto;
  height: auto;
  background-color: transprent;
  position: relative;
  -webkit-animation-name: SlideDown;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: SlideDown;
  animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes SlideDown {
  0% {
    left: 0px;
    top: -500px;
    opacity: 0;
  }
  100% {
    left: 0px;
    top: 0px;
    opacity: 1;
  }
}
/* Standard syntax */
@keyframes SlideDown {
  0% {
    left: 0px;
    top: -500px;
    opacity: 0;
  }
  100% {
    left: 0px;
    top: 0px;
    opacity: 1;
  }
}
/* =============================================================================
   Pulse Animation
   ========================================================================== */
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 2;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.8, 1.8, 1.8);
    transform: scale3d(1.8, 1.8, 1.8);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.8, 1.8, 1.8);
    transform: scale3d(1.8, 1.8, 1.8);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* =============================================================================
   Nudge Animation
   ========================================================================== */
.nudge {
  -webkit-animation-name: nudge;
  animation-name: nudge;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 3;
}
@-webkit-keyframes nudge {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes nudge {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* =============================================================================
   GLOW
   ========================================================================== */
.aiGlow {
  -webkit-animation-name: whitePulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes whitePulse {
  from {
    background-color: #fff;
    -webkit-box-shadow: 0 0 9px #fff;
  }
  50% {
    background-color: #fff;
    -webkit-box-shadow: 0 0 18px #fff;
  }
  to {
    background-color: #fff;
    -webkit-box-shadow: 0 0 9px #fff;
  }
}
/* =============================================================================
   Spinner - circle
   ========================================================================== */
.spinner {
  border: 4px solid transparent;
  border-radius: 50%;
  border-top: 4px solid #0061a1;
  border-right: 4px solid #0061a1;
  border-bottom: 4px solid #0061a1;
  width: 25px;
  height: 25px;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 0.5s linear infinite;
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* =============================================================================
   Animation - Bounce In Down
   ========================================================================== */
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}