﻿.fb_form {
    --form-background: var(--c-light, white);
    --form-border-radius: 1rem;
    --form-box-shadow: none;
    --form-column-gap: 2rem;
    --form-padding-x: 2rem;
    --form-padding-y: 2rem;
    --form-focus-color: var(--c-accent, blue);
    --form-error-color: var(--c-error, red);
    --form-label-color: var(--c-primary, black);
    --form-label-font-size: 1rem;
    --form-label-font-weight: normal;
    --form-input-color: var(--c-primary, black);
    --form-input-border: .0625rem solid hsla(0, 0%, 53%, .333);
    --form-input-border-radius: 0;
    --form-input-font-size: 1rem;
    --form-input-font-weight: normal;
    --form-input-height: 2.5rem;
    --form-textarea-border-radius: 0;
    --form-title-background-color: transparent;
    --form-title-color: var(--c-primary, black);
    --form-title-font-size: 1rem;
    --form-title-font-weight: 600;
    --form-description-font-size: 1rem;
    --form-description-font-weight: normal;
    --form-footnote-color: #868686;
    --form-footnote-font-size: .875rem;
    --form-footnote-font-weight: normal;
    --form-spinner-color: var(--c-accent, blue);

    background-color: var(--form-background);
    border-radius: var(--form-border-radius);
    box-shadow: var(--form-box-shadow);
    margin: 0 auto;
    width: 100%;
    max-width: 75rem;
    position: relative;
}

.fb_form.shadow-sm,
.fb_form.fb_form-shadow-sm {
    box-shadow: 0 .1875rem .3125rem -.125rem rgba(30, 60, 90, .192);
}

.fb_form.shadow-md,
.fb_form.fb_form-shadow-md {
    box-shadow: 0 .1875rem .3125rem -.125rem rgba(30, 60, 90, .333);
}

.fb_form.shadow-lg,
.fb_form.fb_form-shadow-lg {
    box-shadow: 0 .3125em .4375em -.125em rgba(30, 60, 90, .333);
}

.fb_form .fb_form-title {
    background-color: var(--form-title-background-color, transparent);
    color: var(--form-title-color, inherit);
    text-align: center;
    font-size: var(--form-title-font-size, inherit);
    font-weight: var(--form-title-font-weight);
    line-height: normal;
    padding: 1rem var(--form-padding-x, 2rem);
    border-top-left-radius: var(--form-border-radius);
    border-top-right-radius: var(--form-border-radius);
    text-transform: uppercase;
}

.fb_form .fb_form-content {
    padding: var(--form-padding-y, 2rem) var(--form-padding-x, 2rem);
    border-bottom-left-radius: var(--form-border-radius);
    border-bottom-right-radius: var(--form-border-radius);
}

.fb_form .fb_form-content p:not(:first-child) {
    margin: 1rem 0 0;
}

.fb_form .fb_form-content b,
.fb_form .fb_form-content strong {
    font-weight: 600;
}

.fb_form .fb_form-description {
    font-size: var(--form-description-font-size, inherit);
    font-weight: var(--form-description-font-weight);
    margin-bottom: var(--form-padding-y, 2rem);
}

.fb_form .fb_form-footnote {
    color: var(--form-footnote-color);
    font-size: var(--form-footnote-font-size);
    font-weight: var(--form-footnote-font-weight);
    margin-top: 2rem;
}

.fb_form .fb_form-message {
    display: none;
    font-size: 1rem;
    position: relative;
}

.fb_form .fb_form-message.show {
    display: block;
}

.fb_form .fb_form-message.show:not(:has(*)) {
    text-align: center;
}

.fb_form .fb_form-warning {
    display: none;
    font-size: 1rem;
    font-weight: normal;
    position: relative;
    margin: 0 0 2rem 0;
    border: 1px dashed var(--form-error-color);
    padding: .5rem;
}

.fb_form .fb_form-warning.show {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fb_form .fb_form-terms-of-service,
.fb_form .fb_form-privacy-policy {
    margin: 1rem 0 0;
    font-size: var(--form-input-font-size, inherit);
    font-weight: var(--form-input-font-weight);
}

.fb_form .fb_form-field .fb_form-control.fb_form-checkbox:not(.has-error) + .field-validation-error,
.fb_form .fb_form-field .fb_form-control.fb_form-checkbox:not(.has-error) + .field-validation-valid {
    display: none;
}

.fb_form .fb_form-checkbox .fb_form-label {
    padding: 0;
    margin: 0;
}

.fb_form .fb_form-fields {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    column-gap: var(--form-column-gap, 2rem);
    width: 100%;
}

.fb_form .fb_form-field {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.fb_form .fb_form-field:not(:last-child) {
    margin-bottom: .125rem;
}

.fb_form .fb_form-field.w-33 {
    width: calc((100% - var(--form-column-gap, 0) * 2) * .333333);
    max-width: calc((100% - var(--form-column-gap, 0) * 2) * .333333);
    min-width: calc((100% - var(--form-column-gap, 0) * 2) * .333333);
}

.fb_form .fb_form-field.w-50 {
    width: calc((100% - var(--form-column-gap, 0)) * .5);
    max-width: calc((100% - var(--form-column-gap, 0)) * .5);
    min-width: calc((100% - var(--form-column-gap, 0)) * .5);
}

.fb_form .fb_form-field.w-66 {
    width: calc((100% - var(--form-column-gap, 0) * 2) * .666666 - var(--form-column-gap, 0));
    max-width: calc((100% - var(--form-column-gap, 0) * 2) * .666666 - var(--form-column-gap, 0));
    min-width: calc((100% - var(--form-column-gap, 0) * 2) * .666666 - var(--form-column-gap, 0));
}

.fb_form .fb_form-field {
    font-size: var(--form-input-font-size, 1rem);
}

.fb_form .fb_form-field .field-validation-error {
    color: var(--form-error-color);
}

.fb_form .fb_form-field .field-validation-valid,
.fb_form .fb_form-field .field-validation-error {
    display: block;
    height: 1.5rem;
    min-height: 1.5rem;
    text-align: left;
    font-size: .875rem;
    font-weight: normal;
    margin: .125rem 0 0 0;
}


.fb_form .fb_form-label {
    font-family: inherit;
    font-size: var(--form-label-font-size, 1rem);
    font-weight: var(--form-label-font-weight);
    color: var(--form-label-color);
    display: inline-block;
    line-height: 1.15;
    padding: .5rem 0;
}

.fb_form .fb_form-label .required {
    padding: 0 0 0 .125rem;
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: unset;
}

.fb_form .fb_form-control.fb_form-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1.15;
    gap: 1rem;
}


.fb_form .fb_form-control input[type=checkbox],
.fb_form .fb_form-control input[type=date],
.fb_form .fb_form-control input[type=email],
.fb_form .fb_form-control input[type=text],
.fb_form .fb_form-control input[type=url] {
    appearance: auto;
    font-family: inherit;
    font-size: var(--form-input-font-size, 1rem);
    font-weight: var(--form-input-font-weight);
}

.fb_form .fb_form-control input[type=date],
.fb_form .fb_form-control input[type=email],
.fb_form .fb_form-control input[type=text],
.fb_form .fb_form-control input[type=url],
.fb_form .fb_form-control select,
.fb_form .fb_form-control textarea {
    border: var(--form-input-border);
    border-radius: var(--form-input-border-radius);
    color: var(--form-input-color);
    font-family: inherit;
    font-size: var(--form-input-font-size, 1rem);
    font-weight: var(--form-input-font-weight);
    line-height: 1;
    outline: 0;
    width: 100%;
}

.fb_form .fb_form-control input[type=date],
.fb_form .fb_form-control input[type=email],
.fb_form .fb_form-control input[type=text],
.fb_form .fb_form-control input[type=url],
.fb_form .fb_form-control select {
    height: var(--form-input-height);
    max-height: var(--form-input-height);
}

.fb_form .fb_form-control input[type=date],
.fb_form .fb_form-control input[type=email],
.fb_form .fb_form-control input[type=text],
.fb_form .fb_form-control input[type=url],
.fb_form .fb_form-control textarea {
    padding: .5rem 1rem;
}

.fb_form .fb_form-control input::placeholder,
.fb_form .fb_form-control textarea::placeholder {
    color: var(--form-input-color);
    font-family: inherit;
    font-weight: normal;
    opacity: .5;
    user-select: none;
}

.fb_form .fb_form-control input[type=date].error,
.fb_form .fb_form-control input[type=email].error,
.fb_form .fb_form-control input[type=text].error,
.fb_form .fb_form-control input[type=url].error,
.fb_form .fb_form-control textarea.error,
.fb_form .fb_form-control select.error {
    border-color: var(--form-error-color);
}

.fb_form .fb_form-control select {
    cursor: pointer;
    appearance: none !important;
    padding: .65rem 1rem;
}

.fb_form .fb_form-control textarea {
    border-radius: var(--form-textarea-border-radius);
}

.fb_form .fb_form-control input:not(.error):not([type=submit]):focus,
.fb_form .fb_form-control input:not(.error):not([type=submit]):focus-within,
.fb_form .fb_form-control textarea:not(.error):focus,
.fb_form .fb_form-control select:not(.error):focus {
    border-color: var(--form-focus-color);
    color: var(--form-input-color);
    outline: none;
    z-index: 1;
}

.fb_form .fb_form-control input[type=file] {
    appearance: none;
    border: none;
    font-size: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.fb_form .fb_form-control .fb_form-file {
    display: flex;
    align-items: center;
}

.fb_form .fb_form-control .fb_form-file-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: var(--form-input-border);
    border-radius: var(--form-input-border-radius);
    height: var(--form-input-height);
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    line-height: 1;
    margin-bottom: 0;
    outline: 0;
    padding: .5rem 1rem;
    position: relative;
    margin-right: 1rem;
}

.fb_form .fb_form-control:not(.has-error).has-focus .fb_form-file-button {
    border-color: var(--form-focus-color);
}

.fb_form .fb_form-control.has-error .fb_form-file-button {
    border-color: var(--form-error-color);
}

.fb_form .fb_form-control .fb_form-file-list {
    display: none;
    position: relative;
    width: 100%;
    font-size: inherit;
    font-weight: normal;
}

.fb_form .fb_form-control .fb_form-file-list ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.fb_form .fb_form-control .fb_form-file-list ul li {
    margin-right: 1rem;
    white-space: nowrap;
}

.fb_form .fb_form-control .fb_form-file-hint,
.fb_form .fb_form-control .fb_form-file-name {
    font-size: inherit;
    font-weight: normal;
}

.fb_form .fb_form-control .fb_form-file-remove {
    user-select: none;
    cursor: pointer;
    opacity: .5;
    display: inline-block;
    font-size: 1.5rem;
    height: 1.5rem;
    left: .25rem;
    line-height: .6;
    position: relative;
    top: 0.125rem;
}

.fb_form .fb_form-control .fb_form-file-remove:hover {
    color: var(--form-error-color);
    opacity: 1;
}

.fb_form .fb_form-captcha {
    margin: 1rem 0 2rem 0;
}

.fb_form .fb_form-captcha .captcha-box {
    text-align: left;
}

.fb_form .fb_form-button {
    margin-top: 1.5rem;
}

.fb_form .fb_form-button > * {
    user-select: none;
}

.fb_form .fb_form-field + .fb_form-button {
    margin-top: 2rem;
}

.fb_form .fb_form-warning-hide {
    cursor: pointer;
    border: 1px solid var(--form-input-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: .5rem;
}


.fb_form .fb_form-error-list {
    color: var(--form-error-color);
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0 1.2rem;
    list-style: disc;
}

.fb_form .fb-form-icon svg {
    fill: currentColor;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
}

.fb_form .fb_form ol,
.fb_form .fb_form ul {
    padding: 0 0 0 1rem;
}

.fb_form .fb_form-busy {
    display: none;
    position: absolute;
    border-radius: var(--form-border-radius);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fb_form .fb_form-busy.show {
    display: block;
}

.fb_form .fb_form-overlay {
    display: block;
    background: #fff;
    position: absolute;
    opacity: .5;
    border-radius: var(--form-border-radius);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fb_form .fb_form-spinner {
    display: block;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
}

.fb_form .fb_form-spinner div {
    animation: fb_form-spinner 1.2s linear infinite;
    transform-origin: 40px 40px;
}

.fb_form .fb_form-spinner div:after {
    background: var(--form-spinner-color);
    border-radius: 20%;
    content: " ";
    display: block;
    height: 18px;
    left: 37px;
    position: absolute;
    top: 3px;
    width: 6px
}

.fb_form .fb_form-spinner div:first-child {
    animation-delay: -1.1s;
    transform: rotate(0deg)
}

.fb_form .fb_form-spinner div:nth-child(2) {
    animation-delay: -1s;
    transform: rotate(30deg)
}

.fb_form .fb_form-spinner div:nth-child(3) {
    animation-delay: -.9s;
    transform: rotate(60deg)
}

.fb_form .fb_form-spinner div:nth-child(4) {
    animation-delay: -.8s;
    transform: rotate(90deg)
}

.fb_form .fb_form-spinner div:nth-child(5) {
    animation-delay: -.7s;
    transform: rotate(120deg)
}

.fb_form .fb_form-spinner div:nth-child(6) {
    animation-delay: -.6s;
    transform: rotate(150deg)
}

.fb_form .fb_form-spinner div:nth-child(7) {
    animation-delay: -.5s;
    transform: rotate(180deg)
}

.fb_form .fb_form-spinner div:nth-child(8) {
    animation-delay: -.4s;
    transform: rotate(210deg)
}

.fb_form .fb_form-spinner div:nth-child(9) {
    animation-delay: -.3s;
    transform: rotate(240deg)
}

.fb_form .fb_form-spinner div:nth-child(10) {
    animation-delay: -.2s;
    transform: rotate(270deg)
}

.fb_form .fb_form-spinner div:nth-child(11) {
    animation-delay: -.1s;
    transform: rotate(300deg)
}

.fb_form .fb_form-spinner div:nth-child(12) {
    animation-delay: 0s;
    transform: rotate(330deg)
}

@-webkit-keyframes fb_form-spinner {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fb_form-spinner {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@media (max-width: 480px) {
    .fb_form .fb_form-field,
    .fb_form .fb_form-field.w-33,
    .fb_form .fb_form-field.w-50,
    .fb_form .fb_form-field.w-66 {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .fb_form .fb_form-captcha,
    .fb_form .fb_form-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fb_form .fb_form-control.fb_form-checkbox {
        align-items: start;
    }
}
