:root {
  --base-orange: #CB1C3F;
  --base-purple: #1C3664;
  --base-purple-light: #5b5fd5;
  --base-purple-light2: #a9acff;
  --base-white: #ffffff;
}

#countryCode,
#countryCode:focus,
#countryCode:focus-visible {
  border-radius: var(--bs-border-radius-lg) !important;
}

html .form-group {
  margin-top: 20px !important;
}

.error {
  color: red !important;
}

.customInputs.iAgree {
  .error {
    display: block !important;
  }
}

.text-orange {
  color: var(--base-orange) !important;
}

.text-grey {
  color: #929292;
}

.autoInvestAmount {
  border: none;
}

.iti__selected-dial-code {
  display: none !important;
}

.iti {
  width: 100%;
}

.iti__selected-flag:after {
  content: '';
  width: 1px;
  height: 30px;
  margin-left: 6px;
  color: #ccc;
  background: #ccc;
  transform: rotate(180deg);
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: transparent !important;
}

.USAREIT_MAN {
  width: 400px;
  height: 400px;
  object-fit: contain;
}

.input-group-append {
  top: 10px;
  z-index: 6;
  right: 10px;
  color: var(--base-orange);
  position: absolute;
}

.cursor-pointer {
  cursor: pointer;
}

span.text-danger {
  font-weight: 700;
}

.autoInvestAmount:focus {
  border: none;
  outline: none;
}

.autoInvestAmount::placeholder {
  color: #b9b9b9;
}

.InvestAmount {
  border: none;
}

.InvestAmount:focus {
  border: none;
  outline: none;
}

.iAgreeText {
  line-height: 1;
  font-size: 14px;

  a {
    color: var(--base-purple);
  }
}

.InvestAmount::placeholder {
  color: #b9b9b9;
}

.text-purple {
  color: var(--base-purple);
}

.text-light-purple {
  color: var(--base-purple-light);
}

.text-light-purple2 {
  color: var(--base-purple-light2);
}

.rcxHomePage {
  margin-bottom: -10px;
}

.form-control.otp-input {
  line-height: 3;
}

#iAgree-error {
  clear: both;
  width: 100%;
  padding-top: 5px;
}

.accretivLogin {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  background-image: linear-gradient(to right, #cb1c3f 10%, #ee355a 50%, #ffffff 50%);

  .leftPanel {
    background: url('/images/buildings.png');
    color: #fff;
    display: flex;
    text-align: left;
    align-items: start;
    justify-content: start;
    padding: 3em 2em 0 2em;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;

    .content {
      position: relative;
      max-width: 90%;
    }

    h2 {
      /* padding-bottom: 2rem; */
      font-size: 2.5rem;
      font-weight: bold;
      line-height: 1.3;
      color: #fff;
    }

    p {
      font-size: 1.2rem;
      margin-top: 15px;
      color: #fff;
    }

    h1 {
      font-size: 60px;
      padding-bottom: 2rem;
    }

    h1 span {
      font-size: 60px;
      font-weight: 700;
    }

    img {
      width: 20em;
      height: auto;
      object-fit: cover;
      object-position: center;
    }

    .implant {
      width: 12em;
      height: 12em;
    }

    .numb {
      color: #fff;
      top: -22px;

      font-size: 13em;
      font-weight: 700;
      position: absolute;
      font-family: "Work Sans", sans-serif;
    }

    .mPer {
      bottom: 0;
      right: -35px;
    }

    .PreferredStocks {
      bottom: -20px;
      font-weight: 600;
      position: absolute;
    }

    .per {
      color: #fff;
      height: 90px;
      font-size: 6em;
      margin-top: 10px;
    }

    .apy {
      color: #fff;
      font-size: 3em;
      font-weight: 700;
    }

    .subheading {
      font-size: 1.5rem;
      margin-top: 20px;
      font-weight: 500;
    }

    .cta-button {
      margin-top: 20px;
      padding: 10px 30px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 1.2rem;
    }

    .testimonial {
      width: 80%;
      padding: 20px;
      margin-top: 30px;
      margin-bottom: 30px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.15);
    }

    .testimonial .author {
      margin-bottom: 0;
      font-weight: bold;

      img {
        width: 2rem;
        margin-right: 10px;
      }
    }
  }

  /* .content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0em 2em 2em 2em;
  } */

  ul {
    padding-left: 0;
  }

  h1.text-purple {
    margin-bottom: 1.5rem;
  }

  .form-group {
    margin-bottom: .5rem;

    .iti--separate-dial-code .iti__selected-flag {
      background-color: transparent;
    }
  }

  .form-control,
  .form-select {
    width: 100%;
    padding: 10px;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    color: var(--base-orange);
    background-color: #f8f9fa !important;
  }

  .form-control::placeholder {
    color: #b9b9b9 !important;
  }

  .form-select {
    --bs-form-select-bg-img: url("../AccretivUSA/images/select-arrow.png") !important;
    background-image: url("../AccretivUSA/images/select-arrow.png") !important;
  }

  .btn-orange {
    background-color: var(--base-orange);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;

    &:active {
      color: #fff;
    }
  }

  .btn-purple {
    background-color: var(--base-purple);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;

    &:active {
      color: #fff;
    }
  }

  .customradios {
    input[type="radio"] {
      display: none;
    }

    input[type="radio"]:checked+.radio-box {
      border-color: var(--base-orange);
    }

    .radio-box {
      text-align: center;
      flex-direction: column;
      justify-content: center;
      padding: 1rem;
      border: 2px solid #E1E1E1;
      background-color: #f9f9f9;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 15px;
      cursor: pointer;
      transition: border-color 0.3s ease;

      img {
        width: 100px;
        height: 100px;
      }

      .text {
        display: flex;
        flex-direction: column;
      }

      .title {
        font-weight: bold;
        color: #1A1A1A;
      }

      .subtitle {
        font-size: 0.9rem;
        color: #666;
        min-height: 65px;
      }
    }
  }

  #amount-step,
  #limit-based-auto-invest {
    .form-radio {
      -webkit-appearance: none;
    }

    .form-radio:hover+label {
      background-color: #f6f6f6;
    }

    .form-radio:checked+label {
      border-color: var(--base-purple-light);
      color: var(--base-purple-light);
    }

    .radio-label {
      border: 2.5px solid #a8aaed;
      display: inline-block;
      height: 5rem;
      width: 5rem;
      border-radius: 0.5rem;
      position: relative;
      color: #a8aaed;
    }

    .radio-label>span {
      font-size: 18px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -45%);
    }

    ::placeholder {
      transition: all 2s;
      font-size: 1.55rem;
      color: #9d9d9d;
    }
  }

  #auto-amount-step,
  #limit-based-auto-invest {
    .form-radio {
      -webkit-appearance: none;
    }

    .form-radio:hover+label {
      background-color: #f6f6f6;
    }

    .form-radio:checked+label {
      border-color: var(--base-purple-light);
      color: var(--base-purple-light);
    }

    .radio-label {
      border: 2.5px solid #a8aaed;
      display: inline-block;
      height: 5rem;
      width: 5rem;
      border-radius: 0.5rem;
      position: relative;
      color: #a8aaed;
    }

    .radio-label>span {
      font-size: 18px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -45%);
    }

    ::placeholder {
      transition: all 2s;
      font-size: 1.55rem;
      color: #9d9d9d;
    }
  }

  .btn-orange:hover {
    background-color: var(--base-purple);
  }

  .footer-links {
    margin-top: 1rem;
    font-size: 0.9rem;
    padding: 0 1rem;

    .fw-semibold {
      font-size: 14px;
    }
  }

  .footer-links a {
    display: block;
    color: #5b5fd5;
    margin-top: 0.5rem;
    text-decoration: none;
  }

  .footer-links a:hover {
    text-decoration: underline;
  }

  .fs-md-5 {
    font-size: 1.25rem;
  }

  input,
  select,
  textarea {
    font-size: 14px;
    font-weight: 500;
  }

  .fs-16 {
    font-size: 16px;
  }

  .fs-14 {
    font-size: 14px;
  }

  .rightPanel {
    background-color: var(--base-white);
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 3rem 1.5rem;

    label,
    input,
    select,
    textarea {
      font-size: 16px;
    }

    .form-container {
      padding: 0px;
      width: 100%;
    }

    .progress-bar {
      gap: 3px;
      flex-direction: row;
      justify-content: start;
    }

    .progress-bar .step {
      width: 20px;
      height: 10px;
      background: #ddd;
      border-radius: 10px;
      position: relative;
      transition: background 0.3s ease;
    }

    .progress-bar .step.active,
    .progress-bar .step.completed {
      background: var(--base-orange);
    }

    .progress-bar .step::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      width: 100%;
      height: 2px;
      background: transparent;
      transition: background 0.3s ease;
    }

    .progress-bar .step.active+.step::after,
    .progress-bar .step.completed+.step::after {
      background: transparent;
    }

    .progress-bar .step:last-child::after {
      display: none;
    }

    .form-step {
      display: none;
    }

    .form-step.active {
      display: block;
    }

    .form-step {
      #multi-step-form-0 {
        padding: 0 1rem;
      }
    }

    .button-group {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding: 0 1rem;
    }

    button {
      background: var(--base-orange);
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }

    button.btn-purple {
      background-color: var(--base-purple-light);
      color: white;
      border: none;
      padding: 10px 30px;
      border-radius: 4px;
      cursor: pointer;

      &:active {
        color: #fff;
      }
    }

    button.hidden {
      display: none;
    }

    button#prev {
      background: #b9b9b9;
    }

    button:hover {
      opacity: 0.9;
    }
  }

  /* rightPanel */
}

/* accretivLogin ends */
.customInputs {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.customInputs input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

.customInputs:hover input~.checkmark {
  background-color: #ccc;
}

.customInputs input:checked~.checkmark {
  background-color: var(--base-orange);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.customInputs input:checked~.checkmark:after {
  display: block;
}

.customInputs .checkmark:after {
  top: 7px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  /* customInputs ends */
}

#multi-step-form {
  p.text-orange {
    font-size: 14px;
  }
}

#otpModal {
  transform: translateY(6em);

  .modal-content {
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
  }

  .option {
    height: 3em;
    border: 1px solid gray;
  }
}

.option-input:checked {
  background: #2987d1;
}

.option-input:checked::before {
  height: auto;
  width: 26px;
  position: absolute;
  /*content: "✔";*/
  content: "\2713";
  font-weight: bold;
  display: inline-block;
  font-size: 16.6667px;
  text-align: center;
  line-height: 30px;
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  /*    position: relative;*/
  border-radius: 4px 0px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 25px;
  width: 25px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  /*    position: relative;*/
  z-index: 1;
}

.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

#phone_number-error {
  position: absolute;
}

.iti__arrow {
  border-bottom: 2px solid transparent;
}

.code-block {
  flex-direction: row !important;

  .form-control {
    height: 100% !important;
    width: 45px !important;
  }
}

.flex-direction-row {
  flex-direction: row !important;
}

.tab-4,
.tab-5,
.tab-7 {
  .row {
    flex-direction: row !important;
  }
}

input::placeholder {
  font-weight: 400 !important;
}

@media (max-width: 767px) {
  .row {
    flex-direction: column;
  }

  .mt1-mob-5rem {
    margin-top: 1.5rem;
  }

  .accretivLogin {
    min-height: auto;
    padding-bottom: 2em;
    background-image: linear-gradient(to bottom,
        #352f7d 20%,
        #1676ac 30%,
        #ffffff 30%);

    background: var(--base-orange) !important;

    .leftPanel,
    .rightPanel {
      width: 100%;
    }

    .fs-md-5 {
      font-size: 1rem;
    }

    .leftPanel {
      .w-75 {
        width: 100% !important;
      }

      img {
        width: 10em;
        align-self: center;
      }

      .d-flex {
        text-align: center;
        justify-content: center;
      }

      .d-flex.implant {
        height: 5em;
      }

      .testimonial {
        width: 100%;
        margin: 10px auto;
      }

      p.text-white.mb-3 {
        margin: 0.5rem auto !important;
      }

      p {
        font-size: 12px !important;
      }

      .numb {
        top: -35px;
        right: 25px;
        color: #fff;
        font-size: 7em;
        height: 100px;
      }

      .PreferredStocks {
        font-size: 8px;
      }

      .per {
        color: #fff;
        height: 40px;
        font-size: 2.5em;
        margin-top: 15px;
      }

      .apy {
        color: #fff;
        font-size: 1.8em;
        font-weight: 700;
      }



      h1 {
        font-size: 2rem !important;
      }

      background-image:unset !important;
      padding:2em 2em 0 1em !important;
      display: block;
      margin:auto;
      text-align:center;
    }

    .rightPanel {
      padding: 1.5rem;

      margin-bottom: 10px !important;

      button {
        display: block !important;
        margin: auto !important;
      }

      border-radius: 10px;

      button#prev {
        display: none !important;
      }
    }

    h1 {
      font-size: 22px !important;
    }

    h2 {
      font-size: 20px;
    }

    h3 {
      font-size: 18px;
    }

    h4 {
      font-size: 16px;
    }

    h5 {
      font-size: 14px;
    }

    h6 {
      font-size: 12px;
    }

    p {
      font-size: 14px !important;
    }
  }

  .btn-center {
    margin: auto;
    display: block;
  }

  .content-wrapper {
    max-width: unset !important;
    padding: unset !important;
  }

  #multi-step-form {
    h2 {
      text-align: center;
    }
  }
}