/* APAC Standard CSS */
/*Index
 1. Login
 2. Dashboard -- Includes logo, home Page Modules like benefit statement, benefit enrollment, Need assitance, navigation tabs etc.
 3. Profile Page
 4. Cosmetic Changes -- Includes Colors, Branding customization, Icon, Buttons.
 5. Benefit Enrollment/Matrix
 6. Benefit Statement
 7. Benefit Overview
 8. Claim Submission Page
 9. Manage My Claim/Account Summary
 */

 /*~~~~~~~~~~~~~~~~~~~~ 1. Login ~~~~~~~~~~~~~~~~~~~~~~~*/
 .LoginPageContainer #terminator {    background: transparent ; }
@media only screen and (min-width:768px){
  /* login image */
  .online-two-iso.login body {
    background-image: url(/apacsingapore/media/Media/welder.jpg);    
  }
  /* login module background colour */
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background-color: rgba(0,0,0,0.5);
  }
}
@media only screen and (min-width:375px) and (max-width:767px) {
  /* centering logo */
  #wrapper.isLoginPageWrapper #header #logo {
    float: none;
    margin: 0 auto;
  }
  /* margin between header and login box */
  #wrapper.isLoginPageWrapper #header {
    width: 100%;
    margin: 20px 0;
  }
  .online-two-iso.login .LoginPageContainer .login-module-zone .login-modules {
    background: none;
  }
}

/*Login button hover*/
.bootstrap-iso .btn-primary:hover {
  color: #fff;
  background-color: rgb(0, 0, 153) ;
  border-color: #fff;
  opacity: 0.7;
}
/* font declaration for using OnlineTwoIconFont set */
@font-face {
  font-family:'OnlineTwoIconFont';
  src:url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v3.eot');
  src:url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v3.eot?#iefix') format('embedded-opentype'),
  url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v3.woff') format('woff'),
  url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v3.ttf') format('truetype'),
  url('/inspiringbenefits/media/default/fonts/OnlineTwoIconFont_v3.svg') format('svg');
  font-weight:normal;
  font-style:normal
  }
  
  /* allow use of OnlineTwoIconFont for anything with this class */
  [class*="online-two-icon-"]:before{
  font-family:OnlineTwoIconFont;
  }
  /* module icon styling*/
  [class*="online-two-icon-"]:before{
  color: #ff0000;
  font-family:OnlineTwoIconFont;
  font-size: 7rem;
}
  
/* Login Page styling end */

/*~~~~~~~~~ 2. Dashboard -- Includes logo, home Page Modules like benefit statement, benefit enrollment, Need assitance, navigation tabs etc.~~~~~~*/
/**************** logo ****************/
#logo {
    background-image: url(/mybenefitsbp/media/mybenefitsbp/BPNewLogo.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    }
    /* centering logo on mobile view */
    @media only screen and (max-width: 767px) {
    #logo {
    width: calc(100vw - 100px);
    }
  }

/* Home page Grid Layout arrangement for different screens */
 @media only screen and (max-width:768px) {
#home-online-three #right-side .modules-right-side.grid-container,
#home-online-three #home-integrated .modules-right-side.grid-container {
               grid-template-columns: repeat(3,1fr);
               -ms-grid-columns:1fr 1fr 1fr;
               grid-template-areas:"module-1 module-2 module-3" "module-4 module-5 module-3 " "module-6 module-7 module-8" "module-9";} 
}
 @media only screen and (min-width:768px) {
#home-online-three #right-side .modules-right-side.grid-container,
#home-online-three #home-integrated .modules-right-side.grid-container {
               grid-template-columns: repeat(3,1fr);
               -ms-grid-columns:1fr 1fr 1fr;
               grid-template-areas:"module-1 module-2 module-3" "module-4 module-5 module-3 " "module-6 module-7 module-8" "module-9";}
/* For IE */
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 { -ms-grid-column: 3; -ms-grid-row: 1;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 { -ms-grid-column: 1; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 { -ms-grid-column: 2; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 { -ms-grid-column: 3; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 { -ms-grid-column: 1; -ms-grid-row: 3;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 { -ms-grid-column: 2; -ms-grid-row: 3;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 { -ms-grid-column: 3; -ms-grid-row: 3;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 { -ms-grid-column: 1; -ms-grid-row: 4;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 { -ms-grid-column: 2; -ms-grid-row: 4;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-10 { -ms-grid-column: 3; -ms-grid-row: 4;}
}
@media only screen and (min-width:1400px){
#home-online-three #right-side .modules-right-side.grid-container,
#home-online-three #home-integrated .modules-right-side.grid-container {
                grid-template-columns: repeat(3,1fr);
                -ms-grid-columns:1fr 1fr 1fr;
                grid-template-areas:"module-1 module-2 module-3" "module-4 module-5 module-3 " "module-6 module-7 module-8" "module-9";} 
/* For IE */
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 { -ms-grid-column: 3; -ms-grid-row: 1; -ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 { -ms-grid-column: 1; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 { -ms-grid-column: 2; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 { -ms-grid-column: 3; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 { -ms-grid-column: 4; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 { -ms-grid-column: 3; -ms-grid-row: 3; -ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 { -ms-grid-column: 3; -ms-grid-row: 3;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 { -ms-grid-column: 4; -ms-grid-row: 3;}
}
@media only screen and (min-width:1920px){
#home-online-three #right-side .modules-right-side.grid-container,
#home-online-three #home-integrated .modules-right-side.grid-container {
                grid-template-columns: repeat(3,1fr);
                -ms-grid-columns:1fr 1fr 1fr;
                grid-template-areas:"module-1 module-2 module-3" "module-4 module-5 module-3 " "module-6 module-7 module-8" "module-9";}
/* For IE */
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-0 {-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-1 { -ms-grid-column: 3; -ms-grid-row: 1; -ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-2 { -ms-grid-column: 5; -ms-grid-row: 1;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-3 { -ms-grid-column: 6; -ms-grid-row: 1;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-4 { -ms-grid-column: 1; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-5 { -ms-grid-column: 2; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-6 { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-7 { -ms-grid-column: 5; -ms-grid-row: 2; -ms-grid-column-span: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-8 { -ms-grid-column: 5; -ms-grid-row: 2;}
#home-online-three #home-integrated .grid-container.modules-right-side .grid-item-9 { -ms-grid-column: 6; -ms-grid-row: 2;}
}

/*To Hide Menu button above carousal*/
.home-module-integrated .welcome-items {Display: none;}

/* Claim modules - Arrows Color */
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager button::after, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager button::after
{color: rgb(01,127,0);}

/* Module Buttons text color on hover */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default:hover {color: #fff;}
/* To text transform the buttons on Dashboard */
.ng-binding{
  text-transform: none;
}
/* To align the buttons under Dashboard */
#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .btn.btn-default {
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}
/* To shift the logo to the left */
#logo{
  margin-left: -18px;
  height: 100px;
  opacity: 0.9;
}
/* To adjust the slider height in carousel under Dashboard */
div#slider.dashboard-slider {
  height: 383px!important;
}
/* To hide the need help button  */
.help-ico{
  display: none;
}
/* To change the tooltip color (Profile, Messages & Logout Button) */
.ui-tooltip{
  background-color:white; 
  padding: 8px; 
  position: absolute; 
  z-index: 1; 
  top:100%; 
  left: 100%; 
  margin-bottom: 20px; 
  margin-left: -20px; 
  max-width: 300px; 
  -webkit-box-shadow: 0 0 5px #aaa; 
  box-shadow: 0 0 5px #aaa; 
  color:#000000; 
  opacity: 7;
}
/* To align the home page module headings to left under Dashboard. */
#home-online-three #home-integrated .module-content-header-container h3.module-content-header{text-align: left; width:100%;}

/* For changing the font size,padding  present under dashboard.*/
.module-content div{
  padding-bottom: 5px;
  font-size: 16.5px;
}
/* To adjust the height of the modules for second and third row making it aligned to the carousel under dashboard. */
.module-content{
  height: 383px;
}

/* TO change the font-size of title present under manage my claims module. */
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager-content .title, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager-content .title{
  font-size: 16.5px;
}
/* To change the font-size of Welcome tagline present under dashboard */
div#greeting-message.ng-binding{
  font-size: 16.5px !important;
}
/* To change the font-size of buttons present under dashboard. */
span.ng-binding{
  font-size: 16.5px;
}
/* To change the font-size of modules present under dashboard. */
div.dashboard-page-container{
  font-size: 16.5px;
}
/* To adjust the line-height under submit my claims module. */
#make-a-claim div{
  line-height: 2rem;
}
/* To center the content present under Submit my claims module. */
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content#make-a-claim .make-a-claim-copy .account-details, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content#make-a-claim .make-a-claim-copy .account-details{
  text-align: center;
}
/* To hide mobile registration page under dashboard. 
#navtablist1 {
  display: none !important;
}*/
/* To change the color of the text mobile registration under dashboard */
/* #navtablist1 a#menu1{
  font-weight: bold;
  color: rgb(01, 127, 0);
} */
/* To change the hover color of the text of mobile registration under dashboard. */
/* #navtablist1 a#menu1:hover{
  color: rgb(0, 0, 153);
  opacity: 0.7;
} */
/* To text transform One time pass/confirm one time password under mobile registration page. */
#passwordDiv label, #passwordConfirmationDiv label{
  text-transform: none;
  font-size: 16.5px;
}
/* To change the hover color of save button present under mobile registration page. */
.online-two-iso A.button-style.green:hover{
  background-color: rgb(0, 0, 153);
  color: #fff;
  opacity: 0.7;
}
/* To make the font-weight bolder for My Dashboard when clicking on mobile registraiton page.*/
* a#menu0{
  font-weight: bold !important;
}
/* To adjust the arrows present under claim submission page module upwards. */
#home-online-three #right-side .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager, #home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content .tbs-module-pager .tbs-pager{
  padding-bottom: 35px;
}
/* Adjusted the heading of modulesTo align the arrow icosn present under Manage my claims module */
h3.module-content-header.ng-binding{
  margin-bottom: -5px;
}
/*TO ADJUST THE SLIDER CONTENT UNDER CAROUSEL*/
#home-module-welcome #slider .sliderContainer .slide-content, .home-module-integrated #slider .sliderContainer .slide-content{
  margin-left: 20%;
  margin-top: 20%;
  float: none;
  color: #fff;
}
#slider a.btn-default{
  margin-left: 30%;
  border-color: rgb(01, 127, 0);
  text-transform: none;
}
#slider a.btn-default:hover{
  margin-left: 30%;
  color: #fff;
  border-color: rgb(0, 0, 153);
}
/* To make the title bold present under manage my claims module. */
div.title.ng-binding[ng-bind='claim.ClaimItem']{
  font-weight: bold;
}
/* To align Get Started button Module present under benefit selection page */
button.btn.btn-default[ng-click ="vm.goToCurrentEnrollment(vm.activeEvent.renewalEventRecordID)"][type='button']{
  bottom: 4rem !important;
}
/* Benefit Overview Module Icon */
.online-two-icon-28:before{
  content: '\e98b';
  color: #000;
}
/* Aon Care Module Icon */
.online-two-icon-27:before{
  content: '\e9ac';
  color: #000;
}
/* Personal Insurance Module Icon */
.online-two-icon-26:before{
  content: '\e91c';
  color: #000;
}
/*Submit Claims*/
.online-two-icon-64:before {
  content: "\e940";
  color: #000;
}
/* ~~~~~~~~~~~~~~~~~~ End DASHBOARD (Online 2.2)~~~~~~~~~~~~~~~~~~~ */


/* ~~~~~~~~~~~~~~~~~~~ 3. Profile Page ~~~~~~~~~~~~~~~~~~~~~ */
html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A {background: none;padding-right: 6px;color: rgb(01,127,0);
border-bottom: solid .5em #837d2a ;}
.online-two-iso A.button-style.green {background-color: rgb(01,127,0);}

/* Headings on profile page under different tabs*/
html#profile body#profile .profile #profile-online-2 P.sectionTitle{color: rgb(01,127,0);}

.online-two-iso .validation-caption {color: rgb(01,127,0);}
/* To hide preferences tab under Profile Page */
#profileTabControl{
  display: none;
}
/* To text transform the labels under Profile page */
label.ng-binding{
  text-transform: none !important;
}
/* To change the default body color */
body{
  background-color: rgb(247,247,247) !important;
}
/* TO hide the titles(mailing address, work profile) under My profile page. */
p.sectionTitle.ng-binding, hr.space-bar, div.space-bar {
  display: none !important;
}
/* To change the color of footer links */
.online-two-iso #footer a{
  color: #999;
}
/* To adjust the alingment of android and ios links under TBS App(Footer) */
a.nav1{
  vertical-align: bottom;
  padding-right: 30px;
}

/* ~~~~~~~~~~~~~~~~~~~ End Profile Page ~~~~~~~~~~~~~~~~~~~~~ */
 
/* ~~~~~~~~~~~~~~~~~~~~~~ 4. COSMETIC CHANGES ~~~~~~~~~~~~~~~~~~~~*/

/*to change the colours of profile, message, logout */
.fa-user,.fa-envelope,.fa-sign-out{color: rgb(01,127,0);}
.fa-user:hover,.fa-envelope:hover,.fa-sign-out:hover{color: rgb(0, 0, 153); opacity: 0.7;}

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content .module-content {
  background-color: #fff;
  border: none;
  }

#home-online-three #home-integrated .modules-right-side.grid-container .grid-item-content {
  Height: 100%;
  background-color: #f0f0f0;
  padding: 0.2rem;
}
/* Module Header center align*/
/* #home-online-three #home-integrated .module-content-header-container h3.module-content-header{text-align: center;}
#navtablist1, #navtablist2, #navtablist3, #navtablist4, #navtablist5, #navtablist6 {display: none !important;} */

/* Capitalize Tabs */
#menu-no-dashboard li a, #menu li a, #menu-sub li a, .online-two-iso A.button-style.gray, .header-overlay A {text-transform: Capitalize;}

/* Footer background - White */
.online-two-iso #terminator #footer.footer-fullwidth {background: white;}

/* header background - */
.online-two-iso #terminator #header.header-fullwidth {background-color: #fff;}

/* Glyphicon Hide on Dashboard*/
a.online-three-module-popover-control span.glyphicon.glyphicon-info-sign {display: none;}

/* Round Button */
.bootstrap-iso .btn {border-radius: 20px; background-color: rgb(01,127,0); }

/* Hover color for buttons */
.bootstrap-iso .btn-default:hover {background-color:rgb(0, 0, 153)  !important; opacity: 0.7;}

/* Text Colour of Module headers & Greeting Message */
/* #home-online-three #home-integrated .module-content-header-container h3.module-content-header, div.dashboard-page-container div.dashboard-controls div#greeting-message.ng-binding {color: #837d2a !important; } */

/* Need Assistance Bar - Search Button */
#floating-header-content .search-btn {background-color: rgb(01,127,0);}
#floating-header-content .search-btn:hover {background-color: rgb(0, 0, 153)  !important; opacity: 0.7;}
/* To change the background color of Home Page Modules. */
#home-online-three #home-integrated .module-content-header-container h3.module-content-header, div.dashboard-page-container div.dashboard-controls div#greeting-message.ng-binding{
  color: rgb(01, 127, 0) !important;
  font-weight: bold;
}
/* Print button under benefit statement page. */
a.btn.btn-warning.btn-print.ng-scope:focus,a.btn.btn-warning.btn-print.ng-scope:active{
  background-color: RGB(0,0,153);
}
/* Continue button under benefit statement page. */
div.pull-right.ng-scope a.btn.btn-warning:focus,a.btn.btn-warning:active{
  background-color: rgb(0,0,153);
}
/* To change the benefit overview title color */
#benefit-overview .benefit-overview-title H1{
  color: #999;
}
/* To change the background color of line groups (Security & Protection, Health, Spending Account) under Benefit overview. */
div.panel-group div.panel-heading{
  background: #fff !important;
}
/* To change the background hover color of line groups (Security & Protection, Health, Spending Account) under Benefit overview. */
/* div.panel-group div.panel-heading:hover{
  background-color: rgb(0,0,153) !important; 
  opacity: 0.7;
} */
/* To change the color & background hover color of please select a benefit under benefit overview page. */
#BenefitNameFilter{
  background-color: #fff;
}
#BenefitNameFilter span{
  color: #999;
}
button#BenefitNameFilter:hover{
  background-color: #FFF;
  color: #999;
}
/* To change the X/cross icon color button under Benefit overview modal. */
#benefit-overview div.tab-header span.glyphicon.glyphicon-remove{
  color: rgb(01, 127, 0) !important;
}
/* To change the hover color icon of button under Benefit overview modal */
#benefit-overview div.tab-header span.glyphicon.glyphicon-remove:hover{
  color: rgb(0, 0, 153) !important;
  opacity: 0.7;
}
/* To change the color of the footer titles */
#page-title h1{
  color: rgb(01, 127, 0);
}
/* To change the color and hover color of my dashboard under dashboard page. */
a#menu0{
  color: rgb(01, 127, 0) !important;
}
a#menu0:hover{
  color: rgb(0,0,153) !important;
  opacity: 0.7;
}
/* To change the font-size of my profile, messages and logout icons present under dashboard page. */
.fa-user, .fa-envelope, .fa-sign-out{
  font-size: 24px;
}
/* To change the color and hover color of links present under footer pages. */
div.page-content a{
  color: rgb(01, 127, 0);
}

div.page-content a:hover{
  color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To change the border color of Headings under Profile tab(Work, Dependant etc) */
html#profile body#profile .profile #profile-online-2 #profilecontainer .htabs-container .tabs UL LI.sel A{
  border-color: rgb(01, 127, 0)
}
/*To text tranform next button under life event page.*/
#matrix\ anytime-enroll a.btn.btn-warning.active-button{
  text-transform: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ End COSMETIC CHANGES ~~~~~~~~~~~~~~~~~~~~*/

/* ~~~~~~~~~~~~~~~~~~~ 5. BENEFIT ENROLLMENT/MATRIX ~~~~~~~~~~~~~~~~~~~~~ */

/*Benefit Matrix Page Line Images*/
/* Group Term Life*/
.img.L/*Insert Line RecordID here*/ {
background-image:url(/*Insert image direct path here*/)!important;
background-size: 100% 100% !important;
margin-top: 25px;
}

/* Group Personal Accident */
.img.L48f2228c-cebb-476e-88c0-2a831883bc44 {
background-image:url(/infineon/media/Media/Line%20Images/PA.jpg)!important;
background-size: 100% 100% !important;
margin-top: 25px;

}

/* Group Major Medical */
.img.Lfe3c4685-ab4a-4d8b-a977-1c1c659d2504 {
background-image:url(/infineon/media/Media/Line%20Images/MM.jpg)!important;
background-size: 100% 100% !important;
margin-top: 25px;
}
/*End of Benefit Line Images */

/* To hide available options in Step 2 */
.available-options .links-group.four-links {display: none;}

/* To shift confirm choices button to right */
.col-md-8.col-sm-8.btngroup {Width: 83%;}

/* To hide extra spacing below header */
.benefit-matrix .row.margin-left-0 { display: none; }

/* To hide reset to default button */
.benefitheader-fixed div#resettodefaults {display: none;}

/* Confirm Choice and header color*/
a.btn.btn-success.btn-confirmchoice, .panel-heading {  background-color:  #837d2a!important;}

/* To change the colour of the line name */
.benefit-matrix .lineheader > a:link { color: rgb(01,127,0);}

/* To change the colour of Glyphicon */
/* .benefit-matrix .font-youpay-color, span.glyphicon.glyphicon.glyphicon.glyphicon { color: rgb(01,127,0);  } */

/* TO keep the select button same as normal on hover */
.benefit-matrix .row .btn-success:hover,.benefit-matrix .row .btn-success:after {  border-radius: 20px;  background-color: rgb(0, 0, 153) ;  color: #fff;  border-color: #fff;opacity: 0.7;}

/*To change the colour of drop down tab on benefit matrix */
.benefit-matrix .benefit-category .panel-title:hover {color: #fff;}

/* Confirm choices Yes/No button */

.benefit-matrix .modal-footer #confirmation-buttons .btn-default.active {background-color: rgb(01, 127, 0);color: #fff;}

/* Confirm button */
.benefit-matrix .confirm-checkout-button .btn-success {background-color: #837d20;color: #fff;}

.benefit-matrix .confirm-checkout-button .btn-success:hover {background-color: rgb(0, 0, 153) ;color: #fff;opacity: 0.7;}

/* Pop up after clicking on my dashboard on benefit matrix */
.online-two-iso .header-overlay {background-color: rgb(01,127,0);}

.online-two-iso A.button-style.blue {background-color: rgb(01,127,0);color: #fff;}

.online-two-iso A.button-style.blue:hover {background-color: rgb(0, 0, 153) ; opacity: 0.7;}

/* Manage dependents Start */
h3.dependantModalHeader {color: rgb(01,127,0);} /* heading */

.online-two-iso .modal-normal a.tab-selector-link:hover, .online-two-iso .modal-normal .tab-selector-link.active {color: rgb(01,127,0);border-bottom: solid .5em rgb(01,127,0); } /* Tab selector */

.dependant-list-top a.dependant-add-link {color: rgb(01,127,0);} 
.dependant-list-top a.dependant-add-link:hover {color: black;} /* Add dependent */

button.btn.btn-warning.dependant-cancel-btn:hover {color: #fff;background-color: rgb(0, 0, 153) ;border-color: rgb(0, 0, 153) ;opacity: 0.7;} /* Close button on Manage dependent */
/* Manage dependents close */

h3.modellersModalHeader {
  color: rgb(01,127,0);
  }
  
  /* Tab selector */
  .modeller-links li a.checked {  color: #fff;  background-color: rgb(01,127,0);  }
  .modeller-links li a.checked:hover {  color: #fff;  background-color: rgb(0, 0, 153) ;  opacity: 0.7;}
  
  button.modeller-close-button.btn-warning:hover {  color: #fff;  background-color: rgb(0, 0, 153) ;  border-color: rgb(0, 0, 153) ;  opacity: 0.7;}
  
  /* sub-headers - Security, Medical */
  .modeller-container .row-header {  color: rgb(01,127,0);  }
  
  /* Manage Dep > Dep coverage summary > save button */
  button.btn.btn-success.dependant-accept-btn:hover {  border-radius: 20px;  background-color: rgb(0, 0, 153) ;  color: #fff;  }
  
  /* Glyph Icon - Benefit overview details */
  .online-two-iso .modal-large a.tab-selector-link:hover, .online-two-iso .modal-large .tab-selector-link.active {  color: rgb(01,127,0);  border-bottom: solid .5em rgb(01,127,0);  }
  .online-two-iso .modal-large .tab-selector-link {  color: rgb(01,127,0);  }
  /* Close button */
  .bootstrap-iso .btn-warning:hover{  color: #fff;  background-color: rgb(0, 0, 153) ;  border-color: rgb(0, 0, 153) ; opacity: 0.7; }
  
  /* Benefit selection page > Continue button */
  .bootstrap-iso .btn-warning:hover {  color: #fff;  background-color: rgb(0, 0, 153) ;  border-color: rgb(0, 0, 153) ;  opacity: 0.7;}
  /*To change the color of the check mark beside confirm my choices to white under benefit selection page.*/
span.glyphicon.glyphicon-ok{
  color: #fff !important;
}
/*To change the background color of confirm my choices button under benefit selection page.*/
a.btn.btn-success.btn-confirmchoice, .panel-heading{
  background-color: rgb(01, 127, 0) !important;
}
/*To change the hover color of confirm my choices button under benefit selection page.*/
a.btn.btn-success.btn-confirmchoice:hover, .panel-heading{
  background-color: rgb(0, 0, 153) !important;
  opacity: 0.7;
}
/*To text transform the text under confirm my choices button under benefit selection page.*/
a.btn.btn-success.btn-confirmchoice span, .panel-heading{
  text-transform: none;
}
/* To change the color of my benefit choices to white. */
.benefit-matrix .title{
  color: #000;
}
/*Changing the colors of Yes no buttons under confirm choices page.*/
.confirmagreementbtngroup label.btn, .perpayperannualbtngroup div.btn{
  background-color: #999;
  color: #fff;
}
/*For changing the hover colors of Yes/No buttons under Confirm choices page.*/
.confirmagreementbtngroup label.btn:hover, .perpayperannualbtngroup div.btn:hover{
  background-color: rgb(0, 0, 153);
  color: #fff;
  opacity: 0.7;
}
/*To change the color of confirm button under confirm choices page.*/
.benefit-matrix .confirm-checkout-button .btn-success{
  background-color: rgb(01, 127, 0);
}
/* Text Transformation for Select Button under Benefit Selection */
.btn.btn-success.btn-option-elect.ng-isolate-scope{
  text-transform: none;
  width: 100%;
}
/* To set the color and text-transformation of manage dependants and cost to you buttons under benefit selection page. */
.modeller-links li a{
  text-transform: none;
  background-color: rgb(01, 127, 0);
  color: #fff;
}
.modeller-links li a:hover{
  text-transform: none;
  background-color: rgb(0, 0, 153);
  opacity: 0.7;
  color: #fff;
}
/* To text-transform the close button present under manage dependants & cost to you modules. */
button.modeller-close-button.btn-warning{
  text-transform: none;
}
/* To text transform Cost and Balance & Manage dependants under Benefit Selection Page. */
.benefit-matrix .benefitheader.benefitheader-border span{
  text-transform: none;
}
/* To unhide Available balance present under Cost and Balance Page. */
.modeller-container .fsa-availablebalance {
  display: block;
} 
/*To text transform close button under manage dependants tab.*/
button.btn.btn-warning.dependant-cancel-btn{
  text-transform: none;
}
/*To hide dependant coverage summary tab under manage dependants*/
a.tab-selector-link.inactive{
  display: none;
}
/* To change the color of view button present under manage dependants tab */
.dependant-list a.dependant-edit{
  color: rgb(01, 127, 0);
}
/* To change the color the sunglasses glypicon present under manage dependants tab */
.dependant-list a.dependant-edit:hover, span.glyphicon.glyphicon-sunglasses{
  color: rgb(01,127,0) !important;
}
/* To change the hover color of view button & the sunglasses glypicon present under manage dependants tab */
.dependant-list a.dependant-edit:hover, span.glyphicon.glyphicon-sunglasses:hover{
  color: rgb(0,0,153) !important;
  opacity: 0.7;
}
/* To text transform the cancel/continue button present under 'Are you sure' modal */
#exit-confirm a.button-style.blue{
  text-transform: none;
  border-radius: 50px;
}
/* To text transform the h5 Are you sure present under the Are you sure? modal. */
#exit-confirm h5{
  text-transform: none;
}
/* To change the background color of the change in cart/ selected block's border and corneres. */
.benefitselect .products .box-border.sel .header,.benefitselect .products .box-border.sel{
  background-color: rgb(01, 127, 0);
}
/* To text transform the continue button under benefit seleciton page. */
.benefitselect .continue{
  text-transform: none;
}
/* To text-transform select button under select benefit page of benefit selection page. */
.online-two-iso A.button-style.green{
  text-transform: none;
}
/* To text transform close button on the modal present under Benefit selection page. */
.modal-controls .btn.btn-warning{
  text-transform: none;
}
/* To align the contents under see also under select benefit on benefit selection page. */
.benefitselect .seealso li{
  width: 100%;
  line-height: 1.2rem;
}
/* To chang the colors of the links present under see also page. */
.benefitselect .linename > a:hover{
  color: rgb(0,0,153);
  opacity: 0.7;
}
/* To text transform continue button present under benefit selection page. */
a.btn.btn-warning[href="/home"]{
  text-transform: none;
}
/* To remove space from the top of benefit selection page. */
div.row.totalcost-section-row{
  display: none;
}
/*To change the color of 'i' glyphicon/icon to #999.*/
.benefit-matrix .font-youpay-color, span.glyphicon.glyphicon.glyphicon.glyphicon{
  color: #999;
  padding-top: 5px;
}
/* To change the font-color and font-weight to #666 and normal under life event page. */
span.active-intro.ng-isolate-scope[tbs-translate="Enrollment.Online2.TipsForActiveButton"]{
  color: #999;
  font-weight: normal;
}
/* TO change the font-color and font-weight to bolder under life event page. */
div.ng-isolate-scope[tbs-translate="Enrollment.Online2.ActiveWithDataDescription"]{
  color: red;
  font-weight: bold;
}
/* To text transform the buttons Back and  Confirm under 'Change in circumstances' page under life event.*/
span.ng-isolate-scope[tbs-translate = 'Enrollment.Online2.ActivateBenefitsBack']{
  text-transform: none;
}
span.ng-isolate-scope[tbs-translate = 'Enrollment.Online2.ActivateBenefitsAccept']{
  text-transform: none;
}
/* To change the hover color of confirm button under 'Change in circumstances' under life event page. */
a.btn.btn-success:hover{
  border-radius: 50px;
  text-transform: none;
  background-color: rgb(0,0,153);
  opacity: 0.7; 
}
/* To text transform the line headings present under benefit selection page. */
span.ng-binding.line-group{
  text-transform: uppercase;
  color: black;
}
/* TO adjust benefit line images. */
.benefit-matrix .benefitline .benefit-menu .img, div.see-also .img, .benefit-matrix .active-benefits .img{
  margin-top: -5px !important;
}
#benefit-overview .summaryImage .img{
  margin-top: 20px !important;
}

/* ~~~~~~~~~~~~~~~~~~~ END BENEFIT ENROLLMENT/MATRIX ~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~ 6. Benefit Statement ~~~~~~~~~~~~~~~~~~~~~ */ 
.bootstrap-iso .btn.online-two-datepicker {
background-color: rgb(01,127,0);
border-color: rgb(01,127,0);
}

span.glyphicon.glyphicon-print { color: #fff!important;}
/* To change the color of the right chevron/arrow in continue button to white. */
span.glyphicon.glyphicon.glyphicon-chevron-right{
  color: #fff !important;
}
/* To hide date format under Benefit statment page. */
#dateFormat{
  display: none;
}
/*To text transform print button & continue under benefit statement page.*/
#main.matrix.benefit-statement a.btn-warning{
  text-transform: none;
}
/* To change the color of glyphicon present beside pending benefits under benefit statement page. */
span.glyphicon.glyphicon-repeat{
  color: rgb(01, 127, 0) !important;
}

/* ~~~~~~~~~~~~~~~~~~~ End of Benefit Statement ~~~~~~~~~~~~~~~~~~~~~ */ 

/* ~~~~~~~~~~~~~~~~~~~ 7. Benefit overview ~~~~~~~~~~~~~~~~~~~~~ */ 

/****************************************** benefit icon general coding **************************************/
  /* remove background images in readiness for using icons */
  /* benefit matrix */
  .benefit-matrix .benefitline .benefit-menu .img,
  /* see also images */
  div.see-also .img,
  /* life event icons */
  .benefit-matrix .active-benefits .img,
  /* benefits overview icons */
  #benefit-overview .summaryImage .img {
    background: none;
    width: auto;
    height: auto;
    margin-left: 40px;
    margin-top: 15px;
  }
  
  #benefit-overview .summaryContent {
    padding: 12px 8px 31px 12px;
    font-size: 14px;
  }
  
  /* general styling for using icons for benefits */
  .benefit-matrix .benefitline .benefit-menu .img:before,
  div.see-also .img:before,
  #benefit-overview .summaryImage .img:before {
    font-family: OnlineTwoIconFont;
    font-size: 5em;
    position: relative;
    color: #000000;
  }
  .benefit-matrix .benefitline .benefit-menu .img:before,
  div.see-also .img:before{
    left: -.2em;
    top: .3em;
  }
  
  #benefit-overview .summaryImage .img:before {left: .5em;}
  
  /*Benefit Overview Line Images*/
  /* SECURITY AND PROTECTION */
  /*Group Term Life (Core)*/
  #benefit-overview .img.BenefitImage_9d021b9a-42d8-4652-ac11-ada5a03e730e:before,
  .img.L9d021b9a-42d8-4652-ac11-ada5a03e730e:before,
  div.see-also .img.L9d021b9a-42d8-4652-ac11-ada5a03e730e:before{
  content: '\e982';
  }
  /*Group Term Life (Voluntary)*/
  #benefit-overview .img.BenefitImage_91896337-8730-4242-a640-c3065e59a4c9:before,
  .img.L91896337-8730-4242-a640-c3065e59a4c9:before,
  div.see-also .img.L91896337-8730-4242-a640-c3065e59a4c9:before{
  content: '\e982';
  }
  /*Group Term Life (Spouse/Domestic Partner) - Voluntary*/
  #benefit-overview .img.BenefitImage_290780f7-663f-4437-ba17-589a23cd5840:before,
  .img.L290780f7-663f-4437-ba17-589a23cd5840:before,
  div.see-also .img.L290780f7-663f-4437-ba17-589a23cd5840:before{
  content: '\e982';
  }
  /*Group Term Life (Child) - Voluntary*/
  #benefit-overview .img.BenefitImage_d07e4d44-80e6-4245-90de-096cd1438dca:before,
  .img.Ld07e4d44-80e6-4245-90de-096cd1438dca:before,
  div.see-also .img.Ld07e4d44-80e6-4245-90de-096cd1438dca:before{
  content: '\e982';
  }
  /*Group Accidental Death & Dismemberment (Core)*/
  #benefit-overview .img.BenefitImage_d5aeab45-ce5c-4b8d-8bdd-8143034f522f:before,
  .img.Ld5aeab45-ce5c-4b8d-8bdd-8143034f522f:before,
  div.see-also .img.Ld5aeab45-ce5c-4b8d-8bdd-8143034f522f:before{
  content: '\e982';
  }
  /*Group Accidental Death & Dismemberment (Employee) – Voluntary*/
  #benefit-overview .img.BenefitImage_bf472876-c43b-464e-a4cd-4874e1d74daf:before,
  .img.Lbf472876-c43b-464e-a4cd-4874e1d74daf:before,
  div.see-also .img.Lbf472876-c43b-464e-a4cd-4874e1d74daf:before{
  content: '\e982';
  }
  /*Group Accidental Death & Dismemberment (Spouse/Domestic Partner) – Voluntary*/
  #benefit-overview .img.BenefitImage_4cc6fc9d-a19b-42d1-a9c2-eb7f5b7912fb:before,
  .img.L4cc6fc9d-a19b-42d1-a9c2-eb7f5b7912fb:before,
  div.see-also .img.L4cc6fc9d-a19b-42d1-a9c2-eb7f5b7912fb:before{
  content: '\e982';
  }
  /*Group Accidental Death & Dismemberment (Child) – Voluntary*/
  #benefit-overview .img.BenefitImage_2fedee4e-7dca-40aa-ab73-1b5012e1e4e4:before,
  .img.L2fedee4e-7dca-40aa-ab73-1b5012e1e4e4:before,
  div.see-also .img.L2fedee4e-7dca-40aa-ab73-1b5012e1e4e4:before{
  content: '\e982';
  }
  /*Group Hospital & Surgical*/  
  #benefit-overview .img.BenefitImage_d468bc4f-2b1c-42b1-ad01-ca5ae186bd50:before,
  .img.Ld468bc4f-2b1c-42b1-ad01-ca5ae186bd50:before,
  div.see-also .img.Ld468bc4f-2b1c-42b1-ad01-ca5ae186bd50:before{
  content: '\e9ac';
  }
  
  /*Group Medical (Inpatient and Outpatient) + Group Maternity for Female Spouse/Domestic Partner*/ 
  #benefit-overview .img.BenefitImage_14562e7d-ae36-4523-9e90-a39937fea4cf:before,
  .img.L14562e7d-ae36-4523-9e90-a39937fea4cf:before,
  div.see-also .img.L14562e7d-ae36-4523-9e90-a39937fea4cf:before{
  content: '\e9ac';
  }
  
  /*Group Medical (Inpatient and Outpatient) */  
  #benefit-overview .img.BenefitImage_17ba9185-9ce8-4417-b12d-ba706eced88e:before,
  .img.L17ba9185-9ce8-4417-b12d-ba706eced88e:before,
  div.see-also .img.L17ba9185-9ce8-4417-b12d-ba706eced88e:before{
  content: '\e9ac';
  }
  
  /*Group Dental */
  
  #benefit-overview .img.BenefitImage_f38467f6-f39b-4cb1-a3e1-a0f145154ea7:before,
  .img.Lf38467f6-f39b-4cb1-a3e1-a0f145154ea7:before,
  div.see-also .img.Lf38467f6-f39b-4cb1-a3e1-a0f145154ea7:before{
  content: '\e9ac';
  }
  
  /*Group Maternity - Female Employee*/
  
  #benefit-overview .img.BenefitImage_4a5c6551-5b94-4482-a738-65f71debe20a:before,
  .img.L4a5c6551-5b94-4482-a738-65f71debe20a:before,
  div.see-also .img.L4a5c6551-5b94-4482-a738-65f71debe20a:before{
  content: '\e9ac';
}
  /*Group Maternity - Female Spouse/Domestic Partner */
  
  #benefit-overview .img.BenefitImage_5c6c2f77-dbc3-416f-939f-f202627b52ab:before,
  .img.L5c6c2f77-dbc3-416f-939f-f202627b52ab:before,
  div.see-also .img.L5c6c2f77-dbc3-416f-939f-f202627b52ab:before{
  content: '\e9ac';
}
  /*Cash Benefit Allowance*/
  
  #benefit-overview .img.BenefitImage_3c27ca2a-066b-435f-b8fa-3c498455aa42:before,
  .img.L3c27ca2a-066b-435f-b8fa-3c498455aa42:before,
  div.see-also .img.L3c27ca2a-066b-435f-b8fa-3c498455aa42:before{
  content: '\e967';
}
  /*Periodic Health Screening */
  
  #benefit-overview .img.BenefitImage_b1c1882e-d199-4e14-b3ef-1127e31aaa00:before,
  .img.Lb1c1882e-d199-4e14-b3ef-1127e31aaa00:before,
  div.see-also .img.Lb1c1882e-d199-4e14-b3ef-1127e31aaa00:before{
  content: '\e967';
}
  /*Wellness Spending Account */
  
  #benefit-overview .img.BenefitImage_e8719b8c-2bff-4a47-a406-b74933b21c98:before,
  .img.Le8719b8c-2bff-4a47-a406-b74933b21c98:before,
  div.see-also .img.Le8719b8c-2bff-4a47-a406-b74933b21c98:before{
  content: '\e920';
}
  /*Outpatient Spending Account */
  
  #benefit-overview .img.BenefitImage_5f62befc-cc5f-4b8e-bcd8-da814cb383ae:before,
  .img.L5f62befc-cc5f-4b8e-bcd8-da814cb383ae:before,
  div.see-also .img.L5f62befc-cc5f-4b8e-bcd8-da814cb383ae:before{
  content: '\e920';
}
  /*SRS Spending Account*/
  
  #benefit-overview .img.BenefitImage_dc9b8d00-b759-49a0-a83a-e0a35745f2fb:before,
  .img.Ldc9b8d00-b759-49a0-a83a-e0a35745f2fb:before,
  div.see-also .img.Ldc9b8d00-b759-49a0-a83a-e0a35745f2fb:before{
  content: '\e920';
}
  /*Critical Illness Spending Account */
  
  #benefit-overview .img.BenefitImage_7bbfc522-1c2a-4536-9248-d3a487c82d81:before,
  .img.L7bbfc522-1c2a-4536-9248-d3a487c82d81:before,
  div.see-also .img.L7bbfc522-1c2a-4536-9248-d3a487c82d81:before{
  content: '\e920';
}
/* Icon for Health Screening Enrollment event under life event page.*/
.img.E0193c89e-f7dd-46ee-bba0-d93c73ae5afe {
  background-image:url(/mybenefitsbp/media/mybenefitsbp/iconBird.png)!important;
  background-repeat: no-repeat !important;
  background-size: 60% 60% !important; 
  height: 100% !important;   
}
/* To align the image in Health screening enrollment */
div.events.ng-scope[ng-repeat="ev in  vm.events"]>div.event-img{
  margin-top: 50px !important;
}

/*Group Term Life*/
#overview-item-/*Insert Line record ID here*/ .benefitIntroSummary .summaryImage .img{
background: url(/*Insert image direct path here*/) no-repeat !important;
background-size: 100% 100% !important;
margin-top: 20px;
}
/*Group Personal Accident*/
#overview-item-/*Insert Line record ID here*/ .benefitIntroSummary .summaryImage .img{
background: url(/*Insert image direct path here*/) no-repeat !important;
background-size: 100% 100% !important;
margin-top: 20px;
}
/*Group Hospital & Surgical*/
#overview-item-/*Insert Line record ID here*/ .benefitIntroSummary .summaryImage .img{
background: url(/*Insert image direct path here*/) no-repeat !important;
background-size: 100% 100% !important;
margin-top: 20px;
}

/*Group Term Life*/
#overview-item-/*Insert Line record ID here*/ .benefitIntroSummary .summaryImage .img{
background: url(/*Insert image direct path here*/) no-repeat !important;
background-size: 100% 100% !important;
margin-top: 20px;
}
/*Group Personal Accident*/
#overview-item-/*Insert Line record ID here*/ .benefitIntroSummary .summaryImage .img{
background: url(/*Insert image direct path here*/) no-repeat !important;
background-size: 100% 100% !important;
margin-top: 20px;
}
/*Group Hospital & Surgical*/
#overview-item-/*Insert Line record ID here*/ .benefitIntroSummary .summaryImage .img{
background: url(/*Insert image direct path here*/) no-repeat !important;
background-size: 100% 100% !important;
margin-top: 20px;
}

/*End of Benefit Overview Line Images*/

#benefit-overview .know-more-link:hover
{background-color: rgb(0, 0, 153) ;
  opacity: 0.7;
 border-color: #fff;
}
span.glyphicon.glyphicon-chevron-right.aria {color: #fff!important;}

/* To set the font-size and font-family of benefit overview page. */
div.pannel-body-full{
  font-size: 16px;
}
/* To text transform clear filter button under Benefit overview Page. */
#benefit-overview button.clear-filter.btn.btn-warning.disabled > span{
  text-transform: none;
}
/* To change the color of headings (Security & protection, Health & Wellbeing..) under Benefits overview page. */
#benefit-overview span.group-title{
  color: #000;
}
/* To adjust the width of drop down under submit my claims page. */
Select#ClaimItemSelect.form-control.autoAdjustWidth
{
width: 485px !important;}
/* To change the color of the arrow icons(up & down) to white. */
i.pull-right.glyphicon.glyphicon-menu-up{
  color: #000;
}
i.pull-right.glyphicon.glyphicon-menu-down{
  color: #000;
}
/* To change the hover color of clear filter button under benefit overview. */
button.clear-filter.btn.btn-warning.disabled:hover{
  background-color: rgb(0,0,153);
  border-color: rgb(0,0,153);
  color: #fff;
  opacity: 0.7;
}
/* To chang the color of glyphicon 'x' under benefit overview. */
#benefit-overview span.glyphicon.glyphicon-remove{
  color: #fff !important;
}
/* To adjust the clear filter button */
button.clear-filter.btn.btn-warning.disabled{
  margin-right: 90%;
}
/* To change the color of search bar glyphicon. */
#benefit-overview span.glyphicon.glyphicon-search{
  color: rgb(01, 127, 0);
}
/* To change the font-size Your Annual Cost and Currency present under Benefit selection page. */
.containers.ng-scope[ng-include=""] div.col-md-8.ng-scope[ng-if="::ElectionInfo.LookupLineType_RecordID !=5 "] span{
  font-size: 16.5px;
}
/* ~~~~~~~~~~~~~~~~~~~ End Benefit overview ~~~~~~~~~~~~~~~~~~~~~ */ 

/* ~~~~~~~~~~~~~~~~~~~ 8. Claim Submission Page ~~~~~~~~~~~~~~~~~~~~~ */ 
/* Header color */
.online-two-iso .webpartTitle {background-color: rgb(01,127,0);}

/* Submit Button */
.fsaClaimSubmitContainer .btn-primary {
color: #fff;
background-color: rgb(01,127,0);
border-color: rgb(01,127,0);
}
.fsaClaimSubmitContainer .btn-primary:hover {background-color: rgb(0, 0, 153) ; opacity: 0.7;}

/* Calendar - Receipt Date */
.online-two-iso .datepicker-container .input-group-btn .btn {
background-color: rgb(01,127,0);
border-color: rgb(01,127,0);
}
/* To text transform  claim , receipt, attachement and additional details under submit m my claims page.*/
#claimDetail label{
  text-transform: capitalize;
}

#receiptDetail label{
  text-transform: capitalize;
}

#Attachment label{
  text-transform: capitalize;
}

#AdditionalDetail label{
  text-transform: capitalize;
}
.btn.btn-success.fileinput-button{
  background-color: rgb(01,127,0);
  border-color: rgb(01,127,0);
}
/* To change the hover color of attach button */
.btn.btn-success.fileinput-button:hover{
  background-color: rgb(0,0,153);
  border-color: rgb(0,0,153);
  opacity: 0.7;
}
/* To change the background color and its hover color of cancel button present under Submit my claims page. */
button.btn.btn-default.btn-lg.ng-isolate-scope{
  background-color: rgb(01, 127, 0);
  color: #fff;
  border-color: rgb(01, 127, 0);
}
button.btn.btn-default.btn-lg.ng-isolate-scope:hover{
  background-color: rgb(0, 0, 153);
  color: #fff;
  border-color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To change the font-family of claim submission page to Arial */
div.fsaClaimSubmitContainer.container.fixed-container.ng-scope{
  font-family: 'Arial';
  font-size: 16.5px;
}

/* ~~~~~~~~~~~~~~~~~~~ End of Claim Submission Page ~~~~~~~~~~~~~~~~~~~~~ */ 

/* ~~~~~~~~~~~~~~~~~~~ 9. Manage My Claim/Account Summary ~~~~~~~~~~~~~~~~~~~~~ */ 


.spendingaccountsTab-container .tabs UL LI.sel A {background-color: rgb(01,127,0);}
/* To change the color of Claims summary & Spending account under Manage My Claims */
ul.fsa-content-type.tab-titles span{
  color: rgb(01, 127, 0);
}
ul.fsa-content-type.tab-titles span:hover{
  color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To change the color of claim header titles under Manage my claims page. */
.claim-header span{
  color: rgb(01, 127, 0);
}
.claim-header span:hover{
  color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To adjust width of Submission Date */
th.claim-submission-date
{ width: 100px;}
/* To change the color of edit button under claim summary page. */
button.btn.btn-primary.claim-details-edit.ng-scope.ng-isolate-scope{
  background-color: rgb(01, 127, 0);
  border-color: rgb(01, 127, 0);
}
/* To change the hover color of edit button under claim summary page. */
button.btn.btn-primary.claim-details-edit.ng-scope.ng-isolate-scope:hover{
  background-color: rgb(0, 0, 153);
  border-color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To change the color of print button under claim summary page. */
button.btn.btn-info.claim-detais-print.ng-isolate-scope{
  background-color: rgb(01, 127, 0);
  border-color: rgb(01, 127, 0);
}
/* To change the hover color of print button under claim summary page. */
button.btn.btn-info.claim-detais-print.ng-isolate-scope:hover{
  background-color: rgb(0, 0, 153);
  border-color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To change the color of close button under claim summary page. */
button.btn.btn-default.ng-isolate-scope[ng-click="cancel()"]{
  background-color: rgb(01, 127, 0);
  border-color: rgb(01, 127, 0);
  color: #fff;
}
/* To change the hover color of close button under claim summary page. */
button.btn.btn-default.ng-isolate-scope[ng-click="cancel()"]:hover{
  background-color: rgb(0, 0, 153);
  border-color: rgb(0, 0, 153);
  opacity: 0.7;
}
/* To hide taxable tab. */
.claim-taxable, .claim-taxable-content{
  display: none;
}
/* To center the limit tab under account summary page. */
.claim-limit{
  text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~ End of Manage My Claim/Account Summary ~~~~~~~~~~~~~~~~~~~~~ */ 
/*To text transform save button under benefit seleciton page8*/
button.btn.btn-success.dependant-accept-btn{
  text-transform:none;
}
/* To align the asterisk(*) present under selection page. */
div.pending-note.ng-scope{
  float: none;
  margin-left: 10px;
}
/* To hide salary based coverage volume */
span.employeeVolume.ng-binding[ng-bind-html="::vm.benefitMatrixModel.yourEOIChoiceForAdditional(be)"]{
  display: none;
}
/* To text transform finished button under follow up items  */
a#follow-up-lastitem-bttn.button-style.blue.ng-binding[role='button']{
  text-transform: none;
}
/* To enlarge the next button present under Health Screening */
#matrix\ anytime-enroll a.btn.btn-warning.active-button{
  width: 100px;
}
/* To hide the 'outstanding follow up items' line; (bottom) under benefit selection page. */
.benefitselect .followup-collect-info{
  display: none;
}
/* To keep coverage name and rates in single line */
.content-option-credit-health {width: 460px;}
.option-credit-health .value {width: 300px;}
.option-credit-health .option {width: auto;}
/* To hide 'I agree and confirm' and 'submit' buttons under follow up items. */
div.followup-collect-content.row{
  display: none;
}
/* To make the text bolder which triggers after submitting the claims under claim submission page */
div[ng-show="!vm.Initializing && vm.ClaimSubmitted && !vm.LoadingError"] div.col-md-12[tabindex="0"]{
  color:red;
  font-weight: bold;
}
/* To hide the unlocked glyphicon and context */
span.glyphicon.glyphicon-record.ng-scope{
  display: none;
}
/* CBA Coverage Description alignment */
div.cbaStatement { width: 400px; }
/* To change the border radius of select buttons under checkout of benefit selection page.*/
div.checkout-button a{
  border-radius: 50px !important;
}
a.btn.btn-success.btn-confirmchoice, .panel-heading{
  border-radius: 50px !important;
}
/* To text transform Which clinic did you visit under claim submission page. */
.fsaClaimSubmitContainer label{
  text-transform: capitalize;
}

/* To hide new flag on elections */
.newbenefit, .changebenefit{
  display: none;
}
/* To hide Pending Enrolment field from Cost and Balance > FSA Balance */
.bootstrap-iso .table-striped > tbody > tr:nth-of-type(4) {
  display: none
}
/*To change mobile registration color in navigation bar */
a#menu1 {
color: #008000 !important;
font-weight: bold !important;}

a#menu1:hover {
color: #377caf !important;}

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