/* CORE SITE STYLESHEET : loaded at the master page / layout / root level, so it is accessible for all pages/views */
@charset "utf-8";
/* === TODO LIST === */
/* -- review with Sandra the methods for loading theme-stylesheet for clients */
/*  */
/*  */

/* === GLOBAL === */
/* === framework and component styling across all pages  === */
html, body{min-width:320px;}

body {
  padding-right: 0px !important
}

/* common useful classes */
/* listclear is used to remove the default browser styling on a list  */ 
.listClear { list-style: none outside none; margin: 0; padding: 0; }
        .listClear li { margin: 0; padding: 0; }

/* reusable page components */
.pageTitle{margin-top:1rem;}

/* default colors */
/* 
info : #3966c3
error: #dd3435
warning: #f3b823
success: #54b34a
*/

/* validation */
.errors{color:#dd3435;}

/* === PAGES === */
/* note: template and templateNoMenu may use the same layout code eventually, but keeping them separate for now */
/* === TEMPLATE (template.xhtml) :: main site page template === */
#template {display:flex; flex-direction:column;}
#template #header{}
#template #content{flex:1 0 auto;padding-bottom:5px;}
#template #footer{}

/* === TEMPLATE NO MENU  (templateNoMenu.xhtml) :: template for pre-login pages === */
#templateNM {display:flex; flex-direction:column;}
#templateNM #header{border-bottom:solid 3px #ccc;}
#templateNM #content{flex:1 0 auto;}
#templateNM #footer{}

/* shared classes on template pages and sub pages */
.listClear li.accountTypes{margin-bottom:10px;}
.subAccounts{padding:10px 0 0 20px;}
.subAccounts li:not(:first-child){margin-bottom:10px;}
.subacctTitle{border-bottom:solid 1px #ddd;}

/* the left/right columns stack vertically on mobile, need to add some padding */
@media (max-width:575px) {
    [class*="col-"]{padding-bottom:10px;}
}

/* LOGIN (index.xhtml)*/ /* need to refactor the color/theme stylesheet, these should be default-placeholders */
#login_body{background-color:#eee;}
#login_outer{padding-top:15px;}
#login_header{text-align:center;padding:1rem;}
    #login_header img{border-radius:0;max-width:100%;} /*override card-img settings (rounded corners)*/
#login_card{}

.footer-legal{font-size:x-small; padding: 10px; text-align:center; }

/* template.xhtml :: outer container to hold header, navigation, content and footer */

/* 'mp' is richface popup panel, being removed -- so this is temporary */
body.themeable #mp{display:none !important;}

/* Override richfaces autocomplete element to align more with bootstrap styles */
.fsv-au .rf-au { 
  background:none !important;
  display: block !important;
  border: none !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;  
}

.fsv-au .rf-au-inp {
  background:none !important;
  display: block !important;
  width: 100% !important;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057; 
}

.fsv-au .rf-au :focus {
    color: #495057 !important;
    background-color: #fff;
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.fsv-au-popup li{
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1;
}

.fsv-au-selected-item {
    background-color: rgba(0, 0, 0, 0.03);
}
/* overriding PrimeFaces styling */
body .outputPanelOverride a{
    font-size: .9rem !important;
    font-family: "Roboto", sans-serif;
	text-decoration: none;
}

body .outputPanelOverride a:hover{
    text-decoration: none;
    color: #05668D;
}
.imgHeader{max-width:100%;}

/* ENROLLMENT */
/* Disclosure */
.formEnrollDisclosure{}
     .formEnrollDisclosure #printContainerTop{}
     .formEnrollDisclosure #disclosureContainer{border:solid 1px #ddd; margin:10px 0; padding:10px;overflow:hidden;max-height:300px;}
     .formEnrollDisclosure #adobe{margin:5px 0;text-align:right;}
     .formEnrollDisclosure #eSignContainer{margin:10px 0 5px 0;}
     .formEnrollDisclosure #eSignContainer #aPdfDownload{font-size:1.2rem;font-weight:400;}

/* end Enrollment 8?


/* navigation.xhtml :: main menu bar */
/*we want the branding to be theme-able through stylesheets*/
.navbar-brand{}
.navbar-nav .nav-link{text-shadow:1px 1px 0.5px rgba(0,0,0,0.3);}
/* == Component Page ==  */
/* marketing.xhtml */
#marketingImage{width:100%; height:100%;}

/* Search Results Modals
/* for On Demand View
----------------------------------------------------- */
.modal {
    overflow-y: auto;
}

/* Search Results
/* for Dynamic View
----------------------------------------------------- */
.documentLinks {
  margin: 5px 0px 0px 0px;
  padding: 0px;
}

.documentLinks li {
  display: inline;
  list-style: none;
  padding: 0px 20px 0px 0px; 
}
.oipLabel{font-weight:bold;margin-bottom:1rem;}
/* shown when account isn't enrolled, provides link to enroll for e-statement' */

.consentOption {
    list-style: none; padding:0;
}
.consentOption a:before{font-family: "Font Awesome 5 Free"; font-weight: 900;content: "\f14a";color: #ff8800 ; font-size: 150%;
    margin-right: 0.5em;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;}
/* end Search Results

/* == Error Pages ==  */
/*  error.jsp; expired.jsp; 404.jsp; loggedOff.jsp  */ 

.errorContainer{display:flex;align-items:center;height:100%;}
.cardError{width:75%;margin:auto;}
.card-header{}

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        .cardError{min-width:80%;}
    }
    @media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
        .cardError{min-width:50%;}
    }
    @media only screen and (min-device-width : 1024px)  {
        .cardError{min-width:50%;}
    }
     


/* END PAGES */

/* ======= BOOTSTRAP overrides and additions ======= */
/* forms */
/*.form-control{max-width:50ch;}*/ /* setting the max width on form-control prevents the default behavior of sizing to 100% of container, but using the CSS value for Character Width means this sizes propportionally for font displayed */
/* adds a link below and positioned right, below a form control input. Uses <p> to contain the <a> */
.form-sublink{text-align:right;margin-top:.5rem;}

/* cards */
/* container to hold cards and separate them */
.card-container{}
    .card-container .card{margin-bottom:1rem;margin-right:1rem;}
/* display proper pointer on items that collapse sections */
[data-toggle="collapse"] {cursor:pointer;}
.iCollapse{float:right;}
.headCollapse[aria-expanded="false"] .iCollapse:before {content:"\f078"}
.tab-content{padding:1rem; background-color:#ffffff;}
/* table changes */
body.themeable table.table a{color:#0275d8;font-weight:bold;text-transform:capitalize;}
/* alerts and warning */
body.themeable .alert.alert-warning {color:#ff8800;}
body.themeable .listClear.alert {padding: 0.75rem 1.25rem; margin-bottom: 1rem;}

/* responsive layout of table for mobile*/
@media only screen and (max-device-width:480px)
{
    .table-responsive.table-card .table{}
    .table-responsive.table-card .table thead{display:none;}
    .table-responsive.table-card .table tr{display:block;border:1px solid #aaa;margin-bottom:10px;}
    .table-responsive.table-card .table tr th{display:block;text-align:left;padding:.5rem;border-bottom:solid 1px #ddd;text-align:right;}
    .table-responsive.table-card .table td{display:block;text-align:left;padding:.5rem;border:none;}
    .table-responsive.table-card .table td::before{}
    
}

/* responsive text sizing */
body.themeable {font-size:.9rem;}

  body.themeable .h1-responsive {
    font-size: 150%; }
  body.themeable .h2-responsive {
    font-size: 130%; }
  body.themeable .h3-responsive {
    font-size: 120%; }
  body.themeable .h4-responsive {
    font-size: 100%; }
  body.themeable .h5-responsive {
    font-size: 100%; }

@media (min-width: 576px) {
  body.themeable .h1-responsive {
    font-size: 150%; }
  body.themeable .h2-responsive {
    font-size: 125%; }
  body.themeable .h3-responsive {
    font-size: 110%; }
  body.themeable .h4-responsive {
    font-size: 100%; }
  body.themeable .h5-responsive {
    font-size: 100%; } }

@media (min-width: 768px) {
  body.themeable .h1-responsive {
    font-size: 150%; }
  body.themeable .h2-responsive {
    font-size: 130%; }
  body.themeable .h3-responsive {
    font-size: 120%; }
  body.themeable .h4-responsive {
    font-size: 100%; }
  body.themeable .h5-responsive {
    font-size: 100%; } }

@media (min-width: 992px) {
  body.themeable .h1-responsive {
    font-size: 150%; }
  body.themeable .h2-responsive {
    font-size: 130%; }
  body.themeable .h3-responsive {
    font-size: 120%; }
  body.themeable .h4-responsive {
    font-size: 100%; }
  body.themeable .h5-responsive {
    font-size: 100%; } }

@media (min-width: 1200px) {
  body.themeable .h1-responsive {
    font-size: 150%; }
  body.themeable .h2-responsive {
    font-size: 130%; }
  body.themeable .h3-responsive {
    font-size: 120%; }
  body.themeable .h4-responsive {
    font-size: 100%; }
  body.themeable .h5-responsive {
    font-size: 100%; } }

/* Fiserv Theme Colors */
/* site allows for white-label branding for clients --- custom colors and logos applied to the UI --- these are the default settings for a Fiserv theme */
/* the client brand theme is loaded in a separate jsp file (colorStyle.jsp)) */


/* Fiserv Primary color (orange) = hex#FF6600, RGB(255,102,0) */
/* Fiserv Secondary color (blue) = hex#6699CC, RGB(102,153,204) */

.navbar.default-color.primary-brand-color{background-color:#6699cc !important;} 
footer.page-footer.primary-brand-color{background-color:#6699cc !important;}

.disclosure-disagree-modal-buttons {text-align: center; padding: 0.5rem 1rem;}

.rediconcolor {color:red;}

.userProfileColumn {
    text-align: center;
}

/*Using a simple bar to create a hamburger icon to please IE.  If IE is not supported, we can use font awesome icon. */
.navbar-toggler {
    width: 47px !important;
}
.navbar-toggler .line {
    width: 100% !important;
    float: left !important;
    height: 2px !important;
    margin-bottom: 5px !important;
}
body .ui-input-icon-left,body .ui-input-icon-right {
    position: relative;
    display: inline;
}

.form-group .ui-autocomplete {
    cursor: default !important;
    position: relative !important;
    display: inline !important;
}

.clear-fields input{
    width: 100%;
}