/*================================================================================================== Version 4.1 ================================================================================================== */
/*================================================================================================== TABLE OF CONTENTS ==================================================================================================
               1. Variables
               2. Utility classes
               3. Global styles
                              3a) Headings                     3b) Links                             3c) Buttons
                              3d) Lists                                             3e) Popups                         3f) Tab selectors
                              3g) Accordions                  3h) Info icons, slider toggles and label styling
                              3i) Logo                                             3j) Site header
                              3k) Site footer   3l) Datepickers
                              3m) Inputs      3n) Tables
               4. Login page
               5. Home page
               6. Benefit overview
               7. Benefit statement
               8. Benefit matrix
               9. Benefit selection
               10. Profile
               11. App registration
               12. TRS
               13. Specific popups
                              13a) Forgot password                    13b) Modellers and tools             13c) Manage dependants
                              13d) Follow up items                     13e) Event T&Cs                                                            13f) benefit selection election info collect
                              13g) Beneficiaries          13h) Event Validation
               14. Icons
                              14a) Benefit icons                           14b) Life event icons
               15. Claims
  16. My Documents
  17. Document Download
               18. Mobile
               19. Client specific styles
======================================================================================================================================================================================================================= */
/* font declaration for using OnlineTwoIconFont set
'inspiringbenefits' is the new UK only demo client */
@font-face {
    font-family: 'OnlineTwoIconFont';
    src: url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.eot');
    src: url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.eot?#iefix') format('embedded-opentype'),
      url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.woff') format('woff'),
      url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.ttf') format('truetype'),
      url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v4.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: Knile_Bold;
    src: url('/RBS/media/default/Fonts/knile-bold-webfont.eot' );
    src: url('/RBS/media/default/Fonts/knile-bold-webfont.woff') format('woff'),
    url('/RBS/media/default/Fonts/knile-bold-webfont.woff2') format('woff2'),
    url('/RBS/media/default/Fonts/knile-bold-webfont.ttf') format('truetype'),
    url('/RBS/media/default/Fonts/knile-bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  /*================================================================================================== 1. Variables  ==================================================================================================*/
  :root {
    --accessibility-outline: #666;
    --main-text-color: #646068;
    --text-accent-color: #5A287D;
    --heading-color: #333;
    --button-color: #5e10b1;
    --button-color-alternate: #cf223f;
    --button-text-color: #fff;
    --button-text-color-alternate: #fff;
    --button-hover-color: #e6a000;
    --button-hover-text-color: #000;
    --button-click-color: #5e10b1;
    --button-click-text-color: #fff;
    --link-text-color: #5e10b1;
    --link-text-hover-color: #5e10b1;
    --link-text-click-color: #5e10b1;
    --box-shadow: 5px 0 10px rgba(0,0,0,.2), -5px 0 10px rgba(0,0,0,.2);
    --header-overlay: #fff;
    --header-overlay-text-color: #000;
    --panel-color: #5e10b1;
    --panel-text-color: #fff;
    --info-icon-color: #5E10B1;
    --tab-selector-text-color: #000;
    --tab-selector-border-color: #5e10b1;
    --tab-selector-inactive-text-color: #666;
    --progress-bar-color: #1d7b8a;
    --success-icon-color: #1d7b8a;
    --unordered-list-bullet-color: #5e10b1;
    --datepicker-today: #5e10b1;
    --datepicker-today-text: #fff;
    --datepicker-clear: #cf223f;
    --datepicker-clear-text: #fff;
    --slider-toggle-color: #429448;
    --benefit-icon-color: #fff;
    --linegroup1-benefit-icon-color: #007BFF;
    --linegroup2-benefit-icon-color: #549B00;
    --linegroup3-benefit-icon-color: #F50056;
    --life-event-background: #525174;
    --logo: url(/RBS/media/default/Logo_main.svg);
    --login-image: url(/RBS/media/default/Images/Login.png);
    --site-header-color: #f2f2f8;
    --site-header-icon-color: #fff;
    --site-footer-color: #5a287d;
    --site-footer-link-color: #fff;
    --need-assistance-pull-down-menu: #5e10b1;
    --homepage-company-content-icon: '\e978';
    --homepage-module-background-color: #f2f2f2;
    --homepage-module-enrolment-background-color: linear-gradient(to bottom right, #42145f, #1d7b8a);
    --homepage-module-benefit-statement-background-color: linear-gradient(to bottom right, #1d7b8a, #42145f);
    --homepage-module-well-one-background-color: #3C3C3B;
    --homepage-module-well-one-money-background-color: linear-gradient(to bottom right, #6BBFA7, #9DD1CC);
    --homepage-heading-color: #333;
    --homepage-module-icon-color: #000;
    --homepage-enrolment-days-left-color: #1d7b8a;
    --carousel-heading-color: #42145f;
    --carousel-text-color: #fff;
    --pulse-color-start: rgba(47, 79, 79, 0.5);
    --pulse-color-end: rgba(47, 79, 79, 0);
    --selected-email-color: #5e10b1;
    --benefit-selection-elected-box-highlight: #429448;
    --benefit-selected-tick-mark: #fff;
    --follow-up-panel-color: #5e10b1;
    --mobile-menu-icon-color: #000;
    --mobile-menu-link-color: #000;
  }
  
  @-webkit-keyframes shadow-pulse {
    0% {
      box-shadow: 0 0 0 0px var(--pulse-color-start);
    }
    100% {
      box-shadow: 0 0 0 10px var(--pulse-color-end);
    }
  }
  
  @keyframes shadow-pulse {
    0% {
      box-shadow: 0 0 0 0px var(--pulse-color-start);
    }
    100% {
      box-shadow: 0 0 0 10px var(--pulse-color-end);
    }
  }
  
  /*================================================================================================== 2. Utility classes  ==================================================================================================*/
  /* specific media query for IE10+ to handle responsive images */
  @media screen and (-ms-high-contrast: active),
    screen and (-ms-high-contrast: none) {
    .bootstrap-iso .img-responsive {
      width: 100%;
    }
  }
  /* margin-top 0 */
  .bootstrap-iso .mt-0 {
    margin-top: 0;
  }
  
  /* allow use of OnlineTwoIconFont for anything with this class */
  [class*='online-two-icon-']:before {
    font-family: OnlineTwoIconFont;
  }
  /* icons on the benefit intro popups */
  .benefit-information [class*='online-two-icon-']::before {
    font-size: 15rem;
    line-height: 1;
  }
  
  /* for adding full stop after resource string */
  .full-stop:after {
    content: '.';
    position: relative;
    left: -0.25em;
  }
  /* for adding comma after resource string */
  .comma:after {
    content: ',';
    position: relative;
    left: -0.25em;
  }
  
  .d-flex {
      display: flex;
      gap: .5em
  }
  .wrap {
      flex-wrap: wrap;
  }
  
  .config-note {
      display: none;
  }
  
  .bootstrap-iso .lower-alpha {
      list-style-type: lower-alpha;
  }
  
  .bootstrap-iso .strong {
      font-weight: bold;
  }
  .bootstrap-iso .italic {
      font-style: italic;
  }
  .bootstrap-iso .underline {
      text-decoration: underline;
  }
  [class*="-eligible"] {
      display: none;
  }
  
  /*================================================================================================== 3. Global styles  ==================================================================================================*/
  /* remove gradient background */
  html {
    background: none;
  }
  /* max width for content area of all pages */
  .online-three-allpages-fullwidth .wrapper-fullwidth .benefit-matrix .benefitheader-fixed,
  .online-three-allpages-fullwidth .wrapper-fullwidth#wrapper {
    max-width: 1920px;
  }
  
  /* global font reset */
  .highcharts-legend-item text tspan,
  .highcharts-title,
  .highcharts-label.highcharts-data-label tspan,
  .highcharts-label.highcharts-tooltip tspan,
  .highcharts-axis-labels {
    font-family: 'Open Sans',sans-serif!important;
    fill: var(--main-text-color)!important;
    color: var(--main-text-color)!important;
  }
  
  /* global font size and colour */
  .online-two-iso body,
  .bootstrap-iso,
  .benefitselect .followup-container .followup-item-coverage-heading,
  .benefitselect .followup-required.alert-warning > :not(.followup-required-sign),
  .benefitselect .followup-item-collect.alert-warning,
  #benefit-overview .summaryContent {
    color: var(--main-text-color);
    font-size: 1.1rem;
    font-weight: 500;
  }
  .bootstrap-iso p {
    padding-bottom: 0;
  }
  .online-two-iso label {
      color: var(--main-text-color);
  }
  
  /* 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,
  .in-Cart .cost-left P,
  .in-Cart .cost-right P,
  /* footer links */
  .online-two-iso #footer a,
  /* buttons */
  .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-success:hover,
  .bootstrap-iso .btn-success:focus,
  .bootstrap-iso .btn-popup,
  .benefit-matrix .benefitheader.benefitheader-border,
  .benefitheader-fixed div#followup-items a.btn,
  .benefitheader-fixed div#resettodefaults a.btn,
  .benefitheader-fixed div#followup-items a.btn:hover,
  .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 #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.green,
  .online-two-iso A.button-style,
  .online-two-iso A.button-style.gray,
  .online-two-iso A.button-style.green,
  /* headings */
  .header-overlay H5,
  .benefit-matrix .benefitdate,
  .benefit-matrix .group-default,
  .benefit-matrix .confirm-checkout-button .btn-success,
  .benefit-matrix .confirm-checkout-button .btn-success:hover,
  .benefit-matrix .confirm-checkout-button .btn-success:focus,
  .benefitselect .products .box-border.sel .header,
  #followup-items-overlay.online-followup-items #followup-items-title,
  /* calendar popups */
  .bootstrap-iso .uib-datepicker .btn,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info,
  .templates .uib-datepicker-popup .btn-sm.btn-info {
    text-transform: none;
  }
  /* error message colour */
  .online-two-iso .error-message,
  .ImportantMessage,
  .pending-note {
    color: #CF223F;
  }
  
  /* 3a) headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .online-two-iso h1,
  .online-two-iso h2,
  .online-two-iso h3,
  .online-two-iso h4,
  .online-two-iso h5,
  .online-two-iso h6,
  .bootstrap-iso h1,
  .bootstrap-iso h2,
  .bootstrap-iso h3,
  .bootstrap-iso h4,
  .bootstrap-iso h5,
  .bootstrap-iso h6,
  .bootstrap-iso .h1,
  .bootstrap-iso .h2,
  .bootstrap-iso .h3,
  .bootstrap-iso .h4,
  .bootstrap-iso .h5,
  .bootstrap-iso .h6,
  /* BENEFITS header on popup when removing dependants attached to cover */
  .coverageHeader {
    color: var(--heading-color);
    padding-left: 0;
  }
  
  /* 3b) links */
  a,
  .bootstrap-iso a,
  .dependant-list a.dependant-confirm-delete,
  .terms-conditions-cookies .cookie-policy-link,
  .terms-conditions-cookies .term-condtion-link {
    color: var(--link-text-color);
    text-decoration: underline;
  }
  a:hover,
  a:focus,
  .bootstrap-iso a:hover,
  .bootstrap-iso a:focus,
  .dependant-list a.dependant-confirm-delete:hover,
  .dependant-list a.dependant-confirm-delete:focus,
  .terms-conditions-cookies .cookie-policy-link:hover,
  .terms-conditions-cookies .cookie-policy-link:focus,
  .terms-conditions-cookies .term-condtion-link:hover,
  .terms-conditions-cookies .term-condtion-link:focus {
    color: var(--link-text-hover-color);
    text-decoration: none;
  }
  .bootstrap-iso a:focus,
  .dependant-list a.dependant-confirm-delete:focus,
  .terms-conditions-cookies .cookie-policy-link:focus,
  .terms-conditions-cookies .term-condtion-link:focus {
    outline: 3px solid var(--accessibility-outline);
  }
  a:active,
  a:active:hover,
  a:active:focus,
  .bootstrap-iso a:active,
  .bootstrap-iso a:active:hover,
  .bootstrap-iso a:active:focus,
  .dependant-list a.dependant-confirm-delete:active,
  .dependant-list a.dependant-confirm-delete:active:hover,
  .dependant-list a.dependant-confirm-delete:active:focus,
  .terms-conditions-cookies .cookie-policy-link:active,
  .terms-conditions-cookies .cookie-policy-link:active:hover,
  .terms-conditions-cookies .cookie-policy-link:active:focus,
  .terms-conditions-cookies .term-condtion-link:active,
  .terms-conditions-cookies .term-condtion-link:active:hover,
  .terms-conditions-cookies .term-condtion-link:active:focus {
    color: var(--link-text-click-color);
  }
  
  /* 3c) buttons */
  /* default colour */
  .bootstrap-iso .btn-primary,
  .bootstrap-iso .btn-danger,
  .bootstrap-iso .btn-info,
  .bootstrap-iso .btn-default,
  .bootstrap-iso .btn-warning,
  .bootstrap-iso .btn-success,
  .bootstrap-iso .btn-popup,
  .online-two-iso A.button-style,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue,
  .online-two-iso A.button-style.blue,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray,
  .online-two-iso A.button-style.gray,
  .benefitheader-fixed div#followup-items a.btn,
  .benefitheader-fixed div#resettodefaults a.btn,
  .benefit-matrix .confirm-checkout-button .btn-success,
  .btn.btn-info.claim-acknowledgment-print {
    background-color: var(--button-color);
    border: none;
    border-radius: 5px;
    color: var(--button-text-color);
    overflow: hidden;
    position: relative;
    transition: all 0.25s;
    z-index: 1;
    font-size: 1.1rem;
  }
  
  /* for styling buttons that convey meaning of a negative action e.g. cancel/close/remove etc. */
  .bootstrap-iso .modal-controls .btn-warning,
  .online-two-iso #prevBtn A.button-style.blue,
  .online-two-iso #exit-cancel A.button-style.blue,
  .online-two-iso A.button-style.gray,
  .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning,
  .bootstrap-iso .btn-warning.dependant-cancel-btn {
    background-color: var(--button-color-alternate);
    color: var(--button-text-color-alternate);
  }
  
  /* hover colour */
  .bootstrap-iso .btn-primary:hover,
  .bootstrap-iso .btn-danger:hover,
  .bootstrap-iso .btn-info:hover,
  .bootstrap-iso .btn-default:hover,
  .bootstrap-iso .btn-warning:hover,
  .bootstrap-iso .btn-success:hover,
  .bootstrap-iso .btn-popup:hover,
  .online-two-iso A.button-style:hover,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:hover,
  .online-two-iso A.button-style.blue:hover,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:hover,
  .online-two-iso A.button-style.gray:hover,
  .benefit-matrix .row .btn-success:hover,
  .benefitheader-fixed div#followup-items a.btn:hover,
  .benefitheader-fixed div#resettodefaults a.btn:hover,
  .benefit-matrix .confirm-checkout-button .btn-success:hover,
  .btn.btn-info.claim-acknowledgment-print:hover {
    background-color: var(--button-hover-color);
    border-radius: 5px;
    border: none;
    box-shadow: none;
    color: var(--button-hover-text-color);
    font-size: 1.1rem;
  }
  
  /* focus colour */
  .bootstrap-iso .btn-primary:focus,
  .bootstrap-iso .btn-danger:focus,
  .bootstrap-iso .btn-info:focus,
  .bootstrap-iso .btn-default:focus,
  .bootstrap-iso .btn-warning:focus,
  .bootstrap-iso .btn-success:focus,
  .bootstrap-iso .btn-popup:focus,
  .online-two-iso A.button-style:focus,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:focus,
  .online-two-iso A.button-style.blue:focus,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:focus,
  .online-two-iso A.button-style.gray:focus,
  .benefitheader-fixed div#followup-items a.btn:focus,
  .benefitheader-fixed div#resettodefaults a.btn:focus,
  .benefit-matrix .confirm-checkout-button .btn-success:focus,
  .btn.btn-info.claim-acknowledgment-print:focus {
    background-color: var(--button-hover-color);
    border-radius: 5px;
    border: none;
    box-shadow: none;
    color: var(--button-hover-text-color);
    outline: 3px solid var(--accessibility-outline);
    font-size: 1.1rem;
  }
  
  /* when clicked colour */
  .bootstrap-iso .btn-primary:active,
  .bootstrap-iso .btn-primary:active:hover,
  .bootstrap-iso .btn-primary:active:focus,
  .bootstrap-iso .btn-danger:active,
  .bootstrap-iso .btn-danger:active:hover,
  .bootstrap-iso .btn-danger:active:focus,
  .bootstrap-iso .btn-info:active,
  .bootstrap-iso .btn-info:active:hover,
  .bootstrap-iso .btn-info:active:focus,
  .bootstrap-iso .btn-default:active,
  .bootstrap-iso .btn-default:active:hover,
  .bootstrap-iso .btn-default:active:focus,
  .bootstrap-iso .btn-warning:active,
  .bootstrap-iso .btn-warning:active:hover,
  .bootstrap-iso .btn-warning:active:focus,
  .bootstrap-iso .btn-success:active,
  .bootstrap-iso .btn-success:active:hover,
  .bootstrap-iso .btn-success:active:focus,
  .bootstrap-iso .btn-popup:active,
  .bootstrap-iso .btn-popup:active:hover,
  .bootstrap-iso .btn-popup:active:focus,
  .online-two-iso A.button-style:active,
  .online-two-iso A.button-style:active:hover,
  .online-two-iso A.button-style:active:focus,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:hover,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:focus,
  .online-two-iso A.button-style.blue:active,
  .online-two-iso A.button-style.blue:active:hover,
  .online-two-iso A.button-style.blue:active:focus,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:hover,
  .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:focus,
  .online-two-iso A.button-style.gray:active,
  .online-two-iso A.button-style.gray:active:hover,
  .online-two-iso A.button-style.gray:active:focus,
  .benefitheader-fixed div#followup-items a.btn:active,
  .benefitheader-fixed div#followup-items a.btn:active:hover,
  .benefitheader-fixed div#followup-items a.btn:active:focus,
  .benefitheader-fixed div#resettodefaults a.btn:active,
  .benefitheader-fixed div#resettodefaults a.btn:active:hover,
  .benefitheader-fixed div#resettodefaults a.btn:active:focus,
  .benefit-matrix .confirm-checkout-button .btn-success:active,
  .benefit-matrix .confirm-checkout-button .btn-success:active:hover,
  .benefit-matrix .confirm-checkout-button .btn-success:active:focus
  .btn.btn-info.claim-acknowledgment-print:active,
  .btn.btn-info.claim-acknowledgment-print:active:hover,
  .btn.btn-info.claim-acknowledgment-print:active:focus {
    background-color: var(--button-click-color);
    border-radius: 5px;
    border: none;
    box-shadow: none;
    color: var(--button-click-text-color);
    outline: 3px solid var(--accessibility-outline);
  }
  
  .bootstrap-iso .modal-controls .btn-warning:hover,
  .bootstrap-iso .modal-controls .btn-warning:focus,
  .online-two-iso #exit-cancel A.button-style.blue:hover,
  .online-two-iso #exit-cancel A.button-style.blue:focus,
  .online-two-iso #prevBtn A.button-style.blue:hover,
  .online-two-iso #prevBtn A.button-style.blue:focus,
  .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:hover,
  .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:focus,
  .bootstrap-iso .btn-warning.dependant-cancel-btn:hover,
  .bootstrap-iso .btn-warning.dependant-cancel-btn:focus {
    background-color: var(--button-hover-color);
  }
  
  .bootstrap-iso .modal-controls .btn-warning:active,
  .bootstrap-iso .modal-controls .btn-warning:active:hover,
  .bootstrap-iso .modal-controls .btn-warning:active:focus,
  .online-two-iso #exit-cancel A.button-style.blue:active,
  .online-two-iso #exit-cancel A.button-style.blue:active:hover,
  .online-two-iso #exit-cancel A.button-style.blue:active:focus,
  .online-two-iso #prevBtn A.button-style.blue:active,
  .online-two-iso #prevBtn A.button-style.blue:active:hover,
  .online-two-iso #prevBtn A.button-style.blue:active:focus,
  .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active,
  .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active:hover,
  .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active:focus,
  .bootstrap-iso .btn-warning.dependant-cancel-btn:active,
  .bootstrap-iso .btn-warning.dependant-cancel-btn:active:hover,
  .bootstrap-iso .btn-warning.dependant-cancel-btn:active:focus {
    background-color: var(--button-click-color);
  }
  
  /* 3d) lists */
  /* unordered lists */
  .fa-ul {
    margin-left: 0.84285714em;
  }
  .online-two-iso .modal-body#online2-global-benefit-overview-modaltemplate .tab-body UL {
    padding-left: 0;
    list-style-type: none;
  }
  .bootstrap-iso ul.fa-ul li {
    padding-left: 1em;
  }
  .bootstrap-iso ul.fa-ul li::before {
    font-family: FontAwesome;
    content: '\f111';
    font-size: 0.5rem;
    margin-left: -1em;
    padding-right: 0.5em;
    position: relative;
    bottom: 3px;
    color: var(--unordered-list-bullet-color);
  }
  .bootstrap-iso ul.fa-ul li ul.fa-ul li::before {
    content: '\f10c';
  }
  /* ordered lists */
  .bootstrap-iso ol {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: decimal;
  }
  
  /* 3e) popups */
  /* header colour */
  .online-two-iso .header-overlay,
  .online-two-iso .tab-header,
  .bootstrap-iso .modal-header {
    background-color: var(--header-overlay);
  }
  /* reset benefit intro popup to not have header overlay colour */
  .online-two-iso [class*='LineDetail'] .tab-header {
    background-color: #f2f2f2;
  }
  /* header title colour */
  #login-assistance .header-overlay #TitleResetPassword,
  .bootstrap-iso .modellersModalHeader,
  .bootstrap-iso .dependantModalHeader,
  #followup-items-overlay.online-followup-items #followup-items-title,
  .benefit-matrix .benefitheader,
  #exit-confirm h5,
  .benefitselect #allocationDialog h5,
  .active-benefits .header,
  .benefit-matrix .modal .modal-header .header,
  .online-two-iso .modal-normal .modal-header .header-text,
  .terms-conditions-cookies .cookiepolicy-header,
  .terms-conditions-cookies .terms-condtion-header {
    color: var(--header-overlay-text-color);
  }
  /* close icon */
  .online-two-iso .header-overlay A.close,
  .online-two-iso .modal-large .close,
  html#profile body#profile .profile #profile-online-2 .header-overlay A {
    background: none;
    visibility: hidden;
  }
  .online-two-iso .header-overlay A.close:after,
  .online-two-iso .modal-large .close:after,
  html#profile body#profile .profile #profile-online-2 .header-overlay A:after {
    content: '\e014';
    color: var(--header-overlay-text-color);
    font-family: 'Glyphicons Halflings';
    visibility: visible;
  }
  /* reset benefit intro close icon to be default colour after resetting header background colour */
  .online-two-iso .modal-large [class*='LineDetail'] .close:after {
    color: #666;
  }
  
  .bootstrap-iso .close,
  .bootstrap-iso .close:hover,
  .bootstrap-iso .close:focus,
  .bootstrap-iso .close:active,
  .bootstrap-iso .close:active:hover,
  .bootstrap-iso .close:active:focus,
  .online-two-iso .modal-normal .close {
    color: var(--header-overlay-text-color);
  }
  .bootstrap-iso .close:focus {
    outline: 3px solid var(--accessibility-outline);
  }
  /* position of close icon */
  .online-two-iso .modal-large .close {
    top: 0.5em;
    right: 0.5em;
  }
  .header-overlay A {
    padding: 4px 0.5em 0 0;
  }
  
  /* life event dependant add/remove popup */
  .dependantContainer .event-step-nav {
    text-align: right;
  }
  .bootstrap-iso .event-step-nav a.primary-link,
  .bootstrap-iso .event-step-nav a.secondary-link {
    margin: 0;
  }
  .dependantContainer .button-container > a:last-child {
    margin-left: 0.5em;
  }
  .bootstrap-iso .event-step-nav a {
    border-radius: 5px;
    padding: 6px 12px;
    text-transform: uppercase;
    transition: background-color 0.25s, color 0.25s;
  }
  .bootstrap-iso .event-step-nav a.secondary-link {
    background: var(--button-color);
    color: var(--button-text-color);
  }
  .bootstrap-iso .event-step-nav a.primary-link {
    background: var(--button-color);
    color: var(--button-text-color);
  }
  .bootstrap-iso .event-step-nav a.secondary-link:hover,
  .bootstrap-iso .event-step-nav a.secondary-link:focus,
  .bootstrap-iso .event-step-nav a.primary-link:hover,
  .bootstrap-iso .event-step-nav a.primary-link:focus {
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
  }
  
  /* 3f) tab selectors e.g. Manage dependants widget, benefit intro, profile etc. */
  .online-two-iso [class*='modal'] a.tab-selector-link:hover,
  .online-two-iso [class*='modal'] .tab-selector-link.active,
  html#profile body#profile .profile #profile-online-2 #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(--tab-selector-text-color);
    border-bottom: 0.5em solid var(--tab-selector-border-color);
  }
  .online-two-iso .modal-normal .tab-selector-link,
  .online-two-iso .modal-large .tab-selector-link,
  .online-two-iso .modal-normal .tab-selector-link.inactive,
  .online-two-iso .modal-large .tab-selector-link.inactive,
  html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A {
    color: var(--tab-selector-inactive-text-color);
  }
  
  /* 3g) accordions */
  /* background colour */
  .benefit-matrix .benefit-category .panel-default > .panel-heading,
  .trsdashboard .panel-default > .panel-heading,
  #benefit-overview #overviewAccordion .panel-default > .panel-heading {
    background-color: var(--panel-color);
    padding: 0;
  }
  .bootstrap-iso .panel-heading .panel-title .accordion-toggle {
    display: block;
  }
  .bootstrap-iso .panel-heading .panel-title .accordion-toggle:hover,
  .bootstrap-iso .panel-heading .panel-title .accordion-toggle:focus {
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
  }
  #benefit-overview #overviewAccordion .panel-title .accordion-toggle:focus {
    outline: 3px solid var(--accessibility-outline);
  }
  .trsdashboard .summary-header .panel-title {
    padding: 0;
  }
  .trsdashboard .panel-title .accordion-toggle {
    padding: 10px 15px;
  }
  @media only screen and (max-width:767px){
    .trsdashboard i.icon-postion {
      position: relative;
      top: -17px;
    }
  }
  
  /* expand/collapse icons */
  .bootstrap-iso .glyphicon-menu-down,
  .bootstrap-iso .glyphicon-menu-up {
    transition: all 0.25s;
    margin-right: 12px;
  }
  .bootstrap-iso .glyphicon-menu-up {
    transform: rotate(-180deg);
  }
  .bootstrap-iso .glyphicon-menu-down:before,
  .bootstrap-iso .glyphicon-menu-up:before {
    font-family: 'Glyphicons Halflings';
    content: '\e259';
  }
  /* custom accordion */
 .custom-accordion .panel-default > .panel-heading {
      background-color: var(--panel-color);
      color: white;
      padding: 0;
  }
  .custom-accordion .panel-title {
      padding: 0;
  }
  .custom-accordion .accordion-toggle {
      padding: 10px 15px;
  }
  .custom-accordion .panel-body {
      background-color: #1d7b8a;
  }
  
  /* 3h) Info icons, slider toggles and label styling */
  /* info icon color **/
  .benefit-matrix .row.title .glyphicon-info-sign-color {
    color: var(--info-icon-color);
  }
  .benefit-matrix .row.title .glyphicon-info-sign-color:hover,
  .benefit-matrix .row.title .glyphicon-info-sign-color:focus {
    color: var(--link-text-hover-color);
  }
  /* tooltip for when hovering over 'more info' icon */
  .benefit-matrix .row.title .glyphicon-info-sign-color:hover::after {
    content: 'More information on this benefit';
    font-family: 'Open Sans';
    font-size: 1rem;
    color: var(--main-text-color);
    background: #fff;
    padding: 5px;
    text-align: center;
    border: 1px solid #5E10B1;
    border-radius: 5px;
    /*position of the tooltip*/
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    width: 260px;
    z-index: 100;
    transform: translateX(-130px)
  }
  .benefit-matrix .row.title .glyphicon-info-sign-color:focus {
    outline: 3px solid var(--accessibility-outline);
  }
  
  /* slider toggle color */
  .online-two-iso .toggle-option {
    margin-top: 2px;
  }
  .online-two-iso input:checked + .slider {
    background-color: var(--slider-toggle-color);
  }
  
  /* 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;
    width: 400px;
  }
  .isLoginPageWrapper #logo {
    background-image: url(/RBS/media/default/Logo_vertical.svg);
    width: 200px;
    height: 200px;    
  }
  @media only screen and (min-width: 767px){
    .isLoginPageWrapper #logo {
      position: absolute;
      left: 0;
      top: 25px;
    }
  }
  /* centering logo on mobile view */
  @media only screen and (max-width: 750px) {
    #logo {
      width: calc(100vw - 111px);
    }
  }
  
  /* 3j) site header */
  /* remove top margin in IE */
  .lt-ie9 #header {
    margin-top: 0;
  }
  /* header colour */
  .online-two-iso #terminator #header.header-fullwidth {
    background-color: var(--site-header-color);
  }
  /* header icons profile, mailbox and logout, and main 'home' link */
  @media only screen and (min-width: 751px) {
    .online-two-iso #menu-container {
      height: auto !important;
      width: 95vw;
      margin: 0 0 10px;
    }
    .online-two-iso #menu-no-dashboard {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
    }
    .online-two-iso #menu-no-dashboard li {
      padding: 0.25em 2em;
    }
    #menu-container ul#menu-no-dashboard li a {
      color: var(--site-header-icon-color);      
    }
    #user-div a {
      color: #5e10b1;
    }
    .online-two-iso #terminator #header.header-fullwidth .menu-container.fullwidth {
      width: calc(100% + 1em + 10px);
      transform: translateX(calc(-.75em));
      background-color: #5A287D;
      padding: .25em 0
    }
  }
  @media (min-width: 767px) {
    .online-two-iso #menu-container {
      padding: 0;
    }
  }
  /* remove need assistance pull down tab */
  .online-two-iso #terminator #header.header-fullwidth .help-ico,
  .jq-dropdown .jq-dropdown-menu li:nth-child(3){
    display: none;
  }
  
  /* 3k) site footer */
  /* 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: var(--site-footer-link-color);
    font-size: 0.75rem;
    padding: 0 0 0 17px;
    margin: 9px 0;
  }
  @media only screen and (min-width: 768px) {
    /* display nav items in one line */
    #footer.footer-fullwidth nav ul#footer-links li {
      display: inline-block;
    }
    /* cookie policy link */
    #footer .optanon-toggle-display.EUFooterLink {
      display: inline-block!important;
    }
  }
  
  /* 3l) datepickers */
  /* button that launches datepicker */
  .online-two-iso .datepicker-container .input-group-btn .btn,
  /*datepicker on benefit statement */
  .bootstrap-iso .btn.online-two-datepicker {
    background-color: var(--button-color);
    border-color: #ccc;
  }
  .online-two-iso .datepicker-container .input-group-btn .btn:active:hover,
  .online-two-iso .datepicker-container .input-group-btn .btn:active:focus,
  .bootstrap-iso .uib-datepicker .btn:hover,
  .bootstrap-iso .uib-day .btn.btn-default:hover,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success {
    border-radius: 0;
  }

  /* left and right chevrons for changing month/year */
  .uib-left .glyphicon-chevron-left:before,
  .uib-right .glyphicon-chevron-right:before {
    color: #5e10b1;
  }
  
  /* today, clear and close buttons */
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info,
  .templates .uib-datepicker-popup .btn-sm.btn-info {
    background-color: #fff;
    color: #5e10b1;
    border: 1px solid currentColor;
    border-radius: 5px;
  }  
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger,
  .templates .uib-datepicker-popup .btn-sm.btn-danger {
    background-color: #fff;
    color: #5e10b1;
    border: 1px solid currentColor;
    border-top-right-radius: 5px!important;
    border-bottom-right-radius: 5px!important;
  }
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success,
  .templates .uib-datepicker-popup .btn-sm.btn-success {
    background-color: #fff;
    color: #5e10b1;
    border: 1px solid currentColor;
    border-radius: 5px;
    min-width: auto;    
  }
  .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(--button-hover-color);
    color: var(--button-hover-text-color);    
  }
  .bootstrap-iso .uib-datepicker-popup .btn-info.active,
  .templates .uib-datepicker-popup .btn-info.active,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active:hover,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active:focus,
  .templates .uib-datepicker-popup .btn-sm.btn-info:active,
  .templates .uib-datepicker-popup .btn-sm.btn-info:active:hover,
  .templates .uib-datepicker-popup .btn-sm.btn-info:active:focus,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active:hover,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active:focus,
  .templates .uib-datepicker-popup .btn-sm.btn-danger:active,
  .templates .uib-datepicker-popup .btn-sm.btn-danger:active:hover,
  .templates .uib-datepicker-popup .btn-sm.btn-danger:active:focus,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:hover,
  .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:focus,
  .templates .uib-datepicker-popup .btn-sm.btn-success:active,
  .templates .uib-datepicker-popup .btn-sm.btn-success:active:hover,
  .templates .uib-datepicker-popup .btn-sm.btn-success:active:focus {
    background-color: var(--button-click-color);
    color: var(--button-click-text-color);
    font-size: 1.1rem;
  }

  /* font-size of day to be picked */
  .bootstrap-iso .uib-datepicker .btn {
    font-size: 1.1rem;
  }
  
  /* hovering over day to be picked */
  .bootstrap-iso .uib-day .btn.btn-default:hover,
  .templates .uib-day .btn.btn-default:hover {
    background-color: var(--button-hover-color);
    border: 1px solid #ccc;
    color: var(--button-hover-text-color);
  }
  
  /* previous, current month/year, and next buttons at top of datepicker */
  .bootstrap-iso .uib-datepicker th .btn:hover,
  .bootstrap-iso .uib-daypicker th .btn:hover,
  .templates .uib-datepicker th .btn:hover,
  .templates .uib-daypicker th .btn:hover {
    background-color: var(--button-hover-color);
    border: 1px solid #ccc;
  }
  
  /* 3m) Inputs */
  input:focus,
  .bootstrap-iso .form-control:focus {
    border-color: var(--accessibility-outline);
    box-shadow: none;
    outline: 3px solid var(--accessibility-outline);
  }
  
  /* 3n) tables */
  .bootstrap-iso .table {
    color: var(--heading-color);
  }
  .bootstrap-iso .table>thead>tr>th,
  .bootstrap-iso .table>tbody>tr>th,
  .bootstrap-iso .table>tfoot>tr>th,
  .bootstrap-iso .table>thead>tr>td,
  .bootstrap-iso .table>tbody>tr>td,
  .bootstrap-iso .table>tfoot>tr>td {
    border-color: #c4c0b8;
    padding: 20px;
  }
  .bootstrap-iso .table>tbody>tr:last-child>th,
  .bootstrap-iso .table>tbody>tr:last-child>td {
    border-bottom: 2px solid #c4c0b8;
  }
  
  /*================================================================================================== 4. Login page  ==================================================================================================*/
  /* login panel styling */
  .online-two-iso.login .LoginPageContainer .panel.panel-default .panel-body{
    background: white;
    border-radius: 25px
  }
  .online-two-iso.login #uname-addon,
  .online-two-iso.login #pwd-addon {
    background-color: #f2f2f8;  
    color: var(--main-text-color);
  }
  .online-two-iso.login .LoginPageContainer .input-group .input-group-addon {
    border-radius: 10px 0 0 10px
  }
  .online-two-iso.login .LoginPageContainer .input-group input {
    border-radius: 0 10px 10px 0
  }

  /* login button */
  .online-two-iso.login .LoginPageContainer .btn.btn-primary#login {
    margin-bottom: .5em;
  }

  /* forgot password link */
  .online-two-iso.login .LoginPageContainer .additional-services {
    margin-bottom: 36px;
  }
  #wp-forgetPassword > div {
    color: var(--link-text-color);
    text-decoration: underline;
  }
  #wp-forgetPassword > div:hover {    
    color: var(--link-text-hover-color);
  }
  #wp-forgetPassword > div:focus {
    outline: 3px solid var(--accessibility-outline);
    color: var(--link-text-hover-color);    
  }
  /* forgot password overlay styling */
  #login-assistance ol {
    padding-left: 40px;
    list-style: decimal;
  }
  #login-assistance li::marker {
    color: var(--main-text-color)
  }
  /* error message colour */
  .online-two-iso.login .LoginPageContainer span#errMsg {
    color: #CF223F;
  }
  /* module headings */
  .online-two-iso.login .LoginPageContainer .login-module-zone,
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-title,
  .online-two-iso #login-module-login-page-welcome h3 {
    color: var(--text-accent-color);
  }
  /* welcome module heading */
  .online-two-iso #login-module-login-page-welcome h2 {
    font-size: 3vw;
    width: 100%;
  }
  /* hide the word 'the' in the welcome login module as it's using the site name resource string*/
  .login-modules .login-welcome-message {
    display: none;
  }  
  
  @media only screen and (max-width:767px){
    .online-two-iso.login .LoginPageContainer .panel.panel-default {
      background-color: transparent;
      border-color: transparent;
    }
  }  
  @media only screen and (min-width: 768px) {
    /* login image */
    .online-two-iso.login body {
      background-image: var(--login-image);
      background-position: 0% 35%;
    }
    /* login footer size */
    .online-two-iso.login .LoginPageContainer #terminator {
      height: 85%
    }
    .online-two-iso.login .LoginPageContainer .login-module-zone {
      min-height: 15%;
    }
    /* login module background colour */
    .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
      background-color: #f2f2f8;
      display: flex;
      align-items: center;
    }
  }
  @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;
    }
    .online-two-iso.login body {
          background-color:#FBB200;
      }
  }
  
  /****************************************** first time user page styling ************************/
  .online-two-iso .validation-caption {
    color: var(--main-text-color);
  }
  /* hide horizontal rule */
  .login-frst-time hr {
      visibility: hidden;
  }
  /* remove chevron icon on save button */
  .login-frst-time .glyphicon-chevron-right {
      display: none;
  }
  
  /****************************************** Terms page (for agreeing to terms and cookie notice) *******************************************/
  .terms-conditions-cookies .terms-conditions-cookies-header {
    padding-left: 0;
  }
  .terms-conditions-cookies .term-condition-error,
  .terms-conditions-cookies .cookie-notice,
  .terms-conditions-cookies .term-enabled {
    margin-left: 0;
  }
  .bootstrap-iso .cookie-notice.radio input,
  .bootstrap-iso .term-enabled.radio input {
    margin-top: 0;
  }
  
  .terms-conditions-cookies .term-condition-error {
    background-color: #e52321;
    color: white;
    border: none;
  }
  /* hide page header when in the modal content so title isn't duplicated */
  .terms-conditions-cookies #page-header {
    display: none;
  }
  /* list styling for terms content for popup and for main terms page in footer */
  .bootstrap-iso .main-list,
 .bootstrap-iso .main-list ol {
    margin: 0 0 0 1em;
    padding: 0;
    display: grid;
    grid-gap: .5rem;
    counter-reset: section;  
  }
  .bootstrap-iso .main-list li > ol {
    margin: .5em 0 1em 2em
  }
  .bootstrap-iso .main-list li {
    padding-left: 0.5em;
  }
  .bootstrap-iso .main-list li::marker {
    counter-increment: section;
    content: counters(section, ".")
  }
  .bootstrap-iso .main-list > li::marker {
    font-size: 24px;
    font-weight: 500;
    color: var(--heading-color);
  }
  .bootstrap-iso .main-list ul li::marker {
    display: none;
  }
  
  /*================================================================================================== 5. Home page  ==================================================================================================*/
  /* remove show carousel button */
  #home-online-three .carousel-show {
    display: none;
  }
  @media only screen and (min-width:768px){
    #home,
    .dashboard-page-container {
      background: #f2f2f8;
    }
  }
  /* margin between main element and footer */
  #main.home {
    margin-bottom: 1.5em;
  }
  /* general grid and module styling */
  #home-online-three #home-integrated .modules-right-side.grid-container {
    grid-gap: 1.5em;
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    padding: 0;
  }
  
  /* greeting, module and carousel heading colour */
  #home-online-three .dashboard-controls #greeting-message,
  #home-online-three #home-integrated .module-content-header-container h3.module-content-header {
    color: var(--homepage-heading-color);
  }
  #home-online-three #home-integrated .module-content-header-container h3.module-content-header {
    font-size: 1.75rem;
  }
  
  /* make background colour of grid container and modules the same */
  #home-online-three #home-integrated .modules-right-side.grid-container,
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
    background-color: #f2f2f8;
  }
  
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content:focus {
    outline: 1px solid var(--accessibility-outline);
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content {
    padding: 1rem 2rem;
  }
  /* modules styling */
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content,
  .bootstrap-iso .carousel.home-module-integrated {
    background: white;
    border: none;
    border-radius: 8px;
  }
  /* hide module more info icon */
  #home-online-three #home-integrated .module-content-header-container .online-three-module-popover-control {
    display: none;
  }
  /* module content text colour */
  #home-online-three #home-integrated p,
  .event-summary,
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light {
    color: var(--main-text-color);
  }
  /* make my pension, NatWest Group offers and NatWest Group cars buttons auto width */
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default {
    width:max-content;
  }  
  
  /* module icon styling*/
  .bootstrap-iso .homepage-module-container {    
    height: 120px;
    margin-bottom: 1em;    
  }
  .bootstrap-iso .homepage-module-container img {
    max-height: 120px
  }

  /* reodering content of benefit statement module so intro text appears before graph */
  .benefit-statement-copy.module-copy {
    display: flex;
    flex-direction: column;
  }
  .benefit-statement-copy.module-copy > :first-child {
    order: 1;
  }
  .benefit-statement-copy.module-copy > :nth-child(2) {
    order: 3;
  }
  .benefit-statement-copy.module-copy > :nth-child(3) {
    order: 2;
  }
  .benefit-statement-copy.module-copy > :last-child {
    order: 4;
  }
  
  /*** 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(--carousel-text-color);
    font-size: 1.2em;
  }
  /* carousel slide content headings */
  .home-module-integrated .content h2,
  .home-module-integrated .content h3 {
    margin-top: 0;
    color: var(--carousel-heading-color);
  }
  /* carousel content buttons */
  .home-module-integrated #slider .sliderContainer .slide-content .content .btn {
    font-size: 0.75rem;
  }
  /* adjust width of carousel thumbnails */
  .home-module-integrated #slider .thumb .rect {
    width: 190px;
  }
  /* background of thumbnail container */
  .home-module-integrated #slider .thumb {
    background: #ededed;
  }
  
  @media only screen and (min-width: 768px) {
    /* benefit statement payslip data item styling */
    #item-0,
    #item-1,
    #item-2 {
      width: calc(100% - 2em);
      margin-left: 1em;
      text-align: left;
      font-weight: bold;
    }
    .payslip-item-amount {
      float: right;
    }
    #item-1 {
      border-bottom: 1px solid #333;
    }
  }

  /* arranging open events horizontally in enrolment module */
  @media only screen and (min-width: 1400px){
    .event-summary {
      display: flex;
      justify-content: space-around;
    }
  }
  
  /*================================================================================================== 6. Benefit overview  ==================================================================================================*/
  /* hide heading and filter */
  #benefit-overview .benefit-overview-title,
  #benefit-overview .filter.overview-component {
      display:none;
  }
  
  /* remove benefit icons */
  #benefit-overview .summaryImage {
      display: none;
  }
  
  /* summary text margin */
  #benefit-overview .summaries P {
      margin-bottom: 10px;
  }
  
  /* know more buttons */
  #benefit-overview .know-more-link .aria {
    display: none;
  }
  .bootstrap-iso#benefit-overview .btn.know-more-link {
    background-color: var(--button-color);
    border: none;
  }
  .bootstrap-iso#benefit-overview .know-more-link A {
    color: var(--button-text-color);
    padding: 0;
  }
  .bootstrap-iso#benefit-overview .btn.know-more-link:hover,
  .bootstrap-iso#benefit-overview .btn.know-more-link:focus {
    background-color: var(--button-hover-color);
  }
  .bootstrap-iso#benefit-overview .know-more-link A:hover,
  .bootstrap-iso#benefit-overview .know-more-link A:focus {
    color: var(--button-hover-text-color);
  }
  .bootstrap-iso#benefit-overview .btn.know-more-link:active,
  .bootstrap-iso#benefit-overview .btn.know-more-link:active:hover,
  .bootstrap-iso#benefit-overview .btn.know-more-link:active:focus {
    background-color: var(--button-click-color);
  }
  .bootstrap-iso#benefit-overview .know-more-link A:active,
  .bootstrap-iso#benefit-overview .know-more-link A:active:hover,
  .bootstrap-iso#benefit-overview .know-more-link A:active:focus {
    color: var(--button-click-text-color);
  }
  
  /*================================================================================================== 7. Benefit statement  ==================================================================================================*/
  .benefit-matrix .benefitdate .data-addon {
    color: var(--main-text-color);
  }
  /* view follow up container colour */
  .bootstrap-iso .alert-info.hdf-followup {
    background-color: var(--follow-up-panel-color);
    color: white;
  }
  /****************************************** benefit statement view follow up popup *******************************************/
  .benefit-matrix .modal .hdf-followup {
    padding: 0;
  }  
  .benefit-matrix .modal .hdffollowup-intro {
    color: var(--heading-color);
  }
  
  /*================================================================================================== 8. Benefit matrix  ==================================================================================================*/  
  /* all numerical values */
  .benefit-matrix .font-youpay-color,
  .benefit-matrix .glyphicon-play-color {
    color: var(--main-text-color);
  }
  
  /* modellers and tools section */
  .benefit-matrix .benefitheader.benefitheader-border {
    border-radius: 5px;
    border-color: transparent;
    color: #000;
    background-color: #fcb900;
  }
  .benefit-matrix .benefitheader.benefitheader-border:hover,
  .benefit-matrix .benefitheader.benefitheader-border:focus {
    background-color: #429448;
    color: #fff;
  }
  /* change icon font family that's used */
  .bootstrap-iso.benefit-matrix .glyphicon-gift:before,
  .bootstrap-iso.benefit-matrix .glyphicon-cog:before,
  .bootstrap-iso.benefit-matrix .glyphicon-refresh:before {
    font-family: FontAwesome;
  }
  /* modellers and tools widget */
  .bootstrap-iso.benefit-matrix .glyphicon-cog:before {
    content: '\f085';
  }
  /* manage dependants widget */
  .bootstrap-iso.benefit-matrix .glyphicon-gift:before {
    content: '\f0c0';
  }
  /* adding it up widget */
  .bootstrap-iso.benefit-matrix .glyphicon-refresh:before {
    content: '\f1ec';
  }
  
  /* confirm choices button */
  .benefitheader-fixed div#followup-items a.btn {
    -webkit-animation: shadow-pulse 2s infinite;
    animation: shadow-pulse 2s infinite;
    background-color: #fcb900;
    border-radius: 0;
    color: #000;
  }
  .benefitheader-fixed div#followup-items a.btn:hover {
    background-color: #429448;
    border-radius: 0;
    color: #fff;
    font-size: 1.1rem;
  }
  .benefitheader-fixed div#followup-items a.btn:focus {
    background-color: #429448;
    border-radius: 0;
    color: #fff;
    font-size: 1.1rem;
  }
  .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: #429448;
    border-radius: 0;
    color: #fff;
    font-size: 1.1rem;
  }
  .benefitheader-fixed a.btn .glyphicon {
    padding-right: .25em
  }
  /* hide reset to default button */
  .benefitheader-fixed div#resettodefaults a.btn {
    display: none;
  }
  
  /* monthly annual pay toggle styling
  monthly button active */
  .bootstrap-iso .btn-warning.active.btn-perpay {
    background-color: var(--button-click-color);
    border-color: var(--button-click-color);
    color: var(--button-click-text-color);
  }
  /* annual button active */
  .bootstrap-iso .btn-warning.active.btn-peranual {
    background-color: var(--button-click-color);
    border-color: var(--button-click-color);
  }
  /*monthly button inactive */
  .bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle) {
    border-color: var(--button-click-color);
  }
  /*annual button inactive */
  .bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child) {
    border-color: var(--button-click-color);
  }
  /* hover and focus states of toggle */
  .bootstrap-iso .btn-warning.active.btn-perpay:hover,
  .bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle):hover,
  .bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle):focus,
  .bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child):hover,
  .bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child):focus {
    border: 1px solid var(--button-click-color);
    border-radius: 0;
  }
  /* payslip summary section */
  .benefit-matrix .totalcost {
    border-color: #333;
    border-radius: 5px;
  }
  .benefit-matrix .totalcost [class*="col-"]{
    text-align: center;
  }
  /* show 'benefits you can change' description text */
  .benefit-matrix .active-category-desc {
    display: block;
  }
  
  /* accordions */
  .benefit-matrix .benefit-category .panel-default > .panel-heading,
  .benefit-matrix .benefit-category .panel-title {
    padding: 0;
  }
  .benefit-matrix .benefit-category .panel-title .accordion-toggle {
    display: block;
    padding: 10px;
  }
  .benefit-matrix .benefit-category .panel-title .accordion-toggle:focus {
    outline: 3px solid var(--accessibility-outline);
  }
  /* benefits you can choose*/
  .benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle {
    background: #429448;
  }
  .benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle:hover,
  .benefit-matrix .containers > div > div.benefit-category:first-child .panel-default > .panel-heading .panel-title .accordion-toggle:focus {
    background-color: rgba(66, 148, 72, 0.75);
  }
  /* benefits you many be able to choose */
  .benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading .panel-title .accordion-toggle {
    background: #fcb900;
  }
  .benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading .panel-title .accordion-toggle:hover,
  .benefit-matrix .containers > div > div.benefit-category:nth-child(2) .panel-default > .panel-heading .panel-title .accordion-toggle:focus {
    background-color: rgba(252, 185, 0, 0.75);
  }
  /* benefits you cannot choose */
  .benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading .panel-title .accordion-toggle {
    background: #cf223f;
  }
  .benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading .panel-title .accordion-toggle:hover,
  .benefit-matrix .containers > div > div.benefit-category:nth-last-child(2):not(:first-child) .panel-default > .panel-heading .panel-title .accordion-toggle:focus {
    background-color: rgba(207, 34, 63, 0.75);
  }
  /* 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;
  }
  .benefit-matrix .benefit-category .benefitline {  
    border-radius: 5px;
    padding-bottom: 0;
  }
  @media only screen and (min-width: 768px){
    .benefit-matrix .benefit-category .benefitline {
      display: flex
    }
  }
  
  /* selected benefit tick mark styling */
  .benefit-selected-box {
    /*this position of the parent is important to the position of the child*/
    position: relative;  
    transition: all 0.5s ease;
  }
  .benefit-selected-box .benefitline {
    border: 2px solid var(--benefit-selection-elected-box-highlight);
  }
  .benefit-selected-box .benefitline::before {  
    /*checkbox container styling*/
    height: 30px;
    width: 30px;  
    display: -ms-flexbox;
    display: flex;  
    justify-content: center;
    align-items: center;
    background: var(--benefit-selection-elected-box-highlight);  
    font-family: FontAwesome;
    content: '\f00c';  
    font-size: inherit;
    color: var(--benefit-selected-tick-mark);
    /*position of the checkbox to the relative container*/
    position: absolute;
    top: 0px;
    /*change position to left or right and specify offset*/
    right: 5px;
    z-index: 1;
    border-top-right-radius: 5px;
  }
  /* EOI background colours */
  .benefit-matrix .currentEOI {
    background-color: #F2EAF9;
  }
  .benefit-matrix .pendingEOI {
    background-color: #FFEAE6;
  }
  /*Offset the line name from the left*/
  @media(max-width:767px) {
    .benefit-selected-box [class*="BenefitIntro"] {
      padding-left: 40px;
    }
    .benefit-selected-box .benefitline::before {
      /*On mobile this position could be left or right*/
      right: 0;
    }
  }
  @media(min-width:992px) {
    .benefit-selected-box .benefitline::before {
      height: 100%;
      border-bottom-right-radius: 5px;
    }
  }
  
  /* line group text colour */
  .benefit-matrix .group-default {
    color: var(--heading-color);
  }
  
  /* line name */
  .benefit-matrix .lineheader > a:link {
    color: var(--link-text-color);
    font-weight: 700;
  }
  .benefit-matrix .lineheader > a:link:hover,
  .benefit-matrix .lineheader > a:link:focus {
    color: var(--link-text-hover-color);
  }
  .benefit-matrix .lineheader > a:link:active,
  .benefit-matrix .lineheader > a:link:active:hover,
  .benefit-matrix .lineheader > a:link:active:focus {
    color: var(--link-text-click-color);
  }
  .benefit-matrix .lineheader > a:link:focus,
  .benefit-matrix .lineheader > a:link:active:focus {
    outline: 3px solid var(--accessibility-outline);
  }
  .benefit-matrix .benefit-menu {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  /* benefit icon container */
  @media only screen and (min-width: 768px){
    .benefit-matrix .benefit-menu .img {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }
  /* Line sets - add spacing between lines in the line set
  display the line name on a separate line to the plan/coverage */
  .benefit-matrix .lineset-linename + span {
    display: block;
    padding-left: .65em
  }
  .row.title + .row > div > div:not(:last-child) {
    margin-bottom: 1em
  }
  /* change play icon next to selected benefit option */
  .benefit-matrix .glyphicon-play::before {
    font-family: FontAwesome;
    content: '\f111';
    font-size: .75em;
    font-weight: bold;
    color: var(--main-text-color);
    display: inline-block;
    position: relative;
    top: -.6em;
  }
  
  /* select buttons */
  .benefit-matrix .row.benefitline .btn-success,
  .benefit-matrix .row.benefitline .btn-success:hover,
  .benefit-matrix .row.benefitline .btn-success:focus,
  .benefit-matrix .row.benefitline .btn-success:active:hover {
    font-size: 1.1rem;
    min-width: 75%;
    text-transform: none;
  }
  
  /* approved dependant and beneficiary listing text colour */
  .benefit-matrix h4[tbs-translate='Enrollment.Step3.WhoIsCovered'],
  .benefit-matrix h5[tbs-translate='Enrollment.Online2.BeneficiaryAllocations'] {
    color: var(--heading-color);
  }
  .benefit-matrix h5[tbs-translate='Enrollment.Online2.BeneficiaryAllocations'] {
    font-size: 1.125rem;
  }
  .dependent-approved {
    color: var(--main-text-color);
  }
  
  /* hide 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;
  }
  
  /* color of text in enrolment complete banner, and coverage as at date text */
  .bootstrap-iso .completemessage .text-success,
  .benefit-matrix .benefitheader.asatdate span {
    color: var(--main-text-color);
  }
  /* styling enrolment complete banner */
  .bootstrap-iso .completemessage .alert-warning {
    background-color: #fff;
    border-color: #429448;
  }
  .bootstrap-iso .alert-warning .section-complete {
    display: flex;
    align-items: center;
    gap: .5em;
  }
  .bootstrap-iso .alert-warning .section-complete::before {
    content: '\f058';
    font-family: FontAwesome;
    font-size: 1.25em;
    color: #429448;
  }
  /* view follow up item data button */
  .benefit-matrix .btn-followup-view {
    font-size: 1rem;
    border: 1px solid #fff
  }
  .benefit-matrix .btn-followup-view:hover,
  .benefit-matrix .btn-followup-view:focus {
    border: 1px solid #fff
  }
  /* hide more info icon on Shopping Card Admin Charge line until the benefit is added to the shopping card line set */
  .benefit-matrix .BenefitIntro_6ad8878d-b659-4774-a35e-8c7a23d6db70 .glyphicon-info-sign-color {
    display: none;
  }
  
  /*================================================================================================== 9. Benefit selection  ==================================================================================================*/
  /* continue button */
  .benefitselect .continue,
  .benefitselect .continue:hover,
  .benefitselect .continue:focus,
  .benefitselect .continue:active,
  .benefitselect .continue:active:hover,
  .benefitselect .continue:active:focus {
    border-radius: 0;
  }
  /* line name */
  .benefitselect .line-name {
    color: var(--heading-color);
  }
  /* more info icon */
  .benefitselect .line-benefit-intro .glyphicon-info-sign-color {
    color: var(--info-icon-color);
  }
  
  /* 'Currently Selected' heading */
  .benefitselect .header-selected {
   color: var(--heading-color);
  }
  
  /* currently selected box */
  .benefitselect .in-Cart .you-pay > p:nth-of-type(2) {
    display: none;
  }
  
  /* select buttons */
  .online-two-iso .benefitselect A.button-style.green {
    background-color: var(--button-color);
    border-radius: 5px;
    color: var(--button-text-color);
    font-size: 1.1rem;
  }
  .online-two-iso .benefitselect A.button-style.green:hover {
    background-color: var(--button-hover-color);
    box-shadow: none;
    color: var(--button-hover-text-color);
  }
  .online-two-iso .benefitselect A.button-style.green:focus {
    background-color: var(--button-hover-color);
    box-shadow: none;
    color: var(--button-hover-text-color);
  }
  .online-two-iso .benefitselect A.button-style.green:active,
  .online-two-iso .benefitselect A.button-style.green:active:hover,
  .online-two-iso .benefitselect A.button-style.green:active:focus {
    background-color: var(--button-click-color);
    color: var(--button-click-text-color);
  }
  /* add 'tick' icon next to selected option */
  .online-two-iso .benefitselect .sel A.button-style.green::before {
    content: '\f00c';
    font-family: FontAwesome;
    display: inline-block;
    padding-right: .25em;
  }
  
  /* remove division elements between benefits */
  .division {
    display: none;
  }
  
  /* benefit description row colour */
  .benefitselect .line-benefit-intro .line-description .row {
    background: white;
  }
  /* remove full benefit details link */
  .bootstrap-iso.benefitselect .more-info {
    display: none;
  }
  /* remove background image shadow */
  .box-border-bg {
    background: none;
  }
  
  /*currently selected box text colour */
  .benefitselect .content-you-chose,
  .benefitselect .content-you-chose p,
  .in-Cart .you-chose .selected-plan,
  SPAN.green-number,
  .benefitselect .in-Cart .you-pay H3,
  .benefitselect .in-Cart .you-pay P SPAN.green-number {
    color: var(--main-text-color);
  }
  /* display for pending EOI */
  [ng-if="l.isPendingEOI()"] .cost-beforeleft,
  [ng-if="l.isPendingEOI()"] .cost-left,
  [ng-if="l.isPendingEOI()"] .cost-right {
    width: auto;
    margin: 0;
  }
  [ng-if="l.isPendingEOI()"] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  [ng-if="l.isPendingEOI()"] .cost-beforeleft {
    grid-column: 1 / 2;
  }
  [ng-if="l.isPendingEOI()"] > :nth-child(2),
  [ng-if="l.isPendingEOI()"] .cost-right {
    grid-column: 1 / -1;
  }
  /* EOI background colours */
  [ng-if="l.isPendingEOI()"] .cost-beforeleft,
  [ng-if="l.isPendingEOI()"] .cost-left {
    background-color: #FFEAE6;
  }
  [ng-if="l.isPendingEOI()"] .cost-right {
    background-color: #F2EAF9;
  }
  [ng-if="l.isPendingEOI()"].in-Cart .cost-right .rightsection {
    text-align: right;
  }
  /* EOI pending asterisk */
  .benefitselect .alignleft .pending-note {
    display: inline;
    float: none;
  }
  /* hide eoi/deferral pending note text */
  .benefitselect .pending-note {
    display: none;
  }
  /* available products heading */
  .benefitselect .products-header H4 {
    color: var(--heading-color);
  }
  /* selected plan border box */
  .benefitselect .products .box-border.sel,
  .benefitselect .products .box-border.sel .header {
    background: var(--benefit-selection-elected-box-highlight);
  }
  .benefitselect .products .box-border.sel .header {
    padding-left: 0;
    font-size: 1rem;
    font-weight: bold;
  }
  /* hide provider finder and prescription finder */
  .available-options .links-group.four-links {
    display: none;
  }
  /* selected coverage text colour */
  .option-credit-health .option.sel {
    color: var(--main-text-color);
  }
  /* remove see also icons */
  .benefitselect .benefit-menu .img {
      display: none;
  }
  /* see also link colour */
  .benefitselect .linename > a:link {
    color: var(--link-text-color);
  }
  .benefitselect .linename > a:hover {
    color: var(--link-text-hover-color);
  }
  .benefitselect .linename > a:focus {
    color: var(--link-text-hover-color);
  }
  .benefitselect .linename > a:active,
  .benefitselect .linename > a:active:hover,
  .benefitselect .linename > a:active:focus {
    color: var(--link-text-click-color);
  }
  /* follow up item inline styling */
  /* banner */
  .benefitselect .followup-required.alert-warning {
    background-color: #fff;
    border-color: #fcb900;
  }
  .benefitselect .followup-required-sign::before {
    font-family: FontAwesome;
    content: '\f06a';
    color: #cf223f;
  }
  /* remove duplicate 'outstanding items' message */
  .benefitselect .followup-collect-info {
    display: none;
  }
  /* removing padding for follow up items labels to ensure no extra space between label and 'required' asterisk */
  .online-two-iso label[for*="followup-text-input-"] {
    padding-right: 0;
  }
/* this grid code allows for a better display of plan names and plan descriptions */
@media only screen and (min-width:768px) {
  .benefitselect .content-box-border {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .benefitselect .content-box-border table {
    grid-column: 1 / -1;
  }
  .benefitselect .content-box-border .product-info,
  .benefitselect .content-box-border .content-option-credit-health {
    width: auto
  }
}
  
  /*================================================================================================== 10. Profile  ==================================================================================================*/
  /* intro text on Personal tab */
  .form-data #personalTabIntro p {
    display: block;
  }
  /* headings */
  .online-two-iso P.sectionTitle,
  html#profile body#profile .profile #profile-online-2 #dependantsTab P.full-name,
  html#profile body#profile .profile #profile-online-2 #beneficiariesTab P.full-name {
    color: var(--heading-color);
  }
  /* buttons */
  html#profile body#profile #profile-online-2 .button-style.green,
  html#profile body#profile #profile-online-2 .button-style.orange,
  html#profile body#profile #profile-online-2 .button-style.blue {
    background-color: var(--button-color);
    border-radius: 5px;
    color: var(--button-text-color);
  }
  html#profile body#profile #profile-online-2 .button-style.green:hover,
  html#profile body#profile #profile-online-2 .button-style.green:focus,
  html#profile body#profile #profile-online-2 .button-style.orange:hover,
  html#profile body#profile #profile-online-2 .button-style.orange:focus,
  html#profile body#profile #profile-online-2 .button-style.blue:hover,
  html#profile body#profile #profile-online-2 .button-style.blue:focus {
    background-color: var(--button-hover-color);
    box-shadow: none;
    color: var(--button-hover-text-color);
  }
  html#profile body#profile #profile-online-2 .button-style.green:active,
  html#profile body#profile #profile-online-2 .button-style.green:active:hover,
  html#profile body#profile #profile-online-2 .button-style.green:active:focus,
  html#profile body#profile #profile-online-2 .button-style.orange:active,
  html#profile body#profile #profile-online-2 .button-style.orange:active:hover,
  html#profile body#profile #profile-online-2 .button-style.orange:active:focus,
  html#profile body#profile #profile-online-2 .button-style.blue:active,
  html#profile body#profile #profile-online-2 .button-style.blue:active:hover,
  html#profile body#profile #profile-online-2 .button-style.blue:active:focus {
    background-color: var(--button-click-color);
    color: var(--button-click-text-color);
  }
  /* resetting the country selector dropdown when editing address info */
  .bootstrap-iso .dropdown-toggle:before {
    background-color: transparent;
  }
  .bootstrap-iso .dropdown-toggle,
  .bootstrap-iso .dropdown-toggle:hover,
  .bootstrap-iso .dropdown-toggle:focus {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    color: #333;
    text-transform: none;
    text-align: left;
  }
  .bootstrap-iso .dropdown-toggle:focus {
    outline: none;
    box-shadow: 0 0 6px var(--accessibility-outline);
  }
  
  /* header overlay for adding/editing/deleting dependants/beneficiaries */
  html#profile body#profile .profile #profile-online-2 .header-overlay H5 {
    font-weight: 500;
  }
  
  /* dependants tab styling */
  html#profile body#profile #profile-online-2 #dependantsTab .left-taboff .sectionTitledimmedLeft,
  html#profile body#profile #profile-online-2 #dependantsTab .right-taboff .sectionTitledimmed {
    color: var(--tab-selector-inactive-text-color);
  }
  
  html#profile body#profile #profile-online-2 #dependantsTab .left-tabon .sectionTitle {
    color: var(--tab-selector-text-color);
    border-bottom: 0.5em solid var(--tab-selector-text-color);
    padding-bottom: 0.25em;
  }
  html#profile body#profile #profile-online-2 #dependantsTab .right-tabon {
    border-bottom: 0.5em solid var(--tab-selector-text-color);
  }
  html#profile body#profile #profile-online-2 #dependantsTab .right-tabon .sectionTitledimmed {
    color: var(--tab-selector-text-color);
  }
  
  /* beneficiaries tab styling */
  html#profile body#profile #profile-online-2 #beneficiariesTab .left-taboff .sectionTitledimmedLeft,
  html#profile body#profile #profile-online-2 #beneficiariesTab .right-taboff .sectionTitledimmed {
    color: var(--tab-selector-inactive-text-color);
  }
  
  html#profile body#profile #profile-online-2 #beneficiariesTab .left-tabon .sectionTitle,
  html#profile body#profile #profile-online-2 #beneficiariesTab .right-tabon .sectionTitle {
    color: var(--tab-selector-text-color);
    border-bottom: 0.5em solid var(--tab-selector-text-color);
    padding-bottom: 0.25em;
  }
  /* beneficiaries edit allocation popup */
  html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label {
    background-color: var(--button-color);
    border: 1px solid white;
    border-radius: 0;
    color: var(--button-text-color);
    font-size: 1rem;
    font-weight: normal;
    padding: 6px 12px;
    text-transform: uppercase;
  }
  html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label.active {
    background-color: var(--button-click-color);
    box-shadow: none;
    color: var(--button-click-text-color);
  }
  html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label:hover,
  html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label:focus {
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
  }
  
  /* security tab styling */
  .left-taboff,
  .right-taboff {
    background: none;
  }
  html#profile body#profile #profile-online-2 #securityTab .left-taboff .sectionTitledimmedLeft,
  html#profile body#profile #profile-online-2 #securityTab .right-taboff .sectionTitledimmed {
    color: var(--tab-selector-inactive-text-color);
  }
  html#profile body#profile #profile-online-2 #securityTab .left-tabon .sectionTitle,
  html#profile body#profile #profile-online-2 #securityTab .right-tabon .sectionTitle {
    color: var(--tab-selector-text-color);
    border-bottom: 0.5em solid var(--tab-selector-text-color);
    padding-bottom: 0.25em;
  }
  
  /* preferences toggle button */
  #communicationPreferencesTab .ui-buttonset label {
    border: 1px solid #ccc;
  }
  #communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text {
    background-color: var(--slider-toggle-color);
    background-image: none;
  }
  #communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text:before {
    font-family: FontAwesome;
    content: '\f00c';
    position: relative;
    left: -0.5em;
  }
  
  /* ensuring that the marketing preferences toggles are in alignment */
  @media only screen and (min-width: 992px) {
    #communicationPreferencesTab p#marketingHeader + div.row {
      display: flex;
    }
    html#profile body#profile .profile #profile-online-2 #profilecontainer #communicationPreferencesTab .content-box-border .row .grid-cell {
      display: flex;
      flex-wrap: wrap;
    }
    html#profile body#profile .profile #profile-online-2 #profilecontainer #communicationPreferencesTab .content-box-border .row .grid-cell .ui-buttonset {
      align-self: flex-end;
    }
  }
  
  /*================================================================================================== Mailbox  ==================================================================================================*/
  .k-state-selected {
    background-color: var(--selected-email-color) !important;
  }
  /* save/delete popup modal */
  div.tbs-modal h2 {
    color: white;
    text-transform: uppercase;
  }
  
  /*================================================================================================== 11. App registration  ==================================================================================================*/
  #access-the-app .qr-background {
    background: var(--button-hover-color);
  }
  #access-the-app ol li {
    line-height: 1.75
  }
  
  /*================================================================================================== 12. TRS  ==================================================================================================*/
  /* homepage module styling */
  /*NOTE: THIS IS NOT REQUIRED IF USING ANY OF THE CHART TYPES OTHER THAN RAINBOW */
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .trs-statement-intro {
    margin-bottom: -70px
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .highcharts-background {
    fill: transparent;
  }
  .trsdashboard .summary-myreward {
    visibility: hidden;
  }
  .trsdashboard .summarystatementdate {
    color: var(--main-text-color);
    text-align: center;
    font-size: 2rem;
  }
  
  /* separate chart title from legend */
  .trsdashboard .highcharts-title {
    transform: translateY(.1em);
  }
  
  /* alignment of data group chart total between pre and post text */
  .textareaChartTab .LineGroupTotal {
    display: inline-block;
  }
  
  /* vertical table styling */
  .trsdashboard .table,
  .trsdashboard .table > thead > tr > th,
  .trsdashboard .table tbody tr td {
    border: none;
  }
  .trsdashboard .table {
    border: 1px solid #ccc
  }
  .trsdashboard .table > thead > tr > th {
    background-color: var(--panel-color);
    color: var(--panel-text-color);
  }
  .trsdashboard .table > thead > tr > th,
  .trsdashboard .table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #ccc
  }
  
  /* consistent font-size as rest of the TRS */
  .trsdashboard .table,
  .trsdashboard .table tbody tr td {
    font-size: 1rem;
  }
  
  /* ensuring that Default components and those with Vertical Tables are aligned on the left and right consistently */
  @media only screen and (min-width: 768px){
    .chart_line.row {
      margin-left: 15px;
      width: calc(100% - 30px)
    }
    .content-name {
      padding-left: 15px
    }
    .tab-pane .table-responsive {
      padding: 0 15px
    }
  }
  
  /*================================================================================================== 13. Specific popups  ==================================================================================================*/
  /* 13a) forgot password */
  /* progress bar colour */
  .bootstrap-iso .progress-bar-success {
    background-color: var(--progress-bar-color);
  }
  #login-assistance .steps-header {
      color: var(--main-text-color);
  }
  
  /* 13b) modellers and tools */
  /* overlay header */
  .bootstrap-iso .modellersModalHeader {
    margin-top: 7px;
  }
  .modal-normal ul.modeller-links {
    padding-left: 1.25em;
    width: 100%;
  }
  /* selected tab*/
  .modeller-links li a.checked,
  .modeller-links li a.unchecked:hover {
    background-color: transparent;
    border-bottom: 0.5em solid var(--tab-selector-border-color);
    color: var(--tab-selector-text-color);
  }
  /* unselected tab */
  .modeller-links li a.unchecked {
    background-color: transparent;
    color: var(--tab-selector-inactive-text-color);
  }
  /* text color */
  .modeller-container .row-header,
  .modeller-container .row-summary {
    color: var(--main-text-color);
  }
  /* tax code input */
  /* model button */
  input.modeller-line-bottom {
    background-color: var(--button-color);
    border-radius: 5px;
    color: var(--button-text-color);
    font-weight: normal;
    text-transform: uppercase;
  }
  input.modeller-line-bottom:hover {
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
  }
  input.modeller-line-bottom:focus {
    background-color: var(--button-hover-color);
    box-shadow: none;
    color: var(--button-hover-text-color);
  }
  input.modeller-line-bottom:active,
  input.modeller-line-bottom:active:hover,
  input.modeller-line-bottom:active:focus {
    background-color: var(--button-click-color);
    box-shadow: none;
    color: var(--button-click-text-color);
  }
  
  /* 13c) manage dependants */
  /* overlay header */
  .bootstrap-iso .dependantModalHeader {
    margin-top: 7px;
  }
  .bootstrap-iso .dependantContainer .tab-header {
    display: none;
  }
  /* remove intro text created from resource string */
  .dependantIntroText {
    display: none;
  }
  
  #allocationDialog .add-beneficiary {
    color: var(--link-text-color);
  }
  #allocationDialog .add-beneficiary:hover {
    color: var(--link-text-hover-color);
  }
  #allocationDialog .add-beneficiary:focus {
    color: var(--link-text-hover-color);
  }
  #allocationDialog .add-beneficiary:active,
  #allocationDialog .add-beneficiary:active:hover,
  #allocationDialog .add-beneficiary:active:focus {
    color: var(--link-text-click-color);
  }
  
  /* add, edit and remove links */
  .dependant-list-top a.dependant-add-link,
  .dependant-list a.dependant-edit,
  .dependant-list a.dependant-remove {
    color: var(--link-text-color);
  }
  .dependant-list .dependant-add-item a.dependant-edit,
  .dependant-list .dependant-add-item a.dependant-remove {
    color: var(--button-text-color);
    padding: 6px 12px;
  }
  .dependant-list .dependant-add-item a.dependant-edit {
    background-color: var(--button-color);
  }
  .dependant-list .dependant-add-item a.dependant-remove {
    background-color: var(--button-color-alternate);
    color: var(--button-text-color-alternate);
  }
  .dependant-list-top a.dependant-add-link:hover,
  .dependant-list a.dependant-edit:hover,
  .dependant-list a.dependant-remove:hover {
    color: var(--link-text-hover-color);
  }
  .dependant-list .dependant-add-item a.dependant-edit:hover,
  .dependant-list .dependant-add-item a.dependant-remove:hover {
    background-color: var(--button-hover-color);
    color: var(--button-text-color);
  }
  .dependant-list-top a.dependant-add-link:focus,
  .dependant-list a.dependant-edit:focus,
  .dependant-list a.dependant-remove:focus {
    color: var(--link-text-hover-color);
  }
  .dependant-list .dependant-add-item a.dependant-edit:focus,
  .dependant-list .dependant-add-item a.dependant-remove:focus {
    background-color: var(--button-hover-color);
    color: var(--button-text-color);
  }
  .dependant-list-top a.dependant-add-link:active,
  .dependant-list-top a.dependant-add-link:active:hover,
  .dependant-list-top a.dependant-add-link:active:focus,
  .dependant-list a.dependant-edit:active,
  .dependant-list a.dependant-edit:active:hover,
  .dependant-list a.dependant-edit:active:focus,
  .dependant-list a.dependant-remove:active,
  .dependant-list a.dependant-remove:active:hover,
  .dependant-list a.dependant-remove:active:focus {
    color: var(--link-text-click-color);
  }
  .dependant-list .dependant-add-item a.dependant-edit:active,
  .dependant-list .dependant-add-item a.dependant-edit:active:hover,
  .dependant-list .dependant-add-item a.dependant-edit:active:focus,
  .dependant-list .dependant-add-item a.dependant-remove:active,
  .dependant-list .dependant-add-item a.dependant-remove:active:hover,
  .dependant-list .dependant-add-item a.dependant-remove:active:focus {
    background-color: var(--button-click-color);
    color: var(--button-text-color);
  }
  /* costs displayed on Dependants Covered tab */
  .benefit-matrix .employee-cost .cost-number {
    color: var(--main-text-color);
 }
  
  /* table header colour when removing dependants that are attached to cover */
  .table.reverse-header thead > tr > th {
    background-color: var(--button-color);
  }
  
  /*swap the order of the save and close buttons on dependant coverage summary */
  .coverage-bottom .dependant-accept-btn,
  .coverage-bottom .dependant-cancel-btn {
    position: relative;
  }
  .coverage-bottom .dependant-accept-btn {
    left: 4.5em;
 }
  .coverage-bottom .dependant-cancel-btn {
    right: 5em;
  }
  /* remove 'add to all benefits' toggle */
  .dependant-list .dependant-cell.add.is-auto-add {
    display: none;
  }
  
  /* 13d) benefit matrix follow up items  */
  /* overlay header */
  #followup-items-overlay.online-followup-items #followup-items-title {
    background-color: var(--header-overlay);
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
  }
  /* close icon */
  #followup-items-overlay a.close {
    top: 2px;
  }
  /* oustanding items complete icon */
  .online-two-iso .success-icon {
    color: var(--success-icon-color);
  }
  /* completed items dot indicator color */
  .followup-content .progress-indicator .step-finished {
    background-color: var(--success-icon-color);
  }
  
  /* 13e) benefit matrix T&Cs */
  /* 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;
    }
  }
  .confirm_agreement label {
    font-size: 1rem;
  }
  .benefit-matrix .modal-footer #confirmation-buttons .btn-default.active {
    background-color: var(--slider-toggle-color);
  }
  .benefit-matrix .modal-footer #confirmation-buttons .btn-default:hover {
    border: 1px solid #ccc;
    border-radius: 0;
  }
  
  /* 13f) benefit selection election info collect */
  /* header overlay */
  .online-two-iso .modal-normal .modal-header .header-text {
    padding-left: 1em;
  }
  
  .election-info-collect .dependant-board .expand-sign {
    color: var(--main-text-color);
  }
  
  .election-info-collect .dependant-board .icon {
    background-image: none;
    width: 0;
  }
  .election-info-collect .dependant-board .icon:before {
    color: var(--button-color);
    content: '\f0c0';
    font-family: 'FontAwesome';
    font-size: 3rem;
    padding-right: 0.25em;
  }
  
  /* 13g) benefit selection beneficiaries */
  /* primary, contingent, none button group */
  .benefitselect #allocationDialog .btn-group label:first-of-type {
    border-radius: 0;
  }
  .benefitselect #allocationDialog .btn-group label {
    border: 1px solid white;
  }
  .benefitselect #allocationDialog .btn-group .active {
    background-color: var(--slider-toggle-color);
  }
  #allocationDialog .edit-beneficiary,
  #allocationDialog .delete-beneficiary {
    color: var(--link-text-color);
  }
  #allocationDialog .edit-beneficiary:hover,
  #allocationDialog .edit-beneficiary:focus,
  #allocationDialog .delete-beneficiary:hover,
  #allocationDialog .delete-beneficiary:focus {
    color: var(--link-text-hover-color);
  }
  #allocationDialog .edit-beneficiary:active,
  #allocationDialog .edit-beneficiary:active:hover,
  #allocationDialog .edit-beneficiary:active:focus,
  #allocationDialog .delete-beneficiary:active,
  #allocationDialog .delete-beneficiary:active:hover,
  #allocationDialog .delete-beneficiary:active:focus {
    color: var(--link-text-click-color);
  }
  
  /****************************************** benefit intro popup **************************************/
  .faq-answer {
    padding-bottom: 1em;
  }
  /****************************************** life event popup **************************************/
  .modal .active-benefits .glyphicon-chevron-left {
    display: none;
  }
  .active-benefits .event-name {
    line-height: normal;
    position: initial;
  }
  .active-benefits .active--event-radio {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .25em .5em;
    line-height: normal;
    text-align: left;
  }
  .active-benefits input[type="radio"] {
    margin: 0;
  }
  /* 13h) Event validation*/
  .benefit-matrix #validationError-overlay {
    width: 90%;
  }
  #validationError-overlay {
    overflow: auto;
    height: auto;
    max-height: 75vh;
  }
  
  /*================================================================================================== 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: 7rem;
    position: relative;
    top: -0.1em;
    color: var(--benefit-icon-color);
  }
  
  /* icon size for 'see also' section of benefit selection page */
  div.see-also .img:before {
    font-size: 3.5rem;
    top: -0.25em;
  }
  
  /* 14b) life event icon general coding */
  /* background of image placeholder */
  .benefit-matrix .active-benefits .img {
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--life-event-background);
  }
  /* general styling for using icons for events */
  .benefit-matrix .active-benefits .img:before {
    font-family: OnlineTwoIconFont;
    font-size: 6rem;
    color: white;
  }
  
  /*================================================================================================== 15. Claims  ==================================================================================================*/
  /* make a claim styling */
  body#claim {
    padding-top: 0;
  }
  /* spacing and padding */
  div#claimDetail.row,
  div#receiptDetail.row,
  div#Attachment.row,
  #claimItemBreakdownDetail {
    padding-bottom: 0px;
  }
  /* remove additional details section as not relevant */
  #AdditionalDetail,
  .claim-additional-info {
    display: none;
  }
  #Attachment > .grid-cell,
  #ajax-uploader-group,
  #ajax-uploader-group p:nth-of-type(2),
  #tblFiles {
    margin-bottom: 0;
  }
  /* page title and headings */
  .online-two-iso .fsaClaimSubmitContainer .webpartTitle {
    background-color: #fff;
  }
  .fsaClaimSubmitContainer #flexClaimTitle h1,
  .online-two-iso .fsaClaimSubmitContainer h3 {
    color: var(--heading-color);
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0;
  }
  /* horizontal rules */
  .fsaClaimSubmitContainer hr {
    margin: 0;
    padding: 5px 0;
    background-color: #fff;
  }
  /* label colour */
  .online-two-iso .fsaClaimSubmitContainer label {
    color: var(--primary-text-color);
  }
  
  /* attach, cancel and submit buttons */
  .online-two-iso .fsaClaimSubmitContainer .btn-success,
  .online-two-iso .fsaClaimSubmitContainer .btn-default,
  .online-two-iso .fsaClaimSubmitContainer .btn-primary {
    background-color: var(--button-color);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    transition: all 0.25s;
  }
  .online-two-iso .fsaClaimSubmitContainer .btn-success:hover,
  .online-two-iso .fsaClaimSubmitContainer .btn-success:focus,
  .online-two-iso .fsaClaimSubmitContainer .btn-success:active,
  .online-two-iso .fsaClaimSubmitContainer .btn-success:active:hover,
  .online-two-iso .fsaClaimSubmitContainer .btn-success:active:focus,
  .online-two-iso .fsaClaimSubmitContainer .btn-default:hover,
  .online-two-iso .fsaClaimSubmitContainer .btn-default:focus,
  .online-two-iso .fsaClaimSubmitContainer .btn-default:active,
  .online-two-iso .fsaClaimSubmitContainer .btn-default:active:hover,
  .online-two-iso .fsaClaimSubmitContainer .btn-default:active:focus,
  .online-two-iso .fsaClaimSubmitContainer .btn-primary:hover,
  .online-two-iso .fsaClaimSubmitContainer .btn-primary:focus,
  .online-two-iso .fsaClaimSubmitContainer .btn-primary:active,
  .online-two-iso .fsaClaimSubmitContainer .btn-primary:active:hover,
  .online-two-iso .fsaClaimSubmitContainer .btn-primary:active:focus {
    background-color: var(--button-hover-color);
  }
  
  /* datepicker styling */
  /* left, right and year/month/day selection buttons in header of datepicker */
  .fsaClaimSubmitContainer table.uib-yearpicker thead th button.btn-default,
  .fsaClaimSubmitContainer table.uib-monthpicker thead th button.btn-default,
  .fsaClaimSubmitContainer table.uib-daypicker thead th button.btn-default {
    border-radius: 0;
  }
  .fsaClaimSubmitContainer table.uib-yearpicker thead tr:first-of-type th:nth-of-type(2),
  .fsaClaimSubmitContainer table.uib-monthpicker thead tr:first-of-type th:nth-of-type(2),
  .fsaClaimSubmitContainer table.uib-daypicker thead tr:first-of-type th:nth-of-type(2) {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
  }
  /* day/month/year buttons of datepicker */
  .fsaClaimSubmitContainer table.uib-yearpicker tbody td .btn-default,
  .fsaClaimSubmitContainer table.uib-monthpicker tbody td .btn-default,
  .fsaClaimSubmitContainer table.uib-daypicker tbody td .btn-default {
   background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
  }
  
  /* today and clear button group */
  .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group .btn {
    background-color: var(--button-color);
    border: none;
    transition: background-color 0.25s;
  }
  .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group button:first-of-type {
   border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right: 1px solid #fff;
  }
  .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group button:last-of-type {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-left: 1px solid #fff;
  }
  /* selected year/month/day and hover styling */
  .fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active,
  .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group .btn:hover {
    background-color: var(--button-hover-color);
  }
  .fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active
    .text-info {
    color: var(--button-hover-text-color);
  }
  
  /* claim submitted table header styling */
  .claimSubmittedHeader {
    background-color: var(--primary-text-color);
  }
  .online-two-iso .claimSubmittedHeader h3 {
    color: #fff;
  }
  
  /* claim overview */
  /* links */
  body#StatementAndClaimSubmit #wrapper a {
    color: var(--link-text-color);
  }
  body#StatementAndClaimSubmit #wrapper a:hover,
  body#StatementAndClaimSubmit #wrapper a:focus {
    color: var(--link-text-hover-color);
    text-decoration: none;
  }
  body#StatementAndClaimSubmit #wrapper a:active,
  body#StatementAndClaimSubmit #wrapper a:active:hover,
  body#StatementAndClaimSubmit #wrapper a:active:focus {
    color: var(--link-text-click-color);
  }
  /* navigation tabs */
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A {
    text-transform: none;
  }
  .FSAStatementAndHistoryContainer .htabs-container,
  .FSAStatementAndHistoryContainer .htabs-container .tabs-bg,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel STRONG,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A {
    background: none;
  }
  .FSAStatementAndHistoryContainer .htabs-container .tabs-bg {
    background: linear-gradient(to bottom, #fff, #ededed);
  }
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI {
    background-color: transparent !important;
    background: url(/smartrewardNL/media/Images/Misc%20Icons/Aon_TBS-lite_Icons-9_off.png)
      no-repeat 50% 20%;
  }
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI:hover {
    background-color: transparent !important;
    background: url(/smartrewardNL/media/Images/Misc%20Icons/Aon_TBS-lite_Icons-9.png)
      no-repeat 50% 20%;
  }
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A {
    font-size: 1rem;
  }
  #StatementAndClaimSubmit .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A,
  .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A:hover {
    border-bottom: 0.5em solid var(--primary-text-color);
    color: var(--primary-text-color);
    font-weight: bold;
    padding-bottom: 20px;
  }
  
  /* calim number column of calim data tables */
  .FSAStatementAndHistoryContainer .claim-number {
    width: 125px;
  }
  
  /* headings */
  .online-two-iso .FSAStatementAndHistoryContainer h1 {
    color: var(--heading-color);
    margin-bottom: 0;
  }
  .online-two-iso .claim-history h2 {
    color: var(--primary-text-color);
  }
  
  /* hover effect for the tables */
  .claim-history .claim-table > tbody > tr:hover {
    background-color: #f5f5f5;
  }
  
  /* Pending, Approved and Rejected icons */
  .claim-approved img {
    display: none;
  }
  .claim-approved a:before {
    font-family: FontAwesome;
    font-size: 1.75rem;
    width: 20px;
    height: 20px;
    display: inline-block;
    transition: transform .1s;
  }
  .claim-approved a:hover {
    text-decoration: none;
  }
  .claim-approved a:hover:before,
  .claim-approved a:focus:before {
    transform: scale(1.3);
  }
  .claim-approved a[title='Approved']:before,
  .claim-approved a[title='Goedgekeurd']:before {
   content: '\f00c';
    color: #75bf71;
  }
  .claim-approved a[title='Rejected']:before,
  .claim-approved a[title='Geweigerd']:before {
    content: '\f00d';
    color: var(--secondary-text-color);
  }
  .claim-approved a[title='Pending']:before,
  .claim-approved a[title='Afwachting']:before {
    content: '\f0ec';
    color: var(--primary-text-color);
  }
  
  /* buttons in popup modal */
  .claim-edit-link .btn.btn-primary,
  .claim-edit-link .btn.btn-info {
    background-color: var(--button-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.25s;
  }
  body#StatementAndClaimSubmit .btn-default {
    background-color: var(--button-color-alternate);
    color: var(--button-text-color-alternate);
    border: none;
    border-radius: 5px;
    transition: background-color 0.25s;
  }
  .claim-edit-link .btn.btn-primary:hover,
  .claim-edit-link .btn.btn-primary:focus,
  .claim-edit-link .btn.btn-primary:active,
  .claim-edit-link .btn.btn-primary:active:hover,
  .claim-edit-link .btn.btn-primary:active:focus,
  .claim-edit-link .btn.btn-info:hover,
  .claim-edit-link .btn.btn-info:focus,
  .claim-edit-link .btn.btn-info:active,
  .claim-edit-link .btn.btn-info:active:hover,
  .claim-edit-link .btn.btn-info:active:focus,
  body#StatementAndClaimSubmit .btn-default:hover,
  body#StatementAndClaimSubmit .btn-default:focus,
  body#StatementAndClaimSubmit .btn-default:active,
  body#StatementAndClaimSubmit .btn-default:active:hover,
  body#StatementAndClaimSubmit .btn-default:active:focus {
    background-color: var(--button-hover-color);
  }
  
  /* selected tab styling on FSA statement tab */
  body#StatementAndClaimSubmit #wrapper .spendingaccountsTab-container .tabs UL LI.sel A,
  body#StatementAndClaimSubmit #wrapper .spendingaccountsTab-container .tabs UL LI A:hover {
    background-color: var(--primary-text-color);
    color: #fff;
    font-weight: bold;
  }
  /* table headings on FSA statement tab */
  .fsa-table-caption .section_title,
  .subtitle-claims .section_title {
    color: var(--primary-text-color);
  }
  
  /*================================================================================================== 16. My Documents  ==================================================================================================*/
  /* make table of documents responsive */
  #tabledocuments {
    display: block !important;
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #tabledocuments th,
  #tabledocuments td {
    padding: 5px;
  }
  #tabledocuments > thead > tr > th {
    background-color: var(--tertiary-text-color);
  }
  a#btnNewDocument {
    color: var(--link-text-color) !important;
  }
  a#btnNewDocument:hover {
    color: var(--link-text-hover-color) !important;
    text-decoration: none;
  }
  #dlguploadDocument #btn-upload-document-save,
  #deleteDocumentDialog #dspdeleteDocument {
    background-color: var(--button-color);
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.25s;
  }
  #dlguploadDocument #btn-upload-document-cancel,
  #deleteDocumentDialog #btnCancelDocument .gray {
    background-color: var(--button-color-alternate);
    color: var(--button-text-color-alternate);
    transition: background-color 0.25s;
  }
  #dlguploadDocument #btn-upload-document-save:hover,
  #dlguploadDocument #btn-upload-document-save:focus,
  #dlguploadDocument #btn-upload-document-cancel:hover,
  #dlguploadDocument #btn-upload-document-cancel:focus,
  #deleteDocumentDialog #dspdeleteDocument:hover,
  #deleteDocumentDialog #dspdeleteDocument:focus,
  #deleteDocumentDialog #btnCancelDocument .gray:hover,
  #deleteDocumentDialog #btnCancelDocument .gray:focus {
    background-color: var(--button-hover-color);
  }
  #dlguploadDocument #btn-upload-document-save:active,
  #dlguploadDocument #btn-upload-document-save:active:hover,
  #dlguploadDocument #btn-upload-document-save:active:focus,
  #dlguploadDocument #btn-upload-document-cancel:active,
  #dlguploadDocument #btn-upload-document-cancel:active:hover,
  #dlguploadDocument #btn-upload-document-cancel:active:focus,
  #deleteDocumentDialog #dspdeleteDocument:active,
  #deleteDocumentDialog #dspdeleteDocument:active:hover,
  #deleteDocumentDialog #dspdeleteDocument:active:focus,
  #deleteDocumentDialog #btnCancelDocument .gray:active,
  #deleteDocumentDialog #btnCancelDocument .gray:active:hover,
  #deleteDocumentDialog #btnCancelDocument .gray:active:focus {
    background-color: var(--button-click-color);
  }
  
  /* overlay styling */
  #dlguploadDocument.overlay-no-height-limit,
  #dlguploadDocument textarea {
    width: 100%;
  }
  @media only screen and (max-width: 750px) {
    #dlguploadDocument .column-left {
      width: 100%;
      text-align: left;
    }
  }
  
  /*================================================================================================== 17. Document Download  ==================================================================================================*/
  .interactive-TRS ul {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    -ms-grid-columns: 1fr 1fr 1fr;
    padding-bottom: 1em;
  }
  .interactive-TRS ul > li:first-child {
    -ms-grid-column: 1;
    -ms-grid-row: 1
  }
 .interactive-TRS ul > li:nth-child(2) {
    -ms-grid-column: 2;
    -ms-grid-row: 1
  }
  .interactive-TRS ul > li:last-child {
    -ms-grid-column: 3;
    -ms-grid-row: 1
  }
  .interactive-TRS .h1 {
    color: var(--heading-color);
    font-size: 5rem;
    font-weight: 700
  }
  #statements_selector:focus {
    outline: 3px solid var(--accessibility-outline);
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
  }
  #download_statement {
    transform: translate3d(1em, -.25em, 0);
  }
  #download_statement:after {
    content: '\f0ed';
    font-family: FontAwesome;
    padding-left: .5em;
  }
  
  /*================================================================================================== 18. Mobile  ==================================================================================================*/
  /* remove Need Assistance menu item */
  .jq-dropdown .jq-dropdown-menu li:nth-of-type(3) {
    display: none;
  }
  /* login module buttons */
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .mobile-buttons .btn {
    background-color: var(--button-color) !important;
  }
  @media only screen and (max-width: 750px) {
    /* menu icon colour */
    .fa.fa-bars,
    .fa.fa-gear {
      color: var(--mobile-menu-icon-color);
    }
    /* links in mobile hamburger menu */
    .online-two-iso #menu-no-dashboard li a,
    .online-two-iso #menu-no-dashboard li a.selected {
      color: var(--mobile-menu-link-color);
    }
    /* mobile menu icons (hamburger and cog) */
    #header .main-menu-toogle:hover,
    #header .main-menu-toogle:focus,
    #header .user-toogle:hover,
    #header .user-toogle:focus {
      color: var(--button-hover-color);
    }
    /* make height of greeting container auto to give proper spacing around the greeting */
    #home-online-three .dashboard-controls {
      height: auto;
    }
  }
  /* remove default icons applied to modules on homepage */
  #home-online-three #home-integrated .modules-mobile .module-mobile i[class*='icon-'] {
    display: none;
  }
  /* remove duplicate module header */
  #home-online-three #home-integrated .modules-mobile .module-content-header-container {
    display: none;
  }
  /* remove margin applied to module title */
  #home-online-three #home-integrated .modules-mobile .module-mobile span.module-label {
    margin-left: 0;
  }
  /* centre homepage module icons */
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel div[class*='online-two-icon-'] {
    text-align: center;
  }
  /* homepage buttons */
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy
    button.btn.btn-default {
    background-color: var(--button-color);
    border-radius: 5px;
    color: var(--button-text-color);
  }
  #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: var(--homepage-enrolment-days-left-color);
  }
  /* claims modules */
  #home-online-three #home-integrated .module-mobile #make-a-claim,
  #home-online-three #home-integrated .module-mobile #manage-claims {
    padding-bottom: 0;
  }
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .make-a-claim-copy.module-copy,
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .manage-claims-copy.module-copy {
    margin: 0;
  }
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .manage-claims-copy.module-copy {
    height: auto;
  }
  /* claims pagers */
  #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .tbs-module-pager .tbs-pager {
    position: static;
    transform: none;
    margin: 0.5em auto;
  }
  
  /*================================================================================================== 19. Client specific styles  ==================================================================================================*/
  /* homepage module layouts */
  @media only screen and (min-width: 768px){
    #home-online-three #right-side, #home-online-three #home-integrated {
      background-color: #f2f2f8;
    }
    #home-online-three #home-integrated .modules-right-side.grid-container {
      --colNum: 2;
      grid-template-areas: 
        "module-1 module-2"
        "module-3 module-4"
        "module-5 module-6"
        "module-7 module-8"
        "module-9 module-10"
        "module-11 module-12";
      max-width: 1920px;
      margin: 0 auto;
      padding: 2em;
    }
  }
   @media only screen and (min-width: 992px) {
     #home-online-three #home-integrated .modules-right-side.grid-container  {
       --colNum: 3;
       grid-template-areas:
         "module-1 module-2 module-3"
         "module-4 module-5 module-6"
         "module-7 module-8 module-9"
         "module-10 module-11 module-12"
     }
   }
  @media only screen and (min-width: 1300px){
    #home-online-three #home-integrated .modules-right-side.grid-container {
      --colNum: 4;
      grid-template-areas: 
        "module-1 module-2 module-3 module-4"        
        "module-5 module-6 module-7 module-8"
        "module-9 module-10 module-11 module-12"
    }
  }
  
  /* learn more pages */
  [id*="learn-more-"] .card {
      min-height: auto;
      min-width: 0;
      flex: 0 0 325px;
  }
  [id*="learn-more-"] .card-title {
      padding: .5rem;
      margin: 0;
  }
  [id*="learn-more-"] h3 {
      margin: 0;
  }
  [id*="learn-more-"] .card-body {
      display: flex;
      flex-direction: column;
      padding: .5rem;
  }
  [id*="learn-more-"] .card-body > p:last-child {
      margin-top: auto;
  }

  /* Get Support page faq accordion styling*/
  .bootstrap-iso .get-support-faq .panel-default {
    border: none;
  }
  .bootstrap-iso .get-support-faq .panel-default>.panel-heading {
    background-color: #fff;  
  }
  .bootstrap-iso .get-support-faq .panel-heading .panel-title .accordion-toggle {
    color: var(--link-text-color);
  }
  .bootstrap-iso .get-support-faq .panel-heading .panel-title .accordion-toggle:hover,
  .bootstrap-iso .get-support-faq .panel-heading .panel-title .accordion-toggle:focus {
    background-color: transparent;
    color: var(--link-text-hover-color);
  }

  /* general content pages (new to bank, wellbeing etc.) image styling */
  .company-holding-image-container {
    max-width: 50%;
  }
  .company-holding-page-image {
    margin: 20px
  }
  
  /****************************************** Using icons for benefits/events *******************************************/
  /* if wanting icons to be colour coded to benefit groups */  
  /* replace LINEGROUP1/LINEGROUP2/LINEGROUP3 with relevant classes */
  .benefit-matrix .PensionProtection .benefit-menu {
    background-color: var(--linegroup1-benefit-icon-color);
  }
  .benefit-matrix .PensionProtection .img:before,
  .benefit-matrix .PensionProtection .benefitline .img:before,
  #benefit-overview .PensionProtection .img:before {
    color: var(--benefit-icon-color);
  }

  .benefit-matrix .Healthcare .benefit-menu {
    background-color: var(--linegroup2-benefit-icon-color);
  }
  .benefit-matrix .Healthcare .img:before,
  .benefit-matrix .Healthcare .benefitline .img:before,
  #benefit-overview .Healthcare .img:before {
    color: var(--benefit-icon-color);
  }

  .benefit-matrix .Lifestyle .benefit-menu {
    background-color: var(--linegroup3-benefit-icon-color);
  }
  .benefit-matrix .Lifestyle .img:before,
  .benefit-matrix .Lifestyle .benefitline .img:before,
  #benefit-overview .Lifestyle .img:before {
    color: var(--benefit-icon-color);
  }
  
  /****************************************** Using icons for homepage/elsewhere on the site *******************************************/
  .online-two-icon-63:before {
    content: '\e93f';
  }
  .online-two-icon-136:before {
    content: '\e98b';
  }
  .online-two-icon-66:before {
    content: '\e942';
  }
  .online-two-icon-97:before {
    content: '\e964';
  }
  .online-two-icon-85:before {
    content: '\e958';
  }
  .online-two-icon-32:before {
    content: '\e91f';
  }
  .online-two-icon-48:before {
    content: '\e930';
  }
  .online-two-icon-20:before {
    content: '\e913';
  }
  .online-two-icon-127:before {
    content: '\e982';
  }
  .online-two-icon-55:before {
    content: '\e937';
  }
  .online-two-icon-31:before {
    content: '\e91e';
  }

/* Benefit Icons: Defined Benefit Pension Plan */
#benefit-overview .img.BenefitImage_ed037563-f155-4c0b-a7c3-d892f69a6b1a:before,
.img.Led037563-f155-4c0b-a7c3-d892f69a6b1a:before,
div.see-also .img.Led037563-f155-4c0b-a7c3-d892f69a6b1a:before{
               content: '\e91f';
}

/* Benefit Icons: Defined Benefit Pension Plan (ROI) */
#benefit-overview .img.BenefitImage_01bbd94f-c824-493d-94cf-c688a8c595bc:before,
.img.L01bbd94f-c824-493d-94cf-c688a8c595bc:before,
div.see-also .img.L01bbd94f-c824-493d-94cf-c688a8c595bc:before{
               content: '\e91f';
}

/* Benefit Icons: Additional Pension Contributions (APeCs) (UK) */
#benefit-overview .img.BenefitImage_e24a2cd4-3022-4df5-9dde-d1e5fe1aa9be:before,
.img.Le24a2cd4-3022-4df5-9dde-d1e5fe1aa9be:before,
div.see-also .img.Le24a2cd4-3022-4df5-9dde-d1e5fe1aa9be:before{
               content: '\e991';
}

/* Benefit Icons: Additional Pension Contributions (APeCs) (UK - International) */
#benefit-overview .img.BenefitImage_c9396326-99b9-469c-828b-ec9ce9edb890:before,
.img.Lc9396326-99b9-469c-828b-ec9ce9edb890:before,
div.see-also .img.Lc9396326-99b9-469c-828b-ec9ce9edb890:before{
               content: '\e991';
}

/* Benefit Icons: NatWest Group Retirement Savings Plan (Line Set) */
#benefit-overview .img.BenefitImage_27a134e9-ca92-461b-9d3e-85a06933c1cf:before,
.img.L27a134e9-ca92-461b-9d3e-85a06933c1cf:before,
div.see-also .img.L27a134e9-ca92-461b-9d3e-85a06933c1cf:before,
#benefit-overview .img.BenefitImage_3d49f031-f402-42cc-b842-e5c6cd45e8ff:before,
.img.L3d49f031-f402-42cc-b842-e5c6cd45e8ff:before,
div.see-also .img.L3d49f031-f402-42cc-b842-e5c6cd45e8ff:before{
               content: '\e96b';
}

/* Benefit Icons: NatWest Group Retirement Savings Plan 1 */
#benefit-overview .img.BenefitImage_715a5296-5a77-4465-8706-b478e6d80114:before,
.img.L715a5296-5a77-4465-8706-b478e6d80114:before,
div.see-also .img.L715a5296-5a77-4465-8706-b478e6d80114:before{
               content: '\e96b';
}

/* Benefit Icons: The RBS Group Ireland Retirement Savings Plan ER (Line Set) */
#benefit-overview .img.BenefitImage_0385e10f-174e-4cf2-ae7e-1fa11ba83b6f:before,
.img.L0385e10f-174e-4cf2-ae7e-1fa11ba83b6f:before,
div.see-also .img.L0385e10f-174e-4cf2-ae7e-1fa11ba83b6f:before{
               content: '\e96b';
}

/* Benefit Icons: RBS AA Pension Scheme (Defined Contribution Section) (Line Set) */
#benefit-overview .img.BenefitImage_4b812388-fc9a-43b5-a075-b771fb06c18e:before,
.img.L4b812388-fc9a-43b5-a075-b771fb06c18e:before,
div.see-also .img.L4b812388-fc9a-43b5-a075-b771fb06c18e:before{
               content: '\e96b';
}

/* Benefit Icons: Disability Cover */
#benefit-overview .img.BenefitImage_d96cda24-c569-4eed-91d6-2604eda42279:before,
.img.Ld96cda24-c569-4eed-91d6-2604eda42279:before,
div.see-also .img.Ld96cda24-c569-4eed-91d6-2604eda42279:before{
               content: '\e994';
}

/* Benefit Icons: Disability Cover (ROI) */
#benefit-overview .img.BenefitImage_87b3a206-446e-4320-a882-5d3cfd655471:before,
.img.L87b3a206-446e-4320-a882-5d3cfd655471:before,
div.see-also .img.L87b3a206-446e-4320-a882-5d3cfd655471:before{
               content: '\e994';
}

/* Benefit Icons: Life Cover Options (Line Set) */
#benefit-overview .img.BenefitImage_64623dba-a8c3-49e3-8cd5-681bb7689d42:before,
.img.L64623dba-a8c3-49e3-8cd5-681bb7689d42:before,
div.see-also .img.L64623dba-a8c3-49e3-8cd5-681bb7689d42:before{
               content: '\e91c';
}

/* Benefit Icons: Life Cover (ROI) */
#benefit-overview .img.BenefitImage_5a832ccf-5693-498b-b0c8-d9821eee4f60:before,
.img.L5a832ccf-5693-498b-b0c8-d9821eee4f60:before,
div.see-also .img.L5a832ccf-5693-498b-b0c8-d9821eee4f60:before{
               content: '\e91c';
}

/* Benefit Icons: Life Assurance - Spouse/Partner (ROI) */
#benefit-overview .img.BenefitImage_27a13058-5c4a-434d-a7af-c1f92c255943:before,
.img.L27a13058-5c4a-434d-a7af-c1f92c255943:before,
div.see-also .img.L27a13058-5c4a-434d-a7af-c1f92c255943:before{
               content: '\e91d';
}

/* Benefit Icons: Partner Life Assurance Declaration (Line Set) */
#benefit-overview .img.BenefitImage_8b47abb3-a16b-40ce-9b7a-1d34924d5731:before,
.img.L8b47abb3-a16b-40ce-9b7a-1d34924d5731:before,
div.see-also .img.L8b47abb3-a16b-40ce-9b7a-1d34924d5731:before{
               content: '\e91d';
}

/* Benefit Icons: Critical Illness Insurance - Self */
#benefit-overview .img.BenefitImage_6874b479-6632-49c8-8ce2-4848181155a7:before,
.img.L6874b479-6632-49c8-8ce2-4848181155a7:before,
div.see-also .img.L6874b479-6632-49c8-8ce2-4848181155a7:before{
               content: '\e905';
}

/* Benefit Icons: Critical Illness Insurance - Self (ROI) */
#benefit-overview .img.BenefitImage_410bb524-5588-48be-9fa2-b345477ba894:before,
.img.L410bb524-5588-48be-9fa2-b345477ba894:before,
div.see-also .img.L410bb524-5588-48be-9fa2-b345477ba894:before{
               content: '\e905';
}

/* Benefit Icons: Critical Illness Insurance - Spouse/Partner */
#benefit-overview .img.BenefitImage_2779216a-6036-4ac1-823d-f8e3679113dc:before,
.img.L2779216a-6036-4ac1-823d-f8e3679113dc:before,
div.see-also .img.L2779216a-6036-4ac1-823d-f8e3679113dc:before{
               content: '\e906';
}

/* Benefit Icons: Critical Illness Insurance - Spouse/Partner (ROI) */
#benefit-overview .img.BenefitImage_597bd8eb-4c88-478a-aae9-4eccf31c8c75:before,
.img.L597bd8eb-4c88-478a-aae9-4eccf31c8c75:before,
div.see-also .img.L597bd8eb-4c88-478a-aae9-4eccf31c8c75:before{
               content: '\e906';
}

/* Benefit Icons: Personal Accident Insurance (ROI) */
#benefit-overview .img.BenefitImage_cb054e61-72a2-4789-9940-e342710284cf:before,
.img.Lcb054e61-72a2-4789-9940-e342710284cf:before,
div.see-also .img.Lcb054e61-72a2-4789-9940-e342710284cf:before{
               content: '\e925';
}

/* Benefit Icons: Personal Accident Insurance */
#benefit-overview .img.BenefitImage_9dc5f07c-4be4-44eb-be35-c68cd21afd0e:before,
.img.L9dc5f07c-4be4-44eb-be35-c68cd21afd0e:before,
div.see-also .img.L9dc5f07c-4be4-44eb-be35-c68cd21afd0e:before{
               content: '\e925';
}

/* Benefit Icons: Private Medical Cover */
#benefit-overview .img.BenefitImage_6716243d-ff68-4e05-9741-7ff220f26542:before,
.img.L6716243d-ff68-4e05-9741-7ff220f26542:before,
div.see-also .img.L6716243d-ff68-4e05-9741-7ff220f26542:before{
               content: '\e927';
}
/* Benefit Icons: Private Medical Cover GIB */
#benefit-overview .img.BenefitImage_b18d324e-cce6-4c4a-97b6-76001ea15c62:before,
.img.Lb18d324e-cce6-4c4a-97b6-76001ea15c62:before,
div.see-also .img.Lb18d324e-cce6-4c4a-97b6-76001ea15c62:before{
               content: '\e927';
}

/* Benefit Icons: Dental Insurance (ROI) */
#benefit-overview .img.BenefitImage_a2cd0138-30e4-4146-aa2f-32e907cd7a37:before,
.img.La2cd0138-30e4-4146-aa2f-32e907cd7a37:before,
div.see-also .img.La2cd0138-30e4-4146-aa2f-32e907cd7a37:before{
               content: '\e909';
}

/* Benefit Icons: Dental Insurance */
#benefit-overview .img.BenefitImage_646eb200-8d95-4aba-bb13-152acfc8ddfd:before,
.img.L646eb200-8d95-4aba-bb13-152acfc8ddfd:before,
div.see-also .img.L646eb200-8d95-4aba-bb13-152acfc8ddfd:before{
               content: '\e909';
}

/* Benefit Icons: Health Assessment - Self (ROI) */
#benefit-overview .img.BenefitImage_58698f5d-6724-49d8-902d-ebc693d73c2f:before,
.img.L58698f5d-6724-49d8-902d-ebc693d73c2f:before,
div.see-also .img.L58698f5d-6724-49d8-902d-ebc693d73c2f:before{
               content: '\e915';
}

/* Benefit Icons: Health Assessment - Self */
#benefit-overview .img.BenefitImage_ea9df4e1-842d-4538-a7d9-f244bbee97df:before,
.img.Lea9df4e1-842d-4538-a7d9-f244bbee97df:before,
div.see-also .img.Lea9df4e1-842d-4538-a7d9-f244bbee97df:before{
               content: '\e915';
}

/* Benefit Icons: Health Assessment - Spouse/Partner (ROI) */
#benefit-overview .img.BenefitImage_a4b9783d-5f06-4d2d-9215-3815ecfacc99:before,
.img.La4b9783d-5f06-4d2d-9215-3815ecfacc99:before,
div.see-also .img.La4b9783d-5f06-4d2d-9215-3815ecfacc99:before{
               content: '\e916';
}

/* Benefit Icons: Health Assessment - Spouse/Partner */
#benefit-overview .img.BenefitImage_60608160-ddc3-4f2b-832d-b0eea6e5c6fe:before,
.img.L60608160-ddc3-4f2b-832d-b0eea6e5c6fe:before,
div.see-also .img.L60608160-ddc3-4f2b-832d-b0eea6e5c6fe:before{
               content: '\e916';
}

/* Benefit Icons: Company Car */
#benefit-overview .img.BenefitImage_7c2998dc-14af-43db-b751-bc83040c914f:before,
.img.L7c2998dc-14af-43db-b751-bc83040c914f:before,
div.see-also .img.L7c2998dc-14af-43db-b751-bc83040c914f:before{
               content: '\e913';
}

/* Benefit Icons: Company Car Scheme (ROI) */
#benefit-overview .img.BenefitImage_ad9c93d7-8138-4966-860d-c18042068bee:before,
.img.Lad9c93d7-8138-4966-860d-c18042068bee:before,
div.see-also .img.Lad9c93d7-8138-4966-860d-c18042068bee:before{
               content: '\e913';
}

/* Benefit Icons: Childcare Vouchers (Line Set) */
#benefit-overview .img.BenefitImage_2a270d46-8e7a-4c6a-8f0e-4ab600f8b0be:before,
.img.L2a270d46-8e7a-4c6a-8f0e-4ab600f8b0be:before,
div.see-also .img.L2a270d46-8e7a-4c6a-8f0e-4ab600f8b0be:before{
               content: '\e901';
}

/* Benefit Icons: Bike for Work (ROI) */
#benefit-overview .img.BenefitImage_03920752-b1af-4b20-a0ac-7dc6cbd51480:before,
.img.L03920752-b1af-4b20-a0ac-7dc6cbd51480:before,
div.see-also .img.L03920752-b1af-4b20-a0ac-7dc6cbd51480:before{
               content: '\e908';
}

/* Benefit Icons: Bike for Work */
#benefit-overview .img.BenefitImage_748455ec-746b-4a61-9866-595877230463:before,
.img.L748455ec-746b-4a61-9866-595877230463:before,
div.see-also .img.L748455ec-746b-4a61-9866-595877230463:before{
               content: '\e908';
}

/* Benefit Icons: Holiday - Buy or Sell (UK) */
#benefit-overview .img.BenefitImage_b9659fa7-4d82-49c0-800c-16cdb3a3820f:before,
.img.Lb9659fa7-4d82-49c0-800c-16cdb3a3820f:before,
div.see-also .img.Lb9659fa7-4d82-49c0-800c-16cdb3a3820f:before{
               content: '\e92e';
}

/* Benefit Icons: Holiday - Buy or Sell (ROI) */
#benefit-overview .img.BenefitImage_3a63fbd7-0c06-48d8-a1a9-4c617601138a:before,
.img.L3a63fbd7-0c06-48d8-a1a9-4c617601138a:before,
div.see-also .img.L3a63fbd7-0c06-48d8-a1a9-4c617601138a:before{
               content: '\e92e';
}/* Benefit Icons: Holiday - Buy or Sell (ROI) */
#benefit-overview .img.BenefitImage_56a20113-33da-4fd5-8ed1-cfece7c796e0:before,
.img.L56a20113-33da-4fd5-8ed1-cfece7c796e0:before,
div.see-also .img.L56a20113-33da-4fd5-8ed1-cfece7c796e0:before{
               content: '\e920';
}

/* Benefit Icons: Payroll Giving - Ongoing (Line Set) */
#benefit-overview .img.BenefitImage_10acd824-acdc-4f78-8eec-eb83548e387a:before,
.img.L10acd824-acdc-4f78-8eec-eb83548e387a:before,
div.see-also .img.L10acd824-acdc-4f78-8eec-eb83548e387a:before{
               content: '\e911';
}

/* Benefit Icons: RBSelect Card (Line Set) */
#benefit-overview .img.BenefitImage_f4b08b8b-cefb-4185-8d99-1dd5fbaf1a38:before,
.img.Lf4b08b8b-cefb-4185-8d99-1dd5fbaf1a38:before,
div.see-also .img.Lf4b08b8b-cefb-4185-8d99-1dd5fbaf1a38:before{
               content: '\e917';
}

/* Benefit Icons: RBSelect Card Administration Charges */
#benefit-overview .img.BenefitImage_6ad8878d-b659-4774-a35e-8c7a23d6db70:before,
.img.L6ad8878d-b659-4774-a35e-8c7a23d6db70:before,
div.see-also .img.L6ad8878d-b659-4774-a35e-8c7a23d6db70:before{
               content: '\e917';
}

/* Event Icons: Bike for Work Self Certified Event */
.benefit-matrix .active-benefits .img.Ef5dae517-46ae-42f8-881d-a188e8325f40:before,
.benefit-matrix .active-benefits .img.Ef9fb7d53-5773-480d-9a3c-a3ce91a114a5:before {
               content: '\e908';
}

/* Event Icons: Commence PHI */
.benefit-matrix .active-benefits .img.Ee231bf17-8f13-4f97-9452-a9d6e5315540:before {
               content: '\e982';
}

/* Event Icons: Fixed Term Contract to Permanent */
.benefit-matrix .active-benefits .img.E54229899-1a8b-466d-a8ec-23db221185de:before {
               content: '\e95b';
}

/* Event Icons: Leave of Absence - Long Term Disability */
.benefit-matrix .active-benefits .img.E66bd0c44-e179-401e-ba07-c0ea489ddc78:before {
               content: '\e927';
}

/* Event Icons: Increase in Working Hours to More than 21 Hours per week */
.benefit-matrix .active-benefits .img.E843aaea3-acc4-4112-a776-4af3283da7c9:before {
               content: '\e97a';
}

/* Event Icons: Pregnancy */
.benefit-matrix .active-benefits .img.E2caba9b0-8dbb-45d4-b72e-e36fb0da3d90:before {
               content: '\e966';
}

/* Event Icons: Reduction in Working Hours to less than 21 Hours per Week (F/T to P/T) */
.benefit-matrix .active-benefits .img.E8b4ce1b8-86e2-4fcc-8061-b5ea0ac36961:before {
               content: '\e97b';
}

/* Event Icons: Relocation (Change in Work Location) */
.benefit-matrix .active-benefits .img.E30c463b0-fbf9-41b5-8837-895d38e804c2:before {
               content: '\e96a';
}

/* Event Icons: Retail Card Renewal Event - Month 1 */
.benefit-matrix .active-benefits .img.E713faebd-979c-4183-b1d5-d8be7716d72d:before {
               content: '\e943';
}

/* Event Icons: Retail Card Renewal Event - Month 2 */
.benefit-matrix .active-benefits .img.E6f57d069-8964-402c-9912-2b5490422cc9:before {
               content: '\e943';
}

/* Event Icons: Return from Adoption Leave */
.benefit-matrix .active-benefits .img.Ec98a30a7-f059-4af7-b75f-813bed344166:before {
               content: '\e96a';
}

/* Event Icons: Return from Maternity Leave */
.benefit-matrix .active-benefits .img.E307bc9d9-f163-408a-b965-adbf9a7a5657:before {
               content: '\e96a';
}

/* Event Icons: Return from Paternity Leave */
.benefit-matrix .active-benefits .img.E852e3508-0bb9-4e08-ba78-277d404a4003:before {
               content: '\e96a';
}

/* Event Icons: Gaining Partner */
.benefit-matrix .active-benefits .img.Ee7ca2650-5f2f-416f-a435-2b87fa6a63b8:before {
               content: '\e9a2';
}/* Event Icons: Divorce/Separation */
.benefit-matrix .active-benefits .img.Ea65805d1-8aa9-4c03-bc55-3a30ba8122c4:before {
               content: '\e970';
}/* Event Icons: Birth/adoption of child */
.benefit-matrix .active-benefits .img.E7a171364-a7eb-4c60-9960-cbc5ba2f2297:before {
               content: '\e981';
}/* Event Icons: Redundancy */
.benefit-matrix .active-benefits .img.E67a240c4-a49c-41ca-be1d-870cae829f5b:before {
               content: '\e96d';
}/* Event Icons: Death of a dependent */
.benefit-matrix .active-benefits .img.E0689ea91-0d4d-41d3-8884-f9c006cc71e8:before {
               content: '\e967';
}

/* Event Icons: Return from PHI */
.benefit-matrix .active-benefits .img.E66a5cb37-afa6-4dc1-950f-703f564283e7:before {
               content: '\e96a';
}

/* Event Icons: Return from Unauthorised Unpaid Leave of Absence (AWOL) */
.benefit-matrix .active-benefits .img.E3eff9cbe-8428-4b78-82ea-b3f836d0a129:before {
               content: '\e96a';
}
/* Changes to the tooltip */
.ui-tooltip.ui-widget.ui-widget-content{
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
/* Mobile button text transformation fix */
#home-online-three #right-side .modules-mobile .module-mobile .module-panel .module-copy button.btn.btn-default, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy button.btn.btn-default {
  text-transform: none;
}
/* Mobile Responsiveness */
@media only screen and (max-width:767px){
               /* Login page scroll support for narrower screens */
               html.online-two-iso.login{
                              overflow: scroll;
               }
               
               /* Remove horizontal scroll from table on cars page */
               #natwest-group-cars .table-responsive > .table > thead > tr > th, 
               #natwest-group-cars .table-responsive > .table > tbody > tr > th, 
               #natwest-group-cars .table-responsive > .table > tfoot > tr > th, 
               #natwest-group-cars .table-responsive > .table > thead > tr > td, 
               #natwest-group-cars .table-responsive > .table > tbody > tr > td, 
               #natwest-group-cars .table-responsive > .table > tfoot > tr > td{
                              white-space: normal;
               }
  
    /* Prevent overlapping text with long strings (snap to left-hand side) */   
    .in-Cart .you-pay[ng-if$="vm.benefitservice.LINE_TYPE_QUESTION"]{
        position: relative; 
        padding-left: 6px;
        float: none;
        text-align: left;
    }
  
    /* Allow long text to break onto new lines (instead of showing scrollbar) */
    .in-Cart .you-pay[ng-if$="vm.benefitservice.LINE_TYPE_QUESTION"] SPAN.green-number{ 
        white-space: normal;
    }
    /* allowing scrolling of confirm elections modal footer to see content and confirm buttons */
    .online-two-iso .modal-content > [ng-show="vm.Step==vm.STEP_ONE"] {
      display: flex;
      flex-direction: column;
    }
    .online-two-iso .modal-content > [ng-show="vm.Step==vm.STEP_ONE"] .modal-header {
      display: flex;
    }
    .online-two-iso .modal-content > [ng-show="vm.Step==vm.STEP_ONE"] .modal-footer {
      max-height: 200px;
      overflow-y: auto;
    }
    /* font-size of buttons on homepage modules */
    #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy button.btn.btn-default {
      font-size: 1.1rem;
    }
}

/*Intro styling*/
.modal-content, .OverviewLearnMorePage {
    font-size: 18px;
  /*line-height: 20px;*/
}

.modal-content h3, .OverviewLearnMorePage h3 {
    color: #5a287d;
    font-weight: bold;
    line-height: 58px;
  font-size: 46px;
  font-family: 'Knile_Bold';
}

.modal-content h4, .OverviewLearnMorePage h4, p.YourGuide {
    color: #5a287d;
    font-weight: bold;
    line-height: 38px;
  font-size: 28px;
  padding-top: 18px;
}

table.ContactPDF {
    width: 95%;
}
table.ContactPDF .col-md-6 {
    width: 95%;
}
table.ContentTable td,  table.ContentTable th{
   padding: 12px;
               }
table.ContentTable th {
    border-right: 1px solid;
}
table.ContentTable td.Tfont {
    border: 1px solid;
}
.ContentTable th.Tfont, .ContentTable td.Tfont {
font-family: 'knile_Bold';
  text-align: center;
}
.modal-content table.ContentTable {
    margin-bottom: 18px;
}

/* lm document cards styling */
.TopLeftContent, 
.TopRightContent  {
    display: -webkit-inline-box;
}
.Leftcontact, .Rightcontact {
border: 3px solid #5a287d;
    border-radius: 20px;
}
.Rightcontact {
    margin-top: 15px;
  margin-right: 10px;
    }
.Leftcontact {
    margin-top: 15px;
}
#overview .modal-content {
  color: #333;
}
/*Overview Page Styling*/
.LeftBoxOverview {
    float: left;
    width: 50%;
    border: 2px solid;
    border-radius: 18px;
    background-color: #f50056;
    color: white;
}
.LeftBoxOverview p {
    padding: 15px;
}
.RightBoxOverview {
    width: 50%;
    float: right;
    border: 2px solid;
    border-radius: 18px;
    background-color: #ae00ff;
    color: white;
	padding: 11px;
    padding-bottom: 20px;
}
.Leftcontact.OverviewLearnMorePDF {
    background-color: white;
}
.LeftBoxOverview {
    margin-right: 15px;
    padding-top: 20px;
}
p.YourGuide {
  color: white;
  padding-top: 0px;
  }
.TopLearnMoreContent {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
.LearnMoreMiddleContent {
    background-color: #f2f2f8;
    padding: 10px;
    margin: 10px;
    padding-top: 0px;
}
#benefit-overview #overviewAccordion .panel-title {
    font-size: 24px;
}
.TableOverview {
    padding-top: 30px;
}

/*Wellbeing Page*/
table.Wellbeing td {
    padding: 5px;
}
/*Pension Module Image*/
.bootstrap-iso .homepage-module-container img.pension {
    max-height: 150px;
}

/*Benefit Icon*/
#Line_56a20113-33da-4fd5-8ed1-cfece7c796e0.glyphicon-info.glyphicon-info-sign.glyphicon-info-sign-color,
.BenefitIntro_56a20113-33da-4fd5-8ed1-cfece7c796e0 span.glyphicon.glyphicon-info-sign.glyphicon-info-sign-color {
    display: none;
}

/* Minification failed (line 3209, error number 1039): Token not allowed after unary operator: '-benefit-icon-color' */