:root {
  --color-purple-light: #BB33FF;
  --color-purple-dark: #8800CC;
  --color-turquise: #00EEFF;
  --color-teal: #003C71;
  --color-grey-light: #E0E3E5;
  --color-black: #000000;
  
  --color-hover: #1a507f;
  
  --card-shadow: 0 0 6px #c0c0c080;
}

/*FONTS*/
@font-face {
  font-family: Light;
  src: url('/benefitsconnectplus/media/Assets/SSTLight.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Medium;
  src: url('/benefitsconnectplus/media/Assets/SSTMedium.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Bold;
  src: url('/benefitsconnectplus/media/Assets/SSTBold.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*OnlineTwoIconFont Regular*/
@font-face {
  font-family: OnlineTwoIconFont;
  font-weight: normal;
  font-style: normal !important;
  src: url('/benefitsconnectplus/media/Assets/OnlineTwoIconFontv3.eot') format('eot');
  src: url('/benefitsconnectplus/media/Assets/OnlineTwoIconFontv3.eot') format('embedded-opentype'),
    url('/benefitsconnectplus/media/Assets/OnlineTwoIconFontv3.ttf') format('truetype'),
    url('/benefitsconnectplus/media/Assets/OnlineTwoIconFontv3.woff') format('woff'),
    url('/benefitsconnectplus/media/Assets/OnlineTwoIconFontv3.svg#OnlineTwoIconFont') format('svg');
}

/*FontAwesome 6.0 */
@font-face {
  font-family: FA6Regular;
  font-weight: normal;
  font-style: normal !important;
  src: url("/benefitsconnectplus/media/Assets/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: FA6Solid;
  font-weight: normal;
  font-style: normal !important;
  src: url("/benefitsconnectplus/media/Assets/fa-solid-900.woff2") format("woff2");
}

@font-face {
  font-family: FA6Light;
  font-weight: normal;
  font-style: normal !important;
  src: url("/benefitsconnectplus/media/Assets/fa-light-300.woff2") format("woff2");
}

@font-face {
  font-family: FA6Thin;
  font-weight: normal;
  font-style: normal !important;
  src: url("/benefitsconnectplus/media/Assets/fa-thin-100.woff2") format("woff2");
}

@font-face {
  font-family: FA6Duotone;
  font-weight: normal;
  font-style: normal !important;
  src: url("/benefitsconnectplus/media/Assets/fa-duotone-900.woff2") format("woff2");
}

@font-face {
  font-family: FA6Brand;
  font-weight: normal;
  font-style: normal !important;
  src: url("/benefitsconnectplus/media/Assets/fa-brands-400.woff2") format("woff2");
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Bootstrap - font*/
.bootstrap-iso,
.online-two-iso body,
html {
  font-family: Light;
  font-size: 16px !important;
  line-height: 1.42857143;
  color: var(--color-black);
  scroll-behavior: smooth;
}

html {
  background: #f8f8f8 !important;
}

html,
html * {
  scrollbar-color: #5D6D78 #CDDBDE !important;
  scrollbar-width: 8px !important;
  scrollbar-width: thin !important;
}

#main.home {
  margin: 0;
}

.bootstrap-iso .text-success {
  color: var(--color-black);
}

.online-two-iso.login body {
  background-image: none;
}

.bootstrap-iso, .online-two-iso body, html {
  font-family: Light;
  font-size: 16px !important;
  line-height: 1.42857143;
  color: var(--color-black);
  scroll-behavior: smooth;
}

.online-two-iso.login form {
  overflow-y: revert;
}

.bootstrap-iso a {
  color: var(--color-black);
  transition-duration: 0.5s;
}

.loader {
  background: url(/benefitsconnectplus/media/Assets/loader.gif) no-repeat scroll 5px center/cover transparent;
}

.division {
  display: none;
}

strong {
  font-family: Medium;
  font-weight: normal !important;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.m0 {
  margin: 0;
}

.p0 {
  padding: 0;
}

/*To Top*/
#toTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  bottom: 130px;
  right: 2%;
  border: none;
  font-size: 0;
  z-index: 999;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  background: transparent;
}

#toTop::before {
  content: "\f32c";
  font-size: 40px;
  font-family: FA6Regular;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  
}

#toTop:hover::before {
  color: var(--color-purple-dark);
}

.online-two-iso .toggle-option {
  margin-top: 0px;
}

/*BUTTONS*/
.bootstrap-iso .btn-primary, 
.bootstrap-iso .btn-danger, 
.bootstrap-iso .btn-info, 
.bootstrap-iso .btn-default, 
.bootstrap-iso .btn-warning, 
.bootstrap-iso .btn-success, 
.bootstrap-iso .btn-popup, 
#StatementAndClaimSubmit .btn-primary, 
#StatementAndClaimSubmit .btn-default,
#home-online-three #right-side .modules-mobile .module-mobile .module-panel .module-copy button.btn.btn-default, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy button.btn.btn-default {
  background-color: var(--color-teal);
  border: 2px solid var(--color-teal);
  font-size: 16px;
  font-family: Medium;
  width: auto !important;
  padding: 10px 12px;
  border-radius: 0;
  text-transform: revert;
  color: #FFF;
  float: none;
  min-width: auto;
  margin: 0 auto;
}

.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, 
#StatementAndClaimSubmit .btn-primary:hover, 
#StatementAndClaimSubmit .btn-default:hover {
  color: #fff !important;
  background-color: var(--color-hover) !important;
  border-color: var(--color-hover) !important;
}

.online-two-iso.login .LoginPageContainer .btn.btn-primary#login {
  float: left;
  background-color: transparent !important;
  font-family: Bold;
  color: #fff;
  margin: 2rem 0 3rem 0;
  border: 2px solid #FFF !important;
  z-index: 100;
  position: relative;
}

a.button-style:focus, 
A.button-style:hover {
  box-shadow: none;
}

/*Buttons*/
.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, 
#StatementAndClaimSubmit .btn-primary:hover, 
#StatementAndClaimSubmit .btn-default:hover,
.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, 
#StatementAndClaimSubmit .btn-primary:focus, 
#StatementAndClaimSubmit .btn-default:focus,
.bootstrap-iso .btn-primary:active, 
.bootstrap-iso .btn-danger:active, 
.bootstrap-iso .btn-info:active, 
.bootstrap-iso .btn-default:active, 
.bootstrap-iso .btn-warning:active, 
.bootstrap-iso .btn-success:active, 
.bootstrap-iso .btn-popup:active, 
#StatementAndClaimSubmit .btn-primary:active, 
#StatementAndClaimSubmit .btn-default:active,
.bootstrap-iso .btn-primary:hover:active, 
.bootstrap-iso .btn-danger:hover:active, 
.bootstrap-iso .btn-info:hover:active, 
.bootstrap-iso .btn-default:hover:active, 
.bootstrap-iso .btn-warning:hover:active, 
.bootstrap-iso .btn-success:hover:active, 
.bootstrap-iso .btn-popup:hover:active, 
#StatementAndClaimSubmit .btn-primary:hover:active, 
#StatementAndClaimSubmit .btn-default:hover:active{
  color: #fff !important;
  background-color: var(--color-hover) !important;
  border: 2px solid var(--color-hover);
  font-size: 16px;
  font-family: Medium;
  width: auto !important;
  padding: 10px 12px;
}

/*Profile*/
html#profile body#profile .profile #profile-online-2 .box-left-bg {
  background: none;
  padding: 0;
  margin-top: 1rem !important;
}

html#profile body#profile .profile #profile-online-2 .box-left-bg .box-border {
  background: #FFFFFF;
  box-shadow: var(--card-shadow);
  border-radius: 12px;
}

.online-two-iso P.sectionTitle {
  color: var(--color-black); 
  font-family: Medium;
}

#main.profile {
  max-width: 720px;
  margin: 0 auto;
}
#profilecontainer ul {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #cddbde;
}

@media (max-width: 720px) {
  #profilecontainer ul {
    overflow-y: scroll;
  }
}

#profilecontainer ul li {
  min-width: 100px;
  padding: 0 !important;
  margin: 0 !important;
}

html#profile body#profile .profile #profile-online-2 .htabs-container .tabs UL LI A {
  font-family: Medium;
  text-transform: uppercase;
  position: relative;
  height: 30px;
  color: #9b9b9b;
  background-color: transparent;
  padding: 0 !important;
  border: none;
  font-size: 14px;
  min-width: 100px;
  font-weight: normal;
  border-bottom: 4px solid transparent;
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel {
  background: transparent !important;
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A {
  border-bottom: 4px solid var(--color-teal);
  color: var(--color-teal);
}

html#profile body#profile .profile #profile-online-2 .box-border {
  padding: 0;
}

html#profile body#profile .profile #profile-online-2 .form-data .content-box-border {
  padding: 20px;
}

html#profile body#profile .profile #profile-online-2 .form-data .content-box-border .row {
  margin: 0 !important;
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .content-box-border .row .grid-cell {
  padding: 0;
  margin: 0;
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .content-box-border .row .grid-cell[ng-if="!vm.clientUIConfiguration.EmployeeNameDisplayandDisplayOrder && vm.clientUIConfiguration.ProfileEmployeeNameDisplay"]:first-child:before {
  content: 'Your Personal Details';
  display: block;
  font-family: Medium;
  font-size: 1.4em;
  font-weight: 500;
  margin: 0;
  padding-bottom: 1rem;
  color: var(--color-black);
  line-height: 1.42857143;
}

.dependant-cell.middle-name {
  display: none;
}

.row .col-md-4.ng-scope {
  width: 75%;
  line-height: 20px;
  padding-top: 10px;
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .content-box-border .row .grid-cell label {
  padding: 0;
  margin: 0.5rem 0;
  text-transform: capitalize;
  font-size: 1rem;
  font-family: Medium;
  font-weight: normal;
}

html#profile body#profile .profile #profile-online-2 #profilecontainer .content-box-border .row .grid-cell p {
  padding: 0;
  margin: 0.5rem 0;
  border: none;
  font-size: 1rem;
  font-family: Light;
  width: 100%;
}

html#profile body#profile .profile #profile-online-2 P.sectionTitle {
  margin: 0;
  padding-bottom: 1rem;
  color: var(--color-black);
}
#profilecontainer {
  height: 171px;
}

.sectionTitle[ng-bind-html="vmAClocale.payslip"] {
  display: none !important;
}


html#profile body#profile .profile #profile-online-2 p {
  padding: 0;
}

.two-tabs > div {
  height: auto;
  width: auto;
  padding: 0 10px;
  margin: 0 10px 1rem; 10px;
}

.two-tabs > div p {
  font-size: 14px;
  text-transform: uppercase;
  color: #999;
  font-family: Medium;
}

.online-two-iso P.sectionTitledimmedLeft, 
.online-two-iso P.sectionTitledimmed {
  color: #999;
}

.online-two-iso P.sectionTitledimmedLeft:hover, 
.online-two-iso P.sectionTitledimmed:hover {
  color: #bbb;
}

.two-tabs {
  padding-bottom: 0;
}

.right-tabon,
.left-tabon {
  border-bottom: 4px solid var(--color-teal);
}

.left-tabon p,
.right-tabon p {
  color: var(--color-teal) !important;
}

.left-taboff,
.right-taboff {
  background: none;
}

.online-two-iso .validation-caption {
  color: var(--color-black);
  font-weight: normal;
}

.online-two-iso .validation-rules {
  flex-direction: column;
}




/*Login Page*/
.online-two-iso.login .LoginPageContainer {
  height: 100%;
  background-color: transparent;
}

.online-two-iso.login .LoginPageContainer #terminator {
  height: calc(100vh - 80px);
  position: relative;
  background-color: var(--color-black);
}

.online-two-iso.login .LoginPageContainer #header, 
.online-two-iso.login .LoginPageContainer #wrapper {
  height: 100%;
}

#header {
  width: 100% !important;
  background-color: #fff !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.online-two-iso.login .LoginPageContainer #header {
  height: 80px !important;
  margin: 0 !important;
  padding: 0;
  min-height: 80px;
  background: #FFF !important;
  display: flex;
  align-items: center;
  box-shadow: inset 0px -10px 20px -11px rgb(224, 227, 229);
}

#containerGlobal #header {
  margin: 0 auto !important;
  width: 100% !important;
  left: 0;
  right: 0;
  position: relative;
  float: none;
  z-index: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100px;
}

#header a {
  position: relative;
  z-index: 10;
}

.online-two-iso.login .LoginPageContainer #header a {
  max-width: 1600px;
  text-decoration: none !important;
  height: 100%;
  width: 320px;
  display: inline-flex;
  left: 150px;
}

.online-two-iso.login .LoginPageContainer #header a, 
.isLoginPageWrapper #logo {
  pointer-events: none;
}

#logo {
  background: url(/benefitsconnectplus/media/Assets/Logo.png) left center/150px no-repeat !important;
}

.online-two-iso.login .LoginPageContainer #header a, .isLoginPageWrapper #logo {
  pointer-events: none;
}

.isLoginPageWrapper #logo {
  background: url(/benefitsconnectplus/media/Assets/Logo.png) left center/150px no-repeat !important;
  float: left;
  height: 100%;
}

.online-two-iso.login .LoginPageContainer #main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 0;
  width: 100%;
  margin: 0;
  padding-left: 0;
  height: calc(100vh - 160px);
  min-height: calc(100vh - 160px);
  background-color: transparent;
  float: none;
  background-image: url("/benefitsconnectplus/media/Assets/Smart%20Benefits%20site%20visuals%20-%20Boston-2.png");
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.online-two-iso.login .LoginPageContainer .panel.panel-default {
  border: none;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 150px;
}

.online-two-iso.login .LoginPageContainer .panel.panel-default .panel-body {
  background: none;
  padding: 0;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Profile and Logout*/
#headerResources #user-div {
  display: flex !important;
  gap: 10px;
}

#headerResources #user-div a {
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.25s;
}

#user-div {
  display: flex !important;
  align-items: center;
}

#user-div .fa {
  display: flex;
  align-items: center;
}

#user-div .fa:after {
  font-family: Medium;
  color: var(--color-black);
  font-size: 14px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.fa-user::before {
  content: '\e45a';
  align-items: center;
  font-family: FA6Thin;
  font-size: 1rem;
  color: var(--color-grey-light);
  background-color: var(--color-purple-dark);
  border-radius: 50%;
  height: 2rem;
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.fa-sign-out::before {
  content: '\f057';
  font-family: FA6Thin;
  font-size: 2rem;
}

#headerResources #user-div a:hover {
  opacity: 0.8;
  color: inherit !important;
}

.ui-tooltip, .bootstrap-iso .tooltip {
  border: 2px solid var(--color-black);
  background-color: var(--color-black);
  color: #FFF;
  box-shadow: none;
  opacity: 1;
  border-radius: 4px !important;
  font-size: 12px;
  white-space: nowrap;
}

.online-two-iso.login .LoginPageContainer .login-panel {
  min-width: 250px;
  position: relative;
}

.online-two-iso.login .LoginPageContainer #wp-login::before {
  content: "Log in";
  font-size: 2.5rem;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  font-family: Bold;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.online-two-iso.login .LoginPageContainer .input-group > * {
  background: none;
  color: #fff;
  display: block;
  font-size: 1rem;
}

.online-two-iso.login .LoginPageContainer .input-group .form-control {
  background: #FFF;
  border: none;
  color: var(--color-black);
}

.input-group.input-group-lg span {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  font-size: 1rem;
  font-family: Bold;
  text-align: left;
}

.online-two-iso.login .LoginPageContainer .input-group > span.input-group-addon {
  border: none;
  height: auto !important;
  line-height: 2em;
  padding: 0 !important;
}

#errMsg {
  position: absolute;
  bottom: 2.5rem;
  min-width: 350px;
}

.online-two-iso.login .LoginPageContainer .additional-services {
  float: left;
  color: #fff;
  clear: both;
}

.online-two-iso.login .LoginPageContainer .additional-services #wp-forgetPassword {
  padding: 0;
}

#wp-forgetPassword div {
  text-decoration: underline;
  transition-duration: 0.5s;
}

#wp-forgetPassword div:hover, 
#wp-forgetPassword div:focus {
  text-decoration: none !important;
}

.online-two-iso.login .LoginPageContainer .login-module-zone {
  min-height: 80px;
  color: #fff;
  background: var(--grey-light);
}

.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
  background-color: transparent;
  height: 100%;
  position: relative;
}

#login-module-login_footer {
  padding: 0;
  height: 80px;
}

.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-title, 
.online-two-iso.login .LoginPageContainer .login-module-zone .login-modules .module .module-text {
  width: 100%;
  height: 80px;
}

#login-module-login_footer .module-title {
  display: none;
}

#login-module-login_footer .wrapper, 
#footer, 
#footer .wrapper, 
#footer .main_footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100% !important;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  height: 100%;
}

#login-module-login_footer .wrapper, 
#footer .wrapper {
  max-width: 1600px;
  margin: 0 150px !important;
}

#login-module-login_footer .logo {
  height: 100%;
  width: 100%;
}

#login-module-login_footer .logo img, 
#footer .logo img {
  width: auto;
  height: 70px;
}

#login-module-login_footer ul, #footer .main_footer ul {
  padding: 0 .5rem;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  align-items: center;
}

#login-module-login_footer ul li, 
#footer .main_footer ul li {
  padding: 0 .5rem;
}

#login-module-login_footer .wrapper a, #footer .main_footer a {
  text-decoration: underline;
  margin: 0;
}

.copy-rights {
  margin: auto 1rem auto auto;
  min-width: fit-content;
  color: var(--color-black);
  font-family: Light;
  width: fit-content;
}

/*login page - mobile*/

@media (max-width: 767px) {  
  .online-two-iso.login .LoginPageContainer #terminator {
    min-height: 600px;
  }
  
  .online-two-iso.login,
  .online-two-iso.login form {
    overflow: scroll;
  }
  
  .online-two-iso.login .LoginPageContainer #header a {
    height: 100%;
    width: 100%;
    left: 0;
  }
  
  #wrapper.isLoginPageWrapper #header #logo {
    width: 80%;
  }
  
  .online-two-iso.login .LoginPageContainer #main {
    width: 80%;
    margin: 0 auto;
    padding-left: 0;
    min-height: 500px;
  }
  
  .online-two-iso.login .LoginPageContainer .login-module-zone {
    min-height: auto;
    height: auto;
    display: flex;
  }
  
  #login-module-login_footer {
    display: block !important;
    height: auto !important;
  }
  
  .online-two-iso.login
  .LoginPageContainer
  .login-module-zone
  .login-modules
  .module
  .module-title,
  .online-two-iso.login
  .LoginPageContainer
  .login-module-zone
  .login-modules
  .module
  .module-text {
    height: auto !important;
  }
  
  #login-module-login_footer .wrapper, 
  #footer .wrapper {
	margin: 0 !important;
	align-items: center;
	flex-direction: column;
  }
  
  #login-module-login_footer .logo img {
    margin: 0 auto;
  }
  
  #login-module-login_footer ul,
  #footer .main_footer ul {
    flex-direction: column;
    align-items: center;
  }
  
  #login-module-login_footer ul li, 
  #footer .main_footer ul li {
	padding: .5rem 0;
  }
  
  #footer__items a.EUFooterLink {
	display: block !important;
  }
  
  .copy-rights {
    margin: 0 auto;
    margin-top: 1rem;
  }
}

@media (max-width: 1200px) {  
  .online-two-iso.login .LoginPageContainer .panel.panel-default {
	margin-left: 0;
  }
  .online-two-iso.login .LoginPageContainer #main {
	width: 100%;
	background-position-x: left;
    padding-left: 2rem;
  }
}





/*Nav Bar*/
.btn, .btn *, .benefit-matrix .benefitheader.benefitheader-border, 
.benefit-matrix .title, 
#benefit-overview .group-title {
  text-transform: capitalize !important;
}

#headerResources {
  order: 3;
  flex: 0 0 auto;
  padding: 0 1rem;
  width: 216px;
}

#mobile-links .user-toogle {
  display: none !important;
}

ul#links {
  margin: 0 !important;
  padding: 0;
}

#menu-container {
  display: flex !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1 1 auto;
  justify-content: center;
  order: 2;
  top: 0 !important;
}

#menu-no-dashboard {
  display: flex !important;
  gap: 0 2rem;
  flex-wrap: wrap;
  z-index: 999;
  justify-content: center;
}

.online-two-iso #menu-no-dashboard li a, 
.online-two-iso #menu-no-dashboard li a.selected {
  color: var(--color-black);
  font-family: Bold;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
  position: relative;
  padding: 10px 0;
  text-decoration: none !important;
}

#menu-no-dashboard li a::after, 
#menu-no-dashboard li a.selected::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-purple-dark);
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  -o-transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out,-webkit-transform 400ms ease-in-out;
}

#menu-no-dashboard li:hover a::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-purple-dark);
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  -o-transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out,-webkit-transform 400ms ease-in-out;
}

@media (min-width: 1200px) {
  #menu-container #menu-no-dashboard li:nth-last-child(-n+2) {
	display: none !important;
  }
}

#menu-no-dashboard li, 
#menu li, 
#menu-sub {
  padding-left: 0;
}

#home-online-three {
  margin: 0 auto !important;
  float: none !important;
  width: 100%;
}

#home-online-three .dashboard-controls {
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(136,0,204,1) 100%);
  background-size: cover;
  border-radius: 0;
  align-items: start;
  margin: 0 0 2rem 0;
  position: relative;
  height: auto;
  background-color: var(--color-purple-dark);
}

#home-online-three .dashboard-controls #greeting-message {
  font-size: 1.75rem;
  padding: 1rem 0;
  color: #FFF;
  align-self: center;
  max-width: 1420px !important;
  margin: 0 auto;
  padding: 100px 0;
  width: 95%;
  flex-grow: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  line-height: 1.15;
}

@media (max-width: 1200px){
  #home-online-three .dashboard-controls #greeting-message {
	font-size: 1.5rem;
    padding: 50px 0;
  }
}

@media (max-width: 766px){
  #home-online-three .dashboard-controls #greeting-message {
	font-size: 20px;
	padding: 50px 0;
  }
}

#home-online-three .dashboard-controls #greeting-message p {
  font-family: Light;
  margin-bottom: 0;
  text-align: center;
}

#home-online-three .dashboard-controls #greeting-message p:first-of-type {
  font-family: Medium;
}

#home-online-three .modules-sleeve {
  float: none;
  width: 95%;
  max-width: 1420px !important;
  margin: 0 auto;
}



/*Sensitive data toggle*/
#home-online-three #home3 .dashboard-controls .sensitive-data-toggle {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  position: fixed;
  top: 100px;
  z-index: 1;
  right: 0;
  margin: 0;
  padding: 10px 10px 10px 20px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #000;
}

/*ATTENTION______________________________________________________________________________________*/

/*Hidden for now*/
#home-online-three #home3 .dashboard-controls .sensitive-data-toggle {
  display: none !important;
}

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

#home-online-three #home3 .dashboard-controls .sensitive-data-toggle .caption .caption-text {
  color: #FFF !important;
  font-family: Bold;
  font-size: 14px;
}

#home-online-three #home3 .dashboard-controls .sensitive-data-toggle online-two-toggle {
  margin-right: -70px;
  opacity: 0;
  -webkit-transition: all 0.5s linear 0.25s;
  -o-transition: all 0.5s linear 0.25s;
  transition: all 0.5s linear 0.25s;
  margin-top: -3px;
  height: 23px;
}

#home-online-three #home3 .dashboard-controls .sensitive-data-toggle:hover online-two-toggle {
  margin-right: 0;
  opacity: 1;
}

.carousel-show {
  display: none !important;
}

/*Grid*/


#home-online-three #right-side, 
#home-online-three #home-integrated {
  border: none;
}

#home #home-online-three #home3 .grid-container {
  -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr 2rem 1fr;
  grid-template-columns: repeat(4,1fr);
  -ms-grid-rows: 600px 2rem minmax(400px,auto) 2rem minmax(500px,auto);
  grid-template-rows: 600px minmax(400px,auto) minmax(500px,auto);
  grid-template-areas: 
    "module-1 module-1 module-2 module-2" 
    "module-3 module-3 module-4 module-4" 
    "module-5 module-5 module-5 module-5";
  gap: 2rem;
  background: none;
}

#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  background-color: transparent;
}

#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content .module-content, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content .module-content, 
#home-online-three #home3 #home-modules-mobile .module-content {
  border: none;
  height: 100%;
  padding: 2rem;
  border-radius: 0;
  box-shadow: var(--card-shadow);
  background-color: #FFF;
}

#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content > div, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content > div, 
#home-online-three #home3 #home-modules-mobile > div, 
#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content > div > div, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content > div > div, 
#home-online-three #home3 #home-modules-mobile > div > div, 
#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content > div > div > div, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content  > div > div > div,  
#home-online-three #home3 #home-modules-mobile  > div > div > div, 
#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content  > div > div > div > div, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content  > div > div > div > div, 
#home-online-three #home3 #home-modules-mobile  > div > div > div > div,
#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content > div > div > div > div > div, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content > div > div > div > div > div, 
#home-online-three #home3 #home-modules-mobile > div > div > div > div > div {
  height: 100% !important;
}

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

#home #home-online-three #home3 .module-content-header-container {
  display: none !important;
}

#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content .module-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  justify-content: start;
}

.benefit-statement-copy.module-copy {
  align-items: center !important;
}

#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content #enrolment, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .module-copy {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  justify-content: start;
  height: 80% !important;
}

#home #home-online-three #home3 h3,
#home #home-online-three #home3 .module-title {
  font-family: Bold;
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 2rem;
  margin-top: 1rem !important;
}

#home #home-online-three #home3 p.content-text,
#home #home-online-three #home3 p[id^="benefit-statement"],
#home #home-online-three #home3 #enrolment p {
  font-family: Light;
  font-size: 24px;
  line-height: 1.5;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  align-items: center;
}

#home #home-online-three #home3 .content-text p {
  margin-bottom: 2rem;
}

#home #home-online-three #home3 .content-text img,
#home #home-online-three #home3 .benefit-statement-intro img {
  object-fit: contain;
  height: auto;
  max-width: 100%;
}

#home-online-three #home3 #enrolment {
  background-image: url('/benefitsconnectplus/media/Assets/Boston-icon-1.png'), radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.7) 5%, rgba(136, 0, 204,1) 70%);
  background-size: 35%, cover;
  background-position-x: left, center;
  background-position-y: top, center;
  background-repeat: no-repeat, no-repeat;
}

#home-online-three #home3 #right-side .modules-right-side.grid-container .grid-item-content #enrolment .home-module-enrolment-content, 
#home-online-three #home3 #home-integrated .modules-right-side.grid-container .grid-item-content #enrolment .home-module-enrolment-content {
  max-width: 70% !important;
  min-width: 250px;
  padding-top: 20%;
  height: auto !important;
}

#event-active, 
#event-inactive, 
#event-renewal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden !important;
  align-items: start;
}

#home #home-online-three #home3 #enrolment * {
  color: #fff;
}

#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content .btn-list .btn.btn-default, 
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn-list .btn.btn-default {
  margin: 0 !important;
  float: none;
  border-radius: 0;
  width: 100% !important
}
.module-content .btn-list {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.event-summary {
  margin-bottom: 0;
  margin-top: auto;
}

#home-online-three .btn.btn-default {
  background: var(--color-teal);
  color: #FFF;
  border: 2px solid var(--color-teal);
}

#home-online-three #enrolment .btn-default {
  background: transparent !important;
  border: 2px solid #FFF;
  border-radius: 0;
  margin: 0 !important;
}

#home-online-three #enrolment .btn-default:hover {
  background: var(--color-grey-light) !important;
  border: 2px solid var(--color-grey-light) !important;
}

#home-online-three .btn-default.btn-secondary:hover {
  background: var(--color-grey-light) !important;
  border: 2px solid var(--color-black) !important;
}

#home-online-three .btn-default.btn-secondary:hover,
#home-online-three .btn-default.btn-secondary:hover span{
  color: var(--color-black) !important;
}

#home-online-three #enrolment .btn-default:hover span {
  color: var(--color-black) !important;
}

#home-online-three .btn.btn-default.btn-secondary {
  background-color: #FFF;
  border: 2px solid var(--color-teal);
  color: var(--color-teal);
}

.event-name {
  display: none !important;
  
}
.event-name ~ .text-light,
.event-name ~ .text-light #otherCountdown,
.event-name ~ .text-light #otherCountdown span {
  display: inline !important;
  width: auto;
  line-height: 1.15;
  font-size: 16px !important;
  color: #FFF;
  vertical-align: unset !important;
  display: none !important;
}

.event-name ~ .text-light:before {
  content: 'You have ';
}

.btn-list.flex-column {
  flex-direction: column;
}

.btn-list.flex-column li {
  max-width: 200px;
}

#home #home-online-three #home3 h3.uppercase, 
#home #home-online-three #home3 .module-title.uppercase {
  text-transform: uppercase;
}

/*Mobile - homepage*/
@media only screen and (max-width: 767px) {
  #home-online-three {
    width: 100%;
  }
  
  #home-online-three .dashboard-controls {
    margin: 0 0 1rem 0;
    height: auto;
    background-color: transparent;
    box-shadow: none;
  }
}

#home-online-three #right-side .modules-mobile,
#home-online-three #home-integrated .modules-mobile {
  margin: 0;
}

#home-modules-mobile .module-mobile {
  padding: 0 !important;
  border: none !important;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-bottom: 1rem;
  margin-top: 0;
}

#home-modules-mobile .module-mobile .module-panel {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: hsla(0, 0%, 100%, 0.75);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0;
}

#home-modules-mobile .title {
  display: none;
}

#home-modules-mobile .module-content {
  display: block !important;
  height: 100%;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

#home-module-enrolment.module-mobile .home-module-enrolment-content {
  padding: 0;
  margin: 0;
}

#home-online-three #home3 .modules-mobile .module-content {
  width: 100%;
  margin: 0 auto !important;
  padding: 1rem !important;
}

#home-online-three #right-side .modules-mobile .module-mobile .module-panel .module-copy, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy {
  margin: 0;
}

#home-online-three #right-side .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .event-content .text-light {
  margin-bottom: 1rem;
  margin-left: 0;
  margin-right: 0;
}

#home-online-three #right-side .modules-mobile .module-mobile .module-panel .module-copy .btn.btn-default, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .btn.btn-default {
  width: 100% !important;
  border-radius: 0; 
}

#home-online-three #right-side .modules-mobile .module-mobile .module-panel .module-copy .btn.btn-default.btn-secondary, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel .module-copy .btn.btn-default.btn-secondary {
  background: #FFF;
  color: var(--color-purple-dark);
  border: 2px solid var(--color-purple-dark);
  margin: 0;
  border-radius: 0;
}

#home-online-three #right-side .modules-mobile .module-mobile .module-panel #enrolment .module-copy button.btn.btn-default, 
#home-online-three #home-integrated .modules-mobile .module-mobile .module-panel #enrolment .module-copy button.btn.btn-default {
  background-color: transparent;
  border: 2px solid #FFF;
  font-size: 16px;
  border-radius: 0;
  margin: 0 !important;
}

#home #home-online-three #home3 div:not(#enrolment).module-content .module-title:before {
  content: url('/benefitsconnectplus/media/Assets/Smart%20Benefits%20site%20visuals%20-%20Boston-4.svg');
  display: inline-block;
  height: 24px;
  aspect-ratio: 1;
}

.flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wellbeing .flex-row {
  flex-wrap: wrap;
  gap: 1rem;
}

.wellbeing .flex-row > * {
  flex: 0 1;
}

.module-content:not(.core) img {
  /*min-width: 330px;*/
  aspect-ratio: 1;
}

.wellbeing .flex-row > p {
  min-width: 250px;
}

#home-online-three .wellbeing .btn-list {
  width: 80%;
}

/*_______Matrix_______________________________________________________________________________*/
.online-three-allpages-fullwidth .wrapper-fullwidth .benefit-matrix .benefitheader-fixed, 
.online-three-allpages-fullwidth .wrapper-fullwidth#wrapper {
  width: 100%;
}

.online-three-allpages-fullwidth .wrapper-fullwidth .benefit-matrix .benefitheader-fixed {
  left: 0;
  right: 0;
  max-width: 1440px;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  top: 95px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
}

.benefit-statement .benefitheader-fixed {
  max-width: 980px !important;
}

.online-three-allpages-fullwidth .wrapper-fullwidth .benefit-matrix .benefitheader-fixed .margin-left {
  order: 2;
}

.online-three-allpages-fullwidth .wrapper-fullwidth .benefit-matrix .benefitheader-fixed #printdiv {
  order: 1;
}

.benefit-matrix .benefitheader-fixed > .row {
  margin: 0 !important;
  min-height: 55px;
  display: flex;
  justify-content: end;
}

.benefitheader-fixed .row.margin-left > div {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  width: auto;
  flex: 0 1 auto;
}

.benefit-matrix .benefitheader.benefitheader-border {
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-light);
  color: #ffffff;
  min-width: auto;
  padding: 14px 12px;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  /*! min-height: 50px; */
  width: auto;
  margin-left: 0px !important;
  border-radius: 0;
  border-radius: 10px;
  margin-right: 5px;
}

.benefit-matrix .benefitheader.benefitheader-border:hover,
.benefit-matrix .benefitheader.benefitheader-border:focus,
.benefit-matrix .benefitheader.benefitheader-border:active,
.benefit-matrix .benefitheader.benefitheader-border:active:hover,
.benefit-matrix .benefitheader.benefitheader-border:active:focus {
  opacity: 0.9
}

.btn, 
.btn *, 
.benefit-matrix .benefitheader.benefitheader-border, 
.benefit-matrix .title, 
#benefit-overview .group-title {
  text-transform: capitalize !important;
}

.bootstrap-iso .glyphicon {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.benefitheader.benefitheader-border span {
  color: inherit;
  font-family: Medium;
}

.glyphicon-gift::before {
  content: "\f872" !important;
  font-family: FA6Thin !important;
}

.benefitheader.benefitheader-border span {
  color: inherit;
  font-family: Medium;
}

#resettodefaults {
  display: none;
}

#followup-items {
  float: right;
  margin-right: 15px;
}

.bootstrap-iso .benefitheader-fixed div#followup-items a.btn, 
.bootstrap-iso .benefitheader-fixed div#resettodefaults a.btn {
  font-size: 16px;
  background-color: var(--color-purple-dark);
  border: none;
  min-width: auto; 
  margin: 0;
  float: right;
  width: auto;
  border-radius: 10px;
  padding: 15px 20px;
}

.bootstrap-iso .benefitheader-fixed div#followup-items a.btn:hover, 
.bootstrap-iso .benefitheader-fixed div#resettodefaults a.btn:hover,
.bootstrap-iso .benefitheader-fixed div#followup-items a.btn:focus, 
.bootstrap-iso .benefitheader-fixed div#resettodefaults a.btn:focus,
.bootstrap-iso .benefitheader-fixed div#followup-items a.btn:active, 
.bootstrap-iso .benefitheader-fixed div#resettodefaults a.btn:active,
.bootstrap-iso .benefitheader-fixed div#followup-items a.btn:active:hover, 
.bootstrap-iso .benefitheader-fixed div#resettodefaults a.btn:active:hover {
  font-size: 16px;
  background-color: var(--color-purple-dark) !important;
  border: none;
  min-width: auto;  
  margin: 0;
  float: right;
  width: auto !important;
  border-radius: 10px;
  opacity: 0.9;
}

.benefit-matrix .totalcost-section-row .totalcostsection {
  padding: 0;
  margin: 0;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
}

.benefit-matrix .totalcost {
  border: none;
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
}

.totalcostsection .totalcost .row {
  height: 100%;
  margin: 0;
  display: flex;
}

.totalcostsection .totalcost .row .col-md-4.col-sm-4, 
.totalcostsection .totalcost .row .col-md-4 {
  font-size: 1rem;
  width: auto;
  height: 50px;
  background: var(--color-grey-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  vertical-align: middle;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-transform: inherit;
  border-radius: 0;
  height: auto;
  min-height: 50px;	
  font-family: Bold;
  color: color(--color-black);
  margin-right: 5px;
}

.benefit-matrix .default-cost, 
.benefit-matrix .font-youpay-color {
  color: var(--color-black);
  font-weight: normal;
  font-family: Light !important;
}

.font-youpay-color.margin-top-min.PerPay, 
.benefit-matrix .default-cost, .benefit-matrix .font-youpay-color {
  color: var(--color-black);
}

.totalcostsection .totalcost .row .col-md-4.col-sm-4 > span, 
.totalcostsection .totalcost .row .col-md-4 > span {
  margin-right: 5px;
}

.benefitheader-fixed .totalcost-section-row .payperiodtoggle {
  float: right !important;
  width: auto;
  margin-left: 1rem;
  margin-top: 0;
}

.btn-group.perpayperannualbtngroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

.bootstrap-iso .btn-warning:active, 
.bootstrap-iso .btn-warning.active, 
.bootstrap-iso .open > .dropdown-toggle.btn-warning {
  font-size: 1rem;
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.panel.panel-default {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

.benefit-matrix .benefit-category .panel-default > .panel-heading {
  display: none;
}

.bootstrap-iso .panel-default > .panel-heading + .panel-collapse > .panel-body {
  padding: 0;
  border: none;
  background: transparent;
}

.benefit-matrix .benefit-active-benefits {
  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  margin: 0 0 3rem 0;
  -o-object-position: right;
  object-position: right;
  background-repeat: no-repeat;
  background-color: transparent;
  padding-bottom: 0px;
  background: url("/benefitsconnectplus/media/Assets/Boston_Benefits-banner.jpg") #FFF center center/cover no-repeat;
}

.benefit-matrix .active-category-desc {
  margin: 0;
  height: auto;
  color: #fff;
  padding: 2% 5%;
  display: block;
  text-transform: uppercase;
  max-width: 50%;
}

.benefit-matrix .active-category-desc h1 {
  font-size: 4rem;
  font-family: Bold;
  color: inherit;  
  line-height: 52px;
  letter-spacing: -2.55px;
}

.benefit-matrix .active-category-desc p {
  font-size: 1.2rem;
  letter-spacing: 0.18px;
  font-family: Bold;
  color: inherit;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  line-height: 1.5rem !important;
}

.benefit-matrix .benefit-category:first-child .benefit-active-benefits::after {
  background-position: center right;
  background-size: cover;
  height: 100%;
  width: 50%;
  background-repeat: no-repeat;
}

.benefit-matrix .benefit-active-benefits ~ div {
  max-width: 1440px;
  margin: 0 auto;
  width: 95%;
}

.benefit-matrix .benefit-active-benefits ~ div > div {
  margin-bottom: 2rem;
  border-radius: 10px;
  background-color: transparent;
}

.line-group {
  width: 100%;
  padding: 0;
  clear: both;
}

.benefit-matrix .group-default {
  padding: 0;
  background-color: transparent !important;
  border: none;
  display: none;
}

.benefit-matrix span.line-group {
  color: #fff;
  text-transform: capitalize;
  font-size: 2rem;
  font-family: Bold;
  padding: 1rem 20px !important;
  margin-left: 0% !important;
  display: inline-block;
  width: 100% !important;
  background-color: var(--color-black);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

[class^="line-group"] .group-body {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 2rem;
  border: none;
  padding: 2rem 1rem !important;
}

.benefit-selected-box {
  position: relative;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

[class^="line-group"] .group-body > div {
  height: auto;
  min-height: 300px;
  border-radius: 0;
  -webkit-box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  background-color: #FFF;
}

.benefit-statement [class^="line-group"] .group-body > div:not(.benefit-selected-box),
.matrix.benefit-complete [class^="line-group"] .group-body > div{
  min-height: revert;
}

[class^="line-group"] .group-body > div .benefitline {
  height: 100%;
  border-radius: 0;
  position: relative;
  margin: 0;
  background-color: transparent;
  padding-bottom: 0;
  border-radius: 10px;
}

.benefit-selected-box .benefitline::before {
  position: absolute;
  content: "\f00c";
  font-family: FontAwesome;
  background: var(--color-purple-dark);
  border: none;
  border-radius: 50%;
  font-size: inherit;
  height: 20px;
  width: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: white;
  left: 10px;
  top: 10px;
  z-index: 99;
}

.benefitline .benefit-menu {
  padding: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
}

.benefit-matrix .benefitline .benefit-menu .img {
  width: auto;
}

#main .benefit-matrix .benefit-menu .img {
  background-color: transparent;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#main .benefit-matrix .benefit-menu .img {
  height: 200px;
}

[class^="line-group"] .group-body > div .benefitline [class*="BenefitIntro"] {
  height: 100%;
  width: calc(100%-80px);
  float: right;
  min-height: 0;
  padding: 0;
}

[class^="line-group"] .group-body > div .benefitline [class*="BenefitIntro"] {
  height: 100%;
  width: 100%;
}

.benefit-matrix .title, #benefit-overview .group-title {
  font-family: Medium;
  font-size: 1.6rem;
  color: #fff;
  text-transform: uppercase;
}

.btn, 
.btn *, 
.benefit-matrix .benefitheader.benefitheader-border, 
.benefit-matrix .title, 
#benefit-overview .group-title {
  text-transform: capitalize !important;
}

.benefit-matrix .title, 
#benefit-overview .group-title {
  font-size: 1.5rem;
}

.benefit-matrix .benefitline .row {
  margin: 0;
}

.benefit-matrix .benefitline .row.title {
  height: 75px;
  line-height: 0.8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  width: auto;
  margin-bottom: 2rem;
  margin-left: 2.5rem;
  margin-right: 2rem;
}

.benefit-matrix .lineheader {
  font-size: 18px;
  margin-right: 15px;
}

.benefit-matrix .lineheader, .benefit-matrix .lineheader > a:link, .benefit-matrix .lineheader > a:visited {
  color: var(--color-black);
  font-family: Medium;
  font-size: 1.2rem;
}

.benefit-matrix .lineheader, 
.benefit-matrix .lineheader > a:link, 
.benefit-matrix .lineheader > a:visited {
  font-size: 1.2rem;
  line-height: 0;
}

.benefit-matrix .lineheader::after {
  content: "\a";
  white-space: pre;
}

.row.title .glyphicon.glyphicon-info-sign.glyphicon-info-sign-color {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--color-teal);
}

.glyphicon::before {
  font-family: "Glyphicons Halflings";
  vertical-align: text-top;
}

.bootstrap-iso .glyphicon-info-sign::before {
  content: "\e086";
  font-size: 30px !important;
}

[class^="line-group"] .group-body > div .benefitline [class*="BenefitIntro"] .glyphicon-info-sign .loader {
  height: 30px;
  width: 30px;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50%;
  background-color: var(--color-teal);
  background-position: center center;
  background-size: 70%;
}

[class^="line-group"] .group-body > div .benefitline [class*="BenefitIntro"] > .row:nth-child(2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(100% - 120px);
  width: 90%;
  margin: 0 auto;
}

[class^="line-group"] .group-body > div .benefitline [class*="BenefitIntro"] > .row:nth-child(2) > div:nth-child(2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  justify-content: start;
}

.benefit-matrix .benefitline .row:nth-child(2) > div {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: calc(100% - 150px);
}

[class^="line-group"] .group-body > div .benefitline [class*="BenefitIntro"] > .row:nth-child(2) > div {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.benefitline .currentbenefits {
  width: 100%;
}

.benefitline .currentbenefits .containers {
  margin-bottom: 2rem;
}

.benefit-matrix .benefitline .row {
  margin: 0;
}

.currentbenefits .row.line > div {
  width: 100%;
  padding: 0;
  margin-bottom: 5px;
}

.benefitline .currentbenefits .row.line .col-md-4 {
  min-height: 0;
}

.currentbenefits .row.line > div span {
  font-size: 14px;
  font-family: Light;
}

.glyphicon.glyphicon-play.glyphicon-play-color {
  color: var(--color-black);
  font-size: 0.8rem;
}

.glyphicon-play::before {
  content: "" !important;
  font-family: FA6Solid !important;
  vertical-align: revert !important;
}

.currentbenefits .row.line .containers {
  width: 100%;
  float: right;
}

.currentbenefits .row.line > div > div {
  width: 100% !important;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.row.line .col-md-8.ng-scope {
  width: 60%;
  padding: 0 0%;
}

.currentbenefits .row.line .col-md-8 .col-xs-4 {
  padding: 0;
  width: 100%;
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  font-size: 14px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}

.benefit-print-single-header small {
  font-size: 14px;
}

.FundedDisplay span, .YourCostDisplay span {
  font-family: Medium !important;
  text-transform: capitalize;
}

.benefit-print-single-header::after {
  content: " ";
  white-space: break-spaces;
}

.currentbenefits .row.line .col-md-8 .col-xs-4 .margin-top-min {
  font-size: 14px;
  margin: 0;
}

.font-youpay-color.margin-top-min.PerPay, .benefit-matrix .default-cost, .benefit-matrix .font-youpay-color {
  color: var(--color-black);
}

.btn.btn-success.btn-option-elect:hover, 
.btn.btn-success.btn-option-elect:focus, 
.btn.btn-success.btn-option-elect:active, 
.btn.btn-success.btn-option-elect:active:hover, 
.btn.btn-success.btn-option-elect:active:focus {
  background-color: var(--color-hover);
  font-size: 1rem;
  color: #fff;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  min-width: 90px;
  height: 45px !important;
  padding: 6px 12px;
  border: 2px solid var(--color-teal);
  border-radius: 0;
  line-height: 1.42857143;
  display: inline-flex;
}

.btn.btn-success.btn-option-elect {
  background-color: var(--color-teal);
  font-family: Medium;
  border: 2px solid var(--color-teal);
  font-size: 1rem;
  color: #fff;
  min-width: 90px;
  height: 45px !important;
  padding: 12px;
  border-radius: 0;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  line-height: 1.42857143;
}

.glyphicon.glyphicon-play.glyphicon-play-color {
  color: var(--color-teal);
  font-size: 0.8rem;
}

.benefit-matrix .glyphicon-play-color {
  top: 0;
}

.benefit-menu .img {
  visibility: hidden !important;
}

.benefit-menu .img::before {
  font-family: OnlineTwoIconFont;
  font-size: 100px;
  visibility: visible !important;
  padding-left: 0;
  color: var(--color-teal);
}


.benefit-matrix .benefitline .benefit-menu .img {
  height: 45px;
  margin-top: 10px;
  width: 100%;
  background-position-x: left;
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  margin-left: 5px;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.img.L622c4ba6-8682-4b1d-9502-4118405547f4:before {content: '\e9b0';}
.img.Ld304f6ca-0e5f-4be5-8b90-4ba008dcdfe3:before {content: '\e9a9';}
.img.L8f15b31c-1a03-41e7-90fb-d16be45c7a3d:before {content: '\e99c';}
.img.L4891f274-2824-45b9-b2dd-35ed5b3a7caa:before {content: '\e9af';}
.img.L47aa2756-7b98-4f2b-b13a-b83550889be4:before {content: '\e992';}
.img.L718df4b7-6e6a-4054-a74a-80565f4decab:before {content: '\e994';}
.img.L278b865e-8830-4a05-8491-2bdceb54f154:before {content: '\e93d';}

.BenefitIntro_47aa2756-7b98-4f2b-b13a-b83550889be4 .btn-option-elect,
.BenefitIntro_718df4b7-6e6a-4054-a74a-80565f4decab .btn-option-elect,
.BenefitIntro_278b865e-8830-4a05-8491-2bdceb54f154 .btn-option-elect {
  display: none !important;
}

.BenefitIntro_47aa2756-7b98-4f2b-b13a-b83550889be4 .lineheader a,
.BenefitIntro_718df4b7-6e6a-4054-a74a-80565f4decab .lineheader a,
.BenefitIntro_278b865e-8830-4a05-8491-2bdceb54f154 .lineheader a {
  pointer-events: none !important;
}

.seealso {
  display: none !important;
}

/*Modals*/
.modal-content .tab-body .pannel-body-full {
  min-height: 250px !important;
}

.modal-content .modal-controls {
  border-top: 1px solid #CDDBDE;
}

.online-two-iso .modal-content,
.online-two-iso .modal-large .modal-body{
  border-radius: 15px;
}

.online-two-iso .modal-normal .tab-body {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.online-two-iso .modal-large .modal-body{
  background-color: #FFF;
}

.online-two-iso .modal-controls {
  padding-left: 2rem;
  text-align: left;
}

@media (min-width: 770px) {
  .online-two-iso .modal-large .tab-selector {
    margin-left: 2rem;
  }
}

.online-two-iso .tab-selector {
  width: 80%;
  border-bottom: 1px solid #cddbde;
  display: flex !important;
  gap: 0.5rem;
  flex-wrap: wrap;
}

ul.tab-selector .tab-selector-link:focus {
  color: inherit !important;
}

@media (min-width: 770px) {
  .online-two-iso .modal-large {
    min-width: 770px;
    max-width: 1080px;
    width: 90%;
    margin: 5vh auto;
  }
}

.online-two-iso .modal-large .close {
  margin-right: 1rem;
  margin-top: 1rem;
}

.online-two-iso .modal-large .faq-item {
  padding: 0 2rem;
}

.online-two-iso .modal-large .faq-item .faq-title {
  text-decoration: none;
}

.online-two-iso .modal-large .faq-item .faq-title:focus {
  color: var(--color-black) !important;
}

.online-two-iso .modal-large .faq-item .faq-title:before {
  content: "\f138";
  font-family: FontAwesome;
  padding-right: 5px;
  transition: all 0.25s;
  display: inline-block;
}

.online-two-iso .modal-large .faq-item .faq-title.active:before {
  content: "\f138";
  font-family: FontAwesome;
  padding-right: 5px;
  transform: rotate(0.25turn);
  transform-origin: 35% 50%;
}

.online-two-iso .modal-large .faq-item .faq-answer {
  padding-left: 20px;
  margin-bottom: 2rem;
}

/*Tabs*/
.online-two-iso .tab-header {
  text-align: left;
}

.online-two-iso .modal-normal .tab-selector-link, 
.online-two-iso .modal-large .tab-selector-link {
  color: #999; 
  font-family: Bold; 
  font-weight: normal; 
  text-transform: capitalize;
  margin-left: 0;
  margin-right: 0;
  min-width: 100px;
}

.online-two-iso .modal-large a.tab-selector-link:hover, 
.online-two-iso .modal-large .tab-selector-link.active {
  border-bottom: 4px solid var(--color-teal);
  color: var(--color-teal);
  font-family: Bold;
}

.pannel-body-full {
  font-family: Light;
}

.pannel-body-full h1 {
  font-family: Medium;
}

.pannel-body-full ul {
  margin-left: 2rem;
}

.pannel-body-full ul li {
  list-style: disc;
}

.faq-title:hover, 
.faq-title:focus, 
.faq-title:active {
  color: var(--color-teal) !important;
}

.modal-content a {
  text-decoration: underline;
}
.modal-content a:hover {
  color: var(--color-teal);
}

.faq-title {
  font-family: Medium;
}

/*Manage Dependants/Coverage popup*/
.modal-header.dependant-normal {
  margin-bottom: 1rem;
}

h3.dependantModalHeader {
  color: var(--color-black);
  font-size: 20px;
  margin-left: 0;
  font-family: Bold;
}

.online-two-iso .modal-normal .close {
  color: var(--color-black);
}

.online-two-iso .dependantContainer .tab-header {
  height: auto !important;
}

.online-two-iso .tab-selector {
  width: 80%;
  border-bottom: 1px solid #cddbde;
  display: flex !important;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.online-two-iso .modal-normal a.tab-selector-link:hover, 
.online-two-iso .modal-normal .tab-selector-link.active {
  border-bottom: 4px solid var(--color-teal);
  color: var(--color-teal);
}

.dependantContainer .tab-selector-link span {
  font-family: Bold;
  text-transform: uppercase !important;
  color: #999;
  background-color: transparent;
  padding: 0 !important;
  border: none;
  font-size: 14px;
  min-width: 100px;
  font-weight: normal;
  color: #999;
}

.tab-selector-link.active span {
  color: var(--color-tesl);
}

.dependant-head.pannel-body {
  position: relative;
}

.dependantIntroText {
  font-family: Medium;
}

.dependant-list-top.pannel-body {
  padding-left: 0px;
}

.dependant-list-top a.dependant-add-link {
  background-color: var(--color-teal);
  border: 1px solid var(--color-teal);
  color: #ffffff;
  font-size: 16px;
  font-family: Bold;
  text-transform: uppercase;
  font-weight: normal;
  padding: 9px;
  margin-bottom: 5px;
  width: -moz-fit-content;
}

/*Manage dependants - new styling*/
.dependant-pannel .dependant-list span {
  font-size: 14px !important;
  color: var(--color-black);
}

.online-two-iso .dependantContainer .tab-header {
  height: auto !important;
}

.dependantContainer .tab-selector-link {
  position: relative;
  height: 30px;
  background-color: transparent;
  min-width: 100px;
  border-bottom: 4px solid transparent;
}

.tab-selector-link:hover {
  border-bottom: 4px solid var(--color-black) !important;
}

.tab-selector-link.active {
  border-bottom: 4px solid var(--color-black) !important;
}

.tab-selector-link.active span {
  color: var(--color-black);
}

.dependant-head.pannel-body {
  position: relative;
}
.dependant-list-top.pannel-body {
  padding-left: 0px;
}

.dependant-list-top a.dependant-add-link {
  margin: revert;
  background: transparent;
  border: none;
  color: var(--color-black);
  text-transform: initial;
  padding: 10px 12px 10px 0;
}

.dependant-list-top a.dependant-add-link:hover, 
.dependant-list-top a.dependant-add-link:focus {
  margin: revert;
  background: transparent;
  border: none;
  color: var(--color-grey-4) !important;
}

.dependant-list-bottom.pannel-body.dependant-list-bottom-display {
  padding-bottom: 0;
  margin-left: 0 !important;
  text-align: left;
  z-index: 999;
  position: relative;
  width: max-content;
}

.dependant-cell.add.is-auto-add {
  display: none;
}

/*Manage Dependants/Coverage popup*/
.modal-header.dependant-normal {
  margin-bottom: 1rem;
}

h3.dependantModalHeader {
  color: var(--color-black);
  font-size: 20px;
  margin-left: 0;
  font-family: Bold;
}

.online-two-iso .modal-normal .close {
  color: var(--color-black);
}

.online-two-iso .dependantContainer .tab-header {
  height: auto !important;
}

.online-two-iso .tab-selector {
  width: 80%;
  border-bottom: 1px solid #cddbde;
  display: flex !important;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.online-two-iso .modal-normal a.tab-selector-link:hover, 
.online-two-iso .modal-normal .tab-selector-link.active {
  border-bottom: 4px solid var(--color-teal);
  color: var(--color-teal);
}

.dependantContainer .tab-selector-link span {
  font-family: Bold;
  text-transform: uppercase !important;
  color: #999;
  background-color: transparent;
  padding: 0 !important;
  border: none;
  font-size: 14px;
  min-width: 100px;
  font-weight: normal;
  color: #999;
}

.tab-selector-link.active span {
  color: var(--color-tesl);
}

.dependant-head.pannel-body {
  position: relative;
}

.dependantIntroText {
  font-family: Medium;
}

.dependant-list-top.pannel-body {
  padding-left: 0px;
}

.dependant-list-top a.dependant-add-link {
  background-color: var(--color-teal);
  border: 1px solid var(--color-teal);
  color: #ffffff;
  font-size: 16px;
  font-family: Bold;
  text-transform: uppercase;
  font-weight: normal;
  padding: 9px;
  margin-bottom: 5px;
  width: -moz-fit-content;
}

/*Manage dependants - new styling*/
.dependant-pannel .dependant-list span {
  font-size: 14px !important;
  color: var(--color-black);
}

.online-two-iso .dependantContainer .tab-header {
  height: auto !important;
}

.dependantContainer .tab-selector-link {
  position: relative;
  height: 30px;
  background-color: transparent;
  min-width: 100px;
  border-bottom: 4px solid transparent;
}

.tab-selector-link:hover {
  border-bottom: 4px solid var(--color-teal) !important;
}

.tab-selector-link.active {
  border-bottom: 4px solid var(--color-teal) !important;
}

.tab-selector-link.active span {
  color: var(--color-teal);
}

.dependant-head.pannel-body {
  position: relative;
}
.dependant-list-top.pannel-body {
  padding-left: 0px;
}

.dependant-list-top a.dependant-add-link {
  margin: revert;
  background: transparent;
  border: none;
  color: var(--color-black);
  text-transform: initial;
  padding: 10px 12px 10px 0;
}

.dependant-list-top a.dependant-add-link:hover, 
.dependant-list-top a.dependant-add-link:focus {
  margin: revert;
  background: transparent;
  border: none;
  color: var(--color-grey-4) !important;
}

.dependant-list-bottom.pannel-body.dependant-list-bottom-display {
  padding-bottom: 0;
  margin-left: 0 !important;
  text-align: left;
  z-index: 999;
  position: relative;
  width: max-content;
}

.dependant-cell.add.is-auto-add {
  display: none;
}

.online-two-iso .modal-normal .tab-body {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/*Exit confirmation*/
.overlay-no-height-limit {
  border-radius: 10px;
  max-width: 960px;
  width: 95%;
}

.online-two-iso .header-overlay {
  background-color: #FFF;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.online-two-iso .header-overlay h5 {
  color: var(--color-black);
  font-family: Bold;
}

.header-overlay A.close {
  font-size: 0;
  height: 30px;
}

.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.blue, .online-two-iso A.button-style.blue {
  background-color: var(--color-teal);
  border: 1px solid var(--color-teal);
  font-size: 16px;
  padding: 10px 12px;
  font-family: Medium;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}




















































/*_______FOOTER_______________________________________________________________________________*/
.online-two-iso #terminator #footer.footer-fullwidth {
  background-color: #000;
  min-height: 235px;
  margin-top: 5rem;
  position: relative;
  display: grid;
  align-items: center;
}

.online-two-iso #terminator #footer.footer-fullwidth {
  background-color: #000;
  min-height: 235px;
  margin-top: 5rem;
  position: relative;
  display: grid;
  align-items: center;
}


#footer__items {
  display: flex !important;
  max-width: 1280px;
  padding: 0;
  color: var(--color-grey-light);
  font-size: 14px;
  font-weight: 400;
  font-family: Bold;
  margin: 0 auto !important;
}

#footer__items a {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit;
  padding: 0px 10px 0px 0 !important;
}

@media only screen and (min-width: 767px) {
  #footer__items > div:nth-of-type(n+2) {
    padding-left: 10px !important;
  }
  
  #footer__items > div:not(:last-child) {
    border-right: 1px solid #FFF
  }
}

.online-two-iso #footer .disclaimer {
  width: calc(100% - 250px);
  max-width: min(calc(100% - 400px), 980px);
  padding: 2rem 0 2rem 0;
  color: var(--color-grey-light);
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
}

#footer .footer__logo {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 175px !important;
}

@media(max-width: 767px) {
  .online-two-iso #footer .disclaimer {
    width: 100%;
    padding: 1rem 1rem 8rem 1rem;
    color: var(--color-grey-light);
    text-align: center;
    max-width: 980px;
  }
  #footer .footer__logo {
    bottom: 10px !important;
    right: 10px !important;
  }
}

@media only screen and (max-width: 750px) {
  #footer div {
    margin-bottom: 0;
  }
  #footer #footer__items {
    flex-direction: column;
    padding: 1rem;
  }
  #footer__items a {
	padding: 10px 0 !important;
	text-align: center;
  }
}

.benefit-matrix .totalcostLable {
  display: none;
}

.benefitselect #online2header {
  max-width: 980px;
}

.online-two-iso .benefit-matrix .fixed-container {
  margin-top: 125px !important;
}

.benefitselect .fixed-container #content {
  max-width: 980px;
  width: 85%;
  margin: 0 auto;
  float: none;
}

.benefitselect .line-benefit-intro {
  min-height: 75px;
  margin-bottom: 0;
  margin-top: 0;
}

.benefitselect .line-name {
  font-family: Bold;
  font-size: 3rem;
  color: var(--color-black);
}

.benefit-matrix .newbenefit, 
.benefit-matrix .changebenefit, 
.glyphicon.glyphicon-record.glyphicon-activated .acitve-text {
  color: #fff;
  background-color: var(--color-grey-4);
  padding: 1px 5px 1px 5px;
  font-size: 0.8rem;
  text-transform: lowercase;
  border-radius: 5px;
  top: -2px;
  font-family: Light;
  margin: 5px 0;
}

.benefitselect #online2header {
  max-width: 980px;
}

.benefitselect .line-benefit-intro .glyphicon-info-sign-color {
  font-size: 2rem;
  top: 0;
  position: relative;
}

.benefit-matrix .line-description, 
.followup-collect-header .followup-item-coverage-heading span p, 
#linedata > div > div > h1 ~ div {
  max-width: 65ch;
  margin: 0.5rem 0 1rem 0;
}

.benefitselect .line-benefit-intro .glyphicon-info-sign-color {
  font-size: 2rem;
  top: 0;
  position: relative;
}

.benefitselect .header-selected, 
.benefitselect .line-name, 
.benefitselect .products-header H4, 
.benefitselect .line-benefit-intro .glyphicon-info-sign-color {
  color: var(--color-black);
}

.line-benefit-intro .loader {
  height: 2rem;
  width: 2rem;
  position: absolute;
  left: -0;
  top: 0;
  background-size: 60%;
  background-position: center center;
  background-color: var(--color-black);
  border-radius: 50%;
}

.benefitselect H1 {
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  color: revert;
  margin-top: revert;
  text-transform: revert;
}

.more-info.margin-top-min {
  /* display: none; */
  margin-bottom: 2rem;
  margin-top: 0;
}

.more-info.margin-top-min .glyphicon-folder-open {
  display: none;
}

.more-info.margin-top-min a {
  text-decoration: underline;
}

.more-info .loader {
  display: none;
}

@media only screen and (min-width: 767px) and (max-width: 1160px) {
  .online-two-iso #header, 
  .online-two-iso #wrapper, 
  .online-two-iso #header.header-fixed, 
  .online-two-iso #menu-container.menu-container-fixed, 
  online-two-iso .benefit-matrix .fixed-container, 
  .online-two-iso .benefit-matrix .benefitheader-fixed, 
  .online-two-iso .help-ico, 
  .online-two-iso .eol-center {
    position: static;
  }
}

.benefitselect .header-selected {
  background-color: var(--color-black);
  font-family: Bold;
  font-size: 1.5rem;
  margin-bottom: 0px;
  color: #fff;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

[id^="lineid_"] .selection {
  display: none !important;
}

.benefitselect .employerFundingCart .cost, 
.benefitselect .employerFundingCart .funded {
  background-image: none;
}

#content-you-chose-summary * {
  font-size: 1rem;
}

#content-you-chose-summary .in-Cart .cost {
  padding-top: 0;
  width: 20%;
  padding: 0;
  margin: 0;
  text-transform: capitalize;
}

#content-you-chose-summary .cost p,
#content-you-chose-summary .in-Cart .funded p {
  text-transform: capitalize;
}

#content-you-chose-summary .in-Cart .funded p:first-child, 
#content-you-chose-summary .in-Cart .cost p:first-child {
  line-height: 1.1em;
}

span.green-number {
  font-family: Medium !important;
}

.benefitselect .in-Cart .you-pay H3 {
  color: var(--color-black);
  font-size: 1rem;
  font-family: Light
}

span.green-number {
  font-family: Medium !important;
}

.benefitselect .box-border,
.benefitselect .box-left-bg {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  box-shadow: var(--card-shadow);
}

.benefitselect .box-border-bg {
  width: 100%;
}

.benefitselect .your-beneficiaries {
  display: none;
}

.benefitselect .products-header H4 {
  font-family: Medium;
  color: var(--color-black);
  font-size: 1.5rem;
  text-transform: capitalize;
  background: none;
  padding-bottom: 10px;
}

#products .box-border-bg, #products .box-left-bg {
  background: none;
  margin-bottom: 0;
}

.benefitselect .products .box-border {
  border-radius: 10px;
  -webkit-box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
}

.benefitselect .box-border {
  border: none;
  overflow-x: auto !important;
}
.box-border {
  background: #fff;
  border: 1px solid #ececec;
  padding: 3px;
  float: left;
}

.benefitselect .products .box-border.sel .header {
  background: none;
  font-size: 2rem;
  padding: 0 0 0 1rem;
  text-indent: 0;
  font-family: Medium;
  text-transform: uppercase;
}

.benefitselect .products .box-border.sel {
  position: relative;
  border: none;
}

[id^="current-option-in-cart"] {
  position: absolute;
  top: 10px;
  z-index: 998;
}

.benefitselect .products .box-border.sel .header::before {
  content: '\f058';
  font-family: FA6Solid;
  color: var(--color-red);
}

.products .content-box-border {
  padding-left: 4rem;
}

#products .product-info {
  max-width: 600px !important;
  width: 50%;
}

.product-info > div > h2, .product-info H2 {
  font-size: 1.4rem;
  font-family: Medium;
  color: var(--color-black);
}

@media (max-width: 970px) {
  #products .product-info,
  .products.available-options .content-option-credit-health {
    width: 100% !important;
  }
  .products.available-options .content-option-credit-health,
  .option-credit-health,
  .option-credit-health UL LI{
    float: left;
  }
  .option-credit-health {
	padding-left: 0;
	float: left;
  }
}

.product-info .description {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.15 !important;
}

.bootstrap-iso.benefitselect.benefit-matrix .content-box-border > table {
  width: 100%;
}

#step2LinePage.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.green, #step2LinePage.online-two-iso A.button-style.green {
  background-color: var(--color-black);
  border: 2px solid var(--color-black);
  color: #FFF;
  font-family: Medium;
  text-transform: capitalize !important;
  font-weight: normal;
  border-radius: 10px;
  padding: 10px 20px;
  width: auto;
}

#step2LinePage.online-two-iso #content #confirm-replacement.overlay .content-overlay .checkout-button A.button-style.green:hover, 
#step2LinePage.online-two-iso A.button-style.green:hover {
  background-color: #FFF;
  border: 2px solid var(--color-black);
  color: var(--color-black) !important;
}

.election-info-collect .dependant-board .icon {
  background: url('/benefitsconnectplus/media/Assets/User-icon_Dependants_On_80x80.png') transparent center center/contain no-repeat scroll
}


/*See Also*/
.see-also .benefit-menu {
  margin-bottom: 5vh;
}

.benefitselect .benefit-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.benefitselect .seealso ul {
  float: left;
  width: 100%;
}


.benefitselect .seealso .benefit-menu li {
  flex: 1 1 10%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 5px;
  -webkit-box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
  background-color: #FFF;
  max-width: 320px;
  transition: all 0.5s;
  margin: 0;
  float: none;
  width: 32%;
  position: relative;
}

.benefitselect .benefit-menu .img {
  height: 55px;
  width: 55px;
  float: none;
}

.see-also .benefit-menu .img {
  background-size: contain;
}

.benefitselect .linename {
  float: none;
}

.benefit-menu .linename {
  text-align: left;
  margin: 0;
}

.benefitselect .linename > a:link {
  font-size: 16px;
  color: var(--color-black);
  font-family: Medium;
  display: inline-flex;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  padding-left: 100px;
}

.benefitselect .benefit-menu .img {
  height: auto !important;
  width: auto;
  min-width: 80px;
}

.benefitselect .benefit-menu .img:before {
  font-size: 70px;
}

.see-also h5 {
  font-family: Medium;
  font-size: 1rem;
}



/*New benefit selection styling - currently selected and options*/
[id^="lineid_"] .selection {
  display: none !important;
}

#content-you-chose-summary * {
  font-size: 1rem !important;
}

.in-Cart .you-chose {
  width: 30%;
}

.in-Cart .you-chose > div > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.in-Cart .you-chose .selected-plan span {
  font-family: Medium;
}

#content-you-chose-summary .in-Cart .cost {
  visibility: hidden;
  padding-top: 0;
  width: 20%;
  padding: 0;
  margin: 0;
  text-transform: capitalize;
}

#content-you-chose-summary .cost p {
  text-transform: capitalize;
}

#content-you-chose-summary .in-Cart .funded p:first-child, 
#content-you-chose-summary .in-Cart .cost p:first-child {
  line-height: 1.1em;
}

span.green-number {
  font-family: Medium !important;
  font-weight: normal !important;
  color: var(--color-black) !important;
  font-size: 1rem !important;
}

#content-you-chose-summary .in-Cart .funded {
  visibility: hidden;
  width: 25%;
  padding: 0;
  margin: 0;
}

#content-you-chose-summary .in-Cart .funded p, 
#content-you-chose-summary .in-Cart .funded > div {
  text-transform: capitalize;
}

#content-you-chose-summary .in-Cart .you-pay {
  width: 20%;
}

#products .box-border-bg, 
#products .box-left-bg {
  background: none;
  margin-bottom: 0;
  border-radius: 10px;
}

.content-option-credit-health {
  width: 50%;
  margin-top: 0;
}

.option-credit-health {
  width: 100%;
}

[id^="cost-"] .option-credit-health .credit-number .credit {
  display: none;
}

.option-credit-health UL LI {
  width: 100%;
}

.option-credit-health .option,
.option-credit-health .value {
  width: auto;
}

.option-credit-health .option,
.option-credit-health .value span.green-number {
  font-family: Light !important;
}

.option-credit-health .option.sel,
.option-credit-health .value.sel span.green-number {
  font-family: Medium !important;
  font-size: 16px;
}

.in-Cart .you-chose .selected-plan {
  color: var(--color-black);
  font-family: Medium;
}

.selected-coverage strong {
  font-family: Light
}

.products.available-options .content-option-credit-health {
  width: 50%;
}

.products.available-options .option-credit-health.option-credit-health UL LI {
  width: 80%;
}

.option-credit-health .option.sel {
  color: var(--color-black);
}



/*No background*/
.bootstrap-iso.benefitselect.benefit-matrix.ng-scope .division {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;}

/*Remove border on available products*/
#products.available-options .box-border-bg {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;}

/*Product description*/
.description.ng-binding > p {font-family: Light;}

/*Buton to right*/
.bootstrap-iso.benefitselect.benefit-matrix .content-box-border > table {float: right; width: 55%;}

/*Hide products 'compare' & 'product finder' & 'provider finder'*/
.content-box-border .links-group.four-links {display: none;}

/*Cart*/
.benefitselect .products .box-border.sel .header {
  background: none;
  font-size: 2rem;
  padding: 0 0 0 1rem;
  text-indent: 0;
  font-family: Medium;
  text-transform: uppercase;
  visibility: hidden;
}

.benefitselect .products .box-border.sel .header::before {
  content: '\f058';
  font-family: FA6Solid;
  color: var(--color-purple-dark);
  visibility: visible;
}

/*Borders on products*/
.benefitselect .box-border {
  border: 1px solid var(--color-grey-light);
  padding: 0;
}

.benefitselect .products .box-border.sel {
  padding: 0px;
}

.box-border-bg.ng-scope {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

SPAN.green-number {color: var(--color-black);}
.in-Cart .you-chose .selected-plan {
  color: var(--color-black);
  font-family: Inter-bold;
}
.benefitselect .in-Cart .you-pay H3 {color: var(--color-black); font-size: 16px;}
.benefitselect .in-Cart .you-pay P SPAN.green-number {color: var(--color-black); font-size: 16px;}

/*Statement*/
#main.benefit-statement,
#main.benefit-complete {
  max-width: 980px;
  width: 95%;
  margin: 0 auto;
}

.print-btn-section {
  display: none;
}

.alert.alert-warning {
  display: block;
  margin: 15px 0;
  font-size: 1rem;
  font-family: Light;
  padding: 1rem;
  background: #FFEDCC;
  border: none;
  border-top: 6px solid #B37400;
  border-radius: 4px;
  color: var(--color-black);
}

.benefit-statement .benefitheader-fixed,
.benefit-complete .benefitheader-fixed {
  display: block !important;
}

.online-two-iso .benefit-statement .fixed-container {
  margin-top: 175px !important;
}

.online-two-iso .benefit-complete .fixed-container {
  margin-top: 200px !important;
}

.benefitforcomplate .benefit-matrix .benefit-category .panel-body {
  background-color: transparent;
}

#benefitstatement-asatdate {
  width: 100%;
  text-align: center;
  font-family: Medium;
  float: none;
  justify-content: center;
  min-height: auto;
  font-size: 2rem;
  margin: 0 !important;
}

@media (max-width: 720px) {
  #benefitstatement-asatdate {
    display: inline-block;
    font-size: 1.2rem;
    text-align: center;
  }
}

.benefitstatement-asatdate-label::after {
  content: '\00a0';
}

.uib-daypicker .uib-day:hover button {
  padding: revert;
  color: #FFF;
}

.completemessage .close {
  right: 0 !important;
}

.btn.uib-title:hover {
  padding: revert;
  font-family: Light !important;
}

.uib-daypicker .btn:hover strong {
  font-weight: normal;
}

.uib-daypicker .btn:hover {
  font-weight: normal;
  padding: revert
}

.input-group-addon.data-addon,
#dateFormat {
  color: var(--color-black) !important;
}

.input-group-addon.data-addon{
  text-transform: capitalize;
}

#dateFormat {
  text-transform: uppercase;
}

/*Confirm choices*/
[ng-controller*="BenefitMatrixController"] .benefitheader,
[ng-controller*="BenefitMatrixController"] .confirm_agreement > label {
  font-family: Bold !important;
  color: var(--color-black);
  font-size: 1.25rem;
  font-weight: normal;
}

.benefitheader[ui-config-show="EnrolStep1DependentInfoDisplay"] {
  font-size: 1rem !important;
}

.confirmagreementbtngroup label.btn, 
.perpayperannualbtngroup div.btn {
  padding: 10px 12px;
  border: 2px solid var(--color-teal);
  font-size: 14px !important;
}

.confirmagreementbtngroup label.btn.active, 
.perpayperannualbtngroup div.btn.active,
.confirmagreementbtngroup label.btn.active:focus, 
.perpayperannualbtngroup div.btn.active:focus {
  background-color: var(--color-teal) !important;
  padding: 10px 12px;
  border: 2px solid var(--color-teal);
  font-size: 14px !important;
}

.confirmagreementbtngroup label.btn.active:focus:hover, 
.perpayperannualbtngroup div.btn.active:focus:hover,
.confirmagreementbtngroup label.btn.active:hover, 
.perpayperannualbtngroup div.btn.active:hover {
  background-color: var(--color-hover) !important;
  padding: 10px 12px;
  border: 2px solid var(--color-hover);
  font-size: 14px !important;
}

.confirm-checkout-button .btn-success {
  background-color: var(--color-purple-dark) !important;
  border: 2px solid transparent;
}

.confirm-checkout-button .btn-success:hover {
  background-color: var(--color-purple-dark) !important;
  border: 2px solid transparent;
}

@media (max-width: 766px) {
  a[href="/home"] {
    width: 150px;
    margin: auto;
    position: absolute !important;
    left: 0;
    right: 0;
  }
  
  #logo {
    float: none;
    margin: 0 auto;
  }
  
  .main-menu-toogle.btn.visible-xs {
    position: absolute;
    bottom: 0;
    left: 15px;
    width: auto !important;
    top: 0;
    margin: auto 0 !important;
    height: 50%;
    padding: 0 !important;
  }
  
  .main-menu-toogle.btn.visible-xs:focus {
    outline: none !important;
  }
  
  .fa.fa-bars:before {
    color: #000;
    font-size: 2rem;
    content: '\f0c9';
    font-family: FA6Regular;
  }
  
  #menu-no-dashboard,
  #menu,
  #menu-sub {
    position: relative;
    bottom: 0;
    margin-top: 40px;
  }
  
  #menu-container.collapse {
    display: none !important;
  }
  
  #menu-container.collapse.in{
    display: block !important;
    position: static;
  }
  
  .visible-xs ~ #menu-container.collapse.in #menu-no-dashboard {
	position: absolute;
	top: 60px;
	left: 10px;
	flex-direction: column;
	height: min-content !important;
	min-width: 160px;
	max-width: 360px;
	list-style: none;
	background: #fff;
	border: solid 1px #ddd;
	border-radius: 4px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	overflow: visible;
	padding: 10px 0 !important;
	margin-top: 0;
  }
  
  .visible-xs ~ #menu-container.collapse.in #menu-no-dashboard li {
    justify-content: start;
    padding: 5px 10px !important;
  }
  
  .visible-xs ~ #menu-container.collapse.in #menu-no-dashboard li a {
    text-align: left;
    justify-content: start;
    border: 0;
    align-items: start;
    padding: 0px;
    margin: 0;
    width: 90%;
    white-space: nowrap;
  }
  
  #menu-no-dashboard li a::after, 
  #menu-no-dashboard li a.selected::after {
    -webkit-transform-origin: left !important;
    -ms-transform-origin: left !important;
    transform-origin: left !important;
  }
  
  #headerResources {
    top: 0;
    margin: auto 0;
    height: 50%;
  }
}


@media (max-width: 767px) {
  #home #home-online-three #home3 .content-text img, 
  #home #home-online-three #home3 .home-module-benefit-statement-content img {
    height: 200px;
  }
  
  #home-module-enrolment.module-mobile .enrollment-copy.module-copy {
    margin-top: 80px !important;
  }
  #home-module-benefit-statement.module-mobile h2.module-title,
  #home-module-benefit-statement.module-mobile p {
    text-align: center;
  }
}

/*nav bar for mobile*/
@media (max-width: 1200px) {
  #menu-container.collapse {
    display: none !important;
  }
  
  .main-menu-toogle.btn.visible-xs {
    display: block !important;
    left: 15px;
    width: auto !important;
    top: 0;
    margin: auto 0 !important;
    height: 50%;
    padding: 0 !important;
  }
  
  .fa.fa-bars::before {
	color: #000;
	font-size: 2rem;
	content: '\f0c9';
	font-family: FA6Regular;
  }
  
  #menu-container.collapse.in {
	display: block !important;
	position: static;
  }
  
  .visible-xs ~ #menu-container.collapse.in #menu-no-dashboard {
	position: absolute;
	top: 60px;
	left: 10px;
	flex-direction: column;
	height: min-content !important;
	min-width: 160px;
	max-width: 360px;
	list-style: none;
	background: #fff;
	border: solid 1px #ddd;
	border-radius: 4px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	overflow: visible;
	padding: 10px 0 !important;
	margin-top: 0;
  }
  
  .visible-xs ~ #menu-container.collapse.in #menu-no-dashboard li {
	justify-content: start;
	padding: 5px 10px !important;
  }
  
  #header {
	justify-content: start;
  }
  
  #header a[href="/home"] {
	left: 2rem;
	margin-right: auto;
  }
}

/*mobile controls*/
@media (max-width: 767px) {
  /*#printdiv {
  display: none !important;
}*/
  .benefitheader-fixed .row.margin-left > div {
	width: 95%;
    margin: 0 auto !important;
	float: none !important;
  }
  .benefit-matrix .benefitheader.benefitheader-border {
	width: 100%;
    margin-bottom: 10px;
  }
  .benefitheader-fixed div#followup-items a.btn {
	width: 100% !important;
  }
}

/*mobile design fixes*/
@media only screen and (max-width: 650px) {
  .benefit-matrix .benefit-category-mobile-view {
    width: 100%;
  }
  [class^="line-group"] .group-body {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media only screen and (min-device-width: 767px) and (max-device-width: 1024px) {
  .online-two-iso .page-content, .online-two-iso #menu-container {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .benefit-matrix .benefit-menu .img {
    display: block;
  }
}

@media (max-width: 750px) {
  .benefit-menu .img {
    display: block;
  }
}

@media screen and (min-width:767px) {
  .benefit-matrix .modal-footer {
    border-radius:0 0 15px 15px;
  }
}

.payslip-item-amount.hide-sensitive {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

.benefit-statement-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
}

#home-module-benefit-statement .benefit-statement-copy .payslip-item-data #item-0 {
  font-size: 1rem;
  text-align: center;
}

.benefit-matrix a.btn.btn-option-elect {
  margin:0 0 10px 0;
}

.benefit-matrix a.btn.btn-option-elect:hover {
  margin:0 0 10px 0;
}

.depen-info > .col-md-4 {
  padding-left: 0;
  width: 100%;
}

.depen-info .text-success, .depen-info .text-success span {
  font-family: Medium !important;
  color: var(--color-black);
  padding: 0;
  font-size: 0.8rem !important;
  margin-bottom: 0;
}

[ng-if="::be.CoveredDependants.length>0"]::before {
  content: 'You\a';
  white-space: pre;
  font-size: 0.8rem;
}
.dependent-approved {
  color: var(--color-black);
  font-size: 0.8rem;
}

.dependant-cell.legal-name {
  display: none;
}

.followup-required.alert {
  display: none;
}

.benefitselect .box-border {
  background-color: #EEE;
}

.benefitselect #content .line-benefit-intro ~ [class^="box-border"] .box-border {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#content-you-chose-summary {
  -webkit-box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
  border-radius: 15px !important;
  margin: 0.5rem;
}

.benefitselect #content .line-benefit-intro ~ [class^="box-border"] .box-border .followup-container {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 45%;
  flex: 1 1 45%;
  margin: 0.5rem;
}

.followup-collect-header .followup-item-coverage-heading span .followup-item-header,
.followup-collect .followup-item-header {
  font-family: Medium;
  margin: 0;
  padding-top: 1rem;
}

.followup-item-collect {
  margin-right: 4rem;
}

.followup-item-collect.alert-warning {
  background-color: #C9CAC8 !important;
  border: none !important;
}
.benefitselect .followup-container .followup-collect-header {
  height: auto;
  padding: 0px 12px;
}

.followup-collect-header .followup-item-coverage-heading span,
.followUpItems-confirm label, 
.followup-item-input label,
.followUpItems-confirm label p, 
.followup-item-input label p, 
.followUpItems-confirm label span, 
.followup-item-input label span,
.followup-item-description > * {
  font-size: 0.8rem;
  font-family: Light;
  color: var(--color-black);
  font-weight: normal;
  line-height: 1.1;
}

.followup-collect-header .followup-item-coverage-heading span .followup-item-header {
  font-family: Medium;
}

.followup-collect-header .followup-item-coverage-heading span .followup-item-header + p {
  margin: 0;
}

.benefit-matrix .line-description, 
.followup-collect-header .followup-item-coverage-heading span p, 
#linedata > div > div > h1 ~ div {
  max-width: 65ch;
}

.benefitselect .followup-collect-info {
  display: none;
}

.bullet-head {
  margin-bottom: 0 !important;
  padding-bottom: 5px;
}

/*Benefit matrix fix for mobile*/
@media only screen and (max-width: 767px) {
  .online-two-iso .benefit-matrix .benefitheader-fixed,
  .benefit-matrix .benefitheader-fixed > .row.margin-left {
    display: block !important;
  }
  .benefit-matrix .benefitheader-fixed > .row.margin-left.ng-hide {
    display: none !important;
  }
  .online-two-iso .benefit-matrix .fixed-container {
	margin-top: 200px !important;
  }
  .online-two-iso .matrix.benefit-statement .fixed-container {
	margin-top: 320px !important;
  } 
  #printdiv {
    margin: 10px auto !important;
    width: 95% !important;
  }
  #printdiv > div {
    padding: 0 !important;
  }
  #printdiv div {
    width: 100% !important;
  }
  .benefit-menu .img::before {
	font-size: 100px;
  }
  .benefit-matrix .benefit-active-benefits {
	background-position: left center;
  }
  .benefit-matrix .active-category-desc {
	max-width: 100%;
  }
}

.benefitselect .continue {
  min-width: 100% !important;
  right: 5px !important;
  position: relative;
}

.eol-center .search {
  display: none !important;
}

.caption-text.datepicker-acceptedformat {
  display: none;
}

.benefit-matrix .employee-cost .cost-number {
  color: var(--color-black);
}

.election-info-collect .dependant-name-item.info-item {
  font-size: 14px;
}

/*Email capture*/
#email-capture {
  max-width: 720px;
  margin: 0 auto;
  background: #FFF;
  border-radius: 10px;
  padding: 2rem;
  font-family: Light;
  margin-top: 2rem;
  box-shadow: var(--card-shadow);
}

#email-capture .intro {
  /*! max-width: 500px; */
  display: block;
  margin: 15px 0;
  font-size: 1rem;
  font-family: Light;
  padding: 1rem;
  background: #E5EFF0;
  border-top: 6px solid var(--color-purple-dark);
  border-radius: 4px;
  /*! width: 80%; */
}

#email-capture .intro p {
  font-size: 20px;
  color: var(--color-black);
}

#email-capture .space-bar {
  display: none;
}

#email-capture .sectionTitle {
  font-family: Bold;
  color: #666;
  font-size: 24px;
  margin-bottom: 10px;
}

.sectionTitle[data-bind="html: locale.EmailPreferenceHeading"] {
  margin-top: 2rem;
}

#email-capture label {
  text-transform: initial;
  color: var(--color-black);
  font-family: Bold;
  font-size: 1rem;
  margin-top: 1em;
}

#email-capture input#txtHomeEmail {
  height: 45px;
  min-width: 200px;
  font-size: 16px;
  font-family: Light;
  color: #2e2e2e;
  border: 1px solid #46535e;
  border-radius: 4px;
  width: min(100%, 300px) !important;
}

#email-capture input#txtHomeEmail:focus-visible {
  border: 2px solid var(--color-hover);
  outline: none;
}

#email-capture input#txtHomeEmail:focus {
  box-shadow: var(--card-shadow);
}

#email-capture label[for="txtWorkEmail"] ~ p {
  padding: 5px;
  height: 45px;
  min-width: 200px;
  font-size: 16px;
  font-family: Light;
  color: #666666;
  border: 1px solid #46535e;
  border-radius: 4px;
  width: min(100%, 300px) !important;
  align-items: center;
  line-height: normal;
  display: inline-flex;
  cursor: no-drop;
  font-style: italic;
}

#email-capture .sectionTitle[data-bind="html: locale.EmailPreferenceHeading"] ~ div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#email-capture .sectionTitle[data-bind="html: locale.EmailPreferenceHeading"] ~ div label {
  margin: 0.5rem 0
}

#email-capture .sectionTitle[data-bind="html: locale.EmailPreferenceHeading"] ~ div input {
  margin: 0.5rem 0;
  /*   height: 25px; */
}

#email-capture input[type="radio"] {
  accent-color: var(--color-purple-dark);
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-teal);
  border-radius: 5px;
  background-clip: content-box;
  padding: 3px;
}

#email-capture input[type="radio"]:checked {
  background-color: var(--color-teal);
}

#email-capture input:focus {
  box-shadow: var(--card-shadow)
}


#btnSaveEmail,
#dspSaveEmail {
  float: none;
}

#btnSaveEmail {
  margin-top: 2rem;
}

#dspSaveEmail,
#dspSaveContactInfo,
.cancel-button,
#dspSetPassword,
#dspSaveAnswer,
#dspSaveContactPreference {
  background-color: var(--color-teal);
  border: 2px solid var(--color-teal);
  font-size: 16px;
  font-family: Medium;
  width: auto !important;
  padding: 10px 12px;
  border-radius: 0;
  text-transform: revert;
  color: #FFF;
  float: none;
  min-width: auto !important;
  margin: 0 auto;
}

#dspSaveEmail:hover,
#dspSaveContactInfo:hover,
.cancel-button:hover,
#dspSetPassword:hover,
#dspSaveAnswer:hover,
#dspSaveContactPreference:hover,
#followup-items-overlay.online-followup-items .control-button:hover a {
  color: #fff !important;
  background-color: var(--color-hover) !important;
  border-color: var(--color-hover) !important;
}

.online-two-iso A.button-style.gray {
  text-transform: uppercase;
  padding: 0;
  background-color: transparent;
  font-size: 16px;
  font-family: Medium;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}

html#profile body#profile .profile #profile-online-2 .errorMsg, 
html#profile body#profile .profile #profile-online-2 .validMsg {
  padding-left: 0;
}

.online-two-iso input.ng-touched.ng-invalid-required, 
.online-two-iso input.ng-touched.ng-invalid-date, 
.online-two-iso input.ng-touched.ng-invalid-min, 
.online-two-iso input.ng-touched.ng-invalid-number, 
.online-two-iso input.ng-touched.ng-invalid-format, 
.online-two-iso select.ng-touched.ng-invalid-required, 
.online-two-iso .Submitted input.ng-invalid-required, 
.online-two-iso .Submitted input.ng-invalid-date, 
.online-two-iso .Submitted input.ng-touched.ng-invalid-min, 
.online-two-iso .Submitted input.ng-invalid-number, 
.online-two-iso .Submitted select.ng-invalid-required,
.online-two-iso .MistyRose {
  background-color: transparent;
  border: 2px solid #ca110f;
}

html#profile body#profile .profile #profile-online-2 #changePasswordDisplay .save-button {
  margin-left: 0;
}

.changePasswordSteps .grid-cell {
  min-height: auto !important;
}

#profile-online-2 #communicationPreferencesTab input{
  accent-color: var(--color-purple-dark);
  appearance: none;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--color-teal);
  border-radius: 5px;
  background-clip: content-box;
  padding: 3px;
}

#profile-online-2 #communicationPreferencesTab input[type="radio"]:checked {
  background-color: var(--color-teal);
}

#profile-online-2 #communicationPreferencesTab input:focus {
  box-shadow: var(--card-shadow)
}

#profile-online-2 #communicationPreferencesTab .grid-cell {
  display: flex !important;
  align-items: center;
  gap: 1rem;
}

/*div[ng-if="vm.clientUIConfiguration.ProfilePersonalEmailDisplay || vm.clientUIConfiguration.ProfileBusinessEmailDisplay"] {
display: none;
}*/

.product-info-container a {
  text-decoration: underline;
  color: var(--color-teal);
}

.reminder {
  font-size: 1rem;
  color: #EB0017;
}

#benefit-statement-chart-container {
  display: none;
}

@-webkit-keyframes shadow-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(136, 0, 204, 0.9);
    box-shadow: 0 0 0 0px rgba(136, 0, 204, 0.9);
  }
  
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(136, 0, 204, 0);
    box-shadow: 0 0 0 10px rgba(136, 0, 204, 0);
  }
}

@keyframes shadow-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(136, 0, 204, 0.9);
    box-shadow: 0 0 0 0px rgba(136, 0, 204, 0.9);
  }
  
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(136, 0, 204, 0);
    box-shadow: 0 0 0 10px rgba(136, 0, 204, 0);
  }
}

.btn.btn-success.btn-confirmchoice {
  -webkit-animation: shadow-pulse 1s infinite;
  animation: shadow-pulse 1s infinite;
}

#home-online-three .btn.btn-default .inline-loader-bar {
  background-color: #FFF;
}

.Ataglance img {
  max-width: 720px;
}

.LineDetail_discounts .modal-controls {
  display: none;
}

.LineDetail_discounts .btn {
  margin: 1rem 0;
}

@media (min-width: 1280px) {
  li.sso {
	position: absolute;
	left: 100px;
    padding-left: 0 !important;
  }
}

li.sso {
  color: var(--color-purple-dark);
  font-family: Medium
}

li.sso a {
  color: inherit;
}

/*Discounts Mobile*/
#form[action*="DiscountsMobile"] #wrapper {
  width: 95%;
  margin: 0 auto;
}

#form[action*="DiscountsMobile"] #wrapper h2 {
  font-family: Medium
}

#form[action*="DiscountsMobile"] #wrapper ul {
  margin: 0 0 0 2rem;
  list-style: disc;
}

#form[action*="DiscountsMobile"] #wrapper .btn.btn-default {
  background-color: var(--color-teal);
  border: 2px solid var(--color-teal);
  font-size: 16px;
  font-family: Medium;
  width: auto !important;
  padding: 10px 12px;
  border-radius: 0;
  text-transform: revert;
  color: #FFF;
  float: none;
  min-width: auto;
  margin: 0 auto;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
  line-height: 1.42857143;
  user-select: none;
  -webkit-appearance: button;
  cursor: pointer;
  text-transform: capitalize !important;
  margin-top: 1rem;
}

/*Profile pages remove background to cards*/
#profilecontainer .box-border-bg {
  background: none;
}

/*Profile intro text format*/
#profileTabIntro {
  padding: 20px 20px 0 20px;
}

/*Login page error msg format*/
.isLoginPage #errMsg br {
  display: none;
}

/*Information alert on matrix for AE only*/
.benefit-active-benefits ~div:before {
  content: '\f0f3' ' Important: If you don’t make any changes to your benefits, most will automatically roll over to the new scheme year. However, there may be exceptions, so please check carefully.';
  display: /*block*/ none;
  font-size: 1rem;
  font-family: "Light", "FA6Solid";
  border-radius: 4px;
  background-color: #cceaf5;
  padding: 28px 32px;
  line-height: 28px;
  color: #262836;
}

/*Follow up text orient fix*/

.followup-item-description {
  text-align: left;
}

/*Folow up style in the enroller*/
.enrollmentvalidation #followup-items-overlay.online-followup-items #followup-items-title {
  color: var(--color-teal);
  font-size: 1.2rem;
  font-family: Medium;
}

/*Modal overflow*/
.benefit-matrix .modal-content {
    overflow-y: auto;
}
/* To hide employee name on MFA Auth page 
label#p_lt_zoneMain_TBS_MFAAuth_lblUserName.user-data{
  display: none;
}*/

/* To adjust width of Mobile no. country code dropdown on MFA Auth page */
.mfa-option select{
  width: 27%;
}  

/* Minification failed (line 4602, error number 1039): Token not allowed after unary operator: '-color-teal' */