/*CLIENT CUSTOM CSS CODE HERE */ /* font declaration for using OnlineTwoIconFont set */ @font-face { font-family:'OnlineTwoIconFont'; src:url('/fluxysbenefits/media/ImageFiles/Fonts/OnlineTwoIconFont_v2.eot'); src:url('/fluxysbenefits/media/ImageFiles/Fonts/OnlineTwoIconFont_v2.eot?#iefix') format('embedded-opentype'), url('/fluxysbenefits/media/ImageFiles/Fonts/OnlineTwoIconFont_v2.woff') format('woff'), url('/fluxysbenefits/media/ImageFiles/Fonts/OnlineTwoIconFont_v2.ttf') format('truetype'), url('/fluxysbenefits/media/ImageFiles/Fonts/OnlineTwoIconFont_v2.svg') format('svg'); font-weight:normal; font-style:normal; } /* 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%; } } :root { --heading-color: #a9a9a9; --button-color: #a9a9a9; --button-color-alternate: #a9a9a9; --button-text-color: #fff; --button-hover-color: #d3d3d3; --button-hover-text-color: #000; --button-click-color: #2f4f4f; --button-click-text-color: #fff; --link-text-color: #a9a9a9; --link-text-hover-color: #d3d3d3; --link-text-click-color: #2f4f4f; --header-overlay: #a9a9a9; --panel-color: #a9a9a9; --info-icon-color: #a9a9a9; --tab-selector-text-color: #2f4f4f; --tab-selector-border-color: #2f4f4f; --tab-selector-inactive-text-color: #d3d3d3; --progress-bar-color: #a9a9a9; --success-icon-color: #a9a9a9; --unordered-list-bullet-color: #a9a9a9; --datepicker-today: #a9a9a9; --datepicker-clear: #a9a9a9; --datepicker-close: #a9a9a9; --slider-toggle-color: #a9a9a9; --benefit-icon-color: #a9a9a9; --linegroup1-benefit-icon-color: #a9a9a9; --linegroup2-benefit-icon-color: #a9a9a9; --linegroup3-benefit-icon-color: #a9a9a9; --life-event-background: #c0c0c0; --logo: url(/benefitsadminuk2/media/MediaLibrary/UK%20Branded%20Demo%20Images/Logo.png); --login-image: url(/static/Aon.Marketplace/img/online2/loginbody.jpg); --site-header-color: #a9a9a9; --site-header-icon-color: #fff; --site-footer-color: #a9a9a9; --site-footer-link-color: #fff; --need-assistance-pull-down-menu: #a9a9a9; --homepage-module-background-color: #a9a9a9; --homepage-heading-color: #a9a9a9; --homepage-module-icon-color: #a9a9a9; --homepage-enrolment-days-left-color: #a9a9a9; --carousel-heading-color: #fff; --carousel-text-color: #fff; --pulse-color-start: rgba(47,79,79,.5); --pulse-color-end: rgba(47,79,79,0); --selected-email-color: #2f4f4f; --benefit-selection-elected-box-highlight: #2f4f4f; --follow-up-panel-color: #2f4f4f; --mobile-menu-icon-color: #fff; --mobile-menu-link-color: #a9a9a9; } @keyframes shadow-pulse { 0% { box-shadow: 0 0 0 0px rgba(47,79,79,.5); } 100% { box-shadow: 0 0 0 10px rgba(47,79,79,0); } } @keyframes enrolment-pulse { 0% { box-shadow: 0 0 0 0px rgba(255,255,255,.5); } 100% { box-shadow: 0 0 0 10px rgba(47,79,79,0); } } /****************************************** utility classes *******************************************/ /* margin-top 0 */ .bootstrap-iso .mt-0 { margin-top: 0; } /* allow use of OnlineTwoIconFont for anything with this class */ [class*="online-two-icon-"]:before{ font-family:OnlineTwoIconFont; } /* icons on the benefit intro popups */ .benefit-information [class*="online-two-icon-"]::before { font-size: 15em; line-height: 1; } /* for adding full stop after resource string */ .full-stop:after { content: '.'; position: relative; left: -.25em; } /* for adding comma after resource string */ .comma:after { content: ','; position: relative; left: -.25em; } /* for adding right parenthesis after resource string */ .right-parenthesis:after { content: ')'; position: relative; left: -.25em; } /* Red span class (red text on confirm popup) */ span.text-red{ color: red; } /* global font size */ .bootstrap-iso { font-size: 1rem; } /******************************************General styling*********************************************/ /*SWITCH OFF ITEMS WHICH ARE NOT APPLICABLE TO THE EMEA OFFERING*/ h3.content-in-cart, #content .two-colum .products .links-group A.link-checkbox, A.link-checkbox, div.plan-compare[id^=compare], div.return-to-cart a img, .available-options .links-group.four-links {display:none;} /*END*/ span.mb-1 { display: inline-block; margin-bottom: 1em; } /* Ensures accordians arrows work more logically*/ .benefitmatrix-container .glyphicon-menu-down::before {content:'\e260';} .benefitmatrix-container .glyphicon-menu-up::before {content:'\e259';} /*Language box styling*/ select#ddlLanguage {border: 1px solid lightgray!important;} /* Hides the mailbox link and message count from the drop down on mobile devices */ #mobile-links .jq-dropdown .jq-dropdown-menu li a[href^="/Mailbox"], #mobile-links .jq-dropdown .jq-dropdown-menu li span#messagecount{ display: none; } /* Adjust menu buttons on mobile devices to ensure logo is alway central */ #header > a.main-menu-toogle, #header a.user-toogle{ width: 15%; } /****************************************** remove text transform *******************************************/ /* language selection */ #links LI:first-child select#ddlLanguage, /* main navigation bar links */ #menu-no-dashboard li a, #menu li a, #menu-sub li a, /* labels on Profile page */ html#profile body#profile .profile #profile-online-2 span.label, html#profile body#profile .profile #profile-online-2 label:not(.ui-button), /* labels */ span.label, label, /* benefit selection page items */ .in-Cart .cost P, .in-Cart .funded P, .your-beneficiaries .txt-beneficiaries H4, /* footer links */ .online-two-iso #footer a { text-transform: none; } /****************************************** heading styling *******************************************/ h1, h2, h3, h4, h5, h6, .online-two-iso h1, .online-two-iso h2, .online-two-iso h3, .online-two-iso h4, .online-two-iso h5, .online-two-iso h6, .bootstrap-iso h1, .bootstrap-iso h2, .bootstrap-iso h3, .bootstrap-iso h4, .bootstrap-iso h5, .bootstrap-iso h6, /* BENEFITS header on popup when removing dependants attached to cover */ .coverageHeader { color: #15234A; padding-left: 0; } /****************************************** link styling *******************************************/ a, .bootstrap-iso a, .dependant-list a.dependant-confirm-delete, .terms-conditions-cookies .cookie-policy-link, .terms-conditions-cookies .term-condtion-link { color: #51C1C3; } 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: #51C1C3; } 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: #51C1C3; } /****************************************** button styling *******************************************/ /* 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, .online-two-iso .fsaClaimSubmitContainer .btn-success, .online-two-iso .fsaClaimSubmitContainer .btn-default, .online-two-iso .fsaClaimSubmitContainer .btn-primary, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.green, .online-two-iso A.button-style.green{ background-color: #959595; border: none; border-radius: 20px; color: #fff; font-weight: bold; overflow: hidden; position: relative; transition: all .25s; z-index: 1; } /* hover colour */ .bootstrap-iso .btn-primary:hover, .bootstrap-iso .btn-danger:hover, .bootstrap-iso .btn-info:hover, .bootstrap-iso .btn-default:hover, .bootstrap-iso .btn-warning:hover, .bootstrap-iso .btn-success:hover, .bootstrap-iso .btn-popup:hover, .online-two-iso A.button-style:hover, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:hover, .online-two-iso A.button-style.blue:hover, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:hover, .online-two-iso A.button-style.gray:hover, .benefit-matrix .row .btn-success:hover, .benefitheader-fixed div#followup-items a.btn:hover, .benefitheader-fixed div#resettodefaults a.btn:hover, .benefit-matrix .confirm-checkout-button .btn-success:hover{ background-color: #959595; border-radius: 20px; border: none; box-shadow: none; color: #fff; } .online-two-iso .fsaClaimSubmitContainer .btn-success:hover, .online-two-iso .fsaClaimSubmitContainer .btn-default:hover, .online-two-iso .fsaClaimSubmitContainer .btn-primary:hover{ background-color: #51C1C3; border-radius: 20px; border: none; box-shadow: none; color: #fff; } /* 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, .online-two-iso .fsaClaimSubmitContainer .btn-success:focus, .online-two-iso .fsaClaimSubmitContainer .btn-default:focus, .online-two-iso .fsaClaimSubmitContainer .btn-primary:focus{ background-color: #51C1C3; border-radius: 20px; border: none; box-shadow: none; color: #fff; outline: none; } /* when clicked colour */ .bootstrap-iso .btn-primary:active, .bootstrap-iso .btn-primary:active:hover, .bootstrap-iso .btn-primary:active:focus, .bootstrap-iso .btn-danger:active, .bootstrap-iso .btn-danger:active:hover, .bootstrap-iso .btn-danger:active:focus, .bootstrap-iso .btn-info:active, .bootstrap-iso .btn-info:active:hover, .bootstrap-iso .btn-info:active:focus, .bootstrap-iso .btn-default:active, .bootstrap-iso .btn-default:active:hover, .bootstrap-iso .btn-default:active:focus, .bootstrap-iso .btn-warning:active, .bootstrap-iso .btn-warning:active:hover, .bootstrap-iso .btn-warning:active:focus, .bootstrap-iso .btn-success:active, .bootstrap-iso .btn-success:active:hover, .bootstrap-iso .btn-success:active:focus, .bootstrap-iso .btn-popup:active, .bootstrap-iso .btn-popup:active:hover, .bootstrap-iso .btn-popup:active:focus, .online-two-iso A.button-style:active, .online-two-iso A.button-style:active:hover, .online-two-iso A.button-style:active:focus, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:hover, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:focus, .online-two-iso A.button-style.blue:active, .online-two-iso A.button-style.blue:active:hover, .online-two-iso A.button-style.blue:active:focus, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:hover, .online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:focus, .online-two-iso A.button-style.gray:active, .online-two-iso A.button-style.gray:active:hover, .online-two-iso A.button-style.gray:active:focus, .benefitheader-fixed div#followup-items a.btn:active, .benefitheader-fixed div#followup-items a.btn:active:hover, .benefitheader-fixed div#followup-items a.btn:active:focus, .benefitheader-fixed div#resettodefaults a.btn:active, .benefitheader-fixed div#resettodefaults a.btn:active:hover, .benefitheader-fixed div#resettodefaults a.btn:active:focus, .benefit-matrix .confirm-checkout-button .btn-success:active, .benefit-matrix .confirm-checkout-button .btn-success:active:hover, .benefit-matrix .confirm-checkout-button .btn-success:active:focus, .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:active, .online-two-iso .fsaClaimSubmitContainer .btn-default:active:hover, .online-two-iso .fsaClaimSubmitContainer .btn-default:active: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: #51C1C3; border-radius: 20px; border: none; box-shadow: none; color: #fff; outline: none; } /* =========================================================================== BUTTON ALIGNMENT TO BOTTOM OF HOMEPAGE MODULE ============================================================================== Guidelines: Use Kentico module fields if only requiring one button on Generic module types. If multiple buttons required on Generic module types, use Bootstrap classes of "btn" and "btn-default" for your tag, wrapped in individual

tags, which in turn are wrapped in a

with class "generic-buttons" ============================================================================== */ @supports not (-ms-high-contrast: none){ @media only screen and (min-width: 768px) { /* make module items flex containers and set direction and size */ .module-content, .module-content > div, .module-content > div > div, .module-content > div > div > div:last-child, .module-content > div > div > div:last-child .module-copy, .module-content > div > div > div:last-child .module-copy .content-text, .module-content > div > div > div:last-child .module-copy > div:last-child, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-active, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-inactive, .module-content > div > div > div > div.module-copy > div:last-child div.event-content div.text-light, .module-content > div > div .home-module-generic-content .generic-copy.module-copy .generic-buttons, .module-content > div > div > div:last-child .module-copy > .trs-buttons, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-buttons { display: flex; flex-direction: column; flex: 1; } } } /* for styling buttons that convey meaning of a negative action e.g. cancel/close/remove etc. */ .bootstrap-iso .modal-controls .btn-warning, .online-two-iso #exit-cancel A.button-style.blue, .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning, .bootstrap-iso .btn-warning.dependant-cancel-btn { background-color: #959595; } .bootstrap-iso .modal-controls .btn-warning:hover, .bootstrap-iso .modal-controls .btn-warning:focus, .online-two-iso #exit-cancel A.button-style.blue:hover, .online-two-iso #exit-cancel A.button-style.blue:focus, .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:hover, .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:focus, .bootstrap-iso .btn-warning.dependant-cancel-btn:hover, .bootstrap-iso .btn-warning.dependant-cancel-btn:focus { background-color: #51C1C3; } .bootstrap-iso .modal-controls .btn-warning:active, .bootstrap-iso .modal-controls .btn-warning:active:hover, .bootstrap-iso .modal-controls .btn-warning:active:focus, .online-two-iso #exit-cancel A.button-style.blue:active, .online-two-iso #exit-cancel A.button-style.blue:active:hover, .online-two-iso #exit-cancel A.button-style.blue:active:focus, .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active, .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active:hover, .bootstrap-iso .modeller-footer .modeller-close-button.btn-warning:active:focus, .bootstrap-iso .btn-warning.dependant-cancel-btn:active, .bootstrap-iso .btn-warning.dependant-cancel-btn:active:hover, .bootstrap-iso .btn-warning.dependant-cancel-btn:active:focus { background-color: #51C1C3; } /*Enrolment Button*/ /* buttons on enrolment modules */ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:active, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:active:hover, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:active:focus{ animation: enrolment-pulse 1s infinite; background-color: #AEBF51; color: #fff; border: 2px solid transparent } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:hover, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content .btn.btn-default:focus{ background-color: #AEBF51; color: white; border: 3px solid #AEBF51; } /* hover effects */ .bootstrap-iso *[class*="btn btn-"]:before, .bootstrap-iso *[class*="btn btn-"]:before, .bootstrap-iso *[class*="button-s"]:before { content: ''; width: 100%; height: 4em; background-color: #51C1C3; position: absolute; top: 0; left: 0; transform: translate3d(-5em, -1em, 0) rotate3d(0, 0, 1, -45deg); transform-origin: top left; transition: all .25s; z-index: -1; } .bootstrap-iso *[class*="btn btn-"]:hover:before, .bootstrap-iso *[class*="btn btn-"]:hover:before, .bootstrap-iso *[class*="button-s"]:hover:before, .bootstrap-iso *[class*="btn btn-"]:focus:before, .bootstrap-iso *[class*="btn btn-"]:focus:before, .bootstrap-iso *[class*="button-s"]:focus:before { opacity: 1; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); } /****************************************** list styling ***********************************/ /* unordered lists */ .bootstrap-iso ul.fa-ul li::before { font-family: FontAwesome; content: '\f111'; font-size: .5em; padding-right: .5em; position: relative; bottom: 2px; color: #000; } /* ordered lists */ .bootstrap-iso ol { padding-left: 0; margin-left: 2.14285714em; list-style-type: decimal; } ul.fa-ul > li { position: relative; } .fa-ol { padding-left: 0; margin-left: 2.14285714em; } .decimal { list-style-type: decimal; } .lower-roman { list-style-type: lower-roman; } /****************************************** popup styling ***********************************/ /* header colour */ .online-two-iso .header-overlay, .online-two-iso .tab-header, .bootstrap-iso .modal-header { background-color: #51C1C3; } /* reset benefit intro popup to not have header overlay colour */ .online-two-iso [class*="LineDetail"] .tab-header { background-color: #f2f2f2; } /* header title colour */ @media only screen and (min-width: 768px) { #login-assistance .header-overlay #TitleResetPassword, .bootstrap-iso .modellersModalHeader, .bootstrap-iso .dependantModalHeader, #followup-items-overlay.online-followup-items #followup-items-title, #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: #fff; } .benefitmatrix-container .benefit-matrix .benefitheader { color: #fff; font-weight: bold; } } /* close icon */ .online-two-iso .header-overlay A.close, .online-two-iso .modal-large .close, html#profile body#profile .profile #profile-online-2 .header-overlay A { background: none; visibility: hidden; } .online-two-iso .header-overlay A.close:after, .online-two-iso .modal-large .close:after, html#profile body#profile .profile #profile-online-2 .header-overlay A:after { content: '\e014'; color: white; font-family: 'Glyphicons Halflings'; visibility: visible; } /* reset benefit intro close icon to be default colour after resetting header background colour */ .online-two-iso .modal-large [class*="LineDetail"] .close:after { color: #666; } .bootstrap-iso .close, .bootstrap-iso .close:hover, .bootstrap-iso .close:focus, .bootstrap-iso .close:active, .bootstrap-iso .close:active:hover, .bootstrap-iso .close:active:focus, .online-two-iso .modal-normal .close { color: #666; } /* position of close icon */ .online-two-iso .modal-large .close { top: .5em; right: .5em; } .header-overlay A { padding: 4px .5em 0 0; } /****************************************** tab selectors e.g. Manage dependants widget, benefit intro, profile etc. *******************************************/ .online-two-iso [class*="modal"] a.tab-selector-link:hover, .online-two-iso [class*="modal"] .tab-selector-link.active, html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A, html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A:hover { color: #000; border-bottom: .5em solid #51C1C3; } .online-two-iso .modal-normal .tab-selector-link, .online-two-iso .modal-large .tab-selector-link, .online-two-iso .modal-normal .tab-selector-link.inactive, .online-two-iso .modal-large .tab-selector-link.inactive, html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A { color: #000; } /****************************************** collapsible accordion styling **************/ /* background colour */ .benefit-matrix .benefit-category .panel-default > .panel-heading, .trsdashboard .panel-default > .panel-heading, #benefit-overview #overviewAccordion .panel-default > .panel-heading { background-color: #a9a9a9; } /* panel title */ .bootstrap-iso .panel-title { padding-left: 10px; } /* expand/collapse icons */ .bootstrap-iso .glyphicon-menu-down, .bootstrap-iso .glyphicon-menu-up { transition: all .25s } .bootstrap-iso .glyphicon-menu-up { transform: rotate(-180deg); } .bootstrap-iso .glyphicon-menu-down:before, .bootstrap-iso .glyphicon-menu-up:before { font-family: 'Glyphicons Halflings'; content: '\e259'; } /****************************************** info icon color *******************************/ .benefit-matrix .row.title .glyphicon-info-sign-color { color: #51C1C3; } /****************************************** slider toggle color *******************************/ .online-two-iso input:checked + .slider { background-color: #51C1C3; } /****************************************** logo ***********************************/ #logo { background-image: url(/fluxysbenefits/media/ImageFiles/Logo%20Images/FluxysLogo.png); background-size: 230px; background-position: center; background-repeat: no-repeat; } /* centering logo on mobile view */ @media only screen and (max-width: 767px) { #logo { width: calc(100vw - 100px); } } /****************************************** site header ***********************************/ /* header colour */ .online-two-iso #terminator #header.header-fullwidth { background-image: linear-gradient(to right, #51C1C3, #AEBF51); } @media only screen and (max-width: 768px) { .online-two-iso #terminator #header.header-fullwidth { background-image: linear-gradient(to right, #51C1C3, #AEBF51); } } /* header icons profile, mailbox and logout, and main 'home' link */ @media only screen and (min-width: 768px){ #menu-container ul#menu-no-dashboard li a, #user-div a { color: #fff; } } /* need assistance pull down tab */ .help-ico .helptoggle { background-image: none!important; background-color: #51C1C3; } #header .help-ico a.helptoggle { color: white; } /* use font awesome play icon to repreent the expanded/collaped menu icon */ #header .help-ico a.helptoggle[aria-expanded="true"]:after, #header .help-ico a.helptoggle[aria-expanded="false"]:after { font-family: FontAwesome; content: '\f04b'; color: white; display: inline-block; transform: rotate(90deg); font-size: .75em; position: relative; left: 1em; top: -1px; } /* this ensures the icon faces up when the menu is expanded */ #header .help-ico a.helptoggle[aria-expanded="true"]:after { transform: rotate(-90deg); } /* remove search */ #floating-header-content .search { display: none; } /*remove default icons */ #floating-header-content a { background: none; } /*general styling for font icons to be used*/ #floating-header-content .chat a:before, #floating-header-content .call a:before, #floating-header-content .mail a:before { font-family: FontAwesome; margin-left: -1em; padding-right: .25em; font-size: 3em; vertical-align: middle; } /*chat icon*/ #floating-header-content li#webChatStatus #chatUnavailable a:before, #floating-header-content li#webChatStatus #chatAvailable a:before { content: '\f0e6'; } /*call icon*/ #floating-header-content li.call a:before { content: '\f10b'; } /*mail icon*/ #floating-header-content li.mail a:before { content: '\f003'; } @media only screen and (min-width:768px){ /* link color and width */ #floating-header-content a, #floating-header-content .chat a:hover, #floating-header-content .call a:hover, #floating-header-content .mail a:hover, #floating-header-content .chat a:focus, #floating-header-content .call a:focus, #floating-header-content .mail a:focus { color: #959595; width: auto; padding: 0 1em; } /* hover colour of links in floating header */ #header a:hover { color: #fff; text-decoration: none; } /* focus colour of links in floating header */ #header a:focus { color: #fff; text-decoration: none; } } /****************************************** site footer ***********************************/ /* footer colour */ .online-two-iso #terminator #footer.footer-fullwidth { background-image: linear-gradient(to right, #51C1C3, #AEBF51); } /* footer link color */ .online-two-iso #footer a { color: #fff; font-weight: bold; } /* copyright */ #footer-copyright { color: #fff; font-size: 12px; padding: 0 0 0 17px; margin: 9px 0; } @media only screen and (min-width: 768px){ /* display nav items in one line */ #footer.footer-fullwidth nav ul#footer-links li { display: inline-block; } #footer div { vertical-align: text-bottom; } } /****************************************** login page styling ************************/ /********LOGIN PAGE STYLING*************/ /*General Styling*/ .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules { bottom: 0; min-height: 75%; } /* module headings */ .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-title { color: white; } /* Set font for icons in assistance module */ .bootstrap-iso #login-module-need-assistance span.glyph-icon:before{ width: 25px; display: inline-block; font-family: Glyphicons Halflings; font-size: 14px; } /* Apply icon for phone */ .bootstrap-iso #login-module-need-assistance span#glyph-phone:before{ content: "\e182"; } /* Apply icon for email */ .bootstrap-iso #login-module-need-assistance span#glyph-mail:before{ content: "\2709"; } /* login box label boxes */ .login-box .input-group span { min-width: 155px; } /* forgot password link */ .online-two-iso.login .LoginPageContainer .additional-services { color: #fff; font-style: italic; } /* hover colour */ .online-two-iso.login .LoginPageContainer .additional-services:hover{ color: #fff; font-style: italic; } /* error message for entering incorrect details */ .online-two-iso.login .LoginPageContainer span#errMsg { color: #fff; } /* module links */ #login-modules-container a { color: white; } @media only screen and (min-width:768px){ .isLoginPageWrapper #logo { visibility: hidden; } /* login image */ .online-two-iso.login body { background-image: url(/fluxysbenefits/media/ImageFiles/Logo%20Images/SmarReward_login-page_1681x1117_1.png); background-position: top; } /* login module background colour */ .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules { background-color: rgba(0,0,0,0.2); } /* login box position */ .online-two-iso.login .LoginPageContainer #main { margin-right: 2rem; } /* login box styling */ .online-two-iso.login .LoginPageContainer .panel.panel-default { box-shadow: none; } .online-two-iso.login .LoginPageContainer .panel.panel-default .panel-body { background-color: transparent; } } @media only screen and (min-width:375px) and (max-width:767px) { /* centering logo */ #wrapper.isLoginPageWrapper #header #logo { float: none; margin: 0 auto; } /* margin between header and login box */ #wrapper.isLoginPageWrapper #header { width: 100%; margin: 20px 0; } .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules { background: none; } } .password .input-group-addon, .username .input-group-addon {background-color: rgba(255,255,235,.75)} .password .form-control, .username .form-control {background-color: rgba(255,255,255,.9)} /****************************************** first time user page styling ************************/ .online-two-iso .validation-caption { color: #666; } /********Password Reset Page Styling******************/ .online-two-iso .header-overlay {background-color: #51C1C3;} /****************************************** Terms page (for agreeing to terms and cookie notice) *******************************************/ .terms-conditions-cookies .terms-conditions-cookies-header { padding-left: 0 } .terms-conditions-cookies .term-condition-error, .terms-conditions-cookies .cookie-notice, .terms-conditions-cookies .term-enabled { margin-left: 0 } .bootstrap-iso .cookie-notice.radio input, .bootstrap-iso .term-enabled.radio input { margin-top: 0 } .terms-conditions-cookies .term-condition-error { background-color: #e52321; color: white; border: none; } /* hide page header when in the modal content so title isn't duplicated */ .terms-conditions-cookies #page-header { display: none; } /* list styling for terms content for popup and for main terms page in footer */ .terms-conditions-cookies ol, .bootstrap-iso#termsOfUse ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } .terms-conditions-cookies ol > li, .bootstrap-iso#termsOfUse ol > li { display: table; counter-increment: item; margin-bottom: 0.6em; } .terms-conditions-cookies ol > li:before, .bootstrap-iso#termsOfUse ol > li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em; } .terms-conditions-cookies ol.main-list > li:before, .bootstrap-iso#termsOfUse ol.main-list > li:before { font-size: 24px; padding-right: .25em; } .terms-conditions-cookies li ol > li, .bootstrap-iso#termsOfUse li ol > li { margin: 0; } .terms-conditions-cookies li ol > li:before, .bootstrap-iso#termsOfUse li ol > li:before { content: counters(item, ".") " "; } /****************************************** home page styling ************************/ /* Profile and Log out pop-up visibility */ .ui-tooltip, .bootstrap-iso .tooltip { color: #FFF; opacity:1; box-shadow: none; border: 1px solid; background-color: #51C1C3; } /* remove margin on main element on home page to bring footer together with main element */ #main.home { margin-bottom: 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: #15234A; } /*module heading color for purple modules only */ #home-online-three #home-integrated #enrolment .module-content-header-container h3.module-content-header { color: #fff; } /* more info icon hover colour on blue modules */ #home-online-three #home-integrated #enrolment .module-content-header-container .online-three-module-popover-control:hover{ color: #fff; } /* make background colour of grid container same as for modules */ #home-online-three #home-integrated .modules-right-side.grid-container{ background-color: #e6e6e6; } /* background and padding colour for modules */ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content { background-color: #e6e6e6; padding: .5rem; } /* 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: 0; box-shadow: 5px 6px 2px 0 rgba(0,0,0,.2),10px 6px 20px 5px rgba(0,0,0,.1); } /* 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: #fff; } @media only screen and (min-width:768px){ #otherCountdown { color: white; } #renewalCountdown { color: #fff; } #home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content#enrolment .enrollment-copy .event-summary h4.event-name, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#enrolment .enrollment-copy .event-summary h4.event-name, #home-online-three #right-side h3.heading-text, #home-online-three #home-integrated h3.heading-text { color: #fff; } } #home-online-three .modal-content .home-dashboard .modal-header .header { font-size: 1.3rem; color: #15234A; text-align: left; align-items: center; width: 90%; margin-top: 0; display: inline-block; } #home-online-three .modal-content .home-dashboard .modal-body { background-color: #fff; } /* blue background of enrolment module */ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment.module-content { background-color: #51C1C3; } /* colour of module labels */ .onlineTwoPointO-home .modules .module span.module-label { color: lightgrey; } /*full width module buttons */ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#enrolment .btn.btn-default, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default { min-width: 125px; max-width: 75%; } /*Hide the 'i' icon for My Flex Plan My Reward modules*/ .enrollment-copy.module-copy .glyphicon.glyphicon-info-sign, .trs-copy.module-copy .glyphicon.glyphicon-info-sign { display: none } /* button max width 75% when on HD screens and above */ @media only screen and (min-width:1921px){ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#enrolment .btn.btn-default, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default { max-width: 75% } } /* Home Page Styling for large hand-held devices*/ @media only screen and (max-width:800px) { .onlineTwoPointO-home #home-modules span.module-label.ng-binding {font-size:10px; } } @media only screen and (min-width:769px) { #home-module-generic.ng-fade .generic-copy, #home-module-generic.ng-fade .generic-buttons.ng-scope {vertical-align: top; } } /* module icon styling*/ [class*="online-two-icon-"]:before{ color: #959595; font-family:OnlineTwoIconFont; font-size: 8em; } /* my documents icon*/ .online-two-icon-45:before { content: "\e92d"; } /* Flex information icon */ .online-two-icon-95:before { content: "\e962"; } /* Interactive TRS PDF icon */ .online-two-icon-136:before { content: "\e98b"; } /* Placeholder module styling - for when Clients do not have TRS or Reimbursement modules */ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonTRS { padding: 0; background: url(/fluxysbenefits/media/ImageFiles/Home%20Page%20Module%20Images/Aon_SmartReward-TBS_Dashboard-images-2.png) no-repeat top/cover; } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonReimbursementClaim { padding: 0; background: url(/fluxysbenefits/media/ImageFiles/Home%20Page%20Module%20Images/Aon_SmartReward-TBS_Dashboard-images-1.png) no-repeat top/cover; } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonReimbursementOverview { padding: 0; background: url(/fluxysbenefits/media/ImageFiles/Home%20Page%20Module%20Images/Aon_SmartReward-TBS_Dashboard-images-3.png) no-repeat top/cover; } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonTRS .module-content-header-container, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonReimbursementClaim .module-content-header-container, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.NonReimbursementOverview .module-content-header-container{ display: none; } /************************************************Claims**********************************/ /* reset certain properties to deal with pagers on claims modules */ #home-online-three #home-integrated #make-a-claim, #home-online-three #home-integrated #manage-claims { padding-bottom: 1rem } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager { display: none; } .online-two-iso .fsaClaimSubmitContainer .webpartTitle { background-color: #fff; } .fsaClaimSubmitContainer #flexClaimTitle h1, .online-two-iso .fsaClaimSubmitContainer h3 { color: #15234A; font-weight: bold; margin-bottom: 0; margin-top: 0; } div#claimDetail.row, div#receiptDetail.row, div#Attachment.row, #claimItemBreakdownDetail { padding-bottom: 0px; } .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager { align-self: center; } /* 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 } .fsaClaimSubmitContainer #flexClaimTitle h1, .online-two-iso .fsaClaimSubmitContainer h3 { color: #15234A; 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: #666; } /* 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: #51C1C3; border: none; transition: background-color .25s } .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group button:first-of-type { border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-right: 1px solid #fff; } .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group button:last-of-type { border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-left: 1px solid #fff; } /* selected year/month/day and hover styling */ .fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active, .fsaClaimSubmitContainer .uib-datepicker-popup .btn-group .btn:hover { background-color: #959595; } .fsaClaimSubmitContainer .uib-datepicker-popup .btn.btn-default.active .text-info { color: #fff; } /* claim submitted table header styling */ .claimSubmittedHeader { background-color: #666; } .online-two-iso .claimSubmittedHeader h3 { color: #fff; } /* claim overview */ /* links */ body#StatementAndClaimSubmit #wrapper a { color: #51C1C3; } body#StatementAndClaimSubmit #wrapper a:hover, body#StatementAndClaimSubmit #wrapper a:focus { color: #51C1C3; text-decoration: none; } body#StatementAndClaimSubmit #wrapper a:active, body#StatementAndClaimSubmit #wrapper a:active:hover, body#StatementAndClaimSubmit #wrapper a:active:focus { color: #51C1C3; } /* navigation tabs */ .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A { text-transform: none; } .FSAStatementAndHistoryContainer .htabs-container, .FSAStatementAndHistoryContainer .htabs-container .tabs-bg, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel STRONG, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A { background: none; } .FSAStatementAndHistoryContainer .htabs-container .tabs-bg { background: linear-gradient(to bottom, #fff, #ededed) } .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI { background-color: transparent!important; background: url(/smartrewardNL/media/Images/Misc%20Icons/Aon_TBS-lite_Icons-9_off.png) no-repeat 50% 20% } .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI:hover { background-color: transparent!important; background: url(/smartrewardNL/media/Images/Misc%20Icons/Aon_TBS-lite_Icons-9.png) no-repeat 50% 20% } .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A { font-size: 1em; } #StatementAndClaimSubmit .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI.sel A, .FSAStatementAndHistoryContainer .htabs-container .tabs UL LI A:hover { border-bottom: .5em solid #666; color: #666; 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: #51C1C3; margin-bottom: 0; } .online-two-iso .claim-history h2 { color: #666; } /* hover effect for the tables */ .claim-history .claim-table > tbody > tr:hover { background-color: #f5f5f5; } /* Pending, Approved and Rejected icons */ .claim-approved img { display: none; } .claim-approved a:before { font-family: FontAwesome; font-size: 1.75em; width: 20px; height: 20px; display: inline-block; } .claim-approved a:hover { text-decoration: none; } .claim-approved a:hover:before, .claim-approved a:focus:before{ transform: scale(1.3); } .claim-approved a[title="Approved"]:before, .claim-approved a[title="Approuvé"]:before, .claim-approved a[title="Goedgekeurd"]:before { content: '\f00c'; color: #AEBF51; } .claim-approved a[title="Rejected"]:before, .claim-approved a[title="Rejeté"]:before, .claim-approved a[title="Geweigerd"]:before { content: '\f00d'; color: #51C1C3; } .claim-approved a[title="Pending"]:before, .claim-approved a[title="En attente"]:before, .claim-approved a[title="Afwachting"]:before { content: '\f0ec'; color: #666 } /* buttons in popup modal */ .claim-edit-link .btn.btn-primary, .claim-edit-link .btn.btn-info { background-color: #959595; color: #fff; border: none; border-radius: 25px; transition: background-color .25s } body#StatementAndClaimSubmit .btn-default { background-color: #AEBF51; color: #fff; border: none; border-radius: 25px; transition: background-color .25s } .claim-edit-link .btn.btn-primary:hover, .claim-edit-link .btn.btn-primary:focus, .claim-edit-link .btn.btn-primary:active, .claim-edit-link .btn.btn-primary:active:hover, .claim-edit-link .btn.btn-primary:active:focus, .claim-edit-link .btn.btn-info:hover, .claim-edit-link .btn.btn-info:focus, .claim-edit-link .btn.btn-info:active, .claim-edit-link .btn.btn-info:active:hover, .claim-edit-link .btn.btn-info:active:focus, body#StatementAndClaimSubmit .btn-default:hover, body#StatementAndClaimSubmit .btn-default:focus, body#StatementAndClaimSubmit .btn-default:active, body#StatementAndClaimSubmit .btn-default:active:hover, body#StatementAndClaimSubmit .btn-default:active:focus{ background-color: #51C1C3; } /* 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: #666; color: #fff; font-weight: bold; } /* table headings on FSA statement tab */ .fsa-table-caption .section_title, .subtitle-claims .section_title { color: #666; } .online-two-iso #wrapper.StatementAndClaimSubmit, .online-two-iso .StatementAndClaimSubmit .page-content{ width: 75vw } .online-two-iso .StatementAndClaimSubmit .htabs-container .tabs UL LI, .online-two-iso .StatementAndClaimSubmit .htabs-container .tabs UL LI A { width: auto } .online-two-iso .StatementAndClaimSubmit .htabs-container .tabs UL LI + LI A { padding-left: 1em } /* align flex containers housing buttons to bottom of module */ #generic.module-content > div > div .home-module-generic-content .generic-copy.module-copy .generic-buttons, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-active, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child #event-inactive, .module-content > div > div > div:last-child .module-copy .benefit-statement-buttons, .module-content > div > div > div:last-child .module-copy > .trs-buttons, .module-content > div > div > div:last-child .module-copy > .account-buttons, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-buttons { justify-content: flex-end; } /* remove margin on certain containers to ensure buttons align at the bottom of module */ .module-content > div > div > div:last-child .module-copy .content-text, .module-content > div > div > div:last-child .module-copy .content-text p:last-of-type:not(:first-of-type) { margin: 0 } } } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager { display: none; } /*** 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: #666; font-size: 1.2em; } /* carousel slide content headings */ .home-module-integrated .content h2, .home-module-integrated .content h3 { margin-top: 0; color: #666; } /* carousel content buttons */ .home-module-integrated #slider .sliderContainer .slide-content .content .btn { font-size: .75em; } /*Hide arrows on carousel images*/ .left-icon, .right-icon { display: none; } @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; } } /*********************************************My Documents************************************************/ /* make table of documents responsive */ #tabledocuments { display: block!important; width: 100%; margin-bottom: 15px; overflow-y: hidden; } #tabledocuments th, #tabledocuments td { padding: 5px; } #tabledocuments > thead > tr > th { background-color: #51C1C3; } a#btnNewDocument { color: #AEBF51!important; } a#btnNewDocument:hover { color: #51C1C3!important; text-decoration: none; } #dlguploadDocument #btn-upload-document-save, #deleteDocumentDialog #dspdeleteDocument { background-color: #959595; border-radius: 25px; font-weight: bold; transition: background-color .25s; } #dlguploadDocument #btn-upload-document-cancel, #deleteDocumentDialog #btnCancelDocument .gray { background-color: #15234A; transition: background-color .25s; } #dlguploadDocument #btn-upload-document-save:hover, #dlguploadDocument #btn-upload-document-save:focus, #dlguploadDocument #btn-upload-document-cancel:hover, #dlguploadDocument #btn-upload-document-cancel:focus, #deleteDocumentDialog #dspdeleteDocument:hover, #deleteDocumentDialog #dspdeleteDocument:focus, #deleteDocumentDialog #btnCancelDocument .gray:hover, #deleteDocumentDialog #btnCancelDocument .gray:focus { background-color: #51C1C3; } #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: #51C1C3; } /* Hide the status column in the documents table */ #documentsContainer table#tabledocuments th[data-bind*="locale.documentstatus"], #documentsContainer table#tabledocuments td[data-bind*="DocumentStatusForDisplay"]{ display: none; } /* 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; } } /*benefit matrix Flex Budget */ /* header */ .bootstrap-iso .modal .modal-header .benefitheader a span[tbs-translate="AddingUp.TableTitle"] { color: white; cursor: default; text-decoration: none; } .benefit-matrix .reschash-instruction { color: #666; } @media only screen and (max-width: 767px){ .bootstrap-iso .modal .modal-header .benefitheader { margin-top: 0; text-align: left; width: auto; } .bootstrap-iso .modal .modal-header .benefitheader a { font-size: 1rem; } } /****************************************** benefit overview page *******************************************/ /* heading */ #benefit-overview .benefit-overview-title { padding: 0; height: auto; } #benefit-overview .benefit-overview-title H1 { color: #15234A; font-size: 36px; line-height: 1; } .bootstrap-iso#benefit-overview #BenefitNameFilter { background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 0; color: #333; text-transform: none; text-align: left; width: 100%; overflow: hidden; } .bootstrap-iso#benefit-overview .clear-filter { background-color: #959595; border: none; color: #fff; } .bootstrap-iso#benefit-overview .clear-filter:hover, .bootstrap-iso#benefit-overview .clear-filter:focus { background-color: #959595; color: #fff; } .bootstrap-iso#benefit-overview .clear-filter:active, .bootstrap-iso#benefit-overview .clear-filter:active:hover, .bootstrap-iso#benefit-overview .clear-filter:active:focus { background-color: #51C1C3; color: #fff; } /* accodions */ #benefit-overview #overviewAccordion .panel-default > .panel-heading { background-color: #51C1C3; } #benefit-overview #overviewAccordion .panel-title, #benefit-overview #overviewAccordion .panel-title a:hover, #benefit-overview #overviewAccordion .panel-title a:focus { color: #fff; } #benefit-overview #overviewAccordion .panel-heading i { margin-right: .5em } /* know more buttons */ #benefit-overview .know-more-link .aria { display: none; } .bootstrap-iso#benefit-overview .btn.know-more-link { background-color: #959595; border: none; } .bootstrap-iso#benefit-overview .know-more-link A { color: #fff; padding: 0; text-transform: uppercase; } .bootstrap-iso#benefit-overview .btn.know-more-link:hover, .bootstrap-iso#benefit-overview .btn.know-more-link:focus { background-color: #51C1C3; } .bootstrap-iso#benefit-overview .know-more-link A:hover, .bootstrap-iso#benefit-overview .know-more-link A:focus { color: #fff; } .bootstrap-iso#benefit-overview .btn.know-more-link:active, .bootstrap-iso#benefit-overview .btn.know-more-link:active:hover, .bootstrap-iso#benefit-overview .btn.know-more-link:active:focus { background-color: #51C1C3; } .bootstrap-iso#benefit-overview .know-more-link A:active, .bootstrap-iso#benefit-overview .know-more-link A:active:hover, .bootstrap-iso#benefit-overview .know-more-link A:active:focus { color: #fff; } #BenefitNameFilter::before { background-color: white; } button#BenefitNameFilter.btn-popup.dropdown-toggle {background-color: #fff; border: 1px solid rgba(0,0,0,.55);font-weight:inherit; color:#555;} .form-control.ng-pristine.ng-untouched.ng-valid.ng-empty, .input-group-addon.input-icon-left {border: 1px solid rgba(0,0,0,.55);} #benefit-overview .summary {margin-top: 0px; margin-bottom: 5px;} .filter.overview-component span,.form-control.ng-pristine.ng-untouched.ng-valid.ng-empty {font-weight: bold;} /* Increase the width of the drop down control (to fit text) */ @media only screen and (min-width:768px){ #benefit-overview .input-control{ min-width: 475px; } } /****************************************** Reimbursement Module**********************************************/ #home-module-make-a-claim .make-a-claim-copy .make-a-claim-account-amount {float: none;} #home-module-make-a-claim .make-a-claim-copy .make-a-claim-data .account-details span.make-a-claim-account-amount {text-align: left;} @media only screen and (max-width:767px) { #home-module-make-a-claim .make-a-claim-copy.full-width {color: #000; font-size: 14px;} #home-module-make-a-claim .tbs-module-pager {font-size: 14px;} #home-module-make-a-claim .btn.btn-default span {font-size: 12px; font-weight:bold} } @media only screen and (min-width:769px) { #home-module-make-a-claim .make-a-claim-intro {top: 50px;} #home-module-make-a-claim .full-width, #home-module-make-a-claim .full-width .make-a-claim-buttons button {top: 50px; right: 50px} #home-module-make-a-claim .make-a-claim-copy {font-size: 17px} #home-module-make-a-claim.ng-fade .make-a-claim-intro {width: 30%;} #home-module-make-a-claim .make-a-claim-copy .make-a-claim-data .account-details span.make-a-claim-account-name { width: auto; } #home-module-make-a-claim .make-a-claim-copy .make-a-claim-data .account-details span.make-a-claim-account-amount { margin-left: .5em; } } /* Reimbursement overview styling*/ #home-module-manage-claims .manage-claims-copy {font-size: 17px} .tbs-module-pager .tbs-pager button:disabled::after { color:Transparent } .tbs-module-pager .tbs-pager button::after { color:#fff } th.claim-payment-date, td.claim-payment-date {display: none} /*hides the Payment Date fields on the Reimbursement Overview page*/ @media only screen and (max-width:768px) { #home-module-manage-claims .manage-claims-copy.full-width .tbs-pager-content .title.ng-binding {font-size: 20px;white-space:pre-wrap; padding-bottom: 10px} #home-module-manage-claims .manage-claims-copy.full-width .tbs-pager-content.ng-scope {font-size: 16px;} #home-module-manage-claims .btn.btn-default span {font-size: 12px; font-weight:bold} #home-module-manage-claims .manage-claims-copy {font-size: 14px} .tbs-module-pager .tbs-pager button:disabled::after { color:#fff } .tbs-module-pager .tbs-pager button::after { color:#000 } } @media only screen and (min-width:769px) { #home-module-manage-claims.ng-fade .full-width, #home-module-manage-claims .manage-claims-buttons {vertical-align: top;} #home-module-manage-claims .tbs-module-pager .tbs-pager-content .title {width: 30%;} #home-module-manage-claims .manage-claims-copy {font-size: 17px} .tbs-module-pager .tbs-pager button:disabled::after { color:Transparent } .tbs-module-pager .tbs-pager button::after { color:#fff } } /****************************************** benefit statement page *******************************************/ .benefit-matrix .benefitdate .data-addon { color: #666; } /* hide follow up info */ .benefit-matrix .hdf-followup.row { display: none; } /* color of Pending Requests widget icon */ .benefit-matrix .glyphicon.glyphicon-repeat { color: #666; } /* evenly space out the datepicker and widgets so the Dutch label doesn't overwrite anything */ @media only screen and (min-width:1024px){ .matrix.benefit-statement .benefitheader-fixed .row.margin-left .col-md-10.col-sm-10 { display: flex; justify-content: space-between } } /*Text transform off for Benefit Statement Date*/ .benefit-matrix .benefitdate { text-transform: none; } /*Remove date format*/ #dateFormat { display: none; } @media only screen and (min-width:768px){ /* benefit statement payslip data item styling */ #item-0, #item-1, #item-2 { width: calc(100% - 2em); margin-left: 1em; text-align: left; } .payslip-item-amount { float: right; } /* Fix alignment issue on the payslip data items in MyChoices module (caused by long data item name) */ @media only screen and (min-width: 768px){ .benefit-statement-information .payslip-item-details, .benefit-statement-information .payslip-item-details span{ display: inline-block; } .benefit-statement-information .payslip-item-details span{ max-width: 65%; } } @media only screen and (max-width: 767px){ #home-module-benefit-statement .benefit-statement-copy .payslip-item-data #item-0, #home-module-benefit-statement .benefit-statement-copy .payslip-item-data { font-size: 1rem; } #home-module-benefit-statement .benefit-statement-copy .payslip-item-name { font-weight: 300; } /* hide mailbox option from mobile drop down menu */ ul.jq-dropdown-menu li:nth-of-type(2) { display: none; } } /****************************************** benefit statement view follow up popup *******************************************/ .benefit-matrix .modal .hdf-followup { padding: 0; } /* overlay header */ .benefit-matrix .modal .modal-header .header { text-transform: uppercase; } .benefit-matrix .modal .hdffollowup-intro { color: #15234A; } /****************************************** benefit matrix styling **************************************/ /*Panel Heading*/ .benefit-matrix .benefit-category .panel-default > .panel-heading { background-color: #51C1C3; color: white; font-size: 20px; padding-left: 15px; } /*Override icons for the Benefits Matrix modules and buttons*/ .bootstrap-iso .glyphicon-cog:before {font-family:FontAwesome; content: '\f013'; color: #51C1C3; font-size:1.3em;} .bootstrap-iso .glyphicon-gift:before {font-family:FontAwesome; content: '\f0c0'; color: #51C1C3; font-size:1.3em;} .bootstrap-iso .glyphicon-refresh:before {font-family:FontAwesome; content: '\f021'; color: #51C1C3; font-size:1.3em;} .bootstrap-iso .glyphicon-repeat:before {font-family:FontAwesome; content: '\f01e'; color: #51C1C3; font-size:1.3em;} .bootstrap-iso .glyphicon-off:before {font-family:FontAwesome; content: '\f011'; color:#fff; font-size:1.3em;} .bootstrap-iso .glyphicon-ok:before {font-family:FontAwesome; content: '\f00c'; color:#fff; font-size:1.3em;} .bootstrap-iso .glyphicon-info-sign:before {font-family:FontAwesome; content: '\f05a'; color:#51C1C3; font-size:1.3em;} .bootstrap-iso .glyphicon-calendar:before, i.glyphicon-calendar:before {font-family:FontAwesome; content: '\f073'; color:#fff; font-size:18px;} .bootstrap-iso .glyphicon-print:before {font-family:FontAwesome; content: '\f02f'; color:#fff; font-size:1.3em;} .bootstrap-iso .glyphicon-search:before {font-family:FontAwesome; content: '\f002'; color:#000; font-size:1.3em;} /* all numerical values */ .benefit-matrix .font-youpay-color, .benefit-matrix .glyphicon-play-color { color: #51C1C3; } /* 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; } /* confirm choices button */ .benefitheader-fixed div#followup-items a.btn { animation: shadow-pulse 1s infinite; background-color: #959595; color: #fff; } .benefitheader-fixed div#followup-items a.btn:hover { background-color: #51C1C3; color: #fff; } .benefitheader-fixed div#followup-items a.btn:focus { background-color: #51C1C3; color: #fff; } .benefitheader-fixed div#followup-items a.btn:active, .benefitheader-fixed div#followup-items a.btn:active:hover, .benefitheader-fixed div#followup-items a.btn:active:focus { background-color: #51C1C3; color: #fff; } .benefitheader-fixed div#resettodefaults a.btn, .benefitheader-fixed div#resettodefaults a.btn:hover { margin-right: 10px } /* monthly annual pay toggle styling monthly button active */ .bootstrap-iso .btn-warning.active.btn-perpay { background-color: #51C1C3; border-color: #51C1C3; color: #fff; } /* annual button active */ .bootstrap-iso .btn-warning.active.btn-peranual { background-color: #51C1C3; border-color: #51C1C3; } /*monthly button inactive */ .bootstrap-iso .btn-group > .btn.btn-perpay:first-child:not(:last-child):not(.dropdown-toggle) { border-color: #51C1C3; } /*annual button inactive */ .bootstrap-iso .btn-group > .btn.btn-peranual:last-child:not(:first-child) { border-color: #51C1C3; } /* 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 #51C1C3; border-radius: 0 } /* 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; } /* line group text colour */ .benefit-matrix .group-default { color: #15234A; font-weight: bold; } /* line name */ .benefit-matrix .lineheader > a:link { color: #15234A; font-weight: bold; } .benefit-matrix .lineheader > a:link:hover, .benefit-matrix .lineheader > a:link:focus { color: #51C1C3; font-weight: bold; } .benefit-matrix .lineheader > a:link:active, .benefit-matrix .lineheader > a:link:active:hover, .benefit-matrix .lineheader > a:link:active:focus { color: #51C1C3; font-weight: bold; } /* select buttons */ .benefit-matrix .row .btn-success, .benefit-matrix .row .btn-success:hover, .benefit-matrix .row .btn-success:focus, .benefit-matrix .row .btn-success:active:hover { min-width: 75%; } .benefit-matrix .row .btn-success { background-color: #959595; } /* approved dependant and beneficiary listing text colour */ .benefit-matrix h4[tbs-translate="Enrollment.Step3.WhoIsCovered"], .benefit-matrix h5[tbs-translate="Enrollment.Online2.BeneficiaryAllocations"] { color: #15234A; } .benefit-matrix h5[tbs-translate="Enrollment.Online2.BeneficiaryAllocations"] { font-size: 18px; } .dependent-approved { color: #666; } /* new and changed labels */ .benefit-matrix .newbenefit, .benefit-matrix .changebenefit { background-color: #51C1C3; position: relative; top: -5px; } /* unlocked label */ .benefit-matrix .glyphicon-record, .benefit-matrix .acitve-text{ background-color: #51C1C3; color: #fff; visibility: hidden; } .benefit-matrix .glyphicon-record:before { content: ''; } .benefit-matrix .glyphicon-record .acitve-text { font-family: 'Open Sans'; font-weight: 500; padding: 2px 6px 3px 6px; text-transform: lowercase; top: -5px; visibility: visible; } a.btn.btn-success.btn-confirmchoice {background-color: #AEBF51!important; animation: shadow-pulse 1s infinite; border-radius: 20px;} a.btn.btn-warning.btn-resettodefaults span, a.btn.btn-success.btn-confirmchoice span {font-weight: bold;} /*Styling module titles*/ .col-md-8.btngroup span {font-weight: bold; color: #666;} /* 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; } /*Hide car option lines on Benefit Matrix for No Fixed Options*/ .BenefitIntro_9b6795d2-b1ea-43d2-955b-16abaae11947 [ng-repeat="line in linetype.LineSet.Lines"]{ display: none; } .BenefitIntro_9b6795d2-b1ea-43d2-955b-16abaae11947 [ng-repeat="line in linetype.LineSet.Lines"]:first-of-type{ display: inline; } /*Hide Bicycle Allowance Option lines on Benefit Matrix for Bicycle Allowance benefit*/ .BenefitIntro_422c071c-4c63-4ce8-9a56-c91b94f6b37b [ng-repeat="line in linetype.LineSet.Lines"]{ display: none; } .BenefitIntro_422c071c-4c63-4ce8-9a56-c91b94f6b37b [ng-repeat="line in linetype.LineSet.Lines"]:first-of-type{ display: inline; } /*END*/ /*Hide Commuting Use Line on Benefit Matrix for Company Bicyle*/ .BenefitIntro_6693f073-b45e-4c83-9d2e-4438ad7e786c [ng-repeat="line in linetype.LineSet.Lines"]:first-of-type{ display: none; } /*END*/ /*Hide Number of Children Line on Benefit Matrix for Company Bicyle*/ .BenefitIntro_e2a6d9f9-1eea-4f77-8289-6346c66c42f7 [ng-repeat="line in linetype.LineSet.Lines"]:first-of-type{ display: none; } /*Hide Build Your Own Title*/ .online-two-iso .header-overlay h5 {color: white; font-size: 20px;} .content-overlay .next-button a#byo-save {display: none;} .benefit-matrix .byocostsummary .row.ng-scope .col-xs-1.ng-binding, .benefit-matrix .byocostsummary .row.header .col-xs-1.ng-isolate-scope, .benefit-matrix .byocostsummary .row.footer .col-xs-1.ng-binding, .benefit-matrix .byocostsummary .row.ng-scope .col-xs-2.ng-binding, div.col-xs-2.PerPay.ng-binding.ng-scope.Show, div.col-xs-2.ng-scope.ng-isolate-scope { text-align: center; } .benefit-matrix .byocostsummary .row .col-xs-1{ width: 25%} /*BYO Styling END*/ /****************************************** benefit selection page **************************************/ /* continue button */ .benefitselect .continue, .benefitselect .continue:hover, .benefitselect .continue:focus, .benefitselect .continue:active, .benefitselect .continue:active:hover, .benefitselect .continue:active:focus { border-radius: 20px; } .benefitselect .continue { animation: shadow-pulse 1s infinite; } .benefitselect .continue:after { content: '\f112'; font-family: FontAwesome; padding-left: .5em } /* line name */ .benefitselect .line-name { color: #15234A; } /* more info icon */ .benefitselect .line-benefit-intro .glyphicon-info-sign-color { color: #51C1C3; } /* 'Currently Selected' heading */ .benefitselect .header-selected { color: #15234A; } /* currently selected box */ .benefitselect .in-Cart .you-pay > p:nth-of-type(2) { display: none; } .box-border { padding: 0 } .box-border { border: 3px solid #666 } #products .box-border { border: none } #products .box-border.sel { border: 3px solid #666 } /* select buttons */ .online-two-iso .benefitselect A.button-style.green { background-color: #959595; border-radius: 20px; color: #fff; } .online-two-iso .benefitselect A.button-style.green:hover { background-color: #959595; box-shadow: none; color: #fff; } .online-two-iso .benefitselect A.button-style.green:focus { background-color: #959595; box-shadow: none; color: #fff; } .online-two-iso .benefitselect A.button-style.green:active, .online-two-iso .benefitselect A.button-style.green:active:hover, .online-two-iso .benefitselect A.button-style.green:active:focus { background-color: #51C1C3; color: #fff; } /* remove division elements between benefits */ .division { display: none; } /* benefit description row colour */ .benefitselect .line-benefit-intro .line-description .row { background: white; } /* remove full benefit details link */ .bootstrap-iso.benefitselect .more-info { display: none; } /* remove background image shadow */ .box-border-bg { background: none; } /*currently selected box text colour */ .benefitselect .content-you-chose, .benefitselect .content-you-chose p, .in-Cart .you-chose .selected-plan, SPAN.green-number, .benefitselect .in-Cart .you-pay H3, .benefitselect .in-Cart .you-pay P SPAN.green-number { color: #666; } /* EOI pending asterisk */ .benefitselect .alignleft .pending-note { display: inline; float: none; } /* available products heading */ .benefitselect .products-header H4 { color: #15234A; } /* styling available options boxes */ .benefitselect .box-border-bg .content-box-border { background-color: #ededec; } .benefitselect .products .box-border.sel .content-box-border { background-color: #fff; } /* selected plan border box */ .benefitselect .products .box-border.sel, .benefitselect .products .box-border.sel .header { background: #AEBF51; } .benefitselect .products .box-border.sel .header { padding-left: 0; } /* hide provider finder and prescription finder */ .available-options .links-group.four-links { display: none; } /* selected coverage text colour */ .option-credit-health .option.sel { color: #666; } /* see also link colour */ .benefitselect .linename > a:link { color: #51C1C3; } .benefitselect .linename > a:hover { color: #51C1C3; } .benefitselect .linename > a:focus { color: #51C1C3; } .benefitselect .linename > a:active, .benefitselect .linename > a:active:hover, .benefitselect .linename > a:active:focus { color: #51C1C3; } /****************************************** profile page **************************************/ /* 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: #15234A; } /* 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: #959595; border-radius: 20px; color: #fff; } 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: #51C1C3; box-shadow: none; color: #fff; } html#profile body#profile #profile-online-2 .button-style.green:active, html#profile body#profile #profile-online-2 .button-style.green:active:hover, html#profile body#profile #profile-online-2 .button-style.green:active:focus, html#profile body#profile #profile-online-2 .button-style.orange:active, html#profile body#profile #profile-online-2 .button-style.orange:active:hover, html#profile body#profile #profile-online-2 .button-style.orange:active:focus, html#profile body#profile #profile-online-2 .button-style.blue:active, html#profile body#profile #profile-online-2 .button-style.blue:active:hover, html#profile body#profile #profile-online-2 .button-style.blue:active:focus { background-color: #51C1C3; color: #fff; } /* 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: #d3d3d3; } html#profile body#profile #profile-online-2 #dependantsTab .left-tabon .sectionTitle { color: #2f4f4f; border-bottom: .5em solid #2f4f4f; padding-bottom: .25em; } html#profile body#profile #profile-online-2 #dependantsTab .right-tabon { border-bottom: .5em solid #2f4f4f; } html#profile body#profile #profile-online-2 #dependantsTab .right-tabon .sectionTitledimmed { color: #2f4f4f; } /* 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: #d3d3d3; } html#profile body#profile #profile-online-2 #beneficiariesTab .left-tabon .sectionTitle, html#profile body#profile #profile-online-2 #beneficiariesTab .right-tabon .sectionTitle{ color: #2f4f4f; border-bottom: .5em solid #2f4f4f; padding-bottom: .25em; } /* beneficiaries edit allocation popup */ html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label { background-color: #959595; border: 1px solid white; border-radius: 0; color: #fff; font-size: 1em; font-weight: normal; padding: 6px 12px; text-transform: uppercase; } html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label.active { background-color: #51C1C3; box-shadow: none; color: #fff; } html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label:hover, html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label:focus { background-color: #51C1C3; color: #fff; } /* security tab styling */ .left-taboff, .right-taboff { background: none; } html#profile body#profile #profile-online-2 #securityTab .left-taboff .sectionTitledimmedLeft, html#profile body#profile #profile-online-2 #securityTab .right-taboff .sectionTitledimmed { color: #d3d3d3; } html#profile body#profile #profile-online-2 #securityTab .left-tabon .sectionTitle, html#profile body#profile #profile-online-2 #securityTab .right-tabon .sectionTitle { color: #2f4f4f; border-bottom: .5em solid #2f4f4f; padding-bottom: .25em; } /* preferences toggle button */ #communicationPreferencesTab .ui-buttonset label { border: 1px solid #ccc; } #communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text { background-color: #51C1C3; background-image: none; } #communicationPreferencesTab .ui-buttonset .ui-button.ui-state-active .ui-button-text:before { font-family: FontAwesome; content: '\f00c'; position: relative; left: -.5em; } /* ensuring that the marketing preferences toggles are in alignment */ @media only screen and (min-width:992px){ #communicationPreferencesTab p#marketingHeader + div.row { display: flex; } html#profile body#profile .profile #profile-online-2 #profilecontainer #communicationPreferencesTab .content-box-border .row .grid-cell { display: flex; flex-wrap: wrap; } html#profile body#profile .profile #profile-online-2 #profilecontainer #communicationPreferencesTab .content-box-border .row .grid-cell .ui-buttonset { align-self: flex-end; } } /****************************************** mailbox page **************************************/ .k-state-selected { background-color: #51C1C3!important; } /* save/delete popup modal */ div.tbs-modal h2 { color: white; text-transform: uppercase; } /****************************************** mobile app registration page **************************************/ #mobileRegistration .box-border { border: none; } #mobileRegistration .box-left-bg, #mobileRegistration .box-border-bg { background: none; } #mobileRegistration #CMSEditableRegionDiv { padding: 1em; } #mobileRegistration .mobile-registration-fullwidth > .mobile-registration-left, #mobileRegistration .mobile-registration-app-download { display: none; } #mobileRegistration .d-block { display: block; } #mobileRegistration .qr-background { background: #51C1C3 } #mobileRegistration p.lead { font-size: 21px; } #mobileRegistration p { font-size: 1em; font-weight: 300; padding-left: 0; } #mobileRegistration ol { margin: .5em 1em ; list-style: decimal; } #mobileRegistration-Content { font-size: 16px } #mobileRegistration .bootstrap-iso label { color: #000; font-size: 1em; } #mobileRegistration .bootstrap-iso input { display: block; } #mobileRegistration .bootstrap-iso #pwdMeter { margin-left: 0; margin-top: .5em; margin-bottom: .5em } #mobileRegistration .bootstrap-iso #newPasswordSave { float: none!important; width: 25%; border-radius: 20px; text-transform: none; background-color: #959595; } #mobileRegistration .bootstrap-iso #newPasswordSave:hover, #mobileRegistration .bootstrap-iso #newPasswordSave:focus { background-color: #51C1C3; box-shadow: none; padding: 6px 12px; border: none; } #mobileRegistration .bootstrap-iso #newPasswordSave:active, #mobileRegistration .bootstrap-iso #newPasswordSave:active:hover, #mobileRegistration .bootstrap-iso #newPasswordSave:active:focus { background-color: #51C1C3; } #mobileRegistration .well-lg { padding: 18px 9px; } #mobileRegistration .fa span { font-family: Arial; padding-left: .5em; font-size: 14px; vertical-align: middle; } @media only screen and (max-width:991px) { #mobileRegistration .download-section p { padding-top: 1em; } } @media only screen and (max-width:769px) { #CMSEditableRegionDiv img { display: block; } } @media only screen and (min-width:768px) and (max-width:991px){ .online-two-iso #MobileRegistation .page-content { width: 100vw; } #MobileRegistation .form-data .box-border-bg { padding-right: 0; } } /****************************************** TRS page **************************************/ /*General Styling*/ .onlineTwoPointO-home #home-module-trs .btn.btn-default {background-color: #3781a3;} .onlineTwoPointO-home #home-module-trs span.ng-scope {font-weight: bold;} .onlineTwoPointO-home .modules #home-module-trs-0.module.active span.module-label {color: #3781a3;} /*.home-module-trs-content .highcharts-label text {fill:#FFF !important} .highcharts-container span.highcharts-title {color:#FFF !important}*/ .home-module-trs-content .highcharts-label.highcharts-data-label text {fill: #fff!important; } .home-module-trs-content .highcharts-label text { fill:#000 !important } #home-module-trs .trs-copy {padding-left: 0px; } @media only screen and (max-width:767px) { #home-module-trs .btn.btn-default span {font-size: 12px; font-weight:bold} } @media only screen and (min-width:769px) { .onlineTwoPointO-home #home-module-trs .btn.btn-default {position: absolute; top: 50px; right: 50px;} } @media only screen and (min-width: 1200px){ .onlineTwoPointO-home .module-content #home-module-trs tbs-highchart { position: relative; right: 150px; } } /* trs styling */ #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#trs p { } #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #trs .highcharts-background { fill: transparent; } /**************************************** make a claim styling *******************************************************/ .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager { align-self: stretch } .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .account { display: flex; justify-content: space-between; } .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-account-name, .module-content > div > div > div:last-child .module-copy > div:last-child > div:last-child .tbs-module-pager .make-a-claim-account-amount { padding: 0 1rem; } } /****************************************** forgot password popup **************************************/ /* progress bar colour */ .bootstrap-iso .progress-bar-success { background-color: #51C1C3; } /****************************************** benefit matrix modellers and tools popup **************************************/ /* 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: .5em solid #AEBF51; color: #2f4f4f; } /* unselected tab */ .modeller-links li a.unchecked { background-color: transparent; color: #d3d3d3; } /* text color */ .modeller-container .row-header, .modeller-container .row-summary { color: #666; } /* tax code input */ input:focus { box-shadow: none; } /* model button */ input.modeller-line-bottom { background-color: #959595; border-radius: 20px; color: #fff; font-weight: normal; text-transform: uppercase; } input.modeller-line-bottom:hover { background-color: #51C1C3; color: #fff; } input.modeller-line-bottom:focus { background-color: #51C1C3; box-shadow: none; color: #fff; } input.modeller-line-bottom:active, input.modeller-line-bottom:active:hover, input.modeller-line-bottom:active:focus { background-color: #51C1C3; box-shadow: none; color: #fff; } /****************************************** benefit matrix T&Cs popup **************************************/ /* overlay header */ .benefit-matrix .benefitheader { text-transform: uppercase; color: #fff; font-weight: bold; } #benefitStatementFutureBenefits { color: #666; font-weight: 400; } .benefit-statement .benefitheader { color: #666; font-weight: 400; } .benefit-matrix .modal-footer #confirmation-buttons .btn-default.active { background-color: #51C1C3; } .benefit-matrix .modal-footer #confirmation-buttons .btn-default:hover { border: 1px solid #ccc; border-radius: 0; } /****************************************** benefit selection election info collect popup **************************************/ /* header overlay */ .online-two-iso .modal-normal .modal-header .header-text { padding-left: 1em; } .election-info-collect .dependant-board .expand-sign { color: #666; } .election-info-collect .dependant-board .icon { background-image: none; width: 0; } .election-info-collect .dependant-board .icon:before { color: #959595; content: '\f0c0'; font-family: 'FontAwesome'; font-size: 3em; padding-right: .25em; } /****************************************** benefit intro popup **************************************/ .faq-answer { padding-bottom: 1em; } /****************************************** 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: #959595; border-color: #ccc; } .online-two-iso .datepicker-container .input-group-btn .btn:active:hover, .online-two-iso .datepicker-container .input-group-btn .btn:active:focus, .bootstrap-iso .uib-datepicker .btn:hover, .bootstrap-iso .uib-day .btn.btn-default:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success{ border-radius: 0 } /* today, clear and close buttons */ .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info, .templates .uib-datepicker-popup .btn-sm.btn-info { background-color: #959595; border: none; text-transform: uppercase; } .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger, .templates .uib-datepicker-popup .btn-sm.btn-danger{ background-color: #15234A; border: none; text-transform: uppercase; } .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success, .templates .uib-datepicker-popup .btn-sm.btn-success{ background-color: #AEBF51; border: none; min-width: auto; text-transform: uppercase; } .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:focus, .templates .uib-datepicker-popup .btn-sm.btn-info:hover, .templates .uib-datepicker-popup .btn-sm.btn-info:focus, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:focus, .templates .uib-datepicker-popup .btn-sm.btn-danger:hover, .templates .uib-datepicker-popup .btn-sm.btn-danger:focus, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:focus, .templates .uib-datepicker-popup .btn-sm.btn-success:hover, .templates .uib-datepicker-popup .btn-sm.btn-success:focus { background-color: #51C1C3; color: #fff; text-transform: uppercase; } .bootstrap-iso .uib-datepicker-popup .btn-info.active, .templates .uib-datepicker-popup .btn-info.active, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-info:active:focus, .templates .uib-datepicker-popup .btn-sm.btn-info:active, .templates .uib-datepicker-popup .btn-sm.btn-info:active:hover, .templates .uib-datepicker-popup .btn-sm.btn-info:active:focus, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger:active:focus, .templates .uib-datepicker-popup .btn-sm.btn-danger:active, .templates .uib-datepicker-popup .btn-sm.btn-danger:active:hover, .templates .uib-datepicker-popup .btn-sm.btn-danger:active:focus, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:hover, .bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success:active:focus, .templates .uib-datepicker-popup .btn-sm.btn-success:active, .templates .uib-datepicker-popup .btn-sm.btn-success:active:hover, .templates .uib-datepicker-popup .btn-sm.btn-success:active:focus{ background-color: #51C1C3; color: #fff; font-size: 12px; text-transform: uppercase; } /* hovering over day to be picked */ .bootstrap-iso .uib-day .btn.btn-default:hover, .templates .uib-day .btn.btn-default:hover{ background-color: #51C1C3; border: 1px solid #ccc; color: #fff; } /* previous, current month/year, and next buttons at top of datepicker */ .bootstrap-iso .uib-datepicker th .btn:hover, .bootstrap-iso .uib-daypicker th .btn:hover, .templates .uib-datepicker th .btn:hover, .templates .uib-daypicker th .btn:hover { background-color: #51C1C3; border: 1px solid #ccc; } /****************************************** benefit icon general coding **************************************/ /* remove background images in readiness for using icons */ /* benefit matrix */ .benefit-matrix .benefitline .benefit-menu .img, /* see also images */ div.see-also .img, /* life event icons */ .benefit-matrix .active-benefits .img, /* benefits overview icons */ #benefit-overview .summaryImage .img { background: none; } /* general styling for using icons for benefits */ .benefit-matrix .benefitline .benefit-menu .img:before, div.see-also .img:before, #benefit-overview .summaryImage .img:before { font-family: OnlineTwoIconFont; font-size: 7em; position: relative; top: -.1em; color: #51C1C3; } /* icon size for 'see also' section of benefit selection page */ div.see-also .img:before { font-size: 56px; top: -.25em; } /****************************************** mobile styling *******************************************/ /* login module buttons */ .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .mobile-buttons .btn { background-color: #959595!important; } @media only screen and (max-width: 767px){ /* menu icon colour */ .fa.fa-bars, .fa.fa-gear { color: #fff; } /* links in mobile hamburger menu */ .online-two-iso #menu-no-dashboard li a, .online-two-iso #menu-no-dashboard li a.selected { color: #a9a9a9; } /* 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: #51C1C3; } /* 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: #959595; border-radius: 20px; color: #fff; } #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .generic-copy, #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .account-copy { margin-top: 0; } #home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light .days-left { color: #666; } /******************************************************************************************************************/ /****************************************** CLIENT SPECIFIC CSS STYLING *******************************************/ /******************************************************************************************************************/ @media only screen and (min-width: 768px){ #home-online-three #home-integrated .modules-right-side.grid-container { grid-template-columns:repeat(3,1fr); -ms-grid-columns:1fr 1fr 1fr ; grid-template-areas: "module-1 module-1 module-2" "module-3 module-8 module-8" "module-6 module-6 module-4" "module-5 module-7 module-7" } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 { -ms-grid-column:1; -ms-grid-column-span:2; -ms-grid-row:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 { -ms-grid-column:3; -ms-grid-column-span:1; -ms-grid-row:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 { -ms-grid-column:1; -ms-grid-column-span:1; -ms-grid-row:2; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 { -ms-grid-column:3; -ms-grid-column-span:1; -ms-grid-row:3; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 { -ms-grid-column:1; -ms-grid-column-span:1; -ms-grid-row:4; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 { -ms-grid-column:1; -ms-grid-column-span:2; -ms-grid-row:3; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 { -ms-grid-column:2; -ms-grid-column-span:2; -ms-grid-row:4; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 { -ms-grid-column:2; -ms-grid-column-span:2; -ms-grid-row:2; } } @media only screen and (min-width: 1400px){ #home-online-three #home-integrated .modules-right-side.grid-container { grid-template-columns:repeat(4,1fr); -ms-grid-columns:1fr 1fr 1fr 1fr; grid-template-areas: "module-1 module-1 module-2 module-2" "module-8 module-8 module-3 module-3" "module-6 module-6 module-4 module-4" "module-7 module-7 module-5 module-5" } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 { -ms-grid-column:1; -ms-grid-column-span:2; -ms-grid-row:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 { -ms-grid-column:3; -ms-grid-column-span:2; -ms-grid-row:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 { -ms-grid-column:3; -ms-grid-column-span:2; -ms-grid-row:2; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 { -ms-grid-column:3; -ms-grid-column-span:2; -ms-grid-row:3; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 { -ms-grid-column:3; -ms-grid-column-span:2; -ms-grid-row:4; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 { -ms-grid-column:1; -ms-grid-column-span:2; -ms-grid-row:3; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 { -ms-grid-column:1; -ms-grid-column-span:2; -ms-grid-row:4; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 { -ms-grid-column:1; -ms-grid-column-span:2; -ms-grid-row:2; } } @media only screen and (min-width: 1920px){ #home-online-three #home-integrated .modules-right-side.grid-container { grid-template-columns:repeat(7,1fr); -ms-grid-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas: "module-1 module-1 module-1 module-2 module-2 module-6 module-6" "module-1 module-1 module-1 module-5 module-5 module-3 module-3" "module-8 module-8 module-8 module-4 module-4 module-7 module-7" } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 { -ms-grid-column:1; -ms-grid-column-span:3; -ms-grid-row:1; -ms-grid-row-span:2; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 { -ms-grid-column:4; -ms-grid-column-span:2; -ms-grid-row:1; -ms-grid-row-span:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 { -ms-grid-column:6; -ms-grid-column-span:2; -ms-grid-row:2; -ms-grid-row-span:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 { -ms-grid-column:4; -ms-grid-column-span:2; -ms-grid-row:3; -ms-grid-row-span:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 { -ms-grid-column:4; -ms-grid-column-span:2; -ms-grid-row:2; -ms-grid-row-span:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 { -ms-grid-column:6; -ms-grid-column-span:2; -ms-grid-row:1; -ms-grid-row-span:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 { -ms-grid-column:6; -ms-grid-column-span:2; -ms-grid-row:3; -ms-grid-row-span:1; } #home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 { -ms-grid-column:1; -ms-grid-column-span:3; -ms-grid-row:3; -ms-grid-row-span:1; } } /****************************************** Using icons for benefits/events *******************************************/ /* if wanting icons to be colour coded to benefit groups */ /* replace LINEGROUP1/LINEGROUP2/LINEGROUP3 with relevant classes */ .benefit-matrix .LINEGROUP1 .benefitline .img:before, #benefit-overview .LINEGROUP1 .summaryImage .img:before { color: #51C1C3; } .benefit-matrix .LINEGROUP2 .benefitline .img:before, #benefit-overview .LINEGROUP2 .summaryImage .img:before { color: #51C1C3; } .benefit-matrix .LINEGROUP3 .benefitline .img:before, #benefit-overview .LINEGROUP3 .summaryImage .img:before { color: #51C1C3; } /****************************************** Using icons for homepage/elsewhere on the site *******************************************/ /* add any additional icons from the OnlineTwoIconFont that are required */ /* Benefit Icons: Sacrifice 13th Month Pay to Budget - Any Amount */ #benefit-overview .img.BenefitImage_9d09dee7-bc72-4364-a65f-9aa6c6b685dc:before, .img.L9d09dee7-bc72-4364-a65f-9aa6c6b685dc:before, div.see-also .img.L9d09dee7-bc72-4364-a65f-9aa6c6b685dc:before{ content: '\e946'; } /* Benefit Icons: Company Bicycle - Leasing contract - Order (O2O SSO) */ #benefit-overview .img.BenefitImage_717ae310-0ff8-4c7f-bc75-444bb5542f9c\,e8bdc3fe-35d6-425d-8af0-453cf058166b:before, .img.L717ae310-0ff8-4c7f-bc75-444bb5542f9c:before, div.see-also .img.L717ae310-0ff8-4c7f-bc75-444bb5542f9c:before{ content: '\e908'; } /* Benefit Icons: Company Bicycle - Leasing contract - Delivered (O2O SSO) */ .img.Le8bdc3fe-35d6-425d-8af0-453cf058166b:before, div.see-also .img.Le8bdc3fe-35d6-425d-8af0-453cf058166b:before{ content: '\e908'; } /* Benefit Icons: Company Bicycle - Leasing contract - Order (O2O API) */ #benefit-overview .img.BenefitImage_717ae310-0ff8-4c7f-bc75-444bb5542f9c\,e8bdc3fe-35d6-425d-8af0-453cf058166b\,6533d9a6-148a-4910-b61f-1b7f7d05e556\,509014c5-9fdb-45c3-bd37-c5fc78b62c13:before, .img.L6533d9a6-148a-4910-b61f-1b7f7d05e556:before, div.see-also .img.L6533d9a6-148a-4910-b61f-1b7f7d05e556:before{ content: '\e908'; } /* Benefit Icons: Company Bicycle - Leasing contract - Delivered (O2O API) */ .img.L509014c5-9fdb-45c3-bd37-c5fc78b62c13:before, div.see-also .img.L509014c5-9fdb-45c3-bd37-c5fc78b62c13:before{ content: '\e908'; } /* Benefit Icons: Commuting Distance to Work (Voucher Group) */ #benefit-overview .img.BenefitImage_a5069d7a-22a4-4e83-8e77-ed3f57c8a669:before, .img.La5069d7a-22a4-4e83-8e77-ed3f57c8a669:before, div.see-also .img.La5069d7a-22a4-4e83-8e77-ed3f57c8a669:before{ content: '\e929'; } /* Benefit Icons: Smartphone (No Fixed Options) - Order */ #benefit-overview .img.BenefitImage_04f32908-23f0-4f0e-9443-adeff7688fc7\,af68e710-8b7f-4108-8a6a-5935fcabf574:before, .img.L04f32908-23f0-4f0e-9443-adeff7688fc7:before, div.see-also .img.L04f32908-23f0-4f0e-9443-adeff7688fc7:before{ content: '\e90c'; } /* Benefit Icons: Smartphone (No Fixed Options) - Delivered */ .img.Laf68e710-8b7f-4108-8a6a-5935fcabf574:before, .img.Le81e0dc5-1c1b-4e26-8790-9165bf48a242:before, div.see-also .img.Laf68e710-8b7f-4108-8a6a-5935fcabf574:before{ content: '\e90c'; } /* Benefit Icons: Tablet (No Fixed Options) - Order */ #benefit-overview .img.BenefitImage_41ef1814-4770-4a6e-9e04-8732b5f28345\,7126fcff-5ed4-4bad-aa15-7b7c13928fb1:before, .img.L41ef1814-4770-4a6e-9e04-8732b5f28345:before, div.see-also .img.L41ef1814-4770-4a6e-9e04-8732b5f28345:before{ content: '\e92c'; } /* Benefit Icons: Tablet (No Fixed Options) - Delivered */ .img.L7126fcff-5ed4-4bad-aa15-7b7c13928fb1:before, .img.L3c9701d1-84a5-4f33-a878-cbe8e81fff28:before, div.see-also .img.L7126fcff-5ed4-4bad-aa15-7b7c13928fb1:before{ content: '\e92c'; } /* Benefit Icons: Computer (No Fixed Options) - Order */ #benefit-overview .img.BenefitImage_e04b19f6-3f9e-421a-8ff5-c7b9088d9c95\,d9143022-49af-4826-a3df-e85ee1037f27:before, .img.Le04b19f6-3f9e-421a-8ff5-c7b9088d9c95:before, div.see-also .img.Le04b19f6-3f9e-421a-8ff5-c7b9088d9c95:before{ content: '\e903'; } /* Benefit Icons: Computer (No Fixed Options) - Delivered */ .img.Ld9143022-49af-4826-a3df-e85ee1037f27:before, div.see-also .img.Ld9143022-49af-4826-a3df-e85ee1037f27:before{ content: '\e903'; } /* Benefit Icons: Education program */ #benefit-overview .img.BenefitImage_34564d71-4caf-4c1e-9ba4-5a2fdf10a362:before, .img.L34564d71-4caf-4c1e-9ba4-5a2fdf10a362:before, div.see-also .img.L34564d71-4caf-4c1e-9ba4-5a2fdf10a362:before{ content: '\e9a5'; } /* Benefit Icons: Holiday Buy */ #benefit-overview .img.BenefitImage_268263cd-af25-4336-b591-571cbf476516:before, .img.L268263cd-af25-4336-b591-571cbf476516:before, div.see-also .img.L268263cd-af25-4336-b591-571cbf476516:before{ content: '\e96c'; } /*upload document in followup*/ .benefitselect #CorrespondenceDocumentsContainer .modal-header { background-color: #51C1C3; } .benefit-matrix #CorrespondenceDocumentsContainer .modal-header { background-color: #51C1C3; } /*Navigation title margin*/ #menu-no-dashboard, #menu, #menu-sub { margin: 16px; } /*Total Cost section width increase*/ @media only screen and (min-width: 768px) { .benefit-matrix .totalcost-section-row .totalcostsection { width: 90%; } } /*width of selected benefit name*/ .in-Cart .you-chose { width: 239px; } /*Benefit statement date button*/ .bootstrap-iso .btn-warning:active, .bootstrap-iso .btn-warning.active, .bootstrap-iso .open > .dropdown-toggle.btn-warning { color: #fff; background-color: #959595; border-color: #959595; } .matrix .benefit-complete .benefit-matrix .benefitheader { color: #666; font-weight: 400; } /* Hide followup sentence */ .followup-collect-content .followup-collect-info { display: none;} /* Minification failed (line 1424, error number 1019): Unexpected token, found '}' */