/*================================================================================================== TABLE OF CONTENTS ==================================================================================================
	1. Variables
	2. Utility classes
	3. Global styles
		3a) Headings		3b) Links		3c) Buttons
		3d) Lists			3e) Popups		3f) Tab selectors
		3g) Accordions		3h) Info icons, slider toggles and label styling
		3i) Logo				3j) Site header
		3k) Site footer	3l) Datepickers
	4. Login page
	5. Home page
	6. Benefit overview
	10. Profile
	11. App registration
	12. TRS
	13. Specific popups
		13a) Forgot password
    14. Icons
		14a) Benefit icons  
	17. Mobile
	18. Client specific styles		
 ======================================================================================================================================================================================================================= */
/* font declaration for using OnlineTwoIconFont set */
@font-face {
 font-family:'OnlineTwoIconFont';
 src:url('/aononefinland/media/default/fonts/AonOneFinland.eot');
 src:url('/aononefinland/media/default/fonts/AonOneFinland.eot?#iefix') format('embedded-opentype'),
 url('/aononefinland/media/default/fonts/AonOneFinland.woff') format('woff'),
 url('/aononefinland/media/default/fonts/AonOneFinland.ttf') format('truetype'),
 url('/aononefinland/media/default/fonts/AonOneFinland.svg') format('svg');
 font-weight:normal;
 font-style:normal;
}
/* font declaration for preloslab font variants */
@font-face {
	font-family: 'preloslab';
	src: url(/aononefinland/media/default/fonts/preloslab-book.eot);
	src: url(/aononefinland/media/default/fonts/preloslab-book.eot?#iefix) format('embedded-opentype'),
		  url(/aononefinland/media/default/fonts/preloslab-book.woff) format('woff'),
		  url(/aononefinland/media/default/fonts/preloslab-book.ttf) format('truetype'),
		  url(/aononefinland/media/default/fonts/preloslab-book.svg#amplitude) format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'preloslabbold';
	src: url(/aononefinland/media/default/fonts/preloslab-bold.eot);
	src: url(/aononefinland/media/default/fonts/preloslab-bold.eot?#iefix) format('embedded-opentype'),
		  url(/aononefinland/media/default/fonts/preloslab-bold.woff) format('woff'),
		  url(/aononefinland/media/default/fonts/preloslab-bold.ttf) format('truetype'),
		  url(/aononefinland/media/default/fonts/preloslab-bold.svg#amplitude) format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'preloslabblack';
	src: url(/aononefinland/media/default/fonts/preloslab-black.eot);
	src: url(/aononefinland/media/default/fonts/preloslab-black.eot?#iefix) format('embedded-opentype'),
		  url(/aononefinland/media/default/fonts/preloslab-black.woff) format('woff'),
		  url(/aononefinland/media/default/fonts/preloslab-black.ttf) format('truetype'),
		  url(/aononefinland/media/default/fonts/preloslab-black.svg#amplitude) format('svg');
	font-weight: normal;
	font-style: normal;
}

/*================================================================================================== 1. Variables  ==================================================================================================*/
:root {
  --heading-color: #666;
  --primary-text-color: #666;
  --secondary-text-color: #7ab800;
  --tertiary-text-color: #5fa022;
  --button-color: #7ab800;
  --button-color-alternate: #f57c00;
  --button-text-color: #fff;
  --button-hover-color: #b6dc90;
  --button-hover-text-color: #666;
  --button-click-color: #7ab800;
  --button-click-text-color: #fff;
  --link-text-color: #5fa022;
  --link-text-hover-color: #7ab800;
  --link-text-click-color: #5fa022;
  --header-overlay: #7ab800;
  --panel-color: #7ab800;
  --pension-panel-color: #fdb913;
  --incentives-panel-color: #5fa022;
  --healthcare-panel-color: #b6dc90;
  --life-disability-panel-color: #fec742;
  --other-benfits-panel-color: #dfd599;
  --info-icon-color: #7ab800;
  --tab-selector-text-color: #7ab800;
  --tab-selector-border-color: #7ab800;
  --tab-selector-inactive-text-color: #666;
  --progress-bar-color: #5fa022;
  --success-icon-color: #5fa022;
  --unordered-list-bullet-color: #7ab800;
  --datepicker-today: #7ab800;
  --datepicker-clear: #f57c00;
  --datepicker-close: #bf360c;
  --slider-toggle-color: #5fa022;
  --benefit-icon-color: #7ab800;
  --logo: url(/aononefinland/media/default/images/logos/main-logo-finnish.png);
  --login-image: url(/aononefinland/media/default/images/login/login.png);
  --login-logo: url(/aononefinland/media/default/images/logos/login-logo-finnish.png);
  --site-header-color: #e6e6e6;
  --site-header-icon-color: #7ab800;
  --site-footer-color: #e6e6e6;
  --site-footer-link-color: #666;
  --need-assistance-pull-down-menu: #7ab800;
  --homepage-module-background-color: #e6e6e6;
  --homepage-heading-color: #5fa022;
  --homepage-module-icon-color: #fff;
  --mobile-menu-icon-color: #666;
  --mobile-menu-link-color: #5fa022;
}

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

/* allow use of OnlineTwoIconFont for anything with this class */
[class*="online-two-icon-"]:before{
  font-family:OnlineTwoIconFont;
}
/* icons on the home page */
[class*="online-two-icon-"]:before {
  font-size: 7.5rem;
}
/* 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
}

.bootstrap-iso .preloslab {
  font-family: preloslab;
}
.bootstrap-iso .preloslabbold {
  font-family: preloslabbold;
}
.bootstrap-iso .preloslabblack {
  font-family: preloslabblack;
}
.primary-text-color {
  color: #666;
}
.secondary-text-color {
  color: #7ab800;
}
.tertiary-text-color {
  color: #5fa022;
}
.bootstrap-iso .label-primary {
  background-color: #7ab800;
}

.d-none {
  display: none;
}
.d-list-item {
  display: list-item;
}
.d-block {
  display: block;
}

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

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

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

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

/* 3c) buttons */
/* default colour */
.bootstrap-iso .btn-primary,
.bootstrap-iso .btn-danger,
.bootstrap-iso .btn-info,
.bootstrap-iso .btn-default,
.bootstrap-iso .btn-warning,
.bootstrap-iso .btn-success,
.bootstrap-iso .btn-popup,
.online-two-iso A.button-style,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue,
.online-two-iso A.button-style.blue,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray,
.online-two-iso A.button-style.gray,
.benefitheader-fixed div#followup-items a.btn,
.benefitheader-fixed div#resettodefaults a.btn,
.benefit-matrix .confirm-checkout-button .btn-success {
  background-color: #7ab800;
  border: none;
  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: #7ab800;
  border: none;
  box-shadow: none;
  color: #666;
}

/* focus colour */
.bootstrap-iso .btn-primary:focus,
.bootstrap-iso .btn-danger:focus,
.bootstrap-iso .btn-info:focus,
.bootstrap-iso .btn-default:focus,
.bootstrap-iso .btn-warning:focus,
.bootstrap-iso .btn-success:focus,
.bootstrap-iso .btn-popup:focus,
.online-two-iso A.button-style:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:focus,
.online-two-iso A.button-style.blue:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:focus,
.online-two-iso A.button-style.gray:focus,
.benefitheader-fixed div#followup-items a.btn:focus,
.benefitheader-fixed div#resettodefaults a.btn:focus,
.benefit-matrix .confirm-checkout-button .btn-success:focus {
  background-color: #7ab800;
  border: none;
  box-shadow: none;
  color: #666;
  outline: none;
}

/* when clicked colour */
.bootstrap-iso .btn-primary:active,
.bootstrap-iso .btn-primary:active:hover,
.bootstrap-iso .btn-primary:active:focus,
.bootstrap-iso .btn-danger:active,
.bootstrap-iso .btn-danger:active:hover,
.bootstrap-iso .btn-danger:active:focus,
.bootstrap-iso .btn-info:active,
.bootstrap-iso .btn-info:active:hover,
.bootstrap-iso .btn-info:active:focus,
.bootstrap-iso .btn-default:active,
.bootstrap-iso .btn-default:active:hover,
.bootstrap-iso .btn-default:active:focus,
.bootstrap-iso .btn-warning:active,
.bootstrap-iso .btn-warning:active:hover,
.bootstrap-iso .btn-warning:active:focus,
.bootstrap-iso .btn-success:active,
.bootstrap-iso .btn-success:active:hover,
.bootstrap-iso .btn-success:active:focus,
.bootstrap-iso .btn-popup:active,
.bootstrap-iso .btn-popup:active:hover,
.bootstrap-iso .btn-popup:active:focus,
.online-two-iso A.button-style:active,
.online-two-iso A.button-style:active:hover,
.online-two-iso A.button-style:active:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:hover,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue:active:focus,
.online-two-iso A.button-style.blue:active,
.online-two-iso A.button-style.blue:active:hover,
.online-two-iso A.button-style.blue:active:focus,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:hover,
.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.gray:active:focus,
.online-two-iso A.button-style.gray:active,
.online-two-iso A.button-style.gray:active:hover,
.online-two-iso A.button-style.gray:active:focus,
.benefitheader-fixed div#followup-items a.btn:active,
.benefitheader-fixed div#followup-items a.btn:active:hover,
.benefitheader-fixed div#followup-items a.btn:active:focus,
.benefitheader-fixed div#resettodefaults a.btn:active,
.benefitheader-fixed div#resettodefaults a.btn:active:hover,
.benefitheader-fixed div#resettodefaults a.btn:active:focus,
.benefit-matrix .confirm-checkout-button .btn-success:active,
.benefit-matrix .confirm-checkout-button .btn-success:active:hover,
.benefit-matrix .confirm-checkout-button .btn-success:active:focus {
  background-color: #7ab800;
  border: none;
  box-shadow: none;
  color: #fff;
  outline: none;
}

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

.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: #b6dc90;
}

.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: #7ab800;
}

/* 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: #b6dc90;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-5em, -1em, 0) rotate3d(0, 0, 1, -45deg);
  transform-origin: top left;
  transition: all .25s;
  z-index: -1;  
}
.bootstrap-iso *[class*="btn btn-"]:hover:before,
.bootstrap-iso *[class*="btn  btn-"]:hover:before,
.bootstrap-iso *[class*="button-s"]:hover:before,
.bootstrap-iso *[class*="btn btn-"]:focus:before,
.bootstrap-iso *[class*="btn  btn-"]:focus:before,
.bootstrap-iso *[class*="button-s"]:focus:before {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}

/* 3d) lists */
/* unordered lists */
.bootstrap-iso ul.fa-ul li::before {
	font-family: FontAwesome;
	content: '\f111';
	font-size: .5em;
	padding-right: .5em;
	position: relative;
	bottom: 2px;
	color: #7ab800;
}
.bootstrap-iso ul.fa-ul li ul.fa-ul li::before {
  content: '\f10c';
}
/* ordered lists */
.bootstrap-iso ol,
#login-assistance ol {
	padding-left: 0;
	margin-left: 2.14285714em;
	list-style-type: decimal;
}


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

.bootstrap-iso .close,
.bootstrap-iso .close:hover,
.bootstrap-iso .close:focus,
.bootstrap-iso .close:active,
.bootstrap-iso .close:active:hover,
.bootstrap-iso .close:active:focus,
.online-two-iso .modal-normal .close {
  color: white;
}
/* position of close icon */
.online-two-iso .modal-large .close {
  top: .5em;
  right: .5em;
}
.header-overlay A {
  padding: 4px .5em 0 0;
}
/* modal body background for home page module popups */
#home-online-three .modal-content .home-dashboard .modal-body {
  background: white;
}
/* remove 'x' icon from close button */
#home-online-three .modal-content .home-dashboard .modal-footer .btn-warning .glyphicon {
  display: none;
}

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

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

/* expand/collapse icons */
.bootstrap-iso .glyphicon-menu-down,
.bootstrap-iso .glyphicon-menu-up {
  transition: all .25s
}
.bootstrap-iso .glyphicon-menu-up {
  transform: rotate(-180deg);
}
.bootstrap-iso .glyphicon-menu-down:before,
.bootstrap-iso .glyphicon-menu-up:before {
  font-family: 'Glyphicons Halflings';
	content: '\e259';
}

/* 3h) Info icons, slider toggles and label styling */
/* info icon color **/
.benefit-matrix .row.title .glyphicon-info-sign-color {
  color: #7ab800;
}

/* slider toggle color */
.online-two-iso input:checked + .slider {
  background-color: #5fa022;
}

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

/* 3i) logo */
#logo {
  background-image: url(/aononefinland/media/default/images/logos/main-logo-finnish.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* centering logo on mobile view */
@media only screen and (max-width: 767px) {
  #logo {
    width: calc(100vw - 100px);
  }
}

/* 3j) site header */
/* header colour */
.online-two-iso #terminator #header.header-fullwidth {
  background-color: #e6e6e6;
}
/* header icons profile, mailbox and logout, and main nav links */
@media only screen and (min-width: 751px){
  .online-two-iso #menu-container {
    height: auto!important;
    width: 95vw;
    margin: 0 auto;
  }
  .online-two-iso #menu-no-dashboard {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0
  }
  .online-two-iso #menu-no-dashboard li {
    padding: .5em;
  }
  #menu-container ul#menu-no-dashboard li a,
  #user-div a {
    color: #7ab800;
  }
  #menu-container ul#menu-no-dashboard li a:before {
    font-family: FontAwesome;
    font-size: 1.25rem;
    display: inline-block;
    transform: translateX(-.25em)
  }
  #menu-container ul#menu-no-dashboard li a[href="/Home Page Nav Item"]:before {
    content: '\f015';
  }
  #menu-container ul#menu-no-dashboard li a[href="/TRS"]:before {
    content: '\f200'
  }
  #menu-container ul#menu-no-dashboard li a[href="/Benefits Overview"]:before {
    content: '\f05a'
  }
  #menu-container ul#menu-no-dashboard li a[href="/App registration"]::before {
    content: '\f10b'
  }
}
@media (min-width: 767px) {
  .online-two-iso #menu-container {
    padding: 0
  }
}

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

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

@media only screen and (min-width:768px){
  /* link color and width */
  #floating-header-content a {
    color: #7ab800;
    width: auto;
    padding: 0 1em;
  }
  /* hover colour of links in floating header */
  #header a:hover,
  #menu-container ul#menu-no-dashboard li a:hover{
    color: #b6dc90;
  }
  /* focus colour of links in floating header */
  #header a:focus,
  #menu-container ul#menu-no-dashboard li a:focus{
    color: #b6dc90;
  }
}


/* 3k) site footer */
/* footer colour */
.online-two-iso #terminator #footer.footer-fullwidth,
.online-two-iso #footer.footer-fullwidth {
  background-color:  #e6e6e6;
}
/* footer link color */
.online-two-iso #footer a {
  color: #666;
}
/* copyright */
#footer-copyright {
  color: #666;
  font-size: 12px;
  padding: 0 0 0 17px;
  margin: 9px 0;
}
@media only screen and (min-width: 768px){
  /* display nav items in one line */
  #footer.footer-fullwidth nav ul#footer-links li {
    display: inline-block;
  }
}

/* 3l) datepickers */
/* button that launches datepicker */
.online-two-iso .datepicker-container .input-group-btn .btn,
/*datepicker on benefit statement */
.bootstrap-iso .btn.online-two-datepicker {
  background-color: #7ab800;
  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: #7ab800;
  border: none;
  text-transform: uppercase;
}

.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-danger,
.templates .uib-datepicker-popup .btn-sm.btn-danger{
  background-color: #f57c00;
  border: none;
  text-transform: uppercase;
}
.bootstrap-iso .uib-datepicker-popup .btn-sm.btn-success,
.templates .uib-datepicker-popup .btn-sm.btn-success{
  background-color: #bf360c;
  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: #b6dc90;
  color: #666;
  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: #7ab800;
  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: #b6dc90;
  border: 1px solid #ccc;
  color: #666;
}

/* 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: #b6dc90;
  border: 1px solid #ccc;
}

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

/*================================================================================================== 4. Login page  ==================================================================================================*/
/* login module zone height */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
  bottom: 0;
  min-height: 75%
}
/* module headings */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-title {
  color: white;
}
/* welcome module heading */
.online-two-iso #login-module-login-page-welcome h2 {
  font-family: preloslabbold;
  font-size: 3vw;
  text-align: center;
  width: 100%;
}

/* need assistance module */
.online-two-iso #login-module-need-assistance {
  text-align: right;
}

/* 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;
  transform: translateX(-.75em)
}
/* 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;
}

/* button width */
.online-two-iso.login .LoginPageContainer .btn.btn-primary#login {
  width: auto;
}

/* forgot password link */
.online-two-iso.login .LoginPageContainer .additional-services {
  color: #666;
}
.online-two-iso.login .LoginPageContainer .additional-services #wp-forgetPassword > div:hover,
.online-two-iso.login .LoginPageContainer .additional-services #wp-forgetPassword > div:focus {
  text-decoration: underline;
}

/* error message for entering incorrect details */
.online-two-iso.login .LoginPageContainer span#errMsg {
  color: #7ab800;
}

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

@media only screen and (min-width:768px){
  .isLoginPageWrapper #logo {
    background-image: url(/aononefinland/media/default/images/logos/login-logo-finnish.png);
    transform: translate3d(5vw, 5vh, 0)
  }
  /* login image */
  .online-two-iso.login body {
    background-image: url(/aononefinland/media/default/images/login/login.png);
  }
  /* login module background colour */
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background-color: transparent;
  }
  /* 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:rgba(255, 255, 255, .5);
  }  
}
@media only screen and (min-width:992px){
  .isLoginPageWrapper #logo {
    transform: translate3d(7.5vw, 7.5vh, 0) scale(1.5);
  }
}
@media only screen and (min-width:1200px) {
  .isLoginPageWrapper #logo {
    transform: translate3d(15vw, 10vh, 0) scale(2);
  }
}

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

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

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

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

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

/*================================================================================================== 5. Home page  ==================================================================================================*/
/* remove margin on main element on home page to bring footer together with main element */
#main.home {
  margin-bottom: 0;
}
/* font used for Profile and Logout tooltips */
.ui-tooltip-content {
  font-family: 'Open Sans';
}

/* remove Show Carousel button */
#home-online-three .carousel-show {
  display: none;
}
/* show sensitive data toggle */
.online-two-iso .slider.round {
  display: flex;
  align-items: center;
  width: 65px
}
.online-two-iso .ng-empty + .slider.round:before {
  left: 40px
}
.online-two-iso .toggle-option.off {
  padding-left: 1.25em;
  margin: 0;
}
.online-two-iso .slider.round .toggle-option.on {
  margin: 0;
  margin-left: auto;
  padding-right: .35em
}

/* greeting message colour */
#home-online-three .dashboard-controls #greeting-message {
  color: #666;
}
/* module and carousel heading colour */
#home-online-three #home-integrated .module-content-header-container h3.module-content-header {
  color: #5fa022;
}

/* remove module more info icons */
#home-online-three #home-integrated .module-content-header-container .online-three-module-popover-control {
  display: none;
}

/* make background colour of grid container same as for modules */
#home-online-three #home-integrated .modules-right-side.grid-container,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
  background-color: #e6e6e6;
}

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

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

/* trs module styling */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#trs p {
  margin-bottom: -70px;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content #trs .highcharts-background {
  fill: transparent;
}
.highcharts-title {
  text-align: center;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#trs p[ng-if="vm.noData"]{
  min-height: 285px;
}

/* benefit overview module styling */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.benefit-overview {
  background-color: #7ab800;
}
#home-online-three #home-integrated .benefit-overview .module-content-header-container h3.module-content-header,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.benefit-overview p {
  color: #fff;
}
.online-two-icon-1:before {
  content: '\e900';
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.benefit-overview .btn-default {
  background-color: #fff;
  color: #7ab800;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.benefit-overview .btn-default:hover,
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.benefit-overview .btn-default:focus {
  color: #666;
}

/* placeholder images */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.placeholder {
  background-size: cover;
  background-position: center;
  max-height: 305px;
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.placeholder1 {
  background-image: url(/aononefinland/media/default/images/homepage%20modules/dashboard1.png);
}
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content.placeholder2 {
  background-image: url(/aononefinland/media/default/images/homepage%20modules/dashboard3.png);
}

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

/*================================================================================================== 6. Benefit overview  ==================================================================================================*/
#benefit-overview {
  max-width: 1400px;
  margin: 0 auto
}

/* heading */
#benefit-overview .benefit-overview-title {
  padding: 0;
  height: auto;
}
#benefit-overview .benefit-overview-title H1 {
  color: #666;
  font-size: 36px;
  line-height: 1;
}

.bootstrap-iso#benefit-overview #BenefitNameFilter {
  background-color: #fff;
	border: 1px solid rgba(0,0,0,.15);  
	color: #333;
	text-transform: none;
	text-align: left;
	width: 100%;
	overflow: hidden;
}
.bootstrap-iso#benefit-overview #BenefitNameFilter:before {
  background-color: transparent;
}
.bootstrap-iso#benefit-overview .clear-filter {
  background-color: #7ab800;
  border: none;
}
.bootstrap-iso#benefit-overview .clear-filter:hover,
.bootstrap-iso#benefit-overview .clear-filter:focus {
  background-color: #b6dc90;
  color: #666;
}
.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: #7ab800;
  color: #fff;
}
#benefit-overview [tbs-translate="System.Common.Or"] {
  text-transform: lowercase;
}

/* accodions */
#benefit-overview #overviewAccordion .salary.panel-default > .panel-heading {
  background-color: #7ab800;
}
#benefit-overview #overviewAccordion .pension.panel-default > .panel-heading {
  background-color: #fdb913;
}
#benefit-overview #overviewAccordion .incentives.panel-default > .panel-heading {
  background-color: #5fa022;
}
#benefit-overview #overviewAccordion .healthcare.panel-default > .panel-heading {
  background-color: #b6dc90;
}
#benefit-overview #overviewAccordion .life-and-disability.panel-default > .panel-heading {
  background-color: #fec742;
}
#benefit-overview #overviewAccordion .other-benefits.panel-default > .panel-heading {
  background-color: #dfd599;
}
#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: #7ab800;
  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: #b6dc90;
}
.bootstrap-iso#benefit-overview .know-more-link A:hover,
.bootstrap-iso#benefit-overview .know-more-link A:focus {
  color: #666;
}
.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: #7ab800;
}
.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;
}

/* icons */
#benefit-overview .salary .img:before {
  content: '\e900'
}
#benefit-overview .pension .img:before {
  content: '\e901'
}
#benefit-overview .incentives .img:before {
  content: '\e902'
}
#benefit-overview .healthcare .img:before {
  content: '\e903'
}
#benefit-overview .life-and-disability .img:before {
  content: '\e904'
}
#benefit-overview .other-benefits .img:before {
  content: '\e905'
}

/*================================================================================================== 10. Profile  ==================================================================================================*/
/* hide Contact and Preferences tabs */
#profilecontainer .contact,
#profilecontainer .preference {
  display: none;
}

/* 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: #666;
}
/* 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: #7ab800;
  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: #b6dc90;
  box-shadow: none;
  color: #666;
}
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: #7ab800;
  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: #666;
}

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

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

html#profile body#profile #profile-online-2 #beneficiariesTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #beneficiariesTab .right-tabon .sectionTitle{
  color: #7ab800;
  border-bottom: .5em solid #7ab800;
  padding-bottom: .25em;
}
/* beneficiaries edit allocation popup */
html#profile body#profile .profile #profile-online-2 #allocationDialog .btn-group label {
  background-color: #7ab800;
  border: 1px solid white;
  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: #7ab800;
  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: #b6dc90;
  color: #666;
}

/* 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: #666;
}
html#profile body#profile #profile-online-2 #securityTab .left-tabon .sectionTitle,
html#profile body#profile #profile-online-2 #securityTab .right-tabon .sectionTitle {
  color: #7ab800;
  border-bottom: .5em solid #7ab800;
  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: #5fa022;
  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;
  }
}

/*================================================================================================== 11. App registration  ==================================================================================================*/
#mobileRegistration .box-border {
  border: none;
}
#mobileRegistration .box-left-bg,
#mobileRegistration .box-border-bg {
  background: none;
}
#mobileRegistration #CMSEditableRegionDiv {
  padding: 1em;
}
#mobileRegistration .mobile-registration-fullwidth > .mobile-registration-left,
#mobileRegistration .mobile-registration-app-download {
  display: none;
}
#mobileRegistration .d-block {
  display: block;
}
#mobileRegistration .qr-background {
  background: #b6dc90
}
#mobileRegistration p.lead {
  font-size: 1.25rem;
}
#mobileRegistration p {
  font-size: 1rem;
  font-weight: 300;
  max-width: 65ch;
  padding-left: 0;
}
#mobileRegistration ol {
  margin: .5em 1em ;
  list-style: decimal;
}
#mobileRegistration-Content {
  font-size: 1rem;
}
#pinDiv {
  margin-bottom: 1em;
}
#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%;
  text-transform: none;
  background-color: #7ab800;
}
#mobileRegistration .bootstrap-iso #newPasswordSave:hover,
#mobileRegistration .bootstrap-iso #newPasswordSave:focus {
  background-color: #b6dc90;
  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: #7ab800;
}
#mobileRegistration .well-lg {
  padding: 18px 9px;
}
#mobileRegistration .fa span {
  font-family: Arial;
  padding-left: .5em;
  font-size: 14px;
  vertical-align: middle;
}
@media only screen and (max-width:991px) {
  #mobileRegistration .download-section p {
    padding-top: 1em;
  }
}
@media only screen and (max-width:769px) {
  #CMSEditableRegionDiv img {
    display: block;
  }
}
@media only screen and (min-width:768px) and (max-width:991px){
  .online-two-iso #MobileRegistation .page-content {
    width: 100vw;
  }
  #MobileRegistation .form-data .box-border-bg {
    padding-right: 0;
  }
}

/*================================================================================================== 12. TRS  ==================================================================================================*/
#dashboardContainer {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.trsdashboard .summary-myreward {
	visibility: hidden;
}
.trsdashboard .summarystatementdate {
	color: #666;
	text-align: center;
	font-size: 1.9em;
}
/* print button */
.trsdashboard .summary-header .printbtn {
  position: static;
}
/* print button on mobile */
@media only screen and (min-width: 375px) and (max-width: 750px){
  .trsdashboard .printbtn {
    width: calc(100vw - 5%);
    margin: .5em auto;    
    float: none;
    text-align: center;
    padding: 0;
  }
  .trsdashboard .printbtn .btn.btn-warning {
    width: 100%
  }
}

/* intro title and text styling */
.trsdashboard .dashboardtitle {
  font-size: 1.5rem;
  margin-bottom: .75em
}
.trsdashboard .dashboardtext p {
  margin-bottom: 0;
  padding-bottom: .5em;
}

/* comparison title */
.trsdashboard .yeartitle {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: .75em;
}

/* navigation link colour */
.trsdashboard .desktop-tab .nav-pills > li.active > a,
.trsdashboard .desktop-tab ul li a{
  color: #5fa022;
}
/* navigation icons */
.trsdashboard [class*="icon-two-point-o-trs-module-"]:before {
  font-family: OnlineTwoIconFont;
}
.trsdashboard i.Palkkatiedot:before,
.trsdashboard i.Salary:before {
  content: '\e900'
}
.trsdashboard i.Elaumlke:before,
.trsdashboard i.Pension:before {
  content: '\e901'
}
.trsdashboard i.Kannustimet:before,
.trsdashboard i.Incentives:before {
  content: '\e902'
}
.trsdashboard i.Terveydenhuolto:before,
.trsdashboard i.Healthcare:before {
  content: '\e903'
}
.trsdashboard i.Henkijatyoumlkyvyttoumlmyys:before,
.trsdashboard i.LifeandDisability:before {
  content: '\e904'
}
.trsdashboard i.Muutetuudet:before,
.trsdashboard i.Otherbenefits:before {
  content: '\e905'
}

/* selected tab styling */
.trsdashboard li.active {
  background-color: #5fa022;
}
.trsdashboard .desktop-tab .nav-pills > li.active > a,
.trsdashboard .desktop-tab .nav-pills > li.active > a:hover,
.trsdashboard .desktop-tab .nav-pills > li.active > a:focus {
  color: #fff
}

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

/* remove component total from member site (but still allows to be displayed on the printed statement */
.trsdashboard .content-name ~ .chart_line_total {
  display: none;
}

/* padding and font-sizing for the components and data items for better legibility */
.trsdashboard .content-name {
  font-size: 1.125rem;
  padding-bottom: 0;
  padding-top: 2em;
}
.trsdashboard .chart_line:not(.chart_line_total) {
  font-size: .875rem
}

/* add margin to top of data group total */
.trsdashboard .chart_line_total {
  margin-top: 1.5em;
}

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

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

@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 intro popup **************************************/
.faq-answer {
  padding-bottom: 1em;
}

/*================================================================================================== 14. Icons  ==================================================================================================*/
/* 14a) benefit icon general coding */
/* remove background images in readiness for using icons */
/* benefits overview icons */
#benefit-overview .summaryImage .img {
  background: none;
}

/* general styling for using icons for benefits */
#benefit-overview .summaryImage .img:before {
  font-family: OnlineTwoIconFont;
  font-size: 6em;
  color: #7ab800;
}

/*================================================================================================== 17. Mobile  ==================================================================================================*/
/* login module buttons */
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .mobile-buttons .btn {
  background-color: #7ab800!important;
}
@media only screen and (max-width: 767px){
  /* menu icon colour */
  .fa.fa-bars,
  .fa.fa-gear {
    color: #666;
  }
  /* links in mobile hamburger menu */
  .online-two-iso #menu-no-dashboard li a,
  .online-two-iso #menu-no-dashboard li a.selected {
    color: #5fa022;
  }
  /* 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: #b6dc90;
  }
  /* hide mailbox menu item */
  #mobile-links .jq-dropdown-menu li:nth-of-type(2) {
    display: none;
  }
  /* make height of greeting container auto to give proper spacing around the greeting */
  #home-online-three .dashboard-controls {
    height: auto
  }
  /* remove placeholder modules */
  #home-online-three #home-integrated .placeholder {
    display: none;
  }
}
/* remove default icons applied to modules on homepage */
#home-online-three #home-integrated .modules-mobile .module-mobile i[class*="icon-"] {
  display: none;
}
/* remove duplicate module header */
#home-online-three #home-integrated .modules-mobile .module-content-header-container {
  display: none;
}
/* allow user to click anywhere on module title to expand the module */
#home-online-three #home-integrated .modules-mobile .module-mobile span.module-label {
  margin-left: 0;
  position: absolute;
}
#home-online-three #home-integrated .modules-mobile .module-mobile span.link {
  display: block;
  width: 100%;
  text-align: right;
  position: relative;
}
/* 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: #7ab800;
  color: #fff;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy a.btn.btn-default,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel button.btn.btn-default {
  padding: 12px 20px;
  width: 100%;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .generic-copy,
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .account-copy {
  margin-top: 0;
}
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light .days-left {
  color: #666;
}

/*================================================================================================== 18. Client specific styles  ==================================================================================================*/
#home-online-three .modules-sleeve {
  float: none;
  max-width: 1920px;
  margin: 0 auto;
}

/* homepage module layouts */
@media only screen and (min-width: 768px){
  #home-online-three #home-integrated .modules-right-side.grid-container {
    grid-template-columns:repeat(1,1fr);
    -ms-grid-columns:1fr;
    grid-template-areas:
      "module-2"
      "module-3"
      "module-1"
      "module-4"
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-0,
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-3 {
    display: none;
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-1 {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-2 {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }
}

@media only screen and (min-width: 1200px){
  #home-online-three #home-integrated .modules-right-side.grid-container {
    grid-template-columns:repeat(2,1fr);
    -ms-grid-columns:1fr 1fr;
    grid-template-areas:
      "module-1 module-2"
      "module-3 module-4"
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-0,
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-3 {
    display: block;
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-0 {
    -ms-grid-column: 1;
    -ms-grid-row: 1
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-1 {
    -ms-grid-column: 2;
    -ms-grid-row: 1
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-2 {
    -ms-grid-column: 1;
    -ms-grid-row: 2
  }
  #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-3 {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
  }
}

/****************************************** Using icons for homepage/elsewhere on the site *******************************************/

/* Minification failed (line 113, error number 1062): Expected semicolon or closing curly-brace, found '-' */