html, body {
    height:100%;
}
.bkgd {
    width: 100%;
    height: 190px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}
#feedbackBtn {
    float:right;
    position: fixed;
    width:125px;
    top:150px;
    right:0px;
}
.multiple-rows{
    width:90%!important;
    margin-left:30px!important;
}
.flexible {
 
    font-size: 1.4rem;
}
.homePlans {
    width:370px;
}
.heading {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.heading-text-left {
    text-align: left;
    margin-left:45px;
    margin-bottom:0px;
}
.visibility::before {
    content: "visibility";
}
.hrPass {
    border-top: 2px solid #00aa59; 
    margin-top: 10px;
    width: 368px;
    margin-left: 0;
    text-align:left;
}

.hrHead {
    border-left: 1px solid #979797;
    height: 40px;
    width:1px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#hrHead {
    position: relative;
    margin-left: -25px;
    margin-right: 25px;
}
.nav--item-signin .nav-link {
    border: 0;
    background-color: #fab167;
    color: #34384b;
    padding: 13px 20px;
}
#homeDropdown:focus {
    outline: auto!important;
    box-shadow:  0 0 0 0.2rem   #A6C8FF!important;
}

.hrFoot {
    border: 2px solid rgba(255, 255, 255, 0.4);
    height: 100%;
    display: inline-block;
    margin: 0;
}
.form-group.checkbox__holder input + label:before {
    border-radius: 0%;
}
.signinBtn {
    margin-top:44px;
    margin-bottom: 10px;
}

.form-select:focus, .form-select:hover, .form-select {
    border-color: #06854d;
    outline: 1px solid #06854d;
}

.form-select {
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 16%);
    z-index: 300;
    min-width: 270px;
    max-width: 100vw;
    max-height: 400px;
    margin-top: 1px;
    padding: 8px;
    overflow: hidden;
    transition: opacity .3s,top .3s;
    overflow-y: auto;
    background-image: url(./../images/select-dropdown-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
}
.form-select option {
    display: flex;
    align-items: center;
    font-family: Manulife JH Sans,arial;
    text-align: left;
    padding: 16px 16px 16px 32px;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .3s,color .3s;
}
.cc-select__check {
    display: none;
    width: 16px;
    height: 16px;
    margin: 0 8px;
    fill: #06854d;
}
#errorMsg, #freErrorMsg {
    font-family: 'manulife__light';
    color: #d9352d;
    font-size: 16px;
    font-weight: 300;
}
.homeCard{
    justify-content: center;
    max-height: 100%;
    padding: inherit;
}

#single-pdbtn{
    position:inherit;           
    bottom:0;                          
    right:0;  
    margin-top:38px!important;
}
.single-card{
    margin-top: 0px;
    padding-top: 10px;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-top-color: rgba(0, 0, 0, 0.125);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.125);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgba(0, 0, 0, 0.125);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-radius: 0.25rem;
}
.group-single-card{
    margin-left: -20px;
    min-height: 320px;
    margin-top: 0px;
   padding-top:10px;
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
    border-top-color: rgba(0, 0, 0, 0.125);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.125);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgba(0, 0, 0, 0.125);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-radius: 0.25rem;
}
.group-card{
 
    min-height: 340px;
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
    border-top-color: rgba(0, 0, 0, 0.125);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.125);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgba(0, 0, 0, 0.125);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-radius: 0.25rem;
}

.home-cards{
 
    min-height: 350px;
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
    border-top-color: rgba(0, 0, 0, 0.125);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.125);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgba(0, 0, 0, 0.125);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-radius: 0.25rem;
}

.pdbtn{
    position:absolute;                  
    bottom:0;                          
    right:0;         
}
#companyLogo img {
    max-height:50px;
}

.tooltipImg {
    margin-top:-15px;
    margin-left: 5px;
}

.cookie-consent {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-consent p {
    margin: 0;
    display: inline-block;
    color: white;
}

.cookie-consent a {
    color: #4CAF50;
    text-decoration: none;
}

.cookie-consent-button {
    margin-left: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
#bg {
    background-image:url('/assets/img/custom_image_4.jpg');
    max-width: 30%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center right;
}
#bgDash {
    background-image:url('/assets/img/custom_image_1.jpg');
    max-width:30%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center right;
}
#getSup{
    margin-top:20px;
}
.text {
    font-family: 'manulife__regular--italic';
}
.filter-option  {
    width: 80%!important;
    background-color: white;
    font-family: 'manulife__regular--italic';
    font-size: 16px;
}
.dotted-line {
    width: 225px;
    padding:10px;
    margin-bottom: 20px;
}
.btn-light {
    background-color: white !important;
    border-color: white !important;
}
select {
    appearance: none;
    -webkit-appearance: none;
  -moz-appearance: none;
}
select::-ms-expand {
    display: none;
}
#welcome {
    word-wrap:break-word; 
    width:100%;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
}

.faq { 
    display:none;
    margin-left: 50px;
  
}

.accordion.accordion--default .card:focus-within {
    border:2px solid rgba(0, 150, 255, 1);
}

.centeredDiv {
    text-align: center;
    
}
.centeredDiv img {
    margin-bottom:15px;
}

.learn, .contact {
    padding: 5%;
    border: 1px solid #ececec;
    background-color: #ffffff;
}
.learn a, .contact a {
    text-align: left;
}
a.external-link:nth-child(2) {
    margin-left:0;
}
.contact {
    text-align: left;
}

.infoBox {
    border-bottom:1px solid rgba(66, 69, 89, 0.4);
    margin-right:50px;
    margin-bottom: 10px;
    padding-bottom:40px;
    width:250px;
}

.select__native {
    width: 100%;
    border-style: dashed;
    border-width: 0 0 1px 0;
    border-radius: 0;
    display: block;
    font-size: 1.6rem;
    font-family: "manulife__regular";
    color: #34384b;
    padding: 9px 30px 9px 10px;
    background-color: rgba(0,0,0,0);
    background-image: url(./../images/select-dropdown-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
}
.fundToolTip {
    position: relative;
}
a.fundToolTip:hover::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 100;
    
}
a.fundToolTip:focus::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 100;
    
}
a.fundToolTip::selection::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 100;
    
}
a.fundToolTip:hover::after {
    content: attr(data-title);
    position: absolute; 
    width: 250px;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    font-size: small; border: 1px solid;
    background: #ffffff;
    white-space: pre-line;
    z-index: 99;
    color:	#808080;
    font-family: "manulife__regular";
    
}
a.fundToolTip:focus::after {
    content: attr(data-title);
    position: absolute; 
    width: 250px;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    font-size: small; border: 1px solid;
    background: #ffffff;
    white-space: pre-line;
    z-index: 99;
    color:	#808080;
    font-family: "manulife__regular";
    padding:12px;
    
}
a.fundToolTip::selection::after {
    content: attr(data-title);
    position: absolute; 
    width: 250px;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    font-size: small; border: 1px solid;
    background: #ffffff;
    white-space: pre-line;
    z-index: 99;
    color:	#808080;
    font-family: "manulife__regular";
    padding:12px;
    
}
.modalBox {
    position: fixed; 
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5); 
    z-index: 99999;
    opacity:0; 
    pointer-events: none;
  }
  .modalBox:target {
    opacity:1; 
    pointer-events: auto;
  }
  .modalBox > div {
    width: 500px; 
    position: relative;
    margin: 10% auto; 
    margin-top:7%;
    padding: 20px;
    background: #fff;
    white-space: pre-line;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    text-align: center;
  }
  .modalBox > div::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    .modalBox > div::-webkit-scrollbar {
        width: 10px;
        background-color: #F5F5F5;
        margin-right: 10px;
    }
    .modalBox > div::-webkit-scrollbar-thumb {
        border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	    background-color: #00aa59;
    }
    .main[aria-hidden='true'] { pointer-events: none;}
  #getSup a {
    border-bottom:none;
  }

  #payrollContent {
      margin-left:4%;
  }
  
  .visually-hide {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
  }

  #footer-text {
      display: inline-flex;
  }
  .left-pad {
      padding-left:36px;
      padding-right: 36px;
  }
 
  .btn-join{
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
   
  }
  a.btn.external-link.btn-join:hover:after {
    border-bottom:0!important;
  }
  
  #noCompanyLogo {
    margin-bottom:10px;
  }

  p .external-link {
    margin-right: 0!important;
  }

  .invFundWidth {
    width:500px;
    }
@media (max-width: 1279.98px){
    .card.bkgd.aem-GridColumn.aem-GridColumn--default--4.aem-GridColumn--tablet--6.aem-GridColumn--phone--12 {
        margin-bottom:0!important;
    }

}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:425px) {
    .frEL::before {
        margin-right:-20px;
    }
    a#payrollBtn.external-link.enWaiver::before {
        margin-right:-68px;
    }
}
@media screen and (min-width:425px) and (max-width:425px){
    
    a#payrollBtn.external-link.frEL::before {
        margin-right:-90px;
    }
}
@-moz-document url-prefix() {
    .frEL::before {
        margin-right:0;
    }
    
}
  @media (max-width: 1599.98px) and (-ms-high-contrast: none), (-ms-high-contrast: active){
    #sidebarLogo{
        width:100%;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1440px) {
    a#payrollBtn.external-link.frEL::before {
        top:20px;
    }
}
@media screen and (max-width: 1280px) and (max-height: 1024px) {
    a.external-link:after {
        position: static;
    }
}
@media (min-width:768px) and (max-width:1440px) {

   #mercerLogoRow {
       height:80px!important;
   }
   #mercerLogoRow img:first-child {
    max-height: 60px!important;
   }
   #companyLogoWMer {
    max-height: 40px!important;
   }
   #whiteHeaderBar {
       height: 80px!important;
   }
   #noCompanyLogo {
       height:80px!important;
       margin-bottom: 10px;
   }
}
@media (min-width: 768px) and (max-width: 1400px) and (-ms-high-contrast: none), (-ms-high-contrast: active){
    .contact{
        width:100%!important;
    }
    .col-md.mobile {
        padding-left:0;
    }
   
}
@media (max-width: 1045px) and (-ms-high-contrast: none), (-ms-high-contrast: active){
    .contact{
        display:block!important;
    }
}
@media(min-width:771px) and (max-width: 915px) and (-ms-high-contrast: none), (-ms-high-contrast: active){
    .col-md.mobile {
        flex-basis:calc(33.33333% - -6em)!important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) and (-ms-high-contrast: none), (-ms-high-contrast: active){ 
   #bg {
      max-width:15%;
      background-attachment: fixed;
   }
}
@media (min-width:900px) and (max-width:1400px){
    .btn-join {
        margin-left:-33%!important;
    }
}

 @media only screen and (min-width: 768px) and (max-width: 1400px){ 
      #bgDash {
        max-width:18%;
     }
     #bg {
        max-width:15%;
        background-attachment: fixed;
     }
     .col-sm-3 {
         max-width: 50%;
     }
     div .btn-primary {
        margin-bottom:20px;
     }
     #hrHead {
        margin-left:10px!important;
    }
    .row div.policyP{
        margin-top:15px!important;
        margin-bottom:15px!important;
    }
    .address{
        padding-top:10px!important;
    }
    .mobile {
        margin-top:20px;
        margin-bottom:20px;
    }
    .contact {
        width:100%;
        margin: 0 auto;
    }
    #sidebarLogo {
        width:80px!important;
    }
    .footer {
        width: 100%;
    }
  }
 
  @media only screen and (min-width: 576px) and (max-width: 1064px){
    #bg {
        max-width:25%;
    }
    .contact {
        width:400px;
        margin: 0 auto;
    }
    #homeDropdown{
        width: 250px!important;
        margin-left:-65px!important;
    }
    #companyLogoWMer {
        max-height: 35px!important;
       }

  }
  @media only screen and (max-width: 767.98px){
      #mercerLogoRow {
          width:130%;
      }
      #mercerLogo {
          margin-left: 0%!important;
      }
      #mercerLogoRow img:first-child {
        max-height: 45px!important;
       }
      .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--12 {
          margin-left:0px!important;
      }
      #collapseMargin {
          margin-top:0;
      }
      .left-pad {
          text-align: center;
      }
  
  }
  @media (max-width: 767.98px) and (min-width: 576px){
    .col-sm-3#companyLogo {
        flex: 0 0 100%!important;
        max-width: 100%!important;
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px){
    .footer__nav {
        flex-wrap: nowrap;
    }
    .col-sm-1 {
        width:10px;
    }
    #manulifeLogo {
        display: none;
    }
    .row div.policyP{
        margin-top:15px!important;
        margin-bottom:15px!important;
    }
    .address{
        padding-top:10px!important;
    }
    .left-pad {
        padding-left:0;
        margin-left:15px;
        margin-right:15px;
    }
    #appDownload{
        margin-bottom:20px;
    }
   
  }
  @media (max-width:694px){
      .giaToolTip {
        flex:auto;
      }
      .equal__height--item {
        height:auto!important;
    }
  }

  @media only screen and (min-width:589px) and (max-width:669px){

    .home-cards{
           width:auto;
    }
    .group-card{
        margin-left:50px!important;
    }
    
}

@media only screen and (min-width:670px) and (max-width:732px){

.group-card{
    justify-content: center;
    margin-left:75px!important;
  }
}

@media only screen and (min-width:480px) and (max-width:588px){

    .home-cards{
        width:auto;
    }
    .group-card{
        margin-left:10px!important;
    }
    
}
@media only screen and (max-width: 767px){ 
    #noCompanyLogo {
        display: none;
    }
    .guide__heading--h1 {
        margin-top:10px;
    }
}
 @media only screen and (min-width: 480px) and (max-width: 767px){ 
    .equal__height--item {
        height:auto!important;
    }
    #bgDash {
        max-width:20%;
     }
     #bg {
        max-width:20%;
     }
    .col-sm-3 {
        max-width: 50%;
    }
    .col-sm-3#companyLogo {
        max-width: 100%;
    }
    #hrHead {
        display:none;
    }
    #manulifeLogo {
        display: none;
    }
    .modalBox > div {
        width:90%;
        max-height:75%;
    }
    .row div.policyP{
        margin-top:15px!important;
        margin-bottom:15px!important;
    }
    .address{
        padding-top:10px!important;
    }
      
    .btn-join {
        margin-left:1%!important;
    }
    .left-pad {
        padding-left:36px;
       
    }
    #appDownload{
        margin-bottom:20px;
    }
    #feedbackBtn{
        display:none;
    }
  
    #homeDropdown{
        width: 250px!important;
        margin-left:-92px;
    }
    
    p, .body__text {
        font-family: "manulife__light";
        font-size: 1.6rem;
        color: #282b3e;
        margin-bottom: 23px;
    }
    #inv-text{
        margin-top:30px!important;
        margin-bottom:40px!important;
        text-align:center;
    }
  
    
    .signin__logo{
        background-image: url(/assets/img/SignIn.svg);
        padding-top: 38px!important;
        width: 80px;
        height: 60px;
        display: block;
        color: rgb(255, 255, 255);
        font-size: 1.2rem;
        text-align: center;
        line-height: 1;
        font-family: manulife__regular;
        background-repeat: no-repeat;
        padding: 0px 0px 0px;
        border-left: 1px solid rgb(40, 43, 62);
        background-position: center 12px;
    
    }
 
    #companyLogo {
        text-align: center;
    }
    .guide__heading--h1 {
        margin-top:10px;
    }
    .footer {
        width: 100%;
    }
  }
 @media screen and (min-width:768px) and (max-width : 1024px) {
    #payrollBtn.frEL::before {
            margin-top:22px;
        }
        #payrollBtn.enWaiver::before {
            margin-top:22px;
        }
        .home-cards{
            position: relative;
        }
         
        .footer {
            width: 100%;
        }
 }
 @media screen and (min-width:821px) and (max-width : 1144px) {
   
   #inv-text p{
       margin-top:-20px!important;
   }
   .btn-join{
       margin-bottom:0px;
   }
    
 }
 @media only screen 
and (min-device-width: 779px) 
and (max-device-height: 1280px) 
and (min-resolution: 192dpi)
and (-webkit-device-pixel-ratio:2)
and (orientation : portrait) 

{
    .learn a.external-link {
        margin-right: -20px!important;
    }
}

 @media screen and (min-width:768px) and (max-width:771px){
    .group-card{
        margin-left:100px!important;
    }

    .segCard a.external-link {
        margin-right:-9px!important;
    }

 }
 
 @media (min-width: 768px) and (max-width:820px){
    .col-md-9 {
        max-width: 72%!important;
    }
   
    
    #inv-text p{
        margin-top:-30px!important;
    }
   
  
}
@media (max-width:621px) and (min-width:480px){
    a.external-link {
        margin-left:5px;
    }
}
 @media screen and (max-width: 479px) and (-ms-high-contrast: none), (-ms-high-contrast: active){
    td:nth-of-type(1):before { content: ""; }
    td:nth-of-type(2):before { content: "Policy Number"; text-align-last:right; margin-right: 80px!important; }
    td:nth-of-type(3):before { content: "Access Codes"; text-align-last:right; margin-right: 80px!important;}
    td:nth-of-type(4):before { content: "Is this plan optional?";text-align-last:right; margin-right: 55px;}
    td.eligibility{display: inline-flex;}
    td:nth-of-type(5):before { content: "Plan Details"; text-align-last:right;margin-right: 100px!important;}

    .card td:nth-of-type(1):before { content: "Fund code"!important; text-align-last: right; margin-right:38px!important;}
    .card td:nth-of-type(2):before { content: "Fund name"!important; text-align-last:right; margin-right: 60px!important; }
    .segCard td:nth-of-type(3):before { content: "IMF"!important; text-align-last:right; margin-right: 80px!important;}
    .giaCard td:nth-of-type(3):before {content: "Rate"; text-align-last:right; margin-right: 80px!important;}
    .giaCard td:nth-of-type(4):before {content: "More info"!important;text-align-last:right; margin-right: 125px!important;}
    .segCard td:nth-of-type(4):before {content: "More info"!important;text-align-last:right; margin-right: 125px!important;}
 }
 @media screen and (min-width: 568px) and (max-width: 568px){
    #companyLogo img {
        max-width:50%;
    }
    #companyLogoWMer {
        max-width:40px!important;
    }
 }
 @media screen and (max-width : 375px) {
    #payrollBtn.frEL::before {
            margin-right:-123px;
        }
        .group-card{
            margin-left:35px!important;
        }
       
        .guide__heading--h1 {
            margin-top:10px;
        }
 }
 @media screen and (min-width:344px) and (max-width: 364px){
    p .external-link.enWaiver {
        margin-right:0!important;
    }
   
 }
 @media screen and (max-width : 328px) and (min-width: 320px) {
    .card a.external-link {
        margin-right: -7px;
    }
    .learn a.external-link {
        margin-right:-14px;
    }
 }
  @media screen and (max-width : 320px) {
    #payrollBtn.frEL::before {
            margin-right:-65px;
        }
         #payrollBtn.enWaiver::before {
            margin-right:-65px;
        }
        a.fundToolTip:hover::after {
            width:106px!important;
        }
         a#payrollBtn.external-link.enWaiver::before{
        margin-right:-90px;
    }
    .home-cards{
        position: relative;
        text-align: center;
        margin-left:-4px!important;
        max-height:80%;
    }
    .group-card{
        position :relative;
        text-align:center;
        margin-left:-30px!important;
    }
   
    #homeDropdown{
        width: 200px!important;
        margin-left:-80px!important;
    }
    
    p, .body__text {
        font-family: "manulife__light";
        font-size: 1.6rem;
        color: #282b3e;
        margin-bottom: 23px;
    }

      .signin__logo{
        background-image: url(/assets/img/SignIn.svg);
        padding-top: 38px!important;
        width: 80px;
        height: 60px;
        display: block;
        color: rgb(255, 255, 255);
        font-size: 1.2rem;
        text-align: center;
        line-height: 1;
        font-family: manulife__regular;
        background-repeat: no-repeat;
        padding: 39px 0px 0px;
        border-left: 1px solid rgb(40, 43, 62);
        background-position: center 12px;
    
    }
    
    #inv-text{
        margin-top:10px!important;
        margin-bottom:80px!important;
    }
    
 }

 @media screen and (min-width :395px) and (max-width:479px){
    .group-card{
        margin-left:-10px!important;
    }
}

 @media screen and (min-width :321px) and (max-width:395px){
    .group-card{
        margin-left:-30px!important;
      }
      #homeDropdown{
        width: 250px!important;
        margin-left:5px!important;
    }
}
    
@media screen and (min-width:320px) and (max-width:320px){
    #homeDropdown{
        margin-left: 10px!important;
    }
    
}
@media screen and (max-width: 623px) {
    #joinTxtMbl {
        flex: none!important;
        max-width:100%!important;
    }
    #joinImgMbl {
        display: none;
    }
    .chkBoxPlans {
        width:100%!important;
        text-align:left;
    }
    #divVideo{
        display: none;
    }
    #mblVideo{
        display: block!important;
    }
}
 
@media screen and (min-width : 320px) and (max-width: 479px) {
    /* start of phone styles */
    body {
        text-align: center;
    }
    #getSup .h4{
        text-align: center;
    }
    #getSup .footer__nav .col-sm-1{
        margin-left:0!important;
    }
    .bkgd {
        height: 100%;
    }
    .hrFoot {
        width:500px;
        height: 0;
    }
    .footer {
        width: 100%;
    }
    #manulifeLogo {
        display: none;
    }
    img.hub-asset{
        max-width: 50%;
        max-height:60px;
    }
    #companyLogoWMer{
        max-height:30px!important;
    }
    #hrHead {
        display: none;
    }
    #companyLogo {
        float: left;
        margin-bottom:20px;
    }
    #hrPass {
        width: flex;
    }
    h4, h3 {
        text-align: left;
    }
   
    #footerGrid ul.navbar-nav{
        display: inline-grid!important;
        text-align: left!important;
        padding-bottom:30px!important;
        margin-left:20px!important;
    }
    ul#footer__nav--links {
        display: flex !important;
        padding-bottom:30px!important;
        margin-left:20px!important;
    }
    ul#nav-menu-footer li.nav-item {
        padding-top:16px!important;
        padding-bottom:16px!important;
    }
    #bg {
        display: none;
    }
    #bgDash {
        display: none;
    }
    .invFundWidth {
        width: 100%!important;
    }
    .nav-link-text {
        color: white;
    }
    #welcome {
        width: 100%;
    }
    .dotted-line {
        width:100%;
        text-align: center; 
        margin-left:3%!important;
    }
    .btn:last-child:not(#payrollBtn) {
        margin-bottom:20px;
    }
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 100%!important;
    }
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px; 
    }
     
     #inv-text{
         margin-top:10px!important;
         margin-bottom:20px!important;
     }
    tr { 
        padding-bottom: 20px;
    }
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        width:100%;
    }
    .checkbox__holder{
        text-align: left;
    }
    #desktopTbls {
        display:none;
    }
    #mobileTbls {
        display:block!important;
    }
    /* td:nth-of-type(1):before { content: ""; }
    td:nth-of-type(2):before { content: "Policy Number"; margin-right: 20%!important; }
    td:nth-of-type(3):before { content: "Access Code"; margin-right: 24%!important;}
    td:nth-of-type(4):before { content: "Is this plan optional?"; margin-right: 15%!important;}
    td.eligibility{display: inline-flex;}
    td:nth-of-type(5):before { content: "Plan Details"; margin-right: 80px!important;}

    td.frenchCol:nth-of-type(1):before { content: ""; }
    td.frenchCol:nth-of-type(2):before { content: "Numéro de contrat"; margin-right: 20%!important; }
    td.frenchCol:nth-of-type(3):before { content: "Code d’accès"; margin-right: 32%!important;}
    td.frenchCol:nth-of-type(4):before { content: "Détails"; margin-right: 44%!important;}
    td.frenchCol.eligibility{display: flex;}
    td.frenchCol:nth-of-type(5):before { content: "Détails du régime"; margin-right: 15px!important;} */

    .card td:nth-of-type(1):before { content: "Fund code"!important; text-align-last:right;margin-right:12%!important;font-weight: bold;}
    .segcard td:nth-of-type(1):before { content: "Fund code"!important; text-align-last:right;margin-right:15%!important;font-weight: bold;}
    .card td:nth-of-type(2):before { content: "Fund name"!important;margin-right: 10%!important; width:80px; word-wrap:break-word;font-weight: bold; }
    .giaCard td:nth-of-type(2):before { content: "Fund name"!important;margin-right: 10%!important; font-weight: bold;}
    .segCard td:nth-of-type(3):before { content: "IMF"!important;text-align-last:right; margin-right: 30%!important;font-weight: bold;}
    .giaCard td:nth-of-type(3):before {content: "Rate"; text-align-last:right;margin-right: 30%!important;font-weight: bold;}
    .giaCard td:nth-of-type(4):before {content: "More info"!important;text-align-last:right; margin-right: 13%!important;font-weight: bold;}
    .segCard td:nth-of-type(4):before {content: "More info"!important;text-align-last:right; margin-right: 13%!important;font-weight: bold;}

    .portCard td:nth-of-type(1):before { content: "Fund name"!important; margin-right: 40%!important;font-weight: bold;}
    .portCard td:nth-of-type(2):before { content: "IMF"!important;text-align-last:right; margin-right: 44%!important;font-weight: bold;}

    .card td.frenchCol:nth-of-type(1):before { content: "Code de fonds"!important; text-align-last:right;margin-right:26%!important;font-weight: bold;}
    .segcard td.frenchCol:nth-of-type(1):before { content: "Code de fonds"!important; text-align-last:right;margin-right:23%!important;font-weight: bold;}
    .card td.frenchCol:nth-of-type(2):before { content: "Nom du fonds"!important;margin-right: 10%!important; width:270px; word-wrap:break-word;font-weight: bold; }
    .giaCard td.frenchCol:nth-of-type(2):before { content: "Nom du fonds"!important;margin-right: -35%!important; font-weight: bold;}
    .segCard td.frenchCol:nth-of-type(3):before { content: "FGP"!important;text-align-last:right; margin-right: 52%!important;font-weight: bold;}
    .giaCard td.frenchCol:nth-of-type(3):before {content: "Taux"; text-align-last:right;margin-right: 50%!important;font-weight: bold;}
    .giaCard td.frenchCol:nth-of-type(4):before {content: "Plus d'informations"!important;text-align-last:right; margin-right: 10%!important;font-weight: bold;}
    .segCard td.frenchCol:nth-of-type(4):before {content: "Plus d'informations"!important;text-align-last:right; margin-right: 10%!important;font-weight: bold;}

    .portCard td.frenchCol:nth-of-type(1):before { content: "Nom du fonds"!important; margin-right: 50%!important;font-weight: bold;}
    .portCard td.frenchCol:nth-of-type(2):before { content: "FGP"!important;text-align-last:right; margin-right: 51%!important;font-weight: bold;}

    .card td:nth-of-type(2):not(:last-child) {
        display: inline-flex!important;
        text-align:left;
    }
    .portCard td:nth-of-type(1):not(:last-child) {
        display: inline-flex!important;
    }
    .btn-primary{
        width:90%!important;
        margin-left:0!important;
    }
    .bkgd .row .col-2 .btn-primary {
        min-width:70px!important;
    }
    .btn-join {
        margin-top:0px!important;
    }
	.learn {
        margin-bottom:25px;
    }
    .learn h4{
        text-align: center;
    }
    .learn a.external-link {
        margin-right:-14px!important;
    }

    .mobile {
        margin-bottom: 25px;
        padding:20px;
    }
    .signin__logo{
        background-image: url(/assets/img/SignIn.svg);
        padding-top: 38px!important;
        width: 80px;
        height: 60px;
        display: block;
        color: rgb(255, 255, 255);
        font-size: 1.2rem;
        text-align: center;
        line-height: 1;
        font-family: manulife__regular;
        background-repeat: no-repeat;
        padding: 39px 0px 0px;
        border-left: 1px solid rgb(40, 43, 62);
        background-position: center 12px;
    
    }

    .payrollPrint {
        margin-left:0px!important;
    }
   .payrollText{
       margin-top:10px!important;
   }
   .payrollInfo {
       margin-bottom:0px!important;
   }
   .modalBox > div {
       width:95%;
       max-height:90%;
   }
   .dotted-line {
    width:180px;
    padding:10px;
    margin-bottom: 20px;
    margin-left: 10px;   
}
.homeCard{
    justify-content: center;
}
.group-single-card{
    position: relative;
    text-align: center; 
    height: 100%;
    margin-left: -35px;
}
.single-card{
    position: relative;
    text-align: center; 
    height: 100%;
    margin-left: -15px;
}

p, .body__text {
    font-family: "manulife__light";
    font-size: 1.6rem;
    color: #282b3e;
    line-height: 1.5; /* At least 1.5 times the font size */
    margin-bottom: 3.2rem; /* At least 2 times the font size */
    letter-spacing: 0.12em; /* At least 0.12 times the font size */
    word-spacing: 0.16em; /* At least 0.16 times the font size */
   
}
   .card-body {
       text-align: left;
   }
   .card-header h5 button{
       margin-bottom: 0px!important;
   }
   a.fundToolTip:hover::after {
       width:106px!important;
       left:-180%;
       top:60%;
    }
    a.fre.fundToolTip:hover:after {
        width:125px!important;
        left:-25px;
        top:75%;
     }
    a.fundToolTip:focus::after {
        width:125px!important;
        right:40%;
        top:60%; 
   }
   select#faqDropdown {
       width:100%!important;
   }
   .policyP {
       margin-top:30%;
   }
   .payrollPhrase{
       margin-bottom:10px;
   }
   .row div.policyP{
        margin-top:15px!important;
        margin-bottom:15px!important;
        text-align: left;
    }
    .address{
        padding-top:10px!important;
    }
    #manulifeCopyright {
        display:grid;
        margin-left:20px;
        padding-right:30px;
    }
    #footer-text p{
        text-align: left;
    }
    #manulifeCopyright img {
        padding-bottom:30px;
    }
    #appDownload{
        margin-bottom:20px;
    }
    .personalInfo {
        margin:inherit;
    }
    input#firstName {
        width:100%!important;
        margin-left:-25px!important;
    }
    input#middleName {
        width:100%!important;
        margin-left:-25px!important;
    }
    input#lastName {
        width:100%!important;
        margin-left:-25px!important;
    }
    input#employeeNum {
        width:100%!important;
        margin-left:-25px!important;
    }
    .infoBox {
        width:100%!important;
    }
    .frEL{
        padding-right:0!important;
    }
    #contactRow {
        width: 100%!important;
    }
}

input[type="checkbox"] {
    width:25px;
    height:25px;
  }
  
  @media print {
    .printPageButton {
      display: none;
    }
  }