/*================================================================================================== 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
	4. Login page
	5. Home page
	6. Benefit overview
	7. Benefit statement
	8. Benefit matrix
	9. Benefit selection
	10. Profile
	11. App registration
	12. TRS
	13. Specific popups
		13a) Forgot password		13b) Modellers and tools	13c) Manage dependants
		13d) Follow up items		13e) Event T&Cs				13f) Benefit selection election info collect
		13g) Beneficiaries		13h) Flex budget				13i) Matrix exit warning
	14. Icons
		14a) Benefit icons		14b) Life event icons
	15. Claims
	16. My Documents
	17. Mobile
	18. Client specific styles		
 ======================================================================================================================================================================================================================= */
/* font declaration for using OnlineTwoIconFont set */
@font-face {
 font-family:'OnlineTwoIconFont';
 src:url('/benefitsadminuk2/media/UK/Fonts/OnlineTwoIconFont_v2.eot');
 src:url('/benefitsadminuk2/media/UK/Fonts/OnlineTwoIconFont_v2.eot?#iefix') format('embedded-opentype'),
 url('/benefitsadminuk2/media/UK/Fonts/OnlineTwoIconFont_v2.woff') format('woff'),
 url('/benefitsadminuk2/media/UK/Fonts/OnlineTwoIconFont_v2.ttf') format('truetype'),
 url('/benefitsadminuk2/media/UK/Fonts/OnlineTwoIconFont_v2.svg') format('svg');
 font-weight:normal;
 font-style:normal;
}

/*================================================================================================== 1. Variables  ==================================================================================================*/
:root {
  --color-1: #f57c00; 
  --color-2: #ffb300;
  --color-3: #bf360c;
  --color-4: #ffd600;
  --color-5: #ff8865;
  --color-lite: #fff;
  --color-dark: #666;
  --rgbacolor-1: rgba(245,124,0,1);
  --rgbacolor-1-hover: rgba(245,124,0,.5);
  --rgbacolor-2: rgba(191,54,12,1);
  --rgbacolor-2-hover: rgba(191,54,12,.5);
  
  --heading-color: #f57c00;
  --primary-text-color: #ffb300;
  --secondary-text-color: #bf360c;
  --tertiary-text-color: #f57c00;
  --button-color: #ffb300;
  --button-color-alternate: #f57c00;
  --button-text-color: #fff;
  --button-hover-color: #bf360c;
  --button-hover-text-color: #fff;
  --button-click-color: #f57c00;
  --button-click-text-color: #666;
  --link-text-color: #bf360c;
  --link-text-hover-color: #ffb300;
  --link-text-click-color: #f57c00;
  --header-overlay: #ffb300;
  --panel-color: #f57c00;
  --info-icon-color: #bf360c;
  --tab-selector-text-color: #ffb300;
  --tab-selector-border-color: #ffb300;
  --tab-selector-inactive-text-color: #666;
  --progress-bar-color: #75bf71;
  --success-icon-color: #75bf71;
  --unordered-list-bullet-color: #bf360c;
  --datepicker-today: #ffb300;
  --datepicker-clear: #f57c00;
  --datepicker-close: #bf360c;
  --slider-toggle-color: #ffb300;
  --benefit-icon-color: #4d4d4f;
  --linegroup1-benefit-icon-color: #4d4d4f;
  --linegroup2-benefit-icon-color: #4d4d4f;
  --linegroup3-benefit-icon-color: #4d4d4f;
  --linegroup4-benefit-icon-color: #4d4d4f;
  --life-event-background: #bf360c;
  --logo: url(/smartrewardNL/media/Images/Logo%20Images/Aon_TBS-lite_Logo1.png);
  --login-image: url(/smartrewardNL/media/Images/Login%20Page%20Images/Aon_TBS-lite_Login1.png);
  --site-header-color: #e6e6e6;
  --site-header-icon-color: #666;
  --site-footer-color: #e6e6e6;
  --site-footer-link-color: #666;
  --need-assistance-pull-down-menu: #ffb300;
  --homepage-module-background-color: #e6e6e6;
  --homepage-heading-color: #ffb300;
  --homepage-module-icon-color: #ffb300;
  --homepage-enrolment-days-left-color: #fff;
  --carousel-heading-color: #f57c00;
  --carousel-text-color: #666;
  --pulse-color-start: rgba(47,79,79,.5);
  --pulse-color-end: rgba(47,79,79,0);
  --selected-email-color: #2f4f4f;
  --benefit-selection-elected-box-highlight: #ffb300;
  --follow-up-panel-color: #f57c00;
  --mobile-menu-icon-color: #666;
  --mobile-menu-link-color: #bf360c;
}

@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: 15em;
  line-height: 1;
}

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

/*================================================================================================== 3. Global styles  ==================================================================================================*/
/* global font size */
.bootstrap-iso {
  font-size: 1rem;
}

/* 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,
/* BENEFITS header on popup when removing dependants attached to cover */
.coverageHeader {
  color: var(--color-1);
  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(--color-3);
}
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(--color-2);
}
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(--color-1);
}

/* 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 {
  background-color: var(--color-3);
  border: none;
  border-radius: 20px;
  color: var(--color-lite);
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: all .25s;  
  z-index: 1  
}

/* 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 {
  background-color: var(--color-3);
  border-radius: 20px;
  border: none;
  box-shadow: none;
  color: var(--color-lite);
}

/* 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 {
  background-color: var(--color-3);
  border-radius: 20px;
  border: none;
  box-shadow: none;
  color: var(--color-lite);
  outline: none;
}

/* 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 {
  background-color: var(--color-1);
  border-radius: 20px;
  border: none;
  box-shadow: none;
  color: var(--color-dark);
  outline: none;
}

/* 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 #exit-cancel A.button-style.blue,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning,
.bootstrap-iso .btn-warning.dependant-cancel-btn,
.bootstrap-iso .btn.btn-warning.btn-lg,
.controls-container a.button-style.gray.ng-binding,
#login-assistance-cancel-button {
  background-color: var(--color-5);
}

.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,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:hover,
.bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:focus,
.bootstrap-iso .btn-warning.dependant-cancel-btn:hover,
.bootstrap-iso .btn-warning.dependant-cancel-btn:focus,
.bootstrap-iso .btn.btn-warning.btn-lg:hover,
.bootstrap-iso .btn.btn-warning.btn-lg:focus,
.controls-container a.button-style.gray.ng-binding:hover,
.controls-container a.button-style.gray.ng-binding:focus,
#login-assistance-cancel-button :hover,
#login-assistance-cancel-button :focus{
  background-color: var(--color-2);
}

.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,
.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,
.bootstrap-iso .btn.btn-warning.btn-lg:active,
.bootstrap-iso .btn.btn-warning.btn-lg:active:hover,
.bootstrap-iso .btn.btn-warning.btn-lg:active:focus,
.controls-container a.button-style.gray.ng-binding:active,
.controls-container a.button-style.gray.ng-binding:active:hover,
.controls-container a.button-style.gray.ng-binding:active:focus ,
#login-assistance-cancel-button :active,
#login-assistance-cancel-button :active:hover,
#login-assistance-cancel-button :active:focus{
  background-color: var(--color-1);
}

/* hover effects */
.bootstrap-iso *[class*="btn btn-"]:before,
.bootstrap-iso *[class*="btn  btn-"]:before,
.bootstrap-iso *[class*="button-s"]:before {
  content: '';
  width: 100%;
  height: 4em;
  background-color: var(--color-2);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-5em, -1em, 0) rotate3d(0, 0, 1, -45deg);
  transform-origin: top left;
  transition: all .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 */
.bootstrap-iso ul.fa-ul li::before {
	font-family: FontAwesome;
	content: '\f111';
	font-size: .5em;
	padding-right: .5em;
	position: relative;
	bottom: 2px;
	color: var(--color-1);
}
.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(--color-1);
}
/* 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,
#home-online-three .modal-content .home-dashboard .modal-header .header,
#dlguploadDocument h5,
#deleteDocumentDialog h5 {
  color: white;
}
/* 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: white;
  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: white;
}
/* position of close icon */
.online-two-iso .modal-large .close {
  top: .5em;
  right: .5em;
}
.header-overlay A {
  padding: 4px .5em 0 0;
}
/* modal body background for home page module popups */
#home-online-three .modal-content .home-dashboard .modal-body {
  background: white;
}
/* remove 'x' icon from close button */
#home-online-three .modal-content .home-dashboard .modal-footer .btn-warning .glyphicon {
  display: none;
}

/* 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: .5em;
}
.bootstrap-iso .event-step-nav a {
  border-radius: 25px;
  padding: 6px 12px;
  text-transform: uppercase;
  transition: background-color .25s, color .25s;
}
.bootstrap-iso .event-step-nav a.secondary-link {
  background: var(--color-3);  
  color: var(--color-lite);
}
.bootstrap-iso .event-step-nav a.primary-link {
  background: var(--color-3);
  color: var(--color-lite);
}
.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(--color-2);
  color: var(--color-lite)
}

/* 3f) tab selectors e.g. Manage dependants widget, benefit intro, profile etc. */
.online-two-iso [class*="modal"] a.tab-selector-link:hover,
.online-two-iso [class*="modal"] .tab-selector-link.active,
html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A,
html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A:hover {
  color: var(--color-3);
  border-bottom: .5em solid var(--color-3);
}
.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(--color-dark);
}

/* 3g) accordions */
/* background colour */
.benefit-matrix .benefit-category .panel-default > .panel-heading,
.trsdashboard .panel-default > .panel-heading {
  background-color: var(--color-1);
}
/* panel title */
.bootstrap-iso .panel-title {
  padding-left: 10px;
}

/* expand/collapse icons */
.bootstrap-iso .glyphicon-menu-down,
.bootstrap-iso .glyphicon-menu-up {
  transition: all .25s
}
.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(--color-3);
}

/* slider toggle color */
.online-two-iso input:checked + .slider {
  background-color: var(--color-1);
}

/* 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;
}
/* centering logo on mobile view */
@media only screen and (max-width: 767px) {
  #logo {
    width: calc(100vw - 100px);
  }
}

/* 3j) site header */
/* 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: 768px){
  #menu-container ul#menu-no-dashboard li a,
  #user-div a {
    color: var(--site-header-icon-color);
  }
}

/* need assistance pull down tab */
.help-ico .helptoggle {
	background-image: none!important;
	background-color: var(--color-3);
}
#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: .75em;
	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: .25em;
  font-size: 3em;
  vertical-align: middle;
}
/*chat icon*/
#floating-header-content li#webChatStatus #chatUnavailable a:before,
#floating-header-content li#webChatStatus #chatAvailable a:before {
  content: '\f0e6';
}
/*call icon*/
#floating-header-content li.call a:before {
  content: '\f10b';
}
/*mail icon*/
#floating-header-content li.mail a:before {
  content: '\f003';
}

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


/* 3k) site footer */
/* reducing footer size */
.online-two-iso #terminator #footer.footer-fullwidth {
  padding-top: 0px;
  min-height: 0px;
}
/* footer colour */
.online-two-iso #terminator #footer.footer-fullwidth {
  background-color:  var(--site-footer-color);
}
/* footer link color */
.online-two-iso #footer a {
  color: var(--site-footer-link-color);
}
/* copyright */
#footer-copyright {
  color: #666;
  font-size: 12px;
  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(--color-3);
  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(--color-3);
  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(--color-5);
  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(--color-5);
  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-danger:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:focus,
.templates .uib-datepicker-popup .btn-sm.btn-danger:hover,
.templates .uib-datepicker-popup .btn-sm.btn-danger:focus,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:hover,
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:focus,
.templates .uib-datepicker-popup .btn-sm.btn-success:hover,
.templates .uib-datepicker-popup .btn-sm.btn-success:focus {
  background-color: var(--color-2);
  color: var(--color-lite);
  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(--color-1);
  color: var(--color-dark);
  font-size: 12px;
  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(--color-2);
  border: 1px solid #ccc;
  color: var(--color-lite);
}

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

.bootstrap-iso [class*="uib-datepicker"] .btn:before {
  content: '';
  height: 0;
  width: 0;
}

/*================================================================================================== 4. Login page  ==================================================================================================*/
/* login module zone height */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
  bottom: 0;
  min-height: 75%
}
/* 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: 14px;
}
/* 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";
}

/* language selection box */
.isLoginPage #languageselection,
.isLoginPage #ddlLanguage {
  width: 140px!important;
}

/* login box label boxes */
.login-box .input-group span {
  min-width: 155px;
}

/* forgot password link */
.online-two-iso.login .LoginPageContainer .additional-services {
  color: var(--color-3);
}

/* error message for entering incorrect details */
.online-two-iso.login .LoginPageContainer span#errMsg {
  color: var(--color-3);
}

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

@media only screen and (min-width:768px){
  .isLoginPageWrapper #logo {
    visibility: hidden;
  }
  /* login image */
  .online-two-iso.login body {
    background-image: var(--login-image);
    background-position: top;
  }
  /* login module background colour */
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background-color: rgba(0,0,0,0.2);
  }
  /* login box position */
  .online-two-iso.login .LoginPageContainer #main {
    margin-right: 2rem;
  }
  /* login box styling */
  .online-two-iso.login .LoginPageContainer .panel.panel-default {
    box-shadow: none;
  }
  .online-two-iso.login .LoginPageContainer .panel.panel-default .panel-body {
    background-color: transparent;
  }
  
}
@media only screen and (min-width:375px) and (max-width:767px) {
  /* centering logo */
  #wrapper.isLoginPageWrapper #header #logo {
    float: none;
    margin: 0 auto;
  }
  /* margin between header and login box */
  #wrapper.isLoginPageWrapper #header {
    width: 100%;
    margin: 20px 0;
  }
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background: none;
  }
}

/****************************************** first time user page styling ************************/
.online-two-iso .validation-caption {
  color: #666;
}

/****************************************** Terms page (for agreeing to terms and cookie notice) *******************************************/
.terms-conditions-cookies .terms-conditions-cookies-header {
  padding-left: 0
}
.terms-conditions-cookies .term-condition-error,
.terms-conditions-cookies .cookie-notice,
.terms-conditions-cookies .term-enabled {
  margin-left: 0
}
.bootstrap-iso .cookie-notice.radio input,
.bootstrap-iso .term-enabled.radio input {
  margin-top: 0
}

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

/* table styling for Cookie Notice popup */
.litLegalContent table,
.litLegalContent table thead th,
.litLegalContent table tbody td {
	border: 1px solid #4d4d4f
}
.litLegalContent table thead tr th {
	padding: 0 5px;
}
.litLegalContent table tbody tr td {
	padding: 5px;
}

/*================================================================================================== 5. Home page  ==================================================================================================*/
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content {
  min-height: 0%;
  }
/* remove margin on main element on home page to bring footer together with main element */
#main.home {
  margin-bottom: 0;
}

/* greeting message colour */
#home-online-three .dashboard-controls #greeting-message {
  color: var(--color-1);
}
/* module and carousel heading colour */
#home-online-three #home-integrated .module-content-header-container h3.module-content-header {
  color: var(--color-1);
}
/*module heading color for orange modules only */
#home-online-three #home-integrated #enrolment .module-content-header-container h3.module-content-header,
#home-online-three #home-integrated .Overview .module-content-header-container h3.module-content-header,
#home-online-three #home-integrated .ClaimOverview .module-content-header-container h3.module-content-header,
#home-online-three #home-integrated .Affinity .module-content-header-container h3.module-content-header,
#home-online-three #home-integrated .MyDocuments .module-content-header-container h3.module-content-header {
  color: var(--color-lite);
}
/* more info icon hover colour on orange modules */
#home-online-three #home-integrated #enrolment .module-content-header-container .online-three-module-popover-control:hover,
#home-online-three #home-integrated .Overview .module-content-header-container .online-three-module-popover-control:hover,
#home-online-three #home-integrated .ClaimOverview .module-content-header-container .online-three-module-popover-control:hover,
#home-online-three #home-integrated .Affinity .module-content-header-container .online-three-module-popover-control:hover,
#home-online-three #home-integrated .MyDocuments .module-content-header-container .online-three-module-popover-control:hover {
  color: var(--color-lite);
}

/* make background colour of grid container same as for modules */
#home-online-three #home-integrated .modules-right-side.grid-container{
  background-color: var(--homepage-module-background-color);
}
/* background and padding colour for modules */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
  background-color: var(--homepage-module-background-color);
  padding: .25rem;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content {
  padding: .25rem .25rem 1rem;
}
/* modules styling */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content,
.bootstrap-iso .carousel.home-module-integrated {
	background: white;
	border: none;
}
/* orange background modules */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments {
  background-color: var(--color-1);
}
/* buttons on orange modules */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:active:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview .btn.btn-default:active:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview .btn.btn-default:active:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity .btn.btn-default:active:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments .btn.btn-default:active,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments .btn.btn-default:active:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments .btn.btn-default:active:hover:focus {
  background-color: var(--color-lite);
  color: var(--color-1);
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview .btn.btn-default:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview .btn.btn-default:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity .btn.btn-default:focus,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments .btn.btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments .btn.btn-default:focus {
  background-color: var(--button-color-alternate);
  color: white;
}

/* Placeholder module styling - for when Clients do not have TRS or My Documents or Discounts or Afinity modules */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonTRS {
  padding: 0;
  background: url(/smartrewardNL/media/Images/Home%20Page%20Module%20Images/Aon_TBS-lite_Dashboard-image.jpg) no-repeat right/cover;
  min-height: 280px;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonMyDocuments {
  padding: 0;
  background-color: var(--color-1);
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonDiscounts {
  padding: 0;
  background: url(/smartrewardNL/media/Images/Home%20Page%20Module%20Images/Aon_TBS-lite_Dashboard-image-2.jpg) no-repeat top/cover;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonAffinity {
  padding: 0;
  background-color: var(--color-1);
}

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonTRS .module-content-header-container,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonMyDocuments .module-content-header-container,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonDiscounts .module-content-header-container,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonAffinity .module-content-header-container{
  display: none;
}

/* this code allows the row to ave a height as it has content (a transparently coloured icon) that's configured in the NonTRS module */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonTRS .online-two-icon-63:before {
  color: transparent;
}

/* 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(--color-lite);
}
/* module content text colour for orange modules only */
@media only screen and (min-width: 768px){
  #home-online-three #home-integrated #enrolment .module-copy h3,
  #home-online-three #home-integrated #enrolment .module-copy h4,
  #home-online-three #home-integrated #enrolment .module-copy #event-active,
  #home-online-three #home-integrated #enrolment .module-copy .content-text,
  #home-online-three #home-integrated .Affinity .module-copy p,
  #home-online-three #home-integrated .MyDocuments .module-copy p,
  #home-online-three #home-integrated .Overview .module-copy p,
  #home-online-three #home-integrated .ClaimOverview .module-copy p,
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager button::after {
    color: var(--color-lite);
  }
}

/* full width module buttons */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#enrolment .btn.btn-default,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default {
  min-width: 125px;
  max-width: 75%;
}
/* ===========================================================================
BUTTON ALIGNMENT TO BOTTOM OF HOMEPAGE MODULE
==============================================================================
Guidelines:
Use Kentico module fields if only requiring one button on Generic module types.
If multiple buttons required on Generic module types, use Bootstrap classes of
"btn" and "btn-default" for your <a> tag, wrapped in individual <p> tags, which
in turn are wrapped in a <div> with class "generic-buttons"
============================================================================== */
@supports not (-ms-high-contrast: none){
@media only screen and (min-width: 768px) {
  /* make module items flex containers and set direction and size */
  .module-content,
  .module-content > div,
  .module-content > div > div,
  .module-content > div > div > div:last-child,
  .module-content > div > div > div:last-child .module-copy,
  .module-content > div > div > div:last-child .module-copy .content-text,
  .module-content > div > div > div:last-child .module-copy > div:last-child,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-active,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-inactive,
  .module-content > div > div > div > div.module-copy > div:last-child div.event-content div.text-light,
  .module-content > div > div .home-module-generic-content .generic-copy.module-copy .generic-buttons,
  .module-content > div > div > div:last-child .module-copy > .trs-buttons,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-buttons {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  /* reset certain properties to deal with pagers on claims modules */
  #home-online-three #home-integrated #make-a-claim,
  #home-online-three #home-integrated #manage-claims {
    padding-bottom: 1rem
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager {
    display: none;
  }
  /* align claims content to centre */
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager {
    align-self: center;
  }
  /* align flex containers housing buttons to bottom of module */
  #generic.module-content > div > div .home-module-generic-content .generic-copy.module-copy .generic-buttons,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-active,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-inactive,
  .module-content > div > div > div:last-child .module-copy .benefit-statement-buttons,
  .module-content > div > div > div:last-child .module-copy > .trs-buttons,
  .module-content > div > div > div:last-child .module-copy > .account-buttons,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-buttons {
    justify-content: flex-end;
  }
  /* remove margin on certain containers to ensure buttons align at the bottom of module */
  .module-content > div > div > div:last-child .module-copy .content-text,
  .module-content > div > div > div:last-child .module-copy .content-text p:last-of-type:not(:first-of-type) {
    margin: 0
  }
}
}

/* module icon styling*/
[class*="online-two-icon-"]:before{
  color: var(--color-2);
  font-family:OnlineTwoIconFont;
  font-size: 9em;
}
@media only screen and (min-width: 1400px){
  [class*="online-two-icon-"]:before {
    font-size: 6em;
  }
}
@media only screen and (min-width: 1920px){
  [class*="online-two-icon-"]:before {
    font-size: 7em;
  }
}
/* icon colour on orange modules */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Affinity div[class*="online"]:before,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.Overview div[class*="online"]:before,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.ClaimOverview div[class*="online"]:before,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.MyDocuments div[class*="online"]:before{
  color: var(--color-lite);
}
/*budget and benefit information icon */
.online-two-icon-58:before {
  content: "\e93a";
}
/*claim overview icon */
.online-two-icon-135:before {
  content: "\e98a";
}
/* my documents icon*/
.online-two-icon-63:before {
  content: "\e93f";
}
/* my discounts icon*/
.online-two-icon-48:before {
  content: "\e930";
}
/* benefit information icon */
.online-two-icon-19:before {
  content: "\e912";
}

/* Interactive TRS PDF icon */
.online-two-icon-136:before {
  content: "\e98b";
}

/*** 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%;
}
/* remove margin around carousel content and set colour */
#home-online-three #home-integrated .home-module-integrated .content p  {
  margin: 0;
  color: var(--color-dark);
  font-size: 1.2em;
}
/* carousel slide content headings */
.home-module-integrated .content h2,
.home-module-integrated .content h3 {
  margin-top: 0;
  color: var(--color-1);
}
/* carousel content buttons */
.home-module-integrated #slider .sliderContainer .slide-content .content .btn {
  font-size: .75em;
}
/* adjust width of carousel thumbnails */
.home-module-integrated #slider .thumb .rect {
  width: 190px;
}
/* background of thumbnail container */
.home-module-integrated #slider .thumb {
  background: #a9a9a9;
}

//* Overriding the colours for the My Choices Chart*/
#item-1 .payslip-item-amount {
  color: #f57c00!important;
}

#item-2 .payslip-item-amount {
  color: #bf360c!important;
}

#benefit-statement .highcharts-series-0 .highcharts-point {
  fill: rgba(245,124,0,1)!important;
}
#benefit-statement .highcharts-series-0 .highcharts-point:hover {
  fill: rgba(245,124,0,.5)!important;
}

#benefit-statement .highcharts-series-1 .highcharts-point {
  fill: rgba(191,54,12,1)!important;
}
#benefit-statement .highcharts-series-1 .highcharts-point:hover {
  fill: rgba(191,54,12,.5)!important;
}

@media only screen and (min-width:768px){
  /* benefit statement payslip data item styling */
  #item-0, #item-1, #item-2 {
		width: calc(100% - 2em);
    margin-left: 1em;
		text-align: left;
	}
	.payslip-item-amount {
		float: right;
	}
	/* trs styling */
	#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#trs p {
    margin-bottom: -45px;
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #trs .highcharts-background {
    fill: transparent;
  }
  /* make a claim styling */
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager {
    align-self: stretch
  }
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .account {
    display: flex;
    justify-content: space-between;
  }
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-account-name,
  .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-account-amount {
    padding: 0 1rem;
  }
}
@media only screen and (max-width: 767px){
  #home-module-benefit-statement .benefit-statement-copy .payslip-item-data #item-0,
  #home-module-benefit-statement .benefit-statement-copy .payslip-item-data {
    font-size: 1rem;
  }
  #home-module-benefit-statement .benefit-statement-copy .payslip-item-name {
    font-weight: 300;
  }
  /* hide mailbox option from mobile drop down menu */
  ul.jq-dropdown-menu li:nth-of-type(2) {
    display: none;
  }
}

.home-module-trs-content .highcharts-label text tspan {
  font-size: 14px!important;
  font-family: 'Open Sans'!important;
}

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

.bootstrap-iso#benefit-overview #BenefitNameFilter {
  background-color: var(--color-lite);
	border: 1px solid rgba(0,0,0,.15);
  border-radius: 0;
	color: #333;
	text-transform: none;
	text-align: left;
	width: 100%;
	overflow: hidden;
}
.bootstrap-iso#benefit-overview #BenefitNameFilter:before {
  background-color: transparent;
}
.bootstrap-iso#benefit-overview .clear-filter {
  background-color: var(--color-3);
  border: none;
  color: var(--color-lite);
}
.bootstrap-iso#benefit-overview .clear-filter:hover,
.bootstrap-iso#benefit-overview .clear-filter:focus {
  background-color: var(--color-2);
  color: var(--color-lite);
}
.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(--color-1);
  color: var(--color-dark);
}

/* accodions */
#benefit-overview #overviewAccordion .panel-default > .panel-heading {
  background-color: transparent;
}
#benefit-overview #overviewAccordion .panel-title,
#benefit-overview #overviewAccordion .panel-title a:hover,
#benefit-overview #overviewAccordion .panel-title a:focus {
  color: var(--color-1);
}
#benefit-overview #overviewAccordion .panel-heading i {
  margin-right: .5em
}

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

/*================================================================================================== 7. Benefit statement  ==================================================================================================*/
.benefit-matrix .benefitdate .data-addon {
  color: #666;
}
/* hide  follow up info */
.benefit-matrix .hdf-followup.row {
  display: none;
}
/* color of Pending Requests widget icon */
.benefit-matrix .glyphicon.glyphicon-repeat {
  color: var(--color-2);
}
/* evenly space out the datepicker and widgets so the Dutch label doesn't overwrite anything */
@media only screen and (min-width:1024px){
  .matrix.benefit-statement .benefitheader-fixed .row.margin-left .col-md-10.col-sm-10 {
    display: flex;
    justify-content: space-between
  }
}

/*Text transform off for Benefit Statement Date*/
.benefit-matrix .benefitdate {
text-transform: none;
}

/*Remove date format*/
#dateFormat {
display: none;
}

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

/* modellers and tools section */
.benefit-matrix .benefitheader.benefitheader-border {
  border-color: #666;
  color: #666;
}
/* 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;
  color: var(--color-2);
}
/* modellers and tools widget */
.bootstrap-iso.benefit-matrix .glyphicon-cog:before {
  content: '\f013';
}
/* adding it up widget */
.bootstrap-iso.benefit-matrix .glyphicon-refresh:before {
  content: '\f021';
}

/* confirm choices button */
.benefitheader-fixed div#followup-items a.btn {
  animation: shadow-pulse 1s infinite;
  background-color: var(--color-3);
  border-radius: 20px;
  color: var(--color-lite);
}
.benefitheader-fixed div#followup-items a.btn:hover {
  background-color: var(--color-2);
  border-radius: 20px;
  color: var(--color-lite);
}
.benefitheader-fixed div#followup-items a.btn:focus {
  background-color: var(--color-2);
  border-radius: 20px;
  color: var(--color-lite);
}
.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(--color-1);
  border-radius: 20px;
  color: var(--color-dark);
}
/* reset to default button */
.benefitheader-fixed div#resettodefaults a.btn,
.benefitheader-fixed div#resettodefaults a.btn:hover {
  display: none;
}

/* total cost section */
.benefit-matrix .totalcost-section-row .totalcostsection {
  width: 100%;
}
/* total cost label */
.benefit-matrix .totalcostLable {
  color: var(--color-2);
}

/* accordion background colours */
/* benefits you can choose*/
.benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading {
  background: var(--color-1);
}
/* benefits you many be able to choose */
.benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading {
  background: var(--color-1);
}
/* benefits you cannot choose */
.benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading {
  background: var(--color-1);
}
/* 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;
}

/* Remove white space between first accordian and the first line group in the first and last accordions */
.benefit-matrix .containers > div > div.benefit-category:first-child .benefit-active-benefits,
.benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .benefit-active-benefits {
  display: none;
}

/* line group text colour */
.benefit-matrix .group-default {
  color: var(--color-1);
}

/* line name */
.benefit-matrix .lineheader > a:link {
  color: var(--color-3);
  font-weight: bold
}
.benefit-matrix .lineheader > a:link:hover,
.benefit-matrix .lineheader > a:link:focus {
  color: var(--color-2);
}
.benefit-matrix .lineheader > a:link:active,
.benefit-matrix .lineheader > a:link:active:hover,
.benefit-matrix .lineheader > a:link:active:focus {
  color: var(--color-1);
}

/* width of area containng Amount added to Flex Budget text */
.benefit-matrix:not(.benefitselect) .font-yourcost-color-earnedcredit {
  width: 200%;
}

/* select buttons */
.benefit-matrix .row .btn-success:not(.uib-close),
.benefit-matrix .row .btn-success:not(.uib-close):hover,
.benefit-matrix .row .btn-success:not(.uib-close):focus,
.benefit-matrix .row .btn-success:not(.uib-close):active:hover {
    min-width: 75%;
}
.benefit-matrix .row .btn-success {
  background-color: var(--color-3);
}
.benefit-matrix .row .btn-success:hover,
.benefit-matrix .row .btn-success:focus {
  font-weight: bold;
}

/* 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(--color-1);
}
.benefit-matrix h5[tbs-translate="Enrollment.Online2.BeneficiaryAllocations"] {
  font-size: 18px;
}
.dependent-approved {
  color: #666;
}

/* new, changed and unlocked labels */
.benefit-matrix .newbenefit,
.benefit-matrix .changebenefit,
.benefit-matrix .glyphicon-record,
.benefit-matrix .acitve-text {
  display: none;
}

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

/*Specific styling for Budget Creator Benefits*/
/*Hiding costs for Salary Sacrifice to Flex Budget,
Sacrifice 13th Month Salary to Flex Budget,
Sacrifice Holiday Bonus to Flex Budget,
Sacrifice Performance Bonus to Flex Budget,
Remaining Mobility left to spend*/
.BenefitIntro_fb6c3ab1-72fc-403a-8cba-2954f30d0764 .FundedDisplay,
.BenefitIntro_fb6c3ab1-72fc-403a-8cba-2954f30d0764 .YourCostDisplay small,
.BenefitIntro_28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4 .FundedDisplay,
.BenefitIntro_28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4 .YourCostDisplay small,
.BenefitIntro_f40ca6cc-f6f8-4e22-b70e-38ab19944947 .FundedDisplay,
.BenefitIntro_f40ca6cc-f6f8-4e22-b70e-38ab19944947 .YourCostDisplay small,
.BenefitIntro_42c794a1-3013-40a8-a116-899d3527c783 .FundedDisplay,
.BenefitIntro_42c794a1-3013-40a8-a116-899d3527c783 .YourCostDisplay small,
.BenefitIntro_69679e1d-051b-4aff-86d7-7af633f55c36 .FundedDisplay,
.BenefitIntro_69679e1d-051b-4aff-86d7-7af633f55c36 .YourCostDisplay small,
.BenefitIntro_f4f9ca30-1315-4990-87d3-ce83064d63fe .FundedDisplay,
.BenefitIntro_f4f9ca30-1315-4990-87d3-ce83064d63fe .YourCostDisplay small {
  display: none;
}

/* display of Commuting Allowance benefit */
/* initially hide all option names and costs*/
.BenefitIntro_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea [ng-repeat="line in ::linetype.LineSet.Lines"] {
  display: none;
}
/* then display only the first line in the line set */
.BenefitIntro_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea [ng-repeat="line in ::linetype.LineSet.Lines"]:first-of-type {
  display: inline;
}
/* finally hide the line set name */
.BenefitIntro_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea .lineset-linename {
  display: none
}

/* Hide Employer Contribution titles and amounts for Non Funded Benefits*/
/* Commuting allowance */
.BenefitIntro_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea .col-xs-4.FundedDisplay:nth-child(2),
/* Bicycle purchase reimbursement */
.BenefitIntro_7ad6ce66-ed24-43d9-b687-534883972773 .col-xs-4.FundedDisplay:nth-child(2),
/* Holiday buy */
.BenefitIntro_738b79ff-2dc8-44ef-9b38-d48cec0e809e .col-xs-4.FundedDisplay:nth-child(2),
/* Holiday sell - end of year */
.BenefitIntro_61591b94-e4d3-4527-9fa9-881590a2b0cf .col-xs-4.FundedDisplay:nth-child(2),
/* Sell holiday to one off payment */
.BenefitIntro_52cb9fa6-d879-47c8-9395-f3a61299594a .col-xs-4.FundedDisplay:nth-child(2) {
  visibility: hidden;
}

/*Hide Select button and info icon for Remaining Mobility Budget left to spend*/
.BenefitIntro_f4f9ca30-1315-4990-87d3-ce83064d63fe .btn-option-elect,
.BenefitIntro_f4f9ca30-1315-4990-87d3-ce83064d63fe .glyphicon-info-sign {
  display: none;
}

/*Set width of Benefit Cost/Funded Cost and Your Monthly Cost columns*/
.FundedDisplay.ng-isolate-scope:nth-child(1) {
  width: 30%;
}

.FundedDisplay.ng-isolate-scope:nth-child(2) {
  width: 33%;
}

.YourCostDisplay.ng-isolate-scope {
  width: 30%;
}

/*Hide Correspondance Table on Benefits Matrix page*/

.benefitmatrix-container #tabledocuments, 
.benefitforcomplate #tabledocuments {
  display: none!important;
}

/*================================================================================================== 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: 20px
}
.benefitselect .continue {
  animation: shadow-pulse 1s infinite;
}
.benefitselect .continue:after {
  content: '\f112';
  font-family: FontAwesome;
  padding-left: .5em
}
/* line name */
.benefitselect .line-name {
  color: var(--color-1);
}
/* more info icon */
.benefitselect .line-benefit-intro .glyphicon-info-sign-color {
  color: var(--color-3);
}

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

/* currently selected box */
.box-border {
  padding: 0
}
.box-border {
  border: 3px solid var(--color-2)
}
#products .box-border {
  border: none
}
#products .box-border.sel {
  border: 3px solid var(--color-2)
}

/* layout of items in currently selected box */
@media only screen and (min-width: 768px){
  .benefitselect div[id^="lineid_"] {
    display: flex;
  }
  .benefitselect div[id^="lineid_"] > div:nth-of-type(2) {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
  }
  .benefitselect div[id^="lineid_"] > div:nth-of-type(2) > div:first-of-type {
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
  }
  .benefitselect .employerFundingCart .funded {
    margin: 0;
    padding: 0;
    width: auto;
  }
}

/*Specific styling for Budget Creator Benefits*/
/* Hide Cost of Benefit and Employer Contribution titles and amounts for Budget Creator Benefits*/
#lineid_fb6c3ab1-72fc-403a-8cba-2954f30d0764 .cost,
#lineid_fb6c3ab1-72fc-403a-8cba-2954f30d0764 .funded,
#lineid_fb6c3ab1-72fc-403a-8cba-2954f30d0764 .you-pay h3,
#lineid_28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4 .cost,
#lineid_28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4 .funded,
#lineid_28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4 .you-pay h3,
#lineid_f40ca6cc-f6f8-4e22-b70e-38ab19944947 .cost,
#lineid_f40ca6cc-f6f8-4e22-b70e-38ab19944947 .funded,
#lineid_f40ca6cc-f6f8-4e22-b70e-38ab19944947 .you-pay h3,
#lineid_42c794a1-3013-40a8-a116-899d3527c783 .cost,
#lineid_42c794a1-3013-40a8-a116-899d3527c783 .funded,
#lineid_42c794a1-3013-40a8-a116-899d3527c783 .you-pay h3,
#lineid_69679e1d-051b-4aff-86d7-7af633f55c36 .cost,
#lineid_69679e1d-051b-4aff-86d7-7af633f55c36 .funded,
#lineid_69679e1d-051b-4aff-86d7-7af633f55c36 .you-pay h3 {
  display: none;
}

/* Hide Cost of Benefit, i icon and Employer Contribution titles and amounts for Remaining Mobility Budget option*/
#Line_f4f9ca30-1315-4990-87d3-ce83064d63fe.glyphicon-info-sign,
#lineid_f4f9ca30-1315-4990-87d3-ce83064d63fe .cost,
#lineid_f4f9ca30-1315-4990-87d3-ce83064d63fe .funded,
#lineid_f4f9ca30-1315-4990-87d3-ce83064d63fe .you-pay h3,
#lineid_f4f9ca30-1315-4990-87d3-ce83064d63fe .selection
{
  display: none;
}

/* Hide Employer Contribution titles and amounts for Non Funded Benefits*/
#lineid_7ad6ce66-ed24-43d9-b687-534883972773 .funded,
#lineid_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea .funded,
#lineid_738b79ff-2dc8-44ef-9b38-d48cec0e809e .funded,
#lineid_61591b94-e4d3-4527-9fa9-881590a2b0cf .funded,
#lineid_52cb9fa6-d879-47c8-9395-f3a61299594a .funded,
#vouchergroupid_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea .funded {
  visibility: hidden;
}

/* select buttons */
.online-two-iso .benefitselect A.button-style.green {
  background-color: var(--color-3);
  border-radius: 20px;
  color: var(--color-lite);
}
.online-two-iso .benefitselect A.button-style.green:hover {
  background-color: var(--color-2);
  box-shadow: none;
  color: var(--color-lite);
}
.online-two-iso .benefitselect A.button-style.green:focus {
  background-color: var(--color-2);
  box-shadow: none;
  color: var(--color-lite);
}
.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(--color-1);
  color: var(--color-dark);
}

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

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

/*currently selected box text colour */
.benefitselect .content-you-chose,
.benefitselect .content-you-chose p,
SPAN.green-number,
.benefitselect .in-Cart .you-pay H3,
.benefitselect .in-Cart .you-pay P SPAN.green-number {
  color: #666;
}
.in-Cart .you-chose .selected-plan {
  color: var(--color-3);
}
.in-Cart .you-chose .selected-plan strong {
  font-weight: bold;
}
/* EOI pending asterisk */
.benefitselect .alignleft .pending-note {
  display: inline;
  float: none;
}
/* available products heading */
.benefitselect .products-header H4 {
  color: var(--color-1);
}
/* styling available options boxes */
.benefitselect .box-border-bg .content-box-border {
  background-color: #ededec;
}
.benefitselect .products .box-border.sel .content-box-border {
  background-color: var(--color-lite);
}
/* selected plan border box */
.benefitselect .products .box-border.sel,
.benefitselect .products .box-border.sel .header {
  background: var(--color-1);
  font-weight: bold;
}
.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: #666;
}
/* see also link colour */
.benefitselect .linename > a:link {
  color: var(--color-3);
}
.benefitselect .linename > a:hover {
  color: var(--color-2);
}
.benefitselect .linename > a:focus {
  color: var(--color-2);
}
.benefitselect .linename > a:active,
.benefitselect .linename > a:active:hover,
.benefitselect .linename > a:active:focus {
  color: var(--color-1);
}

/* remove follow up info wording that appears before main followup content */
.benefitselect .followup-collect-info {
  display: none;
}

/* adjusting height of zero coverage message so it doesn't clash with inpur validation message */
.benefitselect .zeroInput-height {
  height: auto;
}

/* Remove zero coverage message */
.benefitselect span[ng-bind-html="vm.locale.zeroInputNoCover"] {
  display: none;
}

/*Increase width of Your cost column*/
.in-Cart .you-pay {
  width: 180px
}

/*Fixing the width of the Monthly Benefit Cost label*/

.in-Cart .cost {
width: 250px;
}

/*Styling Benefit Description text*/
.benefitselect .description br {
  display: none;
}
.benefitselect .description {
  margin-top: 1em;
  font-size: 1rem
}

/*================================================================================================== 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(--color-1);
}
/* 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(--color-3);
  border-radius: 20px;
  color: var(--color-lite);
}
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(--color-2);
  box-shadow: none;
  color: var(--color-lite);
}
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(--color-1);
  color: var(--color-dark);
}

/* 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(--color-dark);
}

html#profile body#profile #profile-online-2 #dependantsTab .left-tabon .sectionTitle {
  color: var(--color-3);
  border-bottom: .5em solid var(--color-3);
  padding-bottom: .25em;
}
html#profile body#profile #profile-online-2 #dependantsTab .right-tabon {
  border-bottom: .5em solid var(--color-3);
}
html#profile body#profile #profile-online-2 #dependantsTab .right-tabon .sectionTitledimmed {
  color: var(--color-3);
}

/* 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(--color-dark);
}

html#profile body#profile #profile-online-2 #beneficiariesTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #beneficiariesTab .right-tabon .sectionTitle{
  color: var(--color-3);
  border-bottom: .5em solid var(--color-3);
  padding-bottom: .25em;
}
/* beneficiaries edit allocation popup */
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label {
  background-color: var(--color-3);
  border: 1px solid white;
  border-radius: 0;
  color: var(--color-lite);
  font-size: 1em;
  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(--color-1);
  box-shadow: none;
  color: var(--color-dark);
}
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(--color-2);
  color: var(--color-lite);
}

/* 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(--color-dark);
}
html#profile body#profile #profile-online-2 #securityTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #securityTab .right-tabon .sectionTitle {
  color: var(--color-3);
  border-bottom: .5em solid var(--color-3);
  padding-bottom: .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(--color-1);
  background-image: none;
}
#communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text:before {
  font-family: FontAwesome;
  content: '\f00c';
  position: relative;
  left: -.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;
  }
}

/*Alignment of address fields on Contact tab*/
html#profile #contactTab .content-box-border .row {
  display: flex;
  flex-wrap: wrap;
}

 
/*================================================================================================== 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 .box-border {
  border: none;
}
#mobileRegistration .box-left-bg,
#mobileRegistration .box-border-bg {
  background: none;
}
#mobileRegistration #CMSEditableRegionDiv {
  padding: 1em;
}
#mobileRegistration .mobile-registration-fullwidth > .mobile-registration-left,
#mobileRegistration .mobile-registration-app-download {
  display: none;
}
#mobileRegistration .d-block {
  display: block;
}
#mobileRegistration .qr-background {
  background: var(--color-2)
}
#mobileRegistration p.lead {
  font-size: 21px;
}
#mobileRegistration p {
  font-size: 1em;
  font-weight: 300;
  padding-left: 0;
}
#mobileRegistration ol {
  margin: .5em 1em ;
  list-style: decimal;
}
#mobileRegistration-Content {
  font-size: 16px
}
#mobileRegistration .bootstrap-iso label {
  color: #000;
  font-size: 1em;
}
#mobileRegistration .bootstrap-iso input {
  display: block;
}
#mobileRegistration .bootstrap-iso #pwdMeter {
  margin-left: 0;
  margin-top: .5em;
  margin-bottom: .5em
}
#mobileRegistration .bootstrap-iso #newPasswordSave {
  float: none!important;
  width: 25%;
  border-radius: 20px;
  text-transform: none;
  background-color: var(--color-3);
}
#mobileRegistration .bootstrap-iso #newPasswordSave:hover,
#mobileRegistration .bootstrap-iso #newPasswordSave:focus {
  background-color: var(--color-2);
  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(--color-1);
}
#mobileRegistration .well-lg {
  padding: 18px 9px;
}
#mobileRegistration .fa span {
  font-family: Arial;
  padding-left: .5em;
  font-size: 14px;
  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  ==================================================================================================*/
.trsdashboard .summary-myreward {
	visibility: hidden;
}
.trsdashboard .summarystatementdate {
	color: #666;
	text-align: center;
	font-size: 1.5em;
}

/* navigation link colour */
.trsdashboard .desktop-tab .nav-pills > li.active > a,
.trsdashboard .desktop-tab ul li a{
  color: var(--color-1);
}
/* navigation icons */
.trsdashboard i.PayAllowances::before,
.trsdashboard i.SalarisVergoedingen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-1.png");
}
.trsdashboard .active i.PayAllowances::before,
.trsdashboard .active i.SalarisVergoedingen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-1_On.png");
}
.trsdashboard i.Bonus::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-2.png");
}
.trsdashboard .active i.Bonus::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-2_On.png");
}
.trsdashboard i.Pension::before,
.trsdashboard i.Pensioen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-3.png");
}
.trsdashboard .active i.Pension::before,
.trsdashboard .active i.Pensioen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-3_On.png");
}
.trsdashboard i.Protection::before,
.trsdashboard i.Verzekeringen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-4.png");
}
.trsdashboard .active i.Protection::before,
.trsdashboard .active i.Verzekeringen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-4_On.png");
}
.trsdashboard i.Mobility::before,
.trsdashboard i.Mobiliteit::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-5.png");
}
.trsdashboard .active i.Mobility::before,
.trsdashboard .active i.Mobiliteit::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-5_On.png");
}
.trsdashboard i.Other::before,
.trsdashboard i.Overigebeloningen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-6.png");
}
.trsdashboard .active i.Other::before,
.trsdashboard .active i.Overigebeloningen::before {
  content: url("/smartrewardNL/media/Images/TRS%20Icons/Aon_TBS-lite_TRS-6_On.png");
}
/* selected tab styling */
.trsdashboard li.active {
  background-color: var(--color-1);
}
.trsdashboard .desktop-tab .nav-pills > li.active > a,
.trsdashboard .desktop-tab .nav-pills > li.active > a:hover,
.trsdashboard .desktop-tab .nav-pills > li.active > a:focus {
  color: var(--color-lite)
}

/* vertical table styling */
.trsdashboard table[id*="table-"] thead th {
  background-color: var(--color-1);
  color: var(--color-lite)
}
.trsdashboard table[id*="table-"] tbody td {
  font-size: 1rem;
}
.trsdashboard table[id*="table-"] tfoot td {
  padding-left: 10px;
}

/* remove accordion icons on mobile */
.trsdashboard .show-tab-mobile .trs-icon {
  display: none;
}

/*Styling the vertical tables to match the default style*/

.trsdashboard table[id*="table-"] thead th {display: none}
.trsdashboard .table,
.trsdashboard .table tbody tr td{border-top: none;}
.trsdashboard .table,
.trsdashboard .table tbody tr td{border-left: none;}
.trsdashboard .table,
.trsdashboard .table tbody tr td{border-right: none;}

/* Allowances, Variable Pay and Health and Protection tables */
#table-5a0f2d67-4d85-4a96-91e8-b5716d17b8d0 tbody tr td:first-child,
#table-075df693-1c4c-4f46-9937-d8bd4eeecb28 tbody tr td:first-child,
#table-720a8b27-8beb-4003-b7d9-2a6cad1ced60 tbody tr td:first-child {
  width: calc(100% / 12 * 7)
}

/*Specific styling for Interactive TRS Page*/

.interactive-TRS .hero-title {
  background-color: var(--color-1);
  color: var(--color-lite);
  margin-bottom: 1em;
  padding: .25em;
}
.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(--color-1);
  font-size: 5rem;
  font-weight: 700
}

#download_statement:before {
  background: var(--color-3);
  border-radius: 25px;
  color: var(--color-lite);
  content: 'download pdf';
  font-size: 18px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 6px 50px;
  text-transform: uppercase;  
}

#download_statement:hover:before,
#download_statement:focus:before{
  background-color: var(--color-2);
}

/* Hide print button on TRS page*/
.trsdashboard .summary-header .printbtn {
  display: none;
}

/*================================================================================================== 13. Specific popups  ==================================================================================================*/
/* 13a) forgot password */
/* progress bar colour */
.bootstrap-iso .progress-bar-success {
  background-color: var(--color-4);
}

/* 13b) modellers and tools */
/* overlay header */
.bootstrap-iso .modellersModalHeader {
  margin-top: 7px;
}
/* remove tab for Tax Modeller as only one widget presented in this modeller */
.modal-normal ul.modeller-links {
  display: none;
}
.modeller-container .modeler-description {
  background-color: white;
}
/* text color */
.modeller-container .row-header,
.modeller-container .row-summary {
  color: #666;
}
/* tax code input */
input:focus {
  box-shadow: none;
}
/* model button */
input.modeller-line-bottom {
  background-color: var(--color-3);
  border-radius: 20px;
  color: var(--color-lite);
  font-weight: normal;
  text-transform: uppercase;
}
input.modeller-line-bottom:hover {
  background-color: var(--color-2);
  color: var(--color-lite);
}
input.modeller-line-bottom:focus {
  background-color: var(--color-2);
  box-shadow: none;
  color: var(--color-lite);
}
input.modeller-line-bottom:active,
input.modeller-line-bottom:active:hover,
input.modeller-line-bottom:active:focus {
  background-color: var(--color-1);
  box-shadow: none;
  color: var(--color-dark);
}
@media only screen and (max-width: 767px){
  #TaxModelerContent {
    font-size: 14px
  }
}

/* 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(--color-3);
}
#allocationDialog .add-beneficiary:hover {
  color: var(--color-2);
}
#allocationDialog .add-beneficiary:focus {
  color: var(--color-2);
}
#allocationDialog .add-beneficiary:active,
#allocationDialog .add-beneficiary:active:hover,
#allocationDialog .add-beneficiary:active:focus {
  color: var(--color-1);
}

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

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

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

/* 13d) benefit matrix follow up items  */
/* overlay header */
#followup-items-overlay.online-followup-items #followup-items-title {
  background-color: var(--color-1);
  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(--color-4);
}
/* completed items dot indicator color */
.followup-content .progress-indicator .step-finished {
  background-color: var(--color-4);
}

/* 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: none;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .bootstrap-iso .confirmchoice .dl-horizontal dt {
    text-align: left;
  }
}
.benefit-matrix .modal-footer #confirmation-buttons .btn-default.active {
  background-color: var(--color-1);
}
.benefit-matrix .modal-footer #confirmation-buttons .btn-default:hover,
.benefit-matrix .modal-footer #confirmation-buttons .btn-default:focus {
  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: #666;
}

.election-info-collect .dependant-board .icon {
  background-image: none;
  width: 0
}
.election-info-collect .dependant-board .icon:before {
  color: var(--color-3);
  content: '\f0c0';
  font-family: 'FontAwesome';
  font-size: 3em;
  padding-right: .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(--color-1);
}
#allocationDialog .edit-beneficiary,
#allocationDialog .delete-beneficiary {
  color: var(--color-3);
}
#allocationDialog .edit-beneficiary:hover,
#allocationDialog .edit-beneficiary:focus,
#allocationDialog .delete-beneficiary:hover,
#allocationDialog .delete-beneficiary:focus {
  color: var(--color-2);
}
#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(--color-1);
}

/* 13h) benefit matrix Flex Budget */
/* header */
.bootstrap-iso .modal .modal-header .benefitheader a span[tbs-translate="AddingUp.TableTitle"] {
  color: white;
  cursor: default;
  text-decoration: none;
}
.benefit-matrix .reschash-instruction {
  color: #666;
}
@media only screen and (max-width: 767px){
  .bootstrap-iso .modal .modal-header .benefitheader {
    margin-top: 0;
    text-align: left;
    width: auto;
  }
  .bootstrap-iso .modal .modal-header .benefitheader a {
    font-size: 1rem;
  }
}

/* 13i) matrix exit warning */
#exit-confirm #exit-continue .blue:hover {
  background-color: var(--color-2);
}

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


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

/* 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: 7em;
  position: relative;
  top: -.1em;
  color: var(--color-1);
}

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

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

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

/* 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(--color-3);
  border: none;
  border-radius: 20px;
  color: var(--color-lite);
  font-weight: bold;
  transition: all .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(--color-2);
}

/* 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(--color-3);
  border: none;
  transition: background-color .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(--color-2);
}
.fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active .text-info {
  color: var(--color-lite);
}

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

/* claim overview */
/* links */
body#StatementAndClaimSubmit #wrapper a {
  color: var(--color-3);
}
body#StatementAndClaimSubmit #wrapper a:hover,
body#StatementAndClaimSubmit #wrapper a:focus {
  color: var(--color-2);
  text-decoration: none;
}
body#StatementAndClaimSubmit #wrapper a:active,
body#StatementAndClaimSubmit #wrapper a:active:hover,
body#StatementAndClaimSubmit #wrapper a:active:focus {
  color: var(--color-1);
}
/* 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: 1em;
}
#StatementAndClaimSubmit .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A,
.FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A:hover {
  border-bottom: .5em solid var(--color-3);
  color: var(--color-3);
  font-weight: bold;
  padding-bottom: 20px;
}

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

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

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

/* Pending, Approved and Rejected icons */
.claim-approved img {
  display: none;
}
.claim-approved a:before {
  font-family: FontAwesome;
  font-size: 1.75em;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.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(--color-3);
}
.claim-approved a[title="Pending"]:before,
.claim-approved a[title="Afwachting"]:before {
  content: '\f0ec';
  color: var(--color-2)
}

/* buttons in popup modal */
.claim-edit-link .btn.btn-primary,
.claim-edit-link .btn.btn-info,
.btn.btn-info.claim-acknowledgment-print {
  background-color: var(--color-3);
  color: var(--color-lite);
  border: none;
  border-radius: 25px;
  transition: background-color .25s
}
body#StatementAndClaimSubmit .btn-default {
  background-color: var(--color-1);
  color: var(--color-lite);
  border: none;
  border-radius: 25px;
  transition: background-color .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,
.btn.btn-info.claim-acknowledgment-print:hover,
.btn.btn-info.claim-acknowledgment-print: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(--color-2);
}

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

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

/* 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. Mobile  ==================================================================================================*/
/* login module buttons */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .mobile-buttons .btn {
  background-color: var(--color-3)!important;
}
@media only screen and (max-width: 767px){
  /* menu icon colour */
  .fa.fa-bars,
  .fa.fa-gear {
    color: var(--color-dark);
  }
  /* links in mobile hamburger menu */
  .online-two-iso #menu-no-dashboard li a,
  .online-two-iso #menu-no-dashboard li a.selected {
    color: var(--color-3);
  }
  /* 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(--color-2);
  }
  /* make height of greeting container auto to give proper spacing around the greeting */
  #home-online-three .dashboard-controls {
    height: auto
  }
  /* remove placeholder modules for when clients dont have TRS or My Documents or Discounts or Afinity modules */
  #home-online-three #home-integrated .NonTRS,
  #home-online-three #home-integrated .NonMyDocuments,
  #home-online-three #home-integrated .NonDiscounts,
  #home-online-three #home-integrated .NonAffinity {
    display: none;
  }
}
/* 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(--color-3);
  border-radius: 20px;
  color: var(--color-lite);
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy a.btn.btn-default,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel button.btn.btn-default {
  padding: 12px 20px;
  width: 100%;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .generic-copy,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .account-copy {
  margin-top: 0;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light .days-left {
  color: #666;
}
/* 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 {
  display: none;
}

/* mobile specific css */
@media all and (min-width:375px) and (max-width: 667px) {
  .benefitstatement-load-container{display:none;}
}
@media all and (min-width:360px) and (max-width: 640px) {
  .benefitstatement-load-container{display:none;}
}
@media all and (min-width:411px) and (max-width: 731px) {
  .benefitstatement-load-container{display:none;}
}
@media all and (min-width:320px) and (max-width: 568px) {
  .benefitstatement-load-container{display:none;}
}
@media all and (min-width:414px) and (max-width: 736px) {
 .benefitstatement-load-container{display:none;}
}
@media all and (min-width:375px) and (max-width: 812px) {
  .benefitstatement-load-container{display:none;}
}
@media all and (min-width:768px) and (max-width: 1024px) {
  .benefitstatement-load-container{display:none;}
}
@media all and (min-width:1024px) and (max-width: 1366px) {
  .benefitstatement-load-container{display:none;}
}

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

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
  -ms-grid-column:1;
  -ms-grid-column-span:2;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
  -ms-grid-column:2;
  -ms-grid-column-span:2;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
  -ms-grid-column:2;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
  -ms-grid-column:2;
  -ms-grid-column-span:2;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
  -ms-grid-column:1;
  -ms-grid-column-span:1;
  -ms-grid-row:5;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
  -ms-grid-column:1;
  -ms-grid-column-span:1;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}
}

@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-1 module-2"
      "module-5 module-5 module-8"
      "module-3 module-3 module-6"
      "module-10 module-4 module-4"
      "module-9 module-7 module-7"
  }
  
 #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {
  -ms-grid-column:1;
  -ms-grid-column-span:2;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
  -ms-grid-column:1;
  -ms-grid-column-span:2;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
  -ms-grid-column:2;
  -ms-grid-column-span:2;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
  -ms-grid-column:2;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
  -ms-grid-column:2;
  -ms-grid-column-span:2;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
  -ms-grid-column:1;
  -ms-grid-column-span:1;
  -ms-grid-row:5;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
  -ms-grid-column:1;
  -ms-grid-column-span:1;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}
  
}

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

  #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {
  -ms-grid-column:1;
  -ms-grid-column-span:2;
  -ms-grid-row:1;
  -ms-grid-row-span:2;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
  -ms-grid-column:3;
  -ms-grid-column-span:2;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
  -ms-grid-column:4;
  -ms-grid-column-span:2;
  -ms-grid-row:4;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
  -ms-grid-column:4;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
  -ms-grid-column:5;
  -ms-grid-column-span:1;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
  -ms-grid-column:1;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
  -ms-grid-column:5;
  -ms-grid-column-span:1;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
  -ms-grid-column:2;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}
  }

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

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {
  -ms-grid-column:1;
  -ms-grid-column-span:3;
  -ms-grid-row:1;
  -ms-grid-row-span:2;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 {
  -ms-grid-column:4;
  -ms-grid-column-span:2;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 {
  -ms-grid-column:5;
  -ms-grid-column-span:2;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 {
  -ms-grid-column:5;
  -ms-grid-column-span:3;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 {
  -ms-grid-column:6;
  -ms-grid-column-span:2;
  -ms-grid-row:1;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 {
  -ms-grid-column:7;
  -ms-grid-column-span:1;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 {
  -ms-grid-column:1;
  -ms-grid-column-span:2;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 {
  -ms-grid-column:4;
  -ms-grid-column-span:1;
  -ms-grid-row:2;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 {
  -ms-grid-column:3;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}

#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 {
  -ms-grid-column:4;
  -ms-grid-column-span:1;
  -ms-grid-row:3;
  -ms-grid-row-span:1;
}
  }

/****************************************** Using icons for benefits/events *******************************************/
/* if wanting icons to be colour coded to benefit groups */
/* replace LINEGROUP1/LINEGROUP2/LINEGROUP3 with relevant classes */
.benefit-matrix .BudgetCreation .benefitline .img:before,
.benefit-matrix .Flexbudget .benefitline .img:before,
#benefit-overview .BudgetCreation .summaryImage .img:before,
#benefit-overview .Flexbudget .summaryImage .img:before {
  color: var(--linegroup1-benefit-icon-color);
}
.benefit-matrix .Mobility .benefitline .img:before,
.benefit-matrix .Mobiliteit .benefitline .img:before,
#benefit-overview .Mobility .summaryImage .img:before,
#benefit-overview .Mobiliteit .summaryImage .img:before {
  color: var(--linegroup2-benefit-icon-color);
}
.benefit-matrix .LeisureLifestyle .benefitline .img:before,
.benefit-matrix .Vitaliteit .benefitline .img:before,
#benefit-overview .LeisureLifestyle .summaryImage .img:before,
#benefit-overview .Vitaliteit .summaryImage .img:before {
  color: var(--linegroup3-benefit-icon-color);
}
.benefit-matrix .Protection .benefitline .img:before,
.benefit-matrix .Verzekering .benefitline .img:before,
#benefit-overview .Protection .summaryImage .img:before,
#benefit-overview .Verzekering .summaryImage .img:before {
  color: var(--linegroup4-benefit-icon-color);
}

/****************************************** Using icons for homepage/elsewhere on the site *******************************************/
/* add any additional icons from the OnlineTwoIconFont that are required */
/* Benefit Icons: Salary Sacrifice to Flex Budget */
#benefit-overview .img.BenefitImage_fb6c3ab1-72fc-403a-8cba-2954f30d0764:before,
.img.Lfb6c3ab1-72fc-403a-8cba-2954f30d0764:before,
div.see-also .img.Lfb6c3ab1-72fc-403a-8cba-2954f30d0764:before{
	content: '\e924';
}

/* Benefit Icons: Sacrifice 13th Month Salary to Flex Budget */
#benefit-overview .img.BenefitImage_28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4:before,
.img.L28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4:before,
div.see-also .img.L28c156a3-3ad6-48ca-98e6-4aa75cc7b7a4:before{
	content: '\e924';
}

/* Benefit Icons: Sacrifice Holiday Bonus to Flex Budget */
#benefit-overview .img.BenefitImage_f40ca6cc-f6f8-4e22-b70e-38ab19944947:before,
.img.Lf40ca6cc-f6f8-4e22-b70e-38ab19944947:before,
div.see-also .img.Lf40ca6cc-f6f8-4e22-b70e-38ab19944947:before{
	content: '\e919';
}

/* Benefit Icons: Sacrifice Performance Bonus to Flex Budget */
#benefit-overview .img.BenefitImage_42c794a1-3013-40a8-a116-899d3527c783:before,
.img.L42c794a1-3013-40a8-a116-899d3527c783:before,
div.see-also .img.L42c794a1-3013-40a8-a116-899d3527c783:before{
	content: '\e91f';
}

/* Benefit Icons: Sell Holiday to Flex Budget */
#benefit-overview .img.BenefitImage_69679e1d-051b-4aff-86d7-7af633f55c36:before,
.img.L69679e1d-051b-4aff-86d7-7af633f55c36:before,
div.see-also .img.L69679e1d-051b-4aff-86d7-7af633f55c36:before{
	content: '\e919';
}

/* Benefit Icons: Commuting Allowance - (Voucher Group) */
#benefit-overview .img.BenefitImage_0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea:before,
.img.L0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea:before,
div.see-also .img.L0b69a3da-0393-4ca1-9ea8-97d7c2b8b9ea:before,
div.see-also .img.L75c878a1-7447-4cce-8c12-8fc01126eb35:before,
div.see-also .img.L2501e699-3b54-47b0-b972-840ca810b116:before{
	content: '\e928';
}

/* Benefit Icons: Bicycle Purchase Reimbursement */
#benefit-overview .img.BenefitImage_7ad6ce66-ed24-43d9-b687-534883972773:before,
.img.L7ad6ce66-ed24-43d9-b687-534883972773:before,
div.see-also .img.L7ad6ce66-ed24-43d9-b687-534883972773:before{
	content: '\e908';
}

/* Benefit Icons: Remaining Mobility Budget left to spend */
#benefit-overview .img.BenefitImage_f4f9ca30-1315-4990-87d3-ce83064d63fe:before,
.img.Lf4f9ca30-1315-4990-87d3-ce83064d63fe:before,
div.see-also .img.Lf4f9ca30-1315-4990-87d3-ce83064d63fe:before{
	content: '\e929';
}

/* Benefit Icons: Vitality Fund */
#benefit-overview .img.BenefitImage_2bb3e6de-74f2-42c2-b3a7-0c40ba21ec9b:before,
.img.L2bb3e6de-74f2-42c2-b3a7-0c40ba21ec9b:before,
div.see-also .img.L2bb3e6de-74f2-42c2-b3a7-0c40ba21ec9b:before{
	content: '\e914';
}

/* Benefit Icons: Holiday Buy */
#benefit-overview .img.BenefitImage_738b79ff-2dc8-44ef-9b38-d48cec0e809e:before,
.img.L738b79ff-2dc8-44ef-9b38-d48cec0e809e:before,
div.see-also .img.L738b79ff-2dc8-44ef-9b38-d48cec0e809e:before{
	content: '\e92e';
}

/* Benefit Icons: Sell Holiday to One-Off Payment */
#benefit-overview .img.BenefitImage_52cb9fa6-d879-47c8-9395-f3a61299594a:before,
.img.L52cb9fa6-d879-47c8-9395-f3a61299594a:before,
div.see-also .img.L52cb9fa6-d879-47c8-9395-f3a61299594a:before{
	content: '\e951';
}

/* Benefit Icons: Holiday Sell - End of Year */
#benefit-overview .img.BenefitImage_61591b94-e4d3-4527-9fa9-881590a2b0cf:before,
.img.L61591b94-e4d3-4527-9fa9-881590a2b0cf:before,
div.see-also .img.L61591b94-e4d3-4527-9fa9-881590a2b0cf:before{
	content: '\e919';
}

/* Benefit Icons: Education Fund */
#benefit-overview .img.BenefitImage_a41f7f75-144a-48a0-b634-0f10dcf50f6f:before,
.img.La41f7f75-144a-48a0-b634-0f10dcf50f6f:before,
div.see-also .img.La41f7f75-144a-48a0-b634-0f10dcf50f6f:before{
	content: '\e95c';
}

/* Benefit Icons: WGA Comprehensive Shortfall Insurance */
#benefit-overview .img.BenefitImage_4b72e7d4-5d4d-4c20-823b-fe84f9921348:before,
.img.L4b72e7d4-5d4d-4c20-823b-fe84f9921348:before,
div.see-also .img.L4b72e7d4-5d4d-4c20-823b-fe84f9921348:before{
	content: '\e926';
}

/* Benefit Icons: WIA Fixed Supplement Insurance (continuation benefit) */
#benefit-overview .img.BenefitImage_27863af4-a4a6-40ce-b9e9-b3d6e860d0b4:before,
.img.L27863af4-a4a6-40ce-b9e9-b3d6e860d0b4:before,
div.see-also .img.L27863af4-a4a6-40ce-b9e9-b3d6e860d0b4:before{
	content: '\e926';
}

/* Benefit Icons: WGA Shortfall Insurance*/
#benefit-overview .img.BenefitImage_823a8cd5-39f9-42b0-93dd-fc8655fa1597:before,
.img.L823a8cd5-39f9-42b0-93dd-fc8655fa1597:before,
div.see-also .img.L823a8cd5-39f9-42b0-93dd-fc8655fa1597:before{
	content: '\e926';
}

/* Benefit Icons: WIA excess insurance */
#benefit-overview .img.BenefitImage_98d4483d-0457-4615-97d9-4b073814e66d:before,
.img.L98d4483d-0457-4615-97d9-4b073814e66d:before,
div.see-also .img.L98d4483d-0457-4615-97d9-4b073814e66d:before{
	content: '\e926';
}

/* Benefit Icons: Disability below 35% insurance */
#benefit-overview .img.BenefitImage_b3e20e91-dd37-427f-9989-1da88799cc00:before,
.img.Lb3e20e91-dd37-427f-9989-1da88799cc00:before,
div.see-also .img.Lb3e20e91-dd37-427f-9989-1da88799cc00:before{
	content: '\e926';
}

/* Minification failed (line 3617, error number 1039): Token not allowed after unary operator: '-linegroup4-benefit-icon-color' */