/*================================================================================================== Version 4.1 ================================================================================================== */
/*================================================================================================== 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
	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;
}

/*================================================================================================== 1. Variables  ==================================================================================================*/
:root {
  --accessibility-outline: #666;
  --main-text-color: #000;
  --heading-color: #000;
  --button-color: #262836;
  --button-color-alternate: #d14900;
  --button-text-color: #fff;
  --button-text-color-alternate: #fff;
  --button-hover-color: #3f435a;
  --button-hover-color-alternate: #c24400;
  --button-hover-text-color: #fff;
  --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: #acc0c4;
  --header-overlay-text-color: #000;
  --panel-color: #262836;
  --panel-text-color: #fff;
  --info-icon-color: #525174;
  --tab-selector-text-color: #513b56;
  --tab-selector-border-color: #eb0017;
  --tab-selector-inactive-text-color: #666;
  --progress-bar-color: #539987;
  --success-icon-color: #539987;
  --unordered-list-bullet-color: #525174;
  --datepicker-clear-text: #fff;
  --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(/endesaflex/media/Media/Images/Endesa_Logo_Primary_RGB_resized.png);
  --login-image: url(/endesaflex/media/Media/Images/Login%20page/GettyImages-640313074%20v2.jpg);
  --site-header-color: #525174;
  --site-header-icon-color: #676767-footer-color: #f2f2f2;
  --site-footer-link-color: #000;
  --need-assistance-pull-down-menu: #513b56;
  --homepage-company-content-icon: '\e978';
  --homepage-module-background-color: #E7F3F5;
  --homepage-modules-button-font-color: #fff;
  
  /*Template standard modules colors - might be amended in case client requests bespoke branding*/
  --homepage-module-pension-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg id='visual' viewBox='0 0 960 540' width='960' height='540' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Crect x='0' y='0' width='960' height='540' fill='%235D6D78'%3E%3C/rect%3E%3Cpath d='M0 222L80 309L160 278L240 226L320 324L400 250L480 290L560 324L640 165L720 285L800 290L880 187L960 280L960 541L880 541L800 541L720 541L640 541L560 541L480 541L400 541L320 541L240 541L160 541L80 541L0 541Z' fill='%2382939A'%3E%3C/path%3E%3Cpath d='M0 260L80 369L160 377L240 363L320 291L400 413L480 391L560 258L640 256L720 336L800 313L880 394L960 297L960 541L880 541L800 541L720 541L640 541L560 541L480 541L400 541L320 541L240 541L160 541L80 541L0 541Z' fill='%23ACC0C4'%3E%3C/path%3E%3Cpath d='M0 359L80 426L160 421L240 448L320 371L400 457L480 420L560 433L640 377L720 450L800 446L880 436L960 433L960 541L880 541L800 541L720 541L640 541L560 541L480 541L400 541L320 541L240 541L160 541L80 541L0 541Z' fill='%23CDDBDE'%3E%3C/path%3E%3C/svg%3E");
  --homepage-module-enrolment-background-image: url("/endesaflex/media/Media/Images/TBSLite_materials-Dashboard-58_1.png");
  
  --homepage-module-benefit-overview-background-color: #E7F3F5;
  --homepage-module-trs-background-color: #E7F3F5;
  --homepage-module-claims-background-color: #E7F3F5;
  --homepage-module-discounts-background-color: #262836;
  --homepage-module-videos-background-color: #E7F3F5;
  --homepage-module-twitter-background-color: #262836;
  --homepage-module-benefit-statement-background-color: #d14900;
  
  --homepage-module-pension-text-color: #fff;
  --homepage-module-enrolment-text-color: #000;
  --homepage-module-benefit-overview-text-color: #000;
  --homepage-module-trs-text-color: #000;
  --homepage-module-claims-text-color: #000;
  --homepage-module-discounts-text-color: #fff;
  --homepage-module-videos-text-color: #000;
  --homepage-module-twitter-text-color: #fff;
  --homepage-module-benefit-statement-text-color: #fff;
    
  --homepage-module-trs-placeholder-image: url("/endesaflex/media/Media/Images/gettyimages_1304920524_red-min%20(TRS).jpg");
  --homepage-module-claims-placeholder-image: url("/endesaflex/media/Media/Images/1146500483-min%20(claims).jpg");
  
  /*modules buttons colors, for hovering some use general hover styling, while all modules buttons use the same text color by default - may be amended one by one in further code if needed*/
  --homepage-module-pension-button-color: #d14900;
  --homepage-module-enrolment-button-color: #d14900; 
  --homepage-module-overview-button-1-color: #d14900;
  --homepage-module-overview-button-2-color: #262836;
  --homepage-module-trs-button-color: #262836;
  --homepage-module-claims-button-1-color: #d14900;
  --homepage-module-claims-button-2-color: #262836;
  --homepage-module-deals-button-color: #d14900;
  --homepage-module-videos-button-1-color: #d14900;
  --homepage-module-videos-button-2-color: #262836;
  --homepage-module-statement-button-color: #262836;

  --homepage-module-pension-button-hover-color: #c24400;
  --homepage-module-enrolment-button-hover-color: #c24400;
  --homepage-module-overview-button-1-hover-color: #c24400;
  --homepage-module-claims-button-1-hover-color: #c24400;
  --homepage-module-deals-button-hover-color: #c24400;
  --homepage-module-videos-button-1-hover-color: #c24400;
  
  --homepage-heading-color: #000;
  --homepage-module-icon-color: #525174;
  --homepage-enrolment-days-left-color: #525174;
  --pulse-color-start: rgba(47, 79, 79, 0.5);
  --pulse-color-end: rgba(47, 79, 79, 0);
  --selected-email-color: #2f4f4f;
  --benefit-selection-elected-box-highlight: #262836;
  --benefit-selected-tick-mark: #fff;
  --follow-up-panel-color: #539987;
  --mobile-menu-icon-color: #fff;
  --mobile-menu-link-color: #000;
  
  --benefits-panels-color: #262836; 
  --matrix-confirm-button-color: #d14900;
  --matrix-confirm-button-color-hover: #c24400;
  --matrix-sections-background-color: #acc0c4;
  --matrix-sections-text-color: #000;
  --matrix-sections-background-color-hover: rgba(172, 192, 196, .9);
  --matrix-category-panel-color: #262836;
  --matrix-header-button-background: #007585;
  --matrix-header-button-background-hover: #009eb3;
}

@-webkit-keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px var(--pulse-color-start);
  }
  100% {
    box-shadow: 0 0 0 10px var(--pulse-color-end);
  }
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px var(--pulse-color-start);
  }
  100% {
    box-shadow: 0 0 0 10px var(--pulse-color-end);
  }
}

/*================================================================================================== 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: 15rem;
  line-height: 1;
}

/* 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 reset */
.highcharts-legend-item text tspan,
.highcharts-title,
.highcharts-label.highcharts-data-label tspan,
.highcharts-label.highcharts-tooltip tspan,
.highcharts-axis-labels {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 14px;
}

/*OneTrust footer link placing*/
.online-two-iso #footer .optanon-toggle-display
{
  vertical-align: -0.3rem;
}

/* global font size and colour */
.bootstrap-iso,
.benefitselect .followup-container .followup-item-coverage-heading,
.benefitselect .followup-required.alert-warning > :not(.followup-required-sign),
.benefitselect .followup-item-collect.alert-warning {
  color: var(--main-text-color);
  font-size: 1rem;
}
.bootstrap-iso p {
  padding-bottom: 0;
}
.online-two-iso label {
    color: var(--main-text-color);
}

/*List styling*/
.pannel-body-full UL
{
  margin-left: 2rem;
  list-style: disc;
}

.pannel-body-full UL LI ul
{
  list-style: circle;
}

/*Generic loader*/
/*Generic loader by loading.io*/
.tbs-loader {
  background: url('/smart/media/IMG/Various/Double%20Ring-loader-loading.io.gif') center center/100px no-repeat;
  font-size: 1rem !important;
}

#mainThrobber {
  background-image: url(/smart/media/IMG/Various/Double%20Ring-loader-loading.io.gif);
  background-size: 100px;
}

/* 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: var(--heading-color);
  padding-left: 0;
}

/* 3b) links */
a,
.bootstrap-iso a,
.dependant-list a.dependant-confirm-delete,
.terms-conditions-cookies .cookie-policy-link,
.terms-conditions-cookies .term-condtion-link {
  color: var(--link-text-color);
}
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: var(--link-text-hover-color);
}
.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: var(--link-text-click-color);
}

/* 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: var(--button-color);
  border: none;
  border-radius: 5px;
  color: var(--button-text-color);
  overflow: hidden;
  position: relative;
  transition: all 0.25s;
  z-index: 1;
  font-weight: bold;
}

/* 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: var(--button-hover-color);
  border-radius: 5px;
  border: none;
  box-shadow: none;
  color: var(--button-text-color);
  font-weight: bold;
}

/* 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: var(--button-color);
  border-radius: 5px;
  border: none;
  box-shadow: none;
  color: var(--button-text-color);
  outline: 3px solid var(--accessibility-outline);
}

/* 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: var(--button-hover-color);
  border-radius: 5px;
  border: none;
  box-shadow: none;
  color: var(--button-text-color);
  outline: 3px solid var(--accessibility-outline);
}

/* 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 #prevBtn A.button-style.blue,
.online-two-iso #exit-cancel A.button-style.blue,
.online-two-iso A.button-style.gray,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning {
  background-color: var(--button-color);
  color: var(--button-text-color);
}

.bootstrap-iso .modal-controls .btn-warning:hover,
.bootstrap-iso .modal-controls .btn-warning:focus,
.online-two-iso #exit-cancel A.button-style.blue:hover,
.online-two-iso #exit-cancel A.button-style.blue:focus,
.online-two-iso #prevBtn A.button-style.blue:hover,
.online-two-iso #prevBtn A.button-style.blue:focus,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:hover,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:focus
{
background-color: var(--button-hover-color);
}

.bootstrap-iso .modal-controls .btn-warning:active,
.bootstrap-iso .modal-controls .btn-warning:active:hover,
.bootstrap-iso .modal-controls .btn-warning:active:focus,
.online-two-iso #exit-cancel A.button-style.blue:active,
.online-two-iso #exit-cancel A.button-style.blue:active:hover,
.online-two-iso #exit-cancel A.button-style.blue:active:focus,
.online-two-iso #prevBtn A.button-style.blue:active,
.online-two-iso #prevBtn A.button-style.blue:active:hover,
.online-two-iso #prevBtn A.button-style.blue: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: var(--button-click-color);
}

/* 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;
  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 {
  padding-left: 1em;
}
.bootstrap-iso ul.fa-ul li::before {
  font-family: FontAwesome;
  content: '\f111';
  font-size: 0.5rem;
  margin-left: -1em;
  padding-right: 0.5em;
  position: relative;
  bottom: 3px;
  color: var(--unordered-list-bullet-color);
}
.bootstrap-iso ul.fa-ul li ul.fa-ul li::before {
  content: '\f10c';
}
/* 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: var(--header-overlay);
}
/* reset benefit intro popup to not have header overlay colour */
.online-two-iso [class*='LineDetail'] .tab-header {
  background-color: #f2f2f2;
}
/* 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: var(--header-overlay-text-color);
  font-weight: bold;
}
/* 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: var(--header-overlay-text-color);
  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: #666;
}

.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: var(--header-overlay-text-color);
}
.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: uppercase;
  transition: background-color 0.25s, color 0.25s;
}
.bootstrap-iso .event-step-nav a.secondary-link {
  background: var(--button-color);
  color: var(--button-text-color);
}
.bootstrap-iso .event-step-nav a.primary-link {
  background: var(--button-color);
  color: var(--button-text-color);
}
.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: var(--button-hover-color);
  color: var(--button-hover-text-color);
}

/* 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 .htabs-container .tabs UL LI A:hover {
  color: var(--tab-selector-text-color);
  border-bottom: 0.3em solid var(--tab-selector-border-color);
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A
{
  color: var(--tab-selector-border-color);
  border-bottom: 0.4em solid var(--tab-selector-border-color);
}

.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: var(--tab-selector-inactive-text-color);
}

/* 3g) accordions */
/* background colour */
.benefit-matrix .benefit-category .panel-default > .panel-heading,
.trsdashboard .panel-default > .panel-heading,
#benefit-overview #overviewAccordion .panel-default > .panel-heading {
  background-color: var(--panel-color);
  padding: 0;
}
.bootstrap-iso .panel-heading .panel-title .accordion-toggle {
  display: block;
}
.bootstrap-iso .panel-heading .panel-title .accordion-toggle:hover,
.bootstrap-iso .panel-heading .panel-title .accordion-toggle:focus {
  background-color: var(--button-hover-color);
  color: var(--button-hover-text-color);
}
#benefit-overview #overviewAccordion .panel-title .accordion-toggle:focus {
  outline: 3px solid var(--accessibility-outline);
}
.trsdashboard .summary-header .panel-title {
  padding: 0;
}
.trsdashboard .panel-title .accordion-toggle {
  padding: 10px 15px;
}
@media only screen and (max-width:767px){
  .trsdashboard i.icon-postion {
    position: relative;
    top: -17px;
  }
}

/* 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 */
/* info icon color **/
.benefit-matrix .row.title .glyphicon-info-sign-color {
  color: var(--info-icon-color);
}
.benefit-matrix .row.title .glyphicon-info-sign-color:hover,
.benefit-matrix .row.title .glyphicon-info-sign-color:focus {
  color: var(--link-text-hover-color);
}
.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: var(--button-color-alternate);
}

/* label styling e.g. "Note:" labels */
.bootstrap-iso .label {
  background-image: none;
}

/* 3i) logo */
#logo {
  background-image: var(--logo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
}
/* 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: var(--site-header-color);
}
/* 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-left: 10rem;
    padding: 0;
  }
  .online-two-iso #menu-no-dashboard li {
    padding: 0.5em;
  }
  #menu-container ul#menu-no-dashboard li a,
  #user-div a {
    color: var(--site-header-icon-color);
  }
}
@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: var(--need-assistance-pull-down-menu);
}
#header .help-ico a.helptoggle {
  color: white;
}
/* 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: white;
  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: 3rem;
  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) {
  #header .help-ico .helptoggle:hover,
  #header .help-ico a.helptoggle[aria-expanded='true']:hover:after,
  #header .help-ico a.helptoggle[aria-expanded='false']:hover:after,
  #header .help-ico .helptoggle:focus,
  #header .help-ico a.helptoggle[aria-expanded='true']:focus:after,
  #header .help-ico a.helptoggle[aria-expanded='false']:focus:after {
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
  }
  /* link color and width for phone and email links */
  #floating-header-content a {
    color: var(--button-color);
    width: auto;
    padding: 0 1em;
  }
  /* hover colour of links in floating header */
  #header a:hover {
    color: var(--button-color);
    text-decoration: none;
  }
  /* focus colour of links in floating header */
  #header a:focus {
    color: var(--button-color);
    outline: 3px solid var(--accessibility-outline);
  }
}

/* 3k) site footer */
/* footer colour */
.online-two-iso #terminator #footer.footer-fullwidth {
  background-color: var(--site-footer-color);
  text-align: center;
}
/* footer link color */
.online-two-iso #footer a {
  color: var(--site-footer-link-color);
  margin-left: 5rem;
  text-transform: uppercase;
  font-weight: bold;
  font-family: sans-serif;
}

/* copyright */
#footer-copyright {
  color: var(--site-footer-link-color);
  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;
  }
}

/* 3l) datepickers */
/* 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: var(--button-color);
  border-color: #ccc;
}
.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;
}

/* today, clear and close buttons */
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info,
.templates .uib-datepicker-popup .btn-sm.btn-info {
  background-color: var(--button-color);
  color: var(--button-text-color);
  border: none;
  text-transform: uppercase;
}

.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger,
.templates .uib-datepicker-popup .btn-sm.btn-danger {
  background-color: var(--button-color-alternate);
  color: var(--button-text-color);
  border: none;
  text-transform: uppercase;
}
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success,
.templates .uib-datepicker-popup .btn-sm.btn-success {
  background-color: var(--button-color);
  color: var(--button-text-color);
  border: none;
  min-width: auto;
  text-transform: uppercase;
}
.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-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: var(--button-hover-color);
  color: var(--button-hover-text-color);
  text-transform: uppercase;
}

.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
{
  background-color: var(--button-color-alternate);
  color: var(--button-hover-text-color);
  text-transform: uppercase; 

}


.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: var(--button-click-color);
  color: var(--button-click-text-color);
  font-size: 0.75rem;
  text-transform: uppercase;
}

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

/* 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: var(--button-hover-color);
  border: 1px solid #ccc;
}

/* 3m) Inputs */
input:focus,
.bootstrap-iso .form-control:focus {
  border-color: var(--accessibility-outline);
  box-shadow: none;
  outline: 3px solid var(--accessibility-outline);
}

/* 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: var(--header-overlay);
  color: var(--header-overlay-text-color);
}

/*================================================================================================== 4. Login page  ==================================================================================================*/
/* forgot password link */
#wp-forgetPassword > div:hover {
  text-decoration: underline;
}
#wp-forgetPassword > div:focus {
  outline: 3px solid var(--accessibility-outline);
}
/* module headings */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-title {
  color: white;
}
/* welcome module heading */
.online-two-iso #login-module-login-page-welcome h2 {
  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';
}

/* module links */
#login-modules-container a {
  color: white;
}

@media only screen and (min-width: 768px) {
  .LoginPageContainer #header {
    padding: 1rem;
  }
  /* login image */
  .online-two-iso.login body {
    background-image: var(--login-image);
  }
  /* login module background colour */
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background-color: rgba(192, 192, 192, 0.7);
  }
}


@media only screen and (min-width: 375px) and (max-width: 767px) {
  /* centering logo */
  #wrapper.isLoginPageWrapper #header #logo {
    float: none;
    margin: 0 auto;
    scale: 130%;
  }
  /* 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;
  }
}

/*Setting up login module*/
.online-two-iso.login .LoginPageContainer .panel.panel-default .panel-body {
    background-color: #acc0c4;
    opacity: 95%;
    margin: 0rem 0rem;
    border-radius: 15px;
  box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%);
}

.online-two-iso.login .LoginPageContainer .btn.btn-primary#login {
   color: #fff;
   font-weight: bold;
}

.online-two-iso.login .LoginPageContainer .btn.btn-primary#login:hover {
   color: white;
   font-weight: bold;
    background-color: var(--button-hover-color);
}

/*Setting up bottom area*/
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules
{
    background-color: #acc0c4;
    opacity: 80%;
    padding-left: 4rem;
}

.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module#login-module-need-assistance:before
{
  display: 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: 0;
    width: calc(15% + 450px) !important;
    float: right;
    font-size: large;
  }
}

/****************************************** first time user page styling ************************/
.online-two-iso .validation-caption {
  color: var(--main-text-color);
}
/* hide horizontal rule */
.login-frst-time hr {
    visibility: hidden;
}
/* remove chevron icon on save button */
.login-frst-time .glyphicon-chevron-right {
    display: none;
}

/****************************************** 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 */
.bootstrap-iso .main-list,
.bootstrap-iso .main-list ol {
  margin: 0 0 0 1em;
  padding: 0;
  display: grid;
  grid-gap: .5rem;
  counter-reset: section;  
}
.bootstrap-iso .main-list li > ol {
  margin: .5em 0 1em 2em
}
.bootstrap-iso .main-list li {
  padding-left: 0.5em;
}
.bootstrap-iso .main-list li::marker {
  counter-increment: section;
  content: counters(section, ".")
}
.bootstrap-iso .main-list > li::marker {
  font-size: 24px;
  font-weight: 500;
  color: var(--heading-color);
}
.bootstrap-iso .main-list ul li::marker {
  display: none;
}

/*================================================================================================== 5. Home page  ==================================================================================================*/

@media(max-width:449px) {
  .onlineTwoPointO-home .column_wrapper {
    width: 100%;
  }
}

/*Header*/
.online-three#home #terminator #header.header-fullwidth,
.online-two-iso #terminator #header.header-fullwidth {
  margin: 0;
  padding: 0;
  background: transparent;
  height: 105px;
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
}

#header a[href="/home"],
#headerResources {
  z-index: 5;
  position: relative;
}

.online-two-iso #terminator #header.header-fullwidth .menu-container.fullwidth {
  width: 100%;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  float: none;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  position: absolute;
  left: 0;
  margin: 0;
  top: 0 !important;
  background-color: #fff;
  height: 105px !important;
  z-index: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#menu-no-dashboard {
  margin-left: 13rem;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  border-radius: 30px;
}

@media (max-width: 750px) {
  .online-two-iso #terminator #header.header-fullwidth .menu-container.fullwidth {
    position: relative;
    height: auto !important;
    padding-bottom: 0 !important;
    top: 10px !important;
  }
  
  #menu-no-dashboard {
    margin: 0;
    height: auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    border: none;
    background: #EEE;
    border-radius: 0;
  }
  
  .online-two-iso #menu-no-dashboard [id*="navtablist"] {
    margin: 0 !important;
    padding: 0 !important;
    border: none;
  }
  
  .online-two-iso #menu-no-dashboard [id*="navtablist"] a[id*="menu"] {
    margin: 0 !important;
    padding: 5px 10px !important;
    font-family: HelveticaNowDisplayMedium !important;
    border: none;
    font-size: 1rem;
    font-size: clamp(0.8rem, 0.6231rem + 0.7862vw, 1rem) !important;
    color: #FFF !important;
    border-radius: 0 !important;
  }
}

#home #terminator #header.header-fullwidth .menu-container.fullwidth {
  display: none !important;
}

.online-two-iso #menu-no-dashboard [id*="navtablist"] {
  padding: 0;
  text-align: center;
  width: auto;
  margin-right: 5px;
  margin-left: 5rem;
  font-weight: bold;
  color: black;
}

.online-two-iso #menu-no-dashboard li a.selected
{
  font-weight: normal;
}

/****Homepage general****/
/* restrict viewport to 1420px */
#home-online-three {
  max-width: 1420px !important;
  margin: 0 auto !important;
  float: none !important;
  padding-top: 1rem !important;
}

#home-online-three .dashboard-controls {
  margin: 3rem 0rem;
  position: relative;
  }

/*Welcome Greeting*/
#home-online-three .dashboard-controls #greeting-message {
  color: #262836;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  align-self: center;
  font-size: 1.5rem;
  color: #000;
  font-weight: normal;
  background-color: #E7F3F5;
  border-radius: 5px;
  height: 7rem;
  padding-top: 2.5rem;
  padding-left: 1.5rem;
  font-weight: bold;
  box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%), 2px 2px 10px #ddd inset;
}

/*i icon hidden*/
.bootstrap-iso .glyphicon-info-sign:before {
  color: #007585;
  }

/*Remove Show Carousel button*/
#home-online-three .carousel-show
{
  display: none;
}

#home-carousel {
  display: none;
}

/*Show Sensitive data*/

#home-online-three .dashboard-controls .sensitive-data-toggle {
  float: right;
  margin-right: .75rem;
  align-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  right: -12px;
  top: 6.5rem;
  background-color: black;
  color: white;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  height: 35px;
  padding-top: 7px;
  padding-left: 10px;
  z-index: 1;
  box-shadow: 2px 6px 4px -2px rgba(0,0,0,25%);
}

@media screen and (min-width: 1279px) {
  #home-online-three .dashboard-controls .sensitive-data-toggle {
    transition: right 1s ease-out;
    right: -80px;   
    }
  }
  
#home-online-three .dashboard-controls .sensitive-data-toggle:hover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  right: -12px;}

.online-two-iso .slider .round {
    border-radius: 22px;
    height: 25px;
    width: 55px;
    margin-top: -2px;
}

#home-online-three #home3 .dashboard-controls .sensitive-data-toggle .caption {
  cursor: -webkit-grab;
  cursor: grab;
}

/*Blurring sensitive data stronger*/
#home-online-three #right-side .hide-sensitive, 
#home-online-three #home-integrated .hide-sensitive
{
  filter: blur(1px);
  -webkit-filter: blur(6px);
}

/*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-3"
      "module-4 module-5"
      "module-6 module-7"
      "module-8 module-8"
      "module-9 module-9"
	}
  }

@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-1 module-2 module-2"
      "module-3 module-4 module-4"
      "module-5 module-6 module-7"
      "module-8 module-9 module-9"
	}
  }

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

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content {
  padding: 20px 20px;
  -webkit-box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%);
  box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%);
  border-style: none;
}

@media only screen and (min-width:768px){
  #home,
  .dashboard-page-container {
    background: #f2f2f2;
  }
}

/*Hide My messages icon*/
.online-two-iso #headerResources #user-div a:link[title="My messages"]
{
display: none;
}

/* margin between main element and footer */
#main.home {
  margin-bottom: 2.5rem;
}
/* general grid and module styling */
#home-online-three #home-integrated .modules-right-side.grid-container {
  grid-gap: 1.5em;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  padding: 0;
}

/*Align text in modules to left*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content .module-copy, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .module-copy
{
  text-align: left;
}

/*Align buttons to bottom for modules with 2 buttons
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .generic-buttons
{
  position: absolute;
  bottom: 2vh;
  }*/

/* 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: var(--homepage-module-background-color);
}

									/***home page modules styling***/
/**Pension Resources module**/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.pension_module {
	background: var(--homepage-module-pension-background-image);
    background-size: cover, cover;
    background-color: #5D6D78;
    background-position-x: right, center;
    background-position-y: center;
    background-repeat: no-repeat;
	}

#home-online-three #home-integrated #generic.pension_module h3,
#home-online-three #home-integrated #generic.pension_module h4,
#home-online-three #home-integrated #generic.pension_module p
{ 
  color: var(--homepage-module-pension-text-color);
  }

#home-online-three #home-integrated #generic.pension_module h3,
#home-online-three #home-integrated #generic.pension_module p
{
  font-weight: bold;
}

/*Pension module button styling*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.pension_module .btn.btn-default, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.pension_module .btn.btn-default
{
  background-color: var(--homepage-module-pension-button-color);
  margin: 0;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  position: absolute;
  bottom: 0.5rem;
  left: 3rem;
  width: 12rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.pension_module .btn.btn-default:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.pension_module .btn.btn-default:hover
{
  background-color: var(--homepage-module-pension-button-hover-color);
  }

/*Pension data Module*/
.pension-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.sensitive_data #module-header-maintext {
  margin: 0;
}

.data-block {
  flex: 1 1 20%;
  display: flex;
  align-items: start;
  flex-direction: column;
  background-color: #5D6D78;
  padding: 1rem;
  border-radius: 10px;
  color: #fff;
  box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
  opacity: 0.8;
  transition: all .2s ease-in-out;
  scale: 90%;
}

@media (max-width: 1620px) {
  #home3 .pension-wrapper .data-block {
    -ms-flex: 0 1 33%;
    -webkit-box-flex: 0;
    flex: 0 1 33%;
  }
}

.data-block:hover {
  opacity: 0.9;
  transform: scale(1.05); 
  }

.data-block .icon {
  font-family: OnlineTwoIconFont;
  font-size: 3rem;
  padding-top: 1rem;
  color: inherit;
}

.data-block.fund .icon::before {
  content: '\e91f';
}

.data-block.contr .icon::before {
  content: '\e94f';
}

.data-block.age .icon::before {
  content: '\e960';
}

.data-block.projected-fund .icon::before {
  content: '\e95e';
}

.data-item {
  font-size: 1rem;
  text-align: left;
  color: inherit;
}

.data-item .title {
  font-size: small;
}

#module-header-subtext .data-item .title {
  height: 2rem;
  color: inherit;
}

.data-item .calc-field {
  font-size: 1.75rem;
  color: inherit;
}

.onlineTwoPointO-home .module-content #home-module-generic {
  background: url('/smartfuture/media/IMG/GettyImages-1141196125-min.jpg') center center/cover;
}

.grid-container .sensitive_data .home-module-generic-content .content-text {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 95%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 60%;
  background: rgba(0,0,0,0.5);
}

@media only screen and (max-device-width:1080px) {
  .grid-container .sensitive_data .home-module-generic-content .content-text {
    justify-content: center;
    width: 100%;
  }
}

/* enrolment module styling */
@media only screen and (min-width: 1920px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content {
	background: var(--homepage-module-enrolment-background-image);
    background-size: cover, cover;
    background-color: #E7F3F5;
    background-position-x: left;
    background-position-y: top, center;
    background-repeat: no-repeat;
	}
  }

@media only screen and (min-width: 768px){
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content {
    background: var(--homepage-module-enrolment-background-image);
    background-size: cover, cover;
    background-color: #E7F3F5;
    background-position-x: right, center;
    background-position-y: 16%;
    background-repeat: no-repeat;
}
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .heading-text
  {
    font-size: 1rem;
    }
  #home-online-three #home-integrated #enrolment .home-module-enrolment-content
  {
    margin-bottom: 3rem;
  }
}

/*"You have" text addition for enrolment module*/
#home-online-three #home-integrated #enrolment .home-module-enrolment-content .days-left::before {
  content: "You have "; 
  font-size: 16px;
  vertical-align: middle;
}

#home-online-three #home-integrated #enrolment .home-module-enrolment-content #otherCountdown {
  vertical-align: text-top;
  }

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .home-module-enrolment-content
{
  padding: 1rem 2rem;
  max-width: 40%;
}

@media only screen and (max-width: 1919px){
#home-online-three #home-integrated #enrolment p,
#home-online-three #home-integrated #enrolment .heading-text h3
  {
    font-size: 1rem;
    }
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .home-module-enrolment-content
  {
  padding: 1rem 1rem;
  }
}  

#home-online-three #home-integrated #enrolment h3,
#home-online-three #home-integrated #enrolment h4,
#home-online-three #home-integrated #enrolment p
{ 
  color: var(--homepage-module-enrolment-text-color);
}

#home-online-three #home-integrated #enrolment h3.module-content-header
{
  font-weight: bold;
}

.event-summary 
{
    color: #000;
  } 

/*Enrolment module button styling*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #enrolment .btn.btn-default, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .btn.btn-default
{
  background-color: var(--homepage-module-enrolment-button-color);
  margin: 0;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #enrolment .btn.btn-default:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .btn.btn-default:hover
{
  background-color: var(--homepage-module-enrolment-button-hover-color);
}

/* Benefits Overview module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview.module-content 
{  background-image: url(/endesaflex/media/Media/Images/TBSLite_materials-Dashboard-59_V2.svg);
  background-position-x: right;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 1023px){
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview.module-content {
    background-position-y: -3rem 
  }
  }
      
@media only screen and (max-width: 1919px) and (min-width: 1024px) {
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview.module-content {
    background-position-y: -4rem;
    }
  }

@media only screen and (min-width: 1920px){
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview.module-content {
    background-position-y: bottom;
    }
  }

#home-online-three #home-integrated #generic.benefits-overview h3,
#home-online-three #home-integrated #generic.benefits-overview h4,
#home-online-three #home-integrated #generic.benefits-overview p
{ 
  color: var(--homepage-module-benefit-overview-text-color);
}

#home-online-three #home-integrated #generic.benefits-overview h3.module-content-header
{
  font-weight: bold;
}

/*Benefits Overview module button styling*/
@media only screen and (max-width: 1023px) {
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .generic-buttons
{
  position: absolute;
  bottom: 1rem;
  left: 2rem;
}
}

@media only screen and (min-width: 1024px) {
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .generic-buttons
{
  position: absolute;
  bottom: 1rem;
  left: 3rem;
	}
}
  
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:first-child, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:first-child
{
  background-color: var(--homepage-module-overview-button-1-color);
  margin-right: 2vh;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  width: 9rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:last-child, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:last-child
{
  background-color: var(--homepage-module-overview-button-2-color);
  margin: 0;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  width: 9rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:first-child:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:first-child:hover
{
  background-color: var(--homepage-module-overview-button-1-hover-color) !important;
  }

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:last-child:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-overview .btn.btn-default:last-child:hover
{
  background-color: var(--button-hover-color);
  }

/*TRS module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #trs.module-content {
	background: var(--homepage-module-trs-background-color);
	}

#home-online-three #home-integrated #trs h3,
#home-online-three #home-integrated #trs h4,
#home-online-three #home-integrated #trs p
{ 
  color: var(--homepage-module-trs-text-color);
}

#home-online-three #home-integrated #trs h3
{
  font-weight: bold;
}

/*Donut chart placing*/
.highcharts-root
{
  padding-top: 2rem;
}

/*TRS module button styling*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #trs .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #trs .btn.btn-default
{
  background-color: var(--homepage-module-trs-button-color);
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  width: 14rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #trs .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #trs .btn.btn-default:hover
{
  background-color: var(--button-hover-color);
}

/*TRS module placeholder*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.NonTRS {
	background: var(--homepage-module-trs-placeholder-image);
    background-size: cover;
    background-color: #E7F3F5;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    min-height: 21.1rem;
	}


/*Claims module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim.module-content 
{
  background: var(--homepage-module-claims-background-color);
  background-image: url(/endesaflex/media/Media/Images/Materials-v3-02.svg);
  background-position-x: left;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-shadow: var(--module-box-shadow);
  box-shadow: var(--module-box-shadow);
}

@media only screen and (max-width: 1023px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim.module-content {
  height: 16rem; 
  }
}

@media only screen and (max-width: 1919px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim.module-content 
{
  height: 18rem; 
  }
}

@media only screen and (min-width: 1920px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim.module-content 
{
  height: auto; 
  }
}

#home-online-three #home-integrated #generic.make-a-claim h3,
#home-online-three #home-integrated #generic.make-a-claim h4,
#home-online-three #home-integrated #generic.make-a-claim p
{ 
  color: var(--homepage-module-claims-text-color);
}

#home-online-three #home-integrated #generic.make-a-claim h3
{
  font-weight: bold;
}

/*Claims module button styling*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .generic-buttons
{
  position: absolute;
  bottom: 2rem;
  left: 3rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:first-child, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:first-child
{
  background-color: var(--homepage-module-claims-button-1-color);
  margin-right: 1.5rem;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  width: 9rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:last-child, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:last-child
{
  background-color: var(--homepage-module-claims-button-2-color);
  margin: 0;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  width: 9rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:first-child:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:first-child:hover
{
  background-color: var(--homepage-module-claims-button-1-hover-color);
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:last-child:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:last-child:hover
{
  background-color: var(--button-hover-color);
}

/*Claims module placeholder*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.NonClaims {
	background: var(--homepage-module-claims-placeholder-image);
    background-size: cover;
    background-color: #E7F3F5;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    min-height: 21.1rem;
	}


/* Discounts module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.deals {
  background-color: var(--homepage-module-discounts-background-color);
  background-image: url(/endesaflex/media/Media/Images/TBSLite_materials-Dashboard-55.png);
  background-position: right 15% bottom 40%;
  background-repeat: no-repeat;
  background-size: 10rem;
  min-height: 29.1rem;
	}

@media only screen and (max-width: 1023px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.deals {
    height: 16rem;
  }
}

@media only screen and (max-width: 1919px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.deals {
    height: 18rem;
  }
}

@media only screen and (min-width: 1920px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.deals {
    height: auto;
  }
}
  
#home-online-three #home-integrated #generic.deals h3,
#home-online-three #home-integrated #generic.deals h4,
#home-online-three #home-integrated #generic.deals p
{ 
  color: var(--homepage-module-discounts-text-color);
}

#home-online-three #home-integrated #generic.deals h3
{
  font-weight: bold;
}

/*Discounts module button styling*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.deals .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.deals .btn.btn-default
{
  background-color: var(--homepage-module-deals-button-color);
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  width: 9rem;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.deals .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.deals .btn.btn-default:hover
{
  background-color: var(--homepage-module-deals-button-hover-color);
}

/* Videos module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-videos {
	background-color: var(--homepage-module-videos-background-color);
	}

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-videos {
  background-image: url("/endesaflex/media/Media/Images/TBS_Lite_PT_V2-54.png");
  background-repeat: no-repeat;
  background-size: 8rem;
  background-position: bottom 60% right 50%;
     }

#home-online-three #home-integrated #generic.benefits-videos h3,
#home-online-three #home-integrated #generic.benefits-videos h4,
#home-online-three #home-integrated #generic.benefits-videos p
{ 
  color: var(--homepage-module-videos-text-color);
}

#home-online-three #home-integrated #generic.benefits-videos h3
{
  font-weight: bold;
}

/*Videos module button styling*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .generic-buttons
{
  position: absolute;
  bottom: 2rem;
  left: 3rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .btn.btn-default:first-child, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .btn.btn-default:first-child
{
  background-color: var(--homepage-module-videos-button-1-color);
  margin-right: 1.5rem;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  width: 9rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .btn.btn-default:last-child, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-videosm .btn.btn-default:last-child
{
  background-color: var(--homepage-module-videos-button-2-color);
  margin: 0;
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  display: inline-block;
  width: 9rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .btn.btn-default:first-child:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .btn.btn-default:first-child:hover
{
  background-color: var(--homepage-module-videos-button-1-hover-color);
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #generic.benefits-videos .btn.btn-default:last-child:hover, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.make-a-claim .btn.btn-default:last-child:hover
{
  background-color: var(--button-hover-color);
}

/* Twitter module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #generic.twitter {
	background: var(--homepage-module-twitter-background-color);
	}

#home-online-three #home-integrated #generic.twitter h3,
#home-online-three #home-integrated #generic.twitter h4,
#home-online-three #home-integrated #generic.twitter p
{ 
  color: var(--homepage-module-twitter-text-color);
}

#home-online-three #home-integrated #generic.twitter h3
{
  font-weight: bold;
}

/* Benefits Statement module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement.module-content {
  /*background: var(--homepage-module-benefit-statement-background-color);*/
  background-image: url(/endesaflex/media/Media/Images/TBSLite_materials-Dashboard-57_V2.svg);
  background-position-y: bottom;
  background-position-x: right;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 1023px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement.module-content {
    height: 24rem;
  }
}

@media only screen and (max-width: 1919px) and (min-width: 1024px) {
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement.module-content {
    height: 28rem;
  }
}

@media only screen and (min-width: 1920px){
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement.module-content {
    height: auto;
  }
}

#home-online-three #home-integrated #benefit-statement h3,
#home-online-three #home-integrated #benefit-statement h4,
#home-online-three #home-integrated #benefit-statement p
{ 
  color: var(--homepage-module-benefit-statement-text-color);
}

#home-online-three #home-integrated #benefit-statement h3
{
  font-weight: bold;
}

.benefit-statement-information {
  display: none;
}

/*Benefit statement module button styling*/
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #benefit-statement .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement .btn.btn-default
{
  background-color: var(--homepage-module-statement-button-color);
  font-weight: bold;
  color: var(--homepage-modules-button-font-color);
  width: 9rem;
  position: absolute;
  bottom: 3rem;
  left: 2rem;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content #benefit-statement .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #benefit-statement .btn.btn-default:hover
{
  background-color: var(--button-hover-color);
}

/* 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: var(--button-hover-text-color);
}
.bootstrap-iso .outline-button [class*="btn btn-"]:hover:before {
  background: var(--button-hover-color);
}

/* greeting colour */
#home-online-three .dashboard-controls #greeting-message {
  color: var(--homepage-heading-color);
}

/* modules styling */
#home-online-three #home-integrated .module-content-header-container h3.module-content-header {
  font-size: 1.75rem;
}

#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 2rem;
}

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content,
.bootstrap-iso .carousel.home-module-integrated {
  border: none;
  border-radius: 8px;
}
/* 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: var(--main-text-color);
}

/* module icon styling*/
[class*='online-two-icon-']:before {
  color: var(--homepage-module-icon-color);
  font-family: OnlineTwoIconFont;
  font-size: 5.5rem;
}
/* my benefits icon*/
.online-two-icon-63:before {
  content: '\e93f';
}
/*benefit statement icon */
.online-two-icon-56:before {
  content: '\e938';
}
/* benefit information icon */
.online-two-icon-136:before {
  content: '\e98b';
}
/* my profile icon */
.online-two-icon-97:before {
  content: '\e964';
}
/*access the app icon */
.online-two-icon-31:before {
  content: '\e91e';
}
/* discounts icon*/
.online-two-icon-48:before {
  content: '\e930';
}
/* company content icon */
.online-two-icon-121:before {
  content: var(--homepage-company-content-icon);
}

/*** carousel styling ***/
/* hide carousel hamburger menu */
.home-module-integrated .welcome-items {
  display: none;
}
/* remove faded background on carousel content and increase indent */
.home-module-integrated #slider .sliderContainer .slide-content {
  background: none;
  margin-left: 4rem;
  max-width: 45%;
}

/* carousel content buttons */
.home-module-integrated #slider .sliderContainer .slide-content .content .btn {
  font-size: 0.75rem;
}
/* adjust width of carousel thumbnails */
.home-module-integrated #slider .thumb .rect {
  width: 190px;
}
/* background of thumbnail container */
.home-module-integrated #slider .thumb {
  background: #ededed;
}

/* arranging open events horizontally in enrolment module *//
@media only screen and (min-width: 1400px){
  .event-summary {
    display: flex;
    justify-content: space-around;
  }
}

/*================================================================================================== 6. Benefit overview  ==================================================================================================*/
/* heading */
#benefit-overview .benefit-overview-title {
  padding: 0;
}
#benefit-overview .benefit-overview-title H1 {
  color: var(--heading-color);
  font-size: 2.25rem;
  line-height: 1;
}

/* benefit filter dropdown */
.bootstrap-iso#benefit-overview #BenefitNameFilter {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  color: #333;
  text-transform: none;
  text-align: left;
  width: 100%;
  overflow: hidden;
}

/* clear filter button */
.bootstrap-iso#benefit-overview .clear-filter {
  background-color: var(--button-color-alternate);
  border: none;
  color: var(--button-text-color);
}
.bootstrap-iso#benefit-overview .clear-filter:hover,
.bootstrap-iso#benefit-overview .clear-filter:focus {
  background-color: var(--button-color-alternate);
  color: var(--button-text-color);
}
.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: var(--button-color-alternate);
  color: var(--button-text-color);
}

/* know more buttons */
#benefit-overview .know-more-link .aria {
  display: none;
}
.bootstrap-iso#benefit-overview .btn.know-more-link {
  background-color: var(--button-color);
  border: none;
}
.bootstrap-iso#benefit-overview .know-more-link A {
  color: var(--button-text-color);
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
}
.bootstrap-iso#benefit-overview .btn.know-more-link:hover,
.bootstrap-iso#benefit-overview .btn.know-more-link:focus {
  background-color: var(--button-hover-color);
}
.bootstrap-iso#benefit-overview .know-more-link A:hover,
.bootstrap-iso#benefit-overview .know-more-link A:focus {
  color: var(--button-hover-text-color);
}
.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: var(--button-click-color);
}
.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: var(--button-click-text-color);
}

/*================================================================================================== 7. Benefit statement  ==================================================================================================*/
.benefit-matrix .benefitdate .data-addon {
  color: var(--main-text-color);
}
/* view follow up container colour */
.bootstrap-iso .alert-info.hdf-followup {
  background-color: var(--follow-up-panel-color);
  color: white;
}
/****************************************** benefit statement view follow up popup *******************************************/
.benefit-matrix .modal .hdf-followup {
  padding: 0;
}
/* overlay header */
.benefit-matrix .modal .modal-header .header {
  text-transform: uppercase;
}
.benefit-matrix .modal .hdffollowup-intro {
  color: var(--heading-color);
}

/*================================================================================================== 8. Benefit matrix  ==================================================================================================*/
/* all numerical values */
.benefit-matrix .font-youpay-color,
.benefit-matrix .glyphicon-play-color {
  color: var(--main-text-color);
}

/*Removing border of matrix*/
.bootstrap-iso .panel-default
{
  border: none;
}

/* modellers and tools section */
.benefit-matrix .benefitheader.benefitheader-border {
  color: var(--button-text-color);
  background-color: var(--matrix-header-button-background-hover);
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
}
.benefit-matrix .benefitheader.benefitheader-border:hover,
.benefit-matrix .benefitheader.benefitheader-border:focus {
  background-color: var(--matrix-header-button-background);
  color: var(--button-text-color);
}
/*Total cost section styling*/
.benefit-matrix .totalcost
{
  border-radius: 5px;
}


@media only screen and (min-width: 768px){
.benefit-matrix .totalcost-section-row .totalcostsection
{
	width: 100%;
	/*margin-left: -10%;*/
    }
}

@media only screen and (min-width: 1024px){
.benefit-matrix .totalcost-section-row .totalcostsection
{
	width: 90%;
	/*margin-left: -5%;*/
    }
}
    
/* 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: var(--matrix-confirm-button-color);
  border-radius: 5px;
  color: var(--button-text-color);
}
.benefitheader-fixed div#followup-items a.btn:hover {
  background-color: var(--matrix-confirm-button-color-hover);
  color: var(--button-text-color);
}
.benefitheader-fixed div#followup-items a.btn:focus {
  background-color: var(--matrix-confirm-button-color);
  color: var(--button-text-color);
}
.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: var(--matrix-confirm-button-color-hover);
  color: var(--button-text-color);
}
/* 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: var(--button-click-color);
  border-color: var(--button-click-color);
  color: var(--button-click-text-color);
}
/* annual button active */
.bootstrap-iso .btn-warning.active.btn-peranual {
  background-color: var(--button-click-color);
  border-color: var(--button-click-color);
}
/*monthly button inactive */
.bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle) {
  border-color: var(--button-click-color);
}
/*annual button inactive */
.bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child) {
  border-color: var(--button-click-color);
}
/* 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 var(--button-click-color);
  border-radius: 0;
}

/*Your cost moved to right*/
.benefit-matrix .bootstrap-iso .col-xs-4
{
  float: right;
}

/* 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);
}
/* benefits you can choose*/
.benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle {
  background-color: var(--matrix-sections-background-color);
  color: var(--matrix-sections-text-color);
  font-weight: bold;
  padding: 3rem;
}

.benefit-matrix .containers > div > div.benefit-category:first-child .benefitline .panel-default > .panel-heading .panel-title .accordion-toggle {
  padding: 0.5rem;}

.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: var(--matrix-sections-background-color-hover);
}
/* 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-color: var(--matrix-sections-background-color);
  color: var(--matrix-sections-text-color);
  font-weight: bold;
  padding: 3rem;
}
.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: var(--matrix-sections-background-color-hover);
}
/* 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-color: var(--matrix-sections-background-color);
  color: var(--matrix-sections-text-color);
  font-weight: bold;
  padding: 3rem;
}
.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: var(--matrix-sections-background-color-hover);
}
/* 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 var(--benefit-selection-elected-box-highlight);
}
.benefit-selected-box .benefitline::before {  
  /*checkbox container styling*/
  height: 30px;
  width: 30px;  
  display: -ms-flexbox;
  display: flex;  
  justify-content: center;
  align-items: center;
  background: var(--benefit-selection-elected-box-highlight);  
  font-family: FontAwesome;
  content: '\f00c';  
  font-size: inherit;
  color: var(--benefit-selected-tick-mark);
  /*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;
  border-radius: 10px
}
/*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%;
  }
}

/*Benefit webtext window styling*/
.benefit-matrix .modal-content,
.online-two-iso .modal-content
{
  border-bottom: 2.5rem solid #262836;
  border-top: 2.5rem solid #262836;
  border-right: 1rem solid #262836;
  border-left: 1rem solid #262836;
}

.online-two-iso .modal-large .modal-body .pannel-body-full h1
{
  font-weight: bold;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}


/* line group text colour */
.benefit-matrix .group-default {
  color: var(--panel-text-color);
  background-color: var(--matrix-category-panel-color);
  text-transform: none;
  padding: 0.7rem;
  text-indent: 2rem;
}

/*Line element styling*/
.benefit-matrix .benefit-category .benefitline
{
  background-color: #E7F3F5;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%), 2px 2px 10px #ddd inset;
}

/* line name */
.benefit-matrix .lineheader > a:link {
  color: var(--link-text-color);
}
.benefit-matrix .lineheader > a:link:hover,
.benefit-matrix .lineheader > a:link:focus {
  color: var(--link-text-hover-color);
}
.benefit-matrix .lineheader > a:link:active,
.benefit-matrix .lineheader > a:link:active:hover,
.benefit-matrix .lineheader > a:link:active:focus {
  color: var(--link-text-click-color);
}
.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
}
/* change play icon next to selected benefit option */
.benefit-matrix .glyphicon-play::before {
  font-family: FontAwesome;
  content: '\f105';
  font-size: 2em;
  font-weight: bold;
  color: var(--info-icon-color)
}

/* select buttons */
.benefit-matrix .row.benefitline .btn-success,
.benefit-matrix .row.benefitline .btn-success:hover,
.benefit-matrix .row.benefitline .btn-success:focus,
.benefit-matrix .row.benefitline .btn-success:active:hover {
  min-width: 75%;
}
.benefit-matrix .row .btn-success {
  background-color: var(--button-color);
}

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

/* new and changed labels */
.benefit-matrix .newbenefit,
.benefit-matrix .changebenefit {
  background-color: var(--button-click-color);
  position: relative;
  top: -5px;
}
/* unlocked label */
.benefit-matrix .glyphicon-record,
.benefit-matrix .acitve-text {
  background-color: var(--button-click-color);
  color: var(--button-click-text-color);
  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: 20px;
}
.benefit-matrix .benefit-active-benefits .active-intro {
  display: none;
}

/* color of text in enrolment complete banner, and coverage as at date text */
.bootstrap-iso .completemessage .text-success,
.benefit-matrix .benefitheader.asatdate span {
  color: var(--main-text-color);
}

/*================================================================================================== 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;
}
/* line name */
.benefitselect .line-name {
  color: var(--heading-color);
}
/* more info icon */
.benefitselect .line-benefit-intro .glyphicon-info-sign-color {
  color: var(--info-icon-color);
}

/* 'Currently Selected' heading */
.benefitselect .header-selected {
  color: var(--heading-color);
}

/* currently selected box */
.benefitselect .in-Cart .you-pay > p:nth-of-type(2) {
  display: none;
}

/* select buttons */
.online-two-iso .benefitselect A.button-style.green {
  background-color: var(--button-color);
  border-radius: 5px;
  color: var(--button-text-color);
  font-weight: bold;
}
.online-two-iso .benefitselect A.button-style.green:hover {
  background-color: var(--button-hover-color);
  box-shadow: none;
  color: var(--button-text-color);
}
.online-two-iso .benefitselect A.button-style.green:focus {
  background-color: var(--button-hover-color);
  box-shadow: none;
  color: var(--button-hover-text-color);
}
.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: var(--button-hover-color);
  color: var(--button-text-color);
}

/* 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;
  border-width: 3px;
}

/*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: var(--main-text-color);
}
/* EOI pending asterisk */
.benefitselect .alignleft .pending-note {
  display: inline;
  float: none;
}
/* available products heading */
.benefitselect .products-header H4 {
  color: var(--heading-color);
}
/* selected plan border box */
.benefitselect .products .box-border.sel,
.benefitselect .products .box-border.sel .header {
background: var(--benefit-selection-elected-box-highlight);
border: none;
box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%);
}
.benefitselect .products .box-border.sel .header {
  padding-left: 0;
}
/* hide provider finder and prescription finder */
.available-options .links-group.four-links {
  display: none;
}
/* selected coverage text colour */
.option-credit-health .option.sel {
  color: var(--main-text-color);
}
.benefitselect .box-border
{
background-color: #fff;
border-radius: 5px;
box-shadow: 9px 15px 15px -2px rgb(0 0 0 / 25%), 2px 2px 10px #ddd, 1px 1px 10px;
  }

.benefitselect .box-border .content-you-chose-summary
{
  border: 2px solid #d14900;
}

/*Investment options styling*/
.InvestmentOptionsHeader
{
    background: var(--benefits-panels-color);
    border: 1px solid var(--benefits-panels-color);
    color: #fff;
    font-weight: bold;
    padding: 5px 8px;
    text-transform: lowercase;
}

#InvestmentOptionsTitle
{
  display: none;
}

/* see also link colour */
.benefitselect .linename > a:link {
  color: var(--link-text-color);
}
.benefitselect .linename > a:hover {
  color: var(--link-text-hover-color);
}
.benefitselect .linename > a:focus {
  color: var(--link-text-hover-color);
}
.benefitselect .linename > a:active,
.benefitselect .linename > a:active:hover,
.benefitselect .linename > a:active:focus {
  color: var(--link-text-click-color);
}

/*BYO selection styling*/
.online-two-iso A#byo-save.button-style.blue
{
  display: none;
}

.benefit-matrix .byocostsummary .header, .benefit-matrix .addoncostsummary .header
{
  background-color: #E7F3F5;
}

.benefit-matrix .byocostsummary .footer, .benefit-matrix .addoncostsummary .footer
{
  background-color: var(--header-overlay);
}

.benefitselect .button-style#byo-saveAndClose
{
    color: var(--button-text-color);
    background-color: var(--matrix-header-button-background-hover);
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
}

.benefitselect .button-style#byo-saveAndClose:hover,
.benefitselect .button-style#byo-saveAndClose:focus
{
  background-color: var(--matrix-header-button-background-hover);
}
  
/*General fonts styling*/
#profile body#profile .profile #profile-online-2 #profilecontainer .content-box-border .row .grid-cell P
{
  color: #d14900;
}

/*================================================================================================== 10. Profile  ==================================================================================================*/
/* headings */
.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 {
  color: var(--heading-color);
}
/* 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: var(--button-color);
  border-radius: 5px;
  color: var(--button-text-color);
  font-weight: bold;
}
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: var(--button-hover-color);
  box-shadow: none;
  color: var(--button-text-color);
  font-weight: bold;
}
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: var(--button-click-color);
  color: var(--button-text-color);
  font-weight: bold;
}

/*Add dep window colors*/
.ui-buttonset .ui-button.ui-state-active .ui-button-text
{
  background: url("/endesaflex/media/Media/Misc/TBSLite_materials-misc-40.png") no-repeat scroll 5px 50% #D14900;
  background-size: 1.2rem;
}

/* 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 var(--accessibility-outline);
}

/* 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: var(--tab-selector-inactive-text-color);
}

html#profile body#profile #profile-online-2 #dependantsTab .left-tabon .sectionTitle {
  color: var(--tab-selector-text-color);
  border-bottom: 0.5em solid var(--tab-selector-text-color);
  padding-bottom: 0.25em;
}
html#profile body#profile #profile-online-2 #dependantsTab .right-tabon {
  border-bottom: 0.5em solid var(--tab-selector-text-color);
}
html#profile body#profile #profile-online-2 #dependantsTab .right-tabon .sectionTitledimmed {
  color: var(--tab-selector-text-color);
}

/* 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: var(--tab-selector-inactive-text-color);
}

html#profile body#profile #profile-online-2 #beneficiariesTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #beneficiariesTab .right-tabon .sectionTitle {
  color: var(--tab-selector-text-color);
  border-bottom: 0.5em solid var(--tab-selector-text-color);
  padding-bottom: 0.25em;
}
/* beneficiaries edit allocation popup */
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label {
  background-color: var(--button-color);
  border: 1px solid white;
  border-radius: 0;
  color: var(--button-text-color);
  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: var(--button-click-color);
  box-shadow: none;
  color: var(--button-click-text-color);
}
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: var(--button-hover-color);
  color: var(--button-hover-text-color);
}

/* 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: var(--tab-selector-inactive-text-color);
}
html#profile body#profile #profile-online-2 #securityTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #securityTab .right-tabon .sectionTitle {
  color: var(--tab-selector-text-color);
  border-bottom: 0.5em solid var(--tab-selector-text-color);
  padding-bottom: 0.25em;
}

/* preferences toggle button */
#communicationPreferencesTab .ui-buttonset label {
  border: 1px solid #ccc;
}
#communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text {
  background-color: var(--button-color-alternate);
  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: var(--selected-email-color) !important;
}
/* save/delete popup modal */
div.tbs-modal h2 {
  color: white;
  text-transform: uppercase;
}

/*================================================================================================== 11. App registration  ==================================================================================================*/
#mobileRegistration .form-data,
#mobileRegistration .box-border {
  padding: 0;
}
#mobileRegistration .form-data .change-personal-data,
#mobileRegistration .form-data .box-border-bg {
  margin: 0;
  padding: 0;
}
#mobileRegistration .box-border {
  border: none;
}
#mobileRegistration .box-left-bg,
#mobileRegistration .box-border-bg {
  background: none;
  margin: 0;
  padding: 0;
}
#mobileRegistration .mobile-registration-fullwidth > .mobile-registration-left,
#mobileRegistration .mobile-registration-app-download {
  display: none;
}
#mobileRegistration .d-block {
  display: block;
}
#mobileRegistration .qr-background {
  background: var(--button-hover-color);
}
#mobileRegistration h2 {
  margin: 0;
  margin-bottom: .5em;
}
#mobileRegistration p {
  font-size: 1rem;
  font-weight: 300;
  padding-left: 0;
}
#mobileRegistration ol {
  margin: 0.5em 1em;
  list-style: decimal;
}
#mobileRegistration ol li {
  padding-bottom: .25em;
}
#mobileRegistration .col-md-3 {
  padding-top: 1em
}
#mobileRegistration .bootstrap-iso label {
  color: var(--main-text-color);
  font-size: 1rem;
}
#mobileRegistration .bootstrap-iso input {
  display: block;
}
#pinDiv {
  margin-bottom: 1em
}
#mobileRegistration .bootstrap-iso #pwdMeter {
  margin-left: 0;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#mobileRegistration .bootstrap-iso #newPasswordSave {
  float: none !important;
  width: 5rem;
  border-radius: 5px;
  text-transform: none;
  background-color: var(--button-color);
}
#mobileRegistration .bootstrap-iso #newPasswordSave:hover,
#mobileRegistration .bootstrap-iso #newPasswordSave:focus {
  background-color: var(--button-hover-color);
  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: var(--button-click-color);
}
#mobileRegistration .well-lg {
  padding: 18px 9px;
}
#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  ==================================================================================================*/
/* homepage module styling */
/*NOTE: THIS IS NOT REQUIRED IF USING ANY OF THE CHART TYPES OTHER THAN RAINBOW */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .trs-statement-intro {
  margin-bottom: -70px
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .highcharts-background {
  fill: transparent;
}
.trsdashboard .summary-myreward {
  visibility: hidden;
}
.trsdashboard .summarystatementdate {
  color: var(--main-text-color);
  text-align: center;
  font-size: 2rem;
}

/* separate chart title from legend */
.trsdashboard .highcharts-title {
  transform: translateY(.1em);
}

/* alignment of data group chart total between pre and post text */
.textareaChartTab .LineGroupTotal {
  display: inline-block;
}

/* 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: var(--panel-color);
  color: var(--panel-text-color);
}
.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 {
    width: calc(100% - 30px)
  }
  .content-name {
    padding-left: 15px
  }
  .tab-pane .table-responsive {
    padding: 0 15px
  }
}

/*Hiding items underlining*/
.trsdashboard .chart_line
{
  border-bottom: none;
  }

/*Data compnents underlining*/
.trsdashboard .content-name
{
  background-color: #262836;
  color: #fff;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 5px;
}

/*Marking data group total*/
.trsdashboard .chart_line_total 
{
  background-color: #262836;
  color: #fff;
  border-radius: 5px;
  width: 100%;
  margin-left: 0rem;
  padding: 0.5rem 0.5rem 0.5rem 0rem;
}

.trsdashboard .chart_line_total .chart_line_amount
{
  margin-left: -4%;
}

/*Active group icon color*/
.trsdashboard .desktop-tab .nav-pills>li.active>a
{
  color: #007585;
}

/*Highcharts total font size*/
.trsdashboard .highcharts-title
{
  font-size: 16px!important;
}


/*================================================================================================== 13. Specific popups  ==================================================================================================*/
/* 13a) forgot password */
/* progress bar colour */
.bootstrap-iso .progress-bar-success {
  background-color: var(--progress-bar-color);
}
#login-assistance .steps-header {
    color: var(--main-text-color);
}

/* 13b) modellers and tools */
/* overlay header */
.bootstrap-iso .modellersModalHeader {
  margin-top: 1rem;
}
.modal-normal ul.modeller-links {
  padding-left: 1.25em;
  width: 100%;
}
/* selected tab*/
.modeller-links li a.checked,
.modeller-links li a.unchecked:hover {
  background-color: transparent;
  border-bottom: 0.3em solid var(--tab-selector-border-color);
  color: var(--tab-selector-text-color);
}
/* unselected tab */
.modeller-links li a.unchecked {
  background-color: transparent;
  color: var(--tab-selector-inactive-text-color);
}
/* text color */
.modeller-container .row-header,
.modeller-container .row-summary {
  color: var(--main-text-color);
}
/* tax code input */
/* model button */
input.modeller-line-bottom {
  background-color: var(--button-color);
  border-radius: 20px;
  color: var(--button-text-color);
  font-weight: normal;
  text-transform: uppercase;
}
input.modeller-line-bottom:hover {
  background-color: var(--button-hover-color);
  color: var(--button-hover-text-color);
}
input.modeller-line-bottom:focus {
  background-color: var(--button-hover-color);
  box-shadow: none;
  color: var(--button-hover-text-color);
}
input.modeller-line-bottom:active,
input.modeller-line-bottom:active:hover,
input.modeller-line-bottom:active:focus {
  background-color: var(--button-click-color);
  box-shadow: none;
  color: var(--button-click-text-color);
}

/* 13c) manage dependants */
/* overlay header */
.bootstrap-iso .dependantModalHeader {
  margin-top: 7px;
}
.bootstrap-iso .dependantContainer .tab-header {
  background-color: white;
}
/* remove intro text created from resource string */
.dependantIntroText {
  display: none;
}

#allocationDialog .add-beneficiary {
  color: var(--link-text-color);
}
#allocationDialog .add-beneficiary:hover {
  color: var(--link-text-hover-color);
}
#allocationDialog .add-beneficiary:focus {
  color: var(--link-text-hover-color);
}
#allocationDialog .add-beneficiary:active,
#allocationDialog .add-beneficiary:active:hover,
#allocationDialog .add-beneficiary:active:focus {
  color: var(--link-text-click-color);
}

/* add, edit and remove links */
.dependant-list-top a.dependant-add-link,
.dependant-list a.dependant-edit,
.dependant-list a.dependant-remove {
  color: var(--link-text-color);
}
.dependant-list .dependant-add-item a.dependant-edit,
.dependant-list .dependant-add-item a.dependant-remove {
  color: var(--button-text-color);
  padding: 6px 12px;
}
.dependant-list .dependant-add-item a.dependant-edit {
  background-color: var(--button-color);
}
.dependant-list .dependant-add-item a.dependant-remove {
  background-color: var(--button-color);
  color: var(--button-text-color);
}
.dependant-list-top a.dependant-add-link:hover,
.dependant-list a.dependant-edit:hover,
.dependant-list a.dependant-remove:hover {
  color: var(--link-text-hover-color);
}
.dependant-list .dependant-add-item a.dependant-edit:hover,
.dependant-list .dependant-add-item a.dependant-remove:hover {
  background-color: var(--button-hover-color);
  color: var(--button-text-color);
}
.dependant-list-top a.dependant-add-link:focus,
.dependant-list a.dependant-edit:focus,
.dependant-list a.dependant-remove:focus {
  color: var(--link-text-hover-color);
}
.dependant-list .dependant-add-item a.dependant-edit:focus,
.dependant-list .dependant-add-item a.dependant-remove:focus {
  background-color: var(--button-hover-color);
  color: var(--button-text-color);
}
.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: var(--link-text-click-color);
}
.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 {
  background-color: var(--button-click-color);
  color: var(--button-text-color);
}
/* costs displayed on Dependants Covered tab */
.benefit-matrix .employee-cost .cost-number {
  color: var(--main-text-color);
}

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

/*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: 5.5em;
}
.coverage-bottom .dependant-cancel-btn {
  right: 5em;
  background-color: var(--button-color-alternate);
}

.coverage-bottom .dependant-cancel-btn:hover,
.coverage-bottom .dependant-cancel-btn:focus,
.coverage-bottom .dependant-cancel-btn:active:hover,
.coverage-bottom .dependant-cancel-btn:active:focus
{
  right: 5em;
  background-color: var(--matrix-confirm-button-color-hover);
}

/*Hide middle name*/
.dependant-list .dependant-add-item .cell-md-6.middle-name,
.dependant-list .dependant-cell.edit.cell-md-6.middle-name.ng-scope
{
  display: none;
}

/* 13d) benefit matrix follow up items  */
/* overlay header */
#followup-items-overlay.online-followup-items #followup-items-title {
  background-color: var(--header-overlay);
  font-weight: normal;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}
/* close icon */
#followup-items-overlay a.close {
  top: 2px;
}
/* oustanding items complete icon */
.online-two-iso .success-icon {
  color: var(--success-icon-color);
}
/* completed items dot indicator color */
.followup-content .progress-indicator .step-finished {
  background-color: var(--success-icon-color);
}

/*Confirmation cancel button*/
#followup-items-overlay.online-followup-items .control-button A.button-style.gray
{
    background-color: var(--button-color-alternate);
}

#followup-items-overlay.online-followup-items .control-button A.button-style.gray:hover,
#followup-items-overlay.online-followup-items .control-button A.button-style.gray:focus,
#followup-items-overlay.online-followup-items .control-button A.button-style.gray:active:hover,
#followup-items-overlay.online-followup-items .control-button A.button-style.gray:active:focus
{
  background-color: var(--matrix-confirm-button-color-hover);
}

/* 13e) benefit matrix T&Cs */
/* overlay header */
.benefit-matrix .benefitheader {
  text-transform: uppercase;
}
/* terms and conditions main text elements */
#main.matrix .modal-dialog .confirmchoice ul li {
  list-style: disc;
  padding-left: 1rem;
}
@media only screen and (min-width: 768px) {
  .bootstrap-iso .confirmchoice .dl-horizontal dt {
    text-align: left;
  }
}
.confirm_agreement label {
  font-size: 1rem;
}
.benefit-matrix .modal-footer #confirmation-buttons .btn-default.active {
  background-color: var(--button-color-alternate);
}
.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: var(--main-text-color);
}

.election-info-collect .dependant-board .icon {
  background-image: none;
  width: 0;
}
.election-info-collect .dependant-board .icon:before {
  color: var(--button-color);
  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: var(--button-color-alternate);
}
#allocationDialog .edit-beneficiary,
#allocationDialog .delete-beneficiary {
  color: var(--link-text-color);
}
#allocationDialog .edit-beneficiary:hover,
#allocationDialog .edit-beneficiary:focus,
#allocationDialog .delete-beneficiary:hover,
#allocationDialog .delete-beneficiary:focus {
  color: var(--link-text-hover-color);
}
#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: var(--link-text-click-color);
}

/****************************************** benefit intro popup **************************************/
.faq-answer {
  padding-bottom: 1em;
}
/****************************************** life event popup **************************************/
.modal .active-benefits .glyphicon-chevron-left {
  display: none;
}

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

.seealso.ng-scope {display: none;}
#products-header-label {display: none;}

/* 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: 8rem;
  position: relative;
  top: -0.1em;
  color: var(--benefit-icon-color);
}

/* 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: var(--life-event-background);
}
/* 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;
}

#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;
}

.online-two-iso .fsaClaimSubmitContainer h3 {
  color: #d14900;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 0;
}

.fsaClaimSubmitContainer #flexClaimTitle h1
{
  color: #fff;
  background-color: #d14900;
  padding: 2rem;
  font-weight: bold;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

/*styling of claims sites*/
.htabs-container
{
  padding: 0px;
  }

.FSAStatementAndHistoryContainer .summary-content.row
{
  background-color: #dedede;
}

.table .claim-table
{
  color: #fff;
}

/* 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: var(--button-color);
  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: var(--button-hover-color);
}

/* 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: var(--button-color);
  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: var(--button-hover-color);
}
.fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active
  .text-info {
  color: var(--button-hover-text-color);
}

/* 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 {
  font-weight: bolder;
  color: var(--link-text-color);
}
body#StatementAndClaimSubmit #wrapper a:hover,
body#StatementAndClaimSubmit #wrapper a:focus {
  color: var(--link-text-hover-color);
  text-decoration: none;
}
body#StatementAndClaimSubmit #wrapper a:active,
body#StatementAndClaimSubmit #wrapper a:active:hover,
body#StatementAndClaimSubmit #wrapper a:active:focus {
  color: var(--link-text-click-color);
}
/* 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: 500;
  padding-bottom: 20px;
}

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

/* headings */
.online-two-iso .FSAStatementAndHistoryContainer h1 {
  color: #fff;
  background-color: #d14900;
  margin-bottom: 0;
  padding: 2rem;
  font-weight: 500;
}
.online-two-iso .claim-history h2 {
  color: #d14900;
  }

/* hover effect for the tables */
.claim-history .claim-table > tbody > tr
{
  color: black;
  background-color: #dedede;
  transition: color 0.5s ease-out, background-color 0.5s ease-out;
}

.claim-history .claim-table > tbody > tr:hover {
  background-color: #f5f5f5;
  font-weight: 400;
  color: #d14900;
}

/* 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: var(--button-color);
  color: #fff;
  border: none;
  border-radius: 25px;
  transition: background-color 0.25s;
}
body#StatementAndClaimSubmit .btn-default {
  background-color: var(--button-color);
  color: var(--button-text-color);
  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: var(--button-hover-color);
}

/* 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: #000;
  font-weight: bold;
}
/* table headings on FSA statement tab */
.fsa-table-caption .section_title,
.subtitle-claims .section_title {
  color: var(--primary-text-color);
}

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th
{
  color: #000;
}

/*sub-elements of spending account statement*/
.FSA-table-caption td
{
  color: #000;
  font-weight: 400;
}

.fsa-table-value
{
  color: #d14900 !important;
  font-weight: bolder;
}

/*================================================================================================== 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: var(--link-text-color) !important;
}
a#btnNewDocument:hover {
  color: var(--link-text-hover-color) !important;
  text-decoration: none;
}
#dlguploadDocument #btn-upload-document-save,
#deleteDocumentDialog #dspdeleteDocument {
  background-color: var(--button-color);
  border-radius: 25px;
  font-weight: bold;
  transition: background-color 0.25s;
}
#dlguploadDocument #btn-upload-document-cancel,
#deleteDocumentDialog #btnCancelDocument .gray {
  background-color: var(--button-color);
  color: var(--button-text-color);
  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: var(--button-hover-color);
}
#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: var(--button-click-color);
}

/* 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: var(--heading-color);
  font-size: 5rem;
  font-weight: 700
}
#statements_selector:focus {
  outline: 3px solid var(--accessibility-outline);
  background-color: var(--button-hover-color);
  color: var(--button-hover-text-color);
}
#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: var(--button-color) !important;
}
@media only screen and (max-width: 750px) {
  /* menu icon colour */
  .fa.fa-bars,
  .fa.fa-gear {
    color: var(--mobile-menu-icon-color);
  }
  /* links in mobile hamburger menu */
  .online-two-iso #menu-no-dashboard li a,
  .online-two-iso #menu-no-dashboard li a.selected {
    color: var(--mobile-menu-link-color);
  }
  /* 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: var(--button-hover-color);
  }
  /* make height of greeting container auto to give proper spacing around the greeting */
  #home-online-three .dashboard-controls {
    height: auto;
  }
}
/* 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: var(--button-color);
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  }
#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%;
  margin-bottom: 1rem;
}
#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: var(--homepage-enrolment-days-left-color);
}
/* 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;
}

#home-online-three #home-integrated .modules-mobile .module-mobile
{
  border-top: 2px solid #d14900;
}

@media(max-width:767px) {
#home-online-three #home-integrated .hide-sensitive
{  
 color: #fff; 
  }
}

/*================================================================================================== 19. Client specific styles  ==================================================================================================*/


/****************************************** Icons for benefits *******************************************/
/*CCV*/
#benefit-overview .img.BenefitImage_b62169d8-75a9-484e-aca4-f87c6e7d1e2d, .benefitline .img.Lb62169d8-75a9-484e-aca4-f87c6e7d1e2d {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-09.png") no-repeat scroll 50% 50%; background-size: cover;}

/*CCV Edenred*/
#benefit-overview .img.BenefitImage_361052ea-15dd-425b-86e3-2d411eaa7893, .benefitline .img.L361052ea-15dd-425b-86e3-2d411eaa7893 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-09.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Education Voucher*/
#benefit-overview .img.BenefitImage_5ab52608-31e8-4ab5-b74c-5b4788665c30, .benefitline .img.L5ab52608-31e8-4ab5-b74c-5b4788665c30 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-10.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Education Voucher*/
#benefit-overview .img.BenefitImage_a51e9edd-5be3-4fd5-bf41-d86351c68bfd, .benefitline .img.La51e9edd-5be3-4fd5-bf41-d86351c68bfd {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-10.png") no-repeat scroll 50% 50%; background-size: cover;}

/*EE Education*/
#benefit-overview .img.BenefitImage_30fce9be-2ba3-480e-9f1a-bda0c3fbc7d5, .benefitline .img.L30fce9be-2ba3-480e-9f1a-bda0c3fbc7d5 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-10.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Professional Training*/
#benefit-overview .img.BenefitImage_7157e31e-f45d-4817-8640-6ef143388de9, .benefitline .img.L7157e31e-f45d-4817-8640-6ef143388de9 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-14.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Health Insurance*/
#benefit-overview .img.BenefitImage_e4f5ce69-318d-4129-a4c4-2991cd500a02, .benefitline .img.Le4f5ce69-318d-4129-a4c4-2991cd500a02 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-11.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Health, edu, nursing, vet*/
#benefit-overview .img.BenefitImage_60a6b642-cb49-4746-a32a-516f7a8e7c84, .benefitline .img.L60a6b642-cb49-4746-a32a-516f7a8e7c84 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-12.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Sports Activities (Gym 4x)*/
#benefit-overview .img.BenefitImage_09e44491-2b25-44f1-b3e5-d0367fba0269, .benefitline .img.L09e44491-2b25-44f1-b3e5-d0367fba0269,
#benefit-overview .img.BenefitImage_34f17cd5-996f-4670-8559-43ed7c899272, .benefitline .img.L34f17cd5-996f-4670-8559-43ed7c899272,
#benefit-overview .img.BenefitImage_c49be9e3-7e52-4816-9760-4e6524a5d364, .benefitline .img.Lc49be9e3-7e52-4816-9760-4e6524a5d364,
#benefit-overview .img.BenefitImage_f6629484-1da7-4213-a6dd-bbd5a8088391, .benefitline .img.Lf6629484-1da7-4213-a6dd-bbd5a8088391 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-18.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Health Voucher*/
#benefit-overview .img.BenefitImage_ba353cbd-667f-4928-a4e3-c6f97ed39834, .benefitline .img.Lba353cbd-667f-4928-a4e3-c6f97ed39834 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-11.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Public transportation*/
#benefit-overview .img.BenefitImage_5c15da02-7b11-4c20-8f24-d13b14ec3542, .benefitline .img.L5c15da02-7b11-4c20-8f24-d13b14ec3542 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-23.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Parking*/
#benefit-overview .img.BenefitImage_709abd5c-4996-4ee6-b315-5e19335dab4f, .benefitline .img.L709abd5c-4996-4ee6-b315-5e19335dab4f {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-24.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Green Mobility (bike)*/
#benefit-overview .img.BenefitImage_97bc54d2-2dbb-4b2d-b507-af92c0f681f2, .benefitline .img.L97bc54d2-2dbb-4b2d-b507-af92c0f681f2 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-16.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Internet at Home*/
#benefit-overview .img.BenefitImage_a33ffbaf-859f-4dde-86d2-0b04b6e0fb9f, .benefitline .img.La33ffbaf-859f-4dde-86d2-0b04b6e0fb9f {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-21.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Tech & Homeoffice*/
#benefit-overview .img.BenefitImage_759664da-ae14-4342-aecf-ec85a8f8e526, .benefitline .img.L759664da-ae14-4342-aecf-ec85a8f8e526 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-17.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Personal Accident*/
#benefit-overview .img.BenefitImage_b975dc39-02a3-4da4-b5f6-0f27c32bdc78, .benefitline .img.Lb975dc39-02a3-4da4-b5f6-0f27c32bdc78 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-11.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Pension funds (4)*/
#benefit-overview .img.BenefitImage_d90a22af-fea2-4413-8efa-7f54fb3684cd, .benefitline .img.Ld90a22af-fea2-4413-8efa-7f54fb3684cd {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-13.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Pension Funds (1)*/
#benefit-overview .img.BenefitImage_7f567618-d8ea-4fbc-9f3c-a57a3a03fcbf, .benefitline .img.L7f567618-d8ea-4fbc-9f3c-a57a3a03fcbf {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-13.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Life Investment Product*/
#benefit-overview .img.BenefitImage_e75c9a29-c29c-409a-9ba2-a3bb66a1b679, .benefitline .img.Le75c9a29-c29c-409a-9ba2-a3bb66a1b679 {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-15.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Life Insurance*/
#benefit-overview .img.BenefitImage_5aeac41e-c5bb-4a0a-93ec-cf7aa008bbaa, .benefitline .img.L5aeac41e-c5bb-4a0a-93ec-cf7aa008bbaa {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-20.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Retirement Savings Plan*/
#benefit-overview .img.BenefitImage_e9acdeca-7d04-45c6-b5cc-265bb31d265e, .benefitline .img.Le9acdeca-7d04-45c6-b5cc-265bb31d265e {background: rgba(0, 0, 0, 0) url("/endesaflex/media/Media/Benefit%20icons/TBSLite_materials-Benefits_Icon-25.png") no-repeat scroll 50% 50%; background-size: cover;}

/*Hiding Phone icon from need assistance bar*/
#floating-header-content .call
{
  display: none;
}

/* Minification failed (line 4346, error number 1039): Token not allowed after unary operator: '-homepage-enrolment-days-left-color' */