/* Agency Custom CSS */

.top-menu-agency-menu li.agency-link:nth-child(7) {background: #fdb924 !important;}
.top-menu-agency-menu li.agency-link:nth-child(7) a {color: #0B185E !important;}

.button[data-toggle="search-option-dropdown"] {
    margin-left: .25rem !important;
    background: #AAA !important;
}

div#search-option-dropdown {
    top: 2.65rem !important;
    right: 0 !important;
    left: auto !important;
    border-radius: 0 0 .5rem .5rem;
    border-top: none;
    width: 100%;
}

@media print, screen and (max-width: 39.99875em) {
    .button[data-toggle="search-option-dropdown"] {
        padding: .5rem .75rem;
    }
    
    div#search-option-dropdown {
        top: 2.125rem !important;
    }
}

header.elem_stuck #header_search-list li .button {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
 /*sub-banner light gray background*/
body.adaptive .sub-banners {
    background-color: #f2f2f2;
    }

/*eliminates the white semi-transparent overlay on the hero image*/    
.adaptive #banner-image-container.info #main-banner-overlay #main-banner-text-container {
    background-color: rgba(254,254,254,0.0);
}

/*this should change opacity of blue box on main hero */
body.adaptive #banner-image-container.info #main-banner-overlay #main-banner-text-container h2 {
    background-color: rgba(11,24,94,0.6) !important;
}

/*Changes the images in the rotating banner to better fit mobile*/
    .slide background-image{
        background-position: center bottom;
        background-size: contain;
        }
@media print, screen and (max-width: 645px) {
    .slide background-image {
        background-position: center bottom;
        background-size: contain;
        }
}

/*adds a slight shadow to the boxes at the bottom with FAQS, etc...*/
.agency-prefooter .columns>div {
    background-color: #fefefe;
    padding: 1.5rem;
    border-radius: 0.75rem;
    height: 100%;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 10%) !important;
}

/*changes buttons in section 3 to darker blue color*/
body.adaptive main article div .agency-button:hover {
    color: #ob185e !important;
    }


/*adds a box shadow to the check your account box under sub-banner*/   
.icon-callouts .icon-callouts-container {
    box-shadow: 1px 1px 2px 1px rgba(0 0 0 / 10%) !important;
    }
    
/*changes legislate bucket area background to light gray*/
body main article section.icon-image-buckets {
    background-color: #f2f2f2 !important;
    }

/*changes bottom pre-footer background to light gray*/
body .agency-prefooter {
    background-color: #f2f2f2 !important;
    }
    
/*moves the top banner down a bit to create whitespace*/
.container_rotating-banner.marketing {
    margin-top: 0.5vh;
    }
    

/*Changes the background color of the rotating banner to match the sub-banner below*/
.container_rotating-banner.marketing .slide-info-wrap {
    background-color: #e7eaed;
    }
    
/*change buttons in the sub-banners to darker blue*/
body.adaptive main article .section-wrap .agency-button, body.adaptive main article .section-wrap .button, body.adaptive main article div .agency-button, body.adaptive main article div .button, body.adaptive main article section .agency-button, body.adaptive main article section .button {
    background-color: #0b185e;
    color: #fefefe;
    border-radius: 3rem;
    margin-bottom: auto;
    width: fit-content;
    padding: 1rem 3rem;
    font-weight: 600;
    border: solid 1px #fefefe;
    transition: all 0.2s;
    text-decoration: none;
}

/*Change sub-banner background to white*/
body.marketing .sub-banners .orbit-container .orbit-slide .orbit-figure .sub-banner .sub-banner-info, body.adaptive .sub-banners .orbit-container .orbit-slide .orbit-figure .sub-banner .sub-banner-info {
    background-color: #fefefe;
}



/*change sub-banner to white*/
.orbit-figure .sub-banner .sub-banner-info {
    background-color: rgba(252, 252, 252, 0.0) !important;
}

/*Changes header in sub-banners to dark blue*/
body.adaptive .sub-banners .orbit-container .orbit-slide .orbit-figure .sub-banner .sub-banner-info h4, body.marketing .sub-banners .orbit-container .orbit-slide .orbit-figure .sub-banner .sub-banner-info h4 {
    color: #0b185e;
    margin: 1rem 0;
}

/*changes paragraphs in sub-banner to dark blue*/
body.adaptive .sub-banners .orbit-container .orbit-slide .orbit-figure .sub-banner .sub-banner-info, body.marketing .sub-banners .orbit-container .orbit-slide .orbit-figure .sub-banner .sub-banner-info {
    background-color: #184A8C;
    text-align: center;
    padding: 0 1.5rem;
    color: #0b185e;
    height: auto;
    flex: 1 auto;
    display: flex;
    flex-direction: column;
}

/*Testing for RMBA Page*/

@media screen and (min-width: 800px){
  .user-card {
    display: grid;
    grid-template-columns: 2fr 0fr 2fr;
    column-gap: 30px;
    margin-top: 30px;
  }
 }
  
  .vertical-divider {
    border-left: 3px solid navy;
  }
  
.update {
    background-color: #0b185e;
    color: #ffffff;
    }
    
.update h3 {
    color: #ffffff;
    }
    
.update a {
    color: #ffffff;
    }
    
.update a:hover {
    color: #feba21;
    }

/*adds a bit more padding to the top of the legislative section*/
body.adaptive main article section.icon-image-buckets {
    padding: 3.25rem 2rem 3.25rem 2rem;
}

/* change width of button on the newsletter sign up from 98% to 25% */

.editor-email-button {
    width: 25%;
    }
    
/*Test for Chatbot sizing*/

.bpw-layout {
    height:60% !important;
    }
    
    /*Test for NAC*/
    
    
.plan-hero {
  background-color: #0b185e;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 20vw;
  width: 100vw;
}

.plan-shape {
  grid-column: 2 / span 3;
  background-image: linear-gradient(180deg, rgba(253, 184, 35, 1), rgba(253, 184, 35, 0.3));
  transform: skew(20deg);
  margin-top: 0px;
  height: 100%;
  grid-row: 1 / span 1;
}

.plan-image {
  grid-column: 2 / span 3;
  grid-row: 1;
  align-self: end;
  z-index: 1;
}

.plan-title {
  grid-column: 6 / span 5;
  align-self: center;
  color: white;
  font-family: Mulish, sans-serif;
}

.plan-title h4 {
    font-family: Open Sans, sans-serif;
    font-weight: 300;
    }

  .comp-2-intro {
    font-family: Mulish, sans-serif;
    text-align: center;
    margin: 4rem 7rem;
  }


/*Styles for component-2 Hybrid vs. MyChoice*/

.container {
    margin: 0 7rem 0 7rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  
  #salary::placeholder, #service::placeholder {
    font-size: 0.85rem;
    }
  
  .piggy {
    grid-column: 2;
    grid-row: 1; 
    box-shadow: 2px 4px 5px 2px rgba(3, 10, 46, 0.25);
    height: 60px;
    width: 60px;
    background-color: #0b185e;
    margin-top: 1%;
    margin-left: -3.4%;
    justify-self: start;
    display: grid;
    grid-template-rows: 3;
    grid-template-columns: 3;
    z-index: 3;
  }
  
  .dc, .db, .ret-opt-hybrid, .ret-opt-my-choice {
    font-family: Mulish, sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .hybrid, .mc {
    padding: 1rem;
    }
  
  .hybrid {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: #a7a5cc;
    color: #0b185e;
    border-radius: 2rem 0 0 0;
  }
  
  
  .hyb-title {
    grid-row: 1;
    grid-column: 1 / span 2;
    font-family: Mulish, sans-serif;
    text-align: center;
    color: #0b185e;
  }
  
  .ret-opt-hybrid {
    color: #0b185e;
    }
  
  
  .hyb-over {
    grid-row: 2;
    grid-column: 1 / span 2;
    text-align: left;
    margin-left: 2rem;
    margin-right: 2rem;
  }
  
  .mc {
    grid-column: 2;
    grid-row: 1;
    background-color: #0b185e;
    color: white;
    border-radius: 0 2rem 0 0;
  }
  
  .db {
    grid-column: 1;
    grid-row: 3;
    margin-left: 1.5rem;
    text-align: center;
    color: #0b185e;
  }
  
  .db-req {
    grid-column: 1;
    grid-row: 4;
    margin-left: 1.5rem;
    margin-right: 1rem;
    border-right: solid 2px #0b185e;
  }
  
  .rule {
    grid-column: 1 / span 2;
    margin-left: 1.5rem;
    font-style: italic;
    font-size: 0.9rem;
  }
  
  .dc {
    grid-column: 2;
    grid-row: 3;
    margin-right: 1.5rem;
    margin-left: 1rem;
    text-align: center;
    color: #0b185e;
  }
  
  .dc-req {
    grid-column: 2;
    grid-row: 4;
    margin-right: 1.5rem;
  }
  
  
  .mc-title {
    grid-column: 1 / span 2;
    font-family: Mulish, sans-serif;
    grid-row: 1;
    text-align: center;
    color: white;
  }
  
  .mc-des {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  
  .vest {
    list-style-type: none;
    line-height: 1.5rem;
  }
  
  .mc-des, .member-cont, .employer-cont, .vest, .ret-opt-my-choice, .mc-sum {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  
  .mc-vest {
    margin-left: 2rem;
    margin-right: 1.25rem;
  }
  
  .ret-opt-my-choice {
  color: white;
  }
  
  .hyb-opt {
    display: none;
  }
  
  .mc-opt {
    display: none;
  }
  
  .expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    align-self: start;
    grid-column: 1 / span 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    z-index: 1;
  }
  
  .hyb-exp {
    grid-column: 1;
    grid-row: 1 / span 2;
    background-color: #a7a5cc;
    align-self: start;
    color: #0b185e;
    border-radius: 0 0 0 2rem;
    height: 200px;
  }
  
  .hyb-exp p {
    margin-left: 1.75rem;
  }
  
  .hyb-exp h4 {
    margin-left: 1.75rem;
  }
  .mc-exp {
    grid-column: 2;
    grid-row: 1;
    background-color: #0b185e;
    color: white;
    align-self: center;
    border-radius: 0 0 2rem 0;
    height: 200px;
  }
  
  .down {
    grid-column: 2;
    grid-row: 2;
    border-radius: 100%;
    background-color: #0b185e;
    height: 60px;
    width: 60px;
    cursor: pointer;
    border: none;
    box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.44);
    justify-self: start;
    margin-left: -1.75rem;
    margin-top: -30px;
    z-index: 2;
  }
  
  .arrow, .down:hover {
    border: solid 3px #0b185e;
    background-color: white;
    box-shadow: none;
    grid-row: 4;
  }
  
  .arrow {
    transform: rotate(180deg);
  }
  
  .see-more {
    text-align: center;
    margin-top: -0.05%;
  }


/*Styles for Component 3-Calculator*/

.component-3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 10px;
    background-color: #0b185e;
  }

  .pension-header {
    color: white;
    grid-column: 1 / span 5;
    padding-left: 20px;
    margin-top: 20px;
  }
  
  .pension-header h4 {
    color: white;
    font-weight: bold;
    }
  
  
  .inprson {
    grid-column: 4 / span 2;
    grid-row: 2;
    align-self: start;
  }
  
  .inprson p {
    color: #feba21;
    font-weight: 800;
    padding-right: 10px;
  }
  
  .illust {
    grid-column: 2 / span 5;
    grid-row: 2 / span 3;
    align-self: start;
    margin-top: 3.75rem;
    transform: scaleX(-1);
    height: 50%;
  }
  
  .by-numbers {
    grid-column: 7 /span 3;
    grid-row: 1 / span 3;
    display: flex;
    height: fit-content;
    width: fit-content;
    flex-direction: column;
    align-items: flex-end;
    background-color: #feba21;
    border-radius: 15px;
    margin-top: 20px;
    padding: 20px;
    color: #0b185e;
  }
  
  .by-numbers span {
    border-bottom: solid 2px #0b185e;
    width: 90%;
  }
  
  .by-numbers i {
    padding-top: 10px;
    margin-bottom: 0.5rem;
  }
  
  .by-numbers p {
    font-weight: 600;
    line-height: 0.95rem;
    margin-top: 0.5rem;
  }
  
  .by-numbers-disclaimer {
    font-style: italic; 
    text-align: end;
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
  
  .by-numbers h4 {
    font-size: 1.5rem;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    color: #0b185e;
  }
  
  .by-numbers-tooltip .result-box-tooltip{
    font-size: 0.9rem;
    }
    
  
  
  /*This is the beginning of the calculator styles*/
  
  
  label, button {
    font-family: Mulish, sans-serif;
    color: white;
  }
  
  .calcbox {
    margin-top: -40px;
    grid-column: 10 / span 2;
    grid-row: 1 / span 4;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: normal;
    align-content: normal;
    background-color: #363636;
    height: fit-content;
    width: fit-content;
    padding: 10px;
    border: solid #f2f2f2 4px;
    border-radius: 20px;
    box-shadow: 10px 10px 11px -8px rgba(31,31,31,1); 
  }
    
  .calcbox > h4 {
  color: #f9f9f9;
  margin-left: 25%;
  }
  
  .result-box {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    margin: 30px 20px 30px 20px;
    width: 250px;
    min-height: 50px;
    border-radius: 15px;
    background-color: #B9BBB6;
    box-shadow: inset 0 2px 5px #48494b;
  }
  
  #salary {
    width: 150px;
    height: 25px;
    border-radius: 8px;
    padding: 3px;
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-start;
    order: 0;
    margin-left: 20px;
    font-size:0.8rem;
  }
  
  #service {
    width: 150px;
    height: 25px;
    border-radius: 8px;
    padding: 3px;
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-start;
    order: 0;
    margin-left: 20px;
    font-size:0.8rem;
  }
  
  button {
    padding: 10px;
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-end;
    order: 0;
    margin: -10px 20px 0 0;
    background-color: #FDB823;
    color: #0b185e;
    font-weight: 800;
    border-radius: 10px;
  }
  
  label {
    margin: 5px 0 5px 20px; 
  }
  
 .calc-label {
    font-size: 1rem;
    }
  
  #result {
    font-family: VT323, monospace;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 5px;
  }
  
  input {
    text-align: right;
    background-color: #D9DDDC;
    font-family: Mulish, sans-serif;
  }
  
  .disclaimer {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    font-style: italic;
    font-size: 0.8rem;
    color: #C0C0C0;
    text-align: left;
    margin: 0 0.9rem;
    padding-top: 0.5rem;
  }
  .disclaimer a {
    text-decoration: none;
    color: #ADD8E6;
    }
    
  .disclaimer a:hover {
   color: #E0FFFF;
   }
   
  .timeline {
    grid-column: 5 / span 6;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  .circle {
    background-color: #feba21;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    align-self: start;
  }
  
  .line {
    background-color: #feba21;
    height: 4px;
    width: 15%;
    align-self: start;
    margin-top: 8px;
  }
  
  .bottom-txt {
    grid-column: 5 / span 4;
    grid-row: 4;
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    
  }
  
  .top-txt {
    grid-column: 8 / span 3;
    grid-row: 3;
    margin-top: 2rem;
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  
  .bottom-txt p, .top-txt p {
    color: white;
    margin-right: 11px;
  }
  
  .bottom-txt p {
    margin-left: 0px;
    flex-basis: 25%;
  }
  
  .bottom-txt a {
    text-decoration: none;
    color: #ADD8E6 !important;
}

 .bottom-txt a:hover {
   color: #E0FFFF !important;
   }
  
  
  
  @media screen and (max-width: 1025px) {
    .plan-hero {
      margin-top: 10px;
      margin-left: -8px;
      width: 100vw;
      background-color: #0b185e;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: auto;
    }
    
    .container {
     margin: 0 2rem 0 2rem;
    }
    
    .plan-image {
      margin-left: -20px;
      width: 50vw;
      grid-column: 1 / span 3;
    }
    
    .plan-shape{
      grid-column: 2 / 4;
      margin-right: 50px;
    }
    
    .plan-title{
      grid-column: 4 / 8;
      padding-top: 5%;
      grid-row: 1; 
    }
    
    .hyb-over {
    margin-left: 0rem;
    margin-right: -0.5rem;
    }
    
    .plan-title h1 {
    font-size: 1.25rem;
    }
    
    .plan-title h4 {
    font-size: 0.9rem;
    }
    
    .rule {
     font-size: 0.8rem;
     }
    
    .mc p {
     font-size: 0.8rem;
    }
    
    .hybrid p {
     font-size: 0.8rem;
    }
    
    .mc-exp {
    margin-bottom: -1.5rem;
    }
    
    .db-req, .dc-req {
      font-size: 0.8rem;
      margin-left: 1.25rem;
    }
    
    .hyb-title, .mc-title {
      font-size: 1.5rem;
    }
    
    .hyb-over, .mc-over {
      margin-top: 0px;
    }
    
    .piggy {
      visibility: hidden;
      overflow: hidden;
    }
    
    .inprson {
    grid-column: 2 / span 3;
    }
    
    .illust {
    height: 40%;
    }

    .by-numbers {
      grid-column: 6 / span 4;
      grid-row: 1 / span 2;
    }

    .by-numbers p {
      font-size: 0.85rem;
    }

    .calcbox {
      width:250px;
    }

    .calcbox label {
      font-size: 0.8rem;
    }
  
    .disclaimer {
      font-size: 0.75rem;
    }
  
    .result-box {
      width: 180px;
      align-self: center;
    }

    .timeline {
      grid-column: 2 / span 10;
      margin-top: -2.4rem;
    }
    
    .bottom-txt {
      grid-column: 2 / span 7;
      margin-left: 2rem;
      margin-top: -0.9rem;
    }
    
    .top-txt {
      grid-column: 8 / span 5;
      margin-right: 4rem;
      padding-bottom: 0.8rem;
    }

  }

  /*Media queries for calculator*/

  
@media screen and (max-width: 600px) {
  .plan-hero {
    margin-top: 10px;
    margin-left: -8px;
    width: 100vw;
    height: 50vh;
    background-color: #0b185e;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }
  
  .plan-image {
    margin-left: -90px;
    width: fit-content;
    height: fit-content;
    grid-column: 1 / span 6;
    max-width: 90%;
  }
  .plan-shape{
    grid-column: 1 / 3;
    margin-right: 11px;
  }
  
  .plan-title{
    grid-column: 4 / span 4;
    grid-row: 1;
    margin-left: -2rem;
    margin-top: -3.5rem;
    padding-right: 0.3rem;
  }
  
  .plan-title h4 {
  font-size: 0.75rem;
  margin-bottom: 4.5rem;
  }
  
.comp-2-intro {
  margin: 2rem 1rem;
}

.comp-2-intro h1 {
    font-size: 0.9rem;
  }
  .container, .hybrid, .mc {
    display: flex;
    flex-direction: column;
  }

  .hybrid {
    order: 1;
    border-radius: 2rem;
  }
  .mc {
    order: 2;
    border-radius: 2rem;
  }
  
  .hyb-opt {
  display: block;
  margin-left: 1.5rem;
}

.db, .dc {
 text-align: left;
 margin-left: 0;
 }

.db-req {
  border-right: none;
}

.db-req, .dc-req {
  margin-left: 1.25rem;
  }

.mc-opt {
  display: block;
  margin-left: 1rem;
}
  .piggy {
    display: none;
  }
  
  .down {
    display: none;
  }
  
  .hyb-exp {
    order: 3;
  }
  .mc-exp {
    order: 4;
  }
  .expand{
    display: flex;
    flex-direction: column;
    display: none;
    order: 3; 
  }

  .see-more {
    visibility: hidden;
  }
  
  .component-3 {
  display: grid;
  grid-template-rows: min-content repeat(6, 1fr);
  grid-template-columns: min-content repeat(6, 10%);
  grid-gap: 10px;
  padding-bottom: 2rem;
}
  
  .pension-header {
    grid-row: 1;
    grid-column: 1 / span 12;
    align-self: start;
    font-size: 1rem;
    margin-right: 1rem;
}

  .pension-desc {
    grid-row: 1;
    margin-top: 55px;
    margin-bottom: 0;
    font-size: 0.9rem;
}

  .timeline {
    grid-column: 1;
    grid-row: 2 / span 6;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
  }
  
  .line {
    height: 14%;
    width: 7px;
    margin-top: 0;
    align-self: center;
    margin-right: 4px;
  }
  
  .top-txt {
    grid-column: 2 / span 1;
    grid-row: 2 / span 3;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 0.8rem;
    margin-right: -1rem;
  }
  
  .bottom-txt {
    grid-column: 2 / span 1;
    grid-row: 6 / span 6;
    align-self: start;
    flex-direction: column;
    font-size: 0.8rem;
    margin-left: 0rem;
    margin-top: -13rem;
    margin-right: -1rem;
  }
  
  .bottom-txt :nth-child(1) {
    margin-top: -10px;
  }
  
  
 .mc-des, .member-cont, .employer-cont, .vest, .ret-opt-my-choice, .mc-sum, .hyb-over, .hyb-opt, .mc-vest, .mc-opt {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-size: 0.85rem;
}
  
  
  .inprson {
    grid-column: 4 / span 8;
    grid-row: 2;
    align-self: start;
    z-index: 5;
    font-size: 0.9rem;
  }
  
  .illust {
    grid-column: 4 / -1;
    grid-row: 2;
    align-self: center;
    margin-top: -7rem;
  }
  
  .by-numbers {
    grid-column: 4 / span 9;
    grid-row: 3 / span 2;
    margin-top: -8rem;
    width: 15rem;
  }
  
  .by-numbers p {
    font-size: 0.8rem;
    margin-right: 8px;
    text-align: right;
  }
  
  .by-numbers h4 {
    font-size: 0.9rem;
    text-align: center;
  }
  
  #salary::placeholder {
    font-size: small;
    }
    
  #service::placeholder {
    font-size: small;
    }
  
  .calcbox {
    grid-row: 4 / span 3;
    grid-column: 4 / span 9;
    width: 247px;
    margin-top: 10rem;
  }

  .calcbox label {
    font-size: 0.8rem;
  }

  .disclaimer {
    margin-top: 5px;
    font-size: 0.75rem;
  }

  .result-box {
    width: 180px;
    align-self: center;

  }
  
}