/* Scoped design utilities used by the Demo form. */

#demo-form{
height:auto}
#demo-form,#demo-form *,#demo-form::after,#demo-form *::after,#demo-form::before,#demo-form *::before{
--tw-border-spacing-x:0;
--tw-border-spacing-y:0;
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness:proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-color:#3b82f680;
--tw-ring-offset-shadow:0 0 #0000;
--tw-ring-shadow:0 0 #0000;
--tw-shadow:0 0 #0000;
--tw-shadow-colored:0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: }
#demo-form::backdrop,#demo-form *::backdrop{
--tw-border-spacing-x:0;
--tw-border-spacing-y:0;
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness:proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-color:#3b82f680;
--tw-ring-offset-shadow:0 0 #0000;
--tw-ring-shadow:0 0 #0000;
--tw-shadow:0 0 #0000;
--tw-shadow-colored:0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: }
#demo-form,#demo-form *,#demo-form::after,#demo-form *::after,#demo-form::before,#demo-form *::before{
border:0 solid #e5e7eb;
box-sizing:border-box}
#demo-form::after,#demo-form *::after,#demo-form::before,#demo-form *::before{
--tw-content:""}
#demo-form{
-webkit-text-size-adjust:100%;
font-feature-settings:normal;
-webkit-tap-highlight-color:transparent;
font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
font-variation-settings:normal;
line-height:1.5;
tab-size:4}
#demo-form{}
#demo-form hr{
border-top-width:1px;
color:inherit;
height:0}
#demo-form abbr:where([title]){
-webkit-text-decoration:underline dotted;
text-decoration:underline dotted}
#demo-form h1,#demo-form h2,#demo-form h3,#demo-form h4,#demo-form h5,#demo-form h6{
font-size:inherit;
font-weight:inherit}
#demo-form a{
color:inherit;
text-decoration:inherit}
#demo-form b,#demo-form strong{
font-weight:bolder}
#demo-form code,#demo-form kbd,#demo-form pre,#demo-form samp{
font-feature-settings:normal;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-size:1em;
font-variation-settings:normal}
#demo-form small{
font-size:80%}
#demo-form sub,#demo-form sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:initial}
#demo-form sub{
bottom:-.25em}
#demo-form sup{
top:-.5em}
#demo-form table{
border-collapse:collapse;
border-color:inherit;
text-indent:0}
#demo-form button,#demo-form input,#demo-form optgroup,#demo-form select,#demo-form textarea{
font-feature-settings:inherit;
color:inherit;
font-family:inherit;
font-size:100%;
font-variation-settings:inherit;
font-weight:inherit;
letter-spacing:inherit;
line-height:inherit;
margin:0;
padding:0}
#demo-form button,#demo-form select{
text-transform:none}
#demo-form button,#demo-form input:where([type=button]),#demo-form input:where([type=reset]),#demo-form input:where([type=submit]){
-webkit-appearance:button;
background-color:initial;
background-image:none}
#demo-form :-moz-focusring{
outline:auto}
#demo-form :-moz-ui-invalid{
box-shadow:none}
#demo-form progress{
vertical-align:initial}
#demo-form ::-webkit-inner-spin-button,#demo-form ::-webkit-outer-spin-button{
height:auto}
#demo-form [type=search]{
-webkit-appearance:textfield;
outline-offset:-2px}
#demo-form ::-webkit-search-decoration{
-webkit-appearance:none}
#demo-form ::-webkit-file-upload-button{
-webkit-appearance:button;
font:inherit}
#demo-form summary{
display:list-item}
#demo-form blockquote,#demo-form dd,#demo-form dl,#demo-form figure,#demo-form h1,#demo-form h2,#demo-form h3,#demo-form h4,#demo-form h5,#demo-form h6,#demo-form hr,#demo-form p,#demo-form pre{
margin:0}
#demo-form fieldset{
margin:0}
#demo-form fieldset,#demo-form legend{
padding:0}
#demo-form menu,#demo-form ol,#demo-form ul{
list-style:none;
margin:0;
padding:0}
#demo-form dialog{
padding:0}
#demo-form textarea{
resize:vertical}
#demo-form input::placeholder,#demo-form textarea::placeholder{
color:#9ca3af;
opacity:1}
#demo-form [role=button],#demo-form button{
cursor:pointer}
#demo-form :disabled{
cursor:default}
#demo-form audio,#demo-form canvas,#demo-form embed,#demo-form iframe,#demo-form img,#demo-form object,#demo-form svg,#demo-form video{
display:block;
vertical-align:middle}
#demo-form img,#demo-form video{
height:auto;
max-width:100%}
#demo-form [hidden]:where(:not([hidden=until-found])){
display:none}
#demo-form{
--background:0 0% 100%;
--foreground:0 0% 3.9%;
--card:0 0% 100%;
--card-foreground:0 0% 3.9%;
--popover:0 0% 100%;
--popover-foreground:0 0% 3.9%;
--primary:0 0% 9%;
--primary-foreground:0 0% 98%;
--secondary:0 0% 96.1%;
--secondary-foreground:0 0% 9%;
--muted:0 0% 96.1%;
--muted-foreground:0 0% 45.1%;
--accent:0 0% 96.1%;
--accent-foreground:0 0% 9%;
--destructive:0 84.2% 60.2%;
--destructive-foreground:0 0% 98%;
--border:0 0% 89.8%;
--input:0 0% 89.8%;
--ring:0 0% 3.9%;
--radius:8px}
#demo-form,#demo-form *{
border-color:hsl(var(--border))}
#demo-form .visible{
visibility:visible}
#demo-form .relative{
position:relative}
#demo-form .mx-2\.5{
margin-left:10px;
margin-right:10px}
#demo-form .mx-auto{
margin-left:auto;
margin-right:auto}
#demo-form .mb-1{
margin-bottom:4px}
#demo-form .mb-1\.5{
margin-bottom:6px}
#demo-form .mb-8{
margin-bottom:32px}
#demo-form .mt-2{
margin-top:8px}
#demo-form .mt-3{
margin-top:12px}
#demo-form .mt-4{
margin-top:16px}
#demo-form .mt-5{
margin-top:20px}
#demo-form .mt-6{
margin-top:24px}
#demo-form .mt-8{
margin-top:32px}
#demo-form .block{
display:block}
#demo-form .flex{
display:flex}
#demo-form .inline-flex{
display:inline-flex}
#demo-form .table{
display:table}
#demo-form .grid{
display:grid}
#demo-form .hidden{
display:none}
#demo-form .h-16{
height:64px}
#demo-form .h-3{
height:12px}
#demo-form .h-3\.5{
height:14px}
#demo-form .h-4{
height:16px}
#demo-form .h-5{
height:20px}
#demo-form .h-6{
height:24px}
#demo-form .h-8{
height:32px}
#demo-form .h-9{
height:36px}
#demo-form .h-px{
height:1px}
#demo-form .min-h-\[380px\]{
min-height:380px}
#demo-form .min-h-\[480px\]{
min-height:480px}
#demo-form .w-16{
width:64px}
#demo-form .w-3{
width:12px}
#demo-form .w-3\.5{
width:14px}
#demo-form .w-4{
width:16px}
#demo-form .w-5{
width:20px}
#demo-form .w-6{
width:24px}
#demo-form .w-8{
width:32px}
#demo-form .w-9{
width:36px}
#demo-form .w-full{
width:100%}
#demo-form .max-w-sm{
max-width:384px}
#demo-form .flex-1{
flex:1 1 0%}
#demo-form .transform{
transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
@keyframes pulse{
50%{
opacity:.5}}
#demo-form .cursor-default{
cursor:default}
#demo-form .cursor-not-allowed{
cursor:not-allowed}
#demo-form .cursor-pointer{
cursor:pointer}
#demo-form .grid-cols-2{
grid-template-columns:repeat(2,minmax(0,1fr))}
#demo-form .grid-cols-3{
grid-template-columns:repeat(3,minmax(0,1fr))}
#demo-form .flex-col{
flex-direction:column}
#demo-form .items-center{
align-items:center}
#demo-form .items-baseline{
align-items:baseline}
#demo-form .justify-center{
justify-content:center}
#demo-form .justify-between{
justify-content:space-between}
#demo-form .gap-1{
gap:4px}
#demo-form .gap-1\.5{
gap:6px}
#demo-form .gap-2{
gap:8px}
#demo-form .gap-2\.5{
gap:10px}
#demo-form .gap-3{
gap:12px}
#demo-form .gap-4{
gap:16px}
#demo-form .self-center{
align-self:center}
#demo-form .overflow-x-clip{
overflow-x:clip}
#demo-form .rounded-3xl{
border-radius:24px}
#demo-form .rounded-full{
border-radius:9999px}
#demo-form .rounded-lg{
border-radius:var(--radius)}
#demo-form .rounded-xl{
border-radius:12px}
#demo-form .rounded-tr-none{
border-top-right-radius:0}
#demo-form .border{
border-width:1px}
#demo-form .border-2{
border-width:2px}
#demo-form .border-t{
border-top-width:1px}
#demo-form .border-\[\#000823\]{
--tw-border-opacity:1;
border-color:rgb(0 8 35/var(--tw-border-opacity,1))}
#demo-form .border-\[\#0b1633\]\/10{
border-color:#0b16331a}
#demo-form .border-\[\#0b1633\]\/15{
border-color:#0b163326}
#demo-form .border-\[\#0b1633\]\/25{
border-color:#0b163340}
#demo-form .border-\[\#28ccc1\]{
--tw-border-opacity:1;
border-color:rgb(40 204 193/var(--tw-border-opacity,1))}
#demo-form .border-white\/40{
border-color:#fff6}
#demo-form .bg-\[\#000823\]{
--tw-bg-opacity:1;
background-color:rgb(0 8 35/var(--tw-bg-opacity,1))}
#demo-form .bg-\[\#0b1633\]\/10{
background-color:#0b16331a}
#demo-form .bg-\[\#28ccc1\]{
--tw-bg-opacity:1;
background-color:rgb(40 204 193/var(--tw-bg-opacity,1))}
#demo-form .bg-\[\#28ccc1\]\/10{
background-color:#28ccc11a}
#demo-form .bg-\[\#28ccc1\]\/50{
background-color:#28ccc180}
#demo-form .bg-\[\#28ccc1\]\/\[0\.08\]{
background-color:#28ccc114}
#demo-form .bg-\[\#b50525\]{
--tw-bg-opacity:1;
background-color:rgb(181 5 37/var(--tw-bg-opacity,1))}
#demo-form .bg-\[\#b50525\]\/35{
background-color:#b5052559}
#demo-form .bg-transparent{
background-color:initial}
#demo-form .bg-white{
--tw-bg-opacity:1;
background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
#demo-form .p-1{
padding:4px}
#demo-form .p-2{
padding:8px}
#demo-form .p-3{
padding:12px}
#demo-form .p-4{
padding:16px}
#demo-form .p-5{
padding:20px}
#demo-form .px-2{
padding-left:8px;
padding-right:8px}
#demo-form .px-2\.5{
padding-left:10px;
padding-right:10px}
#demo-form .px-4{
padding-left:16px;
padding-right:16px}
#demo-form .px-6{
padding-left:24px;
padding-right:24px}
#demo-form .px-8{
padding-left:32px;
padding-right:32px}
#demo-form .py-2{
padding-bottom:8px;
padding-top:8px}
#demo-form .py-2\.5{
padding-bottom:10px;
padding-top:10px}
#demo-form .py-3{
padding-bottom:12px;
padding-top:12px}
#demo-form .py-4{
padding-bottom:16px;
padding-top:16px}
#demo-form .pb-1{
padding-bottom:4px}
#demo-form .pt-6{
padding-top:24px}
#demo-form .text-center{
text-align:center}
#demo-form .text-\[11px\]{
font-size:11px}
#demo-form .text-\[12\.5px\]{
font-size:12.5px}
#demo-form .text-\[13\.5px\]{
font-size:13.5px}
#demo-form .text-\[13px\]{
font-size:13px}
#demo-form .text-\[14px\]{
font-size:14px}
#demo-form .text-\[15px\]{
font-size:15px}
#demo-form .text-\[19px\]{
font-size:19px}
#demo-form .text-\[26px\]{
font-size:26px}
#demo-form .font-bold{
font-weight:700}
#demo-form .font-medium{
font-weight:500}
#demo-form .font-semibold{
font-weight:600}
#demo-form .uppercase{
text-transform:uppercase}
#demo-form .leading-relaxed{
line-height:1.625}
#demo-form .tracking-\[0\.14em\]{
letter-spacing:.14em}
#demo-form .tracking-wide{
letter-spacing:.025em}
#demo-form .text-\[\#000823\]{
--tw-text-opacity:1;
color:rgb(0 8 35/var(--tw-text-opacity,1))}
#demo-form .text-\[\#012622\]{
--tw-text-opacity:1;
color:rgb(1 38 34/var(--tw-text-opacity,1))}
#demo-form .text-\[\#0b1633\]{
--tw-text-opacity:1;
color:rgb(11 22 51/var(--tw-text-opacity,1))}
#demo-form .text-\[\#0b1633\]\/20{
color:#0b163333}
#demo-form .text-\[\#0e9a91\]{
--tw-text-opacity:1;
color:rgb(14 154 145/var(--tw-text-opacity,1))}
#demo-form .text-\[\#28ccc1\]{
--tw-text-opacity:1;
color:rgb(40 204 193/var(--tw-text-opacity,1))}
#demo-form .text-\[\#3a445c\]{
--tw-text-opacity:1;
color:rgb(58 68 92/var(--tw-text-opacity,1))}
#demo-form .text-\[\#b50525\]{
--tw-text-opacity:1;
color:rgb(181 5 37/var(--tw-text-opacity,1))}
#demo-form .text-slate-400{
--tw-text-opacity:1;
color:rgb(148 163 184/var(--tw-text-opacity,1))}
#demo-form .text-slate-500{
--tw-text-opacity:1;
color:rgb(100 116 139/var(--tw-text-opacity,1))}
#demo-form .text-white{
--tw-text-opacity:1;
color:rgb(255 255 255/var(--tw-text-opacity,1))}
#demo-form .shadow{
--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}
#demo-form .shadow{
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
#demo-form .shadow-\[0_10px_30px_-10px_rgba\(181\2c 5\2c 37\2c 0\.6\)\]{
--tw-shadow:0 10px 30px -10px #b5052599;
--tw-shadow-colored:0 10px 30px -10px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
#demo-form .shadow-\[0_40px_90px_-40px_rgba\(0\2c 0\2c 0\2c 0\.85\)\]{
--tw-shadow:0 40px 90px -40px #000000d9;
--tw-shadow-colored:0 40px 90px -40px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
#demo-form .outline-none{
outline:2px solid #0000;
outline-offset:2px}
#demo-form .outline{
outline-style:solid}
#demo-form .ring-1{
box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
#demo-form .ring-1{
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}
#demo-form .ring-\[\#0b1633\]\/10{
--tw-ring-color:#0b16331a}
#demo-form .filter{
filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
#demo-form .transition{
transition-duration:.15s;
transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;
transition-timing-function:cubic-bezier(.4,0,.2,1)}
#demo-form .transition-colors{
transition-duration:.15s;
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;
transition-timing-function:cubic-bezier(.4,0,.2,1)}
#demo-form .transition-transform{
transition-duration:.15s;
transition-property:transform;
transition-timing-function:cubic-bezier(.4,0,.2,1)}
#demo-form .duration-150{
transition-duration:.15s}
#demo-form .duration-200{
transition-duration:.2s}
#demo-form .duration-300{
transition-duration:.3s}
#demo-form .duration-150{
animation-duration:.15s}
#demo-form .duration-200{
animation-duration:.2s}
#demo-form .duration-300{
animation-duration:.3s}





#demo-form{
scroll-behavior:auto}
#demo-form{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
background-color:#000823;
font-family:Founders Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
font-weight:300;
margin:0;
text-rendering:optimizeLegibility}
#demo-form code{
font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
#demo-form::selection,#demo-form *::selection{
background:#28ccc1;
color:#012622}
#demo-form .font-heading{
font-family:Founders Grotesk,sans-serif}
#demo-form .surface-silver{
background:linear-gradient(165deg,#f7f9fc,#e9edf4 48%,#d9dfec)}
@keyframes pulseHint{
0%,to{
box-shadow:0 0 0 0 #28ccc173}
50%{
box-shadow:0 0 0 7px #28ccc100}}
#demo-form .pulse-hint{
animation:pulseHint 2s ease-in-out infinite}
#demo-form .placeholder\:text-slate-400::placeholder{
--tw-text-opacity:1;
color:rgb(148 163 184/var(--tw-text-opacity,1))}
#demo-form .hover\:border-\[\#000823\]:hover{
--tw-border-opacity:1;
border-color:rgb(0 8 35/var(--tw-border-opacity,1))}
#demo-form .hover\:border-\[\#28ccc1\]:hover{
--tw-border-opacity:1;
border-color:rgb(40 204 193/var(--tw-border-opacity,1))}
#demo-form .hover\:bg-\[\#000823\]:hover{
--tw-bg-opacity:1;
background-color:rgb(0 8 35/var(--tw-bg-opacity,1))}
#demo-form .hover\:bg-\[\#0b1633\]\/5:hover{
background-color:#0b16330d}
#demo-form .hover\:bg-\[\#28ccc1\]:hover{
--tw-bg-opacity:1;
background-color:rgb(40 204 193/var(--tw-bg-opacity,1))}
#demo-form .hover\:bg-\[\#d40a2f\]:hover{
--tw-bg-opacity:1;
background-color:rgb(212 10 47/var(--tw-bg-opacity,1))}
#demo-form .hover\:text-\[\#012622\]:hover{
--tw-text-opacity:1;
color:rgb(1 38 34/var(--tw-text-opacity,1))}
#demo-form .hover\:text-\[\#0b1633\]:hover{
--tw-text-opacity:1;
color:rgb(11 22 51/var(--tw-text-opacity,1))}
#demo-form .hover\:text-white:hover{
--tw-text-opacity:1;
color:rgb(255 255 255/var(--tw-text-opacity,1))}
#demo-form .disabled\:opacity-25:disabled{
opacity:.25}
#demo-form .disabled\:hover\:bg-transparent:hover:disabled{
background-color:initial}
#demo-form .group:hover .group-hover\:translate-x-1{
--tw-translate-x:4px}
#demo-form .group:hover .group-hover\:translate-x-1{
transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
@media (min-width:640px){
#demo-form .sm\:col-span-2{
grid-column:span 2/span 2}
#demo-form .sm\:grid{
display:grid}
#demo-form .sm\:grid-cols-2{
grid-template-columns:repeat(2,minmax(0,1fr))}
#demo-form .sm\:grid-cols-4{
grid-template-columns:repeat(4,minmax(0,1fr))}
#demo-form .sm\:p-9{
padding:36px}}

/* Keep theme element defaults outside the Demo form. */
#demo-form {
	font-size: 16px;
}
#demo-form [data-demo-form] .demo-weekday-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

#demo-form * {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	margin: 0;
	max-width: none;
	padding: 0;
	text-align: inherit;
	text-transform: none;
}
#demo-form h1,
#demo-form h2,
#demo-form h3,
#demo-form h4,
#demo-form h5,
#demo-form h6,
#demo-form p,
#demo-form li,
#demo-form blockquote {
	line-height: 1.5;
}


/* Demo form layout and field states. */
.page-template-page-new-demo-landing .ndl__right {
    min-width: 0;
    overflow: visible;
}
#demo-form {
    width: 100%;
    min-width: 0;
    text-align: left;
}
#demo-form [data-demo-form] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
}
#demo-form input {
    min-width: 0;
}
#demo-form [data-demo-form] input:focus {
    border-color: #0e9a91;
}
#demo-form [data-demo-form] input:focus-visible {
    outline: 2px solid #0e9a9140;
    outline-offset: 2px;
}
/* Focus keeps its usual look, so a field being corrected does not carry two colours. */
#demo-form [data-demo-form] input[aria-invalid="true"]:not(:focus) {
    border-color: #b50525;
}
#demo-form [data-demo-form] input:is(:autofill, :-webkit-autofill) {
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #0b1633;
    caret-color: #0b1633;
}
@media (forced-colors: active) {
    #demo-form [data-demo-form] input:is(:autofill, :-webkit-autofill) { box-shadow: none; -webkit-text-fill-color: CanvasText; }
}
#demo-form {
    /* The page owns its canvas; only the form carries the gray gradient. */
    background: transparent;
    container-type: inline-size;
}
@container (max-width: 420px) {
    #demo-form [data-testid="demo-submit"] {
        padding-left: 16px;
        padding-right: 16px;
    }
    #demo-form [data-demo-back] {
        padding-left: 4px;
        padding-right: 4px;
    }
}