:root{--form-font-family:var(--font-global);--form-green:#006300;--form-red:#8a2301;}fieldset{padding:0;margin:0;border:0 none;}.form-offscreen{position:absolute;left:-99999rem;}.form-heading{font-family:var(--form-font-family);}.form-heading span{font-size:.8rem;line-height:1;}.form{width:min(550px,100%);padding:var(--gap-medium);background-color:#f3f3f3;margin:auto;font-family:var(--form-font-family);}.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form input[type="number"],.form input[type="password"]{transition:var(--transition-global);height:42px;padding:var(--gap-small);font-size:20px;touch-action:manipulation;font-family:var(--form-font-family);font-weight:400;width:100%;max-width:100%;border:thin solid #333;border-radius:8px;}.form-row{margin:0;display:flex;gap:var(--gap-medium);min-width:calc(100% - var(--gap-medium));}.form-row:nth-child(n+2){margin:var(--gap-large) 0 0;}.form-row [class*='-status']{flex:none;width:32px;height:32px;background:#ffffff;border-radius:1000px;margin:auto;position:relative;}.form-row.gap-xsmall{gap:var(--gap-xsmall);}.form-row.gap-small{gap:var(--gap-small);}.form-row.margin-top-xlarge{margin-top:var(--gap-xlarge);}.form-row .phone-status,.form-row .username-status,.form-row .email-status{margin:auto 0 8px auto;}.form-row .password-status.mismatch,.form-row .username-status.is-taken{background:url('../images/icons/xmark-solid-full.svg?g=f') center no-repeat #fffe;background-size:25px;}.form-row .username-status.is-taken:before{content:"Username Taken!";}.form-row .username-status.is-checking:before{content:"Checking that...";}.form-row .username-status.is-taken:before,.form-row .username-status.is-checking:before{position:absolute;display:block;top:-28px;right:0;width:150px;text-align:right;font-size:14px;}.form-row .username-status.is-available,.form-row .password-status.valid,.form-row .phone-status.valid,.form-row .email-status.valid,.form-row .name-status.one-valid{background:url('../images/icons/check-solid-full.svg?g=f') center no-repeat #fffe;background-size:25px;}.form-row .name-status.two-valid{background:url('../images/icons/check-double-solid-full.svg?f=e') center no-repeat #fffe;background-size:25px;}.form-row.form-row-phone input.partial-valid{border-color:#c73522;border-width:2px;}.form-label{font-weight:700;color:#000;font-size:1.3rem;}.form-label i{font-size:.7em;color:#595959;font-weight:400;}.form-label .form-error{margin-left:auto;margin-right:55px;font-size:13px;font-weight:400;padding-left:3px;}@media (width <= 440px){.form-label .form-error{margin-right:15px}}.form-label-sub{font-size:1.1rem;}#area_code,#prefix{width:70px;text-align:center;}#suffix{width:85px;text-align:center;}.form-label-button{display:inline-flex;padding:var(--gap-small);align-items:center;justify-content:center;background:#fff;color:#222;border-radius:5px;transition:188ms ease;height:32px;}input:checked + .form-label-button,input:checked:focus + .form-label-button,.form-label-button:hover{background:var(--form-green);color:#fff;}input:checked:focus + .form-label-button{outline:thin solid #000;}input:checked + .form-label-button[for='no_text']{background:var(--form-red);}.text-negative{color:var(--form-red);}.form-footer #form-submit{background:#fff;border:0 none;padding:var(--gap-medium) var(--gap-large);font-size:1.2rem;text-transform:uppercase;letter-spacing:.06ch;border-radius:3px;margin-left:auto;color:#111;transition:var(--transition-global);}.form-footer #form-submit:hover,.form-footer #form-submit:focus{background:var(--form-green);}.form-footer .btn-clear-draft{background:none;border:0 none;font-size:15px;padding:0;color:#333;transition:var(--transition-global);}.form-footer .btn-clear-draft:hover,.form-footer .btn-clear-draft:focus{text-decoration:underline;}@media (width <= 630px){.form-label-button{font-size:14px;width:200px}.form-labels{justify-content:center}.form-footer button{font-size:1.1rem;padding:var(--gap-small) var(--gap-medium)}.form #area_code,.form #prefix{width:60px;font-size:18px;}.form #suffix{width:75px;font-size:18px;}}section#theGreatSampleForm{position:relative;}section#theGreatSampleForm:before{content:"Thanks!Looks good!";opacity:0;pointer-events:none;}section#theGreatSampleForm.form-processing:before{content:"Thanks!Looks good!";display:flex;align-items:center;justify-content:center;background:#eee;position:absolute;inset:-18px;opacity:1;transition:var(--transition-global);z-index:100;}.success-panel{position:relative;z-index:5;}.success-panel h3{font-family:var(--form-font-family);font-size:1.8rem;font-weight:700;}.success-panel p{margin:var(--gap-small) var(--gap-xsmall);font-size:1.3rem;color:#333;}.pineapple-img{min-width:45px;width:45px;}.pineapple-img img{rotate:-16deg;filter:drop-shadow(-1px 4px 2px #d941055b);}.success-panel p.disclaimer{padding-top:12px;border-top:thin solid #ddd;font-weight:700;font-size:1.1rem;}:root{--blue-primary:#094a75;}@keyframes popIn{from{transform:translate(-30px,80px)}to{transform:translate(0,0)}}section.colors{background:#fff;padding:var(--gap-large) var(--gap-small);width:min(550px,100%);margin:0 auto;transition:var(--global-transition);transition-property:box-shadow,outline;outline:thin solid transparent;}.color-block>#colorLabel{background:#fff;font-size:2rem;line-height:1.25;padding:8px;width:100%;box-sizing:border-box;font-weight:700;display:block;text-align:center;}.color-block{overflow:hidden;}.color-block div{display:flex;}#favoriteColor{transition:var(--global-transition);margin-right:.3ch;text-shadow:1px 1px 1px #fff;}#favoriteColor.light-text{text-shadow:1px 1px 1px rgba(68,68,68,.667)}.color-picker{display:flex;justify-content:center;gap:30px;padding:10px;margin-bottom:5px;box-sizing:border-box;background:#fff;transition:var(--global-transition);}.color-picker div{width:50px;height:50px;border-radius:1000px;box-sizing:border-box;will-change:transform;transform:translate(-30px,80px);animation-name:popIn;animation-timing-function:cubic-bezier(.68,-.55,.27,1.25);animation-duration:700ms;animation-fill-mode:forwards;animation-iteration-count:1;animation-delay:500ms;transform-origin:bottom-right;}section.colors:has(input:focus){outline:thin solid var(--color-primary);box-shadow:0 0 4px 2px rgba(58,58,58,.118);}.color-picker div:nth-of-type(2){animation-delay:600ms;}.color-picker div:nth-of-type(3){animation-delay:700ms;}.color-picker div:nth-of-type(4){animation-delay:800ms;}.color-picker div:nth-of-type(5){animation-delay:900ms;}.color-picker div:nth-of-type(6){animation-delay:1000ms;}@media (pointer:coarse){.color-picker div:nth-of-type(6){display:none}}.color-picker input[type="radio"]{position:absolute;left:-99999rem;}.color-picker input[type="color"]{appearance:none;visibility:hidden;width:0;border:none;padding:0;height:0;}.color-picker label{display:flex;justify-content:center;align-items:center;flex:1;position:relative;padding:7px;border-radius:inherit;will-change:transform;transition:222ms ease-out;transform-origin:bottom center;transform:translateY(0) scale(1);border:thin solid transparent;}.color-picker label:hover{transform:translateY(-4px) scale(1.1);}.color-picker #red + label{background:red;}.color-picker #blue + label{background:mediumblue;}.color-picker #green + label{background:green;}.color-picker #orange + label{background:orange;}.color-picker #purple + label{background:blueviolet;}.color-picker #other+ label{color:#fff;}.color-picker #other + label[style]{text-indent:-9999rem;}#colorLabel:has(.light-text) + .color-picker #pickColor{border:thin solid #ccc;}.color-picker label:after{content:"";display:block;position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #000000;bottom:-15px;transition:222ms ease-out;transform:translateY(20px)}.color-picker input:checked ~ label{transform:none;}.color-picker input:checked ~ label:after,.color-picker label.custom:after{transform:translateY(0)}@media (width <= 640px){.color-picker{gap:18px}.color-picker>div{min-width:35px;max-width:35px;height:35px}.color-block>#colorLabel{font-size:1.8rem}}@media (width <= 440px){.color-block>#colorLabel{font-size:1.4rem}}header.example-header{margin-top:15px;}