/* 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: #556B2F;
  border-color: #fff;}
  
/* 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(/apacsingapore/media/Media/logo%202.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-1 module-3" "module-1 module-1 module-4" "module-2 module-2 module-7" "module-6 module-5 module-5";} 
}
 @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-1 module-3" "module-1 module-1 module-4" "module-2 module-2 module-7" "module-6 module-5 module-5";}
/* 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(4,1fr);
               -ms-grid-columns:1fr 1fr 1fr 1fr;
               grid-template-areas:"module-1 module-1 module-3 module-4" "module-1 module-1 module-3 module-4" "module-6 module-5 module-2 module-7" ;} 
/* 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(6,1fr);
               -ms-grid-columns:1fr 1fr 1fr 1fr 1fr 1fr;
               grid-template-areas:"module-1 module-1 module-3 module-3 module-2 module-2" "module-4 module-4 module-6 module-5 module-7 module-7";}
/* 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: #837d2a;}

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

/* ~~~~~~~~~~~~~~~~~~ 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: #837d2a;
border-bottom: solid .5em #837d2a ;}
.online-two-iso A.button-style.green {background-color: #837d2a;}

/* Headings on profile page under different tabs*/
html#profile body#profile .profile #profile-online-2 P.sectionTitle{color: #837d2a;}

.online-two-iso .validation-caption {color: #837d2a;}

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

/*to change the colours of profile, message, logout */
.fa-user,.fa-envelope,.fa-sign-out{color: #000;}
.fa-user:hover,.fa-envelope:hover,.fa-sign-out:hover{color: #837d2a;}

#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: #837d2a; }

/* Hover color for buttons */
.bootstrap-iso .btn-default:hover {background-color:#556B2F !important;}

/* 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: #837d2a;}
#floating-header-content .search-btn:hover {background-color: #556B2F !important;}

/* ~~~~~~~~~~~~~~~~~~~~~~ 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: #837d2a;}

/* To change the colour of Glyphicon */
.benefit-matrix .font-youpay-color, span.glyphicon.glyphicon.glyphicon.glyphicon { color: #837d2a;  }

/* 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: #556B2F;  color: #fff;  border-color: #fff;}

/*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: #837d2a;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: #556B2F;color: #fff;}

/* Pop up after clicking on my dashboard on benefit matrix */
.online-two-iso .header-overlay {background-color: #837d2a;}

.online-two-iso A.button-style.blue {background-color: #837d2a;color: #fff;}

.online-two-iso A.button-style.blue:hover {background-color: #556B2F;}

/* Manage dependents Start */
h3.dependantModalHeader {color: #837d2a;} /* heading */

.online-two-iso .modal-normal a.tab-selector-link:hover, .online-two-iso .modal-normal .tab-selector-link.active {color: #837d2a;border-bottom: solid .5em #837d2a; } /* Tab selector */

.dependant-list-top a.dependant-add-link {color: #837d2a;} 
.dependant-list-top a.dependant-add-link:hover {color: black;} /* Add dependent */

button.btn.btn-warning.dependant-cancel-btn:hover {color: #fff;background-color: #556B2F;border-color: #556B2F;} /* Close button on Manage dependent */
/* Manage dependents close */

h3.modellersModalHeader {
  color: #837d2a;
  }
  
  /* Tab selector */
  .modeller-links li a.checked {  color: #fff;  background-color: #837d2a;  }
  .modeller-links li a.checked:hover {  color: #fff;  background-color: #556B2F;  }
  
  button.modeller-close-button.btn-warning:hover {  color: #fff;  background-color: #556B2F;  border-color: #556B2F;  }
  
  /* sub-headers - Security, Medical */
  .modeller-container .row-header {  color: #837d2a;  }
  
  /* Manage Dep > Dep coverage summary > save button */
  button.btn.btn-success.dependant-accept-btn:hover {  border-radius: 20px;  background-color: #556B2F;  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: #837d2a;  border-bottom: solid .5em #837d2a;  }
  .online-two-iso .modal-large .tab-selector-link {  color: #837d2a;  }
  /* Close button */
  .bootstrap-iso .btn-warning:hover{  color: #fff;  background-color: #556B2F;  border-color: #556B2F;  }
  
  /* Benefit selection page > Continue button */
  .bootstrap-iso .btn-warning:hover {  color: #fff;  background-color: #556B2F;  border-color: #556B2F;  }

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

/* ~~~~~~~~~~~~~~~~~~~ 6. Benefit Statement ~~~~~~~~~~~~~~~~~~~~~ */ 
.bootstrap-iso .btn.online-two-datepicker {
background-color: #837d2a;
border-color: #837d2a;
}

span.glyphicon.glyphicon-print { color: #fff!important;}


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

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

/*Benefit Overview Line Images*/

/*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: #556B2F;
 border-color: #fff;
}
span.glyphicon.glyphicon-chevron-right.aria {color: #fff!important;}

/* ~~~~~~~~~~~~~~~~~~~ End Benefit overview ~~~~~~~~~~~~~~~~~~~~~ */ 

/* ~~~~~~~~~~~~~~~~~~~ 8. Claim Submission Page ~~~~~~~~~~~~~~~~~~~~~ */ 
/* Header color */
.online-two-iso .webpartTitle {background-color: #837d2a;}

/* Submit Button */
.fsaClaimSubmitContainer .btn-primary {
color: #fff;
background-color: #837d2a;
border-color: #837d2a;
}
.fsaClaimSubmitContainer .btn-primary:hover {background-color: #556B2F;}

/* Calendar - Receipt Date */
.online-two-iso .datepicker-container .input-group-btn .btn {
background-color: #837d2a;
border-color: #837d2a;
}

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

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


.spendingaccountsTab-container .tabs UL LI.sel A {background-color: #837d2a;}

/* ~~~~~~~~~~~~~~~~~~~ End of Manage My Claim/Account Summary ~~~~~~~~~~~~~~~~~~~~~ */ 


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