.card-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: rgba(var(--accent-color));
    padding: 2rem 0
}

@media screen and (max-width: 440px) {
    .card-page {
        padding: 0;
        background: #fff
    }
}

.blinq-card {
    max-width: 440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-radius: 12px;
    background: #fff;
    width: 100%;
    box-shadow: rgba(15, 15, 15, .05) 0px 0px 0px 1px, rgba(15, 15, 15, .1) 0px 3px 6px, rgba(15, 15, 15, .2) 0px 9px 24px
}

@media screen and (max-width: 440px) {
    .blinq-card {
        border-radius: 0;
        align-self: flex-start;
        box-shadow: none;
        min-height: 94%;
        min-height: 94dvh
    }

    .blinq-card[data-variant=full-height] {
        min-height: 100dvh
    }

    .blinq-card .card-header {
        border-radius: 0
    }

    .blinq-card .card-header .banner-image {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important
    }

    .blinq-card .links-and-notes {
        flex: 1 1 auto
    }
}

@media screen and (max-width: 440px) {
    .blinq-card-sib-override {
        margin-bottom: 8rem
    }
}

.card-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 24%;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px
}

.card-header[data-has-floating-images=true][data-floating-left=profile] {
    margin-bottom: 13.5%
}

.card-header[data-has-floating-images=true][data-floating-left=logo] {
    margin-bottom: 10%
}

.card-header[data-has-floating-images=false] {
    margin-bottom: 0%
}

.card-header::after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 20px;
    background: linear-gradient(to top, rgba(22, 29, 37, 0.05), transparent)
}

.card-header .circle-container {
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    max-height: 7rem
}

.card-header[data-image-type=logo], .card-header[data-image-type=cover] {
    padding-top: 56%
}

.card-header[data-image-type=profile] {
    background: #fff;
    padding-top: 75%
}

@media screen and (max-width: 440px) {
    .card-header {
        border-radius: 0
    }

    .card-header .circle-container {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px
    }
}

.card-header .banner-image {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-position: center center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    left: 0px;
    top: 0px
}

.card-header .banner-image[data-editor-version=none][data-image-type=logo] {
    padding: 5% 10px;
    max-width: 80%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%
}

.card-header .banner-image[data-image-type=cover], .card-header .banner-image[data-image-type=logo]:not([data-editor-version=none]) {
    object-fit: cover
}

.card-header .banner-image[data-image-type=profile] {
    object-fit: cover
}

.card-header .circle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgb(var(--card-color));
    transition: background .2s
}

.card-header .circle-container:hover:before {
    transform: translate(-50%, -50%) scale(1.04)
}

.card-header .circle-container:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgb(var(--card-color));
    mix-blend-mode: screen;
    opacity: .38;
    width: 75%;
    padding-top: 75%;
    transform-origin: center;
    transition: transform .2s;
    transition: background .2s
}

.card-header .blinq-icon {
    position: absolute;
    color: #fff;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    font-size: 180px;
    font-size: 2rem
}

.banner-image-container {
    width: 100%
}

.left-picture {
    transition: box-shadow .2s, opacity .2s;
    position: absolute;
    background: #fff;
    transform-origin: center;
    will-change: transform;
    z-index: 2;
    left: 5%
}

.left-picture[data-image-type=profile] {
    width: 27%;
    padding-top: 27%;
    border-radius: 50%
}

.left-picture[data-image-type=logo] {
    width: 35.5555555556%;
    padding-top: 20%;
    border-radius: 5px
}

.left-picture:hover {
    transition: transform .2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .1);
    transform: scale(1.02)
}

.left-picture .left-picture-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    box-shadow: 0 2px 4px 0 rgba(22, 29, 37, .1)
}

.left-picture[data-image-type=logo] .left-picture-img {
    border-radius: 5px
}

.left-picture[data-image-type=profile] .left-picture-img {
    border-radius: 50%
}

.left-picture[data-image-type=profile]::before {
    content: "";
    background-color: #fff;
    width: calc(100% + 2 * 3px);
    height: calc(100% + 2 * 3px);
    position: absolute;
    left: -3px;
    bottom: -3px;
    border-radius: 50%
}

.left-picture[data-image-type=logo]::before {
    content: "";
    background-color: #fff;
    width: calc(100% + 2 * 3px);
    height: calc(100% + 2 * 3px);
    position: absolute;
    left: -3px;
    bottom: -3px;
    border-radius: 7px
}

.right-picture {
    border-radius: 5px;
    transition: box-shadow .2s, opacity .2s;
    position: absolute;
    background: #fff;
    transform-origin: center;
    will-change: transform;
    z-index: 2;
    right: 5%;
    width: 35.5555555556%;
    padding-top: 20%
}

.right-picture:hover {
    transition: transform .2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .1);
    transform: scale(1.02)
}

.right-picture .right-picture-img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(22, 29, 37, .1);
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center
}

.right-picture::before {
    content: "";
    background-color: #fff;
    width: calc(100% + 2 * 3px);
    height: calc(100% + 2 * 3px);
    position: absolute;
    left: -3px;
    bottom: -3px;
    border-radius: 7px
}

.user-details {
    margin: 1.5rem;
    overflow-wrap: break-word
}

.user-details .user-identity {
    margin-bottom: .5rem
}

.user-details .user-name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    display: inline
}

.user-details .user-pronouns {
    font-size: 1.125rem;
    font-weight: 500;
    font-style: italic;
    color: var(--neutral-700);
    display: inline
}

.user-details .user-job-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .25rem;
    white-space: pre-wrap
}

.user-details .user-department {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .25rem;
    white-space: pre-wrap
}

.user-details .user-company {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: pre-wrap
}

.user-details .user-headline {
    margin-top: .75rem;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--neutral-700);
    white-space: pre-wrap
}

.user-accreditations-container {
    margin-top: .375rem
}

.user-accreditations {
    list-style: none;
    padding-top: .25rem;
    padding-bottom: .25rem;
    display: inline-flex;
    flex-wrap: wrap;
    margin: -0.5rem 0 0 -0.5rem
}

.user-accreditations > li {
    margin: .5rem 0 0 .5rem
}

.user-accreditations .accreditation {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1;
    font-weight: 700;
    background: var(--neutral-200);
    border-radius: .25rem;
    transition: background .2s
}

.user-accreditations .accreditation:hover {
    background: var(--neutral-300)
}

.detail-list {
    display: flex;
    flex-direction: column;
    list-style: none
}

.detail-list .detail-item {
    min-height: 54px;
    display: flex;
    align-items: center;
    transition: background .2s;
    margin: 0;
    width: 100%;
    padding: .25rem 1.5rem;
    text-decoration: none;
    color: inherit
}

.detail-list .detail-item:hover {
    background: rgba(var(--card-color), 0.05)
}

.detail-list .detail-icon-circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: rgb(var(--card-color));
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .2s;
    flex: 0 0 auto;
    color: var(--contrasting-color);
    font-size: 1.25rem
}

.detail-list .detail-icon-circle:hover {
    background: rgba(var(--card-color), 0.82)
}

.detail-list .detail-icon-circle .detail-icon {
    color: inherit
}

.detail-list .detail-data {
    display: flex;
    margin-left: .875rem;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    overflow: hidden
}

.detail-list .detail-data-value {
    font-size: 1rem;
    font-weight: 700;
    width: 100%;
    line-height: 1.4;
    display: flex;
    align-items: baseline
}

.detail-list .detail-data-value[data-type=email] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.detail-list .detail-data-value[data-type=address], .detail-list .detail-data-value[data-type=url] {
    white-space: pre-wrap;
    word-break: break-word
}

.detail-list .detail-data-subvalue {
    color: var(--neutral-600);
    font-weight: 500;
    font-size: .875rem;
    margin-left: .375rem
}

.detail-list .detail-data-value + .detail-data-label {
    margin-top: .125rem
}

.detail-list .detail-data-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--neutral-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    line-height: 1
}

.extra-information-list {
    display: flex;
    flex-direction: column;
    list-style: none
}

.extra-information-list .extra-information-item {
    min-height: 54px;
    display: flex
}

.extra-information-list .extra-information-icon-circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid rgb(var(--card-color));
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 7px
}

.extra-information-list .extra-information-icon-circle .extra-information-icon {
    font-size: 1.25rem;
    color: rgb(var(--card-color))
}

.extra-information-list .extra-information-value {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--neutral-700);
    align-self: center
}

.save-btn-container {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 40%);
    padding: 1.5rem 2rem 1.75rem;
    z-index: 1;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px
}

.save-btn-container[data-show-border=true] {
    border-top: 1px solid var(--primary-200)
}

@media screen and (max-width: 440px) {
    .save-btn-container-sib-override {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0
    }
}

.save-btn-sentinel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    visibility: hidden
}

.save-btn {
    max-width: 220px;
    width: 100%;
    position: relative;
    height: 3.5rem;
    padding: .75rem 2.5rem;
    border-radius: 80px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: .3px;
    background: rgb(var(--card-color));
    color: var(--contrasting-color);
    border: unset;
    box-shadow: 0 1px 5px 0 rgba(82, 93, 102, .25), 0 2px 8px 0 rgba(82, 93, 102, .15);
    display: flex;
    justify-content: center;
    align-items: center
}

.save-btn:focus {
    outline: none
}

.save-btn:hover {
    background: rgba(var(--card-color), 0.82)
}

.save-btn .save-contact-icon {
    color: inherit;
    margin-right: .5rem
}

.save-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 80px;
    background: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    background: rgba(var(--card-color), 0.8);
    animation: ripples 3s ease-in 3;
    z-index: -1
}

@keyframes ripples {
    0% {
        transform: scale(1, 1);
        opacity: 0
    }

    25% {
        opacity: .25
    }

    50% {
        transform: scale(1.1, 1.5);
        opacity: 0
    }

    100% {
        transform: scale(1.1, 1.5);
        opacity: 0
    }
}

.blinq-input {
    position: relative;
    font-size: 1rem;
    display: flex;
    background: inherit
}

.blinq-input[data-size=large] {
    font-size: 1.75rem
}

.blinq-input[data-size=large] .error-text {
    bottom: .25em;
    font-size: 1rem
}

.blinq-input[data-contained=true] .label-text {
    transform: translate(0.75rem, 1rem) scale(1)
}

.blinq-input[data-contained=true] .label-text.active {
    transform: translate(0.5rem, -0.25rem) scale(0.75);
    transform-origin: top left;
    padding: 0 .5rem
}

.blinq-input[data-contained=true] .input-el {
    border: 1px solid var(--neutral-400);
    border-radius: 4px;
    padding: .75rem .75rem
}

.blinq-input[data-contained=true] .input-el:disabled {
    border: 1px solid var(--neutral-300)
}

.blinq-input[data-contained=true] .input-el:focus {
    border: 1px solid var(--primary-300)
}

.blinq-input[data-contained=true] .input-el:focus + .label-text {
    transform: translate(0.5rem, -0.25rem) scale(0.75);
    transform-origin: top left;
    padding: 0 .5rem
}

.blinq-input[data-contained=true][data-error] .input-el {
    border: 1px solid var(--danger-200)
}

.blinq-input[data-contained=true][data-error] .input-el:focus {
    border: 1px solid var(--danger-300)
}

.blinq-input[data-contained=false] .input-container:focus-within:after {
    transform: scaleX(1)
}

.blinq-input[data-contained=false][data-error] .input-container:after {
    transform: scaleX(1)
}

.blinq-input[data-contained=false] .label-text.active {
    transform: translate(-0.25rem, -0.75rem) scale(0.75);
    transform-origin: top left;
    padding: 0 .5rem;
    white-space: nowrap
}

.blinq-input[data-error] .input-container:after {
    border-bottom: 1px solid var(--danger-700)
}

.blinq-input .input-container {
    width: 100%;
    background: inherit;
    margin-top: 1em;
    margin-bottom: 1em;
    position: relative
}

.blinq-input .input-container:after {
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    transform: scaleX(0);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    pointer-events: none;
    border-bottom: 1px solid #000
}

.blinq-input .label-text {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0.5rem) scale(1);
    z-index: 2;
    line-height: 1;
    background: inherit;
    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    color: var(--neutral-400)
}

.blinq-input .input-el {
    position: relative;
    border: none;
    width: 100%;
    line-height: 1.25rem;
    padding: .375rem .125rem;
    border-bottom: 1px solid var(--neutral-300);
    background: #fff;
    color: var(--neutral-900);
    border-radius: 0;
    margin: 0;
    -webkit-appearance: none;
    -webkit-transform: translate3d(0, 0, 0)
}

.blinq-input .input-el:disabled {
    color: var(--neutral-500);
    cursor: not-allowed;
    border-bottom: 1px solid var(--neutral-300)
}

.blinq-input .input-el:disabled + .label-text {
    color: var(--neutral-200)
}

.blinq-input .input-el:focus {
    outline: none
}

.blinq-input .input-el:focus + .label-text {
    transform: translate(-0.25rem, -0.75rem) scale(0.75);
    transform-origin: top left;
    padding: 0 0 0 .5rem;
    color: var(--neutral-600)
}

.blinq-input .input-el:invalid {
    box-shadow: none
}

.blinq-input .input-el::placeholder {
    color: var(--neutral-400)
}

.blinq-input .error-text {
    display: none;
    pointer-events: none;
    position: absolute;
    bottom: -1rem;
    right: 0;
    font-size: .75rem;
    line-height: 1;
    font-weight: 600;
    color: var(--danger-700)
}

.blinq-input[data-error] .error-text {
    display: block;
    animation-name: error-text-appear;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out
}

.blinq-input[data-validation-error] .validation-error-text {
    display: block;
    animation-name: error-text-appear;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out
}

.blinq-input .reveal-password-toggle-container {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--neutral-400);
    appearance: none;
    padding: 0;
    background: rgba(0, 0, 0, 0);
    border: none
}

.blinq-input .reveal-password-toggle-container > svg {
    height: 18px
}

.blinq-input .clear-btn {
    position: absolute;
    color: var(--neutral-400);
    font-size: .875rem;
    padding: .25rem .75rem .25rem .5rem;
    right: 1px;
    height: calc(100% - 2px);
    top: 1px;
    transition: background .2s, color .2s;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
}

.blinq-input .clear-btn:hover {
    background: var(--neutral-100);
    color: var(--neutral-500)
}

@keyframes error-text-appear {
    0% {
        transform: translateX(-3%);
        opacity: .01
    }

    20% {
        transform: translateX(-1%);
        opacity: .9
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.modal {
    --header-line-height: 1.75rem;
    --header-font-size: 1.25rem;
    --header-margin-top: 2rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2rem;
    margin: auto;
    will-change: top, opacity;
    max-width: 540px;
    max-height:680px;
    background: #fff;
    padding-bottom: 2rem;
    z-index: 1000;
    display: none;
    box-shadow: rgba(15, 15, 15, .05) 0px 0px 0px 1px, rgba(15, 15, 15, .1) 0px 3px 6px, rgba(15, 15, 15, .2) 0px 9px 24px;
    transition: box-shadow .2s;
    -webkit-overflow-scrolling: touch
}

.modal.fit-to-card {
    max-width: 440px
}

.modal:not(.bottom-sheet) {
    max-height: 90%;
    width: 85%;
    border-radius: 8px;
    height: max-content;
    top: 0;
    bottom: 0
}

.modal.bottom-sheet {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    bottom: -100%
}

.modal.app-clip-bottom-sheet {
    border-radius: 40px;
    margin: .5rem;
    padding-bottom: 1.75rem
}

@media screen and (min-width: 450px) {
    .modal.app-clip-bottom-sheet {
        margin: 0 auto .5rem auto
    }
}

.modal:hover {
    box-shadow: rgba(15, 15, 15, .02) 0px 0px 0px 1px, rgba(15, 15, 15, .05) 0px 3px 6px, rgba(15, 15, 15, .1) 0px 9px 24px
}

.modal.y-scroll-enabled {
    overflow-y: auto
}

.modal .modal-content {
    padding: 1rem 0 0;
    position: relative
}

.modal .image-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #dadde5;
    height: 40vh;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px
}

.modal .image-container img {
    max-height: 90%;
    max-width: 260px
}

.modal .device-frame-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dadde5;
    height: 40vh;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative
}

@media screen and (min-height: 550px) {
    .modal .device-frame-container {
        height: 42vh
    }
}

@media screen and (min-height: 660px) {
    .modal .device-frame-container {
        height: 46vh
    }
}

@media screen and (min-height: 844px) {
    .modal .device-frame-container {
        height: 48vh
    }
}

.modal .sample-cards-carousel {
    display: flex;
    max-width: 440px;
    overflow-x: scroll;
    height: 50vh;
    padding-left: 1.5rem;
    padding-bottom: 2rem
}

.modal .sample-cards-carousel img {
    padding-right: .5rem;
    height: auto;
    width: auto;
    max-height: 100%
}

.modal .sample-cards-carousel img:last-of-type {
    padding-right: 1.5rem
}

.modal .modal-header {
    margin: var(--header-margin-top) 1rem;
    font-size: var(--header-font-size);
    font-weight: 600;
    padding: 0 1rem;
    line-height: var(--header-line-height);
    display: block
}

.modal .modal-header.large {
    font-size: 1.5rem;
    line-height: 1.3
}

.modal[data-show-to-top] .scroll-to-top-btn {
    display: block
}

.modal .modal-header-section {
    position: relative
}

.modal .scroll-to-top-btn {
    display: none;
    position: absolute;
    bottom: .375rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .125rem .5rem;
    border-radius: .25rem;
    line-height: 1;
    font-size: .75rem;
    transition: background .3s;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--primary-400)
}

.modal .scroll-to-top-btn:focus {
    outline: none
}

.modal .scroll-to-top-btn:hover {
    background: var(--primary-100)
}

.modal .modal-explainer {
    padding: 0 2rem
}

.modal .modal-scrollable-content {
    overflow: auto;
    position: relative;
    overscroll-behavior-y: contain;
    width: 100%
}

.modal .scroll-sentinel {
    top: 2rem
}

.modal .modal-form-inputs {
    padding-top: .5rem
}

.modal .modal-close-button {
    font-size: 1.25rem;
    margin-left: auto;
    color: var(--neutral-800);
    border-radius: 50%;
    display: flex;
    position: absolute;
    right: .5rem;
    top: .5rem;
    height: 48px;
    width: 48px;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.modal .modal-close-button:hover {
    background: var(--neutral-200)
}

.modal .modal-close-button:focus {
    outline: none
}

.modal .enlarged-icon {
    font-size: 1.5rem
}

.modal .modal-skip-button {
    display: none;
    font-size: 1rem;
    font-weight: 600;
    margin-left: auto;
    color: var(--neutral-900);
    border-radius: 8px;
    position: absolute;
    right: .5rem;
    top: .5rem;
    height: 48px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.modal .modal-skip-button:hover {
    background: var(--neutral-200)
}

.modal .modal-skip-button:focus {
    outline: none
}

.modal .modal-back-button {
    font-size: 1.25rem;
    color: var(--neutral-800);
    border-radius: 50%;
    display: flex;
    position: absolute;
    left: .5rem;
    top: .5rem;
    height: 48px;
    width: 48px;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.modal .modal-back-button:hover {
    background: var(--neutral-200)
}

.modal .modal-back-button:focus {
    outline: none
}

.modal .modal-header-title {
    font-size: 1rem;
    font-weight: 600;
    position: absolute;
    left: 3.5rem;
    right: 3.5rem;
    text-align: center;
    top: .5rem;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.modal .modal-image-container {
    display: block
}

.modal .modal-image {
    object-fit: contain;
    width: 100%;
    max-width: 80%
}

.modal .modal-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 1.25rem
}

.get-blinq-modal-height-override {
    max-height: 97dvh
}

.frame-wrapper {
    width: 40%;
    position: absolute;
    top: 10%
}

@media screen and (min-height: 560px) {
    .frame-wrapper {
        width: 50%
    }
}

@media screen and (min-height: 660px) {
    .frame-wrapper {
        width: 57%
    }
}

@media screen and (min-height: 844px) {
    .frame-wrapper {
        width: 70%
    }
}

.overlay {
    position: fixed;
    z-index: 999;
    top: -25%;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: rgba(82, 93, 102, .5);
    display: none;
    will-change: opacity
}

.overlay.show {
    display: block
}

.overlay[data-variant=top-level] {
    background: rgba(2, 2, 2, .5);
    z-index: 1001
}

.blinq-button {
    align-content: center;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    cursor: pointer;
    box-sizing: border-box;
    border: none;
    border-radius: 80px;
    transition: all .3s;
    display: inline-flex;
    white-space: nowrap;
    font-size: .875rem;
    padding: .5rem 1.25rem;
    color: inherit;
    background: #fff;
    position: relative;
    width: 100%
}

.blinq-button[data-is-full-width=false] {
    width: fit-content
}

.blinq-button[data-loading=false] > :not(:last-child) {
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: ease-out
}

.blinq-button[data-loading=true] > :not(:last-child) {
    animation-name: button-text-out;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: ease-out
}

@keyframes button-text-out {
    from {
        transform: translateY(0) scale(1);
        opacity: 1
    }

    99% {
        transform: translateY(50%) scale(0.9);
        opacity: 0;
        visibility: visible
    }

    to {
        transform: translateY(50%) scale(0.9);
        opacity: 0;
        visibility: hidden
    }
}

@keyframes button-text-in {
    from {
        transform: translateY(50%) scale(0.9);
        opacity: 0;
        visibility: hidden
    }

    1% {
        transform: translateY(50%) scale(0.9);
        opacity: 0;
        visibility: visible
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}

.blinq-button[data-loading=true] .loader-container {
    visibility: visible;
    opacity: 1;
    transition-delay: .2s
}

.blinq-button[data-type=primary] {
    --button-color: var(--primary-500);
    --filled-highlight-color: var(--primary-400);
    --hollow-highlight-color: var(--primary-600)
}

.blinq-button[data-type=black] {
    --button-color: white;
    --filled-highlight-color: white;
    --hollow-highlight-color: white
}

.blinq-button[data-type=danger] {
    --button-color: var(--primary-700);
    --filled-highlight-color: var(--primary-600);
    --hollow-highlight-color: var(--primary-800)
}

.blinq-button[data-type=default] {
    --button-color: var(--neutral-600);
    --filled-highlight-color: var(--neutral-500);
    --hollow-highlight-color: var(--neutral-700)
}

.blinq-button[data-variant=primary] {
    background: var(--button-color);
    color: #fff;
    border: 1px solid var(--button-color)
}

.blinq-button[data-variant=primary] .button-icon {
    color: #fff
}

.blinq-button[data-variant=primary]:not([disabled]):hover {
    background: var(--filled-highlight-color);
    border: 1px solid var(--filled-highlight-color)
}

.blinq-button[data-variant=secondary] {
    --button-color: #413939;
    --border-color: #d0cece;
    background: #fff;
    color: var(--button-color);
    border: 1px solid var(--border-color);
    border-radius: 8px
}

.blinq-button[data-variant=secondary]:not([disabled]):hover {
    background: #f3f3f3;
    color: var(--button-color);
    border: 1px solid var(--border-color)
}

.blinq-button[data-variant=secondary]:not([disabled]):hover .button-icon {
    color: var(--button-color)
}

.blinq-button[data-variant=subtle] {
    background: #fff;
    color: var(--button-color);
    border: 1px solid var(--neutral-300)
}

.blinq-button[data-variant=subtle]:not([disabled]):hover {
    background: rgba(var(--neutral-100), 0.5);
    border: 1px solid var(--neutral-400)
}

.blinq-button[data-variant=text] {
    background: #fff;
    color: var(--button-color);
    border: 1px solid rgba(0, 0, 0, 0)
}

.blinq-button[data-variant=text]:not([disabled]):hover {
    background: var(--neutral-100)
}

.blinq-button[data-size=large] {
    font-size: 1.125rem;
    height: 3.5rem;
    padding: .5rem 1.5rem;
    font-weight: 700
}

@media screen and (max-width: 350px) {
    .blinq-button[data-size=large] {
        font-size: 1rem;
        height: 2.625rem;
        padding: .5rem 1.125rem;
        font-weight: 600
    }
}

.blinq-button[data-size=medium] {
    font-size: 1rem;
    height: 2.625rem;
    padding: .5rem 1.125rem;
    font-weight: 600
}

.blinq-button[data-size=small] {
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .625rem 1.25rem
}

.blinq-button[data-size=inline] {
    font-size: .875rem;
    line-height: 1rem;
    padding: .375rem 1rem;
    border-radius: .375rem
}

.blinq-button[data-size=tiny] {
    font-size: .875rem;
    line-height: 1rem;
    padding: .375rem .625rem;
    border-radius: .375rem
}

.blinq-button[data-variant=subtle][disabled], .blinq-button[data-variant=secondary][disabled], .blinq-button[data-variant=primary][disabled] {
    background: #fff;
    color: var(--neutral-400);
    cursor: not-allowed;
    border: 1px solid var(--neutral-300)
}

.blinq-button[data-variant=subtle][disabled] {
    color: var(--neutral-400);
    cursor: not-allowed
}

.blinq-button[data-variant=black] {
    color: #fff;
    background-color: #000;
    border-radius: 8px
}

.blinq-button[data-variant=text]:focus {
    outline: 1px solid var(--filled-highlight-color)
}

.blinq-button:focus {
    outline: none
}

.blinq-button:focus[data-variant=primary] {
    background: var(--filled-highlight-color);
    border: 1px solid var(--filled-highlight-color)
}

.blinq-button:focus[data-variant=secondary]:not([disabled]) {
    background: #e7e6e6;
    color: var(--button-color);
    border: 1px solid var(--border-color)
}

.blinq-button:focus[data-variant=secondary]:not([disabled]) .button-icon {
    color: #fff
}

.blinq-button:focus[data-variant=subtle]:not([disabled]) {
    background: rgba(var(--neutral-100), 0.5);
    border: 1px solid var(--neutral-400)
}

.blinq-button .button-content {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    overflow: hidden
}

.blinq-button .loader-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0
}

.blinq-button .button-icon {
    font-size: 1.25rem;
    margin-right: .75rem;
    display: inline-flex;
    line-height: 1.25rem;
    align-items: center;
    color: var(--button-color, white);
    transition: color .3s
}

.blinq-button .button-icon svg path {
    fill: currentcolor
}

.blinq-button .button-icon i {
    font-size: .875rem;
    position: relative;
    top: 3px
}

.marvel-device {
    display: inline-block;
    position: relative;
    box-sizing: content-box !important
}

.screen {
    width: calc(100% - 9.3137254902%);
    position: absolute;
    height: calc(100% - 4.3329532497%);
    top: 2.1664766249%;
    z-index: 3;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 1px;
    box-shadow: 0 0 0 3px #111;
    isolation: isolate;
    transform: translateZ(1px)
}

.top-bar, .bottom-bar {
    height: 3px;
    background: #000;
    width: 100%;
    display: block
}

.middle-bar {
    width: 3px;
    height: 4px;
    top: 0px;
    left: 90px;
    background: #000;
    position: absolute
}

.iphone-14 {
    display: inline-block;
    position: relative;
    box-sizing: content-box !important;
    width: 100%;
    padding-top: 214.9509803922%;
    background: #fdfdfd;
    box-shadow: inset 0 0 11px 0 #000;
    border-radius: 16.1764705882%/7.5256556442%
}

.iphone-14 .iphone-14-content {
    padding: 4.6568627451%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.iphone-14 .overflow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 16.1764705882%/7.5256556442%;
    overflow: hidden
}

.iphone-14 .shadow {
    border-radius: 100%;
    width: 90px;
    height: 90px;
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%)
}

.iphone-14 .shadow--tl {
    top: -20px;
    left: -20px
}

.iphone-14 .shadow--tr {
    top: -20px;
    right: -20px
}

.iphone-14 .shadow--bl {
    bottom: -20px;
    left: -20px
}

.iphone-14 .shadow--br {
    bottom: -20px;
    right: -20px
}

.iphone-14:before {
    width: calc(100% - 1.9607843137%);
    height: calc(100% - 0.9122006842%);
    position: absolute;
    top: .4561003421%;
    content: "";
    left: .9803921569%;
    border-radius: 16.1764705882%/7.5256556442%;
    background: #000;
    z-index: 1
}

.iphone-14 .screen {
    border-radius: 13.4803921569%/6.2713797035%;
    box-shadow: none;
    padding-top: calc(0.0684150513 * 100% + 2px)
}

.iphone-14 .volume, .iphone-14 .volume:before, .iphone-14 .volume:after, .iphone-14 .sleep {
    width: 3px;
    background: #b5b5b5;
    position: absolute
}

.iphone-14 .volume {
    left: -3px;
    top: 13.2269099202%;
    height: 3.6488027366%
}

.iphone-14 .volume:before {
    height: 221.875%;
    top: 180%;
    content: "";
    left: 0
}

.iphone-14 .volume:after {
    height: 221.875%;
    top: 540%;
    content: "";
    left: 0
}

.iphone-14 .sleep {
    height: 12.086659065%;
    top: 28.9623717218%;
    right: -3px
}

.iphone-14 .camera {
    width: 5.6451612903%;
    height: 19.4444444444%;
    top: 41.6666666667%;
    border-radius: 100%;
    position: absolute;
    left: 82.2580645161%;
    background: #0d4d71
}

.iphone-14 .notch {
    position: absolute;
    width: 30.3921568627%;
    height: 4.1049030787%;
    top: 3.4207525656%;
    left: calc((100% - 30.3921568627%) / 2);
    z-index: 4;
    background: #000;
    border-bottom-left-radius: 19.3548387097% 66.6666666667%;
    border-bottom-right-radius: 19.3548387097% 66.6666666667%;
    border-top-left-radius: 19.3548387097% 66.6666666667%;
    border-top-right-radius: 19.3548387097% 66.6666666667%
}

.toast-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1rem 0;
    z-index: 9000
}

.toast-container .toast {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    gap: .5rem;
    padding: .625rem;
    border-radius: .75rem;
    background: #e6f2ed;
    font-size: 1rem;
    box-shadow: 0px 16px 48px rgba(0, 0, 0, .22)
}

.toast-container .toast.error {
    background: #fae9e7
}

.toast-container .toast .toast-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .5rem;
    margin-right: .5rem
}

.toast-container .toast .messages-container {
    display: inline-block;
    line-height: 1.5rem;
    flex: 1;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--neutral-800)
}

.mock-ios-create-new-contact {
    position: absolute;
    width: calc(100% - 2rem);
    border-radius: .5rem;
    background: #fff;
    color: var(--default-ios-blue);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 1rem .5rem;
    text-align: start;
    z-index: 9000
}

.mock-ios-create-new-contact::after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    background: #fff;
    top: -0.5rem;
    left: -0.5rem;
    border-radius: 1rem;
    z-index: -1;
    opacity: .2
}

.mock-ios-native-contact {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600
}

.mock-ios-native-contact .white-shadow {
    height: 100%;
    background: #fff;
    margin: .5rem 1rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

.mock-ios-native-contact .contact-sheet {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 1rem)
}

.mock-ios-native-contact .contact-sheet .basic-details-section {
    background: #4c5151;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
    padding-bottom: 1rem;
    color: #fff;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

.mock-ios-native-contact .contact-sheet .basic-details-section .name-container {
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    align-items: start;
    padding: .5rem
}

.mock-ios-native-contact .contact-sheet .basic-details-section .name-container .name {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    font-size: .75rem
}

.mock-ios-native-contact .contact-sheet .basic-details-section .name-container .name .profile-picture {
    background: #f2f2f7;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-bottom: .25rem
}

.mock-ios-native-contact .contact-sheet .basic-details-section .name-container .upload-button {
    width: 1.5rem;
    justify-self: end
}

.mock-ios-native-contact .contact-sheet .basic-details-section .utilities-container {
    display: flex;
    gap: .5rem
}

.mock-ios-native-contact .contact-sheet .basic-details-section .utilities-container .utility {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    background: #505757;
    border-radius: .5rem;
    opacity: 1;
    flex: 1
}

.mock-ios-native-contact .contact-sheet .basic-details-section .utilities-container .utility img {
    width: 1.5rem;
    height: 1.5rem
}

.mock-ios-native-contact .contact-sheet .basic-details-section .utilities-container .utility p {
    font-size: .5rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #f2f2f7;
    height: 100%;
    overflow-y: scroll;
    padding: .5rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
    padding: 1rem;
    font-weight: 500;
    border-radius: .5rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .fields-container {
    display: flex;
    gap: .25rem;
    flex-direction: column
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .fields-container[variant=horizontal] {
    flex-direction: row;
    justify-content: space-between
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .skeleton-field {
    background: #f2f2f7;
    height: .75rem;
    border-radius: .5rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .skeleton-field[variant=short] {
    width: 7rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .skeleton-field[variant=medium] {
    width: 10rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .skeleton-field[variant=long] {
    width: 12rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .divider {
    width: 100%;
    height: 1px;
    background: #f2f2f7
}

.mock-ios-native-contact .contact-sheet .contact-details-section .detail-box .location-map {
    width: 5rem;
    height: 5rem
}

.mock-ios-native-contact .contact-sheet .contact-details-section .dummy-box {
    visibility: hidden;
    min-height: 100vh
}

.mock-ios-native-contact .mock-ios-blue-text {
    color: var(--default-ios-blue)
}

.tutorial-popover {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    z-index: 9000
}

.tutorial-popover .emphasized-text {
    color: var(--primary-500)
}

.tutorial-popover .got-it-button {
    margin-top: .5rem
}

.tutorial-popover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2rem;
    width: 1.25rem;
    height: 1.25rem;
    transform: rotate(45deg);
    transform-origin: 0 0;
    background: #fff;
    z-index: -1
}

.adaptive-sharing-buttons-container {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .5rem;
    flex-direction: row;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(5px);
    padding: .75rem 1rem .75rem;
    transition: box-shadow .2s ease-in-out
}

.adaptive-sharing-buttons-container[data-show-box-shadow] {
    box-shadow: 0px -13px 20px 0px rgba(40, 45, 59, .15)
}

.adaptive-sharing-buttons-container .blinq-button[data-variant=primary] {
    background-color: rgba(var(--card-color));
    border-color: rgba(var(--card-color))
}

.adaptive-sharing-buttons-container .blinq-button[data-variant=primary]:focus {
    outline: none
}

.adaptive-sharing-buttons-container .blinq-button[data-variant=primary]:hover {
    background: rgba(var(--card-color), 0.82);
    border-color: rgba(var(--card-color), 0.82)
}

.blinq-text-field {
    position: relative
}

.blinq-text-field .error-text {
    display: none;
    align-self: flex-start;
    margin-top: .3125rem;
    pointer-events: none;
    font-size: .875rem;
    line-height: 1;
    color: var(--danger-700);
    font-weight: 600
}

.blinq-text-field[data-error] .error-text {
    position: absolute;
    display: block;
    animation-name: error-text-appear;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out
}

.blinq-text-field .text-field-input:focus-visible:not(:placeholder-shown) ~ .text-fieldset, .blinq-text-field .text-field-input:focus:not(:placeholder-shown) ~ .text-fieldset {
    border: 2px solid #000
}

.blinq-text-field .text-field-input:hover:not(:focus):not(:focus-visible):placeholder-shown {
    outline: 2px solid #000;
    outline-offset: -2px;
    border-color: rgba(0, 0, 0, 0)
}

.blinq-text-field .text-field-input:not(:placeholder-shown), .blinq-text-field .text-field-input:focus {
    outline: 0px;
    border-color: rgba(0, 0, 0, 0)
}

.blinq-text-field .text-field-input:not(:placeholder-shown) ~ .text-fieldset {
    border: 1px solid var(--neutral-300)
}

.blinq-text-field .text-field-input:focus ~ .text-fieldset {
    border: 2px solid #000
}

.blinq-text-field .text-field-input:not(:placeholder-shown) ~ .text-fieldset > .text-fieldset-legend, .blinq-text-field .text-field-input:focus ~ .text-fieldset > .text-fieldset-legend {
    transform: none
}

.blinq-text-field .text-field-input:not(:placeholder-shown) ~ .text-fieldset > .text-fieldset-legend > .text-field-label, .blinq-text-field .text-field-input:focus ~ .text-fieldset > .text-fieldset-legend > .text-field-label {
    font-size: .75rem;
    color: var(--neutral-800);
    font-weight: 700
}

.blinq-text-field[data-error] .text-field-input:not(:focus):not(:focus-visible) {
    border-color: var(--danger-700)
}

.blinq-text-field[data-error] .text-field-input:focus ~ .text-fieldset, .blinq-text-field[data-error] .text-field-input:focus-visible ~ .text-fieldset {
    border-color: var(--danger-700)
}

.blinq-text-field[data-error] .text-field-input:hover:not(:focus):not(:focus-visible):placeholder-shown {
    border: 1px solid var(--danger-700)
}

.blinq-text-field[data-error] .text-field-input:focus-visible ~ .text-fieldset, .blinq-text-field[data-error] .text-field-input:focus ~ .text-fieldset {
    border: 2px solid #000
}

.blinq-text-field.initially-hidden {
    display: none
}

.text-fieldset {
    padding: 0;
    margin: 0;
    border-radius: .5rem;
    text-align: start;
    position: absolute;
    pointer-events: none;
    top: -10px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: border-color .2s ease
}

.text-field-input {
    width: 100%;
    padding: 1rem;
    border-radius: .5rem;
    outline: none;
    border: 1px solid var(--neutral-300);
    transition: border-color .2s ease
}

.text-field-input::placeholder {
    opacity: 0
}

.text-fieldset-legend {
    font-size: 1rem;
    margin-left: .75rem;
    transform: translateY(calc(100% + 0.5rem));
    transition: all .2s ease;
    padding-left: 4px;
    padding-right: 4px
}

.text-field-input:not(:placeholder-shown), .text-field-input:focus {
    outline: 0px;
    border-color: rgba(0, 0, 0, 0)
}

.text-field-label {
    cursor: text;
    color: var(--neutral-800);
    font-size: 1rem;
    transition: font-size .2s ease
}

@keyframes error-text-appear {
    0% {
        transform: translateX(3%);
        opacity: .01
    }

    20% {
        transform: translateX(1%);
        opacity: .9
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.speech-bubble {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .125rem;
    padding: 1rem 1.125rem;
    background: var(--neutral-50);
    border-radius: 1.5rem;
    font-size: .875rem;
    line-height: 1rem;
    text-align: start;
    align-self: center
}

.speech-bubble .message {
    font-weight: 600;
    transition: all .3s ease-in-out;
    font-size: 18px;
    line-height: 22px
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: .25rem;
    left: -0.125rem;
    width: 0;
    height: 0;
    border-left: 1rem solid rgba(0, 0, 0, 0);
    border-right: 1rem solid rgba(0, 0, 0, 0);
    border-bottom: 2rem solid var(--neutral-50);
    z-index: -1
}

.speech-bubble .three-dots-loader {
    top: 50%;
    left: 1rem;
    position: absolute
}

.speech-bubble[data-is-loading=true] .three-dots-loader {
    opacity: 1
}

.speech-bubble[data-is-loading=true] .message {
    opacity: 0;
    transform: translateY(60%)
}

.speech-bubble[data-is-loading=false] .three-dots-loader {
    opacity: 0
}

.speech-bubble[data-is-loading=false] .message {
    opacity: 1;
    transform: translateY(0%)
}

.three-dots-loader {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: fit-content;
    gap: .125rem
}

.three-dots-loader .dot {
    width: .3125rem;
    height: .3125rem;
    background: var(--neutral-600);
    border-radius: 50%;
    animation: bounce .8s infinite ease-in
}

.three-dots-loader .dot:nth-child(2) {
    animation-delay: .1s
}

.three-dots-loader .dot:nth-child(3) {
    animation-delay: .2s
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-0.25rem)
    }
}

#save-contact-app-clip-modal .skip-btn {
    display: none;
    flex-grow: 1;
    justify-content: flex-end;
    margin: -0.5rem 1rem -2.6rem 0
}

#save-contact-app-clip-modal .skip-btn.enabled {
    display: flex
}

#save-contact-app-clip-modal .skip-button {
    padding: 1rem;
    color: #000;
    font-weight: 600
}

#save-contact-app-clip-modal .app-clip-loading-container {
    border-radius: 12px;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto
}

#save-contact-app-clip-modal .connecting-text {
    padding: 1.5rem 0 0 1rem;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    font-weight: 700
}

#save-contact-app-clip-modal .info-text {
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: height .3s ease-in-out, opacity .3s ease-in-out;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #000;
    margin: .5rem 0 20px 0
}

#save-contact-app-clip-modal .info-text.show {
    opacity: 1;
    height: 24px
}

#save-contact-app-clip-modal .bold-text {
    font-weight: 700
}

#save-contact-app-clip-modal .blinq-button {
    border: none;
    background: var(--card-color)
}

#save-contact-app-clip-modal .blinq-button:disabled {
    opacity: .5
}

.divider {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 1rem 0
}

.divider .divider-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: #b4b1b1;
    background: #fff;
    padding: 0 .5rem
}

.divider:before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 1px;
    width: 100%;
    background: #e7e6e6
}

.card-mockup-qr-code-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 8%;
    margin-bottom: 8%
}

.card-mockup-qr-code {
    width: 35%
}

@media screen and (min-height: 560px) {
    .card-mockup-qr-code {
        width: 32%
    }
}

.card-mockup-banner-image {
    width: 100%
}

.card-mockup-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: .5rem;
    margin-bottom: .5rem
}

@media screen and (min-height: 844px) {
    .card-mockup-details {
        margin-top: 1rem;
        margin-bottom: 1rem
    }
}

.card-mockup-user-name {
    font-weight: 700;
    font-size: .6rem;
    padding-left: .5rem;
    padding-right: .5rem;
    word-break: break-word;
    text-align: start
}

@media screen and (min-height: 660px) {
    .card-mockup-user-name {
        font-size: .8rem;
        padding-left: 0.6666666667rem;
        padding-right: 0.6666666667rem
    }
}

@media screen and (min-height: 730px) {
    .card-mockup-user-name {
        font-size: .9rem;
        padding-left: .75rem;
        padding-right: .75rem
    }
}

@media screen and (min-height: 844px) {
    .card-mockup-user-name {
        font-size: 1rem;
        padding-left: .8333rem;
        padding-right: .8333rem
    }
}

.card-mockup-user-details {
    font-weight: 600;
    font-size: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    word-break: break-word;
    text-align: start
}

@media screen and (min-height: 660px) {
    .card-mockup-user-details {
        font-size: 0.6666666667rem;
        padding-left: 0.6666666667rem;
        padding-right: 0.6666666667rem
    }
}

@media screen and (min-height: 730px) {
    .card-mockup-user-details {
        font-size: .75rem;
        padding-left: .75rem;
        padding-right: .75rem
    }
}

@media screen and (min-height: 844px) {
    .card-mockup-user-details {
        font-size: .8333rem;
        padding-left: .8333rem;
        padding-right: .8333rem
    }
}

.card-mockup-contact-details-container {
    padding-top: .25rem;
    padding-left: .5rem;
    padding-right: .5rem
}

@media screen and (min-height: 660px) {
    .card-mockup-contact-details-container {
        padding-left: 0.6666666667rem;
        padding-right: 0.6666666667rem
    }
}

@media screen and (min-height: 730px) {
    .card-mockup-contact-details-container {
        padding-left: .75rem;
        padding-right: .75rem
    }
}

@media screen and (min-height: 844px) {
    .card-mockup-contact-details-container {
        padding-left: .8333rem;
        padding-right: .8333rem
    }
}

.card-mockup-detail-item-container {
    display: flex;
    margin-bottom: .6rem
}

.card-mockup-details-icon {
    border-radius: 50%;
    background-color: #f55957;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    min-height: 16px;
    min-width: 16px;
    height: 16px;
    width: 16px;
    font-size: .5rem
}

@media screen and (min-height: 660px) {
    .card-mockup-details-icon {
        min-height: 21px;
        min-width: 21px;
        height: 21px;
        width: 21px;
        font-size: .7rem
    }
}

@media screen and (min-height: 730px) {
    .card-mockup-details-icon {
        min-height: 24px;
        min-width: 24px;
        height: 24px;
        width: 24px;
        font-size: .8rem
    }
}

@media screen and (min-height: 844px) {
    .card-mockup-details-icon {
        min-height: 28px;
        min-width: 28px;
        height: 28px;
        width: 28px;
        font-size: .9rem
    }
}

.card-mockup-contact-details-label-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    overflow: hidden;
    width: 100%;
    margin-left: .5rem
}

.card-mockup-contact-details-value {
    font-weight: 900;
    font-size: .375rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%
}

@media screen and (min-height: 660px) {
    .card-mockup-contact-details-value {
        font-size: .5rem
    }
}

@media screen and (min-height: 730px) {
    .card-mockup-contact-details-value {
        font-size: .5625rem
    }
}

@media screen and (min-height: 844px) {
    .card-mockup-contact-details-value {
        font-size: .625rem
    }
}

.card-mockup-contact-details-label {
    font-weight: 100;
    font-size: .375rem;
    color: #363d4d;
    margin-top: .1rem
}

@media screen and (min-height: 660px) {
    .card-mockup-contact-details-label {
        font-size: .5rem
    }
}

@media screen and (min-height: 730px) {
    .card-mockup-contact-details-label {
        font-size: .5625rem
    }
}

@media screen and (min-height: 855px) {
    .card-mockup-contact-details-label {
        font-size: .625rem
    }
}

#ios-tutorial-overlay {
    display: none;
    --default-ios-blue: #007AFF
}

#ios-tutorial-overlay .receive-card-via-email-button-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9000;
    padding-bottom: .625rem
}

#ios-tutorial-overlay .receive-card-via-email-button-container .receive-card-via-email-button {
    color: #fff;
    font-weight: 700;
    background: rgba(0, 0, 0, 0);
    display: none
}

#ios-tutorial-overlay.show {
    display: block
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: "Inq", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch
}

html {
    color: var(--neutral-800);
    overflow-y: scroll
}

*, *::before, *::after {
    box-sizing: border-box
}

ul, ol {
    padding: 0
}

body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
    margin: 0
}

ul[class], ol[class] {
    list-style: none
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

input, button, textarea, select {
    font: inherit
}

button {
    cursor: pointer;
    background: inherit;
    border: none
}

:root {
    --primary-100: #fde7e7;
    --primary-200: #fbc7c6;
    --primary-300: #f9a19f;
    --primary-400: #f67b79;
    --primary-500: #f45a57;
    --primary-600: #e93835;
    --primary-700: #d41a16;
    --primary-800: #a81310;
    --primary-900: #720b09;
    --neutral-50: #f0f1f5;
    --neutral-100: #f9fafb;
    --neutral-200: #e6e8ea;
    --neutral-300: #d5dadd;
    --neutral-400: #acb9be;
    --neutral-500: #8798a1;
    --neutral-600: #697b86;
    --neutral-700: #525f66;
    --neutral-800: #35393b;
    --neutral-900: #2b2b2b;
    --success-100: #eafbf2;
    --success-200: #cbf1dd;
    --success-300: #8fe1b5;
    --success-400: #6fcf9b;
    --success-500: #42c780;
    --success-600: #27af67;
    --success-700: #1f8e53;
    --success-800: #18713e;
    --success-900: #145139;
    --danger-100: #fde7e7;
    --danger-200: #fbc7c6;
    --danger-300: #f9a19f;
    --danger-400: #f67b79;
    --danger-500: #f45a57;
    --danger-600: #e93835;
    --danger-700: #d41a16;
    --danger-800: #a81310;
    --danger-900: #720b09
}

#app {
    min-height: 100%;
    display: flex
}

.link {
    color: var(--primary-500)
}

.center-align {
    text-align: center
}

.flex-center {
    align-items: center
}

.preview-modal {
    padding: 1.5rem
}

.btn-primary {
    background-color: var(--primary-500) !important;
    border-color: var(--primary-500) !important
}

.blinqButton {
    font-weight: 700
}

fieldset {
    padding: 0;
    border: none
}

.input-field {
    background: #fff
}

.input-field.initially-hidden {
    display: none
}

.input-field.initially-hidden.show {
    display: block
}

.blinq-text-large {
    font-size: 1.5rem
}

.modal-btn-container.sticky {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 42.48%);
    z-index: 2
}

.modal-btn-container.sticky-until-small-screen {
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 42.48%);
    z-index: 2
}

@media screen and (min-height: 440px) {
    .modal-btn-container.sticky-until-small-screen {
        position: sticky
    }
}

#share-contact-info-modal.modal.show-entire-form {
    height: 630px
}

#share-contact-info-modal.modal.show-entire-form #recipient-details-form .add-more-info-button {
    display: none
}

#share-contact-info-modal.modal.show-entire-form #recipient-details-form .add-more-info-button-container {
    display: none
}

#share-contact-info-modal.modal.show-entire-form #recipient-details-form .input-field.initially-hidden {
    display: block
}

#share-contact-info-modal.modal.show-entire-form #recipient-details-form .blinq-text-field.initially-hidden {
    display: block
}

#share-contact-info-modal.modal .modal-content {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "form";
    height: 100%
}

#share-contact-info-modal.modal .modal-header-section {
    grid-area: header
}

#share-contact-info-modal.modal .modal-scrollable-content {
    grid-area: form;
    padding: 0 1.5rem
}

#share-contact-info-modal.modal .modal-btn-container {
    gap: 1rem;
    padding: 1.25rem 0;
    margin-top: auto
}

#share-contact-info-modal.modal .modal-header {
    margin: 2.5rem 1rem 1.5rem;
    padding: 0 .5rem;
    display: flex;
    min-height: 76px
}

#share-contact-info-modal.modal #share-contact-info-privacy-policy {
    display: none;
    padding-bottom: 1.25rem
}

#share-contact-info-modal.modal #share-contact-info-privacy-policy a {
    text-decoration: none;
    font-size: .825rem;
    color: var(--neutral-700)
}

.share-details-back-image-container {
    position: relative;
    margin-right: 1.5rem
}

.share-details-back-image-container[data-is-for-adaptive-sharing] {
    margin-right: .75rem;
    display: flex;
    align-items: center
}

.hidden-inputs-section {
    position: relative
}

.add-more-info-button-container {
    display: flex;
    justify-content: start;
    gap: .25rem
}

.add-more-info-button-container .add-more-pill {
    color: var(--neutral-900);
    font-weight: 700;
    border-radius: 2rem
}

.add-more-info-button-container .add-more-pill[data-animate-removal] {
    transform: translateX(-65%);
    transition: transform .6s cubic-bezier(0.08, 0.6, 0.28, 1.33);
    transition-delay: 100ms
}

.blinq-button.add-more-info-button {
    font-weight: 700;
    left: -0.5rem;
    width: 200px;
    font-size: 1rem
}

.blinq-button.add-more-info-button > :first-child {
    margin-right: .5rem
}

.alternative-send-contact-link {
    font-weight: 700;
    color: var(--neutral-800);
    font-size: .875rem
}

.alternative-send-contact-link svg {
    color: var(--primary-500);
    margin-left: .5rem
}

.alternative-send-contact-link-android {
    font-weight: 600;
    color: #413939
}

.alternative-send-contact-link-android svg {
    margin-left: .4em
}

.floating-paper-plane {
    bottom: 0;
    right: 0;
    position: absolute;
    width: 36px;
    background: #fff;
    height: 36px;
    border-radius: 50%;
    display: flex;
    filter: drop-shadow(0px 2.76923px 8.30769px rgba(22, 29, 37, 0.1));
    align-items: center;
    justify-content: center
}

.floating-paper-plane svg {
    color: var(--primary-500);
    transform: rotate(12deg)
}

.share-details-message-container {
    text-align: start;
    display: flex;
    align-items: center
}

.name-fields-container {
    display: flex
}

.name-fields-container > :first-child {
    margin-right: 1.25rem
}

.name-fields-container > * {
    flex: 1
}

.airplane-silhouette {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    filter: drop-shadow(0px 2.76923px 8.30769px rgba(22, 29, 37, 0.1));
    width: 72px;
    height: 72px;
    border-radius: 50%
}

.airplane-silhouette svg {
    color: var(--primary-500);
    transform: rotate(15deg);
    font-size: 1.75rem
}

.explainer.modal .modal-image-container {
    margin: 1.75rem 0;
    position: relative
}

.explainer.modal .modal-image-container:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: linear-gradient(360deg, #ffffff 61.03%, rgba(255, 255, 255, 0) 100%)
}

.explainer.modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%
}

.explainer.modal .modal-header {
    font-size: 1.25rem
}

.explainer.modal .modal-header em {
    color: var(--primary-500);
    font-style: normal
}

.explainer.modal .modal-header .highlight {
    color: var(--primary-500)
}

.explainer.modal .modal-header.large {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3
}

.explainer.modal .modal-btn-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
    margin-top: auto
}

.explainer.modal .modal-btn-container .blinq-button {
    position: relative;
    margin-bottom: 1.5rem
}

.explainer.modal .link:hover {
    text-decoration: underline
}

.explainer.modal .pointer {
    --fa-primary-color: var(--primary-500);
    --fa-secondary-color: var(--primary-400);
    font-size: .875rem
}

@media screen and (max-height: 540px) {
    #save-contact-android-explainer-modal {
        height: 100%
    }
}

#save-contact-android-explainer-modal .modal-image-container {
    display: flex;
    justify-content: center
}

#save-contact-android-explainer-modal .mock-phone-case-outline {
    top: 0;
    width: 254px;
    height: 173px;
    background: #fff;
    border: 9px solid #e6e6e6;
    border-radius: 30px 30px 0px 0px
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup {
    width: 311px;
    height: 65px;
    background: #fff;
    box-shadow: 0px 10px 25px rgba(22, 29, 37, .15);
    border-radius: 11px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    user-select: none
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .downloaded-file-icons-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 1rem
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .downloaded-file-icons-container svg {
    color: #0f9bff
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .downloaded-file-texts-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex: 1
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .downloaded-file-texts-container > :first-child {
    font-weight: 600
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .downloaded-file-texts-container > :nth-child(2) {
    font-size: .625rem
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .mock-open-text {
    color: #0f9bff;
    font-weight: 700;
    display: flex;
    flex-direction: column
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .mock-open-text .top-pointer {
    margin-bottom: .75rem
}

#save-contact-android-explainer-modal .mock-downloaded-file-popup .mock-open-text .bottom-pointer {
    margin-top: .75rem
}

@media screen and (max-height: 630px) {
    #save-contact-ios-safari-explainer-modal {
        height: 100%
    }
}

#save-contact-ios-safari-explainer-modal .modal-image {
    width: unset;
    max-width: unset;
    height: 100%
}

#save-contact-ios-safari-explainer-modal .ios-save-contact-bottom-section {
    min-height: 140px;
    display: flex;
    position: relative;
    align-items: flex-start
}

#save-contact-ios-safari-explainer-modal .ios-save-contact-explainer-animation-container {
    border-radius: 12px;
    display: flex;
    justify-content: center;
    margin: 0 20px 28px
}

#save-contact-ios-safari-explainer-modal .ios-save-contact-explainer-animation {
    min-height: 215px;
    position: relative;
    height: min(48vh, 292px);
    width: fit-content
}

#save-contact-ios-safari-explainer-modal .ios-explainer-action-btns {
    display: none;
    z-index: 3;
    background: #fff
}

#save-contact-ios-safari-explainer-modal .ios-explainer-action-btns.visible {
    display: flex
}

#save-contact-ios-safari-explainer-modal .timer-number {
    color: #bfbfbd
}

@media screen and (max-height: 560px) {
    #get-blinq-modal.modal {
        height: 100%
    }
}

#get-blinq-modal.modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 0
}

#get-blinq-modal.modal .modal-explainer {
    margin-top: 1rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    line-height: 1.75rem;
    font-size: 1.0625rem;
    margin-top: 1rem
}

#get-blinq-modal.modal .modal-explainer span {
    max-width: 290px
}

#get-blinq-modal.modal .modal-explainer em {
    color: var(--primary-500);
    font-style: normal
}

#get-blinq-modal.modal .modal-header {
    margin: 2.25rem 1rem 1.5rem
}

#get-blinq-modal.modal .modal-footer {
    margin-top: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 42.48%)
}

#get-blinq-modal.modal .modal-btn-container {
    padding-bottom: 1rem
}

#get-blinq-modal.modal .get-blinq-congratulation-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    width: 100%;
    height: 60px;
    box-shadow: 0px 10px 20px -20px rgba(21, 30, 52, .1), 0px 8px 30px -7px rgba(21, 30, 52, .07);
    border-radius: 16px 16px 0px 0px
}

#get-blinq-modal.modal .get-blinq-congratulation-header em {
    font-weight: 700;
    font-style: normal
}

#get-blinq-modal.modal .get-blinq-congratulation-header.hidden {
    display: none
}

#get-blinq-modal.modal .get-blinq-congratulation-header.hidden + .modal-explainer {
    margin-top: 1.5rem
}

.get-bling-logo-container {
    display: flex;
    justify-content: center
}

.get-blinq-heading-text {
    display: flex;
    justify-content: center
}

.get-blinq-heading-text p {
    max-width: 327px;
    font-size: 28px;
    font-weight: 900
}

@media screen and (max-width: 352px) {
    .get-blinq-heading-text p {
        font-size: 8vw
    }
}

.get-blinq-review-score {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #838998
}

.get-blinq-star-rating {
    margin-right: 6px
}

.get-blinq-animation {
    min-height: 215px;
    height: min(50vh, 400px);
    position: relative
}

.get-blinq-animation:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2rem;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 42.11%)
}

.get-blinq-multistage-animation-container {
    display: flex;
    width: 100%;
    height: fit-content;
    margin-top: 3.75rem;
    padding: 0 1.25rem;
    margin-bottom: 1.5rem
}

.get-blinq-multistage-animation {
    width: 100%;
    display: none
}

.get-blinq-body-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 1.25rem;
    gap: .5rem
}

.get-blinq-title {
    font-size: 1.125rem;
    font-weight: 700
}

.get-blinq-message {
    line-height: 1.75
}

#recipient-details-form {
    display: flex;
    flex-direction: column;
    height: 100%
}

#recipient-details-form .modal-form-inputs {
    margin-bottom: .4rem
}

.modal-form-inputs {
    position: relative
}

.modal-form-inputs > .blinq-text-field:not(:last-child) {
    margin-bottom: 1rem
}

.modal-form-inputs > .blinq-text-field[data-error] {
    margin-bottom: 1.75rem
}

.modal-form-inputs > .blinq-text-field:last-child[data-error] {
    margin-bottom: 1rem
}

.modal-profile-pic {
    height: 72px;
    width: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    font-size: .75rem
}

#card-mockup-container .hidden {
    display: none
}

#save-contact-modal.modal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column
}

#save-contact-modal.modal #recommendation-for-brave-and-firefox-on-ios {
    font-size: .825rem;
    color: var(--neutral-700)
}

#save-contact-modal.modal #recommendation-for-brave-and-firefox-on-ios .blinq-button {
    text-decoration: none;
    font-size: .825rem;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    width: unset
}

#save-contact-modal.modal #recommendation-for-brave-and-firefox-on-ios .blinq-button:focus {
    outline: none
}

#save-contact-modal.modal .modal-body {
    padding: 0 1.5rem;
    overflow-y: auto;
    overflow-x: hidden
}

#save-contact-modal.modal .modal-header {
    margin: 2.5rem 1rem 0;
    padding: 0
}

#save-contact-modal.modal .download-contact, #save-contact-modal.modal .send-contact {
    font-weight: bolder;
    margin: 2rem auto
}

#save-contact-modal.modal .download-contact {
    display: none;
    height: 3.25rem
}

#save-contact-modal.modal .download-contact.visible {
    display: flex;
    animation-name: slideRight;
    animation-duration: .15s;
    animation-timing-function: linear;
    transform-origin: left
}

#save-contact-modal.modal .download-contact svg {
    margin-right: 1rem
}

#save-contact-modal.modal .send-contact {
    margin-top: .5rem;
    margin-bottom: 0
}

#save-contact-modal.modal .send-contact:disabled {
    box-shadow: none
}

#save-contact-modal.modal .grid {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    flex: 1
}

#save-contact-modal.modal .grid-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1
}

#save-contact-modal.modal .grid-footer {
    padding: 1.25rem 0 1.25rem
}

#save-contact-modal.modal .radio-group {
    --padding-for-slider: 3px;
    display: flex;
    position: relative;
    overflow-x: clip;
    background: #f3f4f4;
    border-radius: 100px
}

#save-contact-modal.modal .radio-group input[type=radio] {
    display: none
}

#save-contact-modal.modal .radio-group input[type=radio]:checked + label {
    color: var(--neutral-800);
    font-weight: 700
}

#save-contact-modal.modal .radio-group input[type=radio]:checked + label svg {
    color: var(--primary-500)
}

#save-contact-modal.modal .radio-group input[type=radio]:first-of-type:checked ~ .slider {
    left: var(--padding-for-slider, 5px)
}

#save-contact-modal.modal .radio-group input[type=radio]:nth-of-type(2):checked ~ .slider {
    left: 33.333%
}

#save-contact-modal.modal .radio-group input[type=radio]:nth-of-type(2):checked ~ .slider.half-width {
    left: var(--padding-for-slider, 5px)
}

#save-contact-modal.modal .radio-group input[type=radio]:last-of-type:checked ~ .slider {
    left: calc(66.666% - var(--padding-for-slider, 5px))
}

#save-contact-modal.modal .radio-group input[type=radio]:last-of-type:checked ~ .slider.half-width {
    left: calc(50% - var(--padding-for-slider, 5px))
}

#save-contact-modal.modal .radio-group label {
    cursor: pointer;
    color: var(--neutral-500);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 1em;
    flex: 1;
    padding: 1rem 0;
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

#save-contact-modal.modal .radio-group label svg {
    font-size: 1.25em;
    margin-right: .75rem
}

@media screen and (max-width: 1024px) {
    #save-contact-modal.modal .radio-group label {
        font-size: .9375rem
    }
}

#save-contact-modal.modal .radio-group .slider {
    position: absolute;
    width: 33.333%;
    height: calc(100% - var(--padding-for-slider, 5px) * 2);
    border-radius: 100px;
    background-color: #fff;
    bottom: var(--padding-for-slider, 5px);
    left: var(--padding-for-slider, 5px);
    transition: left .08s linear .1s;
    z-index: 1
}

#save-contact-modal.modal .radio-group .slider.half-width {
    width: 50%
}

#save-contact-modal.modal .modal-form-inputs {
    display: none
}

#save-contact-modal.modal .modal-form-inputs.visible {
    display: flex;
    flex-direction: column;
    flex: 1
}

#save-contact-modal.modal .send-via-form {
    display: none
}

#save-contact-modal.modal .send-via-form.visible {
    display: flex;
    flex-direction: column;
    flex: 1
}

#save-contact-modal.modal .send-via-form.visible fieldset {
    animation-name: slideRight;
    animation-duration: .15s;
    animation-timing-function: linear;
    transform-origin: left
}

#save-contact-modal.modal .send-via-form fieldset {
    margin: 2.25rem 0 0
}

#save-contact-modal.modal .send-via-form fieldset .input-container {
    margin: 0
}

#save-contact-modal.modal .send-via-form #select-country-btn {
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neutral-800);
    font-weight: normal;
    padding-left: 0
}

#save-contact-modal.modal .send-via-form #select-country-btn #select-country-flag-display {
    margin-right: .75rem
}

#save-contact-modal.modal .send-via-form #select-country-btn #select-country-code-display {
    display: flex;
    font-size: 1em;
    align-self: center;
    margin-right: .5rem
}

@supports (-webkit-touch-callout: none) {
    #save-contact-modal.modal .send-via-form #select-country-btn {
        height: 27px;
        padding: 0
    }
}

#save-contact-modal.modal .send-via-form .blinq-button.send-contact {
    padding: 1.75rem 0
}

#save-contact-modal.modal .send-via-form .blinq-button.send-contact .button-content {
    padding: .25rem;
    width: 100%;
    justify-content: center
}

#save-contact-modal.modal .send-via-form .blinq-button.send-contact .button-content.loading svg {
    width: .5em
}

#save-contact-modal.modal .send-via-form .blinq-button.send-contact .button-content.done svg {
    --fa-primary-color: white;
    --fa-secondary-color: #31c073;
    --fa-secondary-opacity: 1
}

#save-contact-modal.modal .send-via-form .blinq-button svg {
    margin: 0 .5rem
}

#save-contact-modal.modal .hidden {
    display: none
}


#select-country-modal.modal {
    height: 100%;
    padding-bottom: 0
}

#select-country-modal.modal .modal-content {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "number-list";
    height: 100%
}

#select-country-modal.modal .modal-header {
    grid-area: header;
    margin: 0 0 1rem
}

#select-country-modal.modal .modal-scrollable-content {
    grid-area: number-list;
    padding: 0 1.5rem 1.5rem
}

#select-country-modal.modal .modal-content {
    padding: 1.5rem 0 0;
    height: 100%
}

#select-country-modal.modal .modal-content ul {
    list-style: none;
    margin-top: 1rem
}

#select-country-modal.modal .modal-content ul li {
    padding: .5rem 0;
    font-size: 18px;
    cursor: pointer;
    display: flex
}

#select-country-modal.modal .modal-content ul li .fflag {
    flex: 1 0 27px;
    margin-right: .75rem
}

#select-country-modal.modal .modal-content ul li .country-name {
    width: 100%
}

#select-country-modal.modal .modal-content ul li:hover {
    background-color: rgba(53, 59, 59, .06)
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    word-wrap: normal
}

.scroll-sentinel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    visibility: hidden
}

@keyframes slideRight {
    from {
        transform: translateX(8px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.turnstile-container {
    margin-top: 3.25rem;
    margin-bottom: 0
}

@media screen and (max-width: 393px) {
    .adaptive-share-btn {
        font-size: 1rem !important;
        padding: .5rem 1.25rem !important
    }
}

@keyframes bounce {
    from {
        transform: translateY(-1.6em)
    }

    to {
        transform: translateY(1.6em)
    }
}

.loading-container {
    height: 12px
}

.circle {
    animation-name: bounce;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.83, 0.21, 0.67, 0.92);
    animation-direction: alternate;
    height: 12px;
    transform: translateY(1.6em)
}

.circle:nth-child(1) {
    animation-delay: -180ms
}

.circle:nth-child(2) {
    animation-delay: -90ms
}

/*# sourceMappingURL=main.1580bfd9ce60842022f0.css.map*/