:root {
    --xxblack: #000000;
    --xxblacklight: #323232;
    --xxwhite: #ffffff;
    --xxnavy: #152a69;
    --xxturquoise: #00c6c5;
    --xxturquoiselight: #A9EAEA;
    --xxturquoisedark: #019a9a;
    --xxlavender: #D6D9ED;
    --xxsand: #F5E5C2;
    --xxgreylight: #f7f7f7;
    --xxgrey: #d3d3d3;
    --xxgreydark: #8c8c8c;
    --xxbluelight: #E5F3FA;
    --xxblue: #2699D9;
    --xxbluedark: #18628B;
    --xxyellowlight: #FFF4C7;
    --xxyellowdark: #B38800;
    --xxgreendark: #0CA75C;
    --xxgreenlight: #D4FAD3;
    --xxbluedark: #18628B;
    --xxred: #D44241;
    --xxredlight: #FFE2E2;
    --xxreddark: #B80000;
    --bs-border-color: #8F9194;
    --bs-body-color: #152a69
}

@font-face {
    font-family: "geomanist-wzmedium";
    src: url("fonts/geomanist-medium/geomanist-medium-wz-webfont.eot")
}

@font-face {
    font-family: "geomanist-wzmedium";
    src: url("fonts/geomanist-medium/geomanist-medium-wz-webfont.ttf") format("truetype"), url("fonts/geomanist-medium/geomanist-medium-wz-webfont.svg#geomanist-wzmedium") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "geomanist-wzbook";
    src: url("fonts/geomanist-book/geomanist-book-wz-webfont.eot")
}

@font-face {
    font-family: "geomanist-wzbook";
    src: url("fonts/geomanist-book/geomanist-book-wz-webfont.ttf") format("truetype"), url("fonts/geomanist-book/geomanist-book-wz-webfont.svg#geomanist-wzbook") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "geomanist-wzlight";
    src: url("fonts/geomanist-light/geomanist-light-wz-webfont.eot")
}

@font-face {
    font-family: "geomanist-wzlight";
    src: url("fonts/geomanist-light/geomanist-light-wz-webfont.ttf") format("truetype"), url("fonts/geomanist-light/geomanist-light-wz-webfont.svg#geomanist-wzlight") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "geomanist-wzbold";
    src: url("fonts/geomanist-bold/geomanist-bold-wz-webfont.eot")
}

@font-face {
    font-family: "geomanist-wzbold";
    src: url("fonts/geomanist-bold/geomanist-bold-wz-webfont.ttf") format("truetype"), url("fonts/geomanist-bold/geomanist-bold-wz-webfont.svg#geomanist-wzbold") format("svg");
    font-weight: normal;
    font-style: normal
}

.animate__slideInUpFadeIn {
    -webkit-animation-name: slideInUpFadeIn;
    animation-name: slideInUpFadeIn
}

.animate__slideInUpFadeOut {
    -webkit-animation-name: slideInUpFadeOut;
    animation-name: slideInUpFadeOut
}

.animate__slideInDownFadeIn {
    -webkit-animation-name: slideInDownFadeIn;
    animation-name: slideInDownFadeIn
}

.animate__slideInDownFadeOut {
    -webkit-animation-name: slideInDownFadeOut;
    animation-name: slideInDownFadeOut
}

.animate__animated.animate__fadeIn {
    --animate-duration: 1.5s
}

.animate__animated.animate__slideInDownFadeIn,
.animate__animated.animate__slideInDownFadeOut,
.animate__animated.animate__slideInUpFadeIn,
.animate__animated.animate__slideInUpFadeOut {
    --animate-duration: 0.5s
}

.animate__animated.animate__slideInDown,
.animate__animated.animate__slideInLeft,
.animate__animated.animate__slideInRight,
.animate__animated.animate__slideInUp {
    --animate-duration: 2.5s
}

@-webkit-keyframes slideInUpFadeIn {
    0% {
        -webkit-transform: translate3d(0, 2%, 0);
        transform: translate3d(0, 2%, 0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
        visibility: visible
    }
}

@keyframes slideInUpFadeIn {
    0% {
        -webkit-transform: translate3d(0, 2%, 0);
        transform: translate3d(0, 2%, 0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
        visibility: visible
    }
}

@-webkit-keyframes slideInUpFadeOut {
    0% {
        -webkit-transform: translate3d(0);
        transform: translate3d(0);
        visibility: visible;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -2%, 0);
        transform: translate3d(0, -2%, 0);
        opacity: 0
    }
}

@keyframes slideInUpFadeOut {
    0% {
        -webkit-transform: translate3d(0);
        transform: translate3d(0);
        visibility: visible;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -2%, 0);
        transform: translate3d(0, -2%, 0);
        opacity: 0
    }
}

@-webkit-keyframes slideInDownFadeIn {
    0% {
        -webkit-transform: translate3d(0, -2%, 0);
        transform: translate3d(0, -2%, 0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
        visibility: visible
    }
}

@keyframes slideInDownFadeIn {
    0% {
        -webkit-transform: translate3d(0, -2%, 0);
        transform: translate3d(0, -2%, 0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
        visibility: visible
    }
}

@-webkit-keyframes slideInDownFadeOut {
    0% {
        -webkit-transform: translate3d(0);
        transform: translate3d(0);
        visibility: visible;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 2%, 0);
        transform: translate3d(0, 2%, 0);
        opacity: 0
    }
}

@keyframes slideInDownFadeOut {
    0% {
        -webkit-transform: translate3d(0);
        transform: translate3d(0);
        visibility: visible;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 2%, 0);
        transform: translate3d(0, 2%, 0);
        opacity: 0
    }
}

body,
html {
    background-color: var(--xxwhite);
    font-family: "geomanist-wzmedium";
    color: var(--xxnavy);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4 {
    font-family: "geomanist-wzbook"
}

p {
    font-family: "geomanist-wzbook";
    font-weight: 200 !important;
    font-size: 1em;
    margin: 0;
    padding: 0
}

.text-legal {
    font-size: 0.7em
}

.text-bold,
b {
    font-family: "geomanist-wzmedium";
    font-weight: 500 !important
}

.text-center {
    text-align: center !important
}

.text-left {
    text-align: left !important
}

.text-right {
    text-align: right !important
}

.text-black {
    color: var(--xxblack)
}

.text-white {
    color: var(--xxwhite)
}

.text-navy {
    color: var(--xxnavy)
}

.text-turquoise {
    color: var(--xxturquoise)
}

.text-bluelight {
    color: var(--xxbluelight)
}

.text-blue {
    color: var(--xxblue)
}

.text-bluedark {
    color: var(--xxbluedark)
}

.text-yellowdark {
    color: var(--xxyellowdark)
}

.text-greydark {
    color: var(--xxgreydark)
}

.bg-white {
    background-color: var(--xxwhite)
}

.bg-navy {
    background-color: var(--xxnavy)
}

.bg-turquoise {
    background-color: var(--xxturquoise)
}

.bg-lavender {
    background-color: var(--xxlavender)
}

.bg-sand {
    background-color: var(--xxsand)
}

.bg-grey {
    background-color: var(--xxgrey)
}

.bg-greylight {
    background-color: var(--xxgreylight)
}

.bg-greydark {
    background-color: var(--xxgreydark)
}

.display-mobile {
    display: block !important
}

.display-desktop {
    display: none !important
}

@media screen and (min-width:768px) {
    .display-mobile {
        display: none !important
    }

    .display-desktop {
        display: block !important
    }
}

.absolute-position {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.relative-position {
    position: relative
}

label.btn {
    display: table
}

label.btn span {
    display: table-cell;
    vertical-align: middle
}

.btn {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    min-width: 120px;
    margin: 0 auto;
    border-radius: 45px;
    border: none;
    padding: 0 2em;
    font-family: "geomanist-wzmedium";
    text-transform: uppercase;
    cursor: pointer
}

.btn-large {
    height: 54px;
    font-size: 16px
}

@media screen and (min-width:768px) {
    .btn-large {
        height: 48px
    }
}

.btn-medium {
    height: 40px;
    font-size: 14px
}

.btn-small {
    height: 32px;
    font-size: 12px
}

.btn.selected,
.btn:focus-visible.selected,
.btn:focus.selected {
    background-color: var(--xxturquoise) !important;
    color: var(--xxwhite) !important;
    border: none;
    outline: none
}

.btn-primary {
    background-color: var(--xxnavy);
    color: var(--xxwhite);
    border: 1px solid;
    border-color: var(--xxnavy)
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid;
    border-color: var(--xxgrey);
    color: var(--xxnavy)
}

.btn-icon {
    display: inline;
    min-width: 200px
}

.btn-icon img {
    width: 25px;
    height: 25px
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--xxnavy) !important;
    -webkit-box-shadow: 0 0 0 0.2rem var(--xxturquoisedark) !important;
    box-shadow: 0 0 0 0.2rem var(--xxturquoisedark) !important;
    outline: white 2px solid !important
}

.btn-secondary:focus,
.btn-secondary:focus-visible {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 0.2rem var(--xxturquoisedark) !important;
    box-shadow: 0 0 0 0.2rem var(--xxturquoisedark) !important;
    outline: white 2px solid !important;
    color: var(--xxnavy)
}

.btn-primary:hover,
.btn-secondary:hover {
    background-color: var(--xxturquoise) !important;
    color: var(--xxwhite) !important;
    border: 1px solid;
    border-color: var(--xxturquoise) !important;
    outline: none
}

.btn-primary:active,
.btn-secondary:active {
    background-color: var(--xxturquoisedark) !important;
    color: var(--xxwhite) !important;
    border: 1px solid;
    border-color: var(--xxturquoisedark) !important
}

.btn-primary:disabled,
.btn-secondary:disabled {
    background-color: var(--xxgrey) !important;
    color: var(--xxgreydark) !important;
    border: none;
    outline: none
}

.btn-link {
    color: var(--xxnavy) !important;
    text-decoration: underline;
    text-transform: capitalize !important
}

.btn-link:active,
.btn-link:focus,
.btn-link:focus-visible,
.btn-link:hover {
    color: var(--xxturquoise) !important
}

.modal {
    --bs-modal-width: 60%
}

.modal .modal-content {
    background-color: var(--xxgreylight)
}

.modal .modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 4em;
    border: none
}

.modal .modal-header h1,
.modal .modal-header p {
    margin: 0 auto
}

.modal .modal-header .btn-close {
    top: 30px;
    left: 93%;
    background-image: url("../../img/long-form/icon_close.svg")
}

@media screen and (min-width:768px) {
    .modal .modal-header .btn-close {
        top: 35px;
        left: 95%
    }
}

.modal .modal-body {
    border: none
}

.modal .modal-body .modal-body-text-area {
    max-height: 430px;
    overflow-y: scroll
}

.modal .modal-footer {
    border: none;
    padding-bottom: 4em
}

.modal .modal-footer p {
    margin: 0 auto
}

#main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh
}

#main #header .header-logo.display-desktop {
    width: 100%;
    max-width: 200px;
    margin: 0 auto
}

#main #header .header-logo.display-mobile {
    width: 100%;
    max-width: 80px;
    margin: 0 auto
}

#main #header .header-title-container {
    margin: 1em 0
}

#main #header .header-product-container {
    text-align: center
}

#main #header .header-title {
    font-size: 1.4em;
    margin-bottom: 0.2em
}

#main #header .header-subtitle {
    font-size: 1em
}

#main #header .header-product {
    font-size: 1.2em
}

@media screen and (min-width:768px) {
    #main #header .header-title {
        font-size: 1.6em;
        margin-bottom: 0
    }

    #main #header .header-title-container {
        margin: 0
    }

    #main #header .header-product-container {
        text-align: right
    }
}

#main #content {
    padding: 2em 0;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#main #content .progress {
    height: 12px;
    border-radius: 25px;
    border: solid 1px var(--xxturquoise);
    background-color: transparent;
    width: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 0.1em
}

#main #content .progress .progress-bar {
    background-color: var(--xxturquoise)
}

#main #content #stepper ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none
}

#main #content #stepper ol .step-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#main #content #stepper ol .step-item .step-text {
    display: none;
    font-size: 0.75em;
    text-transform: uppercase
}

#main #content #stepper ol .step-item .step-indicator {
    height: 6px;
    border-radius: 25px;
    border: solid 1px var(--xxturquoise);
    background-color: transparent;
    width: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 0.1em
}

#main #content #stepper ol .step-item.active .step-indicator {
    margin: 0 !important;
    border: solid 4px var(--xxturquoise);
    background-color: var(--xxturquoise)
}

#main #content #stepper ol .step-item.completed .step-indicator {
    border: solid 1px var(--xxturquoise);
    background-color: var(--xxturquoise)
}

@media screen and (min-width:768px) {
    #main #content #stepper ol {
        gap: 4px
    }

    #main #content #stepper ol .step-item {
        -webkit-box-flex: unset;
        -ms-flex: unset;
        flex: unset
    }

    #main #content #stepper ol .step-item .step-text {
        display: block
    }

    #main #content #stepper ol .step-item .step-indicator {
        width: 120px;
        height: 5px
    }
}

#main #content .page-container {
    width: 100%
}

#main #content .page-container .page-title {
    font-size: 1.4em;
    margin: 4em 0 0
}

#main #content .page-container .page-paragraph {
    font-size: 1em
}

#main #content .alert-icon {
    width: 100%;
    max-width: 70px
}

#main #content .alert-container {
    border-radius: 25px;
    padding: 1.5em 2em
}

#main #content .alert-container .info-icon {
    width: 100%;
    max-width: 25px
}

#main #content .alert-container.alert-blue {
    background-color: var(--xxbluelight);
    border: 1px var(--xxblue) solid
}

#main #content .alert-container.alert-grey {
    background-color: var(--xxgreylight);
    border: 1px var(--xxgrey) solid
}

#main #content .alert-container.alert-yellow {
    background-color: var(--xxyellowlight);
    border: 1px var(--xxyellowdark) solid
}

#main #content .file-loader-text-header {
    max-width: 300px;
    margin: 0 auto
}

#main #content .file-loader-container {
    padding: 4em;
    border-radius: 25px;
    max-width: 400px;
    background-color: var(--xxgreylight)
}

#main #content .file-loader-container .file-loader-icon {
    width: 40px;
    height: auto
}

@media screen and (min-width:768px) {
    #main #content .file-loader-container {
        min-width: 300px
    }
}

#main #content .file-loader-container.dragging {
    border: 2px dashed var(--xxturquoise);
    background-color: #f0f8ff
}

#main #content .file-loader-container.error {
    background-color: var(--xxredlight) !important
}

#main #content .file-loader-container.error .file-loader-text {
    color: var(--xxreddark) !important
}

#main #content .file-loader-container.completed {
    background-color: var(--xxgreenlight) !important
}

#main #content .option-container {
    padding: 2em 4em;
    border-radius: 25px;
    max-width: 400px;
    background-color: var(--xxgreylight);
    min-height: 350px
}

#main #content .option-container .option-container-icon {
    width: 50px;
    height: auto
}

#main #content .option-container .option-container-title {
    font-size: 1.15em
}

#main #content .option-container .option-container-text {
    font-size: 0.8em
}

#main #content .option-container .option-container-text .highlighted-text {
    padding: 0.2em 0.4em;
    margin: 0 0.2em;
    border-radius: 5px
}

#main #content .option-container .option-container-label {
    padding: 0.4em 1em;
    font-size: 0.8em;
    border-radius: 15px;
    top: 0;
    left: 100px
}

#main #content .option-container .btn-link {
    font-size: 0.8em
}

#main #content .option-container.highlight {
    border: solid 2px var(--xxturquoise)
}

#main #content .external-frame-container {
    border: solid 6px var(--xxgreylight)
}

#main #content .spinner {
    margin-top: 6em
}

#main #content .icon-end {
    width: 65px;
    height: auto
}

#main #content .title-end {
    font-size: 1.4em
}

#main #content .picture-end {
    width: 100%;
    max-width: 350px
}

#footer {
    width: 100%;
    z-index: 30
}

#footer .footer-help {
    padding: 1.5em 0
}

#footer .footer-help .footer-help-title {
    margin: 0.2em
}

#footer .footer-help .footer-help-title a {
    color: var(--xxnavy) !important;
    text-decoration: underline !important
}

#footer .footer-legal {
    padding: 2em 0
}

#footer .footer-legal-text {
    font-size: 0.7em
}

#footer .footer-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

#footer .footer-links a,
#footer .footer-links span {
    color: var(--xxwhite) !important
}

#footer .footer-links a {
    text-decoration: underline !important
}

@media screen and (min-width:768px) {
    #footer .footer-links {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    #footer .footer-legal-text {
        font-size: 1em
    }
}