/*================================================================================================== TABLE OF CONTENTS ==================================================================================================
	1. Variables
	2. Utility classes
	3. Global styles
		3a) Headings		3b) Links		3c) Buttons
		3d) Lists			3e) Popups		3f) Tab selectors
		3g) Accordions		3h) Info icons, slider toggles and label styling
		3i) Logo				3j) Site header
		3k) Site footer	3l) Datepickers
		3m) Inputs      3n) Tables
	4. Login page
	5. Home page
	6. Benefit overview
	7. Benefit statement
	8. Benefit matrix
	9. Benefit selection
	10. Profile
	11. App registration
	12. TRS
	13. Specific popups
		13a) Forgot password		13b) Modellers and tools	13c) Manage dependants
		13d) Follow up items		13e) Event T&Cs				13f) benefit selection election info collect
		13g) Beneficiaries          13h) validation
	14. Icons
		14a) Benefit icons		14b) Life event icons
	15. Claims
  16. My Documents
  17. Document Download
	18. Mobile
	19. Client specific styles
 ======================================================================================================================================================================================================================= */
/* font declaration for using OnlineTwoIconFont set
'inspiringbenefits' is the new UK only demo client */
@font-face {
  font-family: 'OnlineTwoIconFont';
  src: url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.eot');
  src: url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.eot?#iefix') format('embedded-opentype'),
    url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.woff') format('woff'),
    url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.ttf') format('truetype'),
    url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* HSBC universe fonts*/
@font-face {
    font-family: 'Universe_regular';
    src: url('/HSBC/media/images/Fonts/Regular/UniversNextforHSBCW29-Rg.eot');
    src: url('/HSBC/media/images/Fonts/Regular/UniversNextforHSBCW29-Rg.eot#iefix') format('embedded-opentype'),
         url('/HSBC/media/images/Fonts/Regular/UniversNextforHSBCW29-Rg.svg') format('svg'),
         url('/HSBC/media/images/Fonts/Regular/UniversNextforHSBCW29-Rg.wofff') format('woff'),
         url('/HSBC/media/images/Fonts/Regular/UniversNextforHSBCW29-Rg.woff2') format('woff2');
	        font-weight: normal;
            font-style: normal;
}
@font-face {
    font-family: 'Universe_light';
    src: url('/HSBC/media/images/Fonts/Light/UniversNextforHSBCW29-Light.eot');
    src: url('/HSBC/media/images/Fonts/Light/UniversNextforHSBCW29-Light.eot#iefix') format('embedded-opentype'),
         url('/HSBC/media/images/Fonts/Light/UniversNextforHSBCW29-Light.svg') format('svg'),
         url('/HSBC/media/images/Fonts/Light/UniversNextforHSBCW29-Light.woff') format('woff'),
         url('/HSBC/media/images/Fonts/Light/UniversNextforHSBCW29-Light.woff2') format('woff2');
	        font-weight: normal;
            font-style: normal;
}
@font-face {
    font-family: 'Universe_medium';
    src: url('/HSBC/media/images/Fonts/Medium/UniversNextW05-Medium.eot');
    src: url('/HSBC/media/images/Fonts/Medium/UniversNextW05-Medium.eot#iefix') format('embedded-opentype'),
         url('/HSBC/media/images/Fonts/Medium/UniversNextW05-Medium.svg') format('svg'),
         url('/HSBC/media/images/Fonts/Medium/UniversNextW05-Medium.woff') format('woff'),
         url('/HSBC/media/images/Fonts/Medium/UniversNextW05-Medium.woff2') format('woff2');
	        font-weight: normal;
            font-style: normal;
}
@font-face {
    font-family: 'Universe_thin';
    src: url('/HSBC/media/images/Fonts/Thin/UniversNextW05-Thin.eot');
    src: url('/HSBC/media/images/Fonts/Thin/UniversNextW05-Thin.eot#iefix') format('embedded-opentype'),
         url('/HSBC/media/images/Fonts/Thin/UniversNextW05-Thin.svg') format('svg'),
         url('/HSBC/media/images/Fonts/Thin/UniversNextW05-Thin.woff') format('woff'),
         url('/HSBC/media/images/Fonts/Thin/UniversNextW05-Thin.woff2') format('woff2');
	        font-weight: normal;
            font-style: normal;
}
@font-face {
    font-family: 'Universe_bold';
    src: url('/HSBC/media/images/Fonts/Bold/UniversNextforHSBCW29-Bold.eot');
    src: url('/HSBC/media/images/Fonts/Bold/UniversNextforHSBCW29-Bold.eot#iefix') format('embedded-opentype'),
         url('/HSBC/media/images/Fonts/Bold/UniversNextforHSBCW29-Bold.svg') format('svg'),
         url('/HSBC/media/images/Fonts/Bold/UniversNextforHSBCW29-Bold.woff') format('woff'),
         url('/HSBC/media/images/Fonts/Bold/UniversNextforHSBCW29-Bold.woff2') format('woff2');
	        font-weight: normal;
            font-style: normal;
}

/* set font throughout the site */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
html,
button,
input,
select,
textarea,
.mfp-close,
.bootstrap-iso,
.bootstrap-iso .tooltip,
.bootstrap-iso .popover,
.ui-buttonset .ui-button,
body,
.page-title H1,
H1,
H2,
#links LI:first-child select#ddlLanguage,
.help-ico A,
.spanDivSlider,
.spanDivAmount,
#delegateDiv .ui-widget,
#delegateDiv .ui-widget input,
#delegateDiv .ui-widget select,
#delegateDiv .ui-widget textarea,
#delegateDiv .ui-widget button,
.online-two-iso body,
.online-two-iso .modal-large .modal-body,
.online-two-iso .modal-large .tab-header,
.benefitselect .in-Cart .you-pay H3 {
  font-family: Universe_thin;
}

/*================================================================================================== 1. Variables  ==================================================================================================*/
:root {
  --accessibility-outline: #000;
  --heading-color: #000;
  --button-color: #4dfff3;
  --button-color-alternate: #4dfff3;
  --button-text-color: #000;
  --button-hover-color: #52ffb8;
  --button-hover-text-color: #000;
  --button-click-color: #539987;
  --button-click-text-color: #000;
  --link-text-color: #525174;
  --link-text-hover-color: #513b56;
  --link-text-click-color: #539987;
  --box-shadow: 5px 0 10px rgba(0,0,0,.2), -5px 0 10px rgba(0,0,0,.2);
  --header-overlay: #525174;
  --header-overlay-text-color: #fff;
  --panel-color: #513b56;
  --panel-text-color: #fff;
  --info-icon-color: #525174;
  --tab-selector-text-color: #513b56;
  --tab-selector-border-color: #513b56;
  --tab-selector-inactive-text-color: #666;
  --progress-bar-color: #539987;
  --success-icon-color: #539987;
  --unordered-list-bullet-color: #525174;
  --datepicker-today: #4dfff3;
  --datepicker-clear: #4dfff3;
  --datepicker-close: #4dfff3;
  --slider-toggle-color: #539987;
  --benefit-icon-color: #513b56;
  --linegroup1-benefit-icon-color: #a9a9a9;
  --linegroup2-benefit-icon-color: #a9a9a9;
  --linegroup3-benefit-icon-color: #a9a9a9;
  --life-event-background: #525174;
  --logo: url(/HSBC/media/images/Assets/HSBC_logo_TBS.png);
  --login-image: url(/HSBC/media/images/Assets/HSBC_login_image.png);
  --site-header-color: #525174;
  --site-header-icon-color: #fff;
  --site-footer-color: #513b56;
  --site-footer-link-color: #fff;
  --need-assistance-pull-down-menu: #513b56;
  --homepage-module-background-color: #f2f2f2;
  --homepage-module-enrolment-background-color: linear-gradient(to bottom right, #E7589A, #ED694D);
  --homepage-module-benefit-statement-background-color: #3C3C3B;
  --homepage-module-well-one-background-color: #3C3C3B;
  --homepage-module-well-one-money-background-color: linear-gradient(to bottom right, #6BBFA7, #9DD1CC);
  --homepage-heading-color: #666;
  --homepage-module-icon-color: #525174;
  --homepage-enrolment-days-left-color: #525174;
  --carousel-heading-color: #fff;
  --carousel-text-color: #fff;
  --pulse-color-start: rgba(219, 0, 17, 0.5);
  --pulse-color-end: rgba(219, 0, 17, 0);
  --selected-email-color: #2f4f4f;
  --benefit-selection-elected-box-highlight: #75bf71;
  --benefit-selected-tick-mark: #fff;
  --follow-up-panel-color: #539987;
  --mobile-menu-icon-color: #fff;
  --mobile-menu-link-color: #666;
}

@-webkit-keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(219, 0, 17, 0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(219, 0, 17, 0);
  }
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(219, 0, 17, 0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(219, 0, 17, 0);
  }
}

/* white pulse */
@-webkit-keyframes white-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}

@keyframes white-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}
/*================================================================================================== 2. Utility classes  ==================================================================================================*/
/* specific media query for IE10+ to handle responsive images */
@media screen and (-ms-high-contrast: active),
  screen and (-ms-high-contrast: none) {
  .bootstrap-iso .img-responsive {
    width: 100%;
  }
}
/* margin-top 0 */
.bootstrap-iso .mt-0 {
  margin-top: 0;
}

/* allow use of OnlineTwoIconFont for anything with this class */
[class*='online-two-icon-']:before {
  font-family: OnlineTwoIconFont;
}
/* icons on the benefit intro popups */
.benefit-information [class*='online-two-icon-']::before {
  font-size: 10rem;
}

/* for adding full stop after resource string */
.full-stop:after {
  content: '.';
  position: relative;
  left: -0.25em;
}
/* for adding comma after resource string */
.comma:after {
  content: ',';
  position: relative;
  left: -0.25em;
}

/*================================================================================================== 3. Global styles  ==================================================================================================*/
/* remove gradient background */
html {
  background: none;
}

/* global font size */
.bootstrap-iso {
  font-size: 1rem;
  color: #000;
}
.bootstrap-iso p {
  padding-bottom: 0;
}

/* remove text transform */
/* language selection */
#links LI:first-child select#ddlLanguage,
/* main navigation bar links */
#menu-no-dashboard li a,
#menu li a,
#menu-sub li a,
/* labels on Profile page */
html#profile body#profile .profile #profile-online-2 span.label,
html#profile body#profile .profile #profile-online-2 label:not(.ui-button),
/* labels */
span.label,
label,
/* benefit selection page items */
.in-Cart .cost P,
.in-Cart .funded P,
.your-beneficiaries .txt-beneficiaries H4,
/* footer links */
.online-two-iso #footer a {
  text-transform: none;
}

/* 3a) headings */
h1,
h2,
h3,
h4,
h5,
h6,
.online-two-iso h1,
.online-two-iso h2,
.online-two-iso h3,
.online-two-iso h4,
.online-two-iso h5,
.online-two-iso h6,
.bootstrap-iso h1,
.bootstrap-iso h2,
.bootstrap-iso h3,
.bootstrap-iso h4,
.bootstrap-iso h5,
.bootstrap-iso h6,
.bootstrap-iso .h1,
.bootstrap-iso .h2,
.bootstrap-iso .h3,
.bootstrap-iso .h4,
.bootstrap-iso .h5,
.bootstrap-iso .h6,
/* BENEFITS header on popup when removing dependants attached to cover */
.coverageHeader {
  color: #000;
  padding-left: 0;
}

/* 3b) links */
.bootstrap-iso a {
  text-decoration: underline;
}
a,
.bootstrap-iso a,
.dependant-list a.dependant-confirm-delete,
.terms-conditions-cookies .cookie-policy-link,
.terms-conditions-cookies .term-condtion-link {
  color: #000;
}
a:hover,
a:focus,
.bootstrap-iso a:hover,
.bootstrap-iso a:focus,
.dependant-list a.dependant-confirm-delete:hover,
.dependant-list a.dependant-confirm-delete:focus,
.terms-conditions-cookies .cookie-policy-link:hover,
.terms-conditions-cookies .cookie-policy-link:focus,
.terms-conditions-cookies .term-condtion-link:hover,
.terms-conditions-cookies .term-condtion-link:focus {
  color: #686868;
}
.bootstrap-iso a:focus,
.dependant-list a.dependant-confirm-delete:focus,
.terms-conditions-cookies .cookie-policy-link:focus,
.terms-conditions-cookies .term-condtion-link:focus {
  outline: 3px solid var(--accessibility-outline);
}
a:active,
a:active:hover,
a:active:focus,
.bootstrap-iso a:active,
.bootstrap-iso a:active:hover,
.bootstrap-iso a:active:focus,
.dependant-list a.dependant-confirm-delete:active,
.dependant-list a.dependant-confirm-delete:active:hover,
.dependant-list a.dependant-confirm-delete:active:focus,
.terms-conditions-cookies .cookie-policy-link:active,
.terms-conditions-cookies .cookie-policy-link:active:hover,
.terms-conditions-cookies .cookie-policy-link:active:focus,
.terms-conditions-cookies .term-condtion-link:active,
.terms-conditions-cookies .term-condtion-link:active:hover,
.terms-conditions-cookies .term-condtion-link:active:focus {
  color: #000;
}

/* 3c) buttons *`/
/* default colour */
.bootstrap-iso .btn-primary,
.bootstrap-iso .btn-danger,
.bootstrap-iso .btn-info,
.bootstrap-iso .btn-default,
.bootstrap-iso .btn-warning,
.bootstrap-iso .btn-success,
.bootstrap-iso .btn-popup,
.online-two-iso A.button-style,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue,
.online-two-iso A.button-style.blue,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray,
.online-two-iso A.button-style.gray,
.benefitheader-fixed div#followup-items a.btn,
.benefitheader-fixed div#resettodefaults a.btn,
.benefit-matrix .confirm-checkout-button .btn-success,
.btn.btn-info.claim-acknowledgment-print {
  background-color: #000;
  border: none;
  color: #fff;
  overflow: hidden;
  position: relative;
  transition: all 0.25s;
  z-index: 1;
  font-family: Universe_regular;
  text-transform: none;
  font-size: 1rem;
}

/* hover colour */
.bootstrap-iso .btn-primary:hover,
.bootstrap-iso .btn-danger:hover,
.bootstrap-iso .btn-info:hover,
.bootstrap-iso .btn-default:hover,
.bootstrap-iso .btn-warning:hover,
.bootstrap-iso .btn-success:hover,
.bootstrap-iso .btn-popup:hover,
.online-two-iso A.button-style:hover,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:hover,
.online-two-iso A.button-style.blue:hover,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:hover,
.online-two-iso A.button-style.gray:hover,
.benefit-matrix .row .btn-success:hover,
.benefitheader-fixed div#followup-items a.btn:hover,
.benefitheader-fixed div#resettodefaults a.btn:hover,
.benefit-matrix .confirm-checkout-button .btn-success:hover,
.btn.btn-info.claim-acknowledgment-print:hover {
  background-color: #686868;
  border: none;
  box-shadow: none;
  color: #fff;
  text-transform: none;
  font-size: 1rem;
}

/* focus colour */
.bootstrap-iso .btn-primary:focus,
.bootstrap-iso .btn-danger:focus,
.bootstrap-iso .btn-info:focus,
.bootstrap-iso .btn-default:focus,
.bootstrap-iso .btn-warning:focus,
.bootstrap-iso .btn-success:focus,
.bootstrap-iso .btn-popup:focus,
.online-two-iso A.button-style:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:focus,
.online-two-iso A.button-style.blue:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:focus,
.online-two-iso A.button-style.gray:focus,
.benefitheader-fixed div#followup-items a.btn:focus,
.benefitheader-fixed div#resettodefaults a.btn:focus,
.benefit-matrix .confirm-checkout-button .btn-success:focus,
.btn.btn-info.claim-acknowledgment-print:focus {
  background-color: #686868;
  border: none;
  box-shadow: none;
  color: #fff;
  outline: 3px solid var(--accessibility-outline);
  text-transform: none;
  font-size: 1rem;
}

/* when clicked colour */
.bootstrap-iso .btn-primary:active,
.bootstrap-iso .btn-primary:active:hover,
.bootstrap-iso .btn-primary:active:focus,
.bootstrap-iso .btn-danger:active,
.bootstrap-iso .btn-danger:active:hover,
.bootstrap-iso .btn-danger:active:focus,
.bootstrap-iso .btn-info:active,
.bootstrap-iso .btn-info:active:hover,
.bootstrap-iso .btn-info:active:focus,
.bootstrap-iso .btn-default:active,
.bootstrap-iso .btn-default:active:hover,
.bootstrap-iso .btn-default:active:focus,
.bootstrap-iso .btn-warning:active,
.bootstrap-iso .btn-warning:active:hover,
.bootstrap-iso .btn-warning:active:focus,
.bootstrap-iso .btn-success:active,
.bootstrap-iso .btn-success:active:hover,
.bootstrap-iso .btn-success:active:focus,
.bootstrap-iso .btn-popup:active,
.bootstrap-iso .btn-popup:active:hover,
.bootstrap-iso .btn-popup:active:focus,
.online-two-iso A.button-style:active,
.online-two-iso A.button-style:active:hover,
.online-two-iso A.button-style:active:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:hover,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:focus,
.online-two-iso A.button-style.blue:active,
.online-two-iso A.button-style.blue:active:hover,
.online-two-iso A.button-style.blue:active:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:hover,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:focus,
.online-two-iso A.button-style.gray:active,
.online-two-iso A.button-style.gray:active:hover,
.online-two-iso A.button-style.gray:active:focus,
.benefitheader-fixed div#followup-items a.btn:active,
.benefitheader-fixed div#followup-items a.btn:active:hover,
.benefitheader-fixed div#followup-items a.btn:active:focus,
.benefitheader-fixed div#resettodefaults a.btn:active,
.benefitheader-fixed div#resettodefaults a.btn:active:hover,
.benefitheader-fixed div#resettodefaults a.btn:active:focus,
.benefit-matrix .confirm-checkout-button .btn-success:active,
.benefit-matrix .confirm-checkout-button .btn-success:active:hover,
.benefit-matrix .confirm-checkout-button .btn-success:active:focus
.btn.btn-info.claim-acknowledgment-print:active,
.btn.btn-info.claim-acknowledgment-print:active:hover,
.btn.btn-info.claim-acknowledgment-print:active:focus {
  background-color: #000;
  border: none;
  box-shadow: none;
  color: #fff;
  outline: 3px solid var(--accessibility-outline);
  text-transform: none;
  font-size: 1rem;
}

/* for styling buttons that convey meaning of a negative action e.g. cancel/close/remove etc. */
.bootstrap-iso .modal-controls .btn-warning,
.online-two-iso A.button-style.gray,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning,
.bootstrap-iso .btn-warning.dependant-cancel-btn {
  background-color: #db0011;
}

.bootstrap-iso .modal-controls .btn-warning:hover,
.bootstrap-iso .modal-controls .btn-warning:focus,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:hover,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:focus,
.bootstrap-iso .btn-warning.dependant-cancel-btn:hover,
.bootstrap-iso .btn-warning.dependant-cancel-btn:focus {
  background-color: #686868;
}

.bootstrap-iso .modal-controls .btn-warning:active,
.bootstrap-iso .modal-controls .btn-warning:active:hover,
.bootstrap-iso .modal-controls .btn-warning:active:focus,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active:hover,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active:focus,
.bootstrap-iso .btn-warning.dependant-cancel-btn:active,
.bootstrap-iso .btn-warning.dependant-cancel-btn:active:hover,
.bootstrap-iso .btn-warning.dependant-cancel-btn:active:focus {
  background-color: #db0011;
}

/* hover effects */
.bootstrap-iso *[class*='btn btn-']:before,
.bootstrap-iso *[class*='btn  btn-']:before,
.bootstrap-iso *[class*='button-s']:before {
  content: '';
  width: 100%;
  height: 4em;
  background-color: #686868;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-5em, -1em, 0) rotate3d(0, 0, 1, -45deg);
  transform-origin: top left;
  transition: all 0.25s;
  z-index: -1;
}
.bootstrap-iso *[class*='btn btn-']:hover:before,
.bootstrap-iso *[class*='btn  btn-']:hover:before,
.bootstrap-iso *[class*='button-s']:hover:before,
.bootstrap-iso *[class*='btn btn-']:focus:before,
.bootstrap-iso *[class*='btn  btn-']:focus:before,
.bootstrap-iso *[class*='button-s']:focus:before {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}

/* 3d) lists */
/* unordered lists */
.fa-ul {
  margin-left: 0.84285714em;
}
.online-two-iso .modal-body#online2-global-benefit-overview-modaltemplate .tab-body UL {
  padding-left: 0;
}
.bootstrap-iso ul.fa-ul li {
  margin-left: 2.14285714em;
  list-style-type: disc;
}

/* ordered lists */
.bootstrap-iso ol {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: decimal;
}

/* 3e) popups */
/* header colour */
.online-two-iso .header-overlay,
.online-two-iso .tab-header,
.bootstrap-iso .modal-header {
  background-color: #fff;
  font-family: Universe_regular;
  font-size: 18px;
}
/* reset benefit intro popup to not have header overlay colour */
.online-two-iso [class*='LineDetail'] .tab-header {
  background-color: #fff;
}
/* modal footer color */
.online-two-iso .modal-controls {
	background-color: #fff;
}
/* header title colour */
#login-assistance .header-overlay #TitleResetPassword,
.bootstrap-iso .modellersModalHeader,
.bootstrap-iso .dependantModalHeader,
#followup-items-overlay.online-followup-items #followup-items-title,
.benefit-matrix .benefitheader,
#exit-confirm h5,
.benefitselect #allocationDialog h5,
.active-benefits .header,
.benefit-matrix .modal .modal-header .header,
.online-two-iso .modal-normal .modal-header .header-text,
.terms-conditions-cookies .cookiepolicy-header,
.terms-conditions-cookies .terms-condtion-header {
  color: #000;
  text-transform: none;
}
/* close icon */
.online-two-iso .header-overlay A.close,
.online-two-iso .modal-large .close,
html#profile body#profile .profile #profile-online-2 .header-overlay A {
  background: none;
  visibility: hidden;
}
.online-two-iso .header-overlay A.close:after,
.online-two-iso .modal-large .close:after,
html#profile body#profile .profile #profile-online-2 .header-overlay A:after {
  content: '\e014';
  color: #000;
  font-family: 'Glyphicons Halflings';
  visibility: visible;
}
/* reset benefit intro close icon to be default colour after resetting header background colour */
.online-two-iso .modal-large [class*='LineDetail'] .close:after {
  color: #000;
}

.bootstrap-iso .close,
.bootstrap-iso .close:hover,
.bootstrap-iso .close:focus,
.bootstrap-iso .close:active,
.bootstrap-iso .close:active:hover,
.bootstrap-iso .close:active:focus,
.online-two-iso .modal-normal .close {
  color: #000;
}
.bootstrap-iso .close:focus {
  outline: 3px solid var(--accessibility-outline);
}
/* position of close icon */
.online-two-iso .modal-large .close {
  top: 0.5em;
  right: 0.5em;
}
.header-overlay A {
  padding: 4px 0.5em 0 0;
}

/* life event dependant add/remove popup */
.dependantContainer .event-step-nav {
  text-align: right;
}
.bootstrap-iso .event-step-nav a.primary-link,
.bootstrap-iso .event-step-nav a.secondary-link {
  margin: 0;
}
.dependantContainer .button-container > a:last-child {
  margin-left: 0.5em;
}
.bootstrap-iso .event-step-nav a {
  border-radius: 25px;
  padding: 6px 12px;
  text-transform: none;
  transition: background-color 0.25s, color 0.25s;
}
.bootstrap-iso .event-step-nav a.secondary-link {
  background: #db0011;
  color: #fff;
}
.bootstrap-iso .event-step-nav a.primary-link {
  background: #db0011;
  color: #fff;
}
.bootstrap-iso .event-step-nav a.secondary-link:hover,
.bootstrap-iso .event-step-nav a.secondary-link:focus,
.bootstrap-iso .event-step-nav a.primary-link:hover,
.bootstrap-iso .event-step-nav a.primary-link:focus {
  background-color: #686868;
  color: #fff;
}
/*** Life events pop up styling ***/
.active-benefits .modal-body {
    color: #000;
}
@media only screen and (min-width: 1024px){
/*width and height*/
.active-benefits .events {
	height: 210px;
    width: 48%;
    }
  }
.active-benefits .event-img {
	height: 60%;
}
/* back button */
.active-benefits .glyphicon-chevron-left::before {
   display: none;
}
/* event name styling */
.active-benefits .active--event-radio {
	padding: 0 20px;
	text-align: left;
}
/* 3f) tab selectors e.g. Manage dependants widget, benefit intro, profile etc. */
.online-two-iso [class*='modal'] a.tab-selector-link:hover,
.online-two-iso [class*='modal'] .tab-selector-link.active,
html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A,
html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A:hover {
  color: #000;
  border-bottom: 0.5em solid #000;
}
.online-two-iso .modal-normal .tab-selector-link,
.online-two-iso .modal-large .tab-selector-link,
.online-two-iso .modal-normal .tab-selector-link.inactive,
.online-two-iso .modal-large .tab-selector-link.inactive,
html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A {
  color: #000;
}

/* 3g) accordions */
/*Panel title*/
.bootstrap-iso .panel-title {
	font-family: Universe_regular;
    font-size: 20px;
}
.bootstrap-iso .panel-heading {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* background colour */
.benefit-matrix .benefit-category .panel-default > .panel-heading,
.trsdashboard .panel-default > .panel-heading,
#benefit-overview #overviewAccordion .panel-default > .panel-heading {
  background-color: #333;
  padding: 0;
}
.bootstrap-iso .panel-heading .panel-title .accordion-toggle {
  display: block;
}
#benefit-overview #overviewAccordion .panel-title .accordion-toggle:focus {
  outline: 3px solid var(--accessibility-outline);
}
.trsdashboard .panel-title {
  padding: 0;
}
.trsdashboard .panel-title .accordion-toggle {
  padding: 10px 15px;
}
/* My shares, charitable, my choice accordions styling */
#my-shares .panel-default > .panel-heading,
#charitable-giving .panel-default > .panel-heading,
#my-choice .panel-default > .panel-heading {
	color: #fff;
	background-color: #333;
	border-color: #333;
}
#my-shares .panel-heading .panel-title .accordion-toggle,
#charitable-giving .panel-heading .panel-title .accordion-toggle,
#my-choice .panel-heading .panel-title .accordion-toggle {
	text-decoration: none;
}
/* expand/collapse icons */
.bootstrap-iso .glyphicon-menu-down,
.bootstrap-iso .glyphicon-menu-up {
  transition: all 0.25s;
  margin-right: 12px;
}
.bootstrap-iso .glyphicon-menu-up {
  transform: rotate(-180deg);
}
.bootstrap-iso .glyphicon-menu-down:before,
.bootstrap-iso .glyphicon-menu-up:before {
  font-family: 'Glyphicons Halflings';
  content: '\e259';
}

/* 3h) Info icons, slider toggles and label styling */
/* warning text */
.bootstrap-iso .text-danger {
	color: #db0011;
}
/* info icon color **/
.benefit-matrix .row.title .glyphicon-info-sign::before,
#step2LinePage .glyphicon-info-sign::before {
	content: url('/HSBC/media/images/Assets/StatusInformationOnDark.png');
}
.benefit-matrix .row.title .glyphicon-info-sign-color {
  color: #000;
}
.benefit-matrix .row.title .glyphicon-info-sign-color:hover,
.benefit-matrix .row.title .glyphicon-info-sign-color:focus {
  color: #686868;
}
.benefit-matrix .row.title .glyphicon-info-sign-color:focus {
  outline: 3px solid var(--accessibility-outline);
}

/* slider toggle color */
.online-two-iso input:checked + .slider {
  background-color: #000;
}
.online-two-iso input:checked + .slider .toggle-option.on {
	color: #fff;
}
/* label styling e.g. "Note:" labels */
.bootstrap-iso .label {
  background-image: none;
}
.online-two-iso label {
	color: #000;
}
/* validation red */
.online-two-iso .validation-rules li.failed {
	color: #db0011;
}

/* 3i) logo */
#logo {
  background-image: var(--logo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px){
  #logo {
	margin-left: 60px;
	margin-bottom: 15px;
    height: 100px;
    width: 185px;
}
  }
/* centering logo on mobile view */
@media only screen and (max-width: 750px) {
  #logo {
    width: calc(100vw - 100px);
  }
}

/* 3j) site header */
/* remove top margin in IE */
.lt-ie9 #header {
  margin-top: 0;
}
/* header colour */
.online-two-iso #terminator #header.header-fullwidth {
  background-color: #000;
}
@media only screen and (min-width: 751px) {
  .online-two-iso #terminator #header.header-fullwidth {
     padding: 1.5rem 0 0 0.6rem;
 }
  }
/* header icons profile, mailbox and logout, and main 'home' link */
@media only screen and (min-width: 751px) {
  .online-two-iso #menu-container {
    height: auto !important;
    width: 95vw;
    margin: 0 0 10px;
  }
  .online-two-iso #menu-no-dashboard {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .online-two-iso #menu-no-dashboard li {
    padding: 0.5em;
  }
  #menu-container ul#menu-no-dashboard li a,
  #user-div a {
    color: #fff;
  }
  .online-two-iso #headerResources #links LI:first-child {
	padding-right: 2em;
  }
}
@media (min-width: 767px) {
  .online-two-iso #menu-container {
    padding: 0;
  }
}

/* need assistance pull down tab */
.help-ico .helptoggle,
.lt-ie9 .help-ico a {
  background-image: none !important;
  background-color: #fff;
}
#header .help-ico a.helptoggle {
  color: #000;
  margin-right: 2rem;
  text-decoration: none;
}
/* use font awesome play icon to repreent the expanded/collaped menu icon */
#header .help-ico a.helptoggle[aria-expanded='true']:after,
#header .help-ico a.helptoggle[aria-expanded='false']:after {
  font-family: FontAwesome;
  content: '\f04b';
  color: #000;
  display: inline-block;
  transform: rotate(90deg);
  font-size: 0.75rem;
  position: relative;
  left: 1em;
  top: -1px;
}
/* this ensures the icon faces up when the menu is expanded */
#header .help-ico a.helptoggle[aria-expanded='true']:after {
  transform: rotate(-90deg);
}

/* remove search */
#floating-header-content .search {
  display: none;
}
/*remove default icons */
#floating-header-content a {
  background: none;
}
/*general styling for font icons to be used*/
#floating-header-content .chat a:before,
#floating-header-content .call a:before,
#floating-header-content .mail a:before {
  font-family: FontAwesome;
  margin-left: -1em;
  padding-right: 0.25em;
  font-size: 2rem;
  vertical-align: middle;
}
/*chat icon*/
#floating-header-content li#webChatStatus #chatUnavailable a:before,
#floating-header-content li#webChatStatus #chatAvailable a:before {
  content: '\f0e6';
}
/*call icon*/
#floating-header-content li.call a:before {
  content: '\f10b';
}
/*mail icon*/
#floating-header-content li.mail a:before {
  content: '\f003';
}

@media only screen and (min-width: 768px) {
  /* link color and width for phone and email links */
  #floating-header-content a {
    color: #000;
    width: auto;
    padding: 0 1em;
  }
  /* hover colour of links in floating header */
  #header a:focus, #header a:hover {
    color: #686868;
    text-decoration: none;
  }
  /* focus colour of links in floating header */
  #header a:focus {
    color: #686868;
    outline: 3px solid var(--accessibility-outline);
  }
}

/* 3k) site footer */
/* footer colour */
.online-two-iso #terminator #footer.footer-fullwidth {
  background-color: #000;
}
/* footer link color */
.online-two-iso #footer a {
  color: #fff;
  font-family: Universe_light;
}
/* copyright */
#footer-copyright {
  color: #fff;
  font-size: 0.75rem;
  padding: 0 0 0 17px;
  margin: 9px 0;
}
@media only screen and (min-width: 768px) {
  /* display nav items in one line */
  #footer.footer-fullwidth nav ul#footer-links li {
    display: inline-block;
  }
}
 /* footer UL Li*/
@media only screen and (min-width:751px){
	  .online-two-iso #footer li {
	    float:left; 
	    list-style:none;
	  }	  
	  .online-two-iso #footer li:not(:first-of-type) a {
	    border-left: 1px solid;
	  }  
    .online-two-iso #footer a {
	   padding: 0 1em;
       line-height: 1em;
    }
 }
/* contact us page*/
.contact-content {
  font-size: 1rem;
  color: #000;
}
.contact-content a {
  text-decoration: underline;
}

/* 3l) datepickers */
/* override font size */
.bootstrap-iso .uib-datepicker .btn {
	font-size: 0.75rem;
    text-transform: none;
}
/* button that launches datepicker */
.online-two-iso .datepicker-container .input-group-btn .btn,
/*datepicker on benefit statement */
.bootstrap-iso .btn.online-two-datepicker {
  background-color: #db0011;
  border-color: #db0011;
}
.online-two-iso .datepicker-container .input-group-btn .btn:active:hover,
.online-two-iso .datepicker-container .input-group-btn .btn:active:focus,
.bootstrap-iso .uib-datepicker .btn:hover,
.bootstrap-iso .uib-day .btn.btn-default:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success {
  border-radius: 0;
}
/* selected date */
.uib-datepicker .btn.btn-sm.active span {
  color: #fff;
}
/* today, clear and close buttons */
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info,
.templates .uib-datepicker-popup .btn-sm.btn-info {
  background-color: #000;
  border: 2px solid #000;
  text-transform: none;
}

.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger,
.templates .uib-datepicker-popup .btn-sm.btn-danger {
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  text-transform: none;
}
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success,
.templates .uib-datepicker-popup .btn-sm.btn-success {
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  min-width: auto;
  text-transform: none;
}
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:focus,
.templates .uib-datepicker-popup .btn-sm.btn-info:hover,
.templates .uib-datepicker-popup .btn-sm.btn-info:focus,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:focus,
.templates .uib-datepicker-popup .btn-sm.btn-danger:hover,
.templates .uib-datepicker-popup .btn-sm.btn-danger:focus,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:focus,
.templates .uib-datepicker-popup .btn-sm.btn-success:hover,
.templates .uib-datepicker-popup .btn-sm.btn-success:focus {
  background-color: #686868;
  border: 2px solid #686868;
  color: #fff;
  text-transform: none;
}
.bootstrap-iso .uib-datepicker-popup .btn-info.active,
.templates .uib-datepicker-popup .btn-info.active,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active:focus,
.templates .uib-datepicker-popup .btn-sm.btn-info:active,
.templates .uib-datepicker-popup .btn-sm.btn-info:active:hover,
.templates .uib-datepicker-popup .btn-sm.btn-info:active:focus,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active:focus,
.templates .uib-datepicker-popup .btn-sm.btn-danger:active,
.templates .uib-datepicker-popup .btn-sm.btn-danger:active:hover,
.templates .uib-datepicker-popup .btn-sm.btn-danger:active:focus,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:focus,
.templates .uib-datepicker-popup .btn-sm.btn-success:active,
.templates .uib-datepicker-popup .btn-sm.btn-success:active:hover,
.templates .uib-datepicker-popup .btn-sm.btn-success:active:focus {
  background-color: #000;
  color: #fff;
  font-size: 0.75rem;
  text-transform: none;
}

/* hovering over day to be picked */
.bootstrap-iso .uib-day .btn.btn-default:hover,
.templates .uib-day .btn.btn-default:hover {
  background-color: #686868;
  border: 1px solid #ccc;
  color: #fff;
}

/* previous, current month/year, and next buttons at top of datepicker */
.bootstrap-iso .uib-datepicker th .btn:hover,
.bootstrap-iso .uib-daypicker th .btn:hover,
.templates .uib-datepicker th .btn:hover,
.templates .uib-daypicker th .btn:hover {
  background-color: #686868;
  border: 1px solid #ccc;
}

/* 3m) Inputs */
input:focus,
.bootstrap-iso .form-control:focus {
  border-color: #db0011;
  box-shadow: none;
  outline: 3px solid var(--accessibility-outline);
}
.bootstrap-iso .form-control,
.bootstrap-iso .input-group-addon {
	color: #000;
}
input, textarea {
	font-size: 1.2em;
	color: #000;
}
/* 3n) tables */
.bootstrap-iso .table > thead > tr > td.info,
.bootstrap-iso .table > tbody > tr > td.info,
.bootstrap-iso .table > tfoot > tr > td.info,
.bootstrap-iso .table > thead > tr > th.info,
.bootstrap-iso .table > tbody > tr > th.info,
.bootstrap-iso .table > tfoot > tr > th.info,
.bootstrap-iso .table > thead > tr.info > td,
.bootstrap-iso .table > tbody > tr.info > td,
.bootstrap-iso .table > tfoot > tr.info > td,
.bootstrap-iso .table > thead > tr.info > th,
.bootstrap-iso .table > tbody > tr.info > th,
.bootstrap-iso .table > tfoot > tr.info > th {
  background-color: #fff;
  color: #000;
}

/* Green Car intro */
table.GreenCar td {
  padding: 0 10px;
  width: 20%;
}
table.GreenCar tr:nth-child(1) {
  background-color: #e8e8e8;
}
/*================================================================================================== 4. Login page  ==================================================================================================*/
/* login module font*/
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules,
.online-two-iso.login .LoginPageContainer .login-panel {
	font-family: Universe_light;
}
/* login image */
  .online-two-iso.login body {
    background-image: var(--login-image);
}
/* panel margin with logo update */
.online-two-iso.login .LoginPageContainer #main {
	margin-top: 1%;
}
/* login button */
.online-two-iso.login .LoginPageContainer .btn.btn-primary#login {
	font-size: 17px;
	padding: 2px 25px;
    background-color: #db0011;
}
/* forgot password link */
#wp-forgetPassword {
  color: #000;}
#wp-forgetPassword > div:hover {
  text-decoration: underline;
}
#wp-forgetPassword > div:focus {
  outline: 3px solid var(--accessibility-outline);
}
/* input box*/
.online-two-iso.login .LoginPageContainer .input-group input, 
.online-two-iso.login .LoginPageContainer .input-group .input-group-addon {
	color: #000;
    font-size: 17px;
}
/* module headings */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-title {
  color: white;
  font-size: 1.2rem;
}
/* welcome module heading */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-text {
  width: 100%;
}
.online-two-iso #login-module-login-page-welcome h2 {
  display: none;
}
.online-two-iso #login-module-login-page-welcome .module-text h1 {
  color: white;
  font-size: 3vw;
  text-align: center;
  width: 100%;
}

/* Set font for icons in assistance module */
.bootstrap-iso #login-module-need-assistance span.glyph-icon:before {
  width: 25px;
  display: inline-block;
  font-family: Glyphicons Halflings;
  font-size: 0.875rem;
}
/* Apply icon for phone */
.bootstrap-iso #login-module-need-assistance span#glyph-phone:before {
  content: '\e182';
}
/* Apply icon for email */
.bootstrap-iso #login-module-need-assistance span#glyph-mail:before {
  content: '\2709';
}
#glyph-mail a {
  text-decoration: underline;
}
/* module links */
#login-modules-container a {
  color: white;
}

/* structure of login panel and styling of error message */
.online-two-iso.login .LoginPageContainer span#errMsg {
  background: #fff;
  color: #db0011;
  padding: 5px;
}
.login-panel .additional-services {
  margin-top: 1em;
}
#wp-login {
  display: flex;
  flex-direction: column;
}
#login,
.login-panel #errMsg,
.login-panel .additional-services {
  align-self: flex-end
}

@media only screen and (min-width: 768px) {
  .online-two-iso .LoginPageContainer #logo{
	margin-left: 5%;
	margin-top: 1em;
  }
  /* login module background colour */
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
@media only screen and (min-width: 375px) and (max-width: 767px) {
  /* centering logo */
  #wrapper.isLoginPageWrapper #header #logo {
    float: none;
    margin: 0 auto;
  }
  /* margin between header and login box */
  #wrapper.isLoginPageWrapper #header {
    width: 100%;
    margin: 20px 0;
  }
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background: none;
  }
}

/* module widths */
@media only screen and (min-width: 1200px) {
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module#login-module-login-page-welcome {
    width: calc(85% - 450px) !important;
  }
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module#login-module-need-assistance {
    padding-left: 10%;
    width: calc(15% + 450px) !important;
  }
}

/****************************************** first time user page styling ************************/
.online-two-iso .validation-caption {
  color: #000;
}
/* heading */
.bootstrap-iso.login-frst-time h2 {
  font-family: Universe_regular;
  padding-bottom: 20px;
}
/* password label */
.bootstrap-iso.login-frst-time label {
  font-size: 1em;
}
/* hide right icon on save */
.login-frst-time .glyphicon-chevron-right::before {
  display: none;
}
/* save button */
.login-frst-time .btn.btn-warning.btn-lg {
  background-color: #db0011;
}
/****************************************** Terms page (for agreeing to terms and cookie notice) *******************************************/
.terms-conditions-cookies .terms-conditions-cookies-header {
  padding-left: 0;
}
.terms-conditions-cookies .term-condition-error,
.terms-conditions-cookies .cookie-notice,
.terms-conditions-cookies .term-enabled {
  margin-left: 0;
}
.bootstrap-iso .cookie-notice.radio input,
.bootstrap-iso .term-enabled.radio input {
  margin-top: 0;
}

.terms-conditions-cookies .term-condition-error {
  background-color: #e52321;
  color: white;
  border: none;
}
/* hide page header when in the modal content so title isn't duplicated */
.terms-conditions-cookies #page-header {
  display: none;
}
/* list styling for terms content for popup and for main terms page in footer */
.terms-conditions-cookies ol,
.bootstrap-iso#termsOfUse ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.terms-conditions-cookies ol > li,
.bootstrap-iso#termsOfUse ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}
.terms-conditions-cookies ol > li:before,
.bootstrap-iso#termsOfUse ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}
.terms-conditions-cookies ol.main-list > li:before,
.bootstrap-iso#termsOfUse ol.main-list > li:before {
  font-size: 24px;
  padding-right: .25em;
}
.terms-conditions-cookies li ol > li,
.bootstrap-iso#termsOfUse li ol > li {
  margin: 0;
}
.terms-conditions-cookies li ol > li:before,
.bootstrap-iso#termsOfUse li ol > li:before {
  content: counters(item, ".") " ";
}

/*================================================================================================== 5. Home page  ==================================================================================================*/
/* header font family */
#header .help-ico a.helptoggle,
#menu-container ul#menu-no-dashboard li a, #user-div a,
#home-online-three .dashboard-controls {
	font-family: Universe_light;
}

/*Navigation item styling*/
#menu-container ul li:not(:first-of-type) a {
	border-left: 1px solid #fff;
	padding-left: 0.7em;
}

/* restrict viewport to 1820px */
#home-online-three .modules-sleeve {
  float: none;
  max-width: 1820px;
  margin: 0 auto;
}
#home,
.dashboard-page-container {
  background: #e0e0e0;
}
/* margin between main element and footer */
#main.home {
  margin-bottom: 1.5em;
}
/* general grid and module styling */
#home-online-three #home-integrated .modules-right-side.grid-container {
  grid-gap: 1em;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
  padding: 0;
}
/*Module button text transform*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default {
	text-transform: unset;
}
/* enrolment module styling */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content {
	background: #333;
	box-shadow: none;
}
.home-module-enrolment-content h4 {
    font-size: 1rem;
}
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content#enrolment .enrollment-copy .event-summary .days-left,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#enrolment .enrollment-copy .event-summary .days-left {
	vertical-align: revert;
	font-family: Universe_medium;
}
/* enrolment button pulse */
#event-renewal .btn.btn-default {
  -webkit-animation: white-pulse 2s infinite;
  animation: white-pulse 2s infinite;
}

/* benefit statement module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement.module-content {
	background: #fff;
	box-shadow: none;
}
#benefit-statement-chart-container div{
	width: 79% !important;
	left: 10% !important;
}
#benefit-statement-chart-container {
	margin-top: 2%;
}
.benefit-statement-information.ng-scope {
	padding-top: 3%;
}
.payslip-item-amount {
  font-size: 0.9rem;
}
/* benefit statement font*/
.benefit-statement-information .payslip-item-name,
.benefit-statement-information .payslip-item-amount {
	font-family: Universe_thin;
  font-weight: normal;
}
.benefit-statement-information .payslip-item-amount,
.benefit-statement-information #item-2 span {
  font-weight: bold;
}
/*My pension and shares module button styling*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .my-pension.module-content .generic-buttons .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .shares.module-content .generic-buttons .btn.btn-default {
	background: #fff;
	border: 2px solid #000;
	color: #000;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .my-pension.module-content .generic-buttons .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .my-pension.module-content .generic-buttons .btn.btn-default:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .my-pension.module-content .generic-buttons .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .my-pension.module-content .generic-buttons .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .my-pension.module-content .generic-buttons .btn.btn-default:active:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .shares.module-content .generic-buttons .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .shares.module-content .generic-buttons .btn.btn-default:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .shares.module-content .generic-buttons .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .shares.module-content .generic-buttons .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .shares.module-content .generic-buttons .btn.btn-default:active:focus {
	border: 2px solid #757575;
	color: #fff;
}
/* charitable giving module */
.module-content.charitable p {
  padding: 0 7%;
}
/* well one module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.well-one {
  background: #fff;
}
#home-online-three #home-integrated .well-one .module-content-header-container h3.module-content-header {
  color: #fff;
}

/* well one money module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .well-one-money.module-content {
  background: linear-gradient(to bottom right, #6BBFA7, #9DD1CC);
}

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.white-outline-button .btn.btn-default {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
/* homepage buttons */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.outline-button .btn.btn-default {
  background: transparent;
  border: 1px solid #000;
  color: #000;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.outline-button .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.outline-button .btn.btn-default:focus {
  color: #fff;
}
.bootstrap-iso .outline-button [class*="btn btn-"]:hover:before {
  background: #686868;
}

/* greeting, module and carousel heading colour */
#home-online-three .dashboard-controls #greeting-message {
	font-size: 19px;
}
#home-online-three .dashboard-controls #greeting-message,
#home-online-three #home-integrated .module-content-header-container h3.module-content-header {
  color: #000;
}
#home-online-three #home-integrated .module-content-header-container h3.module-content-header {
  font-size: 1.3rem;
  font-family: Universe_medium;
}
#home-online-three .dashboard-controls {
	height: 4.5rem;
	margin: 0 0 1rem 0;
	background-color: #fff;
	padding-left: 1rem;
}
/* make background colour of grid container and modules the same */
#home-online-three #home-integrated .modules-right-side.grid-container,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
  background-color: #e0e0e0;
}

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content:focus {
  outline: 1px solid var(--accessibility-outline);
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content {
  padding: 1rem;
}
/* modules styling */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content,
.bootstrap-iso .carousel.home-module-integrated {
  background: white;
  border: none;
  border-radius: 0px;
}
/* hide module more info icon */
#home-online-three #home-integrated .module-content-header-container .online-three-module-popover-control {
  display: none;
}
/* module content text colour */
#home-online-three #home-integrated p,
.event-summary,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light {
  color: #000;
}

/* module icon styling*/
[class*='online-two-icon-']:before {
  color: #000;
  font-family: OnlineTwoIconFont;
  font-size: 6rem;
}
/* benefit information icon */
.online-two-icon-136:before {
  content: '\e98b';
}
/* my pension icon */
.online-two-icon-32:before {
  content: '\e91f';
}
/* my shares icon*/
.online-two-icon-123:before {
  content: '\e97e';
}
/* wellbeing icon*/
.online-two-icon-71:before {
  content: '\e947';
}
/* charitable icon */
.online-two-icon-127:before {
  content: '\e982';
}
/* perks icon */
.online-two-icon-48:before {
  content: '\e930';
}
/* best service icon */
.online-two-icon-89:before {
  content: '\e95c';
}
/* enrolment icon */
.online-two-icon-60:before {
  content: '\e93c';
  color: #fff;
}

/*hide enrolment icon on large screen*/
@media only screen and (min-width: 1400px) { 
  .home-module-enrolment-content .online-two-icon-60 {display: none;} 
}

/*** carousel styling ***/
/* hide carousel hamburger menu */
.home-module-integrated .welcome-items {
  display: none;
}
/*Remove space below thumbnail*/
@media only screen and (min-width: 1400px){
#home-module-welcome #slider, .home-module-integrated #slider {
	height: 649px!important;
    }
}
/* faded background on carousel content and reduce indent */
.home-module-integrated #slider .sliderContainer .slide-content {
  background: rgba(255,255,255,.8);
  margin: 1rem;
  min-width: 60%;
}
/* remove margin around carousel content and set colour */
#home-online-three #home-integrated .home-module-integrated .content p {
  margin: 0;
  color: #000;
  font-size: 1.2em;
}
/* carousel slide content headings */
.home-module-integrated .content h2,
.home-module-integrated .content h3 {
  margin-top: 0;
  color: #000;
}
/* pension carousel styling */
.home-module-integrated #PensionSlide .content h2, 
#home-online-three #home-integrated .home-module-integrated #PensionSlide .content p {
	color: #000;
}
/*Ukraine Appeals & Green Cars Carousel Styling 
.home-module-integrated #slider .sliderContainer #ukraineAppeals .slide-content,
.home-module-integrated #slider .sliderContainer #touch .slide-content
{
    width: 65%;
}*/
/* carousel content buttons */
.home-module-integrated #slider .sliderContainer .slide-content .content .btn {
  font-size: 1rem;
}
/* navigation icons */
.home-module-integrated .jssora106 {
  transform: scale(1.2) translateY(1rem)!important;
}
.home-module-integrated .jssora106 .c {
  fill: #db0011;
  opacity: 1
}
.home-module-integrated .jssora106 .a {
  stroke: #fff
}
/* adjust width of carousel thumbnails */
.home-module-integrated #slider .thumb .rect {
  width: 190px;
}
/* background of thumbnail container */
.home-module-integrated #slider .thumb {
  background: #ededed;
}

@media only screen and (min-width: 768px) {
  /* benefit statement payslip data item styling */
  #item-0,
  #item-1,
  #item-2 {
    width: calc(100% - 2em);
    margin-left: 1em;
    text-align: left;
    font-weight: bold;
  }
  .payslip-item-amount {
    float: right;
  }
  #item-1 {
    border-bottom: 1px solid #333;
  }
}
@media only screen and (min-width:768px){
  .event-summary {
    color: #fff;
  } 
   /* enrolment button styling */
  #home-online-three #home-integrated #enrolment .btn.btn-default{
    background-color: #fff;
    color: #000;
  }
  #home-online-three #home-integrated #enrolment .btn.btn-default:hover,
  #home-online-three #home-integrated #enrolment .btn.btn-default:focus,
  #home-online-three #home-integrated #enrolment .btn.btn-default:active,
  #home-online-three #home-integrated #enrolment .btn.btn-default:active:hover,
  #home-online-three #home-integrated #enrolment .btn.btn-default:active:focus{
    color: #fff;
  }
  #home-online-three #home-integrated #enrolment .btn.btn-default:hover::before,
  #home-online-three #home-integrated #enrolment .btn.btn-default:focus::before,
  #home-online-three #home-integrated #enrolment .btn.btn-default:active::before,
  #home-online-three #home-integrated #enrolment .btn.btn-default:active:hover::before,
  #home-online-three #home-integrated #enrolment .btn.btn-default:active:focus::before {
	background-color: #db0011;
    color: #fff;
  }
  /* text styling */
  #home-online-three #home-integrated #enrolment h3,
  #home-online-three #home-integrated #enrolment h4,
  #home-online-three #home-integrated #enrolment p,
  #home-online-three #home-integrated .well-one-money .module-content-header-container h3.module-content-header,
  #home-online-three #home-integrated .well-one-money .content-text p,
  #home-online-three #home-integrated .well-one-money .content-text .online-two-icon-32:before {
    color: white;
  }
}
/* arranging open events horizontally in enrolment module */
@media only screen and (min-width: 1400px){
  .event-summary {
    display: flex;
    justify-content: space-around;
  }
}
/*align buttons to the bottom*/
@supports not (-ms-high-contrast: none) {
@media only screen and (min-width: 768px) {
/* make module items flex containers and set direction and size */
.module-content,
.module-content > div,
.module-content > div > div,
.module-content > div > div > div:last-child,
.module-content > div > div > div:last-child .module-copy,
.module-content > div > div > div:last-child .module-copy .content-text,
.module-content > div > div > div:last-child .module-copy > div:last-child,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-active,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-inactive,
.module-content > div > div > div > div.module-copy > div:last-child div.event-content div.text-light,
.module-content > div > div .home-module-generic-content .generic-copy.module-copy .generic-buttons,
.module-content > div > div > div:last-child .module-copy > .trs-buttons,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-buttons {
display: flex;
flex-direction: column;
flex: 1;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager {
position: static;
transform: none;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding-top: 0.5em;
}
/* align flex containers housing buttons to bottom of module */
#generic.module-content > div > div .home-module-generic-content .generic-copy.module-copy .generic-buttons,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-active,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-inactive,
.module-content > div > div > div:last-child .module-copy .benefit-statement-buttons,
.module-content > div > div > div:last-child .module-copy > .trs-buttons,
.module-content > div > div > div:last-child .module-copy > .account-buttons,
.module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-buttons {
justify-content: flex-end;
}
/* remove margin on certain containers to ensure buttons align at the bottom of module */
.module-content > div > div > div:last-child .module-copy .content-text,
.module-content > div > div > div:last-child .module-copy .content-text p:last-of-type:not(:first-of-type) {
margin: 0; }
}
}
/*Width of home page buttons*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default {
	width: 90%;}

/*profile, Log out and message icon styling*/
/* hide profile link */
#header #user-div > a:first-child {
   display: none;
}
#header #user-div a {
  font-size: 1.2em;
}
/*Benefit info module spacing*/
@media only screen and (min-width: 1400px){
  .benefit-info p {
	padding: 0 9%;
   }
}
/*================================================================================================== 6. Benefit overview  ==================================================================================================*/
/* font family */
#benefit-overview h1,
#benefit-overview a,
#benefit-overview H3.summaryTitle,
#benefit-overview .benefit-overview-title,
#benefit-overview .benefit-overview-title H1,
#benefit-overview .overview-component {
  font-family: Universe_light;
}
/* panel title */
#benefit-overview .group-title {
	font-family: Universe_regular;
    font-weight: normal;
}
#benefit-overview #overviewAccordion .panel-title {
	font-size: 20px;
	padding: 0 0 6px 0;
}
/* heading */
#benefit-overview .benefit-overview-title {
  padding: 0;
}
#benefit-overview .benefit-overview-title H1 {
  color: #000;
  font-size: 2rem;
  line-height: 1;
}
/* Summary content box */
#benefit-overview .summaryContent {
	padding: 20px 12px 6px 12px;
}
/* Summary image box */
#benefit-overview .summaryImage {
	vertical-align: middle;
}
/* benefit filter dropdown */
.bootstrap-iso#benefit-overview #BenefitNameFilter {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  color: #000;
  text-transform: none;
  text-align: left;
  width: 100%;
  overflow: hidden;
  font-size: 14px;
}

/* clear filter button */
.bootstrap-iso#benefit-overview .clear-filter {
  background-color: #db0011;
  border: none;
  color: #fff;
}
.bootstrap-iso#benefit-overview .clear-filter:hover,
.bootstrap-iso#benefit-overview .clear-filter:focus {
  background-color: #686868;
  color: #fff;
}
.bootstrap-iso#benefit-overview .clear-filter:active,
.bootstrap-iso#benefit-overview .clear-filter:active:hover,
.bootstrap-iso#benefit-overview .clear-filter:active:focus {
  background-color: #000;
  color: #fff;
}

/* know more buttons */
#benefit-overview .know-more-link .aria {
  display: none;
}
.bootstrap-iso#benefit-overview .btn.know-more-link {
  background-color: #000;
  border: none;
}
.bootstrap-iso#benefit-overview .know-more-link A {
  color: #fff;
  padding: 0;
}
.bootstrap-iso#benefit-overview .btn.know-more-link:hover,
.bootstrap-iso#benefit-overview .btn.know-more-link:focus {
  background-color: #686868;
}
.bootstrap-iso#benefit-overview .know-more-link A:hover,
.bootstrap-iso#benefit-overview .know-more-link A:focus {
  color: #fff;
}
.bootstrap-iso#benefit-overview .btn.know-more-link:active,
.bootstrap-iso#benefit-overview .btn.know-more-link:active:hover,
.bootstrap-iso#benefit-overview .btn.know-more-link:active:focus {
  background-color: #000;
}
.bootstrap-iso#benefit-overview .know-more-link A:active,
.bootstrap-iso#benefit-overview .know-more-link A:active:hover,
.bootstrap-iso#benefit-overview .know-more-link A:active:focus {
  color: #fff;
}
/* To handle white space in faq */
#FAQs .col-md-3.hidden-xs.hidden-sm.text-center.benefit-information {
  margin-bottom: -220px;
}
/* To hide scroll bar in learn more */
.online-two-iso .modal-large .modal-body .pannel-body-full {
	overflow-x: hidden;
}
/*================================================================================================== 7. Benefit statement  ==================================================================================================*/
/* remove pending benefits icon */
#benefitStatementFutureBenefits .glyphicon {
  display: none;
}
.benefit-matrix .benefitdate .data-addon {
  color: #000;
}
.benefit-matrix .benefitdate {
	text-transform: none;
    border: 1px solid #000;
}
/* confirmation text */
.bootstrap-iso .text-success {
	color: #000;
}
/* date text color */
.benefit-matrix .benefitheader.asatdate span {
	color: #000;
}
/* hide print icon */
.bootstrap-iso .glyphicon-print::before {
	display: none;
}
/* date input box */
.benefit-statement .input-group .form-control {
  border-color: #000;
}
/* view follow up container colour */
.bootstrap-iso .alert-info.hdf-followup {
  background-color: #db0011;
  color: white;
}
/* print button */
.btn.btn-warning.btn-print {
  padding: 9px;
}
/****************************************** benefit statement view follow up popup *******************************************/
.benefit-matrix .modal .hdf-followup {
  padding: 0;
}
/* overlay header */
.benefit-matrix .modal .modal-header .header {
  font-family: Universe_regular;
}
.benefit-matrix .modal .hdffollowup-intro {
  color: #000;
}

/*================================================================================================== 8. Benefit matrix  ==================================================================================================*/
/* DYE pop up button */
.benefit-matrix #dyenotnow, .benefit-matrix #dyecontinue {
	min-width: 20%;
}
/* focus styling for tabbable content */
.benefit-matrix div[tabindex="0"]:focus {
  outline: 3px solid var(--accessibility-outline);
}
/**** Font styling ****/
/* Benefit header */
.benefit-matrix .lineheader {
	font-family: Universe_light;
    font-size: 24px;
}
/* cost and benefit line */
.benefit-matrix .font-youpay-color {
	font-family: Universe_light;
    font-weight: normal;
}
.totalcost .font-youpay-color,
.benefit-matrix .group-default {
    font-family: Universe_regular;
    text-transform: none;
}
/* text transform */
.benefit-matrix .benefitheader.benefitheader-border {
	text-transform: none;
}
/* all numerical values */
.benefit-matrix .font-youpay-color,
.benefit-matrix .glyphicon-play-color,
.benefit-matrix .benefit-category .benefitline,
.benefit-matrix .totalcost-section-row .totalcostsection {
  color: #000;
}

/* modellers and tools section */
.benefit-matrix .benefitheader.benefitheader-border {
  border-color: #000;
  color: #000;
}
.benefit-matrix .benefitheader.benefitheader-border:hover,
.benefit-matrix .benefitheader.benefitheader-border:focus {
  background-color: #686868;
  color: #fff;
}
/* change icon font family that's used */
.bootstrap-iso.benefit-matrix .glyphicon-gift:before,
.bootstrap-iso.benefit-matrix .glyphicon-cog:before,
.bootstrap-iso.benefit-matrix .glyphicon-refresh:before {
  font-family: FontAwesome;
}
/* modellers and tools widget */
.bootstrap-iso.benefit-matrix .glyphicon-cog:before {
  content: '\f085';
}
/* manage dependants widget */
.bootstrap-iso.benefit-matrix .glyphicon-gift:before {
  content: '\f0c0';
}
/* adding it up widget */
.bootstrap-iso.benefit-matrix .glyphicon-refresh:before {
  content: '\f1ec';
}

/* confirm choices button */
.benefitheader-fixed div#followup-items a.btn {
  -webkit-animation: shadow-pulse 2s infinite;
  animation: shadow-pulse 2s infinite;
  background-color: #db0011;
  border-radius: 0;
  color: #fff;
}
.benefitheader-fixed div#followup-items a.btn:hover {
  background-color: #686868;
  border-radius: 0;
  color: #fff;
}
.benefitheader-fixed div#followup-items a.btn:focus {
  background-color: #686868;
  border-radius: 0;
  color: #fff;
}
.benefitheader-fixed div#followup-items a.btn:active,
.benefitheader-fixed div#followup-items a.btn:active:hover,
.benefitheader-fixed div#followup-items a.btn:active:focus {
  background-color: #000;
  border-radius: 0;
  color: #fff;
}
/* hide reset to default button */
.benefitheader-fixed div#resettodefaults a.btn {
  display: none;
}

/* monthly annual pay toggle styling
monthly button active */
.bootstrap-iso .btn-warning.active.btn-perpay {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
/* annual button active */
.bootstrap-iso .btn-warning.active.btn-peranual {
  background-color: #000;
  border-color: #000;
}
/*monthly button inactive */
.bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle) {
  border-color: #000;
}
/*annual button inactive */
.bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child) {
  border-color: #000;
}
/* hover and focus states of toggle */
.bootstrap-iso .btn-warning.active.btn-perpay:hover,
.bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle):hover,
.bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle):focus,
.bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child):hover,
.bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child):focus {
  border: 1px solid #000;
  border-radius: 0;
}

/* accordions */
.benefit-matrix .benefit-category .panel-default > .panel-heading,
.benefit-matrix .benefit-category .panel-title {
  padding: 0;
}
.benefit-matrix .benefit-category .panel-title .accordion-toggle {
  display: block;
  padding: 10px;
}
.benefit-matrix .benefit-category .panel-title .accordion-toggle:focus {
  outline: 3px solid var(--accessibility-outline);
}
/* panel text colour for accordions */
.benefit-matrix .benefit-category .panel-title {
  color: #000;
}
/* benefits you can choose*/
.benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle {
  background: #76bc21;
}
.benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle:hover,
.benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle:focus {
  background-color: #76bc21;
}
/* benefits you many be able to choose */
.benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading .panel-title .accordion-toggle {
  background: #ff9015;
}
.benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading .panel-title .accordion-toggle:hover,
.benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading .panel-title .accordion-toggle:focus {
  background-color: #ff9015;
}
/* benefits you cannot choose */
.benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading .panel-title .accordion-toggle {
  background: #ff0000;
}
.benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading .panel-title .accordion-toggle:hover,
.benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading .panel-title .accordion-toggle:focus {
  background-color: #ff0000;
}
/* preventing default link hover stlying for expanding/collapsing accordions */
a.accordion-toggle:hover,
a.accordion-toggle:focus,
a.accordion-toggle:active,
a.accordion-toggle:active:hover,
a.accordion-toggle:active:focus {
  color: white;
}

/* selected benefit tick mark styling */
.benefit-selected-box {
  /*this position of the parent is important to the position of the child*/
  position: relative;  
  transition: all 0.5s ease;
}
.benefit-selected-box .benefitline {
  border: 2px solid #000;
}
.benefit-selected-box .benefitline::before {  
  /*checkbox container styling*/
  height: 30px;
  width: 30px;  
  display: -ms-flexbox;
  display: flex;  
  justify-content: center;
  align-items: center;
  background: #000;  
  font-family: FontAwesome;
  content: '\f00c';  
  font-size: inherit;
  color: #fff;
  /*position of the checkbox to the relative container*/
  position: absolute;
  top: 0px;
  /*change position to left or right and specify offset*/
  right: 5px;
  z-index: 1;
}
/*Offset the line name from the left*/
@media(max-width:767px) {
  .benefit-selected-box [class*="BenefitIntro"] {
    padding-left: 40px;
  }
  .benefit-selected-box .benefitline::before {
    /*On mobile this position could be left or right*/
    right: 0;
  }
}
@media(min-width:992px) {
  .benefit-selected-box .benefitline::before {
    height: 100%;
  }
}

/* line group text colour */
.benefit-matrix .group-default {
  color: #000;
}

/* line name */
.benefit-matrix .lineheader > a:link {
  color: #000;
  text-decoration: none;
}
.benefit-matrix .lineheader > a:link:hover,
.benefit-matrix .lineheader > a:link:focus {
  color: #686868;
}
.benefit-matrix .lineheader > a:link:active,
.benefit-matrix .lineheader > a:link:active:hover,
.benefit-matrix .lineheader > a:link:active:focus {
  color: #000;
}
.benefit-matrix .lineheader > a:link:focus,
.benefit-matrix .lineheader > a:link:active:focus {
  outline: 3px solid var(--accessibility-outline);
}
/* Line sets - add spacing between lines in the line set
display the line name on a separate line to the plan/coverage */
.benefit-matrix .lineset-linename + span {
  display: block;
  padding-left: .65em
}
.row.title + .row > div > div:not(:last-child) {
  margin-bottom: 1em
}

/* select buttons */
.benefit-matrix .row .btn-success,
.benefit-matrix .row .btn-success:hover,
.benefit-matrix .row .btn-success:focus,
.benefit-matrix .row .btn-success:active:hover {
  min-width: 75%;
}
.benefit-matrix .row .btn-success {
  background-color: #000;
}

/* approved dependant and beneficiary listing text colour */
.benefit-matrix h4[tbs-translate='Enrollment.Step3.WhoIsCovered'],
.benefit-matrix h5[tbs-translate='Enrollment.Online2.BeneficiaryAllocations'] {
  color: #000;
}
.benefit-matrix h5[tbs-translate='Enrollment.Online2.BeneficiaryAllocations'] {
  font-size: 1.125rem;
}
.dependent-approved {
  color: #000;
}

/* new and changed labels */
.benefit-matrix .newbenefit,
.benefit-matrix .changebenefit {
  background-color: #000;
  position: relative;
  top: -3px;
}
/* unlocked label */
.benefit-matrix .glyphicon-record,
.benefit-matrix .acitve-text {
  background-color: #000;
  color: #fff;
  visibility: hidden;
}
.benefit-matrix .glyphicon-record:before {
  content: '';
}
.benefit-matrix .glyphicon-record .acitve-text {
  font-family: 'Open Sans';
  font-weight: 500;
  padding: 2px 6px 3px 6px;
  text-transform: lowercase;
  top: -5px;
  visibility: visible;
}

/* remove active with data more info icon */
.benefit-matrix .panel-title .glyphicon-info-sign-color {
  display: none;
}

/* active with data intro text */
.benefit-matrix .benefit-active-benefits {
	padding-bottom: 25px;
	padding-top: 10px;
}
.benefit-matrix .benefit-active-benefits .active-intro {
  display: none;
}
/*Benefit title spacing*/
.benefit-matrix .title {
	padding-top: 15px;
}

/*********************** Lifestyle event pop up ******************************/
/* Lifestyle declare 'Next' button 
@media(min-width:768px) {
  .benefit-matrix .benefit-active-benefits .btn-warning.active-button {
	margin-top: 0;
	margin-right: 4.5%;
	padding: .5% 2.5%;
	min-width: 8.06%;
   }
 }
@media(min-width:1024px) {
.benefit-matrix .benefit-active-benefits .btn-warning.active-button {
	margin-right: 6.4%;
	padding: .5% 2%;
   }
 }
@media(min-width:1400px) {
  .benefit-matrix .benefit-active-benefits .btn-warning.active-button {
	margin-right: 6.2%;
   }
 } */

/****** confirm choices pop up ********/
/* yes no label */
.confirmagreementbtngroup label.btn, 
.perpayperannualbtngroup div.btn {
  text-transform: none;
  font-size: 1em;
}
/* confirm choice button */
.benefit-matrix .confirm-checkout-button .btn-success {
  background-color: #db0011;
}
/* pop up heading */
.benefit-matrix .modal-header span {
  font-size: 18px;
}
/*================================================================================================== 9. Benefit selection  ==================================================================================================*/
/* continue button */
.benefitselect .continue,
.benefitselect .continue:hover,
.benefitselect .continue:focus,
.benefitselect .continue:active,
.benefitselect .continue:active:hover,
.benefitselect .continue:active:focus {
  border-radius: 0;
  background-color: #db0011;
}
/* remove text transform */
.benefitselect H1,
.benefitselect .products-header H4 {
	text-transform: none;
}
/* line name */
.benefitselect .line-name {
  color: #000;
}
/* benefit info */
.benefitselect .line-description {
	display: none;
}
.benefitselect .line-benefit-intro {
	min-height: 0;
}
/* more info icon */
.benefitselect .line-benefit-intro .glyphicon-info-sign-color {
  color: #000;
}
/* Multiple coverage font size */
.benefitselect .option-credit-health UL {
	font-size: 15px;
}
/* 'Currently Selected' heading */
.benefitselect .header-selected {
  color: #000;
}

/* currently selected box */
.benefitselect .in-Cart .you-pay > p:nth-of-type(2) {
  display: none;
}
/* selected items style */
.benefitselect .selected-coverage strong, 
.benefitselect .selected-plan strong,
.benefitselect #content-you-chose-summary .green-number {
  font-weight: bold;
}
/* your cost heading */
.benefitselect .you-pay h3 {
  font-weight: normal;
}
/* ER cost spacing */
.benefitselect .employerFundingCart .funded {
	padding: 2px 55px 10px 0;
}
/* products available size */
.product-info H2 {
	font-size: 18px;
}
/* select buttons */
.online-two-iso .benefitselect A.button-style.green {
  background-color: #000;
  text-transform: none;
  color: #fff;
  font-size: 1em;
}
.online-two-iso .benefitselect A.button-style.green:hover {
  background-color: #686868;
  box-shadow: none;
  color: #fff;
}
.online-two-iso .benefitselect A.button-style.green:focus {
  background-color: #686868;
  box-shadow: none;
  color: #fff;
}
.online-two-iso .benefitselect A.button-style.green:active,
.online-two-iso .benefitselect A.button-style.green:active:hover,
.online-two-iso .benefitselect A.button-style.green:active:focus {
  background-color: #000;
  color: #fff;
}

/* remove division elements between benefits */
.division {
  display: none;
}

/* benefit description row colour */
.benefitselect .line-benefit-intro .line-description .row {
  background: white;
}
/* remove full benefit details link */
.bootstrap-iso.benefitselect .more-info {
  display: none;
}
/* remove background image shadow */
.box-border-bg {
  background: none;
}

/*currently selected box text colour */
.benefitselect .content-you-chose,
.benefitselect .content-you-chose p,
.in-Cart .you-chose .selected-plan,
SPAN.green-number,
.benefitselect .in-Cart .you-pay H3,
.benefitselect .in-Cart .you-pay P SPAN.green-number {
  color: #000;
}
/* EOI pending asterisk */
.benefitselect .alignleft .pending-note {
  display: inline;
  float: none;
}
/* available products heading */
.benefitselect .products-header H4 {
  color: #000;
}
/* selected plan border box */
.benefitselect .products .box-border.sel,
.benefitselect .products .box-border.sel .header {
  background: #000;
}
.benefitselect .products .box-border.sel .header {
  padding-left: 0;
  text-transform: none;
}
/* hide provider finder and prescription finder */
.available-options .links-group.four-links {
  display: none;
}
/* selected coverage text colour */
.option-credit-health .option.sel {
  color: #000;
}
/* see also link colour */
.benefitselect .linename > a:link {
  color: #000;
  text-decoration: none;
}
.benefitselect .linename > a:hover {
  color: #686868;
}
.benefitselect .linename > a:focus {
  color: #686868;
}
.benefitselect .linename > a:active,
.benefitselect .linename > a:active:hover,
.benefitselect .linename > a:active:focus {
  color: #000;
}
/* see also heading */
.see-also h5 {
  font-size: 18px;
  font-weight: bold;
}
/* see also icon placing */
.benefitselect .benefit-menu .img {
	width: 65px;
}

/*================================================================================================== 10. Profile  ==================================================================================================*/
/* section title */
html#profile body#profile .profile #profile-online-2 P.sectionTitle,
html#profile body#profile .profile #profile-online-2 #dependantsTab P.full-name {
	font-family: Universe_regular;
}
/* hide preference tab */
#profilecontainer .preference {
  display: none;
}
/* aligning content border */
html#profile body#profile .profile #profile-online-2 #contactTab .content-box-border .row .grid-cell P {
	min-height: 37px;
}
/* Intro text */
html#profile body#profile #profile-online-2 #contactTabIntro p {
	padding: 0;
	font-size: 1.3em;
}
html#profile body#profile #profile-online-2 #contactTabIntro {
	padding: 20px;
}
html#profile body#profile #profile-online-2 #payrollTabIntro {
	padding: 20px;
  font-size: 1.3em;
}
#contactTabIntro a {
  color: #000;
  text-decoration: underline;
}
#contactTabIntro a:hover {
  color: #686868;
  text-decoration: underline;
}
/* headings and labels */
.online-two-iso P.sectionTitle,
html#profile body#profile .profile #profile-online-2 #dependantsTab P.full-name,
html#profile body#profile .profile #profile-online-2 #beneficiariesTab P.full-name,
html#profile body#profile .profile #profile-online-2 span.label, 
html#profile body#profile .profile #profile-online-2 label,
html#profile body#profile .profile #profile-online-2 .box-border,
html#profile body#profile .profile #profile-online-2 label:not(.ui-button), 
html#profile body#profile .profile #profile-online-2 #contactTab label {
  color: #000;
  font-weight: normal;
}
/* buttons */
html#profile body#profile #profile-online-2 .button-style.green,
html#profile body#profile #profile-online-2 .button-style.orange,
html#profile body#profile #profile-online-2 .button-style.blue {
  background-color: #db0011;
  color: #fff;
  text-transform: none;
  font-size: 1rem;
}
html#profile body#profile #profile-online-2 .button-style.green:hover,
html#profile body#profile #profile-online-2 .button-style.green:focus,
html#profile body#profile #profile-online-2 .button-style.orange:hover,
html#profile body#profile #profile-online-2 .button-style.orange:focus,
html#profile body#profile #profile-online-2 .button-style.blue:hover,
html#profile body#profile #profile-online-2 .button-style.blue:focus {
  background-color: #686868;
  box-shadow: none;
  color: #fff;
}
html#profile body#profile #profile-online-2 .button-style.green:active,
html#profile body#profile #profile-online-2 .button-style.green:active:hover,
html#profile body#profile #profile-online-2 .button-style.green:active:focus,
html#profile body#profile #profile-online-2 .button-style.orange:active,
html#profile body#profile #profile-online-2 .button-style.orange:active:hover,
html#profile body#profile #profile-online-2 .button-style.orange:active:focus,
html#profile body#profile #profile-online-2 .button-style.blue:active,
html#profile body#profile #profile-online-2 .button-style.blue:active:hover,
html#profile body#profile #profile-online-2 .button-style.blue:active:focus {
  background-color: #000;
  color: #fff;
}
/* resetting the country selector dropdown when editing address info */
.bootstrap-iso .dropdown-toggle:before {
  background-color: transparent;
}
.bootstrap-iso .dropdown-toggle,
.bootstrap-iso .dropdown-toggle:hover,
.bootstrap-iso .dropdown-toggle:focus {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  color: #333;
  text-transform: none;
  text-align: left;
}
.bootstrap-iso .dropdown-toggle:focus {
  outline: none;
  box-shadow: 0 0 6px #db0011;
}

/* header overlay for adding/editing/deleting dependants/beneficiaries */
html#profile body#profile .profile #profile-online-2 .header-overlay H5 {
  font-weight: 500;
}

/* dependants tab styling */
html#profile body#profile #profile-online-2 #dependantsTab .left-taboff .sectionTitledimmedLeft,
html#profile body#profile #profile-online-2 #dependantsTab .right-taboff .sectionTitledimmed {
  color: #000;
}

html#profile body#profile #profile-online-2 #dependantsTab .left-tabon .sectionTitle {
  color: #000;
  border-bottom: 0.5em solid #000;
  padding-bottom: 0.25em;
}
html#profile body#profile #profile-online-2 #dependantsTab .right-tabon {
  border-bottom: 0.5em solid #000;
}
html#profile body#profile #profile-online-2 #dependantsTab .right-tabon .sectionTitledimmed {
  color: #000;
}

/* beneficiaries tab styling */
html#profile body#profile #profile-online-2 #beneficiariesTab .left-taboff .sectionTitledimmedLeft,
html#profile body#profile #profile-online-2 #beneficiariesTab .right-taboff .sectionTitledimmed {
  color: #686868;
}

html#profile body#profile #profile-online-2 #beneficiariesTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #beneficiariesTab .right-tabon .sectionTitle {
  color: #000;
  border-bottom: 0.5em solid #000;
  padding-bottom: 0.25em;
}
/* beneficiaries edit allocation popup */
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label {
  background-color: #db0011;
  border: 1px solid white;
  border-radius: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: normal;
  padding: 6px 12px;
  text-transform: uppercase;
}
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label.active {
  background-color: #000;
  box-shadow: none;
  color: #fff;
}
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label:hover,
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label:focus {
  background-color: #686868;
  color: #fff;
}

/* security tab styling */
.left-taboff,
.right-taboff {
  background: none;
}
html#profile body#profile #profile-online-2 #securityTab .left-taboff .sectionTitledimmedLeft,
html#profile body#profile #profile-online-2 #securityTab .right-taboff .sectionTitledimmed {
  color: #000;
}
html#profile body#profile #profile-online-2 #securityTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #securityTab .right-tabon .sectionTitle {
  color: #000;
  border-bottom: 0.5em solid #000;
  padding-bottom: 0.25em;
}
html#profile body#profile #profile-online-2 #securityTab .validation-caption {
  margin-left: 10px;
  font-size: 1em;
}

/* preferences toggle button */
#communicationPreferencesTab .ui-buttonset label {
  border: 1px solid #ccc;
}
#communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text {
  background-color: #75bf71;
  background-image: none;
}
#communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text:before {
  font-family: FontAwesome;
  content: '\f00c';
  position: relative;
  left: -0.5em;
}

/* ensuring that the marketing preferences toggles are in alignment */
@media only screen and (min-width: 992px) {
  #communicationPreferencesTab p#marketingHeader + div.row {
    display: flex;
  }
  html#profile body#profile .profile #profile-online-2 #profilecontainer #communicationPreferencesTab .content-box-border .row .grid-cell {
    display: flex;
    flex-wrap: wrap;
  }
  html#profile body#profile .profile #profile-online-2 #profilecontainer #communicationPreferencesTab .content-box-border .row .grid-cell .ui-buttonset {
    align-self: flex-end;
  }
}

/*================================================================================================== Mailbox  ==================================================================================================*/
.k-state-selected {
  background-color: #db0011 !important;
}
/* save/delete popup modal */
div.tbs-modal h2 {
  color: white;
  text-transform: uppercase;
}

/*================================================================================================== 11. App registration  ==================================================================================================*/
div.bootstrap-iso.mobileapp,
div.bootstrap-iso.mobileapp h2 {
  font-family: Universe_light;
  margin-top: 0;
}
#MobileRegistation .form-data {
  padding-top: 0;
}
#mobileRegistration .box-border {
  border: none;
}
#mobileRegistration .box-left-bg,
#mobileRegistration .box-border-bg {
  background: none;
}
#mobileRegistration #CMSEditableRegionDiv {
  padding: 0 1em;
}
#mobileRegistration .mobile-registration-fullwidth > .mobile-registration-left,
#mobileRegistration .mobile-registration-app-download {
  display: none;
}
#mobileRegistration .d-block {
  display: block;
}
#mobileRegistration .qr-background {
  background: #000;
}
#mobileRegistration p {
	font-size: 1rem;
	font-weight: 300;
	padding: 0 0 10px;
}
#mobileRegistration ol {
  margin: 0 0 1em 1em;
  list-style: decimal;
}
#mobileRegistration-Content {
  font-size: 1rem;
}
#mobileRegistration .bootstrap-iso label {
  color: #000;
  font-size: 1rem;
}
#mobileRegistration .bootstrap-iso input {
  display: block;
}
#mobileRegistration .bootstrap-iso #pwdMeter {
  margin-left: 0;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
#mobileRegistration .bootstrap-iso #newPasswordSave {
  float: none !important;
  width: 30%;
  text-transform: none;
  background-color: #db0011;
}
#mobileRegistration .bootstrap-iso #newPasswordSave:hover,
#mobileRegistration .bootstrap-iso #newPasswordSave:focus {
  background-color: #686868;
  box-shadow: none;
  padding: 6px 12px;
  border: none;
}
#mobileRegistration .bootstrap-iso #newPasswordSave:active,
#mobileRegistration .bootstrap-iso #newPasswordSave:active:hover,
#mobileRegistration .bootstrap-iso #newPasswordSave:active:focus {
  background-color: #000;
}
#mobileRegistration .well-lg {
  padding: 35px 9px;
  border-radius: 0px;
}
#mobileRegistration .fa span {
  font-family: Arial;
  padding-left: 0.5em;
  font-size: 0.875rem;
  vertical-align: middle;
}
@media only screen and (max-width: 991px) {
  #mobileRegistration .download-section p {
    padding-top: 1em;
  }
}
@media only screen and (max-width: 769px) {
  #CMSEditableRegionDiv img {
    display: block;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .online-two-iso #MobileRegistation .page-content {
    width: 100vw;
  }
  #MobileRegistation .form-data .box-border-bg {
    padding-right: 0;
  }
}

/*================================================================================================== 12. TRS  ==================================================================================================*/
/*** trs home page ***/
 /* trs module styling */
#home-online-three #home-integrated .trsnbenstmt p {
    margin-bottom: -1px;}
#home-online-three #home-integrated .trsnbenstmt .highcharts-background {
    fill: transparent;
}

 /* font specifically for the trs module on home page */
.home-module-trs-content .highcharts-label tspan {
    font-family: Universe_light !important;
    color: #000 !important;
}

.highcharts-title
{
  font-weight: bold !important;
  font-family: "Universe_thin" !important;
  font-size:14px !important;
  
}
.home-module-trs-content .highcharts-root .highcharts-legend-item text,
.trsdashboard .highcharts-legend-item text
{
  font-weight: normal !important;
  font-family: "Universe_thin" !important;
  font-size:14px !important;
}
/*** dashboard ***/
/* trs menu styling */
#dashboardContainer .uib-tab.nav-item a {
  text-decoration: none;
  font-size: 1.1em;
  font-family: 'Universe_regular';
}
#dashboardContainer .nav {
  margin-bottom: 30px;
}
#dashboardContainer .nav-pills > li.active > a {
	background-color: #d7d8d6;
    color: #fff;
}
#dashboardContainer .nav > li > a:hover, #dashboardContainer .nav > li > a:focus {
	background-color: #ebebea;
    color: #fff;
}

/* menu colors */
.trsdashboard .FixedandVariablePay {color: #292960;}
.trsdashboard .Moneymatters {color: #db0011;}
.trsdashboard .Mindbody {color: #4A6A6D;}
.trsdashboard .Morebenefits {color: #000;}  

/* side bar */
#dashboardContainer .side-bar h5 {
  font-size: 1.5rem;
  font-family: 'Universe_light';
  margin-top: 0;
}

/* total */ 
.trsdashboard .chart_line_total {
	font-weight: bold;
	font-family: 'Universe_thin';
	margin-top: 2em;
}
/* homepage module styling */
.trsdashboard .summary-myreward {
  visibility: hidden;
}
/*summary date*/
.trsdashboard .summarystatementdate {
  color: #000;
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Universe_light';
}
/*title and text space*/
.trsdashboard .dashboardtitle, .trsdashboard .dashboardtext {
	margin-left: 0;
}
/* alignment of data group chart total between pre and post text */
.textareaChartTab .LineGroupTotal {
  display: inline-block;
}
/* download button */
.trsdashboard .printbtn .btn-warning {
  background-color: #db0011;
}
/* vertical table styling */
.trsdashboard .table,
.trsdashboard .table > thead > tr > th,
.trsdashboard .table tbody tr td {
  border: none;
}
.trsdashboard .table {
  border: 1px solid #ccc
}
.trsdashboard .table > thead > tr > th {
  background-color: #757575;
  color: #fff;
}
.trsdashboard .table > thead > tr > th,
.trsdashboard .table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #ccc
}

/* consistent font-size as rest of the TRS */
.trsdashboard .table,
.trsdashboard .table tbody tr td {
  font-size: 1rem;
}

/* ensuring that Default components and those with Vertical Tables are aligned on the left and right consistently */
@media only screen and (min-width: 768px){
  .chart_line.row {
    margin-left: 15px;
    width: calc(100% - 30px)
  }
  .content-name {
    padding-left: 15px
  }
  .tab-pane .table-responsive {
    padding: 0 15px
  }
}

/* trs component heading */
.trsdashboard .content-name {
	padding-left: 0px;
    color: #db0011;
}
/* hide trs icon */
.trs-icon {
  display: none;
}
/*TRS MOBILE VIEW */
@media only screen and (max-width: 750px) 
{
  /*Menu Items */
  .main-menu-toogle.btn.visible-xs .fa,
  #mobile-links .fa-gear {
    color: #fff;
  }
  /*Benefit Overview Title */
  .benefit-overview-title {
    margin-top: 17px;
    margin-left: 5px;
 }
  /*Spacing between Accordians */
  .trsdashboard .panel-title .accordion-toggle {
    padding-bottom: 20px;
  }

  /*Logo on mobile view */
  #logo {
    height: 50px;
    margin-top: 0.7em;
  }
  /*Datagroup Color in mobile view */
  .Mindbody,
  .Morebenefits,
  .FixedandVariablePay,
  .Moneymatters
  {
   color:#fff;
  }
  /*To hide Header */
  .trsdashboard .summary-header .col-sm-3 {
    display: none;
  }
  /* space around TRS date */
  .trsdashboard .summary-header .summarystatementdate {
    margin-top: -0.7em;
    margin-bottom: 1em;
  }
  /*TRS print button */
  .trsdashboard .printbtn .btn.btn-warning,
  .trsdashboard .printbtn .btn.btn-warning:hover {
    font-size: 12px;
    padding: 10px 14px;
  }
  /*TRS print Button */
  .trsdashboard .printbtn {
    margin-bottom: 1.2em;
    text-align: center;
    float: unset;
  }
}
/*================================================================================================== 13. Specific popups  ==================================================================================================*/
/* Exit alert */
#exit-confirm .header-overlay h5 {
  padding-left: 10px;
}
#exit-confirm .content-overlay {
  color: #000;
}
/* 13a) forgot password */
/* progress bar colour */
.bootstrap-iso .progress-bar-success {
  background-color: #000;
}
.online-two-iso #login-assistance .content-overlay {
	color: #000;
}
/* steps heading */
.online-two-iso #login-assistance .instruction-container {
	font-family: Universe_regular;
}
/* intro text */
#passwordResetStep2aIntroText p,
#passwordResetStep3IntroText p,
/* Important message */
#login-assistance .ImportantMessage {
	font-size: 1.2em;
}
/* forgot questions link */
.online-two-iso .password-forgot {
	text-decoration: underline;
}
.online-two-iso #forgotSecQue:focus,
.online-two-iso #forgotSecQue:active{
  outline: 3px solid var(--accessibility-outline);
}

/* 13b) modellers and tools */
/* overlay header */
.modal-normal ul.modeller-links {
  padding-left: 1.25em;
  width: 100%;
}
.modeller-links li a {
  text-transform: none;
}
/* selected tab*/
.modeller-links li a.checked,
.modeller-links li a.unchecked:hover {
  background-color: transparent;
  border-bottom: 0.5em solid #000;
  color: #000;
}
/* unselected tab */
.modeller-links li a.unchecked {
  background-color: transparent;
  color: #686868;
}
/* text color */
.modeller-container .row-header,
.modeller-container .row-summary {
  color: #000;
}
/* tax code input */
/* model button */
input.modeller-line-bottom {
  background-color: #000;
  color: #fff;
  font-weight: normal;
  height: 2.19em;
  text-transform: capitalize;
}
input.modeller-line-bottom:hover {
  background-color: #686868;
  color: #fff;
}
input.modeller-line-bottom:focus {
  background-color: #686868;
  box-shadow: none;
  color: #fff;
}
input.modeller-line-bottom:active,
input.modeller-line-bottom:active:hover,
input.modeller-line-bottom:active:focus {
  background-color: #000;
  box-shadow: none;
  color: #fff;
}
/* remove decoration on click */
.tab-link a:focus {
  text-decoration: none;
}

/* 13c) manage dependants */
/* list spacing */
.dependant-list li {
	border-bottom: solid .5em #f2f2f2;
}
/* delete dependant spacing */
#deleteDependantIntroText {
	padding-bottom: 10px;
}
/* overlay header */
.bootstrap-iso .dependantContainer .tab-header {
  background-color: white;
  font-family: Universe_light;
  font-size: 1rem;
}
/* text color */
.dependant-pannel,
.dependant-list .dependant-name span,
.dependant-cell.edit span,
.coverage-pannel,
.dependant-list .caption-text {
  color: #000;
}
/* alert message */
.bootstrap-iso .alert-warning {
	color: #000;
	background-color: #e6e6e6;
	border-color: #757575;
}
.dependant-list .dependant-notify-item {
	color: #000;
	background-color: #e6e6e6;
}
/* hide auto-add to all benefits */
.is-auto-add {
  display: none;
}
/* remove intro text created from resource string */
.dependantIntroText {
  display: none;
}

#allocationDialog .add-beneficiary {
  color: #db0011;
}
#allocationDialog .add-beneficiary:hover {
  color: #686868;
}
#allocationDialog .add-beneficiary:focus {
  color: #686868;
}
#allocationDialog .add-beneficiary:active,
#allocationDialog .add-beneficiary:active:hover,
#allocationDialog .add-beneficiary:active:focus {
  color: #000;
}

/* add, edit and remove links */
.dependant-list-top a.dependant-add-link,
.dependant-list a.dependant-edit,
.dependant-list a.dependant-remove {
  color: #000;
}
.dependant-list .dependant-add-item a.dependant-edit,
.dependant-list .dependant-add-item a.dependant-remove,
.dependant-list .dependant-list-item a.dependant-edit,
.dependant-list .dependant-list-item a.dependant-remove,
.dependant-cell a.dependant-confirm-delete,
.dependant-cell a.dependant-cancel-delete {
  padding: 6px 12px;
}
.dependant-list .dependant-add-item a.dependant-edit,
.dependant-list .dependant-list-item a.dependant-edit,
.dependant-cell a.dependant-confirm-delete {
  background-color: #db0011;
  border: 2px solid #db0011;
  color: #fff;
}
.dependant-list .dependant-add-item a.dependant-remove,
.dependant-list .dependant-list-item a.dependant-remove,
.dependant-cell a.dependant-cancel-delete {
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
}
.dependant-list-top a.dependant-add-link:hover {
  color: #db0011;
}
.dependant-list a.dependant-edit:hover,
.dependant-list a.dependant-remove:hover {
  color: #686868;
}
.dependant-list .dependant-add-item a.dependant-edit:hover,
.dependant-list .dependant-add-item a.dependant-remove:hover,
.dependant-list .dependant-add-item a.dependant-edit:focus,
.dependant-list .dependant-add-item a.dependant-remove:focus,
.dependant-list .dependant-add-item a.dependant-edit:active,
.dependant-list .dependant-add-item a.dependant-edit:active:hover,
.dependant-list .dependant-add-item a.dependant-edit:active:focus,
.dependant-list .dependant-add-item a.dependant-remove:active,
.dependant-list .dependant-add-item a.dependant-remove:active:hover,
.dependant-list .dependant-add-item a.dependant-remove:active:focus,
.dependant-list .dependant-list-item a.dependant-edit:hover,
.dependant-list .dependant-list-item a.dependant-edit:focus,
.dependant-list .dependant-list-item a.dependant-edit:active,
.dependant-list .dependant-list-item a.dependant-edit:active:hover,
.dependant-list .dependant-list-item a.dependant-edit:active:focus,
.dependant-list .dependant-list-item a.dependant-remove:hover,
.dependant-list .dependant-list-item a.dependant-remove:focus,
.dependant-list .dependant-list-item a.dependant-remove:active,
.dependant-list .dependant-list-item a.dependant-remove:active:hover,
.dependant-list .dependant-list-item a.dependant-remove:active:focus,
.dependant-cell a.dependant-confirm-delete:hover,
.dependant-cell a.dependant-confirm-delete:focus,
.dependant-cell a.dependant-confirm-delete:active,
.dependant-cell a.dependant-confirm-delete:active:hover,
.dependant-cell a.dependant-confirm-delete:active:focus,
.dependant-cell a.dependant-cancel-delete:hover,
.dependant-cell a.dependant-cancel-delete:focus,
.dependant-cell a.dependant-cancel-delete:active,
.dependant-cell a.dependant-cancel-delete:active:hover,
.dependant-cell a.dependant-cancel-delete:active:focus {
  background-color: #686868;
  border: 2px solid #686868;
  color: #fff;
}
.dependant-list-top a.dependant-add-link:focus{
  color: #db0011
}
.dependant-list a.dependant-edit:focus,
.dependant-list a.dependant-remove:focus {
  color: #686868;
}

.dependant-list-top a.dependant-add-link:active,
.dependant-list-top a.dependant-add-link:active:hover,
.dependant-list-top a.dependant-add-link:active:focus,
.dependant-list a.dependant-edit:active,
.dependant-list a.dependant-edit:active:hover,
.dependant-list a.dependant-edit:active:focus,
.dependant-list a.dependant-remove:active,
.dependant-list a.dependant-remove:active:hover,
.dependant-list a.dependant-remove:active:focus {
  color: #000;
}

/* costs displayed on Dependants Covered tab */
.benefit-matrix .employee-cost .cost-number {
  color: #000;
}

/* table header colour when removing dependants that are attached to cover */
.table.reverse-header thead > tr > th {
  background-color: #db0011;
}

/*swap the order of the save and close buttons on dependant coverage summary */
.coverage-bottom .dependant-accept-btn,
.coverage-bottom .dependant-cancel-btn {
  position: relative;
}
.coverage-bottom .dependant-accept-btn {
  left: 4.5em;
}
.coverage-bottom .dependant-cancel-btn {
  right: 5em;
}

/* error message */
.online-two-iso .error-message,
.ImportantMessage,
.errorMsg {
  background: #db0011;
  color: #fff;
  font-weight: bold;
}
.control-row {
  padding: .25em;
}
.add-error {
  margin: 0
}

/* 13d) benefit matrix follow up items  */
/* overlay header */
#followup-items-overlay.online-followup-items #followup-items-title {
  background-color: #fff;
  font-weight: normal;
  text-align: left;
  text-transform: none;
  width: 100%;
  font-family: Universe_regular;
  font-size: 18px;
}
/* close icon */
#followup-items-overlay a.close {
  top: 2px;
  text-decoration: none;
}
/* oustanding items complete icon */
.online-two-iso .success-icon {
  color: #000;
}
/* hide repetitive outstanding item info */
.benefitselect .followup-collect-info {
  display: none;
}
/* follow up text font size */
.benefitselect .followup-container .followup-item-coverage-heading {
  font-size: 1rem;
}
/* completed items dot indicator color */
.followup-content .progress-indicator .step-finished {
  background-color: #000;
}

/* 13e) benefit matrix T&Cs */
/* overlay header */
.benefit-matrix .benefitheader {
  text-transform: none;
}
/* terms and conditions main text elements */
#main.matrix .modal-dialog .confirmchoice ul li {
  list-style: disc;
  margin-left: 2.14285714em;
}
@media only screen and (min-width: 768px) {
  .bootstrap-iso .confirmchoice .dl-horizontal dt {
    text-align: left;
  }
}
.benefit-matrix .modal-footer #confirmation-buttons .btn-default.active {
  background-color: #000;
}
.benefit-matrix .modal-footer #confirmation-buttons .btn-default:hover {
  border: 1px solid #ccc;
  border-radius: 0;
}

/* 13f) benefit selection election info collect */
/* header overlay */
.online-two-iso .modal-normal .modal-header .header-text {
  padding-left: 1em;
}

.election-info-collect .dependant-board .expand-sign {
  color: #000;
}

.election-info-collect .dependant-board .icon {
  background-image: none;
  width: 0;
}
.election-info-collect .dependant-board .icon:before {
  color: #db0011;
  content: '\f0c0';
  font-family: 'FontAwesome';
  font-size: 3rem;
  padding-right: 0.25em;
}

/* 13g) benefit selection beneficiaries */
/* primary, contingent, none button group */
.benefitselect #allocationDialog .btn-group label:first-of-type {
  border-radius: 0;
}
.benefitselect #allocationDialog .btn-group label {
  border: 1px solid white;
}
.benefitselect #allocationDialog .btn-group .active {
  background-color: #75bf71;
}
#allocationDialog .edit-beneficiary,
#allocationDialog .delete-beneficiary {
  color: #db0011;
}
#allocationDialog .edit-beneficiary:hover,
#allocationDialog .edit-beneficiary:focus,
#allocationDialog .delete-beneficiary:hover,
#allocationDialog .delete-beneficiary:focus {
  color: #686868;
}
#allocationDialog .edit-beneficiary:active,
#allocationDialog .edit-beneficiary:active:hover,
#allocationDialog .edit-beneficiary:active:focus,
#allocationDialog .delete-beneficiary:active,
#allocationDialog .delete-beneficiary:active:hover,
#allocationDialog .delete-beneficiary:active:focus {
  color: #000;
}

/* 13h) Validation */
#validationError-overlay .header-overlay h5 {
  font-size: 18px;
  padding-left: 7px;
  text-transform: none;
}
.benefit-matrix #validationError-overlay {
	width: 90%;
	height: auto;
}

/****************************************** benefit intro popup **************************************/
.faq-answer {
  padding-bottom: 1em;
}

/*================================================================================================== 14. Icons  ==================================================================================================*/
/* 14a) benefit icon general coding */
/* remove background images in readiness for using icons */
/* benefit matrix */
.benefit-matrix .benefitline .benefit-menu .img,
/* see also images */
div.see-also .img,
/* life event icons */
.benefit-matrix .active-benefits .img,
/* benefits overview icons */
#benefit-overview .summaryImage .img {
  background: none;
  top: 10px;
}

/* general styling for using icons for benefits */
.benefit-matrix .benefitline .benefit-menu .img:before,
div.see-also .img:before,
#benefit-overview .summaryImage .img:before {
  font-family: OnlineTwoIconFont;
  font-size: 5rem;
  position: relative;
  color: #000;
}

/* icon size for 'see also' section of benefit selection page */
div.see-also .img:before {
  font-size: 3.5rem;
  top: -0.25em;
}

/* 14b) life event icon general coding */
/* background of image placeholder */
.benefit-matrix .active-benefits .img {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #757575;
}
/* general styling for using icons for events */
.benefit-matrix .active-benefits .img:before {
  font-family: OnlineTwoIconFont;
  font-size: 6rem;
  color: white;
}

/*================================================================================================== 15. Claims  ==================================================================================================*/
/* make a claim styling */
body#claim {
  padding-top: 0;
}
/* spacing and padding */
div#claimDetail.row,
div#receiptDetail.row,
div#Attachment.row,
#claimItemBreakdownDetail {
  padding-bottom: 0px;
}
/* remove additional details section as not relevant */
#AdditionalDetail,
.claim-additional-info {
  display: none;
}
#Attachment > .grid-cell,
#ajax-uploader-group,
#ajax-uploader-group p:nth-of-type(2),
#tblFiles {
  margin-bottom: 0;
}
/* page title and headings */
.online-two-iso .fsaClaimSubmitContainer .webpartTitle {
  background-color: #fff;
}
.fsaClaimSubmitContainer #flexClaimTitle h1,
.online-two-iso .fsaClaimSubmitContainer h3 {
  color: #000;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 0;
}
/* horizontal rules */
.fsaClaimSubmitContainer hr {
  margin: 0;
  padding: 5px 0;
  background-color: #fff;
}
/* label colour */
.online-two-iso .fsaClaimSubmitContainer label {
  color: var(--primary-text-color);
}

/* attach, cancel and submit buttons */
.online-two-iso .fsaClaimSubmitContainer .btn-success,
.online-two-iso .fsaClaimSubmitContainer .btn-default,
.online-two-iso .fsaClaimSubmitContainer .btn-primary {
  background-color: #db0011;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  transition: all 0.25s;
}
.online-two-iso .fsaClaimSubmitContainer .btn-success:hover,
.online-two-iso .fsaClaimSubmitContainer .btn-success:focus,
.online-two-iso .fsaClaimSubmitContainer .btn-success:active,
.online-two-iso .fsaClaimSubmitContainer .btn-success:active:hover,
.online-two-iso .fsaClaimSubmitContainer .btn-success:active:focus,
.online-two-iso .fsaClaimSubmitContainer .btn-default:hover,
.online-two-iso .fsaClaimSubmitContainer .btn-default:focus,
.online-two-iso .fsaClaimSubmitContainer .btn-default:active,
.online-two-iso .fsaClaimSubmitContainer .btn-default:active:hover,
.online-two-iso .fsaClaimSubmitContainer .btn-default:active:focus,
.online-two-iso .fsaClaimSubmitContainer .btn-primary:hover,
.online-two-iso .fsaClaimSubmitContainer .btn-primary:focus,
.online-two-iso .fsaClaimSubmitContainer .btn-primary:active,
.online-two-iso .fsaClaimSubmitContainer .btn-primary:active:hover,
.online-two-iso .fsaClaimSubmitContainer .btn-primary:active:focus {
  background-color: #686868;
}

/* datepicker styling */
/* left, right and year/month/day selection buttons in header of datepicker */
.fsaClaimSubmitContainer table.uib-yearpicker thead th button.btn-default,
.fsaClaimSubmitContainer table.uib-monthpicker thead th button.btn-default,
.fsaClaimSubmitContainer table.uib-daypicker thead th button.btn-default {
  border-radius: 0;
}
.fsaClaimSubmitContainer table.uib-yearpicker thead tr:first-of-type th:nth-of-type(2),
.fsaClaimSubmitContainer table.uib-monthpicker thead tr:first-of-type th:nth-of-type(2),
.fsaClaimSubmitContainer table.uib-daypicker thead tr:first-of-type th:nth-of-type(2) {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
/* day/month/year buttons of datepicker */
.fsaClaimSubmitContainer table.uib-yearpicker tbody td .btn-default,
.fsaClaimSubmitContainer table.uib-monthpicker tbody td .btn-default,
.fsaClaimSubmitContainer table.uib-daypicker tbody td .btn-default {
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
}

/* today and clear button group */
.fsaClaimSubmitContainer .uib-datepicker-popup .btn-group .btn {
  background-color: #db0011;
  border: none;
  transition: background-color 0.25s;
}
.fsaClaimSubmitContainer .uib-datepicker-popup .btn-group button:first-of-type {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-right: 1px solid #fff;
}
.fsaClaimSubmitContainer .uib-datepicker-popup .btn-group button:last-of-type {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: 1px solid #fff;
}
/* selected year/month/day and hover styling */
.fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active,
.fsaClaimSubmitContainer .uib-datepicker-popup .btn-group .btn:hover {
  background-color: #686868;
}
.fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active
  .text-info {
  color: #fff;
}

/* claim submitted table header styling */
.claimSubmittedHeader {
  background-color: var(--primary-text-color);
}
.online-two-iso .claimSubmittedHeader h3 {
  color: #fff;
}

/* claim overview */
/* links */
body#StatementAndClaimSubmit #wrapper a {
  color: #db0011;
}
body#StatementAndClaimSubmit #wrapper a:hover,
body#StatementAndClaimSubmit #wrapper a:focus {
  color: #686868;
  text-decoration: none;
}
body#StatementAndClaimSubmit #wrapper a:active,
body#StatementAndClaimSubmit #wrapper a:active:hover,
body#StatementAndClaimSubmit #wrapper a:active:focus {
  color: #000;
}
/* navigation tabs */
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A {
  text-transform: none;
}
.FSAStatementAndHistoryContainer .htabs-container,
.FSAStatementAndHistoryContainer .htabs-container .tabs-bg,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel STRONG,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A {
  background: none;
}
.FSAStatementAndHistoryContainer .htabs-container .tabs-bg {
  background: linear-gradient(to bottom, #fff, #ededed);
}
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI {
  background-color: transparent !important;
  background: url(/smartrewardNL/media/Images/Misc%20Icons/Aon_TBS-lite_Icons-9_off.png)
    no-repeat 50% 20%;
}
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI:hover {
  background-color: transparent !important;
  background: url(/smartrewardNL/media/Images/Misc%20Icons/Aon_TBS-lite_Icons-9.png)
    no-repeat 50% 20%;
}
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A {
  font-size: 1rem;
}
#StatementAndClaimSubmit .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A:hover {
  border-bottom: 0.5em solid var(--primary-text-color);
  color: var(--primary-text-color);
  font-weight: bold;
  padding-bottom: 20px;
}

/* calim number column of calim data tables */
.FSAStatementAndHistoryContainer .claim-number {
  width: 125px;
}

/* headings */
.online-two-iso .FSAStatementAndHistoryContainer h1 {
  color: #000;
  margin-bottom: 0;
}
.online-two-iso .claim-history h2 {
  color: var(--primary-text-color);
}

/* hover effect for the tables */
.claim-history .claim-table > tbody > tr:hover {
  background-color: #f5f5f5;
}

/* Pending, Approved and Rejected icons */
.claim-approved img {
  display: none;
}
.claim-approved a:before {
  font-family: FontAwesome;
  font-size: 1.75rem;
  width: 20px;
  height: 20px;
  display: inline-block;
  transition: transform .1s;
}
.claim-approved a:hover {
  text-decoration: none;
}
.claim-approved a:hover:before,
.claim-approved a:focus:before {
  transform: scale(1.3);
}
.claim-approved a[title='Approved']:before,
.claim-approved a[title='Goedgekeurd']:before {
  content: '\f00c';
  color: #75bf71;
}
.claim-approved a[title='Rejected']:before,
.claim-approved a[title='Geweigerd']:before {
  content: '\f00d';
  color: var(--secondary-text-color);
}
.claim-approved a[title='Pending']:before,
.claim-approved a[title='Afwachting']:before {
  content: '\f0ec';
  color: var(--primary-text-color);
}

/* buttons in popup modal */
.claim-edit-link .btn.btn-primary,
.claim-edit-link .btn.btn-info {
  background-color: #db0011;
  color: #fff;
  border: none;
  border-radius: 25px;
  transition: background-color 0.25s;
}
body#StatementAndClaimSubmit .btn-default {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 25px;
  transition: background-color 0.25s;
}
.claim-edit-link .btn.btn-primary:hover,
.claim-edit-link .btn.btn-primary:focus,
.claim-edit-link .btn.btn-primary:active,
.claim-edit-link .btn.btn-primary:active:hover,
.claim-edit-link .btn.btn-primary:active:focus,
.claim-edit-link .btn.btn-info:hover,
.claim-edit-link .btn.btn-info:focus,
.claim-edit-link .btn.btn-info:active,
.claim-edit-link .btn.btn-info:active:hover,
.claim-edit-link .btn.btn-info:active:focus,
body#StatementAndClaimSubmit .btn-default:hover,
body#StatementAndClaimSubmit .btn-default:focus,
body#StatementAndClaimSubmit .btn-default:active,
body#StatementAndClaimSubmit .btn-default:active:hover,
body#StatementAndClaimSubmit .btn-default:active:focus {
  background-color: #686868;
}

/* selected tab styling on FSA statement tab */
body#StatementAndClaimSubmit #wrapper .spendingaccountsTab-container .tabs UL LI.sel A,
body#StatementAndClaimSubmit #wrapper .spendingaccountsTab-container .tabs UL LI A:hover {
  background-color: var(--primary-text-color);
  color: #fff;
  font-weight: bold;
}
/* table headings on FSA statement tab */
.fsa-table-caption .section_title,
.subtitle-claims .section_title {
  color: var(--primary-text-color);
}

/*================================================================================================== 16. My Documents  ==================================================================================================*/
/* make table of documents responsive */
#tabledocuments {
  display: block !important;
  width: 100%;
  margin-bottom: 15px;
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
#tabledocuments th,
#tabledocuments td {
  padding: 5px;
}
#tabledocuments > thead > tr > th {
  background-color: var(--tertiary-text-color);
}
a#btnNewDocument {
  color: #db0011 !important;
}
a#btnNewDocument:hover {
  color: #686868 !important;
  text-decoration: none;
}
#dlguploadDocument #btn-upload-document-save,
#deleteDocumentDialog #dspdeleteDocument {
  background-color: #db0011;
  border-radius: 25px;
  font-weight: bold;
  transition: background-color 0.25s;
}
#dlguploadDocument #btn-upload-document-cancel,
#deleteDocumentDialog #btnCancelDocument .gray {
  background-color: #000;
  transition: background-color 0.25s;
}
#dlguploadDocument #btn-upload-document-save:hover,
#dlguploadDocument #btn-upload-document-save:focus,
#dlguploadDocument #btn-upload-document-cancel:hover,
#dlguploadDocument #btn-upload-document-cancel:focus,
#deleteDocumentDialog #dspdeleteDocument:hover,
#deleteDocumentDialog #dspdeleteDocument:focus,
#deleteDocumentDialog #btnCancelDocument .gray:hover,
#deleteDocumentDialog #btnCancelDocument .gray:focus {
  background-color: #686868;
}
#dlguploadDocument #btn-upload-document-save:active,
#dlguploadDocument #btn-upload-document-save:active:hover,
#dlguploadDocument #btn-upload-document-save:active:focus,
#dlguploadDocument #btn-upload-document-cancel:active,
#dlguploadDocument #btn-upload-document-cancel:active:hover,
#dlguploadDocument #btn-upload-document-cancel:active:focus,
#deleteDocumentDialog #dspdeleteDocument:active,
#deleteDocumentDialog #dspdeleteDocument:active:hover,
#deleteDocumentDialog #dspdeleteDocument:active:focus,
#deleteDocumentDialog #btnCancelDocument .gray:active,
#deleteDocumentDialog #btnCancelDocument .gray:active:hover,
#deleteDocumentDialog #btnCancelDocument .gray:active:focus {
  background-color: #000;
}

/* overlay styling */
#dlguploadDocument.overlay-no-height-limit,
#dlguploadDocument textarea {
  width: 100%;
}
@media only screen and (max-width: 750px) {
  #dlguploadDocument .column-left {
    width: 100%;
    text-align: left;
  }
}

/*================================================================================================== 17. Document Download  ==================================================================================================*/
.interactive-TRS ul {
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  -ms-grid-columns: 1fr 1fr 1fr;
  padding-bottom: 1em;
}
.interactive-TRS ul > li:first-child {
  -ms-grid-column: 1;
  -ms-grid-row: 1
}
.interactive-TRS ul > li:nth-child(2) {
  -ms-grid-column: 2;
  -ms-grid-row: 1
}
.interactive-TRS ul > li:last-child {
  -ms-grid-column: 3;
  -ms-grid-row: 1
}
.interactive-TRS .h1 {
  color: #000;
  font-size: 5rem;
  font-weight: 700
}
#statements_selector:focus {
  outline: 3px solid var(--accessibility-outline);
  background-color: #686868;
  color: #fff;
}
#download_statement {
  transform: translate3d(1em, -.25em, 0);
}
#download_statement:after {
  content: '\f0ed';
  font-family: FontAwesome;
  padding-left: .5em;
}

/*================================================================================================== 18. Mobile  ==================================================================================================*/
/* login module buttons */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .mobile-buttons .btn {
  background-color: #db0011 !important;
}
/*********** ipad ************/
@media only screen and (min-width: 751px) and (max-width: 1000px) {
.active-benefits .events {
	width: 98%;
	height: auto;
    }
 }
/***************************/
@media only screen and (max-width: 750px) {
  /* manage dependant pop up */
  .coverage-bottom {
    padding-top: 0.2em;
    padding-bottom: 0.5em;
  }
  /* menu icon colour */
  .fa.fa-bars,
  .fa.fa-gear {
    color: #db0011;
  }
  /* accordian panel title */
  .bootstrap-iso .panel-title {
    font-size: 16px;
  }
  /* confirm choices styling */
  .benefit-matrix .modal-header {
	width: 94%;
  }
  .benefit-matrix .modal-header .close {
	margin-top: -21px;
  }
  /* links in mobile hamburger menu */
  .online-two-iso #menu-no-dashboard li a,
  .online-two-iso #menu-no-dashboard li a.selected {
    color: #db0011;
  }
  /* mobile menu icons (hamburger and cog) */
  #header .main-menu-toogle:hover,
  #header .main-menu-toogle:focus,
  #header .user-toogle:hover,
  #header .user-toogle:focus {
    color: #686868;
  }
  /* make height of greeting container auto to give proper spacing around the greeting */
  #home-online-three .dashboard-controls {
    height: auto;
  }
  /* matrix page categories */
  .benefit-matrix .title {
	font-size: 0.9em;
  }
  /* life event pop up*/
  .active-benefits .active--event-radio {
	padding: 0 20px 19px 20px;
  }
  /* statement page */
  .benefit-matrix .benefitheader-fixed .benefitdate {
	width: 75%;
  }
  .benefit-statement .input-group .form-control {
	width: auto;
	margin-top: 10px;
  }
  .benefit-statement .btn.online-two-datepicker {
    margin-top: 10px;
  } 
  /* TRS menu colors */
  .trsdashboard .FixedandVariablePay,
  .trsdashboard .Moneymatters,
  .trsdashboard .Mindbody,
  .trsdashboard .Morebenefits {
    color: #fff;
  }
}
/* category width */
.benefit-matrix .benefit-category-mobile-view {
	width: 100%;
}
/* remove default icons applied to modules on homepage */
#home-online-three #home-integrated .modules-mobile .module-mobile i[class*='icon-'] {
  display: none;
}
/* remove duplicate module header */
#home-online-three #home-integrated .modules-mobile .module-content-header-container {
  display: none;
}
/* remove margin applied to module title */
#home-online-three #home-integrated .modules-mobile .module-mobile span.module-label {
  margin-left: 0;
}
/* centre homepage module icons */
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel div[class*='online-two-icon-'] {
  text-align: center;
}
/* homepage buttons */
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy
  button.btn.btn-default {
  background-color: #db0011;
  border-radius: 20px;
  color: #fff;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy a.btn.btn-default,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel button.btn.btn-default {
  padding: 12px 20px;
  width: 100%;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .generic-copy,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .account-copy {
  margin-top: 0;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light .days-left {
  color: #fff;
}
/* claims modules */
#home-online-three #home-integrated .module-mobile #make-a-claim,
#home-online-three #home-integrated .module-mobile #manage-claims {
  padding-bottom: 0;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .make-a-claim-copy.module-copy,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .manage-claims-copy.module-copy {
  margin: 0;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .manage-claims-copy.module-copy {
  height: auto;
}
/* claims pagers */
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .tbs-module-pager .tbs-pager {
  position: static;
  transform: none;
  margin: 0.5em auto;
}

/*================================================================================================== 19. Client specific styles  ==================================================================================================*/
/* homepage module layouts */
@media only screen and (min-width: 768px){
  #home-online-three #home-integrated .modules-right-side.grid-container {
    grid-template-columns:repeat(2,1fr);
    -ms-grid-columns:1fr 1fr;
    grid-template-areas: 
      "module-1 module-1"
      "module-2 module-2"
      "module-4 module-4"
      "module-3 module-5"
      "module-6 module-7"
      "module-8 module-9"
      "module-10 module-11"
  }
  
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {
    -ms-grid-column:1;
    -ms-grid-column-span:2;
	-ms-grid-row-span:1;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:2;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
    -ms-grid-column:1;
    -ms-grid-column-span:1;
    -ms-grid-row:4;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:3;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
    -ms-grid-column:2;
	-ms-grid-column-span:1;
    -ms-grid-row:4;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
    -ms-grid-column:1;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
    -ms-grid-column:2;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
    -ms-grid-column:1;
	-ms-grid-column-span:1;
    -ms-grid-row:6;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
    -ms-grid-column:2;
	-ms-grid-column-span:1;
    -ms-grid-row:6;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
    -ms-grid-column:1;
	-ms-grid-column-span:1;
    -ms-grid-row:7;
  }
   #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-10 {
    -ms-grid-column:2;
	-ms-grid-column-span:1;
    -ms-grid-row:7;
  }

}

@media only screen and (min-width: 1024px){
  #home-online-three #home-integrated .modules-right-side.grid-container {
    grid-template-columns:repeat(3,1fr);
    -ms-grid-columns:1fr 1fr 1fr;
    grid-template-areas: 
      "module-2 module-1 module-1"
      "module-3 module-4 module-4"
      "module-5 module-5 module-6"
      "module-7 module-7 module-8"
      "module-9 module-10 module-11"
  }
  
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {
    -ms-grid-column:2;
    -ms-grid-column-span:2;
    -ms-grid-row:1;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
    -ms-grid-column:1;
	-ms-grid-column-span:1;
    -ms-grid-row:1;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
    -ms-grid-column:1;
    -ms-grid-column-span:1;
    -ms-grid-row:2;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
    -ms-grid-column:2;
	-ms-grid-column-span:2;
    -ms-grid-row:2;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:3;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
    -ms-grid-column:3;
	-ms-grid-column-span:1;
    -ms-grid-row:3;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:4;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
    -ms-grid-column:3;
	-ms-grid-column-span:1;
    -ms-grid-row:4;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
    -ms-grid-column:1;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
    -ms-grid-column:2;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
   #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-10 {
    -ms-grid-column:3;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }

}

@media only screen and (min-width: 1400px){
  #home-online-three #home-integrated .modules-right-side.grid-container {
    grid-template-columns:repeat(4,1fr);
    -ms-grid-columns:1fr 1fr 1fr 1fr;
     grid-template-areas: 
      "module-2 module-2 module-1 module-1"
      "module-3 module-3 module-1 module-1"
      "module-4 module-4 module-5 module-5"
      "module-6 module-6 module-7 module-7"
      "module-8 module-9 module-10 module-11"
    }
  
    #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {
    -ms-grid-column:3;
    -ms-grid-column-span:2;
    -ms-grid-row:1;
	-ms-grid-row-span:2;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:1;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
    -ms-grid-column:1;
    -ms-grid-column-span:2;
    -ms-grid-row:2;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:3;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
    -ms-grid-column:3;
	-ms-grid-column-span:2;
    -ms-grid-row:3;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
    -ms-grid-column:1;
	-ms-grid-column-span:2;
    -ms-grid-row:4;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
    -ms-grid-column:3;
	-ms-grid-column-span:2;
    -ms-grid-row:4;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
    -ms-grid-column:1;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
    -ms-grid-column:2;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
    -ms-grid-column:3;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }
   #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-10 {
    -ms-grid-column:4;
	-ms-grid-column-span:1;
    -ms-grid-row:5;
  }

}


/****************************************** Using icons for benefits/events *******************************************/
/* if wanting icons to be colour coded to benefit groups */
/* replace LINEGROUP1/LINEGROUP2/LINEGROUP3 with relevant classes */
.benefit-matrix .LINEGROUP1 .benefitline .img:before,
#benefit-overview .LINEGROUP1 .summaryImage .img:before {
  color: #000;
}
.benefit-matrix .LINEGROUP2 .benefitline .img:before,
#benefit-overview .LINEGROUP2 .summaryImage .img:before {
  color: #000;
}
.benefit-matrix .LINEGROUP3 .benefitline .img:before,
#benefit-overview .LINEGROUP3 .summaryImage .img:before {
  color: #000;
}

/****************************************** Using icons for homepage/elsewhere on the site *******************************************/
/* add any additional icons from the OnlineTwoIconFont that are required */

/* Benefit Icons: Retirement Savings (Line Set) */
#benefit-overview .img.BenefitImage_dd87bc66-3653-4a7b-adc1-30a32c893fc3:before,
.img.Ldd87bc66-3653-4a7b-adc1-30a32c893fc3:before,
div.see-also .img.Lfaedae03-ffe5-49d4-9244-7d47fb360d08:before{
	content: '\e91f';
}

/* Benefit Icons: Tax & Financial Planning */
#benefit-overview .img.BenefitImage_87f22fc8-b00b-4d5e-8654-08a343a4313d:before,
.img.L87f22fc8-b00b-4d5e-8654-08a343a4313d:before,
div.see-also .img.L87f22fc8-b00b-4d5e-8654-08a343a4313d:before{
	content: '\e997';
}

/* Benefit Icons: Healthcare Plan */
#benefit-overview .img.BenefitImage_ee7ca8a2-31e0-4843-b49f-60509ec36b28:before,
.img.Lee7ca8a2-31e0-4843-b49f-60509ec36b28:before,
div.see-also .img.Lee7ca8a2-31e0-4843-b49f-60509ec36b28:before{
	content: '\e927';
}

/* Benefit Icons: Remote GP */
#benefit-overview .img.BenefitImage_57cf28cf-1940-4150-8ba8-d19eef0d9d2d:before,
.img.L57cf28cf-1940-4150-8ba8-d19eef0d9d2d:before,
div.see-also .img.L57cf28cf-1940-4150-8ba8-d19eef0d9d2d:before{
	content: '\e99f';
}
/* Benefit Icons: Health Assessment - for Me - New */
#benefit-overview .img.BenefitImage_e667963e-fa1e-45b0-b423-5086391ca5ca:before,
.img.Le667963e-fa1e-45b0-b423-5086391ca5ca:before,
div.see-also .img.Le667963e-fa1e-45b0-b423-5086391ca5ca:before{
	content: '\e915';
}

/* Benefit Icons: Health Assessment - for Me */
#benefit-overview .img.BenefitImage_7da213d8-1c5f-4b74-b372-c8d45f2eca80:before,
.img.L7da213d8-1c5f-4b74-b372-c8d45f2eca80:before,
div.see-also .img.L7da213d8-1c5f-4b74-b372-c8d45f2eca80:before{
	content: '\e915';
}
/* Benefit Icons:HCA Primary Care Health Assessment*/
#benefit-overview .img.BenefitImage_2585ba89-016e-4229-92ff-98279466360f:before,
.img.L2585ba89-016e-4229-92ff-98279466360f:before,
div.see-also .img.L2585ba89-016e-4229-92ff-98279466360f:before{
	content: '\e915';
}

/* Benefit Icons: Health Assessment - for My Partner */
#benefit-overview .img.BenefitImage_ae96c0db-a5b5-4884-9ca1-cab4da225528:before,
.img.Lae96c0db-a5b5-4884-9ca1-cab4da225528:before,
div.see-also .img.Lae96c0db-a5b5-4884-9ca1-cab4da225528:before{
	content: '\e916';
}

/* Benefit Icons: Dental Cover */
#benefit-overview .img.BenefitImage_b2f972a5-acf4-4037-8e85-a24162501176:before,
.img.Lb2f972a5-acf4-4037-8e85-a24162501176:before,
div.see-also .img.Lb2f972a5-acf4-4037-8e85-a24162501176:before{
	content: '\e909';
}

/* Benefit Icons: Health Cash Plan */
#benefit-overview .img.BenefitImage_de3d5852-3de5-484c-8409-d47b51747df2:before,
.img.Lde3d5852-3de5-484c-8409-d47b51747df2:before,
div.see-also .img.Lde3d5852-3de5-484c-8409-d47b51747df2:before{
	content: '\e918';
}

/* Benefit Icons: Group Income Protection */
#benefit-overview .img.BenefitImage_fa8bcf35-ec79-4b67-bb25-f8ebe268ba5a:before,
.img.Lfa8bcf35-ec79-4b67-bb25-f8ebe268ba5a:before,
div.see-also .img.Lfa8bcf35-ec79-4b67-bb25-f8ebe268ba5a:before{
	content: '\e91b';
}

/* Benefit Icons: Life Assurance - for Me */
#benefit-overview .img.BenefitImage_5d299cf6-ba8b-4da2-a47f-12507c248a73:before,
.img.L5d299cf6-ba8b-4da2-a47f-12507c248a73:before,
div.see-also .img.La96ea34e-933c-4135-bd96-1ff124d5b307:before{
	content: '\e91c';
}

/* Benefit Icons: Life Assurance - for My Partner */
#benefit-overview .img.BenefitImage_91f5ffd6-a182-4b19-b610-fb174eedc4bb:before,
.img.L91f5ffd6-a182-4b19-b610-fb174eedc4bb:before,
div.see-also .img.L91f5ffd6-a182-4b19-b610-fb174eedc4bb:before{
	content: '\e91d';
}

/* Benefit Icons: Stouton Onsite nurseries */
#benefit-overview .img.BenefitImage_46c3eacf-a879-4464-a0e8-4538399e2d86:before,
.img.L46c3eacf-a879-4464-a0e8-4538399e2d86:before,
div.see-also .img.L46c3eacf-a879-4464-a0e8-4538399e2d86:before{
	content: '\e92a';
}

/* Benefit Icons: Hamilton Onsite nurseries */
#benefit-overview .img.BenefitImage_df8ea918-a567-47ae-89f0-ffb0374993dc:before,
.img.Ldf8ea918-a567-47ae-89f0-ffb0374993dc:before,
div.see-also .img.Ldf8ea918-a567-47ae-89f0-ffb0374993dc:before{
	content: '\e92a';
}

/* Benefit Icons: Critical Illness Cover - for Me */
#benefit-overview .img.BenefitImage_a40324ad-415b-46b7-9072-0ce295932adc:before,
.img.La40324ad-415b-46b7-9072-0ce295932adc:before,
div.see-also .img.La40324ad-415b-46b7-9072-0ce295932adc:before{
	content: '\e905';
}

/* Benefit Icons: Critical Illness Cover - for My Partner */
#benefit-overview .img.BenefitImage_f2838245-0767-471e-a51c-391a7f2828df:before,
.img.Lf2838245-0767-471e-a51c-391a7f2828df:before,
div.see-also .img.Lf2838245-0767-471e-a51c-391a7f2828df:before{
	content: '\e906';
}

/* Benefit Icons: Financial Health Check */
#benefit-overview .img.BenefitImage_1b4d6769-2aeb-427a-813e-7332456654a5:before,
.img.L1b4d6769-2aeb-427a-813e-7332456654a5:before,
div.see-also .img.L1b4d6769-2aeb-427a-813e-7332456654a5:before{
	content: '\e991';
}

/* Benefit Icons: Personal Accident Cover - for Me */
#benefit-overview .img.BenefitImage_bae28bb7-5e2d-4a0a-b0d5-4c0538b0fabc:before,
.img.Lbae28bb7-5e2d-4a0a-b0d5-4c0538b0fabc:before,
div.see-also .img.Lbae28bb7-5e2d-4a0a-b0d5-4c0538b0fabc:before{
	content: '\e925';
}

/* Benefit Icons: Personal Accident Cover - for My Partner */
#benefit-overview .img.BenefitImage_a06036dc-ed0b-427c-be5f-ae1bad67850c:before,
.img.La06036dc-ed0b-427c-be5f-ae1bad67850c:before,
div.see-also .img.La06036dc-ed0b-427c-be5f-ae1bad67850c:before{
	content: '\e9a8';
}

/* Benefit Icons: Car Breakdown Cover */
#benefit-overview .img.BenefitImage_f6c528ce-8aca-4c12-8653-d12f5793baf9:before,
.img.Lf6c528ce-8aca-4c12-8653-d12f5793baf9:before,
div.see-also .img.Lf6c528ce-8aca-4c12-8653-d12f5793baf9:before{
	content: '\e932';
}

/* Benefit Icons: Give As You Earn */
#benefit-overview .img.BenefitImage_ce940c7b-1df5-4eb7-82fc-2218d73130d0:before,
.img.Lce940c7b-1df5-4eb7-82fc-2218d73130d0:before,
div.see-also .img.Lce940c7b-1df5-4eb7-82fc-2218d73130d0:before{
	content: '\e911';
}

/* Benefit Icons: Donate my pennies */
#benefit-overview .img.BenefitImage_c478b529-7754-49ec-ac18-825f5a045f13:before,
.img.Lc478b529-7754-49ec-ac18-825f5a045f13:before,
div.see-also .img.Lc478b529-7754-49ec-ac18-825f5a045f13:before{
	content: '\e990';
}

/* Benefit Icons: Child Sponsorship (Line Set) */
#benefit-overview .img.BenefitImage_04d1168c-c4ad-4565-9f12-3a07ee77e2d5:before,
.img.L04d1168c-c4ad-4565-9f12-3a07ee77e2d5:before,
div.see-also .img.L517892c3-9757-437c-a028-9b56996dd48d:before{
	content: '\e98f';
}

/* Benefit Icons: Childcare */
#benefit-overview .img.BenefitImage_3c4f2aac-29f8-4ddb-8930-97c3347e4539:before,
.img.L3c4f2aac-29f8-4ddb-8930-97c3347e4539:before,
div.see-also .img.L3c4f2aac-29f8-4ddb-8930-97c3347e4539:before{
	content: '\e901';
}

/* Benefit Icons: Childcare Account Notice (CAN) */
#benefit-overview .img.BenefitImage_d250d53f-906f-4cfb-8b6a-5663fb17bdef:before,
.img.Ld250d53f-906f-4cfb-8b6a-5663fb17bdef:before,
div.see-also .img.Ld250d53f-906f-4cfb-8b6a-5663fb17bdef:before{
	content: '\e901';
}

/* Benefit Icons: Cycle2Work 36 */
#benefit-overview .img.BenefitImage_aaa96d16-95a5-42d4-9127-ea395a641519:before,
.img.Laaa96d16-95a5-42d4-9127-ea395a641519:before,
div.see-also .img.Laaa96d16-95a5-42d4-9127-ea395a641519:before{
	content: '\e908';
}

/* Benefit Icons: Cycle2Work */
#benefit-overview .img.BenefitImage_9580f964-2964-43f8-ac0c-1eb765639462:before,
.img.L9580f964-2964-43f8-ac0c-1eb765639462:before,
div.see-also .img.L9580f964-2964-43f8-ac0c-1eb765639462:before{
	content: '\e908';
}

/* Benefit Icons: Holiday Buy / Sell (Line Set) */
#benefit-overview .img.BenefitImage_75fa722c-0012-4366-af30-158574935bcf:before,
.img.L75fa722c-0012-4366-af30-158574935bcf:before,
div.see-also .img.L75fa722c-0012-4366-af30-158574935bcf:before{
	content: '\e92e';
}

/* Benefit Icons: Holiday Buy / Sell (HINV) */
#benefit-overview .img.BenefitImage_e2692329-68f5-4889-8b3a-ec6f97d8cc5c:before,
.img.Le2692329-68f5-4889-8b3a-ec6f97d8cc5c:before,
div.see-also .img.Le2692329-68f5-4889-8b3a-ec6f97d8cc5c:before{
	content: '\e92e';
}

/* Benefit Icons: Green car */
#benefit-overview .img.BenefitImage_ec96da47-4d28-400b-90b5-e4eb843cd827:before,
.img.Lec96da47-4d28-400b-90b5-e4eb843cd827:before,
div.see-also .img.Lec96da47-4d28-400b-90b5-e4eb843cd827:before{
	content: '\e98e';
}

/* Benefit Icons: HSBC Support Fund Donations */
#benefit-overview .img.BenefitImage_0be1befe-2b2c-4d92-8d25-f30d53aeab07:before,
.img.L0be1befe-2b2c-4d92-8d25-f30d53aeab07:before,
div.see-also .img.L0be1befe-2b2c-4d92-8d25-f30d53aeab07:before{
	content: '\e924';
}

/* Benefit Icons: Nuffield app */
#benefit-overview .img.BenefitImage_43db42ff-d66b-4924-b459-7021cf622521:before,
.img.L43db42ff-d66b-4924-b459-7021cf622521:before,
div.see-also .img.L43db42ff-d66b-4924-b459-7021cf622521:before {
	content: '\e9b6';
}
/* Benefit Icons: Back up care */
#benefit-overview .img.BenefitImage_72edd6c8-c059-462a-a3be-8d58adb9d210:before,
.img.L72edd6c8-c059-462a-a3be-8d58adb9d210:before,
div.see-also .img.L72edd6c8-c059-462a-a3be-8d58adb9d210:before {
	content: '\e976';
}

/* Event Icons: Going on Expat Assignment/Offshore */
.benefit-matrix .active-benefits .img.Ec348d0aa-7697-4a22-9084-530e7dfbfc2a:before {
	content: '\e957';
}

/* Event Icons: Changing Your Home Location */
.benefit-matrix .active-benefits .img.E7ba37082-67c3-4848-afa1-231d4f997fcc:before {
	content: '\e96a';
}

/* Event Icons: Gain Dependant */
.benefit-matrix .active-benefits .img.Eb8eae352-49c1-42a0-b60f-618fafeb47fb:before {
	content: '\e9a2';
}

/* Event Icons: Go on Sick Leave */
.benefit-matrix .active-benefits .img.Efd0f18f3-1065-4dd7-999c-5d5f42f104da:before {
	content: '\e9b0';
}

/* Event Icons: Lose Dependant */
.benefit-matrix .active-benefits .img.E7f3b3640-c0a1-4958-9540-cf34513407a3:before {
	content: '\e970';
}

/* Event Icons: Partner Job Loss */
.benefit-matrix .active-benefits .img.Ee43853c7-95e2-4086-af8d-2c5ff734b9b1:before {
	content: '\e96f';
}

/* Event Icons: Pregnancy */
.benefit-matrix .active-benefits .img.E333d1980-8940-417b-b626-9b651a894bc9:before {
	content: '\e969';
}

/* Event Icons: Return from Sick Leave */
.benefit-matrix .active-benefits .img.E2b27c782-6c7c-4b06-9186-237f8e5eef30:before {
	content: '\e99d';
}

/* Event Icons: Going on compulsory paid reservists call up */
.benefit-matrix .active-benefits .img.E903a73f8-82fd-42ef-8d5f-c5269b2409e7:before {
	content: '\e97a';
}

/* Event Icons: Returning from compulsory paid reservists call up */
.benefit-matrix .active-benefits .img.E363818cc-9a92-4ad9-b297-fe59e0a5dc4b:before {
	content: '\e97b';
}
/**************************** client specific page *******************************/
/* fix close button on datepicker */
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:focus,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success.active:focus {
	min-width: auto;
}
/*** my shares, charitable giving, my choice page ***/
#my-shares h3,
#my-shares .panel-body,
#charitable-giving h3,
#charitable-giving .panel-body,
#my-choice h3,
#my-choice .panel-body {
  font-family: Universe_light;
}
#my-shares h3,
#my-shares .panel-body,
#charitable-giving h3,
#my-choice h3 {
  padding-top: 0;
}
#charitable-giving.bootstrap-iso,
#my-choice.bootstrap-iso {
  background: #f1f1f1;
}
#charitable, #choice {
    padding: 1px 10px 10px 10px;
	background: #fff;
	margin: 0;
	margin-bottom: 1em;
	box-shadow: 0 6px 2px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.1);
}

/* additional icons */
/* Donate your pennies */
.online-two-icon-141:before {
  content: '\e990';
}
/* Give as you earn */
.online-two-icon-18:before {
  content: '\e911';
}
/* Support fund */
.online-two-icon-36:before {
  content: '\e924';
}
/* Child sponsorship */
.online-two-icon-140:before {
  content: '\e98f';
}

/*** About my choice page ***/
#my-choice table td {
  padding: 0 10px;
  width: 50%;
}
#my-choice table tr:nth-child(1) {
  background-color: #e8e8e8;
}

/****** Custom styling for 2 buttons in view ******/
/* action button */
#login-assistance .button-style.blue,
.active-benefits .btn-success,
#exit-continue A.button-style.blue,
.btn.btn-warning.btn-print,
#contactTabContactPreferences .button-style.green,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue,
.benefit-matrix .coverage-pannel .btn-success {
  background-color: #db0011;
  color: #fff;
  border: 2px solid #db0011;
}
/* secondary button */
#login-assistance .button-style.gray,
.active-benefits .btn-warning,
#exit-cancel A.button-style.blue,
#contactTabContactPreferences .button-style.gray,
.benefit-matrix #followup-items-overlay .followup-content .button-style.gray,
.benefit-matrix .coverage-pannel .btn-warning {
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
}
/* hover, focus, active */
#login-assistance .button-style.blue:hover,
#login-assistance .button-style.blue:focus,
#login-assistance .button-style.blue:active,
#login-assistance .button-style.blue:active:hover,
#login-assistance .button-style.blue:active:focus,
#login-assistance .button-style.gray:hover,
#login-assistance .button-style.gray:focus,
#login-assistance .button-style.gray:active,
#login-assistance .button-style.gray:active:hover,
#login-assistance .button-style.gray:active:focus,
.active-benefits .btn-success:hover,
.active-benefits .btn-success:focus,
.active-benefits .btn-success:active,
.active-benefits .btn-success:active:hover,
.active-benefits .btn-success:active:focus,
.active-benefits .btn-warning:hover,
.active-benefits .btn-warning:focus,
.active-benefits .btn-warning:active,
.active-benefits .btn-warning:active:hover,
.active-benefits .btn-warning:active:focus,
#exit-continue A.button-style.blue:hover,
#exit-cancel A.button-style.blue:hover,
#exit-cancel A.button-style.blue:focus,
#exit-cancel A.button-style.blue:active,
#exit-cancel A.button-style.blue:active:hover,
#exit-cancel A.button-style.blue:active:focus,
.btn.btn-warning.btn-print:hover,
.btn.btn-warning.btn-print:focus,
.btn.btn-warning.btn-print:active,
.btn.btn-warning.btn-print:active:hover,
.btn.btn-warning.btn-print:active:focus,
#contactTabContactPreferences .button-style.green:hover,
#contactTabContactPreferences .button-style.green:focus,
#contactTabContactPreferences .button-style.green:active,
#contactTabContactPreferences .button-style.green:active:hover,
#contactTabContactPreferences .button-style.green:active:focus,
#contactTabContactPreferences .button-style.gray:hover,
#contactTabContactPreferences .button-style.gray:focus,
#contactTabContactPreferences .button-style.gray:active,
#contactTabContactPreferences .button-style.gray:active:hover,
#contactTabContactPreferences .button-style.gray:active:focus,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue:hover,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue:focus,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue:active,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue:active:hover,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue:active:focus,
.benefit-matrix #followup-items-overlay .followup-content .button-style.gray:hover,
.benefit-matrix #followup-items-overlay .followup-content .button-style.gray:focus,
.benefit-matrix #followup-items-overlay .followup-content .button-style.gray:active,
.benefit-matrix #followup-items-overlay .followup-content .button-style.gray:active:hover,
.benefit-matrix #followup-items-overlay .followup-content .button-style.gray:active:focus,
.benefit-matrix .coverage-pannel .btn-warning:hover,
.benefit-matrix .coverage-pannel .btn-warning:focus,
.benefit-matrix .coverage-pannel .btn-warning:active,
.benefit-matrix .coverage-pannel .btn-warning:active:hover,
.benefit-matrix .coverage-pannel .btn-warning:active:focus,
.benefit-matrix .coverage-pannel .btn-success:hover,
.benefit-matrix .coverage-pannel .btn-success:focus,
.benefit-matrix .coverage-pannel .btn-success:active,
.benefit-matrix .coverage-pannel .btn-success:active:hover,
.benefit-matrix .coverage-pannel .btn-success:active:focus,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue#follow-up-previous-bttn:hover,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue#follow-up-previous-bttn:focus,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue#follow-up-previous-bttn:active,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue#follow-up-previous-bttn:active:hover,
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue#follow-up-previous-bttn:active:focus {
  background-color: #686868;
  border: 2px solid #686868;
  color: #fff;
}

/* Custom styling for 1 button in view */
.benefit-statement .modal-content .hdf-followup .btn-warning,
.login-frst-time .success-link .button-style,
#login-assist-success .success-link .button-style {
  background-color: #db0011;
}
#login-assist-success .success-link .button-style:hover {
  background-color: #686868;
}

/* Custom styling for 3 button in view */
.benefit-matrix #followup-items-overlay .followup-content .button-style.blue#follow-up-previous-bttn {
  background-color: #000;
  border: 2px solid #000;
}

/*********************** Maintenance page ***************************/
div.maintenance {
  color: #000;
  margin: 0 6%;
}

/***************************** Custom styling ***********************************/
/* Hide Green cars input box */
#ProductAmount-d2b32e18-5a79-4d9b-9aca-f39fb74ce207 .amount-input {
  display: none;
}

/* Dual enrolment button */
#home-integrated #enrolment #event-renewal .btn.btn-default {
  background-color: #db0011;
  color: #fff;
}
#home-online-three #home-integrated #enrolment #event-renewal .btn.btn-default:hover::before, 
#home-online-three #home-integrated #enrolment #event-renewal .btn.btn-default:focus::before, #home-online-three #home-integrated #enrolment #event-renewal .btn.btn-default:active::before, 
#home-online-three #home-integrated #enrolment #event-renewal .btn.btn-default:active:hover::before, #home-online-three #home-integrated #enrolment #event-renewal .btn.btn-default:active:focus::before, #home-online-three #home-integrated #enrolment #event-renewal .btn.btn-default:hover{
  background-color: #fff;
  color: #000;
}

/*To hide CAN benefit intro icon*/
.BenefitIntro_d250d53f-906f-4cfb-8b6a-5663fb17bdef span.glyphicon.glyphicon-info-sign.glyphicon-info-sign-color.ng-scope {
    display: none;
}
/* AXA page */
.AXAhealth img {
    margin-left: 18px;
}

/*Matrix Page*/
.Matrixtext {
    color: #db0011;
}
.intro-text-questions {
   display: flex;
}
.Matrixintrotextpage {
    width: 100%;
  padding: 10px;
}
.intro-text-questions {
    margin-bottom: 5px;
}

/*Renewal event button*/
#event-renewal .text-light {
    flex: 0;
}
#event-other #event-active {
    flex: 0;
}
/*Hide select button on My Green car on Matrix page */
.benefit-matrix .BenefitIntro_ec96da47-4d28-400b-90b5-e4eb843cd827 .btn-option-elect
{
  display:none;
}
/*Hide select button on Backup care on Matrix page */
.benefit-matrix .BenefitIntro_72edd6c8-c059-462a-a3be-8d58adb9d210 .btn-option-elect
{
  display:none;
}
/*Hide select button on Bupa Global on Matrix page */
.benefit-matrix .BenefitIntro_74dbdb76-9728-457b-8f10-a6275a617755 .btn-option-elect
{
  display:none;
}
/* Hide new and changed labels */
.benefit-matrix .newbenefit,
.benefit-matrix .changebenefit {
  display:none;
}
/* Benefit Icons: Bupa Global */
#benefit-overview .img.BenefitImage_74dbdb76-9728-457b-8f10-a6275a617755:before,
.img.L74dbdb76-9728-457b-8f10-a6275a617755:before,
div.see-also .img.L74dbdb76-9728-457b-8f10-a6275a617755:before {
	content: '\e955';
}
/*Text to be added below Datepicker on benefit statement page */
.benefit-statement .totalcost-section-row#printdiv::before
{
    content:"To view your future benefits, go to the Pending Benefits button and select an upcoming effective date, such as 1 January. Please then wait for the page to update as it may take a little time uploading the information.";
  margin-bottom:20px;
}
/*AE button text */
#home-integrated #enrolment #event-renewal .btn.btn-default span[ng-bind="::vm.moduleData.buttonCurrentEnrollment"]
{
    font-weight:bold;
  font-size:25px;
}
/*Anytime button text */
#home-online-three #home-integrated #enrolment .btn.btn-default span[ng-bind="::vm.moduleData.buttonCurrentBenefits"]
{
    font-weight:normal;
  font-size:20px;
}
/*HA Hide*/
#benefit-overview .overviewSummaryList div#overview-item-7da213d8-1c5f-4b74-b372-c8d45f2eca80 {
    display: none;
}
/* Hide Salary Sacrifice Cost on matrix and Statement page in Lineset Retirement savings */
.BenefitIntro_dd87bc66-3653-4a7b-adc1-30a32c893fc3 div[ng-if="::linetype.LineSet != null"]:nth-of-type(4) .col-md-8,
#lineid_224d13f6-5fb1-4024-8da1-fd1a2e1662ea div[ng-if="vm.clientUIConfiguration.EnrolStep2EmployerCostDisplay"],
#lineid_224d13f6-5fb1-4024-8da1-fd1a2e1662ea .you-pay
{
    display:none;
}
/*TRS Carousel Update*/
.btn.btn-primary.TRSButton {
    margin-left: 2.6rem;
}
/*Coverage Display alignmenet - Registered*/
@media only screen and (min-width: 750px) {
   .product-info #product-info50c60d6e-6c2f-442b-acf8-e4bb3e76913a .description
{
	width:900px;
}
}
/*Coverage Display alignmenet - Excepted*/
@media only screen and (min-width: 750px) {
   .product-info #product-info4fb0c88b-a24b-4370-8ca7-29ee024805eb .description
{
	width:900px;
}
}
/*Hide select button on Financial healthcheck on Matrix page */
.benefit-matrix .BenefitIntro_1b4d6769-2aeb-427a-813e-7332456654a5 .btn-option-elect
{
  display:none;
}
/*Hide additional information supplied for follow up widget from benefit statement for LA*/
.benefit-statement .BenefitIntro_5d299cf6-ba8b-4da2-a47f-12507c248a73 .hdf-followup
{
display:none;
}

/* Minification failed (line 3819, error number 1039): Token not allowed after unary operator: '-accessibility-outline' */