body {
   background-color: var(--Accent3);
}

/* ********** sticky header ********** */
@media only screen and (min-width: 750px) {
   header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 2000;
   }
}


/* ********** FSA Badge ********** */
.FSABadge {
   position: absolute;
   right: 0;
   z-index: 1000;
}

@media only screen and (max-width: 999px) {
    .FSABadge {
        left: 0;
        right: unset;
    }
}

button,
input[type=button],
input[type=submit],
input[type=reset],
a.primary,
a.secondary,
a.learnMoreWhite,
a.learnMoreBlue {
   text-transform: none;
}


/* ************* site color updates ***************** */

/* ********** unordered list ********** */
ul.decorated li::before {
   color: var(--PrimaryColor1);
}

   /* ********** headings ********** */
   h1 {
      color: var(--PrimaryColor2);
   }
   h2 {
      color: var(--PrimaryColor1);
   }
   h3 {
      color: var(--SecondaryColor1);
   }

   /* ********* buttons ********** */
   button.primary, input[type=button].primary, input[type=submit].primary, input[type=reset].primary, a.primary {
      background-color: var(--PrimaryColor1);
      color: var(--PrimaryReverseColor1);
      border: 2px solid var(--PrimaryColor1);
   }

   button.secondary,
   input[type=button].secondary,
   input[type=submit].secondary,
   input[type=reset].secondary,
   a.secondary {
      background-color: var(--PrimaryReverseColor1);
      border: 2px solid var(--PrimaryColor1);
      color: var(--PrimaryColor1);
   }

      button.secondary:hover,
      input[type=button].secondary:hover,
      input[type=submit].secondary:hover,
      input[type=reset].secondary:hover,
      a.secondary:hover {
         -moz-box-shadow: inset 0 0 10px var(--PrimaryColor1);
         -webkit-box-shadow: inset 0 0 6px var(--PrimaryColor1);
         box-shadow: inset 0 0 10px var(--PrimaryColor1);
      }


/* **************************************** ACCORDIONS **************************************** */
.accordion .accordion-bar {
   background-color: var(--Accent1);
}

   .accordion .accordion-click:checked + label, .accordion .accordion-bar:hover {
      background-color: var(--PrimaryColor1);
      color: var(--PrimaryTextColor1);
   }

   .accordion .accordion-bar:after, .accordion .accordion-click:checked + .accordion-bar:after {
      background-color: var(--PrimaryColor1);
      color: var(--PrimaryTextColor1);
   }

   .accordion .accordion-bar:hover:after, .accordion .accordion-click:checked + .accordion-bar:after {
      background-color: var(--Accent1);
      color: var(--TextColor);
   }

.accordion-sub .accordion-bar:hover:after, .accordion-sub .accordion-click:checked + .accordion-bar:after {
   background-color: var(--Accent1);
}

.accordion-sub .accordion-bar:checked {
   border-bottom: 1px solid var(--Accent1);
}

/* if arrow accordion is embedded in regular accordion */
.accordion .accordion-arrow .accordion-bar,
.accordion .accordion-arrow .accordion-click:checked + label, .accordion .accordion-arrow .accordion-bar:hover,
.accordion .accordion-arrow .accordion-bar:after, .accordion .accordion-arrow .accordion-click:checked + .accordion-bar:after,
.accordion .accordion-arrow .accordion-bar:hover:after, .accordion .accordion-arrow .accordion-click:checked + .accordion-bar:after {
   background-color: transparent;
   color: var(--PrimaryColor1);
}


/* ************************************ TABS ********************************************* */

.tab_full_content .tab_row .tab_active,
.tab_full_content .tab_row .tab_inactive {
   border-left: 2px solid var(--PrimaryColor1);
   border-top: 2px solid var(--PrimaryColor1);
   border-right: 2px solid var(--PrimaryColor1);
}

.tab_full_content .tab_row .tab_active {
   color: var(--PrimaryColor1);
}

.tab_full_content .tab_row .tab_inactive {
   background-color: var(--PrimaryColor1);
}

.tab_full_content .tab_content {
   border: 2px solid var(--PrimaryColor1);
}

/* ************************************ ui-tabs ************************************ */

.ui-tabs .ui-tabs-nav li {
   background-color: var(--PrimaryColor1);
   background-image: none;
   border: 2px solid var(--PrimaryColor1);
}

   .ui-tabs .ui-tabs-nav li a {
      color: var(--PrimaryColor1);
   }

.ui-tabs .ui-tabs-panel {
   border-top: 2px solid var(--PrimaryColor1) !important;
   border-left: 2px solid var(--PrimaryColor1) !important;
   border-right: 2px solid var(--PrimaryColor1) !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
   color: var(--PrimaryColor1);
}

#tabs .heading-container-icon span.fa {
   color: var(--PrimaryColor1);
}


/* ************************************ icons ******************************************** */
.icon-container span.fa {
   color: var(--PrimaryColor1);
}

.loggedInHeader-right-account i.fa,
.loggedInHeader-right-account span.fa {
   color: var(--PrimaryColor1);
}

.loggedInHeader-logos-inner {
   padding-top: 0px;
}

/* ******************************** Special Messages ************************************** */
.specialMessagesResponsive .AccountNotifications {
   background-color: var(--Accent1);
}

   .specialMessagesResponsive .AccountNotifications hr.section {
      background-color: var(--PrimaryColor2);
   }


/* ***************************** ADA Navigation ****************************** */
.header-navigation,
ul[role="menubar"] {
   background-color: var(--PrimaryColor1);
   color: var(--PrimaryTextColor1);
}

   ul[role="menubar"] [role="menuitem"],
   ul[role="menubar"] [role="separator"] {
      background-color: var(--PrimaryColor1);
      color: var(--PrimaryTextColor1);
      border: 2px solid var(--PrimaryColor1);
   }


      ul[role="menubar"] [role="menuitem"]:focus,
      ul[role="menubar"] [role="menuitem"]:hover,
      ul[role="menubar"] [role="separator"]:focus,
      ul[role="menubar"] [role="separator"]:hover {
         box-shadow: inset 0 -3px 0 0 var(--Accent3);
      }

ul[role="menu"] a[role="menuitem"]:focus,
ul[role="menu"] a[role="menuitem"]:hover,
ul[role="menu"] [role="separator"]:focus,
ul[role="menu"] [role="separator"]:hover,
ul.level1[role="menu"] a[role="menuitem"]:focus,
ul.level1[role="menu"] a[role="menuitem"]:hover,
ul.level1[role="menu"] [role="separator"]:focus,
ul.level1[role="menu"] [role="separator"]:hover {
   background-color: var(--Accent3);
   box-shadow: none;
   color: var(--PrimaryColor1);
}


/* ************** link styles for MOHELA ******************* */
a:not(.primary):not(.secondary):not(.TimelyArticles-article):hover {
   text-decoration: underline;
}

.ui-tabs ul.ui-tabs-nav li.ui-tabs-tab a.ui-tabs-anchor {
   text-decoration: none;
}

.main-content .tab_full_content .tab_row a.tab_active,
.main-content .tab_full_content .tab_row a.tab_inactive {
   text-decoration: none;
}

a:not(.primary):not(.secondary):link,
a:not(.primary):not(.secondary):hover,
a:not(.primary):not(.secondary):visited,
a:not(.primary):not(.secondary):active {
   color: #0060AC;
}

.makeLink {
   color: #0060AC;
}

   .makeLink:hover {
      text-decoration: underline;
   }

.ui-tabs ul.ui-tabs-nav li.ui-tabs-tab[aria-selected="false"] a.ui-tabs-anchor {
   color: #FFFFFF;
}

.ui-tabs ul.ui-tabs-nav li.ui-tabs-tab a.ui-tabs-anchor {
   text-decoration: none;
}

.main-content .tab_full_content .tab_row a.tab_inactive {
   color: #FFFFFF;
}

.header-mohela-contactInfo .header-mohela-phone a:link {
   color: #FFFFFF;
}

.header-mohela-contactInfo .homepageButton {
   width: auto;
   min-width: 50px;
   height: 95%;
   border: none;
   border-radius: 0;
   color: #FFFFFF;
   padding: 0 0.75rem;
   text-transform: none;
}

   .header-mohela-contactInfo .homepageButton.login {
      background-color: blue;
   }

   .header-mohela-contactInfo .homepageButton.register {
      background-color: blue;
   }

.header-mohela-contactInfo .header-mohela-contactUs .header-mohela-phone a:link,
.header-mohela-contactInfo .header-mohela-contactUs .header-mohela-phone a:hover,
.header-mohela-contactInfo .header-mohela-contactUs .header-mohela-phone a:visited,
.header-mohela-contactInfo .header-mohela-contactUs .header-mohela-phone a:active {
   color: #FFFFFF;
}

.header-mohela .header-row .header-mohela-contactInfo .header-mohela-contactUs a {
   color: #FFFFFF;
}

.loggedInNav ul[role="menubar"] [role="menuitem"] {
   color: #FFFFFF;
}

   .loggedInNav ul[role="menubar"] [role="menuitem"]:hover {
      text-decoration: none;
   }


.PrimaryArticles-articles .PrimaryArticles-article a:link,
.PrimaryArticles-articles .PrimaryArticles-article a:hover,
.PrimaryArticles-articles .PrimaryArticles-article a:visited,
.PrimaryArticles-articles .PrimaryArticles-article a:active {
   color: #FFFFFF;
}

.footer-topics .footer-topics-column .footer-topics-column-list a,
.footer-topics .header-phone-hours .header-phone a,
.footer-firstRow .footer-bar .nmlsNumber a,
.footer-firstRow .footer-bar ul li a.footer-bar-link {
   color: #231F20;
}

.footer-firstRow .footer-bar a.footer-bar-link {
   font-size: 0.75rem;
}

footer .footer-firstRow {
   padding: 2rem 0 0.75rem 0;
   background-color: var(--Accent3);
}

footer .footer-firstRow hr.section {
   background-color: #e8e8e8;
}

footer .footer-topics h3 {
   color: #4D4D4B;
}


/* ********** Login box ************** */
button.accountAccessButton, #aaccountAccessButtonX {
   display: none;
}

.homepage-bannerLogin-loginBox {
   display: flex;
   border: 2px solid #326295;
   padding: 5px 0;

   width: 30%;
   top: 10%;
   bottom: auto;
   left: 0;
   right: 0;
/*   margin: 0 auto;*/
   margin: 0;
}

.homepage-bannerLogin-loginBox h2 {
   font-size: 1.5rem;
   margin-bottom: 5px;
}

.homepage-bannerLogin-loginBox h3 {
   font-size: 1.25rem;
   margin-bottom: 5px;
}

.homepage-bannerLogin-loginBox p {
   font-size: 0.9rem;
}

   .homepage-bannerLogin-loginBox a.primary {
      margin-bottom: 10px;
   }

.homepage-bannerLogin-loginBox .common-loginBox-links.homepage {
   margin-bottom: 0.75rem;
}

@media only screen and (max-width: 1250px) {
   .homepage-bannerLogin-loginBox { 
      margin-left: 1.5rem;
   }
}

@media only screen and (max-width: 1125px) {
   .homepage-bannerLogin-loginBox {
      width: 35%;
   }
}

@media only screen and (max-width: 1050px) {
   .homepage-bannerLogin-loginBox {
      margin-top: 1.5%;
   }
}

span.step-number {
   color: var(--PrimaryTextColor1);
   background-color: var(--PrimaryColor1);
}


@media only screen and (max-width: 1000px) {
   .homepage-bannerLogin-loginBox {
      width: 50%;
      left: 0;
      right: 0;
      bottom: auto;
      margin: 0 auto;
   }

   button.accountAccessButton {
      display: block;
      width: 14rem;
      min-width: 12rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5%;
      margin: 0 auto;
   }

   .homepage-bannerLogin-loginBox {
      display: none;
   }
}

@media only screen and (max-width: 775px) {

   .homepage-bannerLogin-loginBox {
      width: 75%;
   }

   .homepage-bannerLogin-loginBox h2 {
      font-size: 1.41rem;
   }

   .homepage-bannerLogin-loginBox a {
      font-size: 1rem;
   }

   .homepage-bannerLogin-loginBox input[type=submit],
   a.primary,
   a.secondary {
      margin: 5px 20px 10px 20px;
      padding: 5px;
      font-size: 1rem;
   }

   button.accountAccessButton {
      font-size: 0.9rem;
      width: 12rem;
   }
}

@media only screen and (max-width: 620px) {

   .homepage-bannerLogin-loginBox h2 {
      font-size: 1.25rem;
      margin-bottom: 5px;
   }

   .homepage-bannerLogin-loginBox input[type=submit],
   a.primary,
   a.secondary {
      margin: 5px 10px 10px 10px;
      font-size: 0.95rem;
   }

   .homepage-bannerLogin-loginBox {
      padding: 10px 0;
   }
}

@media only screen and (max-width: 525px) {

   .homepage-bannerLogin-loginBox h2 {
      font-size: 1.15rem;
   }

   .homepage-bannerLogin-loginBox input[type=submit],
   a.primary,
   a.secondary {
      margin: 5px 10px 5px 10px;
      font-size: 0.85rem;
   }

   .homepage-bannerLogin {
      height: 240px;
   }

}

@media only screen and (max-width: 455px) {

   .homepage-bannerLogin {
      height: 200px;
   }

   .homepage-bannerLogin-loginBox a.primary,
   .homepage-bannerLogin-loginBox a.secondary,
   button.accountAccessButton {
      font-size: 0.9rem;
      padding: 5px;
   }

   .homepage-bannerLogin-loginBox h2 {
      font-size: 1.05rem;
      margin-bottom: 0;
   }

   .homepage-bannerLogin-loginBox {
      width: 80%;
      margin: 0 auto;
      left: 0;
      right: 0;
      justify-content: space-between;
      padding-top: 5px;
      padding-bottom: 5px;
   }
}

@media only screen and (max-width: 340px) {

   .homepage-bannerLogin {
      width: 100%;
      margin: 0 auto;
   }

}

/* ********** timely arciles ********** */
.TimelyArticles-article {
   width: 23.5%;
}

@media only screen and (max-width: 850px) {
   .TimelyArticles-article {
      width: 48%;
   }
}

@media only screen and (max-width: 550px) {
   .TimelyArticles-article {
      width: 100%;
   }
}

/* 
   Auto Debit view form pages are formated a little different so the exit button needed 
   to be moved down a bit so it wasn't on top of the nav bar
*/
.viewForm-exit.autodebit {
   top: 235px;
}

/* ******* Pay By Loan ****** */
.flex-PBL-Header {
   border: 2px solid #0775BC;
   color: #0775BC;
}

.slider {
   border: 2px solid #0775BC;
}

   .slider:before {
      border: 2px solid #0775BC;
   }

   .slider.slider-checked {
      background-color: #0775BC;
   }

/* ******* footer ****** */
.nmlsNumber a {
   color: #00448A;
}


/* ****************** FSA Banner ************************ */

.fsaBanner-Container {
   background-color: #113C52;
   color: #FFFFFF;

   display: flex;
}

.fsaBanner {
   line-height: 19.2px;
   font-size: 12.8px;
   padding-top: 4px;
   padding-bottom: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: 'Noto Serif', Arial, sans-serif;
}

   .fsaBanner .fsaBanner-icon {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.5rem;
   }

.content-wrapper .fsaBanner a.fsaBanner-link {
   color: #FFFFFF;
   font-weight: normal;
   text-decoration: underline;
}

   .content-wrapper .fsaBanner a.fsaBanner-link:hover {
      color: #eeeeee;
   }

.fsaBanner span.fsaBanner-link-indicator {
   font-size: 0.9rem;
}

.fsaBanner span.fsaBanner-link-indicator::after {
   display: inline-block;
   content: "\f107";
   margin-left: 0.25rem;
   vertical-align: middle;
   color: #FFFFFF;
}

.fsaBanner span.fsaBanner-link-indicator.expanded::after {
   content: "\f106";
}


@media only screen and (max-width: 450px) {
   .fsaBanner {
      flex-direction: column;
      padding: 0.25rem 1rem;
   }

   .fsaBanner-content-logo {
      width: 290px;
   }
}

.fsaBanner-content-Container {
   background-color: #113c52;
   color: #FFFFFF;
   display: flex;
}

.fsaBanner-content {
   margin:0 5%;
   padding-top: 1rem;
   padding-bottom: 1rem;
}

.fsaBanner-content-logo {
   margin-bottom: 1rem;
}

.fsaBanner-content p.text {
   font-family: 'Noto Serif', Arial, sans-serif;
}

   .fsaBanner-content p.title {
      color: #FFFFFF;
      font-family: 'News Cycle Bold', Arial, sans-serif;
      font-size: 1.15rem;
   }


.fsaBanner-content-text {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

}


.fsaBanner-content-text-section {
   width: 50%;
   margin-right: 4rem;

   display: flex;
   flex-direction: row;
}

@media only screen and (max-width:700px) {
   .fsaBanner-content-text {
      flex-direction: column;
   }

   .fsaBanner-content-text-section {
      width: 100%;
      margin-bottom: 0.5rem;
   }
}

.fsaBanner-content-text-section img {
   margin-right: 1rem;
}

   .fsaBanner-content-text-section:last-child {
      margin-right: 0;
   }

.fsaBanner-content-Container .fsaBanner-content .fsaBanner-content-text-section a {
   color: #FFFFFF;
   font-weight: normal;
   text-decoration: underline;
}

.fsaBanner-content-Container .fsaBanner-content .fsaBanner-content-text-section a:hover {
   color: #eeeeee;
}




/* ********** dialog overlay background ********** */
.ui-widget-overlay {
   opacity: 0.7;
   background-color: #000000;
}