/* ================================
   Fonts
================================ */
@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/Fonts/HelveticaNeue-Bold.woff2") format("woff2"),
    url("../assets/Fonts/HelveticaNeue-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/Fonts/HelveticaNeue-Heavy.woff2") format("woff2"),
    url("../assets/Fonts/HelveticaNeue-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/Fonts/HelveticaNeue-Medium.woff2") format("woff2"),
    url("../assets/Fonts/HelveticaNeue-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/Fonts/HelveticaNeue-Thin.woff2") format("woff2"),
    url("../assets/Fonts/HelveticaNeue-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/Fonts/HelveticaNeue-Roman.woff2") format("woff2"),
    url("../assets/Fonts/HelveticaNeue-Roman.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/Fonts/HelveticaNeue-Light.woff2") format("woff2"),
    url("../assets/Fonts/HelveticaNeue-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ================================
   Root Variables
================================ */
:root {
  /* Colors */
  --color-black: #000000;
  --color-text: #505050;
  --color-primary: #0050a9;
  --color-primary-hover: #004999;
  --color-border: #cccccc;
  --color-bg-light: #f0f4ff;
  --color-heading: #262b31;

  /* Fonts */
  --font-family-base: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';

  /* Font Sizes */
  --font-size-base: 16px;

  --body-01-line-height: 1.5em;

  /* Spacing */
  --space-section-lg: 80px;
  --space-section-sm: 40px;

  /* Button */
  --btn-radius: 4px;
  --btn-padding: 12px 24px;
  --btn-font-weight: 700;
}

/* ================================
   Base Styles
================================ */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: 400;
}

.region-content {
  padding: 0;
}

p {
  color: var(--color-text);
  font-size: clamp(calc(1rem),0.7148rem + 0.4464vw,calc(1rem*1.25));
  line-height: var(--body-01-line-height);
}

.space {
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
}
.space-top {
  padding-top: var(--space-section-lg);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  color: var(--color-heading);
}

h1 {
  margin-bottom: 25px;
  font-size: clamp(calc(1rem*2.25),0.25rem + 3.125vw,calc(1rem*4));
  line-height: clamp(calc(1.2em),0.7571vw + 3.035rem,calc(1.1em));
}

h3 {
  font-size: clamp(calc(1rem*1.25),0.964rem + 0.446vw,calc(1rem*1.5));
}

a {
  color: var(--color-text);
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}

a:hover {
  text-decoration: none;
}

/* ================================
   Utility Classes
================================ */
.bg-blue {
  background-color: var(--color-bg-light);
}

.img-with-content img {
  max-width: 250px;
  width: 100%;
}

.title-with-subtitle h2 {
  font-size: 2.5rem;
}

header .logo-block img {
  max-width: 100px;
  width: 100%;
}

/* ================================
   Buttons
================================ */
.btn {
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-size: 14px;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.transparent-btn {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-weight: var(--btn-font-weight);
  font-size: 14px;
  padding: 0;
  display: inline-block;
  align-items: center;
  text-decoration: none;
  vertical-align: bottom;
}

.btn.transparent-btn:hover {
  color: var(--color-primary-hover);
}

.transparent-btn.with-icon::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
  line-height: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M10 7L15 12L10 17' stroke='%230050a9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  margin-bottom: -4px;
}

.btn.transparent-btn:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M10 7L15 12L10 17' stroke='%23004999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");

}

.transparent-btn.with-icon.link::after {
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230050a9' viewBox='0 0 24 24'><path d='M18,10.82a1,1,0,0,0-1,1V19a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V8A1,1,0,0,1,5,7h7.18a1,1,0,0,0,0-2H5A3,3,0,0,0,2,8V19a3,3,0,0,0,3,3H16a3,3,0,0,0,3-3V11.82A1,1,0,0,0,18,10.82Zm3.92-8.2a1,1,0,0,0-.54-.54A1,1,0,0,0,21,2H15a1,1,0,0,0,0,2h3.59L8.29,14.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L20,5.41V9a1,1,0,0,0,2,0V3A1,1,0,0,0,21.92,2.62Z'/></svg>");
  margin-bottom: -2px;
}

a.external-link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23424242' viewBox='0 0 24 24'><path d='M18,10.82a1,1,0,0,0-1,1V19a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V8A1,1,0,0,1,5,7h7.18a1,1,0,0,0,0-2H5A3,3,0,0,0,2,8V19a3,3,0,0,0,3,3H16a3,3,0,0,0,3-3V11.82A1,1,0,0,0,18,10.82Zm3.92-8.2a1,1,0,0,0-.54-.54A1,1,0,0,0,21,2H15a1,1,0,0,0,0,2h3.59L8.29,14.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L20,5.41V9a1,1,0,0,0,2,0V3A1,1,0,0,0,21.92,2.62Z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: sub;
}

.title-with-btns h5 {
  margin-bottom: 16px;
}

/* ================================
   Form Styles
================================ */
.rp-microsite-enrollment{
  padding: 0 0 40px;
}
.rp-microsite-enrollment .js-form-item input:not(:is([type=checkbox], [type=radio])) {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #333;
  width: auto;
}

.rp-microsite-enrollment .form-select {
  border-radius: 0;
  border-color: #333;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230050a9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-size: 16px 15px;
  width: auto;
  height: 45px;
}

.rp-microsite-enrollment .form-check-input:checked {
  background-color: #333333;
  border-color: #333333;
}


.rp-microsite-enrollment .form-item-moderate-text,
.rp-microsite-enrollment .form-item-aggressive-text {
  display: none;
}

.rp-microsite-enrollment .webform-component--pretax,
.rp-microsite-enrollment #edit-roth {
  border: 1px solid #cbcbcb;
  border-radius: 6px;
  padding: 20px 20px 10px 20px;
  position: relative;
}

.rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper,
.rp-microsite-enrollment  #edit-roth .fieldset-wrapper{
  display: flex;
  gap: 20px;
}

.rp-microsite-enrollment .webform-component--pretax  input:not(:is([type=checkbox], [type=radio])),
.rp-microsite-enrollment  #edit-roth  input:not(:is([type=checkbox], [type=radio])) {
  border: 1px solid #dee2e6;
  text-align: center;
  border-radius: 4px;
    font-size: 40px;
    max-width: 250px;
    width: 100%;
    color: var(--color-primary);
    font-weight: 800;
    padding: 10px;
}

.rp-microsite-enrollment .webform-component--pretax > legend,
.rp-microsite-enrollment #edit-roth > legend  {
  background: #fff;
  position: absolute;
  top: -11px;
  width: auto;
}
.rp-microsite-enrollment input[type=radio]{
  accent-color: #333;
  width: 17px;
  height: 17px;
}
.rp-microsite-enrollment .form-type-checkbox .description{
 margin-left: 0;
}

.view-id-ez_enrollment_form .views-field:not(.views-field-field-legal-plan-name):not(.views-field-field-form-confirmation-message) {
  display: none;
  position: relative;
}
.rp-microsite-enrollment  .form-item-portfolio-plus-options,
.rp-microsite-enrollment #edit-portfolio-plus-detail-text,
.rp-microsite-enrollment #edit-markup-02{
  display: none;
  position: relative;
}
.form-item-portfolio-plus-options input[name=portfolio_plus_options] {
  position: absolute;
  top:5px;
  left: 0;
}
.form-item-portfolio-plus-options label {
  margin-left: 25px;
}
.form-item-portfolio-plus-options .webform-element-description p, .form-item-portfolio-plus-options .webform-element-description {
  font-size: .8rem;
}

#edit-portfolio-plus-options {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  gap: 40px
}


.rp-microsite-enrollment table tr:nth-child(odd){
 background-color: #f1f1f1;

}
.rp-microsite-enrollment table  td{
  padding: 10px;
}
.rp-microsite-enrollment table tr:nth-child(even){
background-color: #fbfbfb;
}
.rp-microsite-enrollment .form-submit {
    margin-top: 20px;
}
/* ================================
   Footer
================================ */
footer {
  color: var(--color-text);  
}

.page-node-type-vi-learning-module footer {
  margin-top: 100px;
}

footer.space {
  padding-bottom: 60px;
}

.footer-menu {
  border-top: 1px solid var(--color-border);
  margin-top: 40px;
  padding-top: 40px;
}

.footer-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
}

body .footer-menu ul li a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.3s all ease-in-out;
  display: inline-flex;
  text-decoration: underline;
}

body .footer-menu ul li a:hover {
  text-decoration: none;
}

.footer-menu * {
  font-size: 12px;
  line-height: 1.5;
}

.footer-menu .region-footer {
  padding: 0;
  gap: 14px;
}

.footer-menu .field__item p:last-child {
  margin-bottom: 0;
}

.footer-menu .field__item p a {
  position: relative;
}

.webform-submission-ez-enrollment-form [data-drupal-selector="edit-mainspring-messaging"] legend,
.webform-submission-ez-enrollment-form .form-item-rates {
  display: none;
}

.webform-submission-ez-enrollment-form .form-item .description {
  margin-top: 5px;
}

.webform-submission-ez-enrollment-form .form-type-select label {
  font-size: 15px;
  margin-bottom: 4px;
}

.webform-submission-ez-enrollment-form .js-form-item.form-item-birthday input, 
.webform-submission-ez-enrollment-form .js-form-item.form-item-last-name input, 
.webform-submission-ez-enrollment-form .js-form-item.form-item-first-name input {
  max-width: 350px;
}

.webform-submission-ez-enrollment-form .js-form-item.form-item-birthday , 
.webform-submission-ez-enrollment-form .js-form-item.form-item-last-name , 
.webform-submission-ez-enrollment-form .js-form-item.form-item-first-name  {
  margin-bottom: 1.5em;
}

.webform-submission-ez-enrollment-form [data-drupal-selector="edit-pretax"] .js-form-item-markup-02 {  
  padding-top: 54px;
  margin-left: -16px;
  margin-right: 20px;
}
.webform-submission-ez-enrollment-form [data-drupal-selector="edit-pretax"] .js-form-item-markup-03 {  
  padding-top: 54px;
  margin-right: -10px;
} 
.webform-submission-ez-enrollment-form [data-drupal-selector="edit-pretax"] .js-form-type-webform-markup + .js-form-type-webform-markup  {
  padding-top: 54px;
}

.webform-submission-ez-enrollment-form .form-item-roth-contribution {
  margin-left: 20px;
  margin-right: 15px;
  position: relative;
}
.webform-submission-ez-enrollment-form .js-form-item-roth-contribution-percentage {
  margin-right: 35px;
  position: relative;
}
.webform-submission-ez-enrollment-form .form-item-roth-contribution .suffix {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translatey(-50%);
  padding-top: 10px;
}
.webform-submission-ez-enrollment-form .js-form-item-roth-contribution-percentage .suffix {
  position: absolute;
  right: -21px;
  top: 50%;
  transform: translatey(-50%);
  padding-top: 10px;
}

.webform-submission-ez-enrollment-form [data-drupal-selector="edit-pretax"] .suffix {
  font-size: 14px;
  margin-top: 5px;
  display: inline-block;
}

.webform-submission-ez-enrollment-form .welcome-messages div {
  display: none;
}

.form-control:focus,
.form-control:focus-visible,
.form-check-input:focus-visible,
.form-check-input:focus {
  box-shadow: none;
  outline: none;
  border-color: #000;
}


header .region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .region-header img {
  max-width: 120px;
  max-height: 80px;
}
header .region-header #client_logo {
  margin-right: auto;
}

header .region-header #spanish_cta {
  margin-left: auto;
}
header .region-header .block-header-logo-block {
  margin-right: 15px;
}

address a[href^="tel:"] {
  font-weight: 700; 
}

address a {
  font-weight: 700;
  text-decoration: none;
}

.rpa-advisory {
    margin-top: 25px;
}

.rpa-advisory img {
  margin-bottom: 10px;
}
/* ================================
   Responsive
================================ */
@media (max-width:1199px) {
  .title-with-subtitle h2 {
    font-size: calc(1.375rem + 1.5vw);
  }
}

@media (max-width: 991px) {
  .rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper, 
  .rp-microsite-enrollment #edit-roth .fieldset-wrapper {
    flex-wrap: wrap;
  }

  .rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper {
    row-gap: 0;
  }
}

@media (max-width: 767px) {
  .cta-wrapper {
    margin-top: 10px;
  }
  header .region-header .block-header-logo-block {
    margin-right: 10px;
  }
  .rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper input {
    margin-top: 5px;
  }
  .rp-microsite-enrollment .webform-component--pretax input:not(:is([type="checkbox"], 
  [type="radio"])), 
  .rp-microsite-enrollment #edit-roth input:not(:is([type="checkbox"], 
  [type="radio"])) {
    max-width: 280px;
  }
  .webform-submission-ez-enrollment-form [data-drupal-selector="edit-pretax"] .js-form-type-webform-markup {
    padding-top: 54px;
    margin-left: 5px;
    margin-right: 0;
    width: 20px;
  }
  .webform-submission-ez-enrollment-form .form-item-pre-tax-contribution {
    width: calc(100% - 40px);
  }

  .webform-submission-ez-enrollment-form.rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper{
    flex-direction: inherit;
  }

  .webform-submission-ez-enrollment-form.rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper {
    gap: 0;
  }
  h1 {
    font-size: 2.5rem;
  }
  .space {
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-sm);
  }

  .page-node-type-vi-learning-module footer {
    margin-top:  var(--space-section-sm);
  }


  header .logo-block img {
    max-width: 80px;
  }

  .img-with-content img {
    max-width: 100%;
  }

  .signin-block .btn {
    width: 100%;
    text-align: center;
  }

  header .transparent-btn {
    font-size: 12px;
  }

  footer .container {
    padding: 0 30px;
  }
  .rp-microsite-enrollment .js-form-item input:not(:is([type=checkbox], [type=radio])){
    width: 100%;
  }
  .rp-microsite-enrollment .form-select{
    width: 100%;
  }
  .rp-microsite-enrollment .webform-component--pretax .fieldset-wrapper, .rp-microsite-enrollment #edit-roth .fieldset-wrapper{
    flex-direction: column;
  }
  .rp-microsite-enrollment .webform-component--pretax, .rp-microsite-enrollment #edit-roth{
    margin: 30px 0;
  }
  .rp-microsite-enrollment .webform-component--pretax > legend, .rp-microsite-enrollment #edit-roth > legend{
    top: -20px;
    width: calc(100% - 20px);
    left: 10px;
  }
}

.cta-wrapper .form-item {
    margin: 0;
} 

.cta-wrapper h5 {
    margin-bottom: 15px;
}

.cta-wrapper .form-item legend {
  display: none;
}
.middle-block .form-item {
    margin: 0;
}
#group-start-saving legend,
.middle-block legend {
  display: none;
}
 .node--type-rp-microsite .field--name-field-secondary-advisor p,
 .node--type-rp-microsite .field--name-field-standard-advisors p {
    margin: 0;
}

.group-top-section {
    margin-top: 0;
}
.group-top-section fieldset {
  padding-top: 0;
}
.group-top-section legend {
    display: none;
}

.guide-section {
  max-width: 1100px;
  margin: 0 auto;
}
.guide-section h2 { 
  font-size: clamp(calc(1rem*2),0.285rem + 2.678vw,calc(1rem*3.5));
  line-height: clamp(calc(1rem*2),0.285rem + 2.678vw,calc(1rem*3.5));
  margin-bottom: 16px;
}
.guide-section p {
  font-size: clamp(calc(1rem),0.7148rem + 0.4464vw,calc(1rem*1.25));
  margin-bottom: 20px;
  color: #505050
}
.guide-section address {
  font-size: clamp(calc(1rem),0.7148rem + 0.4464vw,calc(1rem*1.25));
  color: #505050
}
#group-start-saving--description h2 {
  font-size: clamp(calc(1rem*2.25),0.25rem + 3.125vw,calc(1rem*4));
}
.guide-section address a:hover {
  text-decoration: underline;
  background-color: #004ea8;
  color: #fff;
}
.guide-section .btn {
  margin-top: 20px;
}