.component-cta--popin-dl {
    display: flex;
    align-items: center;
    color: var(--orange);
    font-family: var(--font-family-poppins);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    padding: 10px;
    justify-content: space-between;
    gap: 10px;
    flex: 1 0 0;
}

a.component-cta--popin-dl:hover,
div.component-cta--popin-dl:hover {
    border-radius: 0.5rem;
    background-color: var(--orange2);
}

.popin-dl--content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    justify-content: center;
    align-items: center;

    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;

    background-color: hsla(0, 0%, 0%, .3);
}

.popin-dl .popin-dl--content {
    margin-top: 0;
    padding: 0;
}

.popin-dl {
    transition: opacity 3s cubic-bezier(0.64, 0, 0.78, 0);
}

.popin-dl.is-fading-out {
    opacity: 0;
}

.popin-dl.is-open .popin-dl--content {
    display: block;
}

.popin-dl--close {
    cursor: pointer;
}

.popin-dl .form-message.is-hidden {
    display: none;
}

.popin-dl .form-message {
    display: flex;
    align-items: center;

    width: 100%;

    color: var(--green);
    background-color: var(--green-light);
    border-radius: .25rem;
    padding: .75rem 1rem;
    opacity: 0;
}

.popin-dl .form-message {
    transition: opacity .2s;
}

.popin-dl .form-message.is-fading-in {
    opacity: 1;
}

.popin-dl .form-message.message--error {
    color: var(--orange);
    background-color: var(--orange-light);
}

.popin-dl .form-message p {
    color: inherit;
    font-family: 'Poppins';
    font-weight: 500;
    margin-left: 1.5rem;
    margin-right: auto;
}

.popin-dl .message--error p {
    margin-left: 0;
}

.popin-dl .form-message:before,
.popin-dl .form-message:after {
    content: '';

    display: block;
    width: 1.25rem;
    height: 1.25rem;

    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2082 6.9485L9.16732 12.9893L5.87648 9.70766L4.58398 11.0002L9.16732 15.5835L16.5007 8.25016L15.2082 6.9485ZM11.0007 1.8335C5.94065 1.8335 1.83398 5.94016 1.83398 11.0002C1.83398 16.0602 5.94065 20.1668 11.0007 20.1668C16.0607 20.1668 20.1673 16.0602 20.1673 11.0002C20.1673 5.94016 16.0607 1.8335 11.0007 1.8335ZM11.0007 18.3335C6.94898 18.3335 3.66732 15.0518 3.66732 11.0002C3.66732 6.9485 6.94898 3.66683 11.0007 3.66683C15.0523 3.66683 18.334 6.9485 18.334 11.0002C18.334 15.0518 15.0523 18.3335 11.0007 18.3335Z' fill='%23227810'/%3E%3C/svg%3E%0A");
}

.popin-dl .message--error:before {
    display: none;
}

.popin-dl .form-message:after {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8327 10.3415L19.6577 9.1665L14.9993 13.8248L10.341 9.1665L9.16602 10.3415L13.8243 14.9998L9.16602 19.6582L10.341 20.8332L14.9993 16.1748L19.6577 20.8332L20.8327 19.6582L16.1743 14.9998L20.8327 10.3415Z' fill='%23227810'/%3E%3C/svg%3E%0A");
}

.popin-dl .message--error:after {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8327 10.3415L19.6577 9.1665L14.9993 13.8248L10.341 9.1665L9.16602 10.3415L13.8243 14.9998L9.16602 19.6582L10.341 20.8332L14.9993 16.1748L19.6577 20.8332L20.8327 19.6582L16.1743 14.9998L20.8327 10.3415Z' fill='%23ed6707'/%3E%3C/svg%3E%0A");
}

.popin-dl--content-inner {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 1rem;
    overflow: auto;
}

.popin-dl .popin-dl--form {
    width: calc(100vw - 2rem);
    max-width: 35.188rem;
    margin: auto;
    padding: 2.5rem 3rem;

    border-radius: 1rem;
    border: 0.031rem solid var(--light-grey2);
    background: linear-gradient(161deg, var(--white) 4.05%, var(--light-grey) 94.71%);
}

div:is(#hey, .popin-dl--close) {
    background-color: var(--white);
    color: var(--blue);
}

div:is(#hey, .popin-dl--close):hover {
    background-color: var(--blue);
    color: var(--white);
}

.popin-dl--submit-container {
    transition: opacity .2s;
}

.popin-dl--submit-container.is-fading-out {
    opacity: 0;
}

.popin-dl--submit-container.is-hidden {
    display: none;
}

@media (min-width: 64rem) {

    .popin-dl--submit-container {
        display: flex;
        gap: 2rem;
    }

    *:is(#hey, .popin-dl--close, .popin-dl--submit) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .popin-dl--close {
        flex: 0;
    }

    .popin-dl--submit {
        flex: 1;
    }

}