.bnws-cumato-form-v2 {
--bnws-v2-primary: var(--boows-col-primary, #0f766e);
--bnws-v2-primary-rgb: var(--boows-col-primary-rgb, 15, 118, 110);
--bnws-v2-text: var(--boows-col-text, #0f172a);
--bnws-v2-border: var(--boows-input-border, #cbd5e1);
--bnws-v2-error: var(--boows-col-error, #b91c1c);
--bnws-v2-error-rgb: var(--boows-col-error-rgb, 185, 28, 28);
--bnws-v2-success: var(--boows-col-success, #065f46);
--bnws-v2-success-rgb: var(--boows-col-success-rgb, 6, 95, 70);
--bnws-v2-muted: rgba(var(--boows-col-text-rgb, 15, 23, 42), 0.65);
--bnws-v2-radius: var(--boows-default-border-container, 8px);
--bnws-v2-input-radius: var(--boows-default-border-input, 8px);
--bnws-v2-pill-radius: var(--boows-default-border-pill, 999px);
--bnws-v2-nav-radius: var(--bnws-v2-pill-radius);
--bnws-v2-row-gap: 2px;
--bnws-v2-col-gap: 14px;
font-family: var(--bnws-v2-font-family, var(--boows-font, inherit));
color: var(--bnws-v2-text);
width: 100%;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-message {
display: none;
margin: 0 0 14px;
padding: 10px 12px;
border-radius: var(--bnws-v2-radius);
font-size: 14px;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-message.is-error,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-message.is-success {
display: block;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-message.is-error {
background: rgba(var(--bnws-v2-error-rgb), 0.08);
color: var(--bnws-v2-error);
border: 1px solid rgba(var(--bnws-v2-error-rgb), 0.25);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-message.is-success {
background: rgba(var(--bnws-v2-success-rgb), 0.08);
color: var(--bnws-v2-success);
border: 1px solid rgba(var(--bnws-v2-success-rgb), 0.25);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--bnws-v2-col-gap);
margin-bottom: var(--bnws-v2-row-gap);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step[hidden] {
display: none !important;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-steps-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-nav-item {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--bnws-v2-border);
border-radius: var(--bnws-v2-nav-radius);
background: #fff;
color: var(--bnws-v2-text);
padding: 6px 10px;
font-size: 13px;
cursor: pointer;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-nav-item.is-active {
border-color: var(--bnws-v2-primary);
background: rgba(var(--bnws-v2-primary-rgb), 0.08);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-nav-index {
width: 20px;
height: 20px;
border-radius: var(--bnws-v2-pill-radius);
background: var(--bnws-v2-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-col {
min-width: 0;
}
.bnws-cumato-form-v2 .col-span-1 { grid-column: span 1; }
.bnws-cumato-form-v2 .col-span-2 { grid-column: span 2; }
.bnws-cumato-form-v2 .col-span-3 { grid-column: span 3; }
.bnws-cumato-form-v2 .col-span-4 { grid-column: span 4; }
.bnws-cumato-form-v2 .col-span-5 { grid-column: span 5; }
.bnws-cumato-form-v2 .col-span-6 { grid-column: span 6; }
.bnws-cumato-form-v2 .col-span-7 { grid-column: span 7; }
.bnws-cumato-form-v2 .col-span-8 { grid-column: span 8; }
.bnws-cumato-form-v2 .col-span-9 { grid-column: span 9; }
.bnws-cumato-form-v2 .col-span-10 { grid-column: span 10; }
.bnws-cumato-form-v2 .col-span-11 { grid-column: span 11; }
.bnws-cumato-form-v2 .col-span-12 { grid-column: span 12; }
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field {
margin-bottom: 8px;
}
.bnws-cumato-form-v2.boows-form .bnws-cumato-form-v2-field {
margin-bottom: 0;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.is-hidden {
display: none;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
}
.bnws-cumato-form-v2:not(.boows-form) input[type='text'],
.bnws-cumato-form-v2:not(.boows-form) input[type='email'],
.bnws-cumato-form-v2:not(.boows-form) input[type='number'],
.bnws-cumato-form-v2:not(.boows-form) input[type='tel'],
.bnws-cumato-form-v2:not(.boows-form) input[type='date'],
.bnws-cumato-form-v2:not(.boows-form) input[type='time'],
.bnws-cumato-form-v2:not(.boows-form) input[type='datetime-local'],
.bnws-cumato-form-v2:not(.boows-form) textarea,
.bnws-cumato-form-v2:not(.boows-form) select {
width: 100%;
border: 1px solid var(--bnws-v2-border);
border-radius: var(--bnws-v2-input-radius);
padding: 10px 12px;
box-sizing: border-box;
color: var(--bnws-v2-text);
}
.bnws-cumato-form-v2 .bnws-cumato-radio-wrap {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 6px;
}
.bnws-cumato-form-v2 .bnws-cumato-v2-checkbox-group .boows-input-field,
.bnws-cumato-form-v2 .bnws-cumato-v2-radio-group .boows-input-field {
margin-bottom: 6px;
}
.bnws-cumato-form-v2.boows-form .boows-input-field {
margin-bottom: 8px;
}
.bnws-cumato-form-v2 .bnws-cumato-signature-canvas {
width: 100%;
max-width: 100%;
height: 220px;
background: #fff;
border: 1px dashed #9ca3af;
border-radius: var(--bnws-v2-input-radius);
touch-action: none;
display: block;
}
.bnws-cumato-form-v2 .bnws-cumato-signature-clear {
margin-top: 8px;
border: 0;
border-radius: var(--bnws-v2-pill-radius);
padding: 7px 14px;
background: #f1f5f9;
}
.bnws-cumato-form-v2 .boows-select-button {
min-height: var(--boows-input-height, 2.8rem);
height: var(--boows-input-height, 2.8rem);
margin: 0;
}
.bnws-cumato-form-v2 .boows-select-button .boows-select-button-option {
min-height: var(--boows-input-height, 2.8rem);
padding: 0 var(--boows-input-padding-x, 0.75rem);
line-height: 1.2;
}
.bnws-cumato-form-v2:not(.boows-form) .bnws-cumato-form-v2-submit {
border: 1px solid var(--bnws-v2-primary);
background: var(--bnws-v2-primary);
color: #fff;
border-radius: var(--bnws-v2-radius);
padding: 10px 14px;
font-size: 14px;
cursor: pointer;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-help {
display: block;
margin-top: 6px;
color: var(--bnws-v2-muted);
font-size: 12px;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-error {
margin-top: 6px;
min-height: 16px;
font-size: 12px;
color: var(--bnws-v2-error);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error input,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error select,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error textarea,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .bnws-cumato-signature,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .boows-container,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .boows-input-inner-box,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .boows-select,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .boows-select-button {
border-color: var(--bnws-v2-error);
}
.bnws-cumato-form-v2 .bnws-v2-input-error {
border-color: var(--bnws-v2-error) !important;
box-shadow: none !important;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .radio-checkmark,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field .boows-input-field.bnws-v2-input-error .radio-checkmark {
border-color: var(--bnws-v2-error) !important;
box-shadow: 0 0 0 2px rgba(var(--bnws-v2-error-rgb), 0.14);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field.has-error .boows-radio input:checked + .radio-checkmark::after,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-field .boows-input-field.bnws-v2-input-error .boows-radio input:checked + .radio-checkmark::after {
background: var(--bnws-v2-error);
}
.bnws-cumato-form-v2 .boows-error-text {
color: var(--bnws-v2-error);
}
.bnws-cumato-form-v2 .bnws-cumato-block-heading {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
}
.bnws-cumato-form-v2 .bnws-cumato-block-html {
font-size: 14px;
line-height: 1.5;
}
.bnws-cumato-form-v2 .bnws-cumato-block-separator {
border: 0;
border-top: 1px solid var(--bnws-v2-border);
margin: 10px 0;
}
.flatpickr-calendar {
background: var(--boows-input-bg, #fff) !important;
border-color: var(--boows-input-border, #cbd5e1) !important;
color: var(--boows-col-text, #0f172a) !important;
box-shadow: 0 12px 28px rgba(var(--boows-col-text-rgb, 15, 23, 42), 0.18) !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar span.flatpickr-weekday {
color: var(--boows-col-text, #0f172a) !important;
}
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
background: var(--bnws-v2-primary) !important;
color: #fff !important;
}
.flatpickr-months {
border-bottom: 1px solid var(--boows-input-border, #cbd5e1) !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
color: #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
background: rgba(255, 255, 255, 0.14) !important;
color: #fff !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: #fff !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: #fff !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg path {
fill: #fff !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
background: rgba(var(--bnws-v2-primary-rgb), 0.1) !important;
border-color: rgba(var(--bnws-v2-primary-rgb), 0.28) !important;
}
.flatpickr-day.today {
border-color: rgba(var(--bnws-v2-primary-rgb), 0.62) !important;
}
.flatpickr-day.inRange {
background: rgba(var(--bnws-v2-primary-rgb), 0.16) !important;
border-color: rgba(var(--bnws-v2-primary-rgb), 0.12) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
background: var(--bnws-v2-primary) !important;
border-color: var(--bnws-v2-primary) !important;
color: #fff !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
background: rgba(var(--bnws-v2-primary-rgb), 0.1) !important;
}
.bnws-cumato-form-v2.boows-rounded :is(
.boows-form-style-outline,
.boows-form-style-filled,
.boows-form-style-borderless,
.boows-form-soft-bg,
.boows-input-field.boows-form-style-outline,
.boows-input-field.boows-form-style-filled,
.boows-input-field.boows-form-style-borderless,
.boows-input-field.boows-form-soft-bg
) {
--boows-form-field-radius: var(--boows-default-border-container, 14px);
--boows-form-textarea-radius: var(--boows-default-border-container, 14px);
}
.bnws-cumato-form-v2.boows-pill :is(
.boows-form-style-outline,
.boows-form-style-filled,
.boows-form-style-borderless,
.boows-form-soft-bg,
.boows-input-field.boows-form-style-outline,
.boows-input-field.boows-form-style-filled,
.boows-input-field.boows-form-style-borderless,
.boows-input-field.boows-form-soft-bg
) {
--boows-form-field-radius: var(--boows-default-border-pill, 999px);
--boows-form-textarea-radius: var(--boows-default-border-container, 24px);
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-actions {
margin-top: 8px;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-actions {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-prev,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-next,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-submit {
min-width: 120px;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-submit-btn {
min-width: 140px;
}
.bnws-cumato-form-v2.is-submitting .bnws-cumato-form-v2-step-submit,
.bnws-cumato-form-v2.is-submitting .bnws-cumato-form-v2-submit-btn {
opacity: 0.7;
pointer-events: none;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-submit.is-loading,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-submit-btn.is-loading {
position: relative;
color: transparent !important;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-step-submit.is-loading::after,
.bnws-cumato-form-v2 .bnws-cumato-form-v2-submit-btn.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin-left: -8px;
margin-top: -8px;
border-radius: 50%;
border: 2px solid rgba(var(--bnws-v2-primary-rgb, 15, 118, 110), 0.24);
border-top-color: var(--bnws-v2-primary, #0f766e);
animation: bnws-cumato-v2-spin 0.8s linear infinite;
}
.bnws-cumato-form-v2.is-submitting .bnws-cumato-form-v2-body {
pointer-events: none;
}
@keyframes bnws-cumato-v2-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 782px) {
.bnws-cumato-form-v2 .bnws-cumato-form-v2-row {
gap: 12px;
}
.bnws-cumato-form-v2 .bnws-cumato-form-v2-col {
grid-column: span 12 !important;
}
}