#contactHeroView.section.content-wrapper {}

#contactSalesHeroView.section.content-wrapper {
    background-image: url("/ui/assets/opt_contactSalesBackground.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


#contactHeroView.section.content-wrapper .section.content,
#contactSalesHeroView.section.content-wrapper .section.content {

}


#contactHeroView.section.content-wrapper .section.content .title-wrapper,
#contactSalesHeroView.section.content-wrapper .section.content .title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
}

#contactHeroView.section.content-wrapper .section.content .quick {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    gap: 48px;
    padding: 0px 12px;
}

@media only screen and (max-width: 767px) {
    #contactHeroView.section.content-wrapper .section.content .quick {
        gap: 24px;
    }
}

#contactHeroView.section.content-wrapper .section.content .quick .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    gap: 24px;

    transition: all var(--primaryInteraction);
}

@media only screen and (max-width: 767px) {
    #contactHeroView.section.content-wrapper .section.content .quick .item {
        gap: 12px;
    }
}

#contactHeroView.section.content-wrapper .section.content .quick .item:hover p {
    color: var(--primaryAccent);
}

#contactHeroView.section.content-wrapper .section.content .quick .item svg {
    width: 48px;
    height: 48px;
}

@media only screen and (max-width: 767px) {
    #contactHeroView.section.content-wrapper .section.content .quick .item svg {
        width: 36px;
        height: 36px;
    }
}

#contactHeroView.section.content-wrapper .section.content .quick .item p {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 6px;
    color: var(--secondaryText);
    transition: all var(--primaryInteraction);
}

@media only screen and (max-width: 767px) {
    #contactHeroView.section.content-wrapper .section.content .quick .item p {
        font-size: 14px;
    }
}

#contactHeroView.section.content-wrapper .section.content .quick .item p svg {
    width: 10px;
    height: 10px;
}

#contactVideoPreTitle.title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;

    margin-top: 48px;
    padding: 0px 12px;
}

#contactHeroView.section.content-wrapper .section.content .video-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;

    margin-top: 24px;
    padding: 0px 12px;
}

#contactHeroView.section.content-wrapper .section.content .video-wrapper .video {
    width: 100%;
    min-width: 256px;
    max-width: 512px;
    aspect-ratio: 16/9;

    border-radius: 24px;

    background-image: url('/ui/assets/nookReportsSupportVideo.png');
    background-position: center;
    background-size: contain;
    background-color: var(--sectionInsetBackground);
}

#contactVideoPostTitle.title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 12px;

    margin-top: 12px;
    padding: 0px 12px;
}

#contactVideoPostTitle.title-wrapper h3,
#contactVideoPostTitle.title-wrapper p,
#contactVideoPostTitle.title-wrapper a {
    text-decoration: none;
    width: 100%;
    min-width: 256px;
    max-width: 512px;
}

#contactVideoPostTitle.title-wrapper p {
    color: var(--secondaryText);
}

#contactVideoPostTitle.title-wrapper a {
    transition: all var(--primaryInteraction);
}

#contactVideoPostTitle.title-wrapper a:hover {
    color: var(--focusAccent);
}

#contactVideoPostTitle.title-wrapper .link {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    gap: 6px;

    color: var(--primaryAccent);
}

#contactVideoPostTitle.title-wrapper .link svg {
    width: 12px;
    height: 12px;
}

:is(#contactGeneralForm, #contactSalesForm).block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    padding: 0px 12px;
}

:is(#contactGeneralForm, #contactSalesForm).block .title {
    width: 100%;
    text-align: left;
    margin-bottom: 12px;
    margin-left: 0px;
    font-size: 14px;
    font-weight: 700;
    max-width: 80%;
    width: 100%;
    min-width: 256px;
    max-width: 512px;
    text-transform: capitalize;

    color: var(--secondaryText);
}

:is(#contactGeneralForm, #contactSalesForm).block .input-block {
    width: 100%;
    min-width: 256px;
    max-width: 512px;
}

:is(#contactGeneralForm, #contactSalesForm).block .field-error {
    margin: 5px 12px 0;
    color: var(--primaryWarning);
    font-size: 12px;
    line-height: 1.35;
}

:is(#contactGeneralForm, #contactSalesForm).block .field-error[hidden] {
    display: none;
}

:is(#contactGeneralForm, #contactSalesForm).block textarea {
    min-height: 96px;
    overflow-y: hidden;
    resize: none;
}

:is(#contactGeneralForm, #contactSalesForm).block textarea[aria-invalid="true"] {
    border-color: var(--primaryWarning);
    color: var(--primaryWarning);
}

:is(#contactGeneralForm, #contactSalesForm).block .action-wrapper {
    width: 100%;
    margin-top: 6px;
}

:is(#contactGeneralForm, #contactSalesForm).block .form-status {
    min-height: 1.35em;
    margin: 6px 12px 0;
    color: var(--secondaryText);
    font-size: 12px;
    line-height: 1.35;
}

@media only screen and (max-width: 520px) {
    :is(#contactGeneralForm, #contactSalesForm).block .wrapper.split {
        flex-direction: column;
    }
}

.confirmation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    margin-top: 24px;
}

#contactGeneralConfirmation[hidden],
#contactGeneralForm[hidden],
#contactSalesConfirmation[hidden],
#contactSalesForm[hidden] {
    display: none;
}

#checkmark-animation,
#contact-sales-checkmark-animation {
    width: 128px;
    height: 128px;
}

.confirmation-wrapper .title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 24px;
    gap: 12px;
}

.confirmation-wrapper .title-wrapper .subtitle {
    color: var(--secondaryText);
    font-size: 14px;
}

:is(#contactGeneralForm, #contactSalesForm).block .contact-turnstile {
    width: 100%;
    margin-top: 12px;
}

:is(#contactGeneralForm, #contactSalesForm).block .contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

#contactSalesForm.block .store-count-field {
    flex: 1 1 50%;
}

#contactSalesForm.block select {
    width: 100%;
    min-height: 42px;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--primaryBorder);
    border-radius: 24px;
    corner-shape: squircle;
    outline: none;
    appearance: none;
    background-color: var(--bodyBackground);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--secondaryText) 50%),
        linear-gradient(135deg, var(--secondaryText) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    color: var(--primaryAccent);
    font: inherit;
    font-size: 14px;
    transition: var(--primaryInteraction);
}

#contactSalesForm.block select:focus {
    color: var(--focusText);
    background-color: var(--sectionBackground);
}

#contactSalesForm.block select[aria-invalid="true"] {
    border-color: var(--primaryWarning);
    color: var(--primaryWarning);
}