/* General Styling */
html { overflow-x: hidden; }
body { padding-top: 184px; min-height: calc(100vh - 92px);  }
body::after { content: ''; background-image: url('../img/landing-rock-bg.png'); background-size: cover; position: fixed; left: auto; right: 0; bottom: 0; width: 784px; height: 523px; opacity: 1; z-index: -1; }

/* Header */
header nav { width: 100%; }
header { position: absolute; background: transparent; box-shadow: none; display: flex; flex-wrap: wrap; width: 100%; z-index: 100; top: 48px; }
header .flex-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; }
header .stepper { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
header .stepper:before { position: absolute; content: ""; top: 5.5px; left: 50px; width: calc(100% - 100px); height: 1px; background: #0596D5; display: block; margin: 0 auto; z-index: -1;}
header .stepper .step { width: auto; margin-right: 32px; display: block; text-align: center }
header .stepper .step:last-of-type { margin-right: 0; }
header .stepper .step .circle { margin: 0 auto 8px; display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #0596D5 inset, 0 0 0 4px #F5F7F6; background: #F5F7F6; transition: 0.5s; }
header .stepper .step .name { margin: 0; font-size: 14px; color: #787F8B; transition: 0.5s; }

/* Current Step */
header.current-step-1 .stepper .step.step1 .circle,
header.current-step-2 .stepper .step.step2 .circle,
header.current-step-3 .stepper .step.step3 .circle,
header.current-step-4 .stepper .step.step4 .circle
{ box-shadow: 0 0 0 0 #0596D5 inset, 0 0 0 4px #F5F7F6; background: #0596D5; }

header.current-step-1 .stepper .step.step1 .name,
header.current-step-2 .stepper .step.step2 .name,
header.current-step-3 .stepper .step.step3 .name,
header.current-step-4 .stepper .step.step4 .name
{ color: #03497E; }

header.current-step-2 .stepper .step.step1 .circle,
header.current-step-3 .stepper .step.step1 .circle,
header.current-step-3 .stepper .step.step2 .circle,
header.current-step-4 .stepper .step.step1 .circle,
header.current-step-4 .stepper .step.step2 .circle,
header.current-step-4 .stepper .step.step3 .circle
{ background: #03497E; box-shadow: 0 0 0 0 #0596D5 inset, 0 0 0 4px #F5F7F6; }


/* Welcome Back */
.welcome .wrapper { max-width: 437px; }
.welcome .wrapper.fund-account { max-width: 961px; }
.welcome .wrapper.fund-account .back-btn { display: block; margin: 0 0 24px; font-size: 14px; color: #0596D5; }
.welcome .wrapper.fund-account .back-btn svg { margin-right: 8px;} 
.welcome .wrapper.fund-account .flex-wrapper { display: flex; align-items: flex-start; margin: 42px 0 0; }
.welcome .wrapper.fund-account.external-account .card { height: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.welcome .wrapper.fund-account .card { text-decoration: none; display: block; width: 463px; max-width: 100%; cursor: pointer; background: #FAFCFB; border-radius: 2px; box-shadow: 0 0 0 1px #C8C8C8 inset, 0 4px 20px rgba(47,57,77,0.24); padding: 61px 63px; margin-right: 32px; transition: 0.5s; text-align: center; }
.welcome .wrapper.fund-account .card .headline { font-size: 22px; font-weight: bold; color: #787F8B; transition: 0.5s; }
.welcome .wrapper.fund-account .card .copy { font-size: 14px; line-height: 19px; color: #787F8B; margin: 11px 0 25px; }
.welcome .wrapper.fund-account .card:hover { box-shadow: 0 0 0 1px #0596D5 inset, 0 4px 20px rgba(47,57,77,0.24); }
.welcome .wrapper.fund-account .card:hover .headline { color: #0596D5; }
.welcome .wrapper.fund-account .card:last-of-type { margin-right: 0; }
.welcome .wrapper.fund-account form { max-width: 437px; }
.welcome .wrapper.fund-account form .submit-group { margin: 0; }

.welcome .wrapper.fund-account.routing-info .flex-wrapper { width: 904px; max-width: 100%; justify-content: space-between; align-items: flex-start; margin-top: 20px; }
.welcome .routing-info .flex-wrapper .left { max-width: 437px; }
.welcome .routing-info .flex-wrapper .info { font-size: 14px; line-height: 19px; color: #787F8B; }
.welcome .routing-info .flex-wrapper .right svg { margin-bottom: 24px; }
.welcome .routing-info .flex-wrapper .right p { margin: 0 0 8px; font-size: 14px; line-height: 19px; color: #0596D5; }
.welcome .routing-info .flex-wrapper .right p:last-of-type { margin-bottom: 0; }

.welcome .wrapper.fund-account.send-wire p.copy { max-width: 653px; }
.welcome .wrapper.fund-account.send-wire .headline { font-size: 26px; line-height: 36px; font-weight: bold; color: #03497E; margin: 45px 0 20px; width: 997px; }

.welcome .wrapper.outside-accounts { max-width: 501px; }
.welcome .wrapper.outside-accounts p a { color: #2F394D; }
.welcome .wrapper.outside-accounts p a:hover { color: #0596D5; }
.welcome .wrapper.outside-accounts form .submit-group { margin-top: 14px; }
.welcome .wrapper.outside-accounts #add-owner { margin-bottom: 0; }
.welcome .wrapper.outside-accounts form .amount { width: 203px; max-width: 100%; }
.welcome .wrapper.outside-accounts .search-wrapper .dropdown-option { padding: 0 15px; }
.welcome .wrapper.outside-accounts .search-wrapper .dropdown-option .flex-wrapper { justify-content: space-between; align-items: center; display: flex; }
.welcome .wrapper.outside-accounts .search-wrapper .dropdown-option .flex-wrapper p { color: #03497E !important; font-size: 14px !important; letter-spacing: 0.25px !important; line-height: 19px !important; }
.welcome .wrapper.outside-accounts .search-wrapper .dropdown-option .flex-wrapper .bank { margin-right: auto; margin-left: 0; width: 135px; }
.welcome .wrapper.outside-accounts .search-wrapper .dropdown-option .flex-wrapper .number { margin-right: 40px; margin-left: auto; }
.welcome .wrapper.outside-accounts .search-wrapper .dropdown-option .flex-wrapper .location { width: 135px; text-align: right; }


input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }


.welcome h2 { padding: 0; }
.welcome .wrapper.fund-account.external-account .small { font-size: 22px; display: block; }
.welcome p.copy, .welcome p:first-of-type { margin: 0; font-size: 16px; letter-spacing: 0.25px; line-height: 26px; color: #2F394D; }

.welcome form { margin: 24px 0 0 ; padding: 0; }
.welcome form .input-2-col, .welcome form .input-4-col, .welcome form .input-3-col { display: flex; align-items: center; justify-content: space-between; }
.welcome form .input-3-col { margin-bottom: 19px; }
.welcome form .input-2-col .input-group:first-of-type { margin-right: 32px; }
.welcome form .input-4-col .input-group, .welcome form .input-3-col .input-group { margin-right: 32px; }
.welcome form .input-3-col .input-group:first-of-type { min-width: 202px; }
.welcome form .input-3-col.equal .input-group:first-of-type { min-width: auto; }
.welcome form .input-3-col .input-group { width: auto; }
.welcome form .input-4-col .input-group:last-of-type, .welcome form .input-3-col .input-group:last-of-type { margin-right: 0; }
.welcome form .input-4-col .input-group input { font-size: 40px; line-height: 50px; padding: 16px 0; text-align: center; }
.welcome form .input-group { display: block; width: 100%; }
.welcome form .input-group label { font-size: 14px; color: #787F8B; margin: 0 0 8px; display: block; width: 100%; }
.welcome form .input-group input::placeholder { color: #C8C8C8; }
.welcome form .input-group input { margin: 0 0 23px; border-radius: 2px; width: 100%; outline: none; font-size: 16px; letter-spacing: 0.25px; line-height: 16px; padding: 12px 16px; border: solid 1px #C8C8C8; background: #FAFCFB; box-shadow: 0 2px 8px rgba(47,57,77,0.08) inset, 0 0 0 rgba(47,57,77,0.16); color: #2F394D; transition: 0.5s; }
.welcome form .input-group input:focus { box-shadow: 0 0 0 rgba(47,57,77,0.08) inset, 0 4px 12px rgba(47,57,77,0.16); border-color: #0596D5; }
.welcome form .input-group .input-wrapper-icon { position: relative; margin: 0 0 23px; }
.welcome form .input-group .input-wrapper-icon.password-wrapper { margin-bottom: 4px; }
.welcome form .input-group .password-instructions { font-size: .75rem; color: #787F8B; margin: 0 0 8px; display: block; width: 100%; }
.welcome form .input-group .input-wrapper-icon input { margin: 0; }
.welcome form .input-group .input-wrapper-icon .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #787F8B; font-size: 16px; line-height: 16px; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
.welcome form .input-group .input-wrapper-icon .chevron { width: 14px; height: 16px; }
.welcome form .input-group #toggle-password { cursor: pointer; }
.welcome form .input-group .error-message { color: #F06543; font-size: 14px; font-style: italic; display: flex; justify-content: flex-end; transition: 0.5s; }
.welcome form .input-group .error-message.invisible { opacity: 0; visibility: hidden; }
.welcome form .input-group .error-message.visible { opacity: 1; visibility: visible; }
.welcome form .input-group .forgot-password { color: #787F8B; font-size: 14px; display: flex; justify-content: flex-end; transition: 0.4s; }
.welcome form .input-group .forgot-password:hover { opacity: 0.7; }
.welcome form .submit-group { display: block; margin: 24px 0 0; }
.welcome form .submit-group input[type=submit] { width: 100%; border: none; outline: none; cursor: pointer; }
.welcome form .submit-group a { width: 100%; text-align: center; margin: 0; display: block; }
.welcome form .submit-group a:last-of-type { margin: 16px 0 0; }
.welcome form .disclaimer { margin: 44px 0 0 0; font-style: italic; font-size: 12px; line-height: 19px; color: #787F8B; }
.welcome form .disclaimer.before-submit { margin-top: -9px; margin-bottom: 2px; }
.welcome form .toast { margin-top: 16px; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.fake-dropdown { display: none; }
.dropdown-wrapper[data-target="#state"] { z-index: 100; }
.dropdown-wrapper { position: relative; }
.dropdown-toggle { cursor: pointer; position: relative; z-index: 2; }
.dropdown-wrapper.active .dropdown-toggle .icon { transform: translateY(-50%) rotateX(180deg) !important; }
.welcome form .input-group .dropdown-toggle:hover input, .welcome form .input-group .dropdown-wrapper.active .dropdown-toggle input, .dropdown-wrapper.dropdown-focused .dropdown-toggle input { box-shadow: 0 0 0 rgba(47,57,77,0.08) inset, 0 4px 12px rgba(47,57,77,0.16); border-color: #0596D5; }
.dropdown-toggle input { cursor: pointer; }
.dropdown { max-height: 275px; overflow-y: auto; z-index: 1000; position: absolute; width: 100%; display: block; background: #FAFCFB; border-radius: 2px; top: 56px; border: solid 1px #0596D5; box-shadow: 0 4px 20px -4px rgba(47,57,77,0.24); transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); transform: translateY(-56px); visibility: hidden; opacity: 0; pointer-events: none; }
.dropdown-wrapper.active .dropdown { transform: translateY(0); visibility: visible; opacity: 1; pointer-events: all; }
.dropdown .dropdown-option { display: block; width: 100%; text-decoration: none; padding: 1.03125rem 15px; color: #03497E; font-size: 14px; letter-spacing: 0.25px; line-height: 19px; transition: 0.5s; }
.dropdown .dropdown-option:hover { background: #E6F1F5; }

/* Account Types */
.account-type-group { display: none; }
.account-type-group.active { display: block; }
.account-type-group .add-group { margin: 9px 0 0; }
.account-type-group .add-group:last-of-type { margin-bottom: 24px; }
.account-type-group .add-group h6 { font-size: 18px; font-weight: 400; color: #5483A7; margin: 0 0 8px; }
.account-type-group .add-group .group-info { color: #787F8B; font-size: 14px; line-height: 19px; margin: 0 0 8px; }
.account-type-group .add-group .disclaimer { margin: 0 0 16px; }
.account-type-group .add-group .card { cursor: pointer; background: #FAFCFB; border-radius: 2px; box-shadow: 0 0 0 1px transparent inset, 0 4px 20px rgba(47,57,77,0.24); padding: 15px 32px; margin-bottom: 16px; transition: 0.5s; }
.account-type-group .add-group .card:hover { box-shadow: 0 0 0 1px #0596D5 inset, 0 4px 20px rgba(47,57,77,0.24); }
.account-type-group .add-group .card:last-of-type { margin-bottom: 0; }
.account-type-group .add-group .card .less-info { display: flex; align-items: center; justify-content: space-between; }
.account-type-group .add-group .card .less-info .name { color: #2F394D; font-size: 16px; letter-spacing: 0.25px; line-height: 16px; }
.account-type-group .add-group .card .less-info .icon { color: #787F8B; font-size: 16px; position: relative; left: 20px; }
.account-type-group .add-group .card .more-info { visibility: hidden; display: none; transition: 0.5s; }
.account-type-group .add-group .card .more-info.visible { visibility: visible; display: block; }
.account-type-group .add-group .card .more-info.visible hr { display: block; }
.account-type-group .add-group .card .more-info hr { display: none; }
.account-type-group .add-group .card .more-info .input-3-col .input-group:first-of-type { min-width: 170.5px; }
.account-type-group .add-group .card .more-info .input-3-col.equal .input-group:first-of-type { min-width: auto; }

/* Account Managers */
.welcome form .id-radios { margin-bottom: 22px; }
.id-type-group { display: none; }
.id-type-group.active { display: block; }

.card-controls { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 9px; }
.card-controls .remove { margin-right: auto; margin-left: 0; }
.cancel { margin-right: 24px; }
.save { min-width: auto; }

#add-manager, #add-owner, #add-user { display: block; margin: 24px 0; width: 100%; }
#add-manager .icon, 
#add-owner .icon,
#add-user .icon { margin-right: 16px; }
#add-manager .icon path, 
#add-owner .icon path,
#add-user .icon path { transition: all .3s; }
#add-manager:hover .icon path, 
#add-owner:hover .icon path,
#add-user:hover .icon path { fill: #FAFCFB; }
.no-owners { color: #787F8B; font-size: 0.875rem; line-height: 1.1875rem; margin-bottom: 25px; padding-left: 24px; }
#certification { margin-bottom: 32px; }


/* Account Owners */


/* Security Questions */ 
.security .welcome .wrapper { max-width: 501px; }
.sec-question { background: #FAFCFB; border-radius: 2px; box-shadow: 0 4px 20px rgba(47, 57, 77, .24); margin-bottom: 16px; padding: 24px 32px 8px; width: 100%; max-width: 501px; }


/* Toast Styling */
.toast { background: #DAFFED; box-shadow: 0 4px 12px -4px rgba(47,57,77,0.32); padding: 12px 24px 10px; text-align: center; color: #2F394D; font-size: 16px; letter-spacing: 0.25px; line-height: 26px; border-radius: 2px; opacity: 0; visibility: hidden; transition: 0.25s; transform: translateY(-16px) }
.toast.visible { opacity: 1; visibility: visible; transform: translateY(0) }

/* Terms and Conditions */
.terms .welcome { margin-top: 0; }
.terms .welcome .wrapper { max-width: none; }
.terms h2 { text-align: center; }
.terms p.copy { max-width: none; }
.terms .welcome form { max-width: 437px; }
.terms .checkbox { display: flex; margin-bottom: 24px; }
.terms .checkbox label { cursor: pointer; display: flex; margin-right: 16px; width: auto; }
.terms .checkbox input { position: static; margin-right: 16px; width: 24px; }

/* Responsive */
@media only screen and (max-width: 1070px) {
  header .flex-wrapper { flex-wrap: wrap; flex-direction: column; align-items: center; }
  header .stepper { margin: 42px 0; }
  .welcome { margin-top: 42px; }
  .welcome .wrapper { margin: 0 auto; }
}

@media only screen and (max-height: 980px) {
  body:after { display: none; }
}

@media only screen and (max-width: 950px) {
  header .flex-wrapper { padding: 0 30px; }
  header { height: auto; }
}

@media only screen and (max-width: 800px) {
  .welcome .wrapper.fund-account .flex-wrapper { flex-direction: column; }
  .welcome .wrapper.fund-account .card { width: 100%; margin: 0 0 32px !important; }
  .welcome .wrapper.fund-account .card:last-of-type { margin-bottom: 0 !important; }
}

@media only screen and (max-width: 600px) {
  header .stepper { display: none; }
  .welcome { margin-top: 0; }
  .welcome form .disclaimer { margin-right: 0; }
  .welcome form .input-4-col .input-group input { font-size: 22px; padding: 12px 16px; line-height: initial; }
  header .flex-wrapper { align-items: flex-start; }
}

@media only screen and (max-width: 500px) {
  header .flex-wrapper img { width: 100%; min-height: 30px; max-width: 240px; }
  header { top: 32px; }
  body { padding-top: 110px; min-height: calc(100vh - 63px); }
}

@media only screen and (max-width: 400px) {
  .welcome form .input-2-col, .welcome form .input-3-col { display: block; }
  .welcome form .input-4-col .input-group, .welcome form .input-3-col .input-group { margin-right: 0; }
  .welcome form .input-3-col { margin-bottom: 0; }
  .welcome form .input-3-col .input-group { margin-bottom: 19px; }
  .welcome form .input-group input { max-width: none; }
  .welcome .wrapper.outside-accounts form .amount { width: 100%; max-width: 100%; }
}

@media only screen and (max-width: 321px) {
  header .flex-wrapper img { min-height: 26px; }
}