*, *:before, *:after {
    box-sizing: border-box;             /* IE8 and up, plus all others except the next two */
    -moz-box-sizing: border-box;        /* Firefox still needs this */
    -webkit-box-sizing: border-box;     /* iOS4 and below, Android 2.3 and below */
}

body {
    font-family: "UniversLTStd-Light";
    font-size: 16px;
    color: #353F45;
    margin: 0 auto !important;
}

/* a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
} */

/*	First color is primary for the section
    Pay (Green):       #007643 #00824a #009c58 #05af63 #5ebe7b #77c584
    Retire (Blue):     #215797 #2e6bb5 #447dbf #558dca #76aadc
    Health (Red):      #a62b2d #c23235 #dc393b #ed3e40 #f16062
    Income (Gray):     #858687 #969799 #aaacae #bcbec0 #d2d4d6 (welcome page graph shows bcbec0 for gray)
    WorkLife (Purple): #592c86 #66329a #7037a9 #7a3cb9 #8546c3 #8f56c8 #9965cd #a374d2 #ad84d7 #b893dc
    Extras (Yellow):   #f0ba19 #f2c02c #f3c63f #f4cc52 #f5d166 #f6d779 #f8dd8c #f9e29f #fae8b2
*/

h5 { font-weight: bold; }
p + h5 { margin-top: 20px; }        /* add spacing for small headers following a paragraph */

.benefitsDetail { margin: 20px 0; }
.benefitsDetail.centered { margin: 20px auto !important; }
.benefitsDetail th { padding: 10px; background-color: #eeeeee; text-align: center; }
.benefitsDetail th:first-child { text-align: left; }
.benefitsDetail td { padding: 5px 10px; text-align: center; border-bottom: 1px solid #cccccc; }
.benefitsDetail td:first-child { text-align: left; }

#termsConditions .modal-dialog {      /* modal window content */
    font-size: 12px;
    width: 900px;
}

.dropdown .active {
    /* background-color: #E2F4F7 !important; */
    background: #E2F4F7 !important;
}

.debug {
    font-size: 11px;
    color: red;
    font-weight: normal;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.debug span {
    font-weight: bold;
    color: black;
}

.debugBody {    /* for Debug toggle at top of page - turns on display of Content Block KeyNames */
    font-weight: bold;
    color: red;
}

.grayPill {
    background-color: #CCC !important;
}
.grayPillText {
    color: #CCC !important;
}
.alink {
    cursor: pointer;
}
a {
    color: #00338e !important;
}

.pad0l       { padding-left:   0 !important; }
.pad0r       { padding-right:  0 !important; }
.pad0b       { padding-bottom: 0 !important; }
.pad15l      { padding-left:   15px !important; }
.pad15r      { padding-right:  15px !important; }
.pad15t      { padding-top:    15px !important; }
.pad15b      { padding-bottom: 15px !important; }
.pad20l      { padding-left:   20px !important; }   /* needed on home page Hello box only */
.pad5l       { padding-left:   5px !important; }   /* needed on home page Hello box only */


.pad50R      { padding-right:   50px !important; }
.pad60R      { padding-right:   60px !important; }
.pad70R      { padding-right:   70px !important; }
.pad80R      { padding-right:   80px !important; }
.pad90R      { padding-right:   90px !important; }

.marg20      { margin:    20px; }
.margtop20   { margin-top:    20px; }
.margneg     { margin-top:    -20px; }
.marg0b      { margin-bottom: 0; }
.marg15b     { margin-bottom: 15px; }

.textCenter  { text-align: center; }
.textLeft    { text-align: left; }
.textRight   { text-align: right; }

.alignBottom { vertical-align: bottom !important; }

.nowrap      { white-space: nowrap; }
.noshow      { display: none; }

.fontBold    { font-weight: bold; }
.fontItal    { font-style: italic; }
.footnote    { font-size: 17px; font-style: italic; }

.homeGraphHeaderBig { font-size: 24pt; font-weight: bold; }
.homeGraphHeader    { font-size: 12px; line-height: 13px; margin-bottom: 10px; }

.aPageDetail {
    /* word-wrap: break-word;
    white-space: pre-wrap;; */
}
.impersonate {
    height: 45px;
    color: #ffffff;
    background-color: #ffa500;
    padding-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.3em;
}

.page-header {
	margin-top: 10px;
	margin-bottom: 0px;
    padding-bottom: 0px !important;     /* override Bootstrap */
    border-bottom: none !important;     /* override Bootstrap */
}

.page-header h3 { margin-top: 60px; }

.headerLogo {
    margin-top: -30px;
    max-width: 300px;
    height: auto;
    margin-bottom: 50px !important;
}
.headerLinks {
	font-size: 12px;
    padding-bottom: 10px;
    text-align: right;
    color: #00338e;
}
.headerLinks span {
	padding: 0px 5px;
}
.headerLinks a, .takeActionText a {
    color: #00338e;
}

.form-inline {
	margin-bottom: 10px;
}

.error {
	color: red;
}

.success {
	color: green;
}

.page-footer {
   
    margin: 0px -15px 0px -15px;
    /* background-color: #fcf2d6; */
    background-color: white !important;
    /* background-color: #f2f2f2; */
	font-size: 17px;
    line-height: 30px;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 20px;
}
.copyright {
    font-size: 10px;
}
.footerDivider  {
    border-top: 3px solid #D8D8D8;
    margin: 0px;
}
.footerLinks {
    font-size: 17px;
    cursor: pointer;
    color: #353F45 !important;
    text-align: center;
}
.footerCol {
    text-align: center;
    width: auto !important;
}
.footerFAQ {
    margin-right: 10px !important;
}
.footerLinkTitle {
    font-size: 29px;
    margin: 10px 0;
    color: #353F45;
}
.pagenav {
    height: 48px;
    color: white;
    font-size: 0.8em;
}

.pagenav .row {
    height: 48px;
}

html, .page-container {
    background-color: #fcf2d6;
    background-color: white;
}

.page-container > .container-fluid:first-child {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.page-container .page-bg {
    padding: 15px 15px 0 15px;      /* keep bottom of background flush with footer in case we want colored bg */
    background-color: #fcf2d6;
    background-color: white;
}
.page-body, .bodyPanel {
    background-color: white;
}

.graphPanel {
    min-height: 600px;  /* to change bar height see .graph in chart.css */
    text-align: left;
    padding-left: 15px;
    padding-top: 20px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12pt;
    background-color: #e6e7e8;
}

.bannerImage {
    position: relative;
    width: 100%;
}
.bannerImage img {
    opacity: 0.7;
}
.bannerText {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 32px;
    line-height: 34px;
    font-weight: bold;
    top: 86px;
}

.colCentered {
    float: none;
    margin: 0 auto;
}

.stkPriceWrapper { padding: 0 10px; width: 100%; font-size: 12px; }

.bodyPanel {
    padding: 20px;
    font-size: 20px;
    color: #353F45;
}

.bodyTitle {
    font-size: 32px;
    font-weight: normal;
    color: #353F45;
    width: 100%;
    padding-bottom: 10px;
    text-transform: uppercase;
    /* border-bottom: 4px solid black; */
}
.bodySubTitle {
    font-size: 18px;
    font-weight: normal;
}
.bodySubTitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}
.bodyMain {
    padding-top: 20px;
    font-size: 20px;
}

    /*****************
        Navbar 
    ******************/

#navbar {
    /* background-color: #215797; */
	width: 100%;
	border: 0;
	border-radius: 0;
	margin: 0;
}

.navbarAccess {
    height: 48px;
    padding-top:  15px;
    padding-left: 20px;
}

.navbar-nav.nav-justified > li {	/* turn off float so navbar-nav and nav-justified coexist */
    float:none;
    padding: 0;
}

.nav > li {
	color: white !important;
    vertical-align: middle;
    /* background-color: transparent; */
    line-height: 16px;;
}

.menu-printStatement, .menu-logout {
    color: white !important;
}
.dropdown-menu > li > a {
    color: white !important;
}
.aPageDetail.trs-learnMore-button.trs-learnMore-label:hover {
    color: white !important;
}

.nav > li > a {		/* major nav elements */
	color: #353F45 !important;
	font-size: 17px;
	text-align: center;
	white-space: nowrap;
    margin-bottom: 0;
    /* background-color: transparent; */
   
}

.navbar-nav li.current,         /* currently selected nav section */
.nav > li > a:hover,
.nav > li:hover {	            /* default hover state for major nav elements */
      /* background-color: #1a4577; darker blue for hover */   
    /* background-color: transparent; */    
    cursor: pointer;
}
.menuOpenClose {
    position: absolute; 
    right: 20px;
    z-index: 1000;
    color: white;
    font-size: 24px;
    top: 5px;
}

.nav > li:hover {	            /* default hover state for major nav elements */
    /* background-color: #1a4577; darker blue for hover                 */
    background-color: #E2F4F7; 
}
.nav > li > a:hover {
    /* background-color: transparent; */
}
/* tony E2F4F7*/

.dropdown:hover .dropdown-menu {	/* display submenu on hover */
    display: block;
    background-color: #23ACC4;
}
.nav-itemPrintLogout {
    display: none !important;
}
.dropdown-menu {	/* subnav menu styles */
	margin: 0px;
	border: none;
	border-radius: 0;
    width: 100%;
    background-color: #23ACC4;
    padding: 8px;
    margin-top: 0px;
}

.dropdown-menu > li {
    margin: 10px 0;
}
.dropdown-menu > li > a {	/* subnav menu elements */
    color: white;
    /* background-color: transparent; */
	/* white-space: nowrap; */
    font-size: 13px;
    line-height: 18px;

}
.dropdown-menu > li > a:hover {
    background-color: #23ACC4;
}
.centerLogo {
    width: 100%;
    padding: 10px 20px;
    cursor: pointer;
}
.centerLogo:hover {
    /* background-color: #1a4577;   */
    /* darker blue for hover */
}


.equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.equal > [class*='col-'] {
    display: flex;
    flex-direction: column;
}



    /*****************
        Take Action
    ******************/

 /* If you want the entire TA box text to be clickable, surround the takeActionTitle and takeActionText divs
  * with a single <a href=''>...</a> and uncomment the following lines so the box text shows no underline/blue
  * text unless there is another link embedded in it (#337ab7 is the Bootstrap std link color)
  *     .takeActionBox a       { text-decoration: none;      color: inherit; }
  *     .takeActionBox a div a { text-decoration: underline; color: #337ab7; }
  */

.takeActionContent { display: none; }

.takeAction {
    margin-top: 20px;
    position: relative;
}
.takeActionBox {

}
.takeActionIcon {
    position: absolute;
    top: -18px;
    left: 43%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.takeActionIcon img {
    width: 22px;
    height: 22px;
    margin-top: 6px;
    margin-left: 7px;
}



#home     .takeActionIcon      { background-color: #858687; }
#home     .Pay .takeActionIcon { background-color: #007643; }
#home     .Ret .takeActionIcon { background-color: #215797; }
#home     .Hlt .takeActionIcon { background-color: #a62b2d; }
#home     .Inc .takeActionIcon { background-color: #858687; }
#home     .Wkl .takeActionIcon { background-color: #592c86; }
#home     .Ext .takeActionIcon { background-color: #f0ba19; }
#pay      .takeActionIcon { background-color: #007643; }
#retire   .takeActionIcon { background-color: #215797; }
#health   .takeActionIcon { background-color: #a62b2d; }
#income   .takeActionIcon { background-color: #858687; }
#worklife .takeActionIcon { background-color: #592c86; }
#extras   .takeActionIcon { background-color: #f0ba19; }

#home     .takeActionIcon img { margin-top: 7px; }   /* icons need to be lower */
#health   .takeActionIcon img { margin-top: 8px; }   /* icons need to be lower */

#home     .takeActionBox  { border-color: #858687; }
#home     .takeActionBox.Pay  { border-color: #007643; }
#home     .takeActionBox.Ret  { border-color: #215797; }
#home     .takeActionBox.Hlt  { border-color: #a62b2d; }
#home     .takeActionBox.Inc  { border-color: #858687; }
#home     .takeActionBox.Wkl  { border-color: #592c86; }
#home     .takeActionBox.Ext  { border-color: #f0ba19; }
#pay      .takeActionBox  { border-color: #007643; }
#retire   .takeActionBox  { border-color: #215797; }
#health   .takeActionBox  { border-color: #a62b2d; }
#income   .takeActionBox  { border-color: #858687; }
#worklife .takeActionBox  { border-color: #592c86; }
#extras   .takeActionBox  { border-color: #f0ba19; }

.panelLanding {
    min-height: 350px;
    margin-top: 1rem;
}

.panelDetail {
    display: none;
}

.divDetail  {
    display: none;
    min-height: 290px;
}   
.divTitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}

    /*****************
        Media: Bootstrap grid: lg>1200, md>992, sm>768, xs<768
    ******************/

@media (max-width: 1200px) {
    .bannerText              { top: 40px; }
}

@media (max-width: 991px) {
    /*
    .nav > li.active         { border-bottom: 0; }        /* active tab - turn off bottom border and add left border
    */
    .nav > li > a            { white-space: normal; }
    ul.nav                   { margin: 0; }               /* no margin so spans full width on hover */
    .navbar-toggle           { background-color: white; }  /* toggle menu icon that shows in small viewports */
    .navbar-toggle .icon-bar { background: #1896CF; }
    .bannerText              { top: 50px; }
    .graphPanel              { padding-left: 30%; }
    #termsConditions .modal-dialog { width: 700px; }      /* modal window content */
}

@media (max-width: 767px) {
    .graphPanel              { padding-left: 20%; }
    .takeActionIcon          { left: 47%; }
    .dropdown:hover .dropdown-menu {    /* hide submenu on hover - small devices */
        display: none;
        
    }
    .navbar-collapse.in { /* overflow-y: visible; */ }      /* for small viewports (ignored by display:none for now) */
    .dropdown-menu > li > a { text-align: center; }         /* center dropdown elements */
    #termsConditions .modal-dialog { width: 600px; }      /* modal window content */
}

@media (max-width: 650px) {
    .bannerText              { font-size: 24px; line-height: 28px; }
    #termsConditions .modal-dialog { width: 500px; }      /* modal window content */
}

@media (max-width: 580px) {
    .bannerText { top: 30px; }
    #termsConditions .modal-dialog { width: 400px; }      /* modal window content */
}
@media (max-width: 500px) {
    .bannerText { top: 20px; }
    .page-container .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
    #termsConditions .modal-dialog { width: 400px; }      /* modal window content */
}


@media (min-width: 768px) {
    .page-container > .container-fluid:first-child {  width: 750px; width: 100%; }
}

@media (min-width: 992px) {
    .page-container > .container-fluid:first-child { width: 970px; width: 100%; }
}

@media (min-width: 1200px) {
    .page-container > .container-fluid:first-child { width: 1170px; width: 100%; }
}


.nav-itemhome {
    display: none;
}
.menuX {
    background: url('/assets/img/menuX.png') no-repeat !important;
    width: 48px;
    height: 66px;
    margin-right: -10px;
    margin-bottom: -22px;
    margin-top: -20px;
}
.menuHamburger {
    background: url('/assets/img/menuHamburger.png') no-repeat !important;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0px;
    margin-bottom: -22px;
    margin-top: -20px;
}

.mobileOnly {
    display: none;
}
/** NEW 2020 CSS **/
.gdcContainer {
    padding: 0px !important;
}

.welcomePanel {
    background: #E2F4F7;
    color: #353f45;
    font-family: "UniversLTStd-Light";
    font-size: 24px;
    padding: 20px 0 !important;
    /* margin-top: 20px; */
}
.barTRS {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
}
#trs-main-image,
#trs-main-image-div,
.trs-center-content,
.trs-center-text {
    text-align: center;
}

.trs-center-content a:hover{
    text-decoration: none !important;
}
.trs-learnMore-label:hover, .trs-button:hover, .trs-back-button:hover {
    text-decoration: none !important;
}
.trs-learnMore-value {
    display: none;;
}
.trs-menu-style {
    color: #353f45;
    font-family: "UniversLTStd-Light";
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0.25px;
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
    text-transform: uppercase;
}

.barValueBelow {
    display: none;
}
.trs-salutation {
    color: #353f45;
    font-family: "UniversLTStd-Light";
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
}
.trs-home-body {
    font-size: 24px;
}
#trs-main-image {
    background: #f6f6f6;
}
#trs-blue-top-bar {
    height: 30px!important;
    background: #00338e;
}
.navbar-right {
    float: right!important;
    margin-right: 65px;
}
.navbar-light .navbar-nav .active > .nav-link,
/* .navbar-light .navbar-nav .nav-link.active, */
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    /* background-color: transparent; */
    padding-left: 10px;
    padding-right: 10px;
}
.navbar.navbar-light.navbar-expand-md {
    margin-bottom: -8px;
    margin-top: -50px;
}
#trs-main-image-div-2 {
    height: 150px;
    background-color: #000;
}
#top-blue-div {
    background: #00338e;
    height: 30px;
    display: block;
}
.container.white-container {
    background: #fff;
}
.trs-title-text {
    text-transform: uppercase;
    width: 656px;
    height: 32px;
    color: #353f45;
    font-family: "UniversLTStd-Light";
    font-size: 32px;
    font-weight: 400;
    line-height: 43px;
}
.trs-asof-text {
    color: #353f45;
    font-family: "UniversLTStd-Light";
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.trs-button-effect {
    font-size: 18px;
    font-weight: bold;
    padding-top: 6px;
    /* padding-left: 15px; */
    text-align: left;
    width: 100%;
    height: 38px;
    line-height: 30px;
    border-radius: 19px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    z-index: 1000;
    padding-left: 15px;
}
.trs-underneath-text {
    font-family: "UniversLTStd-Light";
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    letter-spacing: 0.03px;
    /* margin-left: 20px; */
    text-transform: uppercase;
    margin-top: 5px;
    text-align: left;
    padding-left: 15px;
}
.card.trs-card-style {
    border: none !important;
    border-radius: 0 !important;
    color: #353F45;
    background-color: #F6F6F6;;
    letter-spacing: 0;
    text-align: left;
    line-height: 28px;
    /* min-height: 300px !important; */
    margin-bottom: 20px;
}

.trs-card-body {
    padding: 10px !important;
}
.takeActionTitle {
    padding-top: 10px;
    padding-bottom: 0px;
    font-size: 23px;
    text-transform: uppercase;
}
.takeActionText {
    font-size: 16px;
    margin-bottom: 10px;
    /* padding-bottom: 50px !important; WCSSC-995 remove the Go Now buttons */
}

.takeActionButtonHidden {
    display: none !important; /* WCSSC-995 remove the Go Now buttons */
}

.card.takeActionText.a {
    display: none !important; /* WCSSC-995 remove the Go Now buttons */
}

.takeActionButton, .takeActionButton:hover {
    font-size: 19px;
    position: absolute;;
    bottom: 20px;
    right: 20px;
    width: 100%;
    height: 39px;
    width: 157px;
    color: white !important ; /* #fff; */
    background-color: #00338E;
    border-color: #00338E !important;
    float: right;
    text-align: center;
    border-radius: 0 !important;
    cursor: pointer;
}

.trs-learnMore-button, .trs-back-button {
    background: #F6F6F6;
    border-radius: 32px;    
    height: 60px;
    width: 100%;
    margin-left: 10px 10px;
    padding-right: 10px;
    cursor: pointer;
    /* background-image:url('/assets/img/arrow-right.png'); 
    background-repeat: no-repeat;
    background-position: 98% 50%; */
    z-index: 1000;

}

.arrow-right {
    z-index: 1000;
    margin-right: 20px;
    margin-top: 20px;
}

/* .aPageDetail.trs-learnMore-button:hover {
    background: red;
    opacity: .99;
} */


.trs-back-button {
    background-image:url('/assets/img/arrow-left.png'); 
    background-repeat: no-repeat;
    background-position: 10% 50%;
    width: 150px;
}

/* .trs-learnMore-button:hover {
    background: #E2F4F7;
} */

.trs-learnMore-title {
    font-size: 24px;
    color: #353F45;
    text-transform: uppercase;
}
.trs-learnMore-label, .trs-back-label {
    font-size: 24px;
    color: #353F45 !important;
    padding-left: 30px;
    line-height: 60px;
    display: inline-block;
    margin: 5px 0;
}
.trs-back-label {
    text-align: right;
    padding-right: 20px;
}