/* common styles for the site content pages */

@media screen {
   .onlyPrint {
      display: none;
   }
}

   /* **************************************** ADA compliance **************************************** */
   #skipToMainContent a {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
   }

      #skipToMainContent a:focus {
         position: static;
         width: auto;
         height: auto;
      }

   .readerText {
      position: absolute !important;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
      background: #FFFFFF;
      color: black;
   }

a:active, a:focus, input:active, input:focus, textarea:active, textarea:focus {
   outline-color: #05361F;
   outline-style: solid;
   outline-width: 2px;
}

label.accordion-bar:focus {
   outline-color: #231F20;
   outline-style: dotted;
   outline-width: 1px;
}

   table.responsiveTable.alternatingBG tr.even td {
      background-color: #EEEEEE;
   }

.common-loginBox-links {
   font-size: 0.9rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0 20px 16px 20px;
}

.common-loginBox-links {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.common-loginBox-links.homepage {
   font-size: 1rem;
   margin: 0 20px 16px 20px;
}

@media only screen and (max-width: 600px) {
   .common-loginBox-links.homepage {
      margin: 0 10px 10px 10px;
   }

   .common-loginBox-links.homepage a {
      font-size: 0.9rem;
   }
}

@media only screen and (max-width: 500px) {
   .common-loginBox-links.homepage {
      flex-direction: column;
   }

   .common-loginBox-links.homepage a:first-child {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
   }
}

.common-loginBox-links.loginPage {
   font-size: 0.9rem;
   margin: 0 0 0.5rem 0;
   min-width: 100%;
   width: 100%;
}

.login-loginBox a.loginBox-buttons {
   min-width: 0;
   width: auto;
   margin: 5px 0 10px 0;
}

@media only screen and (max-width: 375px) {
   .common-loginBox-links.loginPage {
      flex-direction: column;
   }

      .common-loginBox-links.loginPage a:first-child {
         margin-bottom: 0.3rem;
      }
}

/* ************************************* Responsive Image ******************************** */
.responsiveImage {
   max-width: 100%;
   height: auto;
}

   /* **************************************** BUTTONS **************************************** */
   button,
   input[type=button],
   input[type=submit],
   input[type=reset],
   a.primary,
   a.secondary,
   a.learnMoreWhite,
   a.learnMoreBlue {
      border-radius: 2px;
      padding: 0.5rem;
      font-size: 1.1rem;
      cursor: pointer;
      font-weight: bold;
      text-transform: uppercase;
      min-width: 20rem;
   }

      button.primary,
      input[type=button].primary,
      input[type=submit].primary,
      input[type=reset].primary,
      a.primary {
         background-color: #0775bc;
         color: #ffffff;
         border: 2px solid #0775bc;
      }

         button.primary:hover,
         input[type=button].primary:hover,
         input[type=submit].primary:hover,
         input[type=reset].primary:hover,
         a.primary:hover {
            -moz-box-shadow: inset 0 0 10px #FFFFFF;
            -webkit-box-shadow: inset 0 0 8px #FFFFFF;
            box-shadow: inset 0 0 10px #FFFFFF;
         }

      button.secondary,
      input[type=button].secondary,
      input[type=submit].secondary,
      input[type=reset].secondary,
      a.secondary {
         background-color: #FFFFFF;
         border: 2px solid #0775bc;
         color: #0775bc;
      }

         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 #0775bc;
            -webkit-box-shadow: inset 0 0 6px #0775bc;
            box-shadow: inset 0 0 10px #0775bc;
         }

   a.learnMoreWhite {
      background-color: #FFFFFF;
      color: #231F20;
      border: 2px solid #231F20;
      padding-left: 15px;
      padding-right: 25px;
   }

      a.learnMoreWhite:hover {
         -moz-box-shadow: inset 0 0 10px #231F20;
         -webkit-box-shadow: inset 0 0 6px #231F20;
         box-shadow: inset 0 0 10px #231F20;
      }


   a.learnMoreBlue {
      background-color: #0576BC;
      color: #FFFFFF;
      border: 2px solid #FFFFFF;
      padding-left: 15px;
      padding-right: 25px;
   }

      a.learnMoreBlue:hover {
         -moz-box-shadow: inset 0 0 10px #FFFFFF;
         -webkit-box-shadow: inset 0 0 6px #FFFFFF;
         box-shadow: inset 0 0 10px #FFFFFF;
      }


button.addItem,
input[type=button].addItem,
input[type=submit].addItem {
   min-width: 12rem;
}

   button.ui-datepicker-trigger {
      min-width: 0;
   }

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

      button,
      input[type=button],
      input[type=submit],
      input[type=reset],
      a.primary,
      a.secondary,
      a.learnMoreWhite,
      a.learnMoreBlue {
         min-width: 0;
      }
   }

   /* ********** button containers ********** */
   .button-container {
      margin: 40px 0 25px 0;
      display: flex;
   }

      .button-container.additional {
         margin-top: 25px;
      }

      .button-container > * {
         margin-right: 20px;
      }

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

      .button-container.three-buttons {
         flex-direction: column;
         max-width: 25rem;
      }

         .button-container.three-buttons > * {
            margin-bottom: 20px;
            margin-right: 0;
         }

      .button-container.four-buttons {
         flex-direction: column;
         max-width: 20rem;
      }

         .button-container.four-buttons > * {
            margin-bottom: 16px;
            margin-right: 0;
         }
   }

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

      .button-container.two-buttons {
         flex-direction: column;
         max-width: 25rem;
      }

         .button-container.two-buttons > * {
            margin-bottom: 20px;
            margin-right: 0;
         }
   }

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

      .button-container.one-button {
         flex-direction: column;
         max-width: 25rem;
         min-width: 0;
      }

         .button-container.one-button > * {
            min-width: 0;
         }
   }

   /* ******** icon container ************* */
   .icon-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 1.25rem;
      margin: 0.5rem 0 0.25px 0;
   }

      .icon-container.icons-large span.fa {
         font-size: 1.9rem;
      }

      .icon-container > * {
         margin-right: 20px;
      }

      .icon-container a:hover,
      .icon-container a:link,
      .icon-container a:visited,
      .icon-container a:active {
         color: #0775bc;
      }

      .icon-container.in-table {
         margin: 0;
      }

         .icon-container.in-table a {
            margin: 0 auto;
         }


      .icon-container.messages span.fa {
         color: #007772;
      }
   /* ************** heading container with icon ************** */
   .heading-container-icon {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
   }

      .heading-container-icon .icon-container {
         margin-top: 0;
      }

   /* **************** images *************** */
   .img-center img {
      display: block;
      width: 100%;
      margin: 0 auto;
   }

   /* ***************************************** Dialog boxes ************************************* */

   /* ********** review dialogs ********** */
   .reviewDialog {
      font-size: 0.9rem;
   }

   @media only screen and (max-width:500px) {
      .reviewDialog {
         font-size: 0.8rem;
      }
   }

   /* ---------- Styling for Session Timeout Dialog ---------- */

   .ui-widget-content {
      background: #ffffff url(/images/icons/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
      left: 0;
      margin: 0 auto;
   }


   /* border around dialog box*/
   .ui-dialog.ui-widget-content.ui-widget {
      border: 3px solid #0775bc;
   }


   /* dialog box header/titlebar */
   .ui-dialog .ui-widget-header {
      background-image: none;
      background-color: #0775bc;
      color: white;
      font-family: Verdana,Arial,sans-serif;
      font-size: 1.1em;
   }

   /* button styles in dialog to match "twoColorButton" styles */
   .ui-dialog-buttonset .ui-button-text,
   .ui-dialog .ui-dialog-buttonpane button {
      background-color: #0775bc;
      /*background-image: linear-gradient(to bottom, #005734 0%, #06311D 100%);/* this will keep the height of <a> tags and buttons consistent; supported in IE8+ and all other browsers */
      border: 1px solid #000;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      color: White;
      font-family: PTSansBold, sans-serif;
      font-size: 13px;
      font-weight: normal;
      height: auto;
      line-height: 23px;
      padding: 0 1em;
      text-align: center;
      text-shadow: 1px 1px 1px #001106;
      text-transform: uppercase;
      -o-box-sizing: border-box;
      -icab-box-sizing: border-box;
      -khtml-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

   .ui-dialog-buttonset {
      width: 100%;
      display: flex;
      justify-content: space-between;
   }

   .ui-dialog .ui-dialog-buttonpane button {
      width: 46%;
      min-width: 0;
   }

   .ui-dialog-titlebar-close {
      min-width: 0;
   }

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

      .ui-widget-content {
         font-size: 0.9rem;
      }

      .ui-dialog .ui-dialog-buttonpane button {
         font-size: 0.9rem;
      }
   }

   /* ********** summary review dialog box ************ */
   .summaryReviewTable {
      width: 95%;
   }

      .summaryReviewTable th {
         text-align: left;
      }

   /* *************************************** radio button ******************************************** */
   /* *************************************** checkboxes ******************************************** */
   input[type='radio'],
   input[type='checkbox'] {
      float: left;
      height: 20px;
      width: 20px;
   }

      input[type='radio'] + label,
      input[type='checkbox'] + label {
         display: block;
         overflow: hidden;
         padding-left: 0.5rem;
         padding-right: 0.5rem;
         font-weight: normal;
      }

   table[role="radiogroup"] {
      border-collapse: separate;
      border-spacing: 0.5rem;
   }

   /* **************************************** Rating Scale ************************************** */
   /* uses radio buttons inside an outer div with class 'ratingScale'                              */
   .ratingScale {
      display: block;
      text-align: center;
      font-size: 0;
   }

      .ratingScale span {
         display: inline-block;
         box-sizing: border-box;
         padding: .3rem .8rem;
         font-size: 26px;
         font-weight: 500;
         width: 20%;
         background: #FFFFFF;
         color: #0775BC;
         border-top: 1px solid #0775BC;
         border-bottom: 1px solid #0775BC;
         border-right: 1px solid #0775BC;
      }

      .ratingScale label:first-child span {
         border-left: 1px solid #0775BC;
         border-top-left-radius: 0.15rem;
         border-bottom-left-radius: 0.15rem;
      }

      .ratingScale label:last-child span {
         border-top-right-radius: 0.15rem;
         border-bottom-right-radius: 0.15rem;
      }

      .ratingScale input[type='radio'] {
         display: none;
      }

         .ratingScale input[type='radio']:checked ~ span {
            background: #0775BC;
            color: #FFFFFF;
         }

      .ratingScale:hover {
         cursor: pointer;
      }


   /* ********************************************** Surveys **************************************************** */
   .survey {
      width: 95%;
   }

      .survey span.step-number {
         margin-right: 1rem;
      }

   .comments, .ratingScale-Container {
      width: 95%;
      margin-left: 2.5rem;
      margin-top: 0.5rem;
   }

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

      .comments, .ratingScale-Container {
         width: 100%;
         margin-left: 0;
      }
   }




   /* **************************************** ACCORDIONS **************************************** */
   .accordion-container {
      padding: 25px;
   }

       .accordion-bar {
         font-weight: 700;
         position: relative;
         padding: .5em 0 .5em 1em;
         padding-right: 2.5rem !important;
         margin-bottom: .5em;
         display: block;
         cursor: pointer;
         background-color: #DBFFFF;
         transition: background-color .15s ease-in-out;
      }

       .accordion-container .accordion-bar {
          font-weight: 700;
       }

      .accordion-click:checked + label, .accordion-bar:hover {
         background-color: #5BA0A3;
      }

      .accordion-bar:after, .accordion-click:checked + .accordion-bar:after {
         content: "+";
         position: absolute;
         display: block;
         right: 0;
         top: 0;
         width: 2em;
         height: 100%;
         line-height: 2.25em;
         text-align: center;
         background-color: #5BA0A3;
         transition: background-color .15s ease-in-out;
      }

      .accordion-bar:hover:after, .accordion-click:checked + .accordion-bar:after {
         background-color: #DBFFFF;
      }

   .accordion-click:checked + .accordion-bar:after {
      content: "-";
   }

   .accordion-click {
      display: none;
   }

   .accordion-content, .accordion-sub-content, .accordion-arrow-content {
      opacity: 0;
      height: 0;
      transition: opacity .5s ease-in-out;
      overflow: hidden;
      padding: 10px 15px;
      display: none;
   }

   .accordion-click:checked ~ .accordion-content, 
   .accordion-sub .accordion-click:checked ~ .accordion-sub-content,
   .accordion-arrow .accordion-click:checked ~ .accordion-arrow-content {
      opacity: 1;
      height: auto;
      display: block;
   }

   .accordion-sub .accordion-bar,
   .accordion-arrow .accordion-bar {
      background: none;
      font-weight: 600;
      padding: .5em 2em;
      margin-bottom: 0;    
   }

   .accordion-sub .accordion-bar {
      margin-bottom: 0.5rem;
   }

    .accordion-arrow .accordion-bar {
        padding: .5em 1.75em;
        color: #0060AC;
        font-weight: normal;
    }

/*    .accordion-arrow .accordion-bar:hover {
        text-decoration: underline;
    }*/

      .accordion-sub .accordion-bar:checked,
      .accordion-arrow .accordion-bar:checked {
         background: none;
         border-bottom: 1px solid #DBFFFF;
      }

      .accordion-sub .accordion-bar:after, 
      .accordion-sub .accordion-click:checked + .accordion-bar:after {
/*         left: 0;*/
         background: none;
      }

    .accordion-arrow .accordion-bar:after {
        font-family: FontAwesome;
        content: "\f107"; /* angle down */
        background: none;
    }

    .accordion-arrow .accordion-click:checked + .accordion-bar:after {
        background: none;
        font-family: FontAwesome;
        content: "\f106"; /* angle up */
    }


      .accordion-sub .accordion-click:checked + label, 
      .accordion-sub .accordion-bar:hover,
      .accordion-arrow .accordion-click:checked + label,
      .accordion-arrow .accordion-bar:hover {
         background: none;
      }

   .accordion-sub-content {
      padding: 1rem 1rem 1rem 2rem;
   }


    .accordion-arrow-content {
        padding: 1rem 1rem 0 2rem;
    }

    .accordion-arrow-content .accordion-arrow-content {
        padding-left: 4rem;
    }


   .accordion-arrow {
       min-height: 4rem;
   }

   .accordion-arrow .accordion-click.pageSection ~ .accordion-bar {
       font-size: 1.25rem;
   }

    .accordion-arrow .accordion-click.pageSection ~ .accordion-bar:after {
        font-size: 2rem;
    }

   .accordion-arrow .accordion-click.questions ~ .accordion-bar {
       font-size: 1rem;
   }

    .accordion-arrow .accordion-click.questions ~ .accordion-bar:after {
        font-size: 1.6rem;
    }

    .accordion-arrow .accordion-bar:after, .accordion-arrow .accordion-click:checked + .accordion-bar:after {
        top: -0.9rem;
    }

    .accordion-embedded.accordion-arrow .accordion-bar:after, .accordion-embedded.accordion-arrow .accordion-click:checked + .accordion-bar:after {
         top: 0;
      }

    .accordion-arrow-content .accordion-container {
        padding-top: 0;
    }

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

        .accordion-container.topLevel {
            padding-left: 0;
        }

        .accordion-arrow .accordion-click.pageSection ~ .accordion-bar {
            font-size: 1.1rem;
        }

        .accordion-arrow .accordion-click.questions ~ .accordion-bar {
            padding-left: 0;
        }

        .accordion-arrow-content .accordion-arrow-content {
            padding: 1rem 1rem 1rem 0;
        }
    }

    @media only screen and (max-width: 400px) {
        .headerBox h1 {
            font-size: 1.35rem;
        }

        .accordion-arrow .accordion-click.pageSection ~ .accordion-bar {
            font-size: 1.0rem;
        }
    }

    @media only screen and (max-width: 550px) {
        .accordion-arrow .accordion-container {
            padding-left: 25px;
        }
    }

/* **************************** header box *************************************** */
    .headerBox {
        height: 8rem;
        background-color: #0060AC;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .headerBox h1 {
            font-size: 2.5rem;
            font-weight: normal;
            color: #FFFFFF;
            margin: 0 3.5rem;
        }

    @media only screen and (max-width: 600px) {
        .headerBox {
            height: 6rem;
        }

            .headerBox h1 {
                margin-left: 2rem;
                font-size: 1.75rem;
            }


    }

   /* **************************** special message accordion ***************************** */
   .messageContainer .accordion-bar {
      display: flex;
      flex-direction: row;
   }

      .messageContainer .accordion-bar img {
         margin-right: 10px;
      }

      .messageContainer .accordion-bar h4 {
         margin-bottom: 0;
      }

   .messageContainer .accordion-sub-content {
      padding: .1875rem 1rem .1875rem 4rem;
   }

   .messageContainer .accordion-sub .accordion-bar:after,
   .messageContainer .accordion-sub .accordion-click:checked + .accordion-bar:after {
      left: 0;
   }


      /* 
   if there is no messagelong then the class NoMessageText will be applied to that special message.  In this
   case we want to hide the +/-, default the cursor, and not show evidence that a click event occurs if the 
   message title is clicked.
*/
      .messageContainer .accordion-sub-content.NoMessageText {
         display: none;
         margin-bottom: 0;
      }

   .messageContainer .accordion-bar.NoMessageText {
      cursor: text;
   }

      .messageContainer .accordion-bar.NoMessageText:after {
         content: "";
      }


   /* **************************************** LISTS *************************************************** */

   /* ************************ Common list ************************* */

   ul.spacedList li a {
      display: inline-block;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
   }

   ul {
      font-size: 1rem;
      list-style: none;
   }

      ul.largeText li {
         font-size: 1.35rem;
      }



      ul li {
         margin-bottom: 3px;
      }

      ul.spacedList li {
         margin-bottom: 0.5rem;
      }

      ul.list-columns, ol.list-columns {
         -moz-column-count: 2;
         -moz-column-gap: 60px;
         -webkit-column-count: 2;
         -webkit-column-gap: 60px;
         column-count: 2;
         column-gap: 60px;
      }

      /* ************************* Undecorated lists ************************* */
      ul.undecorated, ol.undecorated {
         list-style-image: none;
         list-style-type: none;
         padding: 0;
         margin: 1em 0;
      }

         ul.undecorated > li, ol.undecorated > li {
            padding: 0;
            background: none;
         }

   li.undecorated {
      list-style-image: none;
      list-style-type: none;
   }


   ul.undecorated.indent li, ol.undecorated.indent li {
      padding-left: 10px;
   }

   ul.undecorated.indentExtra li, ol.undecorated.indentExtra li {
      padding-left: 20px;
   }


   /* ************************* Decorated Lists ************************* */

   /* ***** ul bullet type and color ***** */
   ul.decorated li::before {
      content: "\25CF"; /* filled in circle (disc) */
      color: #008770;
      font-weight: bold;
      display: inline-block;
      width: 1rem;
      margin-left: -1.25rem;
   }

   ul.decorated ol li::before {
      content: ""
   }

   ul.decorated ul.decorated li::before {
      content: "\25CB"; /* circle */
   }

ul.decorated ul.decorated ul.decorated li::before {
   content: "\25AA"; /* square */
}


   ul.decorated.fancy-bullet {
      list-style-image: url(/images/graphics/fancy-bullet.png);
   }

   ul.decorated li p {
      display: inline;
   }

   ul.decorated, ol {
      list-style-position: outside;
      margin-left: 1rem;
   }

      ul.decorated li, ol li {
         vertical-align: top;
      }

      ul.decorated.indent {
         padding-left: 10px;
      }

      ul.decorated.indentExtra {
         padding-left: 20px;
      }

      /* ********************** ordered list ********************** */
      ol.indent {
         padding-left: 10px;
      }

      ol.indentExtra {
         padding-left: 20px;
      }

      ol.spacedList li {
         margin-bottom: 10px;
      }

      /* ******************** embedded list (nested list) *************** */
      ul.embeddedList,
      ol.embeddedList {
         margin-top: 7px;
      }


   /* ******************** sitemap and faqs ******************** */
   .catalog {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
   }

   .catalog-column {
      width: 45%;
   }

   .faqs-container {
      padding-left: 1em;
   }

   /*ul.faqMainSection {
    font-size: 1.5rem;
    font-weight: bold;
}

ul.faqSubSection {
    font-size: 1.25rem;
    font-weight: normal;
    padding-left: 20px;
}*/

   /* ********************************* faq links (links to faq pages ******************************* */
   .faqLink-right {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
   }

   @media only screen and (max-width: 500px) {
      .faqLink-right {
         justify-content: flex-start;
         margin-bottom: 0.5rem;
      }
   }


   /* ********************************* Show All Detail checkbox ************************************ */

   .gridOptionCheckbox {
      display: flex;
      align-items: center;
   }

      .gridOptionCheckbox input[type='checkbox'] + label {
         top: 0;
      }

   /* ****************************************** GROW *********************************************** */
   .grow5,
   .grow10,
   .grow15,
   .grow20 {
      transition: all .2s ease-in-out;
   }

      .grow5:hover {
         transform: scale(1.05);
      }

      .grow10:hover {
         transform: scale(1.1);
      }

      .grow15:hover {
         transform: scale(1.15);
      }

      .grow20:hover {
         transform: scale(1.20);
      }


   /* *************************************** text boxes ******************************************** */
   input[type='text'],
   input[type='password'],
   input[type='tel'] {
      padding: 0 4px;
      line-height: 25px;
      height: 29px;
      border: 2px solid #BFBFBF;
      border-radius: 4px;
   }

   textarea {
      width: 100%;
      margin-bottom: 20px;
      padding: 5px;
   }

   /* ********** turn off password reveal/clear ********** */
   input::-ms-reveal,
   input::-ms-clear {
      display: none;
   }

   .hideShowPassword {
      margin-left: 0.5rem;
      margin-top: 0.25rem;
      align-self: center;
      width: 20px;
   }



   /* *************************************** fieldset ***********************************************/
   fieldset {
      border: 1px solid #0075BE;
   }

   fieldset.noBorder {
      border: none;
   }

      fieldset legend {
         max-width: 75vw;
         padding: 0 0.5rem;
      }

      fieldset p {
         font-style: italic;
         padding: 0 0.75rem;
      }

      fieldset ul.decorated.indent {
         padding-left: 1rem;
      }

      fieldset ul li p {
         padding-left: 0;
      }


   /* *************************************** dropdowns ******************************************** */
   select {
      height: 29px;
      line-height: 25px;
      border: 2px solid #BFBFBF;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      padding-left: 4px;
      box-sizing: border-box;
      width: auto;
   }

      select option {
         padding: 0.4rem 0.4rem;
         font-size: 0.8rem;
      }

   /* ********** specific dropdowns ********** */
   .quickLinks {
      width: 175px;
   }

   /* ******************************************** UI Datepicker ************************************** */
   button.ui-datepicker-close {
      min-width: 0;
   }

   /* ******************************************** Account Selection control ************************** */
   .accountSelection-container {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      padding: 15px 10px 0px;
      border: 1px solid rgb(153, 153, 153);
      border-image: none;
      border-radius: 4px;
   }

   .accountSelection-dropdown {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
   }

      .accountSelection-dropdown label {
         margin-right: 20px;
      }

      .accountSelection-dropdown select {
         width: 45vw;
      }

   .accountSelection-message p {
      line-height: 1.25;
   }

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

      .accountSelection-dropdown {
         flex-direction: column;
         align-items: flex-start;
      }

         .accountSelection-dropdown select {
            width: 100%;
         }

         .accountSelection-dropdown label {
            margin-bottom: 5px;
         }
   }

   /* ****************************************** TEXTBOXES ******************************************** */
   .textbox-days {
      width: 40px;
   }

   .textbox-percentage,
   .textbox-short{
      width: 50px;
   }

   .textbox-shortSSN,
   .textbox-zip,
   .textbox-phoneExtension,
   .textbox-amount,
   .textbox-quantity,
   .textbox-formNumber {
      width: 100px;
      max-width: 100px;
   }

   .textbox-phone,
   .textbox-number,
   .textbox-date,
   .textbox-zip-extend,
   .textbox-suffix {
      width: 150px;
      max-width: 150px;
   }

   .textbox-username,
   .textbox-password {
      width: 250px;
      max-width: 250px;
   }

   .textbox-name,
   .textbox-email,
   .textbox-address,
   .textbox-city,
   .textbox-state,
   .textbox-county,
   .textbox-hint,
   .textbox-secAnswer,
   .textbox-website {
      width: 350px;
      max-width: 350px;
   }

   .textbox-signature {
      width: 450px;
      max-width: 450px;
   }


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

      .textbox-signature {
         width: 100%;
         max-width: 100%;
      }
   }

   /* *************************************** TABS **************************************************** */
   .tab_full_content {
      margin: 20px 0px 0px 0px;
      text-align: left;
   }

      .tab_full_content .tab_row .tab_active,
      .tab_full_content .tab_row .tab_inactive {
         -moz-border-radius-topleft: 4px;
         -webkit-border-top-left-radius: 4px;
         -khtml-border-top-left-radius: 4px;
         border-top-left-radius: 4px;
         -moz-border-radius-topright: 4px;
         -webkit-border-top-right-radius: 4px;
         -khtml-border-top-right-radius: 4px;
         border-top-right-radius: 4px;
         float: left;
         padding: 0.5em 1em;
         text-decoration: none;
         font-weight: bold;
         list-style: none outside none;
         white-space: nowrap;
         font-size: 100%;
         line-height: 1.3;
         border-left: 2px solid #0775bc;
         border-top: 2px solid #0775bc;
         border-right: 2px solid #0775bc;
         border-collapse: collapse;
         margin: 0px 2px 0px 0px;
         position: relative;
         top: 2px;
      }

      .tab_full_content .tab_row .tab_active {
         cursor: text;
         color: #0775bc;
         filter: none;
         text-shadow: none;
         border-bottom: none !important;
         background-color: white;
         z-index: 3;
         position: relative;
      }


      .tab_full_content .tab_row .tab_inactive {
         z-index: 1;
         position: relative;
         cursor: pointer;
         color: white;
         background-color: #0775bc;
      }

      .tab_full_content .tab_content {
         clear: both;
         border-collapse: collapse;
         padding: 10px 10px 10px 10px;
         border: 2px solid #0775bc;
         background-color: white;
      }

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

   .ui-tabs .ui-tabs-nav li {
      background-color: #0775bc;
      background-image: none;
      border: 2px solid #0775bc;
   }

      .ui-tabs .ui-tabs-nav li a {
         color: #FFFFFF;
      }

   .ui-tabs .ui-tabs-panel {
      border-top: 2px solid #0775bc !important;
      border-left: 2px solid #0775bc !important;
      border-right: 2px solid #0775bc !important;
   }

   .ui-tabs .ui-tabs-nav li.ui-tabs-active,
   .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
      color: #0775bc;
   }

   #tabs .heading-container-icon span.fa {
      color: #0775bc;
   }

   /* *************************************** Search Results page ************************************* */
   .searchResultsContainer {
      display: flex;
      flex-direction: column;
   }

      .searchResultsContainer h1 {
         margin-bottom: 1rem;
      }

   .searchTools {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 10px;
   }

      .searchTools > * {
         margin-right: 10px;
      }

   .searchResultsContainer .pager {
      margin-bottom: 25px;
   }

      .searchResultsContainer .pager .result-count {
         float: left;
      }
   /* ******************************************** Chat *********************************************** */
   .chat-slideout {
      position: fixed;
      bottom: 100px;
      right: -122px;
      z-index: 2;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      transition-duration: 0.3s;

      display: flex;
      width: 170px;
      cursor: pointer;
   }

      .chat-slideout:hover {
         right: 0;
      }
      .chat-slideout .chat-slideout-text {
         width:122px; 
         height: 48px; 
         border: 4px solid yellow; 
         background-color: #FFFFFF; 
         display: flex; 
         justify-content: center; 
         align-items: center; 
         font-size: 1.4rem; 
         font-weight:bold;
      }



      .searchResultsContainer .pager .page-list {
         float: right;
      }

   .searchResultsContainer .OutputTitle {
      font-size: 1.5rem;
   }

   .searchResultsContainer .output-footer {
      padding-top: 25px;
   }


   /* ******************************************** MISC *********************************************** */
   .ContentBorder {
      border: 2px solid #0075BE;
      padding: 10px;
      border-radius: 8px;
   }

   .Container {
      -webkit-border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
      -khtml-border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
      border: 2px solid #0075BE;
      position: relative;
      overflow: hidden;
      overflow-x: hidden;
      padding: 30px 14px 20px 14px;
   }

      .Container > * {
         margin-bottom: 10px;
      }

   .page-section {
      margin-bottom: 2.5rem;
   }

   .hide {
      display: none !important;
   }

   .makeLink {
      cursor: pointer;
   }

   .full-width {
      width: 100%;
   }

   .right {
      float: right;
   }

   span.step-number,
   span.tab-number {
      display: inline-block;
      width: 28px;
      min-width: 28px;
      height: 28px;
      /*font-size: 1.5rem;*/
      margin-right: 0.166rem;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      border-radius: 14px;
      color: white;
      background-color: #0775bc;
      line-height: 26px;
      text-align: center;
   }

   .label-tooltip .step-number-tooltip {
      width: 20px;
   }

   .indentAndCenterTable {
      width: 95%;
      margin: 0 auto;
   }

   /* ************************** user controls ************************************ */

   /* ********** File Upload ********** */
   .fileUpload {
      width: 500px;
      margin-bottom: 10px;
      height: 1.5rem;
   }

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


   /* ********** Progress Bar - responsive ********** */
   .responsiveProgressBar {
      margin-bottom: 25px;
   }

   ul.SteppedProgress {
      counter-reset: step;
      display: flex;
      margin: auto;
      overflow: hidden;
      padding: 0;
      position: relative;
      text-align: center;
      z-index: 1;
   }

   .SteppedProgress li {
      list-style-type: none;
      color: #404140;
      line-height: normal;
      text-transform: uppercase;
      flex: 1;
      font-size: 22px;
      position: relative;
      padding: 0 2%;
   }

      .SteppedProgress li.boxed span,
      .SteppedProgress li.current span {
         background: silver;
         border: 1px solid silver;
         color: var(--Accent3);
         display: inline-block;
         padding: 3px 6px;
         position: relative;
         margin: 0 -6px;
         width: 100%;
      }

         .SteppedProgress li.boxed span:after,
         .SteppedProgress li.current span:after {
            bottom: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255,255,255,0);
            border-bottom-color: silver;
            border-width: 10px;
            margin-left: -10px;
         }

      .SteppedProgress li.current span {
         background: var(--PrimaryColor1);
         color: var(--PrimaryTextColor1);
      }

         .SteppedProgress li.current span:after {
            border-bottom-color: var(--PrimaryColor1);
         }

      .SteppedProgress li.current.canHover span:hover {
         background: #b9cce5;
         border-color: var(--PrimaryColor1);
         color: var(--PrimaryColor1);
      }

         .SteppedProgress li.current.canHover span:hover:after {
            border-bottom-color: #b9cce5;
         }

      .SteppedProgress li.complete.boxed span {
         background: var(--PrimaryColor1);
         color: #FFF;
      }

         .SteppedProgress li.complete.boxed span:after {
            border-bottom-color: var(--PrimaryColor1);
         }

      .SteppedProgress li.complete.boxed.canHover span:hover {
         background: #95ff7c;
         border-color: var(--PrimaryColor1);
         color: var(--PrimaryColor1);
         cursor: pointer;
      }

         .SteppedProgress li.complete.boxed.canHover span:hover:after {
            border-bottom-color: var(--PrimaryColor1);
            cursor: pointer;
         }

      .SteppedProgress li:before {
         content: counter(step);
         counter-increment: step;
         width: 30px;
         line-height: 30px;
         display: block;
         font-size: 22px;
         color: var(--PrimaryColor1);
         background: var(--PrimaryReverseColor1);
         border-radius: 15px;
         margin: 0 auto 10px;
         position: relative;
         z-index: 1;
         border: 1px solid var(--PrimaryColor1);
      }

      .SteppedProgress li:after {
         content: '';
         width: 100%;
         height: 5px;
         background: var(--PrimaryReverseColor1);
         position: absolute;
         left: -50%;
         top: 15px;
         z-index: -1;
         border-top: 1px solid gray;
         border-bottom: 1px solid gray;
      }

      .SteppedProgress li:first-child:after {
         content: none;
      }

      .SteppedProgress li.complete:before {
         background: var(--PrimaryColor1);
         color: white;
      }

      .SteppedProgress li.complete:after {
         background: var(--Accent3);
         border: none;
      }

   ul.SteppedProgress.Vertical {
      display: block;
   }

   .SteppedProgress.Vertical li {
      flex: none;
      clear: both;
      text-align: left;
      padding: 0;
      margin-left: 0;
      min-height: 2.2em;
   }

      .SteppedProgress.Vertical li span {
         white-space: nowrap;
      }

   ul.SteppedProgress.Vertical li:before {
      float: none;
      display: inline-block;
      margin-right: 10px;
      text-align: center;
      margin-left: 0;
   }

   .SteppedProgress.Vertical li:after {
      content: '';
      width: 6px;
      height: 100%;
      position: absolute;
      left: 12px;
      top: -50%;
      z-index: -1;
   }

   ul.SteppedProgress.Vertical li.boxed,
   ul.SteppedProgress.Vertical li.current {
      min-width: 90%;
   }

      ul.SteppedProgress.Vertical li.boxed span,
      ul.SteppedProgress.Vertical li.current span {
         display: inline;
         margin-left: 0;
      }

         ul.SteppedProgress.Vertical li.boxed span:after,
         ul.SteppedProgress.Vertical li.current span:after {
            bottom: auto;
            left: auto;
            right: 100%;
            top: 7px;
            border-color: rgba(255,255,255,0);
            border-right-color: silver;
            margin: 0;
         }

         ul.SteppedProgress.Vertical li.current span:after {
            border-right-color: var(--PrimaryColor1);
         }

ul.SteppedProgress.Vertical li.complete.boxed span:after {
   border-color: rgba(255,255,255,0);
   border-right-color: var(--PrimaryColor1);
}

   @media (max-width: 600px) {
      ul.SteppedProgress {
         display: block;
         margin-left: 25px;
      }

      .SteppedProgress li {
         flex: none;
         clear: both;
         text-align: left;
         padding: 0;
         margin-left: 0;
         min-height: 2.2em;
      }

         .SteppedProgress li span {
            white-space: nowrap;
         }

      ul.SteppedProgress li:before {
         float: none;
         display: inline-block;
         margin-right: 10px;
         text-align: center;
         margin-left: 0;
      }

      .SteppedProgress li:after {
         content: '';
         width: 5px;
         height: 100%;
         position: absolute;
         left: 13px;
         top: -50%;
         z-index: -1;
         border-left: 1px solid silver;
         border-right: 1px solid silver;
      }

      ul.SteppedProgress li.boxed,
      ul.SteppedProgress li.current {
         min-width: 90%;
      }

         ul.SteppedProgress li.boxed span,
         ul.SteppedProgress li.current span {
            display: inline;
            margin-left: 0;
         }

            ul.SteppedProgress li.boxed span:after,
            ul.SteppedProgress li.current span:after {
               bottom: auto;
               left: auto;
               right: 100%;
               top: 7px;
               background-color: #fff;
               border-left-color: silver;
               border-right-color: silver;
               margin: 0;
            }

            ul.SteppedProgress li.current span:after {
               border-right-color: var(--PrimaryColor1);
            }

      ul.SteppedProgress li.complete.boxed span:after {
         border-color: rgba(255,255,255,0);
         border-right-color: var(--PrimaryColor1);
      }
   }

   /* ********** password checker ********** */
   /*---------- Password Checker ----------*/
   #pswd_info {
      margin-left: 10px;
   }

      #pswd_info ul {
         margin: 0;
         padding: 0;
         list-style-type: none;
         display: inline;
      }

      #pswd_info li {
         padding-right: 10px;
         margin: 0;
         list-style-type: none;
         display: inline;
      }


      #pswd_info::before {
         content: "\25b2";
         position: absolute;
         top: -12px;
         left: 45%;
         font-size: 14px;
         line-height: 14px;
         color: #ddd;
         text-shadow: none;
         display: block;
      }

#pswd_criteria_met {
   display: none;
   color: var(--PrimaryColor2);
   font-style: italic;
}

   #pswd_invalid_character {
      display: none;
      color: #AE1212;
      font-style: italic;
   }

   .invalid {
      background: url(/images/site/cross.png) no-repeat 0 50%;
      padding-left: 22px;
      color: #AE1212;
   }

   .valid {
      background: url(/images/site/tick.png) no-repeat 0 50%;
      padding-left: 22px;
      color: #3a7d34;
   }

   #pswd_criteria {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
   }

      #pswd_criteria > * {
         margin-right: 10px;
      }

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

      #pswd_criteria {
         flex-direction: column;
      }

         #pswd_criteria ul li {
            display: list-item;
         }
   }

   /* **************************************** SMALL ARTICLES **************************************** */

   .smallArticles {
      background-color: #F3F0DD;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 100%;
      display: flex;
   }

   .smallArticles-articles {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
   }

   .smallArticles-article {
      background-color: #FFFFFF;
      width: 31%;
      display: flex;
      flex-direction: column;
   }

   .smallArticles-articleGraphic {
      align-self: center;
   }

      .smallArticles-articleGraphic img {
         align-self: center;
         padding: 20px;
      }

   .smallArticles-article h3 {
      background-color: #B2C0BB;
      text-align: center;
      text-transform: uppercase;
   }

   .smallArticles-article p {
      padding: 10px;
   }

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

      .smallArticles-article {
         width: 95%;
      }

         .smallArticles-article:not(:last-child) {
            margin-bottom: 20px;
         }
   }

/* ****************************** upload page ************************************ */

.uploadDescription {
   padding-left: 20px;
}

/* ****************************** validation engine ****************************** */
.formError .formErrorContent {
   font-size: 0.9rem !important; /* move this to validationEngine.jquery.css? */
}


   /* ****************************** responsive tables ****************************** */
   .responsiveTable {
      width: 100% !important;
   }


   /* ***** Show/hide ***** */
   /* styles to accompany a show/hide column - not displayed unless the responsive table package needs to display the +/- icon */
   table.showHide.responsiveTable thead th:first-child,
   table.showHide.responsiveTable tbody td:first-child {
      display: none;
   }

   table.showHide.responsiveTable.collapsed thead th:first-child {
      display: table-cell;
      /*border-bottom: none;*/
   }

   table.showHide.responsiveTable.collapsed tbody td:first-child {
      display: table-cell;
      height: 1rem;
      margin-top: 10px;
      margin-right: 10px;
   }


   /* ****************************** Grid view ************************************** */
   .gridView {
      width: 100%;
   }

   .gridView-header {
      font-size: 1.3rem;
      border-bottom: 1px solid #CCC;
   }

   .gridView tr {
      margin-bottom: 20px;
   }

   .gridView-header-smallText {
      font-size: 1.2rem;
      font-weight: normal;
   }

   .gridView-item {
      font-size: 1.1rem;
      padding: 5px 0 15px 0;
   }

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

      .gridView-header {
         font-size: 1.2rem;
      }

      .gridView-header-smallText {
         font-size: 1.1rem;
      }

      .gridView-item {
         font-size: 1.05rem;
      }
   }

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

      .gridView-header {
         font-size: 1.1rem;
      }

      .gridView-header-smallText {
         font-size: 1rem;
      }

      .gridView-item {
         font-size: 0.95rem;
      }
   }

   /* *************************************** Flex ************************************* */

   .flex {
      display: flex;
   }

   .flex-end {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
   }

   .flex-row,
   .flex-row-50 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
   }

   .flex-row-50 > * {
      width: 47.5%;
   }

   .flex-row-center {
      display: flex;
      flex-direction: row;
      justify-content: center;
   }

.flex-row-center-center {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.flex-row-start,
.flex-row-start-center {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
}

   .flex-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
   }

   .flex-wrap-space-between { 
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       flex-wrap: wrap;
   }

   .flex-space-around {
      justify-content: space-around !important;
   }

   .flex-row.center,
   .flex-row-start-center {
      align-items: center;
   }

   .flex-column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }

   .flex-column-start {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   }

   .flex-column-center {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: center;
   }

   .flex-img-center {
      display: flex;
      flex-direction: row;
      justify-content: center;
   }

      .flex-img-center img {
         width: 100%;
      }

   .flex-self-top {
      align-self: flex-start;
   }

   /* ************************** Two Column Row *********************************** */
   /* NOTE: 'emphasis class determines how wide to make the two columns.
         equalEmphasis - both columns are 45% (10% gutter)
         leftEmphasis - left column has 60% width, right column has 30%, gutter is 10%
         rightEmphasis - left column has 30% width, right column has 60%, gutter is 10%
         thumbnail - left column 20%, right column 70%, gutter is 10%
*/
   .flex-twoColumn-Row {
      display: flex;
      flex-direction: column;
   }

      .flex-twoColumn-Row > * {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         font-size: 1.10rem;
         margin-bottom: 1rem;
      }

      .flex-twoColumn-Row input[type='radio'] + label,
      .flex-twoColumn-Row input[type='checkbox'] + label {
         font-size: 1.20rem;
      }


      .flex-twoColumn-Row .flex-align-top {
         align-self: flex-start;
      }

      .flex-twoColumn-Row .smallerText {
         font-size: 1rem;
      }

      .flex-twoColumn-Row.rowBorders > * {
         border-bottom: 1px solid #cccccc;
         padding-bottom: 10px;
      }

      .flex-twoColumn-Row.equalEmphasis > * > * {
         width: 45%;
      }

      .flex-twoColumn-Row.NoMarginBottom > * {
         margin-bottom: 0;
      }

      .flex-twoColumn-Row.equalEmphasis input[type=text] {
         width: 100%;
      }

      .flex-twoColumn-Row.leftEmphasis > *,
      .flex-twoColumn-Row.rightEmphasis > * {
         align-items: center;
      }

         /* 
    ordered these definitions last-child then first-child.  This will take care of the case
   when there is only one child
*/
         .flex-twoColumn-Row.leftEmphasis > * > *:last-child {
            width: 30%;
         }

         .flex-twoColumn-Row.leftEmphasis > * > *:first-child {
            width: 60%;
         }

         .flex-twoColumn-Row.rightEmphasis > * > *:last-child {
            width: 60%;
         }

         .flex-twoColumn-Row.rightEmphasis > * > *:first-child {
            width: 30%;
         }


      /* ********** thumbnail variant ********** */
      .flex-twoColumn-Row.thumbnail {
         padding: 0 25px;
      }

         .flex-twoColumn-Row.thumbnail > * {
            margin-bottom: 25px;
         }

         .flex-twoColumn-Row.thumbnail .thumbnailGraphic {
            margin-right: 20px;
         }

            .flex-twoColumn-Row.thumbnail .thumbnailGraphic img.addBorder {
               border: 2px white solid;
               box-shadow: 0 0 11px #888888;
               -moz-border-radius: 6px;
               -webkit-border-radius: 6px;
               border-radius: 6px;
               height: 129px;
               margin-left: 2px;
            }

         .flex-twoColumn-Row.thumbnail .thumbnailText {
            width: 85%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
         }

         .flex-twoColumn-Row.thumbnail.wrap {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
         }

            .flex-twoColumn-Row.thumbnail.wrap > * {
               width: 45%;
            }

            .flex-twoColumn-Row.thumbnail.wrap .thumbnailText p {
               font-size: 1.15rem;
               line-height: 1.25;
            }

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

      .flex-twoColumn-Row.thumbnail.wrap {
         flex-direction: column;
      }

         .flex-twoColumn-Row.thumbnail.wrap > * {
            width: 100%;
         }
   }

   /* ********** Password variant ********** */
   .flex-twoColumn-Row.password > * > *:last-child {
      width: 70%;
   }

   .flex-twoColumn-Row.password > * > *:first-child {
      width: 25%;
   }

   .flex-twoColumn-Row.password > * {
      align-items: center;
   }


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

      .flex-twoColumn-Row.password > * {
         flex-direction: column;
      }

         .flex-twoColumn-Row.password > * > *:first-child,
         .flex-twoColumn-Row.password > * > *:last-child {
            width: 100%;
         }
   }

   /* *********** short data variant ********** */
   .flex-twoColumn-Row.shortData > * > *:last-child {
      width: 65%;
   }

   .flex-twoColumn-Row.shortData > * > *:first-child {
      width: 30%;
   }

   .flex-twoColumn-Row.shortData > * {
      align-items: center;
   }


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

      .flex-twoColumn-Row.shortData > * {
         flex-direction: column;
      }

         .flex-twoColumn-Row.shortData > * > *:first-child,
         .flex-twoColumn-Row.shortData > * > *:last-child {
            width: 100%;
         }
   }



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

      .flex-twoColumn-Row.equalEmphasis > *,
      .flex-twoColumn-Row.leftEmphasis > *,
      .flex-twoColumn-Row.rightEmphasis > * {
         flex-direction: column;
      }

         .flex-twoColumn-Row.equalEmphasis > * > *,
         .flex-twoColumn-Row.leftEmphasis > * > *:first-child,
         .flex-twoColumn-Row.leftEmphasis > * > *:last-child,
         .flex-twoColumn-Row.rightEmphasis > * > *:first-child,
         .flex-twoColumn-Row.rightEmphasis > * > *:last-child {
            width: 100%;
         }

      .flex-twoColumn-Row.thumbnail {
         padding: 0;
      }

      .flex-twoColumn-Row.linedFields > div,
      .flex-twoColumn-Row.linedFields > div > div:first-child {
         margin-bottom: 5px;
      }

      .flex-twoColumn-Row .conditionalMarginBottom {
         margin-bottom: 2rem;
      }



      .flex-twoColumn-Row > * {
         font-size: 1.10rem;
      }

      .flex-twoColumn-Row input[type='radio'] + label,
      .flex-twoColumn-Row input[type='checkbox'] + label {
         font-size: 1.10rem;
      }
   }

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

      .flex-twoColumn-Row.thumbnail > * {
         flex-direction: column;
      }

      .flex-twoColumn-Row.thumbnail .thumbnailText {
         width: 100%;
         margin-bottom: 10px;
      }

      .flex-twoColumn-Row input[type=text] {
         width: 100%;
         max-width: 100%;
      }
   }


   /* ********************************** Special Message ******************************* */
   .specialMessagesResponsive {
      display: flex;
      flex-direction: column;
      margin: 0.5rem 0;
   }

      .specialMessagesResponsive .AccountNotifications {
         background-color: #E3FFFF;
         margin-bottom: 1rem;
      }

      .specialMessagesResponsive .lastLogin {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         margin-bottom: 0.25rem;
      }

      .specialMessagesResponsive .singleMessage {
         display: flex;
         flex-direction: column;
      }

      .specialMessagesResponsive .MessagesContainer {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
      }

         .specialMessagesResponsive .MessagesContainer .ticker {
            display: flex;
            flex-direction: column;
            width: 90%;
         }

         .specialMessagesResponsive .MessagesContainer .MessageControls {
            align-self: center;
            width: 5%;
         }

         .specialMessagesResponsive .messageContainer article {
            font-size: 1.1rem;
         }

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

      .specialMessagesResponsive .lastLogin {
         justify-content: flex-start;
      }

      .specialMessagesResponsive .messageContainer article {
         font-size: 1rem;
      }
   }

   /* *************************************** Responsive ******************************* */

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

      ul li {
         font-size: 0.9rem;
      }
   }


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

      /* ***** sitemap and faqs ********** */
      .catalog-column {
         width: 100%;
      }

      .catalog ul {
         padding-left: 50px;
      }
   }


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

      /* ***** sitemap and faqs ********** */
      .catalog {
         justify-content: space-between;
      }
   }


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

      /* ***** sitemap and faqs ********** */
      .catalog ul {
         padding-left: 20px;
      }

      .accordion-container {
         padding: 15px 0;
      }

      ul.spacedList li {
         margin-bottom: 5px;
      }
   }


   /* ****************** account subheading *********************** */
   .account-subheading {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }

   .account-subheading-accountNumber,
   .account-subheading-icons {
      display: flex;
      flex-direction: row;
      align-items: center;
   }

      .account-subheading-icons.icon-container > * {
         margin-right: 40px;
      }

   .account-subheading-borrowerName-loanBalance {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 70%;
   }

   @media only screen and (max-width: 900px) {
      .account-subheading-borrowerName-loanBalance {
         flex-direction: column;
      }

         .account-subheading-borrowerName-loanBalance > * {
            width: 100%;
         }

      .bn_lb-item {
         margin-bottom: 0.35rem;
      }
   }

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

      .account-subheading-icons.icon-container > *:last-child {
         margin-right: 0;
      }

      .bn_lb-item {
         display: flex;
         flex-direction: column;
      }
   }

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

      /*.account-subheading-accountNumber {
         flex-direction: column;
      }*/

      .account-subheading-icons.icon-container > * {
         margin-right: 20px;
      }
   }


/* ***** bank account control ***** */
.acctType {
   width: 200px;
}

/* ***** OLP callouts ***** */
.anchorClass {
   margin-left: 20px;
}

.olpCallouts {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   margin-bottom: 0.5rem;
}

@media only screen and (max-width: 650px) {
   .anchorClass {
      margin-left: 0;
      margin-right: 20px;
   }

   .olpCallouts {
      flex-direction: column;
      justify-content: flex-start;
      margin-bottom: 10px;
   }
}

/* ***** GPL subject control ***** */
.topicDDL select {
   min-width: 235px;
}

/* ****************** UFC *************** */
.UFCError {
   margin: 1rem 0;
   background-color: #FFFFFF;
}

/* ***************** Alert Banner ************ */
.alertBanner,
.alertBannerMultiple {
   border: 2px solid #0075BE;
   padding: 10px;
   border-radius: 8px;
   font-size: 1.2rem;
   background-color: #efefef;
   margin-bottom: 1rem;

}

   .alertBannerMultiple > div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
   }

.alertBanner {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.alertBanner img,
.alertBannerMultiple img {
   align-self: flex-start;
   margin-right: 1rem;
}

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

   .alertBanner,
   .alertBannerMultiple {
      font-size: 1.1rem;
   }
}

.laurelroad-banner {
   width: 100%;
}

/* **************************************** TEMP STYLES FOR TESTING (TO BE REMOVED LATER) **************************************** */
.LoremIpsum {
   padding-top: 15px;
}

   .pLoremIpsum {
      margin-bottom: 15px;
   }